blixify-ui-web-mcp 0.1.1

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

@@ -0,0 +1,208 @@
+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);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+interface RangeData {
+  category: string;
+  value: [Date, Date];
+}
+
+stories.add("Range Bar Chart", () => {
+  const [rangeData, setRangeData] = useState<RangeData[]>([]);
+
+  const chartDummyData = useMemo((): RangeData[] => {
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+
+    const sleepStart = new Date(today);
+    sleepStart.setHours(23, 0, 0, 0);
+    const sleepEnd = new Date(today);
+    sleepEnd.setDate(today.getDate() + 1);
+    sleepEnd.setHours(7, 0, 0, 0);
+
+    const awake1Start = new Date(today);
+    awake1Start.setHours(7, 0, 0, 0);
+    const awake1End = new Date(today);
+    awake1End.setHours(12, 0, 0, 0);
+
+    const awake2Start = new Date(today);
+    awake2Start.setHours(17, 0, 0, 0);
+    const awake2End = new Date(today);
+    awake2End.setHours(23, 0, 0, 0);
+
+    return [
+      {
+        category: "Sleep",
+        value: [sleepStart, sleepEnd],
+      },
+      {
+        category: "Awake",
+        value: [awake1Start, awake1End],
+      },
+      {
+        category: "Awake",
+        value: [awake2Start, awake2End],
+      },
+    ];
+  }, []);
+
+  useEffect(() => {
+    setRangeData(chartDummyData);
+  }, [chartDummyData]);
+
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  const tomorrow = new Date(today);
+  tomorrow.setDate(today.getDate() + 1);
+
+  return (
+    <>
+      <div className="font-medium mb-5">Sleep/Awake Timeline</div>
+      <RangeBarChart
+        title="Daily Sleep Schedule"
+        seriesName="Status"
+        data={rangeData}
+        tool={<PencilIcon className="h-4 w-4 text-primary-600" />}
+        showDataLabel={false}
+        chartOnly={true}
+      />
+
+      <div className="font-medium my-5">Dark Mode Sleep/Awake Timeline</div>
+      <RangeBarChart
+        title="Daily Sleep Schedule"
+        seriesName="Status"
+        data={rangeData}
+        darkMode={true}
+        darkModeBg="bg-gradient-to-r from-slate-700 to-gray-900"
+        borderColor=""
+        enableGradient={true}
+      />
+
+      <div className="font-medium my-5">Multi-Color Range Bar Chart</div>
+      <RangeBarChart
+        title="Activity Schedule"
+        seriesName="Activities"
+        data={[
+          {
+            category: "Sleep",
+            value: [
+              new Date(
+                today.getFullYear(),
+                today.getMonth(),
+                today.getDate(),
+                23,
+                0,
+                0
+              ),
+              new Date(
+                today.getFullYear(),
+                today.getMonth(),
+                today.getDate() + 1,
+                7,
+                0,
+                0
+              ),
+            ],
+          },
+          {
+            category: "Work",
+            value: [
+              new Date(
+                today.getFullYear(),
+                today.getMonth(),
+                today.getDate(),
+                9,
+                0,
+                0
+              ),
+              new Date(
+                today.getFullYear(),
+                today.getMonth(),
+                today.getDate(),
+                17,
+                0,
+                0
+              ),
+            ],
+          },
+          {
+            category: "Exercise",
+            value: [
+              new Date(
+                today.getFullYear(),
+                today.getMonth(),
+                today.getDate(),
+                7,
+                0,
+                0
+              ),
+              new Date(
+                today.getFullYear(),
+                today.getMonth(),
+                today.getDate(),
+                9,
+                0,
+                0
+              ),
+            ],
+          },
+          {
+            category: "Meal",
+            value: [
+              new Date(
+                today.getFullYear(),
+                today.getMonth(),
+                today.getDate(),
+                12,
+                0,
+                0
+              ),
+              new Date(
+                today.getFullYear(),
+                today.getMonth(),
+                today.getDate(),
+                13,
+                0,
+                0
+              ),
+            ],
+          },
+          {
+            category: "Leisure",
+            value: [
+              new Date(
+                today.getFullYear(),
+                today.getMonth(),
+                today.getDate(),
+                18,
+                0,
+                0
+              ),
+              new Date(
+                today.getFullYear(),
+                today.getMonth(),
+                today.getDate(),
+                23,
+                0,
+                0
+              ),
+            ],
+          },
+        ]}
+        customColors={["#6366F1", "#10B981", "#F59E0B", "#EF4444", "#8B5CF6"]}
+        chartSize={500}
+        showDataLabel={false}
+      />
+    </>
+  );
+});

package/lib/components/chart/statsCard/README.md

@@ -0,0 +1,97 @@
+# Stats Card
+
+<!-- STORY -->
+
+<hr>
+
+A responsive grid of stat cards for displaying analytics data. Each card shows a name, value, optional previous value, and an optional change badge with increase/decrease indicator.
+
+##### Import
+
+```js
+import { StatsCard } from "blixify-ui-web/chart/statsCard";
+```
+
+##### Usage
+
+Default (4-column grid):
+
+```jsx
+<StatsCard
+  stats={[
+    {
+      name: "Total Subscribers",
+      stats: "71,897",
+      previousStats: "70,946",
+      change: "12%",
+      changeType: "increase",
+      icon: <ArrowDownOnSquareStackIcon className="w-6 h-6 text-gray-600" />,
+      actionIcon: <CogIcon className="w-5 h-5 text-gray-600" />,
+      onActionIconClick: () => {},
+    },
+  ]}
+/>
+```
+
+With date range picker:
+
+```jsx
+<StatsCard
+  stats={seriesData}
+  dateRangeVisible={true}
+  onChangeDate={(range) => handleSetData(range)}
+/>
+```
+
+Dark mode:
+
+```jsx
+<StatsCard
+  stats={stats}
+  darkMode={true}
+  darkModeBg="bg-gradient-to-r from-gray-900 to-slate-700"
+  icon={<PencilIcon className="w-4 h-4 text-primary-600" />}
+/>
+```
+
+##### Required props
+
+| Name    | Type          | Description                   |
+| ------- | ------------- | ----------------------------- |
+| `stats` | `StatsData[]` | Array of stat card data items |
+
+##### Optional props
+
+| Name               | Type                                    | Default         | Description                                                                                                                 |
+| ------------------ | --------------------------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------- |
+| `gridSize`         | `1 \| 2 \| 3`                           | —               | Max columns in the grid. `1` = 1-col, `2` = 2-col, `3` = 2-col md / 3-col lg. When omitted, defaults to 2-col md / 4-col lg |
+| `minGridSize`      | `2`                                     | —               | Forces a 2-column minimum on small screens. Only `2` is supported                                                           |
+| `icon`             | `ReactElement`                          | —               | Small icon rendered in the top-right corner of the card group                                                               |
+| `darkMode`         | `boolean`                               | `false`         | Switches cards to a dark theme                                                                                              |
+| `darkModeBg`       | `string`                                | `"bg-gray-900"` | Tailwind classes for the dark mode card background                                                                          |
+| `dateRangeVisible` | `boolean`                               | `false`         | Shows a date range picker below the cards                                                                                   |
+| `customDate`       | `RangeInterface`                        | —               | Initial date range for the picker                                                                                           |
+| `onChangeDate`     | `(customDate?: RangeInterface) => void` | —               | Called when the user applies a new date range                                                                               |
+
+##### StatsData
+
+| Name                | Type           | Required | Description                                                                 |
+| ------------------- | -------------- | -------- | --------------------------------------------------------------------------- |
+| `name`              | `string`       | yes      | Card label                                                                  |
+| `stats`             | `string`       | yes      | Primary stat value displayed prominently                                    |
+| `icon`              | `ReactElement` | yes      | Icon shown next to the card name                                            |
+| `previousStats`     | `string`       | no       | Previous value shown as "from {previousStats}"                              |
+| `change`            | `string`       | no       | Change amount shown in the badge (e.g. `"12%"`)                             |
+| `changeType`        | `string`       | no       | `"increase"` renders a green up-arrow badge; anything else renders red down |
+| `actionIcon`        | `ReactElement` | no       | Icon rendered in the top-right of the individual card                       |
+| `onActionIconClick` | `() => void`   | no       | Click handler for `actionIcon`                                              |
+
+##### RangeInterface
+
+| Name         | Type      | Description                                              |
+| ------------ | --------- | -------------------------------------------------------- |
+| `startDate`  | `Date`    | Start of the range                                       |
+| `endDate`    | `Date`    | End of the range                                         |
+| `isDuration` | `boolean` | `true` = date range, `false` = "beginning until endDate" |
+| `startTime`  | `string`  | Optional time string `"HH:mm:ss"` for same-day ranges    |
+| `endTime`    | `string`  | Optional time string `"HH:mm:ss"` for same-day ranges    |

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

@@ -0,0 +1,183 @@
+import {
+  ArrowDownOnSquareStackIcon,
+  CogIcon,
+  MapIcon,
+  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);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+const baseStats = [
+  {
+    name: "Total Subscribers",
+    stats: "71,897",
+    previousStats: "70,946",
+    change: "12%",
+    changeType: "increase",
+    icon: <ArrowDownOnSquareStackIcon className="w-6 h-6 text-gray-600" />,
+    actionIcon: <CogIcon className="w-5 h-5 text-gray-600" />,
+    onActionIconClick: () => {},
+  },
+  {
+    name: "Avg. Open Rate",
+    stats: "58.16%",
+    icon: <MapIcon className="w-6 h-6 text-gray-600" />,
+    actionIcon: <CogIcon className="w-5 h-5 text-gray-600" />,
+    onActionIconClick: () => {},
+  },
+  {
+    name: "Avg. Click Rate",
+    stats: "24.57%",
+    previousStats: "28.62%",
+    change: "4.05%",
+    changeType: "decrease",
+    icon: <UserGroupIcon className="w-6 h-6 text-gray-600" />,
+    actionIcon: <CogIcon className="w-5 h-5 text-gray-600" />,
+    onActionIconClick: () => {},
+  },
+];
+
+stories.add("Stats Card", () => {
+  const chartDummyData = useMemo(() => {
+    const now = new Date();
+    const sevenDaysAgo = new Date();
+    const oneDaysAgo = new Date();
+    const twentyEightDaysAgo = new Date();
+    sevenDaysAgo.setDate(now.getDate() - 7);
+    oneDaysAgo.setDate(now.getDate() - 1);
+    twentyEightDaysAgo.setDate(now.getDate() - 28);
+    return [
+      { ...baseStats[0], createdAt: sevenDaysAgo },
+      { ...baseStats[1], createdAt: sevenDaysAgo },
+      { ...baseStats[2], createdAt: oneDaysAgo },
+      {
+        name: "Active Users",
+        stats: "3,240",
+        previousStats: "3,100",
+        change: "4.5%",
+        changeType: "increase",
+        icon: <UserGroupIcon className="w-6 h-6 text-gray-600" />,
+        createdAt: twentyEightDaysAgo,
+      },
+    ];
+  }, []);
+
+  const [seriesData, setSeriesData] = useState<any[]>([]);
+
+  const handleSetData = useCallback(
+    (customDate?: RangeInterface) => {
+      const result: any[] = [];
+      chartDummyData.forEach((d) => {
+        if (customDate?.isDuration) {
+          if (
+            d.createdAt >= customDate.startDate &&
+            d.createdAt <= customDate.endDate
+          ) {
+            result.push(d);
+          }
+        } else {
+          result.push(d);
+        }
+      });
+      setSeriesData(result);
+    },
+    [chartDummyData]
+  );
+
+  useEffect(() => {
+    handleSetData();
+  }, [handleSetData]);
+
+  return (
+    <>
+      <StorySection
+        title="Default (4-column grid)"
+        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
+            stats={seriesData}
+            dateRangeVisible={true}
+            onChangeDate={handleSetData}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="gridSize=3"
+        description="gridSize=3 renders a 3-column grid on large screens (2-column on medium)."
+      >
+        <div className="w-full">
+          <StatsCard stats={baseStats} gridSize={3} />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="gridSize=2"
+        description="gridSize=2 renders a 2-column grid."
+      >
+        <div className="w-full">
+          <StatsCard stats={baseStats.slice(0, 2)} gridSize={2} />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="gridSize=1"
+        description="gridSize=1 renders a single-column layout."
+      >
+        <div className="w-full">
+          <StatsCard stats={baseStats.slice(0, 1)} gridSize={1} />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="minGridSize=2"
+        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} />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Header Icon"
+        description="Pass icon to render a small icon in the top-right corner of the card group."
+      >
+        <div className="w-full">
+          <StatsCard
+            stats={baseStats}
+            icon={<PencilIcon className="w-4 h-4 text-primary-600" />}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Dark Mode"
+        description="Pass darkMode=true and optionally darkModeBg to customise the background."
+        dark
+      >
+        <div className="w-full">
+          <StatsCard
+            stats={baseStats}
+            darkMode={true}
+            darkModeBg="bg-gradient-to-r from-gray-900 to-slate-700"
+            icon={<PencilIcon className="w-4 h-4 text-primary-600" />}
+          />
+        </div>
+      </StorySection>
+    </>
+  );
+});

package/lib/components/chart/treemapChart/README.md

@@ -0,0 +1,142 @@
+# Treemap Chart
+
+<!-- STORY -->
+
+<hr>
+
+A treemap chart component for displaying hierarchical data in nested rectangles. e.g: Page views distribution across different categories
+
+##### Import
+
+```js
+import { TreemapChart } from "blixify-ui-web/lib";
+```
+
+##### Usage
+
+```jsx
+const [seriesData, setSeriesData] = useState<any[]>([]);
+
+const chartDummyData = useMemo(() => {
+  return [
+    {
+      label: "Analytics",
+      value: 20,
+    },
+    {
+      label: "Ecommerce",
+      value: 15,
+    },
+    {
+      label: "Desktop",
+      value: 13,
+    },
+    {
+      label: "Mobile",
+      value: 12,
+    },
+    {
+      label: "Social",
+      value: 10,
+    },
+    {
+      label: "Other",
+      value: 8,
+    },
+    {
+      label: "Marketing",
+      value: 7,
+    },
+    {
+      label: "Development",
+      value: 6,
+    },
+    {
+      label: "Design",
+      value: 5,
+    },
+    {
+      label: "Support",
+      value: 4,
+    },
+  ];
+}, []);
+
+const handleSetData = useCallback(
+  (customDate?: RangeInterface) => {
+    let dummySeriesData: any[] = [];
+    chartDummyData.map((eachData) => {
+      dummySeriesData.push({ x: eachData.label, y: eachData.value });
+      return null;
+    });
+    setSeriesData(dummySeriesData);
+  },
+  [chartDummyData]
+);
+
+useEffect(() => {
+  handleSetData();
+}, [handleSetData]);
+
+return (
+  <>
+    <div className="font-medium mb-5">Treemap Chart</div>
+    <TreemapChart
+      title="Page Views Distribution"
+      seriesName="Pages"
+      seriesData={seriesData}
+      tool={<PencilIcon className="h-4 w-4 text-primary-600" />}
+      dateRangeVisible={true}
+      customDate={{
+        startDate: sevenDaysAgo,
+        endDate: moment().toDate(),
+        isDuration: true,
+      }}
+      onChangeDate={handleSetData}
+      showDataLabel={true}
+      newTabUrl="https://www.google.com/"
+    />
+    <div className="font-medium my-5">Dark Mode Treemap Chart</div>
+    <TreemapChart
+      title="Data Categories"
+      seriesName="Categories"
+      seriesData={seriesData}
+      tool={<PencilIcon className="h-4 w-4 text-primary-600" />}
+      dateRangeVisible={true}
+      customDate={{
+        startDate: sevenDaysAgo,
+        endDate: moment().toDate(),
+        isDuration: true,
+      }}
+      onChangeDate={handleSetData}
+      showDataLabel={true}
+      darkMode={true}
+      darkModeBg="bg-gradient-to-r from-slate-700 to-gray-900"
+      borderColor=""
+    />
+  </>
+);
+```
+
+##### Required props
+
+| Name    | Type     | Description        |
+| ------- | -------- | ------------------ |
+| `title` | `string` | Title of the chart |
+
+##### Optional props
+
+| Name            | Type            | Default | Description                                  |
+| --------------- | --------------- | ------- | -------------------------------------------- |
+| `seriesData`    | `TreemapData[]` | `[]`    | Series data with x(Name) and y(Number) value |
+| `seriesName`    | `string`        | "Pages" | Value name in pointer card                   |
+| `showToolbar`   | `boolean`       | `false` |                                              |
+| `showDataLabel` | `boolean`       | `true`  |                                              |
+| `newTabUrl`     | `string`        | ""      | set URL for create hyperlinks                |
+
+##### Treemap Data props
+
+| Name | Type     | Description   |
+| ---- | -------- | ------------- |
+| `x`  | `string` | Name of data  |
+| `y`  | `number` | Value of data |