Menu Component and ANIREF Preset Changes (#47)

* feat(menu): add menu component primitives

* feat(menu): add base for custom menu slot recipe

* feat(menu): add base for custom menu component

* fix(menu): appropriately return menu component

* chore(menu): add base for menu stories

* chore(menu): allow for menu item groups in menu component

* chore(menu): temporarily inject button component styles on menu trigger

* feat(menu): update menu stories to use args instead of render function, add controls for trigger variant and size

* feat(drawer): update drawer stories to use args

* feat(modal): update modal stories to use args

* test(menu): add basic unit test for menu component

* chore: set up dark mode thematics

* chore: update drawer and text responsive styles

* chore(button): update base button text color

* chore(card): update base card responsive styles

* chore(text): update text story to use args, place text recipe in dedicated file

* fix(tests): update button unit test to verify correct bg color class

* fix(typescript): specify 'generated/panda' as type root path

* fix(jest): add 'js'/'jsx' patterns to SWC transform

* refactor(menu): update recipe styles

* chore(menu): move menu component stories into appropriate location for storybook

* fix(drawer): move close trigger styles to button

* chore(preset): update semantic token colors, update token colors

* chore(menu): update menu item and item group label styles

* chore(menu): update menu item group label styles

* feat(menu): add submenu support to menu component

* chore(menu): remove unnecessary TODO statements

* refactor(menu): update content styles to include border

* ci(changesets): add changesets for Menu component and preset update

* fix(menu): remove unnecessary TODO comment

* fix(menu): fix SSR issues with Menu component by only rendering when mounted

* chore(hooks): create custom hook directory in lib

* refactor(preset): remove unnecessary gray palette tokens, update button styles

* refactor(menu): add decorator to menu item

* fix(menu): update props for menu items

* chore(preset): update brand colors and semantic tokens accordingly

* fix(deps): update lock file

* build(panda): update config to include mdx files

* build(deps): update dependencies

* chore(button): use config recipe for button component

* fix(button): remove default variants, move primary variant base styles to base

* chore(drawer): update drawer to use config recipe

* fix(button): remove unnecessary className prop extraction

* chore(menu): update menu to use config recipe

* chore(modal): update modal to use config recipe

* chore(card): update card to use config recipe

* chore(text): update text to use config recipe

* chore: rename semantic tokens file

* chore: rename zindex file

* refactor(menu): remove unnecessary 'triggerClassNames' in menu

* chore(changesets): update preset changeset description

---------

Co-authored-by: Brian Cooper <brian@brian-cooper.com>

.changeset/clean-jokes-notice.md

@@ -0,0 +1,5 @@
+---
+"@animareflection/ui": minor
+---
+
+Add `Menu` component

.changeset/hot-rockets-learn.md

@@ -0,0 +1,5 @@
+---
+"@animareflection/ui": patch
+---
+
+Update ANIREF preset colors, recipes, semantic tokens

.storybook/main.ts

@@ -31,6 +31,7 @@ const storybookConfig: StorybookConfig = {
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
+    "storybook-dark-mode",
   ],
   staticDirs: [
     "../public",

.storybook/preview.ts

@@ -8,12 +8,24 @@ import "lib/styles/main.css";
 const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: "^on[A-Z].*" },
+    backgrounds: {
+      default: "dark",
+      values: [
+        { name: "light", value: "#ffffff" },
+        { name: "dark", value: "#161616" },
+      ],
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/,
       },
     },
+    darkMode: {
+      default: true,
+      classTarget: "html",
+      stylePreview: true,
+    },
   },
 };
 

package.json

@@ -57,23 +57,23 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@ark-ui/react": "^0.11.0",
+    "@ark-ui/react": "^0.13.1",
     "@changesets/changelog-github": "^0.4.8",
     "@changesets/cli": "^2.26.2",
     "@jest/globals": "^29.6.2",
-    "@pandacss/dev": "^0.10.0",
-    "@storybook/addon-a11y": "^7.2.3",
-    "@storybook/addon-essentials": "^7.2.3",
-    "@storybook/addon-interactions": "^7.2.3",
-    "@storybook/addon-links": "^7.2.3",
-    "@storybook/blocks": "^7.2.3",
-    "@storybook/builder-vite": "^7.2.3",
-    "@storybook/manager-api": "^7.2.3",
-    "@storybook/react": "^7.2.3",
-    "@storybook/react-vite": "^7.2.3",
+    "@pandacss/dev": "^0.11.1",
+    "@storybook/addon-a11y": "^7.3.1",
+    "@storybook/addon-essentials": "^7.3.1",
+    "@storybook/addon-interactions": "^7.3.1",
+    "@storybook/addon-links": "^7.3.1",
+    "@storybook/blocks": "^7.3.1",
+    "@storybook/builder-vite": "^7.3.1",
+    "@storybook/manager-api": "^7.3.1",
+    "@storybook/react": "^7.3.1",
+    "@storybook/react-vite": "^7.3.1",
     "@storybook/storybook-deployer": "^2.8.16",
     "@storybook/testing-library": "^0.2.0",
-    "@storybook/theming": "^7.2.3",
+    "@storybook/theming": "^7.3.1",
     "@swc/core": "^1.3.74",
     "@swc/jest": "^0.2.27",
     "@testing-library/dom": "^9.3.1",
@@ -109,7 +109,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.10.1",
-    "storybook": "^7.2.3",
+    "storybook": "^7.3.1",
     "storybook-dark-mode": "^3.0.1",
     "ts-node": "^10.9.1",
     "tsup": "^7.2.0",

panda.config.ts

@@ -9,7 +9,7 @@ import anirefPreset from "lib/panda/aniref.preset";
 const pandaConfig: ReturnType<typeof defineConfig> = defineConfig({
   // enable CSS reset
   preflight: true,
-  include: ["src/**/*.{ts,tsx}"],
+  include: ["src/**/*.{ts,tsx,mdx}"],
   outdir: "src/generated/panda",
   presets: ["@pandacss/dev/presets", anirefPreset],
   // set JSX factory name

src/components/client/core/Button/Button.recipe.ts

@@ -1,54 +1,78 @@
-import { cva } from "generated/panda/css";
+import { defineRecipe } from "@pandacss/dev";
 
-export const recipe = cva({
+export const recipe = defineRecipe({
+  className: "button",
+  description: "The styles for the Button component",
   base: {
+    color: "accent.fg",
+    bgColor: "accent.default",
     cursor: "pointer",
-    color: "white",
-    bgColor: "brand.primary.500",
     fontWeight: "bold",
-    px: 3,
-    py: 2,
+    p: 3,
     borderRadius: "md",
-    _hover: { bgColor: "brand.primary.200" },
-  },
-  defaultVariants: {
-    variant: "primary",
+    _focus: { outline: "none" },
+    _hover: {
+      bgColor: "accent.emphasized",
+    },
+    _disabled: {
+      bgColor: "bg.disabled",
+      cursor: "not-allowed",
+      _hover: {
+        bgColor: "bg.disabled",
+      },
+    },
   },
   variants: {
     variant: {
-      primary: {
-        color: "white",
-        bgColor: "brand.primary.500",
-      },
       secondary: {
-        color: "brand.primary.500",
-        bgColor: "transparent",
-        border: "1px solid",
-        borderColor: "brand.primary.500",
+        borderWidth: "1px",
+        borderColor: "border.emphasized",
+        bgColor: "bg.default",
+        color: "fg.emphasized",
         _hover: {
-          bgColor: "transparent",
-          borderColor: "brand.primary.200",
-          color: "brand.primary.200",
+          background: "bg.subtle",
+        },
+        _disabled: {
+          borderColor: "border.disabled",
+          color: "fg.disabled",
+          cursor: "not-allowed",
+          _hover: {
+            background: "transparent",
+            borderColor: "border.disabled",
+            color: "fg.disabled",
+          },
         },
       },
       ghost: {
         bgColor: "transparent",
-        color: "brand.primary.500",
+        color: "fg.emphasized",
         _hover: {
-          bgColor: "transparent",
-          color: "brand.primary.200",
-        },
-        _active: {
-          bgColor: "transparent",
-          color: "brand.primary.200",
+          color: "fg.default",
+          background: "accent.subtle",
         },
-        _focus: {
-          bgColor: "transparent",
-          color: "brand.primary.200",
+        _disabled: {
+          color: "fg.disabled",
+          cursor: "not-allowed",
+          _hover: {
+            background: "transparent",
+            color: "fg.disabled",
+          },
         },
       },
       round: {
         borderRadius: "full !important",
+        color: "accent.fg",
+        bgColor: "accent.default",
+        _hover: {
+          bgColor: "accent.emphasized",
+        },
+        _disabled: {
+          bgColor: "bg.disabled",
+          cursor: "not-allowed",
+          _hover: {
+            bgColor: "bg.disabled",
+          },
+        },
       },
     },
   },

src/components/client/core/Button/Button.stories.tsx

@@ -4,10 +4,20 @@ import type { Meta, StoryObj } from "@storybook/react";
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-  args: {
-    children: "Click me 🏝️",
-  },
+export const Primary: Story = {
+  render: () => <Button>Click me 🏝️</Button>,
+};
+
+export const Secondary: Story = {
+  render: () => <Button variant="secondary">Click me 🏝️</Button>,
+};
+
+export const Ghost: Story = {
+  render: () => <Button variant="ghost">Click me 🏝️</Button>,
+};
+
+export const Round: Story = {
+  render: () => <Button variant="round">Click me 🏝️</Button>,
 };
 
 // TODO remove explicit type annotation, required due to `pnpm` bug (and therefore Yarn with `pnpm` linker); https://github.com/microsoft/TypeScript/issues/47663
@@ -16,12 +26,6 @@ const meta: Meta<typeof Button> = {
   component: Button,
   tags: ["autodocs"],
   decorators: [(Story) => <Story />],
-  argTypes: {
-    variant: {
-      options: ["primary", "secondary", "ghost", "round"],
-      control: { type: "radio" },
-    },
-  },
 } satisfies Meta<typeof Button>;
 
 export default meta;

src/components/client/core/Button/Button.test.tsx

@@ -9,7 +9,7 @@ describe("Button", () => {
 
     expect(screen.getByText(/click me!/i)).toHaveClass(
       "text_brand.primary.900",
-      "bg_brand.primary.500",
+      "button",
     );
   });
 });

src/components/client/core/Button/Button.tsx

@@ -1,24 +1,22 @@
 import { Pressable } from "@ark-ui/react";
 
-import { recipe as button } from "./Button.recipe";
-import { cx } from "generated/panda/css";
 import { panda } from "generated/panda/jsx";
+import { button } from "generated/panda/recipes";
 
+import type { ButtonVariantProps } from "generated/panda/recipes";
 import type { PandaComponent } from "generated/panda/types/jsx";
 import type { ComponentProps } from "react";
 
-export interface Props extends ComponentProps<typeof PandaButton> {
-  variant?: "primary" | "secondary" | "ghost" | "round";
-}
+export type Props = ComponentProps<typeof PandaButton> & ButtonVariantProps;
 
 const PandaButton: PandaComponent<typeof Pressable> = panda(Pressable, button);
 
 /**
  * Core UI button.
  */
-const Button = ({ variant, children, className, ...rest }: Props) => {
+const Button = ({ variant, children, ...rest }: Props) => {
   return (
-    <PandaButton className={cx(button({ variant }), className)} {...rest}>
+    <PandaButton className={button({ variant })} {...rest}>
       {children}
     </PandaButton>
   );

src/components/client/core/Drawer/Drawer.recipe.ts

@@ -1,6 +1,8 @@
-import { sva } from "generated/panda/css";
+import { defineSlotRecipe } from "@pandacss/dev";
 
-export const recipe = sva({
+export const recipe = defineSlotRecipe({
+  className: "drawer",
+  description: "The styles for the Drawer component",
   slots: [
     "root",
     "backdrop",
@@ -33,12 +35,13 @@ export const recipe = sva({
       display: "flex",
       top: 0,
       bottom: 0,
+      right: 0,
       justifyContent: "center",
       position: "fixed",
       zIndex: "modal",
     },
     content: {
-      background: "white",
+      background: "bg.default",
       boxShadow: "lg",
       height: "full",
       width: { base: "full", sm: "sm" },
@@ -49,24 +52,29 @@ export const recipe = sva({
         md: 6,
       },
       py: 6,
+      _open: {
+        animation: { base: "drawer-in-bottom", sm: "drawer-in-right" },
+      },
+      _closed: {
+        animation: { base: "drawer-out-bottom", sm: "drawer-out-right" },
+      },
     },
     title: {
       fontWeight: "bold",
       textStyle: "xl",
+      color: "fg.default",
     },
     description: {
-      color: "gray.400",
+      color: "fg.muted",
       textStyle: "sm",
     },
   },
-  defaultVariants: {
-    placement: "right",
-  },
   variants: {
     placement: {
       left: {
         container: {
           left: 0,
+          right: "auto",
         },
         content: {
           _open: {
@@ -77,19 +85,6 @@ export const recipe = sva({
           },
         },
       },
-      right: {
-        container: {
-          right: 0,
-        },
-        content: {
-          _open: {
-            animation: { base: "drawer-in-bottom", sm: "drawer-in-right" },
-          },
-          _closed: {
-            animation: { base: "drawer-out-bottom", sm: "drawer-out-right" },
-          },
-        },
-      },
     },
   },
 });

src/components/client/core/Drawer/Drawer.stories.tsx

@@ -5,9 +5,27 @@ import type { Meta, StoryObj } from "@storybook/react";
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
+export const RightPlacement: Story = {
   render: () => (
     <Drawer
+      placement="left"
+      trigger={<Button>Open Drawer</Button>}
+      title="Drawer Title"
+      description="Drawer Description"
+    >
+      <Text mt={2}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam.
+      </Text>
+    </Drawer>
+  ),
+};
+
+export const LeftPlacement: Story = {
+  render: () => (
+    <Drawer
+      placement="left"
       trigger={<Button>Open Drawer</Button>}
       title="Drawer Title"
       description="Drawer Description"