@onereach/ui-components 5.0.1-beta.3131.0 → 5.0.1

package/src/components/or-switch/OrSwitch.stories.ts

@@ -1,194 +0,0 @@
-import OrSwitch from './OrSwitch.vue';
-
-import { ArgTypes, Story } from '@storybook/vue';
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'Components/OrSwitch',
-  component: OrSwitch,
-};
-
-const defaultTemplate = '<or-switch v-bind="$props" v-model="switched" @update:modelValue="action"/>';
-const modelArrayTemplate = `
-  <div>
-    <or-switch
-      v-bind="$props"
-      v-model="modelArray"
-      label="Foo"
-      value="Foo"
-      @update:modelValue="action"
-    />
-
-    <or-switch
-      v-bind="$props"
-      v-model="modelArray"
-      label="Baz"
-      value="Baz"
-      @update:modelValue="action"
-    />
-
-    <or-switch
-      v-bind="$props"
-      v-model="modelArray"
-      value="Bar"
-      label="Bar"
-      @update:modelValue="action"
-    />
-  </div>
-`;
-const modelArrayTemplateObject = `
-  <div>
-    <or-switch
-      v-bind="$props"
-      v-model="modelArray"
-      label="Foo"
-      :value="{label: 'Foo', value: 'Foo', items: [{label: 'Foo', value: 'Foo'}, {label: 'Foo', value: 'Foo'}]}"
-      @update:modelValue="action"
-    />
-
-    <or-switch
-      v-bind="$props"
-      v-model="modelArray"
-      label="Baz"
-      :value="{label: 'Bar', value: 'Bar', items: [{label: 'Bar', value: 'Bar'}, {label: 'Bar', value: 'Bar'}]}"
-      @update:modelValue="action"
-    />
-
-    <or-switch
-      v-bind="$props"
-      v-model="modelArray"
-      label="Bar"
-      :value="{label: 'Baz', value: 'Baz', items: [{label: 'Baz', value: 'Baz'}, {label: 'Baz', value: 'Baz'}]}"
-      @update:modelValue="action"
-    />
-  </div>
-`;
-
-const defaultMixin = (argTypes: ArgTypes) => ({
-  props: Object.keys(argTypes),
-
-  components: { OrSwitch },
-
-  data: () => ({
-    switched: false,
-    modelArray: [],
-  }),
-
-  methods: {
-    action: action('update:modelValue'),
-  },
-});
-
-const Template: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-  template: defaultTemplate,
-});
-
-const TemplateSlot: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-  template: `
-    <or-switch
-      v-bind="$props"
-      v-model="switched"
-      @update:modelValue="action"
-    >
-      <span>Slot content</span>
-    </or-switch>`,
-});
-
-const TemplateArray: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-  template: modelArrayTemplate,
-});
-
-const TemplateArrayWithValue: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-  data: () => ({ modelArray: ['Foo', 'Baz'] }),
-  template: modelArrayTemplate,
-});
-
-const TemplateWithDefaultValue: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-  data: () => ({ switched: true }),
-  template: defaultTemplate,
-});
-
-const TemplateArrayObjects: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-  template: modelArrayTemplateObject,
-});
-
-const TemplateArrayWithValueObjects: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-  data: () => ({
-    modelArray: [{
-      label: 'Foo',
-      value: 'Foo',
-      items: [
-        {
-          label: 'Foo',
-          value: 'Foo',
-        },
-        {
-          label: 'Foo',
-          value: 'Foo',
-        },
-      ],
-    }],
-  }),
-  template: modelArrayTemplateObject,
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  label: 'Label',
-  isLoading: false,
-  isDisabled: false,
-};
-
-export const Slot = TemplateSlot.bind({});
-Slot.args = {
-  ...Default.args,
-  label: null,
-};
-
-export const Loading = Template.bind({});
-Loading.args = {
-  ...Default.args,
-  isLoading: true,
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  ...Default.args,
-  isDisabled: true,
-};
-
-export const DefaultValue = TemplateWithDefaultValue.bind({});
-DefaultValue.args = {
-  ...Default.args,
-};
-
-export const DefaultValueDisabled = TemplateWithDefaultValue.bind({});
-DefaultValueDisabled.args = {
-  ...Default.args,
-  isDisabled: true,
-};
-
-export const Group = TemplateArray.bind({});
-Group.args = {
-  ...Default.args,
-};
-
-export const GroupValue = TemplateArrayWithValue.bind({});
-GroupValue.args = {
-  ...Default.args,
-};
-
-export const GroupObjects = TemplateArrayObjects.bind({});
-GroupObjects.args = {
-  ...Default.args,
-};
-
-export const GroupObjectsDefaultValue = TemplateArrayWithValueObjects.bind({});
-GroupObjectsDefaultValue.args = {};

package/src/components/or-tabs/OrTabs.stories.ts

@@ -1,166 +0,0 @@
-import { ArgTypes, Story } from '@storybook/vue';
-import { action } from '@storybook/addon-actions';
-
-import OrTabs from './OrTabs.vue';
-import { OrTab } from '../or-tab';
-import { OrSwitch } from '../or-switch';
-import { OrTooltip } from '../or-tooltip';
-import { OrIcon } from '../or-icon';
-
-export default {
-  title: 'Components/OrTabs',
-  component: OrTabs,
-};
-
-const defaultMixin = (argTypes: ArgTypes) => ({
-  props: Object.keys(argTypes),
-
-  components: {
-    OrTabs,
-    OrTab,
-    OrSwitch,
-    OrTooltip,
-    OrIcon,
-  },
-
-  data() {
-    return {
-      isDisabled: false,
-      isSelected: false,
-    };
-  },
-
-  methods: {
-    onSelectedTab: action('selected'),
-  },
-});
-
-const Template: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-  template: `
-    <or-tabs @selected="onSelectedTab" v-bind="$props">
-      <or-tab title="General">
-        <or-tooltip
-          content="General General General"
-        >
-          <p>General</p>
-        </or-tooltip>
-      </or-tab>
-
-      <or-tab title="Templates">
-        <p>Templates</p>
-      </or-tab>
-
-      <or-tab title="Details">
-        <p>Details</p>
-      </or-tab>
-
-      <or-tab title="Annotations">
-        <or-tooltip
-          content="Annotations Annotations Annotations"
-        >
-          <p>Annotations</p>
-        </or-tooltip>
-        <or-icon
-          icon="info"
-        />
-        <or-tooltip
-          content="Some info about the annotation"
-        >
-          <or-icon
-            icon="info"
-          />
-        </or-tooltip>
-      </or-tab>
-    </or-tabs>
-  `,
-});
-
-const TemplateDisabled: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-
-  template: `
-    <or-tabs @selected="onSelectedTab" v-bind="$props">
-      <or-tab title="General">
-        <p>General</p>
-      </or-tab>
-
-      <or-tab title="Templates" is-disabled>
-        <p>Templates</p>
-      </or-tab>
-
-      <or-tab title="Details">
-        <p>Details</p>
-      </or-tab>
-
-      <or-tab title="Annotations" is-disabled>
-        <p>Annotations</p>
-      </or-tab>
-    </or-tabs>
-  `,
-});
-
-
-const TemplateDynamicDisabled: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-  template: `
-    <div>
-      <or-switch v-model="isDisabled" label="Disabled Templates Tab" class="mb-4"/>
-      <or-tabs @selected="onSelectedTab" v-bind="$props">
-        <or-tab title="General">
-          <p>General</p>
-        </or-tab>
-
-        <or-tab title="Templates" :is-disabled="isDisabled">
-          <p>Templates</p>
-        </or-tab>
-
-        <or-tab title="Details">
-          <p>Details</p>
-        </or-tab>
-
-        <or-tab title="Annotations">
-          <p>Annotations</p>
-        </or-tab>
-      </or-tabs>
-    </div>
-  `,
-});
-
-const TemplateDynamicSelected: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-
-  template: `
-    <div>
-      <or-switch v-model="isSelected" label="Select Templates Tab" class="mb-4"/>
-
-      <or-tabs @selected="onSelectedTab" v-bind="$props">
-        <or-tab title="General">
-          <p>General</p>
-        </or-tab>
-
-        <or-tab title="Templates" :is-selected="isSelected">
-          <p>Templates</p>
-        </or-tab>
-
-        <or-tab title="Details">
-          <p>Details</p>
-        </or-tab>
-
-        <or-tab title="Annotations" is-disabled>
-          <p>Annotations</p>
-        </or-tab>
-      </or-tabs>
-    </div>
-  `,
-});
-
-export const Default = Template.bind({});
-export const Disabled = TemplateDisabled.bind({});
-export const DynamicDisabled = TemplateDynamicDisabled.bind({});
-export const DynamicSelected = TemplateDynamicSelected.bind({});
-

package/src/components/or-tag/OrTag.stories.ts

@@ -1,87 +0,0 @@
-import Faker from 'faker';
-import { Story } from '@storybook/vue';
-import { action } from '@storybook/addon-actions';
-import OrTag from './OrTag.vue';
-
-export default {
-  title: 'Components/OrTag',
-  component: OrTag,
-  argTypes: {
-    color: {
-      control: {
-        type: 'color',
-      },
-    },
-  },
-};
-
-const Template: Story = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { OrTag },
-  template: '<or-tag v-bind="$props" @delete="onDelete" />',
-  methods: {
-    onDelete: action('delete'),
-  },
-});
-
-const SlotTemplate: Story = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { OrTag },
-  template: `<or-tag v-bind="$props" @delete="onDelete">${args.slotContent}</or-tag>`,
-  methods: {
-    onDelete: action('delete'),
-  },
-});
-
-const ManyTemplate: Story = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { OrTag },
-  template: `
-    <div style="display: flex; flex-direction: row; gap: 4px; flex-flow: wrap">
-      <or-tag v-for="props of $props.props" v-bind="props" @delete="onDelete" />
-    </div>
-  `,
-  methods: {
-    onDelete: action('delete'),
-  },
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  content: Faker.commerce.productName(),
-};
-
-export const DifferentColors = ManyTemplate.bind({});
-DifferentColors.args = {
-  props: ['#178ae7', '#da1e28', '#f0d10d', '#4ec00f', '#91969d', '#1e232b', '#abc'].map(color => ({
-    color,
-    content: Faker.commerce.productName(),
-  })),
-};
-
-export const Delete = Template.bind({});
-Delete.args = {
-  content: Faker.commerce.productName(),
-  canDelete: true,
-};
-
-export const Slot = SlotTemplate.bind({});
-Slot.args = {
-  slotContent: `<b>${Faker.commerce.productMaterial()}</b> <i>${Faker.commerce.product()}</i>`,
-  canDelete: true,
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  isDisabled: true,
-  content: Faker.commerce.productName(),
-};
-
-export const VeryLongContent = Template.bind({});
-VeryLongContent.args = {
-  content: Faker.random.alpha({
-    count: 250,
-    upcase: true,
-  }),
-  canDelete: true,
-};

package/src/components/or-teleport/OrTeleport.stories.ts

@@ -1,54 +0,0 @@
-import { OrTeleport } from './index';
-import { ArgTypes, Story } from '@storybook/vue';
-import { OrNotification } from '../or-notification';
-
-export default {
-  title: 'Components/OrTeleport',
-
-  component: OrTeleport,
-
-  argTypes: {
-    isDisabled: {
-      control: 'boolean',
-      defaultValue: false,
-    },
-    to: {
-      control: 'text',
-      defaultValue: 'body',
-    },
-  },
-};
-
-const defaultTemplate = `
-  <div>
-    <or-teleport v-bind="$props">
-      <or-notification
-        :content="textContent"
-        size="inline"
-        style="position: absolute; left: 20px; top: 20px;"
-      />
-    </or-teleport>
-  </div>
-`;
-const defaultMixin = (argTypes: ArgTypes) => ({
-  props: Object.keys(argTypes),
-
-  components: {
-    OrTeleport,
-    OrNotification,
-  },
-
-  computed: {
-    textContent(this: InstanceType<typeof OrTeleport>): string {
-      return `Teleport to '${this.to}' isDisabled: ${this.isDisabled}`;
-    },
-  },
-});
-
-const Template: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-  template: defaultTemplate,
-});
-
-export const Default = Template.bind({});
-Default.args = {};