valtech-components 2.0.787 → 2.0.795

package/src/lib/components/molecules/select-input/select-input.stories.ts

@@ -0,0 +1,330 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { SearchSelectorComponent } from './select-input.component';
+import { InputType, ComponentStates } from '../../types';
+
+const meta: Meta<SearchSelectorComponent> = {
+  title: 'Molecules/SelectInput',
+  component: SearchSelectorComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, ReactiveFormsModule, SearchSelectorComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Select input configuration object',
+      control: false, // Disable control to avoid circular JSON error with FormControl
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-select-input
+
+A select/dropdown input integrated with Angular Reactive Forms. Uses Ionic's modal interface for option selection.
+
+### Usage
+
+\`\`\`typescript
+// In your component
+countryControl = new FormControl('');
+
+selectProps: InputMetadata = {
+  control: this.countryControl,
+  token: 'country',
+  label: 'Country',
+  name: 'country',
+  hint: '',
+  placeholder: 'Select a country',
+  type: InputType.SELECT,
+  order: 1,
+  validators: [],
+  options: [
+    { id: 'us', name: 'United States', order: 1 },
+    { id: 'uk', name: 'United Kingdom', order: 2 },
+    { id: 'ca', name: 'Canada', order: 3 }
+  ],
+  errors: {},
+  state: 'ENABLED'
+};
+\`\`\`
+
+\`\`\`html
+<val-select-input [props]="selectProps"></val-select-input>
+\`\`\`
+
+### Features
+
+- Integrated with Angular Reactive Forms
+- Modal interface for selection
+- Customizable options list
+- Default value support
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<SearchSelectorComponent>;
+
+export const Default: Story = {
+  render: () => ({
+    props: {
+      selectProps: {
+        control: new FormControl(''),
+        token: 'default',
+        label: 'Select Option',
+        name: 'select',
+        hint: '',
+        placeholder: 'Choose...',
+        type: InputType.SELECT,
+        order: 1,
+        validators: [],
+        options: [
+          { id: 'opt1', name: 'Option 1', order: 1 },
+          { id: 'opt2', name: 'Option 2', order: 2 },
+          { id: 'opt3', name: 'Option 3', order: 3 },
+        ],
+        errors: {},
+        state: ComponentStates.ENABLED,
+      },
+    },
+    template: `<val-select-input [props]="selectProps"></val-select-input>`,
+  }),
+};
+
+export const Countries: Story = {
+  render: () => ({
+    props: {
+      selectProps: {
+        control: new FormControl(''),
+        token: 'country',
+        label: 'Country',
+        name: 'country',
+        hint: '',
+        placeholder: 'Select your country',
+        type: InputType.SELECT,
+        order: 1,
+        validators: [],
+        options: [
+          { id: 'ar', name: 'Argentina', order: 1 },
+          { id: 'br', name: 'Brazil', order: 2 },
+          { id: 'ca', name: 'Canada', order: 3 },
+          { id: 'cl', name: 'Chile', order: 4 },
+          { id: 'co', name: 'Colombia', order: 5 },
+          { id: 'mx', name: 'Mexico', order: 6 },
+          { id: 'us', name: 'United States', order: 7 },
+        ],
+        errors: {},
+        state: ComponentStates.ENABLED,
+      },
+    },
+    template: `<val-select-input [props]="selectProps"></val-select-input>`,
+  }),
+};
+
+export const WithPreselectedValue: Story = {
+  render: () => ({
+    props: {
+      selectProps: {
+        control: new FormControl('medium'),
+        token: 'size',
+        label: 'Size',
+        name: 'size',
+        hint: '',
+        placeholder: 'Select size',
+        type: InputType.SELECT,
+        order: 1,
+        validators: [],
+        options: [
+          { id: 'small', name: 'Small', order: 1 },
+          { id: 'medium', name: 'Medium', order: 2 },
+          { id: 'large', name: 'Large', order: 3 },
+          { id: 'xlarge', name: 'X-Large', order: 4 },
+        ],
+        errors: {},
+        state: ComponentStates.ENABLED,
+      },
+    },
+    template: `<val-select-input [props]="selectProps"></val-select-input>`,
+  }),
+};
+
+export const Categories: Story = {
+  render: () => ({
+    props: {
+      selectProps: {
+        control: new FormControl(''),
+        token: 'category',
+        label: 'Category',
+        name: 'category',
+        hint: '',
+        placeholder: 'Choose a category',
+        type: InputType.SELECT,
+        order: 1,
+        validators: [],
+        options: [
+          { id: 'tech', name: 'Technology', order: 1 },
+          { id: 'health', name: 'Health & Wellness', order: 2 },
+          { id: 'finance', name: 'Finance', order: 3 },
+          { id: 'education', name: 'Education', order: 4 },
+          { id: 'entertainment', name: 'Entertainment', order: 5 },
+          { id: 'sports', name: 'Sports', order: 6 },
+          { id: 'travel', name: 'Travel', order: 7 },
+          { id: 'food', name: 'Food & Dining', order: 8 },
+        ],
+        errors: {},
+        state: ComponentStates.ENABLED,
+      },
+    },
+    template: `<val-select-input [props]="selectProps"></val-select-input>`,
+  }),
+};
+
+export const Priority: Story = {
+  render: () => ({
+    props: {
+      selectProps: {
+        control: new FormControl(''),
+        token: 'priority',
+        label: 'Priority',
+        name: 'priority',
+        hint: '',
+        placeholder: 'Set priority',
+        type: InputType.SELECT,
+        order: 1,
+        validators: [],
+        options: [
+          { id: 'low', name: 'Low', order: 1 },
+          { id: 'medium', name: 'Medium', order: 2 },
+          { id: 'high', name: 'High', order: 3 },
+          { id: 'critical', name: 'Critical', order: 4 },
+        ],
+        errors: {},
+        state: ComponentStates.ENABLED,
+      },
+    },
+    template: `<val-select-input [props]="selectProps"></val-select-input>`,
+  }),
+};
+
+export const Status: Story = {
+  render: () => ({
+    props: {
+      selectProps: {
+        control: new FormControl(''),
+        token: 'status',
+        label: 'Status',
+        name: 'status',
+        hint: '',
+        placeholder: 'Select status',
+        type: InputType.SELECT,
+        order: 1,
+        validators: [],
+        options: [
+          { id: 'draft', name: 'Draft', order: 1 },
+          { id: 'pending', name: 'Pending Review', order: 2 },
+          { id: 'approved', name: 'Approved', order: 3 },
+          { id: 'published', name: 'Published', order: 4 },
+          { id: 'archived', name: 'Archived', order: 5 },
+        ],
+        errors: {},
+        state: ComponentStates.ENABLED,
+      },
+    },
+    template: `<val-select-input [props]="selectProps"></val-select-input>`,
+  }),
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 24px; max-width: 400px;">
+        <h3 style="margin: 0; font-family: system-ui;">Select Input Examples</h3>
+        <p style="margin: 0; font-family: system-ui; font-size: 14px; color: #666;">
+          Click on any select to open the modal picker.
+        </p>
+
+        <div>
+          <label style="display: block; margin-bottom: 4px; font-family: system-ui; font-size: 14px;">Country</label>
+          <val-select-input [props]="{
+            control: countryControl,
+            token: 'country',
+            label: 'Country',
+            name: 'country',
+            hint: '',
+            placeholder: 'Select country',
+            type: 6,
+            order: 1,
+            validators: [],
+            options: [
+              { id: 'us', name: 'United States', order: 1 },
+              { id: 'uk', name: 'United Kingdom', order: 2 },
+              { id: 'ca', name: 'Canada', order: 3 },
+              { id: 'de', name: 'Germany', order: 4 },
+              { id: 'fr', name: 'France', order: 5 }
+            ],
+            errors: {},
+            state: 'ENABLED'
+          }"></val-select-input>
+        </div>
+
+        <div>
+          <label style="display: block; margin-bottom: 4px; font-family: system-ui; font-size: 14px;">Category</label>
+          <val-select-input [props]="{
+            control: categoryControl,
+            token: 'category',
+            label: 'Category',
+            name: 'category',
+            hint: '',
+            placeholder: 'Choose category',
+            type: 6,
+            order: 1,
+            validators: [],
+            options: [
+              { id: 'tech', name: 'Technology', order: 1 },
+              { id: 'design', name: 'Design', order: 2 },
+              { id: 'marketing', name: 'Marketing', order: 3 },
+              { id: 'sales', name: 'Sales', order: 4 }
+            ],
+            errors: {},
+            state: 'ENABLED'
+          }"></val-select-input>
+        </div>
+
+        <div>
+          <label style="display: block; margin-bottom: 4px; font-family: system-ui; font-size: 14px;">Priority</label>
+          <val-select-input [props]="{
+            control: priorityControl,
+            token: 'priority',
+            label: 'Priority',
+            name: 'priority',
+            hint: '',
+            placeholder: 'Set priority',
+            type: 6,
+            order: 1,
+            validators: [],
+            options: [
+              { id: 'low', name: 'Low', order: 1 },
+              { id: 'medium', name: 'Medium', order: 2 },
+              { id: 'high', name: 'High', order: 3 }
+            ],
+            errors: {},
+            state: 'ENABLED'
+          }"></val-select-input>
+        </div>
+      </div>
+    `,
+    props: {
+      countryControl: new FormControl(''),
+      categoryControl: new FormControl(''),
+      priorityControl: new FormControl('medium'),
+    },
+  }),
+};