@citizenplane/pimp 17.0.13 → 18.0.0

package/src/stories/CpMenu.stories.ts

@@ -0,0 +1,149 @@
+import { computed, ref } from 'vue'
+
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import CpButton from '@/components/CpButton.vue'
+import CpMenu from '@/components/CpMenu.vue'
+
+const meta = {
+  title: 'Molecules/CpMenu',
+  component: CpMenu,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A popover-based menu built on top of `primevue/popover`. The trigger is provided through the `trigger` slot — clicking it toggles the menu, which is anchored to the trigger element. Items can be passed through the `items` prop (with icons, separators, async commands, critical styling) or rendered via the default slot for arbitrary content.',
+      },
+    },
+  },
+  argTypes: {
+    items: {
+      control: 'object',
+      description: 'The menu items to display. Each item is a PrimeVue `MenuItem`.',
+      table: {
+        type: { summary: 'MenuItem[]' },
+        defaultValue: { summary: '[]' },
+      },
+    },
+    forcePopover: {
+      control: 'boolean',
+      description: 'Disable the bottom-drawer behavior on mobile and keep the popover anchored to the trigger.',
+      table: { defaultValue: { summary: 'false' } },
+    },
+    keepOpenOnClick: {
+      control: 'boolean',
+      description: 'Keep the menu open when clicking an item.',
+      table: { defaultValue: { summary: 'false' } },
+    },
+  },
+  decorators: [() => ({ template: '<div style="min-height: 60vh; padding: 80px;"><story /></div>' })],
+} satisfies Meta<typeof CpMenu>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+/**
+ * Click the trigger to toggle a menu featuring an async "Download" action,
+ * a separator and a critical "Delete" action.
+ */
+export const Default: Story = {
+  render: () => ({
+    components: { CpButton, CpMenu },
+    setup() {
+      const isLoading = ref(false)
+
+      const items = computed(() => [
+        {
+          label: 'Edit',
+          leadingIcon: 'edit',
+          command: () => alert('Edit clicked'),
+        },
+        {
+          label: 'Download',
+          leadingIcon: 'download',
+          isLoading: isLoading.value,
+          isAsync: true,
+          command: async () => {
+            isLoading.value = true
+            await new Promise((resolve) => setTimeout(resolve, 2000))
+            isLoading.value = false
+          },
+        },
+        { separator: true },
+        {
+          label: 'Delete',
+          leadingIcon: 'trash-2',
+          isCritical: true,
+          command: () => alert('Delete clicked'),
+        },
+      ])
+
+      return { items }
+    },
+    template: `
+      <CpMenu :items="items" class="defaultMenu">
+        <template #trigger>
+          <CpButton>Open menu</CpButton>
+        </template>
+      </CpMenu>
+    `,
+  }),
+}
+
+/**
+ * With `forcePopover`, the menu stays anchored to its trigger even on
+ * mobile viewports — the bottom-drawer behavior (slide-up, backdrop,
+ * swipe-to-dismiss) is disabled. Use it when the popover content is
+ * compact and you don't want a fullscreen-ish drawer.
+ */
+export const ForcePopoverOnMobile: Story = {
+  args: {
+    forcePopover: true,
+  },
+  render: (args) => ({
+    components: { CpButton, CpMenu },
+    setup() {
+      const items = [
+        { label: 'Edit', leadingIcon: 'edit', command: () => alert('Edit clicked') },
+        { label: 'Duplicate', leadingIcon: 'copy', command: () => alert('Duplicate clicked') },
+        { separator: true },
+        { label: 'Delete', leadingIcon: 'trash-2', isCritical: true, command: () => alert('Delete clicked') },
+      ]
+      return { args, items }
+    },
+    template: `
+      <CpMenu v-bind="args" :items="items">
+        <template #trigger>
+          <CpButton>Open menu</CpButton>
+        </template>
+      </CpMenu>
+    `,
+  }),
+}
+
+/**
+ * Use the default slot to render arbitrary content inside the popover —
+ * useful for forms, share panels, filters, etc.
+ */
+export const CustomContent: Story = {
+  render: () => ({
+    components: { CpButton, CpMenu },
+    template: `
+      <CpMenu>
+        <template #trigger>
+          <CpButton>Share</CpButton>
+        </template>
+        <div style="display: flex; flex-direction: column; gap: 12px; padding: 16px; min-width: 260px;">
+          <strong>Share this document</strong>
+          <input
+            value="https://example.com/doc/abc"
+            readonly
+            style="padding: 6px 8px; border: 1px solid #ccc; border-radius: 6px;"
+          />
+          <CpButton>Copy link</CpButton>
+        </div>
+      </CpMenu>
+    `,
+  }),
+}

package/src/stories/CpMenuItem.stories.ts

@@ -1,83 +1,184 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref, computed } from 'vue'
 
+import type { Args, Meta, StoryObj } from '@storybook/vue3-vite'
+
+import CpButton from '@/components/CpButton.vue'
+import CpIcon from '@/components/CpIcon.vue'
+import CpMenu from '@/components/CpMenu.vue'
 import CpMenuItem from '@/components/CpMenuItem.vue'
 
-import { docLabelStyle, docRowColumnStyle } from '@/stories/documentationStyles'
+import { docCellStyle, docLabelStyle, docRowWrapStyle } from '@/stories/documentationStyles'
 
-const menuItemCellStyle = 'display: flex; flex-direction: column; gap: 8px; width: 260px;'
-const menuItemFrameStyle = 'width: 260px; border: 1px solid #e5e5e5; border-radius: 8px;'
+const menuContainerStyle =
+  'display: flex; flex-direction: column; background: var(--cp-background-primary); border: 1px solid var(--cp-border-secondary, #e5e7eb); border-radius: 8px; padding: 4px 0; min-width: 240px;'
 
 const meta = {
   title: 'Atoms/CpMenuItem',
   component: CpMenuItem,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A single menu entry, typically used inside `CpMenu`. Renders a button with a leading and/or trailing icon, a label, and supports loading, critical, selected and disabled states. Sync and async commands are both supported through the `command` prop (set `isAsync` to keep the menu open and surface a loader while the promise resolves).',
+      },
+    },
+  },
   argTypes: {
     label: {
       control: 'text',
-      description: 'Label text for the menu item',
+      description: 'The text displayed inside the item.',
     },
-    icon: {
+    leadingIcon: {
       control: 'text',
-      description: 'Icon name',
+      description: 'Icon name displayed before the label. Overridden by the `leading-icon` slot.',
     },
-    isDisabled: {
-      control: 'boolean',
-      description: 'Whether the menu item is disabled',
+    trailingIcon: {
+      control: 'text',
+      description: 'Icon name displayed after the label. Overridden by the `trailing-icon` slot.',
+    },
+    tooltip: {
+      control: 'text',
+      description: 'Optional tooltip text shown on hover/focus of the label.',
     },
     isCritical: {
       control: 'boolean',
-      description: 'Whether the menu item is critical',
+      description: 'Render the item with a destructive (red) styling.',
     },
     isLoading: {
       control: 'boolean',
-      description: 'Whether the menu item is loading',
+      description: 'Show a loader in place of the leading icon and disable the item.',
     },
-    isAsync: {
+    isSelected: {
       control: 'boolean',
-      description: 'Whether the command is async',
+      description: 'Initial selected state. Toggled internally when clicked.',
     },
-    reverseLabel: {
+    isAsync: {
       control: 'boolean',
-      description: 'Whether to reverse icon/label order',
+      description:
+        'When the `command` returns a promise, set this to keep the parent menu open and emit `onAsyncCommandComplete` once it resolves.',
     },
-    hideLabel: {
+    disabled: {
       control: 'boolean',
-      description: 'Whether to hide the label',
-    },
-    tooltip: {
-      control: 'text',
-      description: 'Tooltip text',
+      description: 'Disable interactions and apply a muted style.',
     },
   },
-  tags: ['autodocs'],
+  decorators: [
+    () => ({
+      template: '<div style="padding: 16px;"><story /></div>',
+    }),
+  ],
 } satisfies Meta<typeof CpMenuItem>
 
 export default meta
+
 type Story = StoryObj<typeof meta>
 
+const defaultRender = (args: Args) => ({
+  components: { CpMenuItem },
+  setup() {
+    return { args, menuContainerStyle }
+  },
+  template: `
+    <div :style="menuContainerStyle">
+      <CpMenuItem v-bind="args" />
+    </div>
+  `,
+})
+
 /**
- * Default menu item. Use the controls to experiment with each prop in isolation.
+ * Default item: a label with a leading icon. Click it to see the selected
+ * state toggle briefly before resetting.
  */
 export const Default: Story = {
   args: {
-    label: 'Edit',
-    icon: 'edit-3',
-    isDisabled: false,
+    label: 'Menu item',
+    leadingIcon: 'edit',
     isCritical: false,
     isLoading: false,
-    isAsync: false,
-    reverseLabel: false,
-    hideLabel: false,
-    tooltip: '',
-    command: () => alert('Edit clicked'),
+    isSelected: false,
+    disabled: false,
   },
-  render: (args) => ({
+  render: defaultRender,
+}
+
+/* -------------------------------------------------------------------------- */
+/* Icons                                                                      */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Different icon configurations: leading only, trailing only, both or none.
+ */
+export const Icons: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => ({
     components: { CpMenuItem },
     setup() {
-      return { args }
+      return { docCellStyle, docLabelStyle, docRowWrapStyle, menuContainerStyle }
     },
     template: `
-      <div style="width: 260px; border: 1px solid #e5e5e5; border-radius: 8px;">
-        <CpMenuItem v-bind="args" />
+      <div :style="docRowWrapStyle">
+        <div :style="docCellStyle">
+          <span :style="docLabelStyle">Leading</span>
+          <div :style="menuContainerStyle">
+            <CpMenuItem label="Edit" leading-icon="edit" />
+          </div>
+        </div>
+        <div :style="docCellStyle">
+          <span :style="docLabelStyle">Trailing</span>
+          <div :style="menuContainerStyle">
+            <CpMenuItem label="Open" trailing-icon="external-link" />
+          </div>
+        </div>
+        <div :style="docCellStyle">
+          <span :style="docLabelStyle">Both</span>
+          <div :style="menuContainerStyle">
+            <CpMenuItem label="Settings" leading-icon="settings" trailing-icon="chevron-right" />
+          </div>
+        </div>
+        <div :style="docCellStyle">
+          <span :style="docLabelStyle">No icon</span>
+          <div :style="menuContainerStyle">
+            <CpMenuItem label="Plain item" />
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+}
+
+/**
+ * The `leading-icon` and `trailing-icon` slots let you render arbitrary
+ * content (custom icons, badges, indicators...) instead of the default
+ * `CpIcon` rendered from the `leadingIcon` / `trailingIcon` props.
+ */
+export const CustomIconSlots: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => ({
+    components: { CpMenuItem, CpIcon },
+    setup() {
+      return { menuContainerStyle }
+    },
+    template: `
+      <div :style="menuContainerStyle">
+        <CpMenuItem label="With custom slots">
+          <template #leading-icon>
+            <span style="
+              display: inline-flex;
+              align-items: center;
+              justify-content: center;
+              width: 16px;
+              height: 16px;
+              border-radius: 999px;
+              background: var(--cp-background-accent-solid, #2563eb);
+              color: white;
+              font-size: 10px;
+              font-weight: 600;
+            ">A</span>
+          </template>
+          <template #trailing-icon>
+            <span style="font-size: 11px; color: var(--cp-foreground-secondary);">⌘K</span>
+          </template>
+        </CpMenuItem>
       </div>
     `,
   }),
@@ -88,43 +189,216 @@ export const Default: Story = {
 /* -------------------------------------------------------------------------- */
 
 /**
- * Every state available for a menu item: default, critical (destructive),
- * disabled and loading.
+ * The interactive states side by side: default, plus the explicit `disabled`,
+ * `isLoading`, `isSelected` and `isCritical` states. Hover/focus is shown by
+ * interacting with each item.
  */
 export const States: Story = {
   parameters: { controls: { disable: true } },
   render: () => ({
     components: { CpMenuItem },
     setup() {
-      return { docRowColumnStyle, menuItemCellStyle, menuItemFrameStyle, docLabelStyle }
+      return { docCellStyle, docLabelStyle, docRowWrapStyle, menuContainerStyle }
     },
     template: `
-      <div :style="docRowColumnStyle">
-        <div :style="menuItemCellStyle">
+      <div :style="docRowWrapStyle">
+        <div :style="docCellStyle">
           <span :style="docLabelStyle">Default</span>
-          <div :style="menuItemFrameStyle">
-            <CpMenuItem label="Edit" icon="edit-3" />
+          <div :style="menuContainerStyle">
+            <CpMenuItem label="Default" leading-icon="edit" />
           </div>
         </div>
-        <div :style="menuItemCellStyle">
-          <span :style="docLabelStyle">Critical</span>
-          <div :style="menuItemFrameStyle">
-            <CpMenuItem label="Delete" icon="trash-2" :is-critical="true" />
+        <div :style="docCellStyle">
+          <span :style="docLabelStyle">Disabled</span>
+          <div :style="menuContainerStyle">
+            <CpMenuItem label="Disabled" leading-icon="edit" :disabled="true" />
           </div>
         </div>
-        <div :style="menuItemCellStyle">
-          <span :style="docLabelStyle">Disabled</span>
-          <div :style="menuItemFrameStyle">
-            <CpMenuItem label="Archive" icon="archive" :is-disabled="true" />
+        <div :style="docCellStyle">
+          <span :style="docLabelStyle">Critical</span>
+          <div :style="menuContainerStyle">
+            <CpMenuItem label="Delete" leading-icon="trash-2" :is-critical="true" />
           </div>
         </div>
-        <div :style="menuItemCellStyle">
+        <div :style="docCellStyle">
           <span :style="docLabelStyle">Loading</span>
-          <div :style="menuItemFrameStyle">
-            <CpMenuItem label="Download" icon="download" :is-loading="true" />
+          <div :style="menuContainerStyle">
+            <CpMenuItem label="Loading" leading-icon="edit" :is-loading="true" />
           </div>
         </div>
+        <div :style="docCellStyle">
+          <span :style="docLabelStyle">Selected</span>
+          <div :style="menuContainerStyle">
+            <CpMenuItem label="Selected" leading-icon="check" :is-selected="true" />
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+}
+
+/* -------------------------------------------------------------------------- */
+/* Tooltip                                                                    */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Hover the label to see the tooltip — useful when the label is truncated or
+ * when extra context is needed without taking visual space.
+ */
+export const WithTooltip: Story = {
+  args: {
+    label: 'Hover me for more details',
+    leadingIcon: 'info',
+    tooltip: 'Here is some additional context shown on hover.',
+  },
+  render: defaultRender,
+}
+
+/* -------------------------------------------------------------------------- */
+/* Commands                                                                   */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Sync command: the `command` callback is invoked on click, then the `click`
+ * event is emitted so the parent (`CpMenu`/`CpMenuList`) can react (e.g.
+ * close the menu).
+ */
+export const SyncCommand: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => ({
+    components: { CpMenuItem },
+    setup() {
+      const lastAction = ref<string>('—')
+      const onCommand = () => {
+        lastAction.value = `Clicked at ${new Date().toLocaleTimeString()}`
+      }
+      return { lastAction, onCommand, menuContainerStyle }
+    },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 12px;">
+        <div :style="menuContainerStyle">
+          <CpMenuItem label="Run command" leading-icon="zap" :command="onCommand" />
+        </div>
+        <span style="font-size: 12px; color: var(--cp-foreground-secondary);">Last action: {{ lastAction }}</span>
       </div>
     `,
   }),
 }
+
+/**
+ * Async command: combine `isAsync` with a returning promise to display a
+ * loader while the command resolves. The component automatically toggles
+ * `isLoading` from outside in this example. `onAsyncCommandComplete` is
+ * emitted once the promise settles.
+ */
+export const AsyncCommand: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => ({
+    components: { CpMenuItem },
+    setup() {
+      const isLoading = ref(false)
+      const completedCount = ref(0)
+
+      const onCommand = async () => {
+        isLoading.value = true
+        await new Promise((resolve) => setTimeout(resolve, 1500))
+        isLoading.value = false
+      }
+
+      const onAsyncCommandComplete = () => {
+        completedCount.value += 1
+      }
+
+      return { isLoading, completedCount, onCommand, onAsyncCommandComplete, menuContainerStyle }
+    },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 12px;">
+        <div :style="menuContainerStyle">
+          <CpMenuItem
+            label="Download report"
+            leading-icon="download"
+            :is-async="true"
+            :is-loading="isLoading"
+            :command="onCommand"
+            @on-async-command-complete="onAsyncCommandComplete"
+          />
+        </div>
+        <span style="font-size: 12px; color: var(--cp-foreground-secondary);">
+          Completed {{ completedCount }} time(s)
+        </span>
+      </div>
+    `,
+  }),
+}
+
+/* -------------------------------------------------------------------------- */
+/* Composition                                                                */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Several `CpMenuItem`s stacked together to mimic a typical menu layout.
+ * In real apps this is usually wrapped by `CpMenu` / `CpMenuList`, but the
+ * primitive composes on its own too.
+ */
+export const InCpMenu: Story = {
+  render: () => ({
+    components: { CpButton, CpMenu },
+    setup() {
+      const isLoading = ref(false)
+
+      const onClick = () => alert('Clicked')
+
+      const items = computed(() => [
+        {
+          label: 'Sync',
+          leadingIcon: 'edit',
+          command: onClick,
+        },
+        {
+          label: 'Async',
+          leadingIcon: 'download',
+          isLoading: isLoading.value,
+          isAsync: true,
+          command: async () => {
+            isLoading.value = true
+            await new Promise((resolve) => setTimeout(resolve, 2000))
+            isLoading.value = false
+          },
+        },
+        { separator: true },
+        {
+          label: 'Critical',
+          leadingIcon: 'trash-2',
+          isCritical: true,
+          command: onClick,
+        },
+        {
+          label: 'Disabled',
+          leadingIcon: 'edit',
+          disabled: true,
+          command: onClick,
+        },
+        {
+          label: 'Selected',
+          leadingIcon: 'check',
+          isSelected: true,
+          command: onClick,
+        },
+        {
+          label: 'Loading',
+          isLoading: true,
+          command: onClick,
+        },
+      ])
+
+      return { items }
+    },
+    template: `
+      <CpMenu :items="items" class="defaultMenu">
+        <template #trigger>
+          <CpButton>Open menu</CpButton>
+        </template>
+      </CpMenu>
+    `,
+  }),
+}