F1LT3R commented 4 years ago

🎄🎁 React App Rewired, Ant-Design & TypeScript

Includes examples apps for Ant-Design and TypeScript.

About

This PR demonstrates React-App-Rewired compatibility as well as basic usage of Ant Design and TypeScript examples.

This PR relates to: https://github.com/react-workspaces/react-workspaces-playground/issues/9

Questions for Review

[ ] Does the configuration on the branch ant-design-compat work for others?
[ ] Should I fold the Ant Design + React-App-Rewired example into this library? (I'm thinking "yes").
[ ] Can anyone please test other React-App-Rewired configurations and let me know if they work?
[ ] Can someone verify they can yarn test and yarn lint each package, as well as yarn test from the root (which lints and provides coverage. I have checked these but it would be nice to get another pair of eyes on this. 👀

Issues Addressed By This PR

Technical Details

A new app directory has been for Ant-Design and React-App-Rewired, in packages/apps/app-ant-design-rewired - this separates out the configuration for those who want to use React-App-Rewired and/or Ant-Design.
Existing app directories (app-one and app-two) were given more specific names, (app-single-comp and app-multi-comps) - these exist with Babel Analyzer setup so that you can see that tree-shaking is working.
A new app directory and components-typescript directory was added to demonstrate TypeScript compatibility. Hot-Reloading of components was checked. These can be found in packages/apps/app-typescript and packages/components-typescript.
The @react-workspaces/react-scripts version was updated to ^3.3.0-alpha-08 - this is based of of the current Facebook/Create-React-App @v3.3.0 which should bring things up to date as well as addressing some security concerns.
Should fix Jest/Handlebars security issue: https://github.com/react-workspaces/create-react-app/issues/8
A single prettier config is used in this repo for all JavaScript and TypeScript. I have tried to blend the best of both worlds. The file can be found in ${root}/.prettierrc.js. If I had not done this, the IDE would not be able to pick out the correct prettier rules for formatOnSave, etc. Here are the rules:
```
module.exports = {
  arrowParens: 'avoid',
  bracketSpacing: true,
  jsxSingleQuote: false,
  printWidth: 120,
  semi: true,
  singleQuote: true,
  tabWidth: 2,
  trailingComma: 'all',
};
```
Each package got it's own .eslintrc rules, as TypeScript uses a different parser. Once again, this can live in the root if you are only using TypeScript or JavaScript, but when you want to blend both in a MonoRepo, you will need to define rules locally to the package.
Added yarn test to git pre-commit with husky which will kick off linting, jest tests and a coverage report for the whole repo using Lerna.

Ant/Rewired Demo Configuration

`package.json`

The packages/apps/app-ant-design-rewired/package.json file was updated. Dependencies were added to allow React-App-Rewired inject a custom configuration into react-scripts allowing the setup of Ant Design with babel-plugin-export for automated style importing.

The package start script was updated to use react-app-rewired with the "--scripts-version" of @reacect-workspaces-playground/react-scripts. This allows R.A.R. to use the Yarn Workspaces configuration as the base WebPack config for overriding.

{
    "dependencies": {
        "antd": "^3.26.4",
        "babel-plugin-import": "^1.13.0",
        "customize-cra": "^0.9.1",
        "react-app-rewired": "^2.1.5"
  },
    "scripts": {
        "start": "react-app-rewired start --scripts-version @react-workspaces/react-scripts"
    }
}

`config-overrides.js`

The config-overrides.js file was added to use the Babel Importer to automatically load the associated styles of an Ant Design component.

// packages/apps/app-ant-design-rewired/config-overrides.js
const {override, fixBabelImports} = require('customize-cra');

module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: 'css'
    })
);

`App.js`

The packages/apps/app-ant-design-rewired/src/App.js file was updated to include the Ant Design <DatePicker /> component.

...
import {DatePicker} from 'antd';

class App extends Component {
    render() {
        return (
            <div className="App">
...
                    <div className="components">
                        <CompOne />
                        <CompTwo />
                        <DatePicker />
                    </div>
...
            </div>
        );
    }
}

export default App;

Ant-Design Screenshot

TypeScript Screenshot

Happy Holidays! 🌟🐑👑👼🎄🎁🎅🍪🥛🕎⭐🌙🕯️☃️ ❄️ 臘八

cipriancaba commented 4 years ago

Looks awesome.. Only thing that's missing seems to be typescript project references.. Any plan to add that?

F1LT3R commented 4 years ago

@cipriancaba TypeScript project references? Forgive me, I am not sure what you mean.

F1LT3R commented 4 years ago

Only thing that's missing seems to be typescript project references - @cipriancaba

Ah... you must mean this?

https://www.typescriptlang.org/docs/handbook/project-references.html

Are you thinking it should be added in app-typescript, or in the storybook-typescript or both?

I'm trying to stick to the Create-React-App's TypeScript template as much as possible. Is there a really good reason to change it?

I'm not a TypeScript user, so project references are not something I understand.

Perhaps some other experienced React+TypeScript devs can weigh in on this?

react-workspaces / react-workspaces-playground