Skip to content

Commit

Permalink
feat: Added new Theme Button
Browse files Browse the repository at this point in the history
  • Loading branch information
eric-crowell committed Jun 17, 2024
1 parent a66487d commit fac43d1
Show file tree
Hide file tree
Showing 10 changed files with 86 additions and 26 deletions.
1 change: 1 addition & 0 deletions packages/ui/src/components.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,11 @@ export interface NavigationProps {
* The logo image class name
*/
logo?: string;

/**
* The popover content container class name
*/
popover?: string;
}
}

Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -24,6 +24,7 @@ export function NavigationPart_Actions() {
variant="light"
aria-label={social.type}
href={social.url}
isExternal={true}
isIconOnly
>
<Icon className="size-5 dark:fill-white" />
Expand All @@ -39,12 +40,12 @@ export function NavigationPart_Actions() {
<section className="flex h-full flex-row items-center justify-center gap-2 [&>div]:flex [&>div]:items-center">
{search ? (
<div>
<SearchButton />
<SearchButton size="sm" variant="flat" />
</div>
) : null}
{modeToggle ? (
<div>
<ThemeSwitch />
<ThemeButton size="sm" variant="flat" />
</div>
) : null}
</section>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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`,
}}
/>
Expand All @@ -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 (
<Popover
placement="bottom"
Expand All @@ -75,11 +76,15 @@ function LinkTrunk({ link, colors }: { link: LinkType, colors?: string }) {
</Button>
</PopoverTrigger>
</NavbarMenuItem>
<PopoverContent className={clsx(colors, 'min-w-64 items-start p-4')}>
<Button as={Link} href={link.url} className="w-full justify-start rounded bg-transparent px-4 py-2 text-lg font-bold text-inherit hover:bg-black/10 hover:underline dark:hover:bg-white/10">
<PopoverContent className={clsx(colors, 'min-w-64 items-start p-4', className)}>
<Button
as={Link}
href={link.url}
className="w-full justify-start rounded bg-transparent px-4 py-2 text-xl font-bold text-inherit hover:bg-black/10 hover:underline dark:hover:bg-white/10"
>
{link.title}
</Button>
<Divider className="my-1" />
<Divider className="my-2" />
<LinkBranch links={link.links ?? []} level={1} />
</PopoverContent>
</Popover>
Expand All @@ -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 ? (
<LinkLeaf key={link.title} link={link} />
) : (
<LinkTrunk key={link.title} link={link} colors={colors[0]} />
<LinkTrunk key={link.title} link={link} colors={colors[0]} className={classNames?.popover} />
)) : (
<NavbarMenuItem>
&nbsp;
Expand Down
17 changes: 5 additions & 12 deletions packages/ui/src/components/SearchButton/SearchButton.tsx
Original file line number Diff line number Diff line change
@@ -1,46 +1,39 @@
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';
}

/**
* Navigation Search component
*/
export function SearchButton({
action = search,
size = 'md',
...props
}: SearchButtonProps) {

const { isOpen, onOpen, onOpenChange } = useDisclosure();

return (<>
<Button isIconOnly onPress={onOpen} size="sm" aria-label="Search website" variant="faded">
<Button isIconOnly onPress={onOpen} aria-label="Search website" {...props}>
<MagnifyingGlassIcon className="size-5" />
</Button>
<Modal
isOpen={isOpen}
onOpenChange={onOpenChange}
title="Search"
size={size}
size="lg"
hideCloseButton
>
<ModalContent>
Expand Down
14 changes: 14 additions & 0 deletions packages/ui/src/components/ThemeButton/ThemeButton.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import type { Meta, StoryObj } from '@storybook/react';

import { ThemeButton } from './ThemeButton';

const meta = {
component: ThemeButton,
tags: [ 'autodocs' ]
} satisfies Meta<typeof ThemeButton>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {};
41 changes: 41 additions & 0 deletions packages/ui/src/components/ThemeButton/ThemeButton.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<Button
onClick={modeToggle}
startContent={mode === 'dark' ? <MoonIcon className="size-2/3" /> : <SunIcon className="size-2/3" />}
isIconOnly={!children}
aria-label="Toggle theme"
{...props}
>
{children}
</Button>
);
}
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type { Meta, StoryObj } from '@storybook/react';

import ThemeSwitch from './ThemeSwitch';
import { ThemeSwitch } from './ThemeSwitch';

const meta = {
component: ThemeSwitch,
Expand Down
2 changes: 0 additions & 2 deletions packages/ui/src/components/ThemeSwitch/ThemeSwitch.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,5 +37,3 @@ export function ThemeSwitch({
</Switch>
);
}

export default ThemeSwitch;
4 changes: 3 additions & 1 deletion packages/ui/src/provider.tsx
Original file line number Diff line number Diff line change
@@ -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<NextUIProviderPropsOriginal, 'children'>;

export interface DoobUiProviderProps {
/**
* Set the image component to utilize for optimization
Expand Down

0 comments on commit fac43d1

Please sign in to comment.