@crystallize/design-system 1.3.1 → 1.3.2

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

package/src/dialog/dialog.tsx

@@ -0,0 +1,94 @@
+import type { ReactNode, RefAttributes } from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { cva, cx, VariantProps } from 'class-variance-authority';
+
+import { Button } from '../button';
+import { Icon } from '../iconography';
+import type { DialogFuncProps } from './types';
+
+import './dialog.css';
+
+const IconMap = {
+  error: Icon.Error,
+  info: Icon.Info,
+  warning: Icon.Warning,
+};
+
+type DialogContentStylesProps = VariantProps<typeof dialogContentStyles>;
+const dialogContentStyles = cva('c-dialog', {
+  variants: {
+    withIcon: {
+      true: 'c-dialog-with-icon',
+    },
+  },
+});
+
+type DialogContentProps = DialogContentStylesProps & {
+  children: ReactNode;
+} & Pick<
+    DialogFuncProps,
+    'onEscapeKeyDown' | 'onInteractOutside' | 'onPointerDownOutside' | 'closable' | 'type' | 'className'
+  > &
+  DialogPrimitive.DialogContentProps &
+  Pick<DialogPrimitive.PortalProps, 'container'>;
+
+function DialogContent({ children, closable = true, type, className, container, ...delegated }: DialogContentProps) {
+  const withIcon = typeof type !== 'undefined';
+
+  const IconComponent = type && IconMap[type];
+
+  return (
+    <DialogPrimitive.Portal container={container}>
+      <DialogPrimitive.Overlay className="c-dialog-overlay" />
+      <DialogPrimitive.Content className={dialogContentStyles({ withIcon, class: className })} {...delegated}>
+        {IconComponent && (
+          <div className="flex h-[44px] w-[44px]  min-w-[44px] items-center justify-center rounded-lg bg-gray-50-900 p-[5px]">
+            <IconComponent className="c-dialog-icon" width={34} height={34} />
+          </div>
+        )}
+        {closable && (
+          <DialogClose asChild>
+            <Button className="c-dialog-close-button">
+              <Icon.Cancel color="density" aria-label="Close" height={16} width={16} />
+            </Button>
+          </DialogClose>
+        )}
+        <div>{children}</div>
+      </DialogPrimitive.Content>
+    </DialogPrimitive.Portal>
+  );
+}
+
+type DialogTitleProps = JSX.IntrinsicAttributes & DialogPrimitive.DialogTitleProps & RefAttributes<HTMLHeadingElement>;
+
+function DialogTitle({ className, ...delegated }: DialogTitleProps) {
+  return <DialogPrimitive.Title className={cx('c-dialog-title', className)} {...delegated} />;
+}
+
+type DialogDescriptionProps = JSX.IntrinsicAttributes &
+  DialogPrimitive.DialogDescriptionProps &
+  RefAttributes<HTMLParagraphElement>;
+
+function DialogDescription(delegated: DialogDescriptionProps) {
+  return <DialogPrimitive.Description className="c-dialog-description" {...delegated} />;
+}
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogClose = DialogPrimitive.Close;
+
+export const DialogRoot = DialogPrimitive.Root;
+
+type DialogBaseProps = React.ComponentProps<typeof DialogRoot> & {
+  children: ReactNode;
+};
+
+export function DialogBase({ children, ...delegated }: DialogBaseProps) {
+  return <DialogRoot {...delegated}>{children}</DialogRoot>;
+}
+
+DialogBase.Title = DialogTitle;
+DialogBase.Trigger = DialogTrigger;
+DialogBase.Description = DialogDescription;
+DialogBase.Content = DialogContent;
+DialogBase.Overlay = DialogPrimitive.Overlay;

package/src/dialog/index.tsx

@@ -0,0 +1,40 @@
+import { destroyFns } from './destroyFns';
+import { DialogBase } from './dialog';
+import type { DialogFuncProps } from './types';
+import { confirm, withWarning, withConfirm, withDialog, withError, withInfo } from './config';
+
+type DialogType = typeof DialogBase & DialogFuncProps;
+
+const Dialog = DialogBase as DialogType;
+
+function showDialog(delegated: DialogFuncProps) {
+  return confirm(withDialog(delegated));
+}
+
+function showWarning(delegated: DialogFuncProps) {
+  return confirm(withWarning(delegated));
+}
+
+function showConfirm(delegated: DialogFuncProps) {
+  return confirm(withConfirm(delegated));
+}
+
+function showError(delegated: DialogFuncProps) {
+  return confirm(withError(delegated));
+}
+
+function showInfo(delegated: DialogFuncProps) {
+  return confirm(withInfo(delegated));
+}
+
+function destroyAll() {
+  while (destroyFns.length) {
+    const close = destroyFns.pop();
+
+    if (close) {
+      close();
+    }
+  }
+}
+
+export { Dialog, destroyAll, showWarning, showConfirm, showDialog, showError, showInfo };

package/src/dialog/types.ts

@@ -0,0 +1,70 @@
+import type { ReactNode, ComponentProps } from 'react';
+
+import type { Button } from '../button';
+
+export type DialogFuncProps = {
+  afterClose?: () => void;
+  /**
+   * Text that should be displayed in the cancel button
+   */
+  cancelText?: ReactNode;
+  className?: string;
+  closable?: boolean;
+  content?: ReactNode;
+  description?: ReactNode;
+  /**
+   * Flag that controls if the cancel button should be included in the dialog or not
+   */
+  displayCancel?: boolean;
+  /**
+   * Flag that controls if the ok button should be included in the dialog or not
+   */
+  displayOk?: boolean;
+  /**
+   * @deprecated - Use displayCancel instead
+   *
+   * Flag that controls if the cancel button should be included in the dialog or not
+   */
+  okCancel?: boolean;
+  /**
+   * Text that should be displayed in the ok button
+   */
+  okText?: ReactNode;
+  okButtonIntent?: ComponentProps<typeof Button>['intent'];
+  /**
+   * The callback that will be called once the user click the cancel button
+   * @param args
+   * @returns void
+   */
+  onCancel?: (...args: unknown[]) => void;
+  onEscapeKeyDown?: (event: Event) => void;
+  onInteractOutside?: (event: Event) => void;
+  /**
+   * The callback that will be called once the user click the ok button
+   * @param args
+   * @returns void
+   */
+  onOk?: (...args: unknown[]) => void;
+  onPointerDownOutside?: (event: Event) => void;
+  open?: boolean;
+  prefixCls?: string;
+  title?: ReactNode;
+  type?: 'info' | 'error' | 'warning';
+};
+
+export type ConfigUpdate = DialogFuncProps | ((prevConfig: DialogFuncProps) => DialogFuncProps);
+
+export type DialogFunc = (props: DialogFuncProps) => {
+  destroy: () => void;
+  update: (configUpdate: ConfigUpdate) => void;
+};
+
+export type ModalStaticFunctions = Record<NonNullable<DialogFuncProps['type']>, DialogFunc>;
+
+export interface ConfirmDialogProps extends DialogFuncProps {
+  afterClose?: () => void;
+  close: (...args: unknown[]) => void;
+  autoFocusButton?: null | 'ok' | 'cancel';
+  rootPrefixCls: string;
+  iconPrefixCls?: string;
+}