init

src/__data__/urls.ts

@@ -0,0 +1,17 @@
+import { getNavigations, getNavigationsValue } from '@brojs/cli'
+
+import pkg from '../../package.json'
+
+const baseUrl = getNavigationsValue(`${pkg.name}.main`)
+const navs = getNavigations()
+const makeUrl = (url) => baseUrl + url
+
+export const URLs = {
+  baseUrl,
+  by: {
+    url: makeUrl(navs[`link.${pkg.name}.by`]),
+  },
+  toNotFound: {
+    url: makeUrl('/404'),
+  }
+}

src/app.tsx

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

src/assets/lottie/404.json

@@ -0,0 +1 @@
+{"v":"5.7.4","fr":60,"ip":0,"op":420,"w":500,"h":500,"nm":"404","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"body Outlines 3","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":0,"k":-9.244,"ix":3},"y":{"a":0,"k":5.179,"ix":4}},"a":{"a":0,"k":[93.17,33.023,0],"ix":1,"l":2},"s":{"a":0,"k":[-51,51,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-3.869,-2.31],[13.83,0],[3.869,2.29],[-13.84,0]],"o":[[-0.8,13.63],[-4.831,0],[0.79,-13.63],[4.83,0]],"v":[[19.58,-10.4],[-6.36,14.03],[-19.58,10.42],[6.351,-14.03]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.811764765721,0.811764765721,0.811764765721,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[94.693,35.619],"ix":2},"a":{"a":0,"k":[-18.427,9.089],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":19,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"leaf outline","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-3.869,-2.31],[13.83,0],[3.357,1.321]],"o":[[-0.8,13.63],[-4.831,0],[29.789,-4.078]],"v":[[19.579,-10.4],[-6.36,14.03],[-19.58,10.42]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.811764765721,0.811764765721,0.811764765721,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[94.693,35.619],"ix":2},"a":{"a":0,"k":[-18.427,9.089],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":19,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"leaf shadow","np":3,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-3.869,-2.31],[13.83,0],[3.869,2.29],[-13.84,0]],"o":[[-0.8,13.63],[-4.831,0],[0.79,-13.63],[4.83,0]],"v":[[19.58,-10.4],[-6.36,14.03],[-19.58,10.42],[6.351,-14.03]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.811764765721,0.811764765721,0.811764765721,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[94.693,35.619],"ix":2},"a":{"a":0,"k":[-18.427,9.089],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":31,"s":[19]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":43,"s":[59]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":55,"s":[-47]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":65,"s":[19]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":95,"s":[19]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":107,"s":[59]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":119,"s":[-47]},{"t":129,"s":[19]}],"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"leaf","np":3,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"body Outlines 2","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":0,"k":-9.244,"ix":3},"y":{"a":0,"k":5.179,"ix":4}},"a":{"a":0,"k":[93.17,33.023,0],"ix":1,"l":2},"s":{"a":0,"k":[51,51,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-3.869,-2.31],[13.83,0],[3.869,2.29],[-13.84,0]],"o":[[-0.8,13.63],[-4.831,0],[0.79,-13.63],[4.83,0]],"v":[[19.58,-10.4],[-6.36,14.03],[-19.58,10.42],[6.351,-14.03]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.811764765721,0.811764765721,0.811764765721,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[94.693,35.619],"ix":2},"a":{"a":0,"k":[-18.427,9.089],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":19,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"leaf outline","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-3.869,-2.31],[13.83,0],[3.357,1.321]],"o":[[-0.8,13.63],[-4.831,0],[29.789,-4.078]],"v":[[19.579,-10.4],[-6.36,14.03],[-19.58,10.42]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.811764765721,0.811764765721,0.811764765721,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[94.693,3Line truncated

src/dashboard.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Navigate, Route, Routes } from 'react-router-dom'
+
+import { URLs } from './__data__/urls'
+
+import { NotFound } from './pages/not-found'
+import { ByPage } from './pages/by'
+
+export const Dashboard = () => {
+  return (
+    <Routes>
+      <Route
+        path={URLs.baseUrl}
+        element={<Navigate replace to={URLs.toNotFound.url} />}
+      />
+      <Route path={URLs.by.url} element={<ByPage />} />
+      <Route path="*" element={<NotFound />} />
+    </Routes>
+  )
+}

src/index.tsx

@@ -0,0 +1,25 @@
+/* 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 = (Сomponent, element = document.getElementById('app')) => {
+  rootElement = ReactDOM.createRoot(element)
+  rootElement.render(<Сomponent/>)
+
+  if(module.hot) {
+    module.hot.accept('./app', ()=> {
+      rootElement.render(<Сomponent/>)
+    })
+  }
+}
+
+export const unmount = () => {
+  rootElement.unmount()
+}

src/pages/by.tsx

@@ -0,0 +1,13 @@
+import { Container } from '@chakra-ui/react'
+import React from 'react'
+import { useParams } from 'react-router-dom'
+
+export const ByPage = () => {
+  const params = useParams()
+
+  return (
+    <Container maxW="container.xl">
+      <pre>{JSON.stringify(params, null, 4)}</pre>
+    </Container>
+  )
+}

src/pages/not-found.tsx

@@ -0,0 +1,11 @@
+import { Container } from '@chakra-ui/react'
+import Lottie from "lottie-react"
+import React from 'react'
+
+import notFoundAnim from '../assets/lottie/404.json'
+
+export const NotFound = () => (
+  <Container maxW="container.xl">
+    <Lottie animationData={notFoundAnim} />
+  </Container >
+)