🎨 style: fix code format

.gitignore

@@ -16,7 +16,6 @@ package-lock.json
 # misc
 .DS_Store
 .eslintcache
-.husky
 
 # umi
 /src/.umi

.husky/commit-msg

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no -- commitlint --edit ${1}
+

.husky/pre-commit

@@ -0,0 +1,6 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run build
+git add .
+npx --no-install lint-staged

.husky/prepare-commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+# gitmoji as a commit hook
+exec < /dev/tty
+gitmoji --hook $1 $2

CHANGELOG.md

@@ -2,24 +2,21 @@
 
 ## [1.4.1](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/compare/v1.4.0...v1.4.1) (2023-04-21)
 
-
 ### 🐛 Bug Fixes
 
-* dragpanel auto hide in mobile view, fixed ([a7e5d47](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/commit/a7e5d47)), closes [#35](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/issues/35)
+- dragpanel auto hide in mobile view, fixed ([a7e5d47](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/commit/a7e5d47)), closes [#35](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/issues/35)
 
 # [1.4.0](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/compare/v1.3.2...v1.4.0) (2023-04-21)
 
-
 ### ✨ Features
 
-* add suggestions to prompt editor ([bebebe4](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/commit/bebebe4))
+- add suggestions to prompt editor ([bebebe4](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/commit/bebebe4))
 
 ## [1.3.2](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/compare/v1.3.1...v1.3.2) (2023-04-21)
 
-
 ### 🐛 Bug Fixes
 
-* sidebar height ([74a4d2c](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/commit/74a4d2c))
+- sidebar height ([74a4d2c](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/commit/74a4d2c))
 
 ## [1.3.1](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/compare/v1.3.0...v1.3.1) (2023-04-21)
 

src/components/Header/index.tsx

@@ -3,7 +3,7 @@ import { BoldOutlined, GithubOutlined } from '@ant-design/icons'
 import { Button, Space } from 'antd'
 import { useResponsive } from 'antd-style'
 import qs from 'query-string'
-import React, {useCallback, useEffect, useState} from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import styled from 'styled-components'
 import Logo from './Logo'
 import { civitaiLogo, themeIcon } from './style'
@@ -66,7 +66,7 @@ const Header: React.FC<HeaderProps> = ({ children, themeMode }) => {
 
   useEffect(() => {
     setExpand(!mobile)
-  },[mobile])
+  }, [mobile])
 
   return (
     <DraggablePanel placement="top" defaultSize={{ height: 'auto' }} isExpand={expand} onExpandChange={setExpand}>

src/components/Sidebar/index.tsx

@@ -1,6 +1,6 @@
 import { DraggablePanel } from '@/components'
 import { useResponsive } from 'antd-style'
-import React, {useEffect, useState} from 'react'
+import React, { useEffect, useState } from 'react'
 import styled from 'styled-components'
 import PromptGroup from './PromptGroup'
 
@@ -65,7 +65,7 @@ const Sidebar: React.FC<SidebarProps> = ({ children, loading }) => {
 
   useEffect(() => {
     setExpand(!mobile)
-  },[mobile])
+  }, [mobile])
 
   return (
     <DraggablePanel placement="left" defaultSize={{ width: 280 }} isExpand={expand} onExpandChange={setExpand}>

src/components/theme/useIsDarkMode.tsx

@@ -1,29 +1,29 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react'
 
 function checkIsDarkMode() {
   try {
-    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+    return window.matchMedia('(prefers-color-scheme: dark)').matches
   } catch (err) {
-    return false;
+    return false
   }
 }
 
 export function useIsDarkMode() {
-  const [isDarkMode, setIsDarkMode] = useState(checkIsDarkMode());
+  const [isDarkMode, setIsDarkMode] = useState(checkIsDarkMode())
 
   useEffect(() => {
-    const mqList = window.matchMedia('(prefers-color-scheme: dark)');
+    const mqList = window.matchMedia('(prefers-color-scheme: dark)')
 
-    const listener = (event:any) => {
-      setIsDarkMode(event.matches);
-    };
+    const listener = (event: any) => {
+      setIsDarkMode(event.matches)
+    }
 
-    mqList.addEventListener('change', listener);
+    mqList.addEventListener('change', listener)
 
     return () => {
-      mqList.removeEventListener('change', listener);
-    };
-    }, []);
+      mqList.removeEventListener('change', listener)
+    }
+  }, [])
 
-  return isDarkMode;
+  return isDarkMode
 }

src/pages/index/index.tsx

@@ -1,59 +1,59 @@
-import favicon from "@/script/favicon";
-import formatPrompt from "@/script/format-prompt";
-import promptBracketChecker from "@/script/prompt-bracket-checker";
-import "@/theme/style.less";
-import { ThemeProvider, setupStyled } from "antd-style";
-import qs from "query-string";
-import React, { useEffect, useState } from "react";
-import { createRoot } from "react-dom/client";
-import { ThemeContext } from "styled-components";
-import App from "./App";
-import { useIsDarkMode } from "@/components/theme/useIsDarkMode";
+import { useIsDarkMode } from '@/components/theme/useIsDarkMode'
+import favicon from '@/script/favicon'
+import formatPrompt from '@/script/format-prompt'
+import promptBracketChecker from '@/script/prompt-bracket-checker'
+import '@/theme/style.less'
+import { ThemeProvider, setupStyled } from 'antd-style'
+import qs from 'query-string'
+import React, { useEffect, useState } from 'react'
+import { createRoot } from 'react-dom/client'
+import { ThemeContext } from 'styled-components'
+import App from './App'
 
 const Root: React.FC = () => {
-  setupStyled({ ThemeContext });
-  const isDarkMode = useIsDarkMode();
-  const [appearance, setAppearance] = useState<"light" | "dark">("light");
-  const [first, setFirst] = useState(true);
+  setupStyled({ ThemeContext })
+  const isDarkMode = useIsDarkMode()
+  const [appearance, setAppearance] = useState<'light' | 'dark'>('light')
+  const [first, setFirst] = useState(true)
   useEffect(() => {
-      const queryTheme = String(qs.parseUrl(window.location.href).query.__theme || "")
-      if (queryTheme){
-        setAppearance(queryTheme as any);
-        document.body.classList.add(queryTheme);
-        return
-      }
-      setAppearance(isDarkMode ? "dark" : "light");
-      document.body.classList.add(isDarkMode ? "dark" : "light");
-  }, [isDarkMode]);
-  useEffect(()=>{
-    if (first){
-      setFirst(false);
-      return;
+    const queryTheme = String(qs.parseUrl(window.location.href).query.__theme || '')
+    if (queryTheme) {
+      setAppearance(queryTheme as any)
+      document.body.classList.add(queryTheme)
+      return
     }
-    window.location.reload();
-  },[isDarkMode])
+    setAppearance(isDarkMode ? 'dark' : 'light')
+    document.body.classList.add(isDarkMode ? 'dark' : 'light')
+  }, [isDarkMode])
+  useEffect(() => {
+    if (first) {
+      setFirst(false)
+      return
+    }
+    window.location.reload()
+  }, [isDarkMode])
   return (
     <ThemeProvider appearance={appearance}>
       <App themeMode={appearance} />
     </ThemeProvider>
-  );
-};
+  )
+}
 
-document.addEventListener("DOMContentLoaded", () => {
-  const root = document.createElement("div");
-  root.setAttribute("id", "root");
-  gradioApp().append(root);
-  const client = createRoot(root);
-  client.render(<Root />);
-});
+document.addEventListener('DOMContentLoaded', () => {
+  const root = document.createElement('div')
+  root.setAttribute('id', 'root')
+  gradioApp().append(root)
+  const client = createRoot(root)
+  client.render(<Root />)
+})
 
 onUiLoaded(() => {
-  favicon();
-});
+  favicon()
+})
 
 onUiUpdate(() => {
-  formatPrompt();
-  promptBracketChecker();
-});
+  formatPrompt()
+  promptBracketChecker()
+})
 
 export default () => null