feat: new documentation website ✨ (#450)

Author: pradel

.github/workflows/main.yml

@@ -47,7 +47,7 @@ jobs:
         run: yarn workspace react-responsive-modal build
 
       - name: Build docs
-        run: yarn workspace react-responsive-modal docz:build
+        run: yarn workspace website build
 
       - name: Cypress run
         uses: cypress-io/github-action@v2
@@ -56,4 +56,4 @@ jobs:
           install: false
           # Use monorepo
           project: ./react-responsive-modal
-          start: yarn dlx serve -l 3000 react-responsive-modal/.docz/dist
+          start: yarn workspace website start -p 3000

.gitignore

@@ -4,8 +4,10 @@ node_modules
 .cache
 dist
 coverage
-.docz
+.next
+out
 .yarn/*
 !.yarn/releases
 !.yarn/plugins
 .pnp.*
+.next

.prettierignore

@@ -1,5 +1,6 @@
 dist
-.docz
+.next
+out
 coverage
 .yarn
 CHANGELOG.md

.yarnrc.yml

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

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/)

README.md

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

netlify.toml

@@ -1,10 +1,11 @@
 {
   "private": true,
   "scripts": {
-    "prettier": "prettier --write \"**/*.{js,ts,tsx,css,scss,json,md,mdx}\""
+    "prettier": "prettier --write \"**/*.{js,ts,tsx,css,scss,json,md,mdx,yml}\""
   },
   "workspaces": [
-    "react-responsive-modal"
+    "react-responsive-modal",
+    "website"
   ],
   "prettier": {
     "singleQuote": true
@@ -15,7 +16,7 @@
     }
   },
   "lint-staged": {
-    "*.{js,ts,tsx,css,scss,json,md,mdx}": "prettier --write"
+    "*.{js,ts,tsx,css,scss,json,md,mdx,yml}": "prettier --write"
   },
   "devDependencies": {
     "husky": "4.3.0",

package.json

@@ -2,37 +2,37 @@
 
 describe('simple modal', () => {
   beforeEach(() => {
-    cy.visit('http://localhost:3000/examples');
+    cy.visit('http://localhost:3000');
     // Page is heavy to load so we wait for it to be loaded
     cy.wait(500);
   });
 
   it('should open modal when clicking open button', () => {
-    cy.get('button').eq(2).click();
+    cy.get('button').eq(0).click();
     cy.get('[data-testid=modal]').should('exist');
   });
 
   // TODO overlay not working, see how to fix
   // it('should close modal when clicking overlay', () => {
-  //   cy.get('button').eq(2).click();
+  //   cy.get('button').eq(0).click();
   //   cy.get('[data-testid=overlay]').click();
   //   cy.get('[data-testid=modal]').should('not.exist');
   // });
 
   it('should close modal when clicking the close icon', () => {
-    cy.get('button').eq(2).click();
+    cy.get('button').eq(0).click();
     cy.get('[data-testid=close-button]').click();
     cy.get('[data-testid=modal]').should('not.exist');
   });
 
   it('should close modal when pressing esc key', () => {
-    cy.get('button').eq(2).click();
+    cy.get('button').eq(0).click();
     cy.get('body').type('{esc}');
     cy.get('[data-testid=modal]').should('not.exist');
   });
 
   it('should close only last modal when pressing esc key when multiple modals are opened', () => {
-    cy.get('button').eq(8).click();
+    cy.get('button').eq(1).click();
     cy.get('[data-testid=modal] button').eq(0).click();
     cy.get('[data-testid=modal]').should('have.length', 2);
     cy.get('body').type('{esc}');
@@ -42,19 +42,19 @@ describe('simple modal', () => {
   });
 
   it('should block the scroll when modal is opened', () => {
-    cy.get('button').eq(2).click();
+    cy.get('button').eq(0).click();
     cy.get('html').should('have.css', 'position', 'fixed');
   });
 
   it('should unblock the scroll when modal is closed', () => {
-    cy.get('button').eq(2).click();
+    cy.get('button').eq(0).click();
     cy.get('html').should('have.css', 'position', 'fixed');
     cy.get('body').type('{esc}');
     cy.get('html').should('not.have.css', 'position', 'fixed');
   });
 
   it('should unblock scroll only after last modal is closed when multiple modals are opened', () => {
-    cy.get('button').eq(8).click();
+    cy.get('button').eq(1).click();
     cy.get('[data-testid=modal] button').eq(0).click();
     cy.get('[data-testid=modal]').should('have.length', 2);
     cy.get('html').should('have.css', 'position', 'fixed');