init brojs

src/__data__/urls.ts

@@ -0,0 +1,15 @@
+import { getNavigation, getNavigationValue } from '@brojs/cli'
+
+import pkg from '../../package.json'
+
+const baseUrl = getNavigationValue(`${pkg.name}.main`)
+const navs = getNavigation()
+const makeUrl = (url) => baseUrl + url
+
+export const URLs = {
+  baseUrl,
+  auth: {
+    url: makeUrl(navs[`link.${pkg.name}.auth`]),
+    isOn: Boolean(navs[`link.${pkg.name}.auth`])
+  },
+}

src/app.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { BrowserRouter } from 'react-router-dom'
+
+import { Dashboard } from './dashboard'
+import { Provider } from './theme'
+
+const App = () => {
+  return (
+    <BrowserRouter>
+      <Provider>
+        <Dashboard />
+      </Provider>
+    </BrowserRouter>
+  )
+}
+
+export default App

src/dashboard.tsx

@@ -0,0 +1,24 @@
+import React, { Suspense } from 'react'
+import { Route, Routes } from 'react-router-dom'
+
+import { URLs } from './__data__/urls'
+import { MainPage } from './pages'
+
+const PageWrapper = ({ children }: React.PropsWithChildren) => (
+  <Suspense fallback={<div>Loading...</div>}>{children}</Suspense>
+)
+
+export const Dashboard = () => {
+  return (
+    <Routes>
+      <Route
+        path={URLs.baseUrl}
+        element={
+          <PageWrapper>
+            <MainPage />
+          </PageWrapper>
+        }
+      />
+    </Routes>
+  )
+}

src/index.tsx

@@ -0,0 +1,28 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable react/display-name */
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+  
+import App from './app'
+  
+export default () => <App/>
+  
+let rootElement: ReactDOM.Root
+  
+export const mount = (Component, element = document.getElementById('app')) => {
+  rootElement = ReactDOM.createRoot(element)
+  rootElement.render(<Component/>)
+
+  // @ts-ignore
+  if(module.hot) {
+    // @ts-ignore
+    module.hot.accept('./app', ()=> {
+      rootElement.render(<Component/>)
+    })
+  }
+}
+
+export const unmount = () => {
+  rootElement.unmount()
+}

src/pages/index.ts

@@ -0,0 +1,3 @@
+import { lazy } from 'react'
+
+export const MainPage = lazy(() => import(/* webpackChunkName: 'main' */'./main'))

src/pages/main/index.ts

@@ -0,0 +1,3 @@
+import { MainPage } from './main'
+
+export default MainPage

src/pages/main/main.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { Grid, GridItem } from '@chakra-ui/react'
+
+export const MainPage = () => {
+  return (
+    <Grid
+      h="100%"
+      bgColor="gray.300"
+      templateAreas={{
+        md: `"header header"
+        "aside main"
+        "footer footer"`,
+        sm: `"header"
+        "main"
+        "aside"
+        "footer"`,
+      }}
+      gridTemplateRows={{ sm: '1fr', md: '50px 1fr 30px' }}
+      gridTemplateColumns={{ sm: '1fr', md: '150px 1fr' }}
+      gap={4}
+    >
+      <GridItem bgColor="green.100" gridArea="header">header</GridItem>
+      <GridItem bgColor="green.300" gridArea="aside">aside</GridItem>
+      <GridItem bgColor="green.600" gridArea="main" h="100vh">main</GridItem>
+      <GridItem bgColor="green.300" gridArea="footer">footer</GridItem>
+    </Grid>
+  )
+}

src/theme.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { ChakraProvider as ChacraProv, createSystem, defaultConfig } from '@chakra-ui/react'
+import type { PropsWithChildren } from 'react'
+
+const ChacraProvider: React.ElementType = ChacraProv
+
+const system = createSystem(defaultConfig, {
+  globalCss: {
+    body: {
+      colorPalette: 'teal',
+    },
+  },
+  theme: {
+    tokens: {
+      fonts: {
+        body: { value: 'var(--font-outfit)' },
+      },
+    },
+    semanticTokens: {
+      radii: {
+        l1: { value: '0.5rem' },
+        l2: { value: '0.75rem' },
+        l3: { value: '1rem' },
+      },
+    },
+  },
+})
+
+export const Provider = (props: PropsWithChildren) => (
+  <ChacraProvider value={system}>
+    {props.children}
+  </ChacraProvider>
+)