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

package/src/components/or-progress/OrProgress.stories.ts

@@ -1,162 +0,0 @@
-import { OrProgress, OrProgressColors, OrProgressTypes } from './index';
-import { Story } from '@storybook/vue';
-
-export default {
-  title: 'Components/OrProgress',
-
-  component: OrProgress,
-
-  argTypes: {
-    progress: {
-      control: {
-        type: 'range',
-        min: 0,
-        max: 1,
-        step: 0.0001,
-      },
-    },
-    color: {
-      options: Object.values(OrProgressColors),
-      control: 'select',
-    },
-    type: {
-      options: Object.values(OrProgressTypes),
-      control: 'select',
-    },
-    header: {
-      control: 'text',
-      description: 'Header Slot content',
-    },
-    label: {
-      control: 'text',
-      description: 'Header Label Slot content',
-    },
-    percent: {
-      control: 'text',
-      description: 'Header Percent Slot content',
-    },
-    footer: {
-      control: 'text',
-      description: 'Footer Slot content',
-    },
-  },
-};
-
-const Template: Story = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: {
-    OrProgress,
-  },
-  template: `
-    <div>
-      <or-progress v-bind="$props">
-        <template v-if="${!!args.header}" v-slot:header>
-          ${args.header}
-        </template>
-        <template v-if="${!!args.label}" v-slot:label>
-          ${args.label}
-        </template>
-        <template v-if="${!!args.percent}" v-slot:percent="{ value }">
-          ${args.percent}
-        </template>
-        <template  v-if="${!!args.footer}" v-slot:footer="{ value }">
-          ${args.footer}
-        </template>
-      </or-progress>
-    </div>
-  `,
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  progress: 0.5,
-};
-
-export const Circle = Template.bind({});
-Circle.args = {
-  progress: 0.5,
-  type: OrProgressTypes.circle,
-};
-
-export const WithValue = Template.bind({});
-WithValue.args = {
-  maxValue: 200,
-  value: 100,
-};
-
-export const CircleWithValue = Template.bind({});
-CircleWithValue.args = {
-  ...Circle.args,
-  maxValue: 200,
-  value: 100,
-};
-
-export const Loading = Template.bind({});
-Loading.args = {
-  ...Default.args,
-  isLoading: true,
-};
-
-export const CircleLoading = Template.bind({});
-CircleLoading.args = {
-  ...Circle.args,
-  isLoading: true,
-};
-
-export const WithColor = Template.bind({});
-WithColor.args = {
-  progress: 0.75,
-  color: OrProgressColors.warning,
-};
-
-export const CircleWithColor = Template.bind({});
-CircleWithColor.args = {
-  type: OrProgressTypes.circle,
-  progress: 0.75,
-  color: OrProgressColors.primary,
-};
-
-export const WithHeaderText = Template.bind({});
-WithHeaderText.args = {
-  ...Default.args,
-  headerText: 'Progress',
-};
-
-export const WithFooterText = Template.bind({});
-WithFooterText.args = {
-  ...Default.args,
-  footerText: 'Progress',
-};
-
-export const WithHeaderAndPrecision = Template.bind({});
-WithHeaderAndPrecision.args = {
-  ...WithHeaderText.args,
-  progress: 0.54321,
-  precision: 3,
-};
-
-export const WithHeaderSlot = Template.bind({});
-WithHeaderSlot.args = {
-  ...Default.args,
-  header: '<div>Custom <i>header</i></div>',
-};
-
-export const WithFooterSlot = Template.bind({});
-WithFooterSlot.args = {
-  ...Default.args,
-  footer: '<div>Custom <i>footer</i></div>',
-};
-
-export const WithLabelSlot = Template.bind({});
-WithLabelSlot.args = {
-  ...Default.args,
-  label: '<div style="font-weight: normal"><b>Storage</b> usage</div>',
-};
-
-export const ScopedSlots = Template.bind({});
-ScopedSlots.args = {
-  ...WithValue.args,
-  headerText: 'Service',
-  percent: '{{value}} used',
-  footer: '<b>{{value}}</b> of {{$props.maxValue}} Mb',
-};

package/src/components/or-radio/OrRadio.stories.ts

@@ -1,143 +0,0 @@
-import OrRadio from './OrRadio.vue';
-import { OrRadioGroup } from '../or-radio-group';
-import { ArgTypes, Story } from '@storybook/vue';
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'Components/OrRadio',
-  component: OrRadio,
-};
-
-const defaultMixin = (argTypes: ArgTypes) => ({
-  props: Object.keys(argTypes),
-
-  components: {
-    OrRadio,
-    OrRadioGroup,
-  },
-
-  data() {
-    return {
-      modelValue: '',
-    };
-  },
-
-  methods: {
-    action: action('update:modelValue'),
-  },
-});
-
-const Template: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-  template: `
-    <or-radio v-model="modelValue" v-bind="$props" @update:modelValue="action"/>
-  `,
-});
-
-const TemplateGroup: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-  template: `
-    <div>
-      <or-radio-group v-bind="$props" v-model="modelValue" @update:modelValue="action">
-        <or-radio label="Radio 1" value="value 1"/>
-        <or-radio label="Radio 2" value="value 2"/>
-        <or-radio label="Radio 3" value="value 3"/>
-        <or-radio label="Radio 4" value="value 4"/>
-      </or-radio-group>
-    </div>
-  `,
-});
-
-const TemplateGroupWithValue: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-  data() {
-    return {
-      modelValue: {
-        a: 1,
-        b: { a: [1, 2, 3] },
-      },
-    };
-  },
-
-  template: `
-    <div>
-      <or-radio-group v-bind="$props" v-model="modelValue" @update:modelValue="action">
-        <or-radio label="Radio 1" :value="{a: 1,b: { a: [1, 2, 3] }}"/>
-        <or-radio label="Radio 2" :value="{a: 2, b: { b: [1, 2, 3] }}"/>
-        <or-radio label="Radio 3" :value="{a: 3, b: { c: [1, 2, 3] }}"/>
-        <or-radio label="Radio 4" :value="{a: 4, b: { d: [1, 2, 3] }}"/>
-      </or-radio-group>
-    </div>
-  `,
-});
-
-const TemplateWithValue: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-  data() {
-    return {
-      modelValue: {
-        a: 1,
-        b: { a: [1, 2, 3] },
-      },
-    };
-  },
-
-  template: '<or-radio v-model="modelValue" v-bind="$props" @update:modelValue="action"/>',
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  label: 'Radio Button',
-  value: {
-    a: 1,
-    b: { a: [1, 2, 3] },
-  },
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  ...Default.args,
-  isDisabled: true,
-};
-
-export const Active = TemplateWithValue.bind({});
-Active.args = {
-  ...Default.args,
-};
-
-export const ActiveDisabled = TemplateWithValue.bind({});
-ActiveDisabled.args = {
-  ...Default.args,
-  isDisabled: true,
-};
-
-export const IsUncheckable = TemplateWithValue.bind({});
-IsUncheckable.args = {
-  ...Default.args,
-  isUncheckable: true,
-};
-
-export const Group = TemplateGroup.bind({});
-export const GroupDisabled = TemplateGroup.bind({});
-GroupDisabled.args = {
-  isDisabled: true,
-};
-export const GroupRow = TemplateGroup.bind({});
-GroupRow.args = {
-  isColumn: false,
-  isRow: true,
-};
-export const GroupIsUncheckable = TemplateGroup.bind({});
-GroupIsUncheckable.args = {
-  isUncheckable: true,
-};
-
-export const GroupValue = TemplateGroupWithValue.bind({});
-export const GroupValueDisabled = TemplateGroupWithValue.bind({});
-GroupValueDisabled.args = {
-  ...GroupDisabled.args,
-};

package/src/components/or-search/OrSearch.stories.ts

@@ -1,402 +0,0 @@
-import { ArgTypes, Story } from '@storybook/vue';
-
-import { action } from '@storybook/addon-actions';
-
-import OrSearch from './OrSearch.vue';
-import { OrIcon } from '../or-icon';
-import { OrSwitch } from '../or-switch';
-import { OrIconButton } from '../or-button-v2';
-
-export default {
-  title: 'Components/OrInputs/OrSearch',
-  component: OrSearch,
-};
-
-const defaultMixin = (argTypes: ArgTypes) => ({
-  props: Object.keys(argTypes),
-
-  components: {
-    OrSearch,
-    OrIcon,
-    OrSwitch,
-    OrIconButton,
-  },
-
-  data() {
-    return {
-      inputValue: '',
-      defaultValue: 'Default value',
-    };
-  },
-
-  methods: {
-    action: action('update:modelValue'),
-    onFocus: action('focus'),
-    onBlur: action('blur'),
-    actionClick: action('click'),
-    clear: action('clear'),
-    search: action('search'),
-  },
-});
-
-const Template: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-  template: `
-    <div>
-      <or-search
-        v-model="inputValue"
-        v-bind="$props"
-        @update:modelValue="action"
-        @focus="onFocus"
-        @blur="onBlur"
-        @clear="clear"
-        @search="search"
-      />
-    </div>
-  `,
-});
-
-const TemplateWithoutVModel: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-  template: `
-    <div>
-      <or-search
-        v-bind="$props"
-        @update:modelValue="action"
-        @focus="onFocus"
-        @blur="onBlur"
-        @clear="clear"
-        @search="search"
-      />
-    </div>
-  `,
-});
-
-const TemplateLabelAppend: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-  template: `
-    <or-search
-      v-model="inputValue"
-      v-bind="$props"
-      @update:modelValue="action"
-      @focus="onFocus"
-      @blur="onBlur"
-      @search="search"
-    >
-      <or-icon slot="label-append" icon="code"/>
-    </or-search>
-  `,
-});
-
-const TemplateLabelSlot: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-  template: `
-    <or-search
-      v-model="inputValue"
-      v-bind="$props"
-      @update:modelValue="action"
-      @focus="onFocus"
-      @blur="onBlur"
-      @search="search"
-    >
-      <div slot="label-default">
-        <div>Label Slot</div>
-      </div>
-    </or-search>
-  `,
-});
-
-const TemplateSlotPrepend: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-  template: `
-    <or-search
-      v-model="inputValue"
-      v-bind="$props"
-      @update:modelValue="action"
-      @focus="onFocus"
-      @blur="onBlur"
-      @search="search"
-    >
-      <or-icon-button
-        slot="prepend"
-        type="icon"
-        icon="clear"
-        @click="actionClick"
-      />
-    </or-search>
-  `,
-});
-
-const TemplateSlotAppend: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-  template: `
-    <or-search
-      v-model="inputValue"
-      v-bind="$props"
-      @update:modelValue="action"
-      @focus="onFocus"
-      @blur="onBlur"
-      @search="search"
-    >
-      <or-icon-button
-        slot="append"
-        type="icon"
-        icon="clear"
-        @click="actionClick"
-      />
-    </or-search>
-  `,
-});
-
-const TemplateWithValue: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-  template: `
-    <or-search
-      v-bind="$props"
-      v-model="defaultValue"
-      @update:modelValue="action"
-      @focus="onFocus"
-      @blur="onBlur"
-      @search="search"
-    />
-  `,
-});
-
-const TemplateDynamicError: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-  computed: {
-    hasError() {
-      return (this as any).inputValue.length !== 4;
-    },
-  },
-
-  template: `
-    <div>
-      <or-search
-        v-bind="$props"
-        v-model="inputValue"
-        :is-invalid="hasError"
-        @update:modelValue="action"
-        @focus="onFocus"
-        @blur="onBlur"
-        @search="search"
-      />
-
-      <or-search
-        v-bind="$props"
-        v-model="inputValue"
-        :is-invalid="hasError"
-        @update:modelValue="action"
-        @focus="onFocus"
-        @blur="onBlur"
-        @search="search"
-      />
-    </div>
-  `,
-});
-
-const TemplateToggleErrorMessage: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-  data() {
-    return {
-      hasError: false,
-    };
-  },
-
-  template: `
-    <div>
-      <or-switch style="display: block; margin-bottom: 20px;" v-model="hasError" :label="'Has Error: ' + hasError"/>
-
-      <or-search
-        v-bind="$props"
-        v-model="inputValue"
-        :is-invalid="hasError"
-        error="Something went wrong"
-        @update:modelValue="action"
-        @focus="onFocus"
-        @blur="onBlur"
-        @search="search"
-      />
-
-      <or-search
-        v-bind="$props"
-        v-model="inputValue"
-        :is-invalid="hasError"
-        error="Something went wrong"
-        @update:modelValue="action"
-        @focus="onFocus"
-        @blur="onBlur"
-        @search="search"
-      />
-
-      <or-search
-        v-bind="$props"
-        v-model="inputValue"
-        :is-invalid="hasError"
-        error="Something went wrong"
-        @update:modelValue="action"
-        @focus="onFocus"
-        @blur="onBlur"
-        @search="search"
-      />
-    </div>
-    `,
-});
-
-const TemplateToggleHint: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-  data() {
-    return {
-      isActive: false,
-    };
-  },
-
-  template: `
-    <div>
-      <or-switch style="display: block;" v-model="isActive" :label="'Has Hint: ' + isActive"/>
-      <or-search
-        v-bind="$props"
-        :hint="isActive ? $props.hint : ''"
-        v-model="inputValue"
-        @update:modelValue="action"
-        @focus="onFocus"
-        @blur="onBlur"
-        @search="search"
-      />
-    </div>
-    `,
-});
-
-export const Default = Template.bind({});
-Default.args = {};
-
-export const WithoutVModel = TemplateWithoutVModel.bind({});
-WithoutVModel.args = {};
-
-export const Small = Template.bind({});
-Small.args = { isSmall: true };
-
-export const Placeholder = Template.bind({});
-Placeholder.args = { placeholder: 'Placeholder' };
-
-export const Label = Template.bind({});
-Label.args = {
-  label: 'Label',
-
-  ...Placeholder.args,
-};
-
-export const Required = Template.bind({});
-Required.args = {
-  isRequired: true,
-
-  ...Label.args,
-  ...Placeholder.args,
-};
-
-export const LabelAppendSlot = TemplateLabelAppend.bind({});
-LabelAppendSlot.args = { ...Label.args };
-
-export const LabelSlot = TemplateLabelSlot.bind({});
-LabelSlot.args = {
-  id: 'input-id',
-
-  ...Placeholder.args,
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  isDisabled: true,
-
-  ...Placeholder.args,
-  ...Label.args,
-};
-
-export const DefaultValue = TemplateWithValue.bind({});
-DefaultValue.args = {};
-
-export const Readonly = TemplateWithValue.bind({});
-Readonly.args = {
-  isReadonly: true,
-  label: 'Label',
-};
-
-export const MaxLength = Template.bind({});
-MaxLength.args = { maxLength: 10 };
-
-export const MaxLengthDefaultValue = TemplateWithValue.bind({});
-MaxLengthDefaultValue.args = {
-  maxLength: 10,
-  hint: 'If the length of value > max length then should trim the value',
-};
-
-export const Hint = Template.bind({});
-Hint.args = { hint: 'Message has to be at least 6 characters long and must contain at least more than one digit.' };
-
-export const HintToggle = TemplateToggleHint.bind({});
-HintToggle.args = { ...Hint.args };
-
-export const HintAndCounter = Template.bind({});
-HintAndCounter.args = {
-  ...MaxLength.args,
-  ...Hint.args,
-};
-
-export const Invalid = Template.bind({});
-Invalid.args = { isInvalid: true };
-
-export const InvalidAndCounter = Template.bind({});
-InvalidAndCounter.args = {
-  ...Invalid.args,
-  ...MaxLength.args,
-};
-
-export const InvalidAndErrorText = Template.bind({});
-InvalidAndErrorText.args = {
-  ...Invalid.args,
-  error: 'Something went wrong',
-};
-
-export const InvalidErrorToggle = TemplateToggleErrorMessage.bind({});
-InvalidErrorToggle.args = {};
-
-export const InvalidErrorAndHint = TemplateToggleErrorMessage.bind({});
-InvalidErrorAndHint.args = {
-  hint: 'Message has to be at least 6 characters long and must contain at least more than one digit.',
-};
-
-export const InvalidErrorAndCounter = TemplateToggleErrorMessage.bind({});
-InvalidErrorAndCounter.args = {
-  ...Default.args,
-  ...MaxLength.args,
-};
-
-export const InvalidDynamicError = TemplateDynamicError.bind({});
-InvalidDynamicError.args = {
-  hint: 'Good Good Good Good Good Good Good Good Good Good Good Good',
-  error: 'Should be 4 symbols',
-};
-
-export const SlotPrepend = TemplateSlotPrepend.bind({});
-SlotPrepend.args = {
-  ...MaxLength.args,
-  ...Label.args,
-  label: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
-  isInvalid: true,
-  error: 'Text error',
-};
-
-export const SlotAppend = TemplateSlotAppend.bind({});
-SlotAppend.args = {
-  ...MaxLength.args,
-};