feat: Implement Menubar & Toast component with storybook

apps/workshop/src/stories/Menubar/Menubar.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Menubar } from '@jung/design-system';
+
+const meta: Meta<typeof Menubar> = {
+	title: 'Components/Menubar',
+	component: Menubar,
+	tags: ['autodocs'],
+	parameters: {
+		layout: 'centered',
+	},
+} satisfies Meta<typeof Menubar>;
+
+export default meta;
+type Story = StoryObj<typeof Menubar>;
+
+export const Default: Story = {
+	render: () => (
+		<Menubar>
+			<Menubar.Menu>
+				<Menubar.Trigger>File</Menubar.Trigger>
+				<Menubar.Content>
+					<Menubar.Item>New Tab</Menubar.Item>
+					<Menubar.Item>New Window</Menubar.Item>
+					<Menubar.Separator />
+					<Menubar.Item>Share</Menubar.Item>
+				</Menubar.Content>
+			</Menubar.Menu>
+			<Menubar.Menu>
+				<Menubar.Trigger>Edit</Menubar.Trigger>
+				<Menubar.Content>
+					<Menubar.Item>Undo</Menubar.Item>
+					<Menubar.Item>Redo</Menubar.Item>
+				</Menubar.Content>
+			</Menubar.Menu>
+		</Menubar>
+	),
+};
+
+export const Disabled: Story = {
+	render: () => (
+		<Menubar>
+			<Menubar.Menu>
+				<Menubar.Trigger>File</Menubar.Trigger>
+				<Menubar.Content>
+					<Menubar.Item>New Tab</Menubar.Item>
+					<Menubar.Item>New Window</Menubar.Item>
+					<Menubar.Item disabled>New Incongnito Window</Menubar.Item>
+					<Menubar.Separator />
+					<Menubar.Item>hihi</Menubar.Item>
+				</Menubar.Content>
+			</Menubar.Menu>
+			<Menubar.Menu>
+				<Menubar.Trigger>Edit</Menubar.Trigger>
+				<Menubar.Content>
+					<Menubar.Item>Undo</Menubar.Item>
+					<Menubar.Item>Redo</Menubar.Item>
+				</Menubar.Content>
+			</Menubar.Menu>
+		</Menubar>
+	),
+};

apps/workshop/src/stories/Toast/Toast.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import {
+	Button,
+	Toast,
+	ToastContainer,
+	ToastProvider,
+	useToast,
+} from '@jung/design-system';
+
+const meta = {
+	title: 'COMPONENTS/Toast',
+	component: Toast,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: ['autodocs'],
+} satisfies Meta<typeof Toast>;
+
+export default meta;
+type Story = StoryObj<typeof Toast>;
+
+const Template = () => {
+	const showToast = useToast();
+	return (
+		<Button
+			variant='secondary'
+			size='sm'
+			onClick={() => showToast('Toast Message')}
+		>
+			Show Toast
+		</Button>
+	);
+};
+
+export const Default: Story = {
+	render: () => (
+		<ToastProvider>
+			<ToastContainer />
+			<Template />
+		</ToastProvider>
+	),
+};

package.json

@@ -26,18 +26,18 @@
 	},
 	"devDependencies": {
 		"@biomejs/biome": "1.6.1",
-		"@playwright/test": "^1.42.1",
+		"@jung/configs": "workspace:*",
 		"@jung/typescript-config": "workspace:*",
-		"@testing-library/jest-dom": "^6.4.2",
-		"@testing-library/react": "^14.2.1",
+		"@playwright/test": "^1.44.1",
+		"@testing-library/jest-dom": "^6.4.6",
+		"@testing-library/react": "^14.3.1",
 		"@testing-library/user-event": "^14.5.2",
-		"@types/jest": "^29.5.2",
-		"@types/node": "^20.11.27",
-		"@jung/configs": "workspace:*",
+		"@types/jest": "^29.5.12",
+		"@types/node": "^20.14.2",
 		"husky": "^9.0.11",
 		"jest": "^29.7.0",
-		"lint-staged": "^15.2.2",
-		"prettier": "^3.2.5",
+		"lint-staged": "^15.2.7",
+		"prettier": "^3.3.2",
 		"turbo": "latest"
 	},
 	"packageManager": "pnpm@8.9.0",

packages/design-system/components/Menubar/Menubar.css.ts

@@ -0,0 +1,71 @@
+import { createVar } from '@vanilla-extract/css';
+import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+import { sprinkles } from '../../styles';
+
+export const menubar = style([
+	{
+		border: '1px solid #ccc',
+	},
+	sprinkles({
+		width: 'fit',
+		display: 'flex',
+		columnGap: '1',
+		alignItems: 'center',
+		borderRadius: 'md',
+		padding: '1',
+	}),
+]);
+
+export const trigger = recipe({
+	base: sprinkles({
+		paddingX: '2',
+		paddingY: '1',
+	}),
+	variants: {
+		isActive: {
+			true: sprinkles({ background: 'gray100' }),
+			false: sprinkles({ background: 'transparent' }),
+		},
+	},
+});
+
+export const topVar = createVar();
+export const leftVar = createVar();
+
+export const content = style([
+	{
+		border: '1px solid #ccc',
+		top: topVar,
+		left: leftVar,
+	},
+	sprinkles({
+		display: 'flex',
+		flexDirection: 'column',
+		borderRadius: 'md',
+		position: 'absolute',
+		zIndex: '100',
+		paddingY: '0.5',
+	}),
+]);
+
+// export const item = sprinkles({
+// 	background: {
+// 		hover: 'gray100',
+// 	},
+
+// 	paddingX: '1',
+// });
+
+export const item = recipe({
+	base: sprinkles({
+		paddingX: '1',
+		paddingY: '2',
+	}),
+	variants: {
+		disabled: {
+			true: sprinkles({ color: 'gray200' }),
+			false: sprinkles({ background: { hover: 'gray100' } }),
+		},
+	},
+});

packages/design-system/components/Menubar/Menubar.tsx

@@ -0,0 +1,62 @@
+import { useOutsideClick } from '@jung/shared/hooks';
+import {
+	type HTMLAttributes,
+	forwardRef,
+	useCallback,
+	useRef,
+	useState,
+} from 'react';
+import type { OmitAtomProps } from '../../types/atoms';
+import { Box } from '../Box';
+import * as styles from './Menubar.css';
+import { MenubarContext } from './context/MenubarContext';
+
+export interface MenubarProps
+	extends HTMLAttributes<HTMLDivElement>,
+		OmitAtomProps {
+	defaultValue?: string;
+	onValueChange?: (value: string) => void;
+}
+
+export const Menubar = forwardRef<HTMLDivElement, MenubarProps>(
+	({ children, defaultValue, onValueChange, ...restProps }, ref) => {
+		const [isOpen, setIsOpen] = useState(false);
+		const [selectedMenu, setSelectedMenu] = useState(defaultValue);
+		const onCloseMenu = useCallback(
+			() => setSelectedMenu(''),
+			[setSelectedMenu],
+		);
+
+		const onSelectedMenu = useCallback(
+			(menu: string) => setSelectedMenu(menu),
+			[setSelectedMenu],
+		);
+
+		const contextValue = {
+			selectedMenu,
+			isOpen,
+			setIsOpen,
+			onOpenMenu: () => setIsOpen(true),
+			onSelectedMenu,
+			onCloseMenu,
+		};
+
+		const menubarRef = useRef<HTMLDivElement>(null);
+		useOutsideClick(menubarRef, () => onCloseMenu());
+
+		return (
+			<MenubarContext.Provider value={contextValue}>
+				<Box ref={menubarRef}>
+					<Box
+						className={styles.menubar}
+						ref={ref}
+						{...restProps}
+						role='menubar'
+					>
+						{children}
+					</Box>
+				</Box>
+			</MenubarContext.Provider>
+		);
+	},
+);

packages/design-system/components/Menubar/MenubarContent.tsx

@@ -0,0 +1,61 @@
+import { usePortal } from '@jung/shared/hooks';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import {
+	type HTMLAttributes,
+	forwardRef,
+	useLayoutEffect,
+	useState,
+} from 'react';
+import { createPortal } from 'react-dom';
+import type { OmitAtomProps } from '../../types/atoms';
+import { Box } from '../Box';
+import * as styles from './Menubar.css';
+import { useMenubarContext } from './context/MenubarContext';
+import { useMenubarMenuContext } from './context/MenubarMenuContext';
+
+export interface MenubarContent
+	extends HTMLAttributes<HTMLDivElement>,
+		OmitAtomProps {
+	value?: string;
+}
+
+export const MenubarContent = forwardRef<HTMLDivElement, MenubarContent>(
+	({ children, value, ...restProps }, ref) => {
+		const { isOpen } = useMenubarContext();
+		const { isSelected, contentId, triggerId, triggerRef } =
+			useMenubarMenuContext();
+		const portalNode = usePortal('menubar-portal');
+		const [position, setPosition] = useState({ top: 0, left: 0 });
+
+		useLayoutEffect(() => {
+			if (triggerRef.current) {
+				const rect = triggerRef.current.getBoundingClientRect();
+				setPosition({
+					top: rect.bottom + 8,
+					left: rect.left,
+				});
+			}
+		}, [triggerRef]);
+
+		if (!isOpen || !isSelected || !portalNode) return null;
+
+		const inlineVars = assignInlineVars({
+			[styles.topVar]: `${position.top}px`,
+			[styles.leftVar]: `${position.left}px`,
+		});
+
+		return createPortal(
+			<Box
+				style={inlineVars}
+				id={contentId}
+				aria-labelledby={triggerId}
+				className={styles.content}
+				ref={ref}
+				{...restProps}
+			>
+				{children}
+			</Box>,
+			portalNode,
+		);
+	},
+);

packages/design-system/components/Menubar/MenubarItem.tsx

@@ -0,0 +1,29 @@
+import { type HTMLAttributes, forwardRef } from 'react';
+import type { OmitAtomProps } from '../../types/atoms';
+import { Box } from '../Box';
+import * as styles from './Menubar.css';
+import { useMenubarContext } from './context/MenubarContext';
+
+export interface MenubarItemProps
+	extends HTMLAttributes<HTMLDivElement>,
+		OmitAtomProps {
+	disabled?: boolean;
+}
+
+export const MenubarItem = forwardRef<HTMLDivElement, MenubarItemProps>(
+	({ children, disabled = false, ...restProps }, ref) => {
+		const { onCloseMenu } = useMenubarContext();
+		return (
+			<Box
+				role='button'
+				aria-disabled={disabled}
+				className={styles.item({ disabled })}
+				onClick={onCloseMenu}
+				ref={ref}
+				{...restProps}
+			>
+				{children}
+			</Box>
+		);
+	},
+);