@menumalsuite/design-system 0.0.1 → 0.0.2

package/app/components/MButton/MButton.mdx

@@ -0,0 +1,35 @@
+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 />
+
+## 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/{Button.stories.ts → MButton/MButton.stories.ts}

@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import { fn } from 'storybook/test';
-import Button from './Button.vue';
+import MButton from './MButton.vue';
 
 const meta = {
-  title: 'Components/Button',
-  component: Button,
+  title: 'Components/MButton',
+  component: MButton,
   tags: ['autodocs'],
   argTypes: {
     size: { control: 'select', options: ['small', 'medium', 'large'] },
@@ -14,7 +14,7 @@ const meta = {
     primary: false,
     onClick: fn(),
   },
-} satisfies Meta<typeof Button>;
+} satisfies Meta<typeof MButton>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;

package/app/components/MHeader/MHeader.mdx

@@ -0,0 +1,27 @@
+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 />
+
+## Notes
+
+- Handles three events internally: `login`, `logout`, `createAccount`
+- The `user` prop is `null` when unauthenticated
+- Internal buttons use `<Button>` from the design system

package/app/components/{Header.stories.ts → MHeader/MHeader.stories.ts}

@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import { fn } from 'storybook/test';
-import Header from './Header.vue';
+import MHeader from './MHeader.vue';
 
 const meta = {
-  title: 'Components/Header',
-  component: Header,
+  title: 'Components/MHeader',
+  component: MHeader,
   parameters: { layout: 'fullscreen' },
   args: {
     onLogin: fn(),
@@ -12,7 +12,7 @@ const meta = {
     onCreateAccount: fn(),
   },
   tags: ['autodocs'],
-} satisfies Meta<typeof Header>;
+} satisfies Meta<typeof MHeader>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;

package/app/components/MPage/MPage.mdx

@@ -0,0 +1,27 @@
+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 />
+
+## Notes
+
+- Manages `user` state internally — no need to pass it from outside
+- Composes `<Header>` + `<Button>` 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 MPage from './MPage.vue';
 
 const meta = {
-  title: 'Components/Page',
-  component: Page,
+  title: 'Components/MPage',
+  component: MPage,
   parameters: { layout: 'fullscreen' },
   tags: ['autodocs'],
-} satisfies Meta<typeof Page>;
+} satisfies Meta<typeof MPage>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;

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.2",
   "main": "./nuxt.config.ts",
   "exports": {
     ".": "./nuxt.config.ts"