Improve contributing experience

CONTRIBUTING.md

@@ -4,29 +4,26 @@ First off, _thank you_ for considering contributing to the React Native Communit
 
 Secondly, we'd like the contribution experience to be as good as possible. While we are a small all-volunteer team, we are happy to hear feedback about your experience, and if we can make the docs or experience better please let us know.
 
-## Build/Minify
-
-To run this lib you will need to compile on start and on every change, in the lib folder run:
+## Testing and modify with example app
 
+To be able to edit thist library, you first step is to download all dependencies.
 ```shell
-$ yarn && yarn prepare
+yarn
 ```
 
-### Testing in a new `react-native init` or `expo init` project
-
-In a new `react-native init` or `expo init` project, do this:
-
-Install WML globally to can link library to your project
+After installing package dependencies, go to example app and install it dependencies as well.
 ```shell
-$ npm install -g wml
+cd example && yarn
 ```
 
-Link library folder to your project
+The last step is to start expo bundler (you need [expo-cli](https://docs.expo.dev/workflow/expo-cli/) installed globally):
 ```shell
-$ wml add ../react-native-mask-text ./node_modules/react-native-mask-text
+yarn start
 ```
 
-Now, your modifies on `../react-native-mask-text` will reflete to `./node_modules/react-native-mask-text`
+Now, scan the QRCode with [Expo Go](https://expo.dev/client) app and start to edit the package, and will be refleted on example app.
+
+*Although the library is available for iOS, Android, and Web, this example app is not working on web enviroment, only Android and iOS. Feel free to open a Pull Request to configure it for web.*
 
 ## Quality
 
@@ -40,13 +37,21 @@ All tests and builds are executed on every PR with our workflow on Github.
 
 *We will not accept Pull Requests with errors on tests*
 
+## Build/Minify
+
+Before commit, verify if build/minify is working.
+
+```shell
+$ yarn && yarn prepare
+```
+
 ## Commit and Branch best pratices
 
 Currently, we are using flags:
 
 To new features and implementations on source code <br />
 Branch: `feat/<branch-name>`<br />
-Commits: `chore: <commit-message>`<br />
+Commits: `feat: <commit-message>`<br />
 
 To improve docs, contributing file, and other related to developer experience <br />
 Branch: `docs/<branch-name>` <br />

example/App.js → example/App.tsx

@@ -1,22 +1,22 @@
-import React, { useState } from "react";
-import { StyleSheet, Text, View } from "react-native";
-import { MaskedTextInput, MaskedText } from "react-native-mask-text";
+import React, { useState } from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { MaskedTextInput, MaskedText } from 'react-native-mask-text'
 
 export default function App() {
-  const [maskedValue, setMaskedValue] = useState("");
-  const [unMaskedValue, setUnmaskedValue] = useState("");
+  const [maskedValue, setMaskedValue] = useState('')
+  const [unMaskedValue, setUnmaskedValue] = useState('')
 
-  const [currencyMaskedValue, setCurrencyMaskedValue] = useState("");
-  const [currencyUnMaskedValue, setCurrencyUnmaskedValue] = useState("");
+  const [currencyMaskedValue, setCurrencyMaskedValue] = useState('')
+  const [currencyUnMaskedValue, setCurrencyUnmaskedValue] = useState('')
 
   return (
     <View style={styles.container}>
       <Text style={styles.title}>MaskedTextInput Component:</Text>
       <MaskedTextInput
         mask="99/99/9999"
         onChangeText={(text, rawText) => {
-          setMaskedValue(text);
-          setUnmaskedValue(rawText);
+          setMaskedValue(text)
+          setUnmaskedValue(rawText)
         }}
         style={styles.input}
         keyboardType="numeric"
@@ -31,11 +31,11 @@ export default function App() {
           prefix: '$',
           decimalSeparator: '.',
           groupSeparator: ',',
-          precision: 2
+          precision: 2,
         }}
         onChangeText={(text, rawText) => {
-          setCurrencyMaskedValue(text);
-          setCurrencyUnmaskedValue(rawText);
+          setCurrencyMaskedValue(text)
+          setCurrencyUnmaskedValue(rawText)
         }}
         style={styles.input}
         keyboardType="numeric"
@@ -48,30 +48,30 @@ export default function App() {
         30081990
       </MaskedText>
     </View>
-  );
+  )
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: "center",
-    backgroundColor: "#ecf0f1",
+    justifyContent: 'center',
+    backgroundColor: '#ecf0f1',
     padding: 8,
   },
   title: {
     margin: 24,
     fontSize: 24,
-    textAlign: "center",
-    fontWeight: "bold",
+    textAlign: 'center',
+    fontWeight: 'bold',
   },
   paragraph: {
     margin: 24,
     fontSize: 18,
-    textAlign: "center",
+    textAlign: 'center',
   },
   input: {
     height: 40,
     margin: 12,
     borderWidth: 1,
   },
-});
+})

example/app.json

@@ -16,6 +16,10 @@
     "assetBundlePatterns": [
       "**/*"
     ],
+    "packagerOpts": {
+      "projectRoots": "",
+      "config": "metro.config.js"
+    },
     "ios": {
       "supportsTablet": true
     },

example/babel.config.js

@@ -1,6 +1,16 @@
-module.exports = function(api) {
-  api.cache(true);
+module.exports = function (api) {
+  api.cache(true)
   return {
     presets: ['babel-preset-expo'],
-  };
-};
+    plugins: [
+      [
+        'module-resolver',
+        {
+          alias: {
+            'react-native-mask-text': '../src',
+          },
+        },
+      ],
+    ],
+  }
+}

example/metro.config.js

@@ -0,0 +1,20 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const path = require('path')
+
+module.exports = {
+  watchFolders: [path.resolve(__dirname, '../src')],
+  resolver: {
+    extraNodeModules: new Proxy(
+      {},
+      {
+        get: (target, name) => {
+          // eslint-disable-next-line
+          if (target.hasOwnProperty(name)) {
+            return target[name]
+          }
+          return path.join(process.cwd(), `node_modules/${name}`)
+        },
+      }
+    ),
+  },
+}

example/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "expo-template-blank",
+  "name": "example",
   "description": "The Blank project template includes the minimum dependencies to run and an empty root component.",
   "version": "41.0.7",
   "main": "node_modules/expo/AppEntry.js",
@@ -11,13 +11,18 @@
     "eject": "expo eject"
   },
   "dependencies": {
+    "@expo/webpack-config": "^0.15.0",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^8.1.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "bignumber.js": "^9.0.1",
     "expo": "~41.0.1",
     "expo-status-bar": "~1.0.4",
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
-    "react-native-web": "~0.13.12",
-    "react-native-mask-text": "*"
+    "react-native-web": "~0.13.12"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0"

example/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "compilerOptions": {},
+  "extends": "expo/tsconfig.base"
+}

example/webpack.config.js

@@ -0,0 +1,30 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const createExpoWebpackConfigAsync = require('@expo/webpack-config')
+const path = require('path')
+
+// Expo CLI will await this method so you can optionally return a promise.
+module.exports = async function (env, argv) {
+  const config = await createExpoWebpackConfigAsync(env, argv)
+
+  const webConfig = {
+    test: /\.tsx?$/,
+    exclude: /node_modules/,
+    loader: 'babel-loader',
+  }
+
+  config.module.rules = [...config.module.rules, webConfig]
+
+  //   const alias = {
+  //     react: path.join(__dirname, '../node_modules/react'),
+  //     'react-dom': path.join(__dirname, '../node_modules/react-dom'),
+  //     'react-native': path.join(__dirname, '../node_modules/react-native'),
+  //     'react-native-web': path.join(
+  //       __dirname,
+  //       '../node_modules/react-native-web'
+  //     ),
+  //   }
+
+  //   config.resolve.alias = alias
+
+  return config
+}

src/index.ts

@@ -1,5 +1,8 @@
 import { MaskedText, MaskedTextProps } from './components/MaskedText'
-import { MaskedTextInput, MaskedTextInputProps } from './components/MaskedTextInput'
+import {
+  MaskedTextInput,
+  MaskedTextInputProps,
+} from './components/MaskedTextInput'
 
 import { mask, unMask } from './utils/mask'