blixify-ui-web-mcp 0.1.1

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

@@ -0,0 +1,142 @@
+# Gantt Chart
+
+<!-- STORY -->
+
+<hr>
+
+A Gantt chart component for displaying project timelines and task management. e.g: Project schedules, task dependencies, and progress tracking
+
+##### Import
+
+```js
+import { GanttChart } from "blixify-ui-web/lib";
+```
+
+##### Usage
+
+```jsx
+const [ganttTasks, setGanttTasks] = useState<any[]>([]);
+
+const sampleTasks = [
+  {
+    id: "task1",
+    name: "Project Planning",
+    start: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000),
+    end: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000),
+    duration: 2,
+    progress: 100,
+    color: "#008FFB", // Individual task color
+  },
+  {
+    id: "task2",
+    name: "Design Phase",
+    start: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000),
+    end: new Date(Date.now() + 2 * 24 * 60 * 60 * 1000),
+    duration: 5,
+    progress: 75,
+    color: "#00E396", // Individual task color
+    dependencies: ["task1"],
+  },
+  {
+    id: "task3",
+    name: "Development",
+    start: new Date(),
+    end: new Date(Date.now() + 10 * 24 * 60 * 60 * 1000),
+    duration: 10,
+    progress: 40,
+    color: "#FEB019", // Individual task color
+    dependencies: ["task2"],
+  },
+];
+
+const handleTaskClick = useCallback((taskId: string, taskName: string) => {
+  console.log(`Clicked task: ${taskName} (ID: ${taskId})`);
+}, []);
+
+useEffect(() => {
+  setGanttTasks(sampleTasks);
+}, []);
+
+return (
+  <>
+    <div className="font-medium mb-5">Gantt Chart</div>
+    <GanttChart
+      title="Project Timeline"
+      tasks={ganttTasks}
+      tool={<CalendarIcon className="h-4 w-4 text-primary-600" />}
+      dateRangeVisible={true}
+      customDate={{
+        startDate: sevenDaysAgo,
+        endDate: fourteenDaysFromNow,
+        isDuration: true,
+      }}
+      onChangeDate={handleDateRangeChange}
+      onClick={handleTaskClick}
+      showDataLabel={true}
+      showTooltip={true}
+      colors={["#008FFB", "#00E396", "#FEB019", "#FF4560", "#775DD0"]}
+    />
+
+    {/*
+      Color mapping:
+      - Task 1 (Project Planning) → #008FFB (first color)
+      - Task 2 (Design Phase) → #00E396 (second color)
+      - Task 3 (Development) → #FEB019 (third color)
+      - Task 4 (Testing) → #FF4560 (fourth color)
+      - Task 5 (Deployment) → #775DD0 (fifth color)
+    */}
+
+    <div className="font-medium my-5">Dark Mode Gantt Chart</div>
+    <GanttChart
+      title="Development Sprint"
+      tasks={ganttTasks.slice(1, 3)}
+      onClick={handleTaskClick}
+      darkMode={true}
+      darkModeBg="bg-gradient-to-r from-slate-700 to-gray-900"
+      enableGradient={true}
+      colors={["#3B82F6", "#10B981", "#F59E0B", "#EF4444", "#8B5CF6"]}
+    />
+  </>
+);
+```
+
+##### Required props
+
+| Name    | Type     | Description        |
+| ------- | -------- | ------------------ |
+| `title` | `string` | Title of the chart |
+
+##### Optional props
+
+| Name            | Type            | Default     | Description                                                                        |
+| --------------- | --------------- | ----------- | ---------------------------------------------------------------------------------- |
+| `tasks`         | `GanttTask[]`   | `[]`        | Array of task objects for timeline visualization                                   |
+| `series`        | `GanttSeries[]` | `[]`        | Alternative series format for advanced usage                                       |
+| `duration`      | `object`        | `undefined` | Overall project duration with startDate and endDate                                |
+| `showGrid`      | `boolean`       | `true`      | Show/hide grid lines                                                               |
+| `showTooltip`   | `boolean`       | `true`      | Enable/disable tooltips                                                            |
+| `showDataLabel` | `boolean`       | `true`      | Show/hide data labels                                                              |
+| `showToolbar`   | `boolean`       | `true`      | Show/hide chart toolbar                                                            |
+| `borderColor`   | `string`        | `#e7e7e7`   | Custom border color                                                                |
+| `colors`        | `string[]`      | `undefined` | Array of colors - first task uses first color, second task uses second color, etc. |
+| `onClick`       | `function`      | `undefined` | Callback when task is clicked                                                      |
+
+##### GanttTask props
+
+| Name           | Type       | Description                          |
+| -------------- | ---------- | ------------------------------------ |
+| `id`           | `string`   | Unique identifier for the task       |
+| `name`         | `string`   | Display name of the task             |
+| `start`        | `Date`     | Task start date                      |
+| `end`          | `Date`     | Task end date                        |
+| `duration`     | `number`   | Duration in days (optional)          |
+| `progress`     | `number`   | Progress percentage 0-100            |
+| `dependencies` | `string[]` | Array of dependent task IDs          |
+| `color`        | `string`   | Custom color for the task (optional) |
+
+##### GanttSeries props
+
+| Name   | Type     | Description                   |
+| ------ | -------- | ----------------------------- |
+| `name` | `string` | Series name                   |
+| `data` | `array`  | Array of timeline data points |

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

@@ -0,0 +1,138 @@
+import { CalendarIcon } from "@heroicons/react/24/outline";
+import { storiesOf } from "@storybook/react";
+import React, { useCallback, useState } from "react";
+import { GanttChart } from ".";
+import README from "./README.md";
+
+const stories = storiesOf("Chart", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Gantt Chart", () => {
+  const today = new Date();
+  const oneDay = 24 * 60 * 60 * 1000;
+
+  const [ganttTasks, setGanttTasks] = useState<any[]>([
+    {
+      id: "task1",
+      name: "Project Planning",
+      start: new Date(today.getTime() - 5 * oneDay),
+      end: new Date(today.getTime() - 3 * oneDay),
+      duration: 2,
+      progress: 100,
+    },
+    {
+      id: "task2",
+      name: "Design Phase",
+      start: new Date(today.getTime() - 3 * oneDay),
+      end: new Date(today.getTime() + 2 * oneDay),
+      duration: 5,
+      progress: 75,
+      dependencies: ["task1"],
+    },
+    {
+      id: "task3",
+      name: "Development",
+      start: new Date(today.getTime()),
+      end: new Date(today.getTime() + 10 * oneDay),
+      duration: 10,
+      progress: 40,
+      dependencies: ["task2"],
+    },
+    {
+      id: "task4",
+      name: "Testing",
+      start: new Date(today.getTime() + 8 * oneDay),
+      end: new Date(today.getTime() + 12 * oneDay),
+      duration: 4,
+      progress: 0,
+      dependencies: ["task3"],
+    },
+    {
+      id: "task5",
+      name: "Deployment",
+      start: new Date(today.getTime() + 12 * oneDay),
+      end: new Date(today.getTime() + 14 * oneDay),
+      duration: 2,
+      progress: 0,
+      dependencies: ["task4"],
+    },
+  ]);
+
+  const handleTaskClick = useCallback((taskId: string, taskName: string) => {
+    console.log(`Clicked task: ${taskName} (ID: ${taskId})`);
+  }, []);
+
+  const handleTaskChange = useCallback((tasks: any[]) => {
+    setGanttTasks(tasks);
+    console.log(`Tasks updated: ${tasks.length} tasks`);
+  }, []);
+
+  return (
+    <>
+      <div className="font-medium mb-5">
+        Gantt Chart - Write Mode (Editable)
+      </div>
+      <GanttChart
+        title="Project Management Dashboard"
+        tasks={ganttTasks}
+        mode="write"
+        tool={<CalendarIcon className="h-4 w-4 text-primary-600" />}
+        dateRangeVisible={true}
+        onClick={handleTaskClick}
+        onTaskChange={handleTaskChange}
+        showDataLabel={true}
+        showTooltip={true}
+        showGrid={true}
+        showToolbar={true}
+        colors={["#008FFB", "#00E396", "#FEB019", "#FF4560", "#775DD0"]}
+      />
+      <div className="font-medium mb-5">
+        Gantt Chart (Individual Task Colors)
+      </div>
+      <GanttChart
+        title="Project Timeline"
+        tasks={ganttTasks}
+        tool={<CalendarIcon className="h-4 w-4 text-primary-600" />}
+        dateRangeVisible={true}
+        onClick={handleTaskClick}
+        showDataLabel={true}
+        showTooltip={true}
+        showGrid={true}
+        showToolbar={true}
+        colors={["#008FFB", "#00E396", "#FEB019", "#FF4560", "#775DD0"]}
+      />
+
+      <div className="font-medium my-5">Dark Mode Gantt Chart</div>
+      <GanttChart
+        title="Development Sprint"
+        tasks={ganttTasks.slice(1, 4)}
+        tool={<CalendarIcon className="h-4 w-4 text-primary-600" />}
+        onClick={handleTaskClick}
+        showDataLabel={true}
+        showTooltip={true}
+        darkMode={true}
+        darkModeBg="bg-gradient-to-r from-slate-700 to-gray-900"
+        borderColor="#374151"
+        enableGradient={true}
+        colors={["#3B82F6", "#10B981", "#F59E0B", "#EF4444", "#8B5CF6"]}
+      />
+
+      <div className="font-medium my-5">Chart Only Mode</div>
+      <GanttChart
+        title="Minimal Gantt"
+        tasks={ganttTasks.slice(0, 3)}
+        chartOnly={true}
+        containerStyle="h-64 w-full"
+        showDataLabel={false}
+        showToolbar={false}
+        onClick={handleTaskClick}
+        colors={["#3B82F6", "#10B981", "#F59E0B"]}
+      />
+    </>
+  );
+});

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

@@ -0,0 +1,125 @@
+# Heatmap Chart
+
+<!-- STORY -->
+
+<hr>
+
+A heatmap chart component for displaying data density and patterns. e.g: User activity across different time periods
+
+##### Import
+
+```js
+import { HeatmapChart } from "blixify-ui-web/lib";
+```
+
+##### Usage
+
+```jsx
+const multiSeriesData = [
+  {
+    name: "Metric1",
+    data: [
+      10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160,
+      170, 180,
+    ],
+  },
+  {
+    name: "Metric2",
+    data: [
+      15, 25, 35, 45, 55, 65, 75, 85, 95, 105, 115, 125, 135, 145, 155, 165,
+      175, 185,
+    ],
+  },
+  {
+    name: "Metric3",
+    data: [
+      20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170,
+      180, 190,
+    ],
+  },
+  {
+    name: "Metric4",
+    data: [
+      25, 35, 45, 55, 65, 75, 85, 95, 105, 115, 125, 135, 145, 155, 165, 175,
+      185, 195,
+    ],
+  },
+  {
+    name: "Metric5",
+    data: [
+      30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180,
+      190, 200,
+    ],
+  },
+];
+
+const categories = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec",
+  "Q1",
+  "Q2",
+  "Q3",
+  "Q4",
+  "Y1",
+  "Y2",
+];
+
+return (
+  <>
+    <div className="font-medium mb-5">Multi-Series Heatmap Chart</div>
+    <HeatmapChart
+      title="Metrics Heatmap"
+      multiSeriesData={multiSeriesData}
+      categories={categories}
+      tool={<PencilIcon className="h-4 w-4 text-primary-600" />}
+      showDataLabel={true}
+      newTabUrl="https://www.google.com/"
+    />
+
+    <div className="font-medium my-5">Dark Mode Heatmap Chart</div>
+    <HeatmapChart
+      title="Activity Distribution"
+      multiSeriesData={multiSeriesData}
+      categories={categories}
+      tool={<PencilIcon className="h-4 w-4 text-primary-600" />}
+      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                                |
+| ----------------- | -------------- | ------- | ------------------------------------------ |
+| `multiSeriesData` | `SeriesItem[]` | `[]`    | Multi-series data with name and data array |
+| `categories`      | `string[]`     | `[]`    | X-axis categories for multi-series format  |
+| `showToolbar`     | `boolean`      | `false` |                                            |
+| `showDataLabel`   | `boolean`      | `true`  |                                            |
+| `newTabUrl`       | `string`       | ""      | set URL for create hyperlinks              |
+
+##### Series Item props
+
+| Name   | Type       | Description   |
+| ------ | ---------- | ------------- |
+| `name` | `string`   | Name of data  |
+| `data` | `number[]` | Value of data |

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

@@ -0,0 +1,106 @@
+import { PencilIcon } from "@heroicons/react/24/outline";
+import { storiesOf } from "@storybook/react";
+import React, { useMemo } from "react";
+import { HeatmapChart } from ".";
+import README from "./README.md";
+
+const stories = storiesOf("Chart", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+// Utility function to generate random data
+const generateData = (
+  count: number,
+  options: { min: number; max: number }
+): number[] => {
+  const data: number[] = [];
+  for (let i = 0; i < count; i++) {
+    data.push(
+      Math.floor(Math.random() * (options.max - options.min + 1)) + options.min
+    );
+  }
+  return data;
+};
+
+stories.add("Heatmap Chart", () => {
+  // Multi-series data example
+  const multiSeriesData = useMemo(
+    () => [
+      {
+        name: "Metric1",
+        data: generateData(18, { min: 0, max: 90 }),
+      },
+      {
+        name: "Metric2",
+        data: generateData(18, { min: 0, max: 90 }),
+      },
+      {
+        name: "Metric3",
+        data: generateData(18, { min: 0, max: 90 }),
+      },
+      {
+        name: "Metric4",
+        data: generateData(18, { min: 0, max: 90 }),
+      },
+      {
+        name: "Metric5",
+        data: generateData(18, { min: 0, max: 90 }),
+      },
+    ],
+    []
+  );
+
+  const categories = useMemo(
+    () => [
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "May",
+      "Jun",
+      "Jul",
+      "Aug",
+      "Sep",
+      "Oct",
+      "Nov",
+      "Dec",
+      "Q1",
+      "Q2",
+      "Q3",
+      "Q4",
+      "Y1",
+      "Y2",
+    ],
+    []
+  );
+
+  return (
+    <>
+      <div className="font-medium mb-5">Multi-Series Heatmap Chart</div>
+      <HeatmapChart
+        title="Metrics Heatmap"
+        multiSeriesData={multiSeriesData}
+        categories={categories}
+        tool={<PencilIcon className="h-4 w-4 text-primary-600" />}
+        showDataLabel={true}
+        newTabUrl="https://www.google.com/"
+      />
+
+      <div className="font-medium my-5">Dark Mode Heatmap Chart</div>
+      <HeatmapChart
+        title="Activity Distribution"
+        multiSeriesData={multiSeriesData}
+        categories={categories}
+        tool={<PencilIcon className="h-4 w-4 text-primary-600" />}
+        showDataLabel={true}
+        darkMode={true}
+        darkModeBg="bg-gradient-to-r from-slate-700 to-gray-900"
+        borderColor=""
+      />
+    </>
+  );
+});

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

@@ -0,0 +1,140 @@
+# Line Chart
+
+<!-- STORY -->
+
+<hr>
+
+A line (or area) chart for displaying trends over time. Supports single and multi-line series, a brush/zoom controller, dark mode, and custom annotation labels.
+
+##### Import
+
+```js
+import { LineChart } from "blixify-ui-web/chart/lineChart";
+```
+
+##### Usage
+
+Single line:
+
+```jsx
+<LineChart
+  title="Sales of the Year"
+  categories={["Jan", "Feb", "Mar"]}
+  seriesData={[12, 60, 14]}
+  seriesName="Value"
+  xaxisTitle="Month"
+  yaxisTitle="Value"
+  dateRangeVisible={true}
+  onChangeDate={handleSetData}
+/>
+```
+
+Multi-line with brush controller:
+
+```jsx
+<LineChart
+  title="Temperature"
+  categories={["Jan", "Feb", "Mar", "Apr"]}
+  multiLineSeries={[
+    { name: "High", data: [30, 33, 29, 35] },
+    { name: "Low", data: [12, 14, 10, 16] },
+  ]}
+  xaxisTitle="Month"
+  yaxisTitle="°C"
+  chartId="tempChart"
+  chartController={true}
+  decimalPlaces={1}
+/>
+```
+
+Line only (no area fill):
+
+```jsx
+<LineChart
+  title="Revenue"
+  categories={["Q1", "Q2", "Q3"]}
+  seriesData={[100, 150, 130]}
+  xaxisTitle="Quarter"
+  yaxisTitle="Revenue"
+  disableAreaChart={true}
+  hideShadow={true}
+/>
+```
+
+##### Required props
+
+| Name         | Type                   | Description                     |
+| ------------ | ---------------------- | ------------------------------- |
+| `title`      | `string`               | Title shown in the chart header |
+| `categories` | `string[] \| number[]` | X-axis category labels          |
+| `xaxisTitle` | `string`               | X-axis title text               |
+| `yaxisTitle` | `string`               | Y-axis title text               |
+
+##### Chart props
+
+| Name                   | Type                                     | Default     | Description                                                             |
+| ---------------------- | ---------------------------------------- | ----------- | ----------------------------------------------------------------------- |
+| `seriesData`           | `number[]`                               | —           | Single-series Y values, aligned to `categories`                         |
+| `seriesName`           | `string`                                 | —           | Tooltip label for single-series mode                                    |
+| `seriesUnit`           | `string`                                 | `""`        | Unit appended to tooltip values                                         |
+| `multiLineSeries`      | `SeriesItem[]`                           | —           | Multi-line data — array of `{ name, data: number[] }`                   |
+| `showDataLabels`       | `boolean`                                | `false`     | Show value labels on each data point                                    |
+| `showToolbar`          | `boolean`                                | `false`     | Show the ApexCharts toolbar                                             |
+| `disableAreaChart`     | `boolean`                                | `false`     | Render a pure line without the area fill                                |
+| `disableTooltip`       | `boolean`                                | `false`     | Disable hover tooltips                                                  |
+| `disableZoom`          | `boolean`                                | `false`     | Disable zoom interaction                                                |
+| `chartController`      | `boolean`                                | `false`     | Render a brush/zoom controller below the main chart. Requires `chartId` |
+| `chartId`              | `string`                                 | `"chart1"`  | ID linking the main chart to its controller                             |
+| `controllerTickAmount` | `number`                                 | —           | Tick count on the controller's X-axis                                   |
+| `chartHeight`          | `number`                                 | `300`       | Main chart height in pixels                                             |
+| `tickAmount`           | `number`                                 | `15`        | Number of X-axis ticks shown                                            |
+| `yMin`                 | `number`                                 | —           | Minimum Y-axis value                                                    |
+| `decimalPlaces`        | `number`                                 | —           | Decimal places for Y-axis labels. Defaults to `Math.ceil()` if not set  |
+| `lineStroke`           | `string`                                 | `"smooth"`  | ApexCharts stroke curve type (e.g. `"straight"`, `"stepline"`)          |
+| `borderColor`          | `string`                                 | `"#e7e7e7"` | Grid line colour. Pass `""` to remove                                   |
+| `hideShadow`           | `boolean`                                | `false`     | Remove the drop shadow from the line                                    |
+| `hideWhiteDot`         | `boolean`                                | `false`     | Hide the marker dot on each data point                                  |
+| `hideGrid`             | `boolean`                                | `false`     | Hide chart grid lines                                                   |
+| `hideOriginBorder`     | `boolean`                                | `false`     | Hide the default y=0 annotation line                                    |
+| `showYAxisBorder`      | `boolean`                                | `false`     | Show the Y-axis border line                                             |
+| `xaxisTitlePosition`   | `number`                                 | `80`        | `offsetY` for the X-axis title                                          |
+| `legendPosition`       | `"top" \| "bottom" \| "left" \| "right"` | `"bottom"`  | Legend placement                                                        |
+| `newTabUrl`            | `string`                                 | —           | Makes the chart title a link that opens in a new tab                    |
+| `onClick`              | `(value: any) => void`                   | —           | Called when a data point is clicked                                     |
+| `dataLabels`           | `DataLabel[]`                            | —           | Annotation labels at specific coordinates                               |
+
+##### ChartUtils props (shared across all chart components)
+
+| Name               | Type                                    | Default         | Description                                                             |
+| ------------------ | --------------------------------------- | --------------- | ----------------------------------------------------------------------- |
+| `tool`             | `ReactElement`                          | —               | Icon or element in the top-right of the chart header                    |
+| `dateRangeVisible` | `boolean`                               | `false`         | Shows a date range picker below the chart                               |
+| `customDate`       | `RangeInterface`                        | —               | Initial date range for the picker                                       |
+| `onChangeDate`     | `(customDate?: RangeInterface) => void` | —               | Called when the user applies a new date range                           |
+| `colors`           | `string[]`                              | —               | Series colour palette. Falls back to `localChartColors` in localStorage |
+| `darkMode`         | `boolean`                               | `false`         | Switches to dark theme                                                  |
+| `darkModeBg`       | `string`                                | `"bg-gray-900"` | Tailwind classes for the dark mode background                           |
+| `enableGradient`   | `boolean`                               | `false`         | Fill the area under the line with a gradient                            |
+| `chartOnly`        | `boolean`                               | `false`         | Render only the canvas — no title, tool, or date range bar              |
+| `chartSize`        | `number`                                | `280`           | Chart height in pixels (overridden by `chartHeight` when set)           |
+| `containerStyle`   | `string`                                | —               | Tailwind classes applied to the outer container                         |
+| `minInterval`      | `number`                                | `60`            | Time picker interval in minutes                                         |
+
+##### SeriesItem (multi-line)
+
+| Name   | Type       | Description                           |
+| ------ | ---------- | ------------------------------------- |
+| `name` | `string`   | Series name shown in the legend       |
+| `data` | `number[]` | Y values aligned to `categories`      |
+| `unit` | `string`   | Unit appended to this series' tooltip |
+
+##### DataLabel
+
+| Name      | Type     | Description                                           |
+| --------- | -------- | ----------------------------------------------------- |
+| `x`       | `string` | Category to anchor the label to                       |
+| `y`       | `number` | Y value to anchor the label to                        |
+| `name`    | `string` | Label text                                            |
+| `offsetY` | `number` | Vertical offset (negative = above the point)          |
+| `offsetX` | `number` | Horizontal offset                                     |
+| `style`   | `object` | `{ color, fontSize, fontWeight, background, border }` |