@mbao01/common 0.9.2 → 0.9.3

package/dist/types/components/Chart/stories/args/index.d.ts

@@ -1,4 +1,4 @@
-import { AreaProps, BarProps, LineProps, PieProps, RadarProps, RadialBarProps, XAxisProps, YAxisProps } from 'recharts';
+import { AreaProps, BarProps, LineProps, PieProps, RadarProps, RadialBarProps, ScatterProps, XAxisProps, YAxisProps } from 'recharts';
 import { ArgTypes } from '@storybook/react-vite';
 import { CartesianChartProps, PolarChartProps } from 'recharts/types/util/types';
 import { Flatten, OmitSVGElement } from './types';
@@ -60,4 +60,16 @@ export declare const radarArgKey: {
     radarChart: "radarChart";
 };
 export declare const radarChartArgs: ArgTypes;
+export type ScatterChartProps = {
+    scatter: OmitSVGElement<ScatterProps>;
+    scatterChart: CartesianChartProps;
+} & AxisProps;
+export type ScatterChartArgs = Partial<Flatten<ScatterChartProps>> & {};
+export declare const scatterArgKey: {
+    scatter: "scatter";
+    scatterChart: "scatterChart";
+    xAxis: "xAxis";
+    yAxis: "yAxis";
+};
+export declare const scatterChartArgs: ArgTypes;
 export {};

package/dist/types/components/Chart/stories/args/scatterArgs.d.ts

@@ -0,0 +1,2 @@
+import { ArgTypes } from '@storybook/react-vite';
+export declare const scatterArgs: ArgTypes;

package/dist/types/components/Chart/stories/args/scatterChartArgs.d.ts

@@ -0,0 +1,2 @@
+import { ArgTypes } from '@storybook/react-vite';
+export declare const scatterChartArgs: ArgTypes;

package/dist/types/components/Chart/stories/examples/ScatterChart.d.ts

@@ -0,0 +1,17 @@
+import { ScatterChartProps } from '../args';
+/**
+ * ## Parent
+ *
+ * The ScatterChart can be used within: `<Chart />`
+ *
+ * ## Children
+ *
+ * The ScatterChart can be used with the following child components: `<XAxis />`, `<YAxis />`, `<ZAxis />`,
+ * `<ReferenceArea />`, `<ReferenceDot />`, `<ReferenceLine />`, `<CartesianGrid />`,
+ * `<ChartLegend />`, `<ChartTooltip />`, `<Scatter />`, `<Customized />` or valid svg elements.
+ */
+export declare const ScatterChartExample: (props: ScatterChartProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MultiSeriesScatterChartExample: (props: ScatterChartProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BubbleScatterChartExample: (props: ScatterChartProps) => import("react/jsx-runtime").JSX.Element;
+export declare const WithLineScatterChartExample: (props: ScatterChartProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ShapesScatterChartExample: (props: ScatterChartProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/index.d.ts

@@ -84,6 +84,7 @@ export * from './components/Widget';
 export * from './components/WidgetShell';
 /** molecules */
 export * from './components/Banner';
+export * from './components/Drawer';
 export * from './components/Empty';
 export * from './components/Sidebar';
 export * from './components/Stepper';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.9.2",
+  "version": "0.9.3",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",

package/src/components/Chart/stories/args/index.ts

@@ -5,6 +5,7 @@ import type {
   PieProps,
   RadarProps,
   RadialBarProps,
+  ScatterProps,
   XAxisProps,
   YAxisProps,
 } from "recharts";
@@ -24,6 +25,8 @@ import { radarArgs } from "./radarArgs";
 import { radarChartArgs as radarChartComponentArgs } from "./radarChartArgs";
 import { radialBarArgs } from "./radialBarArgs";
 import { radialBarChartArgs as radialBarChartComponentArgs } from "./radialBarChartArgs";
+import { scatterArgs } from "./scatterArgs";
+import { scatterChartArgs as scatterChartComponentArgs } from "./scatterChartArgs";
 import { OmitSVGElement } from "./types";
 import { xAxisArgs } from "./xAxisArgs";
 import { yAxisArgs } from "./yAxisArgs";
@@ -177,3 +180,29 @@ export const radarChartArgs: ArgTypes = {
   ...categorizeArgs(radarChartComponentArgs, radarArgKey.radarChart),
   ...categorizeArgs(radarArgs, radarArgKey.radar),
 };
+
+/**
+ * Scatter chart
+ */
+type ScatterArgKey = "scatter" | "scatterChart" | "xAxis" | "yAxis";
+
+export type ScatterChartProps = {
+  scatter: OmitSVGElement<ScatterProps>;
+  scatterChart: CartesianChartProps;
+} & AxisProps;
+
+export type ScatterChartArgs = Partial<Flatten<ScatterChartProps>> & {};
+
+export const scatterArgKey = {
+  scatter: "scatter",
+  scatterChart: "scatterChart",
+  xAxis: "xAxis",
+  yAxis: "yAxis",
+} satisfies Record<string, ScatterArgKey>;
+
+export const scatterChartArgs: ArgTypes = {
+  ...categorizeArgs(scatterChartComponentArgs, scatterArgKey.scatterChart),
+  ...categorizeArgs(xAxisArgs, scatterArgKey.xAxis),
+  ...categorizeArgs(yAxisArgs, scatterArgKey.yAxis),
+  ...categorizeArgs(scatterArgs, scatterArgKey.scatter),
+};

package/src/components/Chart/stories/args/scatterArgs.ts

@@ -0,0 +1,79 @@
+import { type ArgTypes } from "@storybook/react-vite";
+import { generalStyleArgs, hide, labelDescription, labelSummary } from "./stylesArgs";
+import { animationArgs } from "./animationArgs";
+import { dataKey, zAxisId } from "./cartesianSharedArgs";
+
+export const scatterArgs: ArgTypes = {
+  ...generalStyleArgs,
+  ...animationArgs,
+  dataKey,
+  zAxisId,
+  hide,
+  name: {
+    description: `The name of data. This option will be used in tooltip and legend to represent a scatter.
+    If no value was set to this option, the value of dataKey will be used alternatively.`,
+    table: {
+      type: {
+        summary: "string | number",
+      },
+      category: "General",
+    },
+    control: "text",
+  },
+  shape: {
+    description:
+      "If a string set, specified symbol will be used to show scatter item. If ReactElement, the element will be cloned to render scatter item. If a function, it will be called to render scatter item.",
+    table: {
+      type: {
+        summary: "'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' | ReactElement | Function",
+      },
+      defaultValue: {
+        summary: "'circle'",
+      },
+      category: "Style",
+    },
+    control: "select",
+    options: ["circle", "cross", "diamond", "square", "star", "triangle", "wye"],
+  },
+  line: {
+    description:
+      "If false set, line will not be drawn. If true set, line will be drawn which have the props calculated internally. If object set, line will be drawn which have the props merged by the internal calculated props and the option.",
+    table: {
+      type: {
+        summary: "boolean | Object | ReactElement | Function",
+      },
+      defaultValue: {
+        summary: "false",
+      },
+      category: "Style",
+    },
+    control: "boolean",
+  },
+  lineType: {
+    description: "The type of line in the scatter chart, 'joint' connects adjacent points, 'fitting' uses a fitting line.",
+    table: {
+      type: {
+        summary: "'joint' | 'fitting'",
+      },
+      defaultValue: {
+        summary: "'joint'",
+      },
+      category: "Style",
+    },
+    control: "radio",
+    options: ["joint", "fitting"],
+  },
+  label: {
+    description: labelDescription,
+    table: {
+      type: {
+        summary: labelSummary,
+      },
+      defaultValue: {
+        summary: "false",
+      },
+      category: "Style",
+    },
+    control: "boolean",
+  },
+};

package/src/components/Chart/stories/args/scatterChartArgs.ts

@@ -0,0 +1,6 @@
+import { type ArgTypes } from "@storybook/react-vite";
+import { categoricalChartArgs } from "./chartArgs";
+
+export const scatterChartArgs: ArgTypes = {
+  ...categoricalChartArgs,
+};

package/src/components/Chart/stories/examples/ScatterChart.tsx

@@ -0,0 +1,263 @@
+import { CartesianGrid, Scatter, ScatterChart, XAxis, YAxis, ZAxis } from "recharts";
+import { Chart } from "../../Chart";
+import {
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "../../components";
+import { type ChartConfig } from "../../types";
+import { ScatterChartProps } from "../args";
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig;
+
+/**
+ * ## Parent
+ *
+ * The ScatterChart can be used within: `<Chart />`
+ *
+ * ## Children
+ *
+ * The ScatterChart can be used with the following child components: `<XAxis />`, `<YAxis />`, `<ZAxis />`,
+ * `<ReferenceArea />`, `<ReferenceDot />`, `<ReferenceLine />`, `<CartesianGrid />`,
+ * `<ChartLegend />`, `<ChartTooltip />`, `<Scatter />`, `<Customized />` or valid svg elements.
+ */
+export const ScatterChartExample = (props: ScatterChartProps) => {
+  return (
+    <Chart config={chartConfig} className="h-[300px] w-full">
+      <ScatterChart {...props.scatterChart}>
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis {...props.xAxis} />
+        <YAxis {...props.yAxis} />
+        <ChartTooltip cursor={{ strokeDasharray: "3 3" }} content={<ChartTooltipContent />} />
+        <Scatter {...props.scatter} />
+      </ScatterChart>
+    </Chart>
+  );
+};
+
+export const MultiSeriesScatterChartExample = (props: ScatterChartProps) => {
+  const desktopData = [
+    { x: 100, y: 200 },
+    { x: 120, y: 100 },
+    { x: 170, y: 300 },
+    { x: 140, y: 250 },
+    { x: 150, y: 400 },
+    { x: 110, y: 280 },
+  ];
+
+  const mobileData = [
+    { x: 200, y: 260 },
+    { x: 240, y: 290 },
+    { x: 190, y: 340 },
+    { x: 198, y: 250 },
+    { x: 180, y: 280 },
+    { x: 210, y: 220 },
+  ];
+
+  return (
+    <Chart config={chartConfig} className="h-[300px] w-full">
+      <ScatterChart {...props.scatterChart}>
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis {...props.xAxis} />
+        <YAxis {...props.yAxis} />
+        <ChartTooltip cursor={{ strokeDasharray: "3 3" }} content={<ChartTooltipContent />} />
+        <Scatter
+          {...props.scatter}
+          name="Desktop"
+          data={desktopData}
+          fill="var(--color-desktop)"
+        />
+        <Scatter
+          {...props.scatter}
+          name="Mobile"
+          data={mobileData}
+          fill="var(--color-mobile)"
+        />
+        <ChartLegend content={<ChartLegendContent />} />
+      </ScatterChart>
+    </Chart>
+  );
+};
+
+export const BubbleScatterChartExample = (props: ScatterChartProps) => {
+  const chartConfig = {
+    visitors: {
+      label: "Visitors",
+      color: "hsl(var(--chart-1))",
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <Chart config={chartConfig} className="h-[300px] w-full">
+      <ScatterChart {...props.scatterChart}>
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis
+          dataKey="hours"
+          name="Hours Spent"
+          type="number"
+          tickLine={false}
+          axisLine={false}
+          tickMargin={8}
+          {...props.xAxis}
+        />
+        <YAxis
+          dataKey="score"
+          name="Test Score"
+          type="number"
+          tickLine={false}
+          axisLine={false}
+          tickMargin={8}
+          {...props.yAxis}
+        />
+        <ZAxis dataKey="students" range={[60, 400]} name="Students" />
+        <ChartTooltip cursor={{ strokeDasharray: "3 3" }} content={<ChartTooltipContent />} />
+        <Scatter
+          name="Visitors"
+          fill="var(--color-visitors)"
+          {...props.scatter}
+        />
+      </ScatterChart>
+    </Chart>
+  );
+};
+
+export const WithLineScatterChartExample = (props: ScatterChartProps) => {
+  const chartConfig = {
+    performance: {
+      label: "Performance",
+      color: "hsl(var(--chart-1))",
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <Chart config={chartConfig} className="h-[300px] w-full">
+      <ScatterChart {...props.scatterChart}>
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis
+          dataKey="x"
+          name="Experience (years)"
+          type="number"
+          tickLine={false}
+          axisLine={false}
+          tickMargin={8}
+          {...props.xAxis}
+        />
+        <YAxis
+          dataKey="y"
+          name="Salary ($k)"
+          type="number"
+          tickLine={false}
+          axisLine={false}
+          tickMargin={8}
+          {...props.yAxis}
+        />
+        <ChartTooltip cursor={{ strokeDasharray: "3 3" }} content={<ChartTooltipContent />} />
+        <Scatter
+          name="Performance"
+          fill="var(--color-performance)"
+          line={{ stroke: "var(--color-performance)", strokeWidth: 2 }}
+          lineType="fitting"
+          {...props.scatter}
+        />
+      </ScatterChart>
+    </Chart>
+  );
+};
+
+export const ShapesScatterChartExample = (props: ScatterChartProps) => {
+  const chartConfig = {
+    series1: {
+      label: "Series A",
+      color: "hsl(var(--chart-1))",
+    },
+    series2: {
+      label: "Series B",
+      color: "hsl(var(--chart-2))",
+    },
+    series3: {
+      label: "Series C",
+      color: "hsl(var(--chart-3))",
+    },
+  } satisfies ChartConfig;
+
+  const series1Data = [
+    { x: 10, y: 30 },
+    { x: 30, y: 50 },
+    { x: 50, y: 70 },
+    { x: 70, y: 40 },
+    { x: 90, y: 60 },
+  ];
+
+  const series2Data = [
+    { x: 20, y: 80 },
+    { x: 40, y: 20 },
+    { x: 60, y: 50 },
+    { x: 80, y: 90 },
+    { x: 100, y: 30 },
+  ];
+
+  const series3Data = [
+    { x: 15, y: 45 },
+    { x: 35, y: 65 },
+    { x: 55, y: 25 },
+    { x: 75, y: 85 },
+    { x: 95, y: 55 },
+  ];
+
+  return (
+    <Chart config={chartConfig} className="h-[300px] w-full">
+      <ScatterChart {...props.scatterChart}>
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis
+          dataKey="x"
+          type="number"
+          tickLine={false}
+          axisLine={false}
+          tickMargin={8}
+          {...props.xAxis}
+        />
+        <YAxis
+          dataKey="y"
+          type="number"
+          tickLine={false}
+          axisLine={false}
+          tickMargin={8}
+          {...props.yAxis}
+        />
+        <ChartTooltip cursor={{ strokeDasharray: "3 3" }} content={<ChartTooltipContent />} />
+        <Scatter
+          name="Series A"
+          data={series1Data}
+          fill="var(--color-series1)"
+          shape="circle"
+          {...props.scatter}
+        />
+        <Scatter
+          name="Series B"
+          data={series2Data}
+          fill="var(--color-series2)"
+          shape="diamond"
+          {...props.scatter}
+        />
+        <Scatter
+          name="Series C"
+          data={series3Data}
+          fill="var(--color-series3)"
+          shape="triangle"
+          {...props.scatter}
+        />
+        <ChartLegend content={<ChartLegendContent />} />
+      </ScatterChart>
+    </Chart>
+  );
+};

package/src/index.ts

@@ -92,6 +92,7 @@ export * from "./components/WidgetShell";
 
 /** molecules */
 export * from "./components/Banner";
+export * from "./components/Drawer";
 export * from "./components/Empty";
 export * from "./components/Sidebar";
 export * from "./components/Stepper";