mediacube-ui-v2 0.0.3 → 0.0.5

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

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1,211 @@
+<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

@@ -0,0 +1,329 @@
+<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

@@ -0,0 +1,97 @@
+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 }}
+            `
+    }
+  }
+}