@citizenplane/pimp 8.11.2 → 8.12.0

package/src/stories/BaseInputLabel.stories.ts

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import BaseInputLabel from '@/components/core/BaseInputLabel.vue'
+
+const meta = {
+  title: 'BaseInputLabel',
+  component: BaseInputLabel,
+  argTypes: {
+    isInvalid: {
+      control: 'boolean',
+      description: 'Whether the label should show an invalid state',
+    },
+  },
+} satisfies Meta<typeof BaseInputLabel>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    isInvalid: false,
+  },
+  render: (args) => ({
+    components: { BaseInputLabel },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div class="baseInputLabel-story">
+        <BaseInputLabel v-bind="args">
+          Default Label
+        </BaseInputLabel>
+      </div>
+    `,
+  }),
+}

package/src/stories/CpAlert.stories.ts

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import CpAlert from '@/components/feedback-indicators/CpAlert.vue'
+
+const meta = {
+  title: 'CpAlert',
+  component: CpAlert,
+  argTypes: {
+    intent: {
+      control: 'select',
+      options: ['info', 'success', 'warning', 'critical'],
+      description: 'The type of alert',
+    },
+    title: {
+      control: 'text',
+      description: 'The title of the alert',
+    },
+    isClosable: {
+      control: 'boolean',
+      description: 'Whether the alert can be closed',
+    },
+    onClose: { action: 'closed' },
+  },
+} satisfies Meta<typeof CpAlert>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const defaultTemplate = `
+<CpAlert v-bind="args">
+  Default slot content
+</CpAlert>
+`
+
+export const Default: Story = {
+  args: {
+    title: 'Alert title',
+    intent: 'info',
+    isClosable: true,
+  },
+  render: (args) => ({
+    components: { CpAlert },
+    setup() {
+      return { args }
+    },
+    template: defaultTemplate,
+  }),
+}
+
+export const Success: Story = {
+  args: {
+    ...Default.args,
+    intent: 'success',
+  },
+  render: (args) => ({
+    ...Default.render(args),
+    template: defaultTemplate,
+  }),
+}
+export const Warning: Story = {
+  args: {
+    ...Default.args,
+    intent: 'warning',
+  },
+  render: (args) => ({
+    ...Default.render(args),
+    template: defaultTemplate,
+  }),
+}
+
+export const Error: Story = {
+  args: {
+    ...Default.args,
+    intent: 'critical',
+  },
+  render: (args) => ({
+    ...Default.render(args),
+    template: defaultTemplate,
+  }),
+}
+
+export const NotClosable: Story = {
+  args: {
+    ...Default.args,
+    isClosable: false,
+  },
+  render: (args) => ({
+    ...Default.render(args),
+    template: defaultTemplate,
+  }),
+}

package/src/stories/CpBadge.stories.ts

@@ -0,0 +1,158 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import CpBadge from '@/components/atomic-elements/CpBadge.vue'
+
+const meta = {
+  title: 'CpBadge',
+  component: CpBadge,
+  argTypes: {
+    color: {
+      control: 'select',
+      options: ['neutral', 'blue', 'green', 'red', 'orange', 'purple', 'teal', 'pink', 'yellow'],
+      description: 'The color variant of the badge',
+    },
+    isSolid: {
+      control: 'boolean',
+      description: 'Whether the badge has a solid background',
+    },
+    isPlain: {
+      control: 'boolean',
+      description: 'Whether the badge has a plain style (no dot)',
+    },
+    isClearable: {
+      control: 'boolean',
+      description: 'Whether the badge can be cleared',
+    },
+    icon: {
+      control: 'select',
+      options: ['arrow-left', 'arrow-right', 'arrow-up', 'arrow-down', 'check'],
+      description: 'The icon to display in the badge',
+    },
+    onClear: { action: 'cleared' },
+  },
+} satisfies Meta<typeof CpBadge>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    color: 'neutral',
+    isSolid: false,
+    isPlain: false,
+    isClearable: false,
+    icon: '',
+  },
+  render: (args) => ({
+    components: { CpBadge },
+    setup() {
+      return { args }
+    },
+    template: '<CpBadge v-bind="args">Badge</CpBadge>',
+  }),
+}
+
+export const WithColors: Story = {
+  render: (args) => ({
+    components: { CpBadge },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+        <CpBadge color="neutral">Neutral</CpBadge>
+        <CpBadge color="blue">Blue</CpBadge>
+        <CpBadge color="green">Green</CpBadge>
+        <CpBadge color="red">Red</CpBadge>
+        <CpBadge color="orange">Orange</CpBadge>
+        <CpBadge color="purple">Purple</CpBadge>
+        <CpBadge color="teal">Teal</CpBadge>
+        <CpBadge color="pink">Pink</CpBadge>
+        <CpBadge color="yellow">Yellow</CpBadge>
+      </div>
+    `,
+  }),
+}
+
+export const Solid: Story = {
+  render: (args) => ({
+    components: { CpBadge },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+        <CpBadge color="neutral" is-solid>Neutral</CpBadge>
+        <CpBadge color="blue" is-solid>Blue</CpBadge>
+        <CpBadge color="green" is-solid>Green</CpBadge>
+        <CpBadge color="red" is-solid>Red</CpBadge>
+        <CpBadge color="orange" is-solid>Orange</CpBadge>
+        <CpBadge color="purple" is-solid>Purple</CpBadge>
+        <CpBadge color="teal" is-solid>Teal</CpBadge>
+        <CpBadge color="pink" is-solid>Pink</CpBadge>
+        <CpBadge color="yellow" is-solid>Yellow</CpBadge>
+      </div>
+    `,
+  }),
+}
+
+export const WithIcon: Story = {
+  args: {
+    color: 'blue',
+    icon: 'check',
+  },
+  render: (args) => ({
+    components: { CpBadge },
+    setup() {
+      return { args }
+    },
+    template: '<CpBadge v-bind="args">With Icon</CpBadge>',
+  }),
+}
+
+export const Clearable: Story = {
+  args: {
+    color: 'blue',
+    isClearable: true,
+  },
+  render: (args) => ({
+    components: { CpBadge },
+    setup() {
+      return { args }
+    },
+    template: '<CpBadge v-bind="args">Clearable Badge</CpBadge>',
+  }),
+}
+
+export const Plain: Story = {
+  args: {
+    color: 'green',
+    isPlain: true,
+  },
+  render: (args) => ({
+    components: { CpBadge },
+    setup() {
+      return { args }
+    },
+    template: '<CpBadge v-bind="args">Plain Badge</CpBadge>',
+  }),
+}
+
+export const AllVariants: Story = {
+  render: (args) => ({
+    components: { CpBadge },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+        <CpBadge color="blue">Default</CpBadge>
+        <CpBadge color="blue" is-solid>Solid</CpBadge>
+        <CpBadge color="blue" is-plain>Plain</CpBadge>
+        <CpBadge color="blue" is-clearable>Clearable</CpBadge>
+        <CpBadge color="blue" icon="check">With Icon</CpBadge>
+        <CpBadge color="blue" is-solid is-clearable>Solid Clearable</CpBadge>
+      </div>
+    `,
+  }),
+}

package/src/stories/CpButton.stories.ts

@@ -0,0 +1,134 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import CpButton from '@/components/buttons/CpButton.vue'
+
+const meta = {
+  title: 'CpButton',
+  component: CpButton,
+  argTypes: {
+    appearance: {
+      control: 'select',
+      options: ['default', 'primary', 'minimal'],
+      description: 'The visual style of the button',
+    },
+    color: {
+      control: 'select',
+      options: ['Blue', 'Purple', 'Green', 'Orange', 'Red'],
+      description: 'The color variant of the button',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the button is disabled',
+    },
+    tag: {
+      control: 'select',
+      options: ['button', 'a'],
+      description: 'The HTML element to render',
+    },
+    type: {
+      control: 'select',
+      options: ['button', 'submit', 'reset'],
+      description: 'The type of button',
+    },
+    isLoading: {
+      control: 'boolean',
+      description: 'Whether the button is in loading state',
+    },
+    isSquare: {
+      control: 'boolean',
+      description: 'Whether the button has square corners',
+    },
+    isLarge: {
+      control: 'boolean',
+      description: 'Whether the button is large size',
+    },
+    onClick: { action: 'clicked' },
+  },
+} satisfies Meta<typeof CpButton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const defaultTemplate = '<CpButton v-bind="args">Button</CpButton>'
+const defaultRender = (args) => ({
+  components: { CpButton },
+  setup() {
+    return { args }
+  },
+  template: defaultTemplate,
+})
+
+export const Default: Story = {
+  args: {
+    appearance: 'default',
+    color: 'purple',
+    disabled: false,
+    tag: 'button',
+    type: 'button',
+    isLoading: false,
+    isSquare: false,
+    isLarge: false,
+  },
+  render: defaultRender,
+}
+
+export const Primary: Story = {
+  args: {
+    ...Default.args,
+    appearance: 'primary',
+    color: 'Purple',
+  },
+  render: defaultRender,
+}
+
+export const Minimal: Story = {
+  args: {
+    ...Default.args,
+    appearance: 'minimal',
+    color: 'Blue',
+  },
+  render: defaultRender,
+}
+
+export const WithIcons: Story = {
+  args: {
+    ...Default.args,
+    appearance: 'primary',
+    color: 'Purple',
+  },
+  render: (args) => ({
+    components: { CpButton },
+    setup: () => ({ args }),
+    template: `
+      <CpButton v-bind="args">
+        <template #icon-before>
+          <CpIcon type="arrow-left" />
+        </template>
+        Button with Icon
+        <template #icon-after>
+          <CpIcon type="arrow-right" />
+        </template>
+      </CpButton>
+    `,
+  }),
+}
+
+export const Loading: Story = {
+  args: { ...Default.args, isLoading: true },
+  render: defaultRender,
+}
+
+export const Disabled: Story = {
+  args: { ...Default.args, disabled: true },
+  render: defaultRender,
+}
+
+export const Large: Story = {
+  args: { ...Default.args, isLarge: true },
+  render: defaultRender,
+}
+
+export const Square: Story = {
+  args: { ...Default.args, isSquare: true },
+  render: defaultRender,
+}

package/src/stories/CpCheckbox.stories.ts

@@ -0,0 +1,184 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+import CpCheckbox from '@/components/toggles/CpCheckbox.vue'
+
+const meta = {
+  title: 'CpCheckbox',
+  component: CpCheckbox,
+  argTypes: {
+    modelValue: {
+      control: 'boolean',
+      description: 'The checkbox value',
+    },
+    checkboxValue: {
+      control: 'text',
+      description: 'Value when used in a group',
+    },
+    checkboxLabel: {
+      control: 'text',
+      description: 'Label text for the checkbox',
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'Whether the checkbox is disabled',
+    },
+    groupName: {
+      control: 'text',
+      description: 'Name attribute for checkbox group',
+    },
+    capitalizeLabel: {
+      control: 'boolean',
+      description: 'Whether to capitalize the first letter of the label',
+    },
+    color: {
+      control: 'select',
+      options: ['blue', 'purple'],
+      description: 'Color variant of the checkbox',
+    },
+    reverseLabel: {
+      control: 'boolean',
+      description: 'Whether to show label before the checkbox',
+    },
+    autofocus: {
+      control: 'boolean',
+      description: 'Whether to autofocus the checkbox',
+    },
+    helper: {
+      control: 'text',
+      description: 'Helper text to display below the label',
+    },
+  },
+} satisfies Meta<typeof CpCheckbox>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    checkboxLabel: 'Checkbox Label',
+    modelValue: false,
+    isDisabled: false,
+    capitalizeLabel: true,
+    color: 'blue',
+    reverseLabel: false,
+    autofocus: false,
+    helper: '',
+  },
+  render: (args) => ({
+    components: { CpCheckbox },
+    setup() {
+      const value = ref(args.modelValue)
+      return { args, value }
+    },
+    template: `
+      <div style="padding: 20px;">
+        <CpCheckbox
+          v-model="value"
+          v-bind="args"
+        />
+      </div>
+    `,
+  }),
+}
+
+export const Checked: Story = {
+  args: {
+    ...Default.args,
+    modelValue: true,
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    ...Default.args,
+    isDisabled: true,
+  },
+}
+
+export const WithHelper: Story = {
+  args: {
+    ...Default.args,
+    helper: 'This is a helper text that provides additional information',
+  },
+}
+
+export const Purple: Story = {
+  args: {
+    ...Default.args,
+    color: 'purple',
+  },
+}
+
+export const Reversed: Story = {
+  args: {
+    ...Default.args,
+    reverseLabel: true,
+  },
+}
+
+export const WithoutCapitalization: Story = {
+  args: {
+    ...Default.args,
+    capitalizeLabel: false,
+    checkboxLabel: 'checkbox label',
+  },
+}
+
+export const CheckboxGroup: Story = {
+  render: () => ({
+    components: { CpCheckbox },
+    setup() {
+      const selectedValues = ref(['option1'])
+      return { selectedValues }
+    },
+    template: `
+      <div style="padding: 20px; display: flex; flex-direction: column; gap: 12px;">
+        <CpCheckbox
+          v-model="selectedValues"
+          checkbox-value="option1"
+          checkbox-label="Option 1"
+          group-name="group1"
+        />
+        <CpCheckbox
+          v-model="selectedValues"
+          checkbox-value="option2"
+          checkbox-label="Option 2"
+          group-name="group1"
+        />
+        <CpCheckbox
+          v-model="selectedValues"
+          checkbox-value="option3"
+          checkbox-label="Option 3"
+          group-name="group1"
+        />
+      </div>
+    `,
+  }),
+}
+
+export const CustomContent: Story = {
+  args: {
+    ...Default.args,
+    checkboxLabel: '',
+  },
+  render: (args) => ({
+    components: { CpCheckbox },
+    setup() {
+      const value = ref(args.modelValue)
+      return { args, value }
+    },
+    template: `
+      <div style="padding: 20px;">
+        <CpCheckbox
+          v-model="value"
+          v-bind="args"
+        >
+          <div style="display: flex; flex-direction: column; gap: 4px;">
+            <span style="font-weight: 500;">Custom Content</span>
+            <span style="font-size: 14px; color: #666;">With multiple lines and styling</span>
+          </div>
+        </CpCheckbox>
+      </div>
+    `,
+  }),
+}

package/src/stories/CpDate.stories.ts

@@ -0,0 +1,110 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+import CpDate from '@/components/date-pickers/CpDate.vue'
+
+const meta = {
+  title: 'CpDate',
+  component: CpDate,
+  argTypes: {
+    modelValue: {
+      control: 'text',
+      description: 'The date value (ISO format)',
+    },
+    label: {
+      control: 'text',
+      description: 'Label text for the date input',
+    },
+    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: 'Custom error message to display',
+    },
+    displayErrorMessage: {
+      control: 'boolean',
+      description: 'Whether to display error messages',
+    },
+    autocompleteBirthday: {
+      control: 'boolean',
+      description: 'Whether to enable birthday autocomplete',
+    },
+    locale: {
+      control: 'text',
+      description: 'Locale for date formatting',
+    },
+    minDate: {
+      control: 'text',
+      description: 'Minimum allowed date',
+    },
+    maxDate: {
+      control: 'text',
+      description: 'Maximum allowed date',
+    },
+  },
+} satisfies Meta<typeof CpDate>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    label: 'Date',
+    required: false,
+    disabled: false,
+    isInvalid: false,
+    displayErrorMessage: true,
+  },
+  render: (args) => ({
+    components: { CpDate },
+    setup() {
+      const date = ref('')
+      return { args, date }
+    },
+    template: `
+      <div style="max-width: 400px; padding: 20px;">
+        <CpDate
+          v-model="date"
+          v-bind="args"
+          @on-validation="(isValid) => console.log('Validation:', isValid)"
+        />
+      </div>
+    `,
+  }),
+}
+
+export const Required: Story = {
+  args: {
+    ...Default.args,
+    label: 'Required Date',
+    required: true,
+    displayErrorMessage: false,
+  },
+}
+
+export const WithError: Story = {
+  args: {
+    ...Default.args,
+    label: 'Date with Error',
+    isInvalid: true,
+    required: true,
+    errorMessage: 'Please enter a valid date',
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    ...Default.args,
+    label: 'Disabled Date',
+    disabled: true,
+  },
+}