@shipfox/react-ui 0.14.0 → 0.16.0

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

@@ -1,154 +0,0 @@
-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

@@ -1,369 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

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