@onereach/ui-components 2.58.1 → 2.59.0

package/src/components/or-skeleton-v3/OrSkeletonCircle.stories3.ts

@@ -0,0 +1,59 @@
+import { Meta, StoryFn } from '@storybook/vue3';
+import OrSkeletonCircleDocs from './OrSkeletonCircle.docs.mdx';
+import OrSkeletonCircle from './OrSkeletonCircle.vue';
+
+export default {
+  title: 'Components/Skeleton/Circle',
+  component: OrSkeletonCircle,
+
+  argTypes: {
+    // Props
+    animated: {
+      control: { type: 'boolean' },
+    },
+
+    size: {
+      control: { type: 'text' },
+    },
+  },
+
+  parameters: {
+    layout: 'centered',
+
+    docs: {
+      page: OrSkeletonCircleDocs,
+    },
+
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=586%3A2974',
+    },
+  },
+} as Meta<typeof OrSkeletonCircle>;
+
+const Template: StoryFn<typeof OrSkeletonCircle> = (args) => ({
+  components: {
+    OrSkeletonCircle,
+  },
+
+  setup() {
+    return { args };
+  },
+
+  template: '<OrSkeletonCircle v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const NotAnimated = Template.bind({});
+NotAnimated.args = {
+  ...Default.args,
+  animated: false,
+};
+
+export const WithSize = Template.bind({});
+WithSize.args = {
+  ...Default.args,
+  size: 64,
+};

package/src/components/or-skeleton-v3/OrSkeletonCircle.vue

@@ -0,0 +1,74 @@
+<template>
+  <div
+    ref="root"
+    v-bind="$attrs"
+    :class="rootStyles"
+    :style="rootStyle"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue-demi';
+import _ from 'lodash';
+import { pxToRem } from '../../utils/functions/px-to-rem';
+import { useClassAttribute } from '../../hooks';
+import { SkeletonAnimated, SkeletonCircle, SkeletonRoot } from './styles';
+
+export default defineComponent({
+  name: 'OrSkeletonCircle',
+
+  inheritAttrs: false,
+
+  props: {
+    animated: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    size: {
+      type: [Number, String],
+      required: false,
+      default: 40,
+    },
+  },
+
+  expose: [
+    'root',
+  ],
+
+  setup(props) {
+    // Refs
+    const root = ref<HTMLElement>();
+
+    // Styles
+    const classAttribute = useClassAttribute();
+
+    const rootStyles = computed(() => [
+      'or-skeleton',
+      'or-skeleton-circle',
+      ...SkeletonRoot,
+      ...SkeletonCircle,
+      ...(props.animated ? SkeletonAnimated : []),
+      classAttribute.value,
+    ]);
+
+    const rootStyle = computed(() => {
+      const size = props.size ?? 40; // 40px - medium OrAvatar
+      const sizeStyle = _.isNumber(size) ? pxToRem(size) : size;
+
+      return {
+        'width': sizeStyle,
+        'min-width': sizeStyle,
+        'height': sizeStyle,
+        'min-height': sizeStyle,
+      };
+    });
+
+    return {
+      root,
+      rootStyles,
+      rootStyle,
+    };
+  },
+});
+</script>

package/src/components/or-skeleton-v3/OrSkeletonRect.docs.mdx

@@ -0,0 +1,6 @@
+import { DocsPage } from '@storybook/addon-docs';
+
+<DocsPage />
+
+## Migration Guide from V1
+  - property `isAnimated` renamed to `animated` and was set to `true` by default

package/src/components/or-skeleton-v3/OrSkeletonRect.stories3.ts

@@ -0,0 +1,80 @@
+import { Meta, StoryFn } from '@storybook/vue3';
+import OrSkeletonRectDocs from './OrSkeletonRect.docs.mdx';
+import OrSkeletonRect from './OrSkeletonRect.vue';
+
+export default {
+  title: 'Components/Skeleton/Rect',
+  component: OrSkeletonRect,
+
+  argTypes: {
+    // Props
+    animated: {
+      control: { type: 'boolean' },
+    },
+
+    width: {
+      control: { type: 'text' },
+    },
+
+    height: {
+      control: { type: 'text' },
+    },
+  },
+
+  parameters: {
+    layout: 'centered',
+
+    docs: {
+      page: OrSkeletonRectDocs,
+    },
+
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=586%3A2974',
+    },
+  },
+} as Meta<typeof OrSkeletonRect>;
+
+const Template: StoryFn<typeof OrSkeletonRect> = (args) => ({
+  components: {
+    OrSkeletonRect,
+  },
+
+  setup() {
+    return { args };
+  },
+
+  template: `
+    <div style="min-width: 480px">
+      <OrSkeletonRect v-bind="args" />
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const NotAnimated = Template.bind({});
+NotAnimated.args = {
+  ...Default.args,
+  animated: false,
+};
+
+export const WithWidth = Template.bind({});
+WithWidth.args = {
+  ...Default.args,
+  width: 256,
+};
+
+export const WithHeight = Template.bind({});
+WithHeight.args = {
+  ...Default.args,
+  height: 64,
+};
+
+export const WithWidthAndHeight = Template.bind({});
+WithWidthAndHeight.args = {
+  ...Default.args,
+  width: 128,
+  height: 32,
+};

package/src/components/or-skeleton-v3/OrSkeletonRect.vue

@@ -0,0 +1,77 @@
+<template>
+  <div
+    ref="root"
+    v-bind="$attrs"
+    :class="rootStyles"
+    :style="rootStyle"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue-demi';
+import _ from 'lodash';
+import { pxToRem } from '../../utils/functions/px-to-rem';
+import { useClassAttribute } from '../../hooks';
+import { SkeletonAnimated, SkeletonRect, SkeletonRoot } from './styles';
+
+export default defineComponent({
+  name: 'OrSkeletonRect',
+
+  inheritAttrs: false,
+
+  props: {
+    animated: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    width: {
+      type: [Number, String],
+      required: false,
+      default: '100%',
+    },
+    height: {
+      type: [Number, String],
+      required: false,
+      default: 36,
+    },
+  },
+
+  expose: [
+    'root',
+  ],
+
+  setup(props) {
+    // Refs
+    const root = ref<HTMLElement>();
+
+    // Styles
+    const classAttribute = useClassAttribute();
+
+    const rootStyles = computed(() => [
+      'or-skeleton',
+      'or-skeleton-rect',
+      ...SkeletonRoot,
+      ...SkeletonRect,
+      ...(props.animated ? SkeletonAnimated : []),
+      classAttribute.value,
+    ]);
+
+    const rootStyle = computed(() => {
+      const width = props.width ?? '100%';
+      const height = props.height ?? 36; // 36px - default OrInput height
+
+      return {
+        'width': _.isNumber(width) ? pxToRem(width) : width,
+        'height': _.isNumber(height) ? pxToRem(height) : height,
+      };
+    });
+
+    return {
+      root,
+      rootStyles,
+      rootStyle,
+    };
+  },
+});
+</script>

package/src/components/or-skeleton-v3/OrSkeletonText.docs.mdx

@@ -0,0 +1,7 @@
+import { DocsPage } from '@storybook/addon-docs';
+
+<DocsPage />
+
+## Migration Guide from V1
+  - property `size` replaced with `fontSize` and `lineHeight`
+  - property `isAnimated` renamed to `animated` and was set to `true` by default

package/src/components/or-skeleton-v3/OrSkeletonText.stories3.ts

@@ -0,0 +1,88 @@
+import { Meta, StoryFn } from '@storybook/vue3';
+import OrSkeletonTextDocs from './OrSkeletonText.docs.mdx';
+import OrSkeletonText from './OrSkeletonText.vue';
+
+export default {
+  title: 'Components/Skeleton/Text',
+  component: OrSkeletonText,
+
+  argTypes: {
+    // Props
+    animated: {
+      control: { type: 'boolean' },
+    },
+
+    width: {
+      control: { type: 'text' },
+    },
+
+    linesCount: {
+      control: { type: 'number' },
+    },
+
+    fontSize: {
+      control: { type: 'number' },
+    },
+
+    lineHeight: {
+      control: { type: 'number' },
+    },
+  },
+
+  parameters: {
+    layout: 'centered',
+
+    docs: {
+      page: OrSkeletonTextDocs,
+    },
+
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=586%3A2974',
+    },
+  },
+} as Meta<typeof OrSkeletonText>;
+
+const Template: StoryFn<typeof OrSkeletonText> = (args) => ({
+  components: {
+    OrSkeletonText,
+  },
+
+  setup() {
+    return { args };
+  },
+
+  template: `
+    <div style="min-width: 480px">
+      <OrSkeletonText v-bind="args" />
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const NotAnimated = Template.bind({});
+NotAnimated.args = {
+  ...Default.args,
+  animated: false,
+};
+
+export const WithWidth = Template.bind({});
+WithWidth.args = {
+  ...Default.args,
+  width: 256,
+};
+
+export const WithSize = Template.bind({});
+WithSize.args = {
+  ...Default.args,
+  fontSize: 24,
+  lineHeight: 28.64,
+};
+
+export const WithLinesCount = Template.bind({});
+WithLinesCount.args = {
+  ...Default.args,
+  linesCount: 5,
+};

package/src/components/or-skeleton-v3/OrSkeletonText.vue

@@ -0,0 +1,114 @@
+<template>
+  <div
+    ref="root"
+    v-bind="$attrs"
+    :class="containerStyles"
+    :style="containerStyle"
+  >
+    <div
+      v-for="key in lineKeys"
+      :key="key"
+      :class="rowStyles"
+      :style="rowStyle"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue-demi';
+import _ from 'lodash';
+import { pxToRem } from '../../utils/functions/px-to-rem';
+import { useClassAttribute } from '../../hooks';
+import { SkeletonAnimated, SkeletonRoot, SkeletonText, SkeletonTextContainerRoot } from './styles';
+
+export default defineComponent({
+  name: 'OrSkeletonText',
+
+  inheritAttrs: false,
+
+  props: {
+    animated: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    linesCount: {
+      type: Number,
+      required: false,
+      default: 1,
+    },
+    width: {
+      type: [Number, String],
+      required: false,
+      default: '100%',
+    },
+    fontSize: {
+      type: Number,
+      required: false,
+      default: 16,
+    },
+    lineHeight: {
+      type: Number,
+      required: false,
+      default: 24,
+    },
+  },
+
+  expose: [
+    'root',
+  ],
+
+  setup(props) {
+    // Refs
+    const root = ref<HTMLElement>();
+
+    // Styles
+    const classAttribute = useClassAttribute();
+
+    const containerStyles = computed(() => [
+      'or-skeleton-text-root',
+      ...SkeletonTextContainerRoot,
+      classAttribute.value,
+    ]);
+
+    const containerStyle = computed(() => {
+      const width = props.width ?? '100%';
+
+      return {
+        'width': _.isNumber(width) ? pxToRem(width) : width,
+      };
+    });
+
+    const rowStyles = computed(() => [
+      'or-skeleton',
+      'or-skeleton-text',
+      ...SkeletonRoot,
+      ...SkeletonText,
+      ...(props.animated ? SkeletonAnimated : []),
+      classAttribute.value,
+    ]);
+
+    const rowStyle = computed(() => {
+      const height = props.fontSize ?? 16;
+      const margin = ((props.lineHeight ?? 24) - height) / 2;
+
+      return {
+        'height': _.isNumber(height) ? pxToRem(height) : height,
+        'margin': `${_.isNumber(margin) ? pxToRem(margin) : margin} 0`,
+      };
+    });
+
+    // State
+    const lineKeys = computed(() => _.range(props.linesCount));
+
+    return {
+      root,
+      containerStyles,
+      containerStyle,
+      rowStyles,
+      rowStyle,
+      lineKeys,
+    };
+  },
+});
+</script>

package/src/components/or-skeleton-v3/index.ts

@@ -0,0 +1,3 @@
+export { default as OrSkeletonCircleV3 } from './OrSkeletonCircle.vue';
+export { default as OrSkeletonRectV3 } from './OrSkeletonRect.vue';
+export { default as OrSkeletonTextV3 } from './OrSkeletonText.vue';

package/src/components/or-skeleton-v3/styles.ts

@@ -0,0 +1,53 @@
+export const SkeletonRoot: string[] = [
+  // Position
+  'relative',
+
+  // Layout
+  'overflow-hidden',
+
+  // Box
+  'p-0',
+
+  // Borders
+  'border-0',
+
+  // Theme
+  'bg-skeletons-gradient',
+  'dark:bg-skeletons-gradient-dark',
+
+  // Background
+  'bg-repeat',
+];
+
+export const SkeletonTextContainerRoot: string[] = [
+  // Layout
+  'flex',
+  'flex-col',
+
+  // Box
+  'h-auto',
+];
+
+export const SkeletonCircle: string[] = [
+  // Box
+  'rounded-full',
+];
+
+export const SkeletonRect: string[] = [
+  // Box
+  'rounded-md',
+];
+
+export const SkeletonText: string[] = [
+  // Box
+  'w-full',
+  'rounded-md',
+];
+
+export const SkeletonAnimated: string[] = [
+  // Background
+  'bg-[length:200%]',
+
+  // Animation
+  'animate-skeleton-loader',
+];