blixify-ui-web-mcp 0.1.3 → 0.1.19

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 { GanttChart as GanttChartImpl } 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 GanttChart = () => {
   const [tasks, setTasks] = useState(baseTasks);
 
   return (
@@ -58,7 +52,7 @@ stories.add("Gantt Chart", () => {
         description="Default display mode. Renders a horizontal range bar chart. Each task in the tasks array becomes one bar. colors are applied per task in order."
       >
         <div className="w-full">
-          <GanttChart
+          <GanttChartImpl
             title="Project Timeline"
             tasks={tasks}
             showGrid={true}
@@ -78,7 +72,7 @@ stories.add("Gantt Chart", () => {
         description="mode='write' renders an editable table above the chart. Tasks can be added, edited inline, and deleted. onTaskChange is called with the updated task array on every change."
       >
         <div className="w-full">
-          <GanttChart
+          <GanttChartImpl
             title="Project Timeline"
             label="Tasks"
             tasks={tasks}
@@ -100,7 +94,7 @@ stories.add("Gantt Chart", () => {
         description="dateRangeVisible=true shows a date range picker below the chart. Pass customDate to pre-select a range and onChangeDate to handle updates."
       >
         <div className="w-full">
-          <GanttChart
+          <GanttChartImpl
             title="Project Timeline"
             tasks={tasks}
             dateRangeVisible={true}
@@ -118,7 +112,7 @@ stories.add("Gantt Chart", () => {
         dark
       >
         <div className="w-full">
-          <GanttChart
+          <GanttChartImpl
             title="Development Sprint"
             tasks={tasks.slice(1, 4)}
             darkMode={true}
@@ -137,7 +131,7 @@ stories.add("Gantt Chart", () => {
         description="chartOnly=true strips the card wrapper and renders just the chart. Use containerStyle to control the dimensions."
       >
         <div className="w-full h-64">
-          <GanttChart
+          <GanttChartImpl
             title="Minimal"
             tasks={tasks.slice(0, 3)}
             chartOnly={true}
@@ -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 { HeatmapChart as HeatmapChartImpl } 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 HeatmapChart = () => {
   const multiSeriesData = useMemo(
     () => [
       { name: "Week 1", data: categories.map(() => rand(0, 90)) },
@@ -58,7 +52,7 @@ stories.add("Heatmap Chart", () => {
         description="Each SeriesItem becomes a row. Values are colour-coded by the built-in scale: green (0–10), blue (11–50), amber (51–100), red (101–200). showDataLabel shows the numeric value inside each cell."
       >
         <div className="w-full">
-          <HeatmapChart
+          <HeatmapChartImpl
             title="Monthly Activity"
             multiSeriesData={multiSeriesData}
             categories={categories}
@@ -72,7 +66,7 @@ stories.add("Heatmap Chart", () => {
         description="Values spanning all four ranges (0–200) show the complete built-in colour scale in one chart."
       >
         <div className="w-full">
-          <HeatmapChart
+          <HeatmapChartImpl
             title="Full Range Metrics"
             multiSeriesData={wideSeriesData}
             categories={categories}
@@ -87,7 +81,7 @@ stories.add("Heatmap Chart", () => {
         description="dateRangeVisible=true shows a date range picker below the chart. onChangeDate is called when the range changes."
       >
         <div className="w-full">
-          <HeatmapChart
+          <HeatmapChartImpl
             title="Activity Over Time"
             multiSeriesData={multiSeriesData}
             categories={categories}
@@ -103,7 +97,7 @@ stories.add("Heatmap Chart", () => {
         description="newTabUrl wraps the chart title in a link. Useful for navigating to a detail page from a dashboard."
       >
         <div className="w-full">
-          <HeatmapChart
+          <HeatmapChartImpl
             title="Activity (click title)"
             multiSeriesData={multiSeriesData}
             categories={categories}
@@ -119,7 +113,7 @@ stories.add("Heatmap Chart", () => {
         dark
       >
         <div className="w-full">
-          <HeatmapChart
+          <HeatmapChartImpl
             title="Activity Distribution"
             multiSeriesData={multiSeriesData}
             categories={categories}
@@ -135,7 +129,7 @@ stories.add("Heatmap Chart", () => {
         description="chartOnly=true strips the card wrapper and renders just the chart. Use containerStyle to control dimensions."
       >
         <div className="w-full h-64">
-          <HeatmapChart
+          <HeatmapChartImpl
             title="Minimal"
             multiSeriesData={multiSeriesData}
             categories={categories}
@@ -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 { LineChart as LineChartImpl } 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 LineChart = () => {
   const [seriesData, setSeriesData] = useState([12, 60, 14, 18, 17]);
   const [categoryData, setCategoryData] = useState<string[]>([
     "JAN",
@@ -64,7 +58,7 @@ stories.add("Line Chart", () => {
           </>
         }
       >
-        <LineChart
+        <LineChartImpl
           title="Sales of the Year"
           categories={categoryData}
           seriesData={seriesData}
@@ -105,7 +99,7 @@ stories.add("Line Chart", () => {
           </>
         }
       >
-        <LineChart
+        <LineChartImpl
           title="Temperature of the Year"
           categories={["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"]}
           multiLineSeries={multiLineSeries}
@@ -135,7 +129,7 @@ stories.add("Line Chart", () => {
           </>
         }
       >
-        <LineChart
+        <LineChartImpl
           title="Revenue Trend"
           categories={["Jan", "Feb", "Mar", "Apr", "May", "Jun"]}
           seriesData={[30, 45, 38, 60, 55, 72]}
@@ -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 { PieChart as PieChartImpl } 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 PieChart = () => {
   const [seriesData, setSeriesData] = useState<number[]>([]);
   const [labelData, setLabelData] = useState<string[]>([]);
 
@@ -85,7 +79,7 @@ stories.add("Pie Chart", () => {
         description="Default chart type is donut. Legend shows truncated labels (max 10 chars); tooltip shows the full label."
       >
         <div className="w-full">
-          <PieChart
+          <PieChartImpl
             title="Sales"
             series={seriesData}
             labels={labelData}
@@ -102,7 +96,7 @@ stories.add("Pie Chart", () => {
         description='Pass type="pie" to render a filled pie chart instead of a donut.'
       >
         <div className="w-full">
-          <PieChart
+          <PieChartImpl
             title="Sales (Pie)"
             series={series}
             labels={labels}
@@ -117,7 +111,7 @@ stories.add("Pie Chart", () => {
         description='By default labels show percentages. Pass valueType="value" to show raw numbers instead.'
       >
         <div className="w-full">
-          <PieChart
+          <PieChartImpl
             title="Sales by Value"
             series={series}
             labels={labels}
@@ -132,7 +126,7 @@ stories.add("Pie Chart", () => {
         description='legendPos controls where the legend is rendered. legendAlign controls horizontal alignment. Defaults: legendPos="top", legendAlign="right".'
       >
         <div className="w-full">
-          <PieChart
+          <PieChartImpl
             title="Legend Bottom Center"
             series={series}
             labels={labels}
@@ -149,7 +143,7 @@ stories.add("Pie Chart", () => {
         dark
       >
         <div className="w-full">
-          <PieChart
+          <PieChartImpl
             title="Sales"
             series={series}
             labels={labels}
@@ -166,7 +160,7 @@ stories.add("Pie Chart", () => {
         description="chartOnly=true removes the title, tool, and date range bar — renders just the chart canvas."
       >
         <div className="w-full">
-          <PieChart
+          <PieChartImpl
             title="Sales"
             series={series}
             labels={labels}
@@ -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 { PolarAreaChart as PolarAreaChartImpl } 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 PolarAreaChart = () => {
   const [seriesData, setSeriesData] = useState<any[]>([]);
 
   const chartDummyData = useMemo(() => {
@@ -63,12 +57,12 @@ stories.add("Polar Area 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">Polar Area Chart</div>
-      <PolarAreaChart
+      <PolarAreaChartImpl
         title="Data Distribution"
         seriesName="Values"
         seriesData={seriesData}
@@ -76,7 +70,7 @@ stories.add("Polar Area Chart", () => {
         dateRangeVisible={true}
         customDate={{
           startDate: sevenDaysAgo,
-          endDate: moment().toDate(),
+          endDate: dayjs().toDate(),
           isDuration: true,
         }}
         onChangeDate={handleSetData}
@@ -84,7 +78,7 @@ stories.add("Polar Area Chart", () => {
         newTabUrl="https://www.google.com/"
       />
       <div className="font-medium my-5">Dark Mode Polar Area Chart</div>
-      <PolarAreaChart
+      <PolarAreaChartImpl
         title="Performance Metrics"
         seriesName="Metrics"
         seriesData={seriesData}
@@ -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,19 +1,13 @@
-import { storiesOf } from "@storybook/react";
 import React from "react";
-import { RadarChart } from ".";
-import README from "./README.md";
+import { RadarChart as RadarChartImpl } from ".";
 
-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 RadarChart = () => {
   return (
-    <RadarChart
+    <RadarChartImpl
       title={"Test Chart"}
       darkMode={true}
       data={[
@@ -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";
+import { RangeBarChart as RangeBarChartImpl } from ".";
 
-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 RangeBarChart = () => {
   const [rangeData, setRangeData] = useState<RangeData[]>([]);
 
   const chartDummyData = useMemo((): RangeData[] => {
@@ -68,7 +62,7 @@ stories.add("Range Bar Chart", () => {
   return (
     <>
       <div className="font-medium mb-5">Sleep/Awake Timeline</div>
-      <RangeBarChart
+      <RangeBarChartImpl
         title="Daily Sleep Schedule"
         seriesName="Status"
         data={rangeData}
@@ -78,7 +72,7 @@ stories.add("Range Bar Chart", () => {
       />
 
       <div className="font-medium my-5">Dark Mode Sleep/Awake Timeline</div>
-      <RangeBarChart
+      <RangeBarChartImpl
         title="Daily Sleep Schedule"
         seriesName="Status"
         data={rangeData}
@@ -89,7 +83,7 @@ stories.add("Range Bar Chart", () => {
       />
 
       <div className="font-medium my-5">Multi-Color Range Bar Chart</div>
-      <RangeBarChart
+      <RangeBarChartImpl
         title="Activity Schedule"
         seriesName="Activities"
         data={[
@@ -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 { StatsCard as StatsCardImpl } 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 StatsCard = () => {
   const chartDummyData = useMemo(() => {
     const now = new Date();
     const sevenDaysAgo = new Date();
@@ -108,7 +102,7 @@ stories.add("Stats Card", () => {
         description="When gridSize is omitted the component defaults to a 4-column grid on large screens. Each card shows a name, stat value, optional previous stat, and an optional change badge."
       >
         <div className="w-full">
-          <StatsCard
+          <StatsCardImpl
             stats={seriesData}
             dateRangeVisible={true}
             onChangeDate={handleSetData}
@@ -121,7 +115,7 @@ stories.add("Stats Card", () => {
         description="gridSize=3 renders a 3-column grid on large screens (2-column on medium)."
       >
         <div className="w-full">
-          <StatsCard stats={baseStats} gridSize={3} />
+          <StatsCardImpl stats={baseStats} gridSize={3} />
         </div>
       </StorySection>
 
@@ -130,7 +124,7 @@ stories.add("Stats Card", () => {
         description="gridSize=2 renders a 2-column grid."
       >
         <div className="w-full">
-          <StatsCard stats={baseStats.slice(0, 2)} gridSize={2} />
+          <StatsCardImpl stats={baseStats.slice(0, 2)} gridSize={2} />
         </div>
       </StorySection>
 
@@ -139,7 +133,7 @@ stories.add("Stats Card", () => {
         description="gridSize=1 renders a single-column layout."
       >
         <div className="w-full">
-          <StatsCard stats={baseStats.slice(0, 1)} gridSize={1} />
+          <StatsCardImpl stats={baseStats.slice(0, 1)} gridSize={1} />
         </div>
       </StorySection>
 
@@ -148,7 +142,7 @@ stories.add("Stats Card", () => {
         description="minGridSize=2 forces a 2-column minimum on small screens (default is 1-column on mobile)."
       >
         <div className="w-full">
-          <StatsCard stats={baseStats} minGridSize={2} />
+          <StatsCardImpl stats={baseStats} minGridSize={2} />
         </div>
       </StorySection>
 
@@ -157,7 +151,7 @@ stories.add("Stats Card", () => {
         description="Pass icon to render a small icon in the top-right corner of the card group."
       >
         <div className="w-full">
-          <StatsCard
+          <StatsCardImpl
             stats={baseStats}
             icon={<PencilIcon className="w-4 h-4 text-primary-600" />}
           />
@@ -170,7 +164,7 @@ stories.add("Stats Card", () => {
         dark
       >
         <div className="w-full">
-          <StatsCard
+          <StatsCardImpl
             stats={baseStats}
             darkMode={true}
             darkModeBg="bg-gradient-to-r from-gray-900 to-slate-700"
@@ -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 { TreemapChart as TreemapChartImpl } 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 TreemapChart = () => {
   const [seriesData, setSeriesData] = useState<any[]>([]);
 
   const chartDummyData = useMemo(() => {
@@ -79,12 +73,12 @@ stories.add("Treemap 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">Treemap Chart</div>
-      <TreemapChart
+      <TreemapChartImpl
         title="Page Views Distribution"
         seriesName="Pages"
         seriesData={seriesData}
@@ -92,7 +86,7 @@ stories.add("Treemap Chart", () => {
         dateRangeVisible={true}
         customDate={{
           startDate: sevenDaysAgo,
-          endDate: moment().toDate(),
+          endDate: dayjs().toDate(),
           isDuration: true,
         }}
         onChangeDate={handleSetData}
@@ -100,7 +94,7 @@ stories.add("Treemap Chart", () => {
         newTabUrl="https://www.google.com/"
       />
       <div className="font-medium my-5">Dark Mode Treemap Chart</div>
-      <TreemapChart
+      <TreemapChartImpl
         title="Data Categories"
         seriesName="Categories"
         seriesData={seriesData}
@@ -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", () => {
       />
     </>
   );
-});
+}