tide-design-system 2.5.12 → 2.5.14

package/src/stories/TideInputSelect.stories.ts

@@ -1,244 +0,0 @@
-import { action } from '@storybook/addon-actions';
-
-import TideInputSelect from '@/components/TideInputSelect.vue';
-import * as STANDARD_ERROR_DISPLAY from '@/types/Validation';
-import {
-  argTypeBooleanUnrequired,
-  change,
-  dataTrack,
-  disabledArgType,
-  doSomething,
-  formatArgType,
-  parameters,
-  prependNoneAsUndefined,
-} from '@/utilities/storybook';
-
-import type { SelectOption, SelectOptionGroup } from '@/types/Select';
-import type { StoryContext } from '@storybook/vue3';
-
-type Args = InstanceType<typeof TideInputSelect>['$props'] & {
-  change: string;
-  handleValid: string;
-  vModel: string;
-};
-const ERROR_DISPLAY = prependNoneAsUndefined(STANDARD_ERROR_DISPLAY.ERROR_DISPLAY);
-
-const selectOptionGroups: (SelectOption | SelectOptionGroup)[] = [
-  {
-    label: 'Any',
-    value: '',
-  },
-  {
-    label: 'Group A',
-    options: [
-      {
-        label: 'Option A1',
-        value: 'A1',
-      },
-      {
-        label: 'Option A2',
-        value: 'A2',
-      },
-      {
-        label: 'Option A3',
-        value: 'A3',
-      },
-    ],
-  },
-  {
-    label: 'Group B',
-    options: [
-      {
-        label: 'Option B1',
-        value: 'B1',
-      },
-      {
-        label: 'Option B2',
-        value: 'B2',
-      },
-      {
-        label: 'Option B3',
-        value: 'B3',
-      },
-    ],
-  },
-];
-
-const selectOptions: SelectOption[] = [
-  {
-    label: 'Option 1',
-    value: '1',
-  },
-  {
-    label: 'Option 2',
-    value: '2',
-  },
-  {
-    label: 'Option 3',
-    value: '3',
-  },
-];
-
-const render = (args: Args, context: StoryContext) => ({
-  components: { TideInputSelect },
-  methods: {
-    doSomething,
-    handleChange: (event: Event) => {
-      const value = (event?.target as HTMLSelectElement).value;
-
-      action('TideInputSelect changed')({});
-      context.updateArgs({ ...args, vModel: value });
-
-      try {
-        const callback = eval(args.change);
-
-        if (callback) {
-          callback();
-        }
-      } catch {
-        alert('Please specify a valid handler in the "change" control.');
-      }
-    },
-    handleValid: () => {
-      action('TideInputSelect valid was emitted')({});
-
-      try {
-        const callback = eval(args.handleValid);
-
-        if (callback) {
-          callback();
-        }
-      } catch {
-        alert('Please specify a valid handler in the "valid" control.');
-      }
-    },
-  },
-  setup: () => ({ args }),
-  template: `<TideInputSelect @change="handleChange" @valid="handleValid" v-bind="args" />`,
-});
-
-export default {
-  argTypes: {
-    change,
-    dataTrack,
-    disabled: argTypeBooleanUnrequired,
-    error: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    errorDisplay: {
-      ...formatArgType({ ERROR_DISPLAY }),
-    },
-    handleValid: {
-      control: 'text',
-      description: 'JS code or function to execute on valid event',
-      isEmit: true,
-      name: 'valid',
-      table: {
-        category: 'Events',
-        defaultValue: { summary: 'None' },
-        type: { summary: '(isValid: boolean) => void' },
-      },
-    },
-    inputId: {
-      control: 'text',
-      description: 'Unique ID attribute<br />(to bind Select label to input)',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    label: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    name: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    optgroups: {
-      ...formatArgType({ selectOptionGroups }),
-      control: 'object',
-      isCustom: true,
-      table: {
-        defaultValue: { summary: '[]' },
-        type: { summary: 'SelectOptionGroup[]' },
-      },
-    },
-    options: {
-      ...formatArgType({ selectOptions }),
-      control: 'object',
-      isCustom: true,
-      table: {
-        defaultValue: { summary: '[]' },
-        type: { summary: 'SelectOption[]' },
-      },
-    },
-    prefix: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    required: argTypeBooleanUnrequired,
-    suffix: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    supportingText: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    vModel: {
-      control: 'text',
-      description: 'Data binding to Vue ref',
-      table: {
-        category: 'Native',
-        defaultValue: { summary: 'None' },
-        type: { summary: 'Ref' },
-      },
-    },
-    valid: disabledArgType,
-  },
-  args: {
-    change: 'doSomething',
-    dataTrack: '',
-    disabled: undefined,
-    error: '',
-    errorDisplay: undefined,
-    handleValid: 'doSomething',
-    inputId: '',
-    label: 'Input label',
-    name: '',
-    optgroups: selectOptionGroups,
-    options: selectOptions,
-    prefix: '',
-    required: undefined,
-    suffix: '',
-    supportingText: '',
-    vModel: '',
-  },
-  component: TideInputSelect,
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Components/TideInputSelect',
-};
-
-export const Demo = {};

package/src/stories/TideInputText.stories.ts

@@ -1,221 +0,0 @@
-import { action } from '@storybook/addon-actions';
-
-import TideInputText from '@/components/TideInputText.vue';
-import * as STANDARD_FORMAT from '@/types/Formatted';
-import * as STANDARD_ICON from '@/types/Icon';
-import * as STANDARD_TEXT_INPUT from '@/types/TextInput';
-import * as STANDARD_ERROR_DISPLAY from '@/types/Validation';
-import { VALIDATOR } from '@/types/Validation';
-import {
-  argTypeBooleanUnrequired,
-  dataTrack,
-  disabledArgType,
-  doSomething,
-  formatArgType,
-  formatArgTypeCheck,
-  parameters,
-  prependNoneAsUndefined,
-} from '@/utilities/storybook';
-
-type Args = InstanceType<typeof TideInputText>['$props'] & {
-  handleValid: string;
-  vModel: string;
-};
-
-const ERROR_DISPLAY = prependNoneAsUndefined(STANDARD_ERROR_DISPLAY.ERROR_DISPLAY);
-const FORMAT = prependNoneAsUndefined(STANDARD_FORMAT.FORMAT);
-const ICON = prependNoneAsUndefined(STANDARD_ICON.ICON);
-const TEXT_INPUT_TYPE = prependNoneAsUndefined(STANDARD_TEXT_INPUT.TEXT_INPUT_TYPE);
-const INPUT_MODE = prependNoneAsUndefined(STANDARD_TEXT_INPUT.INPUT_MODE);
-
-const render = (args: Args) => ({
-  components: { TideInputText },
-  methods: {
-    doSomething,
-    handleValid: () => {
-      action('TideInputText valid was emitted')({});
-
-      try {
-        const callback = eval(args.handleValid);
-
-        if (callback) {
-          callback();
-        }
-      } catch {
-        alert('Please specify a valid handler in the "valid" control.');
-      }
-    },
-  },
-  setup: () => ({ args }),
-  template: `<TideInputText @valid="handleValid" v-bind="args" />`,
-});
-
-export default {
-  argTypes: {
-    autocomplete: argTypeBooleanUnrequired,
-    dataTrack,
-    disabled: {
-      ...argTypeBooleanUnrequired,
-      table: {
-        ...argTypeBooleanUnrequired.table,
-        category: 'Native',
-      },
-    },
-    error: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    errorDisplay: {
-      ...formatArgType({ ERROR_DISPLAY }),
-    },
-    handleValid: {
-      control: 'text',
-      description: 'JS code or function to execute on valid event',
-      isEmit: true,
-      name: 'valid',
-      table: {
-        category: 'Events',
-        defaultValue: { summary: 'None' },
-        type: { summary: '(isValid: boolean) => void' },
-      },
-    },
-    hasClear: {
-      ...argTypeBooleanUnrequired,
-      if: { arg: 'type', neq: TEXT_INPUT_TYPE.PASSWORD },
-    },
-    iconLeading: {
-      ...formatArgType({ ICON }),
-    },
-    inputId: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    inputmode: {
-      ...formatArgType({ INPUT_MODE }),
-      table: {
-        category: 'Native',
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    label: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    maxlength: {
-      control: 'text',
-      table: {
-        category: 'Native',
-        defaultValue: { summary: 'None' },
-        type: { summary: 'number' },
-      },
-    },
-    minlength: {
-      control: 'text',
-      table: {
-        category: 'Native',
-        defaultValue: { summary: 'None' },
-        type: { summary: 'number' },
-      },
-    },
-    name: {
-      control: 'text',
-      table: {
-        category: 'Native',
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    prefix: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    required: {
-      ...argTypeBooleanUnrequired,
-      table: {
-        ...argTypeBooleanUnrequired.table,
-        category: 'Native',
-      },
-    },
-    suffix: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    supportingText: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    transformValue: {
-      ...formatArgType({ FORMAT }),
-    },
-    type: {
-      ...formatArgType({ TEXT_INPUT_TYPE }),
-      table: {
-        ...formatArgType({ TEXT_INPUT_TYPE }).table,
-        category: 'Native',
-      },
-    },
-    vModel: {
-      control: 'text',
-      description: 'Data binding to Vue ref',
-      table: {
-        category: 'Native',
-        defaultValue: { summary: 'None' },
-        type: { summary: 'Ref' },
-      },
-    },
-    valid: disabledArgType,
-    validators: {
-      ...formatArgTypeCheck({ VALIDATOR }),
-    },
-  },
-  args: {
-    autocomplete: undefined,
-    dataTrack: '',
-    disabled: undefined,
-    error: '',
-    errorDisplay: undefined,
-    handleValid: 'doSomething',
-    hasClear: undefined,
-    iconLeading: undefined,
-    inputId: '',
-    inputmode: undefined,
-    label: 'Input label',
-    maxlength: '',
-    minlength: '',
-    name: '',
-    prefix: '',
-    required: undefined,
-    suffix: '',
-    supportingText: '',
-    transformValue: undefined,
-    type: undefined,
-    vModel: '',
-    validators: [],
-  },
-  component: TideInputText,
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Components/TideInputText',
-};
-
-export const Demo = {};

package/src/stories/TideInputTextarea.stories.ts

@@ -1,156 +0,0 @@
-import { action } from '@storybook/addon-actions';
-
-import TideInputTextarea from '@/components/TideInputTextarea.vue';
-import * as STANDARD_ERROR_DISPLAY from '@/types/Validation';
-import { VALIDATOR } from '@/types/Validation';
-import {
-  argTypeBooleanUnrequired,
-  dataTrack,
-  disabledArgType,
-  doSomething,
-  formatArgType,
-  formatArgTypeCheck,
-  parameters,
-  prependNoneAsUndefined,
-} from '@/utilities/storybook';
-
-type Args = InstanceType<typeof TideInputTextarea>['$props'] & {
-  handleValid: string;
-  vModel: string;
-};
-
-const ERROR_DISPLAY = prependNoneAsUndefined(STANDARD_ERROR_DISPLAY.ERROR_DISPLAY);
-
-const render = (args: Args) => ({
-  components: { TideInputTextarea },
-  methods: {
-    doSomething,
-    handleValid: () => {
-      action('TideInputText valid was emitted')({});
-
-      try {
-        const callback = eval(args.handleValid);
-
-        if (callback) {
-          callback();
-        }
-      } catch {
-        alert('Please specify a valid handler in the "valid" control.');
-      }
-    },
-  },
-  setup: () => ({ args }),
-  template: `<TideInputTextarea @valid="handleValid" v-bind="args" />`,
-});
-
-export default {
-  argTypes: {
-    dataTrack,
-    error: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    errorDisplay: {
-      ...formatArgType({ ERROR_DISPLAY }),
-    },
-    handleValid: {
-      control: 'text',
-      description: 'JS code or function to execute on valid event',
-      isEmit: true,
-      name: 'valid',
-      table: {
-        category: 'Events',
-        defaultValue: { summary: 'None' },
-        type: { summary: '(isValid: boolean) => void' },
-      },
-    },
-    inputId: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    label: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    maxlength: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'number' },
-      },
-    },
-    minlength: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'number' },
-      },
-    },
-    name: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    required: argTypeBooleanUnrequired,
-    rows: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'number' },
-      },
-    },
-    supportingText: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    vModel: {
-      control: 'text',
-      description: 'Data binding to Vue ref',
-      table: {
-        category: 'Native',
-        defaultValue: { summary: 'None' },
-        type: { summary: 'Ref' },
-      },
-    },
-    valid: disabledArgType,
-    validators: {
-      ...formatArgTypeCheck({ VALIDATOR }),
-    },
-  },
-  args: {
-    dataTrack: '',
-    error: '',
-    errorDisplay: undefined,
-    handleValid: 'doSomething',
-    inputId: '',
-    label: 'Input label',
-    maxlength: '',
-    minlength: '',
-    name: '',
-    required: undefined,
-    rows: '',
-    supportingText: '',
-    vModel: '',
-  },
-  component: TideInputTextarea,
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Components/TideInputTextarea',
-};
-
-export const Demo = {};