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

package/src/components/or-checkbox-v3/OrCheckbox.stories3.ts

@@ -1,155 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryFn } from '@storybook/vue3';
-import { ref, watch } from 'vue-demi';
-import { OrIconV3 as OrIcon } from '../or-icon-v3';
-import { LabelVariant } from '../or-label-v3';
-import OrCheckboxDocs from './OrCheckbox.docs.mdx';
-import OrCheckbox from './OrCheckbox.vue';
-
-export default {
-  title: 'Components/Checkbox',
-  component: OrCheckbox,
-
-  argTypes: {
-    // Slots
-    addon: {
-      type: {
-        name: 'string',
-        required: false,
-      },
-
-      control: { type: 'text' },
-    },
-
-    // Props
-    modelValue: {
-      control: { type: 'object' },
-    },
-
-    value: {
-      control: { type: 'text' },
-    },
-
-    label: {
-      control: { type: 'text' },
-    },
-
-    labelVariant: {
-      control: { type: 'select' },
-      options: Object.values(LabelVariant),
-    },
-
-    indeterminate: {
-      control: { type: 'boolean' },
-    },
-
-    required: {
-      control: { type: 'boolean' },
-    },
-
-    disabled: {
-      control: { type: 'boolean' },
-    },
-
-    // Events
-    'update:modelValue': {
-      table: { disable: true },
-    },
-
-    input: {
-      table: { disable: true },
-    },
-
-    focus: {
-      table: { disable: true },
-    },
-
-    blur: {
-      table: { disable: true },
-    },
-  },
-
-  parameters: {
-    layout: 'centered',
-
-    docs: {
-      page: OrCheckboxDocs,
-    },
-
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=202%3A12',
-    },
-  },
-
-  decorators: [
-    () => ({
-      template: `
-        <div class="flex flex-col gap-sm">
-          <story />
-        </div>
-      `,
-    }),
-  ],
-} as Meta<typeof OrCheckbox>;
-
-const Template: StoryFn<typeof OrCheckbox> = (args) => ({
-  components: {
-    OrCheckbox,
-    OrIcon,
-  },
-
-  setup() {
-    // State
-    const model = ref<string[]>([]);
-
-    // Effects
-    watch(model, (value) => {
-      console.debug(value);
-    });
-
-    return {
-      args,
-      model,
-      onUpdateModelValue: action('update:modelValue'),
-      onFocus: action('focus'),
-      onBlur: action('blur'),
-    };
-  },
-
-  template: `
-    <div class="contents">
-      <OrCheckbox
-        v-model="model"
-        v-bind="args"
-        @update:modelValue="onUpdateModelValue"
-        @focus="onFocus"
-        @blur="onBlur"
-      >
-        <template #addon>
-          ${args.addon}
-        </template>
-      </OrCheckbox>
-
-      <OrCheckbox
-        v-model="model"
-        value="checkbox-2"
-        label="Checkbox 2"
-        @update:modelValue="onUpdateModelValue"
-        @focus="onFocus"
-        @blur="onBlur"
-      />
-    </div>
-  `,
-});
-
-export const Checkbox = Template.bind({});
-
-Checkbox.args = {
-  // Slots
-  addon: '<OrIcon icon="info" />',
-
-  // Props
-  value: 'checkbox-1',
-  label: 'Checkbox 1',
-};

package/src/components/or-combined-input-v3/OrCombinedInput.docs.mdx

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

package/src/components/or-combined-input-v3/OrCombinedInput.stories3.ts

@@ -1,201 +0,0 @@
-import { Meta, StoryFn } from '@storybook/vue3';
-import { ref, watch } from 'vue-demi';
-import { OrIconV3 as OrIcon } from '../or-icon-v3';
-import { OrInputV3 as OrInput } from '../or-input-v3';
-import { OrSelectV3 as OrSelect, SelectOption } from '../or-select-v3';
-import OrCombinedInputDocs from './OrCombinedInput.docs.mdx';
-import OrCombinedInput from './OrCombinedInput.vue';
-import { CombinedInputSize } from './props';
-
-export default {
-  title: 'Components/Combined Input',
-  component: OrCombinedInput,
-
-  argTypes: {
-    // Slots
-    default: {
-      type: {
-        name: 'string',
-        required: true,
-      },
-
-      control: { type: 'text' },
-    },
-
-    addon: {
-      type: {
-        name: 'string',
-        required: false,
-      },
-
-      control: { type: 'text' },
-    },
-
-    // Props
-    size: {
-      control: { type: 'select' },
-      options: Object.values(CombinedInputSize),
-    },
-
-    label: {
-      control: { type: 'text' },
-    },
-
-    hint: {
-      control: { type: 'text' },
-    },
-
-    error: {
-      control: { type: 'text' },
-    },
-
-    required: {
-      control: { type: 'boolean' },
-    },
-
-    readonly: {
-      control: { type: 'boolean' },
-    },
-
-    disabled: {
-      control: { type: 'boolean' },
-    },
-
-    disableDefaultStyles: {
-      control: { type: 'boolean' },
-    },
-  },
-
-  parameters: {
-    docs: {
-      page: OrCombinedInputDocs,
-    },
-
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=4423%3A39753&t=grpHUrgJi4X2W67L-4',
-    },
-  },
-} as Meta<typeof OrCombinedInput>;
-
-const Template: StoryFn<typeof OrCombinedInput> = (args) => ({
-  components: {
-    OrCombinedInput,
-    OrIcon,
-    OrInput,
-    OrSelect,
-  },
-
-  setup() {
-    // State
-    const options = Array.from<string, SelectOption>([
-      'Alfa',
-      'Bravo',
-      'Charlie',
-      'Delta',
-      'Echo',
-      'Foxtrot',
-      'Golf',
-      'Hotel',
-      'India',
-      'Juliett',
-      'Kilo',
-      'Lima',
-      'Mike',
-      'November',
-      'Oscar',
-      'Papa',
-      'Quebec',
-      'Romeo',
-      'Sierra',
-      'Tango',
-      'Uniform',
-      'Victor',
-      'Whiskey',
-      'X-Ray',
-      'Yankee',
-      'Zulu',
-    ], (item) => ({
-      value: item.toLowerCase(),
-      label: item,
-    }));
-
-    const selectModel = ref<string>();
-    const inputModel = ref<string>();
-
-    // Effects
-    watch([selectModel, inputModel], (values) => {
-      console.debug(values);
-    });
-
-    return {
-      args,
-      options,
-      selectModel,
-      inputModel,
-    };
-  },
-
-  template: `
-    <OrCombinedInput v-bind="args">
-      ${args.default}
-      ${args.addon}
-    </OrCombinedInput>
-  `,
-});
-
-export const Default = Template.bind({});
-
-Default.args = {
-  // Slots
-  default: `
-    <template v-slot="props">
-      <OrSelect
-        class="basis-1/4"
-        v-model="selectModel"
-        v-bind="props"
-        :options="options"
-      />
-
-      <OrInput
-        class="basis-3/4"
-        v-model="inputModel"
-        v-bind="props"
-      />
-    </template>
-  `,
-
-  // Props
-  label: 'Combined Input',
-};
-
-export const Addon = Template.bind({});
-
-Addon.args = {
-  ...Default.args,
-
-  // Slots
-  addon: `
-    <template v-slot:addon>
-      <OrIcon icon="info" />
-    </template>
-  `,
-};
-
-export const Hint = Template.bind({});
-
-Hint.args = {
-  ...Default.args,
-
-  // Props
-  hint: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-};
-
-export const Error = Template.bind({});
-
-Error.args = {
-  ...Default.args,
-
-  // Props
-  error: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-};

package/src/components/or-confirm-v3/OrConfirm.docs.mdx

@@ -1,16 +0,0 @@
-import { DocsPage } from '@storybook/addon-docs';
-
-```ts
-import { OrConfirmV3 as OrConfirm } from '@onereach/ui-components';
-```
-
-<DocsPage />
-
-## Migration Guide from V1
-  - property `denyButtonText` renamed to `cancelButtonText`
-  - property `confirmButtonColor` replaced with `confirmType`
-  - property `isLoading` renamed to `loading`
-  - property `isDisabled` renamed to `disabled`
-  - removed properties `showClose`, `closeOnClickOutside` and `size`
-  - added `open` event
-  - added `open()` and `close()` functions

package/src/components/or-confirm-v3/OrConfirm.stories3.ts

@@ -1,252 +0,0 @@
-import { Meta, StoryFn } from '@storybook/vue3';
-import { action } from '@storybook/addon-actions';
-import Faker from 'faker';
-import OrConfirmDocs from './OrConfirm.docs.mdx';
-import OrConfirm from './OrConfirm.vue';
-import { ConfirmType } from './props';
-import { OrButtonV3 as OrButton } from '../or-button-v3';
-import { ref } from 'vue-demi';
-
-export default {
-  title: 'Components/Confirm',
-  component: OrConfirm,
-
-  argTypes: {
-    // Slots
-    default: {
-      type: {
-        name: 'string',
-        required: true,
-      },
-
-      control: { type: 'text' },
-    },
-
-    header: {
-      type: {
-        name: 'string',
-        required: false,
-      },
-
-      control: { type: 'text' },
-    },
-
-    footer: {
-      type: {
-        name: 'string',
-        required: false,
-      },
-
-      control: { type: 'text' },
-    },
-
-    // Props
-    titleText: {
-      control: { type: 'text' },
-    },
-
-    confirmButtonText: {
-      control: { type: 'text' },
-    },
-
-    cancelButtonText: {
-      control: { type: 'text' },
-    },
-
-    confirmType: {
-      control: { type: 'select' },
-      options: Object.values(ConfirmType),
-    },
-
-    loading: {
-      control: { type: 'boolean' },
-    },
-
-    disabled: {
-      control: { type: 'boolean' },
-    },
-
-    confirmationText: {
-      control: { type: 'text' },
-    },
-
-    textConfirmationLabel: {
-      control: { type: 'text' },
-    },
-
-    textConfirmationPlaceholder: {
-      control: { type: 'text' },
-    },
-
-    textConfirmationError: {
-      control: { type: 'text' },
-    },
-  },
-
-  parameters: {
-    layout: 'centered',
-
-    docs: {
-      page: OrConfirmDocs,
-    },
-
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=3908%3A22792',
-    },
-  },
-} as Meta<typeof OrConfirm>;
-
-const Template: StoryFn<typeof OrConfirm> = (args) => ({
-  components: {
-    OrConfirm,
-    OrButton,
-  },
-
-  setup() {
-    const confirm = ref<InstanceType<typeof OrConfirm>>();
-
-    return {
-      args,
-      confirm,
-      onOpen: action('open'),
-      onClose: action('close'),
-      onConfirm: action('confirm'),
-    };
-  },
-
-  template: `
-    <div class="contents">
-      <OrButton @click="confirm.open()">Confirmation modal</OrButton>
-
-      <OrConfirm
-        ref="confirm"
-        v-bind="args"
-        @open="onOpen"
-        @close="onClose"
-        @confirm="onConfirm"
-      >
-        <template #default v-if="args.default">
-          ${args.default}
-        </template>
-        <template #header v-if="args.header">
-          ${args.header}
-        </template>
-        <template #footer v-if="args.footer">
-          ${args.footer}
-        </template>
-      </OrConfirm>
-    </div>
-  `,
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  titleText: 'Delete permanently',
-  default: `Are you sure you want to delete <b>${Faker.commerce.productName()}</b> permanently?`,
-  confirmButtonText: 'Delete',
-  cancelButtonText: 'Keep it',
-  confirmType: ConfirmType.D,
-};
-
-export const Loading = Template.bind({});
-Loading.args = {
-  ...Default.args,
-  default: `Are you sure you want to delete <b>${Faker.commerce.productName()}</b> permanently?<br/>Press ESC to close.`,
-  loading: true,
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  ...Default.args,
-  disabled: true,
-};
-
-const valToDelete = Faker.commerce.productName();
-export const WithTextConfirmation = Template.bind({});
-WithTextConfirmation.args = {
-  ...Default.args,
-  default: `Are you sure you want to delete <b>${valToDelete}</b> permanently?<br/> Please enter name to confirm.`,
-  confirmationText: valToDelete,
-  textConfirmationLabel: 'Item name',
-  textConfirmationPlaceholder: 'Item to delete...',
-  textConfirmationError: 'Names do not match',
-};
-
-export const WithCustomFooter = Template.bind({});
-WithCustomFooter.args = {
-  titleText: 'Delete permanently',
-  default: `Are you sure you want to delete <b>${Faker.commerce.productName()}</b> permanently?`,
-  footer: 'Footer content (ESC to close)',
-  confirmType: ConfirmType.D,
-};
-
-export const ConfirmButtonColor = Template.bind({});
-ConfirmButtonColor.args = {
-  titleText: 'Confirm',
-  default: `Are you sure you want to <i>${Faker.hacker.verb()}</i> the <b>${Faker.hacker.noun()}</b>?`,
-  confirmType: ConfirmType.C,
-  confirmButtonText: 'Yes',
-  cancelButtonText: 'No',
-};
-
-
-const TemplateIsOpen: StoryFn<typeof OrConfirm> = (args) => ({
-  components: {
-    OrConfirm,
-    OrButton,
-  },
-
-  setup() {
-    const isOpen = ref(args.isOpen);
-    return {
-      args,
-      isOpen,
-      onClose: () => {
-        isOpen.value = false;
-        action('close')();
-      },
-      onConfirm: () => {
-        action('confirm')();
-      },
-    };
-  },
-
-  template: `
-    <div class="contents">
-      <OrButton @click="() => isOpen = true">Confirmation modal</OrButton>
-
-      <OrConfirm
-        v-bind="args"
-        :is-open="isOpen"
-        @close="onClose"
-        @confirm="onConfirm"
-      >
-        <template #default v-if="args.default">
-          ${args.default}
-        </template>
-        <template #header v-if="args.header">
-          ${args.header}
-        </template>
-        <template #footer v-if="args.footer">
-          ${args.footer}
-        </template>
-      </OrConfirm>
-    </div>
-  `,
-});
-export const UsingIsOpenProp = TemplateIsOpen.bind({});
-UsingIsOpenProp.argTypes = {
-  isOpen: {
-    control: { type: 'boolean' },
-  },
-};
-
-UsingIsOpenProp.args = {
-  isOpen: 'true',
-  titleText: 'Confirm',
-  default: `Are you sure you want to <i>${Faker.hacker.verb()}</i> the <b>${Faker.hacker.noun()}</b>?`,
-  confirmType: ConfirmType.C,
-  confirmButtonText: 'Yes',
-  cancelButtonText: 'No',
-};

package/src/components/or-date-picker-v3/OrDatePicker.docs.mdx

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