@menumalsuite/design-system 0.0.2 → 0.0.3

package/app/components/MButton/MButton.mdx

@@ -28,6 +28,38 @@ Core interactive element for actions and navigation.
 
 <Controls />
 
+## Usage
+
+Basic button:
+
+```vue
+<MButton label="Save" primary @click="handleSave" />
+```
+
+Secondary action:
+
+```vue
+<MButton label="Cancel" @click="handleCancel" />
+```
+
+Navigation — pushes route via `useRouter`:
+
+```vue
+<MButton label="Go to dashboard" to="/dashboard" />
+```
+
+API call — fires `$fetch` on click, shows inline loading/ok/error:
+
+```vue
+<MButton label="Submit" apiUrl="/api/submit" primary />
+```
+
+Small in a table row:
+
+```vue
+<MButton label="Edit" size="small" @click="edit(row.id)" />
+```
+
 ## Notes
 
 - `to` triggers internal navigation via `useRouter`

package/app/components/MButton/MButton.stories.ts

@@ -1,14 +1,14 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite';
-import { fn } from 'storybook/test';
-import MButton from './MButton.vue';
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { fn } from "storybook/test";
+import MButton from "./MButton.vue";
 
 const meta = {
-  title: 'Components/MButton',
+  title: "Components/MButton",
   component: MButton,
-  tags: ['autodocs'],
+  // tags: ['autodocs'],
   argTypes: {
-    size: { control: 'select', options: ['small', 'medium', 'large'] },
-    backgroundColor: { control: 'color' },
+    size: { control: "select", options: ["small", "medium", "large"] },
+    backgroundColor: { control: "color" },
   },
   args: {
     primary: false,
@@ -20,17 +20,17 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {
-  args: { primary: true, label: 'Button' },
+  args: { primary: true, label: "Button" },
 };
 
 export const Secondary: Story = {
-  args: { primary: false, label: 'Button' },
+  args: { primary: false, label: "Button" },
 };
 
 export const Large: Story = {
-  args: { label: 'Button', size: 'large' },
+  args: { label: "Button", size: "large" },
 };
 
 export const Small: Story = {
-  args: { label: 'Button', size: 'small' },
+  args: { label: "Button", size: "small" },
 };

package/app/components/MHeader/MHeader.mdx

@@ -20,8 +20,40 @@ Global layout component — place in `app.vue` or the main layout. One instance
 
 <Controls />
 
+## Usage
+
+In `app.vue` or a layout file:
+
+```vue
+<template>
+  <MHeader
+    :user="authUser"
+    @login="openLoginModal"
+    @logout="signOut"
+    @create-account="openSignupModal"
+  />
+  <slot />
+</template>
+
+<script setup>
+const authUser = useCurrentUser()
+</script>
+```
+
+Logged-out state:
+
+```vue
+<MHeader :user="null" @login="handleLogin" @create-account="handleSignup" />
+```
+
+Logged-in state:
+
+```vue
+<MHeader :user="{ name: 'Jane Doe' }" @logout="handleLogout" />
+```
+
 ## Notes
 
 - Handles three events internally: `login`, `logout`, `createAccount`
 - The `user` prop is `null` when unauthenticated
-- Internal buttons use `<Button>` from the design system
+- Internal buttons use `<MButton>` from the design system

package/app/components/MHeader/MHeader.stories.ts

@@ -1,24 +1,24 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite';
-import { fn } from 'storybook/test';
-import MHeader from './MHeader.vue';
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { fn } from "storybook/test";
+import MHeader from "./MHeader.vue";
 
 const meta = {
-  title: 'Components/MHeader',
+  title: "Components/MHeader",
   component: MHeader,
-  parameters: { layout: 'fullscreen' },
+  parameters: { layout: "fullscreen" },
   args: {
     onLogin: fn(),
     onLogout: fn(),
     onCreateAccount: fn(),
   },
-  tags: ['autodocs'],
+  // tags: ['autodocs'],
 } satisfies Meta<typeof MHeader>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const LoggedIn: Story = {
-  args: { user: { name: 'Jane Doe' } },
+  args: { user: { name: "Jane Doe" } },
 };
 
 export const LoggedOut: Story = {

package/app/components/MPage/MPage.mdx

@@ -20,8 +20,37 @@ Starting point for new pages — includes `<Header>` and manages authentication
 
 <Controls />
 
+## Usage
+
+Basic page:
+
+```vue
+<MPage />
+```
+
+Extended with custom content via default slot:
+
+```vue
+<MPage>
+  <section>
+    <h2>Welcome</h2>
+    <p>Your dashboard content here.</p>
+  </section>
+</MPage>
+```
+
+Inside a Nuxt layout (`layouts/default.vue`):
+
+```vue
+<template>
+  <MPage>
+    <slot />
+  </MPage>
+</template>
+```
+
 ## Notes
 
 - Manages `user` state internally — no need to pass it from outside
-- Composes `<Header>` + `<Button>` from the design system
+- Composes `<MHeader>` + `<MButton>` from the design system
 - Extend with slots for page-specific content

package/app/components/MPage/MPage.stories.ts

@@ -1,12 +1,12 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite';
-import { expect, userEvent, within } from 'storybook/test';
-import MPage from './MPage.vue';
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { expect, userEvent, within } from "storybook/test";
+import MPage from "./MPage.vue";
 
 const meta = {
-  title: 'Components/MPage',
+  title: "Components/MPage",
   component: MPage,
-  parameters: { layout: 'fullscreen' },
-  tags: ['autodocs'],
+  parameters: { layout: "fullscreen" },
+  // tags: ['autodocs'],
 } satisfies Meta<typeof MPage>;
 
 export default meta;
@@ -15,12 +15,12 @@ type Story = StoryObj<typeof meta>;
 export const LoggedIn: Story = {
   play: async ({ canvasElement }: any) => {
     const canvas = within(canvasElement);
-    const loginButton = canvas.getByRole('button', { name: /Log in/i });
+    const loginButton = canvas.getByRole("button", { name: /Log in/i });
     await expect(loginButton).toBeInTheDocument();
     await userEvent.click(loginButton);
     await expect(loginButton).not.toBeInTheDocument();
 
-    const logoutButton = canvas.getByRole('button', { name: /Log out/i });
+    const logoutButton = canvas.getByRole("button", { name: /Log out/i });
     await expect(logoutButton).toBeInTheDocument();
   },
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@menumalsuite/design-system",
   "type": "module",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "main": "./nuxt.config.ts",
   "exports": {
     ".": "./nuxt.config.ts"