@citizenplane/pimp 8.11.2 → 8.12.0

package/src/stories/CpDatepicker.stories.ts

@@ -0,0 +1,162 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+import CpDatepicker from '@/components/date-pickers/CpDatepicker.vue'
+
+const meta = {
+  title: 'CpDatepicker',
+  component: CpDatepicker,
+
+  argTypes: {
+    mode: {
+      control: 'select',
+      options: ['single', 'range'],
+      description: 'Selection mode: single date or date range',
+    },
+    closeAfterSelect: {
+      control: 'boolean',
+      description: 'Whether to close the picker after selection',
+    },
+    label: {
+      control: 'text',
+      description: 'Label text for the datepicker',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text for the input',
+    },
+    isError: {
+      control: 'boolean',
+      description: 'Whether the field is in an invalid state',
+    },
+    errorMessage: {
+      control: 'text',
+      description: 'Custom error message to display',
+    },
+    initDateOne: {
+      control: 'text',
+      description: 'Initial first date (YYYY-MM-DD)',
+    },
+    initDateTwo: {
+      control: 'text',
+      description: 'Initial second date for range mode (YYYY-MM-DD)',
+    },
+    minDate: {
+      control: 'text',
+      description: 'Minimum allowed date',
+    },
+    maxDate: {
+      control: 'text',
+      description: 'Maximum allowed date',
+    },
+    allowPastDates: {
+      control: 'boolean',
+      description: 'Whether to allow selecting past dates',
+    },
+    isInline: {
+      control: 'boolean',
+      description: 'Whether to display the picker inline',
+    },
+    singleMonth: {
+      control: 'boolean',
+      description: 'Whether to show only one month',
+    },
+    locale: {
+      control: 'text',
+      description: 'Locale for date formatting',
+    },
+  },
+} satisfies Meta<typeof CpDatepicker>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const defaultTemplate = `
+  <div style="height: 35vh; max-width: 600px; padding: 20px;">
+    <CpDatepicker
+      v-bind="args"
+      @dates="(selectedDates) => dates = selectedDates"
+    />
+  </div>
+`
+
+export const Default: Story = {
+  args: {
+    mode: 'single',
+    label: 'Select Date',
+    placeholder: 'Choose a date',
+    closeAfterSelect: true,
+    allowPastDates: false,
+    isInline: false,
+    singleMonth: false,
+  },
+  render: (args) => ({
+    components: { CpDatepicker },
+    setup() {
+      const dates = ref([])
+      return { args, dates }
+    },
+    template: defaultTemplate,
+  }),
+}
+
+export const DateRange: Story = {
+  args: {
+    ...Default.args,
+    mode: 'range',
+    label: 'Select Date Range',
+    placeholder: 'Choose date range',
+  },
+  render: (args) => ({
+    ...Default.render(args),
+    template: defaultTemplate,
+  }),
+}
+
+export const WithError: Story = {
+  args: {
+    ...Default.args,
+    label: 'Datepicker with Error',
+    isError: true,
+    errorMessage: 'Please select a valid date',
+  },
+  render: (args) => ({
+    ...Default.render(args),
+    template: defaultTemplate,
+  }),
+}
+
+export const WithInitialDates: Story = {
+  args: {
+    ...Default.args,
+    initDateOne: '2024-03-15',
+    label: 'Datepicker with Initial Date',
+  },
+  render: (args) => ({
+    ...Default.render(args),
+    template: defaultTemplate,
+  }),
+}
+
+export const SingleMonth: Story = {
+  args: {
+    ...Default.args,
+    singleMonth: true,
+    label: 'Single Month View',
+  },
+  render: (args) => ({
+    ...Default.render(args),
+    template: defaultTemplate,
+  }),
+}
+
+export const AllowPastDates: Story = {
+  args: {
+    ...Default.args,
+    allowPastDates: true,
+    label: 'Allow Past Dates',
+  },
+  render: (args) => ({
+    ...Default.render(args),
+    template: defaultTemplate,
+  }),
+}

package/src/stories/CpDialog.stories.ts

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+
+import CpDialog from '@/components/atomic-elements/CpDialog.vue'
+
+const meta = {
+  title: 'CpDialog',
+  component: CpDialog,
+  argTypes: {
+    maxWidth: {
+      control: 'number',
+      description: 'The maximum width of the dialog',
+    },
+    onClose: { action: 'closed' },
+  },
+  parameters: {
+    styles: {
+      '.header': {
+        color: 'red',
+      },
+    },
+  },
+} satisfies Meta<typeof CpDialog>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    maxWidth: 600,
+  },
+  render: (args) => ({
+    setup() {
+      const isOpen = ref(false)
+      return { args, isOpen }
+    },
+    template: `
+      <CpButton @click="isOpen = true">Open Dialog</CpButton>
+      <CpDialogWrapper>
+        <CpDialog v-bind="args" v-if="isOpen" @close="isOpen = false">
+          <template #header>
+            <h1 style="padding: 16px 24px">Header slot</h1>
+            </template>
+            <p style="padding: 16px 24px">This is the default slot content. You can put any content here.</p>
+            <template #footer>
+              <CpButton @click="isOpen = false">Cancel</CpButton>
+              This is the footer slot
+            </template>
+        </CpDialog>
+      </CpDialogWrapper>
+    `,
+  }),
+}

package/src/stories/CpHeading.stories.ts

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import CpHeading from '@/components/typography/CpHeading.vue'
+
+const meta = {
+  title: 'CpHeading',
+  component: CpHeading,
+  argTypes: {
+    headingLevel: {
+      control: 'select',
+      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+      description: 'HTML heading level',
+    },
+    size: {
+      control: 'select',
+      options: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+      description: 'Size variant of the heading',
+    },
+  },
+} satisfies Meta<typeof CpHeading>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    headingLevel: 'h1',
+    size: 500,
+  },
+  render: (args) => ({
+    components: { CpHeading },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="padding: 20px;">
+        <CpHeading v-bind="args">
+          Default Heading
+        </CpHeading>
+      </div>
+    `,
+  }),
+}
+
+export const AllSizes: Story = {
+  render: () => ({
+    components: { CpHeading },
+    template: `
+      <div style="padding: 20px; display: flex; flex-direction: column; gap: 16px;">
+        <CpHeading size="100">Size 100 Heading</CpHeading>
+        <CpHeading size="200">Size 200 Heading</CpHeading>
+        <CpHeading size="300">Size 300 Heading</CpHeading>
+        <CpHeading size="400">Size 400 Heading</CpHeading>
+        <CpHeading size="500">Size 500 Heading</CpHeading>
+        <CpHeading size="600">Size 600 Heading</CpHeading>
+        <CpHeading size="700">Size 700 Heading</CpHeading>
+        <CpHeading size="800">Size 800 Heading</CpHeading>
+        <CpHeading size="900">Size 900 Heading</CpHeading>
+      </div>
+    `,
+  }),
+}
+
+export const SizeAndLevelCombination: Story = {
+  render: () => ({
+    components: { CpHeading },
+    template: `
+      <div style="padding: 20px; display: flex; flex-direction: column; gap: 16px;">
+        <CpHeading heading-level="h1" size="900">H1 with Size 900</CpHeading>
+        <CpHeading heading-level="h2" size="800">H2 with Size 800</CpHeading>
+        <CpHeading heading-level="h3" size="700">H3 with Size 700</CpHeading>
+        <CpHeading heading-level="h4" size="600">H4 with Size 600</CpHeading>
+        <CpHeading heading-level="h5" size="500">H5 with Size 500</CpHeading>
+        <CpHeading heading-level="h6" size="400">H6 with Size 400</CpHeading>
+      </div>
+    `,
+  }),
+}

package/src/stories/CpIcon.stories.ts

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import CpIcon from '@/components/visual/CpIcon.vue'
+
+const meta = {
+  title: 'CpIcon',
+  component: CpIcon,
+  argTypes: {
+    type: {
+      control: 'select',
+      options: [
+        'activity',
+        'alert-circle',
+        'arrow-down',
+        'arrow-left',
+        'arrow-right',
+        'arrow-up',
+        'bell',
+        'calendar',
+        'check',
+        'check-circle',
+        'chevron-down',
+        'chevron-left',
+        'chevron-right',
+        'chevron-up',
+        'edit',
+        'home',
+        'search',
+        'settings',
+        'user',
+        'x',
+      ],
+      description: 'Type of icon to display',
+    },
+    size: {
+      control: 'number',
+      description: 'Size of the icon in pixels',
+    },
+    tag: {
+      control: 'text',
+      description: 'HTML tag to use for the icon wrapper',
+    },
+  },
+} satisfies Meta<typeof CpIcon>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    type: 'check',
+    size: 24,
+    tag: 'i',
+  },
+  render: (args) => ({
+    components: { CpIcon },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="padding: 20px;">
+        <CpIcon v-bind="args" />
+      </div>
+    `,
+  }),
+}
+
+export const DifferentSizes: Story = {
+  render: () => ({
+    components: { CpIcon },
+    template: `
+      <div style="padding: 20px; display: flex; align-items: center; gap: 16px;">
+        <CpIcon type="check" size="16" />
+        <CpIcon type="check" size="24" />
+        <CpIcon type="check" size="32" />
+        <CpIcon type="check" size="48" />
+      </div>
+    `,
+  }),
+}

package/src/stories/CpInput.stories.ts

@@ -0,0 +1,155 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+import CpInput from '@/components/inputs/CpInput.vue'
+
+const meta = {
+  title: 'CpInput',
+  component: CpInput,
+  argTypes: {
+    modelValue: {
+      control: 'text',
+      description: 'The input value',
+    },
+    type: {
+      control: 'select',
+      options: ['text', 'email', 'password', 'number', 'tel', 'url'],
+      description: 'The type of input',
+    },
+    label: {
+      control: 'text',
+      description: 'Label text for the input',
+    },
+    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',
+    },
+    autocomplete: {
+      control: 'text',
+      description: 'Autocomplete attribute value',
+    },
+  },
+} satisfies Meta<typeof CpInput>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    label: 'Input Label',
+    placeholder: 'Enter text here',
+    type: 'text',
+    required: false,
+    disabled: false,
+    autocomplete: 'off',
+    isInvalid: false,
+    errorMessage: '',
+    hideInvalidityIcon: false,
+    removeBorder: false,
+    isLarge: false,
+    isSearch: false,
+    help: '',
+  },
+  render: (args) => ({
+    components: { CpInput },
+    setup() {
+      const value = ref('')
+      return { args, value }
+    },
+    template: `
+      <div style="max-width: 400px; padding: 20px;">
+        <CpInput
+          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 Email: Story = {
+  args: {
+    ...Default.args,
+    type: 'email',
+    label: 'Email Address',
+    placeholder: 'Enter your email',
+  },
+}
+
+export const Password: Story = {
+  args: {
+    ...Default.args,
+    type: 'password',
+    label: 'Password',
+    placeholder: 'Enter your password',
+  },
+}
+
+export const Number: Story = {
+  args: {
+    ...Default.args,
+    type: 'number',
+    label: 'Amount',
+    placeholder: 'Enter amount',
+  },
+}
+
+export const HelpAndTooltip: Story = {
+  args: {
+    ...Default.args,
+    help: 'This is a help text',
+    tooltip: 'This is a tooltip',
+  },
+}
+
+export const Search: Story = {
+  args: {
+    ...Default.args,
+    isSearch: true,
+  },
+}
+
+export const Mask: Story = {
+  args: {
+    ...Default.args,
+    placeholder: 'Enter your phone number',
+    mask: '## ## ## ## ##',
+  },
+}

package/src/stories/CpLoader.stories.ts

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import CpLoader from '@/components/feedback-indicators/CpLoader.vue'
+
+const meta = {
+  title: 'CpLoader',
+  component: CpLoader,
+  argTypes: {
+    color: {
+      control: 'color',
+      description: 'The color of the loader',
+    },
+  },
+} satisfies Meta<typeof CpLoader>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    color: '#4F46E5',
+  },
+}
+
+export const CustomColor: Story = {
+  args: {
+    ...Default.args,
+    color: '#10B981',
+  },
+}

package/src/stories/CpRadio.stories.ts

@@ -0,0 +1,139 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+import CpRadio from '@/components/toggles/CpRadio.vue'
+
+const meta = {
+  title: 'CpRadio',
+  component: CpRadio,
+  argTypes: {
+    modelValue: {
+      control: 'text',
+      description: 'The selected radio value',
+    },
+    options: {
+      control: 'object',
+      description: 'Array of radio options',
+    },
+    groupName: {
+      control: 'text',
+      description: 'Name attribute for radio group',
+    },
+    color: {
+      control: 'select',
+      options: ['blue', 'purple'],
+      description: 'Color variant of the radio',
+    },
+    autofocus: {
+      control: 'boolean',
+      description: 'Whether to autofocus the first radio',
+    },
+  },
+} satisfies Meta<typeof CpRadio>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const sampleOptions = [
+  { value: 'option1', label: 'Option 1' },
+  { value: 'option2', label: 'Option 2' },
+  { value: 'option3', label: 'Option 3' },
+]
+
+export const Default: Story = {
+  args: {
+    modelValue: 'option1',
+    options: sampleOptions,
+    groupName: 'radio-group',
+    color: 'blue',
+    autofocus: false,
+  },
+  render: (args) => ({
+    components: { CpRadio },
+    setup() {
+      const value = ref(args.modelValue)
+      return { args, value }
+    },
+    template: `
+      <div style="min-width: 400px; padding: 20px;">
+        <CpRadio
+          v-model="value"
+          v-bind="args"
+        />
+      </div>
+    `,
+  }),
+}
+
+export const WithDescriptions: Story = {
+  args: {
+    ...Default.args,
+    options: [
+      { value: 'option1', label: 'Basic Plan', description: 'Perfect for individuals' },
+      { value: 'option2', label: 'Pro Plan', description: 'Great for small teams' },
+      { value: 'option3', label: 'Enterprise Plan', description: 'For large organizations' },
+    ],
+  },
+}
+
+export const WithAdditionalData: Story = {
+  args: {
+    ...Default.args,
+    options: [
+      { value: 'option1', label: 'Monthly', additionalData: '$10/mo' },
+      { value: 'option2', label: 'Yearly', additionalData: '$100/yr' },
+      { value: 'option3', label: 'Lifetime', additionalData: '$500' },
+    ],
+  },
+}
+
+export const WithDisabledOptions: Story = {
+  args: {
+    ...Default.args,
+    options: [
+      { value: 'option1', label: 'Option 1' },
+      { value: 'option2', label: 'Option 2', disabled: true },
+      { value: 'option3', label: 'Option 3' },
+    ],
+  },
+  render: (args) => ({
+    components: { CpRadio },
+    setup() {
+      const value = ref(args.modelValue)
+      return { args, value }
+    },
+    template: `
+      <div style="min-width: 400px; padding: 20px;">
+        <CpRadio
+          v-model="value"
+          v-bind="args"
+        />
+      </div>
+    `,
+  }),
+}
+
+export const ComplexOptions: Story = {
+  args: {
+    ...Default.args,
+    options: [
+      {
+        value: 'option1',
+        label: 'Basic Plan',
+        description: 'Perfect for individuals',
+        additionalData: '$10/mo',
+      },
+      {
+        value: 'option2',
+        label: 'Pro Plan',
+        description: 'Great for small teams',
+        additionalData: '$30/mo',
+      },
+      {
+        value: 'option3',
+        label: 'Enterprise Plan',
+        description: 'For large organizations',
+        additionalData: '$100/mo',
+      },
+    ],
+  },
+}