feat: update react-scenejs for [email protected] (daybrush#29)

* fix: fix react-scenejs for 1.0.0
* fix: fix react-scenejs for scenejs 1.0.0
* fix: fix package keyword

package.json

@@ -44,7 +44,7 @@
   "bugs": {
     "url": "https://github.com/daybrush/scenejs/issues"
   },
-  "homepage": "https://daybrush.com",
+  "homepage": "https://daybrush.com/scenejs",
   "devDependencies": {
     "@daybrush/builder": "^0.1.0",
     "@daybrush/jsdoc": "^0.3.7",

packages/react-scenejs/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2016 Daybrush
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/react-scenejs/README.md

@@ -1,81 +1,98 @@
-# react-scenejs [![npm version](https://badge.fury.io/js/react-scenejs.svg)](https://badge.fury.io/js/react-scenejs)
 
+<p align="middle"><img src="https://daybrush.com/scenejs/images/clapperboard.png" width="250"/></p>
+<h2 align="middle">React Scene.js</h2>
+<p align="middle"><a href="https://badge.fury.io/js/react-scenejs" target="_blank"><img src="https://badge.fury.io/js/react-scenejs.svg" alt="npm version" height="18"/></a>  <img src="https://img.shields.io/badge/language-typescript-blue.svg"/> <a href="https://github.com/daybrush/scenejs/blob/master/LICENSE" target="_blank"><img src="https://img.shields.io/badge/License-MIT-brightgreen.svg"/></a></p>
 
-* [Raindrop Demo](https://codesandbox.io/s/knz6l89wv)
 
-## Install
+<p align="middle">🎬 A Rect Component that create tJavaScript & CSS timeline-based animation with Scene.js.</p>
+
+<p align="middle"><a href="https://daybrush.com/scenejs"><strong>About Scene.js</strong></a> &nbsp;/&nbsp; <a href="https://daybrush.com/scenejs/release/latest/doc"><strong>API</strong></a> &nbsp;/&nbsp; <a href="https://daybrush.com/scenejs/features.html"><strong>Features</strong></a> &nbsp;/&nbsp; <a href="https://codesandbox.io/s/reactscenejs-clapperboard-raindrop-demo-ucddv"><strong>CodeSandbox Demo</strong></a></p>
+<br/>
+
+
+## Installation
 ```bash
-$ npm install react-scenejs  --save
+$ npm install react-scenejs
 ```
 
-## How to use
-* Scene
-```jsx
-import { Scene, EASE, EASE_IN, EASE_IN_OUT, bezier, steps, STEP_START, STEP_END } from 'react-scenejs';
+
+## Make scene
+```tsx
+import { Scene, SceneItem } from "react-scenejs";
 
 const keyframes = {
-  0: {opacity: 0, left: "0px"},
-  1: {opacity: 0.3, left: "40px"},
-  2: {opacity: 1, left: "100px"},
+  ".circles .circle": (i: number) => ({
+    0: {
+      "border-width": "150px",
+      "opacity": 1,
+      "transform": "translate(-50%, -50%) scale(0)",
+    },
+    1.5: {
+      "border-width": "0px",
+      "opacity": 0.3,
+      "transform": "scale(0.7)",
+    },
+    options: {
+      delay: i * 0.4,
+    },
+  }),
 };
 
-<Scene keyframes={{
-  item1: {keyframes: keyframes, options: {delay: 0}},
-  item2: {keyframes: keyframes, options: {delay: 0.4}},
-  item3: {keyframes: keyframes, options: {delay: 0.8}},
-}}
-iterationCount={1}
-easing={EASE_IN_OUT}
-css={true}
-autoplay={true}
->
-  <div className="item" data-scene-id="item1"></div>
-  <div className="item" data-scene-id="item2"></div>
-  <div className="item" data-scene-id="item3"></div>
-</Scene>
-```
+render() {
+  return (<Scene
+    keyframes={this.keyframes}
+    easing="ease-in-out"
+    fillMode="forwards"
+    direcition="normal"
+    iterationCount={1}
+    playSpeed={1}
+    delay={0}
+    time={0}
+    css={false}
+    autoplay={false}
+    onPlay={e => { console.log(e); }}
+    onPaused={e => { console.log(e); }}
+    onAnimate={e => { console.log(e); }}
+    onTimeUpdate={e => { console.log(e); }}
+    onIteration={e => { console.log(e); }}
+    onEnded={e => { console.log(e); }}
 
-* SceneItem
-```js
-import { SceneItem, EASE, EASE_IN, EASE_IN_OUT, bezier, steps, STEP_START, STEP_END } from 'react-scenejs';
-
-<SceneItem keyframes={{
-  0: {opacity: 0, left: "0px"},
-  1: {opacity: 0.3, left: "40px"},
-  2: {opacity: 1, left: "100px"},
-}}
-iterationCount="infinite"
-easing={easing.EASE_IN_OUT}
-css={true}
-autoplay={true}
->
-  <div className="item"></div>
-</SceneItem>
+
+  >
+    <div className="circles">
+      <div className="circle circle1"></div>
+      <div className="circle circle2"></div>
+      <div className="circle circle3"></div>
+    </div>
+  </Scene>);
+}
 ```
-### easing
-* [easing list](https://daybrush.github.io/scenejs/release/latest/doc/easing.html)
 
 ### Props
 |name|type|default|description|
 |---|---|---|---|
 |css|boolean|false|Check to play with CSS|
 |autoplay|boolean|false|Check to play automatically|
-|from(SceneItem)|object||Start properties|
-|to(SceneItem)|object||End properties|
-|keyframes|object||Specify properties by time. If not keyframes, use **from**, **to**, and **duration**.|
+|keyframes|object|{}|Specify properties by time.|
 |...options|||[Check out the options](https://daybrush.github.io/scenejs/release/latest/doc/global.html#AnimatorOptions)|
+|...events|||[Check out Scene's events](https://daybrush.com/scenejs/release/latest/doc/Scene.html#events)<br/> [Check out SceneItem's events](https://daybrush.com/scenejs/release/latest/doc/SceneItem.html#events)|
+
+
+## Development
+
+### `npm start`
+
+Runs the app in the development mode.<br>
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br>
+You will also see any lint errors in the console.
+
+
+## License
+
+```
+MIT License
 
-### Events
-The event prefix is **on**
-```jsx
-<SceneItem
-  onPlay={this.onPlay}
-  onPaused={this.onPaused}
-  onAnimate={this.onAnimate}
-  onTimeUpdate={this.onTimeUpdate}
-  onIteration={this.onIteration}
-	>
-</SceneItem>
+Copyright (c) 2016 Daybrush
 ```
-* [Scene events](https://daybrush.github.io/scenejs/release/latest/doc/Scene.html#events)
-* [SceneItem events](https://daybrush.github.io/scenejs/release/latest/doc/Scene.SceneItem.html#events)