@mbao01/common 0.0.43 → 0.0.45

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/DatetimePicker/DatetimeGrid.tsx

@@ -0,0 +1,59 @@
+import { forwardRef, Fragment } from "react";
+import type { DatetimeGridProps } from "./types";
+import { cn } from "../../utilities";
+import { Input } from "../Form";
+import {
+  getDatetimeGridClasses,
+  getDatetimeInputClasses,
+  getDatetimeSeparatorClasses,
+} from "./constants";
+
+export const DatetimeGrid = forwardRef<HTMLDivElement, DatetimeGridProps>(
+  ({ format, disabled, className, timescape, placeholders, variant, outline, wide, size }, ref) => {
+    return (
+      <div
+        className={cn(
+          getDatetimeGridClasses({ size, wide, outline, variant, disabled }),
+          className
+        )}
+        {...timescape.getRootProps()}
+        ref={ref}
+      >
+        {format?.length
+          ? format.map((group, i) => (
+              <Fragment key={`group-${i}`}>
+                {group?.length
+                  ? group.map((unit, j) => (
+                      <Fragment key={unit}>
+                        <Input
+                          size={size}
+                          disabled={disabled}
+                          className={cn(getDatetimeInputClasses({ size, unit }))}
+                          {...timescape.getInputProps(unit)}
+                          placeholder={placeholders[unit]}
+                        />
+                        {i === 0 && j < group.length - 1 ? (
+                          // date separator
+                          <span className={cn(getDatetimeSeparatorClasses())}>/</span>
+                        ) : (
+                          j < group.length - 2 && (
+                            // time separator
+                            <span className={cn(getDatetimeSeparatorClasses())}>:</span>
+                          )
+                        )}
+                      </Fragment>
+                    ))
+                  : null}
+                {format[1]?.length && !i ? (
+                  // date-time separator - only if both date and time are present
+                  <span className={cn(getDatetimeSeparatorClasses(), "opacity-30 text-xl")}>|</span>
+                ) : null}
+              </Fragment>
+            ))
+          : null}
+      </div>
+    );
+  }
+);
+
+DatetimeGrid.displayName = "DatetimeGrid";

package/src/components/DatetimePicker/DatetimePicker.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { forwardRef, useCallback } from "react";
+import { useTimescape } from "timescape/react";
+import type { DatetimePickerProps } from "./types";
+import { DEFAULTS, INPUT_PLACEHOLDERS } from "./constants";
+import { DatetimeGrid } from "./DatetimeGrid";
+
+export const DatetimePicker = forwardRef<HTMLDivElement, DatetimePickerProps>(
+  (
+    {
+      format = DEFAULTS,
+      placeholders,
+      onChange,
+      className,
+      date,
+      minDate,
+      maxDate,
+      hour12 = true,
+      digits,
+      wrapAround,
+      snapToStep,
+      ...props
+    },
+    ref
+  ) => {
+    const handleDateChange = useCallback(
+      (date: Date | undefined) => {
+        if (onChange) {
+          onChange(date);
+        }
+      },
+      [onChange]
+    );
+    const timescape = useTimescape({
+      date,
+      onChangeDate: handleDateChange,
+      minDate,
+      maxDate,
+      hour12,
+      digits,
+      wrapAround,
+      snapToStep,
+    });
+
+    return (
+      <DatetimeGrid
+        format={format}
+        className={className}
+        timescape={timescape}
+        placeholders={placeholders ?? INPUT_PLACEHOLDERS}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+DatetimePicker.displayName = "DatetimePicker";

package/src/components/DatetimePicker/constants.ts

@@ -0,0 +1,102 @@
+import type { DateFormat, DatetimeFormatDefaults, InputPlaceholders, TimeFormat } from "./types";
+import { cva } from "../../libs";
+
+export const DEFAULTS = [
+  ["days", "months", "years"],
+  ["hours", "minutes", "am/pm"],
+] as DatetimeFormatDefaults;
+
+export const INPUT_PLACEHOLDERS: InputPlaceholders = {
+  months: "MM",
+  days: "DD",
+  years: "YYYY",
+  hours: "HH",
+  minutes: "MM",
+  seconds: "SS",
+  "am/pm": "AM/PM",
+};
+
+export const getDatetimeGridClasses = cva(
+  `flex items-center w-fit p-1 rounded-md transition-all duration-100 gap-1 selection:bg-transparent selection:text-base-content
+   [&:has(input:focus)]:duration-100 [&:has(input:focus)]:outline [&:has(input:focus)]:outline-2 [&:has(input:focus)]:outline-offset-2 [&:has(input:focus)]:outline-base-content/20
+   [&:has(input:focus-within)]:duration-100 [&:has(input:focus-within)]:outline [&:has(input:focus-within)]:outline-2 [&:has(input:focus-within)]:outline-offset-2 [&:has(input:focus-within)]:outline-base-content/20
+  `,
+  {
+    variants: {
+      variant: {
+        default: "border-0",
+        accent: "border border-accent",
+        error: "border border-error",
+        ghost: "border border-ghost",
+        info: "border border-info",
+        primary: "border border-primary",
+        secondary: "border border-secondary",
+        success: "border border-success",
+        warning: "border border-warning",
+      },
+      outline: {
+        true: "border",
+      },
+      disabled: {
+        true: "border-base-300",
+      },
+      wide: {
+        true: "w-full",
+      },
+      size: {
+        xs: "h-6 leading-relaxed px-2 text-xs",
+        sm: "h-8 leading-8 px-3 text-sm",
+        md: "h-12 leading-loose px-4 text-sm",
+        lg: "h-16 leading-loose px-5 text-lg",
+      },
+    },
+    compoundVariants: [
+      {
+        size: undefined,
+        className: "min-h-fit h-10",
+      },
+      {
+        variant: undefined,
+        outline: true,
+        className: "border-neutral-content",
+      },
+      {
+        variant: "default",
+        outline: true,
+        className: "border-base-content",
+      },
+    ],
+  }
+);
+
+export const getDatetimeSeparatorClasses = cva("text-xs text-gray-400");
+
+export const getDatetimeInputClasses = cva(
+  "min-w-8 p-1 inline tabular-nums h-fit border-none outline-none select-none content-box caret-transparent rounded-sm min-w-8 text-center focus:outline-none focus:bg-base-content/20 focus-visible:ring-0 focus-visible:outline-none",
+  {
+    variants: {
+      size: {
+        xs: "max-h-4",
+        sm: "max-h-6",
+        md: "",
+        lg: "min-w-8",
+      },
+      unit: {
+        years: "min-w-12",
+        "am/pm": "bg-base-content/15",
+      } as Record<DateFormat | TimeFormat, string>,
+    },
+    compoundVariants: [
+      {
+        size: "lg",
+        unit: "years",
+        className: "min-w-14",
+      },
+      {
+        size: "lg",
+        unit: "am/pm",
+        className: "min-w-10",
+      },
+    ],
+  }
+);

package/src/components/DatetimePicker/index.ts

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

package/src/components/DatetimePicker/types.ts

@@ -0,0 +1,36 @@
+import type { Options } from "timescape/react";
+import { useTimescape } from "timescape/react";
+import { type VariantProps } from "../../libs";
+import { getDatetimeGridClasses } from "./constants";
+
+export type DateFormat = "days" | "months" | "years";
+
+export type TimeFormat = "hours" | "minutes" | "seconds" | "am/pm";
+
+type TimescapeReturn = ReturnType<typeof useTimescape>;
+type DatetimeArray<T extends DateFormat | TimeFormat> = T[];
+
+export type DatetimeFormatDefaults =
+  | [DatetimeArray<DateFormat>]
+  | [DatetimeArray<TimeFormat>]
+  | [DatetimeArray<DateFormat>, DatetimeArray<TimeFormat>]
+  | [DatetimeArray<TimeFormat>, DatetimeArray<DateFormat>];
+
+export type InputPlaceholders = Record<DateFormat | TimeFormat, string>;
+
+type DatetimeGridVariantProps = VariantProps<typeof getDatetimeGridClasses>;
+export type DatetimeGridProps = {
+  format: DatetimeFormatDefaults;
+  disabled?: boolean;
+  className?: string;
+  timescape: Pick<TimescapeReturn, "getRootProps" | "getInputProps">;
+  placeholders: InputPlaceholders;
+} & DatetimeGridVariantProps;
+
+export type DatetimePickerProps = Omit<Options, "onChangeDate"> & {
+  format?: DatetimeFormatDefaults;
+  disabled?: boolean;
+  placeholders?: InputPlaceholders;
+  onChange?: Options["onChangeDate"];
+  className?: string;
+} & DatetimeGridVariantProps;