Migrate demo app to CRA

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 }}

.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) 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 USE-WEB-ANIMATIONS, 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) 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

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

app/.eslintignore

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

app/.eslintrc.js

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

app/.gitignore

@@ -0,0 +1,13 @@
+module.exports = {
+  extends: ["stylelint-config-standard", "stylelint-config-prettier"],
+  customSyntax: "postcss-scss",
+  rules: {
+    "at-rule-no-unknown": [
+      true,
+      {
+        ignoreAtRules: ["function", "if", "each", "include", "mixin"],
+      },
+    ],
+  },
+  ignoreFiles: ["build/**/*.css"],
+};