merge(html-preview): added html-preview component and fixed git bugs

.eslintrc.js

@@ -0,0 +1,40 @@
+const { configure, presets } = require('eslint-kit')
+
+
+module.exports = configure({
+  mode: 'only-errors',
+  allowDebug: process.env.NODE_ENV !== "production",
+  root: __dirname,
+  presets: [
+    presets.node(),
+    presets.prettier({
+      singleQuote: true,
+      trailingComma: "none",
+      endOfLine: "auto"
+    }),
+    presets.typescript({
+      root: './',
+      tsconfig: 'tsconfig.base.json'
+    }),
+    presets.react(),
+  ],
+  extend: {
+    root: true,
+    ignorePatterns: ["**/*"],
+    plugins: ["@nx"],
+    // My custom config
+    extends: ["gearonix"],
+    rules: {
+      "react/react-in-jsx-scope": "off",
+      "quotes": [2, "single", { "avoidEscape": true }],
+      "@typescript-eslint/no-namespace": "off",
+      "@typescript-eslint/member-delimiter-style": ["error",  {"multiline" : {"delimiter": "none"}}],
+      "import/no-unresolved": "off",
+      "@typescript-eslint/no-unnecessary-condition": "off",
+      "import/extensions": "off",
+      "react-hooks/exhaustive-deps": "warn",
+      "react/no-array-index-key": "warn",
+      "@typescript-eslint/no-explicit-any": "warn"
+    }
+  }
+})

.prettierrc

@@ -2,5 +2,6 @@
   "semi": false,
   "bracketSpacing": true,
   "bracketSameLine": true,
-  "arrowParens": "always"
+  "arrowParens": "always",
+  "singleQuote": true
 }

apps/client/.eslintrc.js

@@ -1,6 +1,6 @@
 module.exports = {
   parser: '@typescript-eslint/parser',
   plugins: ['preact'],
-  extends: ['../../.eslintrc.json'],
+  extends: ['../../.eslintrc.js'],
   ignorePatterns: ['!**/*']
 }

apps/client/public/service-worker.js

@@ -2,13 +2,16 @@ import { CacheableResponsePlugin } from 'workbox-cacheable-response'
 import { ExpirationPlugin } from 'workbox-expiration'
 import { precacheAndRoute } from 'workbox-precaching'
 import { registerRoute } from 'workbox-routing'
-import { CacheFirst,NetworkFirst, StaleWhileRevalidate  } from 'workbox-strategies'
+import {
+  CacheFirst,
+  NetworkFirst,
+  StaleWhileRevalidate
+} from 'workbox-strategies'
 
 precacheAndRoute(self.__WB_MANIFEST)
 
 self.addEventListener('message', (event) => {
-  if (event.data && event.data.type === 'SKIP_WAITING')
-    self.skipWaiting()
+  if (event.data && event.data.type === 'SKIP_WAITING') self.skipWaiting()
 })
 
 registerRoute(
@@ -23,8 +26,6 @@ registerRoute(
   })
 )
 
-
-
 registerRoute(
   /http:\/\/localhost\/:6868/,
   new NetworkFirst({
@@ -68,4 +69,3 @@ registerRoute(
     ]
   })
 )
-

apps/client/src/app/app.tsx

@@ -0,0 +1,20 @@
+import { ThemeProvider } from '@/app/providers/theme'
+import { GlobalStyles } from '@/app/styles'
+
+import { RouterProvider } from './providers/router'
+import { StoreProvider } from './providers/store'
+
+import 'normalize.css'
+
+function App() {
+  return (
+    <StoreProvider>
+      <ThemeProvider>
+        <RouterProvider />
+        <GlobalStyles />
+      </ThemeProvider>
+    </StoreProvider>
+  )
+}
+
+export default App

apps/client/src/app/entry.tsx

@@ -1,7 +1,7 @@
 import { render } from 'preact'
 import { registerSW } from 'virtual:pwa-register'
 
-import App from './App'
+import App from './app'
 
 const updateSW = registerSW({
   onNeedRefresh() {
@@ -11,7 +11,4 @@
   }
 })
 
-
-render(<App />, document.getElementById('root')!)
-
-
+render(<App />, document.querySelector('#root')!)

apps/client/src/app/index.ts

@@ -1 +1 @@
-export { default as App } from './App'
+export { default as App } from './app'

apps/client/src/app/providers/Router/config/router.tsx → apps/client/src/app/providers/router/config/router.tsx

@@ -1,32 +1,29 @@
-import {
-  createBrowserRouter
-} from 'react-router-dom'
+import { createBrowserRouter } from 'react-router-dom'
 
-import { About } from '@/pages/About'
-import { Main } from '@/pages/Main'
-import { NotFound } from '@/pages/NotFound'
+import { About } from '@/pages/about'
+import { Main } from '@/pages/main'
+import { NotFound } from '@/pages/not-found'
 
 import { RoutePaths } from '$/client-shared'
 import { Editor } from '$/editor'
 
 const router = createBrowserRouter([
   {
     path: RoutePaths.MAIN,
-    element: <Main/>
+    element: <Main />
   },
   {
     path: RoutePaths.EDITOR,
-    element: <Editor/>
+    element: <Editor />
   },
   {
     path: RoutePaths.ABOUT,
-    element: <About/>
+    element: <About />
   },
   {
     path: '*',
-    element: <NotFound/>
+    element: <NotFound />
   }
 ])
 
-
 export default router

apps/client/src/app/providers/router/index.ts

@@ -0,0 +1 @@
+export { default as RouterProvider } from './ui/router-provider'

apps/client/src/app/providers/Router/ui/RouterProvider.tsx → apps/client/src/app/providers/router/ui/router-provider.tsx

@@ -6,5 +6,4 @@ const RouterProvider = () => {
   return <Router router={router} />
 }
 
-
 export default RouterProvider

apps/client/src/app/providers/Store/config/store.ts → apps/client/src/app/providers/store/config/store.ts

@@ -2,15 +2,13 @@ import { makeAutoObservable } from 'mobx'
 
 import { EditorStore } from '$/editor'
 
-
 class RootStore {
- editor: EditorStore
+  editor: EditorStore
 
- constructor() {
-   makeAutoObservable(this)
-   this.editor = new EditorStore()
- }
+  constructor() {
+    makeAutoObservable(this)
+    this.editor = new EditorStore()
+  }
 }
 
-
 export default RootStore

apps/client/src/app/providers/store/index.ts

@@ -0,0 +1 @@
+export { default as StoreProvider } from './ui/store-provider'

apps/client/src/app/providers/Store/ui/StoreProvider.tsx → apps/client/src/app/providers/store/ui/store-provider.tsx

@@ -9,9 +9,7 @@ export const StoreContext = createContext<RootStore>({} as RootStore)
 export const StoreProvider = ({ children }: WithPreactChildren) => {
   const root = new RootStore()
 
-  return <StoreContext.Provider value={root}>
-    {children}
-  </StoreContext.Provider>
+  return <StoreContext.Provider value={root}>{children}</StoreContext.Provider>
 }
 
 export default StoreProvider

apps/client/src/app/providers/Theme/config/antdConfig.ts → apps/client/src/app/providers/theme/config/antd-config.ts

@@ -1,13 +1,13 @@
 import { theme } from 'antd'
 import { ThemeConfig } from 'antd/es/config-provider'
 
-import { DarkThemePalette } from '@/app/providers/Theme/config/themes'
+import { DarkThemePalette } from '@/app/providers/theme/config/themes'
 
-export const AntdConfig : ThemeConfig = {
+export const AntdConfig: ThemeConfig = {
   algorithm: theme.darkAlgorithm,
   token: {
     colorBgBase: DarkThemePalette.grey,
-    colorTextBase : DarkThemePalette.light,
+    colorTextBase: DarkThemePalette.light,
     colorBorder: DarkThemePalette.lightGrey,
     colorBgTextHover: DarkThemePalette.light,
     colorBgTextActive: DarkThemePalette.light,

apps/client/src/app/providers/Theme/config/themes.ts → apps/client/src/app/providers/theme/config/themes.ts

@@ -12,5 +12,6 @@ export const DarkThemePalette = {
   fz6: '16px',
   fz7: '18px',
   fz8: '19px',
+  fz9: '21px',
   f10: '28px'
 }

apps/client/src/app/providers/theme/index.ts

@@ -0,0 +1 @@
+export { default as ThemeProvider } from './ui/theme-provider'

apps/client/src/app/providers/Theme/styled.d.ts → apps/client/src/app/providers/theme/styled.d.ts

@@ -1,6 +1,5 @@
 import 'styled-components'
 
-
 declare module 'styled-components' {
   export interface DefaultTheme {
     black: string

apps/client/src/app/providers/Theme/ui/ThemeProvider.tsx → apps/client/src/app/providers/theme/ui/theme-provider.tsx

@@ -1,18 +1,19 @@
 import { ConfigProvider as AntdConfigProvider } from 'antd'
 import { ThemeProvider as StyledThemeProvider } from 'styled-components'
 
-import { AntdConfig } from '../config/antdConfig'
+import { AntdConfig } from '../config/antd-config'
 import { DarkThemePalette } from '../config/themes'
 
 import { WithPreactChildren } from '$/client-shared'
 
 const ThemeProvider = ({ children }: WithPreactChildren) => {
-  return  <AntdConfigProvider theme={AntdConfig}>
-    <StyledThemeProvider theme={DarkThemePalette}>
-    {children}
-  </StyledThemeProvider>
-  </AntdConfigProvider>
+  return (
+    <AntdConfigProvider theme={AntdConfig}>
+      <StyledThemeProvider theme={DarkThemePalette}>
+        {children}
+      </StyledThemeProvider>
+    </AntdConfigProvider>
+  )
 }
 
-
 export default ThemeProvider

apps/client/src/app/styles/app.styles.ts

@@ -2,7 +2,6 @@ import { createGlobalStyle } from 'styled-components'
 
 import { customScrollbar, font } from '$/styles'
 
-
 export const GlobalStyles = createGlobalStyle`
   body {
     background: ${({ theme }) => theme.default};

apps/client/src/pages/about/index.ts

@@ -0,0 +1 @@
+export { default as About } from './ui/about'

apps/client/src/pages/About/ui/About.tsx → apps/client/src/pages/about/ui/about.tsx

@@ -1,8 +1,5 @@
 const About = () => {
-  return <div>
-    about page
-  </div>
+  return <div>about page</div>
 }
 
-
 export default About

apps/client/src/pages/main/index.ts

@@ -0,0 +1 @@
+export { default as Main } from './ui/main'

apps/client/src/pages/main/ui/main.tsx

@@ -0,0 +1,16 @@
+import { Link } from 'react-router-dom'
+
+import { Page, RoutePaths } from '$/client-shared'
+
+const Main = () => {
+  return (
+    <Page>
+      <div>
+        main <br />
+        <Link to={RoutePaths.EDITOR}>editor</Link>
+      </div>
+    </Page>
+  )
+}
+
+export default Main

apps/client/src/pages/not-found/index.ts

@@ -0,0 +1 @@
+export { default as NotFound } from './ui/not-found'

apps/client/src/pages/NotFound/ui/NotFound.tsx → apps/client/src/pages/not-found/ui/not-found.tsx

@@ -1,9 +1,5 @@
-
 const NotFound = () => {
-  return <div>
-    not found
-  </div>
+  return <div>not found</div>
 }
 
-
 export default NotFound