@gxp-dev/mod-ui 2.0.0 → 2.0.3

package/src/components/compositions/elements/{components → picker}/IconPickerInline.test.ts

@@ -7,7 +7,7 @@ describe("IconPickerInline (props-based composition)", () => {
     const wrapper = mount(IconPickerInline, {
       props: { label: "Pick an icon" },
     })
-    expect(wrapper.find("[data-testid='icon-picker-trigger']").exists()).toBe(true)
+    expect(wrapper.find("[data-testid='icon-picker-inline-trigger']").exists()).toBe(true)
     expect(wrapper.text()).toContain("Pick an icon")
   })
 
@@ -15,14 +15,14 @@ describe("IconPickerInline (props-based composition)", () => {
     const wrapper = mount(IconPickerInline, {
       props: { label: "Icon", modelValue: "Star" },
     })
-    expect(wrapper.find("[data-testid='icon-picker-trigger']").text()).toContain("Star")
+    expect(wrapper.find("[data-testid='icon-picker-inline-trigger']").text()).toContain("Star")
   })
 
   it("shows the placeholder when no model value is set", () => {
     const wrapper = mount(IconPickerInline, {
       props: { label: "Icon" },
     })
-    expect(wrapper.find("[data-testid='icon-picker-trigger']").text()).toContain(
+    expect(wrapper.find("[data-testid='icon-picker-inline-trigger']").text()).toContain(
       "Pick an icon",
     )
   })
@@ -37,15 +37,15 @@ describe("IconPickerInline (props-based composition)", () => {
     const wrapper = mount(IconPickerInline, {
       props: { label: "Pick an icon" },
     })
-    expect(wrapper.html()).toContain("icon-picker-search")
-    expect(wrapper.html()).toContain("icon-picker-grid")
+    expect(wrapper.html()).toContain("icon-picker-inline-search")
+    expect(wrapper.html()).toContain("icon-picker-inline-grid")
   })
 
   it.skip("emits update:modelValue when an icon is clicked", async () => {
     const wrapper = mount(IconPickerInline, {
       props: { label: "Pick an icon" },
     })
-    const star = wrapper.find("[data-testid='icon-picker-item-Star']")
+    const star = wrapper.find("[data-testid='icon-picker-inline-item-Star']")
     expect(star.exists()).toBe(true)
     await star.trigger("click")
     const emitted = wrapper.emitted("update:modelValue")
@@ -65,12 +65,12 @@ describe("IconPickerInline (props-based composition)", () => {
       props: { label: "Icon", disabled: true },
     })
     expect(
-      wrapper.find("[data-testid='icon-picker-trigger']").attributes("disabled"),
+      wrapper.find("[data-testid='icon-picker-inline-trigger']").attributes("disabled"),
     ).toBeDefined()
   })
 
   it("works without any props at all", () => {
     const wrapper = mount(IconPickerInline)
-    expect(wrapper.find("[data-testid='icon-picker-trigger']").exists()).toBe(true)
+    expect(wrapper.find("[data-testid='icon-picker-inline-trigger']").exists()).toBe(true)
   })
 })

package/src/components/compositions/elements/{components → picker}/IconPickerInline.vue

@@ -129,7 +129,7 @@ function onSelect(name: string): void {
           class="w-fit justify-start gap-2"
           :disabled="disabled"
           :data-element-name="name ?? undefined"
-          data-testid="icon-picker-trigger"
+          data-testid="icon-picker-inline-trigger"
         >
           <component
             :is="previewIcon"
@@ -145,13 +145,13 @@ function onSelect(name: string): void {
           <Input
             v-model="query"
             placeholder="Search icons…"
-            data-testid="icon-picker-search"
+            data-testid="icon-picker-inline-search"
             class="h-8"
           />
         </div>
         <div
           class="grid max-h-60 grid-cols-6 gap-1 overflow-auto"
-          data-testid="icon-picker-grid"
+          data-testid="icon-picker-inline-grid"
         >
           <button
             v-for="iconName in filtered"
@@ -161,7 +161,7 @@ function onSelect(name: string): void {
             :class="model === iconName ? 'border-primary bg-primary/10' : ''"
             :aria-label="iconName"
             :title="iconName"
-            :data-testid="`icon-picker-item-${iconName}`"
+            :data-testid="`icon-picker-inline-item-${iconName}`"
             @click="onSelect(iconName)"
           >
             <component :is="renderIcon(iconName)" />

package/src/components/compositions/elements/picker/IntegrationConnectorPicker.stories.ts

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import type { Connector } from "@/definitions/shared/connector"
 import IntegrationConnectorPicker from "./IntegrationConnectorPicker.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const CONNECTORS: Connector[] = [
   {
@@ -55,13 +56,14 @@ function mockConnect(delay = 500): (id: string) => Promise<void> {
 }
 
 const meta = {
-  title: "Compositions/Elements/Picker/IntegrationConnectorPicker",
+  title: "Elements/Picker/IntegrationConnectorPicker",
   component: IntegrationConnectorPicker,
   tags: ["autodocs"],
   args: {
     label: "Connector",
     onLoadConnectors: mockLoad(),
   },
+  parameters: componentDoc("IntegrationConnectorPicker", { barrel: "picker" }),
   decorators: [
     () => ({
       template: '<div class="w-96 p-4"><story /></div>',

package/src/components/compositions/elements/picker/MapPicker.stories.ts

@@ -1,13 +1,15 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import MapPicker from "./MapPicker.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
-  title: "Compositions/Elements/Picker/MapPicker",
+  title: "Elements/Picker/MapPicker",
   component: MapPicker,
   tags: ["autodocs"],
   args: {
     label: "Location",
   },
+  parameters: componentDoc("MapPicker", { barrel: "picker" }),
   decorators: [
     () => ({
       template: '<div class="w-[40rem] max-w-full p-4"><story /></div>',

package/src/components/compositions/elements/picker/TimePicker.stories.ts

@@ -1,13 +1,15 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import TimePicker from "./TimePicker.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
-  title: "Compositions/Elements/Picker/TimePicker",
+  title: "Elements/Picker/TimePicker",
   component: TimePicker,
   tags: ["autodocs"],
   args: {
     label: "Opens at",
   },
+  parameters: componentDoc("TimePicker", { barrel: "picker" }),
   decorators: [
     () => ({
       template: '<div class="w-80 p-4"><story /></div>',

package/src/components/compositions/elements/picker/TimezonePicker.stories.ts

@@ -1,13 +1,15 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import TimezonePicker from "./TimezonePicker.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
-  title: "Compositions/Elements/Picker/TimezonePicker",
+  title: "Elements/Picker/TimezonePicker",
   component: TimezonePicker,
   tags: ["autodocs"],
   args: {
     label: "Timezone",
   },
+  parameters: componentDoc("TimezonePicker", { barrel: "picker" }),
   decorators: [
     () => ({
       template: '<div class="w-96 p-4"><story /></div>',

package/src/components/ui/accordion/Accordion.stories.ts

@@ -1,10 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "."
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
   title: "UI/Accordion",
   component: Accordion,
   tags: ["autodocs"],
+  parameters: componentDoc("Accordion"),
 } satisfies Meta<typeof Accordion>
 
 export default meta

package/src/components/ui/alert/Alert.stories.ts

@@ -1,11 +1,13 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import { AlertCircle, AlertTriangle, CheckCircle, Info, Terminal } from "lucide-vue-next"
 import { Alert, AlertDescription, AlertTitle } from "."
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
   title: "UI/Alert",
   component: Alert,
   tags: ["autodocs"],
+  parameters: componentDoc("Alert"),
   argTypes: {
     variant: {
       control: "select",

package/src/components/ui/avatar/Avatar.stories.ts

@@ -1,10 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import { Avatar, AvatarFallback, AvatarImage } from "."
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
   title: "UI/Avatar",
   component: Avatar,
   tags: ["autodocs"],
+  parameters: componentDoc("Avatar"),
   argTypes: {
     size: {
       control: "select",

package/src/components/ui/badge/Badge.stories.ts

@@ -1,11 +1,13 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import { Check, Star, X } from "lucide-vue-next"
 import { Badge } from "."
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
   title: "UI/Badge",
   component: Badge,
   tags: ["autodocs"],
+  parameters: componentDoc("Badge"),
   argTypes: {
     variant: {
       control: "select",

package/src/components/ui/button/Button.stories.ts

@@ -1,11 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import { ChevronRight, Loader2, Mail, Plus } from "lucide-vue-next"
+import { componentDoc } from "@/lib/storybook"
 import { Button } from "."
 
 const meta = {
   title: "UI/Button",
   component: Button,
   tags: ["autodocs"],
+  parameters: componentDoc("Button", {
+    usage: `<Button variant="default">Click me</Button>
+<Button variant="outline"><Mail /> Email</Button>`,
+  }),
   argTypes: {
     variant: {
       control: "select",

package/src/components/ui/calendar/Calendar.stories.ts

@@ -2,11 +2,13 @@ import type { Meta, StoryObj } from "@storybook/vue3"
 import { CalendarDate, type DateValue } from "@internationalized/date"
 import { ref } from "vue"
 import { Calendar } from "."
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
   title: "UI/Calendar",
   component: Calendar,
   tags: ["autodocs"],
+  parameters: componentDoc("Calendar"),
   argTypes: {
     disabled: { control: "boolean" },
     locale: { control: "text" },

package/src/components/ui/card/Card.stories.ts

@@ -1,10 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "."
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
   title: "UI/Card",
   component: Card,
   tags: ["autodocs"],
+  parameters: componentDoc("Card"),
   argTypes: {
     variant: {
       control: "select",

package/src/components/ui/checkbox/Checkbox.stories.ts

@@ -2,11 +2,13 @@ import type { Meta, StoryObj } from "@storybook/vue3"
 import { ref } from "vue"
 import { Checkbox } from "."
 import { Label } from "../label"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
   title: "UI/Checkbox",
   component: Checkbox,
   tags: ["autodocs"],
+  parameters: componentDoc("Checkbox"),
   argTypes: {
     disabled: { control: "boolean" },
     class: { control: "text" },

package/src/components/ui/combobox/Combobox.stories.ts

@@ -12,11 +12,13 @@ import {
   ComboboxItemIndicator,
   ComboboxSeparator,
 } from "."
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
   title: "UI/Combobox",
   component: Combobox,
   tags: ["autodocs"],
+  parameters: componentDoc("Combobox"),
 } satisfies Meta<typeof Combobox>
 
 export default meta

package/src/components/ui/command/Command.stories.ts

@@ -13,11 +13,13 @@ import {
   CommandShortcut,
 } from "."
 import { Button } from "../button"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
   title: "UI/Command",
   component: Command,
   tags: ["autodocs"],
+  parameters: componentDoc("Command"),
 } satisfies Meta<typeof Command>
 
 export default meta

package/src/components/ui/dialog/Dialog.stories.ts

@@ -12,11 +12,13 @@ import {
 } from "."
 import { Button } from "../button"
 import { Input } from "../input"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
   title: "UI/Dialog",
   component: Dialog,
   tags: ["autodocs"],
+  parameters: componentDoc("Dialog"),
 } satisfies Meta<typeof Dialog>
 
 export default meta

package/src/components/ui/dropdown-menu/DropdownMenu.stories.ts

@@ -18,11 +18,13 @@ import {
   DropdownMenuTrigger,
 } from "."
 import { Button } from "../button"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
   title: "UI/DropdownMenu",
   component: DropdownMenu,
   tags: ["autodocs"],
+  parameters: componentDoc("DropdownMenu"),
 } satisfies Meta<typeof DropdownMenu>
 
 export default meta

package/src/components/ui/field-frame/FieldFrame.stories.ts

@@ -10,7 +10,7 @@ const meta = {
     docs: {
       description: {
         component:
-          "Shared chrome (label + helpText + error list) wrapped around any input-bearing slot. Used internally by every input composition.",
+          "```ts\nimport { FieldFrame } from \"@gxp-dev/mod-ui\"\n```\n\nShared chrome (label + helpText + error list) wrapped around any input-bearing slot. Used internally by every input composition.",
       },
     },
   },

package/src/components/ui/index.ts

@@ -1,14 +1,14 @@
 /**
- * Barrel for every shadcn-vue primitive shipped by @gxp-dev/adminkit.
+ * Barrel for every shadcn-vue primitive shipped by @gxp-dev/mod-ui.
  *
  * Re-exports each primitive directory's `index.ts` so consumers can
  * import everything from a single path:
  *
- *   import { Button, Input, Dialog, Toaster, toast } from "@gxp-dev/adminkit"
+ *   import { Button, Input, Dialog, Toaster, toast } from "@gxp-dev/mod-ui"
  *
  * Direct sub-path imports also work and are tree-shake-friendly:
  *
- *   import { Button } from "@gxp-dev/adminkit/components/ui/button"
+ *   import { Button } from "@gxp-dev/mod-ui/components/ui/button"
  *
  * Each primitive's directory also exports its `cva` variants
  * (e.g. `buttonVariants`) and `VariantProps` types for advanced

package/src/components/ui/input/Input.stories.ts

@@ -2,11 +2,13 @@ import type { Meta, StoryObj } from "@storybook/vue3"
 import { Mail, Search } from "lucide-vue-next"
 import { Input } from "."
 import { Label } from "../label"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
   title: "UI/Input",
   component: Input,
   tags: ["autodocs"],
+  parameters: componentDoc("Input"),
   argTypes: {
     modelValue: { control: "text", description: "Bound value." },
     defaultValue: { control: "text", description: "Initial uncontrolled value." },

package/src/components/ui/label/Label.stories.ts

@@ -2,11 +2,13 @@ import type { Meta, StoryObj } from "@storybook/vue3"
 import { Label } from "."
 import { Input } from "../input"
 import { Checkbox } from "../checkbox"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
   title: "UI/Label",
   component: Label,
   tags: ["autodocs"],
+  parameters: componentDoc("Label"),
   argTypes: {
     required: { control: "boolean", description: "Append a required asterisk." },
     for: { control: "text", description: "Associated control id." },

package/src/components/ui/popover/Popover.stories.ts

@@ -9,11 +9,13 @@ import {
 } from "."
 import { Button } from "../button"
 import { Input } from "../input"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
   title: "UI/Popover",
   component: Popover,
   tags: ["autodocs"],
+  parameters: componentDoc("Popover"),
 } satisfies Meta<typeof Popover>
 
 export default meta

package/src/components/ui/progress/Progress.stories.ts

@@ -1,10 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import { Progress } from "."
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
   title: "UI/Progress",
   component: Progress,
   tags: ["autodocs"],
+  parameters: componentDoc("Progress"),
   argTypes: {
     value: { control: { type: "range", min: 0, max: 100, step: 1 } },
     variant: {

package/src/components/ui/radio-group/RadioGroup.stories.ts

@@ -2,11 +2,13 @@ import type { Meta, StoryObj } from "@storybook/vue3"
 import { ref } from "vue"
 import { RadioGroup, RadioGroupItem } from "."
 import { Label } from "../label"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
   title: "UI/RadioGroup",
   component: RadioGroup,
   tags: ["autodocs"],
+  parameters: componentDoc("RadioGroup"),
   argTypes: {
     defaultValue: { control: "text" },
     disabled: { control: "boolean" },

package/src/components/ui/select/Select.stories.ts

@@ -10,11 +10,13 @@ import {
   SelectTrigger,
   SelectValue,
 } from "."
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
   title: "UI/Select",
   component: Select,
   tags: ["autodocs"],
+  parameters: componentDoc("Select"),
   argTypes: {
     disabled: { control: "boolean" },
   },

package/src/components/ui/separator/Separator.stories.ts

@@ -1,10 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import { Separator } from "."
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
   title: "UI/Separator",
   component: Separator,
   tags: ["autodocs"],
+  parameters: componentDoc("Separator"),
   argTypes: {
     orientation: {
       control: "select",

package/src/components/ui/sheet/Sheet.stories.ts

@@ -11,11 +11,13 @@ import {
 } from "."
 import { Button } from "../button"
 import { Input } from "../input"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
   title: "UI/Sheet",
   component: Sheet,
   tags: ["autodocs"],
+  parameters: componentDoc("Sheet"),
 } satisfies Meta<typeof Sheet>
 
 export default meta

package/src/components/ui/skeleton/Skeleton.stories.ts

@@ -1,10 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import { Skeleton } from "."
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
   title: "UI/Skeleton",
   component: Skeleton,
   tags: ["autodocs"],
+  parameters: componentDoc("Skeleton"),
 } satisfies Meta<typeof Skeleton>
 
 export default meta

package/src/components/ui/slider/Slider.stories.ts

@@ -1,11 +1,13 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import { ref } from "vue"
 import { Slider } from "."
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
   title: "UI/Slider",
   component: Slider,
   tags: ["autodocs"],
+  parameters: componentDoc("Slider"),
   argTypes: {
     size: {
       control: "select",

package/src/components/ui/switch/Switch.stories.ts

@@ -2,11 +2,13 @@ import type { Meta, StoryObj } from "@storybook/vue3"
 import { ref } from "vue"
 import { Switch } from "."
 import { Label } from "../label"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
   title: "UI/Switch",
   component: Switch,
   tags: ["autodocs"],
+  parameters: componentDoc("Switch"),
   argTypes: {
     size: { control: "select", options: ["sm", "default", "lg"] },
     disabled: { control: "boolean" },

package/src/components/ui/table/Table.stories.ts

@@ -10,11 +10,13 @@ import {
   TableHeader,
   TableRow,
 } from "."
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
   title: "UI/Table",
   component: Table,
   tags: ["autodocs"],
+  parameters: componentDoc("Table"),
 } satisfies Meta<typeof Table>
 
 export default meta

package/src/components/ui/tabs/Tabs.stories.ts

@@ -1,11 +1,13 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import { Settings, User, Wrench } from "lucide-vue-next"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "."
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
   title: "UI/Tabs",
   component: Tabs,
   tags: ["autodocs"],
+  parameters: componentDoc("Tabs"),
 } satisfies Meta<typeof Tabs>
 
 export default meta

package/src/components/ui/textarea/Textarea.stories.ts

@@ -2,11 +2,13 @@ import type { Meta, StoryObj } from "@storybook/vue3"
 import { ref } from "vue"
 import { Textarea } from "."
 import { Label } from "../label"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
   title: "UI/Textarea",
   component: Textarea,
   tags: ["autodocs"],
+  parameters: componentDoc("Textarea"),
   argTypes: {
     modelValue: { control: "text" },
     defaultValue: { control: "text" },

package/src/components/ui/toast/Toaster.stories.ts

@@ -1,11 +1,13 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import { toast, Toaster, useToast } from "."
 import { Button } from "../button"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
   title: "UI/Toast",
   component: Toaster,
   tags: ["autodocs"],
+  parameters: componentDoc("Toaster"),
   argTypes: {
     position: {
       control: "select",

package/src/components/ui/toast/index.ts

@@ -6,7 +6,7 @@ export { toast } from "vue-sonner"
 export type { ExternalToast, ToasterProps } from "vue-sonner"
 
 /**
- * Default toast options shared across the adminkit. Consumers can pass
+ * Default toast options shared across the modui. Consumers can pass
  * additional fields via the `options` argument to override these.
  */
 export const TOAST_DEFAULTS = {

package/src/components/ui/toggle/Toggle.stories.ts

@@ -1,11 +1,13 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import { Bold, Italic, Underline } from "lucide-vue-next"
 import { Toggle } from "."
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
   title: "UI/Toggle",
   component: Toggle,
   tags: ["autodocs"],
+  parameters: componentDoc("Toggle"),
   argTypes: {
     variant: {
       control: "select",

package/src/components/ui/tooltip/Tooltip.stories.ts

@@ -8,11 +8,13 @@ import {
   TooltipTrigger,
 } from "."
 import { Button } from "../button"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
   title: "UI/Tooltip",
   component: Tooltip,
   tags: ["autodocs"],
+  parameters: componentDoc("Tooltip"),
 } satisfies Meta<typeof Tooltip>
 
 export default meta

package/src/configuration-block.ts

@@ -0,0 +1,4 @@
+export { default as DialogBlock } from "./components/compositions/elements/configuration-block/DialogBlock.vue"
+export { default as ElementsBlock } from "./components/compositions/elements/configuration-block/ElementsBlock.vue"
+export { default as ModalBlock } from "./components/compositions/elements/configuration-block/ModalBlock.vue"
+export { default as RepeatableBlock } from "./components/compositions/elements/configuration-block/RepeatableBlock.vue"