@open-mercato/core 0.6.7 → 0.6.8-develop.6875.1.871a4afc94

package/dist/modules/design_system/gallery/entries/icons.js

@@ -0,0 +1,140 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { LUCIDE_ICON_REGISTRY } from "@open-mercato/ui/backend/icons/lucideRegistry";
+import { SearchInput } from "@open-mercato/ui/primitives/search-input";
+import {
+  Popover,
+  PopoverClose,
+  PopoverContent,
+  PopoverTrigger
+} from "@open-mercato/ui/primitives/popover";
+import { flash } from "@open-mercato/ui/backend/FlashMessages";
+const FIGMA_ICONS_NODE = "2716:25504";
+function pascalCase(registryName) {
+  return registryName.split(/[-_]/).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
+}
+function IconTile({ name }) {
+  const t = useT();
+  const Icon = LUCIDE_ICON_REGISTRY[name];
+  const jsxSnippet = `<${pascalCase(name)} aria-hidden className="size-4" />`;
+  const copy = React.useCallback(async (payload) => {
+    try {
+      await navigator.clipboard.writeText(payload);
+      flash(t("design_system.gallery.iconCopied", "Copied: {snippet}", { snippet: payload }), "success");
+    } catch {
+      flash(t("design_system.gallery.copyFailed", "Could not copy the snippet"), "error");
+    }
+  }, [t]);
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "flex flex-col items-center gap-1.5 rounded-md border border-transparent p-2 transition-colors hover:border-border hover:bg-muted/40 focus-visible:outline-none focus-visible:shadow-focus",
+        children: [
+          /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: "size-5 text-foreground", strokeWidth: 1.75 }),
+          /* @__PURE__ */ jsx("code", { className: "max-w-full truncate text-[10px] leading-tight text-muted-foreground", children: name })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { align: "center", className: "w-auto max-w-xs p-2", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx(PopoverClose, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => copy(name),
+          className: "flex w-full flex-col items-start gap-0.5 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-muted focus-visible:outline-none focus-visible:shadow-focus",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground", children: t("design_system.gallery.iconCopyMeta", "Copy name for page.meta icon") }),
+            /* @__PURE__ */ jsx("code", { className: "text-[11px] text-muted-foreground", children: name })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(PopoverClose, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => copy(jsxSnippet),
+          className: "flex w-full flex-col items-start gap-0.5 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-muted focus-visible:outline-none focus-visible:shadow-focus",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground", children: t("design_system.gallery.iconCopyJsx", "Copy JSX (lucide-react)") }),
+            /* @__PURE__ */ jsx("code", { className: "max-w-full truncate text-[11px] text-muted-foreground", children: jsxSnippet })
+          ]
+        }
+      ) })
+    ] }) })
+  ] });
+}
+function IconGrid() {
+  const t = useT();
+  const [query, setQuery] = React.useState("");
+  const names = React.useMemo(() => Object.keys(LUCIDE_ICON_REGISTRY).sort((a, b) => a.localeCompare(b)), []);
+  const needle = query.trim().toLowerCase();
+  const visible = needle ? names.filter((name) => name.toLowerCase().includes(needle)) : names;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "max-w-sm flex-1", children: /* @__PURE__ */ jsx(
+        SearchInput,
+        {
+          value: query,
+          onChange: setQuery,
+          placeholder: t("design_system.gallery.iconSearchPlaceholder", "Filter icons\u2026"),
+          "aria-label": t("design_system.gallery.iconSearchPlaceholder", "Filter icons\u2026")
+        }
+      ) }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: needle ? t("design_system.gallery.iconCountFiltered", "{visible} of {total} icons", {
+        visible: visible.length,
+        total: names.length
+      }) : t("design_system.gallery.iconCountAll", "{total} icons", { total: names.length }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-1 sm:grid-cols-6 lg:grid-cols-8", children: visible.map((name) => /* @__PURE__ */ jsx(IconTile, { name }, name)) })
+  ] });
+}
+const iconRegistryEntry = {
+  id: "icon-registry",
+  title: "Icon registry",
+  importPath: "lucide-react",
+  usage: {
+    do: [
+      "size-4 inside buttons, menus and inline text; size-5 in section navs and toolbars.",
+      "Always aria-hidden next to a visible label, or aria-label on icon-only controls.",
+      "Color with semantic tokens only (text-muted-foreground, text-status-*-icon).",
+      "Icon-only actions use IconButton \u2014 it ships the focus ring, sizing and the aria-label contract."
+    ],
+    dont: [
+      "No emoji or font glyphs as icons \u2014 Lucide only.",
+      "Never convey status by icon color alone; pair with text or a label.",
+      "No hand-drawn SVGs when a Lucide icon exists."
+    ]
+  },
+  figmaNodeId: FIGMA_ICONS_NODE,
+  variants: [
+    {
+      id: "registry",
+      title: "registered icons",
+      render: () => /* @__PURE__ */ jsx(IconGrid, {}),
+      code: `export const metadata = { icon: 'shapes' }`
+    },
+    {
+      id: "component-usage",
+      title: "usage in components",
+      render: () => {
+        const Sample = LUCIDE_ICON_REGISTRY.search ?? Object.values(LUCIDE_ICON_REGISTRY)[0];
+        return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+          /* @__PURE__ */ jsx(Sample, { "aria-hidden": true, className: "size-4 text-muted-foreground" }),
+          /* @__PURE__ */ jsx(Sample, { "aria-hidden": true, className: "size-5 text-foreground" }),
+          /* @__PURE__ */ jsx(Sample, { "aria-hidden": true, className: "size-6 text-status-info-icon" })
+        ] });
+      },
+      code: `import { Search } from 'lucide-react'
+
+<Search aria-hidden className="size-4 text-muted-foreground" />`
+    }
+  ]
+};
+const entries = [iconRegistryEntry];
+export {
+  entries
+};
+//# sourceMappingURL=icons.js.map

package/dist/modules/design_system/gallery/entries/icons.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/entries/icons.tsx"],
+  "sourcesContent": ["import * as React from 'react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { LUCIDE_ICON_REGISTRY } from '@open-mercato/ui/backend/icons/lucideRegistry'\nimport { SearchInput } from '@open-mercato/ui/primitives/search-input'\nimport {\n  Popover,\n  PopoverClose,\n  PopoverContent,\n  PopoverTrigger,\n} from '@open-mercato/ui/primitives/popover'\nimport { flash } from '@open-mercato/ui/backend/FlashMessages'\nimport type { GalleryEntry } from '../types'\n\n// Mirrors the DS Figma icon sheet (node 2716:25504, \"Lucide icons\"): a plain\n// grid of outline icons with the name beneath each. The gallery shows the\n// icons REGISTERED in the string-icon registry \u2014 the set page.meta.ts `icon`\n// accepts; components import from lucide-react directly.\n\nconst FIGMA_ICONS_NODE = '2716:25504'\n\nfunction pascalCase(registryName: string): string {\n  return registryName\n    .split(/[-_]/)\n    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))\n    .join('')\n}\n\n// Clicking a tile opens an explicit two-option menu instead of a hidden\n// copy-mode: each option shows exactly what will land in the clipboard.\nfunction IconTile({ name }: { name: string }) {\n  const t = useT()\n  const Icon = LUCIDE_ICON_REGISTRY[name]\n  const jsxSnippet = `<${pascalCase(name)} aria-hidden className=\"size-4\" />`\n\n  const copy = React.useCallback(async (payload: string) => {\n    try {\n      await navigator.clipboard.writeText(payload)\n      flash(t('design_system.gallery.iconCopied', 'Copied: {snippet}', { snippet: payload }), 'success')\n    } catch {\n      flash(t('design_system.gallery.copyFailed', 'Could not copy the snippet'), 'error')\n    }\n  }, [t])\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <button\n          type=\"button\"\n          className=\"flex flex-col items-center gap-1.5 rounded-md border border-transparent p-2 transition-colors hover:border-border hover:bg-muted/40 focus-visible:outline-none focus-visible:shadow-focus\"\n        >\n          <Icon aria-hidden className=\"size-5 text-foreground\" strokeWidth={1.75} />\n          <code className=\"max-w-full truncate text-[10px] leading-tight text-muted-foreground\">{name}</code>\n        </button>\n      </PopoverTrigger>\n      <PopoverContent align=\"center\" className=\"w-auto max-w-xs p-2\">\n        <div className=\"space-y-1\">\n          <PopoverClose asChild>\n            <button\n              type=\"button\"\n              onClick={() => copy(name)}\n              className=\"flex w-full flex-col items-start gap-0.5 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-muted focus-visible:outline-none focus-visible:shadow-focus\"\n            >\n              <span className=\"text-xs font-medium text-foreground\">\n                {t('design_system.gallery.iconCopyMeta', 'Copy name for page.meta icon')}\n              </span>\n              <code className=\"text-[11px] text-muted-foreground\">{name}</code>\n            </button>\n          </PopoverClose>\n          <PopoverClose asChild>\n            <button\n              type=\"button\"\n              onClick={() => copy(jsxSnippet)}\n              className=\"flex w-full flex-col items-start gap-0.5 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-muted focus-visible:outline-none focus-visible:shadow-focus\"\n            >\n              <span className=\"text-xs font-medium text-foreground\">\n                {t('design_system.gallery.iconCopyJsx', 'Copy JSX (lucide-react)')}\n              </span>\n              <code className=\"max-w-full truncate text-[11px] text-muted-foreground\">{jsxSnippet}</code>\n            </button>\n          </PopoverClose>\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nfunction IconGrid() {\n  const t = useT()\n  const [query, setQuery] = React.useState('')\n  const names = React.useMemo(() => Object.keys(LUCIDE_ICON_REGISTRY).sort((a, b) => a.localeCompare(b)), [])\n  const needle = query.trim().toLowerCase()\n  const visible = needle ? names.filter((name) => name.toLowerCase().includes(needle)) : names\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"flex flex-wrap items-center gap-3\">\n        <div className=\"max-w-sm flex-1\">\n          <SearchInput\n            value={query}\n            onChange={setQuery}\n            placeholder={t('design_system.gallery.iconSearchPlaceholder', 'Filter icons\u2026')}\n            aria-label={t('design_system.gallery.iconSearchPlaceholder', 'Filter icons\u2026')}\n          />\n        </div>\n        <p className=\"text-xs text-muted-foreground\">\n          {needle\n            ? t('design_system.gallery.iconCountFiltered', '{visible} of {total} icons', {\n                visible: visible.length,\n                total: names.length,\n              })\n            : t('design_system.gallery.iconCountAll', '{total} icons', { total: names.length })}\n        </p>\n      </div>\n      <div className=\"grid grid-cols-4 gap-1 sm:grid-cols-6 lg:grid-cols-8\">\n        {visible.map((name) => (\n          <IconTile key={name} name={name} />\n        ))}\n      </div>\n    </div>\n  )\n}\n\nconst iconRegistryEntry: GalleryEntry = {\n  id: 'icon-registry',\n  title: 'Icon registry',\n  importPath: 'lucide-react',\n  usage: {\n    do: [\n      'size-4 inside buttons, menus and inline text; size-5 in section navs and toolbars.',\n      'Always aria-hidden next to a visible label, or aria-label on icon-only controls.',\n      'Color with semantic tokens only (text-muted-foreground, text-status-*-icon).',\n      'Icon-only actions use IconButton \u2014 it ships the focus ring, sizing and the aria-label contract.',\n    ],\n    dont: [\n      'No emoji or font glyphs as icons \u2014 Lucide only.',\n      'Never convey status by icon color alone; pair with text or a label.',\n      'No hand-drawn SVGs when a Lucide icon exists.',\n    ],\n  },\n  figmaNodeId: FIGMA_ICONS_NODE,\n  variants: [\n    {\n      id: 'registry',\n      title: 'registered icons',\n      render: () => <IconGrid />,\n      code: `export const metadata = { icon: 'shapes' }`,\n    },\n    {\n      id: 'component-usage',\n      title: 'usage in components',\n      render: () => {\n        const Sample = LUCIDE_ICON_REGISTRY.search ?? Object.values(LUCIDE_ICON_REGISTRY)[0]\n        return (\n          <div className=\"flex items-center gap-4\">\n            <Sample aria-hidden className=\"size-4 text-muted-foreground\" />\n            <Sample aria-hidden className=\"size-5 text-foreground\" />\n            <Sample aria-hidden className=\"size-6 text-status-info-icon\" />\n          </div>\n        )\n      },\n      code: `import { Search } from 'lucide-react'\n\n<Search aria-hidden className=\"size-4 text-muted-foreground\" />`,\n    },\n  ],\n}\n\nexport const entries: GalleryEntry[] = [iconRegistryEntry]\n"],
+  "mappings": "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",
+  "names": []
+}