feat: new app and cli

likec4 · Oct 5, 2023 · 9413cec · 9413cec
1 parent 0b301c6
commit 9413cec
Show file tree

Hide file tree

Showing 76 changed files with 1,306 additions and 1,028 deletions.
diff --git a/packages/layouts/src/const.ts b/packages/layouts/src/const.ts
@@ -7,5 +7,4 @@ declare global {
   }
 }
 
-export const isProd = process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'prod'
-export const isDev = process.env.NODE_ENV !== 'development'
+export const isDev = process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'prod'
diff --git a/packages/layouts/src/graphviz/DotLayouter.ts b/packages/layouts/src/graphviz/DotLayouter.ts
@@ -8,28 +8,27 @@ import { isDev } from '../const'
 const limit = pLimit(1)
 
 export class DotLayouter {
-  #graphviz: Graphviz | null = null
-
   dispose() {
     limit.clearQueue()
-    this.#graphviz = null
     Graphviz.unload()
   }
 
   async layout(view: ComputedView) {
     return await limit(async () => {
-      this.#graphviz ??= await Graphviz.load()
+      let graphviz = await Graphviz.load()
       try {
-        return dotLayoutFn(this.#graphviz, view)
+        return dotLayoutFn(graphviz, view)
       } catch (err) {
         if (isDev && err instanceof Error) {
           console.error(`Error in graphviz layout (view=${view.id}): ${err.stack ?? err.message}`)
         }
         // Attempt to recover from memory issues
         Graphviz.unload()
         await delay(10)
-        this.#graphviz = await Graphviz.load()
-        return dotLayoutFn(this.#graphviz, view)
+        graphviz = await Graphviz.load()
+        return dotLayoutFn(graphviz, view)
+      } finally {
+        Graphviz.unload()
       }
     })
   }

diff --git a/packages/likec4/.gitignore b/packages/likec4/.gitignore
@@ -0,0 +1,3 @@
+./dist
+dev/.export
+.vscode/
diff --git a/packages/likec4/app/index.html b/packages/likec4/app/index.html
@@ -2,7 +2,7 @@
 <html lang="en-US" class="dark">
 <head>
   <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="viewport" content="wwidth=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
   <title>LikeC4</title>
   <link rel="stylesheet" type="text/css" href="/likec4.css" />

diff --git a/packages/likec4/app/postcss.config.cjs b/packages/likec4/app/postcss.config.cjs
@@ -0,0 +1,11 @@
+const autoprefixer = require('autoprefixer');
+const nesting = require('tailwindcss/nesting/index.js');
+const tailwindcss = require('tailwindcss');
+const { resolve } = require('path');
+
+const tailwindCfg = resolve(__dirname, './tailwind.config.cjs');
+
+/* @type {import('postcss').Postcss} */
+module.exports = {
+  plugins: [nesting, tailwindcss(tailwindCfg), autoprefixer],
+};
diff --git a/packages/likec4/app/robots.txt b/packages/likec4/app/robots.txt
@@ -1,2 +1,2 @@
 User-agent: *
-Allow: /
+Disallow: /
diff --git a/packages/likec4/app/src/App.tsx b/packages/likec4/app/src/App.tsx
@@ -3,7 +3,6 @@ import { useAtomsDevtools } from 'jotai-devtools'
 import type { PropsWithChildren } from 'react'
 import { Fragment } from 'react'
 import { Sidebar } from './components'
-import { ThemeButton } from './components/ThemeButton'
 import { ExportPage, IndexPage, ViewPage } from './pages'
 import { useRoute } from './router'
 
@@ -13,11 +12,12 @@ const Routes = () => {
     <>
       {r.route === 'index' && <IndexPage key='index' />}
       {r.route === 'view' && <ViewPage key='view' viewId={r.params.viewId} showUI={r.showUI} />}
-      {r.route === 'export' && <ExportPage key='export' viewId={r.params.viewId} />}
+      {r.route === 'export' && (
+        <ExportPage key='export' viewId={r.params.viewId} padding={r.params.padding} />
+      )}
       {r.showUI && (
         <Fragment key='ui'>
           <Sidebar />
-          <ThemeButton />
         </Fragment>
       )}
     </>

diff --git a/packages/likec4/app/src/components/DiagramNotFound.tsx b/packages/likec4/app/src/components/DiagramNotFound.tsx
@@ -0,0 +1,30 @@
+import { ExclamationTriangleIcon } from '@radix-ui/react-icons'
+import { Box, Button, Card, Flex, Heading, IconButton, Text } from '@radix-ui/themes'
+import { $pages } from '../router'
+
+export const DiagramNotFound = () => {
+  return (
+    <Flex position='fixed' inset='0' align='center' justify='center'>
+      <Card color='red' size='3'>
+        <Flex gap='4' direction='row' align='start'>
+          <Box grow='0' shrink='0' pt='1'>
+            <IconButton variant='ghost' color='amber'>
+              <ExclamationTriangleIcon width={50} height={50} />
+            </IconButton>
+          </Box>
+          <Flex gap='3' direction='column'>
+            <Heading trim='both' color='amber' size='4'>
+              Diagram not found
+            </Heading>
+            <Text as='div'>The diagram you are looking for does not exist.</Text>
+            <Box>
+              <Button variant='soft' color='amber' onClick={() => $pages.index.open()}>
+                Home page
+              </Button>
+            </Box>
+          </Flex>
+        </Flex>
+      </Card>
+    </Flex>
+  )
+}
diff --git a/packages/likec4/app/src/components/Navbar.module.css b/packages/likec4/app/src/components/Navbar.module.css
diff --git a/packages/likec4/app/src/components/Navbar.tsx b/packages/likec4/app/src/components/Navbar.tsx
diff --git a/packages/likec4/app/src/components/ThemeButton.tsx b/packages/likec4/app/src/components/ThemeButton.tsx
diff --git a/packages/likec4/app/src/components/ThemePanelToggle.tsx b/packages/likec4/app/src/components/ThemePanelToggle.tsx
@@ -0,0 +1,15 @@
+import { MoonIcon } from '@radix-ui/react-icons'
+import { IconButton, ThemePanel } from '@radix-ui/themes'
+import { useToggle } from '@react-hookz/web/esm'
+
+export const ThemePanelToggle = () => {
+  const [isOpened, toggle] = useToggle(false, true)
+  return (
+    <>
+      <IconButton color='gray' variant={isOpened ? 'solid' : 'soft'} onClick={toggle} size={'2'}>
+        <MoonIcon width={16} height={16} />
+      </IconButton>
+      {isOpened && <ThemePanel style={{ top: 50 }} />}
+    </>
+  )
+}
diff --git a/packages/likec4/app/src/components/index.ts b/packages/likec4/app/src/components/index.ts
@@ -1 +1,4 @@
 export { Sidebar } from './sidebar/Sidebar'
+export { ViewActionsToolbar } from './view-page/ViewActionsToolbar'
+export { ThemePanelToggle } from './ThemePanelToggle'
+export { DiagramNotFound } from './DiagramNotFound'
diff --git a/packages/likec4/app/src/components/sidebar/DiagramsTree.tsx b/packages/likec4/app/src/components/sidebar/DiagramsTree.tsx
@@ -1,15 +1,22 @@
 import { DashboardIcon, TriangleRightIcon } from '@radix-ui/react-icons'
 import { Box, Flex, Text } from '@radix-ui/themes'
-import TreeView from 'react-accessible-treeview'
+import TreeView, { type INode } from 'react-accessible-treeview'
 import { useDiagramsTree } from '../../data'
 import { $pages, useRoute } from '../../router'
 import { cn } from '../../utils'
 import styles from './DiagramsTree.module.css'
 
+function inTree(id: string, data: INode[]): boolean {
+  return data.some(d => d.id === id)
+}
+
 export function DiagramsTree() {
   const data = useDiagramsTree()
   const r = useRoute()
-  const selectedId = r?.route === 'view' ? [r.params.viewId] : []
+
+  const viewId = r.route === 'view' || r.route === 'export' ? r.params.viewId : null
+  const selectedId = viewId && inTree(viewId, data) ? [viewId] : []
+
   return (
     <Box className={styles.treeview}>
       <TreeView