Merge pull request #398 from liam-hq/rename_cli_version

♻️ Rename cliVersion to version

.changeset/selfish-candles-boil.md

@@ -0,0 +1,6 @@
+---
+"@liam-hq/erd-core": patch
+"@liam-hq/cli": patch
+---
+
+♻️ Rename cliVersion to version

frontend/apps/erd-web/app/erd/p/[...slug]/erdViewer.tsx

@@ -2,10 +2,10 @@
 
 import type { DBStructure } from '@liam-hq/db-structure'
 import {
-  CliVersionProvider,
   ERDRenderer,
-  cliVersionSchema,
+  VersionProvider,
   initDBStructureStore,
+  versionSchema,
 } from '@liam-hq/erd-core'
 import { useEffect } from 'react'
 import * as v from 'valibot'
@@ -23,18 +23,18 @@ export default function ERDViewer({
     initDBStructureStore(dbStructure)
   }, [dbStructure])
 
-  const cliVersionData = {
+  const versionData = {
     gitHash: process.env.NEXT_PUBLIC_GIT_HASH,
     date: process.env.NEXT_PUBLIC_RELEASE_DATE,
     displayedOn: 'web',
   }
-  const cliVersion = v.parse(cliVersionSchema, cliVersionData)
+  const version = v.parse(versionSchema, versionData)
 
   return (
     <div style={{ height: '100vh' }}>
-      <CliVersionProvider cliVersion={cliVersion}>
+      <VersionProvider version={version}>
         <ERDRenderer defaultSidebarOpen={defaultSidebarOpen} />
-      </CliVersionProvider>
+      </VersionProvider>
     </div>
   )
 }

frontend/packages/cli/src/App.tsx

@@ -1,9 +1,9 @@
 import { dbStructureSchema } from '@liam-hq/db-structure'
 import {
-  CliVersionProvider,
   ERDRenderer,
-  cliVersionSchema,
+  VersionProvider,
   initDBStructureStore,
+  versionSchema,
 } from '@liam-hq/erd-core'
 import * as v from 'valibot'
 
@@ -25,7 +25,7 @@ async function loadSchemaContent() {
 
 loadSchemaContent()
 
-const cliVersionData = {
+const versionData = {
   version: import.meta.env.VITE_CLI_VERSION_VERSION,
   gitHash: import.meta.env.VITE_CLI_VERSION_GIT_HASH,
   envName: import.meta.env.VITE_CLI_VERSION_ENV_NAME,
@@ -34,7 +34,7 @@ const cliVersionData = {
   date: import.meta.env.VITE_CLI_VERSION_DATE,
   displayedOn: 'cli',
 }
-const cliVersion = v.parse(cliVersionSchema, cliVersionData)
+const version = v.parse(versionSchema, versionData)
 
 function getSidebarStateFromCookie(): boolean {
   const cookies = document.cookie.split('; ').map((cookie) => cookie.split('='))
@@ -46,9 +46,9 @@ function App() {
   const defaultSidebarOpen = getSidebarStateFromCookie()
 
   return (
-    <CliVersionProvider cliVersion={cliVersion}>
+    <VersionProvider version={version}>
       <ERDRenderer defaultSidebarOpen={defaultSidebarOpen} />
-    </CliVersionProvider>
+    </VersionProvider>
   )
 }
 

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

@@ -1,5 +1,5 @@
 import { clickLogEvent } from '@/features/gtm/utils'
-import { useCliVersion } from '@/providers'
+import { useVersion } from '@/providers'
 import {
   Button,
   TooltipContent,
@@ -13,7 +13,7 @@ import { type FC, useCallback } from 'react'
 
 export const CopyLinkButton: FC = () => {
   const toast = useToast()
-  const { cliVersion } = useCliVersion()
+  const { version } = useVersion()
   const handleCopyUrl = useCallback(() => {
     navigator.clipboard
       .writeText(window.location.href)
@@ -31,13 +31,13 @@ export const CopyLinkButton: FC = () => {
         })
       })
 
-    cliVersion.displayedOn === 'cli' &&
+    version.displayedOn === 'cli' &&
       clickLogEvent({
         element: 'copyLinkButton',
-        cliVer: cliVersion.version,
-        appEnv: cliVersion.envName,
+        cliVer: version.version,
+        appEnv: version.envName,
       })
-  }, [toast, cliVersion])
+  }, [toast, version])
 
   return (
     <TooltipProvider>

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

@@ -1,4 +1,4 @@
-.cliVersion {
+.version {
   margin: var(--spacing-2);
   border-radius: var(--border-radius-full);
   background: var(--pane-muted-background);

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

@@ -1,11 +1,11 @@
-import { useCliVersion } from '@/providers'
+import { useVersion } from '@/providers'
 import type { FC } from 'react'
 import styles from './ReleaseVersion.module.css'
 
 export const ReleaseVersion: FC = () => {
-  const { cliVersion } = useCliVersion()
+  const { version } = useVersion()
 
-  // Example output for cliVersion:
+  // Example output for version:
   // - Released version:
   //   v0.0.11 (2024-12-19)
   // - Unreleased version:
@@ -15,22 +15,21 @@ export const ReleaseVersion: FC = () => {
   // - "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 (
-    <div className={styles.cliVersion}>
-      {cliVersion.displayedOn === 'cli' ? (
+    <div className={styles.version}>
+      {version.displayedOn === 'cli' ? (
         <>
-          <span>{`v${cliVersion.version}`}</span>
+          <span>{`v${version.version}`}</span>
           <span>
             {' '}
-            {cliVersion.isReleasedGitHash ||
-              `+ ${cliVersion.gitHash.slice(0, 7)} `}
+            {version.isReleasedGitHash || `+ ${version.gitHash.slice(0, 7)} `}
           </span>
-          <span>{`(${cliVersion.date})`}</span>
+          <span>{`(${version.date})`}</span>
         </>
       ) : (
         <>
-          <span>{cliVersion.gitHash.slice(0, 7)}</span>
+          <span>{version.gitHash.slice(0, 7)}</span>
           <span> </span>
-          <span>{`(${cliVersion.date})`}</span>
+          <span>{`(${version.date})`}</span>
         </>
       )}
     </div>

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

@@ -1,6 +1,6 @@
 import { selectTableLogEvent } from '@/features/gtm/utils'
 import { repositionTableLogEvent } from '@/features/gtm/utils/repositionTableLogEvent'
-import { useCliVersion } from '@/providers'
+import { useVersion } from '@/providers'
 import { updateActiveTableName, useUserEditingActiveStore } from '@/stores'
 import {
   Background,
@@ -64,19 +64,19 @@ export const ERDContentInner: FC<Props> = ({
   useSyncHighlightsActiveTableChange()
   useSyncHiddenNodesChange()
 
-  const { cliVersion } = useCliVersion()
+  const { version } = useVersion()
   const handleNodeClick = useCallback(
     (tableId: string) => {
       updateActiveTableName(tableId)
-      cliVersion.displayedOn === 'cli' &&
+      version.displayedOn === 'cli' &&
         selectTableLogEvent({
           ref: 'mainArea',
           tableId,
-          cliVer: cliVersion.version,
-          appEnv: cliVersion.envName,
+          cliVer: version.version,
+          appEnv: version.envName,
         })
     },
-    [cliVersion],
+    [version],
   )
 
   const handlePaneClick = useCallback(() => {
@@ -116,16 +116,16 @@ export const ERDContentInner: FC<Props> = ({
       const operationId = `id_${new Date().getTime()}`
       for (const node of nodes) {
         const tableId = node.id
-        cliVersion.displayedOn === 'cli' &&
+        version.displayedOn === 'cli' &&
           repositionTableLogEvent({
             tableId,
             operationId,
-            cliVer: cliVersion.version,
-            appEnv: cliVersion.envName,
+            cliVer: version.version,
+            appEnv: version.envName,
           })
       }
     },
-    [cliVersion],
+    [version],
   )
 
   const panOnDrag = [1, 2]

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/RelatedTables/RelatedTables.tsx

@@ -1,6 +1,6 @@
 import { convertDBStructureToNodes } from '@/components/ERDRenderer/convertDBStructureToNodes'
 import { openRelatedTablesLogEvent } from '@/features/gtm/utils'
-import { useCliVersion } from '@/providers'
+import { useVersion } from '@/providers'
 import {
   replaceHiddenNodeIds,
   updateActiveTableName,
@@ -26,7 +26,7 @@ export const RelatedTables: FC<Props> = ({ table }) => {
     showMode: 'TABLE_NAME',
   })
   const { getNodes } = useReactFlow()
-  const { cliVersion } = useCliVersion()
+  const { version } = useVersion()
   const handleClick = useCallback(() => {
     const visibleNodeIds: string[] = nodes.map((node) => node.id)
     const mainPaneNodes = getNodes()
@@ -36,13 +36,13 @@ export const RelatedTables: FC<Props> = ({ table }) => {
 
     replaceHiddenNodeIds(hiddenNodeIds)
     updateActiveTableName(undefined)
-    cliVersion.displayedOn === 'cli' &&
+    version.displayedOn === 'cli' &&
       openRelatedTablesLogEvent({
         tableId: table.name,
-        cliVer: cliVersion.version,
-        appEnv: cliVersion.envName,
+        cliVer: version.version,
+        appEnv: version.envName,
       })
-  }, [nodes, getNodes, table.name, cliVersion])
+  }, [nodes, getNodes, table.name, version])
 
   return (
     <div className={styles.wrapper}>

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/TableDetail.tsx

@@ -1,5 +1,5 @@
 import { clickLogEvent } from '@/features/gtm/utils'
-import { useCliVersion } from '@/providers'
+import { useVersion } from '@/providers'
 import type { Table } from '@liam-hq/db-structure'
 import { DrawerClose, DrawerTitle, IconButton, XIcon } from '@liam-hq/ui'
 import type { FC } from 'react'
@@ -15,13 +15,13 @@ type Props = {
 }
 
 export const TableDetail: FC<Props> = ({ table }) => {
-  const { cliVersion } = useCliVersion()
+  const { version } = useVersion()
   const handleDrawerClose = () => {
-    cliVersion.displayedOn === 'cli' &&
+    version.displayedOn === 'cli' &&
       clickLogEvent({
         element: 'closeTableDetailButton',
-        cliVer: cliVersion.version,
-        appEnv: cliVersion.envName,
+        cliVer: version.version,
+        appEnv: version.envName,
       })
   }
 

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/FitviewButton/FitviewButton.tsx

@@ -1,5 +1,5 @@
 import { toolbarActionLogEvent } from '@/features/gtm/utils'
-import { useCliVersion } from '@/providers'
+import { useVersion } from '@/providers'
 import { useUserEditingStore } from '@/stores'
 import { IconButton, Scan } from '@liam-hq/ui'
 import { ToolbarButton } from '@radix-ui/react-toolbar'
@@ -9,18 +9,18 @@ import { type FC, useCallback } from 'react'
 export const FitviewButton: FC = () => {
   const { fitView } = useReactFlow()
   const { showMode } = useUserEditingStore()
-  const { cliVersion } = useCliVersion()
+  const { version } = useVersion()
 
   const handleClick = useCallback(() => {
-    cliVersion.displayedOn === 'cli' &&
+    version.displayedOn === 'cli' &&
       toolbarActionLogEvent({
         element: 'fitview',
         showMode,
-        cliVer: cliVersion.version,
-        appEnv: cliVersion.envName,
+        cliVer: version.version,
+        appEnv: version.envName,
       })
     fitView()
-  }, [fitView, showMode, cliVersion])
+  }, [fitView, showMode, version])
 
   return (
     <ToolbarButton asChild onClick={handleClick}>

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/ShowModeMenu/ShowModeMenu.tsx

@@ -1,5 +1,5 @@
 import { toolbarActionLogEvent } from '@/features/gtm/utils'
-import { useCliVersion } from '@/providers'
+import { useVersion } from '@/providers'
 import { type ShowMode, showModeSchema } from '@/schemas/showMode'
 import { updateShowMode, useUserEditingStore } from '@/stores'
 import {
@@ -25,24 +25,24 @@ const OPTION_LIST: { value: ShowMode; label: string }[] = [
 export const ShowModeMenu: FC = () => {
   const { showMode } = useUserEditingStore()
 
-  const { cliVersion } = useCliVersion()
+  const { version } = useVersion()
   const handleChangeValue = useCallback(
     (value: string) => {
       const parsed = safeParse(showModeSchema, value)
 
       if (parsed.success) {
         updateShowMode(parsed.output)
 
-        cliVersion.displayedOn === 'cli' &&
+        version.displayedOn === 'cli' &&
           toolbarActionLogEvent({
             element: 'changeShowMode',
             showMode: value,
-            cliVer: cliVersion.version,
-            appEnv: cliVersion.envName,
+            cliVer: version.version,
+            appEnv: version.envName,
           })
       }
     },
-    [cliVersion],
+    [version],
   )
 
   return (

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/TidyUpButton/TidyUpButton.tsx

@@ -1,5 +1,5 @@
 import { toolbarActionLogEvent } from '@/features/gtm/utils'
-import { useCliVersion } from '@/providers'
+import { useVersion } from '@/providers'
 import { useUserEditingStore } from '@/stores'
 import { IconButton, TidyUpIcon } from '@liam-hq/ui'
 import { ToolbarButton } from '@radix-ui/react-toolbar'
@@ -11,17 +11,17 @@ export const TidyUpButton: FC = () => {
   const { getNodes, getEdges } = useReactFlow()
   const { handleLayout } = useAutoLayout()
   const { showMode } = useUserEditingStore()
-  const { cliVersion } = useCliVersion()
+  const { version } = useVersion()
   const handleClick = useCallback(() => {
-    cliVersion.displayedOn === 'cli' &&
+    version.displayedOn === 'cli' &&
       toolbarActionLogEvent({
         element: 'tidyUp',
         showMode,
-        cliVer: cliVersion.version,
-        appEnv: cliVersion.envName,
+        cliVer: version.version,
+        appEnv: version.envName,
       })
     handleLayout(getNodes(), getEdges())
-  }, [handleLayout, showMode, getNodes, getEdges, cliVersion])
+  }, [handleLayout, showMode, getNodes, getEdges, version])
 
   return (
     <ToolbarButton asChild>