multiple ui component wip

.env

@@ -6,7 +6,7 @@ PROD_HOST=localhost
 PUBLIC_API_HOST=localhost:9000
 CRYPTO_KEY=ad$cr3efW89ypg
 SSR=true
-UI=material
+UI=chakra
 MIDDLEWARE=false
 ANIMATE_ROUTER=false
 SERVER_ENTRY=./src/server/entry.ts

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-ssr",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "author": "mrwang",
   "license": "MIT",
   "scripts": {
@@ -9,6 +9,7 @@
     "start": "cross-env NODE_ENV=production node ./dist/server/app"
   },
   "dependencies": {
+    "@chakra-ui/react": "^1.7.3",
     "@emotion/react": "^11.7.1",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.6.0",

readme.md

@@ -58,7 +58,7 @@ yarn run start
 
 ## 装饰器
 
-## Material-UI
+## multiple UI (Material-UI, antd, chakra-ui)
 
 ## 数据自动注入原理上比较难以实现 改用 redux connect
 
@@ -74,4 +74,4 @@ yarn run start
 
 ## react router 6
 
-## 开箱既支持多种 UI 组件库 通过环境变量 UI 切换（antd,material,chakra-ui -> todo）
+## 开箱既支持多种 UI 组件库(CSR / SSR) 通过环境变量 UI 切换（antd,material,chakra-ui,...)

src/client/chakraEntry.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { CacheProvider } from "@emotion/react";
+import { ColorModeScript, ChakraProvider } from "@chakra-ui/react";
+import { App } from "components/App";
+import { createEmotionCache } from "config/createEmotionCache";
+import { HelmetProvider } from "react-helmet-async";
+import { Provider } from "react-redux";
+import { BrowserRouter as Router } from "react-router-dom";
+import { createUniversalStore } from "store";
+
+const cache = createEmotionCache();
+
+const Root = ({ store }: { store: ReturnType<typeof createUniversalStore> }) => {
+  console.warn("you are using chakra UI component library!");
+
+  return (
+    // <React.StrictMode> for chakra UI always have id not match issue on the develop mode
+    <CacheProvider value={cache}>
+      <ChakraProvider resetCSS>
+        <Provider store={store}>
+          <Router>
+            <HelmetProvider>
+              <ColorModeScript />
+              <App />
+            </HelmetProvider>
+          </Router>
+        </Provider>
+      </ChakraProvider>
+    </CacheProvider>
+    // </React.StrictMode>
+  );
+};
+
+export { Root };

src/client/entry.tsx

@@ -7,9 +7,10 @@ import { log } from "utils/log";
 import { safeData } from "utils/safeData";
 import { StoreState } from "types/store";
 import { Root as AntRoot } from "./antDesignEntry";
+import { Root as ChakraRoot } from "./chakraEntry";
 import { Root as MaterialRoot } from "./materialEntry";
 
-const place = document.querySelector("#content");
+const place = document.querySelector("#__content__");
 
 const preLoadEnvElement = document.querySelector("script#__preload_env__");
 
@@ -21,7 +22,7 @@ window.__ENV__ = safeData(JSON.parse(preLoadEnvElement?.innerHTML || "{}"));
 
 safeData(window as unknown as Record<string, unknown>, "__ENV__");
 
-const Root = window.__ENV__.UI === "material" ? MaterialRoot : AntRoot;
+const Root = window.__ENV__.UI === "material" ? MaterialRoot : window.__ENV__.UI === "antd" ? AntRoot : ChakraRoot;
 
 if (!window.__ENV__.SSR) {
   loadableReady(() => render(<Root store={store} />, place));

src/components/Footer.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import Button from "@mui/material/Button";
 
 import { allRoutes } from "router/routes";
 import { useNavigate } from "react-router";
@@ -14,15 +13,14 @@ export const Footer = () => {
         {(allRoutes[0].children || [])
           .filter((it) => it.path)
           .map((item) => (
-            <Button
-              variant="contained"
+            <button
               key={item.path}
               onClick={() => {
                 item.path && navigate(item.path);
               }}
             >
               {item.path}
-            </Button>
+            </button>
           ))}
       </div>
       <footer className={style.footer}>footer</footer>

src/components/Header.tsx

@@ -1,7 +1,5 @@
 import React from "react";
 import { Helmet } from "react-helmet-async";
-import Box from "@mui/material/Box";
-import { Link } from "@mui/material";
 
 import { supportedLangs } from "i18n";
 import { useLang } from "hooks/useLang";
@@ -13,14 +11,14 @@ export const Header = () => {
   return (
     <header className={style.header}>
       <Helmet defaultTitle="React SSR Starter – TypeScript Edition" titleTemplate="%s – React SSR Starter – TypeScript Edition" />
-      <Box display="flex" justifyContent="space-around">
+      <div>
         当前 {lang}, 可用 {Object.keys(supportedLangs).join(" ")}
         {Object.keys(supportedLangs).map((code) => (
-          <Link key={code} onClick={() => changeLang(code)}>
+          <button key={code} onClick={() => changeLang(code)}>
             {supportedLangs[code as unknown as "en" | "ar"]}
-          </Link>
+          </button>
         ))}
-      </Box>
+      </div>
     </header>
   );
 };

src/components/Layout.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import Container from "@mui/material/Container";
 import { Outlet } from "react-router";
 
 import { Header } from "./Header";
@@ -9,13 +8,13 @@ import style from "./index.module.scss";
 
 export const Layout = () => {
   return (
-    <Container className={style.container}>
+    <div className={style.container}>
       <Header />
       <main className={style.content}>
         <Outlet />
         <hr />
       </main>
       <Footer />
-    </Container>
+    </div>
   );
 };

src/components/LoadingBar/LoadingBar.tsx

@@ -11,7 +11,7 @@ export const Bar = React.memo(
   React.forwardRef<HTMLDivElement>(function Bar(_, ref) {
     useEffectOnce(() => {
       div = document.createElement("div");
-      div.id = "loading_bar";
+      div.id = "__loading_bar__";
       document.body.prepend(div);
     });
 

src/components/UI.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { getUniverSalUI } from "utils/universal";
+
+export function UI() {
+  return (
+    <div>
+      <h3>当前UI Component： {getUniverSalUI()}</h3>
+    </div>
+  );
+}

src/components/antDesignComponent.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { DatePicker, Carousel } from "antd";
+
+const AntDesignComponent = () => {
+  return (
+    <>
+      <h2>Ant Design</h2>
+      <DatePicker />
+      <br />
+      <div style={{ width: "300px", borderRadius: "0.6rem", overflow: "hidden" }}>
+        <Carousel autoplay>
+          <div>
+            <div style={{ height: "200px", backgroundColor: "#ccc", textAlign: "center", fontSize: "1.6rem" }}>1</div>
+          </div>
+          <div>
+            <div style={{ height: "200px", backgroundColor: "#ccc", textAlign: "center", fontSize: "1.6rem" }}>2</div>
+          </div>
+          <div>
+            <div style={{ height: "200px", backgroundColor: "#ccc", textAlign: "center", fontSize: "1.6rem" }}>3</div>
+          </div>
+          <div>
+            <div style={{ height: "200px", backgroundColor: "#ccc", textAlign: "center", fontSize: "1.6rem" }}>4</div>
+          </div>
+        </Carousel>
+      </div>
+    </>
+  );
+};
+export default AntDesignComponent;

src/components/chakraComponent.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { Select, Button, Box, Fade, useDisclosure, Menu, MenuButton, MenuList, MenuItem } from "@chakra-ui/react";
+
+export default function ChakraComponent() {
+  const { isOpen, onToggle } = useDisclosure();
+  return (
+    <>
+      <h2>Chakra UI</h2>
+      <Select placeholder="Select option">
+        <option value="option1">Option 1</option>
+        <option value="option2">Option 2</option>
+        <option value="option3">Option 3</option>
+      </Select>
+      <hr />
+      <Button onClick={onToggle}>Click Me</Button>
+      <Fade in={isOpen}>
+        <Box p="40px" color="white" mt="4" bg="teal.500" rounded="md" shadow="md">
+          Fade
+        </Box>
+      </Fade>
+
+      <Menu>
+        {({ isOpen }) => (
+          <>
+            <MenuButton isActive={isOpen} as={Button} rightIcon={<span>{1234}</span>}>
+              {isOpen ? "Close" : "Open"}
+            </MenuButton>
+            <MenuList>
+              <MenuItem>Download</MenuItem>
+              <MenuItem onClick={() => alert("Kagebunshin")}>Create a Copy</MenuItem>
+            </MenuList>
+          </>
+        )}
+      </Menu>
+    </>
+  );
+}

src/components/i18n.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { useIntl } from "react-intl";
+import style from "./style.module.scss";
+
+export const I18n = () => {
+  const { formatMessage: f } = useIntl();
+  return (
+    <div className={style.c}>
+      aaaa
+      <p>{f({ id: "app.title", defaultMessage: "hello" })}</p>
+      <p>{f({ id: "home.lead", defaultMessage: "test" })}</p>
+      <p>{f({ id: "home.title", defaultMessage: "title" })}</p>
+    </div>
+  );
+};
+
+export default I18n;

src/components/index.module.scss

@@ -1,6 +1,10 @@
 .container {
   max-width: 1444px;
+  min-height: 100vh;
   margin: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 
 .header {