chore(Separator): migrate to CSS Modules with visual regression baseline

.changeset/migrate-separator-to-css-modules.md

@@ -0,0 +1,5 @@
+---
+'@clickhouse/click-ui': patch
+---
+
+Migrate Separator from styled-components to css modules with no change in behavior

src/components/Separator/Separator.module.css

@@ -0,0 +1,81 @@
+.separator[data-orientation='horizontal'] {
+  width: 100%;
+  border-top: 0.0625rem solid var(--click-separator-color-stroke-default);
+}
+
+.separator[data-orientation='vertical'] {
+  height: 100%;
+  border-right: 0.0625rem solid var(--click-separator-color-stroke-default);
+}
+
+.separator_variant_horizontal-xs {
+  margin:
+    var(--click-separator-horizontal-space-y-xs)
+    var(--click-separator-horizontal-space-x-all);
+}
+
+.separator_variant_horizontal-sm {
+  margin:
+    var(--click-separator-horizontal-space-y-sm)
+    var(--click-separator-horizontal-space-x-all);
+}
+
+.separator_variant_horizontal-md {
+  margin:
+    var(--click-separator-horizontal-space-y-md)
+    var(--click-separator-horizontal-space-x-all);
+}
+
+.separator_variant_horizontal-lg {
+  margin:
+    var(--click-separator-horizontal-space-y-lg)
+    var(--click-separator-horizontal-space-x-all);
+}
+
+.separator_variant_horizontal-xl {
+  margin:
+    var(--click-separator-horizontal-space-y-xl)
+    var(--click-separator-horizontal-space-x-all);
+}
+
+.separator_variant_horizontal-xxl {
+  margin:
+    var(--click-separator-horizontal-space-y-xxl)
+    var(--click-separator-horizontal-space-x-all);
+}
+
+.separator_variant_vertical-xs {
+  margin:
+    var(--click-separator-vertical-space-y-all)
+    var(--click-separator-vertical-space-x-xs);
+}
+
+.separator_variant_vertical-sm {
+  margin:
+    var(--click-separator-vertical-space-y-all)
+    var(--click-separator-vertical-space-x-sm);
+}
+
+.separator_variant_vertical-md {
+  margin:
+    var(--click-separator-vertical-space-y-all)
+    var(--click-separator-vertical-space-x-md);
+}
+
+.separator_variant_vertical-lg {
+  margin:
+    var(--click-separator-vertical-space-y-all)
+    var(--click-separator-vertical-space-x-lg);
+}
+
+.separator_variant_vertical-xl {
+  margin:
+    var(--click-separator-vertical-space-y-all)
+    var(--click-separator-vertical-space-x-xl);
+}
+
+.separator_variant_vertical-xxl {
+  margin:
+    var(--click-separator-vertical-space-y-all)
+    var(--click-separator-vertical-space-x-xxl);
+}

src/components/Separator/Separator.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
 import { Separator } from '@/components/Separator';
+import type { SeparatorProps } from './Separator.types';
 
 const meta: Meta<typeof Separator> = {
   component: Separator,
@@ -11,9 +12,118 @@ export default meta;
 
 type Story = StoryObj<typeof Separator>;
 
+const HorizontalHarness = ({ size }: { size: SeparatorProps['size'] }) => (
+  <div
+    data-testid="separator-harness"
+    style={{
+      display: 'inline-flex',
+      flexDirection: 'column',
+      alignItems: 'stretch',
+      width: '160px',
+      background: '#888',
+    }}
+  >
+    <div style={{ height: '24px', background: '#222' }} />
+    <Separator
+      size={size}
+      orientation="horizontal"
+    />
+    <div style={{ height: '24px', background: '#222' }} />
+  </div>
+);
+
+const DefaultHarness = ({ size }: { size: SeparatorProps['size'] }) => (
+  <div
+    data-testid="separator-harness"
+    style={{
+      display: 'inline-flex',
+      flexDirection: 'column',
+      alignItems: 'stretch',
+      width: '160px',
+      background: '#888',
+    }}
+  >
+    <div style={{ height: '24px', background: '#222' }} />
+    <Separator size={size} />
+    <div style={{ height: '24px', background: '#222' }} />
+  </div>
+);
+
+const VerticalHarness = ({ size }: { size: SeparatorProps['size'] }) => (
+  <div
+    data-testid="separator-harness"
+    style={{
+      display: 'inline-flex',
+      flexDirection: 'row',
+      alignItems: 'stretch',
+      height: '80px',
+      background: '#888',
+    }}
+  >
+    <div style={{ width: '24px', background: '#222' }} />
+    <Separator
+      size={size}
+      orientation="vertical"
+    />
+    <div style={{ width: '24px', background: '#222' }} />
+  </div>
+);
+
 export const Playground: Story = {
   args: {
     size: 'xs',
     orientation: 'horizontal',
   },
 };
+
+export const HorizontalXs: Story = {
+  render: () => <HorizontalHarness size="xs" />,
+};
+
+export const HorizontalSm: Story = {
+  render: () => <HorizontalHarness size="sm" />,
+};
+
+export const HorizontalMd: Story = {
+  render: () => <HorizontalHarness size="md" />,
+};
+
+export const HorizontalLg: Story = {
+  render: () => <HorizontalHarness size="lg" />,
+};
+
+export const HorizontalXl: Story = {
+  render: () => <HorizontalHarness size="xl" />,
+};
+
+export const HorizontalXxl: Story = {
+  render: () => <HorizontalHarness size="xxl" />,
+};
+
+export const VerticalXs: Story = {
+  render: () => <VerticalHarness size="xs" />,
+};
+
+export const VerticalSm: Story = {
+  render: () => <VerticalHarness size="sm" />,
+};
+
+export const VerticalMd: Story = {
+  render: () => <VerticalHarness size="md" />,
+};
+
+export const VerticalLg: Story = {
+  render: () => <VerticalHarness size="lg" />,
+};
+
+export const VerticalXl: Story = {
+  render: () => <VerticalHarness size="xl" />,
+};
+
+export const VerticalXxl: Story = {
+  render: () => <VerticalHarness size="xxl" />,
+};
+
+export const DefaultOrientation: Story = {
+  render: () => <DefaultHarness size="md" />,
+};

src/components/Separator/Separator.tsx

@@ -1,27 +1,36 @@
-import { styled } from 'styled-components';
 import * as RadixSeparator from '@radix-ui/react-separator';
+import { cn, cva } from '@/lib/cva';
 import { SeparatorProps } from './Separator.types';
-const CUISeparator = styled(RadixSeparator.Root)<SeparatorProps>`
-  ${({ theme, size, orientation }) => `
-    &[data-orientation="horizontal"] {
-      width: 100%;
-      border-top: 0.0625rem solid ${theme.click.separator.color.stroke.default};
-    }
-    &[data-orientation="vertical"] {
-      height: 100%;
-      border-right: 0.0625rem solid ${theme.click.separator.color.stroke.default};
-    }
-    margin: ${
-      orientation === 'horizontal'
-        ? `${theme.click.separator.horizontal.space.y[size]} ${theme.click.separator.horizontal.space.x.all}`
-        : `${theme.click.separator.vertical.space.y.all} ${theme.click.separator.vertical.space.x[size]}`
-    }
-  `}
-`;
+import styles from './Separator.module.css';
 
-export const Separator = ({ orientation = 'horizontal', ...props }: SeparatorProps) => (
-  <CUISeparator
+const separatorVariants = cva(styles.separator, {
+  variants: {
+    variant: {
+      'horizontal-xs': styles['separator_variant_horizontal-xs'],
+      'horizontal-sm': styles['separator_variant_horizontal-sm'],
+      'horizontal-md': styles['separator_variant_horizontal-md'],
+      'horizontal-lg': styles['separator_variant_horizontal-lg'],
+      'horizontal-xl': styles['separator_variant_horizontal-xl'],
+      'horizontal-xxl': styles['separator_variant_horizontal-xxl'],
+      'vertical-xs': styles['separator_variant_vertical-xs'],
+      'vertical-sm': styles['separator_variant_vertical-sm'],
+      'vertical-md': styles['separator_variant_vertical-md'],
+      'vertical-lg': styles['separator_variant_vertical-lg'],
+      'vertical-xl': styles['separator_variant_vertical-xl'],
+      'vertical-xxl': styles['separator_variant_vertical-xxl'],
+    },
+  },
+});
+
+export const Separator = ({
+  orientation = 'horizontal',
+  size,
+  className,
+  ...props
+}: SeparatorProps) => (
+  <RadixSeparator.Root
     orientation={orientation}
     {...props}
+    className={cn(separatorVariants({ variant: `${orientation}-${size}` }), className)}
   />
 );