@onereach/ui-components 5.0.1-beta.3131.0 → 5.0.1

package/src/components/or-select/OrSelect.stories.ts

@@ -1,330 +0,0 @@
-import Faker from 'faker';
-import { Story } from '@storybook/vue';
-import { action } from '@storybook/addon-actions';
-
-import OrSelect from './OrSelect.vue';
-import {
-  getTestOption,
-  getLongTestOption,
-  searchInOptions,
-  getSlotLabel,
-  getSlotOptionStyle,
-} from './stories.helpers';
-
-export default {
-  title: 'Components/OrSelect/OrSelect',
-  component: OrSelect,
-  argTypes: {
-    label: { type: 'string' },
-    error: { type: 'string' },
-    placeholder: { type: 'string' },
-    noResultsTitle: { type: 'string' },
-    noResultsStartText: { type: 'string' },
-    noResultsEndText: { type: 'string' },
-    updateSearchText: { type: 'string' },
-    ignoreClickOutside: { type: 'boolean' },
-  },
-};
-
-const Template: Story = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { OrSelect },
-  template: `
-    <or-select
-      v-bind="$props"
-      v-model="modelValue"
-      @search-change="onSearchChange"
-      @update:modelValue="onUpdateValue"
-      @open="onOpen"
-      @close="onClose"
-    />
-  `,
-  data() {
-    return {
-      modelValue: [],
-    };
-  },
-  methods: {
-    onUpdateValue: action('update:modelValue'),
-    onSearchChange: action('search-change'),
-    onOpen: action('open'),
-    onClose: action('close'),
-  },
-});
-
-const BASIC_OPTIONS = Array.from(Array(10).keys()).map(getTestOption);
-
-export const Default = Template.bind({});
-Default.args = {
-  modelValue: [],
-  options: Array.from(Array(10).keys()).map(getLongTestOption),
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  isDisabled: true,
-  modelValue: BASIC_OPTIONS[0].value,
-  options: BASIC_OPTIONS,
-};
-
-export const IgnoreClickOutside = Template.bind({});
-IgnoreClickOutside.args = {
-  ignoreClickOutside: true,
-  modelValue: BASIC_OPTIONS[0].value,
-  options: BASIC_OPTIONS,
-};
-
-export const MultipleValuesDisabled = Template.bind({});
-MultipleValuesDisabled.args = {
-  isMultiSelect: true,
-  isDisabled: true,
-  modelValue: BASIC_OPTIONS.slice(0, 5).map((option) => option.value),
-  options: BASIC_OPTIONS,
-};
-
-export const WithLabelAndError = Template.bind({});
-WithLabelAndError.args = {
-  modelValue: [],
-  options: Array.from(Array(10).keys()).map(getLongTestOption),
-  placeholder: Faker.commerce.productName(),
-  label: Faker.commerce.productName(),
-  error: Faker.commerce.productName(),
-  isInvalid: true,
-};
-
-export const SimpleValueWithSearch = Template.bind({});
-SimpleValueWithSearch.args = {
-  modelValue: BASIC_OPTIONS[0].value,
-  options: BASIC_OPTIONS,
-  useSearch: true,
-};
-
-export const LotsOfValuesWithSearch = Template.bind({});
-LotsOfValuesWithSearch.args = {
-  modelValue: BASIC_OPTIONS.slice(0, 5).map((option) => option.value),
-  options: BASIC_OPTIONS,
-  useSearch: true,
-  isMultiSelect: true,
-};
-
-
-const EmptyOptionsWithSlotTemplate: Story = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { OrSelect },
-  template: `
-    <or-select v-bind="$props">
-      <template v-slot:empty-options="{ search }">
-        <div style="color: orangered; padding: 1rem; text-align: center;">
-          ${Faker.commerce.productName()} {{ search }}
-        </div>
-      </template>
-    </or-select>
-  `,
-});
-
-export const EmptyOptionsWithSlot = EmptyOptionsWithSlotTemplate.bind({});
-EmptyOptionsWithSlot.args = {
-  options: [],
-  searchOptions: [],
-  useSearch: true,
-  label: Faker.commerce.productName(),
-};
-
-const DemoSimpleSearchTemplate: Story = () => ({
-  components: { OrSelect },
-  template: `
-    <or-select
-      v-model="value"
-      :options="options"
-      :search-options="searchResult"
-      :label="label"
-      :use-search="true"
-      @search-change="handleSearchChange"
-    />
-  `,
-  data() {
-    return {
-      value: '',
-      options: Array.from(Array(10).keys()).map(getTestOption),
-      label: Faker.commerce.productName(),
-      searchResult: null,
-    };
-  },
-  methods: {
-    handleSearchChange(this: any, search: string): void {
-      search
-        ? (this.searchResult = searchInOptions(search, this.options))
-        : (this.searchResult = null);
-    },
-  },
-});
-
-export const DemoSimpleSearch = DemoSimpleSearchTemplate.bind({});
-
-const DemoSimpleWithSlotsTemplate: Story = () => ({
-  components: { OrSelect },
-  template: `
-    <or-select
-      v-model="value"
-      :options="options"
-      :label="label"
-    >
-      <template v-slot:input-value="{ value, options }">
-        <div style="display: flex; align-items: center; color: orangered;">
-          {{ getSlotLabel(value, options) }}
-        </div>
-      </template>
-
-      <template v-slot:content-option="{ option, isActive, onSelect }">
-        <div
-          :style="getSlotOptionStyle(isActive)"
-          @click="onSelect"
-        >
-          {{ option.label }}
-        </div>
-      </template>
-    </or-select>
-  `,
-  data() {
-    return {
-      value: '',
-      options: Array.from(Array(10).keys()).map(getTestOption),
-      label: Faker.commerce.productName(),
-    };
-  },
-  methods: {
-    getSlotLabel,
-    getSlotOptionStyle,
-  },
-});
-
-export const DemoSimpleWithSlots = DemoSimpleWithSlotsTemplate.bind({});
-
-const DemoSimpleSearchFunctionTemplate: Story = () => ({
-  components: { OrSelect },
-  template: `
-    <or-select
-      v-model="value"
-      :options="options"
-      :label="label"
-      :use-search="true"
-      :search-function="searchInOptions"
-    />
-  `,
-  data() {
-    return {
-      value: '',
-      options: Array.from(Array(10).keys()).map(getTestOption),
-      label: Faker.commerce.productName(),
-    };
-  },
-  methods: {
-    searchInOptions(this: any, args: { search: string; }) {
-      return searchInOptions(args.search, this.options);
-    },
-  },
-});
-
-export const DemoSimpleSearchFunction = DemoSimpleSearchFunctionTemplate.bind({});
-
-const DemoMultiTemplate: Story = () => ({
-  components: { OrSelect },
-  template: `
-    <or-select
-      v-model="value"
-      :options="options"
-      :label="label"
-      :is-multi-select="true"
-      :use-search="true"
-      :search-function="searchInOptions"
-    />
-  `,
-  data() {
-    return {
-      value: [],
-      options: Array.from(Array(10).keys()).map(getTestOption),
-      label: Faker.commerce.productName(),
-    };
-  },
-  methods: {
-    searchInOptions(this: any, args: { search: string; }) {
-      return searchInOptions(args.search, this.options);
-    },
-  },
-});
-
-export const DemoMultiSelect = DemoMultiTemplate.bind({});
-
-/**
- * User can completely override content of options,
- * for example, in order to add virtual scroll.
- * V-Model is going to be auto managed by "onSelectOption" handler.
- */
-const DemoTemplateContentOptionsSlot: Story = () => ({
-  components: { OrSelect },
-  template: `
-    <or-select
-      v-model="value"
-      label="${Faker.commerce.productName()}"
-      :options="[option]"
-      :use-search="true"
-      @search-change="onSearchChange"
-    >
-      <template v-slot:content-options="{ onSelectOption }">
-        <div
-          style="color: dodgerblue; padding: 1rem; text-align: center; cursor: pointer"
-          @click="onSelectOption(option)"
-        >
-          {{ option.label }}
-        </div>
-      </template>
-    </or-select>
-  `,
-  data() {
-    return {
-      value: '',
-      option: {
-        value: Faker.datatype.uuid(),
-        label: Faker.commerce.productName(),
-      },
-    };
-  },
-  methods: {
-    onSearchChange: action('search-change'),
-  },
-});
-
-export const DemoContentOptionsSlot = DemoTemplateContentOptionsSlot.bind({});
-DemoContentOptionsSlot.args = {
-  label: Faker.commerce.productName(),
-};
-
-const DemoValueNumberTemplate: Story = () => ({
-  components: { OrSelect },
-  template: `
-    <or-select
-      v-model="value"
-      :options="options"
-      :label="label"
-      :use-search="true"
-      :search-function="searchInOptions"
-    />
-  `,
-  data() {
-    return {
-      value: undefined,
-      options: Array.from(Array(10).keys()).map((e, i) => ({
-        value: i,
-        label: Faker.commerce.productName(),
-      })),
-      label: Faker.commerce.productName(),
-    };
-  },
-  methods: {
-    searchInOptions(this: any, args: { search: string; }) {
-      return searchInOptions(args.search, this.options);
-    },
-  },
-});
-
-export const DemoValueNumberSelect = DemoValueNumberTemplate.bind({});

package/src/components/or-select/partials/OrSelectContent.stories.ts

@@ -1,191 +0,0 @@
-import Faker from 'faker';
-import { Story } from '@storybook/vue';
-import { action } from '@storybook/addon-actions';
-
-import OrSelectContent from './OrSelectContent.vue';
-import {
-  getTestOption,
-  getLongTestOption,
-  getSlotOptionStyle,
-} from '../stories.helpers';
-
-export default {
-  title: 'Components/OrSelect/OrSelectContent',
-  component: OrSelectContent,
-  argTypes: {
-    noResultsTitle: { type: 'string' },
-    noResultsStartText: { type: 'string' },
-    noResultsEndText: { type: 'string' },
-    updateSearchText: { type: 'string' },
-  },
-  parameters: {
-    backgrounds: { default: 'onereach-light' },
-  },
-};
-
-const Template: Story = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { OrSelectContent },
-  template: `
-    <or-select-content
-      v-bind="$props"
-      @search-change="onSearchChange"
-      @select-option="onSelectOption"
-    />
-  `,
-  methods: {
-    onSearchChange: action('search-change'),
-    onSelectOption: action('select-option'),
-  },
-});
-
-const BASIC_OPTIONS = Array.from(Array(10).keys()).map(getTestOption);
-const LARGE_OPTIONS = Array.from(Array(10).keys()).map(getLongTestOption);
-
-export const Default = Template.bind({});
-Default.args = {
-  useSearch: true,
-  value: BASIC_OPTIONS[0].value,
-  options: BASIC_OPTIONS,
-};
-
-export const DropUp = Template.bind({});
-DropUp.args = {
-  ...Default.args,
-  isTop: true,
-};
-
-export const MultiSelect = Template.bind({});
-MultiSelect.args = {
-  useSearch: true,
-  isMultiSelect: true,
-  value: [BASIC_OPTIONS[0].value],
-  options: BASIC_OPTIONS,
-};
-
-export const Loading = Template.bind({});
-Loading.args = {
-  isLoading: true,
-  useSearch: true,
-  options: BASIC_OPTIONS,
-};
-
-export const VeryLongText = Template.bind({});
-VeryLongText.args = {
-  useSearch: true,
-  value: LARGE_OPTIONS[0].value,
-  options: LARGE_OPTIONS,
-};
-
-export const ShortOptionsList = Template.bind({});
-ShortOptionsList.args = {
-  useSearch: true,
-  value: LARGE_OPTIONS[0].value,
-  options: LARGE_OPTIONS.slice(0, 3),
-};
-
-export const EmptyOptionsList = Template.bind({});
-EmptyOptionsList.args = {
-  useSearch: true,
-  options: [],
-};
-
-export const EmptyOptionsListWithCustomText = Template.bind({});
-EmptyOptionsListWithCustomText.args = {
-  ...EmptyOptionsList.args,
-  noResultsTitle: 'Not found',
-  noResultsStartText: 'Option "',
-  noResultsEndText: '" is not found.',
-  updateSearchText: 'Try something else.',
-};
-
-const TemplateWithSlot: Story = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { OrSelectContent },
-  template: `
-    <or-select-content
-      v-bind="$props"
-      @search-change="onSearchChange"
-      @select-option="onSelectOption"
-    >
-      <template v-slot:content-option="{ option, isActive, onSelect }">
-        <div
-          :style="getSlotOptionStyle(isActive)"
-          @click="onSelect"
-        >
-          {{ option.label }}
-        </div>
-      </template>
-    </or-select-content>
-  `,
-  methods: {
-    onSearchChange: action('search-change'),
-    onSelectOption: action('select-option'),
-    getSlotOptionStyle,
-  },
-});
-
-export const DefaultWithSlot = TemplateWithSlot.bind({});
-DefaultWithSlot.args = {
-  useSearch: true,
-  value: BASIC_OPTIONS[0].value,
-  options: BASIC_OPTIONS,
-};
-
-const TemplateWithEmptyOptionsSlot: Story = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { OrSelectContent },
-  template: `
-    <or-select-content v-bind="$props">
-      <template v-slot:empty-options="{ search }">
-        <div style="color: orangered; padding: 1rem; text-align: center;">
-          ${Faker.commerce.productName()}
-        </div>
-      </template>
-    </or-select-content>
-  `,
-});
-
-export const EmptyOptionsSlot = TemplateWithEmptyOptionsSlot.bind({});
-EmptyOptionsSlot.args = {
-  useSearch: true,
-  options: [],
-};
-
-/* User can completely override main content for options */
-const TemplateContentOptionsSlot: Story = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { OrSelectContent },
-  template: `
-    <or-select-content
-      v-bind="$props"
-      :options="[option]"
-      @select-option="onOptionClick"
-    >
-      <template v-slot:content-options="{ onSelectOption }">
-        <div
-          style="color: dodgerblue; padding: 1rem; text-align: center; cursor: pointer"
-          @click="onSelectOption(option)"
-        >
-          {{ option.label }}
-        </div>
-      </template>
-    </or-select-content>
-  `,
-  data() {
-    return {
-      option: {
-        value: Faker.datatype.uuid(),
-        label: Faker.commerce.productName(),
-      },
-    };
-  },
-  methods: {
-    onOptionClick: action('select-option'),
-  },
-});
-
-export const ContentOptionsSlot = TemplateContentOptionsSlot.bind({});
-ContentOptionsSlot.args = {
-  useSearch: true,
-};

package/src/components/or-select/partials/OrSelectInput.stories.ts

@@ -1,115 +0,0 @@
-import Faker from 'faker';
-import { Story } from '@storybook/vue';
-import { action } from '@storybook/addon-actions';
-
-import OrSelectInput from './OrSelectInput.vue';
-import {
-  getTestOption,
-  getLongTestOption,
-  getSlotLabel,
-} from '../stories.helpers';
-
-export default {
-  title: 'Components/OrSelect/OrSelectInput',
-  component: OrSelectInput,
-  argTypes: {
-    placeholder: { type: 'string' },
-  },
-};
-
-const Template: Story = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { OrSelectInput },
-  template: `
-    <or-select-input
-      v-bind="$props"
-      @toggle-content="onToggleContent"
-      @delete-value="onDeleteValue"
-    />
-  `,
-  methods: {
-    onToggleContent: action('toggle-content'),
-    onDeleteValue: action('delete-value'),
-  },
-});
-
-const BASIC_OPTIONS = Array.from(Array(10).keys()).map(getTestOption);
-const LARGE_OPTIONS = Array.from(Array(10).keys()).map(getLongTestOption);
-
-export const Default = Template.bind({});
-Default.args = {
-  value: [],
-  options: [],
-  placeholder: Faker.commerce.productName(),
-};
-
-export const EmptyOptions = Template.bind({});
-EmptyOptions.args = {
-  value: BASIC_OPTIONS[0].value,
-};
-
-export const SimpleValue = Template.bind({});
-SimpleValue.args = {
-  value: BASIC_OPTIONS[0].value,
-  options: BASIC_OPTIONS,
-};
-
-export const SimpleValueOpen = Template.bind({});
-SimpleValueOpen.args = {
-  isOpen: true,
-  value: BASIC_OPTIONS[0].value,
-  options: BASIC_OPTIONS,
-};
-
-export const DropUpOpen = Template.bind({});
-DropUpOpen.args = {
-  ...SimpleValueOpen.args,
-  isTop: true,
-};
-
-export const VeryLongSingleValue = Template.bind({});
-VeryLongSingleValue.args = {
-  value: LARGE_OPTIONS[0].value,
-  options: LARGE_OPTIONS,
-};
-
-export const MultiLongValue = Template.bind({});
-MultiLongValue.args = {
-  isMultiSelect: true,
-  value: LARGE_OPTIONS.slice(0, 3).map((option) => option.value),
-  options: LARGE_OPTIONS,
-};
-
-export const LotsOfValues = Template.bind({});
-LotsOfValues.args = {
-  isMultiSelect: true,
-  value: BASIC_OPTIONS.map((option) => option.value),
-  options: BASIC_OPTIONS,
-};
-
-const TemplateWithSlot: Story = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { OrSelectInput },
-  template: `
-    <or-select-input
-      v-bind="$props"
-      @toggle-content="onToggleContent"
-    >
-      <template v-slot:input-value="{ value, options }">
-        <div style="display: flex; align-items: center; color: orangered;">
-          {{ getSlotLabel(value, options) }}
-        </div>
-      </template>
-    </or-select-input>
-  `,
-  methods: {
-    onToggleContent: action('toggle-content'),
-    getSlotLabel,
-  },
-});
-
-export const InputWithSlot = TemplateWithSlot.bind({});
-InputWithSlot.args = {
-  value: BASIC_OPTIONS[0].value,
-  options: BASIC_OPTIONS,
-};

package/src/components/or-select/stories.helpers.ts

@@ -1,40 +0,0 @@
-import Faker from 'faker';
-import { Option } from './types';
-
-export function getTestOption(): Option {
-  return {
-    value: Faker.datatype.uuid(),
-    label: Faker.commerce.productName(),
-  };
-}
-
-export function getLongTestOption(): Option {
-  return {
-    value: Faker.datatype.uuid(),
-    label: Faker.lorem.paragraph(),
-  };
-}
-
-export function searchInOptions(search: string, options: Option[]): Option[] {
-  return options.filter((option) => {
-    const term = search.toLowerCase();
-    const content = option.label ?? option.value;
-    return content.toLowerCase().includes(term);
-  });
-}
-
-export function getSlotLabel(value: string, options: Option[]): string {
-  /* eslint-disable-next-line */
-  return options.find((i) => i.value === value)!.label!;
-}
-
-export function getSlotOptionStyle(isActive: boolean): Record<string, string> {
-  return {
-    display: 'flex',
-    'align-items': 'center',
-    height: '2.125rem',
-    padding: '0 0.625rem',
-    color: isActive ? 'orangered' : 'dodgerblue',
-    cursor: 'pointer',
-  };
-}