- Fixed Eslint setup

- Improved ladle provider
- Started building multi-use Button component
- Updated Theme System
- Added previously missing semicolons to all files

Author: BluePixelDev

.ladle/components.tsx

@@ -1,16 +1,17 @@
+import "@/App.css";
+import type { GlobalProvider } from "@ladle/react";
+import { Provider as StoreProvider } from "react-redux";
+import { store } from "@/store";
+import { ThemeProvider } from "@/features/theme";
 
-import "../src/App.css"
-import type { StoryDefault } from "@ladle/react"
-import React from "react"
-import { Provider } from 'react-redux'
-import { store } from "../src/store"
-
-export default {
-    decorators: [
-        (Story: React.FC) => (
-            <Provider store={store}>
-                <Story />
-            </Provider>
-        )
-    ]
-} satisfies StoryDefault
+export const Provider: GlobalProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => (
+  <>
+    <StoreProvider store={store}>
+      <ThemeProvider>{children}</ThemeProvider>
+    </StoreProvider>
+  </>
+);

eslint.config.js

@@ -1,25 +1,25 @@
-import { defineConfig } from "eslint/config";
-import globals from "globals";
-import js from "@eslint/js";
+import { defineConfig, globalIgnores } from "eslint/config";
+import eslint from "@eslint/js";
 import tseslint from "typescript-eslint";
-import pluginReact from "eslint-plugin-react";
+import reactPlugin from "eslint-plugin-react";
+import eslintConfigPrettier from "eslint-plugin-prettier/recommended";
+
+const baseTsConfig = tseslint.config(
+  eslint.configs.recommended,
+  tseslint.configs.recommended
+);
 
 export default defineConfig([
+  globalIgnores(["node_modules/**", "build/**", "src-tauri/**"]),
+  baseTsConfig,
   {
-    files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"],
-    languageOptions: { globals: globals.browser },
-  },
-  {
-    files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"],
-    plugins: { js },
-    extends: ["js/recommended"],
-  },
-  tseslint.configs.recommended,
-  {
-    ...pluginReact.configs.flat.recommended,
-    rules: {
-      ...pluginReact.configs.flat.recommended.rules,
-      "react/react-in-jsx-scope": "off", // Disable the rule that requires React to be in scope in JSX
+    ...reactPlugin.configs.flat.recommended,
+    settings: {
+      react: {
+        version: "detect",
+      },
     },
   },
+  reactPlugin.configs.flat["jsx-runtime"],
+  eslintConfigPrettier,
 ]);

eslint.config.mjs

@@ -47,6 +47,7 @@
     "react-toastify": "^11.0.5",
     "remark-gfm": "^4.0.1",
     "reselect": "^5.1.1",
+    "tinycolor2": "^1.6.0",
     "uuid": "^11.0.3"
   },
   "devDependencies": {
@@ -68,12 +69,16 @@
     "@types/node": "^22.10.1",
     "@types/react": "^18.3.20",
     "@types/react-dom": "^18.3.6",
+    "@types/tinycolor2": "^1.4.6",
     "@vitejs/plugin-react": "^4.2.1",
     "@vitest/browser": "^3.1.2",
     "@vitest/coverage-v8": "^3.1.2",
     "@vitest/ui": "^3.1.2",
     "eslint": "^9.23.0",
-    "eslint-plugin-react": "^7.37.4",
+    "eslint-config-prettier": "^10.1.2",
+    "eslint-plugin-prettier": "^5.2.6",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-storybook": "^0.12.0",
     "globals": "^16.0.0",
     "husky": "^9.1.7",

package-lock.json

@@ -1 +1 @@
-import "@testing-library/jest-dom"
+import "@testing-library/jest-dom";

package.json

@@ -1,4 +1,3 @@
 @import './assets/styles/base.css';
 @import './assets/styles/inputs.css';
-@import './assets/styles/buttons.css';
 @import './assets/styles/animations.css';