@driveflux/ui 1.0.13 → 1.1.0

package/src/modal/ModalProvider.tsx

@@ -1,143 +0,0 @@
-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,
-      // TODO
-      // @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

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

@@ -1,51 +0,0 @@
-import { FC, ReactNode } from 'react'
-import { Button, ButtonProps, Stack, StackProps } from '../../chakra.js'
-import { colors } from '../../theme/colors.js'
-import { translations } from '../../translations.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={'700'} letterSpacing={'3px'}>
-            {cancelProps?.children ? cancelProps.children : translations.cancel}
-          </Button>
-          <Button w={'full'} {...okProps} fontSize={'10px'} fontWeight={'700'} letterSpacing={'3px'}>
-            {okProps?.children ? okProps.children : translations.confirm}
-          </Button>
-        </Stack>
-      )}
-      {suffix}
-    </Stack>
-  )
-}
-
-export default EnhancedModalFooter

package/src/modal/components/MinimalModalContent.tsx

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

@@ -1,65 +0,0 @@
-import { useCallback, useState, type FC } from 'react'
-import {
-  Button,
-  HStack,
-  ModalBody,
-  ModalCloseButton,
-  ModalFooter,
-  ModalHeader
-} from '../../chakra.js'
-import { translations } from '../../translations.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 || translations.close}</Button>
-          <Button isDisabled={modalContentConfig.isOkDisabled} isLoading={isSaving || modalContentConfig.isOkLoading} w={'full'} variant={'solid'} onClick={handleOK} colorScheme={modalContentConfig.okColorScheme}>
-            {modalContentConfig.okText || translations.ok}
-          </Button>
-        </HStack>
-      </ModalFooter>
-    </>
-  )
-
-}
-
-export default StandardModalContent

package/src/modal/context.tsx

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

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

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

@@ -1,179 +0,0 @@
-  // TODO sync this with the one in dump
-  // remove dump file version
-  // update all instances using colors
-
-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'
-  },
-
-  // TODO add 25
-  success: {
-    50: '#d8f7f2',
-    100: '#98e6d6',
-    200: '#3bd5bc',
-    300: '#4FD9C2',
-    400: '#3bd5bb',
-    500: '#3bd5bb',
-    600: '#2EA692',
-    700: '#00825c',
-    800: '#00724d',
-    900: '#005530'
-  },
-
-  // TODO add 25
-  accent: {
-    50: '#fceaee',
-    100: '#f8cad3',
-    200: '#E55867',
-    300: '#E55867',
-    400: '#E24657',
-    500: '#E24657',
-    600: '#d8253f',
-    700: '#c61a38',
-    800: '#b91231',
-    900: '#aa0026'
-  },
-
-  // TODO add 25
-  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'
-  },
-
-  // TODO add 25
-  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

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

package/src/toast/index.ts

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