@driveflux/ui 1.0.0-next.0

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

@@ -0,0 +1,169 @@
+import type { Problem, ValidationIssues } from '@driveflux/problem'
+import type { StandardResult } from '@driveflux/result'
+import { t } from '@lingui/macro'
+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 { 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: t`Success`,
+    description: t`The operation was done successfully`,
+    isClosable: true
+  },
+  error: {
+    status: 'error',
+    title: t`Operation Failed`,
+    defaultDescription: t`There was a problem while performing this operation`,
+    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 || defaultUseToastResultOptions)
+      const toastType = result.ok ? 'success' : 'error'
+      const toastOptions =
+        typeof generalToastOptions === 'undefined' || generalToastOptions[toastType] === null
+          ? null
+          : options[toastType]
+      if (!toastOptions) {
+        return
+      }
+
+      const finalToastOptions = {
+        ...(accessOptions(
+          typeof toastOptions === 'boolean' ? defaultUseToastResultOptions[toastType] : toastOptions,
+          result.val
+        ) as UseToastOptions | ErrorUseToastOptions)
+      } as UseToastOptions | ErrorUseToastOptions
+      return result.ok ? toastSuccess(finalToastOptions) : toastProblem(result.val, finalToastOptions)
+    },
+    [originalToast, toastProblem, toastSuccess]
+  )
+
+  return {
+    toastProblem,
+    toastSuccess,
+    toastResult,
+    toastError,
+    toast: originalToast
+  }
+}

package/src/types.ts

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

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

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

package/src/utils/react.ts

@@ -0,0 +1,32 @@
+import { default as React, isValidElement } from 'react'
+
+export function isReactComponent(Component: any): Component is React.ComponentType<any> {
+  return (
+    typeof Component === 'function' &&
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- React component, it's fine
+    (Component.prototype instanceof React.Component || Component.displayName !== undefined)
+  )
+}
+
+export function isReactElement(element: any): element is React.ReactElement {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument -- isValidElement is a validation function
+  return isValidElement(element)
+}
+
+export function isReactNode(node: any): node is React.ReactNode {
+  if (
+    // 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

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

package/theme.d.ts

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

package/toast.cjs

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

package/toast.d.ts

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

package/tsconfig.json

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