@crystallize/design-system 0.0.2 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "0.0.2",
+  "version": "1.0.0",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -12,40 +12,54 @@
       "require": "./dist/index.js",
       "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts"
+    },
+    "./tailwind-config": "./tailwind.config.cjs",
+    "./styles.css": {
+      "import": "./dist/index.css",
+      "require": "./dist/index.css"
     }
   },
   "dependencies": {
+    "@radix-ui/react-checkbox": "1.0.1",
     "@radix-ui/react-dialog": "1.0.2",
     "@radix-ui/react-dropdown-menu": "2.0.1",
-    "class-variance-authority": "^0.3.0",
-    "clsx": "^1.2.1",
+    "@radix-ui/react-progress": "^1.0.1",
+    "@radix-ui/react-radio-group": "1.1.0",
+    "@radix-ui/react-select": "1.1.2",
+    "class-variance-authority": "^0.4.0",
+    "hex-rgb": "4.3.0",
     "react": "17.0.1",
     "react-dom": "17.0.1"
   },
   "devDependencies": {
-    "@mdx-js/react": "^2.1.5",
-    "@storybook/addon-actions": "7.0.0-alpha.47",
-    "@storybook/addon-backgrounds": "7.0.0-alpha.47",
-    "@storybook/addon-docs": "^7.0.0-alpha.47",
-    "@storybook/addon-essentials": "^7.0.0-alpha.47",
-    "@storybook/addon-highlight": "7.0.0-alpha.47",
-    "@storybook/addon-interactions": "^7.0.0-alpha.47",
-    "@storybook/addon-links": "^7.0.0-alpha.47",
-    "@storybook/addon-measure": "7.0.0-alpha.47",
-    "@storybook/addon-outline": "7.0.0-alpha.47",
-    "@storybook/react": "^7.0.0-alpha.47",
-    "@storybook/react-vite": "^7.0.0-alpha.47",
+    "@mdx-js/react": "^2.2.1",
+    "@storybook/addon-actions": "7.0.0-beta.14",
+    "@storybook/addon-backgrounds": "7.0.0-beta.14",
+    "@storybook/addon-docs": "7.0.0-beta.14",
+    "@storybook/addon-essentials": "7.0.0-beta.14",
+    "@storybook/addon-highlight": "7.0.0-beta.14",
+    "@storybook/addon-interactions": "7.0.0-beta.14",
+    "@storybook/addon-links": "7.0.0-beta.14",
+    "@storybook/addon-measure": "7.0.0-beta.14",
+    "@storybook/addon-outline": "7.0.0-beta.14",
+    "@storybook/addons": "^6.5.15",
+    "@storybook/react": "7.0.0-beta.14",
+    "@storybook/react-vite": "7.0.0-beta.14",
     "@storybook/testing-library": "^0.0.13",
+    "@storybook/theming": "7.0.0-beta.14",
     "@types/react": "17.0.1",
     "@types/react-dom": "17.0.1",
-    "@vitejs/plugin-react": "^2.2.0",
-    "postcss": "^8.4.18",
-    "storybook": "^7.0.0-alpha.47",
-    "tailwindcss": "^3.2.1",
+    "@vitejs/plugin-react": "^3.0.1",
+    "concurrently": "^7.6.0",
+    "postcss": "^8.4.21",
+    "storybook": "7.0.0-beta.14",
+    "storybook-addon-designs": "^6.3.1",
+    "storybook-dark-mode": "^2.0.5",
+    "tailwindcss": "^3.2.4",
     "tsconfig": "0.0.0",
-    "tsup": "^6.3.0",
-    "typescript": "^4.8.4",
-    "vite": "^3.2.2"
+    "tsup": "^6.5.0",
+    "typescript": "^4.9.4",
+    "vite": "^4.0.4"
   },
   "keywords": [
     "react",
@@ -62,12 +76,18 @@
   "files": [
     "dist",
     "src",
-    "CHANGELOG.md"
+    "CHANGELOG.md",
+    "readme.md",
+    "tailwind.config.cjs"
   ],
   "scripts": {
-    "build": "tsup src/index.ts --format esm,cjs --dts",
-    "build-storybook": "storybook build",
-    "storybook": "storybook dev -p 6006 --no-open",
-    "dev": "tsup src/index.ts --format esm --dts --watch"
+    "build:storybook": "storybook build -s public",
+    "build:tw": "tailwindcss --content ./src/**/*.tsx,!./src/**/*.stories.tsx -c ./tailwind.config.cjs -i src/index.css -o dist/index.css --minify",
+    "build:tsup": "tsup src/index.ts --format esm,cjs --dts",
+    "build": "pnpm build:tw && pnpm build:tsup && pnpm build:storybook",
+    "dev:tw": "tailwindcss --content ./src/**/*.tsx,!./src/**/*.stories.tsx -c ./tailwind.config.cjs -i src/index.css -o dist/index.css --watch & tsup src/index.ts --format esm --dts --watch",
+    "dev:tsup": "tsup src/index.ts --format esm --dts --watch",
+    "dev:storybook": "storybook dev -p 6006 --no-open -s public",
+    "dev": "concurrently \"npm:dev:*\""
   }
 }

package/readme.md

@@ -0,0 +1,9 @@
+# @crystallize/design-system
+
+Buttons, colors and all the other visual primitives from Crystallize
+
+[Changelog](https://unpkg.com/@crystallize/design-system/CHANGELOG.md)
+
+## Documentation
+[https://design-system.crystallize.com](https://design-system.crystallize.com)
+

package/src/Tokens.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { tokens } from '.';
+
+function DisplayTokens() {
+  return <pre>{JSON.stringify(tokens, null, 2)}</pre>;
+}
+
+const meta: Meta<typeof DisplayTokens> = {
+  title: 'Tokens',
+  component: DisplayTokens,
+  argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DisplayTokens>;
+
+export const Default: Story = {};

package/src/action-menu/ActionMenu.stories.tsx

@@ -17,7 +17,9 @@ export const Default: Story = {
   render: () => (
     <ActionMenu>
       <ActionMenu.Item onSelect={() => console.warn('Download')}>Download</ActionMenu.Item>
-      <ActionMenu.Item onSelect={() => console.warn('Delete')}>Delete</ActionMenu.Item>
+      <ActionMenu.Item className="danger" onSelect={() => console.warn('Delete')}>
+        Delete
+      </ActionMenu.Item>
     </ActionMenu>
   ),
 };

package/src/action-menu/action-item.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { cx } from 'class-variance-authority';
 import type { HTMLAttributes } from 'react';
 
 import { DropdownMenu } from '../dropdown-menu';
@@ -9,15 +9,7 @@ type ItemProps = HTMLAttributes<HTMLLIElement> & {
 
 export function Item({ children, className, onSelect }: ItemProps) {
   return (
-    <DropdownMenu.Item
-      onClick={onSelect}
-      className={clsx(
-        'items-center text-density cursor-pointer flex font-sans font-medium text-sm gap-2 py-2.5 px-5',
-        'hover:bg-[#f4f4f4]',
-        '[&.danger]:text-error',
-        className,
-      )}
-    >
+    <DropdownMenu.Item onClick={onSelect} className={cx(className, 'c-action-menu-item')}>
       {children}
     </DropdownMenu.Item>
   );

package/src/action-menu/action-menu.css

@@ -0,0 +1,38 @@
+.c-action-menu {
+  @apply flex h-8 w-8 rotate-0 cursor-pointer flex-col items-center justify-center gap-[2px] rounded-md border-none bg-transparent p-1 -outline-offset-1 transition;
+  &-dot {
+    @apply h-[4px] w-[4px] rounded-full bg-gray;
+  }
+  &[data-state='open'],
+  [aria-expanded='true'] {
+    @apply flex-row gap-[3px];
+  }
+  &:focus-visible {
+    @apply outline outline-1 outline-inherit;
+    outline-color: currentColor;
+  }
+
+  &:not(:disabled):hover {
+    @apply gap-[3px] bg-gray-100-800 outline outline-1 outline-purple-200-700;
+  }
+
+  &:not(:disabled):active {
+    @apply scale-95 bg-purple-100-800;
+  }
+}
+
+.c-action-menu-item {
+  @apply flex cursor-pointer items-center gap-2 py-2.5 px-5 font-sans text-sm font-medium text-gray;
+
+  &:hover {
+    @apply bg-gray-50-900;
+  }
+
+  &:focus {
+    @apply bg-gray-50-900 outline-none;
+  }
+
+  &.danger {
+    @apply text-pink-600-300;
+  }
+}

package/src/action-menu/action-menu.tsx

@@ -1,8 +1,6 @@
-import clsx from 'clsx';
 import type { ReactNode } from 'react';
 
 import { DropdownMenu } from '../dropdown-menu';
-import { Icon } from '../icons';
 
 import { Item } from './action-item';
 
@@ -14,18 +12,11 @@ type ActionMenuProps = {
 export function ActionMenu({ children, tabIndex }: ActionMenuProps) {
   return (
     <DropdownMenu.Root content={children} alignContent="center">
-      <button
-        tabIndex={tabIndex}
-        type="button"
-        className={clsx(
-          'items-center bg-transparent rounded-full border-none cursor-pointer flex justify-center p-1',
-          'hover:bg-gray-6 focus:bg-gray-6 focus:outline-offset-2 focus:outline focus:outline-1 focus:outline-glacier focus-visible:outline-offset-2 focus-visible:outline focus-visible:outline-1 focus-visible:outline-glacier',
-          'active:scale-95',
-        )}
-        aria-label="more options"
-      >
+      <button tabIndex={tabIndex} type="button" className="c-action-menu" aria-label="more options">
         <span className="sr-only">Open more options</span>
-        <Icon.Dots />
+        <span className="c-action-menu-dot"></span>
+        <span className="c-action-menu-dot"></span>
+        <span className="c-action-menu-dot"></span>
       </button>
     </DropdownMenu.Root>
   );

package/src/action-menu/index.tsx

@@ -1 +1,3 @@
+import './action-menu.css';
+
 export { ActionMenu } from './action-menu';

package/src/avatar/Avatar.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Avatar } from '.';
+
+const meta: Meta<typeof Avatar> = {
+  title: 'Components/Avatar',
+  component: Avatar,
+  argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Avatar>;
+
+export const Default: Story = {
+  args: {
+    name: 'Crystallize Team',
+    size: 'md',
+  },
+};

package/src/avatar/avatar.css

@@ -0,0 +1,23 @@
+.c-avatar {
+  @apply flex items-center justify-center rounded-full border border-solid border-cyan-800-100 bg-cyan-200-700 text-cyan-800-100;
+}
+
+.c-avatar-initials {
+  @apply font-bold leading-none tracking-tight;
+}
+
+.c-avatar-md {
+  @apply h-7 w-7 text-xs;
+}
+
+.c-avatar-lg {
+  @apply h-9 w-9 text-sm;
+}
+
+.c-avatar-xl {
+  @apply h-12 w-12 text-base;
+}
+
+.c-avatar-2xl {
+  @apply h-16 w-16 text-xl;
+}

package/src/avatar/avatar.tsx

@@ -0,0 +1,34 @@
+import { forwardRef } from 'react';
+import { cva, VariantProps } from 'class-variance-authority';
+
+import { getInitials } from './get-initials';
+import './avatar.css';
+
+const avatarClassName = cva(['c-avatar'], {
+  variants: {
+    size: {
+      md: 'c-avatar-md',
+      lg: 'c-avatar-lg',
+      xl: 'c-avatar-xl',
+      '2xl': 'c-avatar-2xl',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+type AvatarProps = React.ComponentPropsWithRef<'div'> &
+  VariantProps<typeof avatarClassName> & {
+    name: string;
+  };
+
+export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(({ name, size, className, ...delegated }, ref) => {
+  return (
+    <div ref={ref} {...delegated} title={name} className={avatarClassName({ size, className })}>
+      <span className="c-avatar-initials">{getInitials(name)}</span>
+    </div>
+  );
+});
+
+Avatar.displayName = 'Avatar';

package/src/avatar/get-initials.ts

@@ -0,0 +1,5 @@
+export const getInitials = (name: string) => {
+  const [first, second] = name.split(' ');
+  const initials = `${first?.charAt(0) ?? ''}${second?.charAt(0) ?? ''}`;
+  return initials.toUpperCase();
+};

package/src/avatar/index.ts

@@ -0,0 +1 @@
+export { Avatar } from './avatar';

package/src/button/Button.stories.tsx

@@ -4,60 +4,102 @@ import { Button } from '.';
 const meta: Meta<typeof Button> = {
   title: 'Components/Button',
   component: Button,
-  argTypes: {},
+  argTypes: {
+    variant: {
+      defaultValue: 'default',
+    },
+    intent: {
+      defaultValue: 'default',
+    },
+    size: {
+      defaultValue: 'sm',
+    },
+  },
 };
 
 export default meta;
 type Story = StoryObj<typeof Button>;
 
-const variants = ['primary', 'secondary', 'secondary-dark', 'danger'] as const;
-const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
+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 className="grid grid-cols-5 gap-6 justify-items-center">
-        {sizes.map(size => {
-          return variants.map((variant, idx) => (
-            <>
-              {idx === 0 && <span className="place-self-start text-slate-500">{size}</span>}
-              <Button variant={variant} size={size}>
-                Click me
-              </Button>
-            </>
-          ));
-        })}
+      <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 Primary: Story = {
+export const Default: Story = {
+  args: {
+    intent: 'default',
+    variant: 'default',
+    children: 'Button',
+  },
+};
+
+export const Elevate: Story = {
   args: {
-    variant: 'primary',
+    intent: 'default',
+    variant: 'elevate',
     children: 'Button',
   },
 };
 
-export const Secondary: Story = {
+export const Action: Story = {
   args: {
-    variant: 'secondary',
+    intent: 'action',
+    variant: 'default',
     children: 'Button',
   },
 };
 
 export const Danger: Story = {
   args: {
-    variant: 'danger',
+    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 Disabled: Story = {
+export const IsLoading: Story = {
   args: {
-    variant: 'primary',
+    intent: 'default',
+    variant: 'default',
     children: 'Button',
-    disabled: true,
+    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;
+  }
+}