From 18fa2152a233a2b377654cccd973e69e9fdf6281 Mon Sep 17 00:00:00 2001
From: hkonsti <45428767+hkonsti@users.noreply.github.com>
Date: Thu, 19 Sep 2024 11:46:53 +0200
Subject: [PATCH] chore: remove unused color code

---
 .../ui/src/components/controls/ColorInput.tsx | 41 -------------------
 .../src/components/controls/ColorPreview.tsx  | 15 -------
 packages/ui/src/components/controls/index.ts  |  1 -
 .../ui/src/components/fields/AutoField.tsx    |  4 +-
 .../ui/src/components/fields/ColorField.tsx   | 34 ---------------
 packages/ui/src/components/fields/index.ts    |  1 -
 6 files changed, 1 insertion(+), 95 deletions(-)
 delete mode 100644 packages/ui/src/components/controls/ColorInput.tsx
 delete mode 100644 packages/ui/src/components/controls/ColorPreview.tsx
 delete mode 100644 packages/ui/src/components/fields/ColorField.tsx

diff --git a/packages/ui/src/components/controls/ColorInput.tsx b/packages/ui/src/components/controls/ColorInput.tsx
deleted file mode 100644
index 71d6a29d..00000000
--- a/packages/ui/src/components/controls/ColorInput.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import {Color} from '@revideo/core';
-import {valid} from 'chroma-js';
-import clsx from 'clsx';
-import {useReducedMotion} from '../../hooks';
-import {shake} from '../animations';
-import {ColorPreview} from './ColorPreview';
-import styles from './Controls.module.scss';
-import {Input} from './Input';
-
-export interface ColorInputProps {
-  value: Color | null;
-  onChange: (value: string) => void;
-}
-
-export function ColorInput({value, onChange}: ColorInputProps) {
-  const reducedMotion = useReducedMotion();
-  return (
-    <div className={clsx(styles.input, styles.color)}>
-      <Input
-        onChange={event => {
-          const input = event.target as HTMLInputElement;
-          const newValue = input.value;
-          if (!newValue || valid(newValue)) {
-            onChange(newValue);
-          } else {
-            input.value = value?.serialize() ?? '';
-            if (!reducedMotion) {
-              input.parentElement.animate(shake(2), {
-                duration: 300,
-              });
-            }
-          }
-        }}
-        placeholder="none"
-        type="text"
-        value={value?.serialize() ?? ''}
-      />
-      <ColorPreview color={value?.hex() ?? '#00000000'} />
-    </div>
-  );
-}
diff --git a/packages/ui/src/components/controls/ColorPreview.tsx b/packages/ui/src/components/controls/ColorPreview.tsx
deleted file mode 100644
index ed83edfe..00000000
--- a/packages/ui/src/components/controls/ColorPreview.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import {JSX} from 'preact';
-
-import styles from './Controls.module.scss';
-
-interface ColorPreviewProps extends JSX.HTMLAttributes<HTMLDivElement> {
-  color: string;
-}
-
-export function ColorPreview({color, ...props}: ColorPreviewProps) {
-  return (
-    <div className={styles.colorPreview} {...props}>
-      <div style={{background: color}} />
-    </div>
-  );
-}
diff --git a/packages/ui/src/components/controls/index.ts b/packages/ui/src/components/controls/index.ts
index a4c03593..f36b1349 100644
--- a/packages/ui/src/components/controls/index.ts
+++ b/packages/ui/src/components/controls/index.ts
@@ -1,7 +1,6 @@
 export * from './Button';
 export * from './ButtonSelect';
 export * from './Checkbox';
-export * from './ColorInput';
 export * from './Group';
 export * from './IconButton';
 export * from './IconCheckbox';
diff --git a/packages/ui/src/components/fields/AutoField.tsx b/packages/ui/src/components/fields/AutoField.tsx
index 7f5c0766..d7c5d178 100644
--- a/packages/ui/src/components/fields/AutoField.tsx
+++ b/packages/ui/src/components/fields/AutoField.tsx
@@ -1,7 +1,6 @@
-import {Color, Spacing, Vector2, isType} from '@revideo/core';
+import {Spacing, Vector2, isType} from '@revideo/core';
 import {FunctionComponent} from 'preact';
 import {ArrayField} from './ArrayField';
-import {ColorField} from './ColorField';
 import {NumberField} from './NumberField';
 import {SpacingField} from './SpacingField';
 import {UnknownField} from './UnknownField';
@@ -13,7 +12,6 @@ export interface AutoFieldProps {
 
 const TYPE_MAP: Record<symbol, FunctionComponent<{value: any}>> = {
   [Vector2.symbol]: Vector2Field,
-  [Color.symbol]: ColorField,
   [Spacing.symbol]: SpacingField,
 };
 
diff --git a/packages/ui/src/components/fields/ColorField.tsx b/packages/ui/src/components/fields/ColorField.tsx
deleted file mode 100644
index dde19510..00000000
--- a/packages/ui/src/components/fields/ColorField.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import {Color} from '@revideo/core';
-import {ColorPreview} from '../controls/ColorPreview';
-import {Field, FieldSet, FieldValue, NumericField} from './Layout';
-
-export interface ColorFieldProps {
-  value: Color;
-}
-
-export function ColorField({value}: ColorFieldProps) {
-  const color = value.serialize();
-  return (
-    <FieldSet
-      header={
-        <Field copy={color}>
-          <FieldValue>{color}</FieldValue>
-          <FieldValue alignRight grow={false}>
-            <ColorPreview color={color} />
-          </FieldValue>
-        </Field>
-      }
-    >
-      <NumericField label="red" precision={0}>
-        {value.get('rgb.r')}
-      </NumericField>
-      <NumericField label="green" precision={0}>
-        {value.get('rgb.g')}
-      </NumericField>
-      <NumericField label="blue" precision={0}>
-        {value.get('rgb.b')}
-      </NumericField>
-      <NumericField label="alpha">{value.alpha()}</NumericField>
-    </FieldSet>
-  );
-}
diff --git a/packages/ui/src/components/fields/index.ts b/packages/ui/src/components/fields/index.ts
index e9d849ac..521e22ea 100644
--- a/packages/ui/src/components/fields/index.ts
+++ b/packages/ui/src/components/fields/index.ts
@@ -1,5 +1,4 @@
 export * from './AutoField';
-export * from './ColorField';
 export * from './Expandable';
 export * from './Layout';
 export * from './NumberField';