@citizenplane/pimp 8.11.2 → 8.12.0

package/src/stories/CpTextarea.stories.ts

@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+import CpTextarea from '@/components/inputs/CpTextarea.vue'
+
+const meta = {
+  title: 'CpTextarea',
+  component: CpTextarea,
+  argTypes: {
+    modelValue: {
+      control: 'text',
+      description: 'The textarea value',
+    },
+    label: {
+      control: 'text',
+      description: 'Label text for the textarea',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text',
+    },
+    required: {
+      control: 'boolean',
+      description: 'Whether the field is required',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the field is disabled',
+    },
+    isInvalid: {
+      control: 'boolean',
+      description: 'Whether the field is in an invalid state',
+    },
+    errorMessage: {
+      control: 'text',
+      description: 'Error message to display',
+    },
+    rows: {
+      control: 'number',
+      description: 'Number of visible rows',
+    },
+    maxLength: {
+      control: 'number',
+      description: 'Maximum number of characters allowed',
+    },
+  },
+} satisfies Meta<typeof CpTextarea>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    label: 'Textarea Label',
+    placeholder: 'Enter your message here',
+    rows: 4,
+  },
+  render: (args) => ({
+    components: { CpTextarea },
+    setup() {
+      const value = ref('')
+      return { args, value }
+    },
+    template: `
+      <div style="max-width: 400px; padding: 20px;">
+        <CpTextarea
+          v-model="value"
+          v-bind="args"
+        />
+      </div>
+    `,
+  }),
+}
+
+export const WithError: Story = {
+  args: {
+    ...Default.args,
+    isInvalid: true,
+    errorMessage: 'This field is required',
+  },
+}
+
+export const Required: Story = {
+  args: {
+    ...Default.args,
+    required: true,
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    ...Default.args,
+    disabled: true,
+  },
+}
+
+export const WithMaxLength: Story = {
+  args: {
+    ...Default.args,
+    maxLength: 100,
+    label: 'Limited Textarea',
+    placeholder: 'Enter up to 100 characters',
+  },
+}
+
+export const CustomRows: Story = {
+  args: {
+    ...Default.args,
+    rows: 6,
+    label: 'Large Textarea',
+    placeholder: 'Enter a longer message',
+  },
+}

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'],
+    },
+  },
+])

package/src/App.vue

@@ -1,110 +0,0 @@
-<template>
-  <div class="designPlayground">
-    <header class="designPlayground__header header">
-      <pimp-logo class="header__logo" />
-      <cp-heading :size="700" heading-level="h2" class="header__title">Pimp</cp-heading>
-      <div class="header__tagline">v {{ version }}</div>
-    </header>
-    <div class="designPlayground__container">
-      <section-lists-and-tables />
-      <section-atomic-elements />
-      <section-typography />
-      <section-buttons />
-      <section-inputs />
-      <section-selects />
-      <section-select-menus />
-      <section-date-pickers />
-      <section-toasters />
-      <section-toggles />
-      <section-feedback-indicators />
-      <section-dialog />
-    </div>
-  </div>
-</template>
-
-<script>
-import pkg from '../package.json'
-
-import PimpLogo from './components/logo/Pimp.vue'
-import SectionAtomicElements from './components/core/playground-sections/SectionAtomicElements.vue'
-import SectionTypography from './components/core/playground-sections/SectionTypography.vue'
-import SectionButtons from './components/core/playground-sections/SectionButtons.vue'
-import SectionInputs from './components/core/playground-sections/SectionInputs.vue'
-import SectionSelects from './components/core/playground-sections/SectionSelects.vue'
-import SectionSelectMenus from './components/core/playground-sections/SectionSelectMenus.vue'
-import SectionDatePickers from './components/core/playground-sections/SectionDatePickers.vue'
-import SectionToasters from './components/core/playground-sections/SectionToasters.vue'
-import SectionToggles from './components/core/playground-sections/SectionToggles.vue'
-import SectionFeedbackIndicators from './components/core/playground-sections/SectionFeedbackIndicators.vue'
-import SectionListsAndTables from './components/core/playground-sections/SectionListsAndTables.vue'
-import SectionDialog from './components/core/playground-sections/SectionDialog.vue'
-
-export default {
-  components: {
-    PimpLogo,
-    SectionAtomicElements,
-    SectionTypography,
-    SectionButtons,
-    SectionInputs,
-    SectionSelects,
-    SectionSelectMenus,
-    SectionDatePickers,
-    SectionToasters,
-    SectionToggles,
-    SectionFeedbackIndicators,
-    SectionListsAndTables,
-    SectionDialog,
-  },
-  computed: {
-    version() {
-      return pkg.version
-    },
-  },
-}
-</script>
-
-<style lang="scss">
-.designPlayground {
-  position: relative;
-
-  &__header {
-    position: sticky;
-    top: 0;
-    left: 0;
-    z-index: 2;
-    border-bottom: 1px solid colors.$neutral-dark-4;
-    background-color: colors.$neutral-light;
-    display: flex;
-    align-items: center;
-    padding: fn.px-to-rem(16);
-  }
-
-  .header {
-    &__logo {
-      width: fn.px-to-rem(32);
-      height: auto;
-    }
-
-    &__title {
-      margin: 0 fn.px-to-rem(8);
-    }
-  }
-
-  &__container {
-    margin: 0 auto;
-    padding: fn.px-to-rem(16);
-    width: 100%;
-    max-width: fn.px-to-rem(900);
-  }
-
-  section {
-    width: 100%;
-    padding: fn.px-to-rem(20);
-    border-top: fn.px-to-rem(1) solid colors.$neutral-dark-4;
-
-    &:first-child {
-      border-top: none;
-    }
-  }
-}
-</style>

package/src/components/core/playground-sections/SectionAtomicElements.vue

@@ -1,83 +0,0 @@
-<template>
-  <section-container section-title="Atomic elements" class="sectionAtomicElements">
-    <div class="item">
-      <h3>Badge</h3>
-      <div class="sectionAtomicElements__badges">
-        <cp-badge
-          v-for="{ color, label, icon, plain, solid, clear } in badgeList"
-          :key="color"
-          :color="color"
-          :icon="icon"
-          :is-plain="plain"
-          :is-solid="solid"
-          :is-clearable="clear"
-          class="sectionAtomicElements__badge"
-        >
-          {{ label }}
-        </cp-badge>
-      </div>
-    </div>
-  </section-container>
-</template>
-
-<script>
-import SectionContainer from '@/components/core/playground-sections/SectionContainer.vue'
-
-export default {
-  components: {
-    SectionContainer,
-  },
-  data() {
-    return {
-      badgeList: [
-        {
-          color: '',
-          label: 'Default plain clearable',
-          clear: true,
-        },
-        {
-          color: '',
-          label: 'Default plain w/ icon',
-          icon: 'copy',
-        },
-        {
-          color: 'neutral',
-          label: 'Beta',
-        },
-        {
-          color: 'green',
-          label: 'Solid green clearable',
-          solid: true,
-          clear: true,
-        },
-        {
-          color: 'red',
-          label: 'Default red',
-          icon: 'copy',
-        },
-        {
-          color: 'blue',
-          label: 'Default blue clearable',
-          clear: true,
-        },
-        {
-          color: 'purple',
-          label: 'Solid purple w/ icon',
-          icon: 'copy',
-          solid: true,
-        },
-      ],
-    }
-  },
-}
-</script>
-
-<style lang="scss">
-.sectionAtomicElements {
-  &__badges {
-    display: flex;
-    flex-wrap: wrap;
-    gap: sp.$space;
-  }
-}
-</style>