@open-mercato/core 0.7.1-develop.7203.1.9396450b78 → 0.8.1-develop.7204.1.83330e271e

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

@@ -1,10 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
 import * as React from "react";
+import { SourceFilterParts, SourceFilterPanel, SourceFilterToolbar } from "../demos/source-filters.js";
+import { sourceFilterExampleCode } from "../demos/source-filters-code.generated.js";
 import { Download } from "lucide-react";
 import { Button } from "@open-mercato/ui/primitives/button";
-import {
-  FilterBar
-} from "@open-mercato/ui/backend/FilterBar";
+import { FilterBar } from "@open-mercato/ui/backend/FilterBar";
 import { QuickFilters } from "@open-mercato/ui/backend/filters/QuickFilters";
 import { ActiveFilterChips } from "@open-mercato/ui/backend/filters/ActiveFilterChips";
 import { AdvancedFilterBuilder } from "@open-mercato/ui/backend/filters/AdvancedFilterBuilder";
@@ -12,40 +13,185 @@ import { FilterEmptyState } from "@open-mercato/ui/backend/filters/FilterEmptySt
 import { ListEmptyState } from "@open-mercato/ui/backend/filters/ListEmptyState";
 import { FilteredEmptyResults } from "@open-mercato/ui/backend/filters/FilteredEmptyResults";
 import { SearchEmptyResults } from "@open-mercato/ui/backend/filters/SearchEmptyResults";
-const demoFilterDefs = [
-  { id: "city", label: "City", type: "text", placeholder: "e.g. Berlin" },
+function FilterBarEntryTrailingItemsPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx(
+    DemoFilterBar,
+    {
+      trailingItems: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", children: [
+        /* @__PURE__ */ jsx(Download, {}),
+        t("design_system.gallery.samples.content.export")
+      ] })
+    }
+  );
+}
+function ListEmptyStateEntryWithCreateActionPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(
+    ListEmptyState,
+    {
+      entityName: t("design_system.gallery.samples.content.companies"),
+      onCreate: () => {
+      },
+      createLabel: t("design_system.gallery.samples.content.addCompany")
+    }
+  ) });
+}
+function ListEmptyStateEntryCustomCopyPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(
+    ListEmptyState,
+    {
+      title: t("design_system.gallery.samples.content.noImportsYet"),
+      description: t("design_system.gallery.samples.content.connectASourceOrUploadACsvFileToBringRecordsIn")
+    }
+  ) });
+}
+function FilteredEmptyResultsEntryFiltersOnlyPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(
+    FilteredEmptyResults,
+    {
+      entityNamePlural: t("design_system.gallery.samples.content.companies"),
+      canRemoveLast: true,
+      onClearAll: () => {
+      },
+      onRemoveLast: () => {
+      }
+    }
+  ) });
+}
+function FilteredEmptyResultsEntryWithSearchPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(
+    FilteredEmptyResults,
+    {
+      entityNamePlural: t("design_system.gallery.samples.content.companies"),
+      canRemoveLast: true,
+      onClearAll: () => {
+      },
+      onRemoveLast: () => {
+      },
+      onClearSearch: () => {
+      }
+    }
+  ) });
+}
+function SearchEmptyResultsEntryWithEntityPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "flex w-full max-w-xl justify-center", children: /* @__PURE__ */ jsx(
+    SearchEmptyResults,
+    {
+      query: "northwind",
+      entityNamePlural: t("design_system.gallery.samples.content.companies"),
+      onClearSearch: () => {
+      }
+    }
+  ) });
+}
+function QuickFiltersEntryPresetsPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(QuickFilters, { presets: demoPresets(t), userId: "user-1", onApply: () => {
+  } }) });
+}
+function QuickFiltersEntryUserScopedPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-xl flex-col gap-6", children: [
+    /* @__PURE__ */ jsx(QuickFilters, { presets: userScopedPresets(t), userId: "user-1", onApply: () => {
+    } }),
+    /* @__PURE__ */ jsx(QuickFilters, { presets: userScopedPresets(t), userId: "", onApply: () => {
+    } })
+  ] });
+}
+const demoFilterDefs = (t) => [
+  {
+    id: "city",
+    label: t("design_system.gallery.samples.content.city"),
+    type: "text",
+    placeholder: t("design_system.gallery.samples.content.eGBerlin")
+  },
   {
     id: "status",
-    label: "Status",
+    label: t("design_system.gallery.samples.content.status"),
     type: "select",
     options: [
-      { value: "active", label: "Active" },
-      { value: "prospect", label: "Prospect" },
-      { value: "churned", label: "Churned" }
+      {
+        value: "active",
+        label: t("design_system.gallery.samples.content.active")
+      },
+      {
+        value: "prospect",
+        label: t("design_system.gallery.samples.content.prospect")
+      },
+      {
+        value: "churned",
+        label: t("design_system.gallery.samples.content.churned")
+      }
     ]
   },
-  { id: "hasOpenDeals", label: "Has open deals", type: "checkbox" }
+  {
+    id: "hasOpenDeals",
+    label: t("design_system.gallery.samples.content.hasOpenDeals"),
+    type: "checkbox"
+  }
 ];
-const demoFields = [
-  { key: "name", label: "Name", type: "text" },
-  { key: "email", label: "Email", type: "text" },
+const demoFields = (t) => [
+  {
+    key: "name",
+    label: t("design_system.gallery.samples.content.name"),
+    type: "text"
+  },
+  {
+    key: "email",
+    label: t("design_system.gallery.samples.content.email"),
+    type: "text"
+  },
   {
     key: "status",
-    label: "Status",
+    label: t("design_system.gallery.samples.content.status"),
     type: "select",
     options: [
-      { value: "active", label: "Active", tone: "success" },
-      { value: "prospect", label: "Prospect", tone: "info" },
-      { value: "churned", label: "Churned", tone: "error" }
+      {
+        value: "active",
+        label: t("design_system.gallery.samples.content.active"),
+        tone: "success"
+      },
+      {
+        value: "prospect",
+        label: t("design_system.gallery.samples.content.prospect"),
+        tone: "info"
+      },
+      {
+        value: "churned",
+        label: t("design_system.gallery.samples.content.churned"),
+        tone: "error"
+      }
     ]
   },
-  { key: "employees", label: "Employees", type: "number" }
+  {
+    key: "employees",
+    label: t("design_system.gallery.samples.content.employees"),
+    type: "number"
+  }
 ];
 function rule(id, field, operator, value) {
-  return { id, type: "rule", field, operator, value };
+  return {
+    id,
+    type: "rule",
+    field,
+    operator,
+    value
+  };
 }
 function tree(children) {
-  return { root: { id: "root", type: "group", combinator: "and", children } };
+  return {
+    root: {
+      id: "root",
+      type: "group",
+      combinator: "and",
+      children
+    }
+  };
 }
 const ruleChipsTree = tree([
   rule("r1", "name", "contains", "north"),
@@ -57,10 +203,7 @@ const groupChipTree = tree([
     id: "g1",
     type: "group",
     combinator: "or",
-    children: [
-      rule("g1r1", "status", "is", "prospect"),
-      rule("g1r2", "status", "is", "churned")
-    ]
+    children: [rule("g1r1", "status", "is", "prospect"), rule("g1r2", "status", "is", "churned")]
   }
 ]);
 const valuelessChipTree = tree([rule("r4", "email", "is_empty", null)]);
@@ -71,47 +214,44 @@ const builderNestedTree = tree([
     id: "bg1",
     type: "group",
     combinator: "or",
-    children: [
-      rule("bg1r1", "status", "is", "prospect"),
-      rule("bg1r2", "employees", "greater_than", 100)
-    ]
+    children: [rule("bg1r1", "status", "is", "prospect"), rule("bg1r2", "employees", "greater_than", 100)]
   }
 ]);
-const demoPresets = [
+const demoPresets = (t) => [
   {
     id: "active-accounts",
-    labelKey: "Active accounts",
+    labelKey: t("design_system.gallery.samples.content.activeAccounts"),
     iconName: "filter",
     build: () => tree([rule("p1", "status", "is", "active")])
   },
   {
     id: "added-this-week",
-    labelKey: "Added this week",
+    labelKey: t("design_system.gallery.samples.content.addedThisWeek"),
     iconName: "clock",
     build: () => tree([rule("p2", "name", "is_not_empty", null)])
   }
 ];
-const userScopedPresets = [
-  ...demoPresets,
+const userScopedPresets = (t) => [
+  ...demoPresets(t),
   {
     id: "my-accounts",
-    labelKey: "My accounts",
+    labelKey: t("design_system.gallery.samples.content.myAccounts"),
     requiresUser: true,
     build: ({ userId }) => tree([rule("p3", "name", "contains", userId)])
   }
 ];
-function DemoFilterBar({
-  layout,
-  trailingItems
-}) {
+function DemoFilterBar({ layout, trailingItems }) {
+  const t = useT();
   const [search, setSearch] = React.useState("");
-  const [values, setValues] = React.useState({ status: "active" });
+  const [values, setValues] = React.useState({
+    status: "active"
+  });
   return /* @__PURE__ */ jsx("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ jsx(
     FilterBar,
     {
       searchValue: search,
       onSearchChange: setSearch,
-      filters: demoFilterDefs,
+      filters: demoFilterDefs(t),
       values,
       onApply: setValues,
       onClear: () => setValues({}),
@@ -121,15 +261,19 @@ function DemoFilterBar({
   ) });
 }
 function DemoActiveFilterChips({ initialTree }) {
+  const t = useT();
   const [value, setValue] = React.useState(initialTree);
   const removeNode = (id) => setValue((prev) => ({
-    root: { ...prev.root, children: prev.root.children.filter((child) => child.id !== id) }
+    root: {
+      ...prev.root,
+      children: prev.root.children.filter((child) => child.id !== id)
+    }
   }));
   return /* @__PURE__ */ jsx("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ jsx(
     ActiveFilterChips,
     {
       tree: value,
-      fields: demoFields,
+      fields: demoFields(t),
       popoverOpen: false,
       onRemoveNode: removeNode,
       onOpen: () => {
@@ -138,11 +282,12 @@ function DemoActiveFilterChips({ initialTree }) {
   ) });
 }
 function DemoAdvancedFilterBuilder({ initialTree }) {
+  const t = useT();
   const [value, setValue] = React.useState(initialTree);
   return /* @__PURE__ */ jsx("div", { className: "w-full max-w-2xl rounded-lg border bg-popover p-3", children: /* @__PURE__ */ jsx(
     AdvancedFilterBuilder,
     {
-      fields: demoFields,
+      fields: demoFields(t),
       value,
       onChange: setValue,
       onApply: () => {
@@ -152,6 +297,7 @@ function DemoAdvancedFilterBuilder({ initialTree }) {
   ) });
 }
 function DemoFilterEmptyState({ withQuickFilters }) {
+  const t = useT();
   const addConditionRef = React.useRef(null);
   return /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl rounded-lg border bg-popover", children: /* @__PURE__ */ jsx(
     FilterEmptyState,
@@ -159,7 +305,7 @@ function DemoFilterEmptyState({ withQuickFilters }) {
       onAddCondition: () => {
       },
       addConditionRef,
-      quickFilters: withQuickFilters ? /* @__PURE__ */ jsx(QuickFilters, { presets: demoPresets, userId: "user-1", onApply: () => {
+      quickFilters: withQuickFilters ? /* @__PURE__ */ jsx(QuickFilters, { presets: demoPresets(t), userId: "user-1", onApply: () => {
       } }) : void 0
     }
   ) });
@@ -208,15 +354,7 @@ const filters: FilterDef[] = [
     {
       id: "trailing-items",
       title: "With trailing items",
-      render: () => /* @__PURE__ */ jsx(
-        DemoFilterBar,
-        {
-          trailingItems: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", children: [
-            /* @__PURE__ */ jsx(Download, {}),
-            "Export"
-          ] })
-        }
-      ),
+      render: () => /* @__PURE__ */ jsx(FilterBarEntryTrailingItemsPreview, {}),
       code: `import { Download } from 'lucide-react'
 import { FilterBar } from '@open-mercato/ui/backend/FilterBar'
 import { Button } from '@open-mercato/ui/primitives/button'
@@ -240,8 +378,7 @@ const quickFiltersEntry = {
     {
       id: "presets",
       title: "Presets (used inside AdvancedFilterPanel)",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(QuickFilters, { presets: demoPresets, userId: "user-1", onApply: () => {
-      } }) }),
+      render: () => /* @__PURE__ */ jsx(QuickFiltersEntryPresetsPreview, {}),
       code: `import { QuickFilters, type FilterPreset } from '@open-mercato/ui/backend/filters/QuickFilters'
 
 const presets: FilterPreset[] = [
@@ -254,12 +391,7 @@ const presets: FilterPreset[] = [
     {
       id: "user-scoped",
       title: "User-scoped preset (hidden without userId)",
-      render: () => /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-xl flex-col gap-6", children: [
-        /* @__PURE__ */ jsx(QuickFilters, { presets: userScopedPresets, userId: "user-1", onApply: () => {
-        } }),
-        /* @__PURE__ */ jsx(QuickFilters, { presets: userScopedPresets, userId: "", onApply: () => {
-        } })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(QuickFiltersEntryUserScopedPreview, {}),
       code: `import { QuickFilters } from '@open-mercato/ui/backend/filters/QuickFilters'
 
 // Presets with requiresUser: true are hidden when userId is empty.
@@ -372,8 +504,7 @@ const listEmptyStateEntry = {
     {
       id: "with-create-action",
       title: "With create action",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(ListEmptyState, { entityName: "companies", onCreate: () => {
-      }, createLabel: "Add company" }) }),
+      render: () => /* @__PURE__ */ jsx(ListEmptyStateEntryWithCreateActionPreview, {}),
       code: `import { ListEmptyState } from '@open-mercato/ui/backend/filters/ListEmptyState'
 
 // Pass to DataTable's emptyState for the zero-records case.
@@ -382,13 +513,7 @@ const listEmptyStateEntry = {
     {
       id: "custom-copy",
       title: "Custom title and description",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(
-        ListEmptyState,
-        {
-          title: "No imports yet",
-          description: "Connect a source or upload a CSV file to bring records in."
-        }
-      ) }),
+      render: () => /* @__PURE__ */ jsx(ListEmptyStateEntryCustomCopyPreview, {}),
       code: `import { ListEmptyState } from '@open-mercato/ui/backend/filters/ListEmptyState'
 
 <ListEmptyState
@@ -406,17 +531,7 @@ const filteredEmptyResultsEntry = {
     {
       id: "filters-only",
       title: "Filters active",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(
-        FilteredEmptyResults,
-        {
-          entityNamePlural: "companies",
-          canRemoveLast: true,
-          onClearAll: () => {
-          },
-          onRemoveLast: () => {
-          }
-        }
-      ) }),
+      render: () => /* @__PURE__ */ jsx(FilteredEmptyResultsEntryFiltersOnlyPreview, {}),
       code: `import { FilteredEmptyResults } from '@open-mercato/ui/backend/filters/FilteredEmptyResults'
 
 // DataTable renders this automatically when filters match nothing.
@@ -430,19 +545,7 @@ const filteredEmptyResultsEntry = {
     {
       id: "with-search",
       title: "Search and filters active",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(
-        FilteredEmptyResults,
-        {
-          entityNamePlural: "companies",
-          canRemoveLast: true,
-          onClearAll: () => {
-          },
-          onRemoveLast: () => {
-          },
-          onClearSearch: () => {
-          }
-        }
-      ) }),
+      render: () => /* @__PURE__ */ jsx(FilteredEmptyResultsEntryWithSearchPreview, {}),
       code: `import { FilteredEmptyResults } from '@open-mercato/ui/backend/filters/FilteredEmptyResults'
 
 // Passing onClearSearch switches to combined copy and clears both at once.
@@ -474,15 +577,7 @@ const searchEmptyResultsEntry = {
     {
       id: "with-entity",
       title: "With entity label",
-      render: () => /* @__PURE__ */ jsx("div", { className: "flex w-full max-w-xl justify-center", children: /* @__PURE__ */ jsx(
-        SearchEmptyResults,
-        {
-          query: "northwind",
-          entityNamePlural: "companies",
-          onClearSearch: () => {
-          }
-        }
-      ) }),
+      render: () => /* @__PURE__ */ jsx(SearchEmptyResultsEntryWithEntityPreview, {}),
       code: `import { SearchEmptyResults } from '@open-mercato/ui/backend/filters/SearchEmptyResults'
 
 <SearchEmptyResults query={search} entityNamePlural="companies" onClearSearch={() => setSearch('')} />`
@@ -490,6 +585,39 @@ const searchEmptyResultsEntry = {
   ]
 };
 const entries = [
+  {
+    id: "filter-toolbar",
+    title: "Filter Compositions",
+    importPath: "@open-mercato/ui/primitives/filter-toolbar",
+    figmaNodeId: "4370:6018",
+    descriptionKey: "design_system.entries.filterToolbar.description",
+    variants: [
+      {
+        id: "table",
+        title: "Horizontal / table",
+        render: () => /* @__PURE__ */ jsx(SourceFilterToolbar, { type: "table" }),
+        code: sourceFilterExampleCode('<SourceFilterToolbar type="table" />')
+      },
+      {
+        id: "calendar",
+        title: "Horizontal / calendar",
+        render: () => /* @__PURE__ */ jsx(SourceFilterToolbar, { type: "calendar" }),
+        code: sourceFilterExampleCode('<SourceFilterToolbar type="calendar" />')
+      },
+      {
+        id: "vertical-parts",
+        title: "Vertical / items, header and footer",
+        render: () => /* @__PURE__ */ jsx(SourceFilterParts, {}),
+        code: sourceFilterExampleCode("<SourceFilterParts />")
+      },
+      {
+        id: "vertical-panel",
+        title: "Vertical / apply draft filters",
+        render: () => /* @__PURE__ */ jsx("div", { className: "w-[640px] max-w-full rounded-lg border border-border", children: /* @__PURE__ */ jsx(SourceFilterPanel, {}) }),
+        code: sourceFilterExampleCode("<SourceFilterPanel />")
+      }
+    ]
+  },
   filterBarEntry,
   quickFiltersEntry,
   activeFilterChipsEntry,