blixify-ui-web-mcp 0.1.3 → 0.1.19

package/lib/components/auth/bareSignUp/bareSignUp.stories.tsx

@@ -1,26 +1,20 @@
-import { storiesOf } from "@storybook/react";
 import React, { useRef, useState } from "react";
-import { BareSignUp } from ".";
+import { BareSignUp as BareSignUpImpl } from ".";
 import { Option, Select } from "../../input/select";
 import { TextInput } from "../../input/textInput";
 import { AvailableProvider } from "../bareSignIn";
-import README from "./README.md";
 import { StorySection } from "../../storyUtils";
 
-const stories = storiesOf("Auth", module);
+const meta = { title: "Auth/Bare Sign Up" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const genderOptions: Option[] = [
   { key: "M", label: "Male" },
   { key: "F", label: "Female" },
 ];
 
-stories.add("Bare Sign Up", () => {
+export const BareSignUp = () => {
   const custFormRef: any = useRef(null);
   const signUpFormRef: any = useRef(null);
   const input1: any = useRef(null);
@@ -118,7 +112,7 @@ stories.add("Bare Sign Up", () => {
         }
       >
         <div className="p-4 w-full max-w-md bg-white rounded-lg shadow-sm border border-gray-100">
-          <BareSignUp
+          <BareSignUpImpl
             type={signUpType}
             stepIndex={stepIndex}
             handleUpdateStepIndex={setStepIndex}
@@ -141,7 +135,7 @@ stories.add("Bare Sign Up", () => {
         }
       >
         <div className="p-4 w-full max-w-sm bg-white rounded-lg shadow-sm border border-gray-100">
-          <BareSignUp
+          <BareSignUpImpl
             type={signUpType}
             stepIndex={stepIndex}
             handleUpdateStepIndex={setStepIndex}
@@ -156,4 +150,4 @@ stories.add("Bare Sign Up", () => {
       </StorySection>
     </div>
   );
-});
+}

package/lib/components/auth/signIn/signIn.stories.tsx

@@ -1,17 +1,11 @@
-import { storiesOf } from "@storybook/react";
 import React, { useState } from "react";
 import { SignInTemplate } from ".";
 import { AvailableProvider } from "../bareSignIn";
-import README from "./README.md";
 import { StorySection } from "../../storyUtils";
 
-const stories = storiesOf("Auth", module);
+const meta = { title: "Auth/Sign In" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const contactInfo = (
   <>
@@ -57,7 +51,7 @@ const contactInfo = (
   </>
 );
 
-stories.add("Sign In", () => {
+export const SignIn = () => {
   const [provider, setProvider] = useState<typeof AvailableProvider>("email");
 
   return (
@@ -117,4 +111,4 @@ stories.add("Sign In", () => {
       </StorySection>
     </div>
   );
-});
+}

package/lib/components/auth/signUp/signUp.stories.tsx

@@ -1,20 +1,14 @@
-import { storiesOf } from "@storybook/react";
 import React, { useRef, useState } from "react";
 import { SignUpTemplate } from ".";
 import { Stepper } from "../../display/stepper";
 import { Option, Select } from "../../input/select";
 import { TextInput } from "../../input/textInput";
 import { AvailableProvider } from "../bareSignIn";
-import README from "./README.md";
 import { StorySection } from "../../storyUtils";
 
-const stories = storiesOf("Auth", module);
+const meta = { title: "Auth/Sign Up" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const genderOptions: Option[] = [
   { key: "M", label: "Male" },
@@ -33,7 +27,7 @@ const signUpSteps = [
   },
 ];
 
-stories.add("Sign Up", () => {
+export const SignUp = () => {
   const custFormRef: any = useRef(null);
   const signUpFormRef: any = useRef(null);
   const input1: any = useRef(null);
@@ -190,4 +184,4 @@ stories.add("Sign Up", () => {
       </StorySection>
     </div>
   );
-});
+}

package/lib/components/chart/areaChart/areaChart.stories.tsx

@@ -1,19 +1,13 @@
 import { PencilIcon } from "@heroicons/react/24/outline";
-import { storiesOf } from "@storybook/react";
-import moment from "moment";
+import dayjs from "../../dayjs";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { AreaChart } from ".";
+import { AreaChart as AreaChartImpl } from ".";
 import { RangeInterface } from "../DateRange";
-import README from "./README.md";
 import { StorySection } from "../../storyUtils";
 
-const stories = storiesOf("Chart", module);
+const meta = { title: "Chart/Area Chart" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const stackedAreaSeries = [
   {
@@ -51,7 +45,7 @@ const rawData = [
   { label: "Banana", value: 55, daysAgo: 28 },
 ];
 
-stories.add("Area Chart", () => {
+export const AreaChart = () => {
   const [seriesData, setSeriesData] = useState<any[]>([]);
 
   const chartDummyData = useMemo(() => {
@@ -86,11 +80,11 @@ stories.add("Area Chart", () => {
   }, [handleSetData]);
 
   const sevenDaysAgo = new Date();
-  sevenDaysAgo.setDate(moment().toDate().getDate() - 7);
+  sevenDaysAgo.setDate(dayjs().toDate().getDate() - 7);
 
   const defaultDateRange: RangeInterface = {
     startDate: sevenDaysAgo,
-    endDate: moment().toDate(),
+    endDate: dayjs().toDate(),
     isDuration: true,
   };
 
@@ -108,7 +102,7 @@ stories.add("Area Chart", () => {
           </>
         }
       >
-        <AreaChart
+        <AreaChartImpl
           title="Sales"
           seriesName="Value"
           seriesData={seriesData}
@@ -132,7 +126,7 @@ stories.add("Area Chart", () => {
           </>
         }
       >
-        <AreaChart
+        <AreaChartImpl
           title="Sales by Region"
           categories={categories}
           stackedAreaSeries={stackedAreaSeries}
@@ -158,7 +152,7 @@ stories.add("Area Chart", () => {
         }
         dark
       >
-        <AreaChart
+        <AreaChartImpl
           title="Sales by Region"
           categories={categories}
           stackedAreaSeries={stackedAreaSeries}
@@ -185,7 +179,7 @@ stories.add("Area Chart", () => {
           </>
         }
       >
-        <AreaChart
+        <AreaChartImpl
           title="Sales"
           seriesName="Value"
           seriesData={seriesData}
@@ -196,4 +190,4 @@ stories.add("Area Chart", () => {
       </StorySection>
     </div>
   );
-});
+}

package/lib/components/chart/barChart/barChart.stories.tsx

@@ -1,19 +1,13 @@
 import { PencilIcon } from "@heroicons/react/24/outline";
-import { storiesOf } from "@storybook/react";
-import moment from "moment";
+import dayjs from "../../dayjs";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { BarChart } from ".";
+import { BarChart as BarChartImpl } from ".";
 import { RangeInterface } from "../DateRange";
-import README from "./README.md";
 import { StorySection } from "../../storyUtils";
 
-const stories = storiesOf("Chart", module);
+const meta = { title: "Chart/Bar Chart" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const stackedSeries = [
   { name: "Company A", data: [400, 430, 448] },
@@ -29,7 +23,7 @@ const rawData = [
   { label: "Banana", value: 55, daysAgo: 28 },
 ];
 
-stories.add("Bar Chart", () => {
+export const BarChart = () => {
   const [seriesData, setSeriesData] = useState<any[]>([]);
 
   const chartDummyData = useMemo(() => {
@@ -64,11 +58,11 @@ stories.add("Bar Chart", () => {
   }, [handleSetData]);
 
   const sevenDaysAgo = new Date();
-  sevenDaysAgo.setDate(moment().toDate().getDate() - 7);
+  sevenDaysAgo.setDate(dayjs().toDate().getDate() - 7);
 
   const defaultDateRange: RangeInterface = {
     startDate: sevenDaysAgo,
-    endDate: moment().toDate(),
+    endDate: dayjs().toDate(),
     isDuration: true,
   };
 
@@ -86,7 +80,7 @@ stories.add("Bar Chart", () => {
           </>
         }
       >
-        <BarChart
+        <BarChartImpl
           title="Sales"
           seriesName="Value"
           seriesData={seriesData}
@@ -112,7 +106,7 @@ stories.add("Bar Chart", () => {
           </>
         }
       >
-        <BarChart
+        <BarChartImpl
           title="Sales by Company"
           stackedBarSeries={stackedSeries}
           orientation="col"
@@ -138,7 +132,7 @@ stories.add("Bar Chart", () => {
         }
         dark
       >
-        <BarChart
+        <BarChartImpl
           title="Sales by Company"
           stackedBarSeries={stackedSeries}
           orientation="col"
@@ -171,7 +165,7 @@ stories.add("Bar Chart", () => {
       >
         <div className="overflow-x-auto w-full">
           <div className="min-w-[600px]">
-            <BarChart
+            <BarChartImpl
               title=""
               containerStyle="bg-gradient-to-b from-[#4a3aff] to-[#6959ff] rounded-2xl p-6 shadow-lg"
               categories={["May", "Jun", "Jul", "Aug", "Sep", "Oct"]}
@@ -315,4 +309,4 @@ stories.add("Bar Chart", () => {
       </StorySection>
     </div>
   );
-});
+}

package/lib/components/chart/boxPlotChart/boxPlotChart.stories.tsx

@@ -1,20 +1,14 @@
 import { PencilIcon } from "@heroicons/react/24/outline";
-import { storiesOf } from "@storybook/react";
-import moment from "moment";
+import dayjs from "../../dayjs";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { BoxPlotChart } from ".";
+import { BoxPlotChart as BoxPlotChartImpl } from ".";
 import { RangeInterface } from "../DateRange";
-import README from "./README.md";
 
-const stories = storiesOf("Chart", module);
+const meta = { title: "Chart/Box Plot Chart" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
-stories.add("Box Plot Chart", () => {
+export const BoxPlotChart = () => {
   const [seriesData, setSeriesData] = useState<any[]>([]);
 
   const chartDummyData = useMemo(() => {
@@ -59,12 +53,12 @@ stories.add("Box Plot Chart", () => {
   }, [handleSetData]);
 
   const sevenDaysAgo = new Date();
-  sevenDaysAgo.setDate(moment().toDate().getDate() - 7);
+  sevenDaysAgo.setDate(dayjs().toDate().getDate() - 7);
 
   return (
     <>
       <div className="font-medium mb-5">Box Plot Chart</div>
-      <BoxPlotChart
+      <BoxPlotChartImpl
         title="Electric Generation Performance"
         seriesName="Journey Performance"
         seriesData={seriesData}
@@ -72,7 +66,7 @@ stories.add("Box Plot Chart", () => {
         dateRangeVisible={true}
         customDate={{
           startDate: sevenDaysAgo,
-          endDate: moment().toDate(),
+          endDate: dayjs().toDate(),
           isDuration: true,
         }}
         onChangeDate={handleSetData}
@@ -82,7 +76,7 @@ stories.add("Box Plot Chart", () => {
         xaxisTitle="Quarters"
       />
       <div className="font-medium my-5">Dark Mode Box Plot Chart</div>
-      <BoxPlotChart
+      <BoxPlotChartImpl
         title="Performance Distribution"
         seriesName="Data Distribution"
         seriesData={seriesData}
@@ -90,7 +84,7 @@ stories.add("Box Plot Chart", () => {
         dateRangeVisible={true}
         customDate={{
           startDate: sevenDaysAgo,
-          endDate: moment().toDate(),
+          endDate: dayjs().toDate(),
           isDuration: true,
         }}
         onChangeDate={handleSetData}
@@ -101,4 +95,4 @@ stories.add("Box Plot Chart", () => {
       />
     </>
   );
-});
+}

package/lib/components/chart/bubbleChart/bubbleChart.stories.tsx

@@ -1,20 +1,14 @@
 import { PencilIcon } from "@heroicons/react/24/outline";
-import { storiesOf } from "@storybook/react";
-import moment from "moment";
+import dayjs from "../../dayjs";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { BubbleChart } from ".";
+import { BubbleChart as BubbleChartImpl } from ".";
 import { RangeInterface } from "../DateRange";
-import README from "./README.md";
 
-const stories = storiesOf("Chart", module);
+const meta = { title: "Chart/Bubble Chart" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
-stories.add("Bubble Chart", () => {
+export const BubbleChart = () => {
   const [seriesData, setSeriesData] = useState<any[]>([]);
 
   const chartDummyData = useMemo(() => {
@@ -99,12 +93,12 @@ stories.add("Bubble Chart", () => {
   }, [handleSetData]);
 
   const sevenDaysAgo = new Date();
-  sevenDaysAgo.setDate(moment().toDate().getDate() - 7);
+  sevenDaysAgo.setDate(dayjs().toDate().getDate() - 7);
 
   return (
     <>
       <div className="font-medium mb-5">Bubble Chart</div>
-      <BubbleChart
+      <BubbleChartImpl
         title="Page Views vs Time Spent"
         seriesName="Pages"
         seriesData={seriesData}
@@ -112,7 +106,7 @@ stories.add("Bubble Chart", () => {
         dateRangeVisible={true}
         customDate={{
           startDate: sevenDaysAgo,
-          endDate: moment().toDate(),
+          endDate: dayjs().toDate(),
           isDuration: true,
         }}
         onChangeDate={handleSetData}
@@ -122,7 +116,7 @@ stories.add("Bubble Chart", () => {
         yaxisTitle="Value B"
       />
       <div className="font-medium my-5">Dark Mode Bubble Chart</div>
-      <BubbleChart
+      <BubbleChartImpl
         title="Analytics Overview"
         seriesName="Data Points"
         seriesData={seriesData}
@@ -130,7 +124,7 @@ stories.add("Bubble Chart", () => {
         dateRangeVisible={true}
         customDate={{
           startDate: sevenDaysAgo,
-          endDate: moment().toDate(),
+          endDate: dayjs().toDate(),
           isDuration: true,
         }}
         onChangeDate={handleSetData}
@@ -141,4 +135,4 @@ stories.add("Bubble Chart", () => {
       />
     </>
   );
-});
+}

package/lib/components/chart/card/card.stories.tsx

@@ -1,19 +1,50 @@
-import { PencilIcon, UserGroupIcon } from "@heroicons/react/24/outline";
-import { storiesOf } from "@storybook/react";
+import {
+  ArrowTrendingDownIcon,
+  ArrowTrendingUpIcon,
+  CurrencyDollarIcon,
+  PencilIcon,
+  ShoppingCartIcon,
+  UserGroupIcon,
+} from "@heroicons/react/24/outline";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { Card } from ".";
+import { Card as CardImpl } from ".";
 import { RangeInterface } from "../DateRange";
-import README from "./README.md";
+import { StorySection } from "../../storyUtils";
 
-const stories = storiesOf("Chart", module);
+const meta = { title: "Chart/Card" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
-stories.add("Card", () => {
+// INFO: small trend-indicator helper for subContent — green for up, red for down
+const TrendIndicator = ({
+  delta,
+  label = "vs last month",
+}: {
+  delta: number;
+  label?: string;
+}) => {
+  const isUp = delta >= 0;
+  return (
+    <div
+      className={`inline-flex items-center gap-1 text-xs font-medium ${
+        isUp ? "text-emerald-600" : "text-rose-600"
+      }`}
+    >
+      {isUp ? (
+        <ArrowTrendingUpIcon className="h-3.5 w-3.5" />
+      ) : (
+        <ArrowTrendingDownIcon className="h-3.5 w-3.5" />
+      )}
+      <span>
+        {isUp ? "+" : ""}
+        {delta}%
+      </span>
+      {label && <span className="text-gray-400">{label}</span>}
+    </div>
+  );
+};
+
+export const Card = () => {
   const [countData, setCountData] = useState<number>(0);
 
   const stats = useMemo(() => {
@@ -26,18 +57,9 @@ stories.add("Card", () => {
     twentyEightDaysAgo.setDate(customCurrentDate.getDate() - 28);
 
     return [
-      {
-        stats: 71897,
-        createdAt: sevenDaysAgo,
-      },
-      {
-        stats: 230,
-        createdAt: oneDaysAgo,
-      },
-      {
-        stats: 2010,
-        createdAt: twentyEightDaysAgo,
-      },
+      { stats: 71897, createdAt: sevenDaysAgo },
+      { stats: 230, createdAt: oneDaysAgo },
+      { stats: 2010, createdAt: twentyEightDaysAgo },
     ];
   }, []);
 
@@ -59,10 +81,8 @@ stories.add("Card", () => {
             dummySeriesData += eachData.stats;
           }
         }
-
         return null;
       });
-
       setCountData(dummySeriesData);
     },
     [stats]
@@ -73,17 +93,131 @@ stories.add("Card", () => {
   }, [handleSetData]);
 
   return (
-    <Card
-      icon={<UserGroupIcon className="h-5 w-5 text-white" />}
-      title="Completed Tasks"
-      description="Total Tasks(s)"
-      count={countData}
-      tool={<PencilIcon className="h-4 w-4 text-primary-600" />}
-      dateRangeVisible={true}
-      onChangeDate={handleSetData}
-      textTruncate={true}
-      darkMode={false}
-      darkModeBg="bg-gradient-to-r from-slate-700 to-gray-900"
-    />
+    <div className="font-sans p-6">
+      <StorySection
+        title="size=&quot;default&quot; — With Trend Indicator"
+        description="Original ~140px-tall card. subContent slot renders below the count — used here for a coloured trend chip."
+      >
+        <div className="w-full">
+          <CardImpl
+            icon={<CurrencyDollarIcon className="h-5 w-5 text-white" />}
+            title="Total Revenue"
+            description="This month"
+            count={24500}
+            unit="RM"
+            subContent={<TrendIndicator delta={12.4} />}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="size=&quot;default&quot; — DateRange + Tool (Legacy)"
+        description="dateRangeVisible adds an inline date picker, tool slot renders top-right (e.g. an edit icon). Matches the original CardStory pattern."
+      >
+        <div className="w-full">
+          <CardImpl
+            icon={<UserGroupIcon className="h-5 w-5 text-white" />}
+            title="Completed Tasks"
+            description="Total task(s)"
+            count={countData}
+            tool={<PencilIcon className="h-4 w-4 text-primary-600" />}
+            dateRangeVisible={true}
+            onChangeDate={handleSetData}
+            textTruncate={true}
+            subContent={
+              <TrendIndicator delta={18.6} label="vs previous period" />
+            }
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="size=&quot;compact&quot; — 2-Up KPI Grid"
+        description="Stat-first compact layout (~72px). Title small, count is the hero. Designed for 2-up or 4-up grids on mobile dashboards."
+      >
+        <div className="w-full grid grid-cols-2 gap-3">
+          <CardImpl
+            size="compact"
+            icon={<CurrencyDollarIcon className="h-4 w-4 text-primary-600" />}
+            title="Revenue"
+            count={24500}
+            unit="RM"
+            subContent={<TrendIndicator delta={12.4} label="" />}
+          />
+          <CardImpl
+            size="compact"
+            icon={<UserGroupIcon className="h-4 w-4 text-primary-600" />}
+            title="Active Users"
+            count={1284}
+            subContent={<TrendIndicator delta={5.1} label="" />}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="size=&quot;compact&quot; — With DateRange Picker"
+        description="dateRangeVisible now also renders in compact mode — date picker sits below the stat. CardImpl grows taller than the standard ~72px compact (closer to ~110px) but stays denser than the default."
+      >
+        <div className="w-full grid grid-cols-2 gap-3">
+          <CardImpl
+            size="compact"
+            icon={<CurrencyDollarIcon className="h-4 w-4 text-primary-600" />}
+            title="Revenue"
+            count={countData}
+            unit="RM"
+            dateRangeVisible
+            onChangeDate={handleSetData}
+            subContent={<TrendIndicator delta={12.4} label="" />}
+          />
+          <CardImpl
+            size="compact"
+            icon={<UserGroupIcon className="h-4 w-4 text-primary-600" />}
+            title="Active Users"
+            count={1284}
+            dateRangeVisible
+            onChangeDate={handleSetData}
+            subContent={<TrendIndicator delta={5.1} label="" />}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="size=&quot;compact&quot; — 4-Up Mixed Trends"
+        description="Mixed up/down trends in a denser grid. Shows how compact cards work for a multi-KPI dashboard glance on mobile."
+      >
+        <div className="w-full grid grid-cols-2 gap-3">
+          <CardImpl
+            size="compact"
+            icon={<ShoppingCartIcon className="h-4 w-4 text-primary-600" />}
+            title="New Orders"
+            count={48}
+            subContent={<TrendIndicator delta={8.2} label="" />}
+          />
+          <CardImpl
+            size="compact"
+            icon={<UserGroupIcon className="h-4 w-4 text-primary-600" />}
+            title="Churn"
+            count={3}
+            unit="%"
+            subContent={<TrendIndicator delta={-1.4} label="" />}
+          />
+          <CardImpl
+            size="compact"
+            icon={<CurrencyDollarIcon className="h-4 w-4 text-primary-600" />}
+            title="Avg Order"
+            count={510}
+            unit="RM"
+            subContent={<TrendIndicator delta={-3.2} label="" />}
+          />
+          <CardImpl
+            size="compact"
+            icon={<UserGroupIcon className="h-4 w-4 text-primary-600" />}
+            title="Active"
+            count={1284}
+            subContent={<TrendIndicator delta={5.1} label="" />}
+          />
+        </div>
+      </StorySection>
+    </div>
   );
-});
+};