@umituz/react-native-video-editor 1.1.63 → 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/subtitle/SubtitleListItem.tsx

@@ -29,7 +29,6 @@ export const SubtitleListItem: React.FC<SubtitleListItemProps> = ({
     item: {
       flexDirection: "row" as const,
       alignItems: "center" as const,
-      backgroundColor: tokens.colors.surface,
       borderRadius: tokens.borders.radius.md,
       marginHorizontal: tokens.spacing.md,
       marginBottom: tokens.spacing.sm,
@@ -70,17 +69,17 @@ export const SubtitleListItem: React.FC<SubtitleListItemProps> = ({
         activeOpacity={0.7}
       >
         <View style={styles.itemTimeRow}>
-          <AtomicText variant="caption" color="textSecondary">
+          <AtomicText color="textSecondary">
             {formatTimeDetailed(subtitle.startTime)}
           </AtomicText>
-          <AtomicText variant="caption" color="textSecondary">
+          <AtomicText color="textSecondary">
             →
           </AtomicText>
-          <AtomicText variant="caption" color="textSecondary">
+          <AtomicText color="textSecondary">
             {formatTimeDetailed(subtitle.endTime)}
           </AtomicText>
         </View>
-        <AtomicText variant="body" color="textPrimary" numberOfLines={2}>
+        <AtomicText color="textPrimary" numberOfLines={2}>
           {subtitle.text}
         </AtomicText>
       </TouchableOpacity>

package/src/presentation/components/subtitle/SubtitleModal.tsx

@@ -55,7 +55,7 @@ export const SubtitleModal: React.FC<SubtitleModalProps> = ({
       paddingHorizontal: tokens.spacing.md,
       paddingTop: tokens.spacing.md,
       paddingBottom: tokens.spacing.xl,
-      maxHeight: "90%",
+      maxHeight: "90%" as const,
     },
     handle: {
       width: 36,
@@ -136,7 +136,7 @@ export const SubtitleModal: React.FC<SubtitleModalProps> = ({
               />
             </View>
 
-            <SubtitleStylePicker value={style} onChange={onChangeStyle} />
+            <SubtitleStylePicker style={style} previewText={text} onChange={onChangeStyle} t={(key) => key} />
 
             <View style={styles.actionRow}>
               <TouchableOpacity style={styles.cancelBtn} onPress={onCancel}>

package/src/presentation/components/subtitle/useSubtitleForm.ts

@@ -3,7 +3,7 @@
  * Manages subtitle form state and operations
  */
 
-import { useState, useCallback, useMemo } from "react";
+import { useState, useCallback } from "react";
 import { DEFAULT_SUBTITLE_STYLE } from "../../../infrastructure/constants/subtitle.constants";
 import type { Subtitle, SubtitleStyle } from "../../../domain/entities/video-project.types";
 

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/use-layer-form.hook.ts

@@ -5,30 +5,30 @@
  */
 
 import { useState, useCallback } from "react";
-import type { Layer } from "../../domain/entities/video-project.types";
+import type { Layer, ImageLayer, TextLayer } from "../../../domain/entities/video-project.types";
 
 /**
  * Form field validator function type
  */
-export type ValidatorFn<T> = (value: T[keyof T]) => string | null;
+export type ValidatorFn<T, K extends keyof T = keyof T> = (value: T[K]) => string | null;
 
 /**
  * Layer form configuration
  */
 export interface UseLayerFormConfig<T extends Record<string, unknown>> {
   initialValues: Partial<T>;
-  validators?: Partial<Record<keyof T, ValidatorFn<T>>>;
-  buildData: (formState: T) => Partial<Layer>;
+  validators?: Record<string, (value: unknown) => string | null>;
+  buildData: (formState: T) => Partial<Layer> | Partial<ImageLayer> | Partial<TextLayer>;
 }
 
 /**
  * Layer form return type
  */
-export interface UseLayerFormReturn<T extends Record<string, unknown>> {
+export interface UseLayerFormReturn<T extends Record<string, unknown>, R = Partial<Layer>> {
   formState: T;
   updateField: <K extends keyof T>(field: K, value: T[K]) => void;
   setFormState: (state: T | ((prev: T) => T)) => void;
-  buildLayerData: () => Partial<Layer>;
+  buildLayerData: () => R;
   isValid: boolean;
   errors: Partial<Record<keyof T, string | null>>;
   validateField: <K extends keyof T>(field: K) => string | null;
@@ -39,9 +39,9 @@ export interface UseLayerFormReturn<T extends Record<string, unknown>> {
  * Generic hook for managing layer form state
  * Provides type-safe form management with validation support
  */
-export function useLayerForm<T extends Record<string, unknown>>(
+export function useLayerForm<T extends Record<string, unknown>, R = Partial<Layer>>(
   config: UseLayerFormConfig<T>,
-): UseLayerFormReturn<T> {
+): UseLayerFormReturn<T, R> {
   const { initialValues, validators = {}, buildData } = config;
 
   const [formState, setFormState] = useState<T>(
@@ -60,7 +60,7 @@ export function useLayerForm<T extends Record<string, unknown>>(
       }));
 
       // Clear error for this field
-      if (errors[field]) {
+      if (errors[field as keyof typeof errors]) {
         setErrors((prev) => ({
           ...prev,
           [field]: null,
@@ -72,7 +72,7 @@ export function useLayerForm<T extends Record<string, unknown>>(
 
   const validateField = useCallback(
     <K extends keyof T>(field: K): string | null => {
-      const validator = validators[field];
+      const validator = validators[String(field)];
       if (!validator) return null;
 
       const error = validator(formState[field]);
@@ -91,10 +91,13 @@ export function useLayerForm<T extends Record<string, unknown>>(
     const newErrors: Partial<Record<keyof T, string | null>> = {};
 
     for (const field in validators) {
-      const error = validators[field]!(formState[field]);
-      if (error) {
-        newErrors[field] = error;
-        hasError = true;
+      const validator = validators[field];
+      if (validator) {
+        const error = validator(formState[field as keyof T]);
+        if (error) {
+          newErrors[field as keyof T] = error;
+          hasError = true;
+        }
       }
     }
 
@@ -102,8 +105,8 @@ export function useLayerForm<T extends Record<string, unknown>>(
     return !hasError;
   }, [formState, validators]);
 
-  const buildLayerData = useCallback((): Partial<Layer> => {
-    return buildData(formState);
+  const buildLayerData = useCallback((): R => {
+    return buildData(formState) as R;
   }, [formState, buildData]);
 
   const isValid = Object.values(errors).every((error) => error === null);