xertica-ui 2.2.1 → 2.4.0

package/components/ui/assistant-chart/AssistantChart.tsx

@@ -1,64 +1,64 @@
-import React from 'react';
-import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts';
-import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '../chart';
-import { cn } from '../../shared/utils';
-
-export interface BarConfig {
-  /** Field name in the data objects */
-  dataKey: string;
-  /** Fill color. Defaults to `var(--color-{dataKey})` from ChartConfig. */
-  fill?: string;
-  /** Corner radius of each bar. @default 4 */
-  radius?: number;
-}
-
-export interface AssistantChartProps {
-  data: any[];
-  config: ChartConfig;
-  /** Field used for X axis category labels. @default "month" */
-  categoryKey?: string;
-  /**
-   * Bar definitions. Defaults to one bar per key in `config`.
-   * Each bar's fill defaults to `var(--color-{dataKey})`.
-   */
-  bars?: BarConfig[];
-  /** Custom formatter for X axis tick labels. Defaults to first 3 chars of the value. */
-  xAxisFormatter?: (value: string) => string;
-  className?: string;
-}
-
-export function AssistantChart({
-  data,
-  config,
-  categoryKey = 'month',
-  bars,
-  xAxisFormatter,
-  className,
-}: AssistantChartProps) {
-  const resolvedBars: BarConfig[] = bars ?? Object.keys(config).map(key => ({ dataKey: key }));
-  const formatTick = xAxisFormatter ?? ((value: string) => value.slice(0, 3));
-
-  return (
-    <ChartContainer config={config} className={cn('min-h-[200px] w-full', className)}>
-      <BarChart accessibilityLayer data={data}>
-        <CartesianGrid vertical={false} />
-        <XAxis
-          dataKey={categoryKey}
-          tickLine={false}
-          tickMargin={10}
-          axisLine={false}
-          tickFormatter={formatTick}
-        />
-        <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="dashed" />} />
-        {resolvedBars.map(bar => (
-          <Bar
-            key={bar.dataKey}
-            dataKey={bar.dataKey}
-            fill={bar.fill ?? `var(--color-${bar.dataKey})`}
-            radius={bar.radius ?? 4}
-          />
-        ))}
-      </BarChart>
-    </ChartContainer>
-  );
-}
+import React from 'react';
+import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts';
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '../chart';
+import { cn } from '../../shared/utils';
+
+export interface BarConfig {
+  /** Field name in the data objects */
+  dataKey: string;
+  /** Fill color. Defaults to `var(--color-{dataKey})` from ChartConfig. */
+  fill?: string;
+  /** Corner radius of each bar. @default 4 */
+  radius?: number;
+}
+
+export interface AssistantChartProps {
+  data: any[];
+  config: ChartConfig;
+  /** Field used for X axis category labels. @default "month" */
+  categoryKey?: string;
+  /**
+   * Bar definitions. Defaults to one bar per key in `config`.
+   * Each bar's fill defaults to `var(--color-{dataKey})`.
+   */
+  bars?: BarConfig[];
+  /** Custom formatter for X axis tick labels. Defaults to first 3 chars of the value. */
+  xAxisFormatter?: (value: string) => string;
+  className?: string;
+}
+
+export function AssistantChart({
+  data,
+  config,
+  categoryKey = 'month',
+  bars,
+  xAxisFormatter,
+  className,
+}: AssistantChartProps) {
+  const resolvedBars: BarConfig[] = bars ?? Object.keys(config).map(key => ({ dataKey: key }));
+  const formatTick = xAxisFormatter ?? ((value: string) => value.slice(0, 3));
+
+  return (
+    <ChartContainer config={config} className={cn('min-h-[200px] w-full', className)}>
+      <BarChart accessibilityLayer data={data}>
+        <CartesianGrid vertical={false} />
+        <XAxis
+          dataKey={categoryKey}
+          tickLine={false}
+          tickMargin={10}
+          axisLine={false}
+          tickFormatter={formatTick}
+        />
+        <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="dashed" />} />
+        {resolvedBars.map(bar => (
+          <Bar
+            key={bar.dataKey}
+            dataKey={bar.dataKey}
+            fill={bar.fill ?? `var(--color-${bar.dataKey})`}
+            radius={bar.radius ?? 4}
+          />
+        ))}
+      </BarChart>
+    </ChartContainer>
+  );
+}

package/components/ui/assistant-chart/assistant-chart.stories.tsx

@@ -1,44 +1,44 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { AssistantChart } from './AssistantChart';
-import React from 'react';
-
-const meta: Meta<typeof AssistantChart> = {
-  title: 'UI/AssistantChart',
-  component: AssistantChart,
-  render: args => <AssistantChart {...args} />,
-};
-
-export default meta;
-type Story = StoryObj<typeof AssistantChart>;
-
-const chartData = [
-  { month: 'January', desktop: 186, mobile: 80 },
-  { month: 'February', desktop: 305, mobile: 200 },
-  { month: 'March', desktop: 237, mobile: 120 },
-  { month: 'April', desktop: 73, mobile: 190 },
-  { month: 'May', desktop: 209, mobile: 130 },
-  { month: 'June', desktop: 214, mobile: 140 },
-];
-
-const chartConfig = {
-  desktop: {
-    label: 'Desktop',
-    color: 'hsl(var(--primary))',
-  },
-  mobile: {
-    label: 'Mobile',
-    color: 'hsl(var(--destructive))',
-  },
-};
-
-export const Default: Story = {
-  args: {
-    data: chartData,
-    config: chartConfig,
-  },
-  render: args => (
-    <div className="w-[500px]">
-      <AssistantChart {...args} />
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { AssistantChart } from './AssistantChart';
+import React from 'react';
+
+const meta: Meta<typeof AssistantChart> = {
+  title: 'UI/AssistantChart',
+  component: AssistantChart,
+  render: args => <AssistantChart {...args} />,
+};
+
+export default meta;
+type Story = StoryObj<typeof AssistantChart>;
+
+const chartData = [
+  { month: 'January', desktop: 186, mobile: 80 },
+  { month: 'February', desktop: 305, mobile: 200 },
+  { month: 'March', desktop: 237, mobile: 120 },
+  { month: 'April', desktop: 73, mobile: 190 },
+  { month: 'May', desktop: 209, mobile: 130 },
+  { month: 'June', desktop: 214, mobile: 140 },
+];
+
+const chartConfig = {
+  desktop: {
+    label: 'Desktop',
+    color: 'hsl(var(--primary))',
+  },
+  mobile: {
+    label: 'Mobile',
+    color: 'hsl(var(--destructive))',
+  },
+};
+
+export const Default: Story = {
+  args: {
+    data: chartData,
+    config: chartConfig,
+  },
+  render: args => (
+    <div className="w-[500px]">
+      <AssistantChart {...args} />
+    </div>
+  ),
+};

package/components/ui/assistant-chart/assistant-chart.test.tsx

@@ -1,46 +1,46 @@
-import { render, screen } from '@testing-library/react';
-import { describe, it, expect, vi } from 'vitest';
-import { AssistantChart } from './AssistantChart';
-import React from 'react';
-
-// Mock recharts
-vi.mock('recharts', async () => {
-  const actual = await vi.importActual('recharts');
-  return {
-    ...actual,
-    ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
-      <div data-testid="responsive-container">{children}</div>
-    ),
-  };
-});
-
-// Mock the chart components
-vi.mock('../chart', () => ({
-  ChartContainer: ({ children, className }: any) => (
-    <div className={className} data-testid="chart-container">
-      {children}
-    </div>
-  ),
-  ChartTooltip: () => <div />,
-  ChartTooltipContent: () => <div />,
-  ChartLegend: () => <div />,
-  ChartLegendContent: () => <div />,
-  ChartStyle: () => <div />,
-}));
-
-describe('AssistantChart', () => {
-  const data = [
-    { month: 'January', desktop: 186, mobile: 80 },
-    { month: 'February', desktop: 305, mobile: 200 },
-  ];
-
-  const config = {
-    desktop: { label: 'Desktop', color: 'hsl(var(--chart-1))' },
-    mobile: { label: 'Mobile', color: 'hsl(var(--chart-2))' },
-  };
-
-  it('renders correctly', () => {
-    render(<AssistantChart data={data} config={config} />);
-    expect(screen.getByTestId('chart-container')).toBeInTheDocument();
-  });
-});
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { AssistantChart } from './AssistantChart';
+import React from 'react';
+
+// Mock recharts
+vi.mock('recharts', async () => {
+  const actual = await vi.importActual('recharts');
+  return {
+    ...actual,
+    ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
+      <div data-testid="responsive-container">{children}</div>
+    ),
+  };
+});
+
+// Mock the chart components
+vi.mock('../chart', () => ({
+  ChartContainer: ({ children, className }: any) => (
+    <div className={className} data-testid="chart-container">
+      {children}
+    </div>
+  ),
+  ChartTooltip: () => <div />,
+  ChartTooltipContent: () => <div />,
+  ChartLegend: () => <div />,
+  ChartLegendContent: () => <div />,
+  ChartStyle: () => <div />,
+}));
+
+describe('AssistantChart', () => {
+  const data = [
+    { month: 'January', desktop: 186, mobile: 80 },
+    { month: 'February', desktop: 305, mobile: 200 },
+  ];
+
+  const config = {
+    desktop: { label: 'Desktop', color: 'hsl(var(--chart-1))' },
+    mobile: { label: 'Mobile', color: 'hsl(var(--chart-2))' },
+  };
+
+  it('renders correctly', () => {
+    render(<AssistantChart data={data} config={config} />);
+    expect(screen.getByTestId('chart-container')).toBeInTheDocument();
+  });
+});

package/components/ui/assistant-chart/index.ts

@@ -1 +1 @@
-export * from './AssistantChart';
+export * from './AssistantChart';

package/components/ui/avatar/avatar.stories.tsx

@@ -1,86 +1,86 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Avatar, AvatarImage, AvatarFallback } from './avatar';
-import { User } from 'lucide-react';
-import React from 'react';
-
-type AvatarStoryProps = React.ComponentProps<typeof Avatar> & {
-  src?: string;
-  fallback?: string;
-};
-
-const meta: Meta<AvatarStoryProps> = {
-  title: 'UI/Avatar',
-  component: Avatar,
-  render: args => <Avatar {...args} />,
-  argTypes: {
-    size: {
-      control: 'select',
-      options: ['xs', 'sm', 'md', 'lg', 'xl'],
-      description: 'Size of the avatar.',
-      defaultValue: 'md',
-    },
-    src: {
-      control: 'text',
-      description: 'The source URL of the avatar image.',
-      defaultValue: 'https://github.com/shadcn.png',
-    },
-    fallback: {
-      control: 'text',
-      description: 'The fallback text to display if the image fails to load.',
-      defaultValue: 'CN',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<AvatarStoryProps>;
-
-export const Default: Story = {
-  args: {
-    size: 'md',
-    src: 'https://github.com/shadcn.png',
-    fallback: 'CN',
-  },
-  render: ({ src, fallback, ...args }) => (
-    <Avatar {...args}>
-      <AvatarImage src={src} alt="Avatar" />
-      <AvatarFallback>{fallback}</AvatarFallback>
-    </Avatar>
-  ),
-};
-
-export const Small: Story = {
-  render: () => (
-    <Avatar size="sm">
-      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-      <AvatarFallback>CN</AvatarFallback>
-    </Avatar>
-  ),
-};
-
-export const Large: Story = {
-  render: () => (
-    <Avatar size="lg">
-      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-      <AvatarFallback>CN</AvatarFallback>
-    </Avatar>
-  ),
-};
-
-export const FallbackInitials: Story = {
-  render: () => (
-    <Avatar>
-      <AvatarFallback>JD</AvatarFallback>
-    </Avatar>
-  ),
-};
-
-export const FallbackIcon: Story = {
-  render: () => (
-    <Avatar>
-      <AvatarFallback className="bg-primary/10 text-primary">
-        <User className="size-5" />
-      </AvatarFallback>
-    </Avatar>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { Avatar, AvatarImage, AvatarFallback } from './avatar';
+import { User } from 'lucide-react';
+import React from 'react';
+
+type AvatarStoryProps = React.ComponentProps<typeof Avatar> & {
+  src?: string;
+  fallback?: string;
+};
+
+const meta: Meta<AvatarStoryProps> = {
+  title: 'UI/Avatar',
+  component: Avatar,
+  render: args => <Avatar {...args} />,
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+      description: 'Size of the avatar.',
+      defaultValue: 'md',
+    },
+    src: {
+      control: 'text',
+      description: 'The source URL of the avatar image.',
+      defaultValue: 'https://github.com/shadcn.png',
+    },
+    fallback: {
+      control: 'text',
+      description: 'The fallback text to display if the image fails to load.',
+      defaultValue: 'CN',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<AvatarStoryProps>;
+
+export const Default: Story = {
+  args: {
+    size: 'md',
+    src: 'https://github.com/shadcn.png',
+    fallback: 'CN',
+  },
+  render: ({ src, fallback, ...args }) => (
+    <Avatar {...args}>
+      <AvatarImage src={src} alt="Avatar" />
+      <AvatarFallback>{fallback}</AvatarFallback>
+    </Avatar>
+  ),
+};
+
+export const Small: Story = {
+  render: () => (
+    <Avatar size="sm">
+      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+      <AvatarFallback>CN</AvatarFallback>
+    </Avatar>
+  ),
+};
+
+export const Large: Story = {
+  render: () => (
+    <Avatar size="lg">
+      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+      <AvatarFallback>CN</AvatarFallback>
+    </Avatar>
+  ),
+};
+
+export const FallbackInitials: Story = {
+  render: () => (
+    <Avatar>
+      <AvatarFallback>JD</AvatarFallback>
+    </Avatar>
+  ),
+};
+
+export const FallbackIcon: Story = {
+  render: () => (
+    <Avatar>
+      <AvatarFallback className="bg-primary/10 text-primary">
+        <User className="size-5" />
+      </AvatarFallback>
+    </Avatar>
+  ),
+};

package/components/ui/avatar/avatar.test.tsx

@@ -1,55 +1,55 @@
-import { render, screen } from '@testing-library/react';
-import { describe, it, expect } from 'vitest';
-import { Avatar, AvatarImage, AvatarFallback } from './avatar';
-import React from 'react';
-
-describe('Avatar', () => {
-  it('renders correctly', () => {
-    render(
-      <Avatar>
-        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-        <AvatarFallback>CN</AvatarFallback>
-      </Avatar>
-    );
-
-    // In jsdom, image won't load, so fallback should be visible
-    expect(screen.getByText('CN')).toBeInTheDocument();
-  });
-
-  it('renders fallback when image is not provided', () => {
-    render(
-      <Avatar>
-        <AvatarFallback>JD</AvatarFallback>
-      </Avatar>
-    );
-
-    expect(screen.getByText('JD')).toBeInTheDocument();
-  });
-
-  it('renders with different sizes', () => {
-    const { rerender, container } = render(
-      <Avatar size="xs">
-        <AvatarFallback>XS</AvatarFallback>
-      </Avatar>
-    );
-    expect(container.firstChild).toHaveClass('size-6');
-
-    rerender(
-      <Avatar size="xl">
-        <AvatarFallback>XL</AvatarFallback>
-      </Avatar>
-    );
-    expect(container.firstChild).toHaveClass('size-16');
-  });
-
-  it('has correct data-slot attributes', () => {
-    const { container } = render(
-      <Avatar>
-        <AvatarFallback>FB</AvatarFallback>
-      </Avatar>
-    );
-
-    expect(container.querySelector('[data-slot="avatar"]')).toBeInTheDocument();
-    expect(container.querySelector('[data-slot="avatar-fallback"]')).toBeInTheDocument();
-  });
-});
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { Avatar, AvatarImage, AvatarFallback } from './avatar';
+import React from 'react';
+
+describe('Avatar', () => {
+  it('renders correctly', () => {
+    render(
+      <Avatar>
+        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+        <AvatarFallback>CN</AvatarFallback>
+      </Avatar>
+    );
+
+    // In jsdom, image won't load, so fallback should be visible
+    expect(screen.getByText('CN')).toBeInTheDocument();
+  });
+
+  it('renders fallback when image is not provided', () => {
+    render(
+      <Avatar>
+        <AvatarFallback>JD</AvatarFallback>
+      </Avatar>
+    );
+
+    expect(screen.getByText('JD')).toBeInTheDocument();
+  });
+
+  it('renders with different sizes', () => {
+    const { rerender, container } = render(
+      <Avatar size="xs">
+        <AvatarFallback>XS</AvatarFallback>
+      </Avatar>
+    );
+    expect(container.firstChild).toHaveClass('size-6');
+
+    rerender(
+      <Avatar size="xl">
+        <AvatarFallback>XL</AvatarFallback>
+      </Avatar>
+    );
+    expect(container.firstChild).toHaveClass('size-16');
+  });
+
+  it('has correct data-slot attributes', () => {
+    const { container } = render(
+      <Avatar>
+        <AvatarFallback>FB</AvatarFallback>
+      </Avatar>
+    );
+
+    expect(container.querySelector('[data-slot="avatar"]')).toBeInTheDocument();
+    expect(container.querySelector('[data-slot="avatar-fallback"]')).toBeInTheDocument();
+  });
+});