@shipfox/react-ui 0.3.0 → 0.5.0

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';

package/src/components/tooltip/tooltip.stories.tsx

@@ -0,0 +1,284 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {Code} from 'components/typography';
+import {Button} from '../button';
+import {Tooltip, TooltipContent, type TooltipContentProps, TooltipTrigger} from './tooltip';
+
+type TooltipStoryArgs = {
+  defaultOpen?: boolean;
+  delayDuration?: number;
+  variant?: TooltipContentProps['variant'];
+  size?: TooltipContentProps['size'];
+  side?: TooltipContentProps['side'];
+  align?: TooltipContentProps['align'];
+  sideOffset?: TooltipContentProps['sideOffset'];
+  animated?: TooltipContentProps['animated'];
+};
+
+const meta = {
+  title: 'Components/Tooltip',
+  component: Tooltip,
+  tags: ['autodocs'],
+  argTypes: {
+    defaultOpen: {control: 'boolean'},
+    delayDuration: {control: 'number'},
+    variant: {
+      control: 'select',
+      options: ['default', 'inverted', 'muted'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    side: {
+      control: 'select',
+      options: ['top', 'bottom', 'left', 'right'],
+    },
+    align: {
+      control: 'select',
+      options: ['start', 'center', 'end'],
+    },
+    sideOffset: {control: 'number'},
+    animated: {control: 'boolean'},
+  },
+  args: {
+    defaultOpen: false,
+    delayDuration: 0,
+    variant: 'default',
+    size: 'md',
+    side: 'top',
+    align: 'center',
+    sideOffset: 8,
+    animated: true,
+  },
+} satisfies Meta<TooltipStoryArgs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    defaultOpen: false,
+  },
+
+  render: (args: TooltipStoryArgs) => {
+    const {defaultOpen, delayDuration, variant, size, side, align, sideOffset, animated} = args;
+    return (
+      <div className="flex items-center justify-center p-64">
+        <Tooltip defaultOpen={defaultOpen} delayDuration={delayDuration}>
+          <TooltipTrigger asChild>
+            <Button>Hover me</Button>
+          </TooltipTrigger>
+          <TooltipContent
+            variant={variant}
+            size={size}
+            side={side}
+            align={align}
+            sideOffset={sideOffset}
+            animated={animated}
+          >
+            Tooltip Text
+          </TooltipContent>
+        </Tooltip>
+      </div>
+    );
+  },
+};
+
+export const Types: Story = {
+  render: () => (
+    <div className="flex flex-col gap-64 p-64">
+      <Code variant="label" className="text-foreground-neutral-subtle">
+        TYPES
+      </Code>
+      <div className="flex flex-col gap-32">
+        {/* Text Type */}
+        <div className="flex flex-col gap-16">
+          <Code variant="label" className="text-foreground-neutral-subtle">
+            Type=Text
+          </Code>
+          <div className="flex gap-16">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="primary">Tooltip Text</Button>
+              </TooltipTrigger>
+              <TooltipContent variant="inverted">Tooltip Text</TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="secondary">Tooltip Text</Button>
+              </TooltipTrigger>
+              <TooltipContent>Tooltip Text</TooltipContent>
+            </Tooltip>
+          </div>
+        </div>
+
+        {/* Shortcut Type */}
+        <div className="flex flex-col gap-16">
+          <Code variant="label" className="text-foreground-neutral-subtle">
+            Type=Shortcut
+          </Code>
+          <div className="flex gap-16">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="primary">Tooltip Text</Button>
+              </TooltipTrigger>
+              <TooltipContent variant="inverted">
+                <div className="flex items-center gap-6">
+                  <span>Tooltip Text</span>
+                  <div className="flex items-center gap-4">
+                    <kbd className="flex h-16 w-16 items-center justify-center rounded-4 border border-border-neutral-base bg-background-field-base text-sm text-foreground-neutral-subtle">
+                      ⌘
+                    </kbd>
+                    <kbd className="flex h-16 w-16 items-center justify-center rounded-4 border border-border-neutral-base bg-background-field-base text-sm text-foreground-neutral-subtle">
+                      /
+                    </kbd>
+                  </div>
+                </div>
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="secondary">Tooltip Text</Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <div className="flex items-center gap-6">
+                  <span>Tooltip Text</span>
+                  <div className="flex items-center gap-4">
+                    <kbd className="flex h-16 w-16 items-center justify-center rounded-4 border border-border-neutral-base bg-background-field-base text-xs text-foreground-neutral-subtle">
+                      ⌘
+                    </kbd>
+                    <kbd className="flex h-16 w-16 items-center justify-center rounded-4 border border-border-neutral-base bg-background-field-base text-xs text-foreground-neutral-subtle">
+                      /
+                    </kbd>
+                  </div>
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          </div>
+        </div>
+
+        {/* Graph Type */}
+        <div className="flex flex-col gap-16">
+          <Code variant="label" className="text-foreground-neutral-subtle">
+            Type=Graph
+          </Code>
+          <div className="flex gap-16">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="primary">Hover for graph data</Button>
+              </TooltipTrigger>
+              <TooltipContent variant="inverted" className="w-160">
+                <div className="flex flex-col gap-4">
+                  <div className="text-xs text-foreground-neutral-subtle">Jul 22, 2025</div>
+                  <div className="flex flex-col gap-4">
+                    <div className="flex items-center justify-between gap-12">
+                      <div className="flex flex-1 items-center gap-4">
+                        <div className="size-6 rounded-full bg-purple-500" />
+                        <span className="text-xs">Data A</span>
+                      </div>
+                      <span className="text-xs">$6.14</span>
+                    </div>
+                    <div className="flex items-center justify-between gap-12">
+                      <div className="flex flex-1 items-center gap-4">
+                        <div className="size-6 rounded-full bg-green-500" />
+                        <span className="text-xs">Data B</span>
+                      </div>
+                      <span className="text-xs">$4.37</span>
+                    </div>
+                    <div className="flex items-center justify-between gap-12">
+                      <div className="flex flex-1 items-center gap-4">
+                        <div className="size-6 rounded-full bg-orange-500" />
+                        <span className="text-xs">Data C</span>
+                      </div>
+                      <span className="text-xs">$12.88</span>
+                    </div>
+                    <div className="flex items-center justify-between gap-12">
+                      <div className="flex flex-1 items-center gap-4">
+                        <div className="size-6 rounded-full bg-blue-500" />
+                        <span className="text-xs">Data D</span>
+                      </div>
+                      <span className="text-xs">$2.91</span>
+                    </div>
+                  </div>
+                </div>
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="secondary">Hover for graph data</Button>
+              </TooltipTrigger>
+              <TooltipContent className="w-160">
+                <div className="flex flex-col gap-4">
+                  <div className="text-xs text-foreground-neutral-subtle">Jul 22, 2025</div>
+                  <div className="flex flex-col gap-4">
+                    <div className="flex items-center justify-between gap-12">
+                      <div className="flex flex-1 items-center gap-4">
+                        <div className="size-6 rounded-full bg-purple-500" />
+                        <span className="text-xs">Data A</span>
+                      </div>
+                      <span className="text-xs">$6.14</span>
+                    </div>
+                    <div className="flex items-center justify-between gap-12">
+                      <div className="flex flex-1 items-center gap-4">
+                        <div className="size-6 rounded-full bg-green-500" />
+                        <span className="text-xs">Data B</span>
+                      </div>
+                      <span className="text-xs">$4.37</span>
+                    </div>
+                    <div className="flex items-center justify-between gap-12">
+                      <div className="flex flex-1 items-center gap-4">
+                        <div className="size-6 rounded-full bg-orange-500" />
+                        <span className="text-xs">Data C</span>
+                      </div>
+                      <span className="text-xs">$12.88</span>
+                    </div>
+                    <div className="flex items-center justify-between gap-12">
+                      <div className="flex flex-1 items-center gap-4">
+                        <div className="size-6 rounded-full bg-blue-500" />
+                        <span className="text-xs">Data D</span>
+                      </div>
+                      <span className="text-xs">$2.91</span>
+                    </div>
+                  </div>
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          </div>
+        </div>
+
+        {/* Breadcrumbs Type */}
+        <div className="flex flex-col gap-16">
+          <Code variant="label" className="text-foreground-neutral-subtle">
+            Type=Breadcrumbs
+          </Code>
+          <div className="flex gap-16">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="primary">Breadcrumb</Button>
+              </TooltipTrigger>
+              <TooltipContent variant="inverted">
+                <div className="flex items-center gap-6">
+                  <span>Breadcrumb</span>
+                  <span className="text-foreground-neutral-muted">/</span>
+                  <span>Breadcrumb</span>
+                </div>
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="secondary">Breadcrumb</Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <div className="flex items-center gap-6">
+                  <span>Breadcrumb</span>
+                  <span className="text-foreground-neutral-muted">/</span>
+                  <span>Breadcrumb</span>
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};