blixify-ui-web-mcp 0.1.3 → 0.1.18

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 { 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 BoxPlotChartStory = () => {
   const [seriesData, setSeriesData] = useState<any[]>([]);
 
   const chartDummyData = useMemo(() => {
@@ -59,7 +53,7 @@ stories.add("Box Plot Chart", () => {
   }, [handleSetData]);
 
   const sevenDaysAgo = new Date();
-  sevenDaysAgo.setDate(moment().toDate().getDate() - 7);
+  sevenDaysAgo.setDate(dayjs().toDate().getDate() - 7);
 
   return (
     <>
@@ -72,7 +66,7 @@ stories.add("Box Plot Chart", () => {
         dateRangeVisible={true}
         customDate={{
           startDate: sevenDaysAgo,
-          endDate: moment().toDate(),
+          endDate: dayjs().toDate(),
           isDuration: true,
         }}
         onChangeDate={handleSetData}
@@ -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 { 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 BubbleChartStory = () => {
   const [seriesData, setSeriesData] = useState<any[]>([]);
 
   const chartDummyData = useMemo(() => {
@@ -99,7 +93,7 @@ stories.add("Bubble Chart", () => {
   }, [handleSetData]);
 
   const sevenDaysAgo = new Date();
-  sevenDaysAgo.setDate(moment().toDate().getDate() - 7);
+  sevenDaysAgo.setDate(dayjs().toDate().getDate() - 7);
 
   return (
     <>
@@ -112,7 +106,7 @@ stories.add("Bubble Chart", () => {
         dateRangeVisible={true}
         customDate={{
           startDate: sevenDaysAgo,
-          endDate: moment().toDate(),
+          endDate: dayjs().toDate(),
           isDuration: true,
         }}
         onChangeDate={handleSetData}
@@ -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,13 @@
 import { PencilIcon, UserGroupIcon } from "@heroicons/react/24/outline";
-import { storiesOf } from "@storybook/react";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { Card } from ".";
 import { RangeInterface } from "../DateRange";
-import README from "./README.md";
 
-const stories = storiesOf("Chart", module);
+const meta = { title: "Chart/Card" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
-stories.add("Card", () => {
+export const CardStory = () => {
   const [countData, setCountData] = useState<number>(0);
 
   const stats = useMemo(() => {
@@ -86,4 +80,4 @@ stories.add("Card", () => {
       darkModeBg="bg-gradient-to-r from-slate-700 to-gray-900"
     />
   );
-});
+}

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

@@ -1,16 +1,10 @@
-import { storiesOf } from "@storybook/react";
 import React, { useState } from "react";
 import { GanttChart } from ".";
 import { StorySection } from "../../storyUtils";
-import README from "./README.md";
 
-const stories = storiesOf("Chart", module);
+const meta = { title: "Chart/Gantt Chart" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const today = new Date();
 const day = 24 * 60 * 60 * 1000;
@@ -48,7 +42,7 @@ const baseTasks = [
   },
 ];
 
-stories.add("Gantt Chart", () => {
+export const GanttChartStory = () => {
   const [tasks, setTasks] = useState(baseTasks);
 
   return (
@@ -151,4 +145,4 @@ stories.add("Gantt Chart", () => {
       </StorySection>
     </>
   );
-});
+}

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

@@ -1,16 +1,10 @@
-import { storiesOf } from "@storybook/react";
 import React, { useMemo } from "react";
 import { HeatmapChart } from ".";
 import { StorySection } from "../../storyUtils";
-import README from "./README.md";
 
-const stories = storiesOf("Chart", module);
+const meta = { title: "Chart/Heatmap Chart" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const categories = [
   "Jan",
@@ -30,7 +24,7 @@ const categories = [
 const rand = (min: number, max: number) =>
   Math.floor(Math.random() * (max - min + 1)) + min;
 
-stories.add("Heatmap Chart", () => {
+export const HeatmapChartStory = () => {
   const multiSeriesData = useMemo(
     () => [
       { name: "Week 1", data: categories.map(() => rand(0, 90)) },
@@ -147,4 +141,4 @@ stories.add("Heatmap Chart", () => {
       </StorySection>
     </>
   );
-});
+}

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

@@ -1,25 +1,19 @@
 import { PencilIcon } from "@heroicons/react/24/outline";
-import { storiesOf } from "@storybook/react";
 import React, { useCallback, useEffect, useState } from "react";
 import { LineChart } from ".";
 import { RangeInterface } from "../DateRange";
-import README from "./README.md";
 import { StorySection } from "../../storyUtils";
 
-const stories = storiesOf("Chart", module);
+const meta = { title: "Chart/Line Chart" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const multiLineSeries = [
   { name: "High - 2013", data: [-50, 29.1, 33.453, 60.09, 32, 32, 90] },
   { name: "Low - 2013", data: [12, 60, 14, 18, 17, 70, 13] },
 ];
 
-stories.add("Line Chart", () => {
+export const LineChartStory = () => {
   const [seriesData, setSeriesData] = useState([12, 60, 14, 18, 17]);
   const [categoryData, setCategoryData] = useState<string[]>([
     "JAN",
@@ -149,4 +143,4 @@ stories.add("Line Chart", () => {
       </StorySection>
     </div>
   );
-});
+}

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

@@ -1,18 +1,12 @@
 import { PencilIcon } from "@heroicons/react/24/outline";
-import { storiesOf } from "@storybook/react";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { PieChart } from ".";
 import { StorySection } from "../../storyUtils";
 import { RangeInterface } from "../DateRange";
-import README from "./README.md";
 
-const stories = storiesOf("Chart", module);
+const meta = { title: "Chart/Pie Chart" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const dummyData = [
   { label: "Apple", value: 10 },
@@ -25,7 +19,7 @@ const dummyData = [
 const series = dummyData.map((d) => d.value);
 const labels = dummyData.map((d) => d.label);
 
-stories.add("Pie Chart", () => {
+export const PieChartStory = () => {
   const [seriesData, setSeriesData] = useState<number[]>([]);
   const [labelData, setLabelData] = useState<string[]>([]);
 
@@ -177,4 +171,4 @@ stories.add("Pie Chart", () => {
       </StorySection>
     </>
   );
-});
+}

package/lib/components/chart/polarAreaChart/polarAreaChart.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 { PolarAreaChart } from ".";
 import { RangeInterface } from "../DateRange";
-import README from "./README.md";
 
-const stories = storiesOf("Chart", module);
+const meta = { title: "Chart/Polar Area Chart" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
-stories.add("Polar Area Chart", () => {
+export const PolarAreaChartStory = () => {
   const [seriesData, setSeriesData] = useState<any[]>([]);
 
   const chartDummyData = useMemo(() => {
@@ -63,7 +57,7 @@ stories.add("Polar Area Chart", () => {
   }, [handleSetData]);
 
   const sevenDaysAgo = new Date();
-  sevenDaysAgo.setDate(moment().toDate().getDate() - 7);
+  sevenDaysAgo.setDate(dayjs().toDate().getDate() - 7);
 
   return (
     <>
@@ -76,7 +70,7 @@ stories.add("Polar Area Chart", () => {
         dateRangeVisible={true}
         customDate={{
           startDate: sevenDaysAgo,
-          endDate: moment().toDate(),
+          endDate: dayjs().toDate(),
           isDuration: true,
         }}
         onChangeDate={handleSetData}
@@ -92,7 +86,7 @@ stories.add("Polar Area Chart", () => {
         dateRangeVisible={true}
         customDate={{
           startDate: sevenDaysAgo,
-          endDate: moment().toDate(),
+          endDate: dayjs().toDate(),
           isDuration: true,
         }}
         onChangeDate={handleSetData}
@@ -103,4 +97,4 @@ stories.add("Polar Area Chart", () => {
       />
     </>
   );
-});
+}

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

@@ -1,17 +1,11 @@
-import { storiesOf } from "@storybook/react";
 import React from "react";
 import { RadarChart } from ".";
-import README from "./README.md";
 
-const stories = storiesOf("Chart", module);
+const meta = { title: "Chart/Radar Chart" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
-stories.add("Radar Chart", () => {
+export const RadarChartStory = () => {
   return (
     <RadarChart
       title={"Test Chart"}
@@ -33,4 +27,4 @@ stories.add("Radar Chart", () => {
       onChangeDate={() => {}}
     />
   );
-});
+}

package/lib/components/chart/radialBar/radialChart.stories.tsx

@@ -1,20 +1,14 @@
 import { PencilIcon } from "@heroicons/react/24/outline";
-import { storiesOf } from "@storybook/react";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { RadialBar } from ".";
 import { RangeInterface } from "../DateRange";
-import README from "./README.md";
 import colors from "tailwindcss/colors";
 
-const stories = storiesOf("Chart", module);
+const meta = { title: "Chart/Radial Chart" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
-stories.add("Radial Chart", () => {
+export const RadialChart = () => {
   const [seriesData, setSeriesData] = useState<number[]>([]);
   const [labelData, setLabelData] = useState<string[]>([]);
 
@@ -133,4 +127,4 @@ stories.add("Radial Chart", () => {
       />
     </div>
   );
-});
+}

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

@@ -1,23 +1,17 @@
 import { PencilIcon } from "@heroicons/react/24/outline";
-import { storiesOf } from "@storybook/react";
 import React, { useEffect, useMemo, useState } from "react";
 import { RangeBarChart } from ".";
-import README from "./README.md";
 
-const stories = storiesOf("Chart", module);
+const meta = { title: "Chart/Range Bar Chart" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 interface RangeData {
   category: string;
   value: [Date, Date];
 }
 
-stories.add("Range Bar Chart", () => {
+export const RangeBarChartStory = () => {
   const [rangeData, setRangeData] = useState<RangeData[]>([]);
 
   const chartDummyData = useMemo((): RangeData[] => {
@@ -205,4 +199,4 @@ stories.add("Range Bar Chart", () => {
       />
     </>
   );
-});
+}

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

@@ -5,20 +5,14 @@ import {
   PencilIcon,
   UserGroupIcon,
 } from "@heroicons/react/24/outline";
-import { storiesOf } from "@storybook/react";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { StatsCard } from ".";
 import { StorySection } from "../../storyUtils";
 import { RangeInterface } from "../DateRange";
-import README from "./README.md";
 
-const stories = storiesOf("Chart", module);
+const meta = { title: "Chart/Stats Card" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const baseStats = [
   {
@@ -50,7 +44,7 @@ const baseStats = [
   },
 ];
 
-stories.add("Stats Card", () => {
+export const StatsCardStory = () => {
   const chartDummyData = useMemo(() => {
     const now = new Date();
     const sevenDaysAgo = new Date();
@@ -180,4 +174,4 @@ stories.add("Stats Card", () => {
       </StorySection>
     </>
   );
-});
+}

package/lib/components/chart/treemapChart/treemapChart.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 { TreemapChart } from ".";
 import { RangeInterface } from "../DateRange";
-import README from "./README.md";
 
-const stories = storiesOf("Chart", module);
+const meta = { title: "Chart/Treemap Chart" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
-stories.add("Treemap Chart", () => {
+export const TreemapChartStory = () => {
   const [seriesData, setSeriesData] = useState<any[]>([]);
 
   const chartDummyData = useMemo(() => {
@@ -79,7 +73,7 @@ stories.add("Treemap Chart", () => {
   }, [handleSetData]);
 
   const sevenDaysAgo = new Date();
-  sevenDaysAgo.setDate(moment().toDate().getDate() - 7);
+  sevenDaysAgo.setDate(dayjs().toDate().getDate() - 7);
 
   return (
     <>
@@ -92,7 +86,7 @@ stories.add("Treemap Chart", () => {
         dateRangeVisible={true}
         customDate={{
           startDate: sevenDaysAgo,
-          endDate: moment().toDate(),
+          endDate: dayjs().toDate(),
           isDuration: true,
         }}
         onChangeDate={handleSetData}
@@ -108,7 +102,7 @@ stories.add("Treemap Chart", () => {
         dateRangeVisible={true}
         customDate={{
           startDate: sevenDaysAgo,
-          endDate: moment().toDate(),
+          endDate: dayjs().toDate(),
           isDuration: true,
         }}
         onChangeDate={handleSetData}
@@ -119,4 +113,4 @@ stories.add("Treemap Chart", () => {
       />
     </>
   );
-});
+}

package/lib/components/chat/chatAnchor/chatAnchor.stories.tsx

@@ -1,20 +1,14 @@
-import { storiesOf } from "@storybook/react";
-import moment from "moment";
+import dayjs from "../../dayjs";
 import React, { useState } from "react";
 import { ChatAnchor } from ".";
 import Logo from "../../../assets/logo.png";
 import { Conversation } from "../chatBase";
-import README from "./README.md";
 
-const stories = storiesOf("Chat", module);
+const meta = { title: "Chat/Chat Anchor" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
-stories.add("Chat Anchor", () => {
+export const ChatAnchorStory = () => {
   const botUser = {
     id: "1",
     name: "Bot",
@@ -36,14 +30,14 @@ stories.add("Chat Anchor", () => {
       {
         sender: botUser,
         messageBody: "Hi! How can I help you? 🤖",
-        createdAt: moment(
+        createdAt: dayjs(
           "Fri Nov 03 2023 12:21:14 GMT+0800 (Malaysia Time)"
         ).toDate(),
       },
       {
         sender: currentUser,
         messageBody: "Yo, my computer's acting up.",
-        createdAt: moment(
+        createdAt: dayjs(
           "Fri Nov 03 2023 13:21:14 GMT+0800 (Malaysia Time)"
         ).toDate(),
       },
@@ -51,7 +45,7 @@ stories.add("Chat Anchor", () => {
         sender: currentUser,
         messageBody:
           "It keeps saying 'Error 404: Coffee not found' when I start it up.",
-        createdAt: moment(
+        createdAt: dayjs(
           "Fri Nov 03 2023 14:21:14 GMT+0800 (Malaysia Time)"
         ).toDate(),
       },
@@ -59,14 +53,14 @@ stories.add("Chat Anchor", () => {
         sender: botUser,
         messageBody:
           "Sounds like a caffeine emergency! Have you tried offering it coffee?",
-        createdAt: moment(
+        createdAt: dayjs(
           "Fri Nov 03 2023 15:21:14 GMT+0800 (Malaysia Time)"
         ).toDate(),
       },
       {
         sender: currentUser,
         messageBody: "Seriously?",
-        createdAt: moment(
+        createdAt: dayjs(
           "Fri Nov 03 2023 16:21:14 GMT+0800 (Malaysia Time)"
         ).toDate(),
       },
@@ -74,14 +68,14 @@ stories.add("Chat Anchor", () => {
         sender: botUser,
         messageBody:
           "Well, computers do like a jolt of energy, but don't spill, that could be 'mocha-nical' trouble!",
-        createdAt: moment(
+        createdAt: dayjs(
           "Fri Nov 03 2023 17:21:14 GMT+0800 (Malaysia Time)"
         ).toDate(),
       },
       {
         sender: currentUser,
         messageBody: "Cringe. I'll give it a shot. Thanks.",
-        createdAt: moment(
+        createdAt: dayjs(
           "Fri Nov 03 2023 18:21:14 GMT+0800 (Malaysia Time)"
         ).toDate(),
       },
@@ -89,7 +83,7 @@ stories.add("Chat Anchor", () => {
         sender: botUser,
         messageBody:
           "Anytime! If it demands a donut, that's on me. Have a brew-tiful day!",
-        createdAt: moment(
+        createdAt: dayjs(
           "Fri Nov 03 2023 19:21:14 GMT+0800 (Malaysia Time)"
         ).toDate(),
       },
@@ -153,4 +147,4 @@ stories.add("Chat Anchor", () => {
       />
     </div>
   );
-});
+}