chore(playground): playground application

.editorconfig

@@ -7,6 +7,3 @@ end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
-
-[*.md]
-indent_size = 4

.eslintrc

@@ -4,7 +4,7 @@
     "node_modules",
     "packages/*/lib",
     "packages/arwes", // TODO: Remove when @arwes/arwes package has the new API.
-    "playground/public"
+    "playground/dist"
   ],
   "extends": [
     "standard",
@@ -21,6 +21,7 @@
   },
   "rules": {
     "semi": ["error", "always"],
-    "brace-style": ["error", "stroustrup"]
+    "brace-style": ["error", "stroustrup"],
+    "react/prop-types": [0]
   }
 }

.gitignore

@@ -44,4 +44,4 @@ yarn-error.log*
 .yarn-integrity
 
 packages/*/lib
-playground/public
+playground/dist

package.json

@@ -16,7 +16,7 @@
     "test-coverage": "jest --coverage",
     "test-list": "jest --listTests",
     "ci": "npm run bootstrap && npm run compile && npm run lint && npm test",
-    "playground-build": "NODE_ENV=production webpack --config ./playground/playground.webpack.config.js",
+    "playground-build": "cross-env NODE_ENV=production webpack --config ./playground/playground.webpack.config.js",
     "playground-watch": "webpack serve --config ./playground/playground.webpack.config.js",
     "release": "npm run ci && lerna publish",
     "changelog": "auto-changelog --output ./docs/CHANGELOG.md --commit-limit false",
@@ -54,7 +54,9 @@
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
+    "classnames": "^2.2.6",
     "commitizen": "^4.2.2",
+    "cross-env": "^7.0.2",
     "cz-conventional-changelog": "^3.3.0",
     "documentation": "^13.1.0",
     "eslint": "^7.12.1",
@@ -75,6 +77,7 @@
     "markdownlint": "^0.21.1",
     "markdownlint-cli": "^0.24.0",
     "navigo": "^7.1.2",
+    "polished": "^4.0.3",
     "raw-loader": "^4.0.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

packages/animation/src/Stream/Stream.sandbox.js → packages/animation/src/Stream/basic.sandbox.md

@@ -1,21 +1,17 @@
-/* eslint-disable react/prop-types */
-
-import React, { createRef } from 'react';
-import anime from 'animejs';
-import { withEnergy } from '../withEnergy';
-import { AnimationProvider } from '../AnimationProvider';
-import { Stream } from './index';
-
-const COLOR_ON = '#0f0';
-const COLOR_OFF = '#f00';
+```js
+const COLOR_ON = '#27efb5'; // green
+const COLOR_OFF = '#efb527'; // orange
 
 const Item = withEnergy()(
   class ItemBase extends React.PureComponent {
-    element = createRef()
+    constructor () {
+      super(...arguments);
+      this.element = React.createRef();
+    }
 
     render () {
       return (
-        <li ref={this.element} style={{ backgroundColor: COLOR_OFF }}>
+        <li ref={this.element} style={{ padding: 5, backgroundColor: COLOR_OFF }}>
           <div>{this.props.energy.flow.value}</div>
         </li>
       );
@@ -42,8 +38,12 @@ const Item = withEnergy()(
 );
 
 class Sandbox extends React.PureComponent {
-  interval = null
-  state = { activate: true }
+  constructor () {
+    super(...arguments);
+    this.interval = null;
+    this.element = React.createRef();
+    this.state = { activate: true };
+  }
 
   componentDidMount () {
     this.interval = setInterval(() => {
@@ -78,4 +78,5 @@ class Sandbox extends React.PureComponent {
   }
 }
 
-export default Sandbox;
+render(<Sandbox />);
+```

packages/animation/src/withEnergy/withEnergy.sandbox.js → packages/animation/src/withEnergy/basic.sandbox.md

@@ -1,25 +1,23 @@
-/* eslint-disable react/prop-types */
-
-import React, { createRef } from 'react';
-import anime from 'animejs';
-import { AnimationProvider } from '../AnimationProvider';
-import { withEnergy } from './withEnergy';
-
-const COLOR_ON = '#0f0';
-const COLOR_OFF = '#f00';
+```js
+const COLOR_ON = '#27efb5'; // green
+const COLOR_OFF = '#efb527'; // orange
 
 class ItemComponent extends React.PureComponent {
   constructor () {
     super(...arguments);
-    this.element = createRef();
+    this.element = React.createRef();
   }
 
   render () {
     const { energy, children } = this.props;
     return (
       <div
         ref={this.element}
-        style={{ backgroundColor: COLOR_OFF, marginLeft: '10px' }}
+        style={{
+          padding: 5,
+          backgroundColor: COLOR_OFF,
+          marginLeft: '10px'
+        }}
       >
         <div>{energy.flow.value}</div>
         <div>{children}</div>
@@ -81,4 +79,5 @@ class Sandbox extends React.PureComponent {
   }
 }
 
-export default Sandbox;
+render(<Sandbox />);
+```

packages/sounds/src/withSounds/basic.sandbox.md

@@ -0,0 +1,35 @@
+```js
+const PlayerComponent = ({ players, audio, name }) => (
+  <button onClick={() => !audio.mute && players[name].play()}>
+    Play {name}
+  </button>
+);
+
+const Player = withSounds()(PlayerComponent);
+
+const players = {
+  information: new Howl({ src: ['/sounds/information.mp3'] }),
+  ask: new Howl({ src: ['/sounds/ask.mp3'] }),
+  warning: new Howl({ src: ['/sounds/warning.mp3'] }),
+  error: new Howl({ src: ['/sounds/error.mp3'] })
+};
+
+function Sandbox () {
+  const [mute, setMute] = React.useState(false);
+
+  return (
+    <SoundsProvider players={players} audio={{ mute }}>
+      <button onClick={() => setMute(!mute)}>
+        {mute ? 'Unmute' : 'Mute'}
+      </button>
+      <br />
+      <Player name='information' />
+      <Player name='ask' />
+      <Player name='warning' />
+      <Player name='error' />
+    </SoundsProvider>
+  );
+}
+
+render(<Sandbox />);
+```

playground/playground.webpack.config.js

@@ -8,7 +8,7 @@ module.exports = {
   mode: NODE_ENV || 'development',
   entry: './playground/src/index.js',
   output: {
-    path: path.join(__dirname, 'public'),
+    path: path.join(__dirname, 'dist'),
     filename: 'playground.js'
   },
   module: {
@@ -20,18 +20,28 @@ module.exports = {
           loader: 'babel-loader',
           options: babelConfig
         }
+      },
+      {
+        test: /\.md$/i,
+        use: 'raw-loader'
       }
     ]
   },
+  resolve: {
+    alias: {
+      repository: process.cwd(),
+      playground: path.join(process.cwd(), 'playground')
+    }
+  },
   plugins: [
     new HtmlWebpackPlugin({
       template: path.join(__dirname, 'src/index.html'),
-      filename: path.join(__dirname, 'public/index.html')
+      filename: path.join(__dirname, 'dist/index.html')
     })
   ],
   devServer: {
     contentBase: [
-      path.join(__dirname, 'public'),
+      path.join(__dirname, 'dist'),
       path.join(__dirname, 'static')
     ],
     watchContentBase: true,