blixify-ui-web-mcp 0.1.3 → 0.1.18

package/lib/components/data/queryForm/queryForm.stories.tsx

@@ -1,4 +1,3 @@
-import { storiesOf } from "@storybook/react";
 import axios from "axios";
 import React, { useEffect, useState } from "react";
 import { QueryForm } from ".";
@@ -17,17 +16,12 @@ import {
 } from "../stories";
 import { blixifyDevCollection, blixifyDevWorkspace } from "../testData";
 import { parseSpaceToDataStructure, parseWorkspaceSettings } from "../utils";
-import README from "./README.md";
 
-const stories = storiesOf("Data", module);
+const meta = { title: "Data/Query Form" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
-stories.add("Query Form", () => {
+export const QueryFormStory = () => {
   const [selectedSpace, setSelectedSpace] = useState<Space | null>(null);
   const [allWorkspaceSpace, setAllWorkspaceSpace] = useState<Space[]>([]);
   const [selectedWorkspace, setSelectedWorkspace] =
@@ -82,4 +76,4 @@ stories.add("Query Form", () => {
       />
     );
   } else return <Loading />;
-});
+}

package/lib/components/data/readQuery/readQuery.stories.tsx

@@ -1,17 +1,12 @@
-import { storiesOf } from "@storybook/react";
 import axios from "axios";
-import moment from "moment-timezone";
 import React, { useState } from "react";
 import { ReadQuery } from ".";
 import { Button } from "../../action/button";
 import { StorySection } from "../../storyUtils";
-import README from "./README.md";
 
-const stories = storiesOf("Data", module);
+const meta = { title: "Data/Read Query" };
+export default meta;
 
-stories.addParameters({
-  readme: { content: README },
-});
 
 const query = new ReadQuery({
   dbModule: axios,
@@ -20,7 +15,7 @@ const query = new ReadQuery({
   dbEndpoint: "https://api.example.com/api/mongoData",
 });
 
-stories.add("Read Query", () => {
+export const ReadQueryStory = () => {
   const [result, setResult] = useState<string>("");
 
   const run = async (label: string, fn: () => Promise<any>) => {
@@ -253,4 +248,4 @@ stories.add("Read Query", () => {
       )}
     </div>
   );
-});
+}

package/lib/components/data/readQueryHoc/readQueryHoc.stories.tsx

@@ -1,18 +1,12 @@
-import { storiesOf } from "@storybook/react";
 import axios from "axios";
 import React from "react";
 import { ReadQueryHoc } from ".";
-import README from "./README.md";
 
-const stories = storiesOf("Data", module);
+const meta = { title: "Data/ReadQueryHoc" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
-stories.add("ReadQueryHoc", () => {
+export const ReadQueryHocStory = () => {
   return (
     <ReadQueryHoc
       database={{
@@ -30,4 +24,4 @@ stories.add("ReadQueryHoc", () => {
       }}
     />
   );
-});
+}

package/lib/components/data/writeQuery/writeQuery.stories.tsx

@@ -1,16 +1,12 @@
-import { storiesOf } from "@storybook/react";
 import axios from "axios";
 import React, { useState } from "react";
 import { WriteQuery } from ".";
 import { Button } from "../../action/button";
 import { StorySection } from "../../storyUtils";
-import README from "./README.md";
 
-const stories = storiesOf("Data", module);
+const meta = { title: "Data/Write Query" };
+export default meta;
 
-stories.addParameters({
-  readme: { content: README },
-});
 
 const query = new WriteQuery({
   dbModule: axios,
@@ -19,7 +15,7 @@ const query = new WriteQuery({
   dbEndpoint: "https://api.example.com/api/mongoData",
 });
 
-stories.add("Write Query", () => {
+export const WriteQueryStory = () => {
   const [result, setResult] = useState<string>("");
 
   const run = async (label: string, fn: () => Promise<any>) => {
@@ -206,4 +202,4 @@ stories.add("Write Query", () => {
       )}
     </div>
   );
-});
+}

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

@@ -1,23 +1,19 @@
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 import { ActionSection } from ".";
 import { Button } from "../../action/button";
-import README from "./README.md"; // TypeScript declaration exists in types.d.ts
 
-const stories = storiesOf("Design", module);
+const meta = { title: "Design/Action Section" };
+export default meta;
+
+ // TypeScript declaration exists in types.d.ts
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 // Sample background image URL (you can replace with actual image)
 const sampleBackgroundImage =
   "https://images.unsplash.com/photo-1516541196182-6bdb0516ed27?q=80&w=987&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D";
 
-stories.add("Action Section", () => {
+export const ActionSectionStory = () => {
   return (
     <div className="divide-y-8">
       <ActionSection
@@ -71,4 +67,4 @@ stories.add("Action Section", () => {
       />
     </div>
   );
-});
+}

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

@@ -1,17 +1,11 @@
-import { storiesOf } from "@storybook/react";
 import React from "react";
 import { Banner } from ".";
-import README from "./README.md";
 
-const stories = storiesOf("Design", module);
+const meta = { title: "Design/Banner" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
-stories.add("Banner", () => {
+export const BannerStory = () => {
   const renderContent = () => {
     return (
       <>
@@ -31,4 +25,4 @@ stories.add("Banner", () => {
   };
 
   return <Banner content={renderContent()} />;
-});
+}

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

@@ -1,18 +1,12 @@
 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);
+const meta = { title: "Design/Banner Action" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
-stories.add("Banner Action", () => {
+export const BannerActionStory = () => {
   return (
     <BannerAction
       text={"Lorem ipsum dolor sit amet."}
@@ -22,4 +16,4 @@ stories.add("Banner Action", () => {
       close={true}
     />
   );
-});
+}

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

@@ -1,15 +1,9 @@
-import { storiesOf } from "@storybook/react";
 import React from "react";
 import { BlogSection } from ".";
-import README from "./README.md";
 
-const stories = storiesOf("Design", module);
+const meta = { title: "Design/Blog Section" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const postList = [
   {
@@ -63,10 +57,10 @@ const postList = [
   },
 ];
 
-stories.add("Blog Section", () => {
+export const BlogSectionStory = () => {
   return (
     <>
       <BlogSection postList={postList} />
     </>
   );
-});
+}

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

@@ -1,15 +1,9 @@
-import { storiesOf } from "@storybook/react";
 import React, { useState } from "react";
 import { CarouselSection } from ".";
-import README from "./README.md";
 
-const stories = storiesOf("Design", module);
+const meta = { title: "Design/Carousel Section" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const slides = [
   {
@@ -28,7 +22,7 @@ const slides = [
   },
 ];
 
-stories.add("Carousel Section", () => {
+export const CarouselSectionStory = () => {
   const [currentSlide, setCurrentSlide] = useState(0);
 
   const handleSetCurrentSlide = (index: number) => {
@@ -49,4 +43,4 @@ stories.add("Carousel Section", () => {
       />
     </>
   );
-});
+}

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

@@ -3,18 +3,12 @@ import {
   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);
+const meta = { title: "Design/Design List" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const iconListContent = [
   {
@@ -39,6 +33,6 @@ const iconListContent = [
   },
 ];
 
-stories.add("Design List", () => {
+export const DesignListStory = () => {
   return <DesignList iconList={iconListContent} />;
-});
+}

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

@@ -1,15 +1,9 @@
-import { storiesOf } from "@storybook/react";
 import React from "react";
 import { FAQContent, FaqData } from ".";
-import README from "./README.md";
 
-const stories = storiesOf("Design", module);
+const meta = { title: "Design/FAQ Content" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const faqList: FaqData[] = [
   {
@@ -98,6 +92,6 @@ We provide **multiple support channels** to help you get assistance quickly.
   },
 ];
 
-stories.add("FAQ Content", () => {
+export const FAQContentStory = () => {
   return <FAQContent faqList={faqList} collapsible />;
-});
+}

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

@@ -1,17 +1,11 @@
-import { storiesOf } from "@storybook/react";
 import React, { useState } from "react";
 import { FileGrid, FileGridData } from ".";
-import README from "./README.md";
 
-const stories = storiesOf("Design", module);
+const meta = { title: "Design/File Grid" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
-stories.add("File Grid", () => {
+export const FileGridStory = () => {
   const [files] = useState<FileGridData[]>([
     {
       fileName: "Invoice December 2025",
@@ -107,4 +101,4 @@ stories.add("File Grid", () => {
       </div>
     </>
   );
-});
+}

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

@@ -1,18 +1,12 @@
 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);
+const meta = { title: "Design/File Viewer" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
-stories.add("File Viewer", () => {
+export const FileViewerStory = () => {
   const [file] = useState(
     "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"
   );
@@ -25,4 +19,4 @@ stories.add("File Viewer", () => {
       />
     </div>
   );
-});
+}

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

@@ -1,15 +1,9 @@
-import { storiesOf } from "@storybook/react";
 import React from "react";
 import { FooterSection } from ".";
-import README from "./README.md";
 
-const stories = storiesOf("Design", module);
+const meta = { title: "Design/Footer Section" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const footerList = [
   {
@@ -49,7 +43,7 @@ const iconList = [
   },
 ];
 
-stories.add("Footer Section", () => {
+export const FooterSectionStory = () => {
   const renderLogoCloud = () => {
     let listView: any = [];
     iconList.map((data) => {
@@ -81,4 +75,4 @@ stories.add("Footer Section", () => {
       caption="© 2022 Blixify. All rights reserved."
     />
   );
-});
+}

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

@@ -1,17 +1,11 @@
-import { storiesOf } from "@storybook/react";
 import React, { useEffect } from "react";
 import { GoogleReview } from ".";
-import README from "./README.md";
 
-const stories = storiesOf("Design", module);
+const meta = { title: "Design/Google Review" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
-stories.add("Google Review", () => {
+export const GoogleReviewStory = () => {
   const placeId = "ChIJr5AqerJPzDERZR0kfGP-MR4";
   useEffect(() => {
     try {
@@ -30,4 +24,4 @@ stories.add("Google Review", () => {
   }, []);
 
   return <GoogleReview placeId={placeId} minRatingScore={4} />;
-});
+}

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

@@ -1,18 +1,12 @@
-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);
+const meta = { title: "Design/Hero Section" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
-stories.add("Hero Section", () => {
+export const HeroSectionStory = () => {
   return (
     <>
       <HeroSection
@@ -82,4 +76,4 @@ stories.add("Hero Section", () => {
       />
     </>
   );
-});
+}

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

@@ -3,18 +3,12 @@ import {
   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);
+const meta = { title: "Design/Icon List" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const iconListContent = [
   {
@@ -36,6 +30,6 @@ const iconListContent = [
     icon: <UserGroupIcon className="w-6 h-6" />,
   },
 ];
-stories.add("Icon List", () => {
+export const IconListStory = () => {
   return <IconList iconList={iconListContent} />;
-});
+}

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

@@ -1,15 +1,9 @@
-import { storiesOf } from "@storybook/react";
 import React, { useState } from "react";
 import { ImageGallery } from ".";
-import README from "./README.md";
 
-const stories = storiesOf("Design", module);
+const meta = { title: "Design/Image Gallery" };
+export default meta;
 
-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",
@@ -22,7 +16,7 @@ const images = [
   "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", () => {
+export const ImageGalleryStory = () => {
   const [currentImage, setCurrentImage] = useState(0);
 
   const handleSetCurrentImage = (index: number) => {
@@ -42,4 +36,4 @@ stories.add("Image Gallery", () => {
       />
     </div>
   );
-});
+}

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

@@ -1,15 +1,9 @@
-import { storiesOf } from "@storybook/react";
 import React from "react";
 import { ImageZoom } from ".";
-import README from "./README.md";
 
-const stories = storiesOf("Design", module);
+const meta = { title: "Design/Image Zoom" };
+export default meta;
 
-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",
@@ -17,7 +11,7 @@ const imgList = [
   "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", () => {
+export const ImageZoomStory = () => {
   return (
     <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
       {imgList.map((eachImg, index) => (
@@ -27,4 +21,4 @@ stories.add("Image Zoom", () => {
       ))}
     </div>
   );
-});
+}

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

@@ -1,22 +1,16 @@
-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);
+const meta = { title: "Design/Left Content" };
+export default meta;
 
-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", () => {
+export const LeftContentStory = () => {
   return (
     <LeftContent
       title="MyVac"
@@ -29,4 +23,4 @@ stories.add("Left Content", () => {
       }
     />
   );
-});
+}

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

@@ -1,15 +1,9 @@
-import { storiesOf } from "@storybook/react";
 import React from "react";
 import { LogoCloud } from ".";
-import README from "./README.md";
 
-const stories = storiesOf("Design", module);
+const meta = { title: "Design/Logo Cloud" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const logoList = [
   {
@@ -39,6 +33,6 @@ const logoList = [
   },
 ];
 
-stories.add("Logo Cloud", () => {
+export const LogoCloudStory = () => {
   return <LogoCloud logoList={logoList} />;
-});
+}

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

@@ -1,18 +1,12 @@
-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);
+const meta = { title: "Design/Onboarding" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
-stories.add("Onboarding", () => {
+export const OnboardingStory = () => {
   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);
@@ -110,4 +104,4 @@ stories.add("Onboarding", () => {
       </div>
     </>
   );
-});
+}