Merge pull request #53 from DouglasNeuroInformatics/dev

Update to Tailwind v4 and React v19

Author: joshunrau

.nvmrc

@@ -1 +1 @@
-lts/iron
+lts/jod

.storybook/preview.ts

@@ -8,7 +8,7 @@ import '../src/tailwind/globals.css';
 i18n.init();
 
 const preview: Preview = {
-  globals: {
+  initialGlobals: {
     locale: 'en',
     locales: {
       en: 'English',

.storybook/theme.ts

@@ -1,48 +1,49 @@
 import { create } from '@storybook/theming/create';
+import { formatRgb } from 'culori';
 import colors from 'tailwindcss/colors';
 import defaultTheme from 'tailwindcss/defaultTheme';
 
 import logo from '../src/assets/libui-logo.svg';
 
 export default create({
-  appBg: colors.slate['800'],
+  appBg: formatRgb(colors.slate['800']),
 
-  appBorderColor: colors.slate['700'],
+  appBorderColor: formatRgb(colors.slate['700']),
   appBorderRadius: 4,
 
-  appContentBg: colors.slate['800'],
-  appPreviewBg: colors.slate['800'],
-  barBg: colors.slate['700'],
-  barHoverColor: colors.sky['500'],
+  appContentBg: formatRgb(colors.slate['800']),
+  appPreviewBg: formatRgb(colors.slate['800']),
+  barBg: formatRgb(colors.slate['700']),
+  barHoverColor: formatRgb(colors.sky['500']),
 
-  barSelectedColor: colors.slate['300'],
-  barTextColor: colors.slate['300'],
+  barSelectedColor: formatRgb(colors.slate['300']),
+  barTextColor: formatRgb(colors.slate['300']),
 
   base: 'dark',
-  booleanBg: colors.sky['700'],
-  booleanSelectedBg: colors.sky['500'],
+  booleanBg: formatRgb(colors.sky['700']),
+  booleanSelectedBg: formatRgb(colors.sky['500']),
   brandImage: logo,
   brandTarget: '_self',
 
   brandTitle: 'libui',
   brandUrl: 'https://github.com/DouglasNeuroInformatics/libui',
-  buttonBg: colors.sky['700'],
+  buttonBg: formatRgb(colors.sky['700']),
 
-  buttonBorder: colors.sky['500'],
-  colorPrimary: colors.slate['800'],
-  colorSecondary: colors.slate['400'],
+  buttonBorder: formatRgb(colors.sky['500']),
+  colorPrimary: formatRgb(colors.slate['800']),
+  colorSecondary: formatRgb(colors.slate['400']),
   fontBase: defaultTheme.fontFamily.sans.join(','),
 
   fontCode: defaultTheme.fontFamily.mono.join(', '),
   gridCellSize: 5,
 
-  inputBg: colors.slate['700'],
-  inputBorder: colors.slate['600'],
+  inputBg: formatRgb(colors.slate['700']),
+  inputBorder: formatRgb(colors.slate['600']),
 
   inputBorderRadius: 4,
-  inputTextColor: colors.slate['100'],
-  textColor: colors.slate['100'],
-  textInverseColor: colors.slate['900'],
+  inputTextColor: formatRgb(colors.slate['100']),
+  textColor: formatRgb(colors.slate['100']),
+  textInverseColor: formatRgb(colors.slate['900']),
 
-  textMutedColor: colors.slate['500']
+  textMutedColor: formatRgb(colors.slate['500'])
 });

README.md

@@ -31,8 +31,7 @@
 
 ## About
 
-A React component library built by the Douglas Neuroinformatics Platform (DNP) using [shadcn/ui](https://github.com/shadcn-ui/ui) with [React](https://react.dev/) and [TailwindCSS](https://tailwindcss.com/). Although primarily intended for internal use in our platforms, it is
-designed as a generic implementation.
+A React component library built by the Douglas Neuroinformatics Platform (DNP) using [shadcn/ui](https://github.com/shadcn-ui/ui) with [React](https://react.dev/) and [TailwindCSS](https://tailwindcss.com/). Although primarily intended for internal use in our platforms, it is designed as a generic implementation.
 
 ## Installation
 
@@ -42,14 +41,13 @@ pnpm install @douglasneuroinformatics/libui
 
 ## Usage
 
-**tailwind.config.cjs**
+**globals.css**
 
-```js
-const config = require('@douglasneuroinformatics/libui/tailwind/config');
+```css
+@import '@douglasneuroinformatics/libui/tailwind/globals.css';
 
-module.exports = config({
-  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}']
-});
+// adjust as required
+@source "../node_modules/@douglasneuroinformatics/libui";
 ```
 
 **i18n.ts**
@@ -78,7 +76,7 @@ init({ translations: { common } });
 **main.tsx**
 
 ```js
-import '@douglasneuroinformatics/libui/tailwind/globals.css';
+import './globals.css';
 import './i18n';
 ```
 

package.json

@@ -2,7 +2,7 @@
   "name": "@douglasneuroinformatics/libui",
   "type": "module",
   "version": "3.9.0",
-  "packageManager": "[email protected].0",
+  "packageManager": "[email protected].1",
   "description": "Generic UI components for DNP projects, built using React and Tailwind CSS",
   "author": "Joshua Unrau",
   "license": "Apache-2.0",
@@ -32,10 +32,6 @@
       "import": "./dist/i18n.js"
     },
     "./package.json": "./package.json",
-    "./tailwind/config": {
-      "types": "./dist/tailwind/config.d.cts",
-      "require": "./dist/tailwind/config.cjs"
-    },
     "./tailwind/globals.css": "./dist/tailwind/globals.css",
     "./utils": {
       "types": "./dist/utils.d.ts",
@@ -51,6 +47,9 @@
     "/tailwind.config.cjs",
     "/tailwind.config.d.cts"
   ],
+  "engines": {
+    "node": "22.x"
+  },
   "scripts": {
     "build": "rm -rf dist && tsup --config tsup.config.mts",
     "format": "prettier --write src",
@@ -63,13 +62,13 @@
     "test:coverage": "vitest --coverage"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "tailwindcss": "^3.4.10",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "tailwindcss": "^4.1.0",
     "zod": "^3.23.6"
   },
   "dependencies": {
-    "@douglasneuroinformatics/libjs": "^1.5.1",
+    "@douglasneuroinformatics/libjs": "^2.7.0",
     "@douglasneuroinformatics/libui-form-types": "^0.11.0",
     "@radix-ui/react-accordion": "^1.2.3",
     "@radix-ui/react-alert-dialog": "^1.1.6",
@@ -93,7 +92,6 @@
     "@radix-ui/react-switch": "^1.1.3",
     "@radix-ui/react-tabs": "^1.1.3",
     "@radix-ui/react-tooltip": "^1.1.8",
-    "@tailwindcss/container-queries": "^0.1.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -105,11 +103,11 @@
     "react-resizable-panels": "^2.1.7",
     "recharts": "^2.15.1",
     "tailwind-merge": "^2.6.0",
-    "tailwindcss-animate": "^1.0.7",
     "ts-pattern": "^5.7.0",
-    "type-fest": "^4.38.0",
-    "vaul": "^0.9.9",
-    "zustand": "^4.5.6"
+    "tw-animate-css": "^1.2.5",
+    "type-fest": "^4.39.0",
+    "vaul": "^1.1.2",
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@douglasneuroinformatics/eslint-config": "^5.3.2",
@@ -127,30 +125,31 @@
     "@storybook/react": "^8.6.11",
     "@storybook/react-vite": "^8.6.11",
     "@storybook/theming": "^8.6.11",
+    "@tailwindcss/vite": "^4.1.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "16.2.0",
     "@testing-library/user-event": "^14.6.1",
+    "@types/culori": "^2.1.1",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^20.17.28",
-    "@types/react": "^18.3.20",
-    "@types/react-dom": "^18.3.5",
+    "@types/node": "22.x",
+    "@types/react": "^19.0.12",
+    "@types/react-dom": "^19.0.4",
     "@vitejs/plugin-react-swc": "^3.8.1",
-    "@vitest/coverage-v8": "^2.1.9",
-    "autoprefixer": "^10.4.21",
+    "@vitest/coverage-v8": "^3.1.1",
+    "culori": "^4.0.1",
     "eslint": "^9.23.0",
-    "happy-dom": "^14.12.3",
+    "happy-dom": "^17.4.4",
     "husky": "^9.1.7",
-    "jsdom": "25.0.1",
     "postcss": "^8.5.3",
     "prettier": "^3.5.3",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "sort-json": "^2.0.1",
     "storybook": "^8.6.11",
     "tsup": "^8.4.0",
-    "typescript": "5.8.x",
-    "vite": "5.4.16",
-    "vitest": "^2.1.9"
+    "typescript": "5.6.x",
+    "vite": "6.2.4",
+    "vitest": "^3.1.1"
   },
   "commitlint": {
     "extends": [