New ReleaseVersion component into HelpButton

frontend/.changeset/funny-jokes-add.md

@@ -0,0 +1,6 @@
+---
+"@liam-hq/erd-core": patch
+"@liam-hq/cli": patch
+---
+
+New `ReleaseVersion` component into `HelpButton`

frontend/packages/cli/package.json

@@ -37,11 +37,11 @@
   "scripts": {
     "build": "pnpm run '/^build:.*/'",
     "build:cli": "rollup -c  && pnpm run cp:prism",
-    "build:vite": "vite build",
+    "build:vite": "node scripts/set-env.mjs vite build",
     "command:build": "node ./dist-cli/bin/cli.js erd build --input fixtures/input.schema.rb --format schemarb",
     "cp:prism": "cp ../db-structure/node_modules/@ruby/prism/src/prism.wasm ./dist-cli/bin/prism.wasm",
     "dev": "pnpm command:build && cp dist/schema.json public/ && pnpm run '/^dev:.*/'",
-    "dev:app": "vite",
+    "dev:app": "node scripts/set-env.mjs vite",
     "dev:css": "tcm src --watch",
     "fmt": "pnpm run '/^fmt:.*/'",
     "fmt:biome": "biome check --write --unsafe .",

frontend/packages/cli/scripts/set-env.mjs

@@ -0,0 +1,63 @@
+import { execSync } from 'node:child_process'
+import { dirname, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+const packageJson = JSON.parse(
+  await (await import('node:fs/promises')).readFile(
+    join(__dirname, '../package.json'),
+    'utf-8',
+  ),
+)
+const gitHash = (() => {
+  try {
+    return execSync('git rev-parse HEAD').toString().trim()
+  } catch (error) {
+    console.error('Failed to get git hash:', error)
+    return ''
+  }
+})()
+
+const date = (() => {
+  try {
+    const gitDate = execSync('git log -1 --format=%ci').toString().trim()
+    return gitDate.split(' ')[0]
+  } catch (error) {
+    console.error('Failed to get git date:', error)
+    return new Date().toISOString().split('T')[0] // fallback to current date
+  }
+})()
+
+const packageJsonVersion = packageJson.version
+const latestTagName = `@liam-hq/cli@${packageJsonVersion}`
+const isReleasedGitHash = (() => {
+  try {
+    execSync('git fetch --tags')
+    const tagCommit = execSync(`git rev-parse ${latestTagName}`)
+      .toString()
+      .trim()
+    if (gitHash === tagCommit) {
+      return 1
+    }
+    return 0
+  } catch (error) {
+    console.error('Failed to get git tag:', error)
+    return 0
+  }
+})()
+
+process.env.VITE_CLI_VERSION_VERSION = packageJsonVersion
+process.env.VITE_CLI_VERSION_IS_RELEASED_GIT_HASH = isReleasedGitHash
+process.env.VITE_CLI_VERSION_GIT_HASH = gitHash
+process.env.VITE_CLI_VERSION_DATE = date
+
+const args = process.argv.slice(2)
+if (args.length === 0) {
+  console.error('No command provided to run with the environment variable.')
+  process.exit(1)
+}
+
+const command = args.join(' ')
+
+execSync(command, { stdio: 'inherit', env: process.env })

frontend/packages/cli/src/App.tsx

@@ -1,5 +1,10 @@
 import { dbStructureSchema } from '@liam-hq/db-structure'
-import { ERDRenderer, initDBStructureStore } from '@liam-hq/erd-core'
+import {
+  CliVersionProvider,
+  ERDRenderer,
+  cliVersionSchema,
+  initDBStructureStore,
+} from '@liam-hq/erd-core'
 import * as v from 'valibot'
 
 async function loadSchemaContent() {
@@ -20,8 +25,21 @@ async function loadSchemaContent() {
 
 loadSchemaContent()
 
+const cliVersionData = {
+  version: import.meta.env.VITE_CLI_VERSION_VERSION,
+  gitHash: import.meta.env.VITE_CLI_VERSION_GIT_HASH,
+  isReleasedGitHash:
+    import.meta.env.VITE_CLI_VERSION_IS_RELEASED_GIT_HASH === '1',
+  date: import.meta.env.VITE_CLI_VERSION_DATE,
+}
+const cliVersion = v.parse(cliVersionSchema, cliVersionData)
+
 function App() {
-  return <ERDRenderer />
+  return (
+    <CliVersionProvider cliVersion={cliVersion}>
+      <ERDRenderer />
+    </CliVersionProvider>
+  )
 }
 
 export default App

frontend/packages/cli/vite.config.ts

@@ -25,6 +25,20 @@ export default defineConfig({
       ],
     },
   },
+  define: {
+    'import.meta.env.VITE_CLI_VERSION_VERSION': JSON.stringify(
+      process.env.VITE_CLI_VERSION_VERSION || '',
+    ),
+    'import.meta.env.VITE_CLI_VERSION_GIT_HASH': JSON.stringify(
+      process.env.VITE_CLI_VERSION_GIT_HASH || '',
+    ),
+    'import.meta.env.VITE_CLI_VERSION_IS_RELEASED_GIT_HASH': JSON.stringify(
+      process.env.VITE_CLI_VERSION_IS_RELEASED_GIT_HASH || '',
+    ),
+    'import.meta.env.VITE_CLI_VERSION_DATE': JSON.stringify(
+      process.env.VITE_CLI_VERSION_DATE || '',
+    ),
+  },
   plugins: [react(), tsconfigPaths()],
   test: {
     globals: true,

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

@@ -14,6 +14,7 @@ import {
 } from '@liam-hq/ui'
 import { forwardRef } from 'react'
 import styles from './HelpButton.module.css'
+import { ReleaseVersion } from './ReleaseVersion'
 
 const handleSelect = (url: string) => () => {
   window.open(url, '_blank', 'noreferrer')
@@ -41,6 +42,7 @@ export const HelpButton = forwardRef<HTMLButtonElement>((_, ref) => {
           sideOffset={4}
           className={styles.menuContent}
         >
+          <ReleaseVersion />
           <DropdownMenuItem
             size="sm"
             leftIcon={<BookText />}

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

@@ -0,0 +1,12 @@
+.cliVersion {
+  padding: var(--spacing-2);
+}
+
+.cliVersionInner {
+  border-radius: var(--border-radius-full);
+  background: var(--pane-muted-background);
+  padding: var(--spacing-1) var(--spacing-2);
+  color: var(--global-mute-text);
+  font-family: var(--code-font);
+  font-size: var(--font-size-1);
+}

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

@@ -0,0 +1,32 @@
+import { CliVersionProvider, useCliVersion } from '@/providers'
+import type { FC } from 'react'
+import styles from './ReleaseVersion.module.css'
+
+export const ReleaseVersion: FC = () => {
+  const { cliVersion } = useCliVersion()
+
+  // Example output for cliVersion:
+  // - Released version:
+  //   v0.0.11 (2024-12-19)
+  // - Unreleased version:
+  //   v0.0.11 + 0d6169a (2024-12-19)
+  //
+  // Explanation:
+  // - "Released version" means the current Git hash matches a tagged release.
+  // - "Unreleased version" includes a short Git hash prefix to indicate changes since the last release.
+  return (
+    <CliVersionProvider cliVersion={cliVersion}>
+      <div className={styles.cliVersion}>
+        <div className={styles.cliVersionInner}>
+          <span>{`v${cliVersion.version}`}</span>
+          <span>
+            {' '}
+            {cliVersion.isReleasedGitHash ||
+              `+ ${cliVersion.gitHash.slice(0, 7)} `}
+          </span>
+          <span>{cliVersion.date.length > 0 && ` (${cliVersion.date})`}</span>
+        </div>
+      </div>
+    </CliVersionProvider>
+  )
+}

frontend/packages/erd-core/src/index.ts

@@ -1,2 +1,4 @@
 export * from './components'
+export * from './providers'
+export * from './schemas'
 export * from './stores'

frontend/packages/erd-core/src/providers/CliVersionProvider.tsx

@@ -0,0 +1,29 @@
+import type { CliVersion } from '@/schemas/cliVersion'
+import { type FC, type ReactNode, createContext, useContext } from 'react'
+
+interface CliVersionContextProps {
+  cliVersion: CliVersion
+}
+
+const CliVersionContext = createContext<CliVersionContextProps | undefined>(
+  undefined,
+)
+
+export const useCliVersion = (): CliVersionContextProps => {
+  const context = useContext(CliVersionContext)
+  if (!context) {
+    throw new Error('useCliVersion must be used within a CliVersionProvider')
+  }
+  return context
+}
+
+export const CliVersionProvider: FC<{
+  cliVersion: CliVersion
+  children: ReactNode
+}> = ({ cliVersion, children }) => {
+  return (
+    <CliVersionContext.Provider value={{ cliVersion }}>
+      {children}
+    </CliVersionContext.Provider>
+  )
+}

frontend/packages/erd-core/src/providers/index.ts

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

frontend/packages/erd-core/src/schemas/cliVersion/index.ts

@@ -0,0 +1,2 @@
+export * from './schemas'
+export * from './types'

frontend/packages/erd-core/src/schemas/cliVersion/schemas.ts

@@ -0,0 +1,8 @@
+import * as v from 'valibot'
+
+export const cliVersionSchema = v.object({
+  version: v.string(),
+  gitHash: v.string(),
+  isReleasedGitHash: v.boolean(),
+  date: v.string(),
+})

frontend/packages/erd-core/src/schemas/cliVersion/types.ts

@@ -0,0 +1,4 @@
+import type { InferOutput } from 'valibot'
+import type { cliVersionSchema } from './schemas'
+
+export type CliVersion = InferOutput<typeof cliVersionSchema>

frontend/packages/erd-core/src/schemas/index.ts

@@ -0,0 +1,3 @@
+export * from './cliVersion'
+export * from './queryParam'
+export * from './showMode'