Added Toast

.changeset/silent-geese-share.md

@@ -0,0 +1,6 @@
+---
+"@utima/ui": minor
+---
+
+Added `Toast` component (using sonner package)
+Added `info` color to multiple components

packages/ui/package.json

@@ -77,6 +77,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": ">=2",
     "lodash.get": "4",
+    "sonner": "^1.4.0",
     "tailwind-merge": ">=2",
     "tailwindcss-animate": "^1.0.7",
     "ts-deepmerge": "^7.0.0",

packages/ui/plugin.cjs

@@ -28,6 +28,10 @@ const baseColors = {
     bg: '#22c55e',
     fg: '#ffffff',
   },
+  info: {
+    bg: '#3b82f6',
+    fg: '#ffffff',
+  },
   warning: {
     bg: '#facc15',
     fg: '#000000',
@@ -74,6 +78,10 @@ const defaultOptions = {
       bg: baseColors.warning.bg,
       fg: baseColors.warning.fg,
     },
+    info: {
+      bg: baseColors.info.bg,
+      fg: baseColors.info.fg,
+    },
     accent: {
       bg: baseColors.accent.bg,
       fg: baseColors.accent.fg,
@@ -136,6 +144,10 @@ module.exports = plugin.withOptions(
               DEFAULT: colors.warning.bg,
               fg: colors.warning.fg,
             },
+            info: {
+              DEFAULT: colors.info.bg,
+              fg: colors.info.fg,
+            },
             accent: {
               DEFAULT: colors.accent.bg,
               fg: colors.accent.fg,

packages/ui/plugin.d.ts

@@ -32,6 +32,10 @@ type TailwindPluginOptions = {
       bg: string;
       fg: string;
     };
+    info: {
+      bg: string;
+      fg: string;
+    };
     accent: {
       bg: string;
       fg: string;

packages/ui/src/components/badge/Badge.styles.ts

@@ -22,6 +22,7 @@ export const badgeDef = twOverrides(
           'bg-danger text-danger-fg hover:bg-danger/80 active:bg-danger/90',
         warning:
           'bg-warning text-warning-fg hover:bg-warning/80 active:bg-warning/90',
+        info: 'bg-info text-info-fg hover:bg-info/80 active:bg-info/90',
         ghost:
           'text-foreground hover:bg-foreground/5 active:bg-foreground/10 ring-foreground/70',
         link: 'text-foreground hover:text-foreground/70 active:text-foreground/90 underline-offset-4 hover:underline',
@@ -38,6 +39,7 @@ export const badgeDef = twOverrides(
         success: `${defaultBorder} border-success text-success hover:bg-success/10 active:bg-success/15`,
         danger: `${defaultBorder} border-danger text-danger hover:bg-danger/10 active:bg-danger/15`,
         warning: `${defaultBorder} border-warning text-warning hover:bg-warning/10 active:bg-warning/15`,
+        info: `${defaultBorder} border-info text-info hover:bg-info/10 active:bg-info/15`,
         ghost: `${defaultBorder} border-primary/25`,
         link: null,
       },

packages/ui/src/components/button/Button.styles.ts

@@ -25,6 +25,7 @@ export const buttonDef = twOverrides(
           'bg-danger text-danger-fg hover:bg-danger/80 active:bg-danger/90 ring-danger/35',
         warning:
           'bg-warning text-warning-fg hover:bg-warning/80 active:bg-warning/90 ring-warning/35',
+        info: 'bg-info text-info-fg hover:bg-info/80 active:bg-info/90 ring-info/35',
         ghost:
           'text-foreground hover:bg-foreground/5 active:bg-foreground/10 ring-foreground/70',
         link: 'text-foreground hover:text-foreground/70 active:text-foreground/90 underline-offset-4 hover:underline ring-foreground/70',
@@ -43,6 +44,7 @@ export const buttonDef = twOverrides(
         success: `${defaultBorder} border-success text-success hover:bg-success/10 active:bg-success/15`,
         danger: `${defaultBorder} border-danger text-danger hover:bg-danger/10 active:bg-danger/15`,
         warning: `${defaultBorder} border-warning text-warning hover:bg-warning/10 active:bg-warning/15`,
+        info: `${defaultBorder} border-info text-info hover:bg-info/10 active:bg-info/15`,
         ghost: `${defaultBorder} border-primary/25`,
         link: null,
       },

packages/ui/src/components/input/Input.styles.tsx

@@ -19,6 +19,9 @@ export const inputDef = twOverrides(
           'border-danger focus-visible:border-danger hover:border-danger/30',
         success:
           'border-success focus-visible:border-success hover:border-success/30',
+        warning:
+          'border-warning focus-visible:border-warning hover:border-warning/30',
+        info: 'border-info focus-visible:border-info hover:border-info/30',
       },
     },
   },

packages/ui/src/components/select/select.styles.ts

@@ -34,6 +34,9 @@ export const selectDef = twOverrides(
           'border-danger focus-visible:border-danger hover:border-danger/30',
         success:
           'border-success focus-visible:border-success hover:border-success/30',
+        warning:
+          'border-warning focus-visible:border-warning hover:border-warning/30',
+        info: 'border-info focus-visible:border-info hover:border-info/30',
       },
     },
   },

packages/ui/src/components/toast/Toast.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Toast, toast } from './Toast';
+import { Button } from '../button/Button';
+
+const meta: Meta<typeof Toast> = {
+  component: Toast,
+  tags: ['autodocs'],
+  args: {
+    closeButton: true,
+    duration: 5000,
+    position: 'bottom-right',
+    gap: 10,
+  },
+  title: 'Components/Toast',
+  decorators: Story => (
+    <>
+      <Button
+        onClick={() => {
+          toast('Event has been created', {
+            description:
+              'Event has been created successfully, you can view it in the calendar, or edit it. You can also undo this action. Do you want to confirm?',
+            cancel: {
+              label: 'Dismiss',
+              onClick: () => {},
+            },
+            action: {
+              label: 'Undo',
+              onClick: () => {},
+            },
+          });
+        }}
+      >
+        Show Toast
+      </Button>
+      <Story />
+    </>
+  ),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Toast>;
+
+export const Basic: Story = {
+  args: {},
+};

packages/ui/src/components/toast/Toast.styles.tsx

@@ -0,0 +1,23 @@
+import { twOverrides } from '@/overrides';
+
+export const toastDef = twOverrides(
+  {
+    toast:
+      '[&>[data-icon]]:float-left [&>[data-icon]]:mr-3 [&>[data-icon]]:mt-1 group p-4 rounded toast bg-background shadow-lg border-border text-primary drop-shadow',
+    title: 'group-[.toaster]:font-bold group-[.toaster]:text-sm',
+    description: 'group-[.toaster]:text-sm',
+    actionButton:
+      'float-right group-[.toast]:!ml-2 group-[.toast]:mt-2 group-[.toast]:bg-primary hover:group-[.toast]:opacity-85 active:group-[.toast]:opacity-75 group-[.toast]:text-primary-fg',
+    cancelButton:
+      'float-right group-[.toast]:!ml-2 group-[.toast]:mt-2 group-[.toast]:bg-muted hover:group-[.toast]:opacity-85 active:group-[.toast]:opacity-75 group-[.toast]:text-muted-fg',
+    closeButton: '',
+    error:
+      '[&>[data-icon]]:text-danger [&>[data-button]]:!bg-danger [&>[data-cancel]]:!bg-danger/15 [&>[data-cancel]]:!text-danger',
+    success:
+      '[&>[data-icon]]:text-success [&>[data-button]]:!bg-success [&>[data-cancel]]:!bg-success/15 [&>[data-cancel]]:!text-success',
+    warning:
+      '[&>[data-icon]]:text-warning [&>[data-button]]:!bg-warning [&>[data-cancel]]:!bg-warning/15 [&>[data-cancel]]:!text-warning',
+    info: '[&>[data-icon]]:text-info [&>[data-button]]:!bg-info [&>[data-cancel]]:!bg-info/15 [&>[data-cancel]]:!text-info',
+  },
+  'toast',
+);

packages/ui/src/components/toast/Toast.tsx

@@ -0,0 +1,22 @@
+import type { ComponentProps } from 'react';
+import { Toaster, toast } from 'sonner';
+
+import { toastDef } from './Toast.styles';
+
+type ToastProps = ComponentProps<typeof Toaster>;
+
+export function Toast({ className, ...props }: ToastProps) {
+  return (
+    <Toaster
+      className='toaster group'
+      {...props}
+      toastOptions={{
+        unstyled: true,
+        classNames: toastDef,
+        ...props.toastOptions,
+      }}
+    />
+  );
+}
+
+export { toast };

packages/ui/src/index.ts

@@ -36,3 +36,6 @@ export { Tooltip } from './components/tooltip/Tooltip';
 export * as SelectPrimitive from './components/select';
 export { Select } from './components/select/Select';
 export { SelectItem } from './components/select/SelectItem';
+
+// Toast
+export { Toast, toast } from './components/toast/Toast';

packages/ui/src/overrides.ts

@@ -9,6 +9,7 @@ import type { inputDef } from './components/input/Input.styles';
 import type { labelDef } from './components/label/Label.styles';
 import type { selectDef } from './components/select/select.styles';
 import type { tableDef } from './components/table/Table.styles';
+import type { toastDef } from './components/toast/Toast.styles';
 import type { tooltipDef } from './components/tooltip/Tooltip.styles';
 
 /**
@@ -24,6 +25,7 @@ type ComponentOverridesDef = {
   input: typeof inputDef;
   tooltip: typeof tooltipDef;
   select: typeof selectDef;
+  toast: typeof toastDef;
 };
 
 export type ComponentOverrides = PartialDeep<ComponentOverridesDef>;