@umituz/react-native-video-editor 1.0.1

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

@@ -0,0 +1,92 @@
+/**
+ * ColorPickerHorizontal Component
+ * Horizontal scrolling color picker for shape layer
+ */
+
+import React from "react";
+import { View, ScrollView, StyleSheet, TouchableOpacity } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import { SHAPE_COLORS } from "../../../constants/shape-layer.constants";
+
+interface ColorPickerHorizontalProps {
+  title: string;
+  selectedColor: string;
+  onColorChange: (color: string) => void;
+}
+
+export const ColorPickerHorizontal: React.FC<ColorPickerHorizontalProps> = ({
+  title,
+  selectedColor,
+  onColorChange,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.section}>
+      <AtomicText
+        type="bodyMedium"
+        style={{
+          color: tokens.colors.textPrimary,
+          fontWeight: "600",
+          marginBottom: 12,
+        }}
+      >
+        {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
+                    : "#E5E7EB",
+                borderWidth: selectedColor === color.value ? 3 : 2,
+              },
+            ]}
+            onPress={() => onColorChange(color.value)}
+          >
+            {selectedColor === color.value && (
+              <AtomicIcon
+                name="Check"
+                size="sm"
+                color={color.value === "#FFFFFF" ? "primary" : "onSurface"}
+              />
+            )}
+          </TouchableOpacity>
+        ))}
+      </ScrollView>
+    </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/shape-layer/ShapePreview.tsx

@@ -0,0 +1,57 @@
+/**
+ * ShapePreview Component
+ * Preview section for shape layer
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { ShapeType } from "../../../constants/shape-layer.constants";
+import type { ShapeLayerFormState } from "../../../hooks/useShapeLayerForm";
+
+interface ShapePreviewProps {
+  formState: ShapeLayerFormState;
+}
+
+export const ShapePreview: React.FC<ShapePreviewProps> = ({ formState }) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={[styles.preview, { backgroundColor: tokens.colors.surface }]}>
+      <AtomicText
+        type="labelSmall"
+        style={{ color: tokens.colors.textSecondary, marginBottom: 12 }}
+      >
+        Preview
+      </AtomicText>
+      <View
+        style={[
+          styles.previewShape,
+          {
+            backgroundColor: formState.fillColor,
+            borderColor: formState.borderColor,
+            borderWidth: formState.borderWidth,
+            borderRadius: formState.shape === "circle" ? 50 : 0,
+            opacity: formState.opacity,
+          },
+        ]}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  preview: {
+    padding: 16,
+    borderRadius: 12,
+    alignItems: "center",
+    marginBottom: 16,
+  },
+  previewShape: {
+    width: 100,
+    height: 100,
+  },
+});

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

@@ -0,0 +1,102 @@
+/**
+ * ShapeTypeSelector Component
+ * Shape type selector for shape layer
+ */
+
+import React from "react";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import {
+  SHAPES,
+  type ShapeType,
+} from "../../../constants/shape-layer.constants";
+
+interface ShapeTypeSelectorProps {
+  selectedShape: ShapeType;
+  onShapeChange: (shape: ShapeType) => void;
+}
+
+export const ShapeTypeSelector: React.FC<ShapeTypeSelectorProps> = ({
+  selectedShape,
+  onShapeChange,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.section}>
+      <AtomicText
+        type="bodyMedium"
+        style={{
+          color: tokens.colors.textPrimary,
+          fontWeight: "600",
+          marginBottom: 12,
+        }}
+      >
+        Shape Type
+      </AtomicText>
+
+      <View style={styles.shapesRow}>
+        {SHAPES.map((s) => (
+          <TouchableOpacity
+            key={s.type}
+            style={[
+              styles.shapeCard,
+              {
+                backgroundColor:
+                  selectedShape === s.type
+                    ? tokens.colors.primary
+                    : tokens.colors.surface,
+                borderColor:
+                  selectedShape === s.type
+                    ? tokens.colors.primary
+                    : tokens.colors.borderLight,
+              },
+            ]}
+            onPress={() => onShapeChange(s.type)}
+          >
+            <AtomicIcon
+              name={s.icon as any}
+              size="lg"
+              color={selectedShape === s.type ? "onSurface" : "primary"}
+            />
+            <AtomicText
+              type="labelSmall"
+              style={{
+                color:
+                  selectedShape === s.type
+                    ? "#FFFFFF"
+                    : tokens.colors.textPrimary,
+                marginTop: 8,
+                fontWeight: selectedShape === s.type ? "600" : "400",
+              }}
+            >
+              {s.label}
+            </AtomicText>
+          </TouchableOpacity>
+        ))}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  section: {
+    marginBottom: 24,
+  },
+  shapesRow: {
+    flexDirection: "row",
+    gap: 12,
+  },
+  shapeCard: {
+    flex: 1,
+    padding: 16,
+    borderRadius: 12,
+    borderWidth: 2,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

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

@@ -0,0 +1,106 @@
+/**
+ * ValueSelector Component
+ * Reusable selector for border width, opacity, etc.
+ */
+
+import React from "react";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+interface ValueSelectorProps {
+  title: string;
+  value: number;
+  options: number[];
+  formatValue: (value: number) => string;
+  onValueChange: (value: number) => void;
+}
+
+export const ValueSelector: React.FC<ValueSelectorProps> = ({
+  title,
+  value,
+  options,
+  formatValue,
+  onValueChange,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.section}>
+      <View style={styles.sectionHeader}>
+        <AtomicText
+          type="bodyMedium"
+          style={{ color: tokens.colors.textPrimary, fontWeight: "600" }}
+        >
+          {title}
+        </AtomicText>
+        <AtomicText
+          type="bodyMedium"
+          style={{ color: tokens.colors.primary, fontWeight: "600" }}
+        >
+          {formatValue(value)}
+        </AtomicText>
+      </View>
+
+      <View style={styles.optionsGrid}>
+        {options.map((option) => (
+          <TouchableOpacity
+            key={option}
+            style={[
+              styles.optionButton,
+              {
+                backgroundColor:
+                  value === option
+                    ? tokens.colors.primary
+                    : tokens.colors.surface,
+                borderColor:
+                  value === option
+                    ? tokens.colors.primary
+                    : tokens.colors.borderLight,
+              },
+            ]}
+            onPress={() => onValueChange(option)}
+          >
+            <AtomicText
+              type="labelSmall"
+              style={{
+                color: value === option ? "#FFFFFF" : tokens.colors.textPrimary,
+                fontWeight: value === option ? "600" : "400",
+              }}
+            >
+              {formatValue(option)}
+            </AtomicText>
+          </TouchableOpacity>
+        ))}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  section: {
+    marginBottom: 24,
+  },
+  sectionHeader: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginBottom: 12,
+  },
+  optionsGrid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 8,
+  },
+  optionButton: {
+    flex: 1,
+    minWidth: "30%",
+    paddingVertical: 12,
+    paddingHorizontal: 8,
+    borderRadius: 8,
+    borderWidth: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

package/src/presentation/components/shape-layer/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Shape Layer Editor Components
+ * Barrel file for shape layer editor components
+ */
+
+export { ShapeTypeSelector } from "./ShapeTypeSelector";
+export { ColorPickerHorizontal } from "./ColorPickerHorizontal";
+export { ValueSelector } from "./ValueSelector";
+export { ShapePreview } from "./ShapePreview";

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

@@ -0,0 +1,91 @@
+/**
+ * ColorPicker Component
+ * Color picker for text layer
+ */
+
+import React from "react";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import { useLocalization } from "@umituz/react-native-localization";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import { TEXT_COLORS } from "../../../constants/text-layer.constants";
+
+interface ColorPickerProps {
+  selectedColor: string;
+  onColorChange: (color: string) => void;
+}
+
+export const ColorPicker: React.FC<ColorPickerProps> = ({
+  selectedColor,
+  onColorChange,
+}) => {
+  const { t } = useLocalization();
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.section}>
+      <AtomicText
+        type="bodyMedium"
+        style={{
+          color: tokens.colors.textPrimary,
+          fontWeight: "600",
+          marginBottom: 8,
+        }}
+      >
+        {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="Check"
+                size="sm"
+                color={
+                  color === "#FFFFFF" || color === "#FCD34D"
+                    ? "primary"
+                    : "onSurface"
+                }
+              />
+            )}
+          </TouchableOpacity>
+        ))}
+      </View>
+    </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/EditorActions.tsx

@@ -0,0 +1,95 @@
+/**
+ * EditorActions Component
+ * Action buttons for layer editors
+ */
+
+import React from "react";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import { useLocalization } from "@umituz/react-native-localization";
+
+interface EditorActionsProps {
+  onCancel: () => void;
+  onSave: () => void;
+  saveLabel: string;
+  isValid: boolean;
+}
+
+export const EditorActions: React.FC<EditorActionsProps> = ({
+  onCancel,
+  onSave,
+  saveLabel,
+  isValid,
+}) => {
+  const tokens = useAppDesignTokens();
+  const { t } = useLocalization();
+
+  return (
+    <View
+      style={[styles.actions, { borderTopColor: tokens.colors.borderLight }]}
+    >
+      <TouchableOpacity
+        style={[
+          styles.actionButton,
+          styles.cancelButton,
+          { borderColor: tokens.colors.borderLight },
+        ]}
+        onPress={onCancel}
+      >
+        <AtomicText
+          type="bodyMedium"
+          style={{ color: tokens.colors.textSecondary }}
+        >
+          {t("common.buttons.cancel", "Cancel")}
+        </AtomicText>
+      </TouchableOpacity>
+
+      <TouchableOpacity
+        style={[
+          styles.actionButton,
+          styles.saveButton,
+          {
+            backgroundColor: isValid
+              ? tokens.colors.primary
+              : tokens.colors.borderLight,
+          },
+        ]}
+        onPress={onSave}
+        disabled={!isValid}
+      >
+        <AtomicText
+          type="bodyMedium"
+          style={{ color: tokens.colors.onPrimary, fontWeight: "600" }}
+        >
+          {saveLabel}
+        </AtomicText>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  actions: {
+    flexDirection: "row",
+    gap: 12,
+    paddingTop: 16,
+    borderTopWidth: 1,
+  },
+  actionButton: {
+    flex: 1,
+    paddingVertical: 14,
+    borderRadius: 12,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  cancelButton: {
+    borderWidth: 1,
+  },
+  saveButton: {
+    // backgroundColor set dynamically
+  },
+});

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

@@ -0,0 +1,86 @@
+/**
+ * FontSizeSelector Component
+ * Font size selector for text layer
+ */
+
+import React from "react";
+import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
+import { useLocalization } from "@umituz/react-native-localization";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import { FONT_SIZES } from "../../../constants/text-layer.constants";
+
+interface FontSizeSelectorProps {
+  fontSize: number;
+  onFontSizeChange: (size: number) => void;
+}
+
+export const FontSizeSelector: React.FC<FontSizeSelectorProps> = ({
+  fontSize,
+  onFontSizeChange,
+}) => {
+  const { t } = useLocalization();
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.section}>
+      <AtomicText
+        type="bodyMedium"
+        style={{
+          color: tokens.colors.textPrimary,
+          fontWeight: "600",
+          marginBottom: 8,
+        }}
+      >
+        {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 ? "#FFFFFF" : tokens.colors.textPrimary,
+                fontWeight: fontSize === size ? "600" : "400",
+              }}
+            >
+              {size}
+            </AtomicText>
+          </TouchableOpacity>
+        ))}
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  section: {
+    marginBottom: 24,
+  },
+  sizeButton: {
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderRadius: 8,
+    borderWidth: 1,
+    marginRight: 8,
+  },
+});