diff --git a/packages/ui/src/components.ts b/packages/ui/src/components.ts index 3bf9f62..1c245d7 100644 --- a/packages/ui/src/components.ts +++ b/packages/ui/src/components.ts @@ -6,3 +6,4 @@ export { SearchButton } from './components/SearchButton/SearchButton'; export { SearchForm } from './components/SearchForm/SearchForm'; export { SearchInput } from './components/SearchInput/SearchInput'; export { ThemeSwitch } from './components/ThemeSwitch/ThemeSwitch'; +export { ThemeButton } from './components/ThemeButton/ThemeButton'; diff --git a/packages/ui/src/components/Navigation/data/NavigationContext.ts b/packages/ui/src/components/Navigation/data/NavigationContext.ts index 16cebe0..ec50322 100644 --- a/packages/ui/src/components/Navigation/data/NavigationContext.ts +++ b/packages/ui/src/components/Navigation/data/NavigationContext.ts @@ -55,6 +55,11 @@ export interface NavigationProps { * The logo image class name */ logo?: string; + + /** + * The popover content container class name + */ + popover?: string; } } diff --git a/packages/ui/src/components/Navigation/parts/NavigationPart_Actions.tsx b/packages/ui/src/components/Navigation/parts/NavigationPart_Actions.tsx index a255965..5c261e3 100644 --- a/packages/ui/src/components/Navigation/parts/NavigationPart_Actions.tsx +++ b/packages/ui/src/components/Navigation/parts/NavigationPart_Actions.tsx @@ -1,4 +1,4 @@ -import { ThemeSwitch, SearchButton } from '@do-ob/ui/components'; +import { ThemeButton, SearchButton } from '@do-ob/ui/components'; import { SocialIcons } from '@do-ob/ui/icons'; import { Link, Button, Divider } from '@nextui-org/react'; import { NavigationContext } from '../data/NavigationContext'; @@ -24,6 +24,7 @@ export function NavigationPart_Actions() { variant="light" aria-label={social.type} href={social.url} + isExternal={true} isIconOnly > @@ -39,12 +40,12 @@ export function NavigationPart_Actions() {
{search ? (
- +
) : null} {modeToggle ? (
- +
) : null}
diff --git a/packages/ui/src/components/Navigation/parts/NavigationPart_Links.tsx b/packages/ui/src/components/Navigation/parts/NavigationPart_Links.tsx index 84a35e0..a79e4e6 100644 --- a/packages/ui/src/components/Navigation/parts/NavigationPart_Links.tsx +++ b/packages/ui/src/components/Navigation/parts/NavigationPart_Links.tsx @@ -37,7 +37,7 @@ function LinkBranch({ links, level }: { links: LinkType[], level: number }) { orientation="vertical" className="absolute top-0 h-full" style={{ - display: level === 1 ? 'none' : 'block', + display: level <= 2 ? 'none' : 'block', left: `${pl - 1}rem`, }} /> @@ -59,7 +59,8 @@ function LinkBranch({ links, level }: { links: LinkType[], level: number }) { )); } -function LinkTrunk({ link, colors }: { link: LinkType, colors?: string }) { +function LinkTrunk({ link, colors, className }: { link: LinkType, colors?: string, className?: string }) { + return ( - - - + @@ -91,12 +96,12 @@ function LinkTrunk({ link, colors }: { link: LinkType, colors?: string }) { */ export function NavigationPart_Links() { - const { links = [], colors } = useContext(NavigationContext); + const { links = [], colors, classNames } = useContext(NavigationContext); return links.length ? links.map((link) => !link.links?.length ? ( ) : ( - + )) : (   diff --git a/packages/ui/src/components/SearchButton/SearchButton.tsx b/packages/ui/src/components/SearchButton/SearchButton.tsx index 18871ff..cf22355 100644 --- a/packages/ui/src/components/SearchButton/SearchButton.tsx +++ b/packages/ui/src/components/SearchButton/SearchButton.tsx @@ -1,25 +1,18 @@ import { MagnifyingGlassIcon } from '@heroicons/react/24/solid'; -import { Button, Modal, ModalHeader, ModalBody, useDisclosure, ModalContent } from '@nextui-org/react'; +import { Button, ButtonProps, Modal, ModalHeader, ModalBody, useDisclosure, ModalContent } from '@nextui-org/react'; import { SearchAction, search } from '@do-ob/ui/actions'; import { SearchForm } from '../SearchForm/SearchForm'; /** * Navigation Brand properties */ -export interface SearchButtonProps { +export interface SearchButtonProps extends ButtonProps { /** * The search action * * @default '#' */ action?: SearchAction; - - /** - * The size of the search button. - * - * @default 'md' - */ - size?: 'sm' | 'md' | 'lg'; } /** @@ -27,20 +20,20 @@ export interface SearchButtonProps { */ export function SearchButton({ action = search, - size = 'md', + ...props }: SearchButtonProps) { const { isOpen, onOpen, onOpenChange } = useDisclosure(); return (<> - diff --git a/packages/ui/src/components/ThemeButton/ThemeButton.stories.tsx b/packages/ui/src/components/ThemeButton/ThemeButton.stories.tsx new file mode 100644 index 0000000..6c8444d --- /dev/null +++ b/packages/ui/src/components/ThemeButton/ThemeButton.stories.tsx @@ -0,0 +1,14 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { ThemeButton } from './ThemeButton'; + +const meta = { + component: ThemeButton, + tags: [ 'autodocs' ] +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/packages/ui/src/components/ThemeButton/ThemeButton.tsx b/packages/ui/src/components/ThemeButton/ThemeButton.tsx new file mode 100644 index 0000000..93f0e22 --- /dev/null +++ b/packages/ui/src/components/ThemeButton/ThemeButton.tsx @@ -0,0 +1,41 @@ +'use client'; + +import { useContext } from 'react'; +import { Button, ButtonProps } from '@nextui-org/react'; +import { MoonIcon, SunIcon } from '@heroicons/react/24/solid'; + +import { DoobUiContext } from '@do-ob/ui/context'; + +/** + * Theme switch properties. + */ +export interface ThemeButtonProps extends ButtonProps { + /** + * The theme switch label. + */ + children?: string; +} + +/** + * This button is used to toggle the theme of the application. It toggles between 'light' and 'dark' + * class names that are applied to the html element of the document. + */ +export function ThemeButton({ + children, + ...props +}: ThemeButtonProps) { + + const { mode, modeToggle } = useContext(DoobUiContext); + + return ( + + ); +} diff --git a/packages/ui/src/components/ThemeSwitch/ThemeSwitch.stories.tsx b/packages/ui/src/components/ThemeSwitch/ThemeSwitch.stories.tsx index de85549..bcc6633 100644 --- a/packages/ui/src/components/ThemeSwitch/ThemeSwitch.stories.tsx +++ b/packages/ui/src/components/ThemeSwitch/ThemeSwitch.stories.tsx @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; -import ThemeSwitch from './ThemeSwitch'; +import { ThemeSwitch } from './ThemeSwitch'; const meta = { component: ThemeSwitch, diff --git a/packages/ui/src/components/ThemeSwitch/ThemeSwitch.tsx b/packages/ui/src/components/ThemeSwitch/ThemeSwitch.tsx index ad9a0c7..afd9701 100644 --- a/packages/ui/src/components/ThemeSwitch/ThemeSwitch.tsx +++ b/packages/ui/src/components/ThemeSwitch/ThemeSwitch.tsx @@ -37,5 +37,3 @@ export function ThemeSwitch({ ); } - -export default ThemeSwitch; diff --git a/packages/ui/src/provider.tsx b/packages/ui/src/provider.tsx index 7203d11..672602e 100644 --- a/packages/ui/src/provider.tsx +++ b/packages/ui/src/provider.tsx @@ -1,10 +1,12 @@ 'use client'; /* eslint-disable @typescript-eslint/no-explicit-any */ -import { NextUIProvider, NextUIProviderProps } from '@nextui-org/react'; +import { NextUIProvider, NextUIProviderProps as NextUIProviderPropsOriginal } from '@nextui-org/react'; import { DoobUiContext } from '@do-ob/ui/context'; import type { ThemeMode } from '@do-ob/ui/types'; import { useMode } from '@do-ob/ui/hooks'; +export type NextUIProviderProps = Omit; + export interface DoobUiProviderProps { /** * Set the image component to utilize for optimization