@commercetools/nimbus-mcp 3.0.0 → 3.1.0

package/data/docs/routes/patterns-pages-public-page-layout.json

@@ -0,0 +1,371 @@
+{
+  "meta": {
+    "id": "Patterns-PublicPageLayout",
+    "title": "Public page layout",
+    "exportName": "PublicPageLayout",
+    "description": "A pre-built, centered layout for public-facing pages (login, registration, password reset) with slots for brand logo, welcome heading, main content, and legal footer.",
+    "lifecycleState": "Beta",
+    "order": 999,
+    "repoPath": "packages/nimbus/src/patterns/pages/public-page-layout/public-page-layout.mdx",
+    "menu": [
+      "Patterns",
+      "Pages",
+      "Public page layout"
+    ],
+    "route": "patterns/pages/public-page-layout",
+    "tags": [
+      "component",
+      "pattern",
+      "pages",
+      "Flex",
+      "Stack",
+      "Heading",
+      "Text"
+    ],
+    "toc": [
+      {
+        "value": "Overview",
+        "href": "#overview",
+        "depth": 2,
+        "numbering": [
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Anatomy",
+        "href": "#anatomy",
+        "depth": 2,
+        "numbering": [
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Usage",
+        "href": "#usage",
+        "depth": 2,
+        "numbering": [
+          1,
+          3
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "When to use",
+        "href": "#when-to-use",
+        "depth": 3,
+        "numbering": [
+          1,
+          3,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "When not to use",
+        "href": "#when-not-to-use",
+        "depth": 3,
+        "numbering": [
+          1,
+          3,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Do",
+        "href": "#do",
+        "depth": 3,
+        "numbering": [
+          1,
+          3,
+          3
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Don't",
+        "href": "#dont",
+        "depth": 3,
+        "numbering": [
+          1,
+          3,
+          4
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Resources",
+        "href": "#resources",
+        "depth": 3,
+        "numbering": [
+          1,
+          3,
+          5
+        ],
+        "parent": "root"
+      }
+    ],
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      },
+      {
+        "key": "dev",
+        "title": "Implementation",
+        "order": 3
+      }
+    ]
+  },
+  "mdx": "\n## Overview\n\nPublicPageLayout is a pattern that composes a centered, full-viewport-height\n layout for public-facing pages. It replaces Merchant Center Application Kit's\n `public-page-layout` component.\n\nThe layout vertically stacks: an optional brand logo, an optional welcome\nheading, the main content area, and an optional legal footer — all\nhorizontally centered with a constrained max-width.\n\n## Anatomy\n\n- A `<main>` landmark with an accessible label (default: \"Public page\")\n- Optional logo area, centered horizontally\n- Optional welcome heading rendered as an `<h2>`\n- Content area with a max-width controlled by `contentWidth`\n- Optional legal/footer message area\n\n## Usage\n\n### When to use\n\n- Login, registration, password reset, and other unauthenticated pages\n- Any public-facing page that needs a centered, single-column layout with\n  branding\n\n### When not to use\n\n- Authenticated app pages — use `DefaultPage` or other app layout patterns\n- Pages that need a sidebar or multi-column chrome — compose Flex and Stack\n  directly\n\n### Do\n\n- Pass a brand logo via the `logo` prop for consistent branding\n- Use `contentWidth=\"wide\"` when rendering two-column content\n- Provide a descriptive `aria-label` when the default \"Public page\" is too\n  generic (e.g., `aria-label=\"Login page\"`)\n\n### Don't\n\n- Don't nest another `<main>` landmark inside children — PublicPageLayout\n  already renders one\n- Don't use this for authenticated layouts that need navigation or sidebars\n\n### Resources\n\n- [Flex](/components/layout/flex) — layout primitive used internally\n- [Stack](/components/layout/stack) — vertical stacking primitive\n- [Heading](/components/typography/heading) — welcome message rendering\n- [Storybook](https://nimbus-storybook.vercel.app/?path=/docs/patterns-pages-publicpagelayout--docs)\n",
+  "views": {
+    "overview": {
+      "mdx": "\n## Overview\n\nPublicPageLayout is a pattern that composes a centered, full-viewport-height\n layout for public-facing pages. It replaces Merchant Center Application Kit's\n `public-page-layout` component.\n\nThe layout vertically stacks: an optional brand logo, an optional welcome\nheading, the main content area, and an optional legal footer — all\nhorizontally centered with a constrained max-width.\n\n## Anatomy\n\n- A `<main>` landmark with an accessible label (default: \"Public page\")\n- Optional logo area, centered horizontally\n- Optional welcome heading rendered as an `<h2>`\n- Content area with a max-width controlled by `contentWidth`\n- Optional legal/footer message area\n\n## Usage\n\n### When to use\n\n- Login, registration, password reset, and other unauthenticated pages\n- Any public-facing page that needs a centered, single-column layout with\n  branding\n\n### When not to use\n\n- Authenticated app pages — use `DefaultPage` or other app layout patterns\n- Pages that need a sidebar or multi-column chrome — compose Flex and Stack\n  directly\n\n### Do\n\n- Pass a brand logo via the `logo` prop for consistent branding\n- Use `contentWidth=\"wide\"` when rendering two-column content\n- Provide a descriptive `aria-label` when the default \"Public page\" is too\n  generic (e.g., `aria-label=\"Login page\"`)\n\n### Don't\n\n- Don't nest another `<main>` landmark inside children — PublicPageLayout\n  already renders one\n- Don't use this for authenticated layouts that need navigation or sidebars\n\n### Resources\n\n- [Flex](/components/layout/flex) — layout primitive used internally\n- [Stack](/components/layout/stack) — vertical stacking primitive\n- [Heading](/components/typography/heading) — welcome message rendering\n- [Storybook](https://nimbus-storybook.vercel.app/?path=/docs/patterns-pages-publicpagelayout--docs)\n",
+      "toc": [
+        {
+          "value": "Overview",
+          "href": "#overview",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Anatomy",
+          "href": "#anatomy",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Usage",
+          "href": "#usage",
+          "depth": 2,
+          "numbering": [
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "When to use",
+          "href": "#when-to-use",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "When not to use",
+          "href": "#when-not-to-use",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Do",
+          "href": "#do",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Don't",
+          "href": "#dont",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            5
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "dev": {
+      "mdx": "\n## Getting started\n\n### Import\n\n```tsx\nimport { PublicPageLayout, type PublicPageLayoutProps } from \"@commercetools/nimbus\";\n```\n\n### Basic usage\n\nProvide `children` — all other props are optional.\n\n```jsx live-dev\nconst App = () => (\n  <PublicPageLayout welcomeMessage=\"Welcome\">\n    <Text>Login form goes here</Text>\n  </PublicPageLayout>\n);\n```\n\n## Usage examples\n\n### With logo and welcome message\n\n```jsx live-dev\nconst App = () => (\n  <PublicPageLayout\n    logo={<Text fontWeight=\"bold\" fontSize=\"xl\">Brand</Text>}\n    welcomeMessage=\"Welcome to the Merchant Center\"\n  >\n    <Text>Login form</Text>\n  </PublicPageLayout>\n);\n```\n\n### Wide content for two columns\n\nUse `contentWidth=\"wide\"` when the content needs more horizontal space, for\nexample a two-column registration form.\n\n```jsx live-dev\nconst App = () => (\n  <PublicPageLayout\n    logo={<Text fontWeight=\"bold\" fontSize=\"xl\">Brand</Text>}\n    welcomeMessage=\"Create your account\"\n    contentWidth=\"wide\"\n  >\n    <PageContent.Root columns=\"1/1\">\n      <PageContent.Column>\n        <Text>Column one</Text>\n      </PageContent.Column>\n      <PageContent.Column>\n        <Text>Column two</Text>\n      </PageContent.Column>\n    </PageContent.Root>\n  </PublicPageLayout>\n);\n```\n\n### With legal footer\n\n```jsx live-dev\nconst App = () => (\n  <PublicPageLayout\n    logo={<Text fontWeight=\"bold\" fontSize=\"xl\">Brand</Text>}\n    welcomeMessage=\"Sign in\"\n    legalMessage={\n      <Text fontSize=\"xs\" color=\"neutral.11\">\n        © 2026 commercetools · Privacy Policy · Terms of Service\n      </Text>\n    }\n  >\n    <Text>Login form</Text>\n  </PublicPageLayout>\n);\n```\n\n### With background style\n\nStyle props are forwarded to the outer `<main>` wrapper, so you can\ncustomize the background.\n\n```jsx live-dev\nconst App = () => (\n  <PublicPageLayout\n    welcomeMessage=\"Welcome\"\n    bg=\"neutral.2\"\n  >\n    <Text>Content on a tinted background</Text>\n  </PublicPageLayout>\n);\n```\n\n## Escape hatch: manual composition\n\nIf you need a layout structure that PublicPageLayout doesn't support (e.g.,\nside-by-side panels, custom spacing), consider using\n[PageContent](/components/layout/page-content) for a more flexible\ncolumn-based layout, or compose Flex and Stack directly for full control.\n\n**With PublicPageLayout:**\n\n```tsx\n<PublicPageLayout\n  logo={<Icon size=\"xl\"><Storefront /></Icon>}\n  welcomeMessage=\"Welcome to the Merchant Center\"\n  legalMessage={<Text fontSize=\"xs\">© 2026 commercetools</Text>}\n>\n  <LoginForm />\n</PublicPageLayout>\n```\n\n**Manual composition:**\n\n```tsx\n<Flex as=\"main\" aria-label=\"Login page\" width=\"100%\" minHeight=\"100vh\" paddingY=\"600\" justify=\"center\">\n  <Stack gap=\"600\" alignItems=\"center\" width=\"100%\">\n    <Flex justify=\"center\">\n      <Icon size=\"xl\"><Storefront /></Icon>\n    </Flex>\n    <Heading as=\"h2\" textAlign=\"center\">\n      Welcome to the Merchant Center\n    </Heading>\n    <Stack gap=\"600\" alignItems=\"center\" width=\"100%\">\n      <Box maxW=\"sm\" width=\"100%\">\n        <LoginForm />\n      </Box>\n      <Box maxW=\"sm\" textAlign=\"center\">\n        <Text fontSize=\"xs\">© 2026 commercetools</Text>\n      </Box>\n    </Stack>\n  </Stack>\n</Flex>\n```\n\n## Accessibility\n\n- The outer element renders as a `<main>` landmark with an `aria-label`\n  (defaults to \"Public page\", overridable via the `aria-label` prop)\n- The welcome message renders as an `<h2>` heading for document outline\n- Do not nest another `<main>` inside children — one landmark per page\n\n## API reference\n\n<PropsTable id=\"PublicPageLayout\" />\n\n## Testing your implementation\n\nThese examples demonstrate how to test your integration of PublicPageLayout.\nThe component's own behavior is already tested by Nimbus.\n\n### Verify layout renders\n\n```tsx\nimport { render, screen } from \"@testing-library/react\";\nimport { PublicPageLayout } from \"@commercetools/nimbus\";\n\nit(\"renders the login page layout\", () => {\n  render(\n    <PublicPageLayout\n      welcomeMessage=\"Welcome\"\n      aria-label=\"Login page\"\n    >\n      <form>...</form>\n    </PublicPageLayout>\n  );\n\n  expect(screen.getByRole(\"main\", { name: \"Login page\" })).toBeInTheDocument();\n  expect(screen.getByRole(\"heading\", { name: \"Welcome\" })).toBeInTheDocument();\n});\n```\n\n## Resources\n\n- [Storybook](https://nimbus-storybook.vercel.app/?path=/docs/patterns-pages-publicpagelayout--docs)\n- [Flex Component](/components/layout/flex)\n- [Stack Component](/components/layout/stack)\n- [Heading Component](/components/typography/heading)\n",
+      "toc": [
+        {
+          "value": "Getting started",
+          "href": "#getting-started",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Import",
+          "href": "#import",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Basic usage",
+          "href": "#basic-usage",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Usage examples",
+          "href": "#usage-examples",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "With logo and welcome message",
+          "href": "#with-logo-and-welcome-message",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Wide content for two columns",
+          "href": "#wide-content-for-two-columns",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "With legal footer",
+          "href": "#with-legal-footer",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "With background style",
+          "href": "#with-background-style",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Escape hatch: manual composition",
+          "href": "#escape-hatch-manual-composition",
+          "depth": 2,
+          "numbering": [
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility",
+          "href": "#accessibility",
+          "depth": 2,
+          "numbering": [
+            1,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "API reference",
+          "href": "#api-reference",
+          "depth": 2,
+          "numbering": [
+            1,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Testing your implementation",
+          "href": "#testing-your-implementation",
+          "depth": 2,
+          "numbering": [
+            1,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Verify layout renders",
+          "href": "#verify-layout-renders",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 2,
+          "numbering": [
+            1,
+            7
+          ],
+          "parent": "root"
+        }
+      ]
+    }
+  }
+}

package/data/docs/routes/patterns-pages.json

@@ -0,0 +1,78 @@
+{
+  "meta": {
+    "id": "Patterns-Pages",
+    "title": "Pages",
+    "description": "Pre-built page layout patterns for common full-page structures",
+    "order": 4,
+    "repoPath": "packages/nimbus/src/docs/pages.mdx",
+    "menu": [
+      "Patterns",
+      "Pages"
+    ],
+    "route": "patterns/pages",
+    "tags": [
+      "patterns",
+      "pages",
+      "layouts"
+    ],
+    "toc": [
+      {
+        "value": "When to use page patterns",
+        "href": "#when-to-use-page-patterns",
+        "depth": 2,
+        "numbering": [
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Available page patterns",
+        "href": "#available-page-patterns",
+        "depth": 2,
+        "numbering": [
+          1,
+          2
+        ],
+        "parent": "root"
+      }
+    ],
+    "icon": "WebAsset",
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      }
+    ]
+  },
+  "mdx": "\n# Pages\n\nPage layout patterns provide pre-built, opinionated layouts for common full-page structures. Use them to avoid hand-composing flex and stack primitives for pages that follow a well-established shape.\n\n## When to use page patterns\n\nPage patterns are ideal for:\n- Public-facing pages (login, registration, password reset) with a centered, single-column layout\n- Reducing layout boilerplate for pages that appear across multiple apps\n- Ensuring consistent landmark structure and accessibility across page types\n\nFor pages with bespoke chrome, sidebars, or multi-column structures, compose `Flex` and `Stack` directly.\n\n## Available page patterns\n\n<CategoryOverview variant=\"list\" />\n",
+  "views": {
+    "overview": {
+      "mdx": "\n# Pages\n\nPage layout patterns provide pre-built, opinionated layouts for common full-page structures. Use them to avoid hand-composing flex and stack primitives for pages that follow a well-established shape.\n\n## When to use page patterns\n\nPage patterns are ideal for:\n- Public-facing pages (login, registration, password reset) with a centered, single-column layout\n- Reducing layout boilerplate for pages that appear across multiple apps\n- Ensuring consistent landmark structure and accessibility across page types\n\nFor pages with bespoke chrome, sidebars, or multi-column structures, compose `Flex` and `Stack` directly.\n\n## Available page patterns\n\n<CategoryOverview variant=\"list\" />\n",
+      "toc": [
+        {
+          "value": "When to use page patterns",
+          "href": "#when-to-use-page-patterns",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Available page patterns",
+          "href": "#available-page-patterns",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        }
+      ]
+    }
+  }
+}