@open-mercato/core 0.7.1-develop.7202.1.a52dc6707c → 0.8.0

package/dist/modules/design_system/gallery/demos/feeds.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/demos/feeds.tsx"],
+  "sourcesContent": ["import * as React from 'react'\nimport { FileText, ListFilter, MoreHorizontal, RotateCcw } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { ActivityFeed, ActivityFeedComment, ActivityFeedFileChip, ActivityFeedItem, ActivityFeedStatusChip } from '@open-mercato/ui/primitives/activity-feed'\nimport { Avatar, AvatarStack } from '@open-mercato/ui/primitives/avatar'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@open-mercato/ui/primitives/dialog'\nimport { NotificationFeed, NotificationFeedFooter, NotificationFeedHeader, NotificationFeedItem, NotificationFeedList } from '@open-mercato/ui/primitives/notification-feed'\nimport { Popover, PopoverClose, PopoverContent, PopoverTrigger } from '@open-mercato/ui/primitives/popover'\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'\nimport { Textarea } from '@open-mercato/ui/primitives/textarea'\n\nconst feedKinds = ['basic', 'file', 'comment', 'avatars', 'tasks'] as const\ntype FeedKind = typeof feedKinds[number]\nconst people: Record<FeedKind, string> = { basic: 'Wei Chen', file: 'Omar Haddad', comment: 'Laura Perez', avatars: 'Ines Kowalska', tasks: 'Ravi Patel' }\n\nfunction LocalFilePreview({ open, onOpenChange }: { open: boolean; onOpenChange: (open: boolean) => void }) {\n  const t = useT()\n  return <Dialog open={open} onOpenChange={onOpenChange}><DialogContent>\n    <DialogHeader><DialogTitle>apex-report.pdf</DialogTitle><DialogDescription>{t('design_system.gallery.samples.feeds.filePreview')}</DialogDescription></DialogHeader>\n    <p className=\"text-sm text-muted-foreground\">{t('design_system.gallery.samples.feeds.fileBody')}</p>\n  </DialogContent></Dialog>\n}\n\nexport function ActivityFeedExample() {\n  const t = useT()\n  const [filter, setFilter] = React.useState<'all' | 'file' | 'comment'>('all')\n  const [hidden, setHidden] = React.useState<FeedKind[]>([])\n  const [fileOpen, setFileOpen] = React.useState(false)\n  const [replyOpen, setReplyOpen] = React.useState(false)\n  const [draft, setDraft] = React.useState('')\n  const [reply, setReply] = React.useState('')\n  const visible = feedKinds.filter(kind => !hidden.includes(kind) && (filter === 'all' || filter === kind))\n  const title = (kind: FeedKind) => <>{people[kind]} <span className=\"font-normal text-muted-foreground\">{t(`design_system.gallery.samples.feeds.${kind}Action`)}</span></>\n  return <div className=\"w-full max-w-2xl space-y-5\">\n    <div className=\"flex flex-wrap items-center gap-1\" role=\"group\" aria-label={t('design_system.gallery.samples.feeds.filter')}>\n      {(['all', 'file', 'comment'] as const).map(value => <Button key={value} size=\"2xs\" variant=\"ghost\" aria-pressed={filter === value} onClick={() => setFilter(value)} className=\"gap-1.5 px-2.5 aria-pressed:bg-status-info-bg aria-pressed:text-status-info-text\">\n        {value === 'all' ? <ListFilter className=\"size-[18px]\" /> : value === 'file' ? <FileText className=\"size-[18px]\" /> : null}{t(`design_system.gallery.samples.feeds.${value}`)}\n      </Button>)}\n      {hidden.length ? <Button variant=\"ghost\" size=\"2xs\" onClick={() => setHidden([])}><RotateCcw />{t('design_system.gallery.samples.feeds.restore')}</Button> : null}\n    </div>\n    <ActivityFeed className=\"gap-5\">\n      {visible.map(kind => <ActivityFeedItem key={kind} className=\"gap-4 [&_[data-slot=activity-feed-item-title]]:leading-5 [&_[data-slot=activity-feed-item-title]>span:first-child]:font-medium\" avatar={<Avatar size={32} label={people[kind]} />} title={title(kind)} timestamp={t('design_system.gallery.samples.feeds.time')}\n        actions={<Popover><PopoverTrigger asChild><Button variant=\"ghost\" size=\"icon\" className=\"size-6\" aria-label={t('design_system.gallery.samples.feeds.actions', { name: people[kind] })}><MoreHorizontal /></Button></PopoverTrigger><PopoverContent align=\"end\" className=\"w-auto p-1\"><PopoverClose asChild><Button variant=\"ghost\" size=\"sm\" onClick={() => setHidden(items => [...items, kind])}>{t('design_system.gallery.samples.feeds.hide')}</Button></PopoverClose></PopoverContent></Popover>}>\n        {kind === 'file' ? <ActivityFeedFileChip name=\"apex-report.pdf\" size=\"4 MB\" onDownload={() => setFileOpen(true)} downloadAriaLabel={t('design_system.gallery.samples.feeds.openFile')} /> : null}\n        {kind === 'comment' ? <div className=\"w-full space-y-2\"><ActivityFeedComment className=\"[&_[data-slot=activity-feed-comment-body]]:whitespace-normal [&_[data-slot=activity-feed-comment-body]]:break-words\" onReply={() => setReplyOpen(value => !value)} replyLabel={t('design_system.gallery.samples.feeds.reply')}>{t('design_system.gallery.samples.feeds.commentBody')}</ActivityFeedComment>\n          {replyOpen ? <form className=\"space-y-2\" onSubmit={event => { event.preventDefault(); if (draft.trim()) { setReply(draft.trim()); setDraft(''); setReplyOpen(false) } }}><Textarea aria-label={t('design_system.gallery.samples.feeds.reply')} value={draft} onChange={event => setDraft(event.target.value)} /><Button size=\"sm\" type=\"submit\" disabled={!draft.trim()}>{t('design_system.gallery.samples.feeds.saveReply')}</Button></form> : null}\n          {reply ? <p className=\"rounded-md bg-muted p-3 text-sm\" role=\"status\">{reply}</p> : null}\n        </div> : null}\n        {kind === 'avatars' ? <div className=\"inline-flex items-center gap-1.5 rounded-full border border-border bg-background py-0.5 pl-0.5 pr-2 shadow-xs\"><AvatarStack size={24} max={3}><Avatar size={24} label=\"Wei Chen\" /><Avatar size={24} label=\"Laura Perez\" /><Avatar size={24} label=\"Omar Haddad\" /></AvatarStack><span className=\"text-xs text-muted-foreground\">+4</span></div> : null}\n        {kind === 'tasks' ? <><ActivityFeedStatusChip status=\"success\">{t('design_system.gallery.samples.feeds.approved')}</ActivityFeedStatusChip><ActivityFeedStatusChip status=\"warning\">{t('design_system.gallery.samples.feeds.review')}</ActivityFeedStatusChip><ActivityFeedStatusChip status=\"pending\">{t('design_system.gallery.samples.feeds.pending')}</ActivityFeedStatusChip><ActivityFeedStatusChip status=\"error\">{t('design_system.gallery.samples.feeds.blocked')}</ActivityFeedStatusChip></> : null}\n      </ActivityFeedItem>)}\n    </ActivityFeed>\n    {!visible.length ? <p className=\"text-sm text-muted-foreground\" role=\"status\">{t('design_system.gallery.samples.feeds.empty')}</p> : null}\n    <LocalFilePreview open={fileOpen} onOpenChange={setFileOpen} />\n  </div>\n}\n\nconst notificationKinds = ['basic', 'button', 'file', 'message'] as const\nexport function NotificationFeedExample({ tabs = 4 }: { tabs?: 2 | 3 | 4 }) {\n  const t = useT()\n  const [filter, setFilter] = React.useState('all')\n  const [archived, setArchived] = React.useState(false)\n  const [read, setRead] = React.useState(false)\n  const [decision, setDecision] = React.useState<'approved' | 'denied' | null>(null)\n  const [fileOpen, setFileOpen] = React.useState(false)\n  const filters = ['all', 'unread', 'file', 'message'].slice(0, tabs)\n  const visible = archived || (filter === 'unread' && read) ? [] : notificationKinds.filter(kind => !['file', 'message'].includes(filter) || kind === filter)\n  return <div className=\"w-full max-w-xl space-y-3\"><NotificationFeed>\n    <NotificationFeedHeader className=\"flex-wrap\" title={t('design_system.gallery.samples.feeds.notifications')}><Button size=\"2xs\" variant=\"ghost\" onClick={() => setRead(true)} disabled={read || archived}>{t('design_system.gallery.samples.feeds.markRead')}</Button></NotificationFeedHeader>\n    <Tabs value={filter} onValueChange={setFilter} variant=\"underline\"><TabsList aria-label={t('design_system.gallery.samples.feeds.filter')} className=\"w-full px-3\">{filters.map(value => <TabsTrigger key={value} value={value}>{t(`design_system.gallery.samples.feeds.${value}`)}</TabsTrigger>)}</TabsList><TabsContent value={filter} className=\"mt-0\">\n    <NotificationFeedList className=\"gap-1 divide-y-0 p-2\">\n      {visible.map(kind => <NotificationFeedItem key={kind} className=\"rounded-lg p-3 hover:bg-muted/40 [&_[data-slot=notification-feed-item-title]]:font-medium\" icon={<Avatar size={40} label=\"Wei Chen\" />} title={t(`design_system.gallery.samples.feeds.notification${kind}`)} timestamp={<>{t('design_system.gallery.samples.feeds.time')} \u00B7 Apex</>} unread={!read}>\n        {kind === 'button' ? decision ? <p className=\"text-sm\" role=\"status\">{t(`design_system.gallery.samples.feeds.${decision}`)}</p> : <><Button variant=\"outline\" size=\"sm\" onClick={() => setDecision('denied')}>{t('design_system.gallery.samples.feeds.deny')}</Button><Button variant=\"primary-filled\" size=\"sm\" onClick={() => setDecision('approved')}>{t('design_system.gallery.samples.feeds.approve')}</Button></> : null}\n        {kind === 'file' ? <ActivityFeedFileChip name=\"apex-report.pdf\" size=\"4 MB\" onDownload={() => setFileOpen(true)} downloadAriaLabel={t('design_system.gallery.samples.feeds.openFile')} /> : null}\n        {kind === 'message' ? <p className=\"rounded-md rounded-tl-sm border border-border bg-background px-3 py-2 text-sm text-muted-foreground shadow-xs\">{t('design_system.gallery.samples.feeds.messageBody')}</p> : null}\n      </NotificationFeedItem>)}\n    </NotificationFeedList>\n    {!visible.length ? <p className=\"p-5 text-center text-sm text-muted-foreground\" role=\"status\">{t('design_system.gallery.samples.feeds.empty')}</p> : null}\n    <NotificationFeedFooter><Button variant=\"outline\" size=\"sm\" className=\"w-full\" onClick={() => setArchived(true)} disabled={archived}>{t('design_system.gallery.samples.feeds.archive')}</Button></NotificationFeedFooter></TabsContent></Tabs>\n  </NotificationFeed><Button variant=\"ghost\" size=\"sm\" onClick={() => { setArchived(false); setRead(false); setDecision(null); setFilter('all') }}><RotateCcw />{t('design_system.gallery.samples.feeds.restore')}</Button><LocalFilePreview open={fileOpen} onOpenChange={setFileOpen} /></div>\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/modules/design_system/gallery/demos/file-upload.js

@@ -0,0 +1,72 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { FileUploadArea } from "@open-mercato/ui/primitives/file-upload";
+import { FileUploadCard } from "@open-mercato/ui/primitives/file-upload-card";
+import { ImageUpload } from "@open-mercato/ui/primitives/image-upload";
+import { formatAttachmentFileSize } from "@open-mercato/ui/backend/detail/AttachmentVisualPreview";
+import { uploadExampleImages } from "../assets/upload-images.js";
+function FileUploadAreaDemo({ disabled = false }) {
+  const t = useT();
+  const nextId = React.useRef(0);
+  const [files, setFiles] = React.useState([]);
+  const uploading = files.some((file) => file.progress < 100);
+  React.useEffect(() => {
+    if (!uploading) return;
+    const timer = window.setInterval(() => setFiles((current) => current.map((file) => ({ ...file, progress: Math.min(100, file.progress + 20) }))), 350);
+    return () => window.clearInterval(timer);
+  }, [uploading]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-100 max-w-full flex-col gap-3", children: [
+    /* @__PURE__ */ jsx(FileUploadArea, { disabled, onFilesSelected: (selected) => setFiles((current) => [...current, ...selected.map((file) => ({ id: nextId.current++, file, progress: 0 }))]) }),
+    files.length > 0 ? /* @__PURE__ */ jsx("p", { role: "status", className: "text-xs text-muted-foreground", children: t("design_system.gallery.samples.upload.selected", "{count} files selected", { count: files.length }) }) : null,
+    files.map((item) => /* @__PURE__ */ jsx(FileUploadCard, { fileName: item.file.name, sizeLabel: formatAttachmentFileSize(item.file.size), status: item.progress === 100 ? "success" : "uploading", progress: item.progress, onRemove: () => setFiles((current) => current.filter((file) => file.id !== item.id)) }, item.id))
+  ] });
+}
+function FileUploadCardDemo({ initialStatus, disabled = false }) {
+  const t = useT();
+  const [removed, setRemoved] = React.useState(false);
+  const [status, setStatus] = React.useState(initialStatus);
+  const [progress, setProgress] = React.useState(0);
+  const [retrying, setRetrying] = React.useState(false);
+  React.useEffect(() => {
+    if (!retrying || removed) return;
+    const timer = window.setInterval(() => setProgress((current) => Math.min(100, current + 25)), 250);
+    return () => window.clearInterval(timer);
+  }, [retrying, removed]);
+  React.useEffect(() => {
+    if (progress < 100) return;
+    setStatus("success");
+    setRetrying(false);
+  }, [progress]);
+  if (removed) return /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: () => {
+    setRemoved(false);
+    setRetrying(false);
+    setProgress(0);
+    setStatus(initialStatus);
+  }, children: t("design_system.gallery.samples.upload.reset", "Reset example") });
+  return /* @__PURE__ */ jsx(FileUploadCard, { fileName: "my-cv.pdf", sizeLabel: t(status === "success" ? "design_system.gallery.samples.upload.completeSize" : "design_system.gallery.samples.upload.size"), status, progress, disabled, onRemove: () => setRemoved(true), onRetry: () => {
+    setProgress(0);
+    setStatus("uploading");
+    setRetrying(true);
+  } });
+}
+function ImageUploadDemo({ kind, uploaded, alignment, disabled = false }) {
+  const t = useT();
+  const [source, setSource] = React.useState(uploaded ? uploadExampleImages[kind] : null);
+  const objectUrl = React.useRef(null);
+  React.useEffect(() => () => {
+    if (objectUrl.current) URL.revokeObjectURL(objectUrl.current);
+  }, []);
+  return /* @__PURE__ */ jsx(ImageUpload, { src: source, alt: t(`design_system.gallery.samples.upload.${kind}`), kind, alignment, disabled, onChange: (file) => {
+    if (objectUrl.current) URL.revokeObjectURL(objectUrl.current);
+    objectUrl.current = file ? URL.createObjectURL(file) : null;
+    setSource(objectUrl.current);
+  } });
+}
+export {
+  FileUploadAreaDemo,
+  FileUploadCardDemo,
+  ImageUploadDemo
+};
+//# sourceMappingURL=file-upload.js.map

package/dist/modules/design_system/gallery/demos/file-upload.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/demos/file-upload.tsx"],
+  "sourcesContent": ["import * as React from 'react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { FileUploadArea } from '@open-mercato/ui/primitives/file-upload'\nimport { FileUploadCard, type FileUploadStatus } from '@open-mercato/ui/primitives/file-upload-card'\nimport { ImageUpload } from '@open-mercato/ui/primitives/image-upload'\nimport { formatAttachmentFileSize } from '@open-mercato/ui/backend/detail/AttachmentVisualPreview'\nimport { uploadExampleImages } from '../assets/upload-images'\n\ntype QueueFile = { id: number; file: File; progress: number }\n\nexport function FileUploadAreaDemo({ disabled = false }: { disabled?: boolean }) {\n  const t = useT()\n  const nextId = React.useRef(0)\n  const [files, setFiles] = React.useState<QueueFile[]>([])\n  const uploading = files.some(file => file.progress < 100)\n  React.useEffect(() => {\n    if (!uploading) return\n    const timer = window.setInterval(() => setFiles(current => current.map(file => ({ ...file, progress: Math.min(100, file.progress + 20) }))), 350)\n    return () => window.clearInterval(timer)\n  }, [uploading])\n  return (\n    <div className=\"flex w-100 max-w-full flex-col gap-3\">\n      <FileUploadArea disabled={disabled} onFilesSelected={selected => setFiles(current => [...current, ...selected.map(file => ({ id: nextId.current++, file, progress: 0 }))])} />\n      {files.length > 0 ? <p role=\"status\" className=\"text-xs text-muted-foreground\">{t('design_system.gallery.samples.upload.selected', '{count} files selected', { count: files.length })}</p> : null}\n      {files.map(item => <FileUploadCard key={item.id} fileName={item.file.name} sizeLabel={formatAttachmentFileSize(item.file.size)} status={item.progress === 100 ? 'success' : 'uploading'} progress={item.progress} onRemove={() => setFiles(current => current.filter(file => file.id !== item.id))} />)}\n    </div>\n  )\n}\n\nexport function FileUploadCardDemo({ initialStatus, disabled = false }: { initialStatus: FileUploadStatus; disabled?: boolean }) {\n  const t = useT()\n  const [removed, setRemoved] = React.useState(false)\n  const [status, setStatus] = React.useState(initialStatus)\n  const [progress, setProgress] = React.useState(0)\n  const [retrying, setRetrying] = React.useState(false)\n  React.useEffect(() => {\n    if (!retrying || removed) return\n    const timer = window.setInterval(() => setProgress(current => Math.min(100, current + 25)), 250)\n    return () => window.clearInterval(timer)\n  }, [retrying, removed])\n  React.useEffect(() => {\n    if (progress < 100) return\n    setStatus('success')\n    setRetrying(false)\n  }, [progress])\n  if (removed) return <Button variant=\"outline\" size=\"sm\" onClick={() => { setRemoved(false); setRetrying(false); setProgress(0); setStatus(initialStatus) }}>{t('design_system.gallery.samples.upload.reset', 'Reset example')}</Button>\n  return <FileUploadCard fileName=\"my-cv.pdf\" sizeLabel={t(status === 'success' ? 'design_system.gallery.samples.upload.completeSize' : 'design_system.gallery.samples.upload.size')} status={status} progress={progress} disabled={disabled} onRemove={() => setRemoved(true)} onRetry={() => { setProgress(0); setStatus('uploading'); setRetrying(true) }} />\n}\n\nexport function ImageUploadDemo({ kind, uploaded, alignment, disabled = false }: { kind: 'avatar' | 'company'; uploaded: boolean; alignment: 'vertical' | 'horizontal'; disabled?: boolean }) {\n  const t = useT()\n  const [source, setSource] = React.useState<string | null>(uploaded ? uploadExampleImages[kind] : null)\n  const objectUrl = React.useRef<string | null>(null)\n  React.useEffect(() => () => { if (objectUrl.current) URL.revokeObjectURL(objectUrl.current) }, [])\n  return <ImageUpload src={source} alt={t(`design_system.gallery.samples.upload.${kind}`)} kind={kind} alignment={alignment} disabled={disabled} onChange={file => {\n    if (objectUrl.current) URL.revokeObjectURL(objectUrl.current)\n    objectUrl.current = file ? URL.createObjectURL(file) : null\n    setSource(objectUrl.current)\n  }} />\n}\n"],
+  "mappings": "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",
+  "names": []
+}