feat: improve chart component with new config options

Added new configuration options to the chart component for better customization. This includes theme and color settings, and improved CSS generation.

Author: thevuong

apps/docs/app/examples/charts/_components/chart-area-axes.tsx

@@ -7,8 +7,6 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from '@codefast/ui';
-import {
   type ChartConfig,
   ChartContainer,
   ChartTooltip,
@@ -29,7 +27,7 @@ const chartData = [
   { month: 'June', desktop: 214, mobile: 140 },
 ];
 
-const chartConfig = {
+const chartConfig: ChartConfig = {
   desktop: {
     label: 'Desktop',
     color: 'hsl(var(--chart-1))',
@@ -38,7 +36,7 @@ const chartConfig = {
     label: 'Mobile',
     color: 'hsl(var(--chart-2))',
   },
-} satisfies ChartConfig;
+};
 
 export function ChartAreaAxes(): JSX.Element {
   return (
@@ -63,7 +61,7 @@ export function ChartAreaAxes(): JSX.Element {
             <XAxis
               axisLine={false}
               dataKey="month"
-              tickFormatter={(value) => value.slice(0, 3)}
+              tickFormatter={(value: string) => value.slice(0, 3)}
               tickLine={false}
               tickMargin={8}
             />

packages/ui/src/components/chart.tsx

@@ -27,7 +27,7 @@ const THEMES = {
 
 type Theme = keyof typeof THEMES;
 
-export type ChartConfig = {
+type ChartConfig = {
   [k in string]: {
     icon?: ComponentType;
     label?: ReactNode;
@@ -488,7 +488,8 @@ function getConfigLabelKey(
  *
  * @param theme - The theme to be used (for example, 'light', 'dark').
  * @param id - The unique identifier of the chart.
- * @param configEntries - A list of configuration entries, each containing a key and a chart configuration.
+ * @param configEntries - A list of configuration entries, each containing a
+ *   key and a chart configuration.
  * @returns The generated CSS as a string.
  */
 function generateThemeCSS(
@@ -514,10 +515,12 @@ function generateThemeCSS(
 }
 
 /**
- * Generates CSS styles for a chart based on the provided configuration and themes.
+ * Generates CSS styles for a chart based on the provided configuration and
+ * themes.
  *
  * @param id - The unique identifier for the chart element.
- * @param config - Configuration object for the chart. This includes theme and color settings.
+ * @param config - Configuration object for the chart. This includes theme and
+ *   color settings.
  * @returns A string containing the generated CSS rules.
  */
 function generateCSS(id: string, config: ChartConfig): string {
@@ -553,4 +556,5 @@ export {
   ChartTooltipContent,
   type ChartTooltipContentProps,
   type ChartTooltipProps,
+  type ChartConfig,
 };

packages/ui/src/components/data-table.tsx

@@ -12,6 +12,7 @@ import {
   MixerHorizontalIcon,
 } from '@radix-ui/react-icons';
 import { type HTMLAttributes, type JSX } from 'react';
+import type * as ReactTable from '@tanstack/react-table';
 import { Button } from '@/components/button';
 import {
   DropdownMenu,
@@ -31,7 +32,6 @@ import {
 } from '@/components/select';
 import { cn } from '@/lib/utils';
 import { buttonVariants } from '@/styles/button-variants';
-import type * as ReactTable from '@tanstack/react-table';
 
 /* -----------------------------------------------------------------------------
  * Component: DataTableViewOptions

packages/ui/src/components/form.tsx

@@ -21,9 +21,9 @@ import {
   type GlobalError,
   useFormState,
 } from 'react-hook-form';
+import type * as LabelPrimitive from '@radix-ui/react-label';
 import { Label } from '@/components/label';
 import { cn } from '@/lib/utils';
-import type * as LabelPrimitive from '@radix-ui/react-label';
 
 /* -----------------------------------------------------------------------------
  * Component: Form