@citizenplane/pimp 8.11.3 → 8.13.0

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

package/src/stories/CpSelect.stories.ts

@@ -0,0 +1,147 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+import CpSelect from '@/components/selects/CpSelect.vue'
+
+const meta = {
+  title: 'CpSelect',
+  component: CpSelect,
+  argTypes: {
+    modelValue: {
+      control: 'text',
+      description: 'The selected value',
+    },
+    label: {
+      control: 'text',
+      description: 'Label text for the select',
+    },
+    options: {
+      control: 'object',
+      description: 'Array of options to display',
+    },
+    defaultValue: {
+      control: 'text',
+      description: 'Default option text',
+    },
+    hideDefaultValue: {
+      control: 'boolean',
+      description: 'Whether to hide the default option',
+    },
+    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',
+    },
+    isLarge: {
+      control: 'boolean',
+      description: 'Whether to use large size variant',
+    },
+    autocomplete: {
+      control: 'text',
+      description: 'Autocomplete attribute value',
+    },
+    name: {
+      control: 'text',
+      description: 'Name attribute for the select',
+    },
+  },
+} satisfies Meta<typeof CpSelect>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const sampleOptions = [
+  { value: '1', label: 'Option 1' },
+  { value: '2', label: 'Option 2' },
+  { value: '3', label: 'Option 3' },
+  { value: '4', label: 'Option 4' },
+]
+
+export const Default: Story = {
+  args: {
+    label: 'Select Label',
+    options: sampleOptions,
+    defaultValue: 'Select an option',
+    hideDefaultValue: false,
+    required: false,
+    disabled: false,
+    isInvalid: false,
+    errorMessage: '',
+    isLarge: false,
+    autocomplete: 'on',
+    name: 'select-field',
+  },
+  render: (args) => ({
+    components: { CpSelect },
+    setup() {
+      const value = ref('')
+      return { args, value }
+    },
+    template: `
+      <div style="max-width: 400px; padding: 20px;">
+        <CpSelect
+          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 Large: Story = {
+  args: {
+    ...Default.args,
+    isLarge: true,
+  },
+}
+
+export const WithoutDefaultOption: Story = {
+  args: {
+    ...Default.args,
+    hideDefaultValue: true,
+  },
+}
+
+export const WithLongOptions: Story = {
+  args: {
+    ...Default.args,
+    options: [
+      { value: '1', label: 'This is a very long option text that might need to be truncated' },
+      { value: '2', label: 'Another long option that demonstrates text truncation' },
+      { value: '3', label: 'Short option' },
+      { value: '4', label: 'Yet another long option to show how the select handles long text' },
+    ],
+  },
+}