@citizenplane/pimp 8.11.3 → 8.13.0

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

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