@onereach/ui-components 2.68.0-beta.2016.0 → 2.68.0-beta.2017.0

package/src/components/or-empty-state-v3/OrEmptyState.stories3.ts

@@ -0,0 +1,221 @@
+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: {
+    loader: {
+      control: {
+        type: 'inline-radio',
+        labels: {
+          'linear': "'linear'",
+          'circular': "'circular'",
+        }
+      },
+      options: [false, true, 'linear', 'circular'],
+    },
+    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 LinearLoader = Template.bind({});
+LinearLoader.args = {
+  heading: 'Looking for aliens',
+  text: '27 aliens detected so far.',
+  loader: true,
+  size: EmptyStateSize.L,
+};
+LinearLoader.parameters = {
+  layout: 'fullscreen',
+};
+LinearLoader.decorators = [
+  () => ({
+    template: `
+        <div class="
+          demo-wrapper w-full h-[200px] box-border relative
+          gap-sm p-md bg-surface-variant
+          flex flex-col
+          text-body-2-regular">
+          <div>Note: Use linear loader (values <b>true</b> or <b>'linear'</b>) on pages and inside wide containers.</div>
+          <div class="demo-container grow bg-background dark:bg-background-dark flex flex-col"><story /></div>
+        </div>
+      `
+  })
+];
+
+export const CircularLoader = Template.bind({});
+CircularLoader.args = {
+  heading: 'Looking for aliens',
+  text: '27 aliens detected so far.',
+  loader: 'circular',
+};
+CircularLoader.parameters = {
+  layout: 'fullscreen',
+};
+CircularLoader.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: Use circular loader (value <b>'circular'</b>) in narrow containers and sidebars.</div>
+          <div class="demo-container w-[300px] grow bg-background dark:bg-background-dark flex flex-col"><story /></div>
+        </div>
+      `
+  })
+];
+
+export const MaterialIcon = Template.bind({});
+MaterialIcon.args = {
+  ...Default.args,
+  icon: 'travel_explore',
+};
+
+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>
+  `,
+});
+
+export const Containers = Template.bind({});
+Containers.args = {
+  ...Default.args,
+};
+Containers.parameters = {
+  layout: 'fullscreen',
+};
+Containers.decorators = [
+  () => ({
+    template: `
+      <div class="
+        demo-wrapper w-full min-h-screen box-border relative
+        gap-md p-md bg-surface-variant dark:bg-surface-variant-dark
+        grid grid-cols-3 grid-rows-[1fr_repeat(auto)]
+        text-caption-regular dark:text-secondary-dark dark:text-[12px]">
+        <!--Demo Container 1. Narrow-->
+        <div class="demo-1 demo-container row-span-3 flex flex-col gap-sm">
+          <div>
+            Narrow vertical container; flex flex-col;<br>
+            Background <code>bg-background</code> applied directly to the component
+          </div>
+          <story class="bg-background dark:bg-background-dark" loader="circular"/>
+        </div>
+        <!--Demo Container 2. Fixed-->
+        <div class="demo-2 flex flex-col gap-sm justify-center items-center">
+          <div>
+            Fixed size container; flex flex-col;<br>
+            Background bg-surface-1 applied to the container
+          </div>
+          <div class="demo-container w-[240px] h-[200px] bg-surface-1 dark:bg-surface-1-dark flex flex-col">
+            <story />
+          </div>
+        </div>
+        <!--Demo Container 3. No container-->
+        <div class="demo-3">
+          <div>No container or simple block container; no background </div>
+          <div class="demo-container w-fit"><story /></div>
+        </div>
+        <!--Demo Container 4. Wide not wrap-->
+        <div class="demo-4 col-span-2 flex flex-col gap-sm">
+          <div class="w-full">
+            Wide horizontal <b>no-wrap</b> container; flex flex-row;<br>
+            Background <code>bg-surface-1</code> applied to the container<br>
+            Background <code>bg-surface-4</code> applied to the component
+          </div>
+          <div class="demo-container bg-surface-1 dark:bg-surface-1-dark flex">
+            <div>Left item</div>
+            <story class="bg-surface-4 dark:bg-surface-4-dark" loader="linear"/>
+            <div>Right item</div>
+          </div>
+        </div>
+        <!--Demo Container 5. Wide wrap-->
+        <div class="demo-5 col-span-2 flex flex-col gap-sm">
+          <div class="w-full">
+            Wide horizontal <b>wrap</b> container; flex flex-row flex-wrap;<br>
+            Background <code>bg-surface-1</code> applied to the container<br>
+            Background <code>bg-surface-4</code> applied to the component
+          </div>
+          <div class="demo-container bg-surface-1 dark:bg-surface-1-dark flex flex-wrap">
+            <div>Left item</div>
+            <story class="bg-surface-4 dark:bg-surface-4-dark" loader="linear"/>
+            <div>Right item</div>
+          </div>
+        </div>
+      </div>
+    `
+  })
+];

package/src/components/or-empty-state-v3/OrEmptyState.vue

@@ -0,0 +1,185 @@
+<template>
+  <div :class="rootClasses">
+    <div :class="iconContainerClasses">
+      <OrIcon v-if="icon"
+              :icon="icon"
+              size="inherit"
+              :class="iconClasses" />
+    </div>
+    <img v-if="imageSrc"
+         :src="imageSrc"
+         :class="imageClasses"
+         alt="">
+    <div :class="headingClasses">
+      {{ heading }}
+    </div>
+    <div v-if="loader" :class="loaderClasses">
+      <OrLoader :variant="loaderVariant" />
+    </div>
+    <div v-if="$slots.default" :class="slotClasses">
+      <!-- @slot Additional content can be inserted via default slot. The slot uses the same font as a 'text' prop. -->
+      <slot/>
+    </div>
+    <div :class="textClasses">
+      {{ text }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue-demi';
+import { EmptyStateLoader, EmptyStateSize } from '.';
+import { OrIconV3 as OrIcon, } from '../or-icon-v3';
+import { LoaderVariant, OrLoaderV3 as OrLoader, } from '../or-loader-v3';
+import {
+  EmptyStateContent,
+  EmptyStateContentSizes,
+  EmptyStateHeading,
+  EmptyStateHeadingSizes,
+  EmptyStateIconContainer,
+  EmptyStateIconContainerSizes,
+  EmptyStateIcon,
+  EmptyStateIconSizes,
+  EmptyStateImage,
+  EmptyStateImageSizes,
+  EmptyStateLoaderStyles,
+  EmptyStateRoot,
+  EmptyStateText,
+  EmptyStateTextSizes
+} from './styles';
+
+/**
+ * The component to display when there is no content on a page,
+ * no records found or selected, or while the data is being loaded.
+ * Provides a hint to the user on what to do.
+ * Consists of text message, optional icon and optional loader.
+ */
+export default defineComponent({
+  name: 'OrEmptyState',
+  components: {
+    OrIcon,
+    OrLoader,
+  },
+  props: {
+    /**
+     * Size of the component, affects font and icon size.
+     * Use Large if the component takes all screen space,
+     * and Medium if it is a part of the complex layout.
+     */
+    size: {
+      type: String as PropType<EmptyStateSize>,
+      default: EmptyStateSize.M,
+    },
+    /**
+     * The heading of the empty state block.
+     */
+    heading: {
+      type: String,
+      default: '',
+    },
+    /**
+     * Additional text such as a hint for a user with proposed next steps.
+     */
+    text: {
+      type: String,
+      default: '',
+    },
+    /**
+     * Material icon name to display above the heading.
+     */
+    icon: {
+      type: String,
+      default: undefined,
+    },
+    /**
+     * Path to the image to display above the heading.
+     * Image height is scaled to 48px, width is undefined to preserve aspect ratio.
+     */
+    imageSrc: {
+      type: String,
+      default: undefined,
+    },
+    /**
+     * If provided, then loader is being displayed.
+     * Accepts booleans and OrLoader::variant values. `true` falls back to 'linear'.
+     */
+    loader: {
+      type: [String, Boolean] as PropType<EmptyStateLoader>,
+      default: false,
+    },
+  },
+  computed: {
+    loaderVariant(): LoaderVariant | undefined {
+      if (typeof this.loader === 'string') {
+        return this.loader;
+      } else if (this.loader === true) {
+        return LoaderVariant.Linear;
+      } else {
+        return undefined;
+      }
+    },
+    rootClasses(): string[] {
+      return [
+        'or-empty-state',
+        ...EmptyStateRoot,
+      ];
+    },
+    iconContainerClasses(): string[] {
+      return [
+        'or-empty-state_icon-container',
+        ...EmptyStateIconContainer,
+        ...EmptyStateIconContainerSizes[this.size],
+
+      ];
+    },
+    iconClasses(): string[] {
+      return [
+        'or-empty-state_icon',
+        ...EmptyStateIcon,
+        ...EmptyStateIconSizes[this.size],
+
+      ];
+    },
+    imageClasses(): string[] {
+      return [
+        'or-empty-state_image',
+        ...EmptyStateImage,
+        ...EmptyStateImageSizes[this.size],
+
+      ];
+    },
+    headingClasses(): string[] {
+      return [
+        'or-empty-state_heading',
+        ...EmptyStateHeading,
+        ...EmptyStateHeadingSizes[this.size],
+
+      ];
+    },
+    textClasses(): string[] {
+      return [
+        'or-empty-state_text',
+        ...EmptyStateText,
+        ...EmptyStateTextSizes[this.size],
+
+      ];
+    },
+    slotClasses(): string[] {
+      return [
+        'or-empty-state_content',
+        ...EmptyStateContent,
+        ...EmptyStateContentSizes[this.size],
+      ];
+    },
+    loaderClasses(): string[] {
+      return [
+        'or-empty-state_loader',
+        ...EmptyStateLoaderStyles,
+      ];
+    },
+  },
+});
+</script>
+
+<style scoped>
+</style>

package/src/components/or-empty-state-v3/index.ts

@@ -0,0 +1,3 @@
+export { default as OrEmptyStateV3 } from './OrEmptyState.vue';
+export * from './types';
+export * from './props';

package/src/components/or-empty-state-v3/props.ts

@@ -0,0 +1,4 @@
+export enum EmptyStateSize {
+  L = 'l',
+  M = 'm',
+}

package/src/components/or-empty-state-v3/styles.ts

@@ -0,0 +1,121 @@
+import { EmptyStateSize } from './props';
+
+export const EmptyStateRoot: string[] = [
+  // Layout
+  'grow',
+  'flex',
+  'flex-col',
+  'justify-center',
+  'items-center',
+
+  // Box
+  'w-full',
+
+  // Sizing
+  'gap-sm',
+];
+
+export const EmptyStateIconContainer: string[] = [
+  // Theme
+  'text-on-surface-variant',
+  'dark:text-on-surface-variant-dark',
+];
+
+export const EmptyStateIconContainerSizes: Record<EmptyStateSize, string[]> = {
+  [EmptyStateSize.L]: [
+    // Typography
+    'text-[64px]',
+  ],
+  [EmptyStateSize.M]: [
+    // Typography
+    'text-[48px]',
+  ],
+}
+
+export const EmptyStateIcon: string[] = [
+  // Sizing
+  'mb-sm',
+];
+
+export const EmptyStateIconSizes: Record<EmptyStateSize, string[]> = {
+  [EmptyStateSize.L]: [
+    // Box
+    'w-3xl',
+    'h-3xl',
+  ],
+  [EmptyStateSize.M]: [
+    // Box
+    'w-2xl',
+    'h-2xl',
+  ],
+};
+
+export const EmptyStateImage = EmptyStateIcon;
+
+export const EmptyStateImageSizes: Record<EmptyStateSize, string[]> = {
+  [EmptyStateSize.L]: [
+    // Box
+    'h-3xl',
+  ],
+  [EmptyStateSize.M]: [
+    // Box
+    'h-2xl',
+  ],
+}
+
+export const EmptyStateHeading: string[] = [
+  // Theme
+  'text-on-background',
+  'dark:text-on-background-dark'
+];
+
+export const EmptyStateHeadingSizes: Record<EmptyStateSize, string[]> = {
+  [EmptyStateSize.L]: [
+    // Typography
+    'text-headline-2',
+    'font-headline-2',
+  ],
+  [EmptyStateSize.M]: [
+    // Typography
+    'text-headline-4',
+    'font-headline-4',
+  ],
+}
+
+export const EmptyStateText: string[] = [
+  'text-center',
+
+  // Theme
+  'text-outline',
+  'dark:text-outline-dark',
+];
+
+export const EmptyStateContent = EmptyStateText;
+
+export const EmptyStateTextSizes: Record<EmptyStateSize, string[]> = {
+  [EmptyStateSize.L]: [
+    // Typography
+    'text-body-2-regular',
+    'font-body-2-regular',
+  ],
+  [EmptyStateSize.M]: [
+    // Typography
+    'text-caption-regular',
+    'font-caption-regular',
+  ],
+};
+
+export const EmptyStateContentSizes = EmptyStateTextSizes;
+
+export const EmptyStateLoaderStyles: string[] = [
+  // Layout
+  'flex',
+  'justify-center',
+
+  // Box
+  'w-2/5',
+  'max-w-[432px]',
+
+  // Sizing
+  'my-sm'
+];

package/src/components/or-empty-state-v3/types.ts

@@ -0,0 +1,3 @@
+import { LoaderVariant } from '../or-loader-v3';
+
+export type EmptyStateLoader = boolean | LoaderVariant | undefined;

package/src/components/or-input-box-v3/OrInputBox.vue

@@ -13,7 +13,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
-import { InputBoxVariant } from './props';
+import { InputBoxVariant } from '.';
 import { useClassAttribute } from '../../hooks';
 import { InputBoxSize } from './props';
 import { InputBoxRoot, InputBoxRootSizes, InputBoxRootVariants } from './styles';

package/src/utils/functions/text.ts

@@ -2,7 +2,7 @@ import { RX_ABBREVIATION_FROM_STRING } from '../constants/regex';
 
 export function getAbbreviation(text: string | null, limit?: number): string {
   if (typeof text != 'string' || !text) return '';
-  return ((text.match(RX_ABBREVIATION_FROM_STRING) ?? []) as string[])
-    .reduce((previous: string, next: string) => previous + ((+next === 0 || parseInt(next)) ? parseInt(next) : next[0] || ''), '')
+  return (text.match(RX_ABBREVIATION_FROM_STRING) ?? [])
+    .reduce((previous, next) => previous + ((+next === 0 || parseInt(next)) ? parseInt(next) : next[0] || ''), '')
     .toUpperCase().substring(0, limit);
 }