@menumalsuite/design-system 0.0.1 → 0.0.3

package/app/components/MButton/MButton.mdx

@@ -0,0 +1,67 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as ButtonStories from './MButton.stories';
+
+<Meta of={ButtonStories} />
+
+# Button
+
+Core interactive element for actions and navigation.
+
+## When to use
+
+- **Primary** — main page action, one per screen
+- **Secondary** — secondary, alternative or less urgent actions
+- **Large** — prominent CTAs, hero sections
+- **Small** — toolbars, tables, compact spaces
+
+## Variants
+
+<Canvas of={ButtonStories.Primary} />
+<Canvas of={ButtonStories.Secondary} />
+
+## Sizes
+
+<Canvas of={ButtonStories.Large} />
+<Canvas of={ButtonStories.Small} />
+
+## Props
+
+<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`
+- `apiUrl` fires a `$fetch` on click and displays loading/ok/error state
+- `backgroundColor` overrides the theme color — use with caution

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

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

package/app/components/MHeader/MHeader.mdx

@@ -0,0 +1,59 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as HeaderStories from './MHeader.stories';
+
+<Meta of={HeaderStories} />
+
+# Header
+
+Main navigation bar of the application.
+
+## When to use
+
+Global layout component — place in `app.vue` or the main layout. One instance per page.
+
+## Variants
+
+<Canvas of={HeaderStories.LoggedIn} />
+<Canvas of={HeaderStories.LoggedOut} />
+
+## Props
+
+<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 `<MButton>` from the design system

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

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

package/app/components/MPage/MPage.mdx

@@ -0,0 +1,56 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as PageStories from './MPage.stories';
+
+<Meta of={PageStories} />
+
+# Page
+
+Base page template with header and main content.
+
+## When to use
+
+Starting point for new pages — includes `<Header>` and manages authentication state internally.
+
+## Variants
+
+<Canvas of={PageStories.LoggedOut} />
+<Canvas of={PageStories.LoggedIn} />
+
+## Props
+
+<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 `<MHeader>` + `<MButton>` from the design system
+- Extend with slots for page-specific content

package/app/components/{Page.stories.ts → MPage/MPage.stories.ts}

@@ -1,13 +1,13 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite';
-import { expect, userEvent, within } from 'storybook/test';
-import Page from './Page.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/Page',
-  component: Page,
-  parameters: { layout: 'fullscreen' },
-  tags: ['autodocs'],
-} satisfies Meta<typeof Page>;
+  title: "Components/MPage",
+  component: MPage,
+  parameters: { layout: "fullscreen" },
+  // tags: ['autodocs'],
+} satisfies Meta<typeof MPage>;
 
 export default meta;
 type Story = StoryObj<typeof 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/nuxt.config.ts

@@ -1,7 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  components: [{ path: './app/components', pathPrefix: false }],
+  components: [{ path: './app/components', pathPrefix: false, global: true }],
   vite: {
     optimizeDeps: {
       include: ["@vue/devtools-core", "@vue/devtools-kit"],

package/package.json

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

package/app/components/Button.stories.ts

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

package/app/components/Header.stories.ts

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