feat(editor): Add color picker design system component (#6179)

* feat(editor): Add color picker design system component

* fix(editor): remove type imports

* fix(editor): fix v-model

* fix(editor): fix props

* fix(editor): color picker view model

* test(editor): add some basic test to color picker

* fix(editor): update color picker styles

* fix(editor): color picker view model

* test(editor): update snapshot

packages/design-system/src/components/N8nColorPicker/ColorPicker.stories.ts

@@ -0,0 +1,59 @@
+import { action } from '@storybook/addon-actions';
+import type { StoryFn } from '@storybook/vue';
+import N8nColorPicker from './ColorPicker.vue';
+
+export default {
+	title: 'Atoms/ColorPicker',
+	component: N8nColorPicker,
+	argTypes: {
+		disabled: {
+			control: 'boolean',
+		},
+		size: {
+			control: 'select',
+			options: ['mini', 'small', 'medium', 'large'],
+		},
+		showAlpha: {
+			control: 'boolean',
+		},
+		colorFormat: {
+			control: 'select',
+			options: ['hsl', 'hsv', 'hex', 'rgb'],
+		},
+		popperClass: {
+			control: 'text',
+		},
+		predefine: {
+			control: 'array',
+		},
+	},
+};
+
+const methods = {
+	onChange: action('change'),
+	onActiveChange: action('active-change'),
+	onInput: action('input'),
+};
+
+const DefaultTemplate: StoryFn = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		N8nColorPicker,
+	},
+	data: () => ({
+		color: null,
+	}),
+	template:
+		'<n8n-color-picker v-model="color" v-bind="$props" @input="onInput" @change="onChange" @active-change="onActiveChange" />',
+	methods,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {
+	disabled: false,
+	size: 'medium',
+	showAlpha: false,
+	colorFormat: '',
+	popperClass: '',
+	showInput: true,
+};

packages/design-system/src/components/N8nColorPicker/ColorPicker.vue

@@ -0,0 +1,99 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { ColorPicker } from 'element-ui';
+import N8nInput from '../N8nInput';
+
+export type Props = {
+	disabled?: boolean;
+	size?: 'small' | 'medium' | 'mini';
+	showAlpha?: boolean;
+	colorFormat?: 'hex' | 'rgb' | 'hsl' | 'hsv';
+	popperClass?: string;
+	predefine?: string[];
+	value?: string;
+	showInput?: boolean;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+	disabled: false,
+	size: 'medium',
+	showAlpha: false,
+	colorFormat: 'hex',
+	popperClass: '',
+	showInput: true,
+	value: null,
+});
+
+const color = ref(props.value);
+
+const colorPickerProps = computed(() => {
+	const { value, showInput, ...rest } = props;
+	return rest;
+});
+
+const emit = defineEmits<{
+	(event: 'input', value: string): void;
+	(event: 'change', value: string): void;
+	(event: 'active-change', value: string): void;
+}>();
+
+const model = computed({
+	get() {
+		return color.value;
+	},
+	set(value: string) {
+		color.value = value;
+		emit('input', value);
+	},
+});
+
+const onChange = (value: string) => {
+	emit('change', value);
+};
+
+const onInput = (value: string) => {
+	color.value = value;
+};
+
+const onActiveChange = (value: string) => {
+	emit('active-change', value);
+};
+</script>
+<template>
+	<span :class="['n8n-color-picker', $style.component]">
+		<color-picker
+			v-model="model"
+			v-bind="colorPickerProps"
+			@change="onChange"
+			@active-change="onActiveChange"
+		/>
+		<n8n-input
+			v-if="showInput"
+			:class="$style.input"
+			:disabled="props.disabled"
+			:size="props.size"
+			:value="color"
+			@input="onInput"
+			type="text"
+		/>
+	</span>
+</template>
+<style lang="scss" module>
+.component {
+	display: inline-flex;
+	align-items: center;
+}
+
+.input {
+	margin-left: var(--spacing-3xs);
+}
+</style>
+
+<style lang="scss" scoped>
+:deep(.el-color-picker) {
+	.el-color-picker__empty,
+	.el-color-picker__icon {
+		display: none;
+	}
+}
+</style>

packages/design-system/src/components/N8nColorPicker/__tests__/ColorPicker.spec.ts

@@ -0,0 +1,16 @@
+import { render } from '@testing-library/vue';
+import N8nColorPicker from '../ColorPicker.vue';
+
+describe('components', () => {
+	describe('N8nColorPicker', () => {
+		it('should render with input', () => {
+			const { container } = render(N8nColorPicker);
+			expect(container).toMatchSnapshot();
+		});
+
+		it('should render without input', () => {
+			const { container } = render(N8nColorPicker, { props: { showInput: false } });
+			expect(container).toMatchSnapshot();
+		});
+	});
+});