@driveflux/ui 1.0.13 → 1.1.0

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
-}

package/theme.cjs

@@ -1 +0,0 @@
-module.exports = require('./dist/cjs/theme/index.js')

package/theme.d.ts

@@ -1 +0,0 @@
-export * from './dist/theme/index'

package/toast.cjs

@@ -1 +0,0 @@
-module.exports = require('./dist/cjs/toast/index.js')

package/toast.d.ts

@@ -1 +0,0 @@
-export * from './dist/toast/index'

package/translations.cjs

@@ -1 +0,0 @@
-module.exports = require('./dist/cjs/translations.js')

package/translations.d.ts

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

package/tsconfig.json

@@ -1,14 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "extends": "@driveflux/tsconfig/frontend.json",
-  "compilerOptions": {
-    "declaration": true,
-    "rootDir": "src",
-    "outDir": "./dist"
-  },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx"
-  ],
-  "exclude": ["node_modules"]
-}