├── .editorconfig ├── .eslintignore ├── .github └── FUNDING.yml ├── .gitignore ├── .prettierrc.js ├── .vscode └── settings.json ├── README.md ├── lerna.json ├── package.json ├── packages ├── apps │ ├── app-ant-design │ │ ├── .eslintrc │ │ ├── .gitignore │ │ ├── README.md │ │ ├── config-overrides.js │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ └── manifest.json │ │ └── src │ │ │ ├── App.css │ │ │ ├── App.js │ │ │ ├── App.test.js │ │ │ ├── ReactLogo.svg │ │ │ ├── YarnCat.svg │ │ │ ├── index.css │ │ │ ├── index.js │ │ │ ├── serviceWorker.js │ │ │ └── setupTests.js │ ├── app-multi-comps │ │ ├── .eslintrc │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ └── manifest.json │ │ └── src │ │ │ ├── App.css │ │ │ ├── App.js │ │ │ ├── App.test.js │ │ │ ├── ReactLogo.svg │ │ │ ├── YarnCat.svg │ │ │ ├── index.css │ │ │ ├── index.js │ │ │ ├── serviceWorker.js │ │ │ └── setupTests.js │ ├── app-single-comp │ │ ├── .eslintrc │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ └── manifest.json │ │ └── src │ │ │ ├── App.css │ │ │ ├── App.js │ │ │ ├── App.test.js │ │ │ ├── ReactLogo.svg │ │ │ ├── YarnCat.svg │ │ │ ├── index.css │ │ │ ├── index.js │ │ │ ├── serviceWorker.js │ │ │ └── setupTests.js │ └── app-typescript │ │ ├── .env │ │ ├── .eslintignore │ │ ├── .eslintrc.js │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ ├── src │ │ ├── App.css │ │ ├── App.test.tsx │ │ ├── App.tsx │ │ ├── ReactLogo.svg │ │ ├── YarnCat.svg │ │ ├── index.css │ │ ├── index.tsx │ │ ├── react-app-env.d.ts │ │ ├── serviceWorker.ts │ │ └── setupTests.ts │ │ └── tsconfig.json ├── components-typescript │ ├── .eslintignore │ ├── .eslintrc.js │ ├── index.tsx │ ├── package.json │ ├── react-app-env.d.ts │ ├── serviceWorker.ts │ ├── setupTests.ts │ ├── src │ │ ├── CompOne │ │ │ ├── CompOne.css │ │ │ ├── CompOne.stories.tsx │ │ │ ├── CompOne.test.tsx │ │ │ ├── CompOne.tsx │ │ │ └── index.tsx │ │ ├── CompTwo │ │ │ ├── CompTwo.css │ │ │ ├── CompTwo.stories.tsx │ │ │ ├── CompTwo.test.tsx │ │ │ ├── CompTwo.tsx │ │ │ └── index.tsx │ │ └── react-app-env.d.ts │ └── tsconfig.json ├── components │ ├── .eslintrc │ ├── index.js │ ├── package.json │ ├── setupTests.js │ └── src │ │ ├── CompOne │ │ ├── CompOne.css │ │ ├── CompOne.js │ │ ├── CompOne.spec.js │ │ ├── CompOne.stories.js │ │ └── index.js │ │ └── CompTwo │ │ ├── CompTwo.css │ │ ├── CompTwo.js │ │ ├── CompTwo.spec.js │ │ ├── CompTwo.stories.js │ │ └── index.js ├── storybook-typescript │ ├── .eslintrc.js │ ├── .storybook │ │ ├── .babelrc │ │ ├── addons.js │ │ ├── config.js │ │ └── preset.js │ ├── package.json │ └── tsconfig.json └── storybook │ ├── .eslintrc │ ├── .storybook │ ├── addons.js │ └── config.js │ └── package.json └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*.js] 4 | [*.jsx] 5 | [*.ts] 6 | [*.tsx] 7 | indent_style = space 8 | indent_size = 2 9 | end_of_line = lf 10 | charset = utf-8 11 | trim_trailing_whitespace = true 12 | insert_final_newline = true 13 | 14 | [*.json] 15 | indent_style = space 16 | indent_size = 2 17 | end_of_line = lf 18 | charset = utf-8 19 | trim_trailing_whitespace = true 20 | insert_final_newline = false 21 | 22 | [*.md] 23 | indent_style = space 24 | indent_size = 2 25 | end_of_line = lf 26 | charset = utf-8 27 | trim_trailing_whitespace = false 28 | insert_final_newline = false 29 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | **/node_modules/** 2 | **/dist/** 3 | **/storybook-static/** 4 | **/coverage/** 5 | **/build/** 6 | **/.git/** 7 | **/public/** 8 | !.eslintrc.js -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: f1lt3r 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # next.js build output 58 | .next 59 | 60 | .DS_Store -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | arrowParens: 'avoid', 3 | bracketSpacing: true, 4 | jsxSingleQuote: false, 5 | printWidth: 120, 6 | semi: true, 7 | singleQuote: true, 8 | tabWidth: 2, 9 | trailingComma: 'all', 10 | }; 11 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "eslint.autoFixOnSave": true, 3 | "eslint.validate": [ 4 | "javascript", 5 | "javascriptreact", 6 | { "language": "typescript", "autoFix": true }, 7 | { "language": "typescriptreact", "autoFix": true } 8 | ], 9 | "editor.formatOnSave": true 10 | } 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![React Workspaces Playground Screenshots](https://i.imgur.com/7snWXD0.png) 2 | 3 | ![Join us on Slack](https://img.shields.io/badge/Slack-React--Workpaces-EBB424?style=for-the-badge&logo=slack) 4 | 5 | > 💥 Now supports TypeScript and React-App-Rewired! 6 | 7 | ## Features 8 | 9 | - ⚛️ Create React App 3 (React 16.8) 10 | - 📖 Storybook 5 11 | - 🐈 Yarn Workspaces 12 | - 🐉 Lerna 3 13 | - ✨ Host Multiple CRA Apps, Component Libraries & Storybooks in one Monorepo 14 | - 🔥 Hot Reload all Apps, Components & Storybooks 15 | - 👨‍🔬 Test all workspaces with Eslint & Jest using one command 16 | - :octocat: Deploy your apps to Github Pages using one command 17 | 18 | ## Contents 19 | 20 | - [Features](#features) 21 | - [Contents](#contents) 22 | - [Setup](#setup) 23 | - [Pre-Requisites](#pre-requisites) 24 | - [Installation](#installation) 25 | - [Usage](#usage) 26 | - [Starting The React App](#starting-the-react-app) 27 | - [Starting The Storybook](#starting-the-storybook) 28 | - [Linting & Testing](#linting-amp-testing) 29 | - [Deploying to GitHub Pages](#deploying-to-github-pages) 30 | - [Creating a New CRA App](#creating-a-new-cra-app) 31 | - [How Does It Work?](#how-does-it-work) 32 | 33 | ## Setup 34 | 35 | ### Pre-Requisites 36 | 37 | - Yarn 1.13.0 38 | - Node 11.14.0 39 | 40 | ### Installation 41 | 42 | ```bash 43 | git clone git@github.com:react-workspaces/react-workspaces-playground.git 44 | cd react-workspaces-playground 45 | yarn 46 | ``` 47 | 48 | ### Adding workspace dependencies 49 | 50 | ```bash 51 | yarn workspace 52 | ``` 53 | 54 | This will run the chosen Yarn command in the selected workspace. 55 | 56 | Example: 57 | 58 | ```bash 59 | yarn workspace my-app add react-router-dom --dev 60 | ``` 61 | 62 | This will add `react-router-dom` as `dependencies` in your `packages/my-app/package.json`. To remove dependency use `remove` instead of add 63 | 64 | ## Usage 65 | 66 | ### Starting Project in Workspace 67 | 68 | From your project root type start command for desired app 69 | 70 | ```bash 71 | yarn workspace @project/app-single-comp start 72 | ``` 73 | 74 | All available `start` scripts 75 | 76 | ```json 77 | "scripts": { 78 | "start:app-ant-design": "yarn workspace @project/app-ant-design-rewired start", 79 | "start:app-multi": "yarn workspace @project/app-multi-comps start", 80 | "start:app-single": "yarn workspace @project/app-single-comp start", 81 | "start:app-ts": "yarn workspace @project/app-typescript start", 82 | "start:storybook": "yarn workspace @project/storybook storybook", 83 | "start:storybook-ts": "yarn workspace @project/storybook-typescript storybook", 84 | ... 85 | } 86 | ``` 87 | 88 | ### Starting The Storybook 89 | 90 | ```bash 91 | yarn start:storybook 92 | ``` 93 | 94 | ### Linting & Testing 95 | 96 | ```bash 97 | yarn workspace test 98 | ``` 99 | 100 | ### Deploying to GitHub Pages 101 | 102 | Update the `homepage` URL in `app-one/package.json` to reflect your GitHub Pages URL. 103 | 104 | ```json 105 | { 106 | "name": "@project/app-single-comp", 107 | "private": true, 108 | "homepage": "https://react-workspaces.github.io/react-workspaces-playground", 109 | "scripts": { 110 | "deploy": "gh-pages -d build" 111 | } 112 | } 113 | ``` 114 | 115 | Run the deploy script. 116 | 117 | ```bash 118 | yarn workspace deploy 119 | ``` 120 | 121 | ### Creating a New CRA App 122 | 123 | Use Create React App's `--scripts-version` flag to create a new React App with Yarn Workspaces support. 124 | 125 | ```bash 126 | create-react-app --scripts-version @react-workspaces/react-scripts my-app 127 | ``` 128 | 129 | To create new TS app use Create React App's `--template` flag with `--scripts-version` flag to create a new React App with Yarn Workspaces support and Typescript. 130 | 131 | ```bash 132 | npx create-react-app --scripts-version @react-workspaces/react-scripts --template typescript my-ts-app 133 | ``` 134 | 135 | ## How Does It Work? 136 | 137 | React Workspaces Playground uses a custom version of `react-scripts` under the hood. The custom `react-scripts` is an NPM package to use in place of the `react-scripts` dependency that usually ships with Create React App. See: ([@react-workspaces/react-scripts](https://www.npmjs.com/@react-workspaces/react-scripts)) on NPM. 138 | 139 | Support for Yarn Workspaces was added by: 140 | 141 | 1. Adding [yarn-workspaces.js](https://github.com/react-workspaces/create-react-app/blob/master/packages/react-scripts/config/yarn-workspaces.js) file to resolve workspaces modules. 142 | 143 | 1. Updating the Webpack config: 144 | 145 | - Use `main:src` in `package.json` for loading development source code. 146 | 147 | - Use `production` or `development` settings based on your `yarn workspaces` settings in your `/package.json`: 148 | 149 | ```json 150 | { 151 | "workspaces": { 152 | "packages": ["packages/apps/*", "packages/components", "packages/storybook"], 153 | "production": true, 154 | "development": true, 155 | "package-entry": "main:src" 156 | } 157 | } 158 | ``` 159 | 160 | Minimal updates to the Webpack config were required. 161 | 162 | Diff: `webpack.config.js` 163 | 164 | ```diff 165 | --- a/./facebook/react-scripts/config/webpack.config.js 166 | +++ b/react-workspaces/react-scripts/config/webpack.config.js 167 | @@ -9,7 +9,6 @@ 168 | 'use strict'; 169 | 170 | const fs = require('fs'); 171 | const isWsl = require('is-wsl'); 172 | const path = require('path'); 173 | const webpack = require('webpack'); 174 | const resolve = require('resolve'); 175 | @@ -28,15 +27,14 @@ const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeM 176 | const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin'); 177 | const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent'); 178 | const paths = require('./paths'); 179 | const modules = require('./modules'); 180 | +const workspaces = require('./workspaces'); 181 | const getClientEnvironment = require('./env'); 182 | const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin'); 183 | const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin'); 184 | const typescriptFormatter = require('react-dev-utils/typescriptFormatter'); 185 | // @remove-on-eject-begin 186 | const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier'); 187 | // @remove-on-eject-end 188 | 189 | // Source maps are resource heavy and can cause out of memory issue for large source files. 190 | const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false'; 191 | @@ -53,12 +51,22 @@ const cssModuleRegex = /\.module\.css$/; 192 | const sassRegex = /\.(scss|sass)$/; 193 | const sassModuleRegex = /\.module\.(scss|sass)$/; 194 | 195 | +const workspacesConfig = workspaces.init(paths); 196 | + 197 | // This is the production and development configuration. 198 | // It is focused on developer experience, fast rebuilds, and a minimal bundle. 199 | module.exports = function(webpackEnv) { 200 | const isEnvDevelopment = webpackEnv === 'development'; 201 | const isEnvProduction = webpackEnv === 'production'; 202 | 203 | + const workspacesMainFields = [workspacesConfig.packageEntry, 'main']; 204 | + const mainFields = 205 | + isEnvDevelopment && workspacesConfig.development 206 | + ? workspacesMainFields 207 | + : isEnvProduction && workspacesConfig.production 208 | + ? workspacesMainFields 209 | + : undefined; 210 | + 211 | // Webpack uses `publicPath` to determine where the app is being served from. 212 | // It requires a trailing slash, or the file assets will get an incorrect path. 213 | // In development, we always serve from the root. This makes config easier. 214 | @@ -279,6 +282,7 @@ module.exports = function(webpackEnv) { 215 | extensions: paths.moduleFileExtensions 216 | .map(ext => `.${ext}`) 217 | .filter(ext => useTypeScript || !ext.includes('ts')), 218 | + mainFields, 219 | alias: { 220 | // Support React Native Web 221 | // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ 222 | @@ -330,7 +335,11 @@ module.exports = function(webpackEnv) { 223 | loader: require.resolve('eslint-loader'), 224 | }, 225 | ], 226 | - include: paths.appSrc, 227 | + include: isEnvDevelopment && workspacesConfig.development 228 | + ? [paths.appSrc, workspacesConfig.paths] 229 | + : isEnvProduction && workspacesConfig.production 230 | + ? [paths.appSrc, workspacesConfig.paths] 231 | + : paths.appSrc, 232 | }, 233 | { 234 | // "oneOf" will traverse all following loaders until one will 235 | @@ -352,7 +361,12 @@ module.exports = function(webpackEnv) { 236 | // The preset includes JSX, Flow, TypeScript, and some ESnext features. 237 | { 238 | test: /\.(js|mjs|jsx|ts|tsx)$/, 239 | - include: paths.appSrc, 240 | + include: 241 | + isEnvDevelopment && workspacesConfig.development 242 | + ? [paths.appSrc, workspacesConfig.paths] 243 | + : isEnvProduction && workspacesConfig.production 244 | + ? [paths.appSrc, workspacesConfig.paths] 245 | + : paths.appSrc, 246 | loader: require.resolve('babel-loader'), 247 | options: { 248 | customize: require.resolve( 249 | ``` 250 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "useWorkspaces": true, 3 | "packages": ["packages/*/*"], 4 | "version": "1.0.0", 5 | "command": { 6 | "run": { 7 | "npmClient": "yarn" 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "root", 3 | "private": true, 4 | "scripts": { 5 | "start:app-ant-design": "yarn workspace @project/app-ant-design-rewired start", 6 | "start:app-multi": "yarn workspace @project/app-multi-comps start", 7 | "start:app-single": "yarn workspace @project/app-single-comp start", 8 | "start:app-ts": "yarn workspace @project/app-typescript start", 9 | "start:storybook": "yarn workspace @project/storybook storybook", 10 | "start:storybook-ts": "yarn workspace @project/storybook-typescript storybook", 11 | "test": "FORCE_COLOR=true lerna run lint && CI=true FORCE_COLOR=true lerna run test -- --coverage", 12 | "deploy": "FORCE_COLOR=true lerna run deploy" 13 | }, 14 | "workspaces": { 15 | "packages": [ 16 | "packages/apps/*", 17 | "packages/components", 18 | "packages/components-typescript", 19 | "packages/storybook", 20 | "packages/storybook-typescript" 21 | ], 22 | "nohoist": [ 23 | "packages/apps/**/webpack-dev-server", 24 | "**/babel-loader", 25 | "**/babel-jest" 26 | ] 27 | }, 28 | "devDependencies": { 29 | "@typescript-eslint/eslint-plugin": "^2.15.0", 30 | "@typescript-eslint/parser": "^2.15.0", 31 | "babel-eslint": "10.0.3", 32 | "eslint": "6.8.0", 33 | "eslint-config-prettier": "^6.9.0", 34 | "eslint-config-react-app": "^5.1.0", 35 | "eslint-plugin-flowtype": "^4.5.3", 36 | "eslint-plugin-import": "^2.19.1", 37 | "eslint-plugin-jsx-a11y": "^6.2.3", 38 | "eslint-plugin-prettier": "^3.1.2", 39 | "eslint-plugin-react": "^7.17.0", 40 | "eslint-plugin-react-hooks": "^2.3.0", 41 | "husky": "^4.0.6", 42 | "jest-prop-type-error": "^1.1.0", 43 | "lerna": "^3.20.2", 44 | "prettier": "^1.19.1" 45 | }, 46 | "husky": { 47 | "hooks": { 48 | "pre-commit": "yarn test" 49 | } 50 | }, 51 | "jest": { 52 | "collectCoverageFrom": [ 53 | "src/**/*.{js,jsx,ts,tsx}", 54 | "!src/setupTests.{js,jsx,ts,tsx}", 55 | "!src/index.{js,jsx,ts,tsx}", 56 | "!src/serviceWorker.{js,jsx,ts,tsx}", 57 | "!src/**/*.(spec|test|stories).{js,jsx,ts,tsx}" 58 | ] 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /packages/apps/app-ant-design/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "plugins": ["react", "prettier", "jsx-a11y", "import"], 4 | "extends": ["react-app", "prettier", "prettier/react"], 5 | "globals": { 6 | "expect": true, 7 | "describe": true, 8 | "it": true, 9 | "fixture": true, 10 | "test": true, 11 | "jest": true, 12 | "document": true, 13 | "window": true, 14 | "fetch": true, 15 | "navigator": true 16 | }, 17 | "rules": { 18 | "space-before-function-paren": 0, 19 | "quotes": 0, 20 | "operator-linebreak": 0, 21 | "react/jsx-tag-spacing": [ 22 | "error", 23 | { 24 | "beforeSelfClosing": "always" 25 | } 26 | ] 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /packages/apps/app-ant-design/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /packages/apps/app-ant-design/README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console. 14 | 15 | ### `npm test` 16 | 17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `npm run build` 21 | 22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `npm run eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 35 | 36 | Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 37 | 38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | -------------------------------------------------------------------------------- /packages/apps/app-ant-design/config-overrides.js: -------------------------------------------------------------------------------- 1 | const { override, fixBabelImports } = require('customize-cra'); 2 | 3 | module.exports = override( 4 | fixBabelImports('import', { 5 | libraryName: 'antd', 6 | libraryDirectory: 'es', 7 | style: 'css', 8 | }), 9 | ); 10 | -------------------------------------------------------------------------------- /packages/apps/app-ant-design/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@project/app-ant-design-rewired", 3 | "version": "1.0.0", 4 | "homepage": "https://react-workspaces.github.io/react-workspaces-playground", 5 | "private": true, 6 | "scripts": { 7 | "start": "react-app-rewired start --scripts-version @react-workspaces/react-scripts", 8 | "build": "react-scripts build", 9 | "test": "react-scripts test", 10 | "lint": "eslint ./src/**/*.js --max-warnings=0 --format=codeframe", 11 | "predeploy": "yarn run build", 12 | "deploy": "gh-pages -d build", 13 | "analyze": "source-map-explorer 'build/static/js/*.js'" 14 | }, 15 | "dependencies": { 16 | "@project/components": "1.0.0", 17 | "@react-workspaces/react-scripts": "^3.3.0-alpha-08", 18 | "react": "^16.12.0", 19 | "react-dom": "^16.12.0" 20 | }, 21 | "devDependencies": { 22 | "react-app-rewired": "^2.1.5", 23 | "antd": "^3.26.6", 24 | "babel-plugin-import": "^1.13.0", 25 | "customize-cra": "^0.9.1", 26 | "cross-env": "6.0.3", 27 | "enzyme": "^3.11.0", 28 | "enzyme-adapter-react-16": "^1.15.2", 29 | "gh-pages": "^2.2.0", 30 | "source-map-explorer": "^2.2.2", 31 | "eslint-config-react-app": "^5.1.0", 32 | "eslint-config-prettier": "^6.9.0", 33 | "eslint-plugin-prettier": "^3.1.2" 34 | }, 35 | "browserslist": { 36 | "production": [ 37 | ">0.2%", 38 | "not dead", 39 | "not op_mini all" 40 | ], 41 | "development": [ 42 | "last 1 chrome version", 43 | "last 1 firefox version", 44 | "last 1 safari version" 45 | ] 46 | }, 47 | "jest": { 48 | "collectCoverageFrom": [ 49 | "src/**/*.{js,jsx}", 50 | "!src/setupTests.{js,jsx}", 51 | "!src/index.{js,jsx}", 52 | "!src/serviceWorker.{js,jsx}", 53 | "!src/**/*.(spec|test|stories).{js,jsx}" 54 | ], 55 | "coverageThreshold": { 56 | "global": { 57 | "statements": 98, 58 | "branches": 98, 59 | "functions": 98, 60 | "lines": 98 61 | } 62 | } 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /packages/apps/app-ant-design/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-workspaces/react-workspaces-playground/59e2a8948a7f16579aa4776db5f09a1dcea46c7a/packages/apps/app-ant-design/public/favicon.ico -------------------------------------------------------------------------------- /packages/apps/app-ant-design/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /packages/apps/app-ant-design/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /packages/apps/app-ant-design/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-header { 6 | background-color: #282c34; 7 | min-height: 100vh; 8 | display: flex; 9 | flex-direction: column; 10 | align-items: center; 11 | justify-content: center; 12 | font-size: calc(10px + 2vmin); 13 | color: white; 14 | } 15 | 16 | .App-link { 17 | font-size: calc(30px + 2vmin); 18 | color: #2f90bc; 19 | font-weight: 100; 20 | } 21 | 22 | .App-link:hover, 23 | .App-link:focus { 24 | color: #00afff; 25 | } 26 | 27 | .App-link strong { 28 | font-weight: 400; 29 | } 30 | 31 | h1 { 32 | margin: 0; 33 | padding: 0; 34 | } 35 | 36 | h2 { 37 | margin-bottom: 0; 38 | padding: 0; 39 | font-size: calc(10px + 2vmin); 40 | font-weight: 200; 41 | } 42 | 43 | .file { 44 | font-size: calc(6px + 1vmin); 45 | color: #faa; 46 | display: block; 47 | } 48 | 49 | .components div { 50 | margin: 1vmin; 51 | float: left; 52 | } 53 | 54 | .React-logo { 55 | animation: React-logo-spin infinite 20s linear; 56 | height: 40vmin; 57 | } 58 | 59 | .Yarn-cat { 60 | animation: Yarn-cat-move infinite 2s ease; 61 | height: 40vmin; 62 | position: relative; 63 | margin-left: -20vmin; 64 | margin-top: 7.5vmin; 65 | } 66 | 67 | @keyframes React-logo-spin { 68 | from { 69 | transform: rotate(0deg); 70 | } 71 | to { 72 | transform: rotate(360deg); 73 | } 74 | } 75 | 76 | @keyframes Yarn-cat-move { 77 | 0% { 78 | transform: translateX(0%); 79 | } 80 | 50% { 81 | transform: translateX(20%); 82 | } 83 | 100% { 84 | transform: translateX(0%); 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /packages/apps/app-ant-design/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import ReactLogo from './ReactLogo.svg'; 3 | import YarnCat from './YarnCat.svg'; 4 | import './App.css'; 5 | 6 | import { DatePicker } from 'antd'; 7 | 8 | import { CompOne, CompTwo } from '@project/components'; 9 | 10 | class App extends Component { 11 | render() { 12 | return ( 13 |
14 |
15 |
16 | React Logo 17 | Yarn Workspaces Cat 18 |
19 |

20 | 26 | React Workspaces 27 | 28 |

29 |

Hot Reload Your Workspaces

30 |

31 | packages/apps/app-ant-design/src/App.js 32 | packages/components/src/CompOne/CompOne.js 33 | packages/components/src/CompTwo/CompTwo.js 34 |

35 |
36 | 37 | 38 | 39 |
40 |
41 |
42 | ); 43 | } 44 | } 45 | 46 | export default App; 47 | -------------------------------------------------------------------------------- /packages/apps/app-ant-design/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /packages/apps/app-ant-design/src/ReactLogo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Group 3 5 | Created with Sketch. 6 | 7 | 8 | 9 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /packages/apps/app-ant-design/src/YarnCat.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Group 2 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/apps/app-ant-design/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 5 | 'Droid Sans', 'Helvetica Neue', sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; 12 | } 13 | -------------------------------------------------------------------------------- /packages/apps/app-ant-design/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /packages/apps/app-ant-design/src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.1/8 is considered localhost for IPv4. 18 | window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/), 19 | ); 20 | 21 | export function register(config) { 22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 23 | // The URL constructor is available in all browsers that support SW. 24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 25 | if (publicUrl.origin !== window.location.origin) { 26 | // Our service worker won't work if PUBLIC_URL is on a different origin 27 | // from what our page is served on. This might happen if a CDN is used to 28 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 29 | return; 30 | } 31 | 32 | window.addEventListener('load', () => { 33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 34 | 35 | if (isLocalhost) { 36 | // This is running on localhost. Let's check if a service worker still exists or not. 37 | checkValidServiceWorker(swUrl, config); 38 | 39 | // Add some additional logging to localhost, pointing developers to the 40 | // service worker/PWA documentation. 41 | navigator.serviceWorker.ready.then(() => { 42 | console.log( 43 | 'This web app is being served cache-first by a service ' + 44 | 'worker. To learn more, visit https://bit.ly/CRA-PWA', 45 | ); 46 | }); 47 | } else { 48 | // Is not localhost. Just register service worker 49 | registerValidSW(swUrl, config); 50 | } 51 | }); 52 | } 53 | } 54 | 55 | function registerValidSW(swUrl, config) { 56 | navigator.serviceWorker 57 | .register(swUrl) 58 | .then(registration => { 59 | registration.onupdatefound = () => { 60 | const installingWorker = registration.installing; 61 | if (installingWorker === null) { 62 | return; 63 | } 64 | 65 | installingWorker.onstatechange = () => { 66 | if (installingWorker.state === 'installed') { 67 | if (navigator.serviceWorker.controller) { 68 | // At this point, the updated precached content has been fetched, 69 | // but the previous service worker will still serve the older 70 | // content until all client tabs are closed. 71 | console.log( 72 | 'New content is available and will be used when all ' + 73 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.', 74 | ); 75 | 76 | // Execute callback 77 | if (config && config.onUpdate) { 78 | config.onUpdate(registration); 79 | } 80 | } else { 81 | // At this point, everything has been precached. 82 | // It's the perfect time to display a 83 | // "Content is cached for offline use." message. 84 | console.log('Content is cached for offline use.'); 85 | 86 | // Execute callback 87 | if (config && config.onSuccess) { 88 | config.onSuccess(registration); 89 | } 90 | } 91 | } 92 | }; 93 | }; 94 | }) 95 | .catch(error => { 96 | console.error('Error during service worker registration:', error); 97 | }); 98 | } 99 | 100 | function checkValidServiceWorker(swUrl, config) { 101 | // Check if the service worker can be found. If it can't reload the page. 102 | fetch(swUrl) 103 | .then(response => { 104 | // Ensure service worker exists, and that we really are getting a JS file. 105 | const contentType = response.headers.get('content-type'); 106 | if (response.status === 404 || (contentType !== null && contentType.indexOf('javascript') === -1)) { 107 | // No service worker found. Probably a different app. Reload the page. 108 | navigator.serviceWorker.ready.then(registration => { 109 | registration.unregister().then(() => { 110 | window.location.reload(); 111 | }); 112 | }); 113 | } else { 114 | // Service worker found. Proceed as normal. 115 | registerValidSW(swUrl, config); 116 | } 117 | }) 118 | .catch(() => { 119 | console.log('No internet connection found. App is running in offline mode.'); 120 | }); 121 | } 122 | 123 | export function unregister() { 124 | if ('serviceWorker' in navigator) { 125 | navigator.serviceWorker.ready.then(registration => { 126 | registration.unregister(); 127 | }); 128 | } 129 | } 130 | -------------------------------------------------------------------------------- /packages/apps/app-ant-design/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // SetupTests.js - Imports globals into Jest tests 2 | 3 | require('jest-prop-type-error'); 4 | 5 | const enzyme = require('enzyme'); 6 | const Adapter = require('enzyme-adapter-react-16'); 7 | enzyme.configure({ adapter: new Adapter() }); 8 | -------------------------------------------------------------------------------- /packages/apps/app-multi-comps/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "plugins": ["react", "prettier", "jsx-a11y", "import"], 4 | "extends": ["react-app", "prettier", "prettier/react"], 5 | "globals": { 6 | "expect": true, 7 | "describe": true, 8 | "it": true, 9 | "fixture": true, 10 | "test": true, 11 | "jest": true, 12 | "document": true, 13 | "window": true, 14 | "fetch": true, 15 | "navigator": true 16 | }, 17 | "rules": { 18 | "space-before-function-paren": 0, 19 | "quotes": 0, 20 | "operator-linebreak": 0, 21 | "react/jsx-tag-spacing": [ 22 | "error", 23 | { 24 | "beforeSelfClosing": "always" 25 | } 26 | ] 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /packages/apps/app-multi-comps/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /packages/apps/app-multi-comps/README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console. 14 | 15 | ### `npm test` 16 | 17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `npm run build` 21 | 22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `npm run eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 35 | 36 | Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 37 | 38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | -------------------------------------------------------------------------------- /packages/apps/app-multi-comps/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@project/app-multi-comps", 3 | "version": "1.0.0", 4 | "homepage": "https://react-workspaces.github.io/react-workspaces-playground", 5 | "private": true, 6 | "scripts": { 7 | "start": "react-scripts start", 8 | "build": "react-scripts build", 9 | "test": "react-scripts test", 10 | "lint": "eslint ./src/**/*.js --max-warnings=0 --format=codeframe", 11 | "predeploy": "yarn run build", 12 | "deploy": "gh-pages -d build", 13 | "analyze": "source-map-explorer 'build/static/js/*.js'" 14 | }, 15 | "dependencies": { 16 | "@project/components": "1.0.0", 17 | "@react-workspaces/react-scripts": "^3.3.0-alpha-08", 18 | "react": "^16.12.0", 19 | "react-dom": "^16.12.0" 20 | }, 21 | "devDependencies": { 22 | "cross-env": "6.0.3", 23 | "enzyme": "^3.11.0", 24 | "enzyme-adapter-react-16": "^1.15.2", 25 | "gh-pages": "^2.2.0", 26 | "source-map-explorer": "^2.2.2", 27 | "eslint-config-react-app": "^5.1.0", 28 | "eslint-config-prettier": "^6.9.0", 29 | "eslint-plugin-prettier": "^3.1.2" 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | }, 43 | "jest": { 44 | "collectCoverageFrom": [ 45 | "src/**/*.{js,jsx}", 46 | "!src/setupTests.{js,jsx}", 47 | "!src/index.{js,jsx}", 48 | "!src/serviceWorker.{js,jsx}", 49 | "!src/**/*.(spec|test|stories).{js,jsx}" 50 | ], 51 | "coverageThreshold": { 52 | "global": { 53 | "statements": 98, 54 | "branches": 98, 55 | "functions": 98, 56 | "lines": 98 57 | } 58 | } 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /packages/apps/app-multi-comps/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-workspaces/react-workspaces-playground/59e2a8948a7f16579aa4776db5f09a1dcea46c7a/packages/apps/app-multi-comps/public/favicon.ico -------------------------------------------------------------------------------- /packages/apps/app-multi-comps/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /packages/apps/app-multi-comps/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /packages/apps/app-multi-comps/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-header { 6 | background-color: #282c34; 7 | min-height: 100vh; 8 | display: flex; 9 | flex-direction: column; 10 | align-items: center; 11 | justify-content: center; 12 | font-size: calc(10px + 2vmin); 13 | color: white; 14 | } 15 | 16 | .App-link { 17 | font-size: calc(30px + 2vmin); 18 | color: #2f90bc; 19 | font-weight: 100; 20 | } 21 | 22 | .App-link:hover, 23 | .App-link:focus { 24 | color: #00afff; 25 | } 26 | 27 | .App-link strong { 28 | font-weight: 400; 29 | } 30 | 31 | h1 { 32 | margin: 0; 33 | padding: 0; 34 | } 35 | 36 | h2 { 37 | margin-bottom: 0; 38 | padding: 0; 39 | font-size: calc(10px + 2vmin); 40 | font-weight: 200; 41 | } 42 | 43 | .file { 44 | font-size: calc(6px + 1vmin); 45 | color: #faa; 46 | display: block; 47 | } 48 | 49 | .components div { 50 | margin: 1vmin; 51 | float: left; 52 | } 53 | 54 | .React-logo { 55 | animation: React-logo-spin infinite 20s linear; 56 | height: 40vmin; 57 | } 58 | 59 | .Yarn-cat { 60 | animation: Yarn-cat-move infinite 2s ease; 61 | height: 40vmin; 62 | position: relative; 63 | margin-left: -20vmin; 64 | margin-top: 7.5vmin; 65 | } 66 | 67 | @keyframes React-logo-spin { 68 | from { 69 | transform: rotate(0deg); 70 | } 71 | to { 72 | transform: rotate(360deg); 73 | } 74 | } 75 | 76 | @keyframes Yarn-cat-move { 77 | 0% { 78 | transform: translateX(0%); 79 | } 80 | 50% { 81 | transform: translateX(20%); 82 | } 83 | 100% { 84 | transform: translateX(0%); 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /packages/apps/app-multi-comps/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import ReactLogo from './ReactLogo.svg'; 3 | import YarnCat from './YarnCat.svg'; 4 | import './App.css'; 5 | 6 | import { CompOne, CompTwo } from '@project/components'; 7 | 8 | class App extends Component { 9 | render() { 10 | return ( 11 |
12 |
13 |
14 | React Logo 15 | Yarn Workspaces Cat 16 |
17 |

18 | 24 | React Workspaces 25 | 26 |

27 |

Hot Reload Your Workspaces

28 |

29 | packages/apps/app-multi-comps/src/App.js 30 | packages/components/src/CompOne/CompOne.js 31 | packages/components/src/CompTwo/CompTwo.js 32 |

33 |
34 | 35 | 36 |
37 |
38 |
39 | ); 40 | } 41 | } 42 | 43 | export default App; 44 | -------------------------------------------------------------------------------- /packages/apps/app-multi-comps/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /packages/apps/app-multi-comps/src/ReactLogo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Group 3 5 | Created with Sketch. 6 | 7 | 8 | 9 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /packages/apps/app-multi-comps/src/YarnCat.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Group 2 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/apps/app-multi-comps/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 5 | 'Droid Sans', 'Helvetica Neue', sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; 12 | } 13 | -------------------------------------------------------------------------------- /packages/apps/app-multi-comps/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /packages/apps/app-multi-comps/src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.1/8 is considered localhost for IPv4. 18 | window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/), 19 | ); 20 | 21 | export function register(config) { 22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 23 | // The URL constructor is available in all browsers that support SW. 24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 25 | if (publicUrl.origin !== window.location.origin) { 26 | // Our service worker won't work if PUBLIC_URL is on a different origin 27 | // from what our page is served on. This might happen if a CDN is used to 28 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 29 | return; 30 | } 31 | 32 | window.addEventListener('load', () => { 33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 34 | 35 | if (isLocalhost) { 36 | // This is running on localhost. Let's check if a service worker still exists or not. 37 | checkValidServiceWorker(swUrl, config); 38 | 39 | // Add some additional logging to localhost, pointing developers to the 40 | // service worker/PWA documentation. 41 | navigator.serviceWorker.ready.then(() => { 42 | console.log( 43 | 'This web app is being served cache-first by a service ' + 44 | 'worker. To learn more, visit https://bit.ly/CRA-PWA', 45 | ); 46 | }); 47 | } else { 48 | // Is not localhost. Just register service worker 49 | registerValidSW(swUrl, config); 50 | } 51 | }); 52 | } 53 | } 54 | 55 | function registerValidSW(swUrl, config) { 56 | navigator.serviceWorker 57 | .register(swUrl) 58 | .then(registration => { 59 | registration.onupdatefound = () => { 60 | const installingWorker = registration.installing; 61 | if (installingWorker === null) { 62 | return; 63 | } 64 | 65 | installingWorker.onstatechange = () => { 66 | if (installingWorker.state === 'installed') { 67 | if (navigator.serviceWorker.controller) { 68 | // At this point, the updated precached content has been fetched, 69 | // but the previous service worker will still serve the older 70 | // content until all client tabs are closed. 71 | console.log( 72 | 'New content is available and will be used when all ' + 73 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.', 74 | ); 75 | 76 | // Execute callback 77 | if (config && config.onUpdate) { 78 | config.onUpdate(registration); 79 | } 80 | } else { 81 | // At this point, everything has been precached. 82 | // It's the perfect time to display a 83 | // "Content is cached for offline use." message. 84 | console.log('Content is cached for offline use.'); 85 | 86 | // Execute callback 87 | if (config && config.onSuccess) { 88 | config.onSuccess(registration); 89 | } 90 | } 91 | } 92 | }; 93 | }; 94 | }) 95 | .catch(error => { 96 | console.error('Error during service worker registration:', error); 97 | }); 98 | } 99 | 100 | function checkValidServiceWorker(swUrl, config) { 101 | // Check if the service worker can be found. If it can't reload the page. 102 | fetch(swUrl) 103 | .then(response => { 104 | // Ensure service worker exists, and that we really are getting a JS file. 105 | const contentType = response.headers.get('content-type'); 106 | if (response.status === 404 || (contentType !== null && contentType.indexOf('javascript') === -1)) { 107 | // No service worker found. Probably a different app. Reload the page. 108 | navigator.serviceWorker.ready.then(registration => { 109 | registration.unregister().then(() => { 110 | window.location.reload(); 111 | }); 112 | }); 113 | } else { 114 | // Service worker found. Proceed as normal. 115 | registerValidSW(swUrl, config); 116 | } 117 | }) 118 | .catch(() => { 119 | console.log('No internet connection found. App is running in offline mode.'); 120 | }); 121 | } 122 | 123 | export function unregister() { 124 | if ('serviceWorker' in navigator) { 125 | navigator.serviceWorker.ready.then(registration => { 126 | registration.unregister(); 127 | }); 128 | } 129 | } 130 | -------------------------------------------------------------------------------- /packages/apps/app-multi-comps/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // SetupTests.js - Imports globals into Jest tests 2 | 3 | require('jest-prop-type-error'); 4 | 5 | const enzyme = require('enzyme'); 6 | const Adapter = require('enzyme-adapter-react-16'); 7 | enzyme.configure({ adapter: new Adapter() }); 8 | -------------------------------------------------------------------------------- /packages/apps/app-single-comp/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "plugins": ["react", "prettier", "jsx-a11y", "import"], 4 | "extends": ["react-app", "prettier", "prettier/react"], 5 | "globals": { 6 | "expect": true, 7 | "describe": true, 8 | "it": true, 9 | "fixture": true, 10 | "test": true, 11 | "jest": true, 12 | "document": true, 13 | "window": true, 14 | "fetch": true, 15 | "navigator": true 16 | }, 17 | "rules": { 18 | "space-before-function-paren": 0, 19 | "quotes": 0, 20 | "operator-linebreak": 0, 21 | "react/jsx-tag-spacing": [ 22 | "error", 23 | { 24 | "beforeSelfClosing": "always" 25 | } 26 | ] 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /packages/apps/app-single-comp/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /packages/apps/app-single-comp/README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console. 14 | 15 | ### `npm test` 16 | 17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `npm run build` 21 | 22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `npm run eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 35 | 36 | Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 37 | 38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | -------------------------------------------------------------------------------- /packages/apps/app-single-comp/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@project/app-single-comp", 3 | "version": "1.0.0", 4 | "homepage": "https://react-workspaces.github.io/react-workspaces-playground", 5 | "private": true, 6 | "scripts": { 7 | "start": "react-scripts start", 8 | "build": "react-scripts build", 9 | "test": "react-scripts test", 10 | "lint": "eslint ./src/**/*.js --max-warnings=0 --format=codeframe", 11 | "predeploy": "yarn run build", 12 | "deploy": "gh-pages -d build", 13 | "analyze": "source-map-explorer 'build/static/js/*.js'" 14 | }, 15 | "dependencies": { 16 | "@project/components": "1.0.0", 17 | "@react-workspaces/react-scripts": "^3.3.0-alpha-08", 18 | "react": "^16.12.0", 19 | "react-dom": "^16.12.0" 20 | }, 21 | "devDependencies": { 22 | "cross-env": "6.0.3", 23 | "enzyme": "^3.11.0", 24 | "enzyme-adapter-react-16": "^1.15.2", 25 | "gh-pages": "^2.2.0", 26 | "source-map-explorer": "^2.2.2", 27 | "eslint-config-react-app": "^5.1.0", 28 | "eslint-config-prettier": "^6.9.0", 29 | "eslint-plugin-prettier": "^3.1.2" 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | }, 43 | "jest": { 44 | "collectCoverageFrom": [ 45 | "src/**/*.{js,jsx}", 46 | "!src/setupTests.{js,jsx}", 47 | "!src/index.{js,jsx}", 48 | "!src/serviceWorker.{js,jsx}", 49 | "!src/**/*.(spec|test|stories).{js,jsx}" 50 | ], 51 | "coverageThreshold": { 52 | "global": { 53 | "statements": 98, 54 | "branches": 98, 55 | "functions": 98, 56 | "lines": 98 57 | } 58 | } 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /packages/apps/app-single-comp/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-workspaces/react-workspaces-playground/59e2a8948a7f16579aa4776db5f09a1dcea46c7a/packages/apps/app-single-comp/public/favicon.ico -------------------------------------------------------------------------------- /packages/apps/app-single-comp/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /packages/apps/app-single-comp/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /packages/apps/app-single-comp/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-header { 6 | background-color: #282c34; 7 | min-height: 100vh; 8 | display: flex; 9 | flex-direction: column; 10 | align-items: center; 11 | justify-content: center; 12 | font-size: calc(10px + 2vmin); 13 | color: white; 14 | } 15 | 16 | .App-link { 17 | font-size: calc(30px + 2vmin); 18 | color: #2f90bc; 19 | font-weight: 100; 20 | } 21 | 22 | .App-link:hover, 23 | .App-link:focus { 24 | color: #00afff; 25 | } 26 | 27 | .App-link strong { 28 | font-weight: 400; 29 | } 30 | 31 | h1 { 32 | margin: 0; 33 | padding: 0; 34 | } 35 | 36 | h2 { 37 | margin-bottom: 0; 38 | padding: 0; 39 | font-size: calc(10px + 2vmin); 40 | font-weight: 200; 41 | } 42 | 43 | .file { 44 | font-size: calc(6px + 1vmin); 45 | color: #faa; 46 | display: block; 47 | } 48 | 49 | .components div { 50 | margin: 1vmin; 51 | float: left; 52 | } 53 | 54 | .React-logo { 55 | animation: React-logo-spin infinite 20s linear; 56 | height: 40vmin; 57 | } 58 | 59 | .Yarn-cat { 60 | animation: Yarn-cat-move infinite 2s ease; 61 | height: 40vmin; 62 | position: relative; 63 | margin-left: -20vmin; 64 | margin-top: 7.5vmin; 65 | } 66 | 67 | @keyframes React-logo-spin { 68 | from { 69 | transform: rotate(0deg); 70 | } 71 | to { 72 | transform: rotate(360deg); 73 | } 74 | } 75 | 76 | @keyframes Yarn-cat-move { 77 | 0% { 78 | transform: translateX(0%); 79 | } 80 | 50% { 81 | transform: translateX(20%); 82 | } 83 | 100% { 84 | transform: translateX(0%); 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /packages/apps/app-single-comp/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import ReactLogo from './ReactLogo.svg'; 3 | import YarnCat from './YarnCat.svg'; 4 | import './App.css'; 5 | 6 | import { CompOne } from '@project/components'; 7 | 8 | class App extends Component { 9 | render() { 10 | return ( 11 |
12 |
13 |
14 | React Logo 15 | Yarn Workspaces Cat 16 |
17 |

18 | 24 | React Workspaces 25 | 26 |

27 |

Hot Reload Your Workspaces

28 |

29 | packages/apps/app-single-comp/src/App.js 30 | packages/components/src/CompOne/CompOne.js 31 | packages/components/src/CompTwo/CompTwo.js 32 |

33 |
34 | 35 |
36 |
37 |
38 | ); 39 | } 40 | } 41 | 42 | export default App; 43 | -------------------------------------------------------------------------------- /packages/apps/app-single-comp/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /packages/apps/app-single-comp/src/ReactLogo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Group 3 5 | Created with Sketch. 6 | 7 | 8 | 9 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /packages/apps/app-single-comp/src/YarnCat.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Group 2 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/apps/app-single-comp/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 5 | 'Droid Sans', 'Helvetica Neue', sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; 12 | } 13 | -------------------------------------------------------------------------------- /packages/apps/app-single-comp/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /packages/apps/app-single-comp/src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.1/8 is considered localhost for IPv4. 18 | window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/), 19 | ); 20 | 21 | export function register(config) { 22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 23 | // The URL constructor is available in all browsers that support SW. 24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 25 | if (publicUrl.origin !== window.location.origin) { 26 | // Our service worker won't work if PUBLIC_URL is on a different origin 27 | // from what our page is served on. This might happen if a CDN is used to 28 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 29 | return; 30 | } 31 | 32 | window.addEventListener('load', () => { 33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 34 | 35 | if (isLocalhost) { 36 | // This is running on localhost. Let's check if a service worker still exists or not. 37 | checkValidServiceWorker(swUrl, config); 38 | 39 | // Add some additional logging to localhost, pointing developers to the 40 | // service worker/PWA documentation. 41 | navigator.serviceWorker.ready.then(() => { 42 | console.log( 43 | 'This web app is being served cache-first by a service ' + 44 | 'worker. To learn more, visit https://bit.ly/CRA-PWA', 45 | ); 46 | }); 47 | } else { 48 | // Is not localhost. Just register service worker 49 | registerValidSW(swUrl, config); 50 | } 51 | }); 52 | } 53 | } 54 | 55 | function registerValidSW(swUrl, config) { 56 | navigator.serviceWorker 57 | .register(swUrl) 58 | .then(registration => { 59 | registration.onupdatefound = () => { 60 | const installingWorker = registration.installing; 61 | if (installingWorker === null) { 62 | return; 63 | } 64 | 65 | installingWorker.onstatechange = () => { 66 | if (installingWorker.state === 'installed') { 67 | if (navigator.serviceWorker.controller) { 68 | // At this point, the updated precached content has been fetched, 69 | // but the previous service worker will still serve the older 70 | // content until all client tabs are closed. 71 | console.log( 72 | 'New content is available and will be used when all ' + 73 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.', 74 | ); 75 | 76 | // Execute callback 77 | if (config && config.onUpdate) { 78 | config.onUpdate(registration); 79 | } 80 | } else { 81 | // At this point, everything has been precached. 82 | // It's the perfect time to display a 83 | // "Content is cached for offline use." message. 84 | console.log('Content is cached for offline use.'); 85 | 86 | // Execute callback 87 | if (config && config.onSuccess) { 88 | config.onSuccess(registration); 89 | } 90 | } 91 | } 92 | }; 93 | }; 94 | }) 95 | .catch(error => { 96 | console.error('Error during service worker registration:', error); 97 | }); 98 | } 99 | 100 | function checkValidServiceWorker(swUrl, config) { 101 | // Check if the service worker can be found. If it can't reload the page. 102 | fetch(swUrl) 103 | .then(response => { 104 | // Ensure service worker exists, and that we really are getting a JS file. 105 | const contentType = response.headers.get('content-type'); 106 | if (response.status === 404 || (contentType !== null && contentType.indexOf('javascript') === -1)) { 107 | // No service worker found. Probably a different app. Reload the page. 108 | navigator.serviceWorker.ready.then(registration => { 109 | registration.unregister().then(() => { 110 | window.location.reload(); 111 | }); 112 | }); 113 | } else { 114 | // Service worker found. Proceed as normal. 115 | registerValidSW(swUrl, config); 116 | } 117 | }) 118 | .catch(() => { 119 | console.log('No internet connection found. App is running in offline mode.'); 120 | }); 121 | } 122 | 123 | export function unregister() { 124 | if ('serviceWorker' in navigator) { 125 | navigator.serviceWorker.ready.then(registration => { 126 | registration.unregister(); 127 | }); 128 | } 129 | } 130 | -------------------------------------------------------------------------------- /packages/apps/app-single-comp/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // SetupTests.js - Imports globals into Jest tests 2 | 3 | require('jest-prop-type-error'); 4 | 5 | const enzyme = require('enzyme'); 6 | const Adapter = require('enzyme-adapter-react-16'); 7 | enzyme.configure({ adapter: new Adapter() }); 8 | -------------------------------------------------------------------------------- /packages/apps/app-typescript/.env: -------------------------------------------------------------------------------- 1 | # Required for running external components! 2 | EXTEND_ESLINT=true -------------------------------------------------------------------------------- /packages/apps/app-typescript/.eslintignore: -------------------------------------------------------------------------------- 1 | **/node_modules/** 2 | **/dist/** 3 | **/storybook-static/** 4 | **/coverage/** 5 | **/build/** 6 | **/.git/** 7 | **/public/** 8 | serviceWorker.ts -------------------------------------------------------------------------------- /packages/apps/app-typescript/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parser: '@typescript-eslint/parser', // Specifies the ESLint parser 3 | extends: [ 4 | 'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react 5 | 'plugin:@typescript-eslint/recommended', // Uses the recommended rules from @typescript-eslint/eslint-plugin 6 | ], 7 | parserOptions: { 8 | ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features 9 | sourceType: 'module', // Allows for the use of imports 10 | ecmaFeatures: { 11 | jsx: true, // Allows for the parsing of JSX 12 | }, 13 | }, 14 | rules: { 15 | // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs 16 | // e.g. "@typescript-eslint/explicit-function-return-type": "off", 17 | }, 18 | settings: { 19 | react: { 20 | version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use 21 | }, 22 | }, 23 | }; 24 | -------------------------------------------------------------------------------- /packages/apps/app-typescript/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /packages/apps/app-typescript/README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `yarn start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console. 14 | 15 | ### `yarn test` 16 | 17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `yarn build` 21 | 22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `yarn eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 35 | 36 | Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 37 | 38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | -------------------------------------------------------------------------------- /packages/apps/app-typescript/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@project/app-typescript", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@project/components-typescript": "1.0.0", 7 | "@react-workspaces/react-scripts": "^3.3.0-alpha-08", 8 | "@testing-library/jest-dom": "^4.2.4", 9 | "@testing-library/react": "^9.4.0", 10 | "@testing-library/user-event": "^8.0.3", 11 | "@types/jest": "^24.0.25", 12 | "@types/node": "^13.1.6", 13 | "@types/react": "^16.9.17", 14 | "@types/react-dom": "^16.9.4", 15 | "react": "^16.12.0", 16 | "react-dom": "^16.12.0", 17 | "typescript": "~3.7.4" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject", 24 | "lint": "eslint ./src/**/*.{ts,tsx} --max-warnings=0 --format=codeframe" 25 | }, 26 | "eslintConfig": { 27 | "extends": "react-app" 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | }, 41 | "jest": { 42 | "collectCoverageFrom": [ 43 | "src/**/*.{ts,tsx}", 44 | "!src/setupTests.{ts,tsx}", 45 | "!src/index.{ts,tsx}", 46 | "!src/serviceWorker.{ts,tsx}", 47 | "!src/**/*.(spec|test|stories).{ts,tsx}" 48 | ], 49 | "coverageThreshold": { 50 | "global": { 51 | "statements": 98, 52 | "branches": 98, 53 | "functions": 98, 54 | "lines": 98 55 | } 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /packages/apps/app-typescript/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-workspaces/react-workspaces-playground/59e2a8948a7f16579aa4776db5f09a1dcea46c7a/packages/apps/app-typescript/public/favicon.ico -------------------------------------------------------------------------------- /packages/apps/app-typescript/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /packages/apps/app-typescript/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-workspaces/react-workspaces-playground/59e2a8948a7f16579aa4776db5f09a1dcea46c7a/packages/apps/app-typescript/public/logo192.png -------------------------------------------------------------------------------- /packages/apps/app-typescript/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-workspaces/react-workspaces-playground/59e2a8948a7f16579aa4776db5f09a1dcea46c7a/packages/apps/app-typescript/public/logo512.png -------------------------------------------------------------------------------- /packages/apps/app-typescript/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /packages/apps/app-typescript/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /packages/apps/app-typescript/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-header { 6 | background-color: #282c34; 7 | min-height: 100vh; 8 | display: flex; 9 | flex-direction: column; 10 | align-items: center; 11 | justify-content: center; 12 | font-size: calc(10px + 2vmin); 13 | color: white; 14 | } 15 | 16 | .App-link { 17 | font-size: calc(30px + 2vmin); 18 | color: #2f90bc; 19 | font-weight: 100; 20 | } 21 | 22 | .App-link:hover, 23 | .App-link:focus { 24 | color: #00afff; 25 | } 26 | 27 | .App-link strong { 28 | font-weight: 400; 29 | } 30 | 31 | h1 { 32 | margin: 0; 33 | padding: 0; 34 | } 35 | 36 | h2 { 37 | margin-bottom: 0; 38 | padding: 0; 39 | font-size: calc(10px + 2vmin); 40 | font-weight: 200; 41 | } 42 | 43 | .file { 44 | font-size: calc(6px + 1vmin); 45 | color: #faa; 46 | display: block; 47 | } 48 | 49 | .components div { 50 | margin: 1vmin; 51 | float: left; 52 | } 53 | 54 | .React-logo { 55 | animation: React-logo-spin infinite 20s linear; 56 | height: 40vmin; 57 | } 58 | 59 | .Yarn-cat { 60 | animation: Yarn-cat-move infinite 2s ease; 61 | height: 40vmin; 62 | position: relative; 63 | margin-left: -20vmin; 64 | margin-top: 7.5vmin; 65 | } 66 | 67 | @keyframes React-logo-spin { 68 | from { 69 | transform: rotate(0deg); 70 | } 71 | to { 72 | transform: rotate(360deg); 73 | } 74 | } 75 | 76 | @keyframes Yarn-cat-move { 77 | 0% { 78 | transform: translateX(0%); 79 | } 80 | 50% { 81 | transform: translateX(20%); 82 | } 83 | 100% { 84 | transform: translateX(0%); 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /packages/apps/app-typescript/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const h2Element = getByText(/Hot Reload Your React TypeScript Workspaces/i); 8 | expect(h2Element).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /packages/apps/app-typescript/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactLogo from './ReactLogo.svg'; 3 | import YarnCat from './YarnCat.svg'; 4 | import './App.css'; 5 | 6 | import { CompOne, CompTwo } from '@project/components-typescript'; 7 | 8 | const App: React.FC = () => { 9 | return ( 10 |
11 |
12 |
13 | React Logo 14 | Yarn Workspaces Cat 15 |
16 |

17 | 23 | React Workspaces (TypeScript) 24 | 25 |

26 |

Hot Reload Your React TypeScript Workspaces

27 |

28 | packages/apps/app-typescript/src/App.tsx 29 | packages/components/src/CompOne/CompOne.tsx 30 | packages/components/src/CompTwo/CompTwo.tsx 31 |

32 |
33 | 34 | 35 |
36 |
37 |
38 | ); 39 | }; 40 | 41 | export default App; 42 | -------------------------------------------------------------------------------- /packages/apps/app-typescript/src/ReactLogo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Group 3 5 | Created with Sketch. 6 | 7 | 8 | 9 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /packages/apps/app-typescript/src/YarnCat.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Group 2 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /packages/apps/app-typescript/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 4 | 'Droid Sans', 'Helvetica Neue', sans-serif; 5 | -webkit-font-smoothing: antialiased; 6 | -moz-osx-font-smoothing: grayscale; 7 | } 8 | 9 | code { 10 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; 11 | } 12 | -------------------------------------------------------------------------------- /packages/apps/app-typescript/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: https://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /packages/apps/app-typescript/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /packages/apps/app-typescript/src/serviceWorker.ts: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.0/8 are considered localhost for IPv4. 18 | window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/), 19 | ); 20 | 21 | type Config = { 22 | onSuccess?: (registration: ServiceWorkerRegistration) => void; 23 | onUpdate?: (registration: ServiceWorkerRegistration) => void; 24 | }; 25 | 26 | export function register(config?: Config) { 27 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 28 | // The URL constructor is available in all browsers that support SW. 29 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 30 | if (publicUrl.origin !== window.location.origin) { 31 | // Our service worker won't work if PUBLIC_URL is on a different origin 32 | // from what our page is served on. This might happen if a CDN is used to 33 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 34 | return; 35 | } 36 | 37 | window.addEventListener('load', () => { 38 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 39 | 40 | if (isLocalhost) { 41 | // This is running on localhost. Let's check if a service worker still exists or not. 42 | checkValidServiceWorker(swUrl, config); 43 | 44 | // Add some additional logging to localhost, pointing developers to the 45 | // service worker/PWA documentation. 46 | navigator.serviceWorker.ready.then(() => { 47 | console.log( 48 | 'This web app is being served cache-first by a service ' + 49 | 'worker. To learn more, visit https://bit.ly/CRA-PWA', 50 | ); 51 | }); 52 | } else { 53 | // Is not localhost. Just register service worker 54 | registerValidSW(swUrl, config); 55 | } 56 | }); 57 | } 58 | } 59 | 60 | function registerValidSW(swUrl: string, config?: Config) { 61 | navigator.serviceWorker 62 | .register(swUrl) 63 | .then(registration => { 64 | registration.onupdatefound = () => { 65 | const installingWorker = registration.installing; 66 | if (installingWorker == null) { 67 | return; 68 | } 69 | installingWorker.onstatechange = () => { 70 | if (installingWorker.state === 'installed') { 71 | if (navigator.serviceWorker.controller) { 72 | // At this point, the updated precached content has been fetched, 73 | // but the previous service worker will still serve the older 74 | // content until all client tabs are closed. 75 | console.log( 76 | 'New content is available and will be used when all ' + 77 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.', 78 | ); 79 | 80 | // Execute callback 81 | if (config && config.onUpdate) { 82 | config.onUpdate(registration); 83 | } 84 | } else { 85 | // At this point, everything has been precached. 86 | // It's the perfect time to display a 87 | // "Content is cached for offline use." message. 88 | console.log('Content is cached for offline use.'); 89 | 90 | // Execute callback 91 | if (config && config.onSuccess) { 92 | config.onSuccess(registration); 93 | } 94 | } 95 | } 96 | }; 97 | }; 98 | }) 99 | .catch(error => { 100 | console.error('Error during service worker registration:', error); 101 | }); 102 | } 103 | 104 | function checkValidServiceWorker(swUrl: string, config?: Config) { 105 | // Check if the service worker can be found. If it can't reload the page. 106 | fetch(swUrl, { 107 | headers: { 'Service-Worker': 'script' }, 108 | }) 109 | .then(response => { 110 | // Ensure service worker exists, and that we really are getting a JS file. 111 | const contentType = response.headers.get('content-type'); 112 | if (response.status === 404 || (contentType != null && contentType.indexOf('javascript') === -1)) { 113 | // No service worker found. Probably a different app. Reload the page. 114 | navigator.serviceWorker.ready.then(registration => { 115 | registration.unregister().then(() => { 116 | window.location.reload(); 117 | }); 118 | }); 119 | } else { 120 | // Service worker found. Proceed as normal. 121 | registerValidSW(swUrl, config); 122 | } 123 | }) 124 | .catch(() => { 125 | console.log('No internet connection found. App is running in offline mode.'); 126 | }); 127 | } 128 | 129 | export function unregister() { 130 | if ('serviceWorker' in navigator) { 131 | navigator.serviceWorker.ready.then(registration => { 132 | registration.unregister(); 133 | }); 134 | } 135 | } 136 | -------------------------------------------------------------------------------- /packages/apps/app-typescript/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /packages/apps/app-typescript/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "esModuleInterop": true, 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "noEmit": true, 16 | "jsx": "react" 17 | }, 18 | "include": ["src"] 19 | } 20 | -------------------------------------------------------------------------------- /packages/components-typescript/.eslintignore: -------------------------------------------------------------------------------- 1 | **/node_modules/** 2 | **/dist/** 3 | **/storybook-static/** 4 | **/coverage/** 5 | **/build/** 6 | **/.git/** 7 | **/public/** 8 | serviceWorker.ts -------------------------------------------------------------------------------- /packages/components-typescript/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parser: '@typescript-eslint/parser', // Specifies the ESLint parser 3 | extends: [ 4 | // Extend on the config used in `react-scripts` 5 | require.resolve('eslint-config-react-app'), 6 | // If you want extra rules/extensions, it can be added here: 7 | // 'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react 8 | // 'plugin:@typescript-eslint/recommended', // Uses the recommended rules from @typescript-eslint/eslint-plugin 9 | ], 10 | parserOptions: { 11 | ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features 12 | sourceType: 'module', // Allows for the use of imports 13 | ecmaFeatures: { 14 | jsx: true, // Allows for the parsing of JSX 15 | }, 16 | }, 17 | rules: { 18 | // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs 19 | // e.g. "@typescript-eslint/explicit-function-return-type": "off", 20 | }, 21 | settings: { 22 | react: { 23 | version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use 24 | }, 25 | }, 26 | }; 27 | -------------------------------------------------------------------------------- /packages/components-typescript/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as CompOne } from './src/CompOne'; 2 | export { default as CompTwo } from './src/CompTwo'; 3 | -------------------------------------------------------------------------------- /packages/components-typescript/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@project/components-typescript", 3 | "version": "1.0.0", 4 | "main": "src/index.tsx", 5 | "main:src": "src/index.tsx", 6 | "scripts": { 7 | "test": "react-scripts test", 8 | "lint": "eslint ./src/**/*.tsx --max-warnings=0 --format=codeframe" 9 | }, 10 | "dependencies": { 11 | "@react-workspaces/react-scripts": "3.3.0-alpha-08", 12 | "@storybook/react": "^5.2.8", 13 | "@testing-library/jest-dom": "^4.2.4", 14 | "@testing-library/react": "^9.4.0", 15 | "@testing-library/user-event": "^8.0.3", 16 | "@types/jest": "^24.0.25", 17 | "@types/node": "^13.1.6", 18 | "@types/react": "^16.9.17", 19 | "@types/react-dom": "^16.9.4", 20 | "@typescript-eslint/eslint-plugin": "^2.15.0", 21 | "@typescript-eslint/parser": "^2.15.0", 22 | "react": "^16.12.0", 23 | "react-dom": "^16.12.0", 24 | "react-scripts": "3.3.0", 25 | "typescript": "~3.7.4" 26 | }, 27 | "eslintConfig": { 28 | "extends": "react-app" 29 | }, 30 | "browserslist": [ 31 | ">0.2%", 32 | "not dead", 33 | "not ie <= 11", 34 | "not op_mini all" 35 | ], 36 | "jest": { 37 | "collectCoverageFrom": [ 38 | "src/**/*.{ts,tsx}", 39 | "!src/setupTests.{ts,tsx}", 40 | "!src/serviceWorker.{ts,jsx}", 41 | "!src/**/*.(spec|test|stories).{ts,tsx}" 42 | ], 43 | "coverageThreshold": { 44 | "global": { 45 | "statements": 98, 46 | "branches": 98, 47 | "functions": 98, 48 | "lines": 98 49 | } 50 | } 51 | }, 52 | "license": "MIT" 53 | } 54 | -------------------------------------------------------------------------------- /packages/components-typescript/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /packages/components-typescript/serviceWorker.ts: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.0/8 are considered localhost for IPv4. 18 | window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/), 19 | ); 20 | 21 | type Config = { 22 | onSuccess?: (registration: ServiceWorkerRegistration) => void; 23 | onUpdate?: (registration: ServiceWorkerRegistration) => void; 24 | }; 25 | 26 | export function register(config?: Config) { 27 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 28 | // The URL constructor is available in all browsers that support SW. 29 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 30 | if (publicUrl.origin !== window.location.origin) { 31 | // Our service worker won't work if PUBLIC_URL is on a different origin 32 | // from what our page is served on. This might happen if a CDN is used to 33 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 34 | return; 35 | } 36 | 37 | window.addEventListener('load', () => { 38 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 39 | 40 | if (isLocalhost) { 41 | // This is running on localhost. Let's check if a service worker still exists or not. 42 | checkValidServiceWorker(swUrl, config); 43 | 44 | // Add some additional logging to localhost, pointing developers to the 45 | // service worker/PWA documentation. 46 | navigator.serviceWorker.ready.then(() => { 47 | console.log( 48 | 'This web app is being served cache-first by a service ' + 49 | 'worker. To learn more, visit https://bit.ly/CRA-PWA', 50 | ); 51 | }); 52 | } else { 53 | // Is not localhost. Just register service worker 54 | registerValidSW(swUrl, config); 55 | } 56 | }); 57 | } 58 | } 59 | 60 | function registerValidSW(swUrl: string, config?: Config) { 61 | navigator.serviceWorker 62 | .register(swUrl) 63 | .then(registration => { 64 | registration.onupdatefound = () => { 65 | const installingWorker = registration.installing; 66 | if (installingWorker == null) { 67 | return; 68 | } 69 | installingWorker.onstatechange = () => { 70 | if (installingWorker.state === 'installed') { 71 | if (navigator.serviceWorker.controller) { 72 | // At this point, the updated precached content has been fetched, 73 | // but the previous service worker will still serve the older 74 | // content until all client tabs are closed. 75 | console.log( 76 | 'New content is available and will be used when all ' + 77 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.', 78 | ); 79 | 80 | // Execute callback 81 | if (config && config.onUpdate) { 82 | config.onUpdate(registration); 83 | } 84 | } else { 85 | // At this point, everything has been precached. 86 | // It's the perfect time to display a 87 | // "Content is cached for offline use." message. 88 | console.log('Content is cached for offline use.'); 89 | 90 | // Execute callback 91 | if (config && config.onSuccess) { 92 | config.onSuccess(registration); 93 | } 94 | } 95 | } 96 | }; 97 | }; 98 | }) 99 | .catch(error => { 100 | console.error('Error during service worker registration:', error); 101 | }); 102 | } 103 | 104 | function checkValidServiceWorker(swUrl: string, config?: Config) { 105 | // Check if the service worker can be found. If it can't reload the page. 106 | fetch(swUrl, { 107 | headers: { 'Service-Worker': 'script' }, 108 | }) 109 | .then(response => { 110 | // Ensure service worker exists, and that we really are getting a JS file. 111 | const contentType = response.headers.get('content-type'); 112 | if (response.status === 404 || (contentType != null && contentType.indexOf('javascript') === -1)) { 113 | // No service worker found. Probably a different app. Reload the page. 114 | navigator.serviceWorker.ready.then(registration => { 115 | registration.unregister().then(() => { 116 | window.location.reload(); 117 | }); 118 | }); 119 | } else { 120 | // Service worker found. Proceed as normal. 121 | registerValidSW(swUrl, config); 122 | } 123 | }) 124 | .catch(() => { 125 | console.log('No internet connection found. App is running in offline mode.'); 126 | }); 127 | } 128 | 129 | export function unregister() { 130 | if ('serviceWorker' in navigator) { 131 | navigator.serviceWorker.ready.then(registration => { 132 | registration.unregister(); 133 | }); 134 | } 135 | } 136 | -------------------------------------------------------------------------------- /packages/components-typescript/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /packages/components-typescript/src/CompOne/CompOne.css: -------------------------------------------------------------------------------- 1 | .Comp { 2 | border: 1px solid white; 3 | border-radius: 12px; 4 | padding: 3vmin; 5 | background: #164a61; 6 | } 7 | 8 | .Comp h3 { 9 | font-size: calc(24px + 1vmin); 10 | margin: 0; 11 | } 12 | -------------------------------------------------------------------------------- /packages/components-typescript/src/CompOne/CompOne.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { storiesOf } from '@storybook/react'; 3 | 4 | import CompOne from '.'; 5 | 6 | storiesOf('CompOne', module).add('Default', () => ); 7 | -------------------------------------------------------------------------------- /packages/components-typescript/src/CompOne/CompOne.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import CompOne from '.'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /packages/components-typescript/src/CompOne/CompOne.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './CompOne.css'; 3 | 4 | const CompOne: React.FC = () => { 5 | return ( 6 |
7 |

8 | 9 | ⚛️ 10 | 11 |   Comp One 12 |

13 |
14 | ); 15 | }; 16 | 17 | export default CompOne; 18 | -------------------------------------------------------------------------------- /packages/components-typescript/src/CompOne/index.tsx: -------------------------------------------------------------------------------- 1 | export { default } from './CompOne'; 2 | -------------------------------------------------------------------------------- /packages/components-typescript/src/CompTwo/CompTwo.css: -------------------------------------------------------------------------------- 1 | .Comp { 2 | border: 1px solid white; 3 | border-radius: 12px; 4 | padding: 3vmin; 5 | background: #164a61; 6 | } 7 | 8 | .Comp h3 { 9 | font-size: calc(24px + 1vmin); 10 | margin: 0; 11 | } 12 | -------------------------------------------------------------------------------- /packages/components-typescript/src/CompTwo/CompTwo.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { storiesOf } from '@storybook/react'; 3 | 4 | import CompTwo from '.'; 5 | 6 | storiesOf('CompTwo', module).add('Default', () => ); 7 | -------------------------------------------------------------------------------- /packages/components-typescript/src/CompTwo/CompTwo.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import CompTwo from '.'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /packages/components-typescript/src/CompTwo/CompTwo.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './CompTwo.css'; 3 | 4 | const CompTwo: React.FC = () => { 5 | return ( 6 |
7 |

8 | 9 | 🐱 10 | {' '} 11 | Comp Two 12 |

13 |
14 | ); 15 | }; 16 | 17 | export default CompTwo; 18 | -------------------------------------------------------------------------------- /packages/components-typescript/src/CompTwo/index.tsx: -------------------------------------------------------------------------------- 1 | export { default } from './CompTwo'; 2 | -------------------------------------------------------------------------------- /packages/components-typescript/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /packages/components-typescript/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "esModuleInterop": true, 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "noEmit": true, 16 | "jsx": "react" 17 | }, 18 | "include": ["src"] 19 | } 20 | -------------------------------------------------------------------------------- /packages/components/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "plugins": ["react", "prettier", "jsx-a11y", "import"], 4 | "extends": ["react-app", "prettier", "prettier/react"], 5 | "globals": { 6 | "expect": true, 7 | "describe": true, 8 | "it": true, 9 | "fixture": true, 10 | "test": true, 11 | "jest": true, 12 | "document": true, 13 | "window": true, 14 | "fetch": true, 15 | "navigator": true 16 | }, 17 | "rules": { 18 | "space-before-function-paren": 0, 19 | "quotes": 0, 20 | "operator-linebreak": 0, 21 | "react/jsx-tag-spacing": [ 22 | "error", 23 | { 24 | "beforeSelfClosing": "always" 25 | } 26 | ] 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /packages/components/index.js: -------------------------------------------------------------------------------- 1 | export { default as CompOne } from './src/CompOne'; 2 | export { default as CompTwo } from './src/CompTwo'; 3 | -------------------------------------------------------------------------------- /packages/components/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@project/components", 3 | "version": "1.0.0", 4 | "homepage": "https://react-workspaces.github.io/react-workspaces-playground", 5 | "main": "src/index.js", 6 | "main:src": "src/index.js", 7 | "scripts": { 8 | "test": "react-scripts test", 9 | "lint": "eslint ./src/**/*.js --max-warnings=0 --format=codeframe" 10 | }, 11 | "dependencies": { 12 | "@react-workspaces/react-scripts": "3.3.0-alpha-08", 13 | "@storybook/react": "^5.2.8", 14 | "react": "^16.12.0", 15 | "react-dom": "^16.12.0" 16 | }, 17 | "devDependencies": { 18 | "cross-env": "6.0.3", 19 | "enzyme": "^3.11.0", 20 | "enzyme-adapter-react-16": "^1.15.2", 21 | "prop-types": "^15.7.2", 22 | "eslint-config-prettier": "^6.9.0", 23 | "eslint-plugin-prettier": "^3.1.2", 24 | "eslint-config-react-app": "^5.1.0" 25 | }, 26 | "browserslist": [ 27 | ">0.2%", 28 | "not dead", 29 | "not ie <= 11", 30 | "not op_mini all" 31 | ], 32 | "jest": { 33 | "collectCoverageFrom": [ 34 | "src/**/*.{js}", 35 | "!src/setupTests.{js}", 36 | "!src/serviceWorker.{js}", 37 | "!src/**/*.(spec|test|stories).{js}" 38 | ], 39 | "coverageThreshold": { 40 | "global": { 41 | "statements": 98, 42 | "branches": 98, 43 | "functions": 98, 44 | "lines": 98 45 | } 46 | } 47 | }, 48 | "license": "MIT" 49 | } 50 | -------------------------------------------------------------------------------- /packages/components/setupTests.js: -------------------------------------------------------------------------------- 1 | // SetupTests.js - Imports globals into Jest tests 2 | 3 | require('jest-prop-type-error'); 4 | 5 | const enzyme = require('enzyme'); 6 | const Adapter = require('enzyme-adapter-react-16'); 7 | enzyme.configure({ adapter: new Adapter() }); 8 | -------------------------------------------------------------------------------- /packages/components/src/CompOne/CompOne.css: -------------------------------------------------------------------------------- 1 | .Comp { 2 | border: 1px solid white; 3 | border-radius: 12px; 4 | padding: 3vmin; 5 | background: #164a61; 6 | } 7 | 8 | .Comp h3 { 9 | font-size: calc(24px + 1vmin); 10 | margin: 0; 11 | } 12 | -------------------------------------------------------------------------------- /packages/components/src/CompOne/CompOne.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './CompOne.css'; 3 | 4 | const CompOne = () => ( 5 |
6 |

7 | 8 | ⚛️ 9 | 10 |   Comp One 11 |

12 |
13 | ); 14 | 15 | export default CompOne; 16 | -------------------------------------------------------------------------------- /packages/components/src/CompOne/CompOne.spec.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import CompOne from '.'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /packages/components/src/CompOne/CompOne.stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { storiesOf } from '@storybook/react'; 3 | 4 | import CompOne from '.'; 5 | 6 | storiesOf('CompOne', module).add('Default', () => ); 7 | -------------------------------------------------------------------------------- /packages/components/src/CompOne/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './CompOne'; 2 | -------------------------------------------------------------------------------- /packages/components/src/CompTwo/CompTwo.css: -------------------------------------------------------------------------------- 1 | .Comp { 2 | border: 1px solid white; 3 | border-radius: 12px; 4 | padding: 3vmin; 5 | background: #164a61; 6 | } 7 | 8 | .Comp h3 { 9 | font-size: calc(24px + 1vmin); 10 | margin: 0; 11 | } 12 | -------------------------------------------------------------------------------- /packages/components/src/CompTwo/CompTwo.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './CompTwo.css'; 3 | 4 | const CompTwo = () => ( 5 |
6 |

7 | 8 | 🐱 9 | {' '} 10 | Comp Two 11 |

12 |
13 | ); 14 | 15 | export default CompTwo; 16 | -------------------------------------------------------------------------------- /packages/components/src/CompTwo/CompTwo.spec.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import CompTwo from '.'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /packages/components/src/CompTwo/CompTwo.stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { storiesOf } from '@storybook/react'; 3 | 4 | import CompTwo from '.'; 5 | 6 | storiesOf('CompTwo', module).add('Default', () => ); 7 | -------------------------------------------------------------------------------- /packages/components/src/CompTwo/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './CompTwo'; 2 | -------------------------------------------------------------------------------- /packages/storybook-typescript/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parser: '@typescript-eslint/parser', // Specifies the ESLint parser 3 | extends: [ 4 | 'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react 5 | 'plugin:@typescript-eslint/recommended', // Uses the recommended rules from @typescript-eslint/eslint-plugin 6 | ], 7 | parserOptions: { 8 | ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features 9 | sourceType: 'module', // Allows for the use of imports 10 | ecmaFeatures: { 11 | jsx: true, // Allows for the parsing of JSX 12 | }, 13 | }, 14 | rules: { 15 | // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs 16 | // e.g. "@typescript-eslint/explicit-function-return-type": "off", 17 | }, 18 | settings: { 19 | react: { 20 | version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use 21 | }, 22 | }, 23 | }; 24 | -------------------------------------------------------------------------------- /packages/storybook-typescript/.storybook/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [] 3 | } 4 | -------------------------------------------------------------------------------- /packages/storybook-typescript/.storybook/addons.js: -------------------------------------------------------------------------------- 1 | import '@storybook/addon-links/register'; 2 | -------------------------------------------------------------------------------- /packages/storybook-typescript/.storybook/config.js: -------------------------------------------------------------------------------- 1 | import { addParameters, configure } from '@storybook/react'; 2 | import { themes } from '@storybook/theming'; 3 | 4 | addParameters({ 5 | options: { 6 | theme: themes.dark, 7 | }, 8 | }); 9 | 10 | const comps = require.context('@project/components-typescript/src', true, /.stories.tsx$/); 11 | 12 | configure(() => { 13 | comps.keys().forEach(filename => comps(filename)); 14 | }, module); 15 | -------------------------------------------------------------------------------- /packages/storybook-typescript/.storybook/preset.js: -------------------------------------------------------------------------------- 1 | module.exports = [ 2 | { 3 | name: '@storybook/preset-create-react-app', 4 | options: { 5 | tsDocgenLoaderOptions: {}, 6 | }, 7 | }, 8 | { 9 | name: '@storybook/addon-docs/react/preset', 10 | options: { 11 | configureJSX: true, 12 | sourceLoaderOptions: null, 13 | }, 14 | }, 15 | ]; 16 | -------------------------------------------------------------------------------- /packages/storybook-typescript/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@project/storybook-typescript", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "storybook": "start-storybook -p 9009", 7 | "build-storybook": "build-storybook" 8 | }, 9 | "dependencies": { 10 | "@project/components-typescript": "1.0.0", 11 | "@react-workspaces/react-scripts": "3.3.0-alpha-08", 12 | "react": "^16.12.0", 13 | "react-dom": "^16.12.0" 14 | }, 15 | "devDependencies": { 16 | "@babel/core": "^7.7.7", 17 | "@storybook/addon-actions": "^5.2.8", 18 | "@storybook/addon-docs": "^5.2.8", 19 | "@storybook/addon-info": "^5.2.8", 20 | "@storybook/addon-links": "^5.2.8", 21 | "@storybook/addons": "^5.2.8", 22 | "@storybook/preset-create-react-app": "^1.5.0", 23 | "@storybook/react": "^5.2.8", 24 | "@storybook/theming": "^5.2.8", 25 | "babel-loader": "^8.0.6", 26 | "cross-env": "6.0.3" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /packages/storybook-typescript/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "esModuleInterop": true, 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "noEmit": true, 16 | "jsx": "react" 17 | }, 18 | "include": ["src", ".storybook/*"] 19 | } 20 | -------------------------------------------------------------------------------- /packages/storybook/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "plugins": ["react", "prettier", "jsx-a11y", "import"], 4 | "extends": ["react-app", "prettier", "prettier/react"], 5 | "globals": { 6 | "expect": true, 7 | "describe": true, 8 | "it": true, 9 | "fixture": true, 10 | "test": true, 11 | "jest": true, 12 | "document": true, 13 | "window": true, 14 | "fetch": true, 15 | "navigator": true 16 | }, 17 | "rules": { 18 | "space-before-function-paren": 0, 19 | "quotes": 0, 20 | "operator-linebreak": 0, 21 | "react/jsx-tag-spacing": [ 22 | "error", 23 | { 24 | "beforeSelfClosing": "always" 25 | } 26 | ] 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /packages/storybook/.storybook/addons.js: -------------------------------------------------------------------------------- 1 | import '@storybook/addon-links/register'; 2 | -------------------------------------------------------------------------------- /packages/storybook/.storybook/config.js: -------------------------------------------------------------------------------- 1 | import { addParameters, configure } from '@storybook/react'; 2 | import { themes } from '@storybook/theming'; 3 | 4 | addParameters({ 5 | options: { 6 | theme: themes.dark, 7 | }, 8 | }); 9 | 10 | const comps = require.context('@project/components/src', true, /.stories.js$/); 11 | 12 | configure(() => { 13 | comps.keys().forEach(filename => comps(filename)); 14 | }, module); 15 | -------------------------------------------------------------------------------- /packages/storybook/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@project/storybook", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "storybook": "start-storybook -p 9009", 7 | "build-storybook": "build-storybook" 8 | }, 9 | "dependencies": { 10 | "@project/components": "1.0.0", 11 | "@babel/core": "^7.7.7", 12 | "@react-workspaces/react-scripts": "3.3.0-alpha-08", 13 | "babel-loader": "^8.0.6", 14 | "react": "^16.12.0", 15 | "react-dom": "^16.12.0", 16 | "cross-env": "6.0.3" 17 | }, 18 | "devDependencies": { 19 | "@storybook/react": "^5.2.8", 20 | "@storybook/addon-actions": "^5.2.8", 21 | "@storybook/addon-links": "^5.2.8", 22 | "@storybook/addons": "^5.2.8", 23 | "@storybook/theming": "^5.2.8" 24 | } 25 | } 26 | --------------------------------------------------------------------------------