chore

cicerohen · cicerohen · commit ea297684fb16 · 2022-03-04T16:57:33.000-03:00
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,7 @@
+{
+  "presets": [
+    "@babel/preset-react",
+    "@babel/preset-typescript",
+    "@babel/preset-env"
+  ]
+}
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,11 @@
+
+#editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
diff --git a/.env.example b/.env.example
@@ -0,0 +1 @@
+API_BASE_URL=http://localhost:9000
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,2 @@
+dist/
+coverage/
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,24 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "env": {
+    "browser": true,
+    "node": true,
+    "jest": true
+  },
+  "rules": {
+  "react/react-in-jsx-scope": "off",
+  "react/display-name": "off",
+  "no-useless-escape": "off"
+  }
+}
diff --git a/.github/workflows/vercel.yml b/.github/workflows/vercel.yml
@@ -0,0 +1,13 @@
+name: Vercel
+on: [push, pull_request]
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: amondnet/vercel-action@v20
+        with:
+          vercel-args: '--prod'
+          vercel-token: ${{ secrets.VERCEL_TOKEN }}
+          vercel-org-id: ${{ secrets.VERCEL_ORG_ID}}
+          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID}}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+/dist
+/coverage
+.env
+*.log
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx --no-install lint-staged --allow-empty
diff --git a/.husky/pre-push b/.husky/pre-push
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+#yarn test
diff --git a/.lintstagedrc b/.lintstagedrc
@@ -0,0 +1,3 @@
+{
+    "*.{ts,tsx}": ["eslint --fix", "prettier --write"]
+}
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,2 @@
+dist/
+coverage/
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "trailingComma": "none",
+  "semi": true,
+  "singleQuote": true
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
+}
diff --git a/README.md b/README.md
@@ -0,0 +1,19 @@
+# Playground ReactJS Input Mask
+
+A simple ReactJS masked input
+
+[Click here to see more examples](https://github.com/cicerohen/playground)
+
+### Development
+
+> Install the dependencies
+
+```
+yarn
+```
+
+> Start a local server
+
+```
+yarn start
+```
diff --git a/__test__/setup/setup-files-after-env.js b/__test__/setup/setup-files-after-env.js
@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';
diff --git a/__test__/setup/setup-files.js b/__test__/setup/setup-files.js
@@ -0,0 +1 @@
+process.env.NODE_ENV = process.env.NODE_ENV || 'test';
diff --git a/commitlint.config.js b/commitlint.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    'scope-case': [2, 'always', 'lower-case'],
+    'subject-case': [2, 'always', 'lower-case'],
+    'subject-full-stop': [2, 'always', '.'],
+    'subject-max-length': [2, 'always', 70]
+  }
+};
diff --git a/package.json b/package.json
@@ -0,0 +1,69 @@
+{
+  "name": "playground-reactjs-input-mask",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "start": "yarn build:dev",
+    "start:server": "nodemon --inspect server/index.js",
+    "build": "yarn clean && rollup -c --environment NODE_ENV:production",
+    "build:dev": "yarn clean && rollup -cw --environment NODE_ENV:development",
+    "clean": "rimraf dist",
+    "lint": "eslint .",
+    "lint:fix": "yarn lint --fix",
+    "prettier": "prettier . --check",
+    "prettier:fix": "yarn prettier --write",
+    "format": "yarn lint:fix && yarn prettier:fix",
+    "test": "jest --collectCoverage --watchAll=false --verbose",
+    "prepare": "husky install"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.16.5",
+    "@babel/preset-env": "^7.16.5",
+    "@babel/preset-react": "^7.16.5",
+    "@babel/preset-typescript": "^7.16.5",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^21.0.1",
+    "@rollup/plugin-image": "^2.1.1",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.1.1",
+    "@rollup/plugin-replace": "^3.0.0",
+    "@rollup/plugin-typescript": "^8.3.0",
+    "@tailwindcss/forms": "^0.4.0",
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^12.1.2",
+    "@types/react": "^17.0.37",
+    "@types/react-dom": "^17.0.11",
+    "@types/react-router-dom": "^5.3.3",
+    "@typescript-eslint/eslint-plugin": "^5.7.0",
+    "@typescript-eslint/parser": "^5.7.0",
+    "autoprefixer": "^10.4.2",
+    "composable-middleware": "^0.3.0",
+    "cors": "^2.8.5",
+    "dotenv": "^14.3.0",
+    "eslint": "^8.4.1",
+    "eslint-plugin-react": "^7.27.1",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "husky": "^7.0.0",
+    "jest": "^27.5.1",
+    "lint-staged": "^12.1.2",
+    "postcss": "^8.4.5",
+    "postcss-import": "^14.0.2",
+    "prettier": "^2.5.1",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.61.1",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-html2": "^3.1.0",
+    "rollup-plugin-livereload": "^2.0.5",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-serve": "^1.1.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "tailwindcss": "^3.0.15",
+    "typescript": "^4.5.4"
+  },
+  "dependencies": {
+    "clsx": "^1.1.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  }
+}
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,8 @@
+module.exports = {
+  plugins: [
+    require('tailwindcss'),
+    require('autoprefixer'),
+    require('postcss-import'),
+    require('tailwindcss/nesting')
+  ]
+};
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
+    <title>Playground ReactJS Popover</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/rollup.config.js b/rollup.config.js
@@ -0,0 +1,76 @@
+import { config } from 'dotenv';
+
+config({
+  path: './.env'
+});
+
+process.env.NODE_ENV = process.env.NODE_ENV || 'development';
+
+import babel from '@rollup/plugin-babel';
+import resolve from '@rollup/plugin-node-resolve';
+import serve from 'rollup-plugin-serve';
+import reload from 'rollup-plugin-livereload';
+import postcss from 'rollup-plugin-postcss';
+import json from '@rollup/plugin-json';
+import html from 'rollup-plugin-html2';
+import commonjs from '@rollup/plugin-commonjs';
+import replace from '@rollup/plugin-replace';
+import typescript from '@rollup/plugin-typescript';
+import copy from 'rollup-plugin-copy';
+import image from '@rollup/plugin-image';
+import { terser } from 'rollup-plugin-terser';
+
+export default () => {
+  const isProduction = process.env.NODE_ENV === 'production';
+  const extensions = ['.js', '.jsx'];
+  return [
+    {
+      input: ['src/main.tsx'],
+      output: {
+        format: 'es',
+        dir: 'dist'
+      },
+      plugins: [
+        !isProduction &&
+          serve({
+            contentBase: ['dist', 'public', 'src'],
+            open: false,
+            port: process.env.PORT || 3000,
+            headers: {
+              'Access-Control-Allow-Origin': '*'
+            },
+            historyApiFallback: true
+          }),
+        !isProduction &&
+          reload({
+            watch: 'dist'
+          }),
+        copy({
+          targets: [{ src: 'src/assets/**/*', dest: 'dist/assets' }]
+        }),
+        replace({
+          'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+          'process.env.API_BASE_URL': JSON.stringify(process.env.API_BASE_URL),
+          preventAssignment: true
+        }),
+        html({
+          template: './public/index.html'
+        }),
+        commonjs(),
+        postcss(),
+        image(),
+        resolve({
+          extensions
+        }),
+        json(),
+        babel({
+          exclude: 'node_modules/**',
+          extensions,
+          babelHelpers: 'bundled'
+        }),
+        typescript(),
+        isProduction && terser()
+      ]
+    }
+  ];
+};
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,36 @@
+import { Input } from './components/Input';
+import { useInputMask } from './hooks/useInputMask';
+
+export const App = () => {
+  const { ref: charRef, onKeyUp: onKeyUpChar } = useInputMask('aaa-aaa-aaa');
+  const { ref: numberRef, onKeyUp: onKeyUpNumber } =
+    useInputMask('999-999-999');
+  return (
+    <div className="flex flex-col p-4 min-h-screen">
+      <main className="flex flex-col grow flex-1 items-center justify-center ">
+        <h1 className="flex uppercase text-2xl font-semibold mb-5">
+          <a
+            href="https://github.com/cicerohen/playground-reactjs-input-mask"
+            title="View it on Github"
+          >
+            Playground ReactJS Input Mask
+          </a>
+        </h1>
+
+        <div className="mb-4">
+          <h2 className="mb-2 text-sm">Character mask</h2>
+          <Input ref={charRef} onKeyUp={onKeyUpChar} />
+        </div>
+        <div className="mb-4">
+          <h2 className="mb-2 text-sm">Number mask</h2>
+          <Input ref={numberRef} onKeyUp={onKeyUpNumber} />
+        </div>
+        <p className="text-sm mt-4 text-gray-600">
+          <a href="https://github.com/cicerohen/playground-reactjs-input-mask">
+            View it on Github
+          </a>
+        </p>
+      </main>
+    </div>
+  );
+};
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
@@ -0,0 +1,11 @@
+import { forwardRef } from 'react';
+
+export const Input = forwardRef<HTMLInputElement>((props, ref) => {
+  return (
+    <input
+      {...props}
+      ref={ref}
+      className="border border-gray-300 rounded-lg text-lg text-gray-700 p-4"
+    />
+  );
+});
diff --git a/src/hooks/useInputMask.ts b/src/hooks/useInputMask.ts
diff --git a/src/main.css b/src/main.css
diff --git a/src/main.tsx b/src/main.tsx
diff --git a/tailwind.config.js b/tailwind.config.js
diff --git a/tsconfig.json b/tsconfig.json
diff --git a/vercel.json b/vercel.json
diff --git a/yarn.lock b/yarn.lock

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +node_modules
 +/dist
 +/coverage
 +.env
 +*.log
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "*.{ts,tsx}": ["eslint --fix", "prettier --write"]`
	`3`	`+}`