PR: bump up the dependency packages to support react 19 and apply security patches

.github/ISSUE_TEMPLATE/bug_report.md

@@ -4,14 +4,14 @@ about: Create a report to help us improve
 title: 'Bug: '
 labels: ''
 assignees: ''
-
 ---
 
 **Describe the bug**
 A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'

.github/ISSUE_TEMPLATE/feature_request.md

@@ -4,7 +4,6 @@ about: Suggest an idea for this project
 title: 'Feature: '
 labels: ''
 assignees: ''
-
 ---
 
 **Is your feature request related to a problem? Please describe.**

.github/workflows/test.yaml

@@ -5,8 +5,6 @@ on:
     branches:
       - main
   workflow_dispatch:
-    branches:
-      - main
   push:
     branches:
       - main
@@ -15,16 +13,89 @@ jobs:
   eslint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - name: Checkout
+        uses: actions/checkout@v7
+
+      - name: Setup node
+        uses: actions/setup-node@v7
+        with:
+          node-version: 24
+          cache: npm
+
       - name: Install modules
         run: npm install
+
       - name: Run ESLint
         run: npm run lint
+
+  prettier:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v7
+
+      - name: Setup node
+        uses: actions/setup-node@v7
+        with:
+          node-version: 24
+          cache: npm
+
+      - name: Install modules
+        run: npm install
+
+      - name: Run Prettier
+        run: npm run format-check
+
   typescript:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - name: Checkout
+        uses: actions/checkout@v7
+
+      - name: Setup node
+        uses: actions/setup-node@v7
+        with:
+          node-version: 24
+          cache: npm
+
       - name: Install modules
         run: npm install
+
       - name: Run Type checks
         run: npm run type-check
+
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v7
+
+      - name: Setup node
+        uses: actions/setup-node@v7
+        with:
+          node-version: 24
+          cache: npm
+
+      - name: Install modules
+        run: npm install
+
+      - name: Build
+        run: npm run build
+
+  storybook:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v7
+
+      - name: Setup node
+        uses: actions/setup-node@v7
+        with:
+          node-version: 24
+          cache: npm
+
+      - name: Install modules
+        run: npm install
+
+      - name: Build Storybook
+        run: npm run build-storybook

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

.husky/pre-push

@@ -0,0 +1,5 @@
+npm run format-check
+npm run lint
+npm run type-check
+npm run build
+npm run build-storybook

.prettierignore

@@ -0,0 +1,10 @@
+# Don't format these folders
+node_modules
+build
+dist
+storybook-static
+# Don't format these files
+package-lock.json
+yarn.lock
+.env
+.env.local

.prettierrc

@@ -0,0 +1,20 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "printWidth": 100,
+  "trailingComma": "es5",
+  "plugins": ["@trivago/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"],
+  "importOrder": [
+    "^react$",
+    "<THIRD_PARTY_MODULES>",
+    "^@/(.*)$",
+    "^\\.\\.(?!/?$)",
+    "^\\.\\./?$",
+    "^\\./(?=.*/)(?!/?$)",
+    "^\\.(?!/?$)",
+    "^\\./?$"
+  ],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true
+}

.storybook/decorators.tsx

@@ -0,0 +1,23 @@
+import React, { useEffect } from 'react';
+
+import { useGlobals } from 'storybook/preview-api';
+
+const withTheme = () => {
+  return (story: any, context: any) => {
+    const [globals] = useGlobals();
+    const isDarkMode = globals.theme === 'dark';
+
+    useEffect(() => {
+      document.body.style.backgroundColor = isDarkMode ? '#1a1a1a' : '#ffffff';
+      document.body.style.color = isDarkMode ? '#f0f0f0' : '#1a1a1a';
+    }, [isDarkMode]);
+
+    return (
+      <div style={{ padding: '1.5rem' }}>
+        {story({ ...context, args: { ...context.args, isDarkTheme: isDarkMode } })}
+      </div>
+    );
+  };
+};
+
+export const decorators = [withTheme()];

.storybook/main.ts

@@ -0,0 +1,16 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-docs', '@storybook/addon-a11y', '@storybook/addon-links'],
+  framework: '@storybook/react-vite',
+  viteFinal: (config) => {
+    config.build = {
+      ...config.build,
+      chunkSizeWarningLimit: 2000,
+    };
+    return config;
+  },
+};
+
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,74 @@
+import React, { useEffect, useState } from 'react';
+
+import { DocsContainer } from '@storybook/addon-docs/blocks';
+import type { Preview } from '@storybook/react-vite';
+import { GLOBALS_UPDATED } from 'storybook/internal/core-events';
+import { themes } from 'storybook/theming';
+
+export { decorators } from './decorators';
+
+const ThemedDocsContainer = ({ children, context, ...rest }: any) => {
+  const [isDark, setIsDark] = useState(() => {
+    try {
+      return (
+        context?.store?.globals?.globals?.theme === 'dark' ||
+        context?.store?.userGlobals?.globals?.theme === 'dark' ||
+        context?.globals?.theme === 'dark'
+      );
+    } catch {
+      return false;
+    }
+  });
+
+  useEffect(() => {
+    const channel = context?.channel;
+    if (!channel) return;
+
+    const update = (event: any) => {
+      setIsDark(event?.globals?.theme === 'dark');
+    };
+
+    channel.on(GLOBALS_UPDATED, update);
+    return () => channel.off(GLOBALS_UPDATED, update);
+  }, [context]);
+
+  return (
+    <DocsContainer {...rest} context={context} theme={isDark ? themes.dark : themes.light}>
+      {children}
+    </DocsContainer>
+  );
+};
+
+const preview: Preview = {
+  globalTypes: {
+    theme: {
+      description: 'Global theme',
+      toolbar: {
+        title: 'Theme',
+        icon: 'paintbrush',
+        items: [
+          { value: 'light', icon: 'sun', title: 'Light' },
+          { value: 'dark', icon: 'moon', title: 'Dark' },
+        ],
+        dynamicTitle: true,
+      },
+    },
+  },
+  initialGlobals: {
+    theme: 'light',
+  },
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    backgrounds: { disabled: true },
+    docs: {
+      container: ThemedDocsContainer,
+    },
+  },
+};
+
+export default preview;