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"],
+};

app/.stylelintrc.js

@@ -0,0 +1,3 @@
+# App
+
+🍿 The demo app of USE-WEB-ANIMATIONS.

app/README.md

@@ -0,0 +1,50 @@
+{
+  "name": "demo-app",
+  "private": true,
+  "scripts": {
+    "link-pkg": "yarn link '@wellyshen/use-web-animations'",
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "lint": "run-s lint:*",
+    "lint:code": "eslint --fix . --ext .js,.ts,.tsx",
+    "lint:type": "tsc",
+    "lint:style": "stylelint --fix \"**/*.{css,scss}\"",
+    "lint:format": "prettier -w . -u --loglevel silent",
+    "clean": "rimraf build",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "dependencies": {
+    "@types/node": "^16.11.33",
+    "@types/react": "^18.0.8",
+    "@types/react-dom": "^18.0.3",
+    "@wellyshen/use-web-animations": "latest",
+    "normalize.css": "^8.0.1",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-scripts": "5.0.1",
+    "sass": "^1.51.0",
+    "typescript": "^4.6.4"
+  },
+  "devDependencies": {
+    "eslint-config-welly": "^1.13.0",
+    "npm-run-all": "^4.1.5",
+    "postcss-scss": "^4.0.4",
+    "prettier": "^2.6.2",
+    "rimraf": "^3.0.2",
+    "stylelint": "^14.8.2",
+    "stylelint-config-prettier": "^9.0.3",
+    "stylelint-config-standard": "^25.0.0"
+  }
+}

app/package.json

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="React hook for highly-performant and manipulable animations using Web Animations API."
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>USE-WEB-ANIMATIONS</title>
+    <meta property="og:title" content="USE-WEB-ANIMATIONS" />
+    <meta property="og:type" content="website" />
+    <meta
+      property="og:image"
+      content="https://use-web-animations.netlify.app/og_image.png"
+    />
+    <meta
+      property="og:description"
+      content="React hook for highly-performant and manipulable animations using Web Animations API."
+    />
+    <meta property="og:url" content="https://use-web-animations.netlify.app" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@use-web-animations" />
+    <meta name="twitter:creator" content="@wellyshen" />
+
+    <link
+      href="https://fonts.googleapis.com/css2?family=Bungee+Shade&family=Bowlby+One+SC&family=Roboto:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

app/public/favicon.ico

@@ -1,6 +1,6 @@
 {
-  "short_name": "USE-WEB-ANIMATIONS",
-  "name": "USE-WEB-ANIMATIONS",
+  "short_name": "REACT COOL IMG",
+  "name": "REACT COOL IMG",
   "icons": [
     {
       "src": "favicon.ico",

app/public/index.html

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

demo/static/site_assets/logo192.png renamed to app/public/logo192.png

@@ -1,9 +1,7 @@
-import { FC, ChangeEvent } from "react";
+import type { FC, ChangeEvent } from "react";
+import useWebAnimations, * as animations from "@wellyshen/use-web-animations";
 
-import useWebAnimations from "../../src";
-import * as animations from "../../src/animations";
-import { container as sharedContainer, title, subtitle } from "../theme";
-import { container, link, target, select } from "./styles";
+import styles from "./styles.module.scss";
 
 const Animations: FC = () => {
   const { bounce } = animations;
@@ -13,14 +11,13 @@ const Animations: FC = () => {
   });
 
   const play = () => {
-    // @ts-expect-error
-    getAnimation().play();
+    getAnimation()?.play();
   };
 
   const handleChangeSelect = ({
     currentTarget,
   }: ChangeEvent<HTMLSelectElement>) => {
-    // @ts-expect-error
+    // @ts-ignore
     const { keyframes, animationOptions } = animations[currentTarget.value];
 
     animate({
@@ -30,24 +27,24 @@ const Animations: FC = () => {
   };
 
   return (
-    <div css={[sharedContainer, container]}>
-      <h2 id="animations" css={title}>
+    <div className={styles.container}>
+      <h2 id="animations" className={styles.title}>
         ANIMATIONS
       </h2>
-      <p css={subtitle}>
+      <p className={styles.subtitle}>
         A collection of animations for Web Animations API, based on{" "}
         <a
-          css={link}
+          className={styles.link}
           href="https://animate.style"
           target="_blank"
           rel="noreferrer"
         >
-          Animate.css
+          Animate.className
         </a>
         .
       </p>
       <div
-        css={target}
+        className={styles.target}
         ref={ref}
         onClick={play}
         onKeyPress={play}
@@ -58,7 +55,7 @@ const Animations: FC = () => {
           🍿
         </span>
       </div>
-      <select css={select} onChange={handleChangeSelect}>
+      <select className={styles.select} onChange={handleChangeSelect}>
         <optgroup label="Attention Seekers">
           <option value="bounce">bounce</option>
           <option value="flash">flash</option>