Skip to content

Commit

Permalink
Migrate demo app to CRA
Browse files Browse the repository at this point in the history
  • Loading branch information
wellyshen committed Jun 3, 2022
1 parent c3e2c3d commit f054a76
Show file tree
Hide file tree
Showing 53 changed files with 11,190 additions and 3,310 deletions.
2 changes: 1 addition & 1 deletion .eslintignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
public
app
dist
8 changes: 4 additions & 4 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 }}
4 changes: 1 addition & 3 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@
*.log

node_modules
demo/.dev
public
dist
coverage
.size-snapshot.json
.size-snapshot.json
5 changes: 2 additions & 3 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
*.log
demo/.dev
public
app
dist
coverage
.size-snapshot.json
.size-snapshot.json
4 changes: 0 additions & 4 deletions .stylelintrc.js

This file was deleted.

30 changes: 19 additions & 11 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
1 change: 1 addition & 0 deletions app/.eslintignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
build
6 changes: 6 additions & 0 deletions app/.eslintrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
module.exports = {
extends: ["react-app", "welly"],
rules: {
"react/react-in-jsx-scope": "off",
},
};
23 changes: 23 additions & 0 deletions app/.gitignore
Original file line number Diff line number Diff line change
@@ -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*
13 changes: 13 additions & 0 deletions app/.stylelintrc.js
Original file line number Diff line number Diff line change
@@ -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"],
};
3 changes: 3 additions & 0 deletions app/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# App

🍿 The demo app of USE-WEB-ANIMATIONS.
50 changes: 50 additions & 0 deletions app/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
Binary file added app/public/favicon.ico
Binary file not shown.
62 changes: 62 additions & 0 deletions app/public/index.html
Original file line number Diff line number Diff line change
@@ -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>
File renamed without changes
File renamed without changes
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
File renamed without changes
3 changes: 3 additions & 0 deletions app/public/robots.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
27 changes: 12 additions & 15 deletions demo/Animations/index.tsx → app/src/Animations/index.tsx
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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({
Expand All @@ -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}
Expand All @@ -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>
Expand Down
Loading

0 comments on commit f054a76

Please sign in to comment.