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

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

@@ -1,174 +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 OrDatePickerDocs from './OrDatePicker.docs.mdx';
-import OrDatePicker from './OrDatePicker.vue';
-import { DatePickerSize } from './props';
-
-export default {
-  title: 'Components/Date Picker',
-  component: OrDatePicker,
-
-  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 },
-    },
-
-    size: {
-      control: { type: 'select' },
-      options: Object.values(DatePickerSize),
-    },
-
-    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: OrDatePickerDocs,
-    },
-
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=3175-41854&t=fEpVdGUcSv9iaRfM-0',
-    },
-  },
-} as Meta<typeof OrDatePicker>;
-
-const Template: StoryFn<typeof OrDatePicker> = (args) => ({
-  components: {
-    OrIcon,
-    OrDatePicker,
-  },
-
-  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: `
-    <OrDatePicker
-      v-model="model"
-      v-bind="args"
-      @update:modelValue="onUpdateModelValue"
-      @keydown="onKeydown"
-      @keyup="onKeyup"
-      @focus="onFocus"
-      @blur="onBlur"
-    >
-      <template #addon>
-        ${args.addon}
-      </template>
-    </OrDatePicker>
-  `,
-});
-
-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()),
-};

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

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

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 />