@citizenplane/pimp 13.0.0 → 14.0.0

package/src/stories/CpContextualMenu.stories.ts

@@ -6,7 +6,7 @@ import CpButton from '@/components/CpButton.vue'
 import CpContextualMenu from '@/components/CpContextualMenu.vue'
 
 const meta = {
-  title: 'CpContextualMenu',
+  title: 'Menu/CpContextualMenu',
   component: CpContextualMenu,
   parameters: {
     docs: {

package/src/stories/CpDate.stories.ts

@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import CpDate from '@/components/CpDate.vue'
 
 const meta = {
-  title: 'CpDate',
+  title: 'Form/CpDate',
   component: CpDate,
   argTypes: {
     size: {

package/src/stories/CpDatepicker.stories.ts

@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import CpDatepicker from '@/components/CpDatepicker.vue'
 
 const meta = {
-  title: 'CpDatepicker',
+  title: 'Form/CpDatepicker',
   component: CpDatepicker,
 
   argTypes: {

package/src/stories/CpDialog.stories.ts

@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import CpDialog from '@/components/CpDialog.vue'
 
 const meta = {
-  title: 'CpDialog',
+  title: 'Navigation/CpDialog',
   component: CpDialog,
   argTypes: {
     maxWidth: {

package/src/stories/CpHeading.stories.ts

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import CpHeading from '@/components/CpHeading.vue'
 
 const meta = {
-  title: 'CpHeading',
+  title: 'Visual/CpHeading',
   component: CpHeading,
   argTypes: {
     headingLevel: {

package/src/stories/CpIcon.stories.ts

@@ -30,7 +30,7 @@ const iconsOptions = [
 ].sort()
 
 const meta = {
-  title: 'CpIcon',
+  title: 'Visual/CpIcon',
   component: CpIcon,
   argTypes: {
     type: {

package/src/stories/CpInput.stories.ts

@@ -5,10 +5,8 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import CpIcon from '@/components/CpIcon.vue'
 import CpInput from '@/components/CpInput.vue'
 
-import { Sizes } from '@/constants'
-
 const meta = {
-  title: 'CpInput',
+  title: 'Form/CpInput',
   component: CpInput,
   argTypes: {
     modelValue: {
@@ -63,7 +61,7 @@ export const Default: Story = {
   args: {
     label: 'Input Label',
     placeholder: 'Enter text here',
-    size: Sizes.MD,
+    size: 'md',
     type: 'text',
     required: false,
     disabled: false,

package/src/stories/CpItemActions.stories.ts

@@ -6,7 +6,7 @@ import type { MenuItem } from 'primevue/menuitem'
 import CpItemActions from '@/components/CpItemActions.vue'
 
 const meta = {
-  title: 'CpItemActions',
+  title: 'Menu/CpItemActions',
   component: CpItemActions,
   argTypes: {
     actions: {

package/src/stories/CpLoader.stories.ts

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import CpLoader from '@/components/CpLoader.vue'
 
 const meta = {
-  title: 'CpLoader',
+  title: 'Visual/CpLoader',
   component: CpLoader,
   argTypes: {
     size: {

package/src/stories/CpMenuItem.stories.ts

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import CpMenuItem from '@/components/CpMenuItem.vue'
 
 const meta = {
-  title: 'CpMenuItem',
+  title: 'Menu/CpMenuItem',
   component: CpMenuItem,
   argTypes: {
     label: {

package/src/stories/CpMultiselect.stories.ts

@@ -51,7 +51,7 @@ const airlineOptions: IOption[] = [
 ]
 
 const meta = {
-  title: 'CpMultiSelect',
+  title: 'Form/CpMultiSelect',
   component: CpMultiselect,
   argTypes: {
     label: {

package/src/stories/CpPartnerBadge.stories.ts

@@ -2,10 +2,10 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 
 import CpPartnerBadge from '@/components/CpPartnerBadge.vue'
 
-import { PartnerTypes, Sizes } from '@/constants'
+import { PartnerTypes } from '@/constants'
 
 const meta = {
-  title: 'CpPartnerBadge',
+  title: 'Visual/CpPartnerBadge',
   component: CpPartnerBadge,
   parameters: {
     docs: {
@@ -27,7 +27,7 @@ const meta = {
     },
     size: {
       control: 'select',
-      options: Object.values(Sizes),
+      options: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'],
       description: 'The size of the badge',
       table: {
         type: { summary: 'string' },

package/src/stories/CpRadio.stories.ts

@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import CpRadio from '@/components/CpRadio.vue'
 
 const meta = {
-  title: 'CpRadio',
+  title: 'Form/CpRadio',
   component: CpRadio,
   argTypes: {
     modelValue: {

package/src/stories/CpSelect.stories.ts

@@ -5,10 +5,8 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import CpInput from '@/components/CpInput.vue'
 import CpSelect from '@/components/CpSelect.vue'
 
-import { Sizes } from '@/constants'
-
 const meta = {
-  title: 'CpSelect',
+  title: 'Form/CpSelect',
   component: CpSelect,
   argTypes: {
     modelValue: {
@@ -91,7 +89,7 @@ export const Default: Story = {
     disabled: false,
     isInvalid: false,
     errorMessage: '',
-    size: Sizes.MD,
+    size: 'md',
     autocomplete: 'on',
     name: 'select-field',
   },
@@ -137,14 +135,14 @@ export const Disabled: Story = {
 export const Small: Story = {
   args: {
     ...Default.args,
-    size: Sizes.SM,
+    size: 'sm',
   },
 }
 
 export const Large: Story = {
   args: {
     ...Default.args,
-    size: Sizes.LG,
+    size: 'lg',
   },
 }
 

package/src/stories/CpSelectMenu.stories.ts

@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import CpSelectMenu from '@/components/CpSelectMenu.vue'
 
 const meta = {
-  title: 'CpSelectMenu',
+  title: 'Form/CpSelectMenu',
   component: CpSelectMenu,
   argTypes: {
     values: {

package/src/stories/CpSelectableButton.stories.ts

@@ -4,10 +4,8 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 
 import CpSelectableButton from '@/components/CpSelectableButton.vue'
 
-import { Sizes } from '@/constants'
-
 const meta = {
-  title: 'CpSelectableButton',
+  title: 'Form/CpSelectableButton',
   component: CpSelectableButton,
   argTypes: {
     appearance: {
@@ -45,7 +43,7 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
   args: {
     appearance: 'primary',
-    size: Sizes.MD,
+    size: 'md',
     disabled: false,
     label: 'Label',
     isSelected: false,
@@ -69,7 +67,7 @@ export const Default: Story = {
 export const WithIcons: Story = {
   args: {
     appearance: 'primary',
-    size: Sizes.MD,
+    size: 'md',
     disabled: false,
     label: 'Label',
     isSelected: false,
@@ -100,7 +98,7 @@ export const WithIcons: Story = {
 export const FullWidth: Story = {
   args: {
     appearance: 'secondary',
-    size: Sizes.MD,
+    size: 'md',
     disabled: false,
     label: 'Label',
     isSelected: true,

package/src/stories/CpSwitch.stories.ts

@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import CpSwitch from '@/components/CpSwitch.vue'
 
 const meta = {
-  title: 'CpSwitch',
+  title: 'Form/CpSwitch',
   component: CpSwitch,
   argTypes: {
     autofocus: {

package/src/stories/CpTable.stories.ts

@@ -8,7 +8,7 @@ import CpTable from '@/components/CpTable.vue'
 import { PAGINATION_FORMATS } from '@/constants'
 
 const meta = {
-  title: 'CpTable',
+  title: 'Data display/CpTable',
   component: CpTable,
   parameters: {
     backgrounds: {

package/src/stories/CpTableEmptyState.stories.ts

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import CpTableEmptyState from '@/components/CpTableEmptyState.vue'
 
 const meta = {
-  title: 'CpTableEmptyState',
+  title: 'Data display/CpTableEmptyState',
   component: CpTableEmptyState,
   argTypes: {
     placeholder: {

package/src/stories/CpTabs.stories.ts

@@ -6,7 +6,7 @@ import type { Args, Meta, StoryObj } from '@storybook/vue3'
 import CpTabs from '@/components/CpTabs.vue'
 
 const meta = {
-  title: 'CpTabs',
+  title: 'Navigation/CpTabs',
   component: CpTabs,
   argTypes: {
     defaultActiveIndex: {

package/src/stories/CpTelInput.stories.ts

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import CpTelInput from '@/components/CpTelInput.vue'
 
 const meta = {
-  title: 'CpTelInput',
+  title: 'Form/CpTelInput',
   component: CpTelInput,
   argTypes: {
     telModel: {

package/src/stories/CpTextarea.stories.ts

@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import CpTextarea from '@/components/CpTextarea.vue'
 
 const meta = {
-  title: 'CpTextarea',
+  title: 'Form/CpTextarea',
   component: CpTextarea,
   argTypes: {
     modelValue: {

package/src/stories/CpToast.stories.ts

@@ -8,7 +8,7 @@ import { CpToastTypes } from '@/constants/CpToastTypes'
 import CpToast from '@/components/CpToast.vue'
 
 const meta: Meta<typeof CpToast> = {
-  title: 'CpToast',
+  title: 'Feedback/CpToast',
   component: CpToast,
   argTypes: {
     position: {

package/src/stories/CpTooltip.stories.ts

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import CpTooltip from '@/components/CpTooltip.vue'
 
 const meta = {
-  title: 'CpTooltip',
+  title: 'Feedback/CpTooltip',
   component: CpTooltip,
   argTypes: {
     content: {

package/src/stories/CpTransitionCounter.stories.ts

@@ -0,0 +1,66 @@
+import { computed, ref } from 'vue'
+
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import CpButton from '@/components/CpButton.vue'
+import CpIcon from '@/components/CpIcon.vue'
+import CpTransitionCounter from '@/components/CpTransitionCounter.vue'
+
+const meta = {
+  title: 'Transitions/CpTransitionCounter',
+  component: CpTransitionCounter,
+  argTypes: {
+    duration: {
+      control: { type: 'number', min: 0, max: 2000, step: 50 },
+    },
+    counterNumber: { table: { disable: true } },
+  },
+} satisfies Meta<typeof CpTransitionCounter>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const rowStyle = 'padding: 24px; display: inline-flex; align-items: center; justify-content: center; gap: 24px;'
+
+const counterTextStyle = 'font-weight: bold; font-size: 4.5rem; line-height: 1; font-variant-numeric: tabular-nums;'
+
+export const Default: Story = {
+  args: {
+    duration: 150,
+  },
+  render: (args) => ({
+    components: { CpTransitionCounter, CpButton, CpIcon },
+    setup() {
+      const count = ref(1)
+
+      const increment = () => count.value++
+      const decrement = () => {
+        if (count.value <= 0) return
+        count.value--
+      }
+
+      const isDecrementDisabled = computed(() => count.value <= 1)
+
+      return { args, count, increment, decrement, isDecrementDisabled }
+    },
+    template: `
+      <div style="${rowStyle}">
+        <CpButton appearance="tertiary" color="accent" size="lg" :disabled="isDecrementDisabled" @click="decrement">
+          <template #leading-icon>
+            <CpIcon type="minus" />
+          </template>
+        </CpButton>
+        <CpTransitionCounter :counter-number="count" :duration="args.duration">
+          <span style="${counterTextStyle}">
+            {{ count }}
+          </span>
+        </CpTransitionCounter>
+        <CpButton appearance="tertiary" color="accent" size="lg" @click="increment">
+          <template #leading-icon>
+            <CpIcon type="plus" />
+          </template>
+        </CpButton>
+      </div>
+    `,
+  }),
+}

package/src/stories/{TransitionExpand.stories.ts → CpTransitionExpand.stories.ts}

@@ -2,15 +2,15 @@ import { ref } from 'vue'
 
 import type { Meta, StoryObj } from '@storybook/vue3'
 
-import TransitionExpand from '@/components/TransitionExpand.vue'
+import CpTransitionExpand from '@/components/CpTransitionExpand.vue'
 
 const meta = {
-  title: 'TransitionExpand',
-  component: TransitionExpand,
+  title: 'Transitions/CpTransitionExpand',
+  component: CpTransitionExpand,
   argTypes: {
     // No props to document as this is a utility component
   },
-} satisfies Meta<typeof TransitionExpand>
+} satisfies Meta<typeof CpTransitionExpand>
 
 export default meta
 type Story = StoryObj<typeof meta>
@@ -19,7 +19,7 @@ const wrapperStyle = 'display: flex; flex-direction: column; align-items: center
 
 export const Default: Story = {
   render: () => ({
-    components: { TransitionExpand },
+    components: { CpTransitionExpand },
     setup() {
       const isExpanded = ref(false)
       return { isExpanded }
@@ -34,7 +34,7 @@ export const Default: Story = {
           {{ isExpanded ? 'Collapse' : 'Expand' }}
         </CpButton>
 
-        <TransitionExpand>
+        <CpTransitionExpand>
           <div v-if="isExpanded" style="
             background: #F3F4F6;
             border-radius: 6px;
@@ -42,10 +42,10 @@ export const Default: Story = {
             <h3 style="margin: 0 0 8px 0;">Expanded Content</h3>
             <p style="margin: 0;">
               This content will smoothly expand and collapse with a nice animation.
-              The height transition is handled automatically by the TransitionExpand component.
+              The height transition is handled automatically by the CpTransitionExpand component.
             </p>
           </div>
-        </TransitionExpand>
+        </CpTransitionExpand>
       </div>
     `,
   }),
@@ -53,7 +53,7 @@ export const Default: Story = {
 
 export const WithLongContent: Story = {
   render: () => ({
-    components: { TransitionExpand },
+    components: { CpTransitionExpand },
     setup() {
       const isExpanded = ref(false)
       return { isExpanded }
@@ -68,7 +68,7 @@ export const WithLongContent: Story = {
           {{ isExpanded ? 'Collapse' : 'Expand' }}
         </CpButton>
 
-        <TransitionExpand>
+        <CpTransitionExpand>
           <div v-if="isExpanded" style="
             background: #F3F4F6;
             border-radius: 6px;
@@ -80,7 +80,7 @@ export const WithLongContent: Story = {
               nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
             </p>
           </div>
-        </TransitionExpand>
+        </CpTransitionExpand>
       </div>
     `,
   }),

package/src/stories/CpTransitionListItems.stories.ts

@@ -0,0 +1,147 @@
+import { ref } from 'vue'
+
+import type { Meta, StoryObj } from '@storybook/vue3'
+import type { MenuItem } from 'primevue/menuitem'
+
+import CpButton from '@/components/CpButton.vue'
+import CpIcon from '@/components/CpIcon.vue'
+import CpItemActions from '@/components/CpItemActions.vue'
+import CpTransitionListItems from '@/components/CpTransitionListItems.vue'
+
+interface LineItem {
+  id: string
+  label: string
+}
+
+const meta = {
+  title: 'Transitions/CpTransitionListItems',
+  component: CpTransitionListItems,
+  argTypes: {
+    disableOnLoad: {
+      control: 'boolean',
+      description: 'Skips enter transition on first paint',
+    },
+  },
+} satisfies Meta<typeof CpTransitionListItems>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const rowStyle = `
+  display: flex;
+  align-items: center;
+  min-height: 48px;
+  min-width: 100%;
+  padding: 16px;
+  margin-bottom: 12px;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  background: #fff;
+  box-shadow: var(--cp-shadows-sm);
+  `
+
+const fabWrapperStyle = {
+  position: 'fixed',
+  bottom: '50px',
+  right: '50px',
+  zIndex: 2,
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '12px',
+  alignItems: 'flex-end',
+}
+
+export const Default: Story = {
+  args: {
+    disableOnLoad: false,
+  },
+  render: (args) => ({
+    components: { CpTransitionListItems, CpItemActions, CpButton, CpIcon },
+    setup() {
+      let idSeq = 0
+      const nextId = () => {
+        idSeq += 1
+        return `line-${idSeq}`
+      }
+
+      const items = ref<LineItem[]>([
+        { id: nextId(), label: 'Line 1' },
+        { id: nextId(), label: 'Line 2' },
+        { id: nextId(), label: 'Line 3' },
+      ])
+
+      const removeItem = (id: string) => {
+        items.value = items.value.filter((i) => i.id !== id)
+      }
+
+      const addLine = () => {
+        items.value.push({
+          id: nextId(),
+          label: `Line ${items.value.length + 1}`,
+        })
+      }
+
+      const shuffleItems = () => {
+        const arr = [...items.value]
+        for (let i = arr.length - 1; i > 0; i--) {
+          const j = Math.floor(Math.random() * (i + 1))
+          ;[arr[i], arr[j]] = [arr[j], arr[i]]
+        }
+        items.value = arr
+      }
+
+      const deleteActionsFor = (id: string): MenuItem[] => [
+        {
+          icon: 'trash-2',
+          label: 'Delete',
+          isCritical: true,
+          command: () => removeItem(id),
+        },
+      ]
+
+      return { args, items, addLine, shuffleItems, deleteActionsFor, rowStyle, fabWrapperStyle }
+    },
+    template: `
+      <div style="padding: 24px; min-width: 400px; min-height: 280px; padding-bottom: 120px;">
+        <div style="position: relative;">
+          <CpTransitionListItems v-bind="args">
+            <div
+              v-for="item in items"
+              :key="item.id"
+              cp-item-actions-trigger
+              :style="rowStyle"
+            >
+              <span style="font-size: 15px;">{{ item.label }}</span>
+              <CpItemActions :actions="deleteActionsFor(item.id)" style="right: var(--cp-spacing-lg)" />
+            </div>
+          </CpTransitionListItems>
+        </div>
+        <div :style="fabWrapperStyle">
+          <CpButton
+            appearance="secondary"
+            size="lg"
+            is-square
+            aria-label="Shuffle order"
+            @click="shuffleItems"
+          >
+            <template #leading-icon>
+              <CpIcon type="refresh-cw" />
+            </template>
+          </CpButton>
+          <CpButton
+            appearance="primary"
+            color="accent"
+            size="lg"
+            is-square
+            aria-label="Add line"
+            @click="addLine"
+          >
+            <template #leading-icon>
+              <CpIcon type="plus" />
+            </template>
+          </CpButton>
+        </div>
+      </div>
+    `,
+  }),
+}