tide-design-system 2.5.13 → 2.5.14

package/src/stories/TideInputCheckbox.stories.ts

@@ -1,138 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { ref, watch } from 'vue';
-
-import TideInputCheckbox from '@/components/TideInputCheckbox.vue';
-import { argTypeBooleanUnrequired, dataTrack, disabledArgType, doSomething, parameters } from '@/utilities/storybook';
-
-type Args = InstanceType<typeof TideInputCheckbox>['$props'] & {
-  handleValid: string;
-  vModel: boolean;
-};
-
-const render = (args: Args) => ({
-  components: { TideInputCheckbox },
-  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() {
-    const model = ref(args.vModel);
-
-    watch(model, (v) => {
-      args.vModel = v;
-    });
-
-    watch(
-      () => args.vModel,
-      (v) => {
-        model.value = v;
-      }
-    );
-
-    return {
-      args,
-      model,
-    };
-  },
-  template: `<TideInputCheckbox @valid="handleValid" v-bind="args" v-model="model" />`,
-});
-
-export default {
-  argTypes: {
-    dataTrack,
-    disabled: argTypeBooleanUnrequired,
-    error: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    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' },
-      },
-    },
-    indeterminate: {
-      ...argTypeBooleanUnrequired,
-      if: { arg: 'checked', eq: true },
-    },
-    inputId: {
-      control: 'text',
-      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' },
-      },
-    },
-    number: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'number' },
-      },
-    },
-    required: argTypeBooleanUnrequired,
-    vModel: {
-      control: 'boolean',
-      description: 'Data binding to Vue ref',
-      table: {
-        category: 'Native',
-        defaultValue: { summary: 'None' },
-        type: { summary: 'Ref<boolean>' },
-      },
-    },
-    valid: disabledArgType,
-  },
-  args: {
-    dataTrack: '',
-    disabled: undefined,
-    error: '',
-    handleValid: 'doSomething',
-    indeterminate: undefined,
-    inputId: '',
-    label: 'Input label',
-    name: '',
-    number: '',
-    required: undefined,
-    vModel: false,
-  },
-  component: TideInputCheckbox,
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Components/TideInputCheckbox',
-};
-
-export const Demo = {};

package/src/stories/TideInputRadio.stories.ts

@@ -1,100 +0,0 @@
-import { ref, watch } from 'vue';
-
-import TideInputRadio from '@/components/TideInputRadio.vue';
-import { argTypeBooleanUnrequired, dataTrack, parameters } from '@/utilities/storybook';
-
-import type { StoryContext } from '@storybook/vue3';
-
-type Args = InstanceType<typeof TideInputRadio>['$props'];
-
-const render = (args: Args, context: StoryContext) => ({
-  components: { TideInputRadio },
-  setup() {
-    const model = ref<string | undefined>(undefined);
-
-    watch(
-      () => ({ ...args }),
-      (newArgs) => {
-        // Reset v-model when arg table is reset.
-        if (JSON.stringify(newArgs) === JSON.stringify(context.allArgs)) model.value = undefined;
-      }
-    );
-
-    return {
-      args: {
-        ...args,
-        inputId: undefined,
-      },
-      model,
-    };
-  },
-  template: `<TideInputRadio v-bind="args" v-model="model" />`,
-});
-
-export default {
-  argTypes: {
-    dataTrack,
-    disabled: argTypeBooleanUnrequired,
-    inputId: {
-      control: 'text',
-      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' },
-      },
-    },
-    number: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'number' },
-      },
-    },
-    vModel: {
-      control: 'text',
-      description: 'Data binding to Vue ref',
-      table: {
-        category: 'Native',
-        defaultValue: { summary: 'None' },
-        type: { summary: 'Ref' },
-      },
-    },
-    value: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-  },
-  args: {
-    dataTrack: '',
-    disabled: undefined,
-    inputId: '',
-    label: 'Input label',
-    name: '',
-    number: '',
-    vModel: '',
-    value: '',
-  },
-  component: TideInputRadio,
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Components/TideInputRadio',
-};
-
-export const Demo = {};

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 = {};