feat: Add support to Unform v2.0 (#12)

This commit adds support to Unform v2.0 and changes the repository model to the monorepo model. Some components were rewrites to maintain the flexibility of integration. We concentred on the Unform integration to facilitate the creeate of forms.
italoiz · Feb 25, 2020 · 79e2d50 · 79e2d50
1 parent ff9d8ee
commit 79e2d50
Show file tree

Hide file tree

Showing 49 changed files with 6,078 additions and 11,062 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -17,19 +17,30 @@ module.exports = {
     },
     ecmaVersion: 2018,
     sourceType: 'module',
-    project: resolve(__dirname, 'tsconfig.json'),
+    project: resolve(__dirname, 'tsconfig.eslint.json'),
   },
   parser: '@typescript-eslint/parser',
-  plugins: ['@typescript-eslint', 'import', 'import-helpers', 'react-hooks', 'jest', 'prettier'],
+  plugins: [
+    '@typescript-eslint',
+    'import',
+    'import-helpers',
+    'react-hooks',
+    'jest',
+    'prettier',
+  ],
   extends: [
     'airbnb',
     'plugin:@typescript-eslint/recommended',
     'prettier/@typescript-eslint',
+    'plugin:prettier/recommended',
   ],
   rules: {
+    'prettier/prettier': 'error',
     'class-methods-use-this': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/interface-name-prefix': 'off',
     '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/camelcase': 'off',
     '@typescript-eslint/explicit-function-return-type': 'off',
     'react/jsx-filename-extension': [
       'warn',
@@ -40,29 +51,43 @@ module.exports = {
     'import-helpers/order-imports': [
       'warn',
       {
-        'newlines-between': 'always',
+        newlinesBetween: 'always',
         groups: [
-          ['builtin', 'external', 'internal'],
+          ['/^react/'],
+          'module',
+          '/^@/',
           ['parent', 'sibling', 'index'],
         ],
         alphabetize: { order: 'asc', ignoreCase: true },
       },
     ],
+    'import/no-dynamic-require': 'off',
     'no-param-reassign': 'off',
+    'no-unused-expressions': 'off',
+    'no-underscore-dangle': 'off',
     'react/prop-types': 'off',
     'jsx-a11y/label-has-for': 'off',
     'import/prefer-default-export': 'off',
-    'import/named': 'off',
     'react-hooks/rules-of-hooks': 'error',
-    "import/no-extraneous-dependencies": ["error", {"devDependencies": true}]
+    'react-hooks/exhaustive-deps': 'warn',
+    'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
+    'import/extensions': [
+      'error',
+      'ignorePackages',
+      {
+        ts: 'never',
+        tsx: 'never',
+      },
+    ],
+    'react/jsx-props-no-spreading': 'off',
   },
   settings: {
     'import/extensions': ['.js', '.jsx', '.ts', '.tsx'],
     'import/parsers': {
-      '@typescript-eslint/parser': ['.ts', '.tsx'],
+      '@typescript-eslint/parser': ['.js', '.jsx', '.ts', '.tsx'],
     },
     'import/resolver': {
-      typescript: {}
+      typescript: {},
     },
   },
 };
diff --git a/.github/assets/material-ui.png b/.github/assets/material-ui.png
diff --git a/.gitignore b/.gitignore
@@ -1,34 +1,74 @@
-node_modules
-yarn-error.log
-dist
-__tests__/coverage
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage/
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
 
-### macOS ###
-# General
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# dotenv environment variable files
+.env*
+
+# Library
+dist/
+typings/
+
+# gatsby files
+.cache/
+public/
+
+# Mac files
 .DS_Store
-.AppleDouble
-.LSOverride
-
-# Icon must end with two \r
-Icon
-
-# Thumbnails
-._*
-
-# Files that might appear in the root of a volume
-.DocumentRevisions-V100
-.fseventsd
-.Spotlight-V100
-.TemporaryItems
-.Trashes
-.VolumeIcon.icns
-.com.apple.timemachine.donotpresent
-
-# Directories potentially created on remote AFP share
-.AppleDB
-.AppleDesktop
-Network Trash Folder
-Temporary Items
-.apdisk
-
-# End of https://www.gitignore.io/api/macos
+
+# Yarn
+yarn-error.log
+.pnp/
+.pnp.js
+
+# Yarn Integrity file
+.yarn-integrity
diff --git a/.huskyrc b/.huskyrc
@@ -0,0 +1,6 @@
+{
+  "hooks": {
+    "pre-commit": "lint-staged",
+    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+  }
+}
diff --git a/.lintstagedrc b/.lintstagedrc
@@ -0,0 +1,7 @@
+{
+  "packages/**/*.{js,jsx,ts,tsx}": [
+    "eslint --ext js,jsx,ts,tsx --fix",
+    "prettier --write",
+    "git add"
+  ]
+}
diff --git a/.prettierrc b/.prettierrc
@@ -1,4 +1,5 @@
 {
   "singleQuote": true,
-  "trailingComma": "es5"
+  "trailingComma": "all",
+  "arrowParens": "avoid"
 }
diff --git a/.travis.yml b/.travis.yml
@@ -26,4 +26,4 @@ deploy:
     secure: $API_KEY
   on:
     tags: true
-    repo: italoiz/unform-material-ui
+    repo: italoiz/unform-community-packages
diff --git a/README.md b/README.md
@@ -1,159 +1,14 @@
-<h1 align="center">
-
-![](assets/logo.png)
-
-</h1>
-
-<div align="center">
-
-[![npm](https://img.shields.io/npm/v/unform-material-ui.svg)](https://www.npmjs.com/package/unform-material-ui)
-[![Build Status](https://travis-ci.org/italoiz/unform-material-ui.svg?branch=master)](https://travis-ci.org/italoiz/unform-material-ui)
-[![Coverage Status](https://coveralls.io/repos/github/italoiz/unform-material-ui/badge.svg?branch=master)](https://coveralls.io/github/italoiz/unform-material-ui?branch=master)
-
-</div>
+<h2 align="center">
+  Community Packages for Unform Library
+</h2>
 
 ## Overview
 
-This library uses [Unform](https://github.com/Rocketseat/unform) + [Material UI](https://material-ui.com) styles to create super beautiful forms easily.
-
-<!-- Unform is a performance focused library that helps you creating beautiful forms in React with the power of uncontrolled components performance and React Hooks. -->
-
-## Table of contents
-
-- [Overview](#overview)
-- [Table of contents](#table-of-contents)
-- [Roadmap](#roadmap)
-- [Installation](#installation)
-- [Guides](#guides)
-  - [Basics](#basics)
-  - [Components](#components)
-    - [`<TextField />` Component](#textfield--component)
-    - [`<Select />` Component](#select--component)
-    - [`<Checkbox />` Component](#checkbox--component)
-- [Contributing](#contributing)
-  - [Contribution Guidelines](#contribution-guidelines)
-  - [Code of Conduct](#code-of-conduct)
-- [License](#license)
-
-## Roadmap
-
-- Support all [Material UI](https://material-ui.com) components;
-- Better docs;
-
-## Installation
-
-Just add unform to your project:
-
-```
-yarn add unform-material-ui @rocketseat/unform @material-ui/core
-```
-
-## Guides
-
-### Basics
-
-> ⚠️ This is a library that depends on **Unform** and **Material UI** to work, both must be installed in your project.
-
-- Here's how to use the [Unform library here](https://github.com/Rocketseat/unform#basics)
-- Here's how to se up the [Material UI here](https://material-ui.com/getting-started/installation/)
-
-### Components
-
-> ️️⚠️ For now, all components of the **Material UI** are not yet supported. Below are just the supported components.
-
-#### `<TextField />` Component
-
-The `<TextField />` component, is similar to the default component `<Input />`. See the component documentation [here](https://material-ui.com/api/text-field/) for more information.
-
-```jsx
-import React from 'react';
-import { Form } from '@rocketseat/unform';
-import { TextField } from 'unform-material-ui';
-
-function App() {
-  function handleSubmit(data) {}
-
-  return (
-    <Form onSubmit={handleSubmit}>
-      <TextField name="name" />
-      <TextField multiline name="bio" />
-
-      <button type="submit">Send</button>
-    </Form>
-  );
-}
-```
-
-#### `<Select />` Component
-
-The `<Select />` component, is similar to the default component `<Select />`. See the component documentation [here](https://material-ui.com/api/select/) for more information.
-
-```jsx
-import React from 'react';
-import { Form } from '@rocketseat/unform';
-import { Select } from 'unform-material-ui';
-
-function App() {
-  function handleSubmit(data) {
-    /**
-     * {
-     *  "tech": ['node'],
-     *  "country": "brazil"
-     * }
-     */
-  }
-
-  return (
-    <Form onSubmit={handleSubmit}>
-      <Select multiple name="tech" options={[
-        { value: 'node', label: 'NodeJS' },
-        { value: 'react', label: 'React' },
-      ]} />
-
-      <Select name="country" label="Country" options={[
-        { value: 'brazil', label: 'Brazil' },
-      ]} />
-
-      <button type="submit">Send</button>
-    </Form>
-  );
-}
-```
-
-#### `<Checkbox />` Component
-
-The `<Checkbox />` component, is similar to the default component `<Checkbox />`. See the component documentation [here](https://material-ui.com/api/checkboxes/) for more information.
-
-> ℹ️ Because of component nature, he is not completely "not controlled" all the time. Internally he becomes a controlled component when passed a property `checked` as true.
-
-```jsx
-import React from 'react';
-import { Form } from '@rocketseat/unform';
-import { Checkbox } from 'unform-material-ui';
-
-function App() {
-  function handleSubmit(data) {
-    /**
-     * {
-     *  "terms": true,
-     *  "acceptEmails": true
-     * }
-     */
-  }
-
-  return (
-    <Form onSubmit={handleSubmit}>
-      {/* not controlled */}
-      <Checkbox name="terms" label="Terms & Conditions" />
+This library uses [Unform](https://github.com/Rocketseat/unform) to integrate with other libraries of the community to provide fast and simple development. An example is the [Material UI](https://material-ui.com) library.
 
-      {/* internally controlled */}
-      <Checkbox name="acceptEmails" label="I accept to receive promotional emails" checked />
+## Integrations
 
-      <button type="submit">Send</button>
-    </Form>
-  );
-}
-```
+- [Material UI](packages/material-ui)
 
 ## Contributing