feat: rewrite with expo modules (#64)

* feat: reinitialize library with expo modules * chore: remove view files * chore: add missing eslint config * chore(editorconfig): set indent size to 2 * feat(android): create native module * feat(ios): create native module * chore: configurate prettier * feat(module): add types * feat(module): export functions * feat(web): create web module * chore(example): update example * fix(web): fix web module export * chore: update prettier config * chore(web): bump `node-vibrant` to `3.1.6` * feat: change module name * chore: rename `defaultColor` to `fallbackColor` * feat(types): update WebImageColors * docs: update types * docs: update expo installation * feat(example): add web support * chore(example): bump `react-native` version to `0.71.4` * test: add tests * chore: rename prop `fallbackColor` to `fallback` * fix: add missing exports * Update src/types.ts Co-authored-by: Osama Qarem <[email protected]> * chore: bump version to `2.0.0` * feat(android): handle MalformedURLException * feat(android): restore thread pool * chore(android): update `calculateAverageColor` implementation * chore(android): generate palette synchronously * chore(android): optimise `calculateAverageColor` * chore(android): revert resolving promise on main thread * chore(android): cancel service on module destroy * chore(example): bump react native to `0.71.7` * chore(ios): revert resolving promise on main thread * chore: improve npm seo Co-authored-by: Osama Qarem <[email protected]> * chore: add `.npmignore` * fix: add missing dev dependencies * chore: lint project * Update README.md * Update src/index.ts Co-authored-by: Osama Qarem <[email protected]> * chore: export `ImageColorsResult` type * docs: update contribution guide --------- Co-authored-by: Osama Qarem <[email protected]>
osamaqarem · May 13, 2023 · 08005f7 · 08005f7
1 parent 1039b6e
commit 08005f7
Show file tree

Hide file tree

Showing 135 changed files with 11,379 additions and 12,490 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -7,7 +7,7 @@ root = true
 [*]
 
 indent_style = space
-indent_size = 4
+indent_size = 2
 
 end_of_line = lf
 charset = utf-8

diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,2 @@
+// @generated by expo-module-scripts
+module.exports = require('expo-module-scripts/eslintrc.base.js');
diff --git a/.gitignore b/.gitignore
@@ -59,4 +59,7 @@ android/keystores/debug.keystore
 # generated by bob
 lib/
 
-*.tgz
+*.tgz
+
+# Jest
+.jest/
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,35 @@
+example
+lib/typescript/example
+ios/build
+ios/ImageColors.xcodeproj/xcuserdata
+ios/ImageColors.xcodeproj/project.xcworkspace
+android/build/
+android/.gradle
+android/.idea
+android/app/build
+assets
+
+# Ignore development dependencies and files
+/.vscode
+/.idea
+/.jest
+/.github
+*.log
+
+# Ignore common package manager files
+node_modules
+package-lock.json
+yarn.lock
+npm-debug.log
+
+# Ignore miscellaneous files
+.DS_Store
+*.bak
+*.backup
+*.swp
+*.tmp
+*.zip
+*.rar
+*.tar.gz
+*.tgz
+*.log
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -0,0 +1,8 @@
+module.exports = {
+  quoteProps: 'consistent',
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: 'es5',
+  useTabs: false,
+  semi: false,
+}
diff --git a/.yarnrc b/.yarnrc
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -2,90 +2,6 @@
 
 We want this community to be friendly and respectful to each other. Please follow it in all your interactions with the project.
 
-## Development workflow
-
-To get started with the project, run `yarn` in the root directory to install the required dependencies for each package:
-
-```sh
-yarn
-```
-
-While developing, you can run the [example app](/example/) to test your changes.
-
-To start the packager:
-
-```sh
-yarn example start
-```
-
-To run the example app on Android:
-
-```sh
-yarn example android
-```
-
-To run the example app on iOS:
-
-```sh
-yarn example ios
-```
-
-Make sure your code passes TypeScript and ESLint. Run the following to verify:
-
-```sh
-yarn typescript
-yarn lint
-```
-
-To fix formatting errors, run the following:
-
-```sh
-yarn lint --fix
-```
-
-Remember to add tests for your change if possible. Run the unit tests by:
-
-```sh
-yarn test
-```
-
-To edit the Objective-C files, open `example/ios/ImageColorsExample.xcworkspace` in XCode and find the source files at `Pods > Development Pods > react-native-image-colors`.
-
-To edit the Kotlin files, open `example/android` in Android studio and find the source files at `reactnativeimagecolors` under `Android`.
-
-### Commit message convention
-
-We follow the [conventional commits specification](https://www.conventionalcommits.org/en) for our commit messages:
-
-- `fix`: bug fixes, e.g. fix crash due to deprecated method.
-- `feat`: new features, e.g. add new method to the module.
-- `refactor`: code refactor, e.g. migrate from class components to hooks.
-- `docs`: changes into documentation, e.g. add usage example for the module..
-- `test`: adding or updating tests, e.g. add integration tests using detox.
-- `chore`: tooling changes, e.g. change CI config.
-
-Our pre-commit hooks verify that your commit message matches this format when committing.
-
-### Linting and tests
-
-[ESLint](https://eslint.org/), [Prettier](https://prettier.io/), [TypeScript](https://www.typescriptlang.org/)
-
-We use [TypeScript](https://www.typescriptlang.org/) for type checking, [ESLint](https://eslint.org/) with [Prettier](https://prettier.io/) for linting and formatting the code, and [Jest](https://jestjs.io/) for testing.
-
-Our pre-commit hooks verify that the linter and tests pass when committing.
-
-### Scripts
-
-The `package.json` file contains various scripts for common tasks:
-
-- `yarn bootstrap`: setup project by installing all dependencies and pods.
-- `yarn typescript`: type-check files with TypeScript.
-- `yarn lint`: lint files with ESLint.
-- `yarn test`: run unit tests with Jest.
-- `yarn example start`: start the Metro server for the example app.
-- `yarn example android`: run the example app on Android.
-- `yarn example ios`: run the example app on iOS.
-
 ### Sending a pull request
 
 > **Working on your first pull request?** You can learn how from this _free_ series: [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github).

diff --git a/README.md b/README.md
@@ -39,74 +39,90 @@ This module is a wrapper around the [Palette](https://developer.android.com/refe
 
 ## Installation
 
-```
-npm install react-native-image-colors
-```
+- [Expo](#expo)
+- [React Native CLI](#react-native-cli)
+- [Web](#web)
+
+### Expo
+
+#### Requirements
+
+- Expo SDK 47+
 
 ```
 yarn add react-native-image-colors
 ```
 
-### Android
+```
+npx expo prebuild
+```
 
-Rebuild the app.
+iOS
 
-### iOS
+```
+npx expo run:ios
+```
 
-Install the pod, then rebuild the app.
+Android
 
 ```
-npx pod-install
+npx expo run:android
 ```
 
-### Expo
+> The [example](https://github.com/osamaqarem/react-native-image-colors/blob/master/example/package.json) is an expo app.
 
-Build custom native code
+### React Native CLI
 
+#### Requirements
+
+- [Expo modules](https://docs.expo.dev/bare/installing-expo-modules/) must be configured (min. iOS 13)
+
+```
+yarn add react-native-image-colors
 ```
-expo prebuild
 
-# iOS
-expo run:ios
+iOS
 
-# Android
-expo run:android
+```
+npx pod-install
 ```
 
-> The [example](https://github.com/osamaqarem/react-native-image-colors/blob/master/example/package.json) is an expo app.
+```
+npx react-native run-ios
+```
+
+Android
+
+```
+npx react-native run-android
+```
 
 ### Web
 
-You're good to go!
+```
+yarn add react-native-image-colors
+```
 
 ## Usage
 
 ```js
-import ImageColors from 'react-native-image-colors'
-
-const uri = require('./cool.jpg')
-
-const result = await ImageColors.getColors(uri, {
-  fallback: '#228B22',
-  cache: true,
-  key: 'unique_key',
-})
-
-switch (result.platform) {
-  case 'android':
-    // android result properties
-    const vibrantColor = result.vibrant
-    break
-  case 'web':
-    // web result properties
-    const lightVibrantColor = result.lightVibrant
-    break
-  case 'ios':
-    // iOS result properties
-    const primaryColor = result.primary
-    break
-  default:
-    throw new Error('Unexpected platform key')
+import React from 'react'
+import { getColors } from 'react-native-image-colors'
+
+const useImageColors = () => {
+  const [colors, setColors] = React.useState(null)
+
+  React.useEffect(() => {
+    const url = 'https://i.imgur.com/68jyjZT.jpg'
+
+    getColors(url, {
+      fallback: '#228B22',
+      cache: true,
+      key: url,
+    }).then(setColors)
+  }, [])
+
+  return colors
 }
 ```
 
@@ -136,16 +152,18 @@ A string which can be:
 
   > The mime type prefix for base64 is required (e.g. data:image/png;base64).
 
-#### `Config`
+#### `Config?`
+
+The config object is optional.
 
-| Property       | Description                                                                                                                                                                                    | Type                                                   | Required | Default     | Supported platforms |
-| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ | -------- | ----------- | ------------------- |
-| `fallback`     | If a color property couldn't be retrieved, it will default to this hex color string (**note**: do not use shorthand hex. e.g. `#fff`).                                                         | `string`                                               | No       | `"#000000"` | All                 |
-| `cache`        | Enables in-memory caching of the result - skip downloading the same image next time.                                                                                                           | `boolean`                                              | No       | `false`     | All                 |
-| `key`          | Unique key to use for the cache entry. The image URI is used as the unique key by default. You should explicitly pass a key if you enable caching and you're using a base64 string as the URI. | `string`                                               | No       | `undefined` | All                 |
-| `headers`      | HTTP headers to be sent along with the GET request to download the image                                                                                                                       | `Record<string, string>`                               | No       | `undefined` | iOS, Android        |
-| `pixelSpacing` | How many pixels to skip when iterating over image pixels. Higher means better performance (**note**: value cannot be lower than 1).                                                            | `number`                                               | No       | `5`         | Android             |
-| `quality`      | Highest implies no downscaling and very good colors.                                                                                                                                           | `'lowest'` <br> `'low'` <br> `'high'` <br> `'highest'` | No       | `"low"`     | iOS, Web            |
+| Property       | Description                                                                                                                                                                                    | Type                                                   | Default     | Supported platforms |
+| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ | ----------- | ------------------- |
+| `fallback`     | If a color property couldn't be retrieved, it will default to this hex color string (**note**: do not use shorthand hex. e.g. `#fff`).                                                         | `string`                                               | `"#000000"` | All                 |
+| `cache`        | Enables in-memory caching of the result - skip downloading the same image next time.                                                                                                           | `boolean`                                              | `false`     | All                 |
+| `key`          | Unique key to use for the cache entry. The image URI is used as the unique key by default. You should explicitly pass a key if you enable caching and you're using a base64 string as the URI. | `string`                                               | `undefined` | All                 |
+| `headers`      | HTTP headers to be sent along with the GET request to download the image                                                                                                                       | `Record<string, string>`                               | `undefined` | iOS, Android        |
+| `pixelSpacing` | How many pixels to skip when iterating over image pixels. Higher means better performance (**note**: value cannot be lower than 1).                                                            | `number`                                               | `5`         | Android             |
+| `quality`      | Highest implies no downscaling and very good colors.                                                                                                                                           | `'lowest'` <br> `'low'` <br> `'high'` <br> `'highest'` | `"low"`     | iOS, Web            |
 
 ### `ImageColorsResult`
 
@@ -155,27 +173,27 @@ Every result object contains a respective `platform` key to help narrow down the
 
 | Property       | Type        |
 | -------------- | ----------- |
-| `dominant`     | `string?`   |
-| `average`      | `string?`   |
-| `vibrant`      | `string?`   |
-| `darkVibrant`  | `string?`   |
-| `lightVibrant` | `string?`   |
-| `darkMuted`    | `string?`   |
-| `lightMuted`   | `string?`   |
-| `muted`        | `string?`   |
+| `dominant`     | `string`   |
+| `average`      | `string`   |
+| `vibrant`      | `string`   |
+| `darkVibrant`  | `string`   |
+| `lightVibrant` | `string`   |
+| `darkMuted`    | `string`   |
+| `lightMuted`   | `string`   |
+| `muted`        | `string`   |
 | `platform`     | `"android"` |
 
 #### `WebImageColors`
 
 | Property       | Type      |
 | -------------- | --------- |
-| `dominant`     | `string?` |
-| `vibrant`      | `string?` |
-| `darkVibrant`  | `string?` |
-| `lightVibrant` | `string?` |
-| `darkMuted`    | `string?` |
-| `lightMuted`   | `string?` |
-| `muted`        | `string?` |
+| `dominant`     | `string` |
+| `vibrant`      | `string` |
+| `darkVibrant`  | `string` |
+| `lightVibrant` | `string` |
+| `darkMuted`    | `string` |
+| `lightMuted`   | `string` |
+| `muted`        | `string` |
 | `platform`     | `"web"`   |
 
 #### `IOSImageColors`
@@ -193,4 +211,4 @@ Every result object contains a respective `platform` key to help narrow down the
 ### Notes
 
 - There is an [example](https://github.com/osamaqarem/react-native-image-colors/blob/master/example/App.js) app.
-- Since the implementation of each platform is different you can get different color results for each.
+- Since the implementation of each platform is different you can get **different color results for each**.
diff --git a/RNImageColors.podspec b/RNImageColors.podspec
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		// @generated by expo-module-scripts
		module.exports = require('expo-module-scripts/eslintrc.base.js');
-Original file line number
+Diff line change
@@ Expand Up / @@ -59,4 +59,7 @@ android/keystores/debug.keystore @@
     # generated by bob
     lib/
-    *.tgz
+    *.tgz
+    # Jest
+    .jest/