Upgrade to Typescript (Do Not Review)

.github/copilot-instructions.md

@@ -0,0 +1,45 @@
+> ⚠️ **Copilot Instructions File:**
+> This file is **ONLY** for Copilot Pull Request review.
+> Not for general documentation, onboarding, or other automation.
+
+## Copilot Pull Request Review Guide
+
+### Tech Stack
+
+-   React v17
+-   TypeScript v4.7
+-   Tailwind CSS v3
+
+### General Guidelines
+
+-   Apply [general coding guidelines](./instructions/general-coding.instructions.md) to all code.
+-   Refer to [immutable data](./instructions/general-coding.instructions.md#immutable-data) for using `const`, `readonly`.
+-   Use `useMount` from `ahooks` instead of `useEffect([])`.
+-   Use `useModal` for modal state.
+-   Highlight browser compatibility or performance issues with solutions.
+-   Review the code for memory leaks and GC issues, especially when hooks are involved. Check for missing cleanup in `useEffect` (event listeners, timers, subscriptions), unclosed intervals/timeouts, and circular references in dependencies.
+-   Check for missing/incorrect TypeScript types.
+-   Ensure Tailwind classes follow best practices.
+-   Flag custom CSS that can be replaced by Tailwind.
+-   Validate component/file organization for clarity.
+-   Do not use `props: any`; destructure and type all props.
+-   Highlight any `useEffect` usage which has an `if` condition with multiple conditions and if those conditions can be extracted outside the effect to simplify the effect's dependencies
+-   Disallow functions that are declared in a scope which captures less than 3 variables from the outer scope. This rule can be skipped if the method is outside a React component
+
+### High Confidence Rules
+
+3. Follow React hooks rules strictly.
+4. Do not use React.FC type; always create a props interface.
+7. Do not suppress `react-hooks/exhaustive-deps` ESLint rule.
+8. Tag `@rushi` in PR if any `.github` files are changed.
+9. Tag `@rushi` if any ESLint configuration is changed
+10. Do not allow more than 5 levels of indenting in a React component's JSX.
+11. Minimize the use of `useEffect` and `useState`; favor derived state and memoization when possible.
+
+### Other Review Points
+
+-   Confirm React Hooks are used correctly and avoid anti-patterns.
+-   Validate Tailwind usage and avoid deprecated patterns.
+-   Reference this file and line number in review comments if you use any of these instructions (add at end of comment, two blank lines above).
+-   Only summarize the pull request the first time Copilot is invoked. Every subsequent review should only summarize the changes since the last review
+-   Do not give feedback on accessability

.github/instructions/general-coding.instructions.md.md

@@ -0,0 +1,64 @@
+---
+applyTo: "**/*.ts,**/*.tsx,**/*.jsx"
+---
+
+Assume this is an app based on **React v17, Typescript v4.7, Tailwind CSS v3**. Always provide code examples in TypeScript.
+
+Answer all questions in the style of a friendly colleague, using informal language. Minimize explanations but provide enough context to understand the code
+
+Answer all questions in less than 1000 characters, and words of no more than 12 characters.
+
+## TypeScript Guidelines
+
+-   Use camelCase for variables; prefer arrow functions.
+-   Always use TypeScript, not plain JS.
+-   Favor functional programming and type safety.
+-   Use `interface` for data structures, props, and state (use `type` only if very short).
+-   Prefer immutable data (`const`, `readonly`).
+-   Use optional chaining (`?.`) and nullish coalescing (`??`).
+-   Use guard statements for readability.
+-   Use `lodash` for utility functions if shorter.
+-   Use relative imports.
+
+## React Guidelines
+
+-   Use functional components and hooks.
+-   No React.FC; always define a props interface.
+-   Keep components small and focused.
+-   Minimize the use of `useEffect` and `useState`; favor derived state and memoization when possible.
+-   Avoid effects unless needed; use `useMount` from `ahooks` instead of `useEffect([])`.
+-   Use `useMemo` and `useCallback` for performance, but avoid premature optimization.
+-   Functions returning JSX must be components.
+-   Follow the pattern: `const ComponentName = ({ prop1 }: Props) => { ... }`.
+-   Highlight browser compatibility or performance issues with solutions.
+-   Never indent JSX >5 levels.
+
+## Style Guidelines
+
+-   Use Tailwind v3 for styling.
+-   Avoid custom CSS and inline styles.
+-   No dark mode support needed.
+
+## Linting & Formatting
+
+-   Run `npm run lint` for ESLint.
+-   Use Prettier: `npm run format`.
+
+## Naming & Patterns
+
+-   Prefix event handlers with 'handle' (e.g., `handleClick`).
+-   Prefix booleans with verbs (`isLoading`, `hasError`).
+-   Prefix custom hooks with 'use' (`useAuth`).
+-   Favor named exports.
+-   Avoid `any`/`unknown` for props and function arguments.
+-   Use `React.memo` for memoization.
+-   Use `useCallback` for functions passed as props.
+-   Use `useMemo` for expensive computations.
+-   Avoid inline function definitions in JSX/render.
+-   Use short-circuit and ternary for conditional rendering.
+-   Lift state up to share between components.
+-   Use context for intermediate state sharing.
+-   Use early returns for errors; avoid deep nesting.
+-   Place happy path last in functions.
+-   Avoid unnecessary else statements; use if-return.
+-   Use guard clauses for preconditions/invalid states.

.github/workflows/chromatic.yml

@@ -15,7 +15,7 @@ jobs:
 
             - uses: actions/setup-node@v3
               with:
-                  node-version: 16
+                  node-version: 20
                   cache: "npm"
                   cache-dependency-path: "package-lock.json"
 

.github/workflows/deploy-icons.yml

@@ -17,7 +17,7 @@ jobs:
 
             - uses: actions/setup-node@v3
               with:
-                  node-version: 16
+                  node-version: 20
                   cache: "npm"
                   cache-dependency-path: "package-lock.json"
                   registry-url: https://registry.npmjs.org/

.github/workflows/deploy.yml

@@ -17,7 +17,7 @@ jobs:
 
             - uses: actions/setup-node@v3
               with:
-                  node-version: 16
+                  node-version: 20
                   cache: "npm"
                   cache-dependency-path: "package-lock.json"
                   registry-url: https://registry.npmjs.org/

.github/workflows/eslint.yml

@@ -45,10 +45,10 @@ jobs:
           ref: ${{github.event.pull_request.head.sha}}
           repository: ${{github.event.pull_request.head.repo.full_name}}
 
-      - name: Node.JS 16
+      - name: Node.JS 20
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 20
           cache: "npm"
           cache-dependency-path: "package-lock.json"
 

.github/workflows/publish.yml

@@ -14,7 +14,7 @@ jobs:
 
             - uses: actions/setup-node@v3
               with:
-                  node-version: 16
+                  node-version: 20
                   cache: "npm"
                   cache-dependency-path: "package-lock.json"
 

.gitignore

@@ -8,3 +8,4 @@ storybook-static
 *.tgz
 src/theme.js
 .idea
+coverage

.nvmrc

@@ -1 +1 @@
-16
+20

.storybook/main.js

@@ -1,5 +1,6 @@
 module.exports = {
-    stories: ["../src/**/*.stories.@(js|jsx|mdx)"],
+    // Support both .js/.jsx and .ts/.tsx story files during migration
+    stories: ["../src/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
     core: {
         disableTelemetry: true,
     },
@@ -15,4 +16,42 @@ module.exports = {
             },
         },
     ],
+    // TypeScript configuration for Storybook
+    typescript: {
+        check: false, // We'll use tsc separately for type checking
+        reactDocgen: "react-docgen-typescript",
+        reactDocgenTypescriptOptions: {
+            shouldExtractLiteralValuesFromEnum: true,
+            propFilter: (prop) => {
+                // Filter out props from node_modules
+                if (prop.parent) {
+                    return !prop.parent.fileName.includes("node_modules");
+                }
+                return true;
+            },
+        },
+    },
+    webpackFinal: async (config) => {
+        // Transpile @tanstack packages that use modern JS syntax
+        config.module.rules.push({
+            test: /\.m?js$/,
+            include: /node_modules\/@tanstack/,
+            use: {
+                loader: require.resolve("babel-loader"),
+                options: {
+                    presets: [
+                        [
+                            require.resolve("@babel/preset-env"),
+                            {
+                                targets: {
+                                    browsers: ["last 2 versions"],
+                                },
+                            },
+                        ],
+                    ],
+                },
+            },
+        });
+        return config;
+    },
 };

.storybook/preview.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import type { Preview } from "@storybook/react";
+import { Provider } from "../src";
+import xola from "./xola";
+import "../index.css";
+
+const preview: Preview = {
+    parameters: {
+        actions: { argTypesRegex: "^on[A-Z].*" },
+        docs: {
+            theme: xola,
+        },
+        options: {
+            storySort: {
+                method: "alphabetical",
+                order: ["Introduction", "Components"],
+                includeName: true,
+            },
+        },
+    },
+    decorators: [
+        (Story) => (
+            <Provider>
+                <Story />
+            </Provider>
+        ),
+    ],
+};
+
+export default preview;

.xo-config.json

@@ -1,5 +1,26 @@
 {
     "rules": {
-        "complexity": ["warn", { "max": 25 }]
+        "complexity": [
+            "warn",
+            {
+                "max": 35
+            }
+        ],
+        "react/require-default-props": "off",
+        "import/no-extraneous-dependencies": [
+            "error",
+            {
+                "devDependencies": true,
+                "optionalDependencies": false,
+                "peerDependencies": false,
+                "packageDir": "./"
+            }
+        ],
+        "import/no-named-as-default": "off",
+        "import/no-cycle": "off",
+        "react/boolean-prop-naming": "off",
+        "react/prefer-read-only-props": "off",
+        "@typescript-eslint/prefer-readonly": "off",
+        "@typescript-eslint/prefer-readonly-parameter-types": "off"
     }
 }