add gh-pages, storybook ci/cd (#1)

* [feature/gh-pages] modify storybook cli

* [feature/gh-pages] modify target branch

* [feature/gh-pages] modify storybook config

* [feature/gh-pages] modify cli

* [feature/gh-pages] modify github-actions env

* [feature/gh-pages] modify storybook config path

* [feature/gh-pages] remove example ignore

* [feature/gh-pages] modify path

* [feature/gh-pages] modify gitignored

* [feature/gh-pages] update readme

* [feature/gh-pages] fix github-action target branch

Author: kimcoder

.github/workflows/deploy-storybook.yml

@@ -4,7 +4,6 @@ on:
   push:
     branches:
       - master
-
 jobs:
   build:
 
@@ -23,14 +22,14 @@ jobs:
           node-version: ${{ matrix.node-version }}
 
       - name: npm install packages
-        run: npm i
+        run: npm install
 
       - name: build storybook
         run: npm run build:storybook
 
       - name: deploy storybook
         uses: peaceiris/[email protected]
         env:
-          PERSONAL_TOKEN: ${{ secrets.ACTIONS_DEPLOY_KEY }}
+          ACTIONS_DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }}
           PUBLISH_BRANCH: gh-pages
           PUBLISH_DIR: ./storybook-static

.gitignore

@@ -2,7 +2,6 @@
 .vscode
 # .git*
 
-example
 node_modules
 dist
 storybook-static

.storybook/config.js

@@ -4,4 +4,4 @@ import { withInfo } from '@storybook/addon-info';
 
 addDecorator(withInfo);
 addParameters({ info: { inline: true } });
-configure(require.context('../example', true, /\.story\.tsx$/), module);
+configure(require.context('../', true, /\.story\.tsx$/), module);

README.md

@@ -10,6 +10,7 @@
 [download-image]: http://img.shields.io/npm/dm/react-sequence-player.svg?style=flat
 [download-url]: http://www.npmjs.com/package/react-sequence-player
 
+- <a href="https://kimcoder.github.io/react-sequence-player/?path=/story/sequenceplayer--default">Live Demo</a>
 - Image Sequence Player for ReactJS.
 - Selectable Navgation Styles.
 - <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS" target="_blank">What is Image Sprite?</a><br><br>

example/default.story.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import SequencePlayer from '../src/SequencePlayer';
+import SampleImage from './sample.png';
+
+storiesOf('SequencePlayer', module)
+  .add('default', () => {
+    const playerRef = React.useRef<any>(null);
+
+    const handleControl = (action: string) => () => {
+      switch (action) {
+        case 'play': playerRef.current.play(); break;
+        case 'pause': playerRef.current.pause(); break;
+        case 'resume': playerRef.current.resume(); break;
+        case 'reverse': playerRef.current.reverse(); break;
+      }
+    };
+
+    return (
+      <div>
+        <button onClick={handleControl('play')}>PLAY</button>
+        <button onClick={handleControl('pause')}>PAUSE</button>
+        <button onClick={handleControl('resume')}>RESUME</button>
+        <button onClick={handleControl('reverse')}>REVERSE PLAY</button>
+        <br/><br/>
+        <SequencePlayer
+          image={SampleImage}
+          data={[
+            { x: 0, y: 0 },
+            { x: -183, y: 0 },
+            { x: -366, y: 0 },
+            { x: -545, y: 0 },
+            { x: -732, y: 0 },
+            { x: 0, y: -172 },
+            { x: -183, y: -172 },
+            { x: -366, y: -172 },
+            { x: -549, y: -172 },
+            { x: -732, y: -172 },
+            { x: 0, y: -338 },
+            { x: -183, y: -339 },
+            { x: -363, y: -338 },
+            { x: -549, y: -338 }
+          ]}
+          playerSize={{ width: 183, height: 168 }}
+          imageSize={{ width: 918, height: 506 }}
+          ref={playerRef}
+          logging={true}
+        />
+      </div>
+    );
+  });

example/delay.story.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import SequencePlayer from '../src/SequencePlayer';
+import SampleImage from './sample.png';
+
+storiesOf('SequencePlayer', module)
+  .add('custom delay, 300', () => {
+    const playerRef = React.useRef<any>(null);
+
+    const handleControl = (action: string) => () => {
+      switch (action) {
+        case 'play': playerRef.current.play(); break;
+        case 'pause': playerRef.current.pause(); break;
+        case 'resume': playerRef.current.resume(); break;
+        case 'reverse': playerRef.current.reverse(); break;
+      }
+    };
+
+    return (
+      <div>
+        <button onClick={handleControl('play')}>PLAY</button>
+        <button onClick={handleControl('pause')}>PAUSE</button>
+        <button onClick={handleControl('resume')}>RESUME</button>
+        <button onClick={handleControl('reverse')}>REVERSE PLAY</button>
+        <br/><br/>
+        <SequencePlayer
+          image={SampleImage}
+          data={[
+            { x: 0, y: 0 },
+            { x: -183, y: 0 },
+            { x: -366, y: 0 },
+            { x: -545, y: 0 },
+            { x: -732, y: 0 },
+            { x: 0, y: -172 },
+            { x: -183, y: -172 },
+            { x: -366, y: -172 },
+            { x: -549, y: -172 },
+            { x: -732, y: -172 },
+            { x: 0, y: -338 },
+            { x: -183, y: -339 },
+            { x: -363, y: -338 },
+            { x: -549, y: -338 }
+          ]}
+          playerSize={{ width: 183, height: 168 }}
+          imageSize={{ width: 918, height: 506 }}
+          ref={playerRef}
+          delay={200}
+        />
+      </div>
+    );
+  });

example/global.d.ts

@@ -0,0 +1,4 @@
+declare module '*.png' {
+  const value: string;
+  export = value;
+}

example/sample.png

@@ -8,7 +8,7 @@
     "dev": "start-storybook -p 6006",
     "build": "rm -rf dist && rollup -c",
     "build:watch": "rollup -c --watch",
-    "build:storybook": "build-storybook"
+    "build:storybook": "build-storybook --quiet"
   },
   "keywords": [
     "reactjs",