From 5fa1973c2c45164797ab31346b7f8352cfeedc99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
 =?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Fri, 17 Jan 2025 17:55:23 +0500
Subject: [PATCH] feat: start to do 'Rating'

---
 src/App.vue                                   |  2 +
 src/Playground.vue                            |  4 +-
 src/common/constants/icons.ts                 | 12 +--
 src/common/interfaces/common.ts               |  2 +-
 src/common/interfaces/componentsProp.ts       | 14 ++--
 src/common/interfaces/componentsProps.ts      | 13 ++--
 .../components/Rating/Rating.stories.ts       | 78 +++++++++++++++++++
 src/stories/components/Rating/Rating.vue      | 71 +++++++++++++++++
 .../components/SelectButton/SelectButton.vue  |  4 +-
 .../components/ToggleSwitch/ToggleSwitch.vue  |  4 +-
 src/stories/icons/Mono/StarIcon.vue           | 20 +++++
 11 files changed, 199 insertions(+), 25 deletions(-)
 create mode 100644 src/stories/components/Rating/Rating.stories.ts
 create mode 100644 src/stories/components/Rating/Rating.vue
 create mode 100644 src/stories/icons/Mono/StarIcon.vue

diff --git a/src/App.vue b/src/App.vue
index e48e3c7..6b6fa05 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -109,6 +109,7 @@ import ArrowsVerticalIcon from '@stories/icons/Mono/ArrowsVerticalIcon.vue';
 import TriangleIcon from '@stories/icons/Mono/TriangleIcon.vue';
 import Playground from '@/Playground.vue';
 import ArrowShortDownIcon from '@stories/icons/Mono/ArrowShortDownIcon.vue';
+import StarIcon from '@stories/icons/Mono/StarIcon.vue';
 
 const gentleIcons = {
   Age18Icon,
@@ -212,6 +213,7 @@ const gentleIcons = {
   SaveIcon,
   SearchIcon,
   SettingsIcon,
+  StarIcon,
   SortDownIcon,
   SortHorizontalIcon,
   SortUpIcon,
diff --git a/src/Playground.vue b/src/Playground.vue
index 70a79cd..64a17e4 100644
--- a/src/Playground.vue
+++ b/src/Playground.vue
@@ -216,7 +216,7 @@ const knob = ref(0);
     show-all-lines
     :columns="tableColumns"
     darknessTextColor="500"
-    :data="tableData"
+    v-model="tableData"
     fontSize="36px"
     theme="black"
     stripedRows
@@ -225,7 +225,7 @@ const knob = ref(0);
     show-all-lines
     :columns="tableColumns"
     darknessTextColor="500"
-    :data="tableData"
+    v-model="tableData"
     fontSize="20px"
     theme="black"
     stripedRows
diff --git a/src/common/constants/icons.ts b/src/common/constants/icons.ts
index 41c5605..1b44784 100644
--- a/src/common/constants/icons.ts
+++ b/src/common/constants/icons.ts
@@ -109,6 +109,7 @@ import SortUpIcon from '@stories/icons/Mono/SortUpIcon.vue';
 import SortVerticalIcon from '@stories/icons/Mono/SortVerticalIcon.vue';
 import ArrowShortDownIcon from '@stories/icons/Mono/ArrowShortDownIcon.vue';
 import SearchIcon from '@stories/icons/Mono/SearchIcon.vue';
+import StarIcon from '@stories/icons/Mono/StarIcon.vue';
 
 export const iconsSet: Record<string, Component> = {
   Age18: Age18Icon,
@@ -210,12 +211,13 @@ export const iconsSet: Record<string, Component> = {
   Plus: PlusIcon,
   Pointer: PointerIcon,
   Save: SaveIcon,
-  SearchIcon,
+  Search: SearchIcon,
   Settings: SettingsIcon,
-  SortDownIcon,
-  SortHorizontalIcon,
-  SortUpIcon,
-  SortVerticalIcon,
+  Star: StarIcon,
+  SortDown: SortDownIcon,
+  SortHorizontal: SortHorizontalIcon,
+  SortUp: SortUpIcon,
+  SortVertical: SortVerticalIcon,
   Table: TableIcon,
   Trash: TrashIcon,
   Triangle: TriangleIcon,
diff --git a/src/common/interfaces/common.ts b/src/common/interfaces/common.ts
index cb8b472..cd37236 100644
--- a/src/common/interfaces/common.ts
+++ b/src/common/interfaces/common.ts
@@ -1,6 +1,6 @@
 import type { iconsSet } from '@/common/constants/icons';
 
-export type TIcons = keyof typeof iconsSet;
+export type TIcon = keyof typeof iconsSet;
 
 export type TThemeColor =
   | 'white'
diff --git a/src/common/interfaces/componentsProp.ts b/src/common/interfaces/componentsProp.ts
index 3b7b90a..0b549ea 100644
--- a/src/common/interfaces/componentsProp.ts
+++ b/src/common/interfaces/componentsProp.ts
@@ -1,4 +1,4 @@
-import type { TDarkness, TIcons, TPosition, TTextStyle, TThemeColor } from '@interfaces/common';
+import type { TDarkness, TIcon, TPosition, TTextStyle, TThemeColor } from '@interfaces/common';
 
 export interface ITableColumn {
   name: string;
@@ -34,8 +34,8 @@ export interface ITreeItem {
   color?: TThemeColor;
   textStyle?: TTextStyle;
   isTriangleToColor?: boolean;
-  iconBefore?: TIcons;
-  iconAfter?: TIcons;
+  iconBefore?: TIcon;
+  iconAfter?: TIcon;
   iconColor?: TThemeColor;
   children?: ITreeItem[];
   darknessColor?: TDarkness;
@@ -66,8 +66,8 @@ export interface ISelectOption {
   value: string;
   label?: string;
   group?: string;
-  iconLeft?: TIcons;
-  iconRight?: TIcons;
+  iconLeft?: TIcon;
+  iconRight?: TIcon;
   iconLeftColor?: TThemeColor;
   iconRightColor?: TThemeColor;
   color?: TThemeColor;
@@ -81,8 +81,8 @@ export interface ISelectGroup {
   nameColor?: TThemeColor;
   background?: TThemeColor;
   items?: ISelectOption[];
-  iconLeft?: TIcons;
-  iconRight?: TIcons;
+  iconLeft?: TIcon;
+  iconRight?: TIcon;
   iconLeftColor?: TThemeColor;
   iconRightColor?: TThemeColor;
 }
diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts
index aa35d26..026ef57 100644
--- a/src/common/interfaces/componentsProps.ts
+++ b/src/common/interfaces/componentsProps.ts
@@ -3,7 +3,7 @@ import type {
   TDarkness,
   TDirection,
   TExpandedPosition,
-  TIcons,
+  TIcon,
   TPosition,
   TSize,
   TTextStyle,
@@ -115,7 +115,7 @@ export interface IDrawerProps {
   darknessTextColor?: TDarkness;
   modal?: boolean;
   dismissible?: boolean;
-  closeIcon?: TIcons;
+  closeIcon?: TIcon;
   headerDivider?: boolean;
   footerDivider?: boolean;
 }
@@ -129,7 +129,7 @@ export interface IModalProps {
   height?: string;
   position?: TExpandedPosition;
   dismissible?: boolean;
-  closeIcon?: TIcons;
+  closeIcon?: TIcon;
   headerDivider?: boolean;
 }
 
@@ -152,7 +152,7 @@ export interface ISelectProps {
   groups?: ISelectGroup[];
   width?: string;
   placeholder?: string;
-  openIcon?: TIcons;
+  openIcon?: TIcon;
   size?: TSize;
   name?: string;
   theme?: TThemeColor;
@@ -195,6 +195,7 @@ export interface IButtonProps {
 
 export interface IRatingProps {
   count?: number;
+  icon?: TIcon;
   theme?: TThemeColor;
   darknessTheme?: TDarkness;
 }
@@ -212,8 +213,8 @@ export interface ITagProps {
   value?: string;
   size?: TSize;
   rounded?: boolean;
-  iconLeft?: TIcons;
-  iconRight?: TIcons;
+  iconLeft?: TIcon;
+  iconRight?: TIcon;
   theme?: TThemeColor;
   background?: TThemeColor;
   border?: TThemeColor;
diff --git a/src/stories/components/Rating/Rating.stories.ts b/src/stories/components/Rating/Rating.stories.ts
new file mode 100644
index 0000000..2efc991
--- /dev/null
+++ b/src/stories/components/Rating/Rating.stories.ts
@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import Rating from './Rating.vue';
+
+const meta: Meta = {
+  title: 'Components/Rating',
+  component: Rating,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A component that is used as a rating.',
+      },
+    },
+  },
+  argTypes: {
+    label: { control: 'text' },
+    padding: { control: 'text' },
+    size: { control: 'select', options: ['small', 'normal', 'large', 'huge'] },
+    textStyle: { control: 'select', options: ['bold', 'italic'] },
+    iconPos: { control: 'select', options: ['left', 'top', 'right', 'bottom'] },
+    width: { control: 'text' },
+    darknessTheme: { control: 'select', options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'] },
+    darknessTextColor: {
+      control: 'select',
+      options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
+    },
+    theme: {
+      control: 'select',
+      options: [
+        'white',
+        'blue',
+        'sky',
+        'cyan',
+        'teal',
+        'green',
+        'yellow',
+        'orange',
+        'pink',
+        'fuchsia',
+        'purple',
+        'indigo',
+        'rose',
+        'red',
+        'black',
+      ],
+    },
+    textColor: {
+      control: 'select',
+      options: [
+        'white',
+        'blue',
+        'sky',
+        'cyan',
+        'teal',
+        'green',
+        'yellow',
+        'orange',
+        'pink',
+        'fuchsia',
+        'purple',
+        'indigo',
+        'rose',
+        'red',
+        'black',
+      ],
+    },
+  },
+  args: {},
+} satisfies Meta<typeof Rating>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Simple: Story = {
+  args: {},
+};
diff --git a/src/stories/components/Rating/Rating.vue b/src/stories/components/Rating/Rating.vue
new file mode 100644
index 0000000..a97b830
--- /dev/null
+++ b/src/stories/components/Rating/Rating.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { IRatingProps } from '@interfaces/componentsProps';
+import { ref } from 'vue';
+import { iconsSet } from '@/common/constants/icons';
+
+const props = withDefaults(defineProps<IRatingProps>(), {
+  count: 5,
+});
+
+const value = defineModel();
+const onHoverIndex = ref();
+
+// const textColor = computed(() => {});
+</script>
+
+<template>
+  {{ value }}
+  <ul class="list">
+    <li v-for="index of Array(count).keys()" :key="index" class="item">
+      <component
+        class="icon"
+        :is="iconsSet[icon ?? 'Star']"
+        color="black"
+        @pointerenter="onHoverIndex = index"
+        @pointerleave="onHoverIndex = null"
+      />
+      <Transition>
+        <component
+          class="hoverIcon"
+          v-show="onHoverIndex === index"
+          :is="iconsSet[icon ?? 'Star']"
+          color="gray"
+          @pointerenter="onHoverIndex = index"
+          @pointerleave="onHoverIndex = null"
+          @click="value = index + 1"
+      /></Transition>
+    </li>
+  </ul>
+</template>
+
+<style scoped>
+.list {
+  display: flex;
+}
+.item {
+  position: relative;
+  cursor: pointer;
+  transition: all 1s ease-in-out;
+}
+.icon {
+  opacity: 1;
+  transition: opacity 0.15s ease-in-out;
+  :hover {
+    opacity: 0;
+  }
+}
+.hoverIcon {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.15s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/src/stories/components/SelectButton/SelectButton.vue b/src/stories/components/SelectButton/SelectButton.vue
index 3d491f3..1d1f1b6 100644
--- a/src/stories/components/SelectButton/SelectButton.vue
+++ b/src/stories/components/SelectButton/SelectButton.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, type Ref } from 'vue';
 import type { ISBProps } from '@interfaces/componentsProps';
 import { convertThemeToSecondaryColor, convertThemeToColor, convertThemeToTextColor } from '@helpers/common';
 import type { ISBOption } from '@interfaces/componentsProp';
@@ -12,7 +12,7 @@ const props = withDefaults(defineProps<ISBProps>(), {
   darknessActiveBackgroundColor: '500',
 });
 const emit = defineEmits(['onClick']);
-const value = defineModel<never>();
+const value = defineModel() as Ref<string | number | boolean | never>;
 
 const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
 const color = computed(() =>
diff --git a/src/stories/components/ToggleSwitch/ToggleSwitch.vue b/src/stories/components/ToggleSwitch/ToggleSwitch.vue
index 03cb15a..472ff20 100644
--- a/src/stories/components/ToggleSwitch/ToggleSwitch.vue
+++ b/src/stories/components/ToggleSwitch/ToggleSwitch.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, type Ref } from 'vue';
 import type { ITSProps } from '@interfaces/componentsProps';
 import { convertThemeToColor } from '@helpers/common';
 
@@ -10,7 +10,7 @@ const props = withDefaults(defineProps<ITSProps>(), {
   darknessTheme: '500',
   darknessNegativeTheme: '500',
 });
-const active = defineModel<boolean>();
+const active = defineModel() as Ref<boolean>;
 
 const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
 const inactiveColor = computed(() => convertThemeToColor(props.negativeTheme, props.darknessNegativeTheme));
diff --git a/src/stories/icons/Mono/StarIcon.vue b/src/stories/icons/Mono/StarIcon.vue
new file mode 100644
index 0000000..8d6a078
--- /dev/null
+++ b/src/stories/icons/Mono/StarIcon.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg :width="size ?? '40px'" :height="size ?? '40px'" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M10.1507 2.3649C10.8306 0.713558 13.1694 0.713567 13.8494 2.3649L16.1856 8.0386L21.4255 8.34683C23.2632 8.45493 23.9912 10.7786 22.5437 11.916L18.1816 15.3433L19.9202 20.2694C20.5648 22.0955 18.497 23.6802 16.9012 22.5831L12 19.2135L7.09881 22.5831C5.50303 23.6802 3.43525 22.0955 4.07977 20.2694L5.81838 15.3433L1.45635 11.916C0.0087955 10.7787 0.736801 8.45493 2.57454 8.34683L7.81442 8.0386L10.1507 2.3649ZM12 3.1264L9.18559 9.9614L2.69199 10.3434L8.18164 14.6567L5.96575 20.935L12 16.7865L18.0343 20.935L15.8184 14.6567L21.308 10.3434L14.8144 9.9614L12 3.1264Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
-- 
GitLab