Extract components from cssqd ui

.babelrc

@@ -0,0 +1,11 @@
+{
+    "presets": [
+        ["es2015", { "modules": false }]
+    ],
+    "plugins": [
+        "styled-jsx/babel",
+        ["transform-react-jsx", { "pragma": "h" }],
+        "transform-class-properties",
+        "transform-object-rest-spread"
+    ]
+}

.gitignore

@@ -0,0 +1,2 @@
+.DS_Store
+node_modules

.storybook/addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-knobs/register';
+import '@storybook/addon-options/register';

.storybook/config.js

@@ -0,0 +1,24 @@
+import 'babel-polyfill';
+import { h } from 'preact';
+import { configure, addDecorator } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+import { setOptions } from '@storybook/addon-options';
+
+import { Layout } from '../src/components/Layout';
+
+setOptions({
+    downPanelInRight: true
+});
+
+addDecorator(story => (
+    <Layout>
+        { story() }
+    </Layout>
+));
+addDecorator(withKnobs);
+
+function loadStories() {
+    require('./stories');
+}
+
+configure(loadStories, module);

.storybook/preview-head.html

@@ -0,0 +1 @@
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

.storybook/stories.js

@@ -0,0 +1,15 @@
+require('../src/components/Header/Header.story');
+require('../src/components/Countdown/Countdown.story.js');
+require('../src/components/SelectorInput/SelectorInput.story.js');
+require('../src/components/MarkupRenderer/MarkupRenderer.story.js');
+require('../src/components/BannedCharacters/BannedCharacters.story.js');
+require('../src/components/Scoreboard/Scoreboard.story.js');
+require('../src/components/PuzzleTitle/PuzzleTitle.story.js');
+require('../src/components/RoundStartCountdown/RoundStartCountdown.story.js');
+require('../src/components/PearlThread/PearlThread.story.js');
+require('../src/components/Waitscreen/Waitscreen.story.js');
+require('../src/components/AuthButton/AuthButton.story.js');
+require('../src/components/CorrectSolution/CorrectSolution.story.js');
+require('../src/components/Button/Button.story.js');
+require('../src/components/UsersCounter/UsersCounter.story.js');
+

.storybook/webpack.config.js

@@ -0,0 +1,3 @@
+const baseConfig = require('../webpack.config.base');
+
+module.exports = baseConfig;

README.md

@@ -0,0 +1,2 @@
+# qd-ui
+Components for *qd

package.json

@@ -0,0 +1,42 @@
+{
+  "name": "qd-ui",
+  "version": "1.0.0",
+  "description": "Components for *qd",
+  "main": "webpack.config.base.js",
+  "scripts": {
+    "storybook": "start-storybook -p 9001 -c .storybook"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/21-23/qd-ui.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/21-23/qd-ui/issues"
+  },
+  "homepage": "https://github.com/21-23/qd-ui#readme",
+  "devDependencies": {
+    "@storybook/addon-knobs": "^3.2.17",
+    "@storybook/addon-options": "^3.2.17",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-plugin-transform-react-jsx": "^6.24.1",
+    "babel-polyfill": "^6.26.0",
+    "babel-preset-es2015": "^6.24.1",
+    "preact": "^8.2.7",
+    "preact-compat": "^3.17.0",
+    "react-fontawesome": "^1.6.1",
+    "styled-jsx": "^2.2.1"
+  },
+  "dependencies": {
+    "@storybook/react": "^3.2.17",
+    "preact-virtual-list": "^0.3.1"
+  },
+  "peerDependencies": {
+    "preact": "^8.2.7",
+    "react-fontawesome": "^1.6.1",
+    "styled-jsx": "^2.2.1"
+  }
+}

src/components/AuthButton/AuthButton.js

@@ -0,0 +1,21 @@
+import { h } from 'preact';
+import Icon from 'react-fontawesome';
+
+const AuthButton = ({ path, icon }) => (
+    <a href={path}>
+        <Icon name={icon} />
+
+        <style jsx>{`
+            a {
+                height: 13vh;
+                width: 13vh;
+                line-height: 13vh;
+                font-size: 9vh;
+                text-align: center;
+                color: white;
+            }
+        `}</style>
+    </a>
+);
+
+export { AuthButton };

src/components/AuthButton/AuthButton.story.js

@@ -0,0 +1,18 @@
+import { h } from 'preact';
+import { storiesOf } from '@storybook/react';
+
+import { AuthButton } from './AuthButton';
+
+storiesOf('AuthButton', module)
+    .add('github', () => (
+        <AuthButton
+            path="/auth/github"
+            icon="github"
+        />
+    ))
+    .add('local', () => (
+        <AuthButton
+            path="/auth/qd-auto"
+            icon="database"
+        />
+    ));

src/components/BannedCharacters/BannedCharacters.js

@@ -0,0 +1,88 @@
+import { h } from 'preact';
+import classNames from 'classnames';
+import { DisplayConstants, Colors } from './banned-characters-style-constants';
+
+const BannedCharacters = ({ bannedCharacters = [], highlightedCharacters = [] }) => {
+    let content = null;
+
+    if (bannedCharacters && bannedCharacters.length) {
+        content = bannedCharacters.map(char => BannedCharacter(char, highlightedCharacters.includes(char)));
+    }
+
+    if (bannedCharacters && !bannedCharacters.length) {
+        content = (
+            <span>
+                no restrictions for this round
+                <style jsx>{`
+                    span {
+                        color: rgb(202, 194, 119);
+                    }
+                `}</style>
+            </span>
+        );
+    }
+
+    return (
+        <div class="banned-characters">
+            <span class="label">Banned chars: </span>
+            { content }
+
+            <style jsx>{`
+                .banned-characters {
+                    display: inline-flex;
+                    align-items: center;
+                    min-height: 35px;
+                }
+
+                .label {
+                    font-weight: 600;
+                    font-family: sans-serif;
+                    font-size: ${DisplayConstants.FONT_SIZE}px;
+                    color: ${Colors.LABEL};
+                    display: inline-block;
+                    margin-right: 5px;
+                }
+            `}</style>
+        </div>
+    );
+};
+
+const BannedCharacter = (char, isHighlighted) => {
+    const bannedCharacterClasses = classNames('banned-character', {
+        'highlighted': isHighlighted,
+    });
+
+    return (
+        <div className={bannedCharacterClasses}>
+            { char }
+
+            <style jsx>{`
+            .banned-character {
+                box-sizing: border-box;
+                font-family: monospace;
+                font-weight: 600;
+                font-size: ${DisplayConstants.FONT_SIZE}px;
+                color: ${Colors.CHARACTER};
+                margin: 0 5px;
+                background-color: ${Colors.CHARACTER_BACKGROUND};
+                min-width: 25px;
+                min-height: 25px;
+                border-radius: 4px;
+                text-align: center;
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                transition: background 0.1s, transform 150ms;
+            }
+
+            .highlighted {
+                background-color: ${Colors.HIGHLIGHTED_CHARACTER_BACKGROUND};
+                border: 2px solid ${Colors.HIGHLIGHTED_CHARACTER_BORDER};
+                transform: scale(${DisplayConstants.HIGHLIGHTED_CHAR_SCALE_COEFFICIENT});
+            }
+            `}</style>
+        </div>
+    );
+};
+
+export { BannedCharacters };

src/components/BannedCharacters/BannedCharacters.story.js

@@ -0,0 +1,18 @@
+import { h } from 'preact';
+import { storiesOf } from '@storybook/react';
+import { array } from '@storybook/addon-knobs';
+
+import { BannedCharacters } from './BannedCharacters';
+
+storiesOf('BannedCharacters', module)
+    .add('default', () => (
+        <BannedCharacters
+            bannedCharacters={array('bannedCharacters', ['n', ']', 'x'])}
+            highlightedCharacters={array('highlightedCharacters', ['x'])}
+        />
+    ))
+    .add('without restrictions', () => (
+        <BannedCharacters
+            bannedCharacters={array('bannedCharacters', [])}
+        />
+    ));

src/components/BannedCharacters/banned-characters-style-constants.js

@@ -0,0 +1,12 @@
+export const Colors = {
+    LABEL: '#b3decc',
+    CHARACTER: '#ffffff',
+    CHARACTER_BACKGROUND: '#3a706a',
+    HIGHLIGHTED_CHARACTER_BACKGROUND: '#775957',
+    HIGHLIGHTED_CHARACTER_BORDER: 'rgba(238,84,84,0.45)',
+};
+
+export const DisplayConstants = {
+    FONT_SIZE: 16,
+    HIGHLIGHTED_CHAR_SCALE_COEFFICIENT: 1.5,
+};

src/components/Button/Button.js

@@ -0,0 +1,42 @@
+import { h } from 'preact';
+import Icon from 'react-fontawesome';
+
+const Button = ({ iconLeft, iconRight, text, disabled, onClick }) => (
+    <button onClick={onClick} disabled={disabled}>
+        { iconLeft ? <Icon name={iconLeft} /> : null }
+        <span>{ text }</span>
+        { iconRight ? <Icon name={iconRight} /> : null }
+
+        <style jsx>{`
+        button {
+            color: #badece;
+            border: 2px solid #84b4aa;
+            border-radius: 1em;
+            padding: 0.25em 1em 0.3em;
+            background: transparent;
+            outline: none;
+            font-size: 1em;
+            cursor: pointer;
+        }
+
+        button:hover {
+            background: rgba(186,222,206,0.26);
+        }
+
+        span {
+            margin-left: 5px;
+            margin-right: 5px;
+        }
+
+        span:first-child {
+            margin-left: 0;
+        }
+
+        span:last-child {
+            margin-right: 0;
+        }
+        `}</style>
+    </button>
+);
+
+export { Button };

src/components/Button/Button.story.js

@@ -0,0 +1,29 @@
+import { h } from 'preact';
+import { storiesOf } from '@storybook/react';
+
+import { Button } from './Button';
+
+storiesOf('Button', module)
+    .addDecorator(story => (
+        <div>
+            { story() }
+
+            <style jsx>{`
+                div {
+                    font-size: 20px;
+                }
+            `}</style>
+        </div>
+    ))
+    .add('Stop level', () => (
+        <Button
+            iconLeft="stop"
+            text="Stop level"
+        />
+    ))
+    .add('Next level', () => (
+        <Button
+            iconRight="arrow-right"
+            text="Next level"
+        />
+    ));

src/components/CorrectSolution/CorrectSolution.js

@@ -0,0 +1,43 @@
+import { h } from 'preact';
+
+const CorrectSolution = ({ solution }) => (
+    <div>
+        <label for="solution-visibility-toggle">Solution</label>
+        <input type="checkbox" id="solution-visibility-toggle" />
+        <span className="solution">{ solution }</span>
+
+        <style jsx>{`
+            div {
+                user-select: none;
+                cursor: pointer;
+                font-size: 1.2em;
+                padding: 5px;
+            }
+
+            label {
+                margin-right: 5px;
+                color: #badece;
+            }
+
+            input {
+                display: none;
+            }
+
+            input + .solution {
+                opacity: 0;
+            }
+
+            input:checked + .solution {
+                opacity: 1;
+            }
+
+            .solution {
+                transition: opacity .25s;
+                color: #f8d940;
+                font-weight: bold;
+            }
+        `}</style>
+    </div>
+);
+
+export { CorrectSolution };