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

package/src/components/or-tag-v3/OrTag.stories3.ts

@@ -1,213 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryFn } from '@storybook/vue3';
-import Faker from 'faker';
-import { ref } from 'vue-demi';
-import { useOverflow } from '../../hooks';
-import { OrButtonV3 as OrButton } from '../or-button-v3';
-import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
-import OrTagDocs from './OrTag.docs.mdx';
-import OrTag from './OrTag.vue';
-import { TagColor, TagVariant } from './props';
-
-export default {
-  title: 'Components/Tag',
-  component: OrTag,
-
-  argTypes: {
-    // Slots
-    default: {
-      type: {
-        name: 'string',
-        required: true,
-      },
-
-      control: { type: 'text' },
-    },
-
-    // Props
-    variant: {
-      control: { type: 'select' },
-      options: Object.values(TagVariant),
-    },
-
-    color: {
-      control: { type: 'select' },
-      options: Object.values(TagColor),
-    },
-
-    disabled: {
-      control: { type: 'boolean' },
-    },
-  },
-
-  parameters: {
-    layout: 'centered',
-
-    docs: {
-      page: OrTagDocs,
-    },
-
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=202%3A14',
-    },
-  },
-} as Meta<typeof OrTag>;
-
-const Template: StoryFn<typeof OrTag> = (args) => ({
-  components: {
-    OrTag,
-  },
-
-  setup() {
-    return {
-      args,
-      handleClick: action('click'),
-      handleFocus: action('focus'),
-      handleBlur: action('blur'),
-      handleReset: action('reset'),
-    };
-  },
-
-  template: `
-    <OrTag
-      v-bind="args"
-      @click="handleClick"
-      @focus="handleFocus"
-      @blur="handleBlur"
-      @reset="handleReset"
-    >
-      ${args.default}
-    </OrTag>
-  `,
-});
-
-const ContainerTemplate: StoryFn<typeof OrTag> = (args) => ({
-  components: {
-    OrTag,
-    OrButton,
-    OrPopover,
-  },
-
-  setup() {
-    const container = ref<HTMLElement>();
-    const button = ref<InstanceType<typeof OrButton>>();
-    const popover = ref<InstanceType<typeof OrPopover>>();
-
-    const { innerItems, outerItems } = useOverflow(container);
-
-    return {
-      args,
-      container,
-      button,
-      popover,
-      innerItems,
-      outerItems,
-      handleClick: action('click'),
-      handleFocus: action('focus'),
-      handleBlur: action('blur'),
-      handleReset: action('reset'),
-    };
-  },
-
-  computed: {
-    tagsArr(): string[] {
-      return [
-        args.default,
-        ...(typeof args.tags === 'string' ? args.tags.split(' ') : []),
-      ];
-    },
-    hiddenTagsArr(): string[] {
-      return this.tagsArr.slice(this.innerItems?.length);
-    },
-  },
-
-  template: `
-    <div class="w-[512px] flex flex-row items-center overflow-hidden gap-xs">
-      <div
-        ref="container"
-        class="relative flex flex-row grow items-center overflow-hidden gap-xs"
-      >
-        <OrTag
-          v-for="tag in tagsArr"
-          v-bind="args"
-          @click="handleClick"
-          @focus="handleFocus"
-          @blur="handleBlur"
-          @reset="handleReset"
-        >
-          {{ tag }}
-        </OrTag>
-      </div>
-      <template v-if="outerItems?.length">
-        <OrButton
-          ref="button"
-          class="typography-caption-regular text-on-background dark:text-on-background-dark"
-          color="inherit"
-          variant="link"
-          @click="popover.open()"
-        >
-          +{{outerItems.length}}
-        </OrButton>
-        <OrPopover
-          ref="popover"
-          :trigger="button?.root"
-        >
-          <div
-            class="max-w-[192px] p-[16px] flex flex-row flex-wrap items-center overflow-hidden gap-xs"
-          >
-            <OrTag
-              v-for="tag in hiddenTagsArr"
-              v-bind="args"
-              @click="handleClick"
-              @focus="handleFocus"
-              @blur="handleBlur"
-              @reset="handleReset"
-            >
-              {{ tag }}
-            </OrTag>
-          </div>
-        </OrPopover>
-      </template>
-    </div>
-  `,
-});
-
-export const Default = Template.bind({});
-
-Default.args = {
-  // Slots
-  default: 'Tag',
-};
-
-export const WithCustomColor = Template.bind({});
-
-WithCustomColor.argTypes = {
-  color: {
-    control: { type: 'text' },
-  },
-};
-
-WithCustomColor.args = {
-  // Slots
-  default: 'Tag',
-
-  // Props
-  color: '#0000ff',
-};
-
-export const InsideContainer = ContainerTemplate.bind({});
-
-InsideContainer.argTypes = {
-  tags: {
-    control: { type: 'text' },
-  },
-};
-
-InsideContainer.args = {
-  // Slots
-  default: 'First tag',
-
-  // Args
-  tags: Faker.lorem.words(32),
-};

package/src/components/or-tags-v3/OrTags.docs.mdx

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

package/src/components/or-tags-v3/OrTags.stories3.ts

@@ -1,101 +0,0 @@
-import { Meta, StoryFn } from '@storybook/vue3';
-import { OrTagV3 as OrTag } from '../or-tag-v3';
-import OrTagsDocs from './OrTags.docs.mdx';
-import OrTags from './OrTags.vue';
-
-export default {
-  title: 'Components/Tags',
-  component: OrTags,
-
-  argTypes: {
-    // Props
-    items: {
-      control: { type: 'object' },
-    },
-
-    tagProps: {
-      control: { type: 'object' },
-    },
-  },
-
-  parameters: {
-    docs: {
-      page: OrTagsDocs,
-    },
-
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=202%3A14&t=HsX22PSudRRma7wv-1',
-    },
-  },
-} as Meta<typeof OrTags>;
-
-const Template: StoryFn<typeof OrTags> = (args) => ({
-  components: {
-    OrTag,
-    OrTags,
-  },
-
-  setup() {
-    return { args };
-  },
-
-  template: `
-    <OrTags v-bind="args" />
-  `,
-});
-
-export const Default = (() => {
-  const Story = Template.bind({});
-
-  Story.args = {
-    // Props
-    items: [
-      'Alfa',
-      'Bravo',
-      'Charlie',
-      'Delta',
-      'Echo',
-    ],
-  };
-
-  return Story;
-})();
-
-export const WithOverflow = (() => {
-  const Story = Template.bind({});
-
-  Story.args = {
-    // Props
-    items: [
-      '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',
-    ],
-  };
-
-  return Story;
-})();

package/src/components/or-teleport-v3/OrTeleport.docs.mdx

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

package/src/components/or-teleport-v3/OrTeleport.stories3.ts

@@ -1,60 +0,0 @@
-import { Meta, StoryFn } from '@storybook/vue3';
-import OrTeleport from './OrTeleport.vue3.vue';
-import OrTeleportDocs from './OrTeleport.docs.mdx';
-
-export default {
-  title: 'Components/Teleport',
-  component: OrTeleport,
-
-  argTypes: {
-    // Slots
-    default: {
-      type: {
-        name: 'string',
-        required: true,
-      },
-
-      control: { type: 'text' },
-    },
-
-    // Props
-    to: {
-      control: { type: 'text' },
-    },
-
-    disabled: {
-      control: { type: 'boolean' },
-    },
-  },
-
-  parameters: {
-    layout: 'centered',
-
-    docs: {
-      page: OrTeleportDocs,
-    },
-  },
-} as Meta<typeof OrTeleport>;
-
-const Template: StoryFn<typeof OrTeleport> = (args) => ({
-  components: {
-    OrTeleport,
-  },
-
-  setup() {
-    return { args };
-  },
-
-  template: `
-    <OrTeleport v-bind="args">
-      ${args.default}
-    </OrTeleport>
-  `,
-});
-
-export const Teleport = Template.bind({});
-
-Teleport.args = {
-  // Slots
-  default: 'Content',
-};

package/src/components/or-text-v3/OrText.docs.mdx

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

package/src/components/or-text-v3/OrText.stories3.ts

@@ -1,124 +0,0 @@
-import { Meta, StoryFn } from '@storybook/vue3';
-import OrTextDocs from './OrText.docs.mdx';
-import OrText from './OrText.vue';
-
-export default {
-  title: 'Components/Text',
-  component: OrText,
-
-  argTypes: {
-    // Props
-    text: {
-      control: { type: 'text' },
-    },
-
-    sliceIndex: {
-      control: { type: 'number' },
-    },
-  },
-
-  parameters: {
-    docs: {
-      page: OrTextDocs,
-    },
-  },
-} as Meta<typeof OrText>;
-
-const Template: StoryFn<typeof OrText> = (args) => ({
-  components: {
-    OrText,
-  },
-
-  setup() {
-    return { args };
-  },
-
-  template: `
-    <div class="w-2/5 mx-auto px-md bg-surface-2 dark:bg-surface-2-dark">
-      <OrText v-bind="args" />
-    </div>
-  `,
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  // Props
-  text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt \
-    ut labore et dolore magna aliqua.',
-};
-
-export const MiddleCrop = Template.bind({});
-MiddleCrop.args = {
-  ...Default.args,
-  sliceIndex: 12,
-};
-
-export const TooFarLeft = Template.bind({});
-TooFarLeft.args = {
-  ...Default.args,
-  sliceIndex: 120,
-};
-TooFarLeft.parameters = {
-  docs: {
-    description: {
-      story: 'Caution. If `sliceIndex` is greater than the visible part length, \
-        then beginning part with ellipsis is not displayed and ending part overflows the container.',
-    },
-  },
-};
-
-export const ComplexContainer: StoryFn<typeof OrText> = (args) => ({
-  components: {
-    OrText,
-  },
-
-  setup() {
-    return { args };
-  },
-
-  template: `
-  <div class="w-full">
-    <h3 class="typography-headline-3 mb-md">Flex container side effect</h3>
-    <div class="w-[300px] flex bg-surface-2 dark:bg-surface-2-dark">
-      <!-- fixed part -->
-      <div class="w-[20px]" />
-      <!-- growing part -->
-      <div class="grow px-md">
-        <OrText v-bind="args" />
-      </div>
-    </div>
-    <h3 class="typography-headline-3 my-md">Solution with a wrapper</h3>
-    <div class="w-[300px] flex bg-surface-2 dark:bg-surface-2-dark">
-      <!-- fixed part -->
-      <div class="w-[20px]" />
-      <!-- growing part -->
-      <div class="grow px-md min-w-0">
-        <OrText v-bind="args" />
-      </div>
-    </div>
-    <h3 class="typography-headline-3 my-md">Solution without a wrapper</h3>
-    <div class="w-[300px] flex bg-surface-2 dark:bg-surface-2-dark">
-      <!-- fixed part -->
-      <div class="w-[20px]" />
-      <!-- growing part -->
-      <OrText v-bind="args" class="grow px-md min-w-0" />
-    </div>
-  </div>
-  `,
-});
-ComplexContainer.storyName = 'Growing Flex Container';
-ComplexContainer.args = {
-  ...Default.args,
-  sliceIndex: 12,
-};
-ComplexContainer.parameters = {
-  docs: {
-    description: {
-      story: 'In a special case when OrText is placed inside a variable width container,\
-        such as a flexbox growing block, or when it is itself a growing flexbox item,\
-        there is a problem for a browser to proper calculate the cropping position.\
-        As a solution place a `min-width: 0;` style (tailwind class `min-w-0`)\
-        to the growing item - container or the OrText itself.',
-    },
-  },
-};

package/src/components/or-textarea-v3/OrTextarea.docs.mdx

@@ -1,14 +0,0 @@
-import { DocsPage } from '@storybook/addon-docs';
-
-```ts
-import { OrTextareaV3 as OrTextarea } from '@onereach/ui-components';
-```
-
-<DocsPage />
-
-## Migration Guide from V1
-  - property `isRequired` renamed to `required`
-  - property `isDisabled` renamed to `disabled`
-  - property `isSmall` replaced with `size`
-  - removed properties `htmlId` and `maxLength` (now attributes are forwarded directly to the input)
-  - removed properties `isReadonly` and `isInvalid`

package/src/components/or-textarea-v3/OrTextarea.stories3.ts

@@ -1,164 +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 OrTextareaDocs from './OrTextarea.docs.mdx';
-import OrTextarea from './OrTextarea.vue';
-import { TextareaSize } from './props';
-
-export default {
-  title: 'Components/Textarea',
-  component: OrTextarea,
-
-  argTypes: {
-    // Attrs
-    id: {
-      control: { type: 'text' },
-    },
-
-    maxlength: {
-      control: { type: 'number' },
-    },
-
-    // Slots
-    addon: {
-      type: {
-        name: 'string',
-        required: false,
-      },
-
-      control: { type: 'text' },
-    },
-
-    // Props
-    modelValue: {
-      control: { type: 'text' },
-    },
-
-    size: {
-      control: { type: 'select' },
-      options: Object.values(TextareaSize),
-    },
-
-    label: {
-      control: { type: 'text' },
-    },
-
-    placeholder: {
-      control: { type: 'text' },
-    },
-
-    hint: {
-      control: { type: 'text' },
-    },
-
-    error: {
-      control: { type: 'text' },
-    },
-
-    required: {
-      control: { type: 'boolean' },
-    },
-
-    readonly: {
-      control: { type: 'boolean' },
-    },
-
-    disabled: {
-      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: {
-    layout: 'centered',
-
-    docs: {
-      page: OrTextareaDocs,
-    },
-
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=202%3A10',
-    },
-  },
-} as Meta<typeof OrTextarea>;
-
-const Template: StoryFn<typeof OrTextarea> = (args) => ({
-  components: {
-    OrIcon,
-    OrTextarea,
-  },
-
-  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: `
-    <OrTextarea
-      v-model="model"
-      v-bind="args"
-      @update:modelValue="onUpdateModelValue"
-      @keydown="onKeydown"
-      @keyup="onKeyup"
-      @focus="onFocus"
-      @blur="onBlur"
-    >
-      <template #addon>
-        ${args.addon}
-      </template>
-    </OrTextarea>
-  `,
-});
-
-export const Textarea = Template.bind({});
-
-Textarea.args = {
-  // Slots
-  addon: '<OrIcon icon="info" />',
-
-  // Props
-  label: 'Input Label',
-  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-time-picker-v3/OrTimePicker.docs.mdx

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