blixify-ui-web-mcp 0.1.1

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

@@ -0,0 +1,34 @@
+import { storiesOf } from "@storybook/react";
+import React from "react";
+import { Banner } from ".";
+import README from "./README.md";
+
+const stories = storiesOf("Design", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Banner", () => {
+  const renderContent = () => {
+    return (
+      <>
+        <p className="text-xs sm:text-sm text-white">
+          Lorem ipsum dolor sit amet.
+          <a
+            className="underline"
+            target="_blank"
+            rel="noreferrer"
+            href="https://blixify.co"
+          >
+            https://blixify.co
+          </a>
+        </p>
+      </>
+    );
+  };
+
+  return <Banner content={renderContent()} />;
+});

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

@@ -0,0 +1,44 @@
+# Banner Action
+
+<!-- STORY -->
+
+<hr>
+
+Banner Action to be displayed the information and come with action button.
+
+##### Import
+
+```js
+import { BannerAction } from "blixify-ui-web/lib";
+```
+
+##### Usage
+
+```jsx
+return (
+  <BannerAction
+    text={"Lorem ipsum dolor sit amet."}
+    mobileText={"Lorem"}
+    buttonText={"Edit"}
+    bannerIcon={<PencilIcon className="w-5 h-5 text-white" />}
+    close={true}
+  />
+);
+```
+
+##### Required props
+
+| Name         | Type     | Description              |
+| ------------ | -------- | ------------------------ |
+| `text`       | `string` | Banner content           |
+| `mobileText` | `string` | Banner content in Mobile |
+
+##### Optional props
+
+| Name         | Type           | Description                   |
+| ------------ | -------------- | ----------------------------- |
+| `buttonText` | `string`       | Button Text                   |
+| `className`  | `string`       | Tailwind css                  |
+| `onClick`    | `function`     | Button Action                 |
+| `bannerIcon` | `ReactElement` | Banner Icon                   |
+| `close`      | `boolean`      | Close Icon to hide the banner |

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

@@ -0,0 +1,25 @@
+import { PencilIcon } from "@heroicons/react/24/solid";
+import { storiesOf } from "@storybook/react";
+import React from "react";
+import README from "./README.md";
+import { BannerAction } from "./index";
+
+const stories = storiesOf("Design", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Banner Action", () => {
+  return (
+    <BannerAction
+      text={"Lorem ipsum dolor sit amet."}
+      mobileText={"Lorem"}
+      buttonText={"Edit"}
+      bannerIcon={<PencilIcon className="w-5 h-5 text-white" />}
+      close={true}
+    />
+  );
+});

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

@@ -0,0 +1,111 @@
+# Blog Section
+
+<!-- STORY -->
+
+<hr>
+
+Blog components
+
+##### Import
+
+```js
+import { Blog } from "blixify-ui-web/lib";
+```
+
+##### Usage
+
+```jsx
+const postList = [
+  {
+    title: "Boost your conversion rate",
+    href: "#",
+    category: { name: "Article", href: "#" },
+    description:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique sequi cum eos quis dolorum.",
+    date: "Mar 16, 2020",
+    dateTime: "2020-03-16",
+    imageUrl:
+      "https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80",
+    readingTime: "6 min",
+    author: {
+      name: "Roel Aufderehar",
+      href: "#",
+      imageUrl:
+        "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+    },
+  },
+  {
+    title: "How to use search engine optimization to drive sales",
+    href: "#",
+    category: { name: "Video", href: "#" },
+    description:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit facilis asperiores porro quaerat doloribus, eveniet dolore. Adipisci tempora aut inventore optio animi., tempore temporibus quo laudantium.",
+    date: "Mar 10, 2020",
+    dateTime: "2020-03-10",
+    imageUrl:
+      "https://images.unsplash.com/photo-1547586696-ea22b4d4235d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80",
+    readingTime: "4 min",
+    author: {
+      name: "Brenna Goyette",
+      href: "#",
+      imageUrl:
+        "https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+    },
+  },
+  {
+    title: "Improve your customer experience",
+    href: "#",
+    description:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint harum rerum voluptatem quo recusandae magni placeat saepe molestiae, sed excepturi cumque corporis perferendis hic.",
+    imageUrl:
+      "https://images.unsplash.com/photo-1492724441997-5dc865305da7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80",
+  },
+];
+
+<BlogSection postList={postList} mdGrid={2} lgGrid={3} />;
+```
+
+##### Required props
+
+| Name       | Type        | Description          |
+| ---------- | ----------- | -------------------- |
+| `postList` | `Post Data` | Post Data List Class |
+
+##### Optional props
+
+| Name               | Type             | Default                                               | Description                   |
+| ------------------ | ---------------- | ----------------------------------------------------- | ----------------------------- |
+| `imgContain`       | `boolean`        |                                                       | Use image as contain or cover |
+| `gridColClassName` | `tailwind class` | "sm:grid-cols-2 sm:gap-x-6 lg:grid-cols-3 lg:gap-x-8" |                               |
+| `onClickData`      | `function`       | `(href:string) => {}`                                 |                               |
+
+##### Post Data Class
+
+| Name           | Type                 | Description                 |
+| -------------- | -------------------- | --------------------------- |
+| `title`        | `string`             | Optional - Blog title       |
+| `description`  | `string`             | Optional - Blog description |
+| `extra`        | `React Component`    | Optional                    |
+| `imageUrl`     | `string`             | Image URL                   |
+| `imageContent` | `React Element`      | Image Button                |
+| `href`         | `string`             | Optional - Link             |
+| `category`     | `CategoryData Class` | Optional                    |
+| `date`         | `string`             | Optional                    |
+| `dateTime`     | `string`             | Optional                    |
+| `readingTime`  | `string`             | Optional                    |
+| `author`       | `AuthorData Class`   | Optional                    |
+
+##### Category Data Class
+
+| Name   | Type     | Description |
+| ------ | -------- | ----------- |
+| `name` | `string` |             |
+| `href` | `string` |             |
+
+##### Author Data Class
+
+| Name       | Type     | Description |
+| ---------- | -------- | ----------- |
+| `name`     | `string` |             |
+| `href`     | `string` |             |
+| `imageUrl` | `string` |             |

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

@@ -0,0 +1,72 @@
+import { storiesOf } from "@storybook/react";
+import React from "react";
+import { BlogSection } from ".";
+import README from "./README.md";
+
+const stories = storiesOf("Design", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+const postList = [
+  {
+    title: "Boost your conversion rate",
+    href: "#",
+    category: { name: "Article", href: "#" },
+    description:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique sequi cum eos quis dolorum.",
+    date: "Mar 16, 2020",
+    dateTime: "2020-03-16",
+    imageUrl:
+      "https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80",
+    readingTime: "6 min",
+    author: {
+      name: "Roel Aufderehar",
+      href: "#",
+      imageUrl:
+        "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+    },
+  },
+  {
+    title: "How to use search engine optimization to drive sales",
+    href: "#",
+    category: { name: "Video", href: "#" },
+    description:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit facilis asperiores porro quaerat doloribus, eveniet dolore. Adipisci tempora aut inventore optio animi., tempore temporibus quo laudantium.",
+    date: "Mar 10, 2020",
+    dateTime: "2020-03-10",
+    imageUrl:
+      "https://images.unsplash.com/photo-1547586696-ea22b4d4235d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80",
+    readingTime: "4 min",
+    author: {
+      name: "Brenna Goyette",
+      href: "#",
+      imageUrl:
+        "https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+    },
+  },
+  {
+    title: "Improve your customer experience",
+    href: "#",
+    description:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint harum rerum voluptatem quo recusandae magni placeat saepe molestiae, sed excepturi cumque corporis perferendis hic.",
+    imageUrl:
+      "https://images.unsplash.com/photo-1492724441997-5dc865305da7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80",
+    extra: (
+      <div>
+        <h1 className="mt-2 text-base text-red-500">Extra Components</h1>
+      </div>
+    ),
+  },
+];
+
+stories.add("Blog Section", () => {
+  return (
+    <>
+      <BlogSection postList={postList} />
+    </>
+  );
+});

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

@@ -0,0 +1,82 @@
+# Carousel Section
+
+<!-- STORY -->
+
+<hr>
+
+Carousel components
+
+##### Import
+
+```js
+import { CarouselSection } from "blixify-ui-web/lib";
+```
+
+##### Usage
+
+```jsx
+const slides = [
+  {
+    image: "https://tecdn.b-cdn.net/img/Photos/Slides/img%20(15).jpg",
+    title: "Slide 1",
+    description: "Description of Slide 1",
+    link: "https://blixify.co/",
+  },
+  {
+    image: "https://tecdn.b-cdn.net/img/Photos/Slides/img%20(22).jpg",
+    title: "Slide 2",
+    description: "Description of Slide 2",
+  },
+  {
+    image: "https://tecdn.b-cdn.net/img/Photos/Slides/img%20(23).jpg",
+  },
+];
+
+const [currentSlide, setCurrentSlide] = useState(0);
+
+const handleSetCurrentSlide = (index: number) => {
+  setCurrentSlide(index);
+};
+
+return (
+  <>
+    <CarouselSection
+      slides={slides}
+      currentSlide={currentSlide}
+      handleSetCurrentSlide={handleSetCurrentSlide}
+      className="mt-5"
+      carouselHeight={600}
+      carouselWidth={1000}
+    />
+  </>
+);
+```
+
+##### Required props
+
+| Name                    | Type         | Description            |
+| ----------------------- | ------------ | ---------------------- |
+| `slides`                | `Slide Data` | Slide Data List Class  |
+| `currentSlide`          | `number`     | Current Slide Index    |
+| `handleSetCurrentSlide` | `function`   | `(index:number) => {}` |
+
+##### Optional props
+
+| Name               | Type              | Description              |
+| ------------------ | ----------------- | ------------------------ |
+| `className`        | `string`          | set carousel style       |
+| `imageClassName`   | `string`          | set carousel image style |
+| `carouselHeight`   | `number`          | set carousel height      |
+| `carouselWidth`    | `number`          | set carousel width       |
+| `carouselOverlay`  | `low/medium/high` | set carousel overlay     |
+| `customComponent`  | `ReactElement`    |                          |
+| `handleClickImage` | `function`        | click image              |
+
+##### Slide Data Class
+
+| Name          | Type     | Description                  |
+| ------------- | -------- | ---------------------------- |
+| `image`       | `any`    | Image                        |
+| `title`       | `string` | Optional - Slide title       |
+| `description` | `string` | Optional - Slide description |
+| `link`        | `string` | Optional - Slide link        |

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

@@ -0,0 +1,52 @@
+import { storiesOf } from "@storybook/react";
+import React, { useState } from "react";
+import { CarouselSection } from ".";
+import README from "./README.md";
+
+const stories = storiesOf("Design", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+const slides = [
+  {
+    image: "https://tecdn.b-cdn.net/img/Photos/Slides/img%20(15).jpg",
+    title: "Slide 1",
+    description: "Description of Slide 1",
+    link: "https://blixify.co/",
+  },
+  {
+    image: "https://tecdn.b-cdn.net/img/Photos/Slides/img%20(22).jpg",
+    title: "Slide 2",
+    description: "Description of Slide 2",
+  },
+  {
+    image: "https://tecdn.b-cdn.net/img/Photos/Slides/img%20(23).jpg",
+  },
+];
+
+stories.add("Carousel Section", () => {
+  const [currentSlide, setCurrentSlide] = useState(0);
+
+  const handleSetCurrentSlide = (index: number) => {
+    setCurrentSlide(index);
+  };
+
+  const handleClickImage = () => {
+    window.alert(`Image Clicked: Open Modal with index: ${currentSlide}`);
+  };
+
+  return (
+    <>
+      <CarouselSection
+        slides={slides}
+        currentSlide={currentSlide}
+        handleSetCurrentSlide={handleSetCurrentSlide}
+        handleClickImage={handleClickImage}
+      />
+    </>
+  );
+});

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

@@ -0,0 +1,60 @@
+# Design List
+
+<!-- STORY -->
+
+<hr>
+
+Design list to display features/use cases
+
+##### Import
+
+```js
+import { DesignList } 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 <DesignList 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/designList/designList.stories.tsx

@@ -0,0 +1,44 @@
+import {
+  ArrowDownOnSquareStackIcon,
+  MapIcon,
+  UserGroupIcon,
+} from "@heroicons/react/24/solid";
+import { storiesOf } from "@storybook/react";
+import React from "react";
+import { DesignList } 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="text-primary-500 w-9 h-9 mb-2" />
+    ),
+  },
+  {
+    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="text-primary-500 w-9 h-9 mb-2" />,
+  },
+  {
+    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="text-primary-500 w-9 h-9 mb-2" />,
+  },
+];
+
+stories.add("Design List", () => {
+  return <DesignList iconList={iconListContent} />;
+});

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

@@ -0,0 +1,121 @@
+# FAQ Content
+
+<!-- STORY -->
+
+<hr>
+
+Component to display frequently asked questions
+
+##### Import
+
+```js
+import { FAQContent } from "blixify-ui-web/lib";
+```
+
+##### Usage
+
+```jsx
+const faqList: FaqData[] = [
+  {
+    question:
+      "How do I get started with the platform and what are the initial setup requirements?",
+    answer:
+      "Getting started with our platform is straightforward and designed to be user-friendly. First, you'll need to create an account using your email address or social media login. Once registered, you'll be guided through a brief onboarding process where you can set up your profile, preferences, and initial configurations. The platform requires a modern web browser (Chrome, Firefox, Safari, or Edge) and an internet connection. For optimal performance, we recommend using the latest version of your preferred browser. You can also download our mobile app for iOS and Android devices for on-the-go access. The initial setup typically takes 5-10 minutes, and our comprehensive help documentation and video tutorials are available to guide you through any specific features you want to explore.",
+  },
+  {
+    question:
+      "What security measures are in place to protect my data and ensure privacy compliance?",
+    answer:
+      "We take data security and privacy very seriously. Our platform implements enterprise-grade security measures including end-to-end encryption for all data transmission, AES-256 encryption for data at rest, and regular security audits conducted by third-party experts. We are fully compliant with GDPR, CCPA, and other international privacy regulations. Your data is stored in secure, geographically distributed data centers with redundant backup systems. We never share your personal information with third parties without explicit consent, and you have full control over your data with options to export, delete, or modify your information at any time. Our security team monitors for potential threats 24/7, and we provide detailed transparency reports on our security practices and any incidents that may occur.",
+  },
+  {
+    question:
+      "Can I integrate this platform with my existing business tools and what APIs are available?",
+    answer:
+      "Yes, our platform offers extensive integration capabilities with popular business tools and services. We provide RESTful APIs with comprehensive documentation, webhooks for real-time data synchronization, and pre-built connectors for major platforms like Salesforce, HubSpot, Slack, Microsoft Teams, Google Workspace, and many others. The API supports both read and write operations, allowing you to automate workflows, sync data, and build custom integrations. We also offer SDKs for popular programming languages including JavaScript, Python, Java, and .NET. For enterprise customers, we provide dedicated integration support and can develop custom connectors for proprietary systems. All integrations are thoroughly tested and maintained to ensure reliability and performance.",
+  },
+  {
+    question:
+      "What pricing plans are available and how do I choose the right one for my business needs?",
+    answer: `# Pricing Plans
+
+We offer **flexible pricing plans** designed to accommodate businesses of all sizes.
+
+## Starter Plan - $29/month
+Perfect for individuals and small teams:
+- ✅ Core features included
+- ✅ Up to 5 users
+- ✅ Basic support
+- ✅ Standard integrations
+
+## Professional Plan - $99/month
+Ideal for growing businesses:
+- ✅ All Starter features
+- ✅ **Unlimited users**
+- ✅ **Priority support**
+- ✅ **Custom integrations**
+- ✅ Advanced analytics
+- ✅ API access
+
+## Enterprise Plan
+For larger organizations with custom needs:
+- ✅ **Unlimited everything**
+- ✅ **Dedicated account management**
+- ✅ **Custom development**
+- ✅ **On-premise deployment options**
+- Pricing based on your specific requirements
+
+### Additional Benefits
+- All plans include our core functionality
+- Regular updates and customer support
+- **Annual billing with 20% discount**
+- **30-day free trial** for all plans
+- No long-term commitments required
+
+> 💡 **Pro Tip**: Start with the Starter plan and upgrade as your needs grow. You can change plans at any time!`,
+    isMarkdown: true,
+  },
+  {
+    question:
+      "How do I get technical support and what resources are available for troubleshooting?",
+    answer: `# Technical Support & Resources
+
+We provide **multiple support channels** to help you get assistance quickly.
+
+## Support Channels
+
+| Channel | Availability | Response Time | Best For |
+|---------|-------------|---------------|----------|
+| **Live Chat** | 24/7 | Instant | Urgent issues |
+| **Email** | Business hours | 2-24 hours | Detailed questions |
+| **Phone** | Business hours | Immediate | Enterprise customers |
+| **Community Forum** | Always | Variable | Tips & peer support |
+
+## Self-Service Resources
+- 📚 **Documentation** - Step-by-step guides
+- 🎥 **Video tutorials** - Visual learning
+- 🔧 **Troubleshooting guides** - Common issues
+- 💬 **FAQ** - Quick answers
+
+> 💡 **Pro Tip**: Check our documentation first - it solves 80% of common issues!`,
+    isMarkdown: true,
+  },
+];
+
+<FAQContent faqList={faqList} collapsible />;
+```
+
+##### Required props
+
+| Name          | Type           | Description |
+| ------------- | -------------- | ----------- |
+| `faqList`     | `FaqData List` |             |
+| `collapsible` | `boolean`      |             |
+
+##### FAQData
+
+| Name         | Type      | Description                                       |
+| ------------ | --------- | ------------------------------------------------- |
+| `question`   | `string`  |                                                   |
+| `answer`     | `string`  |                                                   |
+| `isMarkdown` | `boolean` | If `true`, answer will be rendered with markdown. |