@crystallize/design-system 1.3.0 → 1.3.2

package/src/radio/radio.stories.tsx

@@ -0,0 +1,142 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Radio } from './radio';
+import { Label } from '../label';
+
+const meta: Meta<typeof Radio.Group> = {
+  title: 'Components/Radio',
+  component: Radio.Group,
+  argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Radio.Group>;
+
+export const Example: Story = {
+  render: () => {
+    return (
+      <Radio.Group defaultValue="default">
+        <div className="flex items-center space-x-2">
+          <Radio.Item value="default" id="example-r1" />
+          <Label htmlFor="example-r1">Default</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Radio.Item value="comfortable" id="example-r2" />
+          <Label htmlFor="example-r2">Comfortable</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Radio.Item value="compact" id="example-r3" />
+          <Label htmlFor="example-r3">Compact</Label>
+        </div>
+      </Radio.Group>
+    );
+  },
+};
+
+export const Uncontrolled: Story = {
+  render: () => {
+    return (
+      <Radio.Group defaultValue="default">
+        <div className="flex items-center space-x-2">
+          <Radio.Item value="default" id="uncontrolled-r1" />
+          <Label htmlFor="uncontrolled-r1">Default</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Radio.Item value="comfortable" id="uncontrolled-r2" />
+          <Label htmlFor="uncontrolled-r2">Comfortable</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Radio.Item value="compact" id="uncontrolled-r3" />
+          <Label htmlFor="uncontrolled-r3">Compact</Label>
+        </div>
+      </Radio.Group>
+    );
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = useState('default');
+    return (
+      <Radio.Group value={value} onValueChange={v => setValue(v)}>
+        <div className="flex items-center space-x-2">
+          <Radio.Item value="default" id="controlled-r1" />
+          <Label htmlFor="controlled-r1">Default</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Radio.Item value="comfortable" id="controlled-r2" />
+          <Label htmlFor="controlled-r2">Comfortable</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Radio.Item value="compact" id="controlled-r3" />
+          <Label htmlFor="controlled-r3">Compact</Label>
+        </div>
+      </Radio.Group>
+    );
+  },
+};
+
+export const Horizontal: Story = {
+  render: () => {
+    return (
+      <Radio.Group defaultValue="default" orientation="horizontal" className="flex space-x-6">
+        <div className="flex items-center space-x-2">
+          <Radio.Item value="default" id="horizontal-r1" />
+          <Label htmlFor="horizontal-r1">Default</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Radio.Item value="comfortable" id="horizontal-r2" />
+          <Label htmlFor="horizontal-r2">Comfortable</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Radio.Item value="compact" id="horizontal-r3" />
+          <Label htmlFor="horizontal-r3">Compact</Label>
+        </div>
+      </Radio.Group>
+    );
+  },
+};
+
+export const NoLoop: Story = {
+  render: () => {
+    return (
+      <Radio.Group defaultValue="default" loop={false}>
+        <div className="flex items-center space-x-2">
+          <Radio.Item value="default" id="noloop-r1" />
+          <Label htmlFor="noloop-r1">Default</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Radio.Item value="comfortable" id="noloop-r2" />
+          <Label htmlFor="noloop-r2">Comfortable</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Radio.Item value="compact" id="noloop-r3" />
+          <Label htmlFor="noloop-r3">Compact</Label>
+        </div>
+      </Radio.Group>
+    );
+  },
+};
+
+export const Disabled: Story = {
+  render: () => {
+    return (
+      <Radio.Group defaultValue="default">
+        <div className="flex items-center space-x-2">
+          <Radio.Item value="default" id="disabled-r1" />
+          <Label htmlFor="disabled-r1">Default</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Radio.Item value="comfortable" id="disabled-r2" disabled />
+          <Label htmlFor="disabled-r2">Comfortable</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Radio.Item value="compact" id="disabled-r3" />
+          <Label htmlFor="disabled-r3">Compact</Label>
+        </div>
+      </Radio.Group>
+    );
+  },
+};

package/src/radio/radio.tsx

@@ -0,0 +1,19 @@
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import type { ComponentProps } from 'react';
+
+import './radio.css';
+
+type RadioGroupItemProps = ComponentProps<typeof RadioGroupPrimitive.Item>;
+
+function RadioGroupItem(props: RadioGroupItemProps) {
+  return (
+    <RadioGroupPrimitive.Item {...props} className="c-radio-item">
+      <RadioGroupPrimitive.Indicator className="c-radio-indicator" />
+    </RadioGroupPrimitive.Item>
+  );
+}
+
+export const Radio = {
+  Group: RadioGroupPrimitive.Root,
+  Item: RadioGroupItem,
+};

package/src/select/index.ts

@@ -0,0 +1 @@
+export * from './select';

package/src/select/select-item.tsx

@@ -0,0 +1,18 @@
+import { ComponentProps, forwardRef } from 'react';
+import * as SelectPrimitives from '@radix-ui/react-select';
+
+export type SelectItemRef = HTMLDivElement;
+export type SelectItemProps = ComponentProps<typeof SelectPrimitives.Item>;
+
+export const SelectItem = forwardRef<SelectItemRef, SelectItemProps>((props, ref) => {
+  const { children, ...delegated } = props;
+
+  return (
+    <SelectPrimitives.Item className="c-select-item" ref={ref} {...delegated}>
+      <SelectPrimitives.ItemText>{children}</SelectPrimitives.ItemText>
+      <SelectPrimitives.ItemIndicator />
+    </SelectPrimitives.Item>
+  );
+});
+
+SelectItem.displayName = 'SelectItem';

package/src/select/select-root.tsx

@@ -0,0 +1,50 @@
+import { ComponentProps, forwardRef } from 'react';
+import * as SelectPrimitives from '@radix-ui/react-select';
+import { cva, VariantProps } from 'class-variance-authority';
+
+import { Icon } from '../iconography';
+
+const selectTriggerStyles = cva('c-select-trigger', {
+  variants: {
+    size: {
+      xs: 'c-select-trigger-xs',
+      sm: 'c-select-trigger-sm',
+      md: 'c-select-trigger-md',
+      lg: 'c-select-trigger-lg',
+    },
+  },
+  defaultVariants: {
+    size: 'sm',
+  },
+});
+
+export type SelectRef = HTMLButtonElement;
+export type SelectProps = ComponentProps<typeof SelectPrimitives.Root> &
+  VariantProps<typeof selectTriggerStyles> & {
+    disabled?: boolean;
+    id?: string;
+    placeholder?: string;
+  };
+
+export const SelectContainer = forwardRef<SelectRef, SelectProps>(
+  ({ children, id, placeholder, disabled, size, ...delegated }, ref) => {
+    return (
+      <SelectPrimitives.Root {...delegated}>
+        <SelectPrimitives.Trigger ref={ref} className={selectTriggerStyles({ size })} disabled={disabled} id={id}>
+          <SelectPrimitives.Value placeholder={<span className="c-select-value">{placeholder ?? 'Select...'}</span>} />
+          <Icon.Arrow />
+        </SelectPrimitives.Trigger>
+
+        <SelectPrimitives.Portal>
+          <SelectPrimitives.Content className="c-select-content">
+            <SelectPrimitives.ScrollUpButton />
+            <SelectPrimitives.Viewport className="c-select-viewport">{children}</SelectPrimitives.Viewport>
+            <SelectPrimitives.ScrollDownButton />
+          </SelectPrimitives.Content>
+        </SelectPrimitives.Portal>
+      </SelectPrimitives.Root>
+    );
+  },
+);
+
+SelectContainer.displayName = 'Select';

package/src/select/select.css

@@ -0,0 +1,44 @@
+.c-select-trigger {
+  @apply inline-flex cursor-pointer items-center justify-center gap-4 whitespace-nowrap rounded border-0 bg-elevate px-4 text-sm font-medium text-gray shadow;
+
+  &:disabled {
+    @apply cursor-default opacity-50;
+  }
+
+  &-xs {
+    @apply h-6;
+  }
+
+  &-sm {
+    @apply h-9 text-sm;
+  }
+
+  &-md {
+    @apply h-11 text-base;
+  }
+
+  &-lg {
+    @apply h-14 text-lg;
+  }
+}
+
+.c-select-value {
+  @apply italic text-gray-500-400;
+}
+
+.c-select-content {
+  @apply overflow-hidden rounded bg-elevate text-gray shadow;
+}
+
+.c-select-viewport {
+  @apply py-2;
+}
+
+.c-select-item {
+  @apply flex cursor-pointer items-center whitespace-nowrap px-6 py-2 font-medium text-gray;
+
+  &:hover,
+  &:focus {
+    @apply bg-gray-50-900 outline-none;
+  }
+}

package/src/select/select.stories.tsx

@@ -0,0 +1,74 @@
+import { useState } from 'react';
+import type { Meta } from '@storybook/react';
+
+import { Select } from './select';
+import { Label } from '../label';
+
+export default {
+  title: 'Components/Select',
+  parameters: {
+    backgrounds: { default: 'gray' },
+  },
+} as Meta<typeof Select.Container>;
+
+export const Example = () => {
+  return (
+    <Select.Container>
+      <Select.Item value="react">React</Select.Item>
+      <Select.Item value="vue">Vue</Select.Item>
+      <Select.Item value="svelte">Svelte</Select.Item>
+      <Select.Item value="angular">Angular</Select.Item>
+    </Select.Container>
+  );
+};
+
+export const Uncontrolled = () => {
+  return (
+    <Select.Container>
+      <Select.Item value="react">React</Select.Item>
+      <Select.Item value="vue">Vue</Select.Item>
+      <Select.Item value="svelte">Svelte</Select.Item>
+      <Select.Item value="angular">Angular</Select.Item>
+    </Select.Container>
+  );
+};
+
+export const Controlled = () => {
+  const [value, setValue] = useState('react');
+
+  return (
+    <Select.Container value={value} onValueChange={setValue}>
+      <Select.Item value="react">React</Select.Item>
+      <Select.Item value="vue">Vue</Select.Item>
+      <Select.Item value="svelte">Svelte</Select.Item>
+      <Select.Item value="angular">Angular</Select.Item>
+    </Select.Container>
+  );
+};
+
+export const WithLabel = () => {
+  const [value, setValue] = useState('react');
+
+  return (
+    <div className="flex flex-col items-start space-y-2">
+      <Label htmlFor="with-label-c1">Select framework</Label>
+      <Select.Container id="with-label-c1" value={value} onValueChange={setValue}>
+        <Select.Item value="react">React</Select.Item>
+        <Select.Item value="vue">Vue</Select.Item>
+        <Select.Item value="svelte">Svelte</Select.Item>
+        <Select.Item value="angular">Angular</Select.Item>
+      </Select.Container>
+    </div>
+  );
+};
+
+export const Disabled = () => {
+  return (
+    <Select.Container disabled>
+      <Select.Item value="react">React</Select.Item>
+      <Select.Item value="vue">Vue</Select.Item>
+      <Select.Item value="svelte">Svelte</Select.Item>
+      <Select.Item value="angular">Angular</Select.Item>
+    </Select.Container>
+  );
+};

package/src/select/select.ts

@@ -0,0 +1,9 @@
+import { SelectItem } from './select-item';
+import { SelectContainer } from './select-root';
+
+import './select.css';
+
+export const Select = {
+  Container: SelectContainer,
+  Item: SelectItem,
+};

package/src/slider/Slider.stories.tsx

@@ -0,0 +1,54 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { useState } from 'react';
+import { Slider } from '.';
+
+const meta: Meta<typeof Slider> = {
+  title: 'Components/Slider',
+  component: Slider,
+  argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof Slider>;
+
+export const Default: Story = {
+  args: {
+    'aria-label': 'volume',
+    defaultValue: [50],
+    max: 100,
+    step: 1,
+  },
+};
+
+export const Vertical: Story = {
+  args: {
+    'aria-label': 'volume',
+    defaultValue: [25],
+    max: 100,
+    orientation: 'vertical',
+    step: 1,
+  },
+};
+
+export const TransparentRange: Story = {
+  args: {
+    'aria-label': 'volume',
+    defaultValue: [25],
+    max: 100,
+    step: 1,
+    transparentRange: true,
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = useState<number[]>([25]);
+
+    return (
+      <div className="space-y-6">
+        <Slider aria-label="volume" step={1} max={100} onValueChange={setValue} value={value} />
+        <pre>{value}</pre>
+      </div>
+    );
+  },
+};

package/src/slider/index.ts

@@ -0,0 +1 @@
+export { Slider } from './slider';

package/src/slider/slider.css

@@ -0,0 +1,27 @@
+.c-slider-root {
+  @apply relative flex w-52 touch-none select-none items-center;
+  @apply data-[orientation='horizontal']:h-5;
+  @apply data-[orientation='vertical']:h-28 data-[orientation='vertical']:w-5 data-[orientation='vertical']:flex-col;
+}
+
+.c-slider-track {
+  @apply relative grow rounded-full bg-gray-100-800;
+  @apply data-[orientation='horizontal']:h-[3px];
+  @apply data-[orientation='vertical']:w-[3px];
+}
+
+.c-slider-range {
+  @apply absolute rounded-full bg-gray-600-300;
+  @apply data-[orientation="horizontal"]:h-full;
+  @apply data-[orientation="vertical"]:w-full;
+}
+
+.c-slider-range-transparent {
+  @apply bg-transparent;
+}
+
+.c-slider-thumb {
+  @apply block h-5 w-5 rounded-xl bg-gray-600-300 shadow;
+  @apply hover:bg-gray-700-200;
+  @apply focus:shadow-lg focus:outline-none;
+}

package/src/slider/slider.tsx

@@ -0,0 +1,20 @@
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import { cx } from 'class-variance-authority';
+import { forwardRef } from 'react';
+
+import './slider.css';
+
+type SliderProps = SliderPrimitive.SliderProps & {
+  transparentRange?: boolean;
+};
+
+export const Slider = forwardRef<HTMLSpanElement, SliderProps>(({ className, transparentRange, ...delegated }, ref) => {
+  return (
+    <SliderPrimitive.Root className={cx('c-slider-root', className)} ref={ref} {...delegated}>
+      <SliderPrimitive.Track className="c-slider-track">
+        <SliderPrimitive.Range className={`c-slider-range ${transparentRange ? 'c-slider-range-transparent' : ''}`} />
+      </SliderPrimitive.Track>
+      <SliderPrimitive.Thumb className="c-slider-thumb" />
+    </SliderPrimitive.Root>
+  );
+});

package/src/spinner/Spinner.stories.tsx

@@ -0,0 +1,19 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { Spinner } from '.';
+
+const meta: Meta<typeof Spinner> = {
+  title: 'Components/Spinner',
+  component: Spinner,
+  argTypes: {
+    size: {
+      defaultValue: 30,
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Spinner>;
+
+export const Default: Story = {
+  args: {},
+};

package/src/spinner/index.tsx

@@ -0,0 +1,48 @@
+import { cx } from 'class-variance-authority';
+import { ComponentPropsWithRef, forwardRef, ReactNode } from 'react';
+
+import './spinner.css';
+
+const realSize = 40;
+
+type SpinnerProps = ComponentPropsWithRef<'div'> & {
+  children?: ReactNode;
+  className?: string;
+  color?: string;
+  size?: number;
+  strokeSize?: number;
+};
+
+export const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(
+  ({ children, className, color = 'currentColor', size = 30, strokeSize, ...delegated }, ref) => {
+    const viewSize = size || realSize;
+    const sizeHalf = realSize / 2;
+
+    return (
+      <div ref={ref} className={cx('c-spinner', className)} data-testid="loading-spinner" {...delegated}>
+        <svg viewBox={`0 0 ${realSize} ${realSize}`} x="0px" y="0px" style={{ width: viewSize, height: viewSize }}>
+          <circle
+            cx="20"
+            cy="20"
+            r="18"
+            style={{
+              stroke: color,
+              strokeWidth: strokeSize ? strokeSize : viewSize / 10,
+              strokeLinecap: 'round',
+              strokeDasharray: size < 16 ? size * 6 : size * 3.5,
+              transformOrigin: `${sizeHalf}px ${sizeHalf}px 0`,
+            }}
+            className="c-spinner-artifact"
+          />
+        </svg>
+        {children && (
+          <span className="c-spinner-children" style={{ fontSize: size ? `${size * 0.75}px` : '1em' }}>
+            {children}
+          </span>
+        )}
+      </div>
+    );
+  },
+);
+
+Spinner.displayName = 'Spinner';

package/src/spinner/spinner.css

@@ -0,0 +1,11 @@
+.c-spinner {
+  @apply inline-flex items-center;
+
+  &-artifact {
+    @apply animate-spin fill-transparent;
+  }
+
+  &-children {
+    @apply ml-[15px] inline-block;
+  }
+}

package/src/tag/Tag.stories.tsx

@@ -0,0 +1,32 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { Tag } from '.';
+
+const meta: Meta<typeof Tag> = {
+  title: 'Components/Tag',
+  component: Tag,
+  argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof Tag>;
+
+export const Default: Story = {
+  args: {
+    children: 'EUR',
+  },
+};
+
+export const Elevate: Story = {
+  args: {
+    children: 'EUR',
+    variant: 'elevate',
+  },
+};
+
+export const DarkMode: Story = {
+  args: {
+    children: '%',
+    variant: 'elevate',
+    className: 'c-dark',
+  },
+};

package/src/tag/index.ts

@@ -0,0 +1 @@
+export { Tag } from './tag';

package/src/tag/tag.css

@@ -0,0 +1,7 @@
+.c-tag {
+  @apply inline-flex items-center rounded border border-solid border-gray-200-700 bg-purple-50-900 p-1 text-center text-xs font-medium text-gray-700-200 shadow-sm;
+}
+
+.c-tag-elevate {
+  @apply bg-elevate;
+}

package/src/tag/tag.tsx

@@ -0,0 +1,27 @@
+import { cva, VariantProps } from 'class-variance-authority';
+import type { ComponentProps } from 'react';
+
+import './tag.css';
+
+type TagStylesProps = VariantProps<typeof tagStyles>;
+const tagStyles = cva('c-tag', {
+  variants: {
+    variant: {
+      default: '',
+      elevate: 'c-tag-elevate',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+export type TagProps = ComponentProps<'span'> & TagStylesProps;
+
+export function Tag({ children, className, variant, ...delegated }: TagProps) {
+  return (
+    <span className={tagStyles({ className, variant })} {...delegated}>
+      {children}
+    </span>
+  );
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tailwind.config.cjs

@@ -0,0 +1,51 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const defaultTheme = require('tailwindcss/defaultTheme');
+const colorsPlugin = require('./plugins/colors');
+
+/** @type {import("tailwindcss").Config} */
+module.exports = {
+  content: ['./src/**/*.tsx'],
+  safelist: ['c-dark'],
+  experimental: {
+    optimizeUniversalDefaults: true,
+  },
+  corePlugins: {
+    preflight: false,
+  },
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Roboto', ...defaultTheme.fontFamily.sans],
+        serif: ["'Roboto Slab'", ...defaultTheme.fontFamily.serif],
+      },
+      colors: {
+        // Some nice-to-have colors
+        transparent: 'transparent',
+        inherit: 'inherit',
+      },
+      keyframes: {
+        spin: {
+          '0%': {
+            transform: 'rotate(0deg)',
+            strokeDashoffset: 26.4, // 40 * 0.66
+          },
+          '50%': {
+            transform: 'rotate(720deg)',
+            strokeDashoffset: 125.6, // 40 * 3.14
+          },
+          '100%': {
+            transform: 'rotate(1080deg)',
+            strokeDashoffset: 26.4, // 40 * 0.66
+          },
+        },
+      },
+      animation: {
+        spin: 'spin 2s linear infinite',
+      },
+      boxShadow: {
+        DEFAULT: '0 2px 4px rgba(130,138,144,0.15)',
+      },
+    },
+  },
+  plugins: [colorsPlugin],
+};