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

package/src/components/or-checkbox/OrCheckbox.stories.ts

@@ -1,383 +0,0 @@
-import { ArgTypes, Story } from '@storybook/vue';
-
-import OrCheckbox from './OrCheckbox.vue';
-import { OrButtonV2 as OrButton } from '../or-button-v2';
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'Components/OrCheckbox',
-  component: OrCheckbox,
-};
-
-const components = {
-  OrCheckbox,
-  OrButton,
-};
-
-const props = (argTypes: ArgTypes) => Object.keys(argTypes);
-
-const defaultMixin = (argTypes: ArgTypes) => ({
-  props: props(argTypes),
-
-  components,
-
-  data() {
-    return {
-      currentValue: false,
-      selected: [],
-      selectedObjects: [],
-    };
-  },
-
-  methods: {
-    action: action('update:modelValue'),
-    onFocus: action('focus'),
-    onBlur: action('blur'),
-  },
-});
-
-const defaultMixinWithValue = (argTypes: ArgTypes) => ({
-  props: props(argTypes),
-
-  components,
-
-  data() {
-    return {
-      currentValue: true,
-      selected: ['Foo'],
-      selectedObjects: [
-        {
-          label: 'Foo',
-          value: 'Foo',
-          items: [
-            {
-              label: 'Foo',
-              value: 'Foo',
-            },
-            {
-              label: 'Foo',
-              value: 'Foo',
-            },
-          ],
-        },
-      ],
-    };
-  },
-
-  methods: {
-    action: action('update:modelValue'),
-    onFocus: action('focus'),
-    onBlur: action('blur'),
-  },
-});
-
-const DefaultTemplate: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-  template: `
-    <or-checkbox
-      v-model="currentValue"
-      v-bind="$props"
-      :label="$props.label ? $props.label + '. Value: ' + currentValue : ''"
-      @update:modelValue="action"
-      @focus="onFocus"
-      @blur="onBlur"
-    >
-      <span>Slot content. Value: {{ currentValue }}</span>
-    </or-checkbox>
-  `,
-});
-
-const DefaultTemplateWithValue: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixinWithValue(argTypes)],
-
-  template: `
-    <or-checkbox
-      v-model="currentValue"
-      v-bind="$props"
-      :label="$props.label ? $props.label + '. Value: ' + currentValue : ''"
-      @update:modelValue="action"
-      @focus="onFocus"
-      @blur="onBlur"
-    >
-      <span>Slot content. Value: {{ currentValue }}</span>
-    </or-checkbox>
-  `,
-});
-
-const TemplateWithLink: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-  template: `
-    <or-checkbox
-      v-model="currentValue"
-      v-bind="$props"
-      @update:modelValue="action"
-      @focus="onFocus"
-      @blur="onBlur"
-    >
-      Do you agree with <a href="https://google.com">this</a> rules?
-    </or-checkbox>
-  `,
-});
-
-const TemplateWithComponent: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-  template: `
-    <or-checkbox
-      v-model="currentValue"
-      v-bind="$props"
-      @update:modelValue="action"
-      @focus="onFocus"
-      @blur="onBlur"
-    >
-      content and <or-button color="error" content="Button" @click="onClick"/>
-    </or-checkbox>
-  `,
-
-  methods: {
-    onClick: action('click'),
-  },
-});
-
-const TemplateGroup: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-  template: `
-    <div>
-      <or-checkbox
-        v-model.trim="selected"
-        label="Foo"
-        value="Foo"
-        @update:modelValue="action"
-        @focus="onFocus"
-        @blur="onBlur"
-      />
-
-      <or-checkbox
-        v-model.trim="selected"
-        label="Bar"
-        value="Bar"
-        @update:modelValue="action"
-        @focus="onFocus"
-        @blur="onBlur"
-      />
-
-      <or-checkbox
-        v-model.trim="selected"
-        label="Baz"
-        value="Baz"
-        @update:modelValue="action"
-        @focus="onFocus"
-        @blur="onBlur"
-      />
-    </div>
-  `,
-});
-
-const TemplateGroupWithValue: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixinWithValue(argTypes)],
-
-  template: `
-    <div>
-      <or-checkbox
-        v-model.trim="selected"
-        label="Foo"
-        value="Foo"
-        @update:modelValue="action"
-        @focus="onFocus"
-        @blur="onBlur"
-      />
-
-      <or-checkbox
-        v-model.trim="selected"
-        label="Bar"
-        value="Bar"
-        @update:modelValue="action"
-        @focus="onFocus"
-        @blur="onBlur"
-      />
-
-      <or-checkbox
-        v-model.trim="selected"
-        label="Baz"
-        value="Baz"
-        @update:modelValue="action"
-        @focus="onFocus"
-        @blur="onBlur"
-      />
-    </div>
-  `,
-});
-
-const TemplateGroupObjects: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-  template: `
-    <div>
-      <or-checkbox
-        v-model="selectedObjects"
-        label="Foo"
-        :value="{label: 'Foo', value: 'Foo', items: [{label: 'Foo', value: 'Foo'}, {label: 'Foo', value: 'Foo'}]}"
-        @update:modelValue="action"
-        @focus="onFocus"
-        @blur="onBlur"
-      />
-
-      <or-checkbox
-        v-model="selectedObjects"
-        label="Bar"
-        :value="{label: 'Bar', value: 'Bar', items: [{label: 'Bar', value: 'Bar'}, {label: 'Bar', value: 'Bar'}]}"
-        @update:modelValue="action"
-        @focus="onFocus"
-        @blur="onBlur"
-      />
-
-      <or-checkbox
-        v-model="selectedObjects"
-        label="Baz"
-        :value="{label: 'Baz', value: 'Baz', items: [{label: 'Baz', value: 'Baz'}, {label: 'Baz', value: 'Baz'}]}"
-        @update:modelValue="action"
-        @focus="onFocus"
-        @blur="onBlur"
-      />
-    </div>
-  `,
-});
-
-const TemplateGroupObjectsWithValue: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixinWithValue(argTypes)],
-
-  template: `
-    <div>
-      <or-checkbox
-        v-model="selectedObjects"
-        label="Foo"
-        :value="{label: 'Foo', value: 'Foo', items: [{label: 'Foo', value: 'Foo'}, {label: 'Foo', value: 'Foo'}]}"
-        @update:modelValue="action"
-        @focus="onFocus"
-        @blur="onBlur"
-      />
-
-      <or-checkbox
-        v-model="selectedObjects"
-        label="Bar"
-        :value="{label: 'Bar', value: 'Bar', items: [{label: 'Bar', value: 'Bar'}, {label: 'Bar', value: 'Bar'}]}"
-        @update:modelValue="action"
-        @focus="onFocus"
-        @blur="onBlur"
-      />
-
-      <or-checkbox
-        v-model="selectedObjects"
-        label="Baz"
-        :value="{label: 'Baz', value: 'Baz', items: [{label: 'Baz', value: 'Baz'}, {label: 'Baz', value: 'Baz'}]}"
-        @update:modelValue="action"
-        @focus="onFocus"
-        @blur="onBlur"
-      />
-    </div>
-  `,
-});
-
-const StateTemplate: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-  data() {
-    return {
-      count: 0,
-
-      state: [
-        {
-          icon: '',
-          value: 'default',
-        },
-        {
-          icon: 'remove',
-          value: 'remove',
-        },
-        {
-          icon: 'done',
-          value: 'done',
-        },
-        {
-          icon: 'bolt',
-          value: 'bolt',
-        },
-        {
-          icon: 'remove',
-          value: 'remove',
-        },
-        {
-          icon: 'done',
-          value: 'done',
-        },
-        {
-          icon: 'bolt',
-          value: 'bolt',
-        },
-      ],
-    };
-  },
-
-  computed: {
-    activeState() {
-      return (this as any).state[(this as any).count];
-    },
-  },
-
-  template: `
-    <or-checkbox
-      v-model="activeState"
-      v-bind="$props"
-      @update:modelValue="onChange"
-      @focus="onFocus"
-      @blur="onBlur"
-    >
-      {{ activeState }}
-      <br>
-      {{ state }}
-    </or-checkbox>
-  `,
-
-  methods: {
-    onChange(): void {
-      const { length } = (this as any).state;
-      (this as any).count += 1;
-
-      if (length === (this as any).count) {
-        (this as any).count = 0;
-      }
-    },
-  },
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = { label: 'Label' };
-
-export const DefaultValue = DefaultTemplateWithValue.bind({});
-DefaultValue.args = { ...Default.args };
-
-export const DefaultSlot = DefaultTemplate.bind({});
-
-export const DefaultDisabled = DefaultTemplate.bind({});
-DefaultDisabled.args = { isDisabled: true };
-
-export const DefaultDisabledWithValue = DefaultTemplateWithValue.bind({});
-DefaultDisabledWithValue.args = { ...DefaultDisabled.args };
-
-export const DefaultWithLink = TemplateWithLink.bind({});
-
-export const DefaultWithComponent = TemplateWithComponent.bind({});
-
-// groups
-export const GroupDefault = TemplateGroup.bind({});
-export const GroupDefaultWithValue = TemplateGroupWithValue.bind({});
-
-export const GroupObjects = TemplateGroupObjects.bind({});
-export const GroupObjectsWithValue = TemplateGroupObjectsWithValue.bind({});
-
-export const StateDefault = StateTemplate.bind({});
-StateDefault.args = {
-  withState: true,
-};

package/src/components/or-chips/OrChips.stories.ts

@@ -1,96 +0,0 @@
-import Faker from 'faker';
-import { Story } from '@storybook/vue';
-import { action } from '@storybook/addon-actions';
-
-import OrChips from './OrChips.vue';
-
-export default {
-  title: 'Components/OrChips/OrChips',
-  component: OrChips,
-};
-
-const Template: Story = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { OrChips },
-  template: `
-    <or-chips
-      v-bind="$props"
-      @update:modelValue="onInput"
-      @blur="onBlur"
-      @focus="onFocus"
-      @add-chip="addChip"
-      @delete-chip="deleteChip"
-    />`,
-  methods: {
-    onInput: action('update:modelValue'),
-    onFocus: action('focus'),
-    onBlur: action('blur'),
-    addChip: action('add-chip'),
-    deleteChip: action('delete-chip'),
-  },
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  label: Faker.commerce.productName(),
-  placeholder: Faker.commerce.productName(),
-  modelValue: [Faker.commerce.productName()],
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  isDisabled: true,
-  label: Faker.commerce.productName(),
-  placeholder: Faker.commerce.productName(),
-  modelValue: [Faker.commerce.productName()],
-};
-
-export const LotsOfChips = Template.bind({});
-LotsOfChips.args = {
-  label: Faker.commerce.productName(),
-  placeholder: Faker.commerce.productName(),
-  modelValue: Array.from(Array(10).keys()).map(Faker.commerce.productName),
-};
-
-export const VeryLongText = Template.bind({});
-const getLongText = () =>
-  Faker.random.alpha({
-    count: 250,
-    upcase: true,
-  });
-
-VeryLongText.args = {
-  isInvalid: true,
-  label: getLongText(),
-  placeholder: Faker.commerce.productName(),
-  error: getLongText(),
-  modelValue: [getLongText(), getLongText(), getLongText()],
-};
-
-const DemoTemplate: Story = () => ({
-  components: { OrChips },
-  template: `
-    <or-chips
-      v-model="chips"
-      :label="label"
-      :placeholder="placeholder"
-      :error="error"
-      :is-invalid="isInvalid"
-    />
-  `,
-  data() {
-    return {
-      chips: [],
-      label: 'Tags',
-      placeholder: Faker.commerce.productName(),
-      error: 'Should have at least one tag!',
-    };
-  },
-  computed: {
-    isInvalid(): boolean {
-      return !((this as any).chips as string[]).length;
-    },
-  },
-});
-
-export const Demo = DemoTemplate.bind({});

package/src/components/or-chips/or-chip/OrChip.stories.ts

@@ -1,59 +0,0 @@
-import Faker from 'faker';
-import { Story } from '@storybook/vue';
-import { action } from '@storybook/addon-actions';
-import OrChip from './OrChip.vue';
-
-export default {
-  title: 'Components/OrChips/OrChip',
-  component: OrChip,
-  args: {
-    canDelete: true,
-    isDisabled: false,
-  },
-  argTypes: {
-    color: {
-      control: 'select',
-      options: ['default', 'error'],
-    },
-    canDelete: {
-      control: 'boolean',
-    },
-    isDisabled: {
-      control: 'boolean',
-    },
-  },
-};
-
-const Template: Story = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { OrChip },
-  template: '<or-chip v-bind="$props" @delete="onDelete" />',
-  methods: {
-    onDelete: action('delete'),
-  },
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  content: Faker.commerce.productName(),
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  isDisabled: true,
-  content: Faker.commerce.productName(),
-};
-
-export const VeryLongContent = Template.bind({});
-VeryLongContent.args = {
-  content: Faker.random.alpha({
-    count: 250,
-    upcase: true,
-  }),
-};
-
-export const Error = Template.bind({});
-Error.args = {
-  color: 'error',
-  content: Faker.commerce.productName(),
-};