blixify-ui-web-mcp 0.1.2 → 0.1.18

package/lib/components/structure/container/container.stories.tsx

@@ -1,19 +1,14 @@
-import { storiesOf } from "@storybook/react";
 import React from "react";
 import { Container } from ".";
-import README from "./README.md";
-const stories = storiesOf("Structure", module);
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
+const meta = { title: "Structure/Container" };
+export default meta;
 
-stories.add("Container", () => {
+
+export const ContainerStory = () => {
   return (
     <Container>
       <h1>Item 1</h1>
     </Container>
   );
-});
+}

package/lib/components/structure/link/link.stories.tsx

@@ -1,18 +1,12 @@
-import { storiesOf } from "@storybook/react";
 import React from "react";
 import { Link } from ".";
 import { Text } from "../text";
-import README from "./README.md";
 
-const stories = storiesOf("Structure", module);
+const meta = { title: "Structure/Link" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
-stories.add("Link", () => {
+export const LinkStory = () => {
   return (
     <>
       <Link href="https://blixify.co" linkType="external">
@@ -27,4 +21,4 @@ stories.add("Link", () => {
       </Link>
     </>
   );
-});
+}

package/lib/components/structure/text/text.stories.tsx

@@ -1,16 +1,11 @@
-import { storiesOf } from "@storybook/react";
 import React, { useEffect, useState } from "react";
 import { Text } from ".";
-import README from "./README.md";
-const stories = storiesOf("Structure", module);
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
+const meta = { title: "Structure/Text" };
+export default meta;
 
-stories.add("Text", () => {
+
+export const TextStory = () => {
   const textList = ["Hello", "World"];
   const [textValue, setTextValue] = useState(textList[0]);
   const [currentIndex, setCurrentIndex] = useState(0);
@@ -36,4 +31,4 @@ stories.add("Text", () => {
       </Text>
     </>
   );
-});
+}

package/lib/components/template/authPage/authPage.stories.tsx

@@ -1,12 +1,13 @@
-import { storiesOf } from "@storybook/react";
+import React from "react";
 import { useState } from "react";
 import { BareSignIn, AvailableProvider } from "../../auth/bareSignIn";
 import { FooterSection } from "../../design/footerSection";
-import "../../../index.css";
 
-const stories = storiesOf("Template", module);
+const meta = { title: "Template/Auth Page" };
+export default meta;
 
-stories.add("Auth Page", () => {
+
+export const AuthPage = () => {
   const [signInType, setSignInType] = useState<typeof AvailableProvider>("email");
 
   return (
@@ -65,4 +66,4 @@ stories.add("Auth Page", () => {
     />
   </>
   );
-});
+}

package/lib/components/template/landingPage/landingPage.stories.tsx

@@ -1,5 +1,5 @@
+import React from "react";
 import { Disclosure, Menu, Popover, Transition } from "@headlessui/react";
-import { storiesOf } from "@storybook/react";
 import { useState } from "react";
 import { Button } from "../../action/button";
 import { ButtonGroup } from "../../action/buttonGroup";
@@ -13,10 +13,12 @@ import { LogoCloud } from "../../design/logoCloud";
 import { RightContent } from "../../design/rightContent";
 import { SectionList } from "../../design/sectionList";
 import { Header } from "../../navigation/header";
-import "../../../index.css";
-const Logo = require("../../../assets/logo.png");
 
-const stories = storiesOf("Template", module);
+const meta = { title: "Template/Landing Page" };
+export default meta;
+
+const Logo = new URL("../../../assets/logo.png", import.meta.url).href;
+
 
 const NAVIGATION = [
   { name: "Home", href: "/" },
@@ -110,7 +112,7 @@ const CHART2_DATA = [
   { x: "[Option B]", y: 40 },
 ];
 
-stories.add("Landing Page", () => {
+export const LandingPage = () => {
   const [pricingTab, setPricingTab] = useState("tab1");
 
   const activeData = pricingTab === "tab1" ? CHART1_DATA : CHART2_DATA;
@@ -285,4 +287,4 @@ stories.add("Landing Page", () => {
       />
     </div>
   );
-});
+}

package/lib/components/template/productListing/productListing.stories.tsx

@@ -1,6 +1,5 @@
 import { Disclosure, Menu, Popover, Transition } from "@headlessui/react";
 import { ShoppingBagIcon } from "@heroicons/react/24/outline";
-import { storiesOf } from "@storybook/react";
 import React, { useState } from "react";
 import { Button } from "../../action/button";
 import { ActionSection } from "../../design/actionSection";
@@ -11,17 +10,12 @@ import { List } from "../../display/list";
 import { Rating } from "../../input/rating";
 import { Header } from "../../navigation/header";
 import { Container } from "../../structure/container";
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const Logo = require("../../../assets/logo.png");
 
-const stories = storiesOf("Template", module).addParameters({
-  docs: {
-    description: {
-      component:
-        "Full-page e-commerce templates combining multiple components into ready-to-use layouts. These templates demonstrate real-world compositions of Header, HeroSection, Grid, List, ActionSection, and FooterSection.",
-    },
-  },
-});
+const meta = { title: "Template/Product Listing" };
+export default meta;
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const Logo = new URL("../../../assets/logo.png", import.meta.url).href;
 
 const NAVIGATION = [
   { name: "Home", href: "#" },
@@ -132,7 +126,7 @@ const REVIEWS = [
   },
 ];
 
-stories.add("Product Listing", () => {
+export const ProductListing = () => {
   const [cartCount, setCartCount] = useState(0);
 
   const handleAddToCart = (e: React.MouseEvent) => {
@@ -294,4 +288,4 @@ stories.add("Product Listing", () => {
       />
     </div>
   );
-});
+}

package/lib/components/template/productOverview/productOverview.stories.tsx

@@ -1,5 +1,5 @@
+import React from "react";
 import { HeartIcon } from "@heroicons/react/24/outline";
-import { storiesOf } from "@storybook/react";
 import { useState } from "react";
 import { Button } from "../../action/button";
 import { IconButton } from "../../action/iconButton";
@@ -8,14 +8,8 @@ import { FileGrid } from "../../design/fileGrid";
 import { Rating } from "../../input/rating";
 import { Container } from "../../structure/container";
 
-const stories = storiesOf("Template", module).addParameters({
-  docs: {
-    description: {
-      component:
-        "Full-page e-commerce templates combining multiple components into ready-to-use layouts. These templates demonstrate real-world compositions of Container, FileGrid, Rating, Button, IconButton, and Collapse.",
-    },
-  },
-});
+const meta = { title: "Template/Product Overview" };
+export default meta;
 
 const PRODUCT_IMAGES = [
   {
@@ -58,7 +52,7 @@ const FEATURES = [
 
 const RATING = 4;
 
-stories.add("Product Overview", () => {
+export const ProductOverview = () => {
   const [selectedColor, setSelectedColor] = useState("dark");
   const [wishlisted, setWishlisted] = useState(false);
 
@@ -191,4 +185,4 @@ stories.add("Product Overview", () => {
       </div>
     </Container>
   );
-});
+}

package/lib/components/template/shoppingCart/shoppingCart.stories.tsx

@@ -1,25 +1,19 @@
 import { QuestionMarkCircleIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { CheckCircleIcon, ClockIcon } from "@heroicons/react/24/solid";
-import { storiesOf } from "@storybook/react";
 import React, { useState } from "react";
 import { Button } from "../../action/button";
 import { Option, Select } from "../../input/select";
 import { Container } from "../../structure/container";
 
+const meta = { title: "Template/Shopping Cart" };
+export default meta;
+
+
 const qtyOptions: Option[] = [1, 2, 3, 4, 5].map((n) => ({
   key: String(n),
   label: String(n),
 }));
 
-const stories = storiesOf("Template", module).addParameters({
-  docs: {
-    description: {
-      component:
-        "Full-page e-commerce templates combining multiple components into ready-to-use layouts. These templates demonstrate real-world compositions of Container, Button, and Select for cart management with live quantity updates and order summary.",
-    },
-  },
-});
-
 const PRODUCT_IMG =
   "https://plus.unsplash.com/premium_photo-1669905375318-87c4050418cd?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D";
 
@@ -70,7 +64,7 @@ const initialItems: CartItem[] = [
 const SHIPPING = 5.0;
 const TAX_RATE = 0.084;
 
-stories.add("Shopping Cart", () => {
+export const ShoppingCart = () => {
   const [items, setItems] = useState<CartItem[]>(initialItems);
 
   const handleRemove = (id: string) =>
@@ -249,4 +243,4 @@ stories.add("Shopping Cart", () => {
       </div>
     </Container>
   );
-});
+}

package/lib/components/template/userHomePage/userHomePage.stories.tsx

@@ -1,4 +1,3 @@
-import { storiesOf } from "@storybook/react";
 import React, { useState } from "react";
 import { Button } from "../../action/button";
 import { ActionSection } from "../../design/actionSection";
@@ -12,12 +11,14 @@ import { Select } from "../../input/select";
 import { TextInput } from "../../input/textInput";
 import { Container } from "../../structure/container";
 import { Header } from "../../navigation/header";
-import "../../../index.css";
 import { Disclosure, Menu, Popover, Transition } from "@headlessui/react";
+
+const meta = { title: "Template/User Home Page" };
+export default meta;
+
 // eslint-disable-next-line @typescript-eslint/no-var-requires
-const Logo = require("../../../assets/logo.png");
+const Logo = new URL("../../../assets/logo.png", import.meta.url).href;
 
-const stories = storiesOf("Template", module);
 
 const QUAL_ITEMS = [
   {
@@ -261,7 +262,7 @@ const PRODUCT_GRID_ITEMS: { [id: string]: React.ReactElement } = {
   ),
 };
 
-stories.add("User Home Page", () => {
+export const UserHomePage = () => {
   const [videoModal, setVideoModal] = useState(false);
   const [videoUrl, setVideoUrl] = useState("");
 
@@ -602,4 +603,4 @@ stories.add("User Home Page", () => {
       />
     </div>
   );
-});
+}

package/lib/components/template/userRankingDashboard/userRankingDashboard.stories.tsx

@@ -1,4 +1,4 @@
-import { storiesOf } from "@storybook/react";
+import React from "react";
 import { useState } from "react";
 import { Button } from "../../action/button";
 import { ButtonGroup } from "../../action/buttonGroup";
@@ -8,14 +8,8 @@ import { TextInput } from "../../input/textInput";
 import { Tabs } from "../../navigation/tabs";
 import { Container } from "../../structure/container";
 
-const stories = storiesOf("Template", module).addParameters({
-  docs: {
-    description: {
-      component:
-        "Full-page admin dashboard templates combining multiple components into ready-to-use layouts. These templates demonstrate real-world compositions of Tabs, LineChart, ButtonGroup, Select, TextInput, and Container for user analytics and leaderboard views.",
-    },
-  },
-});
+const meta = { title: "Template/User Ranking Dashboard" };
+export default meta;
 
 interface User {
   id: string;
@@ -166,7 +160,7 @@ const OVERALL_STATS = {
   )} days avg`,
 };
 
-stories.add("User Ranking Dashboard", () => {
+export const UserRankingDashboard = () => {
   const [selectedId, setSelectedId] = useState<string>(ALL_USERS_ID);
   const [search, setSearch] = useState("");
   const [activeTab, setActiveTab] = useState("users");
@@ -478,4 +472,4 @@ stories.add("User Ranking Dashboard", () => {
       </div>
     </Container>
   );
-});
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "blixify-ui-web-mcp",
-  "version": "0.1.2",
+  "version": "0.1.18",
   "license": "MIT",
   "main": "lib/mcp/server.js",
   "bin": {