Chakra UI v3 upgrade: Added Toaster and Tooltip components, updated core UI packages

apps/web/src/app/app.tsx

@@ -1,10 +1,11 @@
 import { WebShellFeature } from '@kin-kinetic/web/shell/feature'
 import { SaasProvider } from '@saas-ui/react'
-
+import { Toaster } from '@kin-kinetic/web/ui/toaster'
 export function App() {
   return (
     <SaasProvider>
       <WebShellFeature endpoint="/graphql" />
+      <Toaster />
     </SaasProvider>
   )
 }

libs/web/ui/copy/src/lib/web-ui-copy.tsx

@@ -1,33 +1,32 @@
-import { Button, Text, Tooltip, useClipboard, useToast } from '@chakra-ui/react'
+import { Tooltip } from '@kin-kinetic/web/ui/tooltip'
+import { Button, Text, useClipboard } from '@chakra-ui/react'
+import { toaster } from '@kin-kinetic/web/ui/toaster'
 import { IconCopy } from '@tabler/icons'
 import { ReactNode } from 'react'
 
 export interface WebUiCopyProps {
-  disabled?: boolean
+  isDisabled?: boolean
   label?: ReactNode
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
   text?: string
 }
 
-export function WebUiCopy({ disabled, label, size = 'sm', text = '' }: WebUiCopyProps) {
+export function WebUiCopy({ isDisabled, label, size = 'sm', text = '' }: WebUiCopyProps) {
   const { onCopy } = useClipboard(text)
-  const toast = useToast()
 
   const handleCopy = () => {
     onCopy()
-    toast({
-      status: 'info',
-      title: `Copied ${text.length} characters to clipboard`,
-      duration: 2000,
-      isClosable: true,
+    toaster.create({
+      type: 'info',
+      description: `Copied ${text.length} characters to clipboard`,
     })
   }
 
   return (
-    <Tooltip label={`Copy ${text.length} characters to clipboard`} placement="top">
-      <Button p={size} variant="outline" disabled={disabled} size={size} onClick={handleCopy}>
+    <Tooltip content={`Copy ${text.length} characters to clipboard`} placement="top" showArrow>
+      <Button p={size} variant="outline" disabled={isDisabled} size={size} onClick={handleCopy}>
         <IconCopy color="gray" size={16} />
-        {label ? typeof label === 'string' ? <Text ml={2}>{label}</Text> : label : null}
+        {label && (typeof label === 'string' ? <Text ml={2}>{label}</Text> : label)}
       </Button>
     </Tooltip>
   )

libs/web/ui/table/src/lib/web-ui-table-paginator.tsx

@@ -8,7 +8,6 @@ import {
 } from '@ajna/pagination'
 import { Flex, SimpleGrid } from '@chakra-ui/react'
 import { WebUiTablePaginatorPageSize } from './web-ui-table-paginator-page.size'
-
 export function WebUiTablePaginator({
   currentPage,
   setPage,
@@ -38,7 +37,7 @@ export function WebUiTablePaginator({
                     bg: 'primary.500',
                   }}
                   key={`pagination_page_${page}`}
-                  page={page}
+                  page={page as any}
                 />
               ))}
             </PaginationPageGroup>

libs/web/ui/table/src/lib/web-ui-table.tsx

@@ -1,4 +1,5 @@
-import { Table, TableContainer, Tbody, Td, Tfoot, Th, Thead, Tr, useColorModeValue } from '@chakra-ui/react'
+import { Table } from '@chakra-ui/react'
+import { useColorModeValue } from '@chakra-ui/system'
 import { ReactNode } from 'react'
 import { useNavigate } from 'react-router-dom'
 
@@ -33,45 +34,45 @@ export function WebUiTable<T extends { id?: string | null | undefined; [key: str
   const rowBgColor = useColorModeValue('primary.100', 'whiteAlpha.100')
 
   return (
-    <TableContainer>
-      <Table variant="simple">
-        <Thead>
-          <WebUiTableHeader<T> columns={columns} />
-        </Thead>
-        <Tbody>
-          {data.map((item: T) => (
-            <Tr
-              onClick={() => navigate(item.id || '')}
-              key={item.id}
-              _hover={{
-                background: rowBgColor,
-                cursor: 'pointer',
-              }}
-            >
-              {columns.map((field) => (
-                <Td key={field.key as string} width={field.width} p={2}>
-                  {field.render ? field.render(item) : (item[field.key as string] as ReactNode)}
-                </Td>
-              ))}
-            </Tr>
-          ))}
-        </Tbody>
-        <Tfoot>
-          <WebUiTableHeader<T> columns={columns} />
-        </Tfoot>
-      </Table>
-    </TableContainer>
+    <Table.Root size="sm">
+      <Table.Header>
+        <WebUiTableHeader<T> columns={columns} />
+      </Table.Header>
+
+      <Table.Body>
+        {data.map((item: T) => (
+          <Table.Row
+            onClick={() => navigate(item.id || '')}
+            key={item.id}
+            _hover={{
+              bg: rowBgColor,
+              cursor: 'pointer',
+            }}
+          >
+            {columns.map((field) => (
+              <Table.Cell key={field.key as string} w={field.width} p={2}>
+                {field.render ? field.render(item) : (item[field.key as string] as ReactNode)}
+              </Table.Cell>
+            ))}
+          </Table.Row>
+        ))}
+      </Table.Body>
+
+      <Table.Footer>
+        <WebUiTableHeader<T> columns={columns} />
+      </Table.Footer>
+    </Table.Root>
   )
 }
 
 function WebUiTableHeader<T>({ columns }: { columns: WebUiTableColumn<T>[] }) {
   return (
-    <Tr>
+    <Table.Row>
       {columns?.map((field) => (
-        <Th isNumeric={field.isNumeric} key={field.label} p={2}>
+        <Table.ColumnHeader key={field.label} textAlign={field.isNumeric ? 'end' : 'start'} p={2}>
           {field.label}
-        </Th>
+        </Table.ColumnHeader>
       ))}
-    </Tr>
+    </Table.Row>
   )
 }

libs/web/ui/toaster/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

libs/web/ui/toaster/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nrwl/nx/react", "../../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

libs/web/ui/toaster/README.md

@@ -0,0 +1,7 @@
+# web-ui-toaster
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test web-ui-toaster` to execute the unit tests via [Jest](https://jestjs.io).

libs/web/ui/toaster/jest.config.ts

@@ -0,0 +1,11 @@
+/* eslint-disable */
+export default {
+  displayName: 'web-ui-toaster',
+  preset: '../../../../jest.preset.js',
+  transform: {
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest',
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nrwl/react/babel'] }],
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../../../coverage/libs/web/ui/toaster',
+}

libs/web/ui/toaster/project.json

@@ -0,0 +1,24 @@
+{
+  "name": "web-ui-toaster",
+  "$schema": "../../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/web/ui/toaster/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["libs/web/ui/toaster/**/*.{ts,tsx,js,jsx}"]
+      }
+    },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "libs/web/ui/toaster/jest.config.ts",
+        "passWithNoTests": true
+      }
+    }
+  }
+}

libs/web/ui/toaster/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/web-ui-toaster'

libs/web/ui/toaster/src/lib/web-ui-toaster.spec.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react'
+
+import WebUiToaster from './web-ui-toaster'
+
+describe('WebUiToaster', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<WebUiToaster />)
+    expect(baseElement).toBeTruthy()
+  })
+})

libs/web/ui/toaster/src/lib/web-ui-toaster.tsx

@@ -0,0 +1,26 @@
+import { Toaster as ChakraToaster, Portal, Spinner, Stack, Toast, createToaster } from '@chakra-ui/react'
+
+export const toaster = createToaster({
+  placement: 'bottom-end',
+  pauseOnPageIdle: true,
+})
+
+export const Toaster = () => {
+  return (
+    <Portal>
+      <ChakraToaster toaster={toaster} insetInline={{ mdDown: '4' }}>
+        {(toast: any) => (
+          <Toast.Root width={{ md: 'sm' }}>
+            {toast.type === 'loading' ? <Spinner size="sm" color="blue.solid" /> : <Toast.Indicator />}
+            <Stack gap="1" flex="1" maxWidth="100%">
+              {toast.title && <Toast.Title>{toast.title}</Toast.Title>}
+              {toast.description && <Toast.Description>{toast.description}</Toast.Description>}
+            </Stack>
+            {toast.action && <Toast.ActionTrigger>{toast.action.label}</Toast.ActionTrigger>}
+            {toast.closable && <Toast.CloseTrigger />}
+          </Toast.Root>
+        )}
+      </ChakraToaster>
+    </Portal>
+  )
+}

libs/web/ui/toaster/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../../tsconfig.base.json"
+}

libs/web/ui/toaster/tsconfig.lib.json

@@ -0,0 +1,23 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "files": [
+    "../../../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],
+  "exclude": [
+    "jest.config.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}

libs/web/ui/toaster/tsconfig.spec.json

@@ -0,0 +1,20 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}

libs/web/ui/tooltip/src/index.ts

@@ -1 +1,2 @@
+export * from './lib/tooltip/tooltip'
 export * from './lib/web-ui-tooltip'

libs/web/ui/tooltip/src/lib/tooltip/tooltip.spec.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react'
+
+import Tooltip from './tooltip'
+
+describe('Tooltip', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<Tooltip />)
+    expect(baseElement).toBeTruthy()
+  })
+})

libs/web/ui/tooltip/src/lib/tooltip/tooltip.tsx

@@ -0,0 +1,35 @@
+import { Tooltip as ChakraTooltip, Portal } from '@chakra-ui/react'
+import * as React from 'react'
+
+export interface TooltipProps extends ChakraTooltip.RootProps {
+  showArrow?: boolean
+  portalled?: boolean
+  portalRef?: React.RefObject<HTMLElement>
+  content: React.ReactNode
+  contentProps?: ChakraTooltip.ContentProps
+  disabled?: boolean
+}
+
+export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(function Tooltip(props, ref) {
+  const { showArrow, children, disabled, portalled = true, content, contentProps, portalRef, ...rest } = props
+
+  if (disabled) return <>{children}</>
+
+  return (
+    <ChakraTooltip.Root {...rest}>
+      <ChakraTooltip.Trigger asChild>{children}</ChakraTooltip.Trigger>
+      <Portal disabled={!portalled} container={portalRef}>
+        <ChakraTooltip.Positioner>
+          <ChakraTooltip.Content ref={ref} {...contentProps}>
+            {showArrow && (
+              <ChakraTooltip.Arrow>
+                <ChakraTooltip.ArrowTip />
+              </ChakraTooltip.Arrow>
+            )}
+            {content}
+          </ChakraTooltip.Content>
+        </ChakraTooltip.Positioner>
+      </Portal>
+    </ChakraTooltip.Root>
+  )
+})

libs/web/ui/tooltip/src/lib/web-ui-tooltip.tsx

@@ -1,4 +1,4 @@
-import { Tooltip } from '@chakra-ui/react'
+import { Tooltip } from '@kin-kinetic/web/ui/tooltip'
 import { ReactNode } from 'react'
 
 export interface WebUiTooltipProps {