feat: migrate to HeroUI

.gitignore

@@ -24,6 +24,7 @@ lerna-debug.log*
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
+!.vscode/settings.json
 .idea
 .DS_Store
 *.suo

.storybook/main.ts

@@ -1,8 +1,13 @@
 import type { StorybookConfig } from "@storybook/react-vite";
 
 const config: StorybookConfig = {
-    stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-    addons: ["@storybook/addon-docs", "@storybook/addon-a11y", "@storybook/addon-vitest"],
+    stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+    addons: [
+        "@storybook/addon-docs",
+        "@storybook/addon-a11y",
+        "@storybook/addon-vitest",
+        "@vueless/storybook-dark-mode",
+    ],
     framework: {
         name: "@storybook/react-vite",
         options: {},

.storybook/preview.tsx

@@ -1,20 +1,18 @@
-import { DocsDecorator } from "./decorators/DocsDecorator";
-import { WithTheme } from "./decorators/withTheme";
-import { themes } from "./theme";
+import { HeroUIProvider } from "@heroui/system";
+import { themes } from "@storybook/theming";
 
 import type { Preview } from "@storybook/react-vite";
 
-import "../src/ui/app/styles/gravity-imports.css";
-import "../src/ui/app/styles/gravity-theme.css";
-import "../src/ui/app/styles/reset.css";
+import "./style.css";
+
+const commonTheme = {
+    brandTitle: "LanguagesLearner UI",
+    brandUrl: "https://github.com/languages-learner/web-react",
+    brandTarget: "_self",
+};
 
 const preview: Preview = {
     parameters: {
-        docs: {
-            theme: themes.light,
-            container: DocsDecorator,
-            codePanel: true,
-        },
         controls: {
             matchers: {
                 color: /(background|color)$/i,
@@ -28,22 +26,31 @@ const preview: Preview = {
             test: "todo",
         },
         jsx: { showFunctions: true },
-    },
-    decorators: [WithTheme],
-    globalTypes: {
-        theme: {
-            defaultValue: "light",
-            toolbar: {
-                title: "Theme",
-                icon: "mirror",
-                items: [
-                    { value: "light", right: "☼", title: "Light" },
-                    { value: "dark", right: "☾", title: "Dark" },
-                ],
-                dynamicTitle: true,
+        darkMode: {
+            current: "dark",
+            stylePreview: true,
+            darkClass: "dark",
+            lightClass: "light",
+            classTarget: "html",
+            dark: {
+                ...themes.dark,
+                ...commonTheme,
+            },
+            light: {
+                ...themes.light,
+                ...commonTheme,
             },
         },
     },
+    decorators: [
+        (Story) => {
+            return (
+                <HeroUIProvider>
+                    <Story />
+                </HeroUIProvider>
+            );
+        },
+    ],
 };
 
 export default preview;

.storybook/style.css

@@ -0,0 +1,61 @@
+@import "tailwindcss";
+
+@config '../tailwind.config.js';
+
+.dark .sbdocs-wrapper,
+.dark .sbdocs-preview {
+    background-color: #000000;
+    color: #fff;
+}
+
+.dark .sbdocs-preview {
+    border: 1px solid #292929;
+}
+
+.dark .docblock-code-toggle {
+    background: transparent;
+    color: #d4d4d4;
+}
+
+.dark div:has(.docblock-code-toggle) {
+    background: transparent;
+}
+
+.dark .os-theme-dark {
+    background: #161616;
+    color: #fff;
+}
+
+.dark .sbdocs-title {
+    color: #fff;
+}
+
+.dark .docblock-argstable-head {
+    background: #161616;
+}
+
+.dark .docblock-argstable-head th {
+    color: #bcbcbc;
+    border-bottom: 1px solid #292929 !important;
+}
+
+.dark .docblock-argstable-head th span {
+    color: #bcbcbc;
+}
+
+.dark #docs-root tbody td {
+    background: #161616 !important;
+    color: #bcbcbc !important;
+}
+
+.dark #docs-root tbody tr:first-child td:first-child {
+    border-top-left-radius: 0 !important;
+}
+
+.dark #docs-root tbody tr:first-child td:last-child {
+    border-top-right-radius: 0 !important;
+}
+
+.dark #docs-root tbody tr:not(:first-child) {
+    border-top: 1px solid #292929 !important;
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "files.eol": "\n"
+}

docs/Git interactive rebase.md

@@ -0,0 +1,6 @@
+# How to use interactive git rebase?
+
+`````bash
+git config --global core.editor code
+git config --global core.editor "code --wait"
+```

eslint.config.mjs

@@ -11,12 +11,12 @@ import importPlugin from "eslint-plugin-import";
 import importNewLinesPlugin from "eslint-plugin-import-newlines";
 import baseConfig from "@gravity-ui/eslint-config";
 import clientConfig from "@gravity-ui/eslint-config/client";
-import prettierConfig from "@gravity-ui/eslint-config/prettier";
+import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
 import formatjs from "eslint-plugin-formatjs";
 
 export default tseslint.config(
     ...baseConfig,
-    ...prettierConfig,
+    eslintPluginPrettierRecommended,
     ...clientConfig,
     { ignores: ["**/dist", "node_modules", "**/.cache", "**/.typecheck"] },
     {
@@ -46,6 +46,10 @@ export default tseslint.config(
                             importNames: ["useNavigate"],
                             message: "Please import 'useNavigate' from '@/shared/react-router'",
                         },
+                        {
+                            name: "classnames",
+                            message: "Please import 'classNames' from '@/shared/class-names'",
+                        },
                     ],
                 },
             ],

index.html

@@ -1,24 +1,26 @@
 <!doctype html>
 <html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <link rel="icon" href="/favicon.ico" />
-        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
-        <link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png" />
-        <link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Languages Learner</title>
-        <script>window.CLIENT = {}</script>
-        <!--app-head-->
-    </head>
-    <body>
-        <div id="root"><!--app-html--></div>
-        <script type="module" src="/src/ui/app/entries/main.tsx"></script>
-        <script>
-            (function() {
+
+<head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png" />
+    <link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Languages Learner</title>
+    <script>window.CLIENT = {}</script>
+    <!--app-head-->
+</head>
+
+<body>
+    <div id="root"><!--app-html--></div>
+    <script type="module" src="/src/ui/app/entries/main.tsx"></script>
+    <script>
+            (function () {
                 try {
                     var prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
                     var theme = prefersDark ? "dark" : "light";
@@ -27,6 +29,7 @@
                     console.error("Theme detection error:", e);
                 }
             })();
-        </script>
-    </body>
-</html>
+    </script>
+</body>
+
+</html>