♻️ refactor(wip): refactor with @lobehub/ui

lobehub · Jun 18, 2023 · e116458 · e116458
1 parent e9e51e6
commit e116458
Show file tree

Hide file tree

Showing 8 changed files with 874 additions and 501 deletions.
diff --git a/.releaserc.js b/.releaserc.js
@@ -1 +1 @@
-module.exports = require('@lobehub/lint/dist/semantic-release');
+module.exports = require('@lobehub/lint').semanticRelease;
diff --git a/javascript/index.js b/javascript/index.js
diff --git a/package.json b/package.json
@@ -51,6 +51,7 @@
     "@ant-design/icons": "^5",
     "@commitlint/cli": "^17",
     "@lobehub/lint": "latest",
+    "@lobehub/ui": "latest",
     "@types/lodash-es": "^4",
     "@types/node": "^20",
     "@types/react": "^18",
@@ -62,7 +63,7 @@
     "@umijs/lint": "^4",
     "ahooks": "^3",
     "antd": "^5",
-    "antd-style": "^3",
+    "antd-style": "latest",
     "babel-plugin-styled-components": "^2",
     "browserslist": "^4",
     "commitlint": "^17",
@@ -83,14 +84,13 @@
     "react-dnd": "^16",
     "react-dnd-html5-backend": "^16",
     "react-dom": "^18",
-    "react-font-loader": "^2",
     "react-layout-kit": "^1",
     "react-rnd": "^10",
     "react-tag-input": "^6",
     "remark": "^14",
     "remark-cli": "^11",
     "semantic-release": "^21",
-    "styled-components": "^5",
+    "styled-components": "latest",
     "stylelint": "^15",
     "typescript": "^5",
     "umi": "^4",

diff --git a/src/components/ExtraNetworkSidebar/index.tsx b/src/components/ExtraNetworkSidebar/index.tsx
@@ -1,12 +1,12 @@
-import { ZoomInOutlined } from '@ant-design/icons';
-import { Slider } from 'antd';
-import { useResponsive } from 'antd-style';
-import { type CSSProperties, type ReactNode, memo, useEffect, useState } from 'react';
-import styled, { createGlobalStyle } from 'styled-components';
-import { shallow } from 'zustand/shallow';
+import {ZoomInOutlined} from '@ant-design/icons';
+import {DraggablePanel} from '@lobehub/ui';
+import {Slider} from 'antd';
+import {useResponsive} from 'antd-style';
+import {type CSSProperties, type ReactNode, memo, useEffect, useState} from 'react';
+import styled, {createGlobalStyle} from 'styled-components';
+import {shallow} from 'zustand/shallow';
 
-import { DraggablePanel } from '@/components';
-import { useAppStore } from '@/store';
+import {useAppStore} from '@/store';
 
 const GlobalStyle = createGlobalStyle`
   button#txt2img_extra_networks,
@@ -40,11 +40,11 @@ const SidebarView = styled.div<{ size: number }>`
   .extra-network-cards,
   .extra-network-thumbs {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(${({ size }) => size}px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(${({size}) => size}px, 1fr));
 
     > .card {
       width: var(--fill-available) !important;
-      height: ${({ size }) => size * 1.5}px !important;
+      height: ${({size}) => size * 1.5}px !important;
     }
   }
 `;
@@ -71,44 +71,44 @@ interface SidebarProps {
   style?: CSSProperties;
 }
 
-const Sidebar = memo<SidebarProps>(({ children, style }) => {
-  const { mobile } = useResponsive();
-  const [setting] = useAppStore((st) => [st.setting], shallow);
-  const [mode] = useState<'fixed' | 'float'>(setting.extraNetworkFixedMode);
-  const [expand, setExpand] = useState<boolean>(setting.extraNetworkSidebarExpand);
-  const [size, setSize] = useState<number>(setting?.extraNetworkCardSize || 86);
-
-  useEffect(() => {
-    if (mobile) setExpand(false);
-  }, []);
-
-  return (
-    <>
-      <GlobalStyle />
-      <DraggablePanel
-        defaultSize={{ width: setting.extraNetworkSidebarWidth }}
-        expand={expand}
-        minWidth={setting.extraNetworkSidebarWidth}
-        mode={mode}
-        onExpandChange={setExpand}
-        pin={mode === 'fixed'}
-        placement="right"
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          ...style,
-        }}
-      >
-        <View>
-          <SidebarView size={size}>{children}</SidebarView>
-          <Footer>
-            <ZoomInOutlined />
-            <ZoomSlider defaultValue={size} max={256} min={64} onChange={setSize} step={8} />
-          </Footer>
-        </View>
-      </DraggablePanel>
-    </>
-  );
+const Sidebar = memo<SidebarProps>(({children, style}) => {
+    const {mobile} = useResponsive();
+    const [setting] = useAppStore((st) => [st.setting], shallow);
+    const [mode] = useState<'fixed' | 'float'>(setting.extraNetworkFixedMode);
+    const [expand, setExpand] = useState<boolean>(setting.extraNetworkSidebarExpand);
+    const [size, setSize] = useState<number>(setting?.extraNetworkCardSize || 86);
+
+    useEffect(() => {
+        if (mobile) setExpand(false);
+    }, []);
+
+    return (
+        <>
+            <GlobalStyle />
+            <DraggablePanel
+                defaultSize={{width: setting.extraNetworkSidebarWidth}}
+                expand={expand}
+                minWidth={setting.extraNetworkSidebarWidth}
+                mode={mode}
+                onExpandChange={setExpand}
+                pin={mode === 'fixed'}
+                placement="right"
+                style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    ...style,
+                }}
+            >
+                <View>
+                    <SidebarView size={size}>{children}</SidebarView>
+                    <Footer>
+                        <ZoomInOutlined />
+                        <ZoomSlider defaultValue={size} max={256} min={64} onChange={setSize} step={8} />
+                    </Footer>
+                </View>
+            </DraggablePanel>
+        </>
+    );
 });
 
 export default Sidebar;
diff --git a/src/components/Header/Nav.tsx b/src/components/Header/Nav.tsx
@@ -1,77 +1,33 @@
-import type {MenuProps} from 'antd';
-import {Menu} from 'antd';
+import {TabsNav, type TabsNavProps} from '@lobehub/ui';
 import {memo, useEffect, useState} from 'react';
-import styled from 'styled-components';
 
-/******************************************************
- *********************** Style *************************
- ******************************************************/
+const getNavButtons: HTMLButtonElement[] | any = () =>
+    gradioApp().querySelectorAll('#tabs > .tab-nav:first-child button') || [];
 
-const NavBar = styled(Menu)`
-  overflow: hidden;
-  flex: 1;
-  line-height: 1;
-  border: none;
-
-  .ant-menu-overflow-item {
-    padding: 8px 12px;
-    color: var(--color-text-secondary);
-    border-radius: 4px !important;
-
-    &::after {
-      display: none !important;
-    }
-
-    &:hover {
-      color: var(--color-text);
-      background: var(--color-fill-tertiary);
-    }
-
-    &.ant-menu-item-selected {
-      font-weight: 600;
-      color: var(--color-text);
-    }
-  }
-`;
-
-/******************************************************
- ************************* Dom *************************
- ******************************************************/
-
-const onClick: MenuProps['onClick'] = (e: any) => {
-    const buttons: HTMLButtonElement[] | any = gradioApp().querySelectorAll(
-        '#tabs > .tab-nav:first-child button',
-    );
-    buttons[Number(e.key)]?.click();
+const onChange: TabsNavProps['onChange'] = (activeKey) => {
+    const buttons = getNavButtons();
+    buttons[Number(activeKey)]?.click();
 };
 
 const Nav = memo(() => {
-    const [items, setItems] = useState<MenuProps['items']>([]);
+    const [items, setItems] = useState<TabsNavProps['items']>([]);
 
     useEffect(() => {
         onUiLoaded(() => {
-            const buttons = gradioApp().querySelectorAll('#tabs > .tab-nav:first-child button');
-            const list: MenuProps['items'] | any = [];
-            buttons.forEach((button: HTMLButtonElement | any, index) => {
+            const buttons = getNavButtons();
+            const list: TabsNavProps['items'] | any = [];
+            buttons.forEach((button: HTMLButtonElement | any, index: number) => {
                 button.id = `kitchen-nav-${index}`;
                 list.push({
                     key: String(index),
                     label: button.textContent,
                 });
             });
-            setItems(list);
+            setItems(list.filter(Boolean));
         });
     }, []);
 
-    return (
-        <NavBar
-            defaultActiveFirst
-            defaultSelectedKeys={['0']}
-            items={items}
-            mode="horizontal"
-            onClick={onClick}
-        />
-    );
+    return <TabsNav items={items} onChange={onChange} />;
 });
 
 export default Nav;
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -1,12 +1,10 @@
 import {BoldOutlined, GithubOutlined} from '@ant-design/icons';
+import {Header as H} from '@lobehub/ui';
 import {Button, Modal, Space} from 'antd';
-import {useResponsive} from 'antd-style';
 import qs from 'query-string';
-import {type ReactNode, memo, useCallback, useEffect, useState} from 'react';
-import styled from 'styled-components';
+import {type ReactNode, memo, useCallback, useState} from 'react';
 import {shallow} from 'zustand/shallow';
 
-import {DraggablePanel} from '@/components';
 import {useAppStore} from '@/store';
 
 import Giscus from './Giscus';
@@ -15,39 +13,14 @@ import Nav from './Nav';
 import Setting from './Setting';
 import {civitaiLogo, themeIcon} from './style';
 
-/******************************************************
- *********************** Style *************************
- ******************************************************/
-
-const HeaderView = styled.div`
-  display: flex;
-  flex-wrap: nowrap;
-  gap: 12px;
-  align-items: center;
-  justify-content: space-between;
-
-  height: var(--fill-available);
-  padding: 16px 24px;
-`;
-
-/******************************************************
- ************************* Dom *************************
- ******************************************************/
-
 interface HeaderProps {
   children: ReactNode;
 }
 
 const Header = memo<HeaderProps>(({children}) => {
     const [themeMode] = useAppStore((st) => [st.themeMode], shallow);
-    const {mobile} = useResponsive();
-    const [expand, setExpand] = useState<boolean>(true);
     const [isModalOpen, setIsModalOpen] = useState(false);
 
-    useEffect(() => {
-        if (mobile) setExpand(false);
-    }, []);
-
     const handleSetTheme = useCallback(() => {
         const theme = themeMode === 'light' ? 'dark' : 'light';
         const gradioURL = qs.parseUrl(window.location.href);
@@ -61,25 +34,8 @@ const Header = memo<HeaderProps>(({children}) => {
 
     return (
         <>
-            <DraggablePanel
-                defaultSize={{height: 'auto'}}
-                expand={expand}
-                minHeight={64}
-                onExpandChange={setExpand}
-                placement="top"
-            >
-                <HeaderView id="header" style={{flexDirection: mobile ? 'column' : 'row'}}>
-                    <a
-                        href="https://github.com/canisminor1990/sd-webui-kitchen-theme"
-                        rel="noreferrer"
-                        target="_blank"
-                    >
-                        <Logo themeMode={themeMode} />
-                    </a>
-
-                    <Nav />
-                    {children}
-
+            <H
+                actions={
                     <Space.Compact>
                         <a href="https://civitai.com/" rel="noreferrer" target="_blank">
                             <Button icon={civitaiLogo} title="Civitai" />
@@ -95,8 +51,23 @@ const Header = memo<HeaderProps>(({children}) => {
                         <Setting />
                         <Button icon={themeIcon[themeMode]} onClick={handleSetTheme} title="Switch Theme" />
                     </Space.Compact>
-                </HeaderView>
-            </DraggablePanel>
+                }
+                logo={
+                    <a
+                        href="https://github.com/canisminor1990/sd-webui-kitchen-theme"
+                        rel="noreferrer"
+                        target="_blank"
+                    >
+                        <Logo themeMode={themeMode} />
+                    </a>
+                }
+                nav={
+                    <>
+                        <Nav />
+                        {children}
+                    </>
+                }
+            />
             <Modal
                 footer={false}
                 onCancel={handleCancel}