From 343e01d972e41d85b47d19cc0e89f5a155544678 Mon Sep 17 00:00:00 2001 From: hoshinotsuyoshi Date: Thu, 19 Dec 2024 09:01:06 +0900 Subject: [PATCH] :sparkles: New `ReleaseVersion` component into `HelpButton` - Added `ReleaseVersion` component: - Displays the current CLI version, including: - Released version (e.g., `v0.0.11 (2024-12-19)`). - Unreleased version with short Git hash (e.g., `v0.0.11 + 0d6169a (2024-12-19)`). - Fetches version information from the `CliVersionProvider`. - Updated `App.tsx`: - Initialized `cliVersion` using `import.meta.env.VITE_CLI_VERSION_*` environment variables. - Wrapped `ERDRenderer` with `CliVersionProvider` to provide version context globally. --- frontend/.changeset/funny-jokes-add.md | 6 ++++ frontend/packages/cli/src/App.tsx | 22 +++++++++++-- .../AppBar/HelpButton/HelpButton.tsx | 2 ++ .../HelpButton/ReleaseVersion.module.css | 12 +++++++ .../AppBar/HelpButton/ReleaseVersion.tsx | 32 +++++++++++++++++++ frontend/packages/erd-core/src/index.ts | 2 ++ .../packages/erd-core/src/schemas/index.ts | 3 ++ 7 files changed, 77 insertions(+), 2 deletions(-) create mode 100644 frontend/.changeset/funny-jokes-add.md create mode 100644 frontend/packages/erd-core/src/components/ERDRenderer/AppBar/HelpButton/ReleaseVersion.module.css create mode 100644 frontend/packages/erd-core/src/components/ERDRenderer/AppBar/HelpButton/ReleaseVersion.tsx create mode 100644 frontend/packages/erd-core/src/schemas/index.ts diff --git a/frontend/.changeset/funny-jokes-add.md b/frontend/.changeset/funny-jokes-add.md new file mode 100644 index 00000000..3a1ad940 --- /dev/null +++ b/frontend/.changeset/funny-jokes-add.md @@ -0,0 +1,6 @@ +--- +"@liam-hq/erd-core": patch +"@liam-hq/cli": patch +--- + +New `ReleaseVersion` component into `HelpButton` diff --git a/frontend/packages/cli/src/App.tsx b/frontend/packages/cli/src/App.tsx index d1f31861..ed696fd6 100644 --- a/frontend/packages/cli/src/App.tsx +++ b/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 + return ( + + + + ) } export default App diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/AppBar/HelpButton/HelpButton.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/AppBar/HelpButton/HelpButton.tsx index 7cad801e..d4baac28 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/AppBar/HelpButton/HelpButton.tsx +++ b/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((_, ref) => { sideOffset={4} className={styles.menuContent} > + } diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/AppBar/HelpButton/ReleaseVersion.module.css b/frontend/packages/erd-core/src/components/ERDRenderer/AppBar/HelpButton/ReleaseVersion.module.css new file mode 100644 index 00000000..e24891f1 --- /dev/null +++ b/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); +} diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/AppBar/HelpButton/ReleaseVersion.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/AppBar/HelpButton/ReleaseVersion.tsx new file mode 100644 index 00000000..213deae4 --- /dev/null +++ b/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 ( + +
+
+ {`v${cliVersion.version}`} + + {' '} + {cliVersion.isReleasedGitHash || + `+ ${cliVersion.gitHash.slice(0, 7)} `} + + {cliVersion.date.length > 0 && ` (${cliVersion.date})`} +
+
+ + ) +} diff --git a/frontend/packages/erd-core/src/index.ts b/frontend/packages/erd-core/src/index.ts index 384c84dc..1d32115b 100644 --- a/frontend/packages/erd-core/src/index.ts +++ b/frontend/packages/erd-core/src/index.ts @@ -1,2 +1,4 @@ export * from './components' +export * from './providers' +export * from './schemas' export * from './stores' diff --git a/frontend/packages/erd-core/src/schemas/index.ts b/frontend/packages/erd-core/src/schemas/index.ts new file mode 100644 index 00000000..678e9682 --- /dev/null +++ b/frontend/packages/erd-core/src/schemas/index.ts @@ -0,0 +1,3 @@ +export * from './cliVersion' +export * from './queryParam' +export * from './showMode'