@crystallize/design-system 1.18.0 → 1.19.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.18.0",
+  "version": "1.19.1",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -45,10 +45,11 @@
     "@radix-ui/react-radio-group": "1.1.0",
     "@radix-ui/react-select": "1.1.2",
     "@radix-ui/react-slider": "^1.1.0",
-    "@radix-ui/react-tooltip": "1.0.0",
     "@radix-ui/react-switch": "^1.0.2",
+    "@radix-ui/react-tooltip": "1.0.0",
     "class-variance-authority": "^0.4.0",
     "lexical": "0.10.0",
+    "sonner": "^0.6.2",
     "use-debounce": "8.0.4"
   },
   "peerDependencies": {

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

@@ -1,5 +1,5 @@
 .c-action-menu {
-  @apply flex shrink-0 rotate-0 cursor-pointer flex-col items-center justify-center gap-[2px] rounded-md border-none bg-transparent -outline-offset-1 transition;
+  @apply flex shrink-0 cursor-pointer flex-col items-center justify-center gap-[2px] rounded-md border-none bg-transparent -outline-offset-1 transition;
 
   &-dot {
     @apply rounded-full bg-gray;

package/src/iconography/archive.tsx

@@ -0,0 +1,29 @@
+import { forwardRef, SVGProps } from 'react';
+
+type ArchiveProps = SVGProps<SVGSVGElement>;
+
+type ArchiveRef = SVGSVGElement;
+
+export const Archive = forwardRef<ArchiveRef, ArchiveProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="currentColor" {...delegated}>
+      <svg width="23" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M11.0308 9.33234V12.2464L12.7792 13.8006"
+          stroke="#528693"
+          strokeWidth="0.697782"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M15.2861 5.20269C14.0809 4.39737 12.6759 3.94619 11.2307 3.89751L11.2307 3.48958C11.2307 2.9983 10.68 2.7082 10.2748 2.98605L7.76996 4.70378C7.41666 4.94607 7.41621 5.46738 7.7691 5.71026L10.2739 7.43428C10.679 7.71309 11.2307 7.42309 11.2307 6.93134L11.2307 6.52714C12.1561 6.57428 13.0533 6.8707 13.8264 7.38728C14.6723 7.95243 15.3315 8.7557 15.7208 9.69551C16.11 10.6353 16.2119 11.6695 16.0134 12.6671C15.815 13.6648 15.3251 14.5813 14.6058 15.3006C13.8865 16.0199 12.9701 16.5097 11.9724 16.7082C10.9747 16.9066 9.94057 16.8048 9.00076 16.4155C8.06095 16.0262 7.25768 15.367 6.69253 14.5212C6.19432 13.7756 5.90088 12.9145 5.83837 12.024C5.81857 11.742 5.7386 11.454 5.57104 11.2033C5.24004 10.7082 4.55958 10.5956 4.08671 10.9577L3.99464 11.0282C3.58114 11.3449 3.32047 11.8449 3.358 12.3849C3.44631 13.6555 3.78246 14.8951 4.50794 15.9809C5.36179 17.2588 6.5754 18.2547 7.9953 18.8429C9.4152 19.431 10.9776 19.5849 12.485 19.2851C13.9923 18.9853 15.3769 18.2452 16.4637 17.1584C17.5504 16.0717 18.2905 14.6871 18.5903 13.1797C18.8902 11.6724 18.7363 10.11 18.1481 8.69005C17.56 7.27015 16.564 6.05654 15.2861 5.20269Z"
+          fill="#BFF6F8"
+          stroke="#528693"
+          strokeWidth="0.523337"
+        />
+      </svg>
+    </svg>
+  );
+});
+
+Archive.displayName = 'ArchiveIcon';

package/src/iconography/index.ts

@@ -1,5 +1,6 @@
 import { Add } from './add';
 import { App } from './app';
+import { Archive } from './archive';
 import { Arrow } from './arrow';
 import { Atom } from './atom';
 import { Bell } from './bell';
@@ -95,6 +96,7 @@ import { Warning } from './warning';
 
 export const Icon = {
   Add,
+  Archive,
   App,
   BillingPayments,
   Bin,

package/src/index.ts

@@ -24,6 +24,7 @@ export * from './spinner';
 export * from './stack-icon';
 export * from './tag';
 export * from './rich-text-editor';
+export * from './toast';
 export * from './tooltip';
 export * from './switch';
 

package/src/toast/index.ts

@@ -0,0 +1,2 @@
+export { Toaster } from 'sonner';
+export { toast, type ToastProps } from './toast';

package/src/toast/toast.css

@@ -0,0 +1,51 @@
+.c-toast {
+  @apply relative flex gap-2 rounded-md bg-white pl-3 pr-6 shadow-sm;
+
+  &:hover .c-toast-close {
+    @apply block;
+  }
+
+  &.c-toast-with-message {
+    @apply py-3;
+
+    & .c-toast-title {
+      @apply font-bold;
+    }
+  }
+
+  &.c-toast-title-only {
+    @apply items-center py-2;
+
+    & .c-toast-title {
+      @apply font-medium;
+    }
+  }
+}
+
+.c-toast-success {
+  @apply border border-solid border-cyan-300-600 bg-cyan-100-800 text-green-600-300;
+}
+
+.c-toast-error {
+  @apply border border-solid border-pink-200-700 bg-pink-100-800 text-pink-700-200;
+}
+
+.c-toast-warning {
+  @apply border border-solid border-orange-200-700 bg-orange-100-800 text-green-600-300;
+}
+
+.c-toast-info {
+  @apply border border-solid border-purple-200-700 bg-white text-green-600-300;
+}
+
+.c-toast-title {
+  @apply text-sm;
+}
+
+.c-toast-message {
+  @apply text-[13px] font-medium leading-4;
+}
+
+.c-toast-close {
+  @apply absolute right-1 top-1 hidden;
+}

package/src/toast/toast.stories.tsx

@@ -0,0 +1,110 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { toast, Toaster } from '.';
+import { Button } from '../button';
+
+const meta: Meta<typeof toast> = {
+  title: 'Components/Toast',
+};
+
+export default meta;
+type Story = StoryObj<typeof toast>;
+
+export const SimpleToast: Story = {
+  name: 'Simple Toast',
+  render: () => (
+    <>
+      <Toaster />
+      <div className="flex w-1/2 gap-2">
+        <Button onClick={() => toast({ title: 'You did something good' })}>Success toast</Button>
+        <Button onClick={() => toast({ title: 'You have been warned buddy', type: 'warning' })}>Warning toast</Button>
+        <Button onClick={() => toast({ title: 'There was a oopsie daisy ', type: 'error' })}>Error toast</Button>
+        <Button onClick={() => toast({ title: 'Let me inform you about something  ', type: 'info' })}>
+          Info toast
+        </Button>
+      </div>
+    </>
+  ),
+};
+export const WarningToast: Story = {
+  name: 'Toast with message ',
+  render: () => (
+    <>
+      <Toaster />
+      <div
+        className="flex w-full
+        gap-4"
+      >
+        <Button
+          onClick={() =>
+            toast({
+              title: 'You did alot of good',
+              message: 'So let me tell you are story about the bread and the toast',
+            })
+          }
+        >
+          Success message
+        </Button>
+
+        <Button
+          onClick={() =>
+            toast({
+              title: 'You have been warned with a explanation',
+              type: 'warning',
+              message: 'Here i could explain in detail why i am warning you.',
+            })
+          }
+        >
+          Warning message
+        </Button>
+        <Button
+          onClick={() =>
+            toast({
+              title: 'There was an oopsie daisy',
+              type: 'error',
+              message: 'And it happend because you clicked the button above',
+            })
+          }
+        >
+          Error message
+        </Button>
+        <Button
+          onClick={() =>
+            toast({
+              title: 'This is that something',
+              type: 'info',
+              message: 'And this is something with more details',
+            })
+          }
+        >
+          Info message
+        </Button>
+      </div>
+    </>
+  ),
+};
+
+export const TimeoutToast: Story = {
+  name: 'Timeout toast',
+  render: () => (
+    <>
+      <Toaster />
+      <div className="flex w-full  gap-4">
+        <Button onClick={() => toast({ title: 'Can you read this? ', timeout: 500, type: 'info' })}>Quick toast</Button>
+
+        <Button
+          onClick={() =>
+            toast({
+              title: 'A slow message',
+              message: 'With with 20s duration, you can cross it out if you hover it ',
+              timeout: 20000,
+              type: 'info',
+            })
+          }
+        >
+          A slow toast
+        </Button>
+      </div>
+    </>
+  ),
+};

package/src/toast/toast.tsx

@@ -0,0 +1,72 @@
+import { cva, cx, VariantProps } from 'class-variance-authority';
+import { toast as sonnerToast } from 'sonner';
+
+import { IconButton } from '../icon-button';
+import { Icon } from '../iconography';
+import './toast.css';
+
+const toastStyles = cva('c-toast', {
+  variants: {
+    type: {
+      info: 'c-toast-info',
+      error: 'c-toast-error',
+      success: 'c-toast-success',
+      warning: 'c-toast-warning',
+    },
+  },
+  defaultVariants: {
+    type: 'success',
+  },
+});
+
+type ToastType = 'info' | 'error' | 'success' | 'warning';
+type ToastStylesProps = VariantProps<typeof toastStyles>;
+export type ToastProps = Omit<React.ComponentProps<'div'>, 'title'> &
+  Omit<ToastStylesProps, 'type'> & {
+    title: React.ReactNode;
+    type?: ToastType;
+    message?: React.ReactNode;
+    timeout?: number;
+  };
+
+const iconMap = {
+  info: Icon.Info,
+  error: Icon.Error,
+  success: Icon.CheckWithCircle,
+  warning: Icon.Warning,
+};
+
+export const toast = ({ title, message, type = 'success', timeout = 6000 }: ToastProps) => {
+  const ToastIcon = iconMap[type];
+  const withMessage = !!message;
+  const toastId = Date.now().toString();
+
+  sonnerToast.custom(
+    id => (
+      <div
+        data-testid="toast-content"
+        className={cx(toastStyles({ type }), withMessage ? 'c-toast-with-message' : 'c-toast-title-only')}
+      >
+        <div>{<ToastIcon width={26} height={26} />}</div>
+        <div>
+          <div className="c-toast-title">{title}</div>
+          {!!message && <div className="c-toast-message">{message}</div>}
+        </div>
+        <div className="c-toast-close">
+          <IconButton onClick={() => sonnerToast.dismiss(id)} size="xs">
+            <Icon.Cancel width={12} height={12} />
+          </IconButton>
+        </div>
+      </div>
+    ),
+    {
+      id: toastId,
+      duration: timeout,
+      style: { width: '100%' },
+    },
+  );
+
+  return toastId;
+};
+
+toast.dismiss = sonnerToast.dismiss;