Merge pull request #135 from liam-hq/feat/erd-header

feat: Add AppBar for ERDRenderer

frontend/docs/packages-license.md

@@ -1,9 +1,9 @@
 # frontend
 
-As of December  3, 2024  4:38am. 988 total
+As of December  3, 2024  7:49am. 991 total
 
 ## Summary
-* 858 MIT
+* 861 MIT
 * 59 ISC
 * 28 Apache 2.0
 * 14 Simplified BSD
@@ -5267,6 +5267,17 @@ CC-BY-4.0 permitted
 
 
 
+<a name="globrex"></a>
+### globrex v0.1.2
+#### 
+
+##### Paths
+* /home/runner/work/liam/liam/frontend
+
+<a href="http://opensource.org/licenses/mit-license">MIT</a> permitted
+
+
+
 <a name="gopd"></a>
 ### gopd v1.0.1
 #### 
@@ -10137,6 +10148,17 @@ Unknown manually approved
 
 
 
+<a name="tsconfck"></a>
+### tsconfck v3.1.4
+#### 
+
+##### Paths
+* /home/runner/work/liam/liam/frontend
+
+<a href="http://opensource.org/licenses/mit-license">MIT</a> permitted
+
+
+
 <a name="tsconfig-paths"></a>
 ### tsconfig-paths v3.15.0
 #### 
@@ -10654,6 +10676,17 @@ Unknown manually approved
 
 
 
+<a name="vite-tsconfig-paths"></a>
+### vite-tsconfig-paths v5.1.3
+#### 
+
+##### Paths
+* /home/runner/work/liam/liam/frontend
+
+<a href="http://opensource.org/licenses/mit-license">MIT</a> permitted
+
+
+
 <a name="vitest"></a>
 ### vitest v2.1.4
 #### 

frontend/packages/cli/package.json

@@ -31,6 +31,7 @@
     "typed-css-modules": "0.9.1",
     "typescript": "5",
     "vite": "5.4.10",
+    "vite-tsconfig-paths": "5.1.3",
     "vitest": "2.1.4"
   },
   "scripts": {

frontend/packages/cli/src/globals.css

@@ -1,5 +1,3 @@
-@import url('@liam-hq/erd-core/styles/globals.css');
-
 #root {
   display: flex;
   flex-direction: column;

frontend/packages/cli/vite.config.ts

@@ -1,5 +1,6 @@
 import { rmSync } from 'node:fs'
 import react from '@vitejs/plugin-react'
+import tsconfigPaths from 'vite-tsconfig-paths'
 import { defineConfig } from 'vitest/config'
 
 const outDir = 'dist-cli/html'
@@ -23,7 +24,7 @@ export default defineConfig({
       ],
     },
   },
-  plugins: [react()],
+  plugins: [react(), tsconfigPaths()],
   test: {
     globals: true,
     environment: 'node',

frontend/packages/erd-core/package.json

@@ -7,6 +7,7 @@
   "dependencies": {
     "@liam-hq/ui": "workspace:*",
     "@xyflow/react": "12.3.5",
+    "lucide-react": "0.451.0",
     "react": "18",
     "valtio": "2.1.2"
   },

frontend/packages/erd-core/src/components/ERDRenderer/AppBar/AppBar.module.css

@@ -0,0 +1,65 @@
+.wrapper {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  min-height: var(--default-header-height);
+  padding: 0 var(--spacing-4);
+  background-color: var(--global-muted-background);
+}
+
+.logo {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.title {
+  color: var(--overlay-40);
+  text-align: center;
+  font-family: var(--main-font);
+  font-size: var(--font-size-4);
+  font-style: normal;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.rightSide {
+  display: grid;
+  grid-auto-flow: column;
+  gap: var(--spacing-4);
+  align-items: center;
+}
+
+.iconButtonGroup {
+  display: grid;
+  grid-auto-flow: column;
+  gap: var(--spacing-2);
+  align-items: center;
+}
+
+.iconWrapper {
+  display: grid;
+  place-content: center;
+  place-items: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: var(--border-radius-base);
+  transition: background-color var(--default-hover-animation-duration)
+    var(--default-timing-function);
+}
+
+.iconWrapper:hover {
+  background-color: var(--pane-background-active);
+
+  .icon {
+    color: var(--global-foreground);
+  }
+}
+
+.icon {
+  width: 1rem;
+  height: 1rem;
+  color: var(--overlay-70);
+  stroke-width: 1.5px;
+  transition: color var(--default-hover-animation-duration)
+    var(--default-timing-function);
+}

frontend/packages/erd-core/src/components/ERDRenderer/AppBar/AppBar.tsx

@@ -0,0 +1,48 @@
+import {
+  Button,
+  LiamLogoMark,
+  TooltipContent,
+  TooltipPortal,
+  TooltipProvider,
+  TooltipRoot,
+  TooltipTrigger,
+} from '@liam-hq/ui'
+import type { FC } from 'react'
+import styles from './AppBar.module.css'
+import { ExportButton } from './ExportButton'
+import { GithubButton } from './GithubButton'
+import { HelpButton } from './HelpButton'
+import { ReleaseNoteButton } from './ReleaseNoteButton'
+
+export const AppBar: FC = () => {
+  return (
+    <header className={styles.wrapper}>
+      <TooltipProvider>
+        <TooltipRoot>
+          <TooltipTrigger asChild>
+            <a href="https://liambx.com" target="_blank" rel="noreferrer">
+              <LiamLogoMark className={styles.logo} />
+            </a>
+          </TooltipTrigger>
+          <TooltipPortal>
+            <TooltipContent sideOffset={4}>Go to Home page</TooltipContent>
+          </TooltipPortal>
+        </TooltipRoot>
+      </TooltipProvider>
+
+      <h1 className={styles.title}>ERD Generator</h1>
+
+      <div className={styles.rightSide}>
+        <div className={styles.iconButtonGroup}>
+          <GithubButton />
+          <ReleaseNoteButton />
+          <HelpButton />
+        </div>
+        <ExportButton />
+        <Button variant="solid-primary" size="md">
+          Share
+        </Button>
+      </div>
+    </header>
+  )
+}

frontend/packages/erd-core/src/components/ERDRenderer/AppBar/ExportButton/ExportButton.module.css

@@ -0,0 +1,3 @@
+.menuContent {
+  min-width: 9.75rem;
+}

frontend/packages/erd-core/src/components/ERDRenderer/AppBar/ExportButton/ExportButton.tsx

@@ -0,0 +1,51 @@
+import {
+  Button,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuRoot,
+  DropdownMenuTrigger,
+} from '@liam-hq/ui'
+import { ChevronDown, Download } from 'lucide-react'
+import { type FC, useRef } from 'react'
+import styles from './ExportButton.module.css'
+
+export const ExportButton: FC = () => {
+  const ref = useRef<HTMLButtonElement>(null)
+
+  return (
+    <>
+      <DropdownMenuRoot>
+        <DropdownMenuTrigger asChild>
+          <Button
+            ref={ref}
+            variant="outline-secondary"
+            size="md"
+            leftIcon={
+              <Download
+                strokeWidth={1.5}
+                stroke="var(--button-secondary-foreground)"
+              />
+            }
+            rightIcon={
+              <ChevronDown strokeWidth={1.5} stroke="var(--overlay-40)" />
+            }
+          >
+            Export
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuPortal>
+          <DropdownMenuContent
+            align="end"
+            sideOffset={4}
+            className={styles.menuContent}
+          >
+            <DropdownMenuItem>DDL</DropdownMenuItem>
+            <DropdownMenuItem>schema.rb</DropdownMenuItem>
+            <DropdownMenuItem>mermaid.js</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenuPortal>
+      </DropdownMenuRoot>
+    </>
+  )
+}

frontend/packages/erd-core/src/components/ERDRenderer/AppBar/ExportButton/index.ts

@@ -0,0 +1 @@
+export * from './ExportButton'

frontend/packages/erd-core/src/components/ERDRenderer/AppBar/GithubButton/GithubButton.module.css

@@ -0,0 +1,27 @@
+.iconWrapper {
+  display: grid;
+  place-content: center;
+  place-items: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: var(--border-radius-base);
+  transition: background-color var(--default-hover-animation-duration)
+    var(--default-timing-function);
+}
+
+.iconWrapper:hover {
+  background-color: var(--pane-background-active);
+
+  .icon {
+    color: var(--global-foreground);
+  }
+}
+
+.icon {
+  width: 1rem;
+  height: 1rem;
+  color: var(--overlay-70);
+  stroke-width: 1.5px;
+  transition: color var(--default-hover-animation-duration)
+    var(--default-timing-function);
+}

frontend/packages/erd-core/src/components/ERDRenderer/AppBar/GithubButton/GithubButton.tsx

@@ -0,0 +1,32 @@
+import {
+  TooltipContent,
+  TooltipPortal,
+  TooltipProvider,
+  TooltipRoot,
+  TooltipTrigger,
+} from '@liam-hq/ui'
+import { GithubLogo } from '@liam-hq/ui'
+import type { FC } from 'react'
+import styles from './GithubButton.module.css'
+
+export const GithubButton: FC = () => {
+  return (
+    <TooltipProvider>
+      <TooltipRoot>
+        <TooltipTrigger asChild>
+          <a
+            href="https://github.com/liam-hq/liam"
+            target="_blank"
+            rel="noreferrer"
+            className={styles.iconWrapper}
+          >
+            <GithubLogo className={styles.icon} />
+          </a>
+        </TooltipTrigger>
+        <TooltipPortal>
+          <TooltipContent sideOffset={4}>Go to Github</TooltipContent>
+        </TooltipPortal>
+      </TooltipRoot>
+    </TooltipProvider>
+  )
+}

frontend/packages/erd-core/src/components/ERDRenderer/AppBar/GithubButton/index.ts

@@ -0,0 +1 @@
+export * from './GithubButton'

frontend/packages/erd-core/src/components/ERDRenderer/AppBar/HelpButton/HelpButton.module.css

@@ -0,0 +1,31 @@
+.iconWrapper {
+  display: grid;
+  place-content: center;
+  place-items: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: var(--border-radius-base);
+  transition: background-color var(--default-hover-animation-duration)
+    var(--default-timing-function);
+}
+
+.iconWrapper:hover {
+  background-color: var(--pane-background-active);
+
+  .icon {
+    color: var(--global-foreground);
+  }
+}
+
+.icon {
+  width: 1rem;
+  height: 1rem;
+  color: var(--overlay-70);
+  stroke-width: 1.5px;
+  transition: color var(--default-hover-animation-duration)
+    var(--default-timing-function);
+}
+
+.menuContent {
+  min-width: 9.75rem;
+}