chore(flat-components): remove rollup and add alias

.github/workflows/storybook.yml

@@ -43,7 +43,7 @@ jobs:
         if: steps.yarn-cache.outputs.cache-hit == 'true'
 
       - name: Build Storybook
-        run: yarn workspace flat-components build-storybook
+        run: yarn workspace flat-components build
 
       - name: Deploy Storybook
         uses: peaceiris/actions-gh-pages@v3

README-zh.md

@@ -84,7 +84,7 @@ yarn run start
 
 部分 Flat 组件 UI 可通过 Storybook 快速查看与开发（[线上地址][flat-storybook]）。
 
--   项目根执行 `yarn --cwd packages/flat-components storybook` 可在本地运行 Storybook。
+-   项目根执行 `yarn run storybook` 可在本地运行 Storybook。
 
 ## 环境变量值参考
 

README.md

@@ -85,7 +85,7 @@ yarn run start
 
 Many Flat components UI can be quickly viewed and developed via Storybook ([Online address][flat-storybook]).
 
--   Run `yarn --cwd packages/flat-components storybook` at project root to run Storybook locally.
+-   Run `yarn run storybook` at project root to run Storybook locally.
 
 ## Environment Variables Reference
 

cspell.config.js

@@ -97,6 +97,8 @@ module.exports = {
         "Variatio",
         "Clav",
         "webfonts",
+        "browserslist",
+        "estree",
     ],
     flagWords: ["fuck", "bitch", "asshole", "bullshit", "crap", "suck", "wtf"],
     dictionaries: [

desktop/renderer-app/package.json

@@ -84,7 +84,11 @@
     "lint-staged": "^11.0.0",
     "minimist": "^1.2.5",
     "prettier": "^2.3.0",
+    "pretty-bytes": "^5.6.0",
+    "rc-picker": "^2.5.15",
     "react-refresh": "^0.10.0",
+    "react-resize-detector": "^6.7.5",
+    "react-transition-group": "^4.4.2",
     "style-loader": "^2.0.0",
     "terser-webpack-plugin": "^5.1.2",
     "thread-loader": "^3.0.4",

desktop/renderer-app/src/components/RoomInfo.tsx

@@ -10,20 +10,20 @@ export interface RoomInfoProps {
 }
 
 export class RoomInfo extends React.PureComponent<RoomInfoProps> {
-    roomStatusLocale = {
+    public roomStatusLocale = {
         [RoomStatus.Idle]: "待开始",
         [RoomStatus.Started]: "进行中",
         [RoomStatus.Paused]: "已暂停",
         [RoomStatus.Stopped]: "已结束",
     };
 
-    roomInfoLocale = {
+    public roomInfoLocale = {
         [RoomType.BigClass]: "大班课",
         [RoomType.SmallClass]: "小班课",
         [RoomType.OneToOne]: "一对一",
     };
 
-    render(): React.ReactNode {
+    public render(): React.ReactNode {
         const { roomStatus, roomType } = this.props;
 
         return (

desktop/renderer-app/src/stores/GlobalStore.ts

@@ -65,7 +65,8 @@ export class GlobalStore {
         for (const key of keys) {
             const value = config[key];
             if (value !== null && value !== undefined) {
-                this[key] = value as any;
+                // @ts-ignore
+                this[key] = value;
             }
         }
     };

desktop/renderer-app/src/tasks/Init-ui.tsx

@@ -1,4 +1,4 @@
-import "flat-components/build/style.css";
+import "flat-components/theme/index.less";
 import "../theme.less";
 
 import { ConfigProvider } from "antd";

desktop/renderer-app/tsconfig.json

@@ -30,7 +30,8 @@
     "baseUrl": ".",
     "paths": {
       "flat-types": ["../../packages/flat-types/src"],
-      "flat-i18n": ["../../packages/flat-i18n/locales"]
+      "flat-i18n": ["../../packages/flat-i18n/locales"],
+      "flat-components": ["../../packages/flat-components/src"]
     }
   },
   "exclude": ["node_modules"],

desktop/renderer-app/webpack/webpack.common.js

@@ -184,6 +184,7 @@ module.exports = {
         alias: {
             "flat-types": paths.resolvePath("..", "..", "packages", "flat-types", "src"),
             "flat-i18n": paths.resolvePath("..", "..", "packages", "flat-i18n", "locales"),
+            "flat-components": paths.resolvePath("..", "..", "packages", "flat-components", "src"),
         },
     },
 };

package.json

@@ -4,10 +4,10 @@
   "scripts": {
     "preinstall": "node ./scripts/preinstall",
     "postinstall": "husky install",
-    "bootstrap": "yarn install --frozen-lockfile && node ./scripts/bootstrap/build-packages.js",
+    "bootstrap": "yarn install --frozen-lockfile",
     "lint": "yarn workspaces run lint",
     "check-spelling": "cspell --no-progress \"**/*.{md,ts,tsx,js,css,less,json,yml,yaml,html,sh}\"",
-    "storybook": "yarn workspace flat-components storybook",
+    "storybook": "yarn workspace flat-components start",
     "start": "node scripts/launch/index.js",
     "preship": "rimraf desktop/renderer-app/dist desktop/main-app/dist desktop/main-app/release desktop/main-app/static",
     "ship": "yarn workspace renderer-app build && yarn workspace flat ship",
@@ -20,6 +20,9 @@
       "packages/*",
       "desktop/*",
       "web/*"
+    ],
+    "nohoist": [
+      "flat-components/@pmmmwh/react-refresh-webpack-plugin/**"
     ]
   },
   "license": "MIT",

packages/flat-components/.eslintrc.js

@@ -12,9 +12,9 @@ module.exports = {
     ],
     plugins: ["jsx-a11y", "react", "@netless", "prettier", "@typescript-eslint"],
     parserOptions: {
-        ecmaVersion: 2018,
         project: "tsconfig.json",
         tsconfigRootDir: __dirname,
+        ecmaVersion: 7,
         ecmaFeatures: {
             jsx: true,
         },
@@ -260,6 +260,7 @@ module.exports = {
         "@typescript-eslint/no-misused-promises": "off",
         "@typescript-eslint/no-non-null-assertion": "off",
         "@typescript-eslint/no-var-requires": "off",
+        "@typescript-eslint/restrict-plus-operands": "off",
     },
 
     overrides: [

packages/flat-components/.gitignore

@@ -1 +1 @@
-storybook-static
+/storybook-static

packages/flat-components/.storybook/i18next.js

@@ -0,0 +1,30 @@
+import { initReactI18next } from 'react-i18next';
+import i18next from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import en from "flat-i18n/locales/en.json";
+import zhCN from "flat-i18n/locales/zh-CN.json";
+
+const messages = {
+    en: { translation: en },
+    "zh-CN": { translation: zhCN },
+};
+
+i18next
+    .use(LanguageDetector)
+    .use(initReactI18next)
+    .init({
+        resources: messages,
+        fallbackLng: "en",
+        interpolation: {
+            escapeValue: false, // react already safes from xss
+        },
+    });
+
+export const i18n = i18next;
+
+export const languages = ["en", "zh-CN"];
+
+export const languagesWithName = [
+    { lang: "en", name: "English" },
+    { lang: "zh-CN", name: "简体中文" },
+];

packages/flat-components/.storybook/main.js

@@ -1,101 +1,46 @@
+const fs = require("fs");
 const path = require("path");
-const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
-const ESLintPlugin = require("eslint-webpack-plugin");
-
 module.exports = {
-    stories: [
-        "../src/**/*.stories.mdx",
-        "../src/**/*.stories.@(ts|tsx)",
-        "../theme/**/*.stories.@(ts|tsx)",
-    ],
-    addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
-    babel: async options => {
-        return {
-            ...options,
-            plugins: [
-                [require.resolve("@babel/plugin-proposal-class-properties"), { loose: true }],
-                ...(options.plugins || []),
-            ],
-        };
-    },
-    webpackFinal: async config => {
-        setupUrlLoader(config);
-
-        config.plugins.push(
-            new ESLintPlugin({
-                fix: true,
-                extensions: ["ts", "tsx"],
-            }),
-            new ForkTsCheckerWebpackPlugin({
-                typescript: {
-                    configFile: path.resolve(__dirname, "..", "tsconfig.json"),
-                    diagnosticOptions: {
-                        semantic: true,
-                        syntactic: true,
-                        declaration: true,
-                    },
-                },
-            }),
-        );
-
-        config.module.rules.unshift({
-            test: /\.(sass|scss)(\?.*)?$/i,
-            sideEffects: true,
-            use: [
-                { loader: require.resolve("style-loader") },
-                { loader: require.resolve("css-loader") },
-                { loader: require.resolve("sass-loader") },
-            ],
-        });
-
-        config.module.rules.unshift({
-            test: /\.(less)(\?.*)?$/i,
-            sideEffects: true,
-            use: [
-                { loader: require.resolve("style-loader") },
-                { loader: require.resolve("css-loader") },
-                {
-                    loader: require.resolve("less-loader"),
-                    options: {
-                        lessOptions: {
-                            javascriptEnabled: true,
-                        },
-                    },
-                },
-            ],
-        });
-
-        return config;
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    {
+      name: "@storybook/preset-create-react-app",
+      options: {
+        craOverrides: {
+          fileLoaderExcludes: ["less"],
+        }
+      }
     },
-};
-
-/** Inline image src */
-function setupUrlLoader(config) {
-    config.module.rules = config.module.rules.filter(rule => {
-        return !(rule.loader && rule.loader.includes("file-loader"));
-    });
-
-    config.module.rules.unshift(
+    "storybook-react-i18next",
+    "@storybook/addon-viewport",
+  ],
+  "webpackFinal": (config) => {
+    config.module.rules.unshift({
+      test: /\.less$/,
+      sideEffects: true,
+      use: [
         {
-            test: /\.(png|jpg|jpeg|gif|svg|ico|apng)(\?.*)?$/i,
-            use: [
-                {
-                    loader: require.resolve("url-loader"),
-                    options: {
-                        limit: 14336,
-                        name: "static/media/[name].[hash:8].[ext]",
-                        esModule: false,
-                    },
-                },
-            ],
+          loader: "style-loader",
         },
         {
-            test: /\.(eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/i,
-            loader: require.resolve("file-loader"),
-            options: {
-                name: "static/media/[name].[hash:8].[ext]",
-                esModule: false,
-            },
+          loader: "css-loader",
         },
-    );
-}
+        {
+              loader: "less-loader",
+              options: {
+                  lessOptions: {
+                      javascriptEnabled: true,
+                  },
+              },
+          },
+      ],
+    });
+
+    return config;
+  }
+}