@crystallize/design-system 0.0.2 → 0.2.0

package/src/input/input.tsx

@@ -0,0 +1,33 @@
+import { cva, VariantProps } from 'class-variance-authority';
+import { ComponentPropsWithRef, forwardRef } from 'react';
+
+type InputStylesProps = VariantProps<typeof inputStyles>;
+const inputStyles = cva(
+  [
+    'p-0 border-none text-zinc-800',
+    'focus:outline-none',
+    'placeholder:italic placeholder:font-light placeholder:text-gray-400 placeholder:text-sm',
+    'disabled:cursor-default',
+  ],
+  {
+    variants: {
+      paper: {
+        white: 'bg-white',
+        gray: 'bg-jupiter',
+      },
+    },
+    defaultVariants: {
+      paper: 'gray',
+    },
+  },
+);
+
+type InputProps = InputStylesProps & ComponentPropsWithRef<'input'>;
+
+export type InputRef = HTMLInputElement;
+
+export const Input = forwardRef<InputRef, InputProps>(({ className, paper, ...delegated }, ref) => {
+  return <input ref={ref} className={inputStyles({ className, paper })} type="text" {...delegated} />;
+});
+
+Input.displayName = 'Input';

package/src/label/index.ts

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

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,11 @@
+import { forwardRef, LabelHTMLAttributes } from 'react';
+import { cx } from 'class-variance-authority';
+
+type LabelRef = HTMLLabelElement;
+type LabelProps = LabelHTMLAttributes<LabelRef>;
+
+export const Label = forwardRef<LabelRef, LabelProps>(({ className, ...delegated }, ref) => {
+  return <label ref={ref} className={cx('text-xs font-medium text-gray-400', 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.tsx

@@ -0,0 +1,16 @@
+import * as ProgressPrimitives from '@radix-ui/react-progress';
+
+type ProgressProps = {
+  value: number;
+};
+
+export function Progress({ value }: ProgressProps) {
+  return (
+    <ProgressPrimitives.Root className="relative overflow-hidden rounded-full w-full h-6 bg-neutral-200" value={value}>
+      <ProgressPrimitives.Indicator
+        className="bg-[#50dbdc] w-full h-full transform ease-linear duration-500"
+        style={{ transform: `translateX(-${100 - value}%)` }}
+      />
+    </ProgressPrimitives.Root>
+  );
+}

package/src/radio/index.ts

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

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,26 @@
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { cx } from 'class-variance-authority';
+import type { ComponentProps } from 'react';
+
+type RadioGroupItemProps = ComponentProps<typeof RadioGroupPrimitive.Item>;
+
+function RadioGroupItem(props: RadioGroupItemProps) {
+  return (
+    <RadioGroupPrimitive.Item
+      {...props}
+      className={cx(
+        'flex h-3 w-3 flex-shrink-0 items-center justify-center rounded-full border border-solid border-[#ddd] bg-white p-0',
+        'focus:outline-none',
+        'disabled:bg-[#ddd]/20',
+        'radix-state-checked:border-[#528693] radix-state-checked:bg-neptune',
+      )}
+    >
+      <RadioGroupPrimitive.Indicator className={cx('block h-[6px] w-[6px] rounded-full bg-[#528693]')} />
+    </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,27 @@
+import { ComponentProps, forwardRef } from 'react';
+import * as SelectPrimitives from '@radix-ui/react-select';
+import { cx } from 'class-variance-authority';
+
+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={cx(
+        'flex cursor-pointer items-center whitespace-nowrap px-6 py-2 font-medium',
+        'focus:bg-neptune/20',
+        'hover:bg-neptune/20',
+      )}
+      ref={ref}
+      {...delegated}
+    >
+      <SelectPrimitives.ItemText>{children}</SelectPrimitives.ItemText>
+      <SelectPrimitives.ItemIndicator />
+    </SelectPrimitives.Item>
+  );
+});
+
+SelectItem.displayName = 'SelectItem';

package/src/select/select-root.tsx

@@ -0,0 +1,41 @@
+import { ComponentProps, forwardRef } from 'react';
+import * as SelectPrimitives from '@radix-ui/react-select';
+
+import { Icon } from '../icons';
+
+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="inline-flex cursor-pointer items-center justify-center gap-4 whitespace-nowrap rounded border-0 bg-white px-4 py-3 text-sm font-medium text-black-text shadow disabled:cursor-default disabled:opacity-50"
+          disabled={disabled}
+          id={id}
+        >
+          <SelectPrimitives.Value
+            placeholder={<span className="italic text-label">{placeholder ?? 'Select...'}</span>}
+          />
+          <Icon.Arrow />
+        </SelectPrimitives.Trigger>
+
+        <SelectPrimitives.Portal>
+          <SelectPrimitives.Content className="overflow-hidden rounded bg-white text-black-text shadow">
+            <SelectPrimitives.ScrollUpButton />
+            <SelectPrimitives.Viewport className="py-2">{children}</SelectPrimitives.Viewport>
+            <SelectPrimitives.ScrollDownButton />
+          </SelectPrimitives.Content>
+        </SelectPrimitives.Portal>
+      </SelectPrimitives.Root>
+    );
+  },
+);
+
+SelectContainer.displayName = 'Select';

package/src/select/select.stories.tsx

@@ -0,0 +1,62 @@
+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>
+  );
+};

package/src/select/select.ts

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

package/src/text-field/TextField.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { TextField } from '.';
+
+const meta: Meta<typeof TextField> = {
+  title: 'Components/TextField',
+  component: TextField,
+  argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TextField>;
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Luke Skywalker',
+    label: 'Name',
+  },
+};

package/src/text-field/index.ts

@@ -0,0 +1 @@
+export { TextField } from './text-field';

package/src/text-field/text-field.tsx

@@ -0,0 +1,60 @@
+import { ComponentPropsWithRef, forwardRef, ReactNode } from 'react';
+import { cva, VariantProps } from 'class-variance-authority';
+
+import { Input } from '../input';
+
+type TextFieldStylesProps = VariantProps<typeof textFieldStyles>;
+const textFieldStyles = cva(
+  ['relative gap-3 flex flex-col p-3 text-sm font-medium text-gray-400 rounded border border-transparent border-solid'],
+  {
+    variants: {
+      variant: {
+        outlined: '',
+        filled: '',
+        standard: '',
+      },
+      raised: {
+        sm: 'shadow-sm',
+        md: 'shadow-md',
+        lg: 'shadow-lg',
+      },
+      paper: {
+        white: 'bg-white',
+        gray: 'bg-jupiter',
+      },
+      error: {
+        true: 'border-rose-800 text-rose-800',
+      },
+    },
+    defaultVariants: {
+      variant: 'standard',
+      paper: 'white',
+    },
+  },
+);
+
+export type TextFieldProps = Omit<TextFieldStylesProps, 'error'> & {
+  label: string;
+  startAdornment?: ReactNode;
+  endAdornment?: ReactNode;
+  error?: string;
+} & ComponentPropsWithRef<'input'>;
+
+export type TextFieldRef = HTMLInputElement;
+
+export const TextField = forwardRef<TextFieldRef, TextFieldProps>(
+  ({ variant, raised, className, label, paper, endAdornment, error, ...delegated }, ref) => {
+    return (
+      <>
+        <label className={textFieldStyles({ variant, raised, paper, error: Boolean(error), className })}>
+          {label}
+          <Input ref={ref} className="w-10/12 text-ellipsis overflow-hidden" type="text" {...delegated} />
+          <div className="absolute right-1 top-2/3 -translate-y-1/2 ">{endAdornment}</div>
+        </label>
+        {error && <div className="text-rose-800 text-sm px-3 !mt-1">{error}</div>}
+      </>
+    );
+  },
+);
+
+TextField.displayName = 'TextField';