@driveflux/ui 1.0.0-next.0

package/src/modal/ModalProvider.tsx

@@ -0,0 +1,142 @@
+import isEmpty from 'lodash/isEmpty.js'
+import { useCallback, useMemo, useState, type FC, type PropsWithChildren } from 'react'
+import {
+  Modal,
+  ModalContent,
+  ModalOverlay,
+  useDisclosure
+} from '../chakra.js'
+import { isReactNode } from '../utils/react.js'
+import MinimalModalContent from './components/MinimalModalContent.js'
+import StandardModalContent from './components/StandardModalContent.js'
+import { ModalContext, type ModalCloseOptions, type ModalContentConfig, type ModalContextState, type ModalControlProps, type ModalOpenOptions, type ModalOptions, type ModalUpdateOptions } from './context.js'
+
+const getModalComponent = (modalContentConfig: ModalContentConfig, controls: ModalControlProps) => {
+  const otherProps = modalContentConfig.contentProps || {}
+  switch (modalContentConfig.type) {
+    case 'standard': {
+      return <StandardModalContent controls={controls} modalContentConfig={modalContentConfig} {...otherProps} />
+
+    }
+    case 'minimal':{
+        return <MinimalModalContent controls={controls} modalContentConfig={modalContentConfig} {...otherProps} />
+    }
+    case 'custom':
+      return isReactNode(modalContentConfig.content) ? modalContentConfig.content : <modalContentConfig.content open={open} close={close} {...otherProps} />
+  }
+}
+
+const isModalOpenOptions = (options?: ModalOpenOptions | ModalContentConfig): options is ModalOpenOptions => {
+  return (options as ModalOpenOptions)?.modalContentConfig !== undefined
+}
+
+const ModalProvider: FC<PropsWithChildren> = ({ children }) => {
+  const { isOpen, onClose: onCloseRaw, onOpen: onOpenRaw } = useDisclosure()
+  const [modalContentConfig, setModalContentConfig] = useState<ModalContentConfig | undefined>()
+  const [modalOptions, setModalOptions] = useState<ModalOptions | undefined>()
+  const [modalState, setModalState] = useState<any>()
+
+  const onClose = useCallback((options?: ModalCloseOptions) => {
+    onCloseRaw()
+
+    if (modalOptions?.onClose) {
+      modalOptions.onClose()
+    }
+
+    if (!options?.keepModalContentConfig) {
+      setModalContentConfig(undefined)
+      setModalOptions(undefined)
+      setModalState(undefined)
+    }
+  }, [modalOptions])
+
+  const onOpen = useCallback((modalContentConfigOrOptions?: ModalOpenOptions | ModalContentConfig) => {
+    let newModalContentConfig: ModalContentConfig | undefined
+    let newModalSate: any
+    let newModalOptions: ModalOptions | undefined
+    // Here, we know we're passing the global options object
+    if (isModalOpenOptions(modalContentConfigOrOptions)) {
+      newModalContentConfig = modalContentConfigOrOptions.modalContentConfig
+      newModalSate = modalContentConfigOrOptions.modalContentConfig.initialModalState
+      newModalOptions = modalContentConfigOrOptions
+    } 
+    // we will set the state only when we're passing the modal content config. Maybe the modal
+    // was closed with keepModalContentConfig set to true, so we don't want to override the state
+    else if (modalContentConfigOrOptions) {
+      newModalContentConfig = modalContentConfigOrOptions
+      newModalSate = undefined
+      newModalOptions = undefined
+    }
+
+    setModalContentConfig((oldModalContentConfig) => {
+      const modalContentConfig = newModalContentConfig || oldModalContentConfig
+
+      if(modalContentConfig) {
+        onOpenRaw()
+      }
+
+      return modalContentConfig
+    })
+
+    setModalState(newModalSate)
+    setModalOptions(newModalOptions)
+  }, [])
+
+  const update = useCallback((updateOptions: ModalUpdateOptions) => {
+    if (!updateOptions || isEmpty(updateOptions)) {
+      return
+    }
+
+    setModalContentConfig((oldModalContentConfig) => {
+      if (!oldModalContentConfig) {
+        return oldModalContentConfig
+      }
+      
+      return {
+        ...oldModalContentConfig,
+        ...updateOptions.modalContentConfig,
+        contentProps: {
+          ...updateOptions.contentProps,
+          ...oldModalContentConfig.contentProps,
+        }
+      }
+    })
+  }, [])
+
+  const state = useMemo((): ModalContextState => {
+    return {
+      isOpen,
+      // @ts-expect-error
+      open: onOpen,
+      close: onClose,
+      update,
+      modalState,
+      setModalState,
+    }
+  }, [onOpen, onClose, update, modalState, setModalState, isOpen])
+
+  const content = useMemo(() => modalContentConfig && getModalComponent(modalContentConfig, state), [modalContentConfig])
+
+  return (
+    <ModalContext.Provider value={state}>
+      {children}
+      {/* The modal is already rendered in a portal */}
+      <Modal
+        scrollBehavior={'inside'}
+        isCentered
+        blockScrollOnMount
+        closeOnOverlayClick
+        size={ modalContentConfig?.size || { base: 'full', md:  '3xl' }}
+        isOpen={isOpen}
+        onClose={onClose}
+      >
+        <ModalOverlay />
+        <ModalContent borderRadius={0}>
+          {content}
+        </ModalContent>
+      </Modal>
+    </ModalContext.Provider>
+  )
+}
+
+export default ModalProvider

package/src/modal/components/EnhancedModalCustomWrapper.tsx

@@ -0,0 +1,39 @@
+import IconClose from '@driveflux/icons/icons/IconClose'
+import type { FC, PropsWithChildren, ReactNode } from 'react'
+import { Button, HStack, Heading, Stack, type StackProps } from '../../chakra.js'
+import { useEnhancedModal } from '../use-enhanced-modal.js'
+
+type Props = {
+  title?: ReactNode
+  isCloseHidden?: boolean
+} & StackProps
+
+const EnhancedModalCustomWrapper: FC<PropsWithChildren<Props>> = ({ title, children, isCloseHidden, ...props }) => {
+  const { close } = useEnhancedModal()
+
+  return (
+    <Stack overflowY={'scroll'} px={'32px'} py={'24px'} spacing={'18px'} {...props}>
+      <HStack justifyContent={'space-between'}>
+        <Heading fontSize={'18px'} textTransform={'uppercase'}>
+          {title}
+        </Heading>
+        {!isCloseHidden && (
+          <Button
+            p={0}
+            variant={'unstyled'}
+            border={0}
+            w={'fit-content'}
+            onClick={() => {
+              close()
+            }}
+          >
+            <IconClose size={'28px'} />
+          </Button>
+        )}
+      </HStack>
+      {children}
+    </Stack>
+  )
+}
+
+export default EnhancedModalCustomWrapper

package/src/modal/components/EnhancedModalFooter.tsx

@@ -0,0 +1,51 @@
+import { Trans } from '@lingui/macro'
+import { FC, ReactNode } from 'react'
+import { Button, ButtonProps, Stack, StackProps } from '../../chakra.js'
+import { colors } from '../../theme/colors.js'
+import { useEnhancedModal } from '../use-enhanced-modal.js'
+
+type Props = {
+  sticky?: boolean
+  cancelProps?: ButtonProps
+  okProps?: ButtonProps
+  children?: ReactNode
+  suffix?: ReactNode
+} & StackProps
+
+const EnhancedModalFooter: FC<Props> = ({ sticky, cancelProps, okProps, children, suffix, ...props }) => {
+  const { close } = useEnhancedModal()
+
+  return (
+    <Stack
+      pos={{ base: 'absolute', md: sticky ? 'absolute' : 'static' }}
+      bottom={0}
+      left={0}
+      right={0}
+      py={'32px'}
+      px={{ base: '32px', md: sticky ? '32px' : '0' }}
+      borderTop={sticky ? `1px solid ${colors.primary2}` : ''}
+      background={colors.white}
+      spacing={'24px'}
+      zIndex={'sticky'}
+      {...props}
+    >
+      {children ? (
+        <Stack direction={{ base: 'column-reverse', md: 'row' }} spacing={'24px'}>
+          {children}
+        </Stack>
+      ) : (
+        <Stack direction={{ base: 'column-reverse', md: 'row' }} spacing={'24px'}>
+          <Button w={'full'} variant={'outline'} onClick={() => close()} {...cancelProps} fontSize={'10px'} fontWeight={'bold'} letterSpacing={'3px'}>
+            {cancelProps?.children ? cancelProps.children : <Trans>Cancel</Trans>}
+          </Button>
+          <Button w={'full'} {...okProps} fontSize={'10px'} fontWeight={'bold'} letterSpacing={'3px'}>
+            {okProps?.children ? okProps.children : <Trans>Confirm</Trans>}
+          </Button>
+        </Stack>
+      )}
+      {suffix}
+    </Stack>
+  )
+}
+
+export default EnhancedModalFooter

package/src/modal/components/MinimalModalContent.tsx

@@ -0,0 +1,24 @@
+import { Fragment, type FC } from 'react'
+import { Box, ModalBody, ModalCloseButton, ModalHeader } from '../../chakra.js'
+import { isReactNode } from '../../utils/react.js'
+import type { ModalContentConfig, ModalControlProps } from '../context.js'
+
+type Props = {
+  controls: ModalControlProps
+  modalContentConfig: Extract<ModalContentConfig, { type: 'minimal' }>
+}
+
+const MinimalModalContent: FC<Props> = ({ controls: { open, close }, modalContentConfig, ...props }) => {
+  const Content = modalContentConfig.content
+
+  const Wrapper = modalContentConfig.noModalBody ? Fragment : ModalBody
+  return (
+    <>
+      {modalContentConfig.title ? <ModalHeader>{modalContentConfig.title}</ModalHeader> : <Box h={'32px'} />}
+      <ModalCloseButton />
+      <Wrapper>{isReactNode(Content) ? Content : <Content close={close} open={open} {...props} />}</Wrapper>
+    </>
+  )
+}
+
+export default MinimalModalContent

package/src/modal/components/StandardModalContent.tsx

@@ -0,0 +1,65 @@
+import { t } from '@lingui/macro'
+import { useCallback, useState, type FC } from 'react'
+import {
+  Button,
+  HStack,
+  ModalBody,
+  ModalCloseButton,
+  ModalFooter,
+  ModalHeader
+} from '../../chakra.js'
+import { isReactNode } from '../../utils/react.js'
+import type { ModalContentConfig, ModalControlProps } from '../context.js'
+import { useEnhancedModal } from '../use-enhanced-modal.js'
+
+type Props = {
+  controls: ModalControlProps
+  modalContentConfig: Extract<ModalContentConfig, { type: 'standard' }>
+}
+
+const StandardModalContent: FC<Props> = ({ controls: { open, close }, modalContentConfig, ...props }) => {
+  const Content = modalContentConfig.content
+  const [isSaving, setIsSaving] = useState(false)
+  const { modalState } = useEnhancedModal()
+
+  const handleOK = useCallback(async () => {
+    setIsSaving(true)
+
+    if (modalContentConfig.onOk) {
+      try {
+        await modalContentConfig.onOk(modalState)
+      } finally {
+        setIsSaving(false)
+      }
+    }
+    close()
+  }, [modalContentConfig.onOk, close, modalState])
+
+  const handleCancel = useCallback(async () => {
+    if (modalContentConfig.onCancel) {
+      await modalContentConfig.onCancel()
+    }
+    close()
+  }, [modalContentConfig.onCancel, close])
+
+  return (
+    <>
+      <ModalHeader>{modalContentConfig.title}</ModalHeader>
+      <ModalCloseButton />
+      <ModalBody>
+        {isReactNode(Content) ? Content : <Content open={open} close={close} {...props} />}
+      </ModalBody>
+      <ModalFooter>
+        <HStack w={'full'} spacing={'6'}>
+          <Button isDisabled={isSaving} w={'full'} variant={'outline'} onClick={handleCancel}>{modalContentConfig.cancelText || t`Close`}</Button>
+          <Button isDisabled={modalContentConfig.isOkDisabled} isLoading={isSaving || modalContentConfig.isOkLoading} w={'full'} variant={'solid'} onClick={handleOK} colorScheme={modalContentConfig.okColorScheme}>
+            {modalContentConfig.okText || t`Ok`}
+          </Button>
+        </HStack>
+      </ModalFooter>
+    </>
+  )
+
+}
+
+export default StandardModalContent

package/src/modal/context.tsx

@@ -0,0 +1,81 @@
+import { createContext, type Dispatch, type FC, type ReactNode, type SetStateAction } from 'react'
+import type { UnionToIntersection } from 'type-fest'
+import type { ModalProps } from '../chakra.js'
+
+export type ModalControlProps = {
+  open: () => void
+  close: () => void
+}
+
+export type StandardModaContentConfig<MS = any> = {
+  type: 'standard'
+  title?: string
+  okText?: string
+  okColorScheme?: string
+  onOk?: (modalState: MS) => void | Promise<void>
+  isOkDisabled?: boolean
+  isOkLoading?: boolean
+  cancelText?: string
+  onCancel?: () => void | Promise<void>
+}
+
+export type CustomModalContentConfig = {
+  type: 'custom'
+}
+
+export type MinimalModalContentConfig = {
+  type: 'minimal'
+  title?: string
+  noModalBody?: boolean
+}
+
+type CleanupModalContentConfig<T> = {
+  [K in keyof T as Exclude<K, 'type'>]: T[K]
+};
+
+type ModalContentConfigUnion<MS = any> = StandardModaContentConfig<MS> | CustomModalContentConfig | MinimalModalContentConfig
+type ModalContentConfigIntersection<MS = any> = UnionToIntersection<CleanupModalContentConfig<ModalContentConfigUnion<MS>>>
+
+export type ModalContentConfig<P extends object = {}, MS = any> = {
+  contentProps?: P
+  initialModalState?: MS
+  content: FC<Partial<ModalControlProps> & Omit<P, keyof ModalControlProps>> | ReactNode
+  size?: ModalProps['size']
+} & ModalContentConfigUnion<MS>
+
+export type ModalOptions = {
+  onClose?: () => void
+}
+
+export interface ModalOpenOptions<ExtraProps extends object = {}, MS = any> extends ModalOptions {
+  modalContentConfig: ModalContentConfig<ExtraProps, MS>
+}
+
+export interface ModalUpdateOptions<ExtraProps extends object = Record<string, any>, MS = any> {
+  contentProps?: ExtraProps
+  state?: MS
+  modalContentConfig?: ModalContentConfigIntersection<MS>
+}
+
+export interface ModalCloseOptions {
+  keepModalContentConfig?: boolean
+}
+export interface ModalContextState<ExtraProps extends object = any, MS = any> {
+  isOpen: boolean
+  open: <P extends ExtraProps, IMS extends MS = any>(options?: ModalOpenOptions<P, IMS> | ModalContentConfig<P, IMS>) => void
+  close: (options?: ModalCloseOptions) => void
+  update: (options: ModalUpdateOptions<ExtraProps>) => void
+  modalState?: MS
+  setModalState: Dispatch<SetStateAction<MS>>
+}
+
+const initialState: ModalContextState = {
+  isOpen: true,
+  open: () => {},
+  close: () => {},
+  update: () => {},
+  modalState: undefined,
+  setModalState: () => {},
+}
+
+export const ModalContext = createContext<ModalContextState>(initialState)

package/src/modal/index.ts

@@ -0,0 +1,7 @@
+export { default as ModalProvider } from './ModalProvider.js'
+export { default as EnhancedModalCustomWrapper } from './components/EnhancedModalCustomWrapper.js'
+export { default as EnhancedModalFooter } from './components/EnhancedModalFooter.js'
+export { default as MinimalModalContent } from './components/MinimalModalContent.js'
+export * from './context.js'
+export * from './use-enhanced-modal.js'
+

package/src/modal/use-enhanced-modal.ts

@@ -0,0 +1,7 @@
+import { useContext, type Context } from 'react'
+import type { ModalContextState } from './context.js'
+import { ModalContext } from './context.js'
+
+export const useEnhancedModal = <P extends object = any, MS = any>(): ModalContextState<P, MS> => {
+  return useContext<ModalContextState<P, MS>>(ModalContext as unknown as Context<ModalContextState<P, MS>>)
+}

package/src/theme/colors.ts

@@ -0,0 +1,171 @@
+export const colors = {
+  /**
+   * #EFEFF0 Light Gray
+   */
+  primary1: '#EFEFF0',
+
+  /**
+   * #CACACA Gray
+   */
+  primary2: '#CACACA',
+
+  /**
+   * #585858 Dark Gray
+   */
+  primary3: '#585858',
+
+  /**
+   * #191919 Soft Black
+   */
+  primary4: '#191919',
+
+  /**
+   * #E55867 Red
+   */
+  accent4: '#E55867',
+
+  /**
+   * #ADE0EE Light Blue
+   */
+  links2: '#ADE0EE',
+
+  /**
+   * #50C8E8 Blue
+   */
+  links: '#50C8E8',
+
+  /**
+   * #E24657 Red
+   */
+  alert4: '#E24657',
+
+  /**
+   * #E24657 Red
+   */
+  danger: '#E24657',
+
+  /**
+   * #F4B25C Yellow
+   */
+  warning4: '#F4B25C',
+
+  /**
+   * #4FD9C2 Green
+   */
+  success4: '#4FD9C2',
+
+  /**
+   * #4FD9C2 Green
+   */
+  green: '#4FD9C2',
+
+  /**
+   * #3BD5BC Green
+   */
+  // green: '#3BD5BC',
+
+  /**
+   * #000000 Black
+   */
+  black: '#000000',
+
+  /**
+   * #ffffff White
+   */
+  white: '#ffffff',
+
+  /**
+   * #E6E6E6 Light Gray
+   */
+  whiteHover: '#E6E6E6',
+
+  /**
+   * #F4F4F4  Light Gray
+   */
+  placeholder: '#F4F4F4',
+
+  /**
+   * #F9F7D7 Light Yellow
+   */
+  highlight: '#F9F7D7',
+
+  primary: {
+    25: '#fafafa',
+    50: '#d6f5f0',
+    100: '#98e6d6',
+    200: '#191919',
+    300: '#191919',
+    400: '#3bd5bb',
+    500: '#000000',
+    600: '#000000',
+    700: '#000000',
+    800: '#000000',
+    900: '#000000'
+  },
+
+  success: {
+    50: '#d8f7f2',
+    100: '#98e6d6',
+    200: '#3bd5bc',
+    300: '#4FD9C2',
+    400: '#3bd5bb',
+    500: '#3bd5bb',
+    600: '#2EA692',
+    700: '#00825c',
+    800: '#00724d',
+    900: '#005530'
+  },
+
+  accent: {
+    50: '#fceaee',
+    100: '#f8cad3',
+    200: '#E55867',
+    300: '#E55867',
+    400: '#E24657',
+    500: '#E24657',
+    600: '#d8253f',
+    700: '#c61a38',
+    800: '#b91231',
+    900: '#aa0026'
+  },
+
+  warning: {
+    50: '#FDF0DE',
+    100: '#F4B25C',
+    200: '#F4B25C',
+    300: '#F4B25C',
+    400: '#F4B25C',
+    500: '#F4B25C',
+    600: '#BF7F2C',
+    700: '#F4B25C',
+    800: '#F4B25C',
+    900: '#F4B25C'
+  },
+
+  info: {
+    25: '#50C8E81A',
+    50: '#CDF1FA',
+    100: '#50C8E8',
+    200: '#50C8E8',
+    300: '#50C8E8',
+    400: '#50C8E8',
+    500: '#50C8E8',
+    600: '#3EA5C0',
+    700: '#50C8E8',
+    800: '#50C8E8',
+    900: '#50C8E8'
+  },
+
+  alert: {
+    50: '#E24657',
+    100: '#E24657',
+    200: '#E24657',
+    300: '#E24657',
+    400: '#E24657',
+    500: '#E24657',
+    600: '#E24657',
+    700: '#E24657',
+    800: '#E24657',
+    900: '#E24657',
+  }
+}

package/src/theme/index.ts

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

package/src/toast/index.ts

@@ -0,0 +1,3 @@
+export * from './use-toast-result.js';
+
+// TODO: Add the ToastBox component here