@lets-events/react 10.0.0 → 10.1.0

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

@@ -0,0 +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,
+  },
+})
+

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

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

package/src/components/Tooltip/index.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import { styled } from '../../styles'
+import { Text } from '../Text'
+
+const TooltipProvider = TooltipPrimitive.Provider
+const TooltipRoot = TooltipPrimitive.Root
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = styled(TooltipPrimitive.Content, {
+  backgroundColor: '$dark800',
+  color: '$neutral50',
+  borderRadius: '4px',
+  padding: '10px 15px',
+  fontSize: '14px',
+  lineHeight: 1,
+  zIndex: 100,
+  boxShadow: '0 2px 10px rgba(0, 0, 0, 0.1)',
+  userSelect: 'none',
+  animationDuration: '400ms',
+  animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
+  willChange: 'transform, opacity',
+  '&[data-state="delayed-open"][data-side="top"]': {
+    animationName: 'slideDownAndFade',
+  },
+  '&[data-state="delayed-open"][data-side="right"]': {
+    animationName: 'slideLeftAndFade',
+  },
+  '&[data-state="delayed-open"][data-side="bottom"]': {
+    animationName: 'slideUpAndFade',
+  },
+  '&[data-state="delayed-open"][data-side="left"]': {
+    animationName: 'slideRightAndFade',
+  },
+})
+
+const TooltipArrow = styled(TooltipPrimitive.Arrow, {
+  fill: '$dark800',
+})
+
+export interface TooltipProps {
+  children: React.ReactNode
+  content: React.ReactNode
+  delayDuration?: number
+  side?: 'top' | 'right' | 'bottom' | 'left'
+}
+
+export function Tooltip({
+  children,
+  content,
+  delayDuration = 200,
+  side = 'top',
+}: TooltipProps) {
+  return (
+    <TooltipProvider>
+      <TooltipRoot delayDuration={delayDuration}>
+        <TooltipTrigger asChild>{children}</TooltipTrigger>
+        <TooltipContent side={side} sideOffset={5}>
+          {typeof content === 'string' ? <Text typography={'tooltip'}>{content}</Text>:(content)}
+          <TooltipArrow />
+        </TooltipContent>
+      </TooltipRoot>
+    </TooltipProvider>
+  )
+}
+
+export { TooltipProvider, TooltipRoot, TooltipTrigger, TooltipContent } 

package/src/components/Tooltip/styles.ts

@@ -0,0 +1,78 @@
+import { keyframes } from '@stitches/react'
+import { styled } from '../../styles'
+
+const slideUpAndFade = keyframes({
+  from: {
+    opacity: 0,
+    transform: 'translateY(2px)',
+  },
+  to: {
+    opacity: 1,
+    transform: 'translateY(0)',
+  },
+})
+
+const slideRightAndFade = keyframes({
+  from: {
+    opacity: 0,
+    transform: 'translateX(-2px)',
+  },
+  to: {
+    opacity: 1,
+    transform: 'translateX(0)',
+  },
+})
+
+const slideDownAndFade = keyframes({
+  from: {
+    opacity: 0,
+    transform: 'translateY(-2px)',
+  },
+  to: {
+    opacity: 1,
+    transform: 'translateY(0)',
+  },
+})
+
+const slideLeftAndFade = keyframes({
+  from: {
+    opacity: 0,
+    transform: 'translateX(2px)',
+  },
+  to: {
+    opacity: 1,
+    transform: 'translateX(0)',
+  },
+})
+
+export const TooltipContentStyled = styled('div', {
+  fontFamily: '$default',
+  backgroundColor: '$dark700',
+  color: '$dark50',
+  borderRadius: '$sm',
+  padding: '$10 $14',
+  fontSize: '$13',
+  lineHeight: '$base',
+  boxShadow: '0px 4px 4px 0px rgba(35, 53, 67, 0.08)',
+  userSelect: 'none',
+  animationDuration: '400ms',
+  animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
+  willChange: 'transform, opacity',
+
+  '&[data-state="delayed-open"][data-side="top"]': {
+    animationName: `${slideDownAndFade}`,
+  },
+  '&[data-state="delayed-open"][data-side="right"]': {
+    animationName: `${slideLeftAndFade}`,
+  },
+  '&[data-state="delayed-open"][data-side="bottom"]': {
+    animationName: `${slideUpAndFade}`,
+  },
+  '&[data-state="delayed-open"][data-side="left"]': {
+    animationName: `${slideRightAndFade}`,
+  },
+})
+
+export const TooltipArrow = styled('div', {
+  fill: '$dark700',
+}) 

package/src/hooks/useOnClickOutside.tsx

@@ -1,20 +1,20 @@
-import { useEffect } from "react";
-
-export function useOnClickOutside(ref: any, handler: () => void) {
-  useEffect(() => {
-    const listener = (event: MouseEvent | TouchEvent) => {
-      if (!ref.current || ref.current.contains(event.target)) {
-        return;
-      }
-      handler();
-    };
-
-    document.addEventListener("mousedown", listener);
-    document.addEventListener("touchstart", listener);
-
-    return () => {
-      document.removeEventListener("mousedown", listener);
-      document.removeEventListener("touchstart", listener);
-    };
-  }, [ref, handler]);
-}
+import { useEffect } from "react";
+
+export function useOnClickOutside(ref: any, handler: () => void) {
+  useEffect(() => {
+    const listener = (event: MouseEvent | TouchEvent) => {
+      if (!ref.current || ref.current.contains(event.target)) {
+        return;
+      }
+      handler();
+    };
+
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [ref, handler]);
+}

package/src/index.tsx

@@ -1,31 +1,33 @@
-// Icon
-export * from './components/Icon'
-
-// Text
-export * from './components/Text'
-
-// Components
-export * from './components/Button'
-export * from './components/ButtonGroup'
-export * from './components/Avatar'
-export * from './components/TextField'
-export * from './components/RadioGroup'
-export * from './components/CheckboxGroup'
-export * from './components/Filter'
-export * from './components/Dropdown'
-export * from './components/Badge'
-export * from './components/Modal'
-export * from './components/Calendar'
-export * from './components/TimePicker'
-export * from './components/Alert'
-export * from './components/Switch'
-export * from './components/Step'
-export * from './components/Card'
-export * from './components/TextareaField'
-
-// Layouts
-export * from './components/Flex'
-export * from './components/Box'
-export * from './components/Grid'
-export * from './components/Container'
-export * from './components/Section'
+// Icon
+export * from './components/Icon'
+
+// Text
+export * from './components/Text'
+
+// Components
+export * from './components/Button'
+export * from './components/ButtonGroup'
+export * from './components/Avatar'
+export * from './components/TextField'
+export * from './components/RadioGroup'
+export * from './components/CheckboxGroup'
+export * from './components/Filter'
+export * from './components/Dropdown'
+export * from './components/Badge'
+export * from './components/Modal'
+export * from './components/Calendar'
+export * from './components/TimePicker'
+export * from './components/Alert'
+export * from './components/Switch'
+export * from './components/Step'
+export * from './components/Card'
+export * from './components/TextareaField'
+export * from './components/Toast'
+export * from './components/Tooltip'
+
+// Layouts
+export * from './components/Flex'
+export * from './components/Box'
+export * from './components/Grid'
+export * from './components/Container'
+export * from './components/Section'

package/src/styles/index.ts

@@ -1,38 +1,38 @@
-import {
-  colors,
-  fontSizes,
-  fontWeights,
-  fonts,
-  lineHeights,
-  radii,
-  space,
-} from '@lets-events/tokens'
-
-import { createStitches, defaultThemeMap } from '@stitches/react'
-
-export const {
-  styled,
-  css,
-  globalCss,
-  keyframes,
-  getCssText,
-  theme,
-  createTheme,
-  config,
-} = createStitches({
-  themeMap: {
-    ...defaultThemeMap,
-    height: 'space',
-    width: 'space',
-    gap: 'space'
-  },
-  theme: {
-    colors,
-    fontSizes,
-    fonts,
-    fontWeights,
-    lineHeights,
-    radii,
-    space,
-  },
-})
+import {
+  colors,
+  fontSizes,
+  fontWeights,
+  fonts,
+  lineHeights,
+  radii,
+  space,
+} from '@lets-events/tokens'
+
+import { createStitches, defaultThemeMap } from '@stitches/react'
+
+export const {
+  styled,
+  css,
+  globalCss,
+  keyframes,
+  getCssText,
+  theme,
+  createTheme,
+  config,
+} = createStitches({
+  themeMap: {
+    ...defaultThemeMap,
+    height: 'space',
+    width: 'space',
+    gap: 'space'
+  },
+  theme: {
+    colors,
+    fontSizes,
+    fonts,
+    fontWeights,
+    lineHeights,
+    radii,
+    space,
+  },
+})