@crystallize/design-system 1.4.0 → 1.4.2

package/src/colors/color-defaults.json

@@ -0,0 +1,15 @@
+{
+  "cyan": "200",
+  "pink": "300",
+  "gray": "700",
+  "purple": "50",
+  "green": "400",
+  "orange": "200",
+  "s-red": "400",
+  "s-orange": "300",
+  "s-yellow": "200",
+  "s-green": "300",
+  "s-blue": "400",
+  "s-purple": "400",
+  "s-pink": "300"
+}

package/src/colors/color-pairing.json

@@ -0,0 +1,12 @@
+{
+  "50": 900,
+  "100": 800,
+  "200": 700,
+  "300": 600,
+  "400": 500,
+  "500": 400,
+  "600": 300,
+  "700": 200,
+  "800": 100,
+  "900": 50
+}

package/src/colors/colors.json

@@ -0,0 +1,158 @@
+{
+  "cyan": {
+    "50": "#eefdfc",
+    "100": "#bff6f8",
+    "200": "#acf1f5",
+    "300": "#73e5ed",
+    "400": "#33d0dd",
+    "500": "#17b3c3",
+    "600": "#1690a4",
+    "700": "#197385",
+    "800": "#1d5e6d",
+    "900": "#1c4e5d"
+  },
+  "pink": {
+    "50": "#fef1f9",
+    "100": "#fee5f4",
+    "200": "#ffccec",
+    "300": "#ffa1db",
+    "400": "#ff66c0",
+    "500": "#fb39a4",
+    "600": "#eb1782",
+    "700": "#cd0966",
+    "800": "#a90b54",
+    "900": "#8d0e49"
+  },
+  "gray": {
+    "50": "#f5f5f6",
+    "100": "#e4e5e9",
+    "200": "#cccfd5",
+    "300": "#a9aeb7",
+    "400": "#7e8592",
+    "500": "#626778",
+    "600": "#545866",
+    "700": "#4c4f5a",
+    "800": "#40424a",
+    "900": "#393a40"
+  },
+  "purple": {
+    "50": "#f7f6f9",
+    "100": "#eeecf2",
+    "200": "#d8d5e2",
+    "300": "#b6b0c9",
+    "400": "#8e85ab",
+    "500": "#706691",
+    "600": "#5b5178",
+    "700": "#4b4262",
+    "800": "#403953",
+    "900": "#393347"
+  },
+  "green": {
+    "50": "#f3f8f8",
+    "100": "#dfebee",
+    "200": "#c3dade",
+    "300": "#9abfc6",
+    "400": "#699ca7",
+    "500": "#528693",
+    "600": "#436a77",
+    "700": "#3b5863",
+    "800": "#374b53",
+    "900": "#314148"
+  },
+  "orange": {
+    "50": "#fff9eb",
+    "100": "#ffedc6",
+    "200": "#ffde99",
+    "300": "#ffbf4a",
+    "400": "#ffa520",
+    "500": "#f98107",
+    "600": "#dd5c02",
+    "700": "#b73d06",
+    "800": "#942e0c",
+    "900": "#7a270d"
+  },
+  "s-red": {
+    "50": "#fef2f2",
+    "100": "#ffe1e1",
+    "200": "#ffc8c8",
+    "300": "#ffadad",
+    "400": "#fd6c6c",
+    "500": "#f53e3e",
+    "600": "#e22020",
+    "700": "#be1717",
+    "800": "#9d1717",
+    "900": "#821a1a"
+  },
+  "s-orange": {
+    "50": "#fff7ed",
+    "100": "#ffedd5",
+    "200": "#ffd6a5",
+    "300": "#ffbb72",
+    "400": "#fd943a",
+    "500": "#fc7513",
+    "600": "#ed5909",
+    "700": "#c4420a",
+    "800": "#9c3410",
+    "900": "#7d2d11"
+  },
+  "s-yellow": {
+    "50": "#fefee8",
+    "100": "#fdffb6",
+    "200": "#fffe88",
+    "300": "#fff744",
+    "400": "#fee911",
+    "500": "#eecf04",
+    "600": "#cda201",
+    "700": "#a47404",
+    "800": "#875b0c",
+    "900": "#734a10"
+  },
+  "s-green": {
+    "50": "#f2ffee",
+    "100": "#deffd8",
+    "200": "#caffbf",
+    "300": "#8dfd78",
+    "400": "#53f236",
+    "500": "#2cdb0c",
+    "600": "#1eb603",
+    "700": "#1b8e07",
+    "800": "#1a700b",
+    "900": "#165b0c"
+  },
+  "s-blue": {
+    "50": "#eff5ff",
+    "100": "#dae7ff",
+    "200": "#bed5ff",
+    "300": "#a0c4ff",
+    "400": "#5d96fd",
+    "500": "#376ffa",
+    "600": "#214fef",
+    "700": "#193adc",
+    "800": "#1b31b2",
+    "900": "#1c2f8c"
+  },
+  "s-purple": {
+    "50": "#f4f3ff",
+    "100": "#ebe8ff",
+    "200": "#d9d5ff",
+    "300": "#bdb2ff",
+    "400": "#9d88fd",
+    "500": "#7e58fa",
+    "600": "#6f35f2",
+    "700": "#6023de",
+    "800": "#501dba",
+    "900": "#431a98"
+  },
+  "s-pink": {
+    "50": "#fff4ff",
+    "100": "#ffe7ff",
+    "200": "#ffc6ff",
+    "300": "#fea9fa",
+    "400": "#fc76f4",
+    "500": "#f342e7",
+    "600": "#d722c8",
+    "700": "#b219a1",
+    "800": "#921684",
+    "900": "#771869"
+  }
+}

package/src/colors/index.ts

@@ -0,0 +1 @@
+export { default as colors } from './colors.json';

package/src/colors/old-to-new.txt

@@ -0,0 +1,19 @@
+## Names
+
+text-dark = dark (shade 700)
+neptune = cyan (shade 100)
+astroid = blue (shade 500)
+cosmos = grey (shade 50)
+glacier = green (shade 200)
+jupiter = grey-two-do-we-need-this (shade 100)
+error = pink (shade 600)
+galaxy = blue-two-do-we-need-this (shade 800)
+success = green-two-do-we-need-this (shade 200)
+
+Duplicates:
+density = text-dark
+
+
+## Classes
+
+text-dark-text = text-gray

package/src/colors/types.ts

@@ -0,0 +1,29 @@
+export type Color = {
+  50: string;
+  100: string;
+  200: string;
+  300: string;
+  400: string;
+  500: string;
+  600: string;
+  700: string;
+  800: string;
+  900: string;
+};
+
+export type ColorName =
+  | 'cyan'
+  | 'pink'
+  | 'gray'
+  | 'purple'
+  | 'green'
+  | 'orange'
+  | 's-red'
+  | 's-orange'
+  | 's-yellow'
+  | 's-green'
+  | 's-blue'
+  | 's-purple'
+  | 's-pink';
+
+export type Colors = Record<ColorName, Color>;

package/src/dialog/Dialog.stories.tsx

@@ -0,0 +1,168 @@
+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="leading-6">
+    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis neque id, blanditiis exercitationem doloremque
+    quam ab minima architecto culpa.
+  </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>
+          <Dialog.Description>
+            <Lorem />
+          </Dialog.Description>
+
+          <div className="mt-8 flex justify-end gap-4">
+            <Button>Cancel</Button>
+            <Button intent="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>;
+  },
+};

package/src/dialog/Dialog.test.tsx

@@ -0,0 +1,25 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+
+import { Dialog } from '.';
+import { Button } from '../button';
+
+describe('testing the dialog', () => {
+  it('should open', () => {
+    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">Hello world!</div>
+        </Dialog.Content>
+      </Dialog>,
+    );
+
+    fireEvent.click(screen.getByText('Open dialog'));
+
+    expect(screen.getByText('This is a normal dialog')).toBeVisible();
+  });
+});

package/src/dialog/config.tsx

@@ -0,0 +1,139 @@
+import { unmountComponentAtNode, render as DOMRender } from 'react-dom';
+import { ConfirmDialog } from './confirm-dialog';
+
+import { destroyFns } from './destroyFns';
+import type { ConfigUpdate, DialogFuncProps } from './types';
+
+export function confirm(config: DialogFuncProps) {
+  const container = document.createDocumentFragment();
+  let currentConfig = { ...config, close, open: true };
+  let timeoutId: NodeJS.Timeout;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  function close(...args: any[]) {
+    currentConfig = {
+      ...currentConfig,
+      open: false,
+      afterClose: () => {
+        if (typeof config.afterClose === 'function') {
+          config.afterClose();
+        }
+
+        destroy.apply(this, args);
+      },
+    };
+
+    render(currentConfig);
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  function destroy(...args: any[]) {
+    const triggerCancel = args.some(param => param && param.triggerCancel);
+
+    if (config.onCancel && triggerCancel) {
+      config.onCancel(() => {}, ...args.slice(1));
+    }
+
+    for (let i = 0; i < destroyFns.length; i++) {
+      const fn = destroyFns[i];
+
+      if (fn === close) {
+        destroyFns.splice(i, 1);
+        break;
+      }
+    }
+
+    unmountComponentAtNode(container);
+  }
+
+  function render({ okText, cancelText, ...delegated }: any) {
+    clearTimeout(timeoutId);
+
+    timeoutId = setTimeout(() => {
+      DOMRender(<ConfirmDialog {...delegated} okText={okText} cancelText={cancelText} />, container);
+    });
+  }
+
+  function update(configUpdate: ConfigUpdate) {
+    if (typeof configUpdate === 'function') {
+      currentConfig = configUpdate(currentConfig);
+    } else {
+      currentConfig = {
+        ...currentConfig,
+        ...configUpdate,
+      };
+    }
+
+    render(currentConfig);
+  }
+
+  render(currentConfig);
+
+  destroyFns.push(close);
+
+  return {
+    destroy: close,
+    update,
+  };
+}
+
+const dumbFn = (event: Event) => {
+  event.preventDefault();
+};
+
+export function withDialog(delegated: DialogFuncProps): DialogFuncProps {
+  return {
+    open: true,
+    displayCancel: true,
+    displayOk: true,
+    ...delegated,
+  };
+}
+
+export function withWarning(delegated: DialogFuncProps): DialogFuncProps {
+  return {
+    open: true,
+    displayCancel: false,
+    displayOk: true,
+    type: 'warning',
+    ...delegated,
+    onInteractOutside: dumbFn,
+    onPointerDownOutside: dumbFn,
+  };
+}
+
+export function withError(delegated: DialogFuncProps): DialogFuncProps {
+  return {
+    open: true,
+    displayOk: true,
+    displayCancel: false,
+    type: 'error',
+    ...delegated,
+    onInteractOutside: dumbFn,
+    onPointerDownOutside: dumbFn,
+  };
+}
+
+export function withInfo(delegated: DialogFuncProps): DialogFuncProps {
+  return {
+    open: true,
+    displayOk: true,
+    displayCancel: false,
+    type: 'info',
+    ...delegated,
+    onInteractOutside: dumbFn,
+    onPointerDownOutside: dumbFn,
+  };
+}
+
+export function withConfirm(delegated: DialogFuncProps): DialogFuncProps {
+  return {
+    open: true,
+    displayOk: true,
+    displayCancel: true,
+    type: 'info',
+    ...delegated,
+    onInteractOutside: dumbFn,
+    onPointerDownOutside: dumbFn,
+  };
+}

package/src/dialog/confirm-dialog.tsx

@@ -0,0 +1,70 @@
+import { Dialog } from '.';
+import { Button } from '../button';
+import { DialogRoot } from './dialog';
+import type { ConfirmDialogProps } from './types';
+
+export function ConfirmDialog({
+  open,
+  close,
+  title,
+  description,
+  content,
+  okCancel,
+  displayCancel,
+  displayOk,
+  okText = 'OK',
+  okButtonIntent = 'default',
+  onOk,
+  onCancel,
+  cancelText = 'Cancel',
+  onEscapeKeyDown,
+  onInteractOutside,
+  onPointerDownOutside,
+  type,
+  closable,
+}: ConfirmDialogProps) {
+  const cancelButton = (okCancel || displayCancel) && (
+    <Button
+      onClick={() => {
+        onCancel?.();
+        close();
+      }}
+    >
+      {cancelText}
+    </Button>
+  );
+
+  const okButton = displayOk && (
+    <Button
+      intent={okButtonIntent}
+      onClick={() => {
+        onOk?.();
+        close();
+      }}
+    >
+      {okText}
+    </Button>
+  );
+
+  return (
+    <DialogRoot open={open} onOpenChange={() => close()}>
+      <Dialog.Content
+        onEscapeKeyDown={onEscapeKeyDown}
+        onInteractOutside={onInteractOutside}
+        onPointerDownOutside={onPointerDownOutside}
+        type={type}
+        closable={closable}
+      >
+        {title && <Dialog.Title>{title}</Dialog.Title>}
+        {description && <Dialog.Description>{description}</Dialog.Description>}
+        {content}
+        {(displayOk || okCancel || displayCancel) && (
+          <div className="mt-4 flex items-center justify-end gap-4">
+            {cancelButton}
+            {okButton}
+          </div>
+        )}
+      </Dialog.Content>
+    </DialogRoot>
+  );
+}

package/src/dialog/destroyFns.ts

@@ -0,0 +1 @@
+export const destroyFns: Array<() => void> = [];

package/src/dialog/dialog.css

@@ -0,0 +1,27 @@
+.c-dialog {
+  @apply fixed top-1/2 left-1/2 z-20 w-auto min-w-[25%] max-w-[800px] rounded-lg bg-elevate p-14 leading-6 text-gray-500-400 shadow;
+  transform: translate(-50%, -50%);
+  &-overlay {
+    @apply fixed inset-0 z-10 bg-overlay;
+  }
+
+  &-icon {
+    @apply my-1 shrink-0;
+  }
+
+  &-title {
+    @apply m-0 font-serif text-xl font-bold text-gray;
+  }
+
+  &-description {
+    @apply mt-1 mb-5 font-medium;
+  }
+
+  &-close-button {
+    @apply absolute top-0 right-0 inline-flex h-12 w-12 items-center justify-center rounded-none rounded-tr-lg border !bg-transparent !p-0 !drop-shadow-none hover:!bg-gray-50-900 focus:!bg-gray-50-900;
+  }
+
+  &-with-icon {
+    @apply flex items-start gap-6 pl-6;
+  }
+}