build: enable boemly for react 19

.github/workflows/main.yml

@@ -9,7 +9,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        node: ['18.x', '20.x', '22.x']
+        node: ['22.x', '24.x']
         os: [ubuntu-latest, macOS-latest]
 
     steps:

.storybook/main.mjs

@@ -0,0 +1,32 @@
+import remarkGfm from 'remark-gfm';
+
+export default {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-themes',
+    '@storybook/addon-webpack5-compiler-babel',
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
+      },
+    },
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  refs: {
+    '@chakra-ui/react': {
+      disable: true,
+    },
+  },
+  typescript: {
+    reactDocgen: false,
+  },
+};

.storybook/manager.js

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/addons';
+import { addons } from 'storybook/manager-api';
 import theme from './theme';
 
 addons.setConfig({ theme });

.storybook/preview.js

@@ -1,17 +1,20 @@
-import { CSSReset } from '@chakra-ui/react';
+import React from 'react';
 import { BoemlyThemeProvider } from '../src';
+import { withThemeByClassName } from '@storybook/addon-themes';
 
 export default {
   decorators: [
     (Storybook) => (
       <BoemlyThemeProvider>
-        <CSSReset />
         <Storybook />
       </BoemlyThemeProvider>
     ),
+    withThemeByClassName({
+      defaultTheme: 'light',
+      themes: { light: '', dark: 'dark' },
+    }),
   ],
   parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
         color: /(background|color)$/i,

.storybook/theme.js

@@ -1,11 +1,11 @@
-import { create } from '@storybook/theming';
+import { create } from 'storybook/theming';
 import { COLORS } from '../src/constants/customizations';
 
 export default create({
   base: 'light',
 
-  colorPrimary: COLORS.primary[500],
-  colorSecondary: COLORS.gray[300],
+  colorPrimary: COLORS.primary[500].value,
+  colorSecondary: COLORS.gray[300].value,
 
   brandTitle: 'Boemly - the component library maintained by Tree.ly',
   brandUrl: 'https://boemly.tree.ly',

README.md

@@ -50,7 +50,7 @@ For development on Boemly check out our [development docs](CONTRIBUTING.md#devel
 
 - [Typescript](https://www.typescriptlang.org/) as the programming language.
 - [@emotion](https://emotion.sh/docs/introduction) for custom styles.
-- [react-use](https://www.npmjs.com/package/react-use) as a collection of hooks.
+- [@reactuses/core](https://www.npmjs.com/package/@reactuses/core) as a collection of hooks.
 - [Framer](https://www.framer.com/docs/) for animations.
 - [Eslint](https://eslint.org/) combined with [Prettier](https://prettier.io/)
   as a linter/formatter.

.babelrc.json → babel.config.json

@@ -4,9 +4,7 @@
     [
       "@babel/preset-env",
       {
-        "targets": {
-          "chrome": 100
-        }
+        "modules": "commonjs"
       }
     ],
     "@babel/preset-typescript",

esbuild.config.ts

@@ -0,0 +1,40 @@
+import { execSync } from 'child_process';
+import esbuild from 'esbuild';
+
+execSync('tsc -p tsconfig.build.json', { stdio: 'inherit' });
+
+const commonConfig = {
+  entryPoints: ['src/index.tsx'],
+  bundle: true,
+  sourcemap: true,
+  minify: true,
+  target: ['es2020'],
+
+  // Keep imports like "Chakra.Menu"
+  treeShaking: true,
+
+  // Don't let esbuild split files — Chakra compound components break
+  splitting: false,
+
+  // Important for Chakra v3 (which uses modern ESM + emotion)
+  supported: {
+    'import-meta': true,
+  },
+};
+
+// ESM build - externalize all packages for tree-shaking in bundlers
+await esbuild.build({
+  ...commonConfig,
+  outfile: 'dist/index.js',
+  format: 'esm',
+  packages: 'external' as const,
+});
+
+// CJS build - bundle dependencies to avoid ESM/CJS interop issues
+// Only externalize React (peer dependency)
+await esbuild.build({
+  ...commonConfig,
+  outfile: 'dist/index.cjs',
+  format: 'cjs',
+  external: ['react', 'react-dom', 'react/jsx-runtime'],
+});

eslint.config.mjs

@@ -0,0 +1,70 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from 'eslint-plugin-storybook';
+
+import unusedImports from 'eslint-plugin-unused-imports';
+import tseslint from '@typescript-eslint/eslint-plugin';
+import tsparser from '@typescript-eslint/parser';
+
+export default [
+  {
+    files: ['**/*.{js,jsx,ts,tsx}'],
+    ignores: ['**/*.stories.{js,jsx,ts,tsx}'],
+    languageOptions: {
+      parser: tsparser,
+    },
+    plugins: {
+      '@typescript-eslint': tseslint,
+      'unused-imports': unusedImports,
+    },
+    rules: {
+      'consistent-return': 'off',
+      'no-underscore-dangle': 'off',
+      'no-unused-vars': 'off',
+      'unused-imports/no-unused-imports': 'error',
+      'unused-imports/no-unused-vars': [
+        'warn',
+        {
+          vars: 'all',
+          varsIgnorePattern: '^_',
+          args: 'after-used',
+          argsIgnorePattern: '^_',
+        },
+      ],
+    },
+  },
+  {
+    files: ['**/*.stories.{js,jsx,ts,tsx}'],
+    languageOptions: {
+      parser: tsparser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+      },
+    },
+    plugins: {
+      'unused-imports': unusedImports,
+    },
+    rules: {
+      'unused-imports/no-unused-imports': 'error',
+      'unused-imports/no-unused-vars': [
+        'warn',
+        {
+          vars: 'all',
+          varsIgnorePattern: '^_',
+          args: 'after-used',
+          argsIgnorePattern: '^_',
+        },
+      ],
+    },
+  },
+  {
+    ignores: [
+      'dist/**',
+      'coverage/**',
+      'node_modules/**',
+      'eslint.config.mjs',
+      'esbuild.config.ts',
+    ],
+  },
+  ...storybook.configs['flat/recommended'],
+];