mediacube-ui-v2 0.0.2 → 0.0.4

package/src/components/elements/McTooltip/McTooltip.stories.ts

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import McTooltip from '@/components/elements/McTooltip/McTooltip.vue'
+import { TooltipPositions, TooltipSizes } from '@/enums/Tooltip'
+import { Colors } from '@/types/styles/Colors'
+
+const meta = {
+  title: 'McTooltip',
+  component: McTooltip,
+  tags: ['autodocs'],
+  argTypes: {
+    placement: { control: 'select', options: Object.values(TooltipPositions) },
+    size: { control: 'select', options: Object.values(TooltipSizes) },
+    color: { control: 'select', options: Object.keys(Colors) },
+    textColor: { control: 'select', options: Object.keys(Colors) },
+    arrowVisible: { control: 'boolean' }
+  },
+  args: {
+    placement: TooltipPositions.Top,
+    size: TooltipSizes.S,
+    color: 'black',
+    textColor: 'white',
+    arrowVisible: true,
+    content: 'Boost your channel growth!',
+    default: 'McPay Advance'
+  },
+  parameters: {
+    componentSubtitle: 'Status: Ready',
+    design: {
+      type: 'figma',
+      url: ''
+    }
+  }
+} satisfies Meta<typeof McTooltip>
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {},
+};

package/src/components/elements/McTooltip/McTooltip.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { Colors, type ColorTypes } from '@/types/styles/Colors'
+import type { TooltipPositionsUnion, TooltipSizesUnion } from '@/types/ITooltip'
+import { useTooltip } from '@/composables/useTooltip'
+import { computed, type PropType } from 'vue'
+import type { ITooltip } from '@/types/ITooltip'
+import { TooltipPositions, TooltipSizes } from '@/enums/Tooltip'
+
+const vTooltip = useTooltip()
+
+const props = defineProps({
+  /**
+   *  Текст подсказки:
+   */
+  content: {
+    type: String as PropType<string>,
+    required: true,
+  },
+  /**
+   *  Расположение:
+   */
+  placement: {
+    type: String as () => TooltipPositionsUnion,
+    default: TooltipPositions.Top,
+  },
+  /**
+   *  Цвет:
+   */
+  color: {
+    type: String as () => ColorTypes,
+    default: Colors.black,
+  },
+  /**
+   *  Цвет текста:
+   */
+  textColor: {
+    type: String as () => ColorTypes,
+    default: Colors.white,
+  },
+  /**
+   * Максимальный размер
+   */
+  size: {
+    type: String as () => TooltipSizesUnion,
+    default: TooltipSizes.S,
+  },
+  /**
+   *  Всключить стрелку
+   */
+  arrowVisible: {
+    type: Boolean as PropType<boolean>,
+    default: true,
+  },
+})
+
+const tooltipProps = computed<ITooltip>((): ITooltip => {
+  return {
+    content: props.content,
+    size: props.size,
+    placement: props.placement,
+    arrow: props.arrowVisible,
+    color: props.color,
+    textColor: props.textColor,
+  } as ITooltip
+})
+</script>
+
+<template>
+  <div v-tooltip="tooltipProps" class="mc-tooltip-target">
+    <!-- @slot Слот для элемента, у которого будет всплывать тултип -->
+    <slot />
+  </div>
+</template>
+
+<style lang="scss">
+@use '../../../assets/styles/tooltip' as *;
+@use '../../../assets/tokens/font-families' as *;
+
+.mc-tooltip-target {
+  $block-name: &;
+  max-width: 100%;
+  width: max-content;
+  font-family: $font-family-main;
+}
+</style>

package/src/components/index.ts

@@ -0,0 +1,136 @@
+/**
+ * elements
+ * */
+import McAvatar from './elements/McAvatar/McAvatar.vue'
+import McBadge from './elements/McBadge/McBadge.vue'
+import McBottomLoader from './elements/McBottomLoader/McBottomLoader.vue'
+import McButton from './elements/McButton/McButton.vue'
+import McChip from './elements/McChip/McChip.vue'
+import McCropper from './elements/McCropper/McCropper.vue'
+import McDatepicker from './elements/McDatepicker/McDatepicker.vue'
+import McDraggable from './elements/McDraggable/McDraggable.vue'
+import McFieldCheckbox from './elements/McFieldCheckbox/McFieldCheckbox.vue'
+import McFieldRadio from './elements/McFieldRadio/McFieldRadio.vue'
+import McFieldRadioGroup from './elements/McFieldRadioGroup/McFieldRadioGroup.vue'
+import McFieldRange from './elements/McFieldRange/McFieldRange.vue'
+import McFieldSelect from './elements/McFieldSelect/McFieldSelect.vue'
+import McFieldText from './elements/McFieldText/McFieldText.vue'
+import McFieldToggle from './elements/McFieldToggle/McFieldToggle.vue'
+import McInfinityLoadingTrigger from './elements/McInfinityLoadingTrigger/McInfinityLoadingTrigger.vue'
+import McNoData from './elements/McNodata/McNoData.vue'
+import McNotification from './elements/McNotification/McNotification.vue'
+import McProgress from './elements/McProgress/McProgress.vue'
+import McSeparator from './elements/McSeparator/McSeparator.vue'
+import McSlideUpDown from './elements/McSlideUpDown/McSlideUpDown.vue'
+import McStack from './elements/McStack/McStack.vue'
+import McSvgIcon from './elements/McSvgIcon/McSvgIcon.vue'
+import McTitle from './elements/McTitle/McTitle.vue'
+import McTooltip from './elements/McTooltip/McTooltip.vue'
+
+/**
+ * patterns
+ * */
+import McAccordion from './patterns/McAccordion/McAccordion.vue'
+import McCell from './patterns/McCell/McCell.vue'
+import McCollapse from './patterns/McCollapse/McCollapse.vue'
+import McDropdown from './patterns/McDropdown/McDropdown.vue'
+import McDropdownPanel from './patterns/McDropdown/McDropdownPanel.vue'
+import McFilter from './patterns/McFilter/McFilter.vue'
+import McFilterChip from './patterns/McFilter/McFilterChip/McFilterChip.vue'
+import McFilterTags from './patterns/McFilter/McFilterTags/McFilterTags.vue'
+import McFilterTypeDate from './patterns/McFilter/McFilterTypeDate/McFilterTypeDate.vue'
+import McFilterTypeRange from './patterns/McFilter/McFilterTypeRange/McFilterTypeRange.vue'
+import McFilterTypeRelation from './patterns/McFilter/McFilterTypeRelation/McFilterTypeRelation.vue'
+import McFilterTypeText from './patterns/McFilter/McFilterTypeText/McFilterTypeText.vue'
+import McGridCol from './patterns/McGridCol/McGridCol.vue'
+import McGridRow from './patterns/McGridRow/McGridRow.vue'
+import McOverlay from './patterns/McOverlay/McOverlay.vue'
+import McPreview from './patterns/McPreview/McPreview.vue'
+import McSideBar from './patterns/McSideBar/McSideBar.vue'
+import McSideBarBottom from './patterns/McSideBar/McSideBarBottom/McSideBarBottom.vue'
+import McSideBarButton from './patterns/McSideBar/McSideBarButton/McSideBarButton.vue'
+import McSideBarCenter from './patterns/McSideBar/McSideBarCenter/McSideBarCenter.vue'
+import McSideBarTop from './patterns/McSideBar/McSideBarTop/McSideBarTop.vue'
+import McTab from './patterns/McTab/McTab.vue'
+import McTabs from './patterns/McTabs/McTabs.vue'
+import McWrapScroll from './patterns/McWrapScroll/McWrapScroll.vue'
+
+/**
+ * templates
+ * */
+import McDrawer from './templates/McDrawer/McDrawer.vue'
+import McDrawerContainer from './templates/McDrawer/McDrawerContainer.vue'
+import McDrawerContentTemplate from './templates/McDrawer/McDrawerContentTemplate/McDrawerContentTemplate.vue'
+import McModalContainer from './templates/McModal/McModalContainer.vue'
+import McModal from './templates/McModal/McModal.vue'
+import McTable from './templates/McTable/McTable/McTable.vue'
+import McTableCardHeader from './templates/McTable/McTableCard/McTableCardHeader/McTableCardHeader.vue'
+import McTableCard from './templates/McTable/McTableCard/McTableCard.vue'
+import McTableSkeletonLoading from './templates/McTable/McTableSkeletonLoading/McTableSkeletonLoading.vue'
+import McTableSort from './templates/McTable/McTableSort/McTableSort.vue'
+import McTopBar from './templates/McTopBar/McTopBar.vue'
+import McVirtualScroll from './templates/McVirtualScroll/McVirtualScroll.vue'
+
+export {
+  McAvatar,
+  McBadge,
+  McBottomLoader,
+  McButton,
+  McChip,
+  McCropper,
+  McDatepicker,
+  McDraggable,
+  McFieldCheckbox,
+  McFieldRadio,
+  McFieldRadioGroup,
+  McFieldRange,
+  McFieldSelect,
+  McFieldText,
+  McFieldToggle,
+  McInfinityLoadingTrigger,
+  McNoData,
+  McNotification,
+  McProgress,
+  McSeparator,
+  McSlideUpDown,
+  McStack,
+  McSvgIcon,
+  McTitle,
+  McTooltip,
+  McAccordion,
+  McCell,
+  McCollapse,
+  McDropdown,
+  McDropdownPanel,
+  McFilter,
+  McFilterChip,
+  McFilterTags,
+  McFilterTypeDate,
+  McFilterTypeRange,
+  McFilterTypeRelation,
+  McFilterTypeText,
+  McGridCol,
+  McGridRow,
+  McOverlay,
+  McPreview,
+  McSideBar,
+  McSideBarBottom,
+  McSideBarButton,
+  McSideBarCenter,
+  McSideBarTop,
+  McTab,
+  McTabs,
+  McWrapScroll,
+  McDrawer,
+  McDrawerContainer,
+  McDrawerContentTemplate,
+  McModalContainer,
+  McModal,
+  McTable,
+  McTableCardHeader,
+  McTableCard,
+  McTableSkeletonLoading,
+  McTableSort,
+  McTopBar,
+  McVirtualScroll
+}

package/src/components/patterns/McAccordion/McAccordion.stories.ts

@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import McAccordion from './McAccordion.vue'
+import McCollapse from '@/components/patterns/McCollapse/McCollapse.vue'
+import McButton from '@/components/elements/McButton/McButton.vue'
+
+const meta = {
+    title: 'McAccordion',
+    component: McAccordion,
+    tags: ['autodocs'],
+    argTypes: {
+        defaultOpenIndex: { control: 'number' },
+        isSingleOpen: { control: 'boolean' },
+    },
+    args: {
+        isSingleOpen: true,
+        defaultOpenIndex: 0,
+    },
+    parameters: {
+        componentSubtitle: 'Status: Ready',
+        design: {
+            type: 'figma',
+            url: '',
+        },
+    },
+} satisfies Meta<typeof McAccordion>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render() {
+        return {
+            components: { McAccordion, McCollapse, McButton },
+            data() {
+                return {
+                    content: ''
+                }
+            },
+            template: `
+                <mc-accordion :default-open-index="0">
+                    <h1>License agreement</h1>
+                    <mc-collapse class="mb-100">
+                        <template #activator>
+                            <mc-button variation="dark-green">1  INTERPRETATION</mc-button>
+                        </template>
+                        <template #body>
+                            <p>
+                                In this Agreement, unless the context otherwise requires, the following words and expressions shall have the following meanings:
+                                1.1. MC Pay is a mobile app and/or service located at:
+                                <a href="https://mcpay.io/" target="_blank">https://mcpay.io/</a>
+                            </p>
+                        </template>
+                    </mc-collapse>
+                    <mc-collapse class="mb-100">
+                        <template #activator>
+                            <mc-button variation="pinkish">2. LICENSE</mc-button>
+                        </template>
+                        <template #body>
+                            <p>
+                                2.1. The User grants MEDIACUBE the rights to use the Content under the terms of an exclusive license for the entire duration of this Agreement in the territory of countries around the world.
+                                2.2. The rights under the Agreement are granted for use exclusively on the YouTube platform (Platform).
+                                2.3. MEDIACUBE has the right to grant the rights to the Content by sublicense Google Inc. and its affiliates.
+                                2.4. MEDIACUBE pays the User a license fee in accordance with the Agreement.
+                                2.5. MEDIACUBE, in accordance with the rules of the Platform, has the right to use the
+                            </p>
+                        </template>
+                    </mc-collapse>
+                    <p>Some static text</p>
+                    <mc-collapse>
+                        <template #activator>
+                            <mc-button>3. GUARANTEES</mc-button>
+                        </template>
+                        <template #body>
+                           <p>
+                               3.1. The User guarantees that he really has copyright and related rights to the Content, and that the rights transferred in accordance with clause 2 of this Agreement are free from claims of third parties.
+                               3.2. MEDIACUBE guarantees that the rights transferred to it in accordance with clause 2 will be used only within the framework of this Agreement.
+                               3.3. MEDIACUBE guarantees that when using the Content, its distortions or other actions capable of harming the User will not be allowed.
+                               3.4. The Parties acknowledge that they enter into this Agreement relying on the unconditional validity and truthfulness of the guarantees given in this clause.
+                           </p>
+                        </template>
+                    </mc-collapse>
+                    <mc-collapse is-disabled>
+                        <template #activator>
+                            <mc-button disabled>4. RIGHTS AND OBLIGATIONS</mc-button>
+                        </template>
+                        <template #body>
+                           <p>
+                               4.1. MEDIACUBE
+                               4.1.1. the right to make changes to the terms of the Agreement unilaterally and post a new version of the Agreement in the Personal Account. The User undertakes to monitor such changes independently.
+                               4.1.2. it is not entitled to make changes to clauses 5.5, 5.6 and 8.1 of the Agreement without the consent of the User.
+                               4.1.3. has the right to terminate the Agreement unilaterally by notifying the User. The date of termination will be the date of receipt of the notification.
+                               4.1.4. is obliged to provide technical and informational support of the User.
+                           </p>
+                        </template>
+                    </mc-collapse>
+                </mc-accordion>
+            `
+        }
+    },
+};

package/src/components/patterns/McAccordion/McAccordion.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { type PropType, provide, ref } from 'vue'
+import type { ICollapse, ICollapseEmitPayload } from '@/types/ICollapse'
+import { useDebounceFn } from '@vueuse/core'
+
+/**
+ * Работает с дочерними mc-collapse
+ */
+
+const debounceFn = useDebounceFn((method) => {
+  method()
+}, 50)
+
+const props = defineProps({
+  isSingleOpen: {
+    type: Boolean as PropType<boolean>,
+    default: true
+  },
+  defaultOpenIndex: {
+    type: Number as PropType<number>
+  }
+})
+const collapses = ref<ICollapse[]>([])
+
+const recalculateCollapses = ({ value, component }: ICollapseEmitPayload) => {
+  if (!value) return
+
+  collapses.value.forEach(collapse => {
+    if (collapse.id !== component.id) {
+      collapse.close()
+    }
+  })
+}
+
+const handleTrigger = (event: string, { value, component }: ICollapseEmitPayload): void => {
+  if (props.isSingleOpen) recalculateCollapses({ value, component })
+}
+
+const selfRegisterCollapseMethod = (payload: ICollapse): void => {
+  collapses.value.push(payload)
+  const openIndex = props.defaultOpenIndex
+  debounceFn(() => {
+    if ((openIndex || openIndex === 0) && !!collapses.value[openIndex]) {
+      collapses.value[openIndex].open()
+    }
+  })
+}
+provide('selfRegisterCollapseMethod', selfRegisterCollapseMethod)
+provide('accordionTriggerMethod', handleTrigger)
+</script>
+
+<template>
+  <div class="mc-accordion">
+    <!-- @slot Слот для дочерних mc-collapse -->
+    <slot />
+  </div>
+</template>
+
+<style lang="scss">
+@use '../../../assets/tokens/font-families' as *;
+.mc-accordion {
+  $block-name: &;
+  font-family: $font-family-main;
+}
+</style>

package/src/components/patterns/McCell/McCell.stories.ts

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import McCell from './McCell.vue'
+import { CellSizes } from '@/enums/Cell'
+
+const meta = {
+    title: 'McCell',
+    component: McCell,
+    tags: ['autodocs'],
+    argTypes: {
+        title: { control: 'text' },
+        size: { control: 'select', options: Object.values(CellSizes) },
+        uppercase: { control: 'boolean' },
+        ellipsis: { control: 'boolean' },
+    },
+    args: {
+        title: 'McCellTitle',
+        default: 'Cell content',
+        size: CellSizes.M,
+        ellipsis: true,
+        uppercase: true,
+    },
+    parameters: {
+        componentSubtitle: 'Status: Ready',
+        design: {
+            type: 'figma',
+            url: '',
+        },
+    },
+} satisfies Meta<typeof McCell>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+    }
+};

package/src/components/patterns/McCell/McCell.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import McTitle from '../../elements/McTitle/McTitle.vue'
+import { computed, type PropType } from 'vue'
+import { CellSizes } from '@/enums/Cell'
+import type { CellSizesUnion } from '@/types/ICell'
+import { TitleVariations } from '@/enums/Title'
+const props = defineProps({
+  /**
+   * Заголовок
+   */
+  title: {
+    type: String as PropType<string>,
+    default: '',
+  },
+  /**
+   * Размеры отступов: 's, m, l'
+   */
+  size: {
+    type: String as () => CellSizesUnion,
+    default: CellSizes.M,
+  },
+  /**
+   * Заглавные буквы заголовка
+   */
+  uppercase: {
+    type: Boolean as PropType<boolean>,
+    default: true,
+  },
+  /**
+   * Три точки
+   */
+  ellipsis: {
+    type: Boolean as PropType<boolean>,
+    default: true,
+  }
+})
+
+const classes = computed((): { [key: string]: boolean } => {
+  return {
+    [`mc-cell--size-${props.size}`]: !!props.size
+  }
+})
+</script>
+
+<template>
+  <section class="mc-cell" :class="classes">
+    <div class="mc-cell__title">
+      <!-- @slot Слот заголовка -->
+      <slot name="title">
+        <mc-title :variation="TitleVariations.Overline" :uppercase="props.uppercase" :ellipsis="props.ellipsis">
+          {{ props.title }}
+        </mc-title>
+      </slot>
+    </div>
+    <div class="mc-cell__content">
+      <!-- @slot Слот контента -->
+      <slot />
+    </div>
+  </section>
+</template>
+
+<style lang="scss">
+@use '../../../assets/styles/mixins' as *;
+@use '../../../assets/tokens/spacings' as *;
+@use '../../../assets/tokens/font-families' as *;
+.mc-cell {
+  $block-name: &;
+  font-family: $font-family-main;
+
+  &--size {
+    &-s {
+      #{$block-name}__content {
+        margin-top: 0;
+      }
+    }
+
+    &-m {
+      #{$block-name}__content {
+        margin-top: $space-50;
+      }
+    }
+
+    &-l {
+      #{$block-name}__content {
+        margin-top: $space-100;
+      }
+    }
+  }
+
+  &__content {
+    display: inline-flex;
+    flex-direction: column;
+    width: 100%;
+  }
+}
+</style>

package/src/components/patterns/McCollapse/McCollapse.stories.ts

@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import McCollapse from './McCollapse.vue'
+import McButton from '@/components/elements/McButton/McButton.vue'
+import McSvgIcon from '@/components/elements/McSvgIcon/McSvgIcon.vue'
+
+const meta = {
+    title: 'McCollapse',
+    component: McCollapse,
+    tags: ['autodocs'],
+    argTypes: {},
+    args: {},
+    parameters: {
+        componentSubtitle: 'Status: Ready',
+        design: {
+            type: 'figma',
+            url: '',
+        },
+    },
+} satisfies Meta<typeof McCollapse>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render() {
+        return {
+            components: { McCollapse, McButton, McSvgIcon },
+            data() {
+                return {
+                    content: 'Способы выплаты\n' +
+                      '\n' +
+                      '\n' +
+                      'Здесь собраны все платежные методы, с помощью которых можно вывести деньги из MC Pay.\n' +
+                      'Банковский перевод\n' +
+                      '\n' +
+                      '\n' +
+                      'На счет в USD\n' +
+                      'Электронный банковский перевод на счет в долларах.\n' +
+                      '\n' +
+                      '\n' +
+                      '\n' +
+                      'Минимальная сумма вывода: 50.00 USD;\n' +
+                      '\n' +
+                      'Комиссия:\n' +
+                      'При выводе до 500 $: 5%\n' +
+                      '\n' +
+                      'При выводе от 500 $: 3% + 25 $\n' +
+                      '\n' +
+                      'При выводе от 1 000 $: 1% + 40 $\n' +
+                      '\n' +
+                      '\n' +
+                      '\n' +
+                      '\n' +
+                      '\n' +
+                      '\n' +
+                      'На счет в местной валюте\n' +
+                      'Электронный банковский перевод на счет в локальной валюте.\n' +
+                      '\n' +
+                      '\n' +
+                      '\n' +
+                      'Минимальная сумма вывода: 15.00 USD;\n' +
+                      '\n' +
+                      'Максимальная сумма вывода: 1 000 000.00 USD;\n' +
+                      '\n' +
+                      'Комиссия:\n' +
+                      'Стандартная комиссия – 5 $\n' +
+                      '\n' +
+                      'Комиссия при выводе на счета вьетнамских банков – 8 $'
+                }
+            },
+            methods: {
+                handleOpenStart(e) {
+                    console.log('handleOpenStart', e)
+                },
+                handleCloseStart(e) {
+                    console.log('handleCloseStart', e)
+                },
+                handleOpenEnd(e) {
+                    console.log('handleOpenEnd', e)
+                },
+                handleCloseEnd(e) {
+                    console.log('handleCloseEnd', e)
+                },
+            },
+            template: `
+            <mc-collapse 
+                @collapse-open-start="handleOpenStart"
+                @collapse-close-start="handleCloseStart"
+                @collapse-open-end="handleOpenEnd"
+                @collapse-close-end="handleCloseEnd"
+            >
+                <template #activator>
+                    <mc-button>Способы выплаты</mc-button>
+                </template>
+                <template #body>
+                    <p>{{content}}</p>
+                </template>
+            </mc-collapse>`
+        }
+    },
+};