paint_box_react_native 0.1.0

package/lib/typescript/src/PaintEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaintEditor.d.ts","sourceRoot":"","sources":["../../../src/PaintEditor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAY,KAAK,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAIrD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,qBAAa,WAAY,YAAW,YAAY;IAC9C,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC;IAEvB,IAAI,IAAI,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,IAAI,GAAG,SAAS;IAOvD,IAAI;IAOJ,IAAI;IAOJ,KAAK;IAOL,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM;IAOpD,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI;IAchE,QAAQ,IAAI,OAAO,CAAC,OAAO,CAAC;IAa5B,SAAS,CAAC,KAAK,EAAE,OAAO;IAOxB,YAAY,CAAC,SAAS,EAAE,SAAS;IAO3B,YAAY,IAAI,OAAO,CAAC,SAAS,CAAC;IAmBxC,cAAc,CAAC,WAAW,EAAE,KAAK;IAW3B,cAAc,IAAI,OAAO,CAAC,KAAK,CAAC;IActC,aAAa,CAAC,IAAI,EAAE,MAAM;IAO1B,aAAa,IAAI,OAAO,CAAC,MAAM,CAAC;CAYjC"}

package/lib/typescript/src/dto/BaseDTO.d.ts

@@ -0,0 +1,5 @@
+export declare abstract class BaseDTO {
+    abstract toJSON(): void;
+    toJSONString(): string;
+}
+//# sourceMappingURL=BaseDTO.d.ts.map

package/lib/typescript/src/dto/BaseDTO.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseDTO.d.ts","sourceRoot":"","sources":["../../../../src/dto/BaseDTO.ts"],"names":[],"mappings":"AAAA,8BAAsB,OAAO;IAC3B,QAAQ,CAAC,MAAM,IAAI,IAAI;IAEvB,YAAY;CAGb"}

package/lib/typescript/src/dto/ColorDTO.d.ts

@@ -0,0 +1,19 @@
+import { BaseDTO } from './BaseDTO';
+import { Color } from '../model';
+export declare class ColorDTO extends BaseDTO {
+    red: number;
+    green: number;
+    blue: number;
+    alpha?: number;
+    constructor(red: number, green: number, blue: number, alpha?: number);
+    static fromDataModel(color: Color): ColorDTO;
+    static fromJSON(json: string): ColorDTO;
+    toDataModel(): Color;
+    toJSON(): {
+        red: number;
+        green: number;
+        blue: number;
+        alpha: number | undefined;
+    };
+}
+//# sourceMappingURL=ColorDTO.d.ts.map

package/lib/typescript/src/dto/ColorDTO.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorDTO.d.ts","sourceRoot":"","sources":["../../../../src/dto/ColorDTO.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,qBAAa,QAAS,SAAQ,OAAO;IACnC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAS;gBAEX,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM;IAQpE,MAAM,CAAC,aAAa,CAAC,KAAK,EAAE,KAAK;IAIjC,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM;IAU5B,WAAW,IAAI,KAAK;IAIpB,MAAM;;;;;;CAQP"}

package/lib/typescript/src/index.d.ts

@@ -0,0 +1,5 @@
+export { PaintEditor } from './PaintEditor';
+export { PaintBoxRNView } from './PaintBoxRNView';
+export { default as PaintBoxView } from './PaintBoxViewNativeComponent';
+export { type PaintBoxRef } from './PaintBoxViewNativeComponent';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACxE,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,+BAA+B,CAAC"}

package/lib/typescript/src/model/Color.d.ts

@@ -0,0 +1,8 @@
+export declare class Color {
+    red: number;
+    green: number;
+    blue: number;
+    alpha?: number;
+    constructor(red: number, green: number, blue: number, alpha?: number);
+}
+//# sourceMappingURL=Color.d.ts.map

package/lib/typescript/src/model/Color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Color.d.ts","sourceRoot":"","sources":["../../../../src/model/Color.ts"],"names":[],"mappings":"AAAA,qBAAa,KAAK;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAS;gBAEX,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM;CAMrE"}

package/lib/typescript/src/model/MimeType.d.ts

@@ -0,0 +1,9 @@
+export declare enum MimeType {
+    jpeg = "jpeg",
+    png = "png",
+    gif = "gif",
+    tif = "tif",
+    bmp = "bmp",
+    pdf = "pdf"
+}
+//# sourceMappingURL=MimeType.d.ts.map

package/lib/typescript/src/model/MimeType.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MimeType.d.ts","sourceRoot":"","sources":["../../../../src/model/MimeType.ts"],"names":[],"mappings":"AAAA,oBAAY,QAAQ;IAClB,IAAI,SAAS;IACb,GAAG,QAAQ;IACX,GAAG,QAAQ;IACX,GAAG,QAAQ;IACX,GAAG,QAAQ;IACX,GAAG,QAAQ;CACZ"}

package/lib/typescript/src/model/PaintMode.d.ts

@@ -0,0 +1,8 @@
+export declare enum PaintMode {
+    PEN = "PEN",
+    MARKER = "MARKER",
+    BUCKET = "BUCKET",
+    BRUSH = "BRUSH",
+    ERASER = "ERASER"
+}
+//# sourceMappingURL=PaintMode.d.ts.map

package/lib/typescript/src/model/PaintMode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaintMode.d.ts","sourceRoot":"","sources":["../../../../src/model/PaintMode.ts"],"names":[],"mappings":"AAAA,oBAAY,SAAS;IACnB,GAAG,QAAQ;IACX,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,MAAM,WAAW;CAClB"}

package/lib/typescript/src/model/index.d.ts

@@ -0,0 +1,4 @@
+export { Color } from './Color';
+export { PaintMode } from './PaintMode';
+export { MimeType } from './MimeType';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/model/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/model/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/package.json

@@ -0,0 +1,175 @@
+{
+  "name": "paint_box_react_native",
+  "version": "0.1.0",
+  "description": "--",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace paint_box_react_native-example",
+    "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
+    "prepare": "bob build",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "test": "jest",
+    "release": "release-it --only-version"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sinemavci/paint_box_react_native.git"
+  },
+  "author": "sinem.avci <sinemaavci@gmail.com> (https://github.com/sinemavci)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/sinemavci/paint_box_react_native/issues"
+  },
+  "homepage": "https://github.com/sinemavci/paint_box_react_native#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^19.8.1",
+    "@eslint/compat": "^1.3.2",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.35.0",
+    "@react-native-community/cli": "latest",
+    "@react-native/babel-preset": "0.83.0",
+    "@react-native/eslint-config": "0.83.0",
+    "@release-it/conventional-changelog": "^10.0.1",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.2.0",
+    "@types/react-native-vector-icons": "^6.4.18",
+    "commitlint": "^19.8.1",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.35.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "jest": "^29.7.0",
+    "lefthook": "^2.0.3",
+    "prettier": "^2.8.8",
+    "react": "19.2.0",
+    "react-native": "0.83.0",
+    "react-native-builder-bob": "^0.40.13",
+    "release-it": "^19.0.4",
+    "turbo": "^2.5.6",
+    "typescript": "^5.9.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "codegenConfig": {
+    "name": "PaintBoxReactNativeSpec",
+    "type": "all",
+    "jsSrcsDir": "src",
+    "android": {
+      "javaPackageName": "com.paintboxreactnative"
+    }
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "create-react-native-library": {
+    "type": "turbo-module",
+    "languages": "kotlin-objc",
+    "tools": [
+      "eslint",
+      "jest",
+      "lefthook",
+      "release-it"
+    ],
+    "version": "0.57.0"
+  },
+  "dependencies": {
+    "react-native-uuid": "^2.0.3",
+    "react-native-vector-icons": "^10.3.0"
+  }
+}

package/src/IPaintEditor.ts

@@ -0,0 +1,32 @@
+import { Color, PaintMode } from './model';
+import uuid from 'react-native-uuid';
+
+export abstract class IPaintEditor {
+  id: string | undefined = uuid.v4();
+
+  abstract undo(): void;
+
+  abstract redo(): void;
+
+  abstract reset(): void;
+
+  abstract import(path: string, width?: number, height?: number): void;
+
+  abstract export(path: string, fileName: string, mimeType: string): void;
+
+  abstract isEnable(): Promise<boolean>;
+
+  abstract setEnable(value: boolean): void;
+
+  abstract setPaintMode(paintMode: PaintMode): void;
+
+  abstract getPaintMode(): Promise<PaintMode>;
+
+  abstract setStrokeColor(strokeColor: Color): void;
+
+  abstract getStrokeColor(): Promise<Color>;
+
+  abstract setStrokeSize(size: number): void;
+
+  abstract getStrokeSize(): Promise<number>;
+}

package/src/NativePaintBoxReactNative.ts

@@ -0,0 +1,20 @@
+import { TurboModuleRegistry, type TurboModule } from 'react-native';
+
+export interface Spec extends TurboModule {
+  isEnable(viewTag: number | null): Promise<boolean>;
+
+  getPaintMode(viewTag: number | null): Promise<string>;
+
+  getStrokeColor(viewTag: number | null): Promise<string>;
+
+  getStrokeSize(viewTag: number | null): Promise<number>;
+
+  export: (
+    viewTag: number | null,
+    path: string,
+    fileName: string,
+    mimeType: string,
+  ) => Promise<string>;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>('PaintBoxReactNative');

package/src/PaintBoxContext.ts

@@ -0,0 +1,67 @@
+import type { IPaintEditor } from './IPaintEditor';
+import type { PaintEditor } from './PaintEditor';
+
+export type PaintBoxContextModel = {
+  ref?: React.RefObject<any> | null;
+  controller?: IPaintEditor;
+};
+
+export class PaintBoxContext {
+  private static instance: PaintBoxContext;
+  listOfRef: Array<PaintBoxContextModel> = [];
+
+  private constructor() {}
+
+  public static getInstance(): PaintBoxContext {
+    if (!PaintBoxContext.instance) {
+      PaintBoxContext.instance = new PaintBoxContext();
+    }
+    return PaintBoxContext.instance;
+  }
+
+  getRef(controller?: PaintEditor) {
+    if (this.listOfRef.length > 1) {
+      if (controller) {
+        return this.foundedRef(controller);
+      } else {
+        throw new Error('Ref model must be required!');
+      }
+    } else {
+      if (controller) {
+        return this.foundedRef(controller);
+      } else {
+        return this.listOfRef[0]?.ref;
+      }
+    }
+  }
+
+  addRef(ref?: PaintBoxContextModel) {
+    if (ref) {
+      this.listOfRef.push(ref);
+    }
+  }
+
+  async clearRefs() {
+    this.listOfRef = [];
+  }
+
+  clearRef(ref: IPaintEditor) {
+    const foundedRef = this.foundedRef(ref);
+    if (!foundedRef) {
+      this.listOfRef = this.listOfRef.filter(
+        (model) => ref.id === model.controller?.id
+      );
+    }
+  }
+
+  private foundedRef(refModel: IPaintEditor) {
+    const foundedRef = this.listOfRef.find(
+      (value) => value?.controller === refModel
+    )?.ref;
+    if (foundedRef) {
+      return foundedRef;
+    } else {
+      throw new Error('No map found with this id or ref!');
+    }
+  }
+}

package/src/PaintBoxRNView.tsx

@@ -0,0 +1,98 @@
+import PaintBoxView from './PaintBoxViewNativeComponent';
+import { StatusBar, StyleSheet, View, type ViewProps } from 'react-native';
+import { useEffect, useRef } from 'react';
+import { PaintBoxContext } from './PaintBoxContext';
+import type { IPaintEditor } from './IPaintEditor';
+
+export type PaintBoxViewProps = {
+  paintEditor: IPaintEditor;
+  style?: ViewProps;
+  children?: React.ReactNode;
+  onPaintBoxReady?: () => void;
+  childrenPosition?: 'topRight' | 'topLeft' | 'bottomRight' | 'bottomLeft';
+};
+
+export const PaintBoxRNView: React.FC<PaintBoxViewProps> = ({
+  children,
+  style,
+  childrenPosition,
+  paintEditor,
+  onPaintBoxReady,
+}: PaintBoxViewProps) => {
+  const ref = useRef<React.ElementRef<typeof PaintBoxView>>(null);
+  const statusBarHeight = StatusBar.currentHeight;
+
+  useEffect(() => {
+    PaintBoxContext.getInstance().addRef({
+      ref: ref,
+      controller: paintEditor,
+    });
+    return () => {
+      PaintBoxContext.getInstance().clearRef(paintEditor);
+    };
+  }, [paintEditor]);
+
+  return (
+    <View style={[styles.root, style]}>
+      <View
+        style={
+          childrenPosition === 'topLeft'
+            ? // eslint-disable-next-line react-native/no-inline-styles
+            {
+              position: 'absolute',
+              zIndex: 1,
+              top: statusBarHeight,
+              left: 12,
+            }
+            : childrenPosition === 'topRight'
+              ? // eslint-disable-next-line react-native/no-inline-styles
+              {
+                position: 'absolute',
+                zIndex: 1,
+                top: statusBarHeight,
+                right: 12,
+              }
+              : childrenPosition === 'bottomLeft'
+                ? styles.childrenBottomLeft
+                : styles.childrenBottomRight
+        }
+      >
+        {children}
+      </View>
+      {/* eslint-disable-next-line react-native/no-inline-styles */}
+      <PaintBoxView ref={ref} style={{ flex: 1 }} onPaintBoxReady={(result) => {
+        if (result.nativeEvent.result === true) {
+          onPaintBoxReady?.();
+        }
+      }} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  root: {
+    position: 'relative',
+    flex: 1,
+    height: 'auto',
+  },
+  childrenTopLeft: { position: 'absolute', zIndex: 1, top: 12, left: 12 },
+  childrenTopRight: {
+    position: 'absolute',
+    zIndex: 1,
+    right: 6,
+  },
+  childrenBottomRight: {
+    position: 'absolute',
+    zIndex: 1,
+    right: 6,
+  },
+  childrenBottomLeft: {
+    position: 'absolute',
+    zIndex: 1,
+    left: 6,
+  },
+  matchParent: {
+    width: '100%',
+    height: '100%',
+  },
+});

package/src/PaintBoxViewNativeComponent.ts

@@ -0,0 +1,63 @@
+import {
+  type ViewProps,
+  codegenNativeCommands,
+  type HostComponent,
+} from 'react-native';
+import { codegenNativeComponent } from 'react-native';
+// @ts-ignore
+import type { DirectEventHandler, Double, Int32 } from 'react-native/Libraries/Types/CodegenTypes';
+
+type PaintBoxReadyEvent = {
+  result : boolean;
+}
+
+export interface NativeProps extends ViewProps {
+  onPaintBoxReady?: DirectEventHandler<PaintBoxReadyEvent>;
+}
+
+export type PaintBoxHostComponent = HostComponent<NativeProps>;
+
+export type PaintBoxRef = React.ElementRef<PaintBoxHostComponent>;
+
+interface NativeCommands {
+  undo: (viewRef: React.ElementRef<PaintBoxHostComponent>) => void;
+  redo: (viewRef: React.ElementRef<PaintBoxHostComponent>) => void;
+  reset: (viewRef: React.ElementRef<PaintBoxHostComponent>) => void;
+  importImage: (
+    viewRef: React.ElementRef<PaintBoxHostComponent>,
+    path: string,
+    width: Double,
+    height: Double
+  ) => void;
+  setEnable: (
+    viewRef: React.ElementRef<PaintBoxHostComponent>,
+    enable: boolean
+  ) => void;
+  setPaintMode: (
+    viewRef: React.ElementRef<PaintBoxHostComponent>,
+    paintMode: string
+  ) => void;
+  setStrokeColor: (
+    viewRef: React.ElementRef<PaintBoxHostComponent>,
+    color: string
+  ) => void;
+  setStrokeSize: (
+    viewRef: React.ElementRef<PaintBoxHostComponent>,
+    size: Double
+  ) => void;
+}
+
+export const Commands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: [
+    'undo',
+    'redo',
+    'reset',
+    'importImage',
+    'setEnable',
+    'setPaintMode',
+    'setStrokeColor',
+    'setStrokeSize',
+  ],
+});
+
+export default codegenNativeComponent<NativeProps>('PaintBoxView');