@crystallize/design-system 0.0.2 → 1.0.0

package/src/input/input.tsx

@@ -0,0 +1,20 @@
+import { cva, VariantProps } from 'class-variance-authority';
+import { ComponentPropsWithRef, forwardRef } from 'react';
+
+import './input.css';
+
+type InputStylesProps = VariantProps<typeof inputStyles>;
+const inputStyles = cva(['c-input'], {
+  variants: {},
+  defaultVariants: {},
+});
+
+type InputProps = InputStylesProps & ComponentPropsWithRef<'input'>;
+
+export type InputRef = HTMLInputElement;
+
+export const Input = forwardRef<InputRef, InputProps>(({ className, ...delegated }, ref) => {
+  return <input ref={ref} className={inputStyles({ className })} type="text" {...delegated} />;
+});
+
+Input.displayName = 'Input';

package/src/input-with-label/InputWithLabel.stories.tsx

@@ -0,0 +1,98 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { InputWithLabel } from '.';
+
+const meta: Meta<typeof InputWithLabel> = {
+  title: 'Components/InputWithLabel',
+  component: InputWithLabel,
+  argTypes: {
+    variant: {
+      defaultValue: '',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof InputWithLabel>;
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Luke Skywalker',
+    label: 'Name',
+    value: 'Luke Skywalker',
+  },
+};
+
+export const Error: Story = {
+  args: {
+    placeholder: 'Luke Skywalker',
+    label: 'Name',
+    status: 'error',
+  },
+};
+
+export const ErrorWithMessage: Story = {
+  args: {
+    placeholder: 'Luke Skywalker',
+    label: 'Name',
+    status: 'error',
+    errorMessage: 'You are not my father',
+  },
+};
+
+export const Elevated: Story = {
+  args: {
+    placeholder: 'Luke Skywalker',
+    label: 'Name',
+    variant: 'elevated',
+  },
+};
+
+export const ElevatedError: Story = {
+  args: {
+    placeholder: 'Luke Skywalker',
+    label: 'Name',
+    variant: 'elevated',
+    status: 'error',
+    errorMessage: 'Something went no no',
+  },
+};
+
+export const WithAppend: Story = {
+  args: {
+    placeholder: 'Luke Skywalker',
+    label: 'Name',
+    variant: 'elevated',
+    append: <div className="self-end">🍩</div>,
+    id: 'my-id',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    placeholder: 'Luke Skywalker',
+    label: 'Name',
+    disabled: true,
+  },
+};
+
+export const Readonly: Story = {
+  args: {
+    placeholder: 'Luke Skywalker',
+    label: 'Name',
+    readOnly: true,
+    value: 'Darth Vader',
+  },
+};
+
+export const PassingPropsToLabel: Story = {
+  args: {
+    placeholder: 'Luke Skywalker',
+    label: 'Name',
+    value: 'Darth Vader',
+    labelProps: {
+      className: 'bg-elevated',
+    },
+  },
+};

package/src/input-with-label/index.ts

@@ -0,0 +1,3 @@
+import './input-with-label.css';
+
+export { InputWithLabel } from './input-with-label';

package/src/input-with-label/input-with-label.css

@@ -0,0 +1,35 @@
+.c-input-with-label {
+  @apply relative block rounded border border-solid border-transparent p-3;
+
+  &-input-wrap {
+    @apply mt-3 flex;
+  }
+
+  &-input {
+    @apply flex-1 overflow-hidden text-ellipsis text-base;
+  }
+
+  &-append {
+    @apply -mr-3 flex flex-shrink-0 items-center px-3;
+  }
+
+  &-elevated {
+    @apply bg-elevate shadow;
+  }
+
+  &.c-input-with-label--error {
+    @apply text-error;
+  }
+
+  &-error {
+    @apply !mt-1 text-xs text-error;
+  }
+
+  &-sm {
+    @apply text-sm;
+  }
+
+  &-lg {
+    @apply text-lg;
+  }
+}

package/src/input-with-label/input-with-label.tsx

@@ -0,0 +1,59 @@
+import { ComponentPropsWithoutRef, ComponentPropsWithRef, forwardRef, ReactNode } from 'react';
+import { cva, cx, VariantProps } from 'class-variance-authority';
+
+import { Input } from '../input';
+import { Label } from '../label';
+import { Triangle } from '../iconography/triangle';
+
+const inputWithLabelStyles = cva(['c-input-with-label'], {
+  variants: {
+    variant: {
+      default: '',
+      elevated: 'c-input-with-label-elevated',
+      outlined: 'c-input-with-label-outlined',
+    },
+    status: {
+      error: 'c-input-with-label--error',
+    },
+  },
+  defaultVariants: {},
+});
+
+type InputWithLabelStylesProps = VariantProps<typeof inputWithLabelStyles>;
+
+export type InputWithLabelProps = InputWithLabelStylesProps & {
+  label: string;
+  append?: ReactNode;
+  errorMessage?: string;
+  labelProps?: ComponentPropsWithoutRef<'label'>;
+} & ComponentPropsWithRef<'input'>;
+
+export type InputWithLabelRef = HTMLInputElement;
+
+export const InputWithLabel = forwardRef<InputWithLabelRef, InputWithLabelProps>(
+  ({ className, label, append, errorMessage, status, variant, id, labelProps, ...delegated }, ref) => {
+    const { className: labelClassName, ...labelPropsRest } = labelProps ?? {};
+
+    return (
+      <>
+        <Label
+          className={inputWithLabelStyles({ status, variant, className: labelClassName })}
+          htmlFor={id}
+          {...labelPropsRest}
+        >
+          {label}
+          <span className="c-input-with-label-input-wrap">
+            <Input className={cx('c-input-with-label-input', className)} ref={ref} id={id} {...delegated} />
+            {!append && !errorMessage ? null : (
+              <div className="c-input-with-label-append" title={errorMessage}>
+                {errorMessage ? <Triangle /> : append}
+              </div>
+            )}
+          </span>
+        </Label>
+      </>
+    );
+  },
+);
+
+InputWithLabel.displayName = 'InputWithLabel';

package/src/label/index.ts

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

package/src/label/label.css

@@ -0,0 +1,3 @@
+.c-label {
+  @apply text-sm font-medium text-gray-500-400;
+}

package/src/label/label.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Label } from './label';
+
+const meta: Meta<typeof Label> = {
+  title: 'Components/Label',
+  component: Label,
+  argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Label>;
+
+export const Default: Story = {
+  args: {
+    htmlFor: 'id',
+    children: 'Hello, World!',
+  },
+};

package/src/label/label.tsx

@@ -0,0 +1,13 @@
+import { forwardRef, LabelHTMLAttributes } from 'react';
+import { cx } from 'class-variance-authority';
+
+import './label.css';
+
+type LabelRef = HTMLLabelElement;
+type LabelProps = LabelHTMLAttributes<LabelRef>;
+
+export const Label = forwardRef<LabelRef, LabelProps>(({ className, ...delegated }, ref) => {
+  return <label ref={ref} className={cx('c-label', className)} {...delegated} />;
+});
+
+Label.displayName = 'Label';

package/src/progress/Progress.stories.tsx

@@ -0,0 +1,26 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { useEffect, useState } from 'react';
+import { Progress } from '.';
+
+const meta: Meta<typeof Progress> = {
+  title: 'Components/Progress',
+  component: Progress,
+  argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof Progress>;
+
+export const Default: Story = {
+  name: 'Default',
+  render: () => {
+    const [progress, setProgress] = useState(13);
+
+    useEffect(() => {
+      const timer = setTimeout(() => setProgress(100), 1500);
+      return () => clearTimeout(timer);
+    }, []);
+
+    return <Progress value={progress} />;
+  },
+};

package/src/progress/index.ts

@@ -0,0 +1 @@
+export { Progress } from './progress';

package/src/progress/progress.css

@@ -0,0 +1,7 @@
+.c-progress-root {
+  @apply relative h-4 w-full overflow-hidden rounded-full bg-gray-50-900;
+}
+
+.c-progress-indicator {
+  @apply h-full w-full transform bg-cyan-300-600 duration-500 ease-linear;
+}

package/src/progress/progress.tsx

@@ -0,0 +1,17 @@
+import * as ProgressPrimitives from '@radix-ui/react-progress';
+import { cx } from 'class-variance-authority';
+
+import './progress.css';
+
+type ProgressProps = ProgressPrimitives.ProgressProps;
+
+export function Progress({ className, value }: ProgressProps) {
+  return (
+    <ProgressPrimitives.Root className={cx(className, 'c-progress-root')} value={value}>
+      <ProgressPrimitives.Indicator
+        className="c-progress-indicator"
+        style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
+      />
+    </ProgressPrimitives.Root>
+  );
+}

package/src/radio/index.ts

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

package/src/radio/radio.css

@@ -0,0 +1,20 @@
+.c-radio-item {
+  @apply flex h-3 w-3 flex-shrink-0 items-center justify-center rounded-full border border-solid border-gray-200-700 bg-gray-50-900 p-0;
+
+  &:focus,
+  &:focus-visible {
+    @apply outline-none;
+  }
+
+  &:disabled {
+    @apply bg-gray-100-800 opacity-40;
+  }
+
+  &[aria-checked='true'] {
+    @apply border-cyan-700-200 bg-cyan-200-700;
+  }
+}
+
+.c-radio-indicator {
+  @apply block h-[6px] w-[6px] rounded-full bg-cyan-700-200;
+}

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,34 @@
+import { ComponentProps, forwardRef } from 'react';
+import * as SelectPrimitives from '@radix-ui/react-select';
+
+import { Icon } from '../iconography';
+
+export type SelectRef = HTMLButtonElement;
+export type SelectProps = ComponentProps<typeof SelectPrimitives.Root> & {
+  disabled?: boolean;
+  id?: string;
+  placeholder?: string;
+};
+
+export const SelectContainer = forwardRef<SelectRef, SelectProps>(
+  ({ children, id, placeholder, disabled, ...delegated }, ref) => {
+    return (
+      <SelectPrimitives.Root {...delegated}>
+        <SelectPrimitives.Trigger ref={ref} className="c-select-trigger" 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,28 @@
+.c-select-trigger {
+  @apply inline-flex cursor-pointer items-center justify-center gap-4 whitespace-nowrap rounded border-0 bg-elevate px-4 py-3 text-sm font-medium text-gray shadow;
+
+  &:disabled {
+    @apply cursor-default opacity-50;
+  }
+}
+
+.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,
+};