blixify-ui-web-mcp 0.1.1

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

@@ -0,0 +1,113 @@
+import { storiesOf } from "@storybook/react";
+import React, { useState } from "react";
+import { Onboarding } from ".";
+import { Button } from "../../action/button";
+import README from "./README.md";
+
+const stories = storiesOf("Design", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Onboarding", () => {
+  const titleClassName = "text-lg sm:text-2xl mb-2 sm:mb-4 font-bold";
+  const descClassName = "text-sm sm:text-base";
+  const [isMobile, setIsMobile] = useState(true);
+  const [showOnboarding, setShowOnboarding] = useState(true);
+  const [currentStep, setCurrentStep] = useState(0);
+
+  const handleSetCurrentStep = (index: number) => {
+    setCurrentStep(index);
+  };
+
+  const handleSetOnboarding = (hide?: boolean) => {
+    setShowOnboarding(hide ?? true);
+    setCurrentStep(0);
+  };
+
+  const contentsData = [
+    {
+      contentImg:
+        "https://images.unsplash.com/photo-1502005097973-6a7082348e28?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGludGVyaW9yJTIwZGVzaWdufGVufDB8fDB8fHww",
+      content: (
+        <>
+          <h2 className={titleClassName}>Explore The World</h2>
+          <p className={descClassName}>
+            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&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8aW50ZXJpb3IlMjBkZXNpZ258ZW58MHx8MHx8fDA%3D",
+      content: (
+        <>
+          <h2 className={titleClassName}>Discover The World</h2>
+          <p className={descClassName}>
+            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-1567016376408-0226e4d0c1ea?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fGludGVyaW9yJTIwZGVzaWdufGVufDB8fDB8fHww",
+      content: (
+        <>
+          <h2 className={titleClassName}>Create The World</h2>
+          <p className={descClassName}>
+            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>
+        </>
+      ),
+    },
+  ];
+
+  return (
+    <>
+      <div className="flex flex-row mb-4">
+        <Button
+          text="Start Mobile Onboarding"
+          size="small"
+          type="normal"
+          onClick={() => {
+            handleSetOnboarding();
+            setIsMobile(true);
+          }}
+          className="mr-2"
+        />
+        <Button
+          text="Start Modal Onboarding"
+          size="small"
+          type="normal"
+          onClick={() => {
+            handleSetOnboarding();
+            setIsMobile(false);
+          }}
+        />
+      </div>
+      <div className="h-screen w-full">
+        <Onboarding
+          contents={contentsData}
+          currentStep={currentStep}
+          show={showOnboarding}
+          isMobile={isMobile}
+          handleSetCurrentStep={handleSetCurrentStep}
+          handleClose={() => {
+            handleSetOnboarding(false);
+          }}
+        />
+      </div>
+    </>
+  );
+});

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

@@ -0,0 +1,112 @@
+# Pricing
+
+<!-- STORY -->
+
+<hr>
+
+Pricing list
+
+##### Import
+
+```js
+import { Pricing, PriceItem } from "blixify-ui-web/lib";
+```
+
+##### Usage
+
+```jsx
+const priceList: PriceItem[] = [
+  {
+    subtitle: "Basic",
+    id: "tier-basic",
+    title: "$15",
+    titleSubtext: "/month",
+    description: "$12 per month if paid annually",
+    feature: {
+      title: "Everything necessary to get started.",
+      items: [
+        "5 products",
+        "Up to 1,000 subscribers",
+        "Basic analytics",
+        "48-hour support response time",
+      ],
+    },
+    ctaBtn: { text: "Buy Now", onClick: (id) => window.alert(id) },
+  },
+  {
+    subtitle: "Essential",
+    id: "tier-essential",
+    title: "$30",
+    description: "$24 per month if paid annually",
+    feature: {
+      title:
+        "Everything in Basic, plus essential tools for growing your business.",
+      items: [
+        "25 products",
+        "Up to 10,000 subscribers",
+        "Advanced analytics",
+        "24-hour support response time",
+        "Marketing automations",
+      ],
+    },
+    ctaBtn: { text: "Not Available", onClick: (id) => window.alert(id), disable },
+  },
+  {
+    subtitle: "Growth",
+    id: "tier-growth",
+    title: "$60",
+    description: "$48 per month if paid annually",
+    feature: {
+      title:
+        "Everything in Essential, plus collaboration tools and deeper insights.",
+      items: [
+        "Unlimited products",
+        "Unlimited subscribers",
+        "Advanced analytics",
+        "1-hour, dedicated support response time",
+        "Marketing automations",
+        "Custom reporting tools",
+      ],
+    },
+    ctaBtn: { text: "Buy", onClick: (id) => window.alert(id) },
+  },
+];
+
+return (
+  return (
+    <Pricing
+      priceList={priceList}
+      header={{
+        title: " Choose the right plan for you",
+        description:
+          " Distinctio et nulla eum soluta et neque labore quibusdam. Saepe et quasi iusto modi velit ut non voluptas in. Explicabo id ut laborum.",
+      }}
+    />
+  );
+);
+```
+
+##### Required props
+
+| Name        | Type          | Description                           |
+| ----------- | ------------- | ------------------------------------- |
+| `priceList` | `PriceItem[]` | Refer to PriceItem class states below |
+
+##### Optional props
+
+| Name                 | Type                                   | Description                                   |
+| -------------------- | -------------------------------------- | --------------------------------------------- |
+| `header`             | `{title: string, description: string}` | Header content to be display above price list |
+| `containerClassname` | `string`                               | Classname for container                       |
+
+##### PriceItem
+
+| Name            | Type                                                              | Description                                           |
+| --------------- | ----------------------------------------------------------------- | ----------------------------------------------------- |
+| `id`            | `string`                                                          |                                                       |
+| `title`         | `string`                                                          | Title of each price item (eg. $15)                    |
+| `subtitle`      | `string`                                                          | Text to be displayed above title                      |
+| `titleSubtext?` | `string`                                                          | Text to be displayed next to title                    |
+| `description?`  | `string`                                                          | Text to be displayed below title                      |
+| `feature?`      | `{ items: string[], title: string }`                              | List item to be displayed below call to action button |
+| `ctaBtn?`       | `{text" string, onClick: (id: string) => void, disable?:boolean}` | Call to action button                                 |

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

@@ -0,0 +1,86 @@
+import { storiesOf } from "@storybook/react";
+import React from "react";
+import { PriceItem, Pricing } from ".";
+import README from "./README.md";
+
+const stories = storiesOf("Design", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+const priceList: PriceItem[] = [
+  {
+    subtitle: "Basic",
+    id: "tier-basic",
+    title: "$15",
+    titleSubtext: "/month",
+    description: "$12 per month if paid annually",
+    feature: {
+      title: "Everything necessary to get started.",
+      items: [
+        "5 products",
+        "Up to 1,000 subscribers",
+        "Basic analytics",
+        "48-hour support response time",
+      ],
+    },
+    ctaBtn: { text: "Buy", onClick: (id) => window.alert(id) },
+  },
+  {
+    subtitle: "Essential",
+    id: "tier-essential",
+    title: "$30",
+    description: "$24 per month if paid annually",
+    feature: {
+      title:
+        "Everything in Basic, plus essential tools for growing your business.",
+      items: [
+        "25 products",
+        "Up to 10,000 subscribers",
+        "Advanced analytics",
+        "24-hour support response time",
+        "Marketing automations",
+      ],
+    },
+    ctaBtn: {
+      text: "Not Available",
+      onClick: (id) => window.alert(id),
+      disable: true,
+    },
+  },
+  {
+    subtitle: "Growth",
+    id: "tier-growth",
+    title: "$60",
+    description: "$48 per month if paid annually",
+    feature: {
+      title:
+        "Everything in Essential, plus collaboration tools and deeper insights.",
+      items: [
+        "Unlimited products",
+        "Unlimited subscribers",
+        "Advanced analytics",
+        "1-hour, dedicated support response time",
+        "Marketing automations",
+        "Custom reporting tools",
+      ],
+    },
+    ctaBtn: { text: "Buy", onClick: (id) => window.alert(id) },
+  },
+];
+
+stories.add("Pricing", () => {
+  return (
+    <Pricing
+      priceList={priceList}
+      header={{
+        title: " Choose the right plan for you",
+        description:
+          " Distinctio et nulla eum soluta et neque labore quibusdam. Saepe et quasi iusto modi velit ut non voluptas in. Explicabo id ut laborum.",
+      }}
+    />
+  );
+});

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

@@ -0,0 +1,47 @@
+# Right Content
+
+<!-- STORY -->
+
+<hr>
+
+Component to display content with pictures on left
+
+##### Import
+
+```js
+import { RightContent } from "blixify-ui-web/lib";
+```
+
+##### Usage
+
+```jsx
+<RightContent
+  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 element          |
+| `callToAction` | `React Element`  | ""      |                               |
+| `className`    | `tailwind class` | ""      |                               |

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

@@ -0,0 +1,32 @@
+import { storiesOf } from "@storybook/react";
+import React from "react";
+import { RightContent } 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("Right Content", () => {
+  return (
+    <RightContent
+      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/sectionList/README.md

@@ -0,0 +1,51 @@
+# Section List
+
+<!-- STORY -->
+
+<hr>
+
+Section list to deliver key metrics
+
+##### Import
+
+```js
+import { SectionList } from "blixify-ui-web/lib";
+```
+
+##### Usage
+
+```jsx
+const sectionContent = [
+  {
+    title: "Founded",
+    content: "2018",
+  },
+  {
+    title: "Presence",
+    content: "Selangor",
+  },
+  {
+    title: "Used Cooking Oil Recycled",
+    content: "250 Tonnes",
+  },
+  {
+    title: "MPOB License No.",
+    content: "619709017000",
+  },
+];
+
+return <SectionList sectionContent={sectionContent} />;
+```
+
+##### Required props
+
+| Name             | Type                | Description |
+| ---------------- | ------------------- | ----------- |
+| `sectionContent` | `Section Data List` |             |
+
+##### Section Data
+
+| Name      | Type              | Description |
+| --------- | ----------------- | ----------- |
+| `title`   | `Section title`   |             |
+| `content` | `Section content` |             |

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

@@ -0,0 +1,35 @@
+import { storiesOf } from "@storybook/react";
+import React from "react";
+import { SectionList } from ".";
+import README from "./README.md";
+
+const stories = storiesOf("Design", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+const sectionContent = [
+  {
+    title: "Founded",
+    content: "2018",
+  },
+  {
+    title: "Presence",
+    content: "Selangor",
+  },
+  {
+    title: "Used Cooking Oil Recycled",
+    content: "250 Tonnes",
+  },
+  {
+    title: "MPOB License No.",
+    content: "619709017000",
+  },
+];
+
+stories.add("Section List", () => {
+  return <SectionList sectionContent={sectionContent} />;
+});

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

@@ -0,0 +1,62 @@
+# Teams
+
+<!-- STORY -->
+
+<hr>
+
+Teams Sections to be displayed for committees data.
+
+##### Import
+
+```js
+import { Teams } from "blixify-ui-web/lib";
+```
+
+##### Usage
+
+```jsx
+const people = [
+  {
+    name: "Michael Foster",
+    role: "Co-Founder / CTO",
+    imageUrl:
+      "https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80",
+  },
+  {
+    name: "Leonard Krasner",
+    role: "Senior Designer",
+    imageUrl:
+      "https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80",
+  },
+  {
+    name: "Emma Dorsey",
+    role: "Senior Developer",
+    imageUrl:
+      "https://images.unsplash.com/photo-1505840717430-882ce147ef2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80",
+  },
+];
+
+return (
+  <Teams
+    title="Our team"
+    description="We’re a dynamic group of individuals who are passionate about what
+    we do and dedicated to delivering the best results for our
+    clients."
+    teams={people}
+  />
+);
+```
+
+##### Required props
+
+| Name    | Type                   | Description |     |
+| ------- | ---------------------- | ----------- | --- |
+| `teams` | `Team Data Class List` |             |     |
+
+##### Teams Data Class
+
+| Name       | Type                  | Description |
+| ---------- | --------------------- | ----------- |
+| `name`     | `Name`                |             |
+| `role`     | `Role or Description` |             |
+| `imageUrl` | `Image Src`           |             |

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

@@ -0,0 +1,61 @@
+import { storiesOf } from "@storybook/react";
+import React from "react";
+import { Teams } from ".";
+import README from "./README.md";
+
+const stories = storiesOf("Design", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+const people = [
+  {
+    name: "Michael Foster",
+    role: "Co-Founder / CTO",
+    imageUrl:
+      "https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80",
+  },
+  {
+    name: "Leonard Krasner",
+    role: "Senior Designer",
+    imageUrl:
+      "https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80",
+  },
+  {
+    name: "Emma Dorsey",
+    role: "Senior Developer",
+    imageUrl:
+      "https://images.unsplash.com/photo-1505840717430-882ce147ef2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80",
+  },
+  {
+    name: "Lindsay Walton",
+    role: "Front-end Developer",
+    imageUrl:
+      "https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80",
+  },
+  {
+    name: "Leonard Krasner",
+    role: "Senior Designer",
+    imageUrl:
+      "https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80",
+  },
+  {
+    name: "Emma Dorsey",
+    role: "Senior Developer",
+    imageUrl:
+      "https://images.unsplash.com/photo-1505840717430-882ce147ef2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80",
+  },
+  {
+    name: "Lindsay Walton",
+    role: "Front-end Developer",
+    imageUrl:
+      "https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80",
+  },
+];
+
+stories.add("Teams", () => {
+  return <Teams teams={people} />;
+});

package/lib/components/display/alert/README.md

@@ -0,0 +1,82 @@
+# Alert
+
+<!-- STORY -->
+
+<hr>
+
+##### Import
+
+```js
+import { Alert } from "blixify-ui-web/components/display/alert";
+```
+
+##### Usage
+
+```jsx
+<>
+  <Alert
+    title="Order completed"
+    desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam."
+    icon={<BoltIcon className="size-5 text-purple-500" />}
+    actionBtns={[
+      { text: "View status", onClick: () => {} },
+      { text: "Dismiss", onClick: () => {} },
+    ]}
+    color="purple"
+  />
+  <div className="mt-4 p-6 bg-black">
+    <Alert
+      title="Order completed"
+      desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam."
+      icon={<CheckCircleIcon className="size-5 text-green-500" />}
+      actionBtns={[
+        { text: "View status", onClick: () => {} },
+        { text: "Dismiss", onClick: () => {} },
+      ]}
+      color="dark"
+    />
+  </div>
+  <Alert
+    title="Order completed"
+    desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam."
+    icon={<CurrencyDollarIcon className="size-5 text-green-500" />}
+    actionBtns={[
+      { text: "View status", onClick: () => {} },
+      { text: "Dismiss", onClick: () => {} },
+    ]}
+    color="green"
+    className="mt-4"
+    addContent={
+      <div>
+        <p>Additional Content</p>
+        <ul className="list-disc list-inside">
+          <li>Item 1</li>
+          <li>Item 2</li>
+        </ul>
+        <img
+          src="https://plus.unsplash.com/premium_photo-1722593856418-05d6d47eec59?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1170"
+          alt=""
+          className="h-32 w-48 rounded-lg overflow-hidden"
+        />
+      </div>
+    }
+  />
+</>
+```
+
+##### Required props
+
+| Name    | Type     | Default | Description          |
+| ------- | -------- | ------- | -------------------- |
+| `title` | `string` | -       | The alert title text |
+
+##### Optional props
+
+| Name         | Type                                                                                  | Default | Description                                    |
+| ------------ | ------------------------------------------------------------------------------------- | ------- | ---------------------------------------------- |
+| `desc`       | `string`                                                                              | -       | The alert description text                     |
+| `icon`       | `ReactElement`                                                                        | -       | An icon element to display alongside the alert |
+| `actionBtns` | `Array<{ text: string; onClick: () => void }>`                                        | -       | Array of action buttons with text and onClick  |
+| `addContent` | `ReactElement`                                                                        | -       | Additional content to display in the alert     |
+| `color`      | `"green" \| "yellow" \| "orange" \| "blue" \| "purple" \| "red" \| "dark" \| "muted"` | -       | Color theme for the alert                      |
+| `className`  | `string`                                                                              | -       | Additional CSS classes to apply to the alert   |