feat: switch project to monorepo (#451)

.github/workflows/main.yml

@@ -35,23 +35,25 @@ jobs:
         run: yarn install --immutable
 
       - name: Lint
-        run: yarn lint
+        run: yarn workspace react-responsive-modal lint
 
       - name: Test
-        run: yarn test --ci --coverage --maxWorkers=2
+        run: yarn workspace react-responsive-modal test --ci --coverage --maxWorkers=2
 
       - name: Report coverage
         uses: codecov/codecov-action@v1
 
       - name: Build
-        run: yarn build
+        run: yarn workspace react-responsive-modal build
 
       - name: Build docs
-        run: yarn docz:build
+        run: yarn workspace react-responsive-modal docz:build
 
       - name: Cypress run
         uses: cypress-io/github-action@v2
         with:
           # Dependencies already installed before
           install: false
-          start: yarn dlx serve -l 3000 .docz/dist
+          # Use monorepo
+          project: ./react-responsive-modal
+          start: yarn dlx serve -l 3000 react-responsive-modal/.docz/dist

.github/workflows/release-please.yml

@@ -30,12 +30,12 @@ jobs:
         run: yarn install --immutable
         if: ${{ steps.release.outputs.release_created }}
 
-      - name: Build
-        run: yarn build
+      - name: Build react-responsive-modal
+        run: yarn workspace react-responsive-modal build
         if: ${{ steps.release.outputs.release_created }}
 
-      - name: Publish npm package
-        run: yarn npm publish
+      - name: Publish react-responsive-modal npm package
+        run: yarn workspace react-responsive-modal npm publish
         env:
           NPM_TOKEN: ${{secrets.NPM_TOKEN}}
         if: ${{ steps.release.outputs.release_created }}

.github/workflows/size.yml

@@ -30,3 +30,4 @@ jobs:
       - uses: andresz1/size-limit-action@v1
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
+          directory: react-responsive-modal

.yarnrc.yml

@@ -1,8 +1,11 @@
 nodeLinker: node-modules
 
+npmAuthToken: "${NPM_TOKEN-''}"
+
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: "@yarnpkg/plugin-interactive-tools"
+  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
+    spec: "@yarnpkg/plugin-workspace-tools"
 
 yarnPath: .yarn/releases/yarn-2.3.3.cjs
-npmAuthToken: "${NPM_TOKEN-''}"

README.md

@@ -0,0 +1 @@
+./react-responsive-modal/README.md

netlify.toml

@@ -1,7 +1,7 @@
 
 [build]
-  publish = ".docz/dist"
-  command = "yarn docz:build"
+  publish = "react-responsive-modal/.docz/dist"
+  command = "yarn workspace react-responsive-modal docz:build"
 
 [build.environment]
   NODE_VERSION = "12"

package.json

@@ -1,99 +1,25 @@
 {
-  "name": "react-responsive-modal",
-  "version": "5.2.6",
-  "description": "A simple responsive and accessible react modal",
-  "license": "MIT",
-  "main": "dist/index.js",
-  "module": "dist/react-responsive-modal.esm.js",
-  "typings": "dist/index.d.ts",
+  "private": true,
   "scripts": {
-    "start": "tsdx watch",
-    "build": "tsdx build",
-    "test": "tsdx test --passWithNoTests",
-    "lint": "tsdx lint",
-    "prepare": "tsdx build",
-    "docz:dev": "docz dev",
-    "docz:build": "docz build",
-    "size": "size-limit",
     "prettier": "prettier --write \"**/*.{js,ts,tsx,css,scss,json,md,mdx}\""
   },
-  "files": [
-    "dist",
-    "src",
-    "styles.css"
+  "workspaces": [
+    "react-responsive-modal"
   ],
-  "jest": {
-    "setupFilesAfterEnv": [
-      "./__tests__/setupTests.ts"
-    ],
-    "modulePathIgnorePatterns": [
-      "cypress"
-    ],
-    "coveragePathIgnorePatterns": [
-      "src/lib"
-    ]
-  },
   "prettier": {
     "singleQuote": true
   },
   "husky": {
     "hooks": {
-      "pre-commit": "tsdx lint"
-    }
-  },
-  "keywords": [
-    "react",
-    "responsive",
-    "modal",
-    "mobile",
-    "flex"
-  ],
-  "repository": "git+https://github.com/pradel/react-responsive-modal.git",
-  "author": "Léo Pradel",
-  "bugs": {
-    "url": "https://github.com/pradel/react-responsive-modal/issues"
-  },
-  "homepage": "https://react-responsive-modal.leopradel.com/",
-  "funding": "https://github.com/sponsors/pradel",
-  "size-limit": [
-    {
-      "path": "dist/react-responsive-modal.cjs.production.min.js",
-      "limit": "3.3 KB"
-    },
-    {
-      "path": "dist/react-responsive-modal.esm.js",
-      "limit": "3.3 KB"
+      "pre-commit": "lint-staged"
     }
-  ],
-  "dependencies": {
-    "classnames": "^2.2.6",
-    "no-scroll": "^2.1.1"
   },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17",
-    "react-dom": "^16.8.0 || ^17"
+  "lint-staged": {
+    "*.{js,ts,tsx,css,scss,json,md,mdx}": "prettier --write"
   },
   "devDependencies": {
-    "@size-limit/preset-small-lib": "4.7.0",
-    "@testing-library/jest-dom": "5.11.5",
-    "@testing-library/react": "11.1.1",
-    "@types/classnames": "2.2.11",
-    "@types/no-scroll": "2.1.0",
-    "@types/node": "14.14.6",
-    "@types/react": "16.9.56",
-    "@types/react-dom": "16.9.9",
-    "@types/react-transition-group": "4.4.0",
-    "cypress": "5.5.0",
-    "docz": "2.3.1",
-    "gatsby": "2.23.11",
-    "gatsby-theme-docz": "2.3.1",
     "husky": "4.3.0",
-    "prettier": "2.1.2",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
-    "size-limit": "4.7.0",
-    "tsdx": "0.14.1",
-    "tslib": "2.0.3",
-    "typescript": "4.0.5"
+    "lint-staged": "10.5.1",
+    "prettier": "2.1.2"
   }
 }

react-responsive-modal/README.md

@@ -0,0 +1,71 @@
+# react-responsive-modal
+
+[![npm version](https://img.shields.io/npm/v/react-responsive-modal.svg)](https://www.npmjs.com/package/react-responsive-modal)
+[![npm downloads per month](https://img.shields.io/npm/dm/react-responsive-modal.svg)](https://www.npmjs.com/package/react-responsive-modal)
+[![codecov](https://img.shields.io/codecov/c/github/pradel/react-responsive-modal/master.svg)](https://codecov.io/gh/pradel/react-responsive-modal)
+
+A simple responsive and accessible react modal.
+
+- Focus trap inside the modal.
+- Centered modals.
+- Scrolling modals.
+- Multiple modals.
+- Accessible modals.
+- Easily customizable via props.
+
+## Documentation
+
+- [Getting started](https://react-responsive-modal.leopradel.com/)
+  - [Installation](https://react-responsive-modal.leopradel.com/#installation)
+  - [Usage](https://react-responsive-modal.leopradel.com/#usage)
+  - [Props](https://react-responsive-modal.leopradel.com/#props)
+  - [Licence](https://react-responsive-modal.leopradel.com/#license)
+- [Examples](https://react-responsive-modal.leopradel.com/examples)
+  - [Centered modal](https://react-responsive-modal.leopradel.com/examples#centered-modal)
+  - [Multiple modal](https://react-responsive-modal.leopradel.com/examples#multiple-modal)
+  - [Custom styling](https://react-responsive-modal.leopradel.com/examples#custom-styling)
+  - [Custom animation](https://react-responsive-modal.leopradel.com/examples#custom-animation)
+  - [Custom container](https://react-responsive-modal.leopradel.com/examples#custom-container)
+
+## Installation
+
+With npm: `npm install react-responsive-modal --save`
+
+Or with yarn: `yarn add react-responsive-modal`
+
+## Usage
+
+[![Edit react-responsive-modal](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/9jxp669j2o)
+
+```javascript
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom';
+import 'react-responsive-modal/styles.css';
+import { Modal } from 'react-responsive-modal';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  const onOpenModal = () => setOpen(true);
+  const onCloseModal = () => setOpen(false);
+
+  return (
+    <div>
+      <button onClick={onOpenModal}>Open modal</button>
+      <Modal open={open} onClose={onCloseModal} center>
+        <h2>Simple centered modal</h2>
+      </Modal>
+    </div>
+  );
+};
+
+ReactDOM.render(<App />, document.getElementById('app'));
+```
+
+## Props
+
+Check the documentation: https://react-responsive-modal.leopradel.com/#props.
+
+## License
+
+MIT © [Léo Pradel](https://www.leopradel.com/)

cypress/plugins/index.js → react-responsive-modal/cypress/plugins/index.js

@@ -18,4 +18,4 @@
 module.exports = (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
-}
+};

cypress/support/index.js → react-responsive-modal/cypress/support/index.js

@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import './commands';
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')