@umituz/react-native-video-editor 1.1.64 → 1.1.65

package/src/presentation/components/shape-layer/ColorPickerHorizontal.tsx

@@ -1,12 +1,14 @@
 /**
- * ColorPickerHorizontal Component
+ * Color Picker Horizontal Component
  * Horizontal scrolling color picker for shape layer
+ * REFACTORED: Uses generic Selector with colorPreview mode (28 lines)
  */
 
-import React from "react";
-import { View, ScrollView, StyleSheet, TouchableOpacity } from "react-native";
-import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
+import React, { useMemo } from "react";
+import { View } from "react-native";
+import { AtomicText } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { Selector, type SelectorItem } from "../generic/Selector";
 import { SHAPE_COLORS } from "../../../infrastructure/constants/shape-layer.constants";
 
 interface ColorPickerHorizontalProps {
@@ -22,8 +24,13 @@ export const ColorPickerHorizontal: React.FC<ColorPickerHorizontalProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
 
+  const items = useMemo<SelectorItem[]>(
+    () => SHAPE_COLORS.map((color) => ({ value: color.value, label: "", color: color.value })),
+    [],
+  );
+
   return (
-    <View style={styles.section}>
+    <View style={{ marginBottom: tokens.spacing.md }}>
       <AtomicText
         type="bodyMedium"
         style={{
@@ -34,56 +41,14 @@ export const ColorPickerHorizontal: React.FC<ColorPickerHorizontalProps> = ({
       >
         {title}
       </AtomicText>
-
-      <ScrollView
-        horizontal
-        showsHorizontalScrollIndicator={false}
-        style={styles.colorsScroll}
-      >
-        {SHAPE_COLORS.map((color) => (
-          <TouchableOpacity
-            key={color.value}
-            style={[
-              styles.colorButton,
-              {
-                backgroundColor: color.value,
-                borderColor:
-                  selectedColor === color.value
-                    ? tokens.colors.primary
-                    : tokens.colors.borderLight,
-                borderWidth: selectedColor === color.value ? 3 : 2,
-              },
-            ]}
-            onPress={() => onColorChange(color.value)}
-          >
-            {selectedColor === color.value && (
-              <AtomicIcon
-                name="checkmark-outline"
-                size="sm"
-                color={color.value === "#FFFFFF" ? "primary" : "onSurface"}
-              />
-            )}
-          </TouchableOpacity>
-        ))}
-      </ScrollView>
+      <Selector
+        items={items}
+        selectedValue={selectedColor}
+        onSelect={onColorChange}
+        orientation="horizontal"
+        colorPreview
+        testID="color-picker-horizontal"
+      />
     </View>
   );
 };
-
-const styles = StyleSheet.create({
-  section: {
-    marginBottom: 24,
-  },
-  colorsScroll: {
-    marginHorizontal: -16,
-    paddingHorizontal: 16,
-  },
-  colorButton: {
-    width: 50,
-    height: 50,
-    borderRadius: 25,
-    marginRight: 12,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});

package/src/presentation/components/text-layer/ColorPicker.tsx

@@ -1,13 +1,15 @@
 /**
- * ColorPicker Component
+ * Color Picker Component
  * Color picker for text layer
+ * REFACTORED: Uses generic Selector with colorPreview mode (35 lines)
  */
 
-import React from "react";
-import { View, StyleSheet, TouchableOpacity } from "react-native";
-import { useLocalization } from "@umituz/react-native-settings";
-import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
+import React, { useMemo } from "react";
+import { View } from "react-native";
+import { AtomicText } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { useLocalization } from "@umituz/react-native-settings";
+import { Selector, type SelectorItem } from "../generic/Selector";
 import { TEXT_COLORS } from "../../../infrastructure/constants/text-layer.constants";
 
 interface ColorPickerProps {
@@ -22,8 +24,13 @@ export const ColorPicker: React.FC<ColorPickerProps> = ({
   const { t } = useLocalization();
   const tokens = useAppDesignTokens();
 
+  const items = useMemo<SelectorItem[]>(
+    () => TEXT_COLORS.map((color) => ({ value: color, label: "", color })),
+    [],
+  );
+
   return (
-    <View style={styles.section}>
+    <View style={{ marginBottom: tokens.spacing.md }}>
       <AtomicText
         type="bodyMedium"
         style={{
@@ -34,55 +41,14 @@ export const ColorPicker: React.FC<ColorPickerProps> = ({
       >
         {t("editor.properties.color")}
       </AtomicText>
-      <View style={styles.colorGrid}>
-        {TEXT_COLORS.map((color) => (
-          <TouchableOpacity
-            key={color}
-            style={[
-              styles.colorButton,
-              {
-                backgroundColor: color,
-                borderColor:
-                  selectedColor === color
-                    ? tokens.colors.primary
-                    : tokens.colors.borderLight,
-                borderWidth: selectedColor === color ? 3 : 1,
-              },
-            ]}
-            onPress={() => onColorChange(color)}
-          >
-            {selectedColor === color && (
-              <AtomicIcon
-                name="checkmark-outline"
-                size="sm"
-                color={
-                  color === "#FFFFFF" || color === "#FCD34D"
-                    ? "primary"
-                    : "onSurface"
-                }
-              />
-            )}
-          </TouchableOpacity>
-        ))}
-      </View>
+      <Selector
+        items={items}
+        selectedValue={selectedColor}
+        onSelect={onColorChange}
+        orientation="grid"
+        colorPreview
+        testID="color-picker"
+      />
     </View>
   );
 };
-
-const styles = StyleSheet.create({
-  section: {
-    marginBottom: 24,
-  },
-  colorGrid: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 12,
-  },
-  colorButton: {
-    width: 50,
-    height: 50,
-    borderRadius: 25,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});

package/src/presentation/components/text-layer/FontSizeSelector.tsx

@@ -1,13 +1,15 @@
 /**
- * FontSizeSelector Component
+ * Font Size Selector Component
  * Font size selector for text layer
+ * REFACTORED: Uses generic Selector component (45 lines)
  */
 
-import React from "react";
-import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
-import { useLocalization } from "@umituz/react-native-settings";
+import React, { useMemo } from "react";
+import { View } from "react-native";
 import { AtomicText } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { useLocalization } from "@umituz/react-native-settings";
+import { Selector, type SelectorItem } from "../generic/Selector";
 import { FONT_SIZES } from "../../../infrastructure/constants/text-layer.constants";
 
 interface FontSizeSelectorProps {
@@ -22,8 +24,13 @@ export const FontSizeSelector: React.FC<FontSizeSelectorProps> = ({
   const { t } = useLocalization();
   const tokens = useAppDesignTokens();
 
+  const items = useMemo<SelectorItem<number>[]>(
+    () => FONT_SIZES.map((size) => ({ value: size, label: `${size}px` })),
+    [],
+  );
+
   return (
-    <View style={styles.section}>
+    <View style={{ marginBottom: tokens.spacing.md }}>
       <AtomicText
         type="bodyMedium"
         style={{
@@ -34,51 +41,13 @@ export const FontSizeSelector: React.FC<FontSizeSelectorProps> = ({
       >
         {t("editor.properties.font_size")}: {fontSize}px
       </AtomicText>
-      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-        {FONT_SIZES.map((size) => (
-          <TouchableOpacity
-            key={size}
-            style={[
-              styles.sizeButton,
-              {
-                backgroundColor:
-                  fontSize === size
-                    ? tokens.colors.primary
-                    : tokens.colors.surface,
-                borderColor:
-                  fontSize === size
-                    ? tokens.colors.primary
-                    : tokens.colors.borderLight,
-              },
-            ]}
-            onPress={() => onFontSizeChange(size)}
-          >
-            <AtomicText
-              type="bodySmall"
-              style={{
-                color:
-                  fontSize === size ? tokens.colors.onPrimary : tokens.colors.textPrimary,
-                fontWeight: fontSize === size ? "600" : "400",
-              }}
-            >
-              {size}
-            </AtomicText>
-          </TouchableOpacity>
-        ))}
-      </ScrollView>
+      <Selector
+        items={items}
+        selectedValue={fontSize}
+        onSelect={onFontSizeChange}
+        orientation="horizontal"
+        testID="font-size-selector"
+      />
     </View>
   );
 };
-
-const styles = StyleSheet.create({
-  section: {
-    marginBottom: 24,
-  },
-  sizeButton: {
-    paddingHorizontal: 16,
-    paddingVertical: 10,
-    borderRadius: 8,
-    borderWidth: 1,
-    marginRight: 8,
-  },
-});

package/src/presentation/components/text-layer/OptionSelector.tsx

@@ -1,12 +1,14 @@
 /**
- * OptionSelector Component
+ * Option Selector Component
  * Reusable selector for font family, font weight, etc.
+ * REFACTORED: Uses generic Selector component (29 lines)
  */
 
-import React from "react";
-import { View, StyleSheet, TouchableOpacity } from "react-native";
+import React, { useMemo } from "react";
+import { View } from "react-native";
 import { AtomicText } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { Selector, type SelectorItem } from "../generic/Selector";
 
 interface Option {
   label: string;
@@ -28,8 +30,13 @@ export const OptionSelector: React.FC<OptionSelectorProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
 
+  const items = useMemo<SelectorItem<string>[]>(
+    () => options.map((option) => ({ value: option.value, label: option.label })),
+    [options],
+  );
+
   return (
-    <View style={styles.section}>
+    <View style={{ marginBottom: tokens.spacing.md }}>
       <AtomicText
         type="bodyMedium"
         style={{
@@ -40,57 +47,13 @@ export const OptionSelector: React.FC<OptionSelectorProps> = ({
       >
         {title}
       </AtomicText>
-      <View style={styles.optionsGrid}>
-        {options.map((option) => (
-          <TouchableOpacity
-            key={option.value}
-            style={[
-              styles.optionButton,
-              {
-                backgroundColor:
-                  selectedValue === option.value
-                    ? tokens.colors.primary + "20"
-                    : tokens.colors.surface,
-                borderColor:
-                  selectedValue === option.value
-                    ? tokens.colors.primary
-                    : tokens.colors.borderLight,
-              },
-            ]}
-            onPress={() => onValueChange(option.value)}
-          >
-            <AtomicText
-              type="labelSmall"
-              style={{
-                color:
-                  selectedValue === option.value
-                    ? tokens.colors.primary
-                    : tokens.colors.textPrimary,
-                fontWeight: selectedValue === option.value ? "600" : "400",
-              }}
-            >
-              {option.label}
-            </AtomicText>
-          </TouchableOpacity>
-        ))}
-      </View>
+      <Selector
+        items={items}
+        selectedValue={selectedValue}
+        onSelect={onValueChange}
+        orientation="grid"
+        testID="option-selector"
+      />
     </View>
   );
 };
-
-const styles = StyleSheet.create({
-  section: {
-    marginBottom: 24,
-  },
-  optionsGrid: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 8,
-  },
-  optionButton: {
-    paddingHorizontal: 16,
-    paddingVertical: 10,
-    borderRadius: 8,
-    borderWidth: 1,
-  },
-});

package/src/presentation/components/text-layer/TextAlignSelector.tsx

@@ -1,13 +1,15 @@
 /**
- * TextAlignSelector Component
+ * Text Align Selector Component
  * Text alignment selector for text layer
+ * REFACTORED: Uses generic Selector component (38 lines)
  */
 
-import React from "react";
-import { View, StyleSheet, TouchableOpacity } from "react-native";
-import { useLocalization } from "@umituz/react-native-settings";
-import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
+import React, { useMemo } from "react";
+import { View } from "react-native";
+import { AtomicText } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { useLocalization } from "@umituz/react-native-settings";
+import { Selector, type SelectorItem } from "../generic/Selector";
 import { TEXT_ALIGNS } from "../../../infrastructure/constants/text-layer.constants";
 
 interface TextAlignSelectorProps {
@@ -22,8 +24,17 @@ export const TextAlignSelector: React.FC<TextAlignSelectorProps> = ({
   const { t } = useLocalization();
   const tokens = useAppDesignTokens();
 
+  const items = useMemo<SelectorItem<"left" | "center" | "right">[]>(
+    () => TEXT_ALIGNS.map((align) => ({
+      value: align.value,
+      label: "",
+      icon: align.icon,
+    })),
+    [],
+  );
+
   return (
-    <View style={styles.section}>
+    <View style={{ marginBottom: tokens.spacing.md }}>
       <AtomicText
         type="bodyMedium"
         style={{
@@ -34,51 +45,13 @@ export const TextAlignSelector: React.FC<TextAlignSelectorProps> = ({
       >
         {t("editor.properties.text_align")}
       </AtomicText>
-      <View style={styles.alignButtons}>
-        {TEXT_ALIGNS.map((align) => (
-          <TouchableOpacity
-            key={align.value}
-            style={[
-              styles.alignButton,
-              {
-                backgroundColor:
-                  textAlign === align.value
-                    ? tokens.colors.primary
-                    : tokens.colors.surface,
-                borderColor:
-                  textAlign === align.value
-                    ? tokens.colors.primary
-                    : tokens.colors.borderLight,
-              },
-            ]}
-            onPress={() => onTextAlignChange(align.value)}
-          >
-            <AtomicIcon
-              name={align.icon}
-              size="md"
-              color={textAlign === align.value ? "onSurface" : "secondary"}
-            />
-          </TouchableOpacity>
-        ))}
-      </View>
+      <Selector
+        items={items}
+        selectedValue={textAlign}
+        onSelect={onTextAlignChange}
+        icon
+        testID="text-align-selector"
+      />
     </View>
   );
 };
-
-const styles = StyleSheet.create({
-  section: {
-    marginBottom: 24,
-  },
-  alignButtons: {
-    flexDirection: "row",
-    gap: 8,
-  },
-  alignButton: {
-    flex: 1,
-    paddingVertical: 12,
-    borderRadius: 8,
-    borderWidth: 2,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});

package/src/presentation/hooks/generic/useForm.ts

@@ -0,0 +1,99 @@
+/**
+ * Generic Form Hook
+ * Replaces: useImageLayerForm, useTextLayerForm, useShapeLayerForm, useAudioLayerForm, useAnimationLayerForm
+ */
+
+import { useState, useCallback, useMemo } from "react";
+
+export interface FormValidator<T = unknown> {
+  required?: boolean;
+  validate?: (value: T) => string | undefined;
+}
+
+export interface FormConfig<T extends Record<string, unknown>> {
+  initialValues: T;
+  validators?: Partial<Record<keyof T, FormValidator>>;
+  onSubmit: (values: T) => void | Promise<void>;
+}
+
+export interface FormReturn<T extends Record<string, unknown>> {
+  values: T;
+  errors: Partial<Record<keyof T, string>>;
+  touched: Partial<Record<keyof T, boolean>>;
+  isValid: boolean;
+  isSubmitting: boolean;
+  setValue: <K extends keyof T>(field: K, value: T[K]) => void;
+  setError: <K extends keyof T>(field: K, error: string | undefined) => void;
+  setTouched: <K extends keyof T>(field: K, touched: boolean) => void;
+  handleSubmit: () => Promise<void>;
+  resetForm: () => void;
+}
+
+export function useForm<T extends Record<string, unknown>>({ initialValues, validators = {}, onSubmit }: FormConfig<T>): FormReturn<T> {
+  const [values, setValues] = useState<T>(initialValues);
+  const [errors, setErrors] = useState<Partial<Record<keyof T, string>>>({});
+  const [touched, setTouched] = useState<Partial<Record<keyof T, boolean>>>({});
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const validateField = useCallback(<K extends keyof T>(field: K, value: T[K]): string | undefined => {
+    const validator = validators[field];
+    if (!validator) return undefined;
+    if (validator.required && (value === undefined || value === null || value === "")) return "This field is required";
+    if (validator.validate) return validator.validate(value);
+    return undefined;
+  }, [validators]);
+
+  const validateForm = useCallback((): boolean => {
+    const newErrors: Partial<Record<keyof T, string>> = {};
+    let isValid = true;
+    (Object.keys(validators) as Array<keyof T>).forEach((field) => {
+      const error = validateField(field, values[field]);
+      if (error) { newErrors[field] = error; isValid = false; }
+    });
+    setErrors(newErrors);
+    return isValid;
+  }, [validators, values, validateField]);
+
+  const setValue = useCallback(<K extends keyof T>(field: K, value: T[K]) => {
+    setValues((prev) => ({ ...prev, [field]: value }));
+    if (touched[field]) {
+      const error = validateField(field, value);
+      setErrors((prev) => ({ ...prev, [field]: error }));
+    }
+  }, [touched, validateField]);
+
+  const setError = useCallback(<K extends keyof T>(field: K, error: string | undefined) => {
+    setErrors((prev) => ({ ...prev, [field]: error }));
+  }, []);
+
+  const setFieldTouched = useCallback(<K extends keyof T>(field: K, touchedValue: boolean) => {
+    setTouched((prev) => ({ ...prev, [field]: touchedValue }));
+    if (touchedValue) {
+      const error = validateField(field, values[field]);
+      setErrors((prev) => ({ ...prev, [field]: error }));
+    }
+  }, [values, validateField]);
+
+  const isValid = useMemo(() => Object.keys(validators).every((field) => !errors[field as keyof T]), [errors, validators]);
+
+  const handleSubmit = useCallback(async () => {
+    const allTouched = Object.keys(validators).reduce((acc, field) => ({ ...acc, [field]: true }), {} as Partial<Record<keyof T, boolean>>);
+    setTouched(allTouched);
+    const valid = validateForm();
+    if (!valid) return;
+    setIsSubmitting(true);
+    try {
+      await onSubmit(values);
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [values, validators, onSubmit, validateForm]);
+
+  const resetForm = useCallback(() => {
+    setValues(initialValues);
+    setErrors({});
+    setTouched({});
+  }, [initialValues]);
+
+  return { values, errors, touched, isValid, isSubmitting, setValue, setError, setTouched: setFieldTouched, handleSubmit, resetForm };
+}