@citizenplane/pimp 8.11.2 → 8.12.0

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

package/src/stories/CpSelectMenu.stories.ts

@@ -0,0 +1,132 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { computed, ref } from 'vue'
+import CpSelectMenu from '@/components/selects/CpSelectMenu.vue'
+
+const meta = {
+  title: 'CpSelectMenu',
+  component: CpSelectMenu,
+  argTypes: {
+    values: {
+      control: 'object',
+      description: 'Array of options to display',
+    },
+    selectedValue: {
+      control: 'object',
+      description: 'Currently selected value',
+    },
+    hasFilter: {
+      control: 'boolean',
+      description: 'Whether to show search filter',
+    },
+    dropdownTitle: {
+      control: 'text',
+      description: 'Title text for the dropdown',
+    },
+    dropdownFilterPlaceholder: {
+      control: 'text',
+      description: 'Placeholder text for the filter input',
+    },
+    dropdownEmptyViewPlaceholder: {
+      control: 'text',
+      description: 'Text to show when no options match the filter',
+    },
+    closeOnSelect: {
+      control: 'boolean',
+      description: 'Whether to close dropdown after selection',
+    },
+  },
+  decorators: [() => ({ template: '<div style="min-height: 30vh;"><story/></div>' })],
+} satisfies Meta<typeof CpSelectMenu>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const sampleOptions = [
+  { value: '1', label: 'Apple' },
+  { value: '2', label: 'Banana' },
+  { value: '3', label: 'Orange' },
+  { value: '4', label: 'Mango' },
+  { value: '5', label: 'Strawberry' },
+  { value: '6', label: 'Blueberry' },
+  { value: '7', label: 'Cherry' },
+]
+
+export const Default: Story = {
+  args: {
+    values: sampleOptions,
+    selectedValue: { value: '1', label: 'Apple' },
+    hasFilter: false,
+    dropdownTitle: 'Select value',
+    dropdownFilterPlaceholder: 'Filter...',
+    dropdownEmptyViewPlaceholder: 'No option found',
+    closeOnSelect: true,
+  },
+  render: (args) => ({
+    components: { CpSelectMenu },
+    setup() {
+      const selectedValue = ref(args.selectedValue)
+      return { args, selectedValue }
+    },
+    template: `
+      <div style="max-width: 400px; padding: 20px;">
+        <CpSelectMenu
+          v-model:selectedValue="selectedValue"
+          v-bind="args"
+          @update:selected-value="onUpdateSelectedValue"
+        />
+      </div>
+    `,
+    methods: {
+      onUpdateSelectedValue: (data) => {
+        args.selectedValue = data
+      },
+    },
+  }),
+}
+
+const searchQuery = ref('')
+
+export const WithFilter: Story = {
+  args: {
+    ...Default.args,
+    hasFilter: true,
+    dropdownTitle: 'Search for a fruit',
+    selectedValue: { value: '1', label: 'Apple' },
+    values: sampleOptions,
+  },
+  render: (args) => ({
+    components: { CpSelectMenu },
+    setup() {
+      const selectedValue = ref(args.selectedValue)
+      return { args, selectedValue }
+    },
+    template: `
+      <div style="max-width: 400px; padding: 20px;">
+        <CpSelectMenu
+          v-model:selectedValue="selectedValue"
+          v-bind="args"
+          @on-filter-change="onFilterChange"
+          @update:selected-value="onUpdateSelectedValue"
+        />
+      </div>
+    `,
+    methods: {
+      onFilterChange: (data) => {
+        searchQuery.value = data
+        args.values = sampleOptions.filter((option) =>
+          option.label.toLowerCase().includes(searchQuery.value.toLowerCase()),
+        )
+      },
+      onUpdateSelectedValue: (data) => {
+        args.selectedValue = data
+      },
+    },
+  }),
+}
+
+export const CustomTitle: Story = {
+  args: {
+    ...Default.args,
+    dropdownTitle: 'My custom title',
+  },
+}

package/src/stories/CpSwitch.stories.ts

@@ -0,0 +1,137 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+import CpSwitch from '@/components/toggles/CpSwitch.vue'
+
+const meta = {
+  title: 'CpSwitch',
+  component: CpSwitch,
+  argTypes: {
+    modelValue: {
+      control: 'boolean',
+      description: 'The switch state',
+    },
+    label: {
+      control: 'text',
+      description: 'Label text for the switch',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the switch is disabled',
+    },
+    groupName: {
+      control: 'text',
+      description: 'Name attribute for the switch',
+    },
+    color: {
+      control: 'select',
+      options: ['blue', 'purple'],
+      description: 'Color variant of the switch',
+    },
+    reverseLabel: {
+      control: 'boolean',
+      description: 'Whether to show label before the switch',
+    },
+    autofocus: {
+      control: 'boolean',
+      description: 'Whether to autofocus the switch',
+    },
+  },
+} satisfies Meta<typeof CpSwitch>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    label: 'Switch Label',
+    disabled: false,
+    color: 'purple',
+    reverseLabel: false,
+    autofocus: false,
+  },
+  render: (args) => ({
+    components: { CpSwitch },
+    setup() {
+      const value = ref(false)
+      return { args, value }
+    },
+    template: `
+      <div style="padding: 20px;">
+        <CpSwitch
+          v-model="value"
+          v-bind="args"
+        />
+      </div>
+    `,
+  }),
+}
+
+export const Disabled: Story = {
+  args: {
+    ...Default.args,
+    disabled: true,
+  },
+}
+
+export const DisabledChecked: Story = {
+  args: {
+    ...Default.args,
+    disabled: true,
+    modelValue: true,
+  },
+}
+
+export const Reversed: Story = {
+  args: {
+    ...Default.args,
+    reverseLabel: true,
+  },
+  render: (args) => ({
+    components: { CpSwitch },
+    setup() {
+      const value = ref(false)
+      return { args, value }
+    },
+    template: `
+      <div style="padding: 20px;">
+        <CpSwitch
+          v-model="value"
+          v-bind="args"
+        />
+      </div>
+    `,
+  }),
+}
+
+export const SwitchGroup: Story = {
+  render: () => ({
+    components: { CpSwitch },
+    setup() {
+      const switches = ref({
+        switch1: false,
+        switch2: true,
+        switch3: false,
+      })
+      return { switches }
+    },
+    template: `
+      <div style="padding: 20px; display: flex; flex-direction: column; gap: 16px;">
+        <CpSwitch
+          v-model="switches.switch1"
+          label="First Switch"
+          group-name="switch-group"
+        />
+        <CpSwitch
+          v-model="switches.switch2"
+          label="Second Switch"
+          group-name="switch-group"
+        />
+        <CpSwitch
+          v-model="switches.switch3"
+          label="Third Switch"
+          group-name="switch-group"
+        />
+      </div>
+    `,
+  }),
+}

package/src/stories/CpTable.stories.ts

@@ -0,0 +1,192 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import CpTable from '@/components/lists-and-table/CpTable.vue'
+
+const meta = {
+  title: 'CpTable',
+  component: CpTable,
+  argTypes: {
+    caption: {
+      control: 'text',
+      description: 'Table caption for accessibility',
+    },
+    columns: {
+      control: 'array',
+      description: 'Array of column definitions',
+    },
+    data: {
+      control: 'object',
+      description: 'Array of data objects to display',
+    },
+    pagination: {
+      control: 'object',
+      description: 'Pagination configuration (boolean or object)',
+    },
+    areRowsClickable: {
+      control: 'boolean',
+      description: 'Whether rows can be clicked',
+    },
+    emptyCellPlaceholder: {
+      control: 'text',
+      description: 'Placeholder text for empty cells',
+    },
+    noResultPlaceholder: {
+      control: 'text',
+      description: 'Placeholder text when no results found',
+    },
+    isLoading: {
+      control: 'boolean',
+      description: 'Whether the table is in loading state',
+    },
+    enableRowOptions: {
+      control: 'boolean',
+      description: 'Whether to show row options menu',
+    },
+    onRowClick: { action: 'row-clicked' },
+    onRowRightClick: { action: 'row-right-clicked' },
+    onNextClick: { action: 'next-clicked' },
+    onPreviousClick: { action: 'previous-clicked' },
+  },
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+  decorators: [
+    () => ({ template: '<div style="padding: 20px; border-radius: 8px; background-color: #fff;"><story/></div>' }),
+  ],
+} satisfies Meta<typeof CpTable>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const sampleColumns = ['name', 'age', 'email', 'status']
+
+const sampleData = [
+  { name: 'John Doe', age: 30, email: 'john@example.com', status: 'Active' },
+  { name: 'Jane Smith', age: 25, email: 'jane@example.com', status: 'Inactive' },
+  { name: 'Bob Johnson', age: 35, email: 'bob@example.com', status: 'Active' },
+  { name: 'Alice Brown', age: 28, email: 'alice@example.com', status: 'Active' },
+  { name: 'Charlie Wilson', age: 42, email: 'charlie@example.com', status: 'Inactive' },
+]
+
+export const Default: Story = {
+  args: {
+    columns: sampleColumns,
+    data: sampleData,
+    caption: 'User Management Table',
+    areRowsClickable: false,
+    emptyCellPlaceholder: 'n/a',
+    noResultPlaceholder: 'No results found',
+    isLoading: false,
+    enableRowOptions: false,
+    pagination: {
+      enabled: true,
+    },
+  },
+  render: (args) => ({
+    components: { CpTable },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="padding: 20px;">
+        <CpTable v-bind="args" />
+      </div>
+    `,
+  }),
+}
+
+export const WithPagination: Story = {
+  args: {
+    ...Default.args,
+    pagination: {
+      enabled: true,
+      limit: 3,
+      format: 'pages',
+    },
+  },
+}
+
+export const ClickableRows: Story = {
+  args: {
+    ...Default.args,
+    areRowsClickable: true,
+  },
+}
+
+export const WithRowOptions: Story = {
+  args: {
+    ...Default.args,
+    enableRowOptions: true,
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    ...Default.args,
+    isLoading: true,
+  },
+}
+
+export const Empty: Story = {
+  args: {
+    ...Default.args,
+    data: [],
+  },
+}
+
+export const WithGroupBy: Story = {
+  args: {
+    ...Default.args,
+    data: [
+      {
+        groupBy: 'Active Users',
+        rows: [
+          { name: 'John Doe', age: 30, email: 'john@example.com', status: 'Active' },
+          { name: 'Bob Johnson', age: 35, email: 'bob@example.com', status: 'Active' },
+        ],
+      },
+      {
+        groupBy: 'Inactive Users',
+        rows: [{ name: 'Jane Smith', age: 25, email: 'jane@example.com', status: 'Inactive' }],
+      },
+    ],
+  },
+}
+
+export const WithCustomSlots: Story = {
+  args: {
+    ...Default.args,
+    enableRowOptions: true,
+  },
+  render: (args) => ({
+    components: { CpTable },
+    setup() {
+      return { args }
+    },
+    template: `
+        <CpTable v-bind="args">
+          <template #status="{ cell }">
+            <span :style="{
+              padding: '4px 8px',
+              borderRadius: '4px',
+              fontSize: '12px',
+              backgroundColor: cell === 'Active' ? '#10B981' : '#EF4444',
+              color: 'white'
+            }">
+              {{ cell }}
+            </span>
+          </template>
+          <template #row-quick-actions="{ row }">
+            <button
+              type="button"
+              style="padding: 4px 8px; background: #4F46E5; color: white; border: none; border-radius: 4px; cursor: pointer;"
+              @click.stop="() => console.log('Edit', row)"
+            >
+              Edit
+            </button>
+          </template>
+        </CpTable>
+    `,
+  }),
+}

package/src/stories/CpTableEmptyState.stories.ts

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import CpTableEmptyState from '@/components/lists-and-table/CpTableEmptyState.vue'
+
+const meta = {
+  title: 'CpTableEmptyState',
+  component: CpTableEmptyState,
+  argTypes: {
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text to display',
+    },
+  },
+  decorators: [
+    () => ({ template: '<div style="padding: 20px; border-radius: 8px; background-color: #fff;"><story/></div>' }),
+  ],
+} satisfies Meta<typeof CpTableEmptyState>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    placeholder: 'No results found',
+  },
+  render: (args) => ({
+    components: { CpTableEmptyState },
+    setup() {
+      return { args }
+    },
+    template: `
+      <CpTableEmptyState v-bind="args" />
+    `,
+  }),
+}