@open-mercato/core 0.6.7-develop.6785.1.1dd7cfac55 → 0.6.7-develop.6795.1.8a3f27921c

package/src/modules/design_system/gallery/entries/banners.tsx

@@ -0,0 +1,226 @@
+import * as React from 'react'
+import { CircleCheck, Rocket, Sparkles } from 'lucide-react'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { flash } from '@open-mercato/ui/backend/FlashMessages'
+import { NextStepCallout } from '@open-mercato/ui/backend/NextStepCallout'
+import { ContextHelp } from '@open-mercato/ui/backend/ContextHelp'
+import type { GalleryEntry } from '../types'
+
+// Component titles and variant names are proper nouns from the codebase and
+// are deliberately not translated. `code` MUST contain the entry's importPath
+// (enforced by the registry-integrity test) and is always reviewed alongside
+// its sibling `render`.
+
+// `FlashMessages` itself is a singleton mounted by AppShell — the gallery only
+// demonstrates the imperative `flash()` API; the triggered toast renders
+// through the already-mounted singleton.
+const flashMessagesEntry: GalleryEntry = {
+  id: 'flash-messages',
+  title: 'FlashMessages',
+  importPath: '@open-mercato/ui/backend/FlashMessages',
+  variants: [
+    {
+      id: 'kinds',
+      title: 'flash() kinds (toast via the AppShell singleton)',
+      render: () => (
+        <>
+          <Button variant="outline" onClick={() => flash('Changes saved', 'success')}>
+            Fire success
+          </Button>
+          <Button variant="outline" onClick={() => flash('Sync scheduled', 'info')}>
+            Fire info
+          </Button>
+          <Button variant="outline" onClick={() => flash('Quota almost reached', 'warning')}>
+            Fire warning
+          </Button>
+          <Button variant="outline" onClick={() => flash('Save failed', 'error')}>
+            Fire error
+          </Button>
+        </>
+      ),
+      code: `import { flash } from '@open-mercato/ui/backend/FlashMessages'
+
+// FlashMessages is mounted once by AppShell — never mount your own.
+flash('Changes saved', 'success')
+flash('Sync scheduled', 'info')
+flash('Quota almost reached', 'warning')
+flash('Save failed', 'error')`,
+    },
+  ],
+}
+
+const nextStepCalloutEntry: GalleryEntry = {
+  id: 'next-step-callout',
+  title: 'NextStepCallout',
+  importPath: '@open-mercato/ui/backend/NextStepCallout',
+  variants: [
+    {
+      id: 'basic',
+      title: 'Basic',
+      render: () => (
+        <div className="w-full">
+          <NextStepCallout
+            icon={<Rocket className="size-6" />}
+            title="Publish your catalog"
+            description="Products are imported and priced. Publishing makes them visible on every sales channel."
+            actionLabel="Publish catalog"
+            actionIcon={<Sparkles className="mr-2 size-4" />}
+            onAction={() => {}}
+          />
+        </div>
+      ),
+      code: `import { Rocket, Sparkles } from 'lucide-react'
+import { NextStepCallout } from '@open-mercato/ui/backend/NextStepCallout'
+
+<NextStepCallout
+  icon={<Rocket className="size-6" />}
+  title="Publish your catalog"
+  description="Products are imported and priced. Publishing makes them visible on every sales channel."
+  actionLabel="Publish catalog"
+  actionIcon={<Sparkles className="mr-2 size-4" />}
+  onAction={handlePublish}
+/>`,
+    },
+    {
+      id: 'with-steps',
+      title: 'With steps',
+      render: () => (
+        <div className="w-full">
+          <NextStepCallout
+            title="Finish store setup"
+            description="Two steps are done — connect a payment provider to start selling."
+            steps={[
+              { id: 'import', label: 'Import products', state: 'completed' },
+              { id: 'pricing', label: 'Set pricing', state: 'completed' },
+              { id: 'payments', label: 'Connect payments', state: 'active' },
+              { id: 'launch', label: 'Launch', state: 'pending' },
+            ]}
+            actionLabel="Connect payments"
+            onAction={() => {}}
+          />
+        </div>
+      ),
+      code: `import { NextStepCallout } from '@open-mercato/ui/backend/NextStepCallout'
+
+<NextStepCallout
+  title="Finish store setup"
+  description="Two steps are done — connect a payment provider to start selling."
+  steps={[
+    { id: 'import', label: 'Import products', state: 'completed' },
+    { id: 'pricing', label: 'Set pricing', state: 'completed' },
+    { id: 'payments', label: 'Connect payments', state: 'active' },
+    { id: 'launch', label: 'Launch', state: 'pending' },
+  ]}
+  actionLabel="Connect payments"
+  onAction={handleConnect}
+/>`,
+    },
+    {
+      id: 'with-status',
+      title: 'With status progress',
+      render: () => (
+        <div className="w-full">
+          <NextStepCallout
+            title="Index your products"
+            description="Search stays disabled until the first indexing run completes."
+            actionLabel="Re-run indexing"
+            onAction={() => {}}
+            busy
+            status={{
+              tone: 'info',
+              icon: <CircleCheck className="size-4" />,
+              label: 'Indexing in progress',
+              progressValue: 64,
+              progressDescription: '1,280 of 2,000 products indexed',
+            }}
+          />
+        </div>
+      ),
+      code: `import { CircleCheck } from 'lucide-react'
+import { NextStepCallout } from '@open-mercato/ui/backend/NextStepCallout'
+
+<NextStepCallout
+  title="Index your products"
+  description="Search stays disabled until the first indexing run completes."
+  actionLabel="Re-run indexing"
+  onAction={handleReindex}
+  busy
+  status={{
+    tone: 'info',
+    icon: <CircleCheck className="size-4" />,
+    label: 'Indexing in progress',
+    progressValue: 64,
+    progressDescription: '1,280 of 2,000 products indexed',
+  }}
+/>`,
+    },
+  ],
+}
+
+const contextHelpEntry: GalleryEntry = {
+  id: 'context-help',
+  title: 'ContextHelp',
+  importPath: '@open-mercato/ui/backend/ContextHelp',
+  variants: [
+    {
+      id: 'default',
+      title: 'default (collapsed)',
+      render: () => (
+        <div className="w-full max-w-md">
+          <ContextHelp title="How do exchange rates work?">
+            Rates refresh nightly from the configured provider. Manual overrides
+            stay pinned until you clear them.
+          </ContextHelp>
+        </div>
+      ),
+      code: `import { ContextHelp } from '@open-mercato/ui/backend/ContextHelp'
+
+<ContextHelp title="How do exchange rates work?">
+  Rates refresh nightly from the configured provider. Manual overrides
+  stay pinned until you clear them.
+</ContextHelp>`,
+    },
+    {
+      id: 'default-open',
+      title: 'defaultOpen',
+      render: () => (
+        <div className="w-full max-w-md">
+          <ContextHelp title="Why is this field required?" defaultOpen>
+            The tax office identifier is mandatory for invoices issued to
+            companies registered in the EU.
+          </ContextHelp>
+        </div>
+      ),
+      code: `import { ContextHelp } from '@open-mercato/ui/backend/ContextHelp'
+
+<ContextHelp title="Why is this field required?" defaultOpen>
+  The tax office identifier is mandatory for invoices issued to
+  companies registered in the EU.
+</ContextHelp>`,
+    },
+    {
+      id: 'info-icon',
+      title: 'Info icon (bulb={false})',
+      render: () => (
+        <div className="w-full max-w-md">
+          <ContextHelp title="About draft orders" bulb={false} defaultOpen>
+            Draft orders are invisible to customers and skip stock reservation
+            until they are confirmed.
+          </ContextHelp>
+        </div>
+      ),
+      code: `import { ContextHelp } from '@open-mercato/ui/backend/ContextHelp'
+
+<ContextHelp title="About draft orders" bulb={false} defaultOpen>
+  Draft orders are invisible to customers and skip stock reservation
+  until they are confirmed.
+</ContextHelp>`,
+    },
+  ],
+}
+
+export const entries: GalleryEntry[] = [
+  flashMessagesEntry,
+  nextStepCalloutEntry,
+  contextHelpEntry,
+]

package/src/modules/design_system/gallery/entries/buttons.tsx

@@ -0,0 +1,422 @@
+import * as React from 'react'
+import { MoreHorizontal, Pencil, Plus, Trash2 } from 'lucide-react'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import { LinkButton } from '@open-mercato/ui/primitives/link-button'
+import { SocialButton } from '@open-mercato/ui/primitives/social-button'
+import { FancyButton } from '@open-mercato/ui/primitives/fancy-button'
+import { ButtonGroup } from '@open-mercato/ui/primitives/button-group'
+import type { GalleryEntry } from '../types'
+
+// Component titles and variant names are proper nouns from the codebase and
+// are deliberately not translated. `code` MUST contain the entry's importPath
+// (enforced by the registry-integrity test) and is always reviewed alongside
+// its sibling `render`.
+
+const buttonEntry: GalleryEntry = {
+  id: 'button',
+  title: 'Button',
+  importPath: '@open-mercato/ui/primitives/button',
+  usage: {
+    do: [
+      'One default (primary) Button per view; remaining actions step down to outline, ghost or muted.',
+      'Destructive actions use the destructive family; -outline/-soft/-ghost lower the emphasis without losing the semantics.',
+      'Default height is h-9; sm (h-8) in dense toolbars, 2xs only inside table rows.',
+    ],
+    dont: [
+      'Never Button size="icon" for icon-only actions — use IconButton (correct sizing + aria-label contract).',
+      'Never style a raw <button> or <Link> to look like a Button.',
+      'The link variant is for navigation-like actions, not for mutations.',
+    ],
+  },
+  descriptionKey: 'design_system.entries.button.description',
+  variants: [
+    {
+      id: 'default',
+      title: 'default',
+      render: () => <Button>Save changes</Button>,
+      code: `import { Button } from '@open-mercato/ui/primitives/button'
+
+<Button>Save changes</Button>`,
+    },
+    {
+      id: 'destructive',
+      title: 'destructive',
+      render: () => <Button variant="destructive">Delete</Button>,
+      code: `import { Button } from '@open-mercato/ui/primitives/button'
+
+<Button variant="destructive">Delete</Button>`,
+    },
+    {
+      id: 'destructive-outline',
+      title: 'destructive-outline',
+      render: () => <Button variant="destructive-outline">Delete</Button>,
+      code: `import { Button } from '@open-mercato/ui/primitives/button'
+
+<Button variant="destructive-outline">Delete</Button>`,
+    },
+    {
+      id: 'destructive-soft',
+      title: 'destructive-soft',
+      render: () => <Button variant="destructive-soft">Delete draft</Button>,
+      code: `import { Button } from '@open-mercato/ui/primitives/button'
+
+<Button variant="destructive-soft">Delete draft</Button>`,
+    },
+    {
+      id: 'destructive-ghost',
+      title: 'destructive-ghost',
+      render: () => <Button variant="destructive-ghost">Remove</Button>,
+      code: `import { Button } from '@open-mercato/ui/primitives/button'
+
+<Button variant="destructive-ghost">Remove</Button>`,
+    },
+    {
+      id: 'outline',
+      title: 'outline',
+      render: () => <Button variant="outline">Cancel</Button>,
+      code: `import { Button } from '@open-mercato/ui/primitives/button'
+
+<Button variant="outline">Cancel</Button>`,
+    },
+    {
+      id: 'secondary',
+      title: 'secondary',
+      render: () => <Button variant="secondary">Duplicate</Button>,
+      code: `import { Button } from '@open-mercato/ui/primitives/button'
+
+<Button variant="secondary">Duplicate</Button>`,
+    },
+    {
+      id: 'ghost',
+      title: 'ghost',
+      render: () => <Button variant="ghost">Dismiss</Button>,
+      code: `import { Button } from '@open-mercato/ui/primitives/button'
+
+<Button variant="ghost">Dismiss</Button>`,
+    },
+    {
+      id: 'muted',
+      title: 'muted',
+      render: () => <Button variant="muted">Show more</Button>,
+      code: `import { Button } from '@open-mercato/ui/primitives/button'
+
+<Button variant="muted">Show more</Button>`,
+    },
+    {
+      id: 'link',
+      title: 'link',
+      render: () => <Button variant="link">View details</Button>,
+      code: `import { Button } from '@open-mercato/ui/primitives/button'
+
+<Button variant="link">View details</Button>`,
+    },
+    {
+      id: 'sizes',
+      title: 'Sizes',
+      render: () => (
+        <>
+          <Button size="lg">Large</Button>
+          <Button size="default">Default</Button>
+          <Button size="sm">Small</Button>
+          <Button size="2xs">2X-Small</Button>
+          <Button size="icon" aria-label="Add">
+            <Plus />
+          </Button>
+        </>
+      ),
+      code: `import { Plus } from 'lucide-react'
+import { Button } from '@open-mercato/ui/primitives/button'
+
+<Button size="lg">Large</Button>
+<Button size="default">Default</Button>
+<Button size="sm">Small</Button>
+<Button size="2xs">2X-Small</Button>
+<Button size="icon" aria-label="Add"><Plus /></Button>`,
+    },
+  ],
+}
+
+const iconButtonEntry: GalleryEntry = {
+  id: 'icon-button',
+  title: 'IconButton',
+  importPath: '@open-mercato/ui/primitives/icon-button',
+  usage: {
+    do: [
+      'Always pass aria-label — the icon is the only content.',
+      'size="default" is h-8, one step smaller than Button; use size="lg" (h-9) to align inside a Button row.',
+    ],
+    dont: ['Never fake it with Button size="icon".'],
+  },
+  descriptionKey: 'design_system.entries.iconButton.description',
+  variants: [
+    {
+      id: 'variants',
+      title: 'Variants',
+      render: () => (
+        <>
+          <IconButton variant="primary" aria-label="Add">
+            <Plus />
+          </IconButton>
+          <IconButton variant="outline" aria-label="Edit">
+            <Pencil />
+          </IconButton>
+          <IconButton variant="ghost" aria-label="More">
+            <MoreHorizontal />
+          </IconButton>
+          <IconButton variant="white" aria-label="Edit">
+            <Pencil />
+          </IconButton>
+          <IconButton variant="destructive" aria-label="Delete">
+            <Trash2 />
+          </IconButton>
+        </>
+      ),
+      code: `import { Pencil } from 'lucide-react'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+
+<IconButton variant="primary" aria-label="Add"><Plus /></IconButton>
+<IconButton variant="outline" aria-label="Edit"><Pencil /></IconButton>
+<IconButton variant="ghost" aria-label="More"><MoreHorizontal /></IconButton>
+<IconButton variant="white" aria-label="Edit"><Pencil /></IconButton>
+<IconButton variant="destructive" aria-label="Delete"><Trash2 /></IconButton>`,
+    },
+    {
+      id: 'sizes',
+      title: 'Sizes',
+      render: () => (
+        <>
+          <IconButton size="lg" aria-label="Edit">
+            <Pencil />
+          </IconButton>
+          <IconButton size="default" aria-label="Edit">
+            <Pencil />
+          </IconButton>
+          <IconButton size="sm" aria-label="Edit">
+            <Pencil />
+          </IconButton>
+          <IconButton size="xs" aria-label="Edit">
+            <Pencil />
+          </IconButton>
+        </>
+      ),
+      code: `import { Pencil } from 'lucide-react'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+
+<IconButton size="lg" aria-label="Edit"><Pencil /></IconButton>
+<IconButton size="default" aria-label="Edit"><Pencil /></IconButton>
+<IconButton size="sm" aria-label="Edit"><Pencil /></IconButton>
+<IconButton size="xs" aria-label="Edit"><Pencil /></IconButton>`,
+    },
+    {
+      id: 'full-radius',
+      title: 'fullRadius',
+      render: () => (
+        <IconButton fullRadius aria-label="Add">
+          <Plus />
+        </IconButton>
+      ),
+      code: `import { Plus } from 'lucide-react'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+
+<IconButton fullRadius aria-label="Add"><Plus /></IconButton>`,
+    },
+  ],
+}
+
+const linkButtonEntry: GalleryEntry = {
+  id: 'link-button',
+  title: 'LinkButton',
+  importPath: '@open-mercato/ui/primitives/link-button',
+  descriptionKey: 'design_system.entries.linkButton.description',
+  variants: [
+    {
+      id: 'variants',
+      title: 'Variants',
+      render: () => (
+        <>
+          <LinkButton>primary</LinkButton>
+          <LinkButton variant="gray">gray</LinkButton>
+          <LinkButton variant="black">black</LinkButton>
+          <LinkButton variant="error">error</LinkButton>
+        </>
+      ),
+      code: `import { LinkButton } from '@open-mercato/ui/primitives/link-button'
+
+<LinkButton>primary</LinkButton>
+<LinkButton variant="gray">gray</LinkButton>
+<LinkButton variant="black">black</LinkButton>
+<LinkButton variant="error">error</LinkButton>`,
+    },
+    {
+      id: 'underline',
+      title: 'Underline',
+      render: () => (
+        <>
+          <LinkButton underline="always">always</LinkButton>
+          <LinkButton underline="hover">hover</LinkButton>
+          <LinkButton underline="none">none</LinkButton>
+        </>
+      ),
+      code: `import { LinkButton } from '@open-mercato/ui/primitives/link-button'
+
+<LinkButton underline="always">always</LinkButton>
+<LinkButton underline="hover">hover</LinkButton>
+<LinkButton underline="none">none</LinkButton>`,
+    },
+    {
+      id: 'as-anchor',
+      title: 'As anchor (asChild)',
+      render: () => (
+        <LinkButton asChild>
+          <a href="#gallery-entry-link-button">Open link</a>
+        </LinkButton>
+      ),
+      code: `import { LinkButton } from '@open-mercato/ui/primitives/link-button'
+
+<LinkButton asChild>
+  <a href="/backend/docs">Open link</a>
+</LinkButton>`,
+    },
+  ],
+}
+
+const socialButtonEntry: GalleryEntry = {
+  id: 'social-button',
+  title: 'SocialButton',
+  importPath: '@open-mercato/ui/primitives/social-button',
+  descriptionKey: 'design_system.entries.socialButton.description',
+  variants: [
+    {
+      id: 'filled',
+      title: 'filled',
+      render: () => (
+        <>
+          <SocialButton brand="github">Continue with GitHub</SocialButton>
+          <SocialButton brand="google">Continue with Google</SocialButton>
+        </>
+      ),
+      code: `import { SocialButton } from '@open-mercato/ui/primitives/social-button'
+
+<SocialButton brand="github">Continue with GitHub</SocialButton>
+<SocialButton brand="google">Continue with Google</SocialButton>`,
+    },
+    {
+      id: 'stroke',
+      title: 'stroke',
+      render: () => (
+        <>
+          <SocialButton brand="github" appearance="stroke">Continue with GitHub</SocialButton>
+          <SocialButton brand="linkedin" appearance="stroke">Continue with LinkedIn</SocialButton>
+        </>
+      ),
+      code: `import { SocialButton } from '@open-mercato/ui/primitives/social-button'
+
+<SocialButton brand="github" appearance="stroke">Continue with GitHub</SocialButton>
+<SocialButton brand="linkedin" appearance="stroke">Continue with LinkedIn</SocialButton>`,
+    },
+  ],
+}
+
+const fancyButtonEntry: GalleryEntry = {
+  id: 'fancy-button',
+  title: 'FancyButton',
+  importPath: '@open-mercato/ui/primitives/fancy-button',
+  descriptionKey: 'design_system.entries.fancyButton.description',
+  variants: [
+    {
+      id: 'intents',
+      title: 'Intents',
+      render: () => (
+        <>
+          <FancyButton intent="neutral">Neutral</FancyButton>
+          <FancyButton intent="basic">Basic</FancyButton>
+          <FancyButton intent="primary">Primary</FancyButton>
+          <FancyButton intent="destructive">Destructive</FancyButton>
+        </>
+      ),
+      code: `import { FancyButton } from '@open-mercato/ui/primitives/fancy-button'
+
+<FancyButton intent="neutral">Neutral</FancyButton>
+<FancyButton intent="basic">Basic</FancyButton>
+<FancyButton intent="primary">Primary</FancyButton>
+<FancyButton intent="destructive">Destructive</FancyButton>`,
+    },
+    {
+      id: 'sizes',
+      title: 'Sizes',
+      render: () => (
+        <>
+          <FancyButton size="default">Default</FancyButton>
+          <FancyButton size="sm">Small</FancyButton>
+          <FancyButton size="xs">X-Small</FancyButton>
+        </>
+      ),
+      code: `import { FancyButton } from '@open-mercato/ui/primitives/fancy-button'
+
+<FancyButton size="default">Default</FancyButton>
+<FancyButton size="sm">Small</FancyButton>
+<FancyButton size="xs">X-Small</FancyButton>`,
+    },
+  ],
+}
+
+const buttonGroupEntry: GalleryEntry = {
+  id: 'button-group',
+  title: 'ButtonGroup',
+  importPath: '@open-mercato/ui/primitives/button-group',
+  descriptionKey: 'design_system.entries.buttonGroup.description',
+  variants: [
+    {
+      id: 'horizontal',
+      title: 'Horizontal',
+      render: () => (
+        <ButtonGroup>
+          <Button variant="outline">Save</Button>
+          <Button variant="outline">Save &amp; New</Button>
+          <IconButton aria-label="More">
+            <MoreHorizontal />
+          </IconButton>
+        </ButtonGroup>
+      ),
+      code: `import { MoreHorizontal } from 'lucide-react'
+import { ButtonGroup } from '@open-mercato/ui/primitives/button-group'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+
+<ButtonGroup>
+  <Button variant="outline">Save</Button>
+  <Button variant="outline">Save & New</Button>
+  <IconButton aria-label="More"><MoreHorizontal /></IconButton>
+</ButtonGroup>`,
+    },
+    {
+      id: 'vertical',
+      title: 'Vertical',
+      render: () => (
+        <ButtonGroup orientation="vertical" size="sm">
+          <Button variant="outline" size="sm">Top</Button>
+          <Button variant="outline" size="sm">Middle</Button>
+          <Button variant="outline" size="sm">Bottom</Button>
+        </ButtonGroup>
+      ),
+      code: `import { ButtonGroup } from '@open-mercato/ui/primitives/button-group'
+import { Button } from '@open-mercato/ui/primitives/button'
+
+<ButtonGroup orientation="vertical" size="sm">
+  <Button variant="outline" size="sm">Top</Button>
+  <Button variant="outline" size="sm">Middle</Button>
+  <Button variant="outline" size="sm">Bottom</Button>
+</ButtonGroup>`,
+    },
+  ],
+}
+
+export const entries: GalleryEntry[] = [
+  buttonEntry,
+  iconButtonEntry,
+  linkButtonEntry,
+  socialButtonEntry,
+  fancyButtonEntry,
+  buttonGroupEntry,
+]