@driveflux/ui 1.0.0-next.0 → 1.0.0-next.2

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@driveflux/ui",
-  "version": "1.0.0-next.0",
+  "version": "1.0.0-next.2",
   "type": "module",
-  "main": "./dist/cjs/index.js",
+  "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -30,34 +30,39 @@
       "import": "./dist/utils/index.js",
       "require": "./dist/cjs/utils/index.js",
       "types": "./dist/utils/index.d.ts"
+    },
+    "./translations": {
+      "import": "./dist/translations.js",
+      "require": "./dist/cjs/translations.js",
+      "types": "./dist/translations.d.ts"
     }
   },
   "dependencies": {
     "@chakra-ui/react": "^2.8.2",
-    "lodash": "^4.17.21",
-    "@driveflux/icons": "1.0.0-next.0"
+    "@driveflux/icons": "1.0.0-next.2",
+    "lodash": "^4.17.21"
   },
   "peerDependencies": {
-    "next": "^14.0.3",
+    "next": "14.1.0",
     "react": "18.2.0",
     "swr": "^2.2.4"
   },
   "devDependencies": {
-    "@lingui/macro": "^4.5.0",
+    "@driveflux/eslint-config": "1.0.0-next.2",
+    "@driveflux/fab": "1.0.0-next.2",
+    "@driveflux/problem": "4.0.0-next.2",
+    "@driveflux/result": "4.0.0-next.2",
+    "@driveflux/tsconfig": "1.0.0-next.2",
+    "@lingui/macro": "^4.7.0",
+    "@swc/cli": "^0.3.9",
+    "@swc/core": "^1.4.0",
     "@types/lodash": "^4.14.202",
-    "@types/node": "^20.9.1",
-    "@types/react": "^18.2.0",
-    "@swc/cli": "^0.1.63",
-    "@swc/core": "^1.3.99",
+    "@types/node": "^20.11.16",
+    "@types/react": "^18.2.55",
     "del-cli": "^5.1.0",
-    "eslint": "8.54.0",
-    "type-fest": "^4.8.2",
-    "typescript": "^5.2.2",
-    "@driveflux/eslint-config": "1.0.0-next.0",
-    "@driveflux/tsconfig": "1.0.0-next.0",
-    "@driveflux/problem": "4.0.0-next.0",
-    "@driveflux/result": "4.0.0-next.0",
-    "@driveflux/fab": "1.0.0-next.0"
+    "eslint": "8.56.0",
+    "type-fest": "^4.10.2",
+    "typescript": "^5.3.3"
   },
   "scripts": {
     "build": "fab",

package/src/index.ts

@@ -1 +1,3 @@
+// Turbopack has a bug that's not allowing export * from './chakra.js' to work
 export * from './chakra.js'
+

package/src/modal/components/EnhancedModalFooter.tsx

@@ -1,7 +1,7 @@
-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 { translations } from '../../translations.js'
 import { useEnhancedModal } from '../use-enhanced-modal.js'
 
 type Props = {
@@ -36,10 +36,10 @@ const EnhancedModalFooter: FC<Props> = ({ sticky, cancelProps, okProps, children
       ) : (
         <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>}
+            {cancelProps?.children ? cancelProps.children : translations.cancel}
           </Button>
           <Button w={'full'} {...okProps} fontSize={'10px'} fontWeight={'bold'} letterSpacing={'3px'}>
-            {okProps?.children ? okProps.children : <Trans>Confirm</Trans>}
+            {okProps?.children ? okProps.children : translations.confirm}
           </Button>
         </Stack>
       )}

package/src/modal/components/StandardModalContent.tsx

@@ -1,4 +1,3 @@
-import { t } from '@lingui/macro'
 import { useCallback, useState, type FC } from 'react'
 import {
   Button,
@@ -8,6 +7,7 @@ import {
   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'
@@ -51,9 +51,9 @@ const StandardModalContent: FC<Props> = ({ controls: { open, close }, modalConte
       </ModalBody>
       <ModalFooter>
         <HStack w={'full'} spacing={'6'}>
-          <Button isDisabled={isSaving} w={'full'} variant={'outline'} onClick={handleCancel}>{modalContentConfig.cancelText || t`Close`}</Button>
+          <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 || t`Ok`}
+            {modalContentConfig.okText || translations.ok}
           </Button>
         </HStack>
       </ModalFooter>

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

@@ -1,6 +1,5 @@
 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 {
@@ -13,6 +12,7 @@ import {
   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']
@@ -52,14 +52,14 @@ type UseToastResult = {
 const defaultUseToastResultOptions = {
   success: {
     status: 'success',
-    title: t`Success`,
-    description: t`The operation was done successfully`,
+    title: translations.success,
+    description: translations.successDescription,
     isClosable: true
   },
   error: {
     status: 'error',
-    title: t`Operation Failed`,
-    defaultDescription: t`There was a problem while performing this operation`,
+    title: translations.failed,
+    defaultDescription: translations.failedDescription,
     showValidationErrors: true,
     isClosable: true
   }

package/src/translations.ts

@@ -0,0 +1,23 @@
+type Translations = typeof translations
+
+export const translations = {
+  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) {
+    // @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/utils/react.ts

@@ -1,19 +1,19 @@
-import { default as React, isValidElement } from 'react'
+import { isValidElement, type ComponentType, type ReactElement, type ReactNode } from 'react'
 
-export function isReactComponent(Component: any): Component is React.ComponentType<any> {
+export function isReactComponent(Component: any): Component is 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)
+    (Component.prototype instanceof Component || Component.displayName !== undefined)
   )
 }
 
-export function isReactElement(element: any): element is React.ReactElement {
+export function isReactElement(element: any): element is 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 {
+export function isReactNode(node: any): node is 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

package/translations.cjs

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

package/translations.d.ts

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