blixify-ui-web-mcp 0.1.1

package/lib/components/design/heroSection/heroSection.stories.tsx

@@ -0,0 +1,85 @@
+import { storiesOf } from "@storybook/react";
+import React from "react";
+import { HeroSection } from ".";
+import { Button } from "../../action/button";
+import README from "./README.md";
+
+const stories = storiesOf("Design", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Hero Section", () => {
+  return (
+    <>
+      <HeroSection
+        size="small"
+        title="Blixify UI Web"
+        content={
+          "A total of 4,795 flood-prone locations nationwide have been identified by the Fire and Rescue Department (JBPM). \n \n The country is currently in the northeast monsoon transition season, with heavy rains and floods in several states, including the west coast of Peninsular Malaysia, Sabah and Sarawak, said its operations director Datuk Ahmad Izram Osman (The Star, 2023). \n \n Minister in the Prime Minister’s Department (Sabah, Sarawak, and Special Functions) Datuk Armizan Mohd Ali directed Nadma to focus on 89 districts identified as flood disaster hotspots, particularly in Kelantan, Terengganu, Pahang, and Johor, ahead of the MTL. \n \n Malay Mail (2023) reports, this was because all the districts were previously affected by flood disasters during the 2022/2023 MTL, and 77 of them experienced recurring flood problems. \n \n Image displayed taken from NST (2023) https://www.nst.com.my/news/nation/2023/09/958403/met-dept-warning-bad-weather-northern-region-starting-tomorrow \n \n Source: \n \n https://www.thestar.com.my/news/nation/2023/09/27/4795-flood-prone-spots-identified \n \n https://www.malaymail.com/news/malaysia/2023/09/26/floods-take-immediate-measures-for-upcoming-north-east-monsoon-nadma-tells-district-disaster-management-committees/93073"
+        }
+        image="https://blixify.co/static/portfolio_qcat-fc572be184081e2793a9856b6ec58dfe.webp"
+        callToAction={
+          <div>
+            <Button text="Sign Up" type="normal" size="small" />
+          </div>
+        }
+      />
+      <HeroSection
+        size="small"
+        title="Blixify UI Web"
+        content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
+        image="https://blixify.co/static/portfolio_qcat-fc572be184081e2793a9856b6ec58dfe.webp"
+        design="split"
+        callToAction={
+          <div>
+            <Button text="Sign Up" type="normal" size="small" />
+          </div>
+        }
+      />
+      <HeroSection
+        size="small"
+        title="Blixify UI Web"
+        content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
+        image="https://blixify.co/static/portfolio_qcat-fc572be184081e2793a9856b6ec58dfe.webp"
+        design="angled"
+        callToAction={
+          <div>
+            <Button text="Sign Up" type="normal" size="small" />
+          </div>
+        }
+      />
+      <HeroSection
+        size="small"
+        title="Blixify UI Web"
+        content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
+        image="https://blixify.co/static/portfolio_qcat-fc572be184081e2793a9856b6ec58dfe.webp"
+        design="box"
+        callToAction={
+          <div>
+            <Button text="Sign Up" type="normal" size="small" />
+          </div>
+        }
+      />
+      <HeroSection
+        size="large"
+        title="Premium Audio, Delivered"
+        content="Explore our curated collection of top-tier headphones. Free shipping on orders above RM 500."
+        backgroundImage="https://images.unsplash.com/photo-1487215078519-e21cc028cb29?w=1600&h=900&fit=crop&q=80"
+        backgroundPosition="center"
+        callToAction={
+          <div>
+            <Button text="Shop Now" type="normal" size="small" />
+          </div>
+        }
+        backgroundImageOnly
+        darkMode
+        className="mt-6"
+        darkOverlay
+      />
+    </>
+  );
+});

package/lib/components/design/iconList/README.md

@@ -0,0 +1,60 @@
+# Icon List
+
+<!-- STORY -->
+
+<hr>
+
+Icon list to display features/use cases
+
+##### Import
+
+```js
+import { IconList } from "blixify-ui-web/lib";
+```
+
+##### Usage
+
+```jsx
+const iconListContent = [
+  {
+    name: "Registration",
+    content:
+      "Fill in your contact information and account credentials. Examples of information that we do collect are such as occupation details and physical address. This information is collected by MySukarela to match you with volunteering tasks that are personalised to you.",
+    icon: <ArrowDownOnSquareStackIcon className="w-6 h-6" />,
+  },
+  {
+    name: "Browse For Projects",
+    content:
+      "Search for volunteering projects that are nearby to you. You can view all the available slots for volunteering. Book an available slot to confirm your participation in volunteering.",
+    icon: <MapIcon className="w-6 h-6" />,
+  },
+  {
+    name: "Volunteer and Deliver",
+    content:
+      "Additional information will be sent to your email address if there are any rules/procedures by the organisations (NGO) that you are volunteering for. Feel free to reach out our customer support if you have any questions.",
+    icon: <UserGroupIcon className="w-6 h-6" />,
+  },
+];
+
+return <IconList iconList={iconListContent} />;
+```
+
+##### Required props
+
+| Name       | Type        | Description     |
+| ---------- | ----------- | --------------- |
+| `iconList` | `Icon Data` | Icon Data Class |
+
+##### Optional props
+
+| Name        | Type     | Default        | Description |
+| ----------- | -------- | -------------- | ----------- |
+| `className` | `string` | Tailwind class |             |
+
+##### Icon Data Class
+
+| Name      | Type            | Description |
+| --------- | --------------- | ----------- |
+| `name`    | `string`        | Title       |
+| `content` | `string`        | Description |
+| `icon`    | `React Element` | Icon        |

package/lib/components/design/iconList/iconList.stories.tsx

@@ -0,0 +1,41 @@
+import {
+  ArrowDownOnSquareStackIcon,
+  MapIcon,
+  UserGroupIcon,
+} from "@heroicons/react/24/outline";
+import { storiesOf } from "@storybook/react";
+import React from "react";
+import { IconList } from ".";
+import README from "./README.md";
+
+const stories = storiesOf("Design", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+const iconListContent = [
+  {
+    name: "Registration",
+    content:
+      "Fill in your contact information and account credentials. Examples of information that we do collect are such as occupation details and physical address. This information is collected by MySukarela to match you with volunteering tasks that are personalised to you.",
+    icon: <ArrowDownOnSquareStackIcon className="w-6 h-6" />,
+  },
+  {
+    name: "Browse For Projects",
+    content:
+      "Search for volunteering projects that are nearby to you. You can view all the available slots for volunteering. Book an available slot to confirm your participation in volunteering.",
+    icon: <MapIcon className="w-6 h-6" />,
+  },
+  {
+    name: "Volunteer and Deliver",
+    content:
+      "Additional information will be sent to your email address if there are any rules/procedures by the organisations (NGO) that you are volunteering for. Feel free to reach out our customer support if you have any questions.",
+    icon: <UserGroupIcon className="w-6 h-6" />,
+  },
+];
+stories.add("Icon List", () => {
+  return <IconList iconList={iconListContent} />;
+});

package/lib/components/design/imageGallery/README.md

@@ -0,0 +1,56 @@
+# Image Gallery
+
+<!-- STORY -->
+
+<hr>
+
+Image Gallery to display a collection of images
+
+##### Import
+
+```js
+import { ImageGallery } from "blixify-ui-web/lib";
+```
+
+##### Usage
+
+```jsx
+const images = [];
+
+const [currentImage, setCurrentImage] = useState(0);
+
+const handleSetCurrentImage = (index: number) => {
+  setCurrentImage(index);
+};
+
+<ImageGallery
+  imageGallery={images}
+  currentImage={currentImage}
+  handleSetCurrentImage={handleSetCurrentImage}
+/>;
+```
+
+##### Required props
+
+| Name                    | Type                 | Description                   |
+| ----------------------- | -------------------- | ----------------------------- |
+| `imageGallery`          | `ImageGalleryData[]` | Image Gallery Data List Class |
+| `currentImage`          | `number`             | Current Image Index           |
+| `handleSetCurrentImage` | `function`           | `(index:number) => {}`        |
+
+##### Optional props
+
+| Name                      | Type                                                 | Default                     | Description                      |
+| ------------------------- | ---------------------------------------------------- | --------------------------- | -------------------------------- |
+| `currentImageClassName`   | `string`                                             | `block w-full object-cover` | set selected image style         |
+| `imageGalleryClassName`   | `string`                                             | `grid grid-cols-5 h-full`   | set image gallery style          |
+| `eachImageClassName`      | `string`                                             | `grid grid-cols-5 h-full`   | set gallery each image style     |
+| `autoImageTransition`     | `boolean`                                            |                             | Image changes if set to true     |
+| `imageTransitionDuration` | `number`                                             |                             | Image transition duration        |
+| `zoomSettings`            | `{ enableZoom: boolean; enableDownload?: boolean; }` |                             | Enable zoom, rotate and download |
+
+##### Photo Slide Data Class
+
+| Name       | Type     | Description        |
+| ---------- | -------- | ------------------ |
+| `imageUrl` | `string` | Image Source / URL |

package/lib/components/design/imageGallery/imageGallery.stories.tsx

@@ -0,0 +1,45 @@
+import { storiesOf } from "@storybook/react";
+import React, { useState } from "react";
+import { ImageGallery } from ".";
+import README from "./README.md";
+
+const stories = storiesOf("Design", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+const images = [
+  "https://images.unsplash.com/photo-1637141601395-bdca37a80f56?q=80&w=1780&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1580214475396-7ee80e8ce03c?q=80&w=3020&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1635774682661-b99adeaba4c6?q=80&w=2980&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1594117782204-5c398aa0e330?q=80&w=1780&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1637141601395-bdca37a80f56?q=80&w=1780&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1580214475396-7ee80e8ce03c?q=80&w=3020&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1635774682661-b99adeaba4c6?q=80&w=2980&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1594117782204-5c398aa0e330?q=80&w=1780&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+];
+
+stories.add("Image Gallery", () => {
+  const [currentImage, setCurrentImage] = useState(0);
+
+  const handleSetCurrentImage = (index: number) => {
+    setCurrentImage(index);
+  };
+
+  return (
+    <div>
+      <ImageGallery
+        imageGallery={images}
+        currentImage={currentImage}
+        currentImageClassName="h-80 w-full"
+        eachImageClassName="h-40 w-40"
+        imageTransitionDuration={4000}
+        handleSetCurrentImage={handleSetCurrentImage}
+        autoImageTransition={false}
+      />
+    </div>
+  );
+});

package/lib/components/design/imageZoom/README.md

@@ -0,0 +1,47 @@
+# Image Zoom
+
+<!-- STORY -->
+
+<hr>
+
+Image container that enables zoom, pan and pinch
+
+##### Import
+
+```js
+import { ImageZoom } from "blixify-ui-web/lib";
+```
+
+##### Usage
+
+```jsx
+const imgList = [
+  "https://images.unsplash.com/photo-1738253145927-c385871168d8?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1738468070469-4d92158ffa55?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1736273927244-a58a647e491a?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3Dßß",
+];
+
+return (
+  <div className="grid grid-cols-3 gap-6">
+    {imgList.map((eachImg, index) => (
+      <ImageZoom key={index} image={eachImg} />
+    ))}
+  </div>
+);
+```
+
+##### Required props
+
+| Name    | Type     | Description |
+| ------- | -------- | ----------- |
+| `image` | `string` | Image URL   |
+
+##### Optional props
+
+| Name                  | Type                                                                                 | Description                                                                                |
+| --------------------- | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ |
+| `className`           | `string`                                                                             | Tailwind class                                                                             |
+| `disableZoomOnScroll` | `boolean`                                                                            | Disable zooming while scrolling                                                            |
+| `disableDownload`     | `boolean`                                                                            | Disable download image                                                                     |
+| `imgObjectContain`    | `boolean`                                                                            | If `true`, image will be `objectFit: "contain"`. By default, image is `objectFit: "cover"` |
+| `checkbox`            | `{enable: boolean, checked: boolean, onCheck: (checked: boolean, imageUri: string)}` | Enable checkbox and callback function for checkbox.                                        |

package/lib/components/design/imageZoom/imageZoom.stories.tsx

@@ -0,0 +1,30 @@
+import { storiesOf } from "@storybook/react";
+import React from "react";
+import { ImageZoom } from ".";
+import README from "./README.md";
+
+const stories = storiesOf("Design", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+const imgList = [
+  "https://images.unsplash.com/photo-1738253145927-c385871168d8?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1738468070469-4d92158ffa55?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1736273927244-a58a647e491a?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3Dßß",
+];
+
+stories.add("Image Zoom", () => {
+  return (
+    <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
+      {imgList.map((eachImg, index) => (
+        <div className="">
+          <ImageZoom key={index} image={eachImg} />
+        </div>
+      ))}
+    </div>
+  );
+});

package/lib/components/design/leftContent/README.md

@@ -0,0 +1,47 @@
+# Left Content
+
+<!-- STORY -->
+
+<hr>
+
+Component to display content with pictures on left
+
+##### Import
+
+```js
+import { LeftContent } from "blixify-ui-web/lib";
+```
+
+##### Usage
+
+```jsx
+<LeftContent
+  title="MyVac"
+  contentList={contentList}
+  image="https://www.myvac.com.my/static/media/home_about.012e4937.webp"
+  callToAction={
+    <div>
+      <Button type="normal" text="Learn More" />
+    </div>
+  }
+/>
+```
+
+##### Required props
+
+| Name          | Type     | Description             |
+| ------------- | -------- | ----------------------- |
+| `title`       | `string` | Title                   |
+| `count`       | `number` | Content of the card     |
+| `description` | `string` | Description of the card |
+
+##### Optional props
+
+| Name           | Type             | Default | Description                   |
+| -------------- | ---------------- | ------- | ----------------------------- |
+| `image`        | `string`         | ""      | Image Url                     |
+| `contentList`  | `string[]`       | ""      |                               |
+| `imgContain`   | `boolean`        |         | Use image as contain or cover |
+| `imageElement` | `React Element`  | ""      | Import image as element       |
+| `callToAction` | `React Element`  | ""      |                               |
+| `className`    | `tailwind class` | ""      |                               |

package/lib/components/design/leftContent/leftContent.stories.tsx

@@ -0,0 +1,32 @@
+import { storiesOf } from "@storybook/react";
+import React from "react";
+import { LeftContent } from ".";
+import { Button } from "../../action/button";
+import README from "./README.md";
+
+const stories = storiesOf("Design", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+const contentList = [
+  "MyVAC (Malaysia Vaccine Support Volunteers) is a dedicated volunteer management platform established to assist in the roll out of the government’s vaccination programme, by deploying willing individuals to be part of the vaccination team. This volunteer mobilisation program will be a crucial instrument to drive Malaysia’ vaccination campaign and achieve “Herd Immunity”.",
+];
+
+stories.add("Left Content", () => {
+  return (
+    <LeftContent
+      title="MyVac"
+      contentList={contentList}
+      image="https://www.myvac.com.my/static/media/home_about.012e4937.webp"
+      callToAction={
+        <div>
+          <Button type="normal" text="Learn More" />
+        </div>
+      }
+    />
+  );
+});

package/lib/components/design/logoCloud/README.md

@@ -0,0 +1,42 @@
+# Logo Cloud
+
+<!-- STORY -->
+
+<hr>
+
+Logo cloud to display partners or media mentions
+
+##### Import
+
+```js
+import { LogoCloud } from "blixify-ui-web/lib";
+```
+
+##### Usage
+
+```jsx
+<LogoCloud logoList={logoList} />
+```
+
+##### Required props
+
+| Name            | Type                   | Description |
+| --------------- | ---------------------- | ----------- |
+| `logoList`      | `Logo Data Class List` |             |
+| `imgClassName`  | `Image Class Names`    |             |
+| `gridClassName` | `Grid Class Names`     |             |
+
+##### Optional props
+
+| Name        | Type               | Default                                        | Description             |
+| ----------- | ------------------ | ---------------------------------------------- | ----------------------- |
+| `current`   | `boolean`          | false                                          | Whether page is current |
+| `linkProps` | `Link Props Class` | Refer to Link Component for more documentation |                         |
+
+##### Logo Data Class
+
+| Name   | Type        | Description |
+| ------ | ----------- | ----------- |
+| `src`  | `Logo Src`  |             |
+| `alt`  | `Logo Alt`  |             |
+| `href` | `Logo Href` |             |

package/lib/components/design/logoCloud/logoCloud.stories.tsx

@@ -0,0 +1,44 @@
+import { storiesOf } from "@storybook/react";
+import React from "react";
+import { LogoCloud } from ".";
+import README from "./README.md";
+
+const stories = storiesOf("Design", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+const logoList = [
+  {
+    src: "https://tailwindui.com/img/logos/tuple-logo-gray-400.svg",
+    alt: "Tuple",
+    href: "https://blixify.co/",
+  },
+  {
+    src: "https://tailwindui.com/img/logos/mirage-logo-gray-400.svg",
+    alt: "Mirage",
+    href: "https://blixify.co/",
+  },
+  {
+    src: "https://tailwindui.com/img/logos/statickit-logo-gray-400.svg",
+    alt: "StaticKit",
+    href: "https://blixify.co/",
+  },
+  {
+    src: "https://tailwindui.com/img/logos/transistor-logo-gray-400.svg",
+    alt: "Transistor",
+    href: "https://blixify.co/",
+  },
+  {
+    src: "https://tailwindui.com/img/logos/workcation-logo-gray-400.svg",
+    alt: "Workcation",
+    href: "https://blixify.co/",
+  },
+];
+
+stories.add("Logo Cloud", () => {
+  return <LogoCloud logoList={logoList} />;
+});

package/lib/components/design/onboarding/README.md

@@ -0,0 +1,100 @@
+# Onboarding
+
+<!-- STORY -->
+
+<hr>
+
+Onboarding to be displayed when user first onboard to the website.
+
+##### Import
+
+```js
+import { Onboarding } from "blixify-ui-web/lib";
+```
+
+##### Usage
+
+```jsx
+const contentsData = [
+  {
+    contentImg:
+      "https://images.unsplash.com/photo-1502005097973-6a7082348e28?w=900&auto=format&fit=crop&q=60",
+    content: (
+      <>
+        <h2 className={titleClassName}>Explore The World</h2>
+        <p>
+          Embark on a journey of discovery and adventure with "Explore The
+          World." This title encapsulates the spirit of curiosity and the desire
+          to uncover the wonders our planet has to offer.
+        </p>
+      </>
+    ),
+  },
+  {
+    contentImg:
+      "https://images.unsplash.com/photo-1616046229478-9901c5536a45?w=900&auto=format&fit=crop&q=60",
+    content: (
+      <>
+        <h2 className={titleClassName}>Browse Connectivity</h2>
+        <p>
+          "Browse Connectivity" suggests a digital exploration of interconnected
+          networks and information. This could be particularly relevant in the
+          context of digital communication, networking, or online collaboration.
+        </p>
+      </>
+    ),
+  },
+  {
+    contentImg:
+      "https://images.unsplash.com/photo-1567016376408-0226e4d0c1ea?w=900&auto=format&fit=crop&q=60",
+    content: (
+      <>
+        <h2 className={titleClassName}>Connect The World</h2>
+        <p>
+          "Connect The World" signifies the power of bringing people, ideas, and
+          cultures together. This title is often associated with fostering
+          global unity, understanding, and collaboration.
+        </p>
+      </>
+    ),
+  },
+];
+
+return (
+  <>
+    <Button
+      text="Start Mobile Onboarding"
+      size="small"
+      type="normal"
+      onClick={() => handleSetOnboarding()}
+    />
+    <Onboarding
+      contents={contentsData}
+      currentStep={currentStep}
+      show={showOnboarding}
+      isMobile={true}
+      handleSetCurrentStep={handleSetCurrentStep}
+      handleClose={handleSetOnboarding}
+    />
+  </>
+);
+```
+
+##### Required props
+
+| Name                   | Type               | Description                                                            |
+| ---------------------- | ------------------ | ---------------------------------------------------------------------- |
+| `contents`             | `OnboardingData[]` | Onboarding content with contentImg (string) and content (ReactElement) |
+| `currentStep`          | `number`           | Current step                                                           |
+| `show`                 | `boolean`          | Show Onboarding                                                        |
+| `handleSetCurrentStep` | `() => {}`         | Set Step                                                               |
+| `handleClose`          | `() => {}`         | Close Onboarding                                                       |
+
+##### Optional props
+
+| Name               | Type            | Default | Description                                                                      |
+| ------------------ | --------------- | ------- | -------------------------------------------------------------------------------- |
+| `className`        | `string`        | ""      | Custom CSS classes                                                               |
+| `isMobile`         | `boolean`       | false   | When true, shows full-size image with curved overlay. When false, shows in modal |
+| `extra`            | `React Element` | ""      | Additional content                                                               |
+| `backBtnClassName` | `string`        | ""      | Custom CSS classes for back button                                               |