mediacube-ui-v2 0.0.5 → 0.0.7

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

@@ -1,52 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import McDraggable from './McDraggable.vue'
-import McSvgIcon from '@/components/elements/McSvgIcon/McSvgIcon.vue'
-import { Colors } from '@/types/styles/Colors'
-
-const meta = {
-    title: 'McDraggable',
-    component: McDraggable,
-    tags: ['autodocs'],
-    argTypes: {
-        variation: { control: 'select', options: Object.keys(Colors) },
-        initial: { control: 'object' },
-        cardId: { control: 'text' },
-        savePosition: { control: 'boolean' },
-        storageType: { control: 'select', options: ['session', 'local'] }
-    },
-    args: {
-        variation: 'black',
-        initial: { x: 10, y: 10 },
-        savePosition: false,
-        storageType: 'session',
-    },
-    parameters: {
-        componentSubtitle: 'Status: Ready',
-        design: {
-            type: 'figma',
-            url: 'https://www.figma.com/file/LXNkU1vlAYmydEiC0l0gDa/MC-Design-System?node-id=1%3A2',
-        },
-    },
-} satisfies Meta<typeof McDraggable>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-    render() {
-        return {
-            components: { McDraggable, McSvgIcon },
-            template: `
-              <div>
-                  <a href="https://mcpay.io/auth/sign-up" target="_blank">https://mcpay.io/auth/sign-up</a>
-                  <mc-draggable :initial="{ x: 10, y: 10 }" variation="black">
-                      <template #left>
-                          <mc-svg-icon name="mc_pay_app" size="500" />
-                      </template>
-                      <template #top>Drag me and know how you boost you revenues</template>
-                      <template #bottom>Just drag me to right or bottom</template>
-                  </mc-draggable>
-              </div>
-            `
-        }
-    },
-}

package/src/components/elements/McDraggable/McDraggable.vue

@@ -1,211 +0,0 @@
-<script setup lang="ts">
-import { useDebounceFn, useDraggable, useLocalStorage, useSessionStorage } from '@vueuse/core'
-import { computed, type PropType, ref, watch } from 'vue'
-import { Colors, type ColorTypes } from '@/types/styles/Colors'
-import McPreview from '@/components/patterns/McPreview/McPreview.vue'
-import type { ColorsUnion } from '@/types/styles/Colors'
-
-interface DraggableInitPayload {
-  x: number
-  y: number
-}
-
-type CardIdType = string | number | undefined
-type StorageTypeUnion = 'local' | 'session'
-
-const localStorage = useLocalStorage('McDraggable', {})
-const sessionStorage = useSessionStorage('McDraggable', {})
-const draggable_el = ref<HTMLElement | null>(null)
-const debounce = useDebounceFn((method) => {
-  method()
-}, 100)
-
-const props = defineProps({
-  /**
-   * Дизайн:
-   * purple, red, orange и т.д.
-   */
-  variation: {
-    type: String as () => ColorTypes,
-    default: 'purple' as ColorTypes
-  },
-  initial: {
-    type: Object as PropType<DraggableInitPayload>,
-    default: () =>
-      ({
-        x: 0,
-        y: 0
-      }) as DraggableInitPayload
-  },
-  /**
-   * Key for save position to storage (**required**, if savePosition = true)
-   * */
-  cardId: {
-    type: [String, Number] as PropType<CardIdType>
-  },
-  savePosition: {
-    type: Boolean,
-    default: false
-  },
-  storageType: {
-    type: String as PropType<StorageTypeUnion>,
-    default: 'session'
-  }
-})
-
-const uniqueId = computed((): CardIdType => {
-  return props.cardId
-})
-
-const isSessionStorageType = computed((): boolean => {
-  return props.storageType === ('session' as StorageTypeUnion)
-})
-const isLocalStorageType = computed((): boolean => {
-  return props.storageType === ('local' as StorageTypeUnion)
-})
-const initialPositions = computed((): DraggableInitPayload => {
-  let local_x = props.initial.x || 0
-  let local_y = props.initial.y || 0
-
-  if (props.savePosition && !uniqueId.value)
-    console.warn('cardId prop required, if savePosition = true')
-
-  if (!uniqueId.value || !props.savePosition) return { x: local_x, y: local_y }
-  if (isSessionStorageType.value) {
-    //@ts-ignore
-    const { x, y } = sessionStorage.value[uniqueId.value] || ({} as DraggableInitPayload)
-    local_x = x
-    local_y = y
-  }
-  if (isLocalStorageType.value) {
-    //@ts-ignore
-    const { x, y } = localStorage.value[uniqueId.value] || ({} as DraggableInitPayload)
-    local_x = x
-    local_y = y
-  }
-  return { x: local_x || 0, y: local_y || 0 } as DraggableInitPayload
-})
-
-const { x, y, style } = useDraggable(draggable_el, {
-  initialValue: { x: initialPositions.value.x, y: initialPositions.value.y } as DraggableInitPayload
-})
-
-const styles = computed((): { [key: string]: ColorsUnion | string } => {
-  return {
-    '--mc-draggable-color': Colors[props.variation]
-  }
-})
-
-const handleSavePosition = (): void => {
-  if (!uniqueId.value) return
-  if (isSessionStorageType.value) {
-    sessionStorage.value = {
-      ...sessionStorage.value,
-      [uniqueId.value]: { x: x.value, y: y.value }
-    }
-  }
-  if (isLocalStorageType.value) {
-    localStorage.value = {
-      ...localStorage.value,
-      [uniqueId.value]: { x: x.value, y: y.value }
-    }
-  }
-}
-
-watch(
-  () => style.value,
-  () => {
-    if (!props.savePosition) return
-    debounce(handleSavePosition)
-  }
-)
-</script>
-
-<template>
-  <div ref="draggable_el" class="mc-draggable" :style="style" style="position: fixed">
-    <div class="mc-draggable__inner" :style="styles">
-      <mc-preview>
-        <template #left>
-          <slot name="left" />
-        </template>
-        <template #top>
-          <slot name="top" />
-        </template>
-        <template #bottom>
-          <slot name="bottom" />
-        </template>
-        <template #right>
-          <slot name="right" />
-        </template>
-      </mc-preview>
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-@use '../../../assets/tokens/colors' as *;
-@use '../../../assets/tokens/spacings' as *;
-@use '../../../assets/tokens/media-queries' as *;
-@use '../../../assets/tokens/sizes' as *;
-@use '../../../assets/tokens/border-radius' as *;
-@use '../../../assets/tokens/font-families' as *;
-.mc-draggable {
-  cursor: move;
-  font-family: $font-family-main;
-  &__inner {
-    --mc-draggable-color: $color-purple;
-
-    padding: $space-100 $space-150 $space-100 $space-200;
-    min-height: $size-700;
-    display: flex;
-    align-items: center;
-    position: relative;
-    color: white;
-    user-select: none;
-    &:before {
-      content: '';
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      background-color: var(--mc-draggable-color);
-      border-radius: $radius-200;
-    }
-
-    .mc-preview {
-      width: 100%;
-      z-index: 1;
-      &__top {
-        margin-bottom: $space-50;
-      }
-      &__left {
-        display: flex;
-        align-items: center;
-        margin-inline-end: $size-150;
-      }
-      &__right {
-        display: flex;
-        align-items: center;
-        margin-inline-start: auto;
-        padding-inline-start: $space-100;
-      }
-    }
-
-    @media #{$media-query-m-down} {
-      .mc-preview {
-        flex-wrap: wrap;
-
-        &__center {
-          flex: 1;
-        }
-        &__right {
-          width: 100%;
-          padding-top: $space-100;
-          padding-inline-start: $size-400 - 2;
-        }
-      }
-    }
-  }
-}
-</style>

package/src/components/elements/McFieldCheckbox/McFieldCheckbox.vue

@@ -1,329 +0,0 @@
-<script setup lang="ts">
-import McTitle from '@/components/elements/McTitle/McTitle.vue'
-import McSvgIcon from '@/components/elements/McSvgIcon/McSvgIcon.vue'
-import { useFieldErrors } from '@/composables/useFieldErrors'
-import { computed, type PropType, useSlots } from 'vue'
-import { Sizes, type SizeTypes } from '@/types/styles/Sizes'
-import { Directions } from '@/enums/ui/Directions'
-import type { SizesUnion } from '@/types/styles/Sizes'
-import { TitleVariations, Weights } from '@/enums'
-
-const emit = defineEmits(['update:modelValue'])
-const slots = useSlots()
-const props = defineProps({
-  //@ts-ignore
-  modelValue: {
-    type: [Boolean, String, Number, Array as PropType<string[] | number[]>],
-    validator(value: unknown, props: any): boolean {
-      return props.multiple ? Array.isArray(value) : true
-    }
-  },
-  /**
-   *  Name
-   *
-   */
-  name: {
-    type: String,
-    default: null
-  },
-  /**
-   *  Выбранное значение
-   *
-   */
-  checkedValue: {
-    type: [String, Boolean, Number],
-    default: true
-  },
-  /**
-   *  Невыбранное значение
-   *
-   */
-  uncheckedValue: {
-    type: [String, Boolean, Number],
-    default: false
-  },
-
-  /**
-   *  Ошибки
-   *
-   */
-  errors: {
-    type: Array as PropType<string[]>,
-    default: null
-  },
-
-  /**
-   *  Вспомогательный текст под инпутом:
-   *
-   */
-  helpText: {
-    type: String,
-    default: null
-  },
-
-  /**
-   *  Подпись чекбокса:
-   *
-   */
-  mainText: {
-    type: String,
-    default: null
-  },
-
-  /**
-   *  Заголовок поля:
-   *
-   */
-  title: {
-    type: String,
-    default: null
-  },
-
-  /**
-   *  Отключенное состояние
-   *
-   */
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  multiple: {
-    type: Boolean,
-    default: false
-  },
-  checkboxSize: {
-    type: String as () => SizeTypes,
-    default: '250'
-  },
-
-  /**
-   * Атрибут tabindex для главного элемента
-   *
-   */
-  tabindex: {
-    type: [String, Number]
-  },
-  dir: {
-    type: String as () => Directions,
-    default: Directions.Ltr
-  }
-})
-
-const fieldErrors = useFieldErrors(props.errors)
-
-const rtl = computed((): boolean => {
-  return props.dir === Directions.Rtl
-})
-
-const classes = computed((): { [key: string]: boolean } => ({
-  'mc-field-checkbox': true,
-  'mc-field-checkbox--error': props.errors,
-  'mc-field-checkbox--disabled': props.disabled,
-  'mc-field-checkbox--empty': !props.mainText && !slots.default,
-  'mc-field-checkbox--rtl': rtl.value
-}))
-
-const styles = computed((): { [key: string]: SizesUnion | string } => ({
-  '--mc-field-checkbox-size': Sizes[props.checkboxSize as SizeTypes]
-}))
-
-const isChecked = computed((): boolean => {
-  return props.multiple && props.modelValue
-    ? props.modelValue.includes(props.checkedValue)
-    : props.modelValue === props.checkedValue
-})
-
-const inputProps = computed((): object => ({
-  disabled: props.disabled,
-  name: props.name,
-  checked: isChecked.value,
-  tabindex: props.tabindex,
-  type: 'checkbox',
-  class: 'mc-field-checkbox__input'
-}))
-
-const handleChange = (e: Event): void => {
-  fieldErrors.toggleErrorVisible()
-
-  const payload =
-    props.multiple && props.modelValue
-      ? props.modelValue.includes(props.checkedValue)
-        ? props.modelValue.filter((v: boolean) => v !== props.checkedValue)
-        : [...props.modelValue, props.checkedValue]
-      : //@ts-ignore
-        e.target && e.target.checked
-        ? props.checkedValue
-        : props.uncheckedValue
-
-  emit('update:modelValue', payload)
-}
-</script>
-
-<template>
-  <div :dir="props.dir" :class="classes" :style="styles">
-    <div v-if="props.title || $slots.header" class="mc-field-text__header">
-      <!-- @slot Слот заголовка -->
-      <slot name="header">
-        <mc-title :weight="Weights.Medium">{{ props.title }}</mc-title>
-      </slot>
-    </div>
-    <div class="mc-field-checkbox__input-wrap">
-      <label class="mc-field-checkbox__name">
-        <mc-svg-icon
-          class="mc-field-checkbox__icon"
-          :name="isChecked ? 'checkbox--checked' : 'checkbox'"
-          :color="isChecked ? 'purple' : 'gray'"
-          :size="props.checkboxSize"
-        />
-        <input v-bind="inputProps" @change="handleChange" />
-        <span v-if="props.mainText || $slots.default" class="mc-field-checkbox__name-text">
-          <!-- @slot Слот для пользовательской подписи чекбокса -->
-          <slot>
-            <mc-title tag-name="div">{{ props.mainText }}</mc-title>
-          </slot>
-        </span>
-      </label>
-      <div class="mc-field-checkbox__footer">
-        <mc-title
-          v-if="fieldErrors.errorText.value"
-          tag-name="div"
-          color="red"
-          :variation="TitleVariations.Overline"
-          max-width="100%"
-        >
-          {{ fieldErrors.errorText.value }}
-        </mc-title>
-        <br v-if="fieldErrors.errorText.value" />
-        <!-- @slot Слот доп. текста под чекбоксом -->
-        <slot name="footer">
-          <mc-title
-            v-if="props.helpText"
-            tag-name="div"
-            :variation="TitleVariations.Overline"
-            color="gray"
-            max-width="100%"
-          >
-            {{ props.helpText }}
-          </mc-title>
-        </slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-@use '../../../assets/styles/mixins' as *;
-@use '../../../assets/tokens/font-sizes' as *;
-@use '../../../assets/tokens/line-heights' as *;
-@use '../../../assets/tokens/spacings' as *;
-@use '../../../assets/tokens/colors' as *;
-@use '../../../assets/tokens/font-families' as *;
-.mc-field-checkbox {
-  $block-name: &;
-  font-family: $font-family-main;
-  position: relative;
-  display: block;
-  min-width: var(--mc-field-checkbox-size);
-  min-height: var(--mc-field-checkbox-size);
-
-  #{$block-name}__icon {
-    width: var(--mc-field-checkbox-size);
-    height: var(--mc-field-checkbox-size);
-  }
-
-  &__header {
-    @include reset-text-indents();
-    display: block;
-    margin-bottom: $space-100;
-
-    &:empty {
-      display: none;
-    }
-  }
-
-  &__name {
-    @include reset();
-    position: relative;
-    line-height: $line-height-200;
-    font-size: $font-size-200;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    user-select: none;
-  }
-
-  &__icon {
-    z-index: 1;
-    &:hover {
-      color: $color-purple;
-    }
-  }
-
-  &__name-text {
-    display: inline-block;
-    margin-inline-start: $space-100;
-    &:before {
-      @include pseudo(none);
-      @include size(var(--mc-field-checkbox-size));
-      @include position(absolute, 0 null null 0);
-      background-size: 100%;
-    }
-
-    .mc-button {
-      display: inline;
-      white-space: normal;
-      vertical-align: top;
-      margin-inline-start: 1px;
-
-      &__text {
-        white-space: normal;
-        display: inline;
-      }
-    }
-  }
-
-  &__input {
-    display: none;
-  }
-
-  &__footer {
-    padding-inline-start: $space-250;
-    margin-top: $space-50;
-    &:empty {
-      display: none;
-    }
-  }
-
-  &--disabled {
-    #{$block-name} {
-      &__icon {
-        color: $color-outline-gray;
-        &:hover {
-          color: $color-outline-gray;
-        }
-      }
-      &__name-text {
-        &:before {
-          display: block;
-          border-radius: 2px;
-          background-color: $color-hover-gray;
-        }
-      }
-    }
-  }
-
-  &--empty {
-    #{$block-name} {
-      &__footer,
-      &__name {
-        padding: 0;
-        margin: 0;
-      }
-    }
-  }
-
-  &--rtl {
-    direction: rtl;
-  }
-}
-</style>

package/src/components/elements/McFieldCheckbox/McFieldCheckox.stories.ts

@@ -1,97 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import McFieldCheckbox from './McFieldCheckbox.vue'
-import { Sizes } from '@/types/styles/Sizes'
-import { Directions } from '@/enums/ui/Directions'
-
-const meta = {
-  title: 'McFieldCheckbox',
-  component: McFieldCheckbox,
-  tags: ['autodocs'],
-  argTypes: {
-    helpText: { control: 'text' },
-    name: { control: 'text' },
-    checkedValue: { control: 'text' },
-    unCheckedValue: { control: 'text' },
-    mainText: { control: 'text' },
-    title: { control: 'text' },
-    modelValue: { control: 'none' },
-    errors: { control: 'none' },
-    disabled: { control: 'boolean' },
-    multiple: { control: 'boolean' },
-    tabindex: { control: 'number' },
-    checkboxSize: { control: 'select', options: Object.keys(Sizes) },
-    dir: { control: 'select', options: Object.values(Directions) }
-  },
-  args: {
-    name: 'McCheckbox name',
-    helpText: 'Help text',
-    mainText: 'McFieldCheckbox',
-    checkedValue: 'true',
-    uncheckedValue: false,
-    title: 'McFieldCheckbox title',
-    disabled: false,
-    multiple: false,
-    tabindex: 0,
-    dir: Directions.Ltr
-  },
-  parameters: {
-    componentSubtitle: 'Status: Ready',
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/LXNkU1vlAYmydEiC0l0gDa/MC-Design-System?node-id=1%3A2'
-    }
-  }
-} satisfies Meta<typeof McFieldCheckbox>
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {}
-}
-
-export const DirectionRtl: Story = {
-  args: {
-    dir: 'rtl',
-    mainText: 'Checkbox rtl orientation'
-  }
-}
-export const CustomCheckedValue: Story = {
-  render() {
-    return {
-      components: { McFieldCheckbox },
-      data() {
-        return {
-          v: null,
-          checkedValue: 'McCheckbox'
-        }
-      },
-      template: `
-                checkedValue - {{ checkedValue }}
-                <br />
-                <br />
-                <mc-field-checkbox v-model="v" :checked-value="checkedValue">McFieldCheckbox</mc-field-checkbox>
-                <br />
-                Output: {{ v }}
-            `
-    }
-  }
-}
-export const MultipleValue: Story = {
-  render() {
-    return {
-      components: { McFieldCheckbox },
-      data() {
-        return {
-          v: []
-        }
-      },
-      template: `
-                <mc-field-checkbox v-model="v" multiple :checked-value="1">McFieldCheckbox {1}</mc-field-checkbox>
-                <mc-field-checkbox v-model="v" multiple checked-value="McCheckbox">McFieldCheckbox {McCheckbox}</mc-field-checkbox>
-                <mc-field-checkbox v-model="v" multiple :checked-value="3">McFieldCheckbox {3}</mc-field-checkbox>
-                <br />
-                Output: {{ v }}
-            `
-    }
-  }
-}