@crystallize/design-system 0.0.0

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@crystallize/design-system",
+  "version": "0.0.0",
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "dependencies": {
+    "@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",
+    "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",
+    "@storybook/testing-library": "^0.0.13",
+    "@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",
+    "tsconfig": "0.0.0",
+    "tsup": "^6.3.0",
+    "typescript": "^4.8.4",
+    "vite": "^3.2.2"
+  },
+  "keywords": [
+    "react",
+    "design system"
+  ],
+  "license": "MIT",
+  "contributors": [
+    {
+      "email": "daniel.salvado@gmail.com",
+      "name": "Daniel Salvado",
+      "url": "https://www.danielsalvado.com/"
+    }
+  ],
+  "files": [
+    "dist",
+    "src",
+    "CHANGELOG.md"
+  ],
+  "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"
+  }
+}

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

@@ -0,0 +1,23 @@
+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 onSelect={() => console.warn('Delete')}>Delete</ActionMenu.Item>
+    </ActionMenu>
+  ),
+};

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

@@ -0,0 +1,24 @@
+import clsx from 'clsx';
+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={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,
+      )}
+    >
+      {children}
+    </DropdownMenu.Item>
+  );
+}

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

@@ -0,0 +1,37 @@
+import clsx from 'clsx';
+import type { ReactNode } from 'react';
+
+import { DropdownMenu } from '../dropdown-menu';
+import { Icon } from '../icons';
+
+import { Item } from './action-item';
+
+type ActionMenuProps = {
+  children: ReactNode;
+  className?: string;
+  tabIndex?: number;
+};
+
+export function ActionMenu({ children, className, tabIndex }: ActionMenuProps) {
+  return (
+    // @ts-expect-error
+    <DropdownMenu.Root content={children}>
+      <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',
+          className,
+        )}
+        aria-label="more options"
+      >
+        <span className="sr-only">Open more options</span>
+        <Icon.Dots />
+      </button>
+    </DropdownMenu.Root>
+  );
+}
+
+ActionMenu.Item = Item;

package/src/action-menu/index.tsx

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

package/src/button/Button.stories.tsx

@@ -0,0 +1,63 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { Button } from '.';
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  argTypes: {},
+};
+
+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;
+
+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>
+    );
+  },
+};
+
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+    children: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    variant: 'secondary',
+    children: 'Button',
+  },
+};
+
+export const Danger: Story = {
+  args: {
+    variant: 'danger',
+    children: 'Button',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    variant: 'primary',
+    children: 'Button',
+    disabled: true,
+  },
+};

package/src/button/button.tsx

@@ -0,0 +1,50 @@
+import { ComponentPropsWithRef, forwardRef } from 'react';
+import { cva, VariantProps } from 'class-variance-authority';
+
+const DEFAULT_TEXT_COLOR = 'text-black-text disabled:text-black-text/50';
+
+type ButtonStylesProps = VariantProps<typeof buttonStyles>;
+const buttonStyles = cva(
+  [
+    'inline-grid grid-flow-col items-center gap-2 rounded border-none font-medium cursor-pointer whitespace-nowrap',
+    'disabled:cursor-default disabled:scale-100 disabled:drop-shadow-none',
+    'active:scale-95',
+    'focus:drop-shadow-active',
+    'hover:drop-shadow-hover',
+  ],
+  {
+    variants: {
+      variant: {
+        primary: `bg-neptune disabled:bg-neptune-light ${DEFAULT_TEXT_COLOR}`,
+        secondary: `bg-white disabled:bg-[#FBFCFC] ${DEFAULT_TEXT_COLOR}`,
+        'secondary-dark': `bg-cosmos disabled:bg-[#F7F8F9] ${DEFAULT_TEXT_COLOR}`,
+        danger: 'text-white bg-error disabled:bg-error/50 disabled:text-white/75',
+      },
+      size: {
+        xs: 'h-8 px-5',
+        sm: 'h-9 px-6',
+        md: 'h-10 px-7',
+        lg: 'h-10 px-8',
+        xl: 'h-11 px-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'primary',
+      size: 'sm',
+    },
+  },
+);
+
+export type ButtonProps = ComponentPropsWithRef<'button'> & ButtonStylesProps;
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ children, className, type = 'button', size, variant, ...delegated }, ref) => {
+    return (
+      <button ref={ref} type={type} className={buttonStyles({ size, variant, className })} {...delegated}>
+        {children}
+      </button>
+    );
+  },
+);
+
+Button.displayName = 'Button';

package/src/button/index.ts

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

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

@@ -0,0 +1,86 @@
+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',
+  },
+};

package/src/button copy/button.tsx

@@ -0,0 +1,61 @@
+import { ComponentPropsWithRef, forwardRef } from 'react';
+import { cva, VariantProps } from 'class-variance-authority';
+
+type ButtonStylesProps = VariantProps<typeof buttonStyles>;
+const buttonStyles = cva(
+  [
+    'inline-grid grid-flow-col items-center gap-2 rounded font-medium cursor-pointer whitespace-nowrap',
+    'disabled:cursor-default disabled:scale-100 disabled:shadow-none',
+    'active:scale-95',
+    'focus:shadow',
+    'hover:shadow',
+    'focus-visible:outline-inherit focus-visible:outline-offset-1 focus-visible:outline focus-visible:outline-1',
+  ],
+  {
+    variants: {
+      variant: {
+        contained: 'bg-cosmos',
+        outline: 'bg-transparent border border-galaxy border-solid text-galaxy',
+        link: [
+          'text-sky-700',
+          'hover:shadow-none hover:text-sky-500',
+          'focus:shadow-none focus:text-sky-500',
+          'active:scale-100',
+        ],
+        text: ['hover:shadow-none hover:bg-cosmos', 'focus:shadow-none focus:bg-cosmos'],
+      },
+      intent: {
+        default: '',
+        primary: ['bg-cyan-200 text-cyan-800', 'hover:bg-cyan-300', 'focus:bg-cyan-300'],
+        success: ['bg-emerald-200 text-emerald-800', 'hover:bg-emerald-300', 'focus:bg-emerald-300'],
+        danger: ['bg-red-200 text-red-800', 'hover:bg-red-300', 'focus:bg-red-300'],
+      },
+      size: {
+        xs: 'h-8 px-5',
+        sm: 'h-9 px-6',
+        md: 'h-10 px-7',
+        lg: 'h-10 px-8',
+        xl: 'h-11 px-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'contained',
+      intent: 'default',
+      size: 'sm',
+    },
+  },
+);
+
+export type ButtonProps = ComponentPropsWithRef<'button'> & ButtonStylesProps;
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ children, className, type = 'button', size, variant, intent, ...delegated }, ref) => {
+    return (
+      <button ref={ref} type={type} className={buttonStyles({ size, variant, intent, className })} {...delegated}>
+        {children}
+      </button>
+    );
+  },
+);
+
+Button.displayName = 'Button';

package/src/button copy/index.ts

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

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: 'White Card',
+  args: {
+    children: 'Hello World 🌍',
+    variant: 'white',
+  },
+};

package/src/card/card.tsx

@@ -0,0 +1,25 @@
+import type { HTMLAttributes } from 'react';
+import { cva, VariantProps } from 'class-variance-authority';
+
+type CardStylesProps = VariantProps<typeof cardStyles>;
+const cardStyles = cva('rounded-lg p-4 sm:p-8', {
+  variants: {
+    variant: {
+      gray: 'bg-jupiter',
+      white: 'bg-white',
+    },
+  },
+  defaultVariants: {
+    variant: 'gray',
+  },
+});
+
+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 @@
+export { Card } from './card';

package/src/colors/Colors.stories.mdx

@@ -0,0 +1,33 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';
+
+<Meta title="Colors" />
+
+# Colors
+
+<ColorPalette>
+  <ColorItem
+    title="color.density"
+    subtitle="Lorem ispum"
+    colors={{ Density: '#4d525b'}}
+  />
+  <ColorItem
+    title="color.label"
+    subtitle="Lorem ispum"
+    colors={{ Label: '#9095a8'}}
+  />
+  <ColorItem
+    title="color.neptune"
+    subtitle="Lorem ispum"
+    colors={{ Neptune: '#bff6f8'}}
+  />
+  <ColorItem
+    title="color.jupiter"
+    subtitle="Lorem ispum"
+    colors={{ Jupiter: '#eeeff1'}}
+  />
+  <ColorItem
+    title="color.gray"
+    subtitle="Shades of gray"
+    colors={{ 'gray-1': '#333333', 'gray-2': '#4f4f4f', 'gray-3': '#828282', 'gray-4': '#bdbdbd', 'gray-5': '#e0e0e0', 'gray-6': '#f2f2f2' }}
+  />
+</ColorPalette>

package/src/dialog/Dialog.stories.tsx

@@ -0,0 +1,165 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Dialog, showDialog, showWarning, showConfirm, showInfo, showError } from '.';
+import { ActionMenu } from '../action-menu';
+import { Button } from '../button';
+
+const meta: Meta<typeof Dialog> = {
+  title: 'Components/Dialog',
+  component: Dialog,
+  argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Dialog>;
+
+const Lorem = () => (
+  <p className="py-6">
+    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis neque id, blanditiis exercitationem doloremque
+    quam ab minima architecto culpa, nam nobis labore quibusdam veniam maiores. Veritatis non maxime ut magnam?
+  </p>
+);
+
+export const Component: Story = {
+  render: () => (
+    <Dialog>
+      <Dialog.Trigger asChild>
+        <Button>Open dialog</Button>
+      </Dialog.Trigger>
+      <Dialog.Content>
+        <Dialog.Title>This is a normal Dialog</Dialog.Title>
+        <Dialog.Description>That is described in a declarative way</Dialog.Description>
+        <div className="flex items-center justify-between">
+          Here will go the main content
+          <ActionMenu>
+            <ActionMenu.Item onSelect={() => console.warn('Download')}>Download</ActionMenu.Item>
+            <ActionMenu.Item className="danger" onSelect={() => console.warn('Delete')}>
+              Delete
+            </ActionMenu.Item>
+          </ActionMenu>
+        </div>
+      </Dialog.Content>
+    </Dialog>
+  ),
+};
+
+export const ComponentWithDangerAction: Story = {
+  name: 'With danger action',
+  render: () => (
+    <Dialog>
+      <Dialog.Trigger asChild>
+        <Button>Open dialog</Button>
+      </Dialog.Trigger>
+      <Dialog.Content>
+        <Dialog.Title>A Dialog</Dialog.Title>
+        <div>
+          <Lorem />
+          <div className="flex gap-4 justify-end">
+            <Button variant="secondary-dark">Cancel</Button>
+            <Button variant="danger">Delete</Button>
+          </div>
+        </div>
+      </Dialog.Content>
+    </Dialog>
+  ),
+};
+
+export const ShowConfirm: Story = {
+  name: 'Show confirm',
+  render: () => {
+    const handleClick = () => {
+      showConfirm({
+        title: 'We need your confirmation',
+        description: 'In order to proceed to you account we need your confirmation',
+        content: (
+          <p className="my-6">
+            We really like cookies and our cookies is what allow us to provide you with an awesome user experience. Do
+            you allow us to set some cookies for you?
+          </p>
+        ),
+        okText: 'Yes sure',
+        cancelText: `I don't really like cookies`,
+        onCancel() {
+          console.warn('you canceled');
+        },
+        onOk() {
+          console.warn('you confirmed');
+        },
+      });
+    };
+
+    return <Button onClick={handleClick}>showConfirm</Button>;
+  },
+};
+
+export const ShowWarning: Story = {
+  name: 'Show warning',
+  render: () => {
+    const handleClick = () => {
+      showWarning({
+        title: 'A warning',
+        description: 'This is a warning dialog',
+        content: <Lorem />,
+        okText: `That's OK`,
+        onOk() {
+          console.warn('ok');
+        },
+      });
+    };
+
+    return <Button onClick={handleClick}>showWarning</Button>;
+  },
+};
+
+export const ShowError: Story = {
+  name: 'Show error',
+  render: () => {
+    const handleClick = () => {
+      showError({
+        title: 'Error',
+        description: 'This is an error dialog',
+        content: <Lorem />,
+        okText: `That's not good`,
+        onOk() {
+          console.warn('ok');
+        },
+      });
+    };
+
+    return <Button onClick={handleClick}>showError</Button>;
+  },
+};
+
+export const ShowInfo: Story = {
+  name: 'Show info',
+  render: () => {
+    const handleClick = () => {
+      showInfo({
+        title: 'Information',
+        description: 'This is an informative dialog',
+        content: <Lorem />,
+        okText: `I'm fine with that`,
+        onOk() {
+          console.warn('ok');
+        },
+      });
+    };
+
+    return <Button onClick={handleClick}>showInfo</Button>;
+  },
+};
+
+export const ShowDialog: Story = {
+  name: 'Show dialog',
+  render: () => {
+    const handleClick = () => {
+      showDialog({
+        title: 'Just to let you know',
+        content: <Lorem />,
+      });
+    };
+
+    return <Button onClick={handleClick}>showDialog</Button>;
+  },
+};