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

package/src/components/or-bottom-sheet-v3/OrBottomSheet.stories3.ts

@@ -1,110 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryFn } from '@storybook/vue3';
-import { ref } from 'vue-demi';
-import { OrButtonV3 as OrButton } from '../or-button-v3';
-import { OrMenuItemV3 as OrMenuItem } from '../or-menu-item-v3';
-import OrBottomSheetDocs from './OrBottomSheet.docs.mdx';
-import OrBottomSheet from './OrBottomSheet.vue';
-import { BottomSheetVariant } from './props';
-
-export default {
-  title: 'Components/Bottom Sheet',
-  component: OrBottomSheet,
-
-  argTypes: {
-    // Slots
-    header: {
-      type: {
-        name: 'string',
-        required: false,
-      },
-
-      control: { type: 'text' },
-    },
-
-    default: {
-      type: {
-        name: 'string',
-        required: true,
-      },
-
-      control: { type: 'text' },
-    },
-
-    // Props
-    variant: {
-      control: { type: 'select' },
-      options: Object.values(BottomSheetVariant),
-    },
-
-    // Events
-    'update:state': {
-      table: { disable: true },
-    },
-  },
-
-  parameters: {
-    layout: 'centered',
-
-    docs: {
-      page: OrBottomSheetDocs,
-    },
-
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=2793%3A15600',
-    },
-  },
-} as Meta<typeof OrBottomSheet>;
-
-const Template: StoryFn<typeof OrBottomSheet> = (args) => ({
-  components: {
-    OrBottomSheet,
-    OrButton,
-    OrMenuItem,
-  },
-
-  setup() {
-    // Refs
-    const bottomSheet = ref<InstanceType<typeof OrBottomSheet>>();
-
-    return {
-      args,
-      bottomSheet,
-      onUpdateState: action('update:state'),
-    };
-  },
-
-  template: `
-    <div class="contents">
-      <OrButton @click="bottomSheet.open()">Open</OrButton>
-
-      <OrBottomSheet
-        ref="bottomSheet"
-        v-bind="args"
-        @update:state="onUpdateState"
-      >
-        <template #header>
-          ${args.header}
-        </template>
-
-        ${args.default}
-      </OrBottomSheet>
-    </div>
-  `,
-});
-
-export const BottomSheet = Template.bind({});
-
-BottomSheet.args = {
-  // Slots
-  header: 'Title',
-
-  default: `
-    <OrMenuItem>Item 1</OrMenuItem>
-    <OrMenuItem>Item 2</OrMenuItem>
-    <OrMenuItem>Item 3</OrMenuItem>
-    <OrMenuItem>Item 4</OrMenuItem>
-    <OrMenuItem>Item 5</OrMenuItem>
-  `,
-};

package/src/components/or-button-v3/OrButton.docs.mdx

@@ -1,14 +0,0 @@
-import { DocsPage } from '@storybook/addon-docs';
-
-```ts
-import { OrButtonV3 as OrButton } from '@onereach/ui-components';
-```
-
-<DocsPage />
-
-## Migration Guide from V1
-  - property `type` renamed to `variant`
-  - property `htmlButtonType` renamed to `type`
-  - property `isDisabled` renamed to `disabled`
-  - property `isLoading` renamed to `loading`
-  - removed properties `content`, `size`, `icon`, `iconPosition`, and `loadingType`

package/src/components/or-button-v3/OrButton.stories3.ts

@@ -1,130 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryFn } from '@storybook/vue3';
-import { OrIconV3 as OrIcon } from '../or-icon-v3';
-import OrButtonDocs from './OrButton.docs.mdx';
-import OrButton from './OrButton.vue';
-import { ButtonColor, ButtonType, ButtonVariant } from './props';
-
-export default {
-  title: 'Components/Buttons/Button',
-  component: OrButton,
-
-  argTypes: {
-    // Slots
-    default: {
-      type: {
-        name: 'string',
-        required: true,
-      },
-
-      control: { type: 'text' },
-    },
-
-    // Props
-    type: {
-      control: { type: 'select' },
-      options: Object.values(ButtonType),
-    },
-
-    variant: {
-      control: { type: 'select' },
-      options: Object.values(ButtonVariant),
-    },
-
-    color: {
-      control: { type: 'select' },
-      options: Object.values(ButtonColor),
-    },
-
-    activated: {
-      table: { disable: true },
-    },
-
-    disabled: {
-      control: { type: 'boolean' },
-    },
-
-    loading: {
-      control: { type: 'boolean' },
-    },
-
-    loadingText: {
-      control: { type: 'text' },
-    },
-  },
-
-  parameters: {
-    layout: 'centered',
-
-    docs: {
-      page: OrButtonDocs,
-    },
-
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=202%3A9',
-    },
-  },
-} as Meta<typeof OrButton>;
-
-const Template: StoryFn<typeof OrButton> = (args) => ({
-  components: {
-    OrButton,
-    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: `
-    <OrButton
-      v-bind="args"
-      @click="handleClick"
-      @focus="handleFocus"
-      @blur="handleBlur"
-      @mouseover="handleMouseover"
-      @mouseout="handleMouseout"
-      @mousemove="handleMousemove"
-      @mouseenter="handleMouseenter"
-      @mouseleave="handleMouseleave"
-      class="test-class"
-    >
-      ${args.default}
-    </OrButton>
-  `,
-});
-
-export const Default = Template.bind({});
-
-Default.args = {
-  // Slots
-  default: 'Button',
-};
-
-export const WithIcons = Template.bind({});
-
-WithIcons.args = {
-  // Slots
-  default: '<OrIcon icon="photo" /> Button',
-};
-
-export const Link = Template.bind({});
-
-Link.args = {
-  // Slots
-  default: 'Link <OrIcon icon="arrow_drop_down" />',
-
-  // Props
-  variant: ButtonVariant.Link,
-};

package/src/components/or-card-collection-v3/OrCardCollection.docs.mdx

@@ -1,7 +0,0 @@
-import { DocsPage } from '@storybook/addon-docs';
-
-<DocsPage />
-
-## Migration Guide from V1
-
-Component refactored completely, see new stories and code snippets

package/src/components/or-card-collection-v3/OrCardCollection.stories3.ts

@@ -1,378 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryFn } from '@storybook/vue3';
-import { ref } from 'vue-demi';
-import { OrIconV3 as OrIcon } from '../or-icon-v3';
-import OrCardCollectionDocs from './OrCardCollection.docs.mdx';
-import OrCardCollection from './OrCardCollection.vue';
-import { defaultViewModes } from './props';
-import { OrCardV3 as OrCard } from '../or-card-v3';
-import { CardCollectionItem } from './types';
-
-export default {
-  title: 'Components/Card Collection',
-  component: OrCardCollection,
-
-  argTypes: {
-    // Slots
-    item: {
-      type: {
-        name: 'string',
-        required: true,
-      },
-
-      control: { type: 'text' },
-    },
-
-    header: {
-      type: {
-        name: 'string',
-      },
-
-      control: { type: 'text' },
-    },
-
-    // Props
-    items: {
-      control: { type: 'object' },
-    },
-
-    view: {
-      control: { type: 'select' },
-      options: defaultViewModes.map(mode => mode.view),
-    },
-
-    sort: {
-      control: { type: 'object' },
-    },
-
-    sortOptions: {
-      control: { type: 'object' },
-    },
-
-    search: {
-      control: { type: 'text' },
-    },
-
-    searchPlaceholder: {
-      control: { type: 'text' },
-    },
-
-    searchDebounce: {
-      control: { type: 'number' },
-    },
-
-    // Events
-    viewChange: {
-      table: { disable: true },
-    },
-
-    sortChange: {
-      table: { disable: true },
-    },
-
-    searchChange: {
-      table: { disable: true },
-    },
-  },
-
-  parameters: {
-    docs: {
-      page: OrCardCollectionDocs,
-    },
-    layout: 'fullscreen',
-  },
-} as Meta<typeof OrCardCollection>;
-
-const Template: StoryFn<typeof OrCardCollection> = (args) => ({
-  components: {
-    OrCardCollection,
-    OrCard,
-    OrIcon,
-  },
-
-  setup() {
-    const sort = ref(args.sort);
-    const onSortChange = (newSort: string) => {
-      sort.value = newSort;
-      action('searchChange')(newSort);
-    };
-
-    return {
-      args,
-      sort,
-      onSortChange,
-      onViewChange: action('viewChange'),
-      onSearchChange: action('searchChange'),
-    };
-  },
-
-  template: `
-    <div class="p-md bg-surface-1 dark:bg-surface-1-dark">
-      <OrCardCollection
-        v-bind="args"
-        :sort="sort"
-        @viewChange="onViewChange"
-        @sortChange="onSortChange"
-        @searchChange="onSearchChange"
-      >
-        <template #item="{item, mode}">
-          <OrCard>${args.item} ({{mode}})</OrCard>
-        </template>
-        <template #addon>${args.addon}</template>
-      </OrCardCollection>
-    </div>
-  `,
-});
-
-export const Default = Template.bind({});
-
-Default.args = {
-  // Slots
-  item: '{{ item.label }}',
-  addon: '<OrIcon icon="info" />',
-
-  // Props
-  items: Array.from<string, CardCollectionItem>([
-    '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) => ({
-    key: item.toLowerCase(),
-    label: item,
-  })),
-};
-
-export const WithSorting = Template.bind({});
-
-WithSorting.args = {
-  ...Default.args,
-
-  // Props
-  sort: 'bar',
-  sortOptions: [
-    {
-      label: 'Foo',
-      value: 'foo',
-    },
-    {
-      label: 'Bar',
-      value: 'bar',
-    },
-    {
-      label: 'Baz',
-      value: 'baz',
-    },
-    {
-      label: 'Qux',
-      value: 'qux',
-    },
-  ],
-};
-
-
-export const OverrideViewContainer: StoryFn<typeof OrCardCollection> = (args) => ({
-  components: {
-    OrCardCollection,
-    OrCard,
-  },
-
-  setup() {
-    return {
-      args,
-      onViewChange: action('viewChange'),
-      onSortChange: action('sortChange'),
-      onSearchChange: action('searchChange'),
-    };
-  },
-
-  template: `
-    <div class="p-md bg-surface-1 dark:bg-surface-1-dark">
-      <OrCardCollection
-        v-bind="args"
-        @viewChange="onViewChange"
-        @sortChange="onSortChange"
-        @searchChange="onSearchChange"
-      >
-      <template #header="{mode}">
-        ${args.header}
-      </template>
-      <template #grid="{items}">
-        <div class="grid grid-cols-3">
-          <OrCard
-            v-for="item in items"
-            :key="item.key"
-          >
-            {{ item.label }}
-          </OrCard>
-        </div>
-      </template>
-        <template #list="{items}">
-          <ul>
-            <li
-              v-for="item in items"
-              :key="item.key"
-            >
-              - {{ item.label }}
-            </li>
-          </ul>
-        </template>
-      </OrCardCollection>
-    </div>
-  `,
-});
-
-OverrideViewContainer.args = {
-  ...Default.args,
-  header: '<div class="typography-headline-3">Custom {{ mode }}</div>',
-};
-
-export const ExtraViewMode: StoryFn<typeof OrCardCollection> = (args) => ({
-  components: {
-    OrCardCollection,
-    OrCard,
-  },
-
-  setup() {
-    return {
-      args,
-      defaultViewModes,
-      onViewChange: action('viewChange'),
-      onSearchChange: action('searchChange'),
-    };
-  },
-
-  template: `
-    <div class="p-md bg-surface-1 dark:bg-surface-1-dark">
-      <OrCardCollection
-        v-bind="args"
-        :view-modes="[...defaultViewModes, {view: 'mymode', icon: 'timeline'}]"
-        @viewChange="onViewChange"
-        @searchChange="onSearchChange"
-      >
-        <template #item="{item, mode}">
-          <OrCard>${args.item} ({{mode}})</OrCard>
-        </template>
-        <template #mymode="{items}">
-          <div class="typography-headline-3">My view mode</div>
-          <div class="grid grid-cols-3">
-            <OrCard
-              v-for="item in items"
-              :key="item.key"
-            >
-              {{ item.label }} (timeline)
-            </OrCard>
-          </div>
-        </template>
-      </OrCardCollection>
-    </div>
-  `,
-});
-
-ExtraViewMode.args = {
-  ...Default.args,
-};
-
-export const WithLink: StoryFn<typeof OrCardCollection> = (args) => ({
-  components: {
-    OrCardCollection,
-    OrCard,
-    OrIcon,
-  },
-
-  setup() {
-    return {
-      args,
-      onViewChange: action('viewChange'),
-      onSortChange: action('sortChange'),
-      onSearchChange: action('searchChange'),
-    };
-  },
-
-  template: `
-    <div class="p-md bg-surface-1 dark:bg-surface-1-dark">
-      <OrCardCollection
-        v-bind="args"
-        @viewChange="onViewChange"
-        @sortChange="onSortChange"
-        @searchChange="onSearchChange"
-      >
-        <template #item="{item}">
-          <a href="#" @click.prevent><OrCard>${args.item}</OrCard></a>
-        </template>
-      </OrCardCollection>
-    </div>
-  `,
-});
-
-WithLink.args = {
-  ...Default.args,
-};
-
-export const EmptySearchResults: StoryFn<typeof OrCardCollection> = (args) => ({
-  components: {
-    OrCardCollection,
-    OrCard,
-    OrIcon,
-  },
-
-  setup() {
-    return {
-      args,
-      onViewChange: action('viewChange'),
-      onSortChange: action('sortChange'),
-      onSearchChange: action('searchChange'),
-    };
-  },
-
-  template: `
-    <div class="p-md h-screen bg-surface-1 dark:bg-surface-1-dark">
-      <OrCardCollection
-        v-bind="args"
-        @viewChange="onViewChange"
-        @sortChange="onSortChange"
-        @searchChange="onSearchChange"
-      >
-        <template #noSearchResults="{search}">
-          <p class="text-center typography-headline-3">No results for "{{search}}"</p>
-        </template>
-      </OrCardCollection>
-    </div>
-  `,
-});
-
-EmptySearchResults.args = {
-  ...Default.args,
-  search: 'My favorite ..',
-  items: [],
-};
-
-export const CustomizeSearch = Template.bind({});
-
-CustomizeSearch.args = {
-  ...Default.args,
-  searchPlaceholder: 'What you want to find today?',
-  searchDebounce: 0,
-};

package/src/components/or-card-v3/OrCard.docs.mdx

@@ -1,10 +0,0 @@
-import { DocsPage } from '@storybook/addon-docs';
-
-```ts
-import { OrCardV3 as OrCard } from '@onereach/ui-components';
-```
-
-<DocsPage />
-
-## Migration Guide from V1
-  - removed property `active`