Slider

micro-frontends/sandbox-ui/README.md

@@ -77,27 +77,27 @@ Refer [Storybook](https://unified-dev.digit.org/storybook/) to know more about t
 ## Project Structure
 
 ```
-sandbox-ui/
-├── packages/                      # Microfrontends
-│   ├── components/                # Shared React components
-│   │   └── src/                   # Source files for shared components
-│   ├── root-app/                  # Main rendered JS app
-│   │   ├── public/                # Public assets for root app
-│   │   ├── src/                   # Source files for root app
-│   ├── modules/                   # Microfrontend modules
-│   │   ├── account-mgmt/          # Account Management App
-│   │   │   ├── public/            # Public assets for module 1
-│   │   │   ├── src/               # Source files for module 1
-│   │   ├── data-mgmt/             # Data Management App
-│   │   │   ├── public/            # Public assets for module 2
-│   │   │   ├── src/               # Source files for module 2
-│   │   ├── user-app/              # User App
-│   │   │   ├── public/            # Public assets for module 2
-│   │   │   ├── src/               # Source files for module 2
-├── .gitignore                     # Git ignore file
-├── package.json                   # NPM package configuration
-├── lerna.json                     # Lerna configuration
-└── README.md                      # Project README
+    sandbox-ui/
+    ├── packages/                      # Microfrontends
+    │   ├── components/                # Shared React components
+    │   │   └── src/                   # Source files for shared components
+    │   ├── root-app/                  # Main rendered JS app
+    │   │   ├── public/                # Public assets for root app
+    │   │   ├── src/                   # Source files for root app
+    │   ├── modules/                   # Microfrontend modules
+    │   │   ├── account-mgmt/          # Account Management App
+    │   │   │   ├── public/            # Public assets for module 1
+    │   │   │   ├── src/               # Source files for module 1
+    │   │   ├── data-mgmt/             # Data Management App
+    │   │   │   ├── public/            # Public assets for module 2
+    │   │   │   ├── src/               # Source files for module 2
+    │   │   ├── user-app/              # User App
+    │   │   │   ├── public/            # Public assets for module 2
+    │   │   │   ├── src/               # Source files for module 2
+    ├── .gitignore                     # Git ignore file
+    ├── package.json                   # NPM package configuration
+    ├── lerna.json                     # Lerna configuration
+    └── README.md                      # Project README
 
 ```
 

micro-frontends/sandbox-ui/package.json

@@ -12,13 +12,13 @@
     "packages/modules/*"
   ],
   "dependencies": {
-    "@egovernments/digit-ui-components": "0.0.1-webpack.121",
+    "@egovernments/digit-ui-components": "^0.0.1-webpack.121",
     "@egovernments/sandbox-components": "0.0.5",
-    "webpack-dev-server": "^5.0.4",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-i18next": "15.0.0",
-    "react-router-dom": "6.25.1"
+    "react-router-dom": "6.25.1",
+    "webpack-dev-server": "^5.0.4"
   },
   "devDependencies": {
     "concurrently": "^6.2.1",
@@ -33,5 +33,3 @@
     "build": "lerna run build"
   }
 }
-
-

micro-frontends/sandbox-ui/packages/components/package.json

@@ -44,7 +44,8 @@
     "react-stepper-horizontal": "1.0.11",
     "react-tabs": "6.0.2",
     "localforage": "^1.10.0",
-    "@tanstack/react-query": "5.50.1"
+    "@tanstack/react-query": "5.50.1",
+    "@egovernments/digit-ui-components": "0.0.9-beta.1"
   },
   "peerDependencies": {
     "react": "18.3.1",

micro-frontends/sandbox-ui/packages/components/src/Button.js

@@ -1,5 +1,6 @@
 import React from 'react';
 
+
 export const Button = ({ children, onClick }) => {
   return (
     <button onClick={onClick}>

micro-frontends/sandbox-ui/packages/components/src/components/Slider.js

@@ -0,0 +1,154 @@
+import React, {useState,useEffect} from 'react';
+
+import { DigitUIComponents } from '../../../components/src';
+const { Button, TextBlock } = DigitUIComponents;
+import "./../css/index.css";
+import bellSvg from './../public/bell.svg'; 
+import cloudMoon from "./../public/cloud-moon-svgrepo-com.svg";
+import thunderCloud from "./../public/image.png";
+
+
+
+
+
+const dummyData = [
+  {
+    stepsArray: [
+      {
+        text: "The lantern flickered softly in the meadow as the symphony of the night began to unfold. A glacier shimmered in the horizon, while a bumblebee buzzed around a mosaic of flowers. Tranquil moments passed as circuit lights twinkled in the distance. An astronaut marveled at the quasar above, surrounded by a lattice of stars. The driftwood by the harbor created a charming prism of colors, as the ember of a cascade slowly dimmed. A tango played softly in the background, whispering a mirage of distant lands.",
+        bannerImage: "https://cdn.worldvectorlogo.com/logos/world-health-organization-logo-1.svg"
+      },
+      {
+        text: "In the heart of the fortress, an euphoria spread as the carousel spun with joy. The radiant lights reflected on a whistle that pierced through the thunder. Parchment maps lay scattered, revealing hidden frost patterns. A phoenix emerged from the eclipse, casting a bright drift across the land. An alloy of history and legend combined with the song of the meadowlark in an oasis of peace. Nebula clouds floated by the quarry, where quantum secrets were whispered among the stars. The luminary of the vortex created a new ember of hope.",
+        bannerImage: bellSvg
+      },
+      {
+        text: "The horizon glowed with a twilight hue as a mirage danced in the celestial sky. A spindle of light traced a path over the lantern by the glacier. The mosaic of stars above reflected the radiance of the vortex, while a gentle drift of cool air brought an echo of ancient quantum mysteries. The zenith of the night revealed a glowing ember, whispering secrets of a hidden prism. A cascade of light fell softly over the fortress, as the nimbus clouds gently rolled by. The harmony of nature intertwined with the sapphire night.",
+        bannerImage: cloudMoon
+      },
+      {
+        text: "As the odyssey of the day ended, the ecliptic sky showcased a radiant display. Oasis moments were filled with cryptic symbols of solstice magic. The aurora danced gracefully over the glacier, while a distant beacon lit the way through the nimbus clouds. Harmony settled in as the echo of the celestial realm intertwined with the horizon. Driftwood by the shore created a serene backdrop, and the serene landscape was adorned with a quasar of light. The twilight melded into a mirage of stars",
+        bannerImage: thunderCloud
+      }
+    ]
+  }
+];
+
+const Slider = ({ data = dummyData }) => {
+
+
+  const [currentStep, setCurrentStep] = useState(0);
+  const [isTransitioning,setIsTransitioning]=useState(false);
+  // useEffect(() => {
+  //   if(isTransitioning){
+  //     const timer=setTimeout(()=>setIsTransitioning(false),1500);
+  //     return ()=>clearTimeout(timer);
+  //   }
+  // }, [isTransitioning]); 
+
+  const handleNext = () => {
+    // if (isTransitioning) return;
+    setCurrentStep((prevStep) =>
+      prevStep < data[0].stepsArray.length - 1 ? prevStep + 1 : 0
+    );
+  };
+
+  const handlePrevious = () => {
+    // if (isTransitioning) return;
+    setCurrentStep((prevStep) =>
+      prevStep > 0 ? prevStep - 1 : data[0].stepsArray.length - 1
+    );
+  };
+
+  const handleClick = (e) => {
+    e.stopPropagation(); 
+    // console.log("e",e);
+    // console.log("native",e.nativeEvent);
+    // console.log("current target",e.currentTarget);
+    const {  offsetX } = e.nativeEvent;
+
+    const container = e.currentTarget; // Access the clicked element
+    const offsetWidth = container.offsetWidth;
+    console.log("container",container);
+
+    if (offsetX < offsetWidth / 2) {
+      handlePrevious();
+    } else {
+      handleNext();
+    }
+    console.log("ofwidth",offsetWidth);
+    console.log("ofX",offsetX);
+  };
+
+  const { text, bannerImage } = data[0].stepsArray[currentStep];
+
+  return (
+    <div className="slider-container" styles={{transition : "5s"}}onClick={handleClick}>
+
+
+      <img src={bannerImage} alt={`Slide ${currentStep}`} className="slider-image" />
+      <div className="slider-card">
+        <TextBlock
+          body={text}
+          headerContentClassName="custom-header-class"
+          subHeaderClasName="sub-header-class"
+          captionClassName=""
+          header="Slider"
+          subHeader=""
+        />
+      </div>
+
+      <div className="slider-dots">
+        {data[0].stepsArray.map((_, index) => (
+          <span
+            key={index}
+            className={`dot ${index === currentStep ? 'active' : ''}`}
+            onClick={ (e) => { 
+              e.stopPropagation();
+              setCurrentStep(index);
+            }}
+          />
+        ))}
+      </div>
+
+
+
+
+      {/* <div className="slider-buttons">
+        <Button
+          className="slider-button"
+
+          icon="ArrowBack"
+          isSuffix
+          label=""
+          onClick={handlePrevious}
+          options={[]}
+          optionsKey=""
+          size="small"
+          style={{}}
+          title=""
+          variation="secondary"
+        />
+
+
+        <Button
+          className="slider-button"
+
+          icon="ArrowForward"
+          isSuffix
+          label=""
+          onClick={handleNext}
+          options={[]}
+          optionsKey=""
+          size="small"
+          style={{}}
+          title=""
+          variation="secondary"
+        />
+      </div> */}
+
+    </div>
+  );
+};
+
+export default Slider;

micro-frontends/sandbox-ui/packages/components/src/css/index.css

@@ -0,0 +1,145 @@
+.slider-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0;
+    width: 22rem;
+    height: 100vh;
+    justify-content: center;
+    position: relative;
+    cursor: pointer;
+
+  }
+
+  .slider-image {
+    height: 100vh;
+    width: 22rem;
+    border-radius: 8px;
+    color: red;
+    transition: opacity 1.5s ease-in-out;
+
+  }
+  .slider-image.fade-in {
+    opacity: 1;
+  }
+
+  .slider-image.fade-out {
+    opacity: 0;
+  }
+
+  .slider-card {
+    background-color: rgba(104, 104, 255, 0.6);
+    border-radius: 0.7rem;
+    position: absolute;
+    top: 0;
+    height: 25rem;
+    width: 22rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .slider-text {
+    position: absolute;
+    top: 10rem;
+    left: 50%;
+    transform: translateX(-50%);
+    color: white;
+    font-size: 1.2em;
+    text-align: center;
+    padding: 10px;
+    border-radius: 5px;
+    width: 90%;
+  }
+
+
+
+  .slider-buttons {
+    margin-left: 1rem;
+    position: absolute;
+    top: 22rem;
+    left: 0;
+    /* Align buttons to the start of the row */
+    display: flex;
+    flex-direction: row;
+    /* Fix from 'rows' to 'row' to arrange buttons horizontally */
+    justify-content: center;
+    transform: translateY(-50%);
+    gap: 10px;
+    /* Space between buttons */
+  }
+
+  .slider-button {
+    width: 50px;
+    height: 50px;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.7;
+    padding: 0;
+    min-height: 50px;
+    max-height: 50px;
+    min-width: 50px;
+    max-width: 50px;
+
+  }
+
+
+
+  .slider-button img {
+    width: 24px;
+    height: 24px;
+  }
+
+  .slider-button:hover {
+    opacity: 1;
+  }
+
+  .slider-button:disabled {
+    background-color: #cccccc;
+    cursor: not-allowed;
+  }
+
+  .digit-text-block-header-content.custom-header-class {
+    .digit-text-block-header {
+      font-size: 1.5em;
+      color: rgb(249, 246, 246) !important;
+      color: #333;
+      font-weight: bold;
+      margin-bottom: 10px;
+    }
+
+    .digit-text-block-body{
+      margin-top: 0rem;
+    }
+  }
+
+  .digit-text-block-wrap{
+    gap:0rem;
+  }
+
+  .slider-dots {
+    position: absolute;
+    top: 22rem;
+    left:2.5rem;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 10px;
+  }
+
+  .dot {
+    width: 0.5rem;
+    height: 0.5rem;
+    background-color: orange;
+    border-radius: 50%;
+    opacity: 0.5;
+    cursor: pointer;
+    transition: opacity 1s;
+  }
+
+  .dot.active {
+    opacity: 1;
+  }