@moises.ai/design-system 3.10.4 → 3.10.6

package/src/components/ToastProvider/ToastProvider.jsx

@@ -0,0 +1,118 @@
+import React, { createContext, useCallback, useContext, useMemo, useState } from 'react'
+import { Toast } from 'radix-ui'
+import { Callout } from '../Callout/Callout'
+import styles from './ToastProvider.module.css'
+
+const ToastContext = createContext(null)
+let toastId = 0
+
+const normalizeToastPayload = (payload, variant) => {
+  if (typeof payload === 'string') {
+    return { title: payload, description: '', variant }
+  }
+  return {
+    title: payload?.title ?? '',
+    description: payload?.description ?? '',
+    variant: payload?.variant ?? variant,
+    duration: payload?.duration,
+  }
+}
+
+export const ToastProvider = ({
+  children,
+  duration = 10000,
+  maxToasts = 4,
+  swipeDirection,
+}) => {
+  const getCalloutColor = useCallback((variant) => {
+    if (variant === 'success') return 'success'
+    if (variant === 'error') return 'error'
+    return 'neutral'
+  }, [])
+
+  const [toasts, setToasts] = useState([])
+
+  const dismiss = useCallback((id) => {
+    setToasts((prev) => prev.filter((toastItem) => toastItem.id !== id))
+  }, [])
+
+  const show = useCallback(
+    (payload) => {
+      const normalized = normalizeToastPayload(payload, 'neutral')
+      const nextToast = {
+        ...normalized,
+        id: `${Date.now()}-${toastId++}`,
+      }
+      setToasts((prev) => [...prev.slice(-(maxToasts - 1)), nextToast])
+      return nextToast.id
+    },
+    [maxToasts],
+  )
+
+  const success = useCallback(
+    (payload) => {
+      return show(normalizeToastPayload(payload, 'success'))
+    },
+    [show],
+  )
+
+  const error = useCallback(
+    (payload) => {
+      return show(normalizeToastPayload(payload, 'error'))
+    },
+    [show],
+  )
+
+  const value = useMemo(
+    () => ({
+      show,
+      success,
+      error,
+      dismiss,
+    }),
+    [show, success, error, dismiss],
+  )
+
+  return (
+    <ToastContext.Provider value={value}>
+      <Toast.Provider
+        duration={duration}
+        {...(swipeDirection ? { swipeDirection } : {})}
+      >
+        {children}
+        {toasts.map((toastItem) => (
+          <Toast.Root
+            key={toastItem.id}
+            className={styles.toastRoot}
+            duration={toastItem.duration}
+            onOpenChange={(isOpen) => {
+              if (!isOpen) dismiss(toastItem.id)
+            }}
+          >
+            <Toast.Description asChild>
+              <div className={styles.toastCalloutWrapper}>
+                <Callout
+                  size="1"
+                  hideIcon
+                  color={getCalloutColor(toastItem.variant)}
+                  title={toastItem.title}
+                  text={toastItem.description}
+                  className={styles.toastCallout}
+                />
+              </div>
+            </Toast.Description>
+          </Toast.Root>
+        ))}
+        <Toast.Viewport className={styles.toastViewport} />
+      </Toast.Provider>
+    </ToastContext.Provider>
+  )
+}
+
+export const useToast = () => {
+  const context = useContext(ToastContext)
+  if (!context) {
+    throw new Error('useToast must be used inside ToastProvider')
+  }
+  return context
+}

package/src/components/ToastProvider/ToastProvider.module.css

@@ -0,0 +1,33 @@
+.toastViewport {
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: min(360px, calc(100vw - 24px));
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  z-index: 2000;
+  outline: none;
+}
+
+.toastRoot {
+  display: block;
+  padding: 0;
+  box-shadow: 0 12px 24px -16px rgba(0, 0, 0, 0.6);
+}
+
+.toastCalloutWrapper {
+  position: relative;
+  min-width: 0;
+}
+
+.toastCallout {
+  width: 100%;
+  min-width: 0;
+  border-radius: 8px;
+  padding-right: 8px;
+}

package/src/components/ToastProvider/ToastProvider.stories.jsx

@@ -0,0 +1,74 @@
+import { Flex, Text, Button } from '../../index'
+import { ToastProvider, useToast } from './ToastProvider'
+
+const ToastTester = () => {
+  const { success, error, show } = useToast()
+
+  return (
+    <Flex direction="column" gap="3" style={{ width: 360 }}>
+      <Text size="2" style={{ color: 'var(--neutral-alpha-11)' }}>
+        Use the buttons below to test canonical DS toasts.
+      </Text>
+      <Flex gap="2">
+        <Button
+          onClick={() =>
+            success({
+              title: 'Tracks added',
+              description: '3 tracks were added to your setlist.',
+            })
+          }
+        >
+          Trigger success
+        </Button>
+        <Button
+          color="red"
+          variant="soft"
+          onClick={() =>
+            error({
+              title: 'Could not add tracks',
+              description: 'Try again in a few seconds.',
+            })
+          }
+        >
+          Trigger error
+        </Button>
+      </Flex>
+      <Button
+        variant="ghost"
+        onClick={() =>
+          show({
+            title: 'Neutral message',
+            description: 'This is a custom toast using show().',
+          })
+        }
+      >
+        Trigger neutral
+      </Button>
+    </Flex>
+  )
+}
+
+export default {
+  title: 'Components/ToastProvider',
+  component: ToastProvider,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+}
+
+export const Playground = {
+  render: () => (
+    <ToastProvider>
+      <ToastTester />
+    </ToastProvider>
+  ),
+}
+
+export const ShortDuration = {
+  render: () => (
+    <ToastProvider duration={1500}>
+      <ToastTester />
+    </ToastProvider>
+  ),
+}

package/src/index.jsx

@@ -132,6 +132,7 @@ export { Text } from './components/Text/Text'
 export { TextArea } from './components/TextArea/TextArea'
 export { TextField } from './components/TextField/TextField'
 export { Theme } from './components/theme/Theme'
+export { ToastProvider, useToast } from './components/ToastProvider/ToastProvider'
 export { ThumbnailPicker } from './components/ThumbnailPicker/ThumbnailPicker'
 export { Tooltip } from './components/Tooltip/Tooltip'
 export { TooltipWithInfoIcon } from './components/TooltipWithInfoIcon/TooltipWithInfoIcon'