@mbao01/common 0.0.44 → 0.0.46

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

@@ -0,0 +1,239 @@
+import { Label, LabelList, PolarGrid, PolarRadiusAxis, RadialBar, RadialBarChart } from "recharts";
+import { Chart } from "../../Chart";
+import { ChartTooltip, ChartTooltipContent } from "../../components";
+import { type ChartConfig } from "../../types";
+import { RadialBarChartProps } from "../args";
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "hsl(var(--chart-3))",
+  },
+  edge: {
+    label: "Edge",
+    color: "hsl(var(--chart-4))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig;
+
+/**
+ * ## Parent
+ *
+ * The RadialBarChart can be used within: `<Chart />`
+ *
+ * ## Children
+ *
+ * The RadialBarChart can be used with the following child components: `<PolarAngleAxis />`, `<PolarRadiusAxis />`,
+ * `<PolarGrid />`, `<ChartLegend />`, `<ChartTooltip />`, `<RadialBar />`, `<Customized />`
+ */
+export const RadialChartExample = (props: Partial<RadialBarChartProps>) => {
+  return (
+    <Chart config={chartConfig} className="mx-auto aspect-square h-[250px]">
+      <RadialBarChart {...props.radialBarChart}>
+        <ChartTooltip
+          cursor={false}
+          content={<ChartTooltipContent hideLabel nameKey="browser" />}
+        />
+        <RadialBar dataKey="visitors" {...props.radialBar} />
+      </RadialBarChart>
+    </Chart>
+  );
+};
+
+export const LabeledRadialChartExample = (props: Partial<RadialBarChartProps>) => {
+  return (
+    <Chart config={chartConfig} className="mx-auto aspect-square h-[250px]">
+      <RadialBarChart {...props.radialBarChart}>
+        <ChartTooltip
+          cursor={false}
+          content={<ChartTooltipContent hideLabel nameKey="browser" />}
+        />
+        <RadialBar dataKey="visitors" {...props.radialBar}>
+          <LabelList
+            position="insideStart"
+            dataKey="browser"
+            className="fill-white capitalize mix-blend-luminosity"
+            fontSize={11}
+          />
+        </RadialBar>
+      </RadialBarChart>
+    </Chart>
+  );
+};
+
+export const GridRadialChartExample = (props: Partial<RadialBarChartProps>) => {
+  return (
+    <Chart config={chartConfig} className="mx-auto aspect-square h-[250px]">
+      <RadialBarChart {...props.radialBarChart}>
+        <ChartTooltip
+          cursor={false}
+          content={<ChartTooltipContent hideLabel nameKey="browser" />}
+        />
+        <PolarGrid gridType="circle" />
+        <RadialBar dataKey="visitors" {...props.radialBar} />
+      </RadialBarChart>
+    </Chart>
+  );
+};
+
+export const TextRadialChartExample = (props: Partial<RadialBarChartProps>) => {
+  const chartData = [{ browser: "safari", visitors: 200, fill: "var(--color-safari)" }];
+  const chartConfig = {
+    visitors: {
+      label: "Visitors",
+    },
+    safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <Chart config={chartConfig} className="mx-auto aspect-square h-[250px]">
+      <RadialBarChart {...props.radialBarChart}>
+        <PolarGrid
+          gridType="circle"
+          radialLines={false}
+          stroke="none"
+          className="first:fill-base-200 last:fill-base-100"
+          polarRadius={[86, 74]}
+        />
+        <RadialBar dataKey="visitors" {...props.radialBar} />
+        <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
+          <Label
+            content={({ viewBox }) => {
+              if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                return (
+                  <text x={viewBox.cx} y={viewBox.cy} textAnchor="middle" dominantBaseline="middle">
+                    <tspan
+                      x={viewBox.cx}
+                      y={viewBox.cy}
+                      className="fill-foreground text-4xl font-bold"
+                    >
+                      {chartData[0].visitors.toLocaleString()}
+                    </tspan>
+                    <tspan x={viewBox.cx} y={(viewBox.cy || 0) + 24} className="fill-base-content">
+                      Visitors
+                    </tspan>
+                  </text>
+                );
+              }
+            }}
+          />
+        </PolarRadiusAxis>
+      </RadialBarChart>
+    </Chart>
+  );
+};
+
+export const ShapeRadialChartExample = (props: Partial<RadialBarChartProps>) => {
+  const chartData = [{ browser: "safari", visitors: 1260, fill: "var(--color-safari)" }];
+  const chartConfig = {
+    visitors: {
+      label: "Visitors",
+    },
+    safari: {
+      label: "Safari",
+      color: "hsl(var(--chart-2))",
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <Chart config={chartConfig} className="mx-auto aspect-square h-[250px]">
+      <RadialBarChart {...props.radialBarChart}>
+        <PolarGrid
+          gridType="circle"
+          radialLines={false}
+          stroke="none"
+          className="first:fill-base-200 last:fill-base-100"
+          polarRadius={[86, 74]}
+        />
+        <RadialBar dataKey="visitors" {...props.radialBar} />
+        <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
+          <Label
+            content={({ viewBox }) => {
+              if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                return (
+                  <text x={viewBox.cx} y={viewBox.cy} textAnchor="middle" dominantBaseline="middle">
+                    <tspan
+                      x={viewBox.cx}
+                      y={viewBox.cy}
+                      className="fill-base-content text-4xl font-bold"
+                    >
+                      {chartData[0].visitors.toLocaleString()}
+                    </tspan>
+                    <tspan x={viewBox.cx} y={(viewBox.cy || 0) + 24} className="fill-base-content">
+                      Visitors
+                    </tspan>
+                  </text>
+                );
+              }
+            }}
+          />
+        </PolarRadiusAxis>
+      </RadialBarChart>
+    </Chart>
+  );
+};
+
+export const StackedRadialChartExample = (props: Partial<RadialBarChartProps>) => {
+  const chartData = [{ month: "january", desktop: 1260, mobile: 570 }];
+  const chartConfig = {
+    desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+    },
+    mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+    },
+  } satisfies ChartConfig;
+
+  const totalVisitors = chartData[0].desktop + chartData[0].mobile;
+
+  return (
+    <Chart config={chartConfig} className="mx-auto aspect-square h-[250px]">
+      <RadialBarChart {...props.radialBarChart}>
+        <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+        <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
+          <Label
+            content={({ viewBox }) => {
+              if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                return (
+                  <text x={viewBox.cx} y={viewBox.cy} textAnchor="middle">
+                    <tspan
+                      x={viewBox.cx}
+                      y={(viewBox.cy || 0) - 16}
+                      className="fill-foreground text-2xl font-bold"
+                    >
+                      {totalVisitors.toLocaleString()}
+                    </tspan>
+                    <tspan x={viewBox.cx} y={(viewBox.cy || 0) + 4} className="fill-base-content">
+                      Visitors
+                    </tspan>
+                  </text>
+                );
+              }
+            }}
+          />
+        </PolarRadiusAxis>
+        <RadialBar dataKey="desktop" fill="var(--color-desktop)" {...props.radialBar} />
+        <RadialBar dataKey="mobile" fill="var(--color-mobile)" {...props.radialBar} />
+      </RadialBarChart>
+    </Chart>
+  );
+};

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

@@ -0,0 +1,68 @@
+import { Bar, BarChart, XAxis } from "recharts";
+import type { ChartConfig } from "../../types";
+import { Chart } from "../../Chart";
+import { ChartTooltip, ChartTooltipContent } from "../../components";
+import { type ChartTooltipContentProps } from "../../types";
+
+const chartData = [
+  { date: "2024-07-15", running: 450, swimming: 300 },
+  { date: "2024-07-16", running: 380, swimming: 420 },
+  { date: "2024-07-17", running: 520, swimming: 120 },
+  { date: "2024-07-18", running: 140, swimming: 550 },
+  { date: "2024-07-19", running: 600, swimming: 350 },
+  { date: "2024-07-20", running: 480, swimming: 400 },
+];
+export const tooltipChartConfig = {
+  activities: {
+    label: "Activities",
+  },
+  running: {
+    label: "Running",
+    color: "hsl(var(--chart-3))",
+  },
+  swimming: {
+    label: "Swimming",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig;
+
+export const BarChartExample = (props: ChartTooltipContentProps) => {
+  return (
+    <Chart config={tooltipChartConfig} className="h-[250px] w-full">
+      <BarChart accessibilityLayer data={chartData}>
+        <XAxis
+          dataKey="date"
+          tickLine={false}
+          tickMargin={10}
+          axisLine={false}
+          tickFormatter={(value: string) => {
+            return new Date(value).toLocaleDateString("en-US", {
+              weekday: "short",
+            });
+          }}
+        />
+        <Bar
+          isAnimationActive={false}
+          dataKey="running"
+          stackId="a"
+          fill="var(--color-running)"
+          radius={[0, 0, 4, 4]}
+        />
+        <Bar
+          isAnimationActive={false}
+          dataKey="swimming"
+          stackId="a"
+          fill="var(--color-swimming)"
+          radius={[4, 4, 0, 0]}
+        />
+
+        <ChartTooltip
+          content={<ChartTooltipContent {...props} />}
+          isAnimationActive={false}
+          cursor={false}
+          defaultIndex={1}
+        />
+      </BarChart>
+    </Chart>
+  );
+};

package/src/components/Chart/stories/helpers/index.tsx

@@ -0,0 +1,75 @@
+import type { ArgTypes, StoryContext, StoryFn } from "@storybook/react";
+import type { ComponentProps, ElementType } from "react";
+
+export const categorizeArgs = (args: ArgTypes, category: string) => {
+  return Object.entries(args).reduce((acc, [name, arg]) => {
+    const categoryName = `${category} ${name}`;
+    acc[categoryName] = {
+      ...arg,
+      name,
+      table: {
+        ...arg.table,
+        category,
+      },
+    };
+    return acc;
+  }, {} as ArgTypes);
+};
+
+const getCategorizedArgs = <T,>(args: ArgTypes<T>) => {
+  return Object.entries(args).reduce((acc, [categoryName, value]) => {
+    const [category, name] = categoryName.split(" ");
+    acc[category] = {
+      ...acc[category],
+      [name]: value,
+    };
+    return acc;
+  }, {} as ArgTypes);
+};
+
+export const withArgs = <T extends object>(Component: StoryFn, context: StoryContext<T>) => {
+  context.args = getCategorizedArgs(context.args) as T;
+
+  return <Component />;
+};
+
+const convertStringToJSON = (str: string) => {
+  let newStr = str.replace(/'/g, '"');
+  newStr = newStr.replace(/(\w+)\s*:/g, '"$1":');
+
+  try {
+    return JSON.parse(newStr) as Record<string, unknown>;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  } catch (e) {
+    return str;
+  }
+};
+
+// A helper function to generate Args for a story based on ArgsTypes objects
+export const getArgsFromArgTypes = <T extends ArgTypes>(argsTypes: T) => {
+  const args = (Object.keys(argsTypes) as (keyof T)[]).reduce(
+    (acc, key) => {
+      const defaultValue =
+        (argsTypes[key].defaultValue as string) ?? argsTypes[key].table?.defaultValue?.summary;
+      if (defaultValue) {
+        try {
+          acc[key] = convertStringToJSON(String(defaultValue));
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        } catch (_e) {
+          acc[key] = defaultValue;
+        }
+      }
+      return acc;
+    },
+    {} as Record<keyof T, unknown>
+  );
+
+  return args;
+};
+
+export const renderer = <T extends ElementType>(Component: T) => {
+  const component = <G,>(props: G) => <Component {...(props as ComponentProps<T>)} />;
+  component.displayName =
+    (Component as React.FC<unknown>).displayName || (Component as React.FC<unknown>).name;
+  return component;
+};

package/src/components/Chart/types.ts

@@ -0,0 +1,39 @@
+import type { ComponentProps, ComponentType, ReactNode } from "react";
+import { LegendProps, ResponsiveContainer, Tooltip } from "recharts";
+import { type Theme } from "../../utilities";
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: ReactNode;
+    icon?: ComponentType;
+  } & ({ color?: string; theme?: never } | { color?: never; theme: Record<Theme, string> });
+};
+
+export type ChartContextProps = {
+  config: ChartConfig;
+};
+
+export type ChartProps = ComponentProps<"div"> & {
+  config: ChartConfig;
+  children: ComponentProps<typeof ResponsiveContainer>["children"];
+};
+
+export type ChartStyleProps = {
+  id: string;
+  config: ChartConfig;
+};
+
+export type ChartTooltipContentProps = ComponentProps<typeof Tooltip> &
+  ComponentProps<"div"> & {
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
+  };
+
+export type ChartLegendContentProps = ComponentProps<"div"> &
+  Pick<LegendProps, "payload" | "verticalAlign"> & {
+    hideIcon?: boolean;
+    nameKey?: string;
+  };

package/src/components/DragAndDrop/Draggable/Draggable.example.tsx

@@ -0,0 +1,147 @@
+import type { DropAnimation, Modifiers, PointerActivationConstraint } from "@dnd-kit/core";
+import type { Coordinates } from "@dnd-kit/utilities";
+import type { CSSProperties } from "react";
+import { useMemo, useState } from "react";
+import {
+  DndContext,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import { createSnapModifier } from "@dnd-kit/modifiers";
+import type { DraggableAxis } from "./types";
+import { Draggable } from "./Draggable";
+import { type DraggableHandleElement } from "./types";
+
+type DraggableExampleProps = Partial<{
+  activationConstraint: PointerActivationConstraint;
+  axis: DraggableAxis;
+  handle: DraggableHandleElement;
+  modifiers: Modifiers;
+  buttonStyle: CSSProperties;
+  label: string;
+}>;
+
+export const DraggableExample = ({
+  activationConstraint,
+  axis,
+  handle,
+  modifiers,
+  label = "Go ahead, drag me.",
+}: DraggableExampleProps) => {
+  const [{ x, y }, setCoordinates] = useState<Coordinates>({ x: 0, y: 0 });
+  const mouseSensor = useSensor(MouseSensor, {
+    activationConstraint,
+  });
+  const touchSensor = useSensor(TouchSensor, {
+    activationConstraint,
+  });
+  const keyboardSensor = useSensor(KeyboardSensor, {});
+  const sensors = useSensors(mouseSensor, touchSensor, keyboardSensor);
+
+  return (
+    <DndContext
+      sensors={sensors}
+      onDragEnd={({ delta }) => {
+        setCoordinates(({ x, y }) => {
+          return {
+            x: x + delta.x,
+            y: y + delta.y,
+          };
+        });
+      }}
+      modifiers={modifiers}
+    >
+      <Draggable
+        id="my-draggable"
+        axis={axis}
+        handle={handle}
+        style={{ top: y, left: x }}
+        className="w-fit border border-base-content rounded-md p-2 flex items-center gap-2"
+      >
+        {label}
+      </Draggable>
+    </DndContext>
+  );
+};
+
+export const DraggableSnapToGridExample = () => {
+  const [gridSize] = useState(30);
+  const buttonStyle = {
+    marginLeft: gridSize - 20 + 1,
+    marginTop: gridSize - 20 + 1,
+    width: gridSize * 8 - 1,
+    height: gridSize * 2 - 1,
+  };
+  const snapToGrid = useMemo(() => createSnapModifier(gridSize), [gridSize]);
+
+  return (
+    <>
+      <DraggableExample
+        label={`Snapping to ${gridSize}px increments`}
+        modifiers={[snapToGrid]}
+        buttonStyle={buttonStyle}
+        key={gridSize}
+      />
+      <div
+        className="fixed top-0 left-0 w-full h-full -z-10 pointer-events-none"
+        style={
+          {
+            "--grid-size": `${gridSize}px`,
+            backgroundSize: "var(--grid-size) var(--grid-size)",
+            backgroundImage: `repeating-linear-gradient(
+              0deg,
+              transparent,
+              transparent calc(var(--grid-size) - 1px),
+              #9999991a calc(var(--grid-size) - 1px),
+              #9999991a var(--grid-size)
+            ),
+            repeating-linear-gradient(
+              -90deg,
+              transparent,
+              transparent calc(var(--grid-size) - 1px),
+              #9999991a calc(var(--grid-size) - 1px),
+              #9999991a var(--grid-size)
+            )`,
+          } as React.CSSProperties
+        }
+      />
+    </>
+  );
+};
+
+type DraggableOverlayExampleProps = Partial<{
+  activationConstraint: PointerActivationConstraint;
+  axis: DraggableAxis;
+  handle: DraggableHandleElement;
+  modifiers: Modifiers;
+  label: string;
+  dragOverlayModifiers: Modifiers;
+  dropAnimation: DropAnimation | null;
+}>;
+
+export const DraggableOverlayExample = ({
+  axis,
+  dropAnimation,
+  handle,
+  label = "Drag me to see the <Draggable.Overlay>",
+  modifiers,
+}: DraggableOverlayExampleProps) => {
+  return (
+    <DndContext modifiers={modifiers}>
+      <div>
+        <Draggable
+          id="my-draggable"
+          axis={axis}
+          handle={handle}
+          className="w-fit border border-base-content rounded-md p-2 flex items-center gap-2 data-[draggable-active]:opacity-0"
+        >
+          {label}
+        </Draggable>
+      </div>
+      <Draggable.Overlay axis={axis} dropAnimation={dropAnimation} />
+    </DndContext>
+  );
+};