@umituz/react-native-photo-editor 1.1.2 → 2.0.2

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@umituz/react-native-photo-editor",
-  "version": "1.1.2",
+  "version": "2.0.2",
   "description": "A powerful, generic photo editor for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts"
+  },
   "publishConfig": {
     "access": "public"
   },
@@ -14,33 +17,36 @@
   "keywords": [
     "react-native",
     "photo-editor",
-    "image-editor"
+    "image-editor",
+    "layers",
+    "stickers",
+    "filters"
   ],
   "author": "UmitUZ",
   "license": "MIT",
   "peerDependencies": {
-    "react": "*",
-    "react-native": "*",
     "@umituz/react-native-design-system": "*",
-    "react-native-gesture-handler": "*",
-    "react-native-safe-area-context": "*"
+    "expo-image": ">=1.0.0",
+    "react": ">=18.0.0",
+    "react-native": ">=0.73.0",
+    "react-native-gesture-handler": ">=2.0.0",
+    "react-native-safe-area-context": ">=4.0.0"
   },
   "dependencies": {
-    "expo-image-picker": "*",
-    "expo-media-library": "*",
     "expo-file-system": "*",
-    "expo-image": "*"
+    "expo-image-picker": "*",
+    "expo-media-library": "*"
   },
   "devDependencies": {
     "@types/react": "*",
     "@types/react-native": "*",
-    "@typescript-eslint/parser": "*",
     "@typescript-eslint/eslint-plugin": "*",
+    "@typescript-eslint/parser": "*",
+    "@umituz/react-native-design-system": "^4.25.90",
     "eslint": "*",
-    "typescript": "*",
+    "expo-image": "*",
     "react-native-gesture-handler": "*",
     "react-native-safe-area-context": "*",
-    "expo-application": "*",
-    "expo-device": "*"
+    "typescript": "*"
   }
 }

package/src/PhotoEditor.tsx

@@ -1,14 +1,9 @@
 import React, { useMemo } from "react";
 import { View, ScrollView, TouchableOpacity } from "react-native";
-import {
-  useAppDesignTokens,
-  AtomicText,
-  AtomicIcon,
-  BottomSheetModal,
-  SafeBottomSheetModalProvider,
-  useSafeAreaInsets,
-  DesignTokens,
-} from "@umituz/react-native-design-system";
+import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
+import { BottomSheetModal } from "@umituz/react-native-design-system/molecules";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { useSafeAreaInsets } from "@umituz/react-native-design-system/safe-area";
 
 import { EditorCanvas } from "./components/EditorCanvas";
 import { EditorToolbar } from "./components/EditorToolbar";
@@ -17,29 +12,43 @@ import { LayerManager } from "./components/LayerManager";
 import { TextEditorSheet } from "./components/TextEditorSheet";
 import { StickerPicker } from "./components/StickerPicker";
 import { FilterPicker } from "./components/FilterPicker";
+import { AdjustmentsSheet } from "./components/AdjustmentsSheet";
 import { AIMagicSheet } from "./components/AIMagicSheet";
 import { createEditorStyles } from "./styles";
 import { usePhotoEditorUI } from "./hooks/usePhotoEditorUI";
-import { Layer } from "./types";
+import { Layer, ImageFilters } from "./types";
 import { DEFAULT_FONTS } from "./constants";
 
 export interface EditorActions {
-  addTextLayer: (tokens: DesignTokens) => string;
+  addTextLayer: (defaultColor?: string) => string;
   updateLayer: (id: string, updates: Partial<Layer>) => void;
+  duplicateLayer: (id: string) => string | null;
+  deleteLayer: (id: string) => void;
+  moveLayerUp: (id: string) => void;
+  moveLayerDown: (id: string) => void;
   getLayers: () => Layer[];
   getActiveLayerId: () => string | null;
+  undo: () => void;
+  redo: () => void;
 }
 
 export interface PhotoEditorProps {
   imageUri: string;
-  onSave?: (uri: string) => void;
+  /**
+   * Called when the user taps Save.
+   * Receives the original imageUri, current layers, and active filters
+   * so the host app can composite/export however it needs.
+   */
+  onSave?: (uri: string, layers: Layer[], filters: ImageFilters) => void;
   onClose: () => void;
   title?: string;
+  /** Render extra tools below the canvas. Receives editor action helpers. */
   customTools?: React.ReactNode | ((actions: EditorActions) => React.ReactNode);
   initialCaption?: string;
   t: (key: string) => string;
   fonts?: readonly string[];
-  showAI?: boolean;
+  /** Pass a handler to enable the AI caption feature */
+  onAICaption?: (style: string) => Promise<string> | void;
 }
 
 export const PhotoEditor: React.FC<PhotoEditorProps> = ({
@@ -51,43 +60,152 @@ export const PhotoEditor: React.FC<PhotoEditorProps> = ({
   initialCaption,
   t,
   fonts = DEFAULT_FONTS,
-  showAI = true,
+  onAICaption,
 }) => {
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
-  const styles = useMemo(() => createEditorStyles(tokens, insets), [tokens, insets]);
-  const ui = usePhotoEditorUI(initialCaption, tokens);
+  const styles = useMemo(
+    () => createEditorStyles(tokens, insets),
+    [tokens, insets],
+  );
+  const ui = usePhotoEditorUI(initialCaption);
+
+  const actions: EditorActions = useMemo(
+    () => ({
+      addTextLayer: (color?: string) =>
+        ui.addTextLayer(color ?? tokens.colors.textPrimary),
+      updateLayer: ui.updateLayer,
+      duplicateLayer: ui.duplicateLayer,
+      deleteLayer: ui.deleteLayer,
+      moveLayerUp: ui.moveLayerUp,
+      moveLayerDown: ui.moveLayerDown,
+      getLayers: () => ui.layers,
+      getActiveLayerId: () => ui.activeLayerId,
+      undo: ui.undo,
+      redo: ui.redo,
+    }),
+    [ui, tokens.colors.textPrimary],
+  );
 
-  const actions: EditorActions = useMemo(() => ({
-    addTextLayer: ui.addTextLayer,
-    updateLayer: ui.updateLayer,
-    getLayers: () => ui.layers,
-    getActiveLayerId: () => ui.activeLayerId,
-  }), [ui.addTextLayer, ui.updateLayer, ui.layers, ui.activeLayerId]);
+  const handleSave = () => onSave?.(imageUri, ui.layers, ui.filters);
 
   return (
-    <SafeBottomSheetModalProvider>
-      <View style={styles.container}>
-        <View style={styles.header}>
-          <TouchableOpacity onPress={onClose}><AtomicIcon name="close" size="md" color="textPrimary" /></TouchableOpacity>
-          <AtomicText type="headlineSmall" style={styles.headerTitle}>{title}</AtomicText>
-          <TouchableOpacity onPress={() => onSave?.(imageUri)}><AtomicText fontWeight="bold" color="primary">{t("common.save")}</AtomicText></TouchableOpacity>
-        </View>
-
-        <ScrollView contentContainerStyle={styles.scrollContent}>
-          <EditorCanvas imageUrl={imageUri} layers={ui.layers} activeLayerId={ui.activeLayerId} onLayerTap={ui.handleTextLayerTap} onLayerMove={(id, x, y) => ui.updateLayer(id, { x, y })} styles={styles} />
-          {typeof customTools === "function" ? customTools(actions) : customTools}
-          <FontControls fontSize={ui.fontSize} selectedFont={ui.selectedFont} fonts={fonts} onFontSizeChange={ui.setFontSize} onFontSelect={ui.setSelectedFont} styles={styles} />
-        </ScrollView>
-
-        <EditorToolbar onAddText={ui.handleAddText} onAddSticker={() => ui.stickerSheetRef.current?.present()} onOpenFilters={() => ui.filterSheetRef.current?.present()} onOpenLayers={() => ui.layerSheetRef.current?.present()} onAIMagic={showAI ? () => ui.aiSheetRef.current?.present() : undefined} styles={styles} t={t} />
-
-        <BottomSheetModal ref={ui.textEditorSheetRef} snapPoints={["40%"]}><TextEditorSheet value={ui.editingText} onChange={ui.setEditingText} onSave={ui.handleSaveText} t={t} /></BottomSheetModal>
-        <BottomSheetModal ref={ui.stickerSheetRef} snapPoints={["50%"]}><StickerPicker onSelectSticker={ui.handleSelectSticker} /></BottomSheetModal>
-        <BottomSheetModal ref={ui.filterSheetRef} snapPoints={["40%"]}><FilterPicker selectedFilter={ui.selectedFilter} onSelectFilter={ui.handleSelectFilter} /></BottomSheetModal>
-        <BottomSheetModal ref={ui.layerSheetRef} snapPoints={["50%"]}><LayerManager layers={ui.layers} activeLayerId={ui.activeLayerId} onSelectLayer={ui.selectLayer} onDeleteLayer={ui.deleteLayer} t={t} /></BottomSheetModal>
-        <BottomSheetModal ref={ui.aiSheetRef} snapPoints={["60%"]}><AIMagicSheet onGenerateCaption={(_s) => { ui.aiSheetRef.current?.dismiss(); /* AI trigger */ }} /></BottomSheetModal>
+    <View style={styles.container}>
+      {/* Header */}
+      <View style={styles.header}>
+        <TouchableOpacity
+          onPress={onClose}
+          accessibilityLabel="Close editor"
+          accessibilityRole="button"
+        >
+          <AtomicIcon name="close" size="md" color="textPrimary" />
+        </TouchableOpacity>
+        <AtomicText type="headlineSmall" style={styles.headerTitle}>
+          {title}
+        </AtomicText>
+        <TouchableOpacity
+          onPress={handleSave}
+          accessibilityLabel="Save"
+          accessibilityRole="button"
+        >
+          <AtomicText fontWeight="bold" color="primary">
+            {t("common.save") || "Save"}
+          </AtomicText>
+        </TouchableOpacity>
       </View>
-    </SafeBottomSheetModalProvider>
+
+      <ScrollView contentContainerStyle={styles.scrollContent}>
+        <EditorCanvas
+          imageUrl={imageUri}
+          layers={ui.layers}
+          activeLayerId={ui.activeLayerId}
+          filters={ui.filters}
+          onLayerTap={ui.handleTextLayerTap}
+          onLayerTransform={ui.handleLayerTransform}
+          styles={styles}
+        />
+
+        {typeof customTools === "function" ? customTools(actions) : customTools}
+
+        <FontControls
+          fontSize={ui.fontSize}
+          selectedFont={ui.selectedFont}
+          fonts={fonts}
+          onFontSizeChange={ui.setFontSize}
+          onFontSelect={ui.setSelectedFont}
+          styles={styles}
+        />
+      </ScrollView>
+
+      <EditorToolbar
+        onAddText={ui.handleAddText}
+        onAddSticker={() => ui.stickerSheetRef.current?.present()}
+        onOpenFilters={() => ui.filterSheetRef.current?.present()}
+        onOpenAdjustments={() => ui.adjustmentsSheetRef.current?.present()}
+        onOpenLayers={() => ui.layerSheetRef.current?.present()}
+        onAIMagic={onAICaption ? () => ui.aiSheetRef.current?.present() : undefined}
+        onUndo={ui.undo}
+        onRedo={ui.redo}
+        canUndo={ui.canUndo}
+        canRedo={ui.canRedo}
+        styles={styles}
+        t={t}
+      />
+
+      {/* Bottom Sheets */}
+      <BottomSheetModal ref={ui.textEditorSheetRef} snapPoints={["55%"]}>
+        <TextEditorSheet
+          value={ui.editingText}
+          onChange={ui.setEditingText}
+          onSave={ui.handleSaveText}
+          t={t}
+          color={ui.editingColor}
+          onColorChange={ui.setEditingColor}
+          textAlign={ui.editingAlign}
+          onTextAlignChange={ui.setEditingAlign}
+          isBold={ui.editingBold}
+          onBoldChange={ui.setEditingBold}
+          isItalic={ui.editingItalic}
+          onItalicChange={ui.setEditingItalic}
+        />
+      </BottomSheetModal>
+
+      <BottomSheetModal ref={ui.stickerSheetRef} snapPoints={["50%"]}>
+        <StickerPicker onSelectSticker={ui.handleSelectSticker} />
+      </BottomSheetModal>
+
+      <BottomSheetModal ref={ui.filterSheetRef} snapPoints={["40%"]}>
+        <FilterPicker
+          selectedFilter={ui.selectedFilter}
+          onSelectFilter={ui.handleSelectFilter}
+        />
+      </BottomSheetModal>
+
+      <BottomSheetModal ref={ui.adjustmentsSheetRef} snapPoints={["55%"]}>
+        <AdjustmentsSheet
+          filters={ui.filters}
+          onFiltersChange={ui.updateFilters}
+        />
+      </BottomSheetModal>
+
+      <BottomSheetModal ref={ui.layerSheetRef} snapPoints={["55%"]}>
+        <LayerManager
+          layers={ui.layers}
+          activeLayerId={ui.activeLayerId}
+          onSelectLayer={ui.selectLayer}
+          onDeleteLayer={ui.deleteLayer}
+          onDuplicateLayer={ui.duplicateLayer}
+          onMoveLayerUp={ui.moveLayerUp}
+          onMoveLayerDown={ui.moveLayerDown}
+          t={t}
+        />
+      </BottomSheetModal>
+
+      {onAICaption && (
+        <BottomSheetModal ref={ui.aiSheetRef} snapPoints={["60%"]}>
+          <AIMagicSheet onGenerateCaption={onAICaption} />
+        </BottomSheetModal>
+      )}
+    </View>
   );
 };

package/src/components/AIMagicSheet.tsx

@@ -1,29 +1,27 @@
-import React, { useState } from "react";
+import React, { useState, useMemo } from "react";
 import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
-import { AtomicText, AtomicIcon, useAppDesignTokens, AtomicButton } from "@umituz/react-native-design-system";
+import { AtomicText, AtomicIcon, AtomicButton } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { DEFAULT_AI_STYLES } from "../constants";
 
 interface AIMagicSheetProps {
-  onGenerateCaption: (style: string) => void;
+  /**
+   * Called with the selected style ID. Should return a generated caption string.
+   * If undefined, the AI button is disabled.
+   */
+  onGenerateCaption?: (style: string) => Promise<string> | void;
   isLoading?: boolean;
 }
 
-const AI_STYLES = [
-  { id: "viral", label: "✨ Viral", desc: "Catchy & shareable" },
-  { id: "funny", label: "😂 Funny", desc: "Humor that connects" },
-  { id: "savage", label: "🔥 Savage", desc: "Bold & edgy" },
-  { id: "wholesome", label: "💕 Wholesome", desc: "Warm & positive" },
-  { id: "sarcastic", label: "😏 Sarcastic", desc: "Witty & ironic" },
-  { id: "relatable", label: "🎯 Relatable", desc: "Everyone gets it" },
-];
-
 export const AIMagicSheet: React.FC<AIMagicSheetProps> = ({
   onGenerateCaption,
   isLoading = false,
 }) => {
   const tokens = useAppDesignTokens();
   const [selected, setSelected] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
 
-  const styles = StyleSheet.create({
+  const styles = useMemo(() => StyleSheet.create({
     container: { padding: tokens.spacing.md, gap: tokens.spacing.md },
     header: { flexDirection: "row", alignItems: "center", gap: tokens.spacing.sm },
     grid: { gap: tokens.spacing.sm },
@@ -41,7 +39,19 @@ export const AIMagicSheet: React.FC<AIMagicSheetProps> = ({
       backgroundColor: tokens.colors.primary + "10",
     },
     info: { flex: 1, marginLeft: tokens.spacing.sm },
-  });
+  }), [tokens]);
+
+  const handleGenerate = async () => {
+    if (!selected || !onGenerateCaption) return;
+    setLoading(true);
+    try {
+      await onGenerateCaption(selected);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const isGenerating = isLoading || loading;
 
   return (
     <View style={styles.container}>
@@ -51,29 +61,43 @@ export const AIMagicSheet: React.FC<AIMagicSheetProps> = ({
       </View>
       <ScrollView showsVerticalScrollIndicator={false}>
         <View style={styles.grid}>
-          {AI_STYLES.map((style) => (
-            <TouchableOpacity
-              key={style.id}
-              style={[styles.card, selected === style.id && styles.cardActive]}
-              onPress={() => setSelected(style.id)}
-            >
-              <AtomicText style={{ fontSize: 24 }}>{style.label.split(" ")[0]}</AtomicText>
-              <View style={styles.info}>
-                <AtomicText fontWeight="bold" color={selected === style.id ? "primary" : "textPrimary"}>
-                  {style.label.split(" ").slice(1).join(" ")}
-                </AtomicText>
-                <AtomicText type="labelSmall" color="textSecondary">{style.desc}</AtomicText>
-              </View>
-              {selected === style.id && <AtomicIcon name="checkmark-circle" size="md" color="primary" />}
-            </TouchableOpacity>
-          ))}
+          {DEFAULT_AI_STYLES.map((style) => {
+            const isActive = selected === style.id;
+            const [emoji, ...words] = style.label.split(" ");
+            return (
+              <TouchableOpacity
+                key={style.id}
+                style={[styles.card, isActive && styles.cardActive]}
+                onPress={() => setSelected(style.id)}
+                accessibilityLabel={style.label}
+                accessibilityRole="button"
+                accessibilityState={{ selected: isActive }}
+              >
+                <AtomicText style={{ fontSize: 24 }}>{emoji}</AtomicText>
+                <View style={styles.info}>
+                  <AtomicText
+                    fontWeight="bold"
+                    color={isActive ? "primary" : "textPrimary"}
+                  >
+                    {words.join(" ")}
+                  </AtomicText>
+                  <AtomicText type="labelSmall" color="textSecondary">
+                    {style.desc}
+                  </AtomicText>
+                </View>
+                {isActive && (
+                  <AtomicIcon name="checkmark-circle" size="md" color="primary" />
+                )}
+              </TouchableOpacity>
+            );
+          })}
         </View>
       </ScrollView>
       <AtomicButton
         variant="primary"
-        disabled={!selected || isLoading}
-        onPress={() => selected && onGenerateCaption(selected)}
-        loading={isLoading}
+        disabled={!selected || !onGenerateCaption || isGenerating}
+        onPress={handleGenerate}
+        loading={isGenerating}
         icon="sparkles"
       >
         Generate Caption

package/src/components/AdjustmentsSheet.tsx

@@ -0,0 +1,108 @@
+import React from "react";
+import { View, TouchableOpacity } from "react-native";
+import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { Slider } from "./Slider";
+import { ImageFilters, DEFAULT_IMAGE_FILTERS } from "../types";
+
+interface AdjustmentsSheetProps {
+  filters: ImageFilters;
+  onFiltersChange: (filters: ImageFilters) => void;
+}
+
+export const AdjustmentsSheet: React.FC<AdjustmentsSheetProps> = ({
+  filters,
+  onFiltersChange,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const update = (key: keyof ImageFilters, val: number) => {
+    onFiltersChange({ ...filters, [key]: val });
+  };
+
+  const handleReset = () => onFiltersChange(DEFAULT_IMAGE_FILTERS);
+
+  return (
+    <View style={{ padding: tokens.spacing.md, gap: tokens.spacing.lg }}>
+      <View
+        style={{
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "space-between",
+        }}
+      >
+        <View style={{ flexDirection: "row", alignItems: "center", gap: tokens.spacing.sm }}>
+          <AtomicIcon name="brush" size="md" color="primary" />
+          <AtomicText type="headlineSmall">Adjustments</AtomicText>
+        </View>
+        <TouchableOpacity
+          onPress={handleReset}
+          accessibilityLabel="Reset adjustments"
+          accessibilityRole="button"
+          style={{
+            paddingHorizontal: tokens.spacing.md,
+            paddingVertical: tokens.spacing.xs,
+            backgroundColor: tokens.colors.surfaceVariant,
+            borderRadius: tokens.borders.radius.sm,
+          }}
+        >
+          <AtomicText type="labelSmall" color="textSecondary">
+            Reset
+          </AtomicText>
+        </TouchableOpacity>
+      </View>
+
+      <Slider
+        label="Brightness"
+        value={filters.brightness}
+        min={0.5}
+        max={2}
+        step={0.05}
+        onValueChange={(v) => update("brightness", v)}
+        formatValue={(v) => `${Math.round((v - 1) * 100) >= 0 ? "+" : ""}${Math.round((v - 1) * 100)}%`}
+      />
+
+      <Slider
+        label="Contrast"
+        value={filters.contrast}
+        min={0.5}
+        max={2}
+        step={0.05}
+        onValueChange={(v) => update("contrast", v)}
+        formatValue={(v) => `${Math.round((v - 1) * 100) >= 0 ? "+" : ""}${Math.round((v - 1) * 100)}%`}
+      />
+
+      <Slider
+        label="Saturation"
+        value={filters.saturation}
+        min={0}
+        max={2}
+        step={0.05}
+        onValueChange={(v) => update("saturation", v)}
+        formatValue={(v) => `${Math.round((v - 1) * 100) >= 0 ? "+" : ""}${Math.round((v - 1) * 100)}%`}
+      />
+
+      <Slider
+        label="Hue Rotate"
+        value={filters.hueRotate ?? 0}
+        min={0}
+        max={360}
+        step={1}
+        onValueChange={(v) => update("hueRotate", v)}
+        formatValue={(v) => `${Math.round(v)}°`}
+      />
+
+      <Slider
+        label="Sepia"
+        value={filters.sepia}
+        min={0}
+        max={1}
+        step={0.05}
+        onValueChange={(v) => update("sepia", v)}
+        formatValue={(v) => `${Math.round(v * 100)}%`}
+      />
+    </View>
+  );
+};
+
+export default React.memo(AdjustmentsSheet);

package/src/components/ColorPicker.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { View, TouchableOpacity } from "react-native";
+import { AtomicText } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { DEFAULT_TEXT_COLORS } from "../constants";
+
+interface ColorPickerProps {
+  selectedColor: string;
+  onSelectColor: (color: string) => void;
+  label?: string;
+  colors?: readonly string[];
+}
+
+export const ColorPicker: React.FC<ColorPickerProps> = ({
+  selectedColor,
+  onSelectColor,
+  label,
+  colors = DEFAULT_TEXT_COLORS,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={{ gap: tokens.spacing.xs }}>
+      {label && (
+        <AtomicText type="labelMedium" color="textSecondary">
+          {label}
+        </AtomicText>
+      )}
+      <View
+        style={{
+          flexDirection: "row",
+          flexWrap: "wrap",
+          gap: tokens.spacing.xs,
+        }}
+      >
+        {colors.map((color) => {
+          const isSelected = selectedColor === color;
+          return (
+            <TouchableOpacity
+              key={color}
+              onPress={() => onSelectColor(color)}
+              accessibilityLabel={`Color ${color}`}
+              accessibilityRole="button"
+              accessibilityState={{ selected: isSelected }}
+              style={{
+                width: 34,
+                height: 34,
+                borderRadius: 17,
+                backgroundColor: color,
+                borderWidth: isSelected ? 3 : 1.5,
+                borderColor: isSelected
+                  ? tokens.colors.primary
+                  : tokens.colors.border,
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              {isSelected && (
+                <View
+                  style={{
+                    width: 10,
+                    height: 10,
+                    borderRadius: 5,
+                    backgroundColor:
+                      color === "#FFFFFF" ? "#000000" : "#FFFFFF",
+                  }}
+                />
+              )}
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    </View>
+  );
+};
+
+export default React.memo(ColorPicker);