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

package/src/components/or-input/or-textbox-migration.stories.mdx

@@ -1,32 +0,0 @@
-import { Meta, Description } from "@storybook/addon-docs";
-
-<Meta title="Components/OrInputs/Migration Guide" />
-
-#### OrTextbox Migration Guide
-
-At the moment package features two `OrTextbox` components: original `OrTextbox` (which is now considered deprecated) and five new components:
-`OrInput`, `OrTextarea`, `OrPassword`, `OrSearch` and `OrNumberInput`.
-
-Original component can be used without any changes and is available in docs as `OrTextbox (Deprecated)`.
-
-The style properties (`height` and `maxWidth`) were deleted, so CSS styles are needed to repeat behaviour.
-
-`OrInput` is a separate component, which replaces property `type` and can be used for different input types (see `INPUT_TYPE`).
-It is also possible to set any additional attributes for input by providing `htmlInputAttrs` property.
-
-`OrTextarea` is a separate component, which replaces `TextboxTypes.textarea` value of `type` property.
-The height of the textarea can be automatically extended.
-
-`OrNumberInput` is a separate component, which replaces `TextboxTypes.number` value of `type` property.
-It has `minValue`, `maxValue` and `stepValue` props but doesn't have `maxLength` property.
-
-`OrPassword` is a separate component, which replaces `TextboxTypes.password` value of `type` property.
-It has a special icon button to show/hide text.
-
-`OrSearch` is a separate component, which replaces `TextboxTypes.search` value of `type` property.
-It has `debounce` and `isUsingTrim` props, has special button for clearing and emits `search` and `clear` events.
-
-In order to use new components it is recommended to import them like:
-```ts
-import { OrInput, OrTextarea, OrNumberInput, OrPassword, OrSearch } from '@onereach/ui-components';
-```

package/src/components/or-label/OrLabel.stories.ts

@@ -1,64 +0,0 @@
-import Faker from 'faker';
-import { Story } from '@storybook/vue';
-import OrLabel from './OrLabel.vue';
-
-export default {
-  title: 'Components/OrLabel',
-  component: OrLabel,
-};
-
-const Template: Story = (_args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { OrLabel },
-  template: '<or-label v-bind="$props" />',
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  label: Faker.company.catchPhrase(),
-};
-
-export const Required = Template.bind({});
-Required.args = {
-  label: Faker.company.catchPhrase(),
-  isRequired: true,
-};
-
-export const VeryLongLabel = Template.bind({});
-VeryLongLabel.args = {
-  label: Faker.random.alpha({
-    count: 250,
-    upcase: true,
-  }),
-  isRequired: true,
-};
-
-const TemplateWithSlot: Story = (_args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { OrLabel },
-  template: `<or-label v-bind="$props">${Faker.company.catchPhrase()}</or-label>`,
-});
-
-export const RequiredWithSlot = TemplateWithSlot.bind({});
-RequiredWithSlot.args = {
-  isRequired: true,
-};
-
-const TemplateSlotAppend: Story = (_args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { OrLabel },
-  template: `
-    <or-label v-bind="$props">
-      ${Faker.company.catchPhrase()}
-      <a slot="append" href="https://google.com" target="_blank">
-        ${Faker.commerce.productName()}
-      </a>
-    </or-label>
-  `,
-});
-
-export const DefaultWithAppendSlot = TemplateSlotAppend.bind({});
-export const WithCustomArgs = TemplateSlotAppend.bind({});
-WithCustomArgs.args = {
-  myProperty: Faker.commerce.productName(),
-};

package/src/components/or-list/OrList.stories.ts

@@ -1,229 +0,0 @@
-import OrList from './OrList.vue';
-import { OrIcon } from '../or-icon';
-import { OrButtonV2 as OrButton } from '../or-button-v2';
-import { OrInput } from '../or-input';
-
-import { ArgTypes, Story } from '@storybook/vue';
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'Components/OrList',
-
-  component: OrList,
-};
-
-const defaultMixin = (argTypes: ArgTypes) => ({
-  props: Object.keys(argTypes),
-
-  components: {
-    OrList,
-    OrIcon,
-    OrButton,
-    OrInput,
-  },
-
-  data() {
-    return {
-      list: [],
-      listWithValues: [{}, {}, {}, {}, {}],
-      listOfInputs: [],
-      listOfInputsWithValue: [
-        {
-          value: 'Hello Hello',
-        },
-        {
-          value: 'Hello World',
-        },
-      ],
-    };
-  },
-
-  methods: {
-    action: action('update:modelValue'),
-    itemBeforeAdd: action('item-before-add'),
-    itemAdded: action('item-added'),
-    itemBeforeDelete: action('item-before-delete'),
-    itemDeleted: action('item-deleted'),
-    itemBeforeMove: action('item-before-move'),
-    itemMove: action('item-move'),
-    actionInput: action('input'),
-  },
-});
-
-const TemplateDefault: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-  template: `
-    <or-list
-      v-bind="$props"
-      v-model="list"
-      @update:modelValue="action"
-      @item-before-add="itemBeforeAdd"
-      @item-added="itemAdded"
-      @item-before-delete="itemBeforeDelete"
-      @item-deleted="itemDeleted"
-      @item-before-move="itemBeforeMove"
-      @item-move="itemMove"
-    />
-  `,
-});
-
-const TemplateDefaultVModelValue: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-  template: `
-    <or-list
-      v-bind="$props"
-      v-model="listWithValues"
-      @update:modelValue="action"
-      @item-before-add="itemBeforeAdd"
-      @item-added="itemAdded"
-      @item-before-delete="itemBeforeDelete"
-      @item-deleted="itemDeleted"
-      @item-before-move="itemBeforeMove"
-      @item-move="itemMove"
-    />
-  `,
-});
-
-const TemplateDefaultValueProp: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-  template: `
-    <or-list
-      v-bind="$props"
-      @update:modelValue="action"
-      @item-before-add="itemBeforeAdd"
-      @item-added="itemAdded"
-      @item-before-delete="itemBeforeDelete"
-      @item-deleted="itemDeleted"
-      @item-before-move="itemBeforeMove"
-      @item-move="itemMove"
-    />
-  `,
-});
-
-const TemplateHeaderSlot: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-  template: `
-    <or-list
-      v-model="list"
-      v-bind="$props"
-      @update:modelValue="action"
-      @item-before-add="itemBeforeAdd"
-      @item-added="itemAdded"
-      @item-before-delete="itemBeforeDelete"
-      @item-deleted="itemDeleted"
-      @item-before-move="itemBeforeMove"
-      @item-move="itemMove"
-    >
-      <template #header="{ addItem, deleteItem }">
-        <or-button class="mr-4 mb-4" @click="addItem">Add new item</or-button>
-        <or-button
-          color="error"
-          :is-disabled="!list.length"
-          @click="deleteItem(list.length - 1)"
-        >
-          Delete Last Item
-        </or-button>
-      </template>
-    </or-list>
-  `,
-});
-
-const TemplateFooterSlot: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-  template: `
-    <or-list
-      v-bind="$props"
-      v-model="list"
-      @update:modelValue="action"
-      @item-before-add="itemBeforeAdd"
-      @item-added="itemAdded"
-      @item-before-delete="itemBeforeDelete"
-      @item-deleted="itemDeleted"
-      @item-before-move="itemBeforeMove"
-      @item-move="itemMove"
-    >
-      <template #footer="{ addItem, deleteItem }">
-        <or-button class="mr-4" @click="addItem">Add new item</or-button>
-        <or-button
-          color="error"
-          :is-disabled="!list.length"
-          @click="deleteItem(list.length - 1)"
-        >
-          Delete Last Item
-        </or-button>
-      </template>
-    </or-list>
-  `,
-});
-
-const TemplateListOfInputs: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-  template: `
-    <or-list
-      v-bind="$props"
-      v-model="listOfInputsWithValue"
-      @update:modelValue="action"
-      @item-before-add="itemBeforeAdd"
-      @item-added="itemAdded"
-      @item-before-delete="itemBeforeDelete"
-      @item-deleted="itemDeleted"
-      @item-before-move="itemBeforeMove"
-      @item-move="itemMove"
-    >
-      <template v-slot:default="{ props }">
-        <or-input
-          v-model="props.value"
-          v-bind="props"
-        />
-      </template>
-    </or-list>
-  `,
-});
-
-export const Default = TemplateDefault.bind({});
-Default.args = {};
-
-export const Disabled = TemplateDefault.bind({});
-Disabled.args = {
-  isDisabled: true,
-};
-
-export const DisabledValue = TemplateDefaultVModelValue.bind({});
-DisabledValue.args = {
-  isDisabled: true,
-};
-
-export const DisabledAdding = TemplateDefaultVModelValue.bind({});
-DisabledAdding.args = {
-  canAdd: false,
-};
-
-export const VModel = TemplateDefaultVModelValue.bind({});
-VModel.args = {};
-
-export const ModelValueProp = TemplateDefaultValueProp.bind({});
-ModelValueProp.args = {
-  modelValue: [{}, {}, {}, {}, {}, {}, {}, {}],
-};
-
-export const LabelList = TemplateDefault.bind({});
-LabelList.args = { label: 'List Label' };
-
-export const LabelFooterBtn = TemplateDefault.bind({});
-LabelFooterBtn.args = { buttonLabel: 'Add new item' };
-
-export const HeaderSlot = TemplateHeaderSlot.bind({});
-HeaderSlot.args = {};
-
-export const FooterSlot = TemplateFooterSlot.bind({});
-FooterSlot.args = {};
-
-export const ListOfInputs = TemplateListOfInputs.bind({});
-ListOfInputs.args = {};
-

package/src/components/or-list-of-inputs/OrListOfInputs.stories.ts

@@ -1,164 +0,0 @@
-import OrListOfInputs from './OrListOfInputs.vue';
-import { OrButtonV2 as OrButton } from '../or-button-v2';
-
-import { ArgTypes, Story } from '@storybook/vue';
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'Components/OrListOfInputs (Deprecated)',
-
-  component: OrListOfInputs,
-};
-
-const defaultMixin = (argTypes: ArgTypes) => ({
-  props: Object.keys(argTypes),
-
-  components: {
-    OrListOfInputs,
-    OrButton,
-  },
-
-  data() {
-    return {
-      list: [],
-      listWithValue: [
-        {
-          label: 'input label',
-          placeholder: 'Hello',
-          value: 'value',
-        },
-        {
-          label: 'input label',
-          placeholder: 'Hello',
-          value: 'value 2',
-        },
-        {
-          label: 'input label',
-          placeholder: 'Hello',
-          value: 'value 3',
-          isDisabled: true,
-        },
-      ],
-    };
-  },
-
-  methods: {
-    action: action('update:modelValue'),
-    itemBeforeAdd: action('item-before-add'),
-    itemAdded: action('item-added'),
-    itemBeforeDelete: action('item-before-delete'),
-    itemDeleted: action('item-deleted'),
-  },
-});
-
-const TemplateDefault: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-  template: `
-    <or-list-of-inputs
-      v-model="list"
-      v-bind="$props"
-      @update:modelValue="action"
-      @item-before-add="itemBeforeAdd"
-      @item-added="itemAdded"
-      @item-before-delete="itemBeforeDelete"
-      @item-deleted="itemDeleted"
-    />
-  `,
-});
-
-const TemplateWithValue: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-  template: `
-    <or-list-of-inputs
-      v-model="listWithValue"
-      v-bind="$props"
-      @update:modelValue="action"
-      @item-before-add="itemBeforeAdd"
-      @item-added="itemAdded"
-      @item-before-delete="itemBeforeDelete"
-      @item-deleted="itemDeleted"
-    />
-  `,
-});
-
-const TemplateSlotFooter: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-  template: `
-    <or-list-of-inputs
-      v-model="listWithValue"
-      v-bind="$props"
-      @update:modelValue="action"
-      @item-before-add="itemBeforeAdd"
-      @item-added="itemAdded"
-      @item-before-delete="itemBeforeDelete"
-      @item-deleted="itemDeleted"
-    >
-      <template #footer="{addItem}">
-        <or-button @click="addItem">
-          Add new Item
-        </or-button>
-      </template>
-    </or-list-of-inputs>
-  `,
-});
-
-const TemplateSlotHeader: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-  template: `
-    <or-list-of-inputs
-      v-model="listWithValue"
-      v-bind="$props"
-      @update:modelValue="action"
-      @item-before-add="itemBeforeAdd"
-      @item-added="itemAdded"
-      @item-before-delete="itemBeforeDelete"
-      @item-deleted="itemDeleted"
-    >
-      <template #header="{addItem}">
-        <or-button color="neutral-4" @click="addItem">
-          Add new Item
-        </or-button>
-      </template>
-    </or-list-of-inputs>
-  `,
-});
-
-export const Default = TemplateDefault.bind({});
-Default.args = {};
-
-export const Disabled = TemplateDefault.bind({});
-Disabled.args = {
-  isDisabled: true,
-};
-
-export const WithValue = TemplateWithValue.bind({});
-WithValue.args = {
-  inputProps: {
-    label: 'input label',
-    placeholder: 'Hello',
-    value: '',
-  },
-};
-
-export const SlotHeader = TemplateSlotHeader.bind({});
-SlotHeader.args = {
-  inputProps: {
-    label: 'input label',
-    placeholder: 'Hello',
-    value: '',
-  },
-};
-
-export const SlotFooter = TemplateSlotFooter.bind({});
-SlotFooter.args = {
-  inputProps: {
-    label: 'input label',
-    placeholder: 'Hello',
-    value: '',
-  },
-};
-

package/src/components/or-loader/OrLoader.stories.ts

@@ -1,43 +0,0 @@
-import { Story } from '@storybook/vue';
-
-import OrLoader from './OrLoader.vue';
-import { LoaderViews } from './constants';
-
-export default {
-  title: 'Components/OrLoader',
-
-  component: OrLoader,
-
-  argTypes: {
-    type: {
-      control: {
-        type: 'select',
-        options: Object.values(LoaderViews) as string[],
-      },
-    },
-  },
-};
-
-const Template: Story = (_args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-
-  components: { OrLoader },
-
-  template: '<or-loader v-bind="$props">face</or-loader>',
-});
-
-export const Default = Template.bind({});
-Default.args = { type: LoaderViews.default };
-
-export const Text = Template.bind({});
-Text.args = { type: LoaderViews.text };
-
-export const Linear = Template.bind({});
-Linear.args = { type: LoaderViews.linear };
-
-export const LinearWithText = Template.bind({});
-LinearWithText.args = {
-  type: LoaderViews.linear,
-  linearTitle: 'Loading',
-  linearDescription: 'Promptly retrieving your data from the cloud',
-};