upgrade ui-library to chakra ui v3

Author: antpaw

.storybook/chakraTheme.ts

@@ -1,18 +1,16 @@
-import * as React from "react";
-import type { Preview } from "@storybook/react";
-import { ChakraProvider } from "@chakra-ui/react";
+import { ChakraProvider } from '@chakra-ui/react'
+import type { Preview } from '@storybook/react'
+import './styles.css'
+import type { PropsWithChildren } from 'react'
+import { system as theme } from './theme'
 
-import "./styles.css";
-
-import { chakraTheme } from "./chakraTheme";
-
-function StoryWrapper({ children }: { children: React.ReactNode }) {
-  return <ChakraProvider theme={chakraTheme}>{children}</ChakraProvider>;
+function StoryWrapper({ children }: PropsWithChildren) {
+  return <ChakraProvider value={theme}>{children}</ChakraProvider>
 }
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
+    actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
         color: /(background|color)$/i,
@@ -28,6 +26,6 @@ const preview: Preview = {
       </StoryWrapper>
     ),
   ],
-};
+}
 
-export default preview;
+export default preview

.storybook/preview.tsx

@@ -0,0 +1,4 @@
+import { createSystem, defaultConfig } from '@chakra-ui/react'
+import { config } from '@hivemq/ui-theme'
+
+export const system = createSystem(defaultConfig, config)

.storybook/theme.ts

@@ -14,7 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-export {
-  IconButtonWithTooltip,
-  type IconButtonWithTooltipProps,
-} from './IconButtonWithTooltip'
+export * from './src/modules/Shell'
+export * from './src/modules/Content'
+export * from './src/modules/Header'
+export * from './src/modules/Sidebar'
+
+export { useShellContext } from './src/context/ShellContext'

src/modules/Buttons/index.ts renamed to index.ts

@@ -1,6 +1,6 @@
 {
   "name": "@hivemq/ui-library",
-  "version": "1.1.0",
+  "version": "2.0.0-rc.1",
   "type": "module",
   "main": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -31,58 +31,57 @@
     "lint:all": "pnpm run lint:check && pnpm run lint:headers && pnpm run lint:format",
     "test:unit": "TZ=UTC pnpm vitest run --outputFile.junit=./test-results/junit.xml",
     "test:unit:ci": "pnpm test:unit --coverage --silent",
+    "generate:theme": "chakra typegen ./.storybook/theme.ts",
+    "generate": "pnpm generate:theme",
+    "postinstall": "pnpm generate",
     "preview": "vite preview",
     "storybook": "BUILD_ENV='storybook' storybook dev -p 6006",
     "storybook:build": "BUILD_ENV='storybook' storybook build"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
-    "@chakra-ui/cli": "^2.4.1",
-    "@chakra-ui/react": "^2.10.4",
-    "@chakra-ui/styled-system": "^2.11.2",
-    "@emotion/react": "^11.13.5",
-    "@emotion/styled": "^11.13.5",
-    "@fontsource/raleway": "^5.0.19",
-    "@fontsource/roboto": "^5.0.13",
-    "@radix-ui/react-slot": "^1.1.0",
-    "@storybook/addon-a11y": "^8.2.6",
-    "@storybook/addon-essentials": "^8.2.4",
-    "@storybook/addon-interactions": "^8.2.4",
-    "@storybook/addon-links": "^8.2.4",
-    "@storybook/addon-onboarding": "^8.2.4",
+    "@chakra-ui/cli": "^3.14.2",
+    "@chakra-ui/react": "^3.14.2",
+    "@emotion/react": "^11.14.0",
+    "@fontsource/raleway": "^5.2.5",
+    "@fontsource/roboto": "^5.2.5",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@hivemq/ui-theme": "^1.0.0-rc.1",
+    "@storybook/addon-a11y": "^8.6.8",
+    "@storybook/addon-essentials": "^8.6.8",
+    "@storybook/addon-interactions": "^8.6.8",
+    "@storybook/addon-links": "^8.6.8",
+    "@storybook/addon-onboarding": "^8.6.8",
     "@storybook/addon-styling": "^1.3.7",
-    "@storybook/blocks": "^8.2.4",
-    "@storybook/manager-api": "^8.2.4",
-    "@storybook/react": "^8.2.4",
-    "@storybook/react-vite": "^8.2.4",
+    "@storybook/blocks": "^8.6.8",
+    "@storybook/manager-api": "^8.6.8",
+    "@storybook/react": "^8.6.8",
+    "@storybook/react-vite": "^8.6.8",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^8.2.4",
-    "@types/node": "^20.14.11",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.1",
-    "@vitest/coverage-v8": "^2.0.3",
-    "autoprefixer": "^10.4.19",
-    "lucide-react": "^0.410.0",
-    "postcss": "^8.4.39",
+    "@storybook/theming": "^8.6.8",
+    "@types/node": "^22.13.12",
+    "@types/react": "^18.3.16",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/coverage-v8": "^3.0.9",
+    "autoprefixer": "^10.4.21",
+    "lucide-react": "^0.483.0",
+    "postcss": "^8.5.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "storybook": "^8.2.4",
-    "tailwindcss": "^3.4.6",
-    "tsc-alias": "^1.8.10",
-    "typescript": "^5.5.3",
-    "vite": "^5.3.4",
-    "vite-plugin-dts": "4.0.0-beta.1",
-    "vite-plugin-static-copy": "^1.0.6",
-    "vitest": "^2.0.3"
+    "storybook": "^8.6.8",
+    "tailwindcss": "^4.0.15",
+    "tsc-alias": "^1.8.11",
+    "typescript": "^5.8.2",
+    "vite": "^6.2.2",
+    "vite-plugin-dts": "4.5.3",
+    "vite-plugin-static-copy": "^2.3.0",
+    "vitest": "^3.0.9"
   },
   "peerDependencies": {
-    "@chakra-ui/react": "^2.10.4",
-    "@chakra-ui/styled-system": "^2.11.2",
-    "@emotion/react": "^11.13.5",
-    "@emotion/styled": "^11.13.5",
-    "@hivemq/ui-theme": "^0.5.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "@chakra-ui/react": "^3.14.2",
+    "@emotion/react": "^11.14.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   }
 }