blixify-ui-web-mcp 0.1.1

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

@@ -0,0 +1,103 @@
+import { storiesOf } from "@storybook/react";
+import React from "react";
+import { FAQContent, FaqData } from ".";
+import README from "./README.md";
+
+const stories = storiesOf("Design", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+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,
+  },
+];
+
+stories.add("FAQ Content", () => {
+  return <FAQContent faqList={faqList} collapsible />;
+});

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

@@ -0,0 +1,87 @@
+# File Grid
+
+<!-- STORY -->
+
+<hr>
+
+File grid for images and files
+
+##### Import
+
+```js
+import { FileGrid, FileGridData } from "blixify-ui-web/lib";
+```
+
+##### Usage
+
+```jsx
+const [files] = useState<FileGridData[]>([
+    {
+      file: "https://plus.unsplash.com/premium_photo-1731948133366-0d1dbb7db851?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      fileType: "image",
+    },
+    {
+      file: "https://images.unsplash.com/photo-1743191771058-d06e793dda2d?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      fileType: "image",
+    },
+    {
+      file: "https://wsform.com/wp-content/uploads/2021/04/day.csv",
+      fileType: "file",
+    },
+    {
+      file: "https://plus.unsplash.com/premium_photo-1742561620640-10cc6ec7f786?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      fileType: "image",
+    },
+    {
+      file: "https://www.aeee.in/wp-content/uploads/2020/08/Sample-pdf.pdf",
+      fileType: "file",
+    },
+]);
+
+return (
+    <>
+      <h1>Inline preview - Display preview above grid</h1>
+      <FileGrid
+        fileList={files}
+        title="Images & Files"
+        enableDownload
+        inlinePreview
+      />
+      <h1 className="mt-10 ">
+        Without inline preview - Display preview in modal
+      </h1>
+      <FileGrid fileList={files} title="Images & Files" enableDownload />
+      <h1 className="mt-10 ">Download disabled</h1>
+      <FileGrid fileList={files} title="Images & Files" />
+    </>
+  );
+
+```
+
+##### Required props
+
+| Name       | Type             | Description                       |
+| ---------- | ---------------- | --------------------------------- |
+| `fileList` | `FileGridData[]` | Refer to FileGridData class below |
+
+##### Optional props
+
+| Name                         | Type                                                                                | Description                                                                                           |
+| ---------------------------- | ----------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| `title`                      | `string`                                                                            | Text title                                                                                            |
+| `className`                  | `string`                                                                            | Tailwind class                                                                                        |
+| `enableDownload`             | `boolean`                                                                           | If `true`, each file can be downloaded.                                                               |
+| `enableMultiDownload`        | `boolean`                                                                           | If `true`, checkbox will appear on each file, option to select all files and download selected files. |
+| `inlinePreview`              | `boolean`                                                                           | If `true`, each file can be previewed above the grid, preview in modal will be disabled.              |
+| `inlinePreviewPos`           | `"bottom"`                                                                          | Position of inline preview; use `"bottom"` to render it below the grid.                               |
+| `inlinePreviewHeight`        | `string`                                                                            | Height for the inline preview area (e.g. `"h-[320px]"`, `"h-80"`).                                    |
+| `fileListDisplayAs`          | `"list"`                                                                            | Display files as a list instead of the default grid.                                                  |
+| `externalControlledCheckbox` | `{ checkedFiles: string[]; onCheckFile: (checked: boolean, file: string) => void;}` | Control checkbox state externally and callback function for checked items.                            |
+
+##### FileGridData
+
+| Name        | Type         | Description |
+| ----------- | ------------ | ----------- |
+| `file`      | `string`     | File URI    |
+| `fileType`  | `image/file` | File type   |
+| `fileName?` | `string`     | File name   |

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

@@ -0,0 +1,110 @@
+import { storiesOf } from "@storybook/react";
+import React, { useState } from "react";
+import { FileGrid, FileGridData } from ".";
+import README from "./README.md";
+
+const stories = storiesOf("Design", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("File Grid", () => {
+  const [files] = useState<FileGridData[]>([
+    {
+      fileName: "Invoice December 2025",
+      file: "https://plus.unsplash.com/premium_photo-1731948133366-0d1dbb7db851?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      fileType: "image",
+    },
+    {
+      fileName: "Purchase Order Feb 2023",
+      file: "https://images.unsplash.com/photo-1743191771058-d06e793dda2d?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      fileType: "image",
+    },
+    {
+      fileName: "Report (01/03/24 - 25/12/25)",
+      file: "https://wsform.com/wp-content/uploads/2021/04/day.csv",
+      fileType: "file",
+    },
+    {
+      fileName: "Invoice_2.pdf",
+      file: "https://plus.unsplash.com/premium_photo-1742561620640-10cc6ec7f786?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      fileType: "image",
+    },
+    {
+      fileName: "Statement_Sep_2025.pdf",
+      file: "https://www.aeee.in/wp-content/uploads/2020/08/Sample-pdf.pdf",
+      fileType: "file",
+    },
+    {
+      fileName: "Google Drive File Preview Link",
+      file: "https://drive.google.com/file/d/19jeqR72mkZ2yftOPBtlbHbOHNhEnK1S4/preview",
+      fileType: "iframe",
+    },
+    {
+      fileName: "Google Drive Image Preview Link",
+      file: "https://drive.google.com/file/d/1XaZn8XlgySwfzm_aos_tZN8-Ye_ewHTs/preview",
+      fileType: "iframe",
+    },
+  ]);
+
+  const [checkFiles, setCheckedFiles] = useState<string[]>([]);
+
+  return (
+    <>
+      <h1 className="text-lg font-medium">Inline preview & Multi Download</h1>
+      <p className="mb-2 text-sm text-gray-500">Display preview above grid</p>
+      <div className="p-4 border rounded-md">
+        <FileGrid
+          fileList={files}
+          title="Images & Files"
+          enableMultiDownload
+          inlinePreview
+        />
+      </div>
+      <h1 className="mt-10 text-lg font-medium">
+        Inline preview Display as List
+      </h1>
+      <p className="mb-2 text-sm text-gray-500">Display file list as list</p>
+      <FileGrid
+        fileList={files}
+        title="Images & Files"
+        inlinePreview
+        fileListDisplayAs="list"
+        inlinePreviewPos="bottom"
+      />
+      <h1 className="mt-10 mb-2 text-lg font-medium">
+        Externally controlled checkbox state
+      </h1>
+      <div className="p-4 border rounded-md">
+        <FileGrid
+          fileList={files}
+          title="Images & Files"
+          externalControlledCheckbox={{
+            checkedFiles: checkFiles,
+            onCheckFile: (checked, file) => {
+              if (checked) {
+                setCheckedFiles((prev) => [...prev, file]);
+              } else {
+                setCheckedFiles((prev) => prev.filter((f) => f !== file));
+              }
+            },
+          }}
+        />
+      </div>
+
+      <h1 className="mt-10 text-lg font-medium">Without inline preview</h1>
+      <p className="mb-2 text-sm text-gray-500">Display preview in modal</p>
+      <div className="p-4 border rounded-md">
+        <FileGrid fileList={files} title="Images & Files" enableDownload />
+      </div>
+
+      <h1 className="mt-10 mb-2 text-lg font-medium">Download disabled</h1>
+      <div className="p-4 border rounded-md">
+        <FileGrid fileList={files} title="Images & Files" />
+      </div>
+    </>
+  );
+});

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

@@ -0,0 +1,40 @@
+# File Viewer
+
+<!-- STORY -->
+
+<hr>
+
+File viewer for metadata
+
+##### Import
+
+```js
+import { FileViewer } from "blixify-ui-web/lib";
+```
+
+##### Usage
+
+```jsx
+<FileViewer
+  file={file}
+  fileType="application/pdf"
+  fileIcon={<FolderIcon className={`mx-auto h-24 w-24 text-gray-300`} />}
+/>
+```
+
+##### Required props
+
+| Name       | Type     | Description               |
+| ---------- | -------- | ------------------------- |
+| `file`     | `string` | File URI                  |
+| `fileIcon` | `string` | File Icon to be displayed |
+| `fileType` | `string` | File Type                 |
+
+##### Optional props
+
+| Name             | Type                                                                                | Description                                         |
+| ---------------- | ----------------------------------------------------------------------------------- | --------------------------------------------------- |
+| `className`      | `string`                                                                            | Tailwind class                                      |
+| `disablePreview` | `boolean`                                                                           | If `true`, file cannot be previewed in a modal.     |
+| `enableDownload` | `boolean`                                                                           | If `true`, file can be downloaded.                  |
+| `checkbox`       | `{enable: boolean, checked: boolean, onCheck: (checked: boolean, fileUri: string)}` | Enable checkbox and callback function for checkbox. |

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

@@ -0,0 +1,28 @@
+import { FolderIcon } from "@heroicons/react/20/solid";
+import { storiesOf } from "@storybook/react";
+import React, { useState } from "react";
+import { FileViewer } from ".";
+import README from "./README.md";
+
+const stories = storiesOf("Design", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("File Viewer", () => {
+  const [file] = useState(
+    "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"
+  );
+  return (
+    <div className="w-full h-full border rounded-md flex justify-center items-center p-4">
+      <FileViewer
+        file={file}
+        fileType="application/pdf"
+        fileIcon={<FolderIcon className={`mx-auto h-24 w-24 text-gray-300`} />}
+      />
+    </div>
+  );
+});

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

@@ -0,0 +1,62 @@
+# Footer Section
+
+<!-- STORY -->
+
+<hr>
+
+Footer to be displayed at the bottom of a website
+
+##### Import
+
+```js
+import { FooterSection } from "blixify-ui-web/lib";
+```
+
+##### Usage
+
+```jsx
+<FooterSection
+  footerList={footerList}
+  logoCloud={
+    <div className="mt-12 space-y-4 xl:col-span-1 xl:mt-0">
+      <img
+        className="h-6 lg:h-7"
+        src={
+          "https://mysukarela.com/static/logo-6b7f03c3a6d1c811bbd7b7a5fd9d9b4a.png"
+        }
+        alt="Blixify"
+      />
+      <p className="text-gray-500 font-body text-base">Powered By :</p>
+      <div className="flex flex-row">{renderLogoCloud()}</div>
+    </div>
+  }
+  caption="© 2022 Blixify. All rights reserved."
+/>
+```
+
+##### Required props
+
+| Name         | Type          | Description       |
+| ------------ | ------------- | ----------------- |
+| `caption`    | `string`      | Copyright caption |
+| `footerList` | `Footer List` | Footer Class List |
+
+##### Optional props
+
+| Name        | Type            | Default | Description                      |
+| ----------- | --------------- | ------- | -------------------------------- |
+| `logoCloud` | `React Element` | ""      | Personalisation logo to be added |
+
+##### Footer List
+
+| Name      | Type             | Description           |
+| --------- | ---------------- | --------------------- |
+| `title`   | `string`         | Footer title          |
+| `subList` | `Footer Sublist` | Footer Sub Class List |
+
+##### Footer Sub List
+
+| Name   | Type     | Description    |
+| ------ | -------- | -------------- |
+| `name` | `string` | Sub item title |
+| `link` | `string` | Url href       |

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

@@ -0,0 +1,84 @@
+import { storiesOf } from "@storybook/react";
+import React from "react";
+import { FooterSection } from ".";
+import README from "./README.md";
+
+const stories = storiesOf("Design", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+const footerList = [
+  {
+    title: "Company",
+    subList: [
+      {
+        name: "About Us",
+        link: "/aboutUs",
+      },
+      {
+        name: "FAQs",
+        link: "/faqs",
+      },
+    ],
+  },
+  {
+    title: "NGO",
+    subList: [
+      {
+        name: "For NGO",
+        link: "/forNGO",
+      },
+    ],
+  },
+];
+
+const iconList = [
+  {
+    className: "h-12 lg:h-14",
+    src: "https://mysukarela.com/static/logo_ifrc-36b17eda48bfb8cd6b233a99f4f5d768.png",
+    alt: "Blixify",
+  },
+  {
+    className: "h-12 lg:h-14 px-5",
+    src: "https://mysukarela.com/static/logo_taf-8babb3a4e7ce085a23cfe88ccc8757cd.png",
+    alt: "Blixify",
+  },
+];
+
+stories.add("Footer Section", () => {
+  const renderLogoCloud = () => {
+    let listView: any = [];
+    iconList.map((data) => {
+      listView.push(
+        <img className={data.className} src={data.src} alt={data.alt} />
+      );
+      return null;
+    });
+
+    return listView;
+  };
+
+  return (
+    <FooterSection
+      footerList={footerList}
+      logoCloud={
+        <div className="mt-12 space-y-4 xl:col-span-1 xl:mt-0">
+          <img
+            className="h-6 lg:h-7"
+            src={
+              "https://mysukarela.com/static/logo-6b7f03c3a6d1c811bbd7b7a5fd9d9b4a.png"
+            }
+            alt="Blixify"
+          />
+          <p className="text-gray-500 font-body text-base">Powered By :</p>
+          <div className="flex flex-row">{renderLogoCloud()}</div>
+        </div>
+      }
+      caption="© 2022 Blixify. All rights reserved."
+    />
+  );
+});

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

@@ -0,0 +1,45 @@
+# Google Review
+
+<!-- STORY -->
+
+<hr>
+
+Google Review List
+
+### Getting Started
+
+##### Initialise Google API
+
+i. Follow tutorial from google maps platform to first [installation](https://developers.google.com/maps/documentation/javascript/places)
+
+```js
+<script
+  async
+  src="https://maps.googleapis.com/maps/api/js?key="[YOUR_API_KEY]"&libraries=places"
+></script>
+```
+
+##### Import
+
+```js
+import { GoogleReview } from "blixify-ui-web/lib";
+```
+
+##### Usage
+
+```jsx
+return return <GoogleReview placeId={placeId} minRatingScore={4} />;
+```
+
+##### Required props
+
+| Name      | Type     | Description               |
+| --------- | -------- | ------------------------- |
+| `placeId` | `string` | Place ID from Google Maps |
+
+##### Optional props
+
+| Name             | Type      | Description                                                                                           |
+| ---------------- | --------- | ----------------------------------------------------------------------------------------------------- |
+| `loading`        | `boolean` |                                                                                                       |
+| `minRatingScore` | `number`  | If provided, only Google Reviews with more than or equal to the minimum rating score will be returned |

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

@@ -0,0 +1,33 @@
+import { storiesOf } from "@storybook/react";
+import React, { useEffect } from "react";
+import { GoogleReview } from ".";
+import README from "./README.md";
+
+const stories = storiesOf("Design", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Google Review", () => {
+  const placeId = "ChIJr5AqerJPzDERZR0kfGP-MR4";
+  useEffect(() => {
+    try {
+      const mapAPIKey = "";
+      const mapScript = document.createElement("script");
+      mapScript.id = "googleMaps";
+      mapScript.type = "text/javascript";
+      mapScript.src = `https://maps.googleapis.com/maps/api/js?key=${mapAPIKey}&libraries=places,drawing,geometry`;
+      mapScript.async = true;
+      mapScript.defer = true;
+      const head = document.getElementsByTagName("head")[0];
+      if (head) {
+        head.appendChild(mapScript);
+      }
+    } catch (err) {}
+  }, []);
+
+  return <GoogleReview placeId={placeId} minRatingScore={4} />;
+});

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

@@ -0,0 +1,48 @@
+# Hero Section
+
+<!-- STORY -->
+
+<hr>
+
+Hero Section as landing page of a Website
+
+##### Import
+
+```js
+import { HeroSection } from "blixify-ui-web/lib";
+```
+
+##### Usage
+
+```jsx
+<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"
+  callToAction={
+    <div>
+      <Button text="Sign Up" type="normal" size="small" />
+    </div>
+  }
+/>
+```
+
+##### Required props
+
+| Name      | Type     | Description     |
+| --------- | -------- | --------------- |
+| `size`    | `string` | small/big       |
+| `title`   | `string` | Title           |
+| `content` | `string` | Content of hero |
+
+##### Optional props
+
+| Name           | Type              | Default                   | Description |
+| -------------- | ----------------- | ------------------------- | ----------- |
+| `image`        | `Hero Image`      | ""                        |             |
+| `callToAction` | `React Element`   | "Call to action elements" |             |
+| `className`    | `tailwind class`  | ""                        |             |
+| `imageElement` | `React Element`   | ""                        |             |
+| `imgContain`   | `boolean`         | false                     |             |
+| `design`       | `split/angle/box` | "dot"                     |             |