@mbao01/common 0.0.44 → 0.0.46

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.0.44",
+  "version": "0.0.46",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -53,7 +53,7 @@
     "dev": "storybook dev -p 6006",
     "build": "tsc && vite build",
     "build-storybook": "storybook build -o ../../docs/storybook/common",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 30",
     "prettier": "prettier --check \"**/*.{ts,tsx}\"",
     "prettier:write": "prettier --write \"**/*.{ts,tsx}\"",
     "preview": "vite preview",
@@ -68,6 +68,10 @@
     "test:watch": "vitest"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/modifiers": "^7.0.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-alert-dialog": "^1.1.1",
     "@radix-ui/react-avatar": "^1.1.0",
@@ -102,6 +106,7 @@
     "react-dropzone": "^14.2.3",
     "react-international-phone": "^4.3.0",
     "react-otp-input": "^3.1.1",
+    "recharts": "^2.12.7",
     "sonner": "^1.5.0",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
@@ -116,6 +121,7 @@
     "@storybook/addon-interactions": "^8.3.4",
     "@storybook/addon-links": "^8.3.4",
     "@storybook/addon-onboarding": "^8.3.4",
+    "@storybook/addon-storysource": "^8.3.4",
     "@storybook/addon-themes": "^8.3.4",
     "@storybook/addon-viewport": "^8.3.4",
     "@storybook/blocks": "^8.3.4",
@@ -165,5 +171,5 @@
     "react-dom": "^18.2.0",
     "typescript": "^5.2.2"
   },
-  "gitHead": "8e4871acb249c39327ba4a5b8bdb92770d649b4e"
+  "gitHead": "541e3f7084b5e39d30b3ce90140ede22d75e1889"
 }

package/src/components/Chart/Chart.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { forwardRef, useId } from "react";
+import { ResponsiveContainer } from "recharts";
+import { cn } from "../../utilities";
+import { ChartContext } from "./ChartContext";
+import { ChartStyle } from "./components";
+import { getChartClasses } from "./constants";
+import { type ChartProps } from "./types";
+
+export const Chart = forwardRef<HTMLDivElement, ChartProps>(
+  ({ id, className, children, config, ...props }, ref) => {
+    const uniqueId = useId();
+    const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+
+    return (
+      <ChartContext.Provider value={{ config }}>
+        <div ref={ref} data-chart={chartId} className={cn(getChartClasses(), className)} {...props}>
+          <ChartStyle id={chartId} config={config} />
+          <ResponsiveContainer>{children}</ResponsiveContainer>
+        </div>
+      </ChartContext.Provider>
+    );
+  }
+);
+Chart.displayName = "Chart";

package/src/components/Chart/ChartContext.tsx

@@ -0,0 +1,4 @@
+import { createContext } from "react";
+import { type ChartContextProps } from "./types";
+
+export const ChartContext = createContext<ChartContextProps | null>(null);

package/src/components/Chart/components/ChartLegend.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { forwardRef } from "react";
+import { Legend } from "recharts";
+import type { ChartLegendContentProps } from "../types";
+import { cn } from "../../../utilities";
+import {
+  getChartLegendContainerClasses,
+  getChartLegendItemClasses,
+  getChartLegendMarkerClasses,
+} from "../constants";
+import { getPayloadConfigFromPayload } from "../helpers";
+import { useChart } from "../hooks";
+
+export const ChartLegend = Legend;
+ChartLegend.displayName = "ChartLegend";
+
+export const ChartLegendContent = forwardRef<HTMLDivElement, ChartLegendContentProps>(
+  ({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
+    const { config } = useChart();
+
+    if (!payload?.length) {
+      return null;
+    }
+
+    return (
+      <div ref={ref} className={cn(getChartLegendContainerClasses({ verticalAlign }), className)}>
+        {payload.map((item) => {
+          // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+          const key = `${nameKey || item.dataKey || "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+          return (
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            <div key={item.value} className={getChartLegendItemClasses()}>
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  style={{ backgroundColor: item.color }}
+                  className={getChartLegendMarkerClasses()}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+);
+ChartLegendContent.displayName = "ChartLegendContent";

package/src/components/Chart/components/ChartStyle.tsx

@@ -0,0 +1,32 @@
+import { type Theme } from "../../../utilities";
+import { THEMES } from "../constants";
+import { type ChartStyleProps } from "../types";
+
+export const ChartStyle = ({ id, config }: ChartStyleProps) => {
+  const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
+
+  if (!colorConfig.length) {
+    return null;
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color = itemConfig.theme?.[theme as Theme] || itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
+  })
+  .join("\n")}
+}
+`
+          )
+          .join("\n"),
+      }}
+    />
+  );
+};

package/src/components/Chart/components/ChartTooltip.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import { forwardRef, useMemo } from "react";
+import { Tooltip } from "recharts";
+import type { ChartTooltipContentProps } from "../types";
+import { cn } from "../../../utilities";
+import {
+  getChartTooltipContainerClasses,
+  getChartTooltipItemClasses,
+  getChartTooltipItemIndicatorClasses,
+  getChartTooltipItemLabelClasses,
+  getChartTooltipItemValueClasses,
+} from "../constants";
+import { getPayloadConfigFromPayload } from "../helpers";
+import { useChart } from "../hooks";
+
+export const ChartTooltip = Tooltip;
+ChartTooltip.displayName = "ChartTooltip";
+
+export const ChartTooltipContent = forwardRef<HTMLDivElement, ChartTooltipContentProps>(
+  (
+    {
+      active,
+      payload,
+      className,
+      indicator = "dot",
+      hideLabel = false,
+      hideIndicator = false,
+      label,
+      labelFormatter,
+      labelClassName,
+      formatter,
+      color,
+      nameKey,
+      labelKey,
+    },
+    ref
+  ) => {
+    const { config } = useChart();
+
+    const tooltipLabel = useMemo(() => {
+      if (hideLabel || !payload?.length) {
+        return null;
+      }
+
+      const [item] = payload;
+      const key = `${labelKey || item.dataKey || item.name || "value"}`;
+      const itemConfig = getPayloadConfigFromPayload(config, item, key);
+      const value =
+        !labelKey && typeof label === "string" ? config[label]?.label || label : itemConfig?.label;
+
+      if (labelFormatter) {
+        return (
+          <div className={cn("font-medium", labelClassName)}>{labelFormatter(value, payload)}</div>
+        );
+      }
+
+      if (!value) {
+        return null;
+      }
+
+      return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+    }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
+
+    if (!active || !payload?.length) {
+      return null;
+    }
+
+    const nestLabel = payload.length === 1 && indicator !== "dot";
+
+    return (
+      <div ref={ref} className={cn(getChartTooltipContainerClasses(), className)}>
+        {!nestLabel ? tooltipLabel : null}
+        <div className="grid gap-1.5">
+          {payload.map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || "value"}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            const indicatorColor =
+              color ||
+              (item.payload as { fill: string }).fill ||
+              item.color ||
+              (item as { fill: string }).fill;
+
+            return (
+              <div key={item.dataKey} className={getChartTooltipItemClasses({ indicator })}>
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={getChartTooltipItemIndicatorClasses({ indicator, nestLabel })}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div className={getChartTooltipItemLabelClasses({ nestLabel })}>
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span>{itemConfig?.label || item.name}</span>
+                      </div>
+                      {item.value && (
+                        <span className={getChartTooltipItemValueClasses()}>
+                          {item.value.toLocaleString()}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+);
+ChartTooltipContent.displayName = "ChartTooltipContent";

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

@@ -0,0 +1,3 @@
+export { ChartLegend, ChartLegendContent } from "./ChartLegend";
+export { ChartStyle } from "./ChartStyle";
+export { ChartTooltip, ChartTooltipContent } from "./ChartTooltip";

package/src/components/Chart/constants.ts

@@ -0,0 +1,78 @@
+import type { Theme } from "../../utilities";
+import { cva } from "../../libs";
+
+export const THEMES = {
+  light: "",
+  dark: ".dark",
+} satisfies Record<Theme, string>;
+
+export const getChartClasses = cva(
+  "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-base-content [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-base-content/20 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-base-content/20 [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-base-content/20 [&_.recharts-radial-bar-background-sector]:fill-base-200 [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-base-200 [&_.recharts-reference-line_[stroke='#ccc']]:stroke-base-content/20 [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none"
+);
+
+export const getChartLegendContainerClasses = cva("flex items-center justify-center gap-4", {
+  variants: {
+    verticalAlign: {
+      top: "pb-3",
+      bottom: "pt-3",
+      middle: "",
+    },
+  },
+});
+
+export const getChartLegendItemClasses = cva("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3");
+
+export const getChartLegendMarkerClasses = cva("h-2 w-2 shrink-0 rounded-[2px]");
+
+export const getChartTooltipContainerClasses = cva(
+  "grid min-w-[8rem] items-start gap-1.5 rounded-md border border-border/50 bg-base-100 px-2.5 py-1.5 text-xs shadow-xl"
+);
+
+export const getChartTooltipItemClasses = cva(
+  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-base-content",
+  {
+    variants: {
+      indicator: {
+        dot: "items-center",
+        line: "",
+        dashed: "",
+      },
+    },
+  }
+);
+
+export const getChartTooltipItemLabelClasses = cva(
+  "flex flex-1 justify-between leading-none items-center",
+  {
+    variants: {
+      nestLabel: {
+        true: "items-end",
+      },
+    },
+  }
+);
+
+export const getChartTooltipItemValueClasses = cva("font-mono font-medium tabular-nums");
+
+export const getChartTooltipItemIndicatorClasses = cva(
+  "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+  {
+    variants: {
+      indicator: {
+        dot: "h-2.5 w-2.5",
+        line: "w-1",
+        dashed: "w-0 border-[1.5px] border-dashed bg-transparent",
+      },
+      nestLabel: {
+        true: "",
+      },
+    },
+    compoundVariants: [
+      {
+        indicator: "dashed",
+        nestLabel: true,
+        className: "my-0.5",
+      },
+    ],
+  }
+);

package/src/components/Chart/helpers.ts

@@ -0,0 +1,27 @@
+import { type ChartConfig } from "./types";
+
+// Helper to extract item config from a payload.
+export const getPayloadConfigFromPayload = (config: ChartConfig, payload: unknown, key: string) => {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined;
+  }
+
+  const payloadPayload =
+    "payload" in payload && typeof payload.payload === "object" && payload.payload !== null
+      ? payload.payload
+      : undefined;
+
+  let configLabelKey: string = key;
+
+  if (key in payload && typeof payload[key as keyof typeof payload] === "string") {
+    configLabelKey = payload[key as keyof typeof payload] as string;
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string;
+  }
+
+  return configLabelKey in config ? config[configLabelKey] : config[key];
+};

package/src/components/Chart/hooks/index.ts

@@ -0,0 +1 @@
+export { useChart } from "./useChart";

package/src/components/Chart/hooks/useChart/index.ts

@@ -0,0 +1 @@
+export { useChart } from "./useChart";

package/src/components/Chart/hooks/useChart/useChart.ts

@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import { ChartContext } from "../../ChartContext";
+
+export const useChart = () => {
+  const context = useContext(ChartContext);
+
+  if (!context) {
+    throw new Error("useChart must be used within a <Chart />");
+  }
+
+  return context;
+};

package/src/components/Chart/index.ts

@@ -0,0 +1,2 @@
+export { Chart } from "./Chart";
+export * from "./components";

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

@@ -0,0 +1,34 @@
+import { type ArgTypes } from "@storybook/react";
+
+export const activeShapeArgs: ArgTypes = {
+  activeIndex: {
+    description:
+      "The index of the individual shapes of the graph element to be marked as active, and render props.activeShape",
+    table: {
+      category: "General",
+    },
+    control: "number",
+  },
+  shape: {
+    description: "The customized shape to be rendered.",
+    table: {
+      type: {
+        summary: "Function | boolean | ReactElement | object",
+      },
+      defaultValue: undefined,
+      category: "General",
+    },
+    control: "object",
+  },
+  activeShape: {
+    description: "The customized shape to be rendered if activeIndex or activeTooltipIndex match",
+    table: {
+      type: {
+        summary: "Function | boolean | ReactElement | object",
+      },
+      defaultValue: undefined,
+      category: "General",
+    },
+    control: "object",
+  },
+};

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

@@ -0,0 +1,67 @@
+/*
+ * This file both exports the documentation of shared props separately, to be reused in places where only single props
+ * are documented, as well as grouped in case a whole group is needed.
+ */
+
+import { type ArgTypes } from "@storybook/react";
+
+export const animateNewValues: ArgTypes[0] = { table: { category: "Animation" } };
+export const animationBegin: ArgTypes[0] = {
+  description: "Specifies when the animation should begin, the unit of this option is ms.",
+  type: { name: "number" },
+  table: {
+    defaultValue: {
+      summary: "0",
+    },
+    category: "Animation",
+  },
+  control: "number",
+};
+export const animationDuration: ArgTypes[0] = {
+  description: "Specifies the duration of animation, the unit of this option is ms.",
+  table: {
+    type: {
+      summary: "number",
+    },
+    category: "Animation",
+  },
+  control: "number",
+};
+export const animationEasing: ArgTypes[0] = {
+  description: "The type of easing function.",
+  table: {
+    type: {
+      summary: "'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'",
+    },
+    category: "Animation",
+  },
+  control: "select",
+  options: ["ease", "ease-in", "ease-out", "ease-in-out", "linear"],
+};
+
+export const isAnimationActive: ArgTypes[0] = {
+  description:
+    "If set false, animation of component will be disabled. This is `true` in CSR, and `false` in SSR",
+  table: {
+    type: {
+      summary: "boolean",
+    },
+    defaultValue: {
+      detail: "true in CSR, and false in SSR",
+    },
+    category: "Animation",
+  },
+  control: "boolean",
+};
+
+/**
+ * Caveat: If any prop is added here, it would falsely be add to the documentation of the component where this group
+ * is used. If the group is to be extended, then only single props should be imported by each component that does not
+ * use all of them.
+ * */
+export const animationArgs: ArgTypes = {
+  animationBegin,
+  animationEasing,
+  animationDuration,
+  isAnimationActive,
+};

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

@@ -0,0 +1,16 @@
+import { type Args } from "@storybook/react";
+import { lineArgs } from "./lineArgs";
+
+export const areaArgs: Args = {
+  ...lineArgs,
+  fillOpacity: {
+    description: "The opacity of the fill.",
+    table: {
+      type: {
+        summary: "number",
+      },
+      category: "Style",
+    },
+    control: "number",
+  },
+};

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

@@ -0,0 +1,19 @@
+import { type ArgTypes } from "@storybook/react";
+import { cartesianChartArgs } from "./cartesianChartArgs";
+
+export const areaChartArgs: ArgTypes = {
+  ...cartesianChartArgs,
+  baseValue: {
+    description: "The base value of area.",
+    table: {
+      type: {
+        summary: "number | 'dataMin' | 'dataMax' | 'auto'",
+      },
+      defaultValue: {
+        summary: "'auto'",
+      },
+      category: "Area",
+    },
+    control: "text",
+  },
+};