@open-mercato/core 0.7.1-develop.7203.1.9396450b78 → 0.8.0

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

@@ -1,125 +1,12 @@
 import * as React from 'react'
-import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { SourceIconCatalogue, sourceIconCatalogueCode } from '../demos/source-icons'
+import { SourceArtworkCatalogue, sourceArtworkCode } from '../demos/source-artwork'
+import { IconGrid } from '../demos/registered-icons'
 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'
 import type { GalleryEntry } from '../types'
 
-// Mirrors the DS Figma icon sheet (node 2716:25504, "Lucide icons"): a plain
-// grid of outline icons with the name beneath each. The gallery shows the
-// icons REGISTERED in the string-icon registry — the set page.meta.ts `icon`
-// accepts; components import from lucide-react directly.
-
 const FIGMA_ICONS_NODE = '2716:25504'
 
-function pascalCase(registryName: string): string {
-  return registryName
-    .split(/[-_]/)
-    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
-    .join('')
-}
-
-// Clicking a tile opens an explicit two-option menu instead of a hidden
-// copy-mode: each option shows exactly what will land in the clipboard.
-function IconTile({ name }: { name: string }) {
-  const t = useT()
-  const Icon = LUCIDE_ICON_REGISTRY[name]
-  const jsxSnippet = `<${pascalCase(name)} aria-hidden className="size-4" />`
-
-  const copy = React.useCallback(async (payload: string) => {
-    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 (
-    <Popover>
-      <PopoverTrigger asChild>
-        <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"
-        >
-          <Icon aria-hidden className="size-5 text-foreground" strokeWidth={1.75} />
-          <code className="max-w-full truncate text-[10px] leading-tight text-muted-foreground">{name}</code>
-        </button>
-      </PopoverTrigger>
-      <PopoverContent align="center" className="w-auto max-w-xs p-2">
-        <div className="space-y-1">
-          <PopoverClose asChild>
-            <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"
-            >
-              <span className="text-xs font-medium text-foreground">
-                {t('design_system.gallery.iconCopyMeta', 'Copy name for page.meta icon')}
-              </span>
-              <code className="text-[11px] text-muted-foreground">{name}</code>
-            </button>
-          </PopoverClose>
-          <PopoverClose asChild>
-            <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"
-            >
-              <span className="text-xs font-medium text-foreground">
-                {t('design_system.gallery.iconCopyJsx', 'Copy JSX (lucide-react)')}
-              </span>
-              <code className="max-w-full truncate text-[11px] text-muted-foreground">{jsxSnippet}</code>
-            </button>
-          </PopoverClose>
-        </div>
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-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 (
-    <div className="space-y-4">
-      <div className="flex flex-wrap items-center gap-3">
-        <div className="max-w-sm flex-1">
-          <SearchInput
-            value={query}
-            onChange={setQuery}
-            placeholder={t('design_system.gallery.iconSearchPlaceholder', 'Filter icons…')}
-            aria-label={t('design_system.gallery.iconSearchPlaceholder', 'Filter icons…')}
-          />
-        </div>
-        <p className="text-xs text-muted-foreground">
-          {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 })}
-        </p>
-      </div>
-      <div className="grid grid-cols-4 gap-1 sm:grid-cols-6 lg:grid-cols-8">
-        {visible.map((name) => (
-          <IconTile key={name} name={name} />
-        ))}
-      </div>
-    </div>
-  )
-}
-
 const iconRegistryEntry: GalleryEntry = {
   id: 'icon-registry',
   title: 'Icon registry',
@@ -165,4 +52,31 @@ const iconRegistryEntry: GalleryEntry = {
   ],
 }
 
-export const entries: GalleryEntry[] = [iconRegistryEntry]
+const sourceIconsEntry: GalleryEntry = {
+  id: 'source-icons',
+  title: 'Source icon library',
+  importPath: '@open-mercato/ui/assets/source-icons',
+  figmaNodeId: '199678:19375',
+  descriptionKey: 'design_system.entries.sourceIcons.description',
+  variants: [
+    { id: 'catalogue', title: 'All 1667 source icons / search and copy', render: () => <SourceIconCatalogue />, code: sourceIconCatalogueCode },
+  ],
+}
+
+const sourceArtworkEntry: GalleryEntry = {
+  id: 'source-artwork',
+  title: 'Source artwork library',
+  importPath: '@open-mercato/ui/assets/source-artwork',
+  figmaNodeId: '2771:1469',
+  descriptionKey: 'design_system.gallery.sourceArtwork.description',
+  variants: [
+    { id: 'brands', title: 'Brands / 439 original logos and styles', render: () => <SourceArtworkCatalogue group="brand" />, code: sourceArtworkCode('brand') },
+    { id: 'flags', title: 'Country flags / 263 original assets', render: () => <SourceArtworkCatalogue group="country-flags" />, code: sourceArtworkCode('country-flags') },
+    { id: 'emoji', title: 'Emoji / 607 original assets', render: () => <SourceArtworkCatalogue group="emojies" />, code: sourceArtworkCode('emojies') },
+    { id: 'store-badges', title: 'Store badges / 16 original variants', render: () => <SourceArtworkCatalogue group="appstore-badges" />, code: sourceArtworkCode('appstore-badges') },
+    { id: 'thumbnails', title: 'Thumbnails / 78 component and landing illustrations', render: () => <SourceArtworkCatalogue group="thumbnails" />, code: sourceArtworkCode('thumbnails') },
+    { id: 'cursors', title: 'Cursors / 10 original assets', render: () => <SourceArtworkCatalogue group="others" />, code: sourceArtworkCode('others') },
+  ],
+}
+
+export const entries: GalleryEntry[] = [iconRegistryEntry, sourceIconsEntry, sourceArtworkEntry]

package/src/modules/design_system/gallery/entries/inputs-snippets.ts

@@ -0,0 +1,156 @@
+// Copy-paste snippets for the Inputs family. The previews render full source matrices from
+// ../demos; the snippet shows the smallest self-contained usage a developer can paste into a
+// module: real imports, literal sample text, no gallery helpers, assets or translation keys.
+
+const SPECIALISED_INPUTS_NOTE = `// Email, phone, card, website, amount, search and password have dedicated primitives:
+// EmailInput, PhoneNumberField, CardInput, WebsiteInput, AmountInput, SearchInput, PasswordInput.`
+
+export function inputFieldCode({ inputProps = '', fieldProps = '' }: { inputProps?: string; fieldProps?: string } = {}): string {
+  return `import { User } from 'lucide-react'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { FormField } from '@open-mercato/ui/primitives/form-field'
+
+<FormField label="Full name" description="Shown on invoices"${fieldProps}>
+  <Input${inputProps} leftIcon={<User />} placeholder="Alex Morgan" />
+</FormField>
+
+${SPECIALISED_INPUTS_NOTE}`
+}
+
+export const textareaFieldCode = `import { Textarea } from '@open-mercato/ui/primitives/textarea'
+import { FormField } from '@open-mercato/ui/primitives/form-field'
+
+<FormField label="Note" description="Visible to your team">
+  <Textarea appearance="source" showCount maxLength={200} placeholder="Add a note" />
+</FormField>
+
+// States: pass error="..." or disabled to FormField, and disabled to Textarea.`
+
+export function phoneNumberFieldCode(extraProps = ''): string {
+  return `import * as React from 'react'
+import { PhoneNumberField, type PhoneCountry } from '@open-mercato/ui/backend/inputs/PhoneNumberField'
+
+const countries: PhoneCountry[] = [
+  { iso2: 'US', dialCode: '+1', label: 'United States', flag: '🇺🇸' },
+  { iso2: 'PL', dialCode: '+48', label: 'Poland', flag: '🇵🇱' },
+]
+
+function PhoneExample() {
+  const [phone, setPhone] = React.useState<string | undefined>()
+  return (
+    <PhoneNumberField size={36} ariaLabel="Phone number" countryLabel="Country"
+      value={phone} onValueChange={setPhone} countries={countries}${extraProps} />
+  )
+}`
+}
+
+export function selectFieldCode({ size = 36, leading = false, selectProps = '', fieldProps = '', initialValue = 'warsaw' }: {
+  size?: 32 | 36 | 40
+  leading?: boolean
+  selectProps?: string
+  fieldProps?: string
+  initialValue?: string
+} = {}): string {
+  const leadingImport = leading ? `import { Building2 } from 'lucide-react'\n` : ''
+  const triggerImports = leading ? 'Select, SelectContent, SelectItem, SelectTrigger, SelectTriggerLeading, SelectValue' : 'Select, SelectContent, SelectItem, SelectTrigger, SelectValue'
+  const triggerLeading = leading ? `\n          <SelectTriggerLeading><Building2 aria-hidden="true" className="size-5" /></SelectTriggerLeading>` : ''
+  const itemLeading = leading ? ` leading={<Building2 aria-hidden="true" className="size-5" />}` : ''
+  return `import * as React from 'react'
+${leadingImport}import { FormField } from '@open-mercato/ui/primitives/form-field'
+import { ${triggerImports} } from '@open-mercato/ui/primitives/select'
+
+function SelectExample() {
+  const [value, setValue] = React.useState('${initialValue}')
+  return (
+    <Select value={value} onValueChange={setValue}${selectProps}>
+      <FormField label="Office" description="You can change it later"${fieldProps}>
+        <SelectTrigger size={${size}}>${triggerLeading}
+          <SelectValue placeholder="Choose an office" />
+        </SelectTrigger>
+      </FormField>
+      <SelectContent>
+        <SelectItem value="warsaw"${itemLeading}>Warsaw</SelectItem>
+        <SelectItem value="berlin"${itemLeading}>Berlin</SelectItem>
+        <SelectItem value="archive" disabled${itemLeading}>Archive</SelectItem>
+      </SelectContent>
+    </Select>
+  )
+}`
+}
+
+export function dropdownCode({ size = 36, initialQuery = '' }: { size?: 36 | 56; initialQuery?: string } = {}): string {
+  const description = size === 56 ? ` description="12 members"` : ''
+  return `import * as React from 'react'
+import { Building2, Plus } from 'lucide-react'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Dropdown, DropdownTrigger, DropdownContent, DropdownInput, DropdownList, DropdownEmpty, DropdownItem, DropdownFooter } from '@open-mercato/ui/primitives/dropdown'
+
+const workspaces = ['Warsaw', 'Berlin', 'Lisbon']
+
+function DropdownExample() {
+  const [open, setOpen] = React.useState(false)
+  const [value, setValue] = React.useState('Warsaw')
+  const [query, setQuery] = React.useState('${initialQuery}')
+  return (
+    <Dropdown open={open} onOpenChange={setOpen}>
+      <DropdownTrigger asChild><Button variant="outline">{value}</Button></DropdownTrigger>
+      <DropdownContent className="w-96 max-w-full" aria-label="Choose a workspace" commandProps={{ label: 'Workspaces' }}>
+        <DropdownInput value={query} onValueChange={setQuery} aria-label="Search workspaces" placeholder="Search workspaces" />
+        <DropdownList>
+          <DropdownEmpty>No workspaces match your search</DropdownEmpty>
+          {workspaces.map((workspace) => (
+            <DropdownItem key={workspace} value={workspace} size={${size}} checked={value === workspace}${description}
+              leading={<Building2 aria-hidden="true" className="size-5" />}
+              onSelect={() => { setValue(workspace); setOpen(false) }}>
+              {workspace}
+            </DropdownItem>
+          ))}
+        </DropdownList>
+        <DropdownFooter>
+          <Button variant="outline" size="sm" className="w-full"><Plus className="size-5" />Add workspace</Button>
+        </DropdownFooter>
+      </DropdownContent>
+    </Dropdown>
+  )
+}`
+}
+
+export function fieldLabelCode(labelProps = '', imports = ''): string {
+  return `import { FieldLabel } from '@open-mercato/ui/primitives/label'
+import { Input } from '@open-mercato/ui/primitives/input'
+${imports}
+<FieldLabel htmlFor="company-name"${labelProps}>Company name</FieldLabel>
+<Input id="company-name" />`
+}
+
+export const fieldLabelInformationCode = fieldLabelCode(
+  `\n  information={<SimpleTooltip content="Used on invoices and quotes"><CompactButton size={20} appearance="ghost" aria-label="More information"><KeyIconGlyph name="labelInformation" /></CompactButton></SimpleTooltip>}`,
+  `import { CompactButton } from '@open-mercato/ui/primitives/compact-button'
+import { SimpleTooltip } from '@open-mercato/ui/primitives/tooltip'
+import { KeyIconGlyph } from '@open-mercato/ui/primitives/key-icon'
+`,
+)
+
+export const fieldLabelActionCode = fieldLabelCode(
+  `\n  action={<LinkButton type="button" size="sm" variant="gray" onClick={openHelp}>Help</LinkButton>}`,
+  `import { LinkButton } from '@open-mercato/ui/primitives/link-button'
+`,
+)
+
+export const formFieldLabelCode = `import { FieldLabel } from '@open-mercato/ui/primitives/label'
+import { FormField } from '@open-mercato/ui/primitives/form-field'
+import { Input } from '@open-mercato/ui/primitives/input'
+
+// FormField renders FieldLabel for you: sourceLabel switches to the source layout.
+<FormField sourceLabel label="Company name" labelSublabel="(optional)" description="Used on invoices and quotes">
+  <Input />
+</FormField>`
+
+export function hintTextCode({ state, icon = true }: { state?: 'error' | 'disabled'; icon?: boolean } = {}): string {
+  const stateProp = state ? ` state="${state}"` : ''
+  const iconImport = icon ? `import { KeyIconGlyph } from '@open-mercato/ui/primitives/key-icon'\n` : ''
+  const leading = icon ? ` leading={<KeyIconGlyph name="information" />}` : ''
+  return `import { HintText } from '@open-mercato/ui/primitives/hint-text'
+${iconImport}
+<HintText${stateProp}${leading}>Used on invoices and quotes</HintText>`
+}