@onereach/ui-components 4.4.3 → 4.4.4-beta.2722.0

package/src/components/or-date-time-picker-v3/OrDateTimePicker.stories3.ts

@@ -1,183 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryFn } from '@storybook/vue3';
-import * as Faker from 'faker';
-import { ref, watch } from 'vue-demi';
-import { OrIconV3 as OrIcon } from '../or-icon-v3';
-import OrDateTimePickerDocs from './OrDateTimePicker.docs.mdx';
-import OrDateTimePicker from './OrDateTimePicker.vue';
-import { DateTimePickerSize } from './props';
-
-export default {
-  title: 'Components/Date & Time Picker',
-  component: OrDateTimePicker,
-
-  argTypes: {
-    // Slots
-    addon: {
-      type: {
-        name: 'string',
-        required: false,
-      },
-
-      control: { type: 'text' },
-    },
-
-    // Props
-    modelValue: {
-      control: { type: 'text' },
-    },
-
-    yearFilter: {
-      table: { disable: true },
-    },
-
-    monthFilter: {
-      table: { disable: true },
-    },
-
-    dateFilter: {
-      table: { disable: true },
-    },
-
-    hoursFilter: {
-      table: { disable: true },
-    },
-
-    minutesFilter: {
-      table: { disable: true },
-    },
-
-    size: {
-      control: { type: 'select' },
-      options: Object.values(DateTimePickerSize),
-    },
-
-    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' },
-    },
-
-    // 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: {
-    docs: {
-      page: OrDateTimePickerDocs,
-    },
-
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=4063%3A40967&t=H1iGW8hg2dduEfyc-4',
-    },
-  },
-} as Meta<typeof OrDateTimePicker>;
-
-const Template: StoryFn<typeof OrDateTimePicker> = (args) => ({
-  components: {
-    OrIcon,
-    OrDateTimePicker,
-  },
-
-  setup() {
-    // State
-    const model = ref<Date>();
-
-    // 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: `
-    <OrDateTimePicker
-      v-model="model"
-      v-bind="args"
-      @update:modelValue="onUpdateModelValue"
-      @keydown="onKeydown"
-      @keyup="onKeyup"
-      @focus="onFocus"
-      @blur="onBlur"
-    >
-      <template #addon>
-        ${args.addon}
-      </template>
-    </OrDateTimePicker>
-  `,
-});
-
-export const Default = Template.bind({});
-
-Default.args = {
-  // Slots
-  addon: '<OrIcon icon="info" />',
-
-  // Props
-  label: 'Label',
-  hint: Faker.lorem.sentence(20),
-};
-
-export const WithFilter = Template.bind({});
-
-WithFilter.args = {
-  ...Default.args,
-
-  // Props
-  dateFilter: (value: Date) => ![0, 6].includes(value.getUTCDay()),
-  hoursFilter: (value: Date) => value.getUTCHours() >= 9 && value.getUTCHours() <= 18,
-};

package/src/components/or-empty-state-v3/OrEmptyState.stories3.ts

@@ -1,87 +0,0 @@
-import { Meta, StoryFn } from '@storybook/vue3';
-import OrEmptyState from './OrEmptyState.vue';
-import successPng from '../../assets/success.png';
-import { EmptyStateSize } from './props';
-
-export default {
-  title: 'Components/Empty State',
-  component: OrEmptyState,
-  argTypes: {
-    size: {
-      control: {
-        type: 'inline-radio',
-        labels: {
-          [EmptyStateSize.M]: 'Medium',
-          [EmptyStateSize.L]: 'Large',
-        },
-      },
-      options: Object.values(EmptyStateSize),
-    },
-  },
-  parameters: {
-    layout: 'centered',
-  },
-} as Meta<typeof OrEmptyState>
-
-const Template: StoryFn<typeof OrEmptyState> = (args) => ({
-  components: { OrEmptyState },
-  setup() {
-    return { args };
-  },
-  template: `
-    <OrEmptyState v-bind="args"/>
-  `,
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  heading: 'No aliens detected',
-  text: 'Invite some aliens to your planet.'
-};
-Default.parameters = {
-  layout: 'fullscreen',
-};
-Default.decorators = [
-  () => ({
-    template: `
-        <div class="
-          demo-wrapper w-full min-h-[200px] h-screen box-border relative
-          gap-sm p-md bg-surface-variant
-          flex flex-col
-          text-body-2-regular">
-          <div>
-            Note: This frame is added for demo purpose.<br>
-            The OrEmptyState component is transparent and has <code>width:100%</code> and <code>flex-grow:1</code> attributes.<br>
-            It is recommended to put it inside a column flex container or a row flex container that wraps.
-          </div>
-          <div class="demo-container grow bg-background dark:bg-background-dark flex flex-col"><story /></div>
-        </div>
-      `
-  })
-];
-
-export const ImageIcon = Template.bind({});
-ImageIcon.args = {
-  heading: 'Planet populated',
-  text: 'So many aliens on this planet!',
-  imageSrc: successPng,
-};
-
-export const LargeSize = Template.bind({});
-LargeSize.args = {
-  ...ImageIcon.args,
-  size: EmptyStateSize.L,
-};
-
-export const ExtraContentInSlot: StoryFn<typeof OrEmptyState> = (args) => ({
-  components: { OrEmptyState },
-  setup() {
-    return { args };
-  },
-  template: `
-    <OrEmptyState v-bind="args" heading="Alien not found" text="Pass formatted content via a default slot.">
-      Alien named <b>Garry</b> not found.<br>
-      The text in the slot is by default formatted as a component's text prop.
-    </OrEmptyState>
-  `,
-});

package/src/components/or-error-tag-v3/OrErrorTag.docs.mdx

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

package/src/components/or-error-tag-v3/OrErrorTag.stories3.ts

@@ -1,56 +0,0 @@
-import { Meta, StoryFn } from '@storybook/vue3';
-import OrErrorTagDocs from './OrErrorTag.docs.mdx';
-import OrErrorTag from './OrErrorTag.vue';
-
-export default {
-  title: 'Components/Tag/Error Tag',
-  component: OrErrorTag,
-
-  argTypes: {
-    // Slots
-    default: {
-      type: {
-        name: 'string',
-        required: true,
-      },
-
-      control: { type: 'text' },
-    },
-  },
-
-  parameters: {
-    layout: 'centered',
-
-    docs: {
-      page: OrErrorTagDocs,
-    },
-
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=202%3A14',
-    },
-  },
-} as Meta<typeof OrErrorTag>;
-
-const Template: StoryFn<typeof OrErrorTag> = (args) => ({
-  components: {
-    OrErrorTag,
-  },
-
-  setup() {
-    return { args };
-  },
-
-  template: `
-    <OrErrorTag v-bind="args">
-      ${args.default}
-    </OrErrorTag>
-  `,
-});
-
-export const ErrorTag = Template.bind({});
-
-ErrorTag.args = {
-  // Slots
-  default: 'Error',
-};

package/src/components/or-expansion-panel-v3/OrExpansionPanel.docs.mdx

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

package/src/components/or-expansion-panel-v3/OrExpansionPanel.stories3.ts

@@ -1,137 +0,0 @@
-import { Meta, StoryFn } from '@storybook/vue3';
-import { action } from '@storybook/addon-actions';
-
-import { OrIconV3 as OrIcon } from '../or-icon-v3';
-import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
-import { OrTagV3 as OrTag } from '../or-tag-v3';
-import OrExpansionPanelDocs from './OrExpansionPanel.docs.mdx';
-import OrExpansionPanel from './OrExpansionPanel.vue';
-import { ExpansionPanelColor, ExpansionPanelVariant } from './props';
-import * as Faker from 'faker';
-
-export default {
-  title: 'Components/Expansion Panel',
-  component: OrExpansionPanel,
-
-  argTypes: {
-    // Slots
-    default: {
-      type: {
-        name: 'string',
-        required: true,
-      },
-
-      control: { type: 'text' },
-    },
-
-    addon: {
-      type: {
-        name: 'string',
-        required: false,
-      },
-
-      control: { type: 'text' },
-    },
-
-    // Props
-    label: {
-      control: { type: 'text' },
-    },
-
-    variant: {
-      control: { type: 'select' },
-      options: Object.values(ExpansionPanelVariant),
-    },
-
-    color: {
-      control: { type: 'select' },
-      options: Object.values(ExpansionPanelColor),
-    },
-
-    disabled: {
-      control: { type: 'boolean' },
-    },
-  },
-
-  parameters: {
-    docs: {
-      page: OrExpansionPanelDocs,
-    },
-
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=202%3A19&t=a2KFznTzma8aZ816-1',
-    },
-  },
-} as Meta<typeof OrExpansionPanel>;
-
-const Template: StoryFn<typeof OrExpansionPanel> = (args) => ({
-  components: {
-    OrExpansionPanel,
-    OrIcon,
-    OrIconButton,
-    OrTag,
-  },
-
-  setup() {
-    return {
-      args,
-      handleOpen: action('open'),
-      handleClose: action('close'),
-    };
-  },
-
-  template: `
-    <OrExpansionPanel
-      v-bind="args"
-      @open="handleOpen"
-      @close="handleClose"
-    >
-      ${args.default}
-
-      <template #addon>
-        ${args.addon}
-      </template>
-    </OrExpansionPanel>
-  `,
-});
-
-export const Default = Template.bind({});
-
-Default.args = {
-  // Slots
-  default: Faker.lorem.paragraphs(3),
-  addon: '<OrIcon icon="drag_indicator" />',
-
-  // Props
-  label: 'Expansion Panel',
-};
-
-export const CardVariant = Template.bind({});
-
-CardVariant.args = {
-  // Slots
-  default: Faker.lorem.paragraphs(3),
-  addon: '<OrIconButton icon="delete" />',
-
-  // Props
-  label: 'Card Expansion Panel',
-  variant: ExpansionPanelVariant.Card,
-};
-
-export const WithLongLabelAndTags = Template.bind({});
-
-WithLongLabelAndTags.args = {
-  // Slots
-  default: Faker.lorem.paragraphs(3),
-  addon: `
-    <div class="flex flex-row gap-sm">
-      <OrTag>${Faker.lorem.word()}</OrTag>
-      <OrTag>${Faker.lorem.word()}</OrTag>
-      <OrTag>${Faker.lorem.word()}</OrTag>
-    </div>
-  `,
-
-  // Props
-  label: Faker.lorem.sentence(35),
-};

package/src/components/or-fab-v3/OrFab.docs.mdx

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

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`