From 2ba4f3536c3afb02b95e9d585ea70d4f3b5d9388 Mon Sep 17 00:00:00 2001 From: "eric.crowell" Date: Thu, 13 Jun 2024 21:58:55 +0200 Subject: [PATCH] feat: Improved navigation --- package.json | 1 + .../ui/src/Navigation/Navigation.stories.tsx | 20 ++++++++++- packages/ui/src/Navigation/Navigation.tsx | 7 +++- .../ui/src/Navigation/NavigationIsland.tsx | 15 ++++----- .../ui/src/Navigation/NavigationStandard.tsx | 3 +- .../Navigation/parts/NavigationPart_Links.tsx | 33 +++++++++++++++++++ packages/ui/src/types.ts | 20 +++++++++++ packages/ui/src/utility.ts | 16 --------- pnpm-lock.yaml | 8 +++++ 9 files changed, 96 insertions(+), 27 deletions(-) create mode 100644 packages/ui/src/Navigation/parts/NavigationPart_Links.tsx diff --git a/package.json b/package.json index ae14d03..d75d7d6 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "author": "", "license": "MIT", "devDependencies": { + "@do-ob/core": "^1.0.0", "@do-ob/eslint-config": "^2.3.0", "@do-ob/ts-config": "^2.0.0", "@do-ob/ui": "workspace:*", diff --git a/packages/ui/src/Navigation/Navigation.stories.tsx b/packages/ui/src/Navigation/Navigation.stories.tsx index 319e456..8ad3d7e 100644 --- a/packages/ui/src/Navigation/Navigation.stories.tsx +++ b/packages/ui/src/Navigation/Navigation.stories.tsx @@ -1,6 +1,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { Navigation } from './Navigation'; +import { Link } from '../types'; const meta = { component: Navigation, @@ -13,15 +14,32 @@ export default meta; type Story = StoryObj; +const links: Link[] = [ + { + title: 'Home', + url: '#', + }, + { + title: 'About', + url: '#about', + }, + { + title: 'Contact', + url: '#contact', + }, +]; + export const Standard: Story = { args: { title: 'Navigation', + links, }, }; export const Island: Story = { args: { title: 'Navigation', - variant: 'island' + variant: 'island', + links, }, }; diff --git a/packages/ui/src/Navigation/Navigation.tsx b/packages/ui/src/Navigation/Navigation.tsx index 272b2ed..8edc383 100644 --- a/packages/ui/src/Navigation/Navigation.tsx +++ b/packages/ui/src/Navigation/Navigation.tsx @@ -1,4 +1,4 @@ -import type { ThemeColor } from '../types'; +import type { Link, ThemeColor } from '../types'; import { NavigationStandard } from './NavigationStandard'; import { NavigationIsland } from './NavigationIsland'; @@ -13,6 +13,11 @@ export interface NavigationProps { * The theme color of the navigation */ color?: ThemeColor; + + /** + * The links of the navigation + */ + links?: Link[]; } export interface NavigationVariantProps extends NavigationProps { diff --git a/packages/ui/src/Navigation/NavigationIsland.tsx b/packages/ui/src/Navigation/NavigationIsland.tsx index f4a38e4..fb11467 100644 --- a/packages/ui/src/Navigation/NavigationIsland.tsx +++ b/packages/ui/src/Navigation/NavigationIsland.tsx @@ -1,11 +1,15 @@ import { Navbar, NavbarContent } from '@nextui-org/react'; -import { twColors, clsx } from '@do-ob/ui/utility'; +import { twColors } from '@do-ob/ui/utility'; +import { clsx } from '@do-ob/core'; + import type { NavigationProps } from './Navigation'; import { NavigationPart_Brand } from './parts/NavigationPart_Brand'; +import { NavigationPart_Links } from './parts/NavigationPart_Links'; export function NavigationIsland({ title, color, + links, }: NavigationProps) { const [ colors ] = twColors(color); @@ -16,13 +20,8 @@ export function NavigationIsland({ -
- +
+
diff --git a/packages/ui/src/Navigation/NavigationStandard.tsx b/packages/ui/src/Navigation/NavigationStandard.tsx index de69716..884c98c 100644 --- a/packages/ui/src/Navigation/NavigationStandard.tsx +++ b/packages/ui/src/Navigation/NavigationStandard.tsx @@ -1,5 +1,6 @@ import { Navbar, NavbarContent } from '@nextui-org/react'; -import { clsx, twColors } from '@do-ob/ui/utility'; +import { twColors } from '@do-ob/ui/utility'; +import { clsx } from '@do-ob/core'; import type { NavigationProps } from './Navigation'; import { NavigationPart_Brand } from './parts/NavigationPart_Brand'; diff --git a/packages/ui/src/Navigation/parts/NavigationPart_Links.tsx b/packages/ui/src/Navigation/parts/NavigationPart_Links.tsx new file mode 100644 index 0000000..1009144 --- /dev/null +++ b/packages/ui/src/Navigation/parts/NavigationPart_Links.tsx @@ -0,0 +1,33 @@ +import { NavbarMenuItem, Link, Button } from '@nextui-org/react'; +import { Link as LinkType } from '@do-ob/ui/types'; + +/** + * Navigation Brand properties + */ +export interface NavigationPart_LinksProps { + /** + * The branding title to display. + */ + links?: LinkType[]; +} + +/** + * Navigation Links component + */ +export function NavigationPart_Links({ + links = [], +}: NavigationPart_LinksProps) { + return links.length ? links.map((link) => ( + + + + )) : ( + +   + + ); +} + +export default NavigationPart_Links; diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts index 1361080..2c90d05 100644 --- a/packages/ui/src/types.ts +++ b/packages/ui/src/types.ts @@ -2,3 +2,23 @@ * Theem colors. */ export type ThemeColor = 'background' | 'foreground' | 'default' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info'; + +/** + * A link to another page. + */ +export interface Link { + /** + * The URL of the link. + */ + url: string; + + /** + * The text title of the link. + */ + title: string; + + /** + * Nested links. + */ + links?: Link[]; +} diff --git a/packages/ui/src/utility.ts b/packages/ui/src/utility.ts index 0111019..45ad4a2 100644 --- a/packages/ui/src/utility.ts +++ b/packages/ui/src/utility.ts @@ -15,19 +15,3 @@ export function twColors(color?: ThemeColor): [full: string, bg: string, text: s return [ `bg-${color} [&>*]:text-${color}-foreground`, `bg-${color}`, `text-${color}-foreground` ]; } } - - -/** - * Constructs class names conditionally. - */ -export function clsx(...args: unknown[]) { - let i=0, tmp, str=''; - const len = args.length; - for (; i < len; i++) { - tmp = args[i]; - if (typeof tmp === 'string') { - str += (str && ' ') + tmp; - } - } - return str; -} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0b127d1..c4b8b23 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,9 @@ importers: .: devDependencies: + '@do-ob/core': + specifier: ^1.0.0 + version: 1.0.0 '@do-ob/eslint-config': specifier: ^2.3.0 version: 2.3.0(eslint@9.4.0)(tailwindcss@3.4.4)(typescript@5.4.5) @@ -781,6 +784,9 @@ packages: resolution: {integrity: sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==} engines: {node: '>=10.0.0'} + '@do-ob/core@1.0.0': + resolution: {integrity: sha512-QO6V4GwZ3AOVp/DEwBz82CpsdCZVgFRfnfms7ZMK07fpUzD/7R39jWkULy5rqGZnxhps11dhKLGbQmI6LX/wlg==} + '@do-ob/eslint-config@2.3.0': resolution: {integrity: sha512-jezw0GnatrViICC8tauRJDAh1qVmwMHL6VTgwJ12HGuYRlwKCRTW0EJuU73IFekR8z7bro0FAaGY9n9MinbJcQ==} engines: {node: '>=20'} @@ -6856,6 +6862,8 @@ snapshots: '@discoveryjs/json-ext@0.5.7': {} + '@do-ob/core@1.0.0': {} + '@do-ob/eslint-config@2.3.0(eslint@9.4.0)(tailwindcss@3.4.4)(typescript@5.4.5)': dependencies: '@eslint/js': 9.4.0