chore: migrate demo app to create-react-app

Author: wellyshen

.eslintignore

@@ -1,2 +1,2 @@
-public
+app
 dist

.github/workflows/ci.yml

@@ -41,8 +41,8 @@ jobs:
         run: yarn lint
       - name: Run test
         run: yarn test:cov
-      - name: Run build
-        run: yarn build:dist
+      - name: Run build package
+        run: yarn build:prod
 
       - name: Coveralls GitHub Action
         uses: coverallsapp/github-action@master
@@ -69,13 +69,13 @@ jobs:
             ${{ runner.os }}-yarn-
       - name: Install dependencies
         run: yarn install --frozen-lockfile
-      - name: Run build
+      - name: Run build demo app
         run: yarn build:demo
 
       - name: Netlify GitHub Action
         uses: netlify/actions/cli@master
         with:
-          args: deploy --prod --dir=public
+          args: deploy --prod --dir=app/build
         env:
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}

.github/workflows/size.yml

@@ -11,4 +11,4 @@ jobs:
       - uses: preactjs/compressed-size-action@v2
         with:
           repo-token: "${{ secrets.GITHUB_TOKEN }}"
-          build-script: "build:dist"
+          build-script: "build:prod"

.gitignore

@@ -2,8 +2,6 @@
 *.log
 
 node_modules
-demo/.dev
-public
 dist
 coverage
-.size-snapshot.json
+.size-snapshot.json

.prettierignore

@@ -1,6 +1,5 @@
 *.log
-demo/.dev
-public
+app
 dist
 coverage
-.size-snapshot.json
+.size-snapshot.json

.stylelintrc.js

@@ -13,30 +13,38 @@ Please note we have a [code of conduct](CODE_OF_CONDUCT.md), please follow it in
 3. If you’ve fixed a bug or added code that should be tested.
 4. Ensure the test suite passes by running `yarn test`.
 5. Update the [README.md](README.md) with details of changes to the interface.
-6. Update the [demo app](demo/App) if needed.
+6. Update the [demo app](app/src) if needed.
 7. Make sure your code lints by running `yarn lint`.
 
 ## Development Workflow
 
-After cloning REACT COOL DIMENSIONS, run `yarn` to fetch its dependencies. Then, you can run several commands:
+You can test new features or debug an issue by the way that I'm using.
 
-- `yarn dev` runs the [demo app](demo/App) as your playground at `localhost:10001`. Support live reloading.
+1. Run `yarn link-pkg` to link the package into the [app directory](app).
+2. Run `yarn start` to create an `ESM` build and type definition file by `rollup` watch mode.
+3. Access the [app directory](app).
+4. In the **app directory**, run `yarn link-pkg` to link with the package then run `yarn start` to start development.
+5. Try something cool via the [demo app](app/src).
+
+## Development Workflow
+
+There're several useful commands that you can use during the development:
+
+- `yarn link-pkg` links the package into the [app directory](app). You can develop or debug it via the [demo app](app/src).
+- `yarn start` creates a `dist` folder with an `ESM` build and type definition file by `rollup` watch mode.
 - `yarn lint:code` lints all `.js` and `.tsx?` files.
 - `yarn lint:type` runs the [TypeScript](https://www.typescriptlang.org) type-checks.
-- `yarn lint:style` lints all `.css` and `.tsx?` (for [Emotion](https://emotion.sh)) files.
 - `yarn lint:format` formats all files except the file list of `.prettierignore`.
-- `yarn lint` lints `code`, `type`, `style`, and `format`.
+- `yarn lint` lints `code`, `type`, and `format`.
 - `yarn test` runs the complete test suite.
 - `yarn test:watch` runs an interactive test watcher (helpful in development).
 - `yarn test:cov` runs the complete test suite with coverage report.
-- `yarn build:demo` creates a `public` folder with all the static files.
-- `yarn build:dist` creates a `dist` folder with package builds (`CJS` & `ESM`) and type definition file. You can test the package locally via [yarn link](https://yarnpkg.com/lang/en/docs/cli/link).
-- `yarn build` creates both `public` and `dist`.
-- `yarn clean:dev` deletes the `demo/.dev` build folder.
-- `yarn clean:demo` deletes the `public` build folder.
+- `yarn build:dev` creates a `dist` folder with an `ESM` build and type definition file for development.
+- `yarn build:prod` creates a `dist` folder with package builds (`CJS` & `ESM`) and type definition file. You can test the package locally via [yarn link](https://yarnpkg.com/lang/en/docs/cli/link).
 - `yarn clean:dist` deletes the `dist` build folder.
+- `yarn clean:size` deletes the `.size-snapshot.json` file.
 - `yarn clean:cov` deletes the `coverage` report folder.
-- `yarn clean` deletes all the build/coverage folders.
+- `yarn clean` deletes build, test, and size relevant files.
 
 ## Style Guide
 

CONTRIBUTING.md

@@ -187,7 +187,7 @@ const App = () => {
 The `onResize` event will be triggered whenever the size of the target element is changed. We can reduce the frequency of the event callback by activating the [responsive mode](#responsive-components) or implementing our own throttled/debounced function as below. Note that in order to throttle/debounce the function correctly, it will need to be memorized else it will be recreated on every render call.
 
 ```js
-import { useMemo } from 'react';
+import { useMemo } from "react";
 import _ from "lodash";
 
 const returnObj = useDimensions({

README.md

@@ -0,0 +1 @@
+build

app/.eslintignore

@@ -0,0 +1,6 @@
+module.exports = {
+  extends: ["react-app", "welly"],
+  rules: {
+    "react/react-in-jsx-scope": "off",
+  },
+};