@onereach/ui-components 4.5.0-beta.2726.0 → 4.5.0

package/src/components/or-fab-v3/OrFab.stories3.ts

@@ -1,81 +0,0 @@
-import { Meta, StoryFn } from '@storybook/vue3';
-import { action } from '@storybook/addon-actions';
-import { OrIconV3 as OrIcon } from '../or-icon-v3';
-import OrFabDocs from './OrFab.docs.mdx';
-import OrFab from './OrFab.vue';
-import { FabColor } from './props';
-
-export default {
-  title: 'Components/Buttons/FAB',
-  component: OrFab,
-
-  argTypes: {
-    // Props
-    icon: {
-      control: { type: 'text' },
-    },
-
-    color: {
-      control: { type: 'select' },
-      options: Object.values(FabColor),
-    },
-
-    disabled: {
-      control: { type: 'boolean' },
-    },
-  },
-
-  parameters: {
-    docs: {
-      page: OrFabDocs,
-    },
-
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=202%3A9',
-    },
-  },
-} as Meta<typeof OrFab>;
-
-const Template: StoryFn<typeof OrFab> = (args) => ({
-  components: {
-    OrFab,
-    OrIcon,
-  },
-
-  setup() {
-    return {
-      args,
-      handleClick: action('click'),
-      handleFocus: action('focus'),
-      handleBlur: action('blur'),
-      handleMouseover: action('mouseover'),
-      handleMouseout: action('moouseout'),
-      handleMousemove: action('moousemove'),
-      handleMouseenter: action('mouseenter'),
-      handleMouseleave: action('museleave'),
-    };
-  },
-
-  template: `
-    <OrFab
-      v-bind="args"
-      @click="handleClick"
-      @focus="handleFocus"
-      @blur="handleBlur"
-      @mouseover="handleMouseover"
-      @mouseout="handleMouseout"
-      @mousemove="handleMousemove"
-      @mouseenter="handleMouseenter"
-      @mouseleave="handleMouseleave"
-      class="test-class"
-    />
-  `,
-});
-
-export const Default = Template.bind({});
-
-Default.args = {
-  // Props
-  icon: 'add',
-};

package/src/components/or-form-group-v3/OrFormGroup.stories3.ts

@@ -1,114 +0,0 @@
-import OrFormGroup from './OrFormGroup.vue';
-import { ref } from 'vue-demi';
-import { Meta, StoryFn } from '@storybook/vue3';
-import { OrRadioV3 as OrRadio } from '../or-radio-v3';
-import { OrCheckboxV3 as OrCheckbox } from '../or-checkbox-v3';
-import { OrSwitchV3 as OrSwitch } from '../or-switch-v3';
-import { FormGroupDirection } from './props';
-export default {
-  title: 'Components/Forms/Group',
-  component: OrFormGroup,
-  argTypes: {
-    // Props
-    label: {
-      control: { type: 'text' },
-    },
-    error: {
-      control: { type: 'text' },
-    },
-    hint: {
-      control: { type: 'text' },
-    },
-    direction: {
-      control: { type: 'select' },
-      options: Object.values(FormGroupDirection),
-    },
-  },
-} as Meta<typeof OrFormGroup>;
-
-const RadioTemplate: StoryFn<typeof OrFormGroup> = (args) => ({
-  components: {
-    OrFormGroup,
-    OrRadio,
-  },
-  setup() {
-    const modelValue = ref('');
-    return {
-      args,
-      modelValue,
-    };
-  },
-  template: `
-    <OrFormGroup
-      v-bind="args"
-    >
-      <OrRadio :label="'Option 1'" value="1" v-model="modelValue"/>
-      <OrRadio :label="'Option 2'" value="3" v-model="modelValue"/>
-      <OrRadio :label="'Option 3'" value="4" v-model="modelValue"/>
-    </OrFormGroup>
-    `,
-});
-
-export const RadioGroup = RadioTemplate.bind({});
-RadioGroup.args = {
-  label: 'Radio Group',
-  hint: 'This is a hint',
-};
-
-const CheckboxTemplate: StoryFn<typeof OrFormGroup> = (args) => ({
-  components: {
-    OrFormGroup,
-    OrCheckbox,
-  },
-  setup() {
-    const modelValue = ref([]);
-    return {
-      args,
-      modelValue,
-    };
-  },
-  template: `
-    <OrFormGroup
-      v-bind="args"
-    >
-      <OrCheckbox :label="'Option 1'" value="1" v-model="modelValue"/>
-      <OrCheckbox :label="'Option 2'" value="3" v-model="modelValue"/>
-      <OrCheckbox :label="'Option 3'" value="4" v-model="modelValue"/>
-    </OrFormGroup>
-  `,
-});
-
-export const CheckboxGroup = CheckboxTemplate.bind({});
-CheckboxGroup.args = {
-  label: 'Checkbox Group',
-  hint: 'This is a hint',
-};
-
-const SwitchTemplate: StoryFn<typeof OrFormGroup> = (args) => ({
-  components: {
-    OrFormGroup,
-    OrSwitch,
-  },
-  setup() {
-    const modelValue = ref([]);
-    return {
-      args,
-      modelValue,
-    };
-  },
-  template: `
-    <OrFormGroup
-      v-bind="args"
-    >
-      <OrSwitch :label="'Option 1'" value="1" v-model="modelValue"/>
-      <OrSwitch :label="'Option 2'" value="3" v-model="modelValue"/>
-      <OrSwitch :label="'Option 3'" value="4" v-model="modelValue"/>
-    </OrFormGroup>
-    `,
-});
-
-export const SwitchGroup = SwitchTemplate.bind({});
-SwitchGroup.args = {
-  label: 'Switch Group',
-  hint: 'This is a hint',
-};

package/src/components/or-icon-button-v3/OrIconButton.docs.mdx

@@ -1,14 +0,0 @@
-import { DocsPage } from '@storybook/addon-docs';
-
-```ts
-import { OrIconButtonV3 as OrIconButton } from '@onereach/ui-components';
-```
-
-<DocsPage />
-
-## Migration Guide from V1
-  - removed property `type`
-  - property `htmlButtonType` renamed to `type`
-  - removed properties `color`, `iconColor`, `bgColor`, and `size`
-  - property `isDisabled` renamed to `disabled`
-  - removed property `isLoading`

package/src/components/or-icon-button-v3/OrIconButton.stories3.ts

@@ -1,105 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryFn } from '@storybook/vue3';
-import OrIconButtonDocs from './OrIconButton.docs.mdx';
-import OrIconButton from './OrIconButton.vue';
-import { IconButtonColor, IconButtonSize } from './props';
-
-export default {
-  title: 'Components/Buttons/Icon Button',
-  component: OrIconButton,
-
-  argTypes: {
-    // Props
-    icon: {
-      control: { type: 'object' },
-    },
-
-    color: {
-      control: { type: 'select' },
-      options: Object.values(IconButtonColor),
-    },
-
-    size: {
-      control: { type: 'select' },
-      options: Object.values(IconButtonSize),
-    },
-
-    selected: {
-      control: { type: 'boolean' },
-    },
-
-    disabled: {
-      control: { type: 'boolean' },
-    },
-
-    tooltip: {
-      control: { type: 'object' },
-    },
-  },
-
-  parameters: {
-    layout: 'centered',
-
-    docs: {
-      page: OrIconButtonDocs,
-    },
-
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=1657%3A9652',
-    },
-  },
-} as Meta<typeof OrIconButton>;
-
-const Template: StoryFn<typeof OrIconButton> = (args) => ({
-  components: {
-    OrIconButton,
-  },
-
-  setup() {
-    return {
-      args,
-      handleClick: action('click'),
-      handleFocus: action('focus'),
-      handleBlur: action('blur'),
-      handleMouseover: action('mouseover'),
-      handleMouseout: action('moouseout'),
-      handleMousemove: action('moousemove'),
-      handleMouseenter: action('mouseenter'),
-      handleMouseleave: action('museleave'),
-    };
-  },
-
-  template: `
-    <OrIconButton
-      v-bind="args"
-      @click="handleClick"
-      @focus="handleFocus"
-      @blur="handleBlur"
-      @mouseover="handleMouseover"
-      @mouseout="handleMouseout"
-      @mousemove="handleMousemove"
-      @mouseenter="handleMouseenter"
-      @mouseleave="handleMouseleave"
-    />
-  `,
-});
-
-export const Default = Template.bind({});
-
-Default.args = {
-  // Props
-  icon: 'delete',
-  tooltip: 'Delete',
-};
-
-export const WithDetailedIconSettings = Template.bind({});
-WithDetailedIconSettings.args = {
-  // Props
-  icon: {
-    icon: 'delete',
-    variant: 'filled',
-    size: 'xl',
-  },
-  tooltip: 'Delete',
-};

package/src/components/or-icon-v3/OrIcon.docs.mdx

@@ -1,12 +0,0 @@
-import { DocsPage } from '@storybook/addon-docs';
-
-```ts
-import { OrIconV3 as OrIcon } from '@onereach/ui-components';
-```
-
-<DocsPage />
-
-## Migration Guide from V1
-  - property `iconType` renamed to `variant`
-  - removed properties `size`, `color`, and `isDisabled` (now icon size and color depend on font settings)
-  - removed properties `tooltipText`, `tooltipPlacement`

package/src/components/or-icon-v3/OrIcon.stories3.ts

@@ -1,53 +0,0 @@
-import { Meta, StoryFn } from '@storybook/vue3';
-import OrIconDocs from './OrIcon.docs.mdx';
-import OrIcon from './OrIcon.vue';
-import { IconSize, IconVariant } from './props';
-
-export default {
-  title: 'Components/Icon',
-  component: OrIcon,
-
-  argTypes: {
-    // Props
-    icon: {
-      control: { type: 'text' },
-    },
-
-    variant: {
-      control: { type: 'select' },
-      options: Object.values(IconVariant),
-    },
-
-    size: {
-      control: { type: 'select' },
-      options: Object.values(IconSize),
-    },
-  },
-
-  parameters: {
-    layout: 'centered',
-
-    docs: {
-      page: OrIconDocs,
-    },
-  },
-} as Meta<typeof OrIcon>;
-
-const Template: StoryFn<typeof OrIcon> = (args) => ({
-  components: {
-    OrIcon,
-  },
-
-  setup() {
-    return { args };
-  },
-
-  template: '<OrIcon v-bind="args" />',
-});
-
-export const Icon = Template.bind({});
-
-Icon.args = {
-  // Props
-  icon: 'person',
-};

package/src/components/or-inline-input-v3/OrInlineInput.docs.mdx

@@ -1,7 +0,0 @@
-import { DocsPage } from '@storybook/addon-docs';
-
-```ts
-import { OrInlineInputV3 as OrInlineInput } from '@onereach/ui-components';
-```
-
-<DocsPage />

package/src/components/or-inline-input-v3/OrInlineInput.stories3.ts

@@ -1,137 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryFn } from '@storybook/vue3';
-import { ref, watch } from 'vue-demi';
-import OrInlineInputDocs from './OrInlineInput.docs.mdx';
-import OrInlineInput from './OrInlineInput.vue';
-import { InlineInputSize, InlineInputType } from './props';
-
-export default {
-  title: 'Components/Inline Input',
-  component: OrInlineInput,
-
-  argTypes: {
-    // Attrs
-    id: {
-      control: { type: 'text' },
-    },
-
-    maxlength: {
-      control: { type: 'number' },
-    },
-
-    // Props
-    modelValue: {
-      control: { type: 'text' },
-    },
-
-    saveOnBlur: {
-      control: { type: 'boolean' },
-    },
-
-    type: {
-      control: { type: 'select' },
-      options: Object.values(InlineInputType),
-    },
-
-    size: {
-      control: { type: 'select' },
-      options: Object.values(InlineInputSize),
-    },
-
-    placeholder: {
-      control: { type: 'text' },
-    },
-
-    hint: {
-      control: { type: 'text' },
-    },
-
-    error: {
-      control: { type: 'text' },
-    },
-
-    // Events
-    'update:modelValue': {
-      table: { disable: true },
-    },
-
-    input: {
-      table: { disable: true },
-    },
-
-    keydown: {
-      table: { disable: true },
-    },
-
-    keyup: {
-      table: { disable: true },
-    },
-
-    focus: {
-      table: { disable: true },
-    },
-
-    blur: {
-      table: { disable: true },
-    },
-  },
-
-  parameters: {
-    layout: 'centered',
-
-    docs: {
-      page: OrInlineInputDocs,
-    },
-
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=761%3A3372',
-    },
-  },
-} as Meta<typeof OrInlineInput>;
-
-const Template: StoryFn<typeof OrInlineInput> = (args) => ({
-  components: {
-    OrInlineInput,
-  },
-
-  setup() {
-    // State
-    const model = ref<string | number>();
-
-    // Effects
-    watch(model, (value) => {
-      console.debug(value);
-    });
-
-    return {
-      args,
-      model,
-      onUpdateModelValue: action('update:modelValue'),
-      onKeydown: action('keydown'),
-      onKeyup: action('keyup'),
-      onFocus: action('focus'),
-      onBlur: action('blur'),
-    };
-  },
-
-  template: `
-    <OrInlineInput
-      v-model="model"
-      v-bind="args"
-      @update:modelValue="onUpdateModelValue"
-      @keydown="onKeydown"
-      @keyup="onKeyup"
-      @focus="onFocus"
-      @blur="onBlur"
-    />
-  `,
-});
-
-export const InlineInput = Template.bind({});
-
-InlineInput.args = {
-  // Props
-  placeholder: 'Placeholder',
-  hint: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-};

package/src/components/or-inline-textarea-v3/OrInlineTextarea.docs.mdx

@@ -1,7 +0,0 @@
-import { DocsPage } from '@storybook/addon-docs';
-
-```ts
-import { OrInlineTextareaV3 as OrInlineTextarea } from '@onereach/ui-components';
-```
-
-<DocsPage />

package/src/components/or-inline-textarea-v3/OrInlineTextarea.stories3.ts

@@ -1,126 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryFn } from '@storybook/vue3';
-import { ref, watch } from 'vue-demi';
-import OrInlineTextareaDocs from './OrInlineTextarea.docs.mdx';
-import OrInlineTextarea from './OrInlineTextarea.vue';
-
-export default {
-  title: 'Components/Inline Textarea',
-  component: OrInlineTextarea,
-
-  argTypes: {
-    // Attrs
-    id: {
-      control: { type: 'text' },
-    },
-
-    maxlength: {
-      control: { type: 'number' },
-    },
-
-    // Props
-    modelValue: {
-      control: { type: 'text' },
-    },
-
-    saveOnBlur: {
-      control: { type: 'boolean' },
-    },
-
-    placeholder: {
-      control: { type: 'text' },
-    },
-
-    hint: {
-      control: { type: 'text' },
-    },
-
-    error: {
-      control: { type: 'text' },
-    },
-
-    // Events
-    'update:modelValue': {
-      table: { disable: true },
-    },
-
-    input: {
-      table: { disable: true },
-    },
-
-    keydown: {
-      table: { disable: true },
-    },
-
-    keyup: {
-      table: { disable: true },
-    },
-
-    focus: {
-      table: { disable: true },
-    },
-
-    blur: {
-      table: { disable: true },
-    },
-  },
-
-  parameters: {
-    layout: 'centered',
-
-    docs: {
-      page: OrInlineTextareaDocs,
-    },
-
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=761%3A3372',
-    },
-  },
-} as Meta<typeof OrInlineTextarea>;
-
-const Template: StoryFn<typeof OrInlineTextarea> = (args) => ({
-  components: {
-    OrInlineTextarea,
-  },
-
-  setup() {
-    // State
-    const model = ref<string>();
-
-    // Effects
-    watch(model, (value) => {
-      console.debug(value);
-    });
-
-    return {
-      args,
-      model,
-      onUpdateModelValue: action('update:modelValue'),
-      onKeydown: action('keydown'),
-      onKeyup: action('keyup'),
-      onFocus: action('focus'),
-      onBlur: action('blur'),
-    };
-  },
-
-  template: `
-    <OrInlineTextarea
-      v-model="model"
-      v-bind="args"
-      @update:modelValue="onUpdateModelValue"
-      @keydown="onKeydown"
-      @keyup="onKeyup"
-      @focus="onFocus"
-      @blur="onBlur"
-    />
-  `,
-});
-
-export const InlineTextarea = Template.bind({});
-
-InlineTextarea.args = {
-  // Props
-  placeholder: 'Placeholder',
-  hint: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-};

package/src/components/or-input-v3/OrInput.docs.mdx

@@ -1,16 +0,0 @@
-import { DocsPage } from '@storybook/addon-docs';
-
-```ts
-import { OrInputV3 as OrInput } from '@onereach/ui-components';
-```
-
-<DocsPage />
-
-## Migration Guide from V1
-  - combined `OrInput`, `OrNumberInput`, `OrPassword`, and `OrSearch` (depending on `type` property)
-  - property `htmlType` renamed to `type`
-  - property `isRequired` renamed to `required`
-  - property `isDisabled` renamed to `disabled`
-  - property `isSmall` replaced with `size`
-  - removed properties `htmlId`, `htmlInputAttrs`, `maxLength`, `minValue`, `maxValue`, and `stepValue` (now attributes are forwarded directly to the input)
-  - removed properties `isReadonly` and `isInvalid`