@citizenplane/pimp 8.11.3 → 8.13.0

package/src/stories/CpToaster.stories.ts

@@ -0,0 +1,147 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import CpToaster from '@/components/feedback-indicators/CpToaster.vue'
+
+const meta = {
+  title: 'CpToaster',
+  component: CpToaster,
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'The title of the toast',
+    },
+    description: {
+      control: 'text',
+      description: 'The description of the toast',
+    },
+    type: {
+      control: 'select',
+      options: ['info', 'warning', 'success', 'critical'],
+      description: 'The type of the toast',
+    },
+    delayBeforeCloseInMs: {
+      control: 'number',
+      description: 'Duration in milliseconds before the toast disappears',
+    },
+    actionLabel: {
+      control: 'text',
+      description: 'Label for the action button',
+    },
+    isUnique: {
+      control: 'boolean',
+      description: 'Whether the toast should be unique',
+    },
+  },
+} satisfies Meta<typeof CpToaster>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    title: 'Default Toast',
+    description: 'This is a default toast message',
+    type: 'info',
+    delayBeforeCloseInMs: 3000,
+    actionLabel: '',
+    isUnique: false,
+  },
+  render: (args) => ({
+    template: `
+      <div style="padding: 20px;">
+        <cp-button @click="addInfoToaster">Show Info Toast</cp-button>
+      </div>
+    `,
+    methods: {
+      addInfoToaster() {
+        this.$toaster.info({ ...args })
+      },
+    },
+  }),
+}
+
+export const DifferentTypes: Story = {
+  render: () => ({
+    template: `
+      <div style="padding: 20px; display: flex; flex-direction: column; gap: 16px;">
+        <cp-button @click="addInfoToaster">Show Info Toast</cp-button>
+        <cp-button @click="addSuccessToaster">Show Success Toast</cp-button>
+        <cp-button @click="addWarningToaster">Show Warning Toast</cp-button>
+        <cp-button @click="addCriticalToaster">Show Critical Toast</cp-button>
+      </div>
+    `,
+    methods: {
+      addInfoToaster() {
+        this.$toaster.info({
+          title: 'This is an info toaster',
+          description: 'This a description of a toaster',
+          isUnique: true,
+        })
+      },
+      addSuccessToaster() {
+        this.$toaster.success({
+          title: 'This is a success toaster',
+          description: 'This a description of a toaster',
+          isUnique: true,
+        })
+      },
+      addWarningToaster() {
+        this.$toaster.warning({
+          title: 'This is a warning toaster',
+          description: 'This a description of a toaster',
+          isUnique: true,
+        })
+      },
+      addCriticalToaster() {
+        this.$toaster.critical({
+          title: 'This is a critical toaster',
+          description: 'This a description of a toaster',
+          isUnique: true,
+        })
+      },
+    },
+  }),
+}
+
+export const WithAction: Story = {
+  render: () => ({
+    template: `
+      <div style="padding: 20px;">
+        <cp-button @click="addLinkToaster">Show Toast with Action</cp-button>
+      </div>
+    `,
+    methods: {
+      addLinkToaster() {
+        this.$toaster.success({
+          title: 'This is a success toaster',
+          description: 'Description of a toaster with a link',
+          actionLabel: 'See flight information',
+          isUnique: true,
+          actionMethod: (vm) => {
+            vm.closeToaster()
+            window.open('http://app.citizenplane.com', '_blank')
+          },
+        })
+      },
+    },
+  }),
+}
+
+export const CustomDuration: Story = {
+  render: () => ({
+    template: `
+      <div style="padding: 20px;">
+        <cp-button @click="addLongDurationToaster">Show Long Duration Toast</cp-button>
+      </div>
+    `,
+    methods: {
+      addLongDurationToaster() {
+        this.$toaster.info({
+          title: 'Long Duration Toast',
+          description: 'This toast will stay for 10 seconds',
+          delayBeforeCloseInMs: 10000,
+          isUnique: true,
+        })
+      },
+    },
+  }),
+}

package/src/stories/CpTooltip.stories.ts

@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import CpTooltip from '@/components/atomic-elements/CpTooltip.vue'
+
+const meta = {
+  title: 'CpTooltip',
+  component: CpTooltip,
+  argTypes: {
+    content: {
+      control: 'text',
+      description: 'The content to display in the tooltip',
+    },
+    placement: {
+      control: 'select',
+      options: ['top', 'right', 'bottom', 'left'],
+      description: 'The placement of the tooltip',
+    },
+    distance: {
+      control: 'number',
+      description: 'The distance between the tooltip and the target',
+    },
+  },
+} satisfies Meta<typeof CpTooltip>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    content: 'Tooltip content',
+    placement: 'top',
+    distance: 8,
+  },
+  render: (args) => ({
+    components: { CpTooltip },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="padding: 100px; text-align: center;">
+        <CpTooltip v-bind="args">
+          <button>Hover me</button>
+        </CpTooltip>
+      </div>
+    `,
+  }),
+}
+
+export const AllPlacements: Story = {
+  render: (args) => ({
+    components: { CpTooltip },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 20px; padding: 100px;">
+        <div>
+          <CpTooltip content="Top tooltip" placement="top">
+            <button>Top</button>
+          </CpTooltip>
+        </div>
+        <div>
+          <CpTooltip content="Right tooltip" placement="right">
+            <button>Right</button>
+          </CpTooltip>
+        </div>
+        <div>
+          <CpTooltip content="Bottom tooltip" placement="bottom">
+            <button>Bottom</button>
+          </CpTooltip>
+        </div>
+        <div>
+          <CpTooltip content="Left tooltip" placement="left">
+            <button>Left</button>
+          </CpTooltip>
+        </div>
+      </div>
+    `,
+  }),
+}
+
+export const WithHTMLContent: Story = {
+  args: {
+    placement: 'top',
+  },
+  render: (args) => ({
+    components: { CpTooltip },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="padding: 100px; text-align: center;">
+        <CpTooltip v-bind="args">
+          <button type="button">Trigger HTML content</button>
+          <template #content>
+            <p>HTML <b>Content</b> and <u>underlined</u></p>
+          </template>
+        </CpTooltip>
+      </div>
+    `,
+  }),
+}

package/src/stories/TransitionExpand.stories.ts

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+import TransitionExpand from '@/components/helpers-utilities/TransitionExpand.vue'
+
+const meta = {
+  title: 'TransitionExpand',
+  component: TransitionExpand,
+  argTypes: {
+    // No props to document as this is a utility component
+  },
+} satisfies Meta<typeof TransitionExpand>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const wrapperStyle = 'display: flex; flex-direction: column; align-items: center; gap: 12px;'
+
+export const Default: Story = {
+  render: () => ({
+    components: { TransitionExpand },
+    setup() {
+      const isExpanded = ref(false)
+      return { isExpanded }
+    },
+    template: `
+      <div style="${wrapperStyle}">
+        <CpButton
+          @click="isExpanded = !isExpanded"
+          appearance="primary"
+          color="purple"
+        >
+          {{ isExpanded ? 'Collapse' : 'Expand' }}
+        </CpButton>
+
+        <TransitionExpand>
+          <div v-if="isExpanded" style="
+            background: #F3F4F6;
+            border-radius: 6px;
+          ">
+            <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.
+            </p>
+          </div>
+        </TransitionExpand>
+      </div>
+    `,
+  }),
+}
+
+export const WithLongContent: Story = {
+  render: () => ({
+    components: { TransitionExpand },
+    setup() {
+      const isExpanded = ref(false)
+      return { isExpanded }
+    },
+    template: `
+      <div style="${wrapperStyle}">
+        <CpButton
+          @click="isExpanded = !isExpanded"
+          appearance="primary"
+          color="purple"
+        >
+          {{ isExpanded ? 'Collapse' : 'Expand' }}
+        </CpButton>
+
+        <TransitionExpand>
+          <div v-if="isExpanded" style="
+            background: #F3F4F6;
+            border-radius: 6px;
+          ">
+            <h3 style="margin: 0 0 8px 0;">Long Content Example</h3>
+            <p v-for="i in 5" :key="i" style="margin: 0 0 8px 0;">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
+              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+              nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+            </p>
+          </div>
+        </TransitionExpand>
+      </div>
+    `,
+  }),
+}

package/vitest.workspace.js

@@ -0,0 +1,31 @@
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+import { defineWorkspace } from 'vitest/config'
+
+import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin'
+
+const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url))
+
+// More info at: https://storybook.js.org/docs/writing-tests/test-addon
+export default defineWorkspace([
+  'vite.config.cjs',
+  {
+    extends: 'vite.config.cjs',
+    plugins: [
+      // The plugin will run tests for the stories defined in your Storybook config
+      // See options at: https://storybook.js.org/docs/writing-tests/test-addon#storybooktest
+      storybookTest({ configDir: path.join(dirname, '.storybook') }),
+    ],
+    test: {
+      name: 'storybook',
+      browser: {
+        enabled: true,
+        headless: true,
+        name: 'chromium',
+        provider: 'playwright',
+      },
+      setupFiles: ['.storybook/vitest.setup.js'],
+    },
+  },
+])