feat: init 'Cropper'

src/common/interfaces/componentsProps.ts

@@ -182,6 +182,10 @@ export interface IPopupProps {
   left?: number;
 }
 
+export interface ICropperProps {
+  size?: TSize;
+}
+
 export interface IColorPickerProps {
   size?: TSize;
   disabled?: boolean;

src/components/ColorPicker/ColorPicker.stories.ts

@@ -9,7 +9,7 @@ const meta: Meta = {
   parameters: {
     docs: {
       description: {
-        component: 'A component to define number inputs with a dial.',
+        component: 'A component to pick color. Can be with button.',
       },
     },
   },

src/components/Cropper/Cropper.stories.ts

+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import Cropper from './Cropper.vue';
+
+const meta: Meta = {
+  title: 'Components/Cropper',
+  component: Cropper,
+  tags: ['pick'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A component to pick color. Can be with button.',
+      },
+    },
+  },
+  argTypes: {
+    buttonProps: { control: 'object' },
+    sameButtonColor: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    size: { control: 'select', options: ['small', 'normal', 'large', 'huge'] },
+  },
+} satisfies Meta<typeof Cropper>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Simple: Story = {
+  args: {},
+};
+
+export const Full: Story = {
+  args: {
+    buttonProps: {
+      label: 'Pick color!',
+      theme: 'red',
+      textStyle: 'bold',
+    },
+
+    size: 'large',
+    sameButtonColor: true,
+  },
+};

src/components/Cropper/Cropper.vue

+<script setup lang="ts">
+import type { ICropperProps } from '@interfaces/componentsProps';
+
+const props = withDefaults(defineProps<ICropperProps>(), {
+  size: 'normal',
+  disabled: false,
+});
+</script>
+
+<template>
+  <section class="container"></section>
+</template>
+
+<style scoped>
+.container {
+}
+</style>