@driveflux/ui 1.0.14 → 1.1.1

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

package/src/toast/use-toast-result.tsx

@@ -1,168 +0,0 @@
-import type { Problem, ValidationIssues } from '@driveflux/problem'
-import type { StandardResult } from '@driveflux/result'
-import merge from 'lodash/merge.js'
-import { useCallback } from 'react'
-import {
-  Box,
-  ListItem,
-  Text,
-  UnorderedList,
-  useToast,
-  type CreateToastFnReturn,
-  type ToastId,
-  type UseToastOptions
-} from '../chakra.js'
-import { translations } from '../translations.js'
-import { accessReactNode, type ReactNodeAccessor } from '../utils/accessors.js'
-
-export type StatusFn<T> = (data?: T) => UseToastOptions['status']
-
-const accessStatus = <D,>(s?: UseToastOptions['status'] | StatusFn<D>, data?: D): UseToastOptions['status'] => {
-  return typeof s === 'function' ? s(data) : s
-}
-
-type CustomUseToastOptions<T> = Omit<UseToastOptions, 'status' | 'title' | 'description'> & {
-  status?: UseToastOptions['status'] | StatusFn<T>
-  title?: UseToastOptions['title'] | ReactNodeAccessor<T>
-  description?: UseToastOptions['description'] | ReactNodeAccessor<T>
-}
-
-type ErrorUseToastOptions<E = Problem> = CustomUseToastOptions<E> & {
-  showValidationErrors?: boolean
-  defaultDescription?: string
-}
-
-type UseToastResultOptions<S = any | Problem, E = Problem> = {
-  defaultOptions?: CustomUseToastOptions<S>
-  success?: CustomUseToastOptions<S> | boolean | null
-  error?: ErrorUseToastOptions<E> | boolean | null
-}
-
-type UseToastResult = {
-  toastProblem: <P extends Problem>(problem: P, providedOptions?: ErrorUseToastOptions<P>) => ToastId
-  toastSuccess: <T extends any>(providedOptions?: CustomUseToastOptions<T>) => ToastId
-  toastResult: <T extends unknown, R extends StandardResult<T> = StandardResult<T>>(
-    result: R,
-    generalToastOptions?: UseToastResultOptions<T, Problem>
-  ) => ToastId | undefined
-  toastError: (providedOptions?: UseToastOptions) => ToastId
-  toast: CreateToastFnReturn
-}
-
-const defaultUseToastResultOptions = {
-  success: {
-    status: 'success',
-    title: translations.success,
-    description: translations.successDescription,
-    isClosable: true
-  },
-  error: {
-    status: 'error',
-    title: translations.failed,
-    defaultDescription: translations.failedDescription,
-    showValidationErrors: true,
-    isClosable: true
-  }
-} as const satisfies UseToastResultOptions
-
-export const getValidationErrorsList = (validation: ValidationIssues) => {
-  return Object.values(validation.fieldErrors)
-    .map((v) => v.map((vd) => vd.message))
-    .flat()
-}
-
-const accessOptions = <S,>(options?: CustomUseToastOptions<S>, data?: S): UseToastOptions | undefined => {
-  if (!options) {
-    return options
-  }
-
-  return {
-    ...options,
-    status: accessStatus(options.status, data),
-    title: accessReactNode(options.title, data),
-    description: accessReactNode(options.description, data)
-  }
-}
-
-export const useToastResult = (options?: UseToastResultOptions): UseToastResult => {
-  const originalToast = useToast(accessOptions(options?.defaultOptions))
-
-  const toastProblem: UseToastResult['toastProblem'] = useCallback(
-    (problem, providedOptions) => {
-      const { description, defaultDescription, showValidationErrors, ...rest } = merge(
-        {},
-        defaultUseToastResultOptions.error,
-        providedOptions
-      )
-      const problemMessage = problem.message || defaultDescription
-      return originalToast({
-        ...accessOptions(rest, problem),
-        description: accessReactNode(description, problem) || (
-          <Box>
-            <>
-              {problemMessage && <Text color={'inherit'}>{problemMessage}</Text>}
-              {problem.validation && showValidationErrors && (
-                <UnorderedList color={'inherit'}>
-                  {getValidationErrorsList(problem.validation).map((message, i) => (
-                    <ListItem key={i}>{message}</ListItem>
-                  ))}
-                </UnorderedList>
-              )}
-            </>
-          </Box>
-        )
-      })
-    },
-    [originalToast]
-  )
-
-  const toastError: UseToastResult['toastError'] = useCallback(
-    (providedOptions) => {
-      const options = accessOptions(merge({}, defaultUseToastResultOptions.error, providedOptions))
-      return originalToast({
-        ...options
-      })
-    },
-    [originalToast]
-  )
-
-  const toastSuccess: UseToastResult['toastSuccess'] = useCallback(
-    (providedOptions) => {
-      const options = accessOptions(merge({}, defaultUseToastResultOptions.success, providedOptions))
-      return originalToast({
-        ...options
-      })
-    },
-    [originalToast]
-  )
-
-  const toastResult: UseToastResult['toastResult'] = useCallback(
-    (result, generalToastOptions) => {
-      const options = merge({}, defaultUseToastResultOptions, generalToastOptions)
-      const toastType = result.ok ? 'success' : 'error'
-
-      const toastOptions = options[toastType]
-      if (!toastOptions) {
-        return
-      }
-
-      const finalToastOptions = {
-        ...(accessOptions(
-          typeof toastOptions === 'boolean' ? defaultUseToastResultOptions[toastType] : toastOptions,
-          result.val
-        ) as UseToastOptions | ErrorUseToastOptions)
-      } as UseToastOptions | ErrorUseToastOptions
-      console.log('finalToastOptions????', finalToastOptions)
-      return result.ok ? toastSuccess(finalToastOptions) : toastProblem(result.val, finalToastOptions)
-    },
-    [originalToast, toastProblem, toastSuccess]
-  )
-
-  return {
-    toastProblem,
-    toastSuccess,
-    toastResult,
-    toastError,
-    toast: originalToast
-  }
-}

package/src/translations.ts

@@ -1,25 +0,0 @@
-import { singleton } from '@driveflux/singleton'
-type Translations = typeof translations
-
-export const translations = singleton('uiTranslations', {
-  success: 'Success',
-  successDescription: 'Operation completed successfully.',
-  failed: 'Operation Failed',
-  failedDescription: 'There was a problem while performing this operation.',
-  cancel: 'Cancel',
-  confirm: 'Confirm',
-  close: 'Close',
-  ok: 'Ok'
-})
-
-export const setTranslations = (ts: Partial<Translations>) => {
-  for (const key in ts) {
-    // TODO
-    // @ts-expect-error
-    translations[key] = ts[key as keyof Translations]!
-  }
-}
-
-export const setTranslation = <K extends keyof Translations>(key: K, value: Translations[K]) => {
-  translations[key] = value
-}

package/src/types.ts

@@ -1,22 +0,0 @@
-export type LengthUnits =
-  | 'cm'
-  | 'mm'
-  | 'in'
-  | 'px'
-  | 'pt'
-  | 'pc'
-  | 'em'
-  | 'ex'
-  | 'ch'
-  | 'vw'
-  | 'vh'
-  | 'rem'
-  | 'vmin'
-  | 'vmax'
-  | '%'
-
-export type StyleUnit = number | `${number}${LengthUnits}`
-
-export type Sizes = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'xs' | '3xl' | '4xl' | '5xl' | '6xl' | 'full'
-
-export type Padding = 'base' | 'md'

package/src/utils/accessors.ts

@@ -1,64 +0,0 @@
-import type { ReactNode } from 'react'
-
-type AllowedParam = string | number | boolean | Date | undefined | null
-type AllowedQueryParams = Record<string, AllowedParam | AllowedParam[]>
-
-export type GenericAccessor<O, R> = (m: O) => R
-
-export type SelfAccessor<O, R = any> = GenericAccessor<O, R>
-export type StringAccessor<O, R extends string = string> = GenericAccessor<O, R>
-export type StringOrNullAccessor<O, R extends string = string> = GenericAccessor<O, R | null>
-export type SelfPartialAccessor<O> = GenericAccessor<O, Partial<O>>
-export type QueryAccessor<O, R extends AllowedQueryParams = AllowedQueryParams> = GenericAccessor<O, R>
-export type ReactNodeAccessor<O> = GenericAccessor<O, ReactNode>
-export type BooleanAccessor<O> = GenericAccessor<O, boolean>
-export interface FunctionAccessor<O, F extends (...args: any[]) => any> { generateFunction: GenericAccessor<O, F> }
-
-export type GuaranteedAccessor<AC extends (...args: any[]) => any> = (
-  arg1: Required<Parameters<AC>>[0],
-  arg2?: Parameters<AC>[1],
-  arg3?: Parameters<AC>[2],
-  arg4?: Parameters<AC>[3],
-  arg5?: Parameters<AC>[4]
-) => ReturnType<AC>
-
-export const accessSelf = <D, S, DS = S>(s: S, data?: D, defaultValue?: DS) => {
-  if (!s) {
-    return defaultValue
-  }
-
-  return typeof s === 'function' ? s(data) : s
-}
-
-export const accessBoolean = <D>(s: boolean | BooleanAccessor<D>, data?: D, defaultBoolean?: boolean) =>
-  accessSelf(s, data, defaultBoolean)
-
-export const accessString = <D>(s: string | StringAccessor<D>, data?: D, defaultText?: string) =>
-  accessSelf(s, data, defaultText)
-
-export const accessStringOrNull = <D>(
-  s: string | null | StringOrNullAccessor<D>,
-  data?: D,
-  defaultText: string | null = null
-) => accessSelf(s, data, defaultText)
-
-export const accessQuery = <D>(
-  s: AllowedQueryParams | QueryAccessor<D>,
-  data?: D,
-  defaultQuery?: AllowedQueryParams
-) => accessSelf(s, data, defaultQuery)
-
-export const accessReactNode = <D>(s: ReactNode | ReactNodeAccessor<D>, data?: D, defaultNode?: ReactNode) =>
-  accessSelf(s, data, defaultNode)
-
-export const accessFunction = <D, F extends (...args: any[]) => any>(
-  f: FunctionAccessor<D, F> | F,
-  data?: D,
-  defaultFunction?: F
-) => {
-  if (!f) {
-    return defaultFunction
-  }
-
-  return typeof f === 'object' && 'generateFunction' in f ? f.generateFunction(data as D) : f
-}

package/src/utils/index.ts

@@ -1,2 +0,0 @@
-export * from './accessors.js'
-export * from './react.js'

package/src/utils/react.ts

@@ -1,35 +0,0 @@
-import { isValidElement, type ComponentType, type ReactElement, type ReactNode } from 'react'
-
-export function isReactComponent(Component: any): Component is ComponentType<any> {
-  return (
-    typeof Component === 'function' &&
-    // TODO
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- React component, it's fine
-    (Component.prototype instanceof Component || Component.displayName !== undefined)
-  )
-}
-
-export function isReactElement(element: any): element is ReactElement {
-  // TODO
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument -- isValidElement is a validation function
-  return isValidElement(element)
-}
-
-export function isReactNode(node: any): node is ReactNode {
-  if (
-    // TODO
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument -- isValidElement is a validation function
-    isValidElement(node) || // Check if it's a React element
-    typeof node === 'string' || // Check if it's a string
-    typeof node === 'number' // Check if it's a number
-  ) {
-    return true
-  }
-
-  // Check if it's an array of React nodes
-  if (Array.isArray(node) && node.every((element) => isReactNode(element))) {
-    return true
-  }
-
-  return false
-}