@crystallize/design-system 0.2.0 → 1.0.0

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/label.css

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

package/src/label/label.tsx

@@ -1,11 +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('text-xs font-medium text-gray-400', className)} {...delegated} />;
+  return <label ref={ref} className={cx('c-label', className)} {...delegated} />;
 });
 
 Label.displayName = 'Label';

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

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

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.tsx

@@ -1,21 +1,14 @@
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-import { cx } from 'class-variance-authority';
 import type { ComponentProps } from 'react';
 
+import './radio.css';
+
 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 {...props} className="c-radio-item">
+      <RadioGroupPrimitive.Indicator className="c-radio-indicator" />
     </RadioGroupPrimitive.Item>
   );
 }

package/src/select/select-item.tsx

@@ -1,6 +1,5 @@
 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>;
@@ -9,15 +8,7 @@ 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.Item className="c-select-item" ref={ref} {...delegated}>
       <SelectPrimitives.ItemText>{children}</SelectPrimitives.ItemText>
       <SelectPrimitives.ItemIndicator />
     </SelectPrimitives.Item>

package/src/select/select-root.tsx

@@ -1,7 +1,7 @@
 import { ComponentProps, forwardRef } from 'react';
 import * as SelectPrimitives from '@radix-ui/react-select';
 
-import { Icon } from '../icons';
+import { Icon } from '../iconography';
 
 export type SelectRef = HTMLButtonElement;
 export type SelectProps = ComponentProps<typeof SelectPrimitives.Root> & {
@@ -14,22 +14,15 @@ 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>}
-          />
+        <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="overflow-hidden rounded bg-white text-black-text shadow">
+          <SelectPrimitives.Content className="c-select-content">
             <SelectPrimitives.ScrollUpButton />
-            <SelectPrimitives.Viewport className="py-2">{children}</SelectPrimitives.Viewport>
+            <SelectPrimitives.Viewport className="c-select-viewport">{children}</SelectPrimitives.Viewport>
             <SelectPrimitives.ScrollDownButton />
           </SelectPrimitives.Content>
         </SelectPrimitives.Portal>

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

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import type { Meta } from '@storybook/react';
+
 import { Select } from './select';
 import { Label } from '../label';
 
@@ -60,3 +61,14 @@ export const WithLabel = () => {
     </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

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

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/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],
+};

package/src/button copy/ButtonCopy.stories.tsx

@@ -1,86 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import { Button } from '.';
-
-const meta: Meta<typeof Button> = {
-  title: 'Components/ButtonCopy',
-  component: Button,
-  argTypes: {},
-};
-
-export default meta;
-type Story = StoryObj<typeof Button>;
-
-const variants = ['contained', 'outline', 'link', 'text'] as const;
-const intent = ['default', 'primary', 'success', 'danger'] as const;
-const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
-
-export const AllButton: Story = {
-  name: 'All Buttons',
-  render: () => {
-    return (
-      <div className="grid grid-cols-4 gap-6 justify-items-center">
-        {sizes.map(size =>
-          variants.map(variant =>
-            intent.map(intent => (
-              <Button variant={variant} size={size} intent={intent}>
-                Click me
-              </Button>
-            )),
-          ),
-        )}
-      </div>
-    );
-  },
-};
-
-export const Contained: Story = {
-  args: {
-    variant: 'contained',
-    children: 'Button',
-  },
-};
-
-export const Outline: Story = {
-  args: {
-    variant: 'outline',
-    children: 'Button',
-  },
-};
-
-export const Link: Story = {
-  args: {
-    variant: 'link',
-    children: 'Button',
-  },
-};
-
-export const Text: Story = {
-  args: {
-    variant: 'text',
-    children: 'Button',
-  },
-};
-
-export const Primary: Story = {
-  args: {
-    variant: 'contained',
-    children: 'Button',
-    intent: 'primary',
-  },
-};
-
-export const Success: Story = {
-  args: {
-    variant: 'contained',
-    children: 'Button',
-    intent: 'success',
-  },
-};
-
-export const Danger: Story = {
-  args: {
-    variant: 'contained',
-    children: 'Button',
-    intent: 'danger',
-  },
-};