react-native-color-picker-palette 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Sabri Ghazali
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,340 @@
+# React Native Color Palette
+
+A versatile, customizable color picker for React Native with two flavors:
+
+- **Full Version**: Uses `react-native-svg` for smooth gradients and precise rendering
+- **Lite Version**: Zero external dependencies, uses pure React Native Views
+
+<p align="center">
+  <img src="assets/rectangle-full-version.png" alt="Rectangle Picker" width="280" />
+  <img src="assets/circle-full-version.png" alt="Circle Picker" width="280" />
+</p>
+
+## Features
+
+- Circular color wheel (hue + saturation)
+- Rectangle saturation/value picker
+- Hue slider bar
+- Alpha slider with checkerboard background
+- Value/Brightness slider
+- HEX and RGB input fields
+- Fully customizable (size, colors, visibility)
+- TypeScript support
+- iOS and Android compatible
+
+## Installation
+
+```bash
+# Using npm
+npm install react-native-color-picker-palette
+
+# Using yarn
+yarn add react-native-color-picker-palette
+```
+
+### Full Version (with react-native-svg)
+
+If you want to use the full version with smooth SVG gradients:
+
+```bash
+npm install react-native-svg
+cd ios && pod install
+```
+
+### Lite Version (zero dependencies)
+
+The lite version works out of the box - no additional dependencies needed!
+
+## Usage
+
+### Basic Usage (Full Version)
+
+```tsx
+import React from 'react';
+import { View } from 'react-native';
+import { ColorPicker, useColor } from 'react-native-color-picker-palette';
+
+function MyColorPicker() {
+  const [color, setColor] = useColor('#FF0000');
+
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <ColorPicker
+        color={color}
+        onChange={setColor}
+        onChangeComplete={(c) => console.log('Selected:', c.hex)}
+      />
+    </View>
+  );
+}
+```
+
+### Lite Version (Zero Dependencies)
+
+```tsx
+import React from 'react';
+import { View } from 'react-native';
+import { ColorPicker, useColor } from 'react-native-color-picker-palette/lite';
+
+function MyColorPicker() {
+  const [color, setColor] = useColor('#FF0000');
+
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <ColorPicker
+        color={color}
+        onChange={setColor}
+        onChangeComplete={(c) => console.log('Selected:', c.hex)}
+      />
+    </View>
+  );
+}
+```
+
+## Picker Variants
+
+### Rectangle Variant (default)
+
+```tsx
+<ColorPicker variant="rectangle" ... />
+```
+
+- Saturation/Value rectangle with current hue
+- **Hue slider** is always visible (required to change hue)
+- **Value slider** is NOT shown (value is controlled in the rectangle)
+
+### Circle Variant
+
+```tsx
+<ColorPicker variant="circle" ... />
+```
+
+- Color wheel with hue around the circle and saturation from center
+- **Value/Brightness slider** is shown (to control brightness)
+- `hideHue` prop works to hide the hue slider
+
+## API Reference
+
+### ColorPicker Props
+
+| Prop | Type | Default | Variant | Description |
+|------|------|---------|---------|-------------|
+| `color` | `IColor` | **required** | Both | Current color value |
+| `onChange` | `(color: IColor) => void` | **required** | Both | Called on every color change during interaction |
+| `onChangeComplete` | `(color: IColor) => void` | - | Both | Called when interaction ends (finger lifted) |
+| `variant` | `'circle' \| 'rectangle'` | `'rectangle'` | - | Picker variant |
+| `width` | `number` | `250` | Both | Width of the picker (diameter for circle) |
+| `barHeight` | `number` | `10` | Both | Height of slider bars |
+| `thumbSize` | `number` | `24` | Both | Size of thumb indicators |
+| `hideHue` | `boolean` | `false` | Circle only | Hide the hue slider (ignored for rectangle) |
+| `hideAlpha` | `boolean` | `false` | Both | Hide the alpha slider |
+| `hidePreview` | `boolean` | `false` | Both | Hide the color preview |
+| `hideInput` | `boolean` | `false` | Both | Hide the input fields |
+| `disabled` | `boolean` | `false` | Both | Disable all interactions |
+
+### Variant-Specific Behavior
+
+| Feature | Rectangle | Circle |
+|---------|-----------|--------|
+| Hue selection | Via Hue slider (always shown) | Via color wheel angle |
+| Saturation selection | X-axis of rectangle | Distance from center |
+| Value/Brightness selection | Y-axis of rectangle | Via Value slider |
+| Hue slider | Always visible | Optional (use `hideHue`) |
+| Value slider | Not shown | Always shown |
+
+### IColor Type
+
+```typescript
+interface IColor {
+  hex: string;      // e.g., "#FF0000" or "#FF0000FF" with alpha
+  rgb: IRGB;
+  hsv: IHSV;
+}
+
+interface IRGB {
+  r: number;  // 0-255
+  g: number;  // 0-255
+  b: number;  // 0-255
+  a: number;  // 0-1
+}
+
+interface IHSV {
+  h: number;  // 0-360
+  s: number;  // 0-100
+  v: number;  // 0-100
+  a: number;  // 0-1
+}
+```
+
+### Hooks
+
+#### useColor
+
+```tsx
+const [color, setColor] = useColor('#FF0000');
+```
+
+Manages color state with automatic conversion from hex string.
+
+#### useColorWithCallback
+
+```tsx
+const {
+  color,
+  setColor,
+  handleChange,
+  handleChangeComplete,
+} = useColorWithCallback('#FF0000', (color) => {
+  console.log('Color changed:', color.hex);
+});
+```
+
+Manages color state with a callback for change completion.
+
+### ColorService
+
+Utility for color conversions:
+
+```tsx
+import { ColorService } from 'react-native-color-picker-palette';
+
+// Create color from hex
+const color = ColorService.fromHex('#FF5500');
+
+// Create color from RGB
+const color = ColorService.fromRgb({ r: 255, g: 85, b: 0, a: 1 });
+
+// Create color from HSV
+const color = ColorService.fromHsv({ h: 20, s: 100, v: 100, a: 1 });
+
+// Get string representations
+ColorService.toRgbString(color.rgb);   // "rgb(255, 85, 0)"
+ColorService.toRgbaString(color.rgb);  // "rgba(255, 85, 0, 1)"
+ColorService.toHslString(color.hsv);   // "hsl(20, 100%, 50%)"
+```
+
+## Individual Components
+
+For custom layouts, you can use individual components:
+
+```tsx
+import {
+  Saturation,           // Circular color wheel (for circle variant)
+  RectangleSaturation,  // Rectangle saturation/value picker
+  Hue,                  // Hue slider
+  Alpha,                // Alpha slider
+  Value,                // Brightness slider (for circle variant)
+  Fields,               // HEX + RGB inputs
+  HexField,             // HEX input only
+  RgbFields,            // RGB inputs only
+  Thumb,                // Thumb indicator
+} from 'react-native-color-picker-palette';
+```
+
+### Example: Custom Layout
+
+```tsx
+import React from 'react';
+import { View } from 'react-native';
+import {
+  RectangleSaturation,
+  Hue,
+  Alpha,
+  useColor,
+} from 'react-native-color-picker-palette';
+
+function CustomColorPicker() {
+  const [color, setColor] = useColor('#FF0000');
+
+  return (
+    <View style={{ padding: 20 }}>
+      <RectangleSaturation
+        color={color}
+        onChange={setColor}
+        width={300}
+        height={200}
+        thumbSize={28}
+      />
+      <View style={{ height: 20 }} />
+      <Hue
+        color={color}
+        onChange={setColor}
+        barHeight={12}
+        thumbSize={24}
+      />
+      <View style={{ height: 10 }} />
+      <Alpha
+        color={color}
+        onChange={setColor}
+        barHeight={12}
+        thumbSize={24}
+      />
+    </View>
+  );
+}
+```
+
+## Full vs Lite: When to Use Which?
+
+### Use Full Version When:
+- You need the smoothest possible gradients
+- You're already using `react-native-svg` in your project
+- Visual quality is the top priority
+
+### Use Lite Version When:
+- You want zero additional dependencies
+- You're using Expo and want to avoid native modules
+- Bundle size is a concern
+- You need a quick setup without pod install
+
+## Screenshots
+
+### Full Version (with react-native-svg)
+
+| Rectangle | Circle |
+|:---------:|:------:|
+| <img src="assets/rectangle-full-version.png" alt="Rectangle Full" width="300" /> | <img src="assets/circle-full-version.png" alt="Circle Full" width="300" /> |
+
+### Lite Version (zero dependencies)
+
+| Rectangle | Circle |
+|:---------:|:------:|
+| <img src="assets/rectangle-lite-version.png" alt="Rectangle Lite" width="300" /> | <img src="assets/circle-lite-version.png" alt="Circle Lite" width="300" /> |
+
+## TypeScript Support
+
+This package is written in TypeScript and includes full type definitions:
+
+```tsx
+import type {
+  IColor,
+  IRGB,
+  IHSV,
+  ColorModel,
+  IColorPickerProps,
+  ISaturationProps,
+  IRectangleSaturationProps,
+  IHueProps,
+  IAlphaProps,
+  IValueProps,
+  IThumbProps,
+  IFieldsProps,
+  ILayout,
+} from 'react-native-color-picker-palette';
+```
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## License
+
+MIT License - see the [LICENSE](LICENSE) file for details.
+
+## Author
+
+Sabri Ghazali
+
+---
+
+Made with React Native

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "react-native-color-picker-palette",
+  "version": "1.0.0",
+  "description": "A versatile color picker for React Native with two flavors: Full (with react-native-svg) and Lite (zero dependencies)",
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "require": "./src/index.ts",
+      "types": "./src/index.ts"
+    },
+    "./lite": {
+      "import": "./src/lite/index.ts",
+      "require": "./src/lite/index.ts",
+      "types": "./src/lite/index.ts"
+    }
+  },
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "react-native",
+    "color-picker",
+    "color-wheel",
+    "hsv",
+    "rgb",
+    "hex",
+    "color-palette",
+    "react-native-svg",
+    "zero-dependencies"
+  ],
+  "author": "Sabri Ghazali",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SabriGhazali/react-native-color-palette.git"
+  },
+  "bugs": {
+    "url": "https://github.com/SabriGhazali/react-native-color-palette/issues"
+  },
+  "homepage": "https://github.com/SabriGhazali/react-native-color-palette#readme",
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-native": ">=0.60.0",
+    "react-native-svg": ">=12.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native-svg": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-native": "^0.72.0",
+    "react": "^18.2.0",
+    "react-native": "^0.72.0",
+    "react-native-svg": "^13.0.0",
+    "typescript": "^5.0.0"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  }
+}

package/src/core/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useColor, useColorWithCallback } from './useColor';
+export { useComponentLayout } from './useComponentLayout';

package/src/core/hooks/useColor.ts

@@ -0,0 +1,93 @@
+import { useState, useEffect, useCallback } from 'react';
+import type { IColor } from '../types';
+import { ColorService } from '../services';
+
+/**
+ * Hook for managing color state
+ *
+ * @param initialColor - Initial color as hex string (e.g., '#FF0000')
+ * @returns Tuple of [color, setColor] - Current color object and setter function
+ *
+ * @example
+ * ```tsx
+ * const [color, setColor] = useColor('#FF0000');
+ *
+ * return (
+ *   <ColorPicker
+ *     color={color}
+ *     onChange={setColor}
+ *   />
+ * );
+ * ```
+ */
+export function useColor(
+  initialColor: string
+): [IColor, React.Dispatch<React.SetStateAction<IColor>>] {
+  const [color, setColor] = useState<IColor>(() =>
+    ColorService.convert('hex', initialColor)
+  );
+
+  // Update color when initialColor prop changes
+  useEffect(() => {
+    setColor(ColorService.convert('hex', initialColor));
+  }, [initialColor]);
+
+  return [color, setColor];
+}
+
+/**
+ * Hook for managing color state with change complete callback
+ *
+ * @param initialColor - Initial color as hex string
+ * @param onChangeComplete - Callback when color selection is complete
+ * @returns Object with color state and handlers
+ *
+ * @example
+ * ```tsx
+ * const {
+ *   color,
+ *   handleChange,
+ *   handleChangeComplete
+ * } = useColorWithCallback('#FF0000', (color) => {
+ *   console.log('Final color:', color.hex);
+ * });
+ *
+ * return (
+ *   <ColorPicker
+ *     color={color}
+ *     onChange={handleChange}
+ *     onChangeComplete={handleChangeComplete}
+ *   />
+ * );
+ * ```
+ */
+export function useColorWithCallback(
+  initialColor: string,
+  onChangeComplete?: (color: IColor) => void
+): {
+  color: IColor;
+  setColor: React.Dispatch<React.SetStateAction<IColor>>;
+  handleChange: (color: IColor) => void;
+  handleChangeComplete: (color: IColor) => void;
+} {
+  const [color, setColor] = useColor(initialColor);
+
+  const handleChange = useCallback((newColor: IColor) => {
+    setColor(newColor);
+  }, []);
+
+  const handleChangeComplete = useCallback(
+    (newColor: IColor) => {
+      setColor(newColor);
+      onChangeComplete?.(newColor);
+    },
+    [onChangeComplete]
+  );
+
+  return {
+    color,
+    setColor,
+    handleChange,
+    handleChangeComplete,
+  };
+}

package/src/core/hooks/useComponentLayout.ts

@@ -0,0 +1,38 @@
+import { useState, useCallback } from 'react';
+import type { LayoutChangeEvent } from 'react-native';
+import type { ILayout } from '../types';
+
+/**
+ * Hook for tracking component layout dimensions
+ *
+ * @returns Tuple of [layout, onLayout] - Current layout and handler
+ *
+ * @example
+ * ```tsx
+ * const [layout, onLayout] = useComponentLayout();
+ *
+ * return (
+ *   <View onLayout={onLayout}>
+ *     <Text>Width: {layout.width}</Text>
+ *   </View>
+ * );
+ * ```
+ */
+export function useComponentLayout(): [
+  ILayout,
+  (event: LayoutChangeEvent) => void
+] {
+  const [layout, setLayout] = useState<ILayout>({
+    width: 0,
+    height: 0,
+    x: 0,
+    y: 0,
+  });
+
+  const onLayout = useCallback((event: LayoutChangeEvent) => {
+    const { width, height, x, y } = event.nativeEvent.layout;
+    setLayout({ width, height, x, y });
+  }, []);
+
+  return [layout, onLayout];
+}

package/src/core/index.ts

@@ -0,0 +1,19 @@
+// Core exports - shared between full and lite versions
+export { ColorService } from './services';
+export { useColor, useColorWithCallback, useComponentLayout } from './hooks';
+export { clamp, padZero, toHexString, round, safeParseFloat, safeParseInt } from './utils';
+export type {
+  IColor,
+  IRGB,
+  IHSV,
+  ColorModel,
+  IColorPickerProps,
+  ISaturationProps,
+  IRectangleSaturationProps,
+  IHueProps,
+  IAlphaProps,
+  IValueProps,
+  IThumbProps,
+  IFieldsProps,
+  ILayout,
+} from './types';