@crystallize/design-system 1.4.0 → 1.4.1

package/src/button/Button.stories.tsx

@@ -0,0 +1,105 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { Button } from '.';
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  argTypes: {
+    variant: {
+      defaultValue: 'default',
+    },
+    intent: {
+      defaultValue: 'default',
+    },
+    size: {
+      defaultValue: 'sm',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+const variants = ['default', 'elevate'] as const;
+const intent = ['default', 'action', 'danger'] as const;
+const sizes = ['xs', 'sm', 'md', 'lg'] as const;
+
+export const AllButton: Story = {
+  name: 'All Buttons',
+  render: () => {
+    return (
+      <div>
+        <div className="grid grid-cols-6 justify-items-center gap-6">
+          {sizes.map(size =>
+            variants.map(variant =>
+              intent.map(intent => (
+                <Button variant={variant} size={size} intent={intent} status="loading">
+                  Button
+                </Button>
+              )),
+            ),
+          )}
+        </div>
+      </div>
+    );
+  },
+};
+
+export const Default: Story = {
+  args: {
+    intent: 'default',
+    variant: 'default',
+    children: 'Button',
+  },
+};
+
+export const Elevate: Story = {
+  args: {
+    intent: 'default',
+    variant: 'elevate',
+    children: 'Button',
+  },
+};
+
+export const Action: Story = {
+  args: {
+    intent: 'action',
+    variant: 'default',
+    children: 'Button',
+  },
+};
+
+export const Danger: Story = {
+  args: {
+    intent: 'danger',
+    variant: 'default',
+    children: 'Button',
+  },
+};
+
+export const Prepend: Story = {
+  args: {
+    intent: 'default',
+    variant: 'default',
+    children: 'Button',
+    prepend: '🤓',
+  },
+};
+
+export const Append: Story = {
+  args: {
+    intent: 'default',
+    variant: 'default',
+    children: 'Button',
+    append: '🤓',
+  },
+};
+
+export const IsLoading: Story = {
+  args: {
+    intent: 'default',
+    variant: 'default',
+    children: 'Button',
+    status: 'loading',
+  },
+};

package/src/button/button.css

@@ -0,0 +1,116 @@
+.c-btn {
+  @apply inline-grid cursor-pointer grid-flow-col items-center gap-2 whitespace-nowrap rounded border-none bg-transparent font-sans font-semibold text-gray no-underline -outline-offset-1;
+
+  &:focus-visible {
+    @apply outline outline-1 outline-inherit;
+    outline-color: currentColor;
+  }
+
+  &:disabled {
+    @apply cursor-default text-gray-300-600;
+  }
+
+  &__prepend,
+  &__append {
+    @apply flex items-center;
+  }
+
+  &__prepend {
+    @apply -ml-2;
+  }
+  &__append {
+    @apply -mr-2;
+  }
+
+  &__loading-spinner {
+    @apply absolute left-1 flex items-center justify-center;
+  }
+}
+
+.c-btn {
+  &,
+  .c-btn__loading-spinner {
+    @apply bg-purple-50-900;
+  }
+
+  &:not(:disabled):hover {
+    @apply outline outline-1 outline-purple-200-700;
+  }
+
+  &:not(:disabled):active {
+    @apply bg-purple-100-800;
+  }
+}
+
+.c-btn-loading {
+  @apply relative;
+
+  .c-btn__prepend,
+  .c-btn__append {
+    @apply opacity-0 transition-opacity;
+  }
+}
+
+.c-btn-elevate {
+  @apply shadow;
+
+  &,
+  .c-btn__loading-spinner {
+    @apply bg-elevate;
+  }
+
+  &:not(:disabled):hover {
+    @apply outline-gray-100-800;
+  }
+
+  &:not(:disabled):active {
+    @apply bg-purple-50-900;
+  }
+}
+
+.c-btn-action {
+  &,
+  .c-btn__loading-spinner {
+    @apply bg-cyan-100-800;
+  }
+
+  &:not(:disabled):hover {
+    @apply outline outline-1 outline-cyan-300-600;
+  }
+
+  &:not(:disabled):active {
+    @apply bg-cyan-200-700;
+  }
+}
+
+.c-btn-danger {
+  @apply text-pink-600-300;
+
+  &:not(:disabled):hover {
+    @apply outline-pink-300-600;
+  }
+}
+
+.c-btn-xs {
+  @apply h-6 py-2 px-4;
+
+  .c-btn__loading-spinner {
+    @apply left-[3px];
+  }
+}
+
+.c-btn-sm {
+  @apply h-9 px-6 text-sm;
+}
+
+.c-btn-md {
+  @apply h-11 px-8 text-base;
+}
+
+.c-btn-lg {
+  @apply h-14 px-10 text-lg;
+
+  .c-btn__loading-spinner {
+    @apply left-2;
+  }
+}

package/src/button/button.tsx

@@ -0,0 +1,136 @@
+import { ComponentPropsWithRef, forwardRef } from 'react';
+import { cva, VariantProps } from 'class-variance-authority';
+
+import './button.css';
+import { Spinner } from '../spinner';
+
+export const buttonTokens = {
+  variant: {
+    default: 'c-btn',
+    elevate: 'c-btn-elevate',
+  },
+  intent: {
+    default: 'c-btn',
+    action: 'c-btn-action',
+    danger: 'c-btn-danger',
+  },
+  size: {
+    xs: 'c-btn-xs',
+    sm: 'c-btn-sm',
+    md: 'c-btn-md',
+    lg: 'c-btn-lg',
+  },
+} as const;
+
+type ButtonStylesProps = VariantProps<typeof buttonStyles>;
+const buttonStyles = cva('c-btn', {
+  variants: {
+    intent: {
+      default: '',
+      action: '',
+      danger: '',
+    },
+    variant: {
+      default: '',
+      elevate: '',
+    },
+    status: {
+      loading: 'c-btn-loading',
+    },
+    size: {
+      xs: 'c-btn-xs',
+      sm: 'c-btn-sm',
+      md: 'c-btn-md',
+      lg: 'c-btn-lg',
+    },
+  },
+  compoundVariants: [
+    {
+      intent: 'default',
+      variant: 'elevate',
+      class: 'c-btn-elevate',
+    },
+    {
+      intent: 'action',
+      variant: 'default',
+      class: 'c-btn-action',
+    },
+    {
+      intent: 'danger',
+      variant: 'default',
+      class: 'c-btn-danger',
+    },
+    {
+      intent: 'danger',
+      variant: 'elevate',
+      class: 'c-btn-danger c-btn-elevate',
+    },
+  ],
+  defaultVariants: {
+    intent: 'default',
+    variant: 'default',
+    size: 'sm',
+  },
+});
+
+export type ButtonProps = ComponentPropsWithRef<'button'> &
+  ButtonStylesProps & {
+    prepend?: React.ReactNode;
+    append?: React.ReactNode;
+    as?: React.ElementType;
+    // To support this button being used as a link
+    to?: string;
+    href?: string;
+  };
+
+const spinnerSizeMap: Record<NonNullable<ButtonProps['size']>, number> = {
+  xs: 10,
+  sm: 12,
+  md: 14,
+  lg: 16,
+};
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      children,
+      className,
+      type = 'button',
+      as: El = 'button',
+      size,
+      variant,
+      intent,
+      prepend,
+      append,
+      status,
+      ...delegated
+    },
+    ref,
+  ) => {
+    let isAnchor = false;
+
+    if ('to' in delegated || 'href' in delegated) {
+      isAnchor = true;
+    }
+
+    return (
+      <El
+        ref={ref}
+        type={isAnchor ? undefined : type}
+        className={buttonStyles({ size, variant, intent, status, className })}
+        {...delegated}
+      >
+        {!prepend ? null : <span className="c-btn__prepend">{prepend}</span>}
+        {children}
+        {status !== 'loading' ? null : (
+          <span className="c-btn__loading-spinner">
+            <Spinner size={size ? spinnerSizeMap[size] : spinnerSizeMap.md} />
+          </span>
+        )}
+        {!append ? null : <span className="c-btn__append">{append}</span>}
+      </El>
+    );
+  },
+);
+
+Button.displayName = 'Button';

package/src/button/index.ts

@@ -0,0 +1,3 @@
+export { Button, buttonTokens } from './button';
+
+export type { ButtonProps } from './button';

package/src/card/card.css

@@ -0,0 +1,7 @@
+.c-card {
+  @apply rounded-lg bg-gray-50-900 p-4 sm:p-8;
+}
+
+.c-card-elevate {
+  @apply bg-elevate;
+}

package/src/card/card.stories.tsx

@@ -0,0 +1,24 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { Card } from '.';
+
+const meta: Meta<typeof Card> = {
+  title: 'Components/Card',
+  component: Card,
+};
+
+export default meta;
+type Story = StoryObj<typeof Card>;
+
+export const Default: Story = {
+  args: {
+    children: 'Hello World 🌍',
+  },
+};
+
+export const WhiteCard: Story = {
+  name: 'Elevated Card',
+  args: {
+    children: 'Hello World 🌍',
+    variant: 'elevate',
+  },
+};

package/src/card/card.tsx

@@ -0,0 +1,27 @@
+import type { HTMLAttributes } from 'react';
+import { cva, VariantProps } from 'class-variance-authority';
+
+import './card.css';
+
+type CardStylesProps = VariantProps<typeof cardStyles>;
+const cardStyles = cva('c-card', {
+  variants: {
+    variant: {
+      default: 'c-card',
+      elevate: 'c-card-elevate',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+type CardProps = HTMLAttributes<HTMLDivElement> & CardStylesProps;
+
+export function Card({ children, className, variant, ...delegated }: CardProps) {
+  return (
+    <section className={cardStyles({ variant, className })} {...delegated}>
+      {children}
+    </section>
+  );
+}

package/src/card/index.ts

@@ -0,0 +1,3 @@
+export { Card } from './card';
+
+export const cardToken = 'c-card';

package/src/checkbox/checkbox.css

@@ -0,0 +1,30 @@
+.c-checkbox {
+  @apply flex h-3.5 w-3.5 cursor-pointer items-center justify-center rounded-sm border border-solid border-gray-100-800 bg-elevate;
+
+  &[aria-checked='true'] {
+    @apply border-cyan-700-200 bg-cyan-200-700;
+  }
+
+  &:focus {
+    @apply outline-none ring-1 ring-cyan-700-200 ring-offset-1;
+  }
+
+  &:disabled {
+    @apply cursor-default opacity-40;
+  }
+
+  &:readonly {
+    @apply cursor-default;
+  }
+
+  &__svg {
+    @apply h-2 w-2;
+
+    &-p1 {
+      @apply fill-cyan-700-200;
+    }
+    &-p2 {
+      @apply stroke-cyan-700-200;
+    }
+  }
+}

package/src/checkbox/checkbox.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+
+import { Label } from '../label';
+import { Checkbox } from './checkbox';
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+  argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Checkbox>;
+
+export const Example: Story = {
+  render: () => {
+    return <Checkbox defaultChecked={true} />;
+  },
+};
+
+export const Uncontrolled: Story = {
+  render: () => {
+    return <Checkbox defaultChecked={true} />;
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    return <Checkbox checked={checked} onCheckedChange={c => setChecked(Boolean(c))} />;
+  },
+};
+
+export const WithLabel: Story = {
+  render: () => {
+    return (
+      <div className="flex items-center space-x-2">
+        <Checkbox id="with-label-c1" defaultChecked={true} />
+        <Label htmlFor="with-label-c1">Accept terms and conditions.</Label>
+      </div>
+    );
+  },
+};
+
+export const Disabled: Story = {
+  render: () => {
+    return (
+      <div className="space-y-4">
+        <div className="flex items-center space-x-2">
+          <Checkbox id="disabled-c1" defaultChecked={true} disabled />
+          <Label htmlFor="disabled-c1">Accept terms and conditions.</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Checkbox id="disabled-c2" defaultChecked={false} disabled />
+          <Label htmlFor="disabled-c2">Accept terms and conditions.</Label>
+        </div>
+      </div>
+    );
+  },
+};

package/src/checkbox/checkbox.test.tsx

@@ -0,0 +1,16 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+
+import { Checkbox } from '.';
+
+describe('testing the checkbox', () => {
+  it('should trigger the onCheckedChange', () => {
+    const onChange = vi.fn();
+
+    render(<Checkbox onCheckedChange={onChange} defaultChecked={true} data-testid="chk" />);
+
+    fireEvent.click(screen.getByTestId('chk'));
+
+    expect(onChange).toBeCalledWith(false);
+    expect(onChange).toBeCalledTimes(1);
+  });
+});

package/src/checkbox/checkbox.tsx

@@ -0,0 +1,28 @@
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { ComponentProps, forwardRef } from 'react';
+
+import './checkbox.css';
+
+export type CheckboxRef = HTMLButtonElement;
+export type CheckboxProps = ComponentProps<typeof CheckboxPrimitive.Root>;
+
+export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>((props, ref) => {
+  return (
+    <CheckboxPrimitive.Root {...props} ref={ref} className="c-checkbox">
+      <CheckboxPrimitive.Indicator>
+        <svg viewBox="0 0 9 9" fill="none" className="c-checkbox__svg">
+          <path
+            className="c-checkbox__svg-p1"
+            d="M1.12 5.51a.559.559 0 01.832-.101l2.201 1.953-.427.624a.326.326 0 01-.486.06L1.21 6.245a.559.559 0 01-.09-.734z"
+          />
+          <path
+            className="c-checkbox__svg-p2"
+            d="M7.883 1.087c.043.03.053.09.023.132L3.669 7.132l-.154-.105L7.754 1.11a.093.093 0 01.129-.023z"
+          />
+        </svg>
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+});
+
+Checkbox.displayName = 'Checkbox';

package/src/checkbox/index.ts

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

package/src/colors/Colors.stories.tsx

@@ -0,0 +1,127 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { cx } from 'class-variance-authority';
+import { useDarkMode } from 'storybook-dark-mode';
+
+import rawColors from './colors.json';
+import colorPairing from './color-pairing.json';
+import colorDefaults from './color-defaults.json';
+import type { Color, ColorName, Colors } from './types';
+
+const meta: Meta = {
+  title: 'Colors',
+};
+
+const colors: Colors = rawColors;
+
+// The application for colors coming from Figma
+const applications: {
+  colorName: ColorName;
+  shade: number; // Defaults to light mode
+  application: string;
+}[] = [
+  {
+    colorName: 'pink',
+    shade: 300,
+    application: 'pricelist-bg',
+  },
+  {
+    colorName: 'pink',
+    shade: 600,
+    application: 'error',
+  },
+  {
+    colorName: 'gray',
+    shade: 50,
+    application: 'bg-gray',
+  },
+  {
+    colorName: 'gray',
+    shade: 100,
+    application: 'gutter',
+  },
+  {
+    colorName: 'gray',
+    shade: 500,
+    application: 'label',
+  },
+  {
+    colorName: 'gray',
+    shade: 700,
+    application: 'text, btn-text',
+  },
+  {
+    colorName: 'purple',
+    shade: 50,
+    application: 'btn-bg',
+  },
+  {
+    colorName: 'purple',
+    shade: 700,
+    application: 'pricelist-text',
+  },
+];
+
+export default meta;
+
+function ColorItem({ colorName, color }: { colorName: ColorName; color: Color }) {
+  const shades = Object.keys(color);
+
+  const isDark = useDarkMode();
+
+  // @ts-expect-error
+  const applicationsForMode = !isDark ? applications : applications.map(a => ({ ...a, shade: colorPairing[a.shade] }));
+
+  return (
+    <div>
+      <h2 className="text-gray">{colorName}</h2>
+      <div className="grid grid-cols-10">
+        {shades.map(shade => {
+          // @ts-expect-error
+          const def = color[shade] as string;
+
+          const applicatedAt = applicationsForMode.filter(a => a.colorName === colorName && a.shade == shade);
+          const isDefault = colorDefaults[colorName] == shade;
+
+          const textColor = parseInt(shade) > 400 ? '#fff' : `rgb(var(--c-color-${colorName}-900))`;
+
+          return (
+            <div>
+              <div
+                style={{ background: def, color: textColor }}
+                className={cx('relative flex h-24 flex-1 items-center justify-center')}
+              >
+                {!isDefault ? null : (
+                  <div
+                    className="h-[8px] w-[8px] rounded"
+                    style={{
+                      backgroundColor: 'currentColor',
+                    }}
+                  />
+                )}
+                <div className="absolute top-2 left-2 right-2 text-center text-sm">{shade}</div>
+              </div>
+              <div className={cx('p-4 text-center text-sm text-gray')}>
+                {applicatedAt.map(a => (
+                  <div key={a.application}>{a.application}</div>
+                ))}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+const colorNames = Object.keys(colors) as ColorName[];
+
+export const Default: StoryObj = {
+  args: {},
+  render: () => (
+    <div>
+      {colorNames.map(colorName => (
+        <ColorItem key={colorName} colorName={colorName} color={colors[colorName]} />
+      ))}
+    </div>
+  ),
+};