@crystallize/design-system 1.3.1 → 1.3.2

package/package.json

@@ -1,88 +1,100 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.3.1",
-  "license": "MIT",
-  "main": "dist/index.js",
-  "typings": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "engines": {
-    "node": ">=12"
-  },
-  "scripts": {
-    "start": "tsdx watch",
-    "build": "tsdx build",
-    "test": "tsdx test --passWithNoTests",
-    "lint": "tsdx lint",
-    "prepare": "tsdx build",
-    "size": "size-limit",
-    "analyze": "size-limit --why",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+  "version": "1.3.2",
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "publishConfig": {
+    "access": "public"
   },
-  "peerDependencies": {
-    "react": ">=16",
-    "styled-components": "^5.2.3"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "tsdx lint"
+  "exports": {
+    ".": {
+      "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"
     }
   },
-  "prettier": {
-    "printWidth": 80,
-    "semi": true,
-    "singleQuote": true,
-    "trailingComma": "es5"
+  "dependencies": {
+    "@radix-ui/react-checkbox": "1.0.1",
+    "@radix-ui/react-dialog": "1.0.2",
+    "@radix-ui/react-dropdown-menu": "2.0.1",
+    "@radix-ui/react-progress": "^1.0.1",
+    "@radix-ui/react-radio-group": "1.1.0",
+    "@radix-ui/react-select": "1.1.2",
+    "@radix-ui/react-slider": "^1.1.0",
+    "class-variance-authority": "^0.4.0",
+    "hex-rgb": "4.3.0",
+    "react": "17.0.1",
+    "react-dom": "17.0.1"
   },
-  "author": "Deeksha Sharma",
-  "module": "dist/design-system.esm.js",
-  "private": false,
-  "size-limit": [
-    {
-      "path": "dist/design-system.cjs.production.min.js",
-      "limit": "10 KB"
-    },
+  "devDependencies": {
+    "@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": "^3.0.1",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^12.0.0",
+    "@types/testing-library__jest-dom": "^5.14.5",
+    "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.5.0",
+    "typescript": "^4.9.4",
+    "vite": "^4.1.1",
+    "vitest": "^0.28.4"
+  },
+  "keywords": [
+    "react",
+    "design system"
+  ],
+  "license": "MIT",
+  "contributors": [
     {
-      "path": "dist/design-system.esm.js",
-      "limit": "10 KB"
+      "email": "daniel.salvado@gmail.com",
+      "name": "Daniel Salvado",
+      "url": "https://www.danielsalvado.com/"
     }
   ],
-  "devDependencies": {
-    "@babel/core": "^7.13.14",
-    "@size-limit/preset-small-lib": "^4.10.2",
-    "@storybook/addon-essentials": "^6.2.3",
-    "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.2.3",
-    "@storybook/addons": "^6.2.3",
-    "@storybook/react": "^6.2.3",
-    "@testing-library/jest-dom": "^5.11.10",
-    "@testing-library/react": "^11.2.6",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.3",
-    "@types/styled-components": "^5.1.9",
-    "@types/testing-library__jest-dom": "^5.9.5",
-    "babel-loader": "^8.2.2",
-    "chromatic": "^5.7.1",
-    "husky": "^6.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-is": "^17.0.2",
-    "size-limit": "^4.10.2",
-    "tsdx": "^0.14.1",
-    "tslib": "^2.2.0",
-    "typescript": "^4.2.3",
-    "styled-components": "^5.2.3"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/CrystallizeAPI/design-system"
-  },
-  "release": {
-    "branches": [
-      "main",
-      "beta"
-    ]
+  "files": [
+    "dist",
+    "src",
+    "CHANGELOG.md",
+    "readme.md",
+    "tailwind.config.cjs"
+  ],
+  "scripts": {
+    "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:*\"",
+    "test": "vitest run src/",
+    "test:watch": "vitest src/"
   }
-}
+}

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

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ActionMenu } from '.';
+
+const meta: Meta<typeof ActionMenu> = {
+  title: 'Components/ActionMenu',
+  component: ActionMenu,
+  argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ActionMenu>;
+
+export const Default: Story = {
+  args: {},
+  render: () => (
+    <ActionMenu>
+      <ActionMenu.Item onSelect={() => console.warn('Download')}>Download</ActionMenu.Item>
+      <ActionMenu.Item className="danger" onSelect={() => console.warn('Delete')}>
+        Delete
+      </ActionMenu.Item>
+    </ActionMenu>
+  ),
+};

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

@@ -0,0 +1,16 @@
+import { cx } from 'class-variance-authority';
+import type { HTMLAttributes } from 'react';
+
+import { DropdownMenu } from '../dropdown-menu';
+
+type ItemProps = HTMLAttributes<HTMLLIElement> & {
+  onSelect?: () => void;
+};
+
+export function Item({ children, className, onSelect }: ItemProps) {
+  return (
+    <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 shrink-0 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

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+
+import { DropdownMenu } from '../dropdown-menu';
+
+import { Item } from './action-item';
+
+type ActionMenuProps = {
+  children: ReactNode;
+  tabIndex?: number;
+};
+
+export function ActionMenu({ children, tabIndex }: ActionMenuProps) {
+  return (
+    <DropdownMenu.Root content={children} alignContent="center">
+      <button tabIndex={tabIndex} type="button" className="c-action-menu" aria-label="more options">
+        <span className="sr-only">Open more options</span>
+        <span className="c-action-menu-dot"></span>
+        <span className="c-action-menu-dot"></span>
+        <span className="c-action-menu-dot"></span>
+      </button>
+    </DropdownMenu.Root>
+  );
+}
+
+ActionMenu.Item = Item;

package/src/action-menu/index.tsx

@@ -0,0 +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

@@ -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;
+  }
+}