@shipfox/react-ui 0.3.0 → 0.4.0

package/src/components/toast/toast-custom.tsx

@@ -0,0 +1,154 @@
+import {cva, type VariantProps} from 'class-variance-authority';
+import {Icon} from 'components/icon/icon';
+import type {ReactNode} from 'react';
+import {cn} from 'utils/cn';
+
+const toastCustomVariants = cva('group relative flex items-start gap-8', {
+  variants: {
+    variant: {
+      default: 'text-tag-neutral-icon',
+      info: 'text-tag-neutral-icon',
+      success: 'text-tag-success-icon',
+      warning: 'text-tag-warning-icon',
+      error: 'text-tag-error-icon',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+export type ToastAction = {
+  label: string;
+  onClick: () => void;
+};
+
+export type ToastCustomProps = VariantProps<typeof toastCustomVariants> & {
+  title?: string;
+  description?: string;
+  content?: string;
+  actions?: ToastAction[];
+  onClose?: () => void;
+  className?: string;
+};
+
+function getDefaultIcon(variant: ToastCustomProps['variant'] = 'default'): ReactNode {
+  switch (variant) {
+    case 'info':
+      return <Icon name="info" size={20} />;
+    case 'success':
+      return <Icon name="checkCircleSolid" size={20} />;
+    case 'warning':
+      return <Icon name="info" size={20} />;
+    case 'error':
+      return <Icon name="xCircleSolid" size={20} />;
+    default:
+      return <Icon name="info" size={20} />;
+  }
+}
+
+export function ToastCustom({
+  variant = 'default',
+  title,
+  description,
+  content,
+  actions,
+  onClose,
+  className,
+}: ToastCustomProps) {
+  const hasTitle = Boolean(title);
+  const hasDescription = Boolean(description);
+  const hasContent = Boolean(content);
+  const hasActions = Boolean(actions && actions.length > 0);
+  const isSimple = hasContent && !hasTitle && !hasDescription;
+
+  return (
+    <div data-slot="toast-custom" className={cn(toastCustomVariants({variant}), className)}>
+      <div className="w-20 h-20 rounded-full flex items-start justify-center shrink-0 pt-1">
+        {getDefaultIcon(variant)}
+      </div>
+
+      <div className="flex-1 min-w-0">
+        {hasTitle && (
+          <div
+            data-slot="toast-custom-title"
+            className="font-medium text-sm leading-20 text-foreground-neutral-base mb-4"
+          >
+            {title}
+          </div>
+        )}
+        {hasDescription && (
+          <div
+            data-slot="toast-custom-description"
+            className="text-xs leading-20 text-foreground-neutral-muted mb-8"
+          >
+            {description}
+          </div>
+        )}
+        {isSimple ? (
+          <div className="flex items-center justify-between gap-16 min-w-400 mr-30">
+            <div
+              data-slot="toast-custom-content"
+              className="text-sm leading-20 text-foreground-neutral-base"
+            >
+              {content}
+            </div>
+            {hasActions && (
+              <div data-slot="toast-custom-actions" className="flex items-center gap-16">
+                {actions?.map((action) => (
+                  <button
+                    key={action.label}
+                    data-slot="toast-custom-action"
+                    type="button"
+                    onClick={action.onClick}
+                    className="bg-transparent border-none p-0 cursor-pointer text-xs font-medium leading-20 text-foreground-neutral-base hover:text-foreground-neutral-subtle transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-background-accent-blue-base focus-visible:ring-offset-2"
+                  >
+                    {action.label}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+        ) : (
+          <>
+            {hasContent && !hasTitle && (
+              <div
+                data-slot="toast-custom-content"
+                className="text-sm leading-20 text-foreground-neutral-base mb-8"
+              >
+                {content}
+              </div>
+            )}
+            {hasActions && (
+              <div data-slot="toast-custom-actions" className="flex items-center gap-16 mt-8">
+                {actions?.map((action) => (
+                  <button
+                    key={action.label}
+                    data-slot="toast-custom-action"
+                    type="button"
+                    onClick={action.onClick}
+                    className="bg-transparent border-none p-0 cursor-pointer text-xs font-medium leading-20 text-foreground-neutral-base hover:text-foreground-neutral-subtle transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-background-accent-blue-base focus-visible:ring-offset-2"
+                  >
+                    {action.label}
+                  </button>
+                ))}
+              </div>
+            )}
+          </>
+        )}
+      </div>
+
+      {onClose && (
+        <button
+          data-slot="toast-custom-close"
+          type="button"
+          onClick={onClose}
+          className="absolute cursor-pointer -top-2 -right-2 rounded-4 p-4 bg-transparent border-none text-foreground-neutral-muted hover:text-foreground-neutral-base hover:bg-background-components-hover transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-background-accent-blue-base focus-visible:ring-offset-2 shrink-0"
+          aria-label="Close"
+        >
+          <Icon name="close" className="w-16 h-16" />
+        </button>
+      )}
+    </div>
+  );
+}

package/src/components/toast/toast.stories.tsx

@@ -0,0 +1,369 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {Button} from 'components/button/button';
+import {Code} from 'components/typography';
+import {Toaster, toast} from './toast';
+import {ToastCustom} from './toast-custom';
+
+const meta = {
+  title: 'Components/Toast',
+  component: Toaster,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    (Story) => (
+      <>
+        <Story />
+        <div className="flex flex-wrap justify-center items-center gap-32">
+          {/* Regular Toasts */}
+          <div className="flex flex-col gap-8">
+            <Code variant="label" className="text-foreground-neutral-subtle text-center">
+              REGULAR TOASTS
+            </Code>
+            <Button
+              onClick={() => {
+                toast('Event has been created');
+              }}
+            >
+              Default Toast
+            </Button>
+            <Button
+              onClick={() => {
+                toast.success('Success! Your changes have been saved.');
+              }}
+            >
+              Success Toast
+            </Button>
+            <Button
+              onClick={() => {
+                toast.error('Error! Something went wrong.');
+              }}
+            >
+              Error Toast
+            </Button>
+            <Button
+              onClick={() => {
+                toast.warning('Warning! Please review your input.');
+              }}
+            >
+              Warning Toast
+            </Button>
+            <Button
+              onClick={() => {
+                toast.info('Info: This is an informational message.');
+              }}
+            >
+              Info Toast
+            </Button>
+            <Button
+              onClick={() => {
+                toast('Event has been created', {
+                  description: 'Sunday, December 03, 2023 at 9:00 AM',
+                });
+              }}
+            >
+              Toast with Description
+            </Button>
+            <Button
+              onClick={() => {
+                toast('Event has been created', {
+                  description: 'Sunday, December 03, 2023 at 9:00 AM',
+                  action: {
+                    label: 'Undo',
+                    onClick: () => {
+                      toast('Undo clicked');
+                    },
+                  },
+                });
+              }}
+            >
+              Toast with Action
+            </Button>
+            <Button
+              onClick={() => {
+                const promise = new Promise((resolve) => {
+                  setTimeout(() => {
+                    resolve({name: 'Sonner'});
+                  }, 2000);
+                });
+
+                toast.promise(promise, {
+                  loading: 'Loading...',
+                  success: (data) => {
+                    return `${(data as {name: string}).name} toast has been added`;
+                  },
+                  error: 'Error',
+                });
+              }}
+            >
+              Promise Toast
+            </Button>
+          </div>
+          {/* Custom Toasts */}
+          <div className="flex flex-col gap-8 text-center">
+            <Code variant="label" className="text-foreground-neutral-subtle">
+              CUSTOM TOASTS
+            </Code>
+            <Button
+              onClick={() => {
+                toast.custom(
+                  (t) => (
+                    <ToastCustom
+                      variant="success"
+                      title="Insert your alert title here"
+                      description="Insert the alert description here. It would look better as two lines of text."
+                      actions={[
+                        {
+                          label: 'Upgrade',
+                          onClick: () => {
+                            toast('Upgrade clicked');
+                            toast.dismiss(t);
+                          },
+                        },
+                        {
+                          label: 'Learn more',
+                          onClick: () => {
+                            toast('Learn more clicked');
+                            toast.dismiss(t);
+                          },
+                        },
+                      ]}
+                      onClose={() => toast.dismiss(t)}
+                    />
+                  ),
+                  {
+                    duration: Infinity,
+                  },
+                );
+              }}
+            >
+              Custom Toast (Success - Full)
+            </Button>
+            <Button
+              onClick={() => {
+                toast.custom(
+                  (t) => (
+                    <ToastCustom
+                      variant="info"
+                      title="Insert your alert title here"
+                      description="Insert the alert description here. It would look better as two lines of text."
+                      actions={[
+                        {
+                          label: 'Upgrade',
+                          onClick: () => {
+                            toast('Upgrade clicked');
+                            toast.dismiss(t);
+                          },
+                        },
+                        {
+                          label: 'Learn more',
+                          onClick: () => {
+                            toast('Learn more clicked');
+                            toast.dismiss(t);
+                          },
+                        },
+                      ]}
+                      onClose={() => toast.dismiss(t)}
+                    />
+                  ),
+                  {
+                    duration: Infinity,
+                  },
+                );
+              }}
+            >
+              Custom Toast (Info - Full)
+            </Button>
+            <Button
+              onClick={() => {
+                toast.custom(
+                  (t) => (
+                    <ToastCustom
+                      variant="warning"
+                      title="Insert your alert title here"
+                      description="Insert the alert description here. It would look better as two lines of text."
+                      actions={[
+                        {
+                          label: 'Upgrade',
+                          onClick: () => {
+                            toast('Upgrade clicked');
+                            toast.dismiss(t);
+                          },
+                        },
+                        {
+                          label: 'Learn more',
+                          onClick: () => {
+                            toast('Learn more clicked');
+                            toast.dismiss(t);
+                          },
+                        },
+                      ]}
+                      onClose={() => toast.dismiss(t)}
+                    />
+                  ),
+                  {
+                    duration: Infinity,
+                  },
+                );
+              }}
+            >
+              Custom Toast (Warning - Full)
+            </Button>
+            <Button
+              onClick={() => {
+                toast.custom(
+                  (t) => (
+                    <ToastCustom
+                      variant="error"
+                      title="Insert your alert title here"
+                      description="Insert the alert description here. It would look better as two lines of text."
+                      actions={[
+                        {
+                          label: 'Upgrade',
+                          onClick: () => {
+                            toast('Upgrade clicked');
+                            toast.dismiss(t);
+                          },
+                        },
+                        {
+                          label: 'Learn more',
+                          onClick: () => {
+                            toast('Learn more clicked');
+                            toast.dismiss(t);
+                          },
+                        },
+                      ]}
+                      onClose={() => toast.dismiss(t)}
+                    />
+                  ),
+                  {
+                    duration: Infinity,
+                  },
+                );
+              }}
+            >
+              Custom Toast (Error - Full)
+            </Button>
+            <Button
+              onClick={() => {
+                toast.custom(
+                  (t) => (
+                    <ToastCustom
+                      variant="success"
+                      content="Insert your alert content here"
+                      actions={[
+                        {
+                          label: 'Learn more',
+                          onClick: () => {
+                            toast('Learn more clicked');
+                            toast.dismiss(t);
+                          },
+                        },
+                      ]}
+                      onClose={() => toast.dismiss(t)}
+                    />
+                  ),
+                  {
+                    duration: Infinity,
+                  },
+                );
+              }}
+            >
+              Custom Toast (Success - Simple)
+            </Button>
+            <Button
+              onClick={() => {
+                toast.custom(
+                  (t) => (
+                    <ToastCustom
+                      variant="info"
+                      content="Insert your alert content here"
+                      actions={[
+                        {
+                          label: 'Learn more',
+                          onClick: () => {
+                            toast('Learn more clicked');
+                            toast.dismiss(t);
+                          },
+                        },
+                      ]}
+                      onClose={() => toast.dismiss(t)}
+                    />
+                  ),
+                  {
+                    duration: Infinity,
+                  },
+                );
+              }}
+            >
+              Custom Toast (Info - Simple)
+            </Button>
+            <Button
+              onClick={() => {
+                toast.custom(
+                  (t) => (
+                    <ToastCustom
+                      variant="warning"
+                      content="Insert your alert content here"
+                      actions={[
+                        {
+                          label: 'Learn more',
+                          onClick: () => {
+                            toast('Learn more clicked');
+                            toast.dismiss(t);
+                          },
+                        },
+                      ]}
+                      onClose={() => toast.dismiss(t)}
+                    />
+                  ),
+                  {
+                    duration: Infinity,
+                  },
+                );
+              }}
+            >
+              Custom Toast (Warning - Simple)
+            </Button>
+            <Button
+              onClick={() => {
+                toast.custom(
+                  (t) => (
+                    <ToastCustom
+                      variant="error"
+                      content="Insert your alert content here"
+                      actions={[
+                        {
+                          label: 'Learn more',
+                          onClick: () => {
+                            toast('Learn more clicked');
+                            toast.dismiss(t);
+                          },
+                        },
+                      ]}
+                      onClose={() => toast.dismiss(t)}
+                    />
+                  ),
+                  {
+                    duration: Infinity,
+                  },
+                );
+              }}
+            >
+              Custom Toast (Error - Simple)
+            </Button>
+          </div>
+        </div>
+      </>
+    ),
+  ],
+} satisfies Meta<typeof Toaster>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => <Toaster position="top-center" />,
+};

package/src/components/toast/toast.tsx

@@ -0,0 +1,41 @@
+import {useTheme} from 'hooks/useTheme';
+import {AlertTriangle, CheckCircle2, Info, Loader2, XCircle} from 'lucide-react';
+import {
+  Toaster as SonnerToaster,
+  type ToasterProps as SonnerToasterProps,
+  toast as sonnerToast,
+} from 'sonner';
+
+type ToasterProps = Omit<SonnerToasterProps, 'theme'>;
+
+function Toaster({...props}: ToasterProps) {
+  const {theme} = useTheme();
+
+  return (
+    <SonnerToaster
+      theme={theme as SonnerToasterProps['theme']}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            'group toast group-[.toaster]:bg-background-components-base group-[.toaster]:text-foreground-neutral-base group-[.toaster]:border group-[.toaster]:border-border-neutral-base group-[.toaster]:shadow-tooltip rounded-8 p-8',
+          description: 'group-[.toast]:text-foreground-neutral-muted text-xs leading-20 mt-4',
+          actionButton:
+            'group-[.toast]:bg-background-button-neutral-default group-[.toast]:text-foreground-neutral-base group-[.toast]:hover:bg-background-button-neutral-hover rounded-6 px-8 py-4 text-xs font-medium',
+          cancelButton:
+            'group-[.toast]:bg-background-button-transparent-default group-[.toast]:text-foreground-neutral-base group-[.toast]:hover:bg-background-button-transparent-hover rounded-6 px-8 py-4 text-xs font-medium',
+        },
+      }}
+      icons={{
+        success: <CheckCircle2 className="size-20 text-tag-success-icon" />,
+        info: <Info className="size-20 text-tag-blue-icon" />,
+        warning: <AlertTriangle className="size-20 text-tag-warning-icon" />,
+        error: <XCircle className="size-20 text-tag-error-icon" />,
+        loading: <Loader2 className="size-20 text-tag-neutral-icon animate-spin" />,
+      }}
+      {...props}
+    />
+  );
+}
+
+export {Toaster, sonnerToast as toast, type ToasterProps};

package/src/components/tooltip/index.ts

@@ -0,0 +1 @@
+export * from './tooltip';