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

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

@@ -1,170 +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 OrTimePickerDocs from './OrTimePicker.docs.mdx';
-import OrTimePicker from './OrTimePicker.vue';
-import { TimePickerSize } from './props';
-
-export default {
-  title: 'Components/Time Picker',
-  component: OrTimePicker,
-
-  argTypes: {
-    // Slots
-    addon: {
-      type: {
-        name: 'string',
-        required: false,
-      },
-
-      control: { type: 'text' },
-    },
-
-    // Props
-    modelValue: {
-      control: { type: 'text' },
-    },
-
-    hoursFilter: {
-      table: { disable: true },
-    },
-
-    minutesFilter: {
-      table: { disable: true },
-    },
-
-    size: {
-      control: { type: 'select' },
-      options: Object.values(TimePickerSize),
-    },
-
-    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: OrTimePickerDocs,
-    },
-
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=3161-14394&t=fEpVdGUcSv9iaRfM-0',
-    },
-  },
-} as Meta<typeof OrTimePicker>;
-
-const Template: StoryFn<typeof OrTimePicker> = (args) => ({
-  components: {
-    OrIcon,
-    OrTimePicker,
-  },
-
-  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: `
-    <OrTimePicker
-      v-model="model"
-      v-bind="args"
-      @update:modelValue="onUpdateModelValue"
-      @keydown="onKeydown"
-      @keyup="onKeyup"
-      @focus="onFocus"
-      @blur="onBlur"
-    >
-      <template #addon>
-        ${args.addon}
-      </template>
-    </OrTimePicker>
-  `,
-});
-
-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
-  hoursFilter: (value: Date) => value.getUTCHours() >= 9 && value.getUTCHours() <= 18,
-};

package/src/components/or-toast-v3/OrToast.stories3.ts

@@ -1,67 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryFn } from '@storybook/vue3';
-import * as Faker from 'faker';
-import { OrToastV3 as OrToast } from './index';
-import { ToastType } from './props';
-
-export default {
-  title: 'Components/Toast',
-
-  component: OrToast,
-
-  argTypes: {
-    link: {
-      control: { type: 'object' },
-    },
-
-    toastType: {
-      control: { type: 'select' },
-      options: Object.values(ToastType),
-    },
-  },
-
-  parameters: {
-    layout: 'centered',
-
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=4061%3A30700&t=TTS6XQNu2GIMIdlL-0',
-    },
-  },
-} as Meta<typeof OrToast>;
-
-
-const Template: StoryFn<typeof OrToast> = (args) => ({
-  components: {
-    OrToast,
-  },
-
-  template: `
-    <OrToast
-      v-bind="args"
-      @close="onClose"
-    />
-  `,
-
-  setup() {
-    return {
-      args,
-      onClose: action('close'),
-    };
-  },
-});
-
-export const Toast = Template.bind({});
-
-Toast.args = {
-  messageText: Faker.lorem.words(7),
-  link: {
-    href: '#',
-    title: 'some title',
-    target: '_self',
-    // eslint-disable-next-line no-console
-    callback: () => console.log('Link clicked'),
-  },
-  // loadingProgress: 0,
-  toastType: ToastType.Success,
-};

package/src/components/or-toast-v3/or-toast-container-v3/OrToastContainer.docs.mdx

@@ -1,123 +0,0 @@
-import {
-  Title,
-  Subtitle,
-  Description,
-  Primary,
-  ArgsTable,
-  Stories,
-  PRIMARY_STORY
-} from '@storybook/addon-docs';
-
-<Title />
-<Subtitle />
-<Description />
-<Primary />
-<ArgsTable story={PRIMARY_STORY} />
-<Stories />
-
-### Main changes
-- As we have the oldest version of toast & toastContainer, all types and props now should be imported form TypesV3 and PropsV3
-```ts
-import {TypesV3} from '@onereach/ui-components'
-const some: TypesV3.ToastProps
-```
-- property `loadingProgress` at this monet not available.
-- Progress component replaced by or-loader-v3
-#### OrToastContainer & OrToast Api
-For correct work you need provide `OrToastContainer` to top level of your application
-
-```html
-    <div class="app">
-      ...your other top level component
-      <or-toast-container></or-toast-container>
-    </div>
-```
-For more convenient work with toasts, or-toast package provides convenient api
-
-Simple usage:
-``` ts
-import {useToastV3} from "'@onereach/ui-components'";
-const {success} = useToastV3()
-```
-You also can provide default toast options like:
-```
-import {useToastV3, TypesV3 } from "'@onereach/ui-components'";
-const defualtOptions: TypesV3.ToastProps  = {
-  dismissible: false // now by default all toasts will not have a close button
-}
-const {success} = useToastV3(defualtOptions)
-```
-To show a toast with the type of success, all you need to do is call the success function. This function takes two arguments
-```ts
-success(props: ToastProps, behaviour: ToastBehaviour = {}): UseToastNotifyReturns
-````
-Where `ToastProps` is actually Props of OrToast component and second one is toast behavior.
-```ts
-interface ToastBehaviour {
-  // toast lifetime
-  duration?: number; // <-default 5000ms
-  // the toast timer should be paused while hovering
-  pauseOnHover?: boolean; // <-default true
-  // handler when toast was clicked
-  onToastClick?: () => void;
-  // handler when the toast was closed (manually using the close button)
-  onToastClose?: () => void;
-}
-```
-
-The `success` returns two functions with which you can change or destroy the toast component
-
-`With the update function, you can only change the toast Props, not their behavior`
-```ts
-interface UseToastNotifyReturns {
-  close: () => void; //close toast
-  update: (data: TypesV3.ToastProps) => void; // update toast
-}
-```
-
-This is what your code will look like
-```ts
-import {useToastV3} from "'@onereach/ui-components'";
-const {success} = useToastV3()
-const close = success({
-    messageText: 'some Text',
-    link: {
-        href: 'https://www.google.com/',
-        title: 'Some Title'
-    }
-}, {
-    duration: 0, // we will close it using API
-    onToastClose: () => console.log('closed'),
-});
-//close toast after 2 seconds
-setTimeout(() => {
-    close();
-}, 2000)
-```
-
-More complex example with ToastType loading and loadingProgress
-
-```ts
-import {useToastV3} from "'@onereach/ui-components'";
-const {loading} = useToastV3()
-let loadingProgress = 0;
-const {close, update} = loading({
-    messageText: 'some Text',
-    link: {
-        href: 'https://www.google.com/',
-        title: 'Some Title'
-    },
-    loadingProgress,
-}, {
-    onToastClose: () => console.log('closed'),
-});
-
-// The progress bar will be updated every 1 second
- setInterval(() => {
-    loadingProgress += 0.1;
-    update({ loadingProgress });
-    if (loadingProgress >= 1)
-      close();
-}, 1000);
-```
-

package/src/components/or-toast-v3/or-toast-container-v3/OrToastContainer.stories3.ts

@@ -1,119 +0,0 @@
-import { StoryFn } from '@storybook/vue3';
-import * as Faker from 'faker';
-import { ref } from 'vue-demi';
-import { OrButtonV3 } from '../../or-button-v3';
-import { OrModalV3 } from '../../or-modal-v3';
-import OrToastContainerV3 from './OrToastContainer.vue';
-import { useToastV3 } from './index';
-import OrToastContainerDocs from './OrToastContainer.docs.mdx';
-import { PositionsX, PositionsY, TransitionType } from '../props';
-
-export default {
-  title: 'Components/Toast/Container',
-  component: OrToastContainerV3,
-  argTypes: {
-    position: {
-      control: { type: 'object' },
-    },
-    transition: {
-      control: { type: 'select' },
-      options: Object.values(TransitionType),
-    },
-    includeHeaderHeight: {
-      control: { type: 'boolean' },
-      description: 'When you use `Position.top`, toast can overlap our header.This prop fix this issue',
-    },
-  },
-  parameters: {
-    layout: 'centered',
-    docs: {
-      page: OrToastContainerDocs,
-    },
-
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=4061%3A30700&t=TTS6XQNu2GIMIdlL-0',
-    },
-  },
-};
-
-const Template: StoryFn<typeof OrToastContainerV3> = (args) => {
-  return {
-    components: {
-      OrToastContainer: OrToastContainerV3,
-      OrButton: OrButtonV3,
-    },
-    setup() {
-      const { success, clearAll } = useToastV3();
-      const button = ref();
-      return {
-        args,
-        button,
-        success,
-        clearAll,
-        showToast() {
-          success({
-            messageText: Faker.lorem.words(7),
-          });
-        },
-      };
-    },
-    template: `
-      <div class="contents">
-        <or-toast-container v-bind="args" />
-        <or-button @click="showToast"><span>Click me!!!</span></or-button>
-      </div>
-    `,
-  };
-};
-export const Container = Template.bind({});
-Container.args = {
-  position: {
-    positionX: PositionsX.Right,
-    positionY: PositionsY.Bottom,
-  },
-};
-
-const TemplateModal: StoryFn<typeof OrToastContainerV3> = (args) => {
-  return {
-    components: {
-      OrToastContainer: OrToastContainerV3,
-      OrButton: OrButtonV3,
-      OrModal: OrModalV3,
-    },
-    setup() {
-      const { success, clearAll } = useToastV3();
-      const button = ref();
-      return {
-        args,
-        button,
-        success,
-        clearAll,
-        showToast() {
-          success({
-            messageText: Faker.lorem.words(7),
-          });
-        },
-      };
-    },
-    template: `
-      <div class="contents">
-        <or-toast-container v-bind="args" />
-        <OrModal
-          :is-open="true"
-        >
-          <or-button @click="showToast">
-            Trigger toast
-          </or-button>
-        </OrModal>
-      </div>
-    `,
-  };
-};
-export const ContainerWithModal = TemplateModal.bind({});
-ContainerWithModal.args = {
-  position: {
-    positionX: PositionsX.Right,
-    positionY: PositionsY.Bottom,
-  },
-};

package/src/components/or-tooltip-v3/OrTooltip.docs.mdx

@@ -1,10 +0,0 @@
-import { DocsPage } from '@storybook/addon-docs';
-
-```ts
-import { OrTooltipV3 as OrTooltip } from '@onereach/ui-components';
-```
-<DocsPage />
-
-## Migration Guide from V1
-  - property `content` renamed to `text`
-  - removed properties `modelValue`, `isVisible`, and `triggerOnParent`

package/src/components/or-tooltip-v3/OrTooltip.stories3.ts

@@ -1,84 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryFn } from '@storybook/vue3';
-import { OrIconV3 as OrIcon } from '../or-icon-v3';
-import OrTooltipDocs from './OrTooltip.docs.mdx';
-import OrTooltip from './OrTooltip.vue';
-import { TooltipPlacement } from './props';
-
-export default {
-  title: 'Components/Tooltip',
-  component: OrTooltip,
-
-  argTypes: {
-    // Slots
-    default: {
-      type: {
-        name: 'string',
-        required: true,
-      },
-
-      control: { type: 'text' },
-    },
-
-    // Props
-    text: {
-      control: { type: 'text' },
-    },
-
-    placement: {
-      control: { type: 'select' },
-      options: Object.values(TooltipPlacement),
-    },
-
-    // Events
-    'update:state': {
-      table: { disable: true },
-    },
-  },
-
-  parameters: {
-    layout: 'centered',
-
-    docs: {
-      page: OrTooltipDocs,
-    },
-
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=848%3A3934',
-    },
-  },
-} as Meta<typeof OrTooltip>;
-
-const Template: StoryFn<typeof OrTooltip> = (args) => ({
-  components: {
-    OrIcon,
-    OrTooltip,
-  },
-
-  setup() {
-    return {
-      args,
-      onUpdateState: action('update:state'),
-    };
-  },
-
-  template: `
-    <OrTooltip
-      v-bind="args"
-      @update:state="onUpdateState"
-    >
-      ${args.default}
-    </OrTooltip>
-  `,
-});
-
-export const Tooltip = Template.bind({});
-
-Tooltip.args = {
-  // Slots
-  default: '<OrIcon icon="info" />',
-
-  // Props
-  text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-};