@lets-events/react 10.1.2 → 11.0.0

package/src/components/Toast/components/ToastItem.tsx

@@ -1,41 +1,41 @@
-import { useState } from 'react'
-import Icon from '../../Icon'
-import { ToastComponentProps } from '../types'
-import {
-  ToastRoot,
-  ToastClose,
-} from '../styles'
-import { Text } from '../../Text'
-
-export default function ToastItem({
-  toast,
-  onRemove,
-}:ToastComponentProps) {
-  const [open, setOpen] = useState(true)
-
-  const handleOpenChange = (open: boolean) => {
-    setOpen(open)
-    if (!open) {
-      onRemove(toast.id)
-    }
-  }
-
-  return (
-    <ToastRoot
-      type={toast.type}
-      duration={toast.duration}
-      open={open}
-      onOpenChange={handleOpenChange}
-    >
-        {toast?.icon && <Icon name={toast.icon}  size='xl'/>}
-
-        <div style={{ flex: 1 }}>
-          <Text typography={'bodyS'} fontWeight={'medium'}>{toast.message}</Text>
-        </div>
-
-      <ToastClose aria-label="Close">
-        <Icon name="xmark" size="md" />
-      </ToastClose>
-    </ToastRoot>
-  )
-}
+import { useState } from 'react'
+import Icon from '../../Icon'
+import { ToastComponentProps } from '../types'
+import {
+  ToastRoot,
+  ToastClose,
+} from '../styles'
+import { Text } from '../../Text'
+
+export default function ToastItem({
+  toast,
+  onRemove,
+}:ToastComponentProps) {
+  const [open, setOpen] = useState(true)
+
+  const handleOpenChange = (open: boolean) => {
+    setOpen(open)
+    if (!open) {
+      onRemove(toast.id)
+    }
+  }
+
+  return (
+    <ToastRoot
+      type={toast.type}
+      duration={toast.duration}
+      open={open}
+      onOpenChange={handleOpenChange}
+    >
+        {toast?.icon && <Icon name={toast.icon}  size='xl'/>}
+
+        <div style={{ flex: 1 }}>
+          <Text typography={'bodyS'} fontWeight={'medium'}>{toast.message}</Text>
+        </div>
+
+      <ToastClose aria-label="Close">
+        <Icon name="xmark" size="md" />
+      </ToastClose>
+    </ToastRoot>
+  )
+}

package/src/components/Toast/components/ToastProvider.tsx

@@ -1,63 +1,63 @@
-import { createContext, useState } from 'react'
-import * as ToastPrimitive from '@radix-ui/react-toast'
-import ToastItem from './ToastItem'
-import { ToastViewport } from '../styles'
-import { ToastProviderProps, ToastContextType, Toast } from '../types'
-
-export const ToastContext = createContext<ToastContextType | null>(null)
-
-export default function ToastProvider ({
-  children,
-  defaultDuration = 5000,
-  maxToasts = 5,
-  swipeDirection = 'right',
-}:ToastProviderProps) {
-  const [toasts, setToasts] = useState<Toast[]>([])
-
-  const addToast = (toastData: Omit<Toast, 'id' | 'createdAt'>): string => {
-    const id = Math.random().toString(36).substr(2, 9)
-    const newToast: Toast = {
-      id,
-      ...toastData,
-      type: toastData?.type || 'info',
-      duration: toastData?.duration || defaultDuration,
-      createdAt: Date.now(),
-    }
-
-    setToasts((prevToasts) => {
-      const updatedToasts = [...prevToasts, newToast]
-      return updatedToasts.slice(-maxToasts)
-    })
-
-    return id
-  }
-
-  const removeToast = (id: string): void => {
-    setToasts((prevToasts) => prevToasts.filter((toast) => toast.id !== id))
-  }
-
-  const removeAllToasts = (): void => {
-    setToasts([])
-  }
-
-  const contextValue: ToastContextType = {
-    toasts,
-    addToast,
-    removeToast,
-    removeAllToasts,
-  }
-
-  return (
-    <ToastContext.Provider value={contextValue}>
-      <ToastPrimitive.Provider swipeDirection={swipeDirection}>
-        {children}
-
-        {toasts.map((toast) => (
-          <ToastItem key={toast.id} toast={toast} onRemove={removeToast} />
-        ))}
-
-        <ToastViewport />
-      </ToastPrimitive.Provider>
-    </ToastContext.Provider>
-  )
-}
+import { createContext, useState } from 'react'
+import * as ToastPrimitive from '@radix-ui/react-toast'
+import ToastItem from './ToastItem'
+import { ToastViewport } from '../styles'
+import { ToastProviderProps, ToastContextType, Toast } from '../types'
+
+export const ToastContext = createContext<ToastContextType | null>(null)
+
+export default function ToastProvider ({
+  children,
+  defaultDuration = 5000,
+  maxToasts = 5,
+  swipeDirection = 'right',
+}:ToastProviderProps) {
+  const [toasts, setToasts] = useState<Toast[]>([])
+
+  const addToast = (toastData: Omit<Toast, 'id' | 'createdAt'>): string => {
+    const id = Math.random().toString(36).substr(2, 9)
+    const newToast: Toast = {
+      id,
+      ...toastData,
+      type: toastData?.type || 'info',
+      duration: toastData?.duration || defaultDuration,
+      createdAt: Date.now(),
+    }
+
+    setToasts((prevToasts) => {
+      const updatedToasts = [...prevToasts, newToast]
+      return updatedToasts.slice(-maxToasts)
+    })
+
+    return id
+  }
+
+  const removeToast = (id: string): void => {
+    setToasts((prevToasts) => prevToasts.filter((toast) => toast.id !== id))
+  }
+
+  const removeAllToasts = (): void => {
+    setToasts([])
+  }
+
+  const contextValue: ToastContextType = {
+    toasts,
+    addToast,
+    removeToast,
+    removeAllToasts,
+  }
+
+  return (
+    <ToastContext.Provider value={contextValue}>
+      <ToastPrimitive.Provider swipeDirection={swipeDirection}>
+        {children}
+
+        {toasts.map((toast) => (
+          <ToastItem key={toast.id} toast={toast} onRemove={removeToast} />
+        ))}
+
+        <ToastViewport />
+      </ToastPrimitive.Provider>
+    </ToastContext.Provider>
+  )
+}

package/src/components/Toast/hooks/useToast.ts

@@ -1,12 +1,12 @@
-import { useContext } from 'react'
-import { ToastContextType } from '../types'
-import { ToastContext } from '../components/ToastProvider'
-
-
-export const useToast = (): ToastContextType => {
-  const context = useContext(ToastContext)
-  if (!context) {
-    throw new Error('useToast deve ser usado dentro de um ToastProvider')
-  }
-  return context
-}
+import { useContext } from 'react'
+import { ToastContextType } from '../types'
+import { ToastContext } from '../components/ToastProvider'
+
+
+export const useToast = (): ToastContextType => {
+  const context = useContext(ToastContext)
+  if (!context) {
+    throw new Error('useToast deve ser usado dentro de um ToastProvider')
+  }
+  return context
+}

package/src/components/Toast/index.tsx

@@ -1,5 +1,5 @@
-export { default as ToastItem } from './components/ToastItem'
-export { default as ToastProvider } from './components/ToastProvider'
-export * from './hooks/useToast'
-export * from './types'
-
+export { default as ToastItem } from './components/ToastItem'
+export { default as ToastProvider } from './components/ToastProvider'
+export * from './hooks/useToast'
+export * from './types'
+

package/src/components/Toast/styles/index.ts

@@ -1,135 +1,135 @@
-import { keyframes } from '@stitches/react'
-import * as ToastPrimitive from '@radix-ui/react-toast'
-import { styled } from '../../../styles'
-
-const slideIn = keyframes({
-  from: {
-    transform: 'translateX(calc(100% + 25px))',
-    opacity: 0,
-  },
-  to: {
-    transform: 'translateX(0)',
-    opacity: 1,
-  },
-})
-
-const slideOut = keyframes({
-  from: {
-    transform: 'translateX(0)',
-    opacity: 1,
-  },
-  to: {
-    transform: 'translateX(calc(100% + 25px))',
-    opacity: 0,
-  },
-})
-
-const swipeOut = keyframes({
-  from: {
-    transform: 'translateX(var(--radix-toast-swipe-end-x))',
-    opacity: 1,
-  },
-  to: {
-    transform: 'translateX(calc(100% + 25px))',
-    opacity: 0,
-  },
-})
-
-export const ToastViewport = styled(ToastPrimitive.Viewport, {
-  position: 'fixed',
-  top: 0,
-  right: 0,
-  display: 'flex',
-  flexDirection: 'column',
-  padding: 25,
-  gap: 10,
-  width: 390,
-  maxWidth: '100vw',
-  margin: 0,
-  listStyle: 'none',
-  zIndex: 2147483647,
-  outline: 'none',
-})
-
-export const ToastRoot = styled(ToastPrimitive.Root, {
-  backgroundColor: '$neutral50',
-  borderRadius: '$sm' ,
-  boxShadow:
-    'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
-  padding: '$16',
-  gap: '$8',
-  display: 'flex',
-  alignItems: 'center',
-  border: '1px solid',
-  position: 'relative',
-  zIndex: 9999,
-
-  '&[data-state="open"]': {
-    animation: `${slideIn} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
-  },
-  '&[data-state="closed"]': {
-    animation: `${slideOut} 100ms ease-in`,
-  },
-  '&[data-swipe="move"]': {
-    transform: 'translateX(var(--radix-toast-swipe-move-x))',
-  },
-  '&[data-swipe="cancel"]': {
-    transform: 'translateX(0)',
-    transition: 'transform 200ms ease-out',
-  },
-  '&[data-swipe="end"]': {
-    animation: `${swipeOut} 100ms ease-out`,
-  },
-  $$toastColor: 'inherit',
-  color: '$$toastColor',
-  borderColor: '$$toastColor', 
-  variants: {
-    type: {
-      success: {
-        $$toastColor: '$colors$success600',
-        backgroundColor: '$success50',
-      },
-      error: {
-        $$toastColor: '$colors$error600',
-        backgroundColor: '$error50',
-      },
-      warning: {
-        $$toastColor: '$colors$warning600',
-        backgroundColor: '$warning50',
-      },
-      info: {
-        $$toastColor: '$colors$info600',
-        backgroundColor: '$info50',
-      },
-    },
-  },
-
-  defaultVariants: {
-    type: 'info',
-  },
-})
-
-
-export const ToastClose = styled(ToastPrimitive.Close, {
-  border: 'none',
-  backgroundColor: 'transparent',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  color: 'inherit',
-  borderRadius: 4,
-  padding: 4,
-  cursor: 'pointer',
-  opacity: 0.7,
-
-  '&:hover': {
-    opacity: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.05)',
-  },
-
-  '&:focus': {
-    boxShadow: '0 0 0 2px currentColor',
-    opacity: 1,
-  },
-})
-
+import { keyframes } from '@stitches/react'
+import * as ToastPrimitive from '@radix-ui/react-toast'
+import { styled } from '../../../styles'
+
+const slideIn = keyframes({
+  from: {
+    transform: 'translateX(calc(100% + 25px))',
+    opacity: 0,
+  },
+  to: {
+    transform: 'translateX(0)',
+    opacity: 1,
+  },
+})
+
+const slideOut = keyframes({
+  from: {
+    transform: 'translateX(0)',
+    opacity: 1,
+  },
+  to: {
+    transform: 'translateX(calc(100% + 25px))',
+    opacity: 0,
+  },
+})
+
+const swipeOut = keyframes({
+  from: {
+    transform: 'translateX(var(--radix-toast-swipe-end-x))',
+    opacity: 1,
+  },
+  to: {
+    transform: 'translateX(calc(100% + 25px))',
+    opacity: 0,
+  },
+})
+
+export const ToastViewport = styled(ToastPrimitive.Viewport, {
+  position: 'fixed',
+  top: 0,
+  right: 0,
+  display: 'flex',
+  flexDirection: 'column',
+  padding: 25,
+  gap: 10,
+  width: 390,
+  maxWidth: '100vw',
+  margin: 0,
+  listStyle: 'none',
+  zIndex: 2147483647,
+  outline: 'none',
+})
+
+export const ToastRoot = styled(ToastPrimitive.Root, {
+  backgroundColor: '$neutral50',
+  borderRadius: '$sm' ,
+  boxShadow:
+    'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
+  padding: '$16',
+  gap: '$8',
+  display: 'flex',
+  alignItems: 'center',
+  border: '1px solid',
+  position: 'relative',
+  zIndex: 9999,
+
+  '&[data-state="open"]': {
+    animation: `${slideIn} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
+  },
+  '&[data-state="closed"]': {
+    animation: `${slideOut} 100ms ease-in`,
+  },
+  '&[data-swipe="move"]': {
+    transform: 'translateX(var(--radix-toast-swipe-move-x))',
+  },
+  '&[data-swipe="cancel"]': {
+    transform: 'translateX(0)',
+    transition: 'transform 200ms ease-out',
+  },
+  '&[data-swipe="end"]': {
+    animation: `${swipeOut} 100ms ease-out`,
+  },
+  $$toastColor: 'inherit',
+  color: '$$toastColor',
+  borderColor: '$$toastColor', 
+  variants: {
+    type: {
+      success: {
+        $$toastColor: '$colors$success600',
+        backgroundColor: '$success50',
+      },
+      error: {
+        $$toastColor: '$colors$error600',
+        backgroundColor: '$error50',
+      },
+      warning: {
+        $$toastColor: '$colors$warning600',
+        backgroundColor: '$warning50',
+      },
+      info: {
+        $$toastColor: '$colors$info600',
+        backgroundColor: '$info50',
+      },
+    },
+  },
+
+  defaultVariants: {
+    type: 'info',
+  },
+})
+
+
+export const ToastClose = styled(ToastPrimitive.Close, {
+  border: 'none',
+  backgroundColor: 'transparent',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: 'inherit',
+  borderRadius: 4,
+  padding: 4,
+  cursor: 'pointer',
+  opacity: 0.7,
+
+  '&:hover': {
+    opacity: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.05)',
+  },
+
+  '&:focus': {
+    boxShadow: '0 0 0 2px currentColor',
+    opacity: 1,
+  },
+})
+

package/src/components/Toast/types/index.ts

@@ -1,46 +1,46 @@
-import { ReactNode } from 'react'
-import { IconName } from '@fortawesome/fontawesome-svg-core'
-
-export type ToastType = 'success' | 'error' | 'warning' | 'info'
-
-export interface ToastConfig {
-  icon: string
-}
-
-export interface ToastOptions {
-  type?: ToastType
-  title?: string
-  duration?: number
-}
-
-export interface Toast {
-  id: string
-  message: string
-  icon?: IconName,
-  type?: ToastType
-  duration?: number
-  createdAt: number
-}
-
-export interface ToastContextType {
-  toasts: Toast[]
-  addToast: (toast: Omit<Toast, 'id' | 'createdAt'>) => string
-  removeToast: (id: string) => void
-  removeAllToasts: () => void
-}
-
-export interface ToastProviderProps {
-  children: ReactNode
-  defaultDuration?: number
-  maxToasts?: number
-  swipeDirection?: 'right' | 'left' | 'up' | 'down'
-}
-
-export interface ToastComponentProps {
-  toast: Toast
-  onRemove: (id: string) => void
-}
-
-export interface ToasterShowOptions extends ToastOptions {
-  onClose?: () => void
-}
+import { ReactNode } from 'react'
+import { IconName } from '@fortawesome/fontawesome-svg-core'
+
+export type ToastType = 'success' | 'error' | 'warning' | 'info'
+
+export interface ToastConfig {
+  icon: string
+}
+
+export interface ToastOptions {
+  type?: ToastType
+  title?: string
+  duration?: number
+}
+
+export interface Toast {
+  id: string
+  message: string
+  icon?: IconName,
+  type?: ToastType
+  duration?: number
+  createdAt: number
+}
+
+export interface ToastContextType {
+  toasts: Toast[]
+  addToast: (toast: Omit<Toast, 'id' | 'createdAt'>) => string
+  removeToast: (id: string) => void
+  removeAllToasts: () => void
+}
+
+export interface ToastProviderProps {
+  children: ReactNode
+  defaultDuration?: number
+  maxToasts?: number
+  swipeDirection?: 'right' | 'left' | 'up' | 'down'
+}
+
+export interface ToastComponentProps {
+  toast: Toast
+  onRemove: (id: string) => void
+}
+
+export interface ToasterShowOptions extends ToastOptions {
+  onClose?: () => void
+}