docz for component development

.babelrc

@@ -83,6 +83,7 @@
     ],
     "@babel/plugin-proposal-nullish-coalescing-operator",
     "@babel/plugin-proposal-do-expressions",
-    "@babel/plugin-proposal-function-bind"
+    "@babel/plugin-proposal-function-bind",
+    "babel-plugin-styled-components"
   ]
 }

.gitignore

@@ -17,3 +17,4 @@ cert_chain.crt
 localhost.crt
 localhost.key
 privkey.pem
+.docz

client/components/Button/Button.stories.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { boolean, text } from '@storybook/addon-knobs';
+
+import Button from '.';
+
+export default {
+  title: 'Common/Button (JS)',
+  component: Button
+};
+
+export const AllFeatures = () => (
+  <Button
+    disabled={boolean('disabled', false)}
+    type="submit"
+    label={text('label', 'submit')}
+  >
+    {text('children', 'this is the button')}
+  </Button>
+);
+
+export const SubmitButton = () => (
+  <Button type="submit" label="submit">This is a submit button</Button>
+);
+
+export const PrimaryButton = () => <Button label="login" onClick={action('onClick')}>Log In</Button>;
+
+export const DisabledButton = () => <Button disabled label="login" onClick={action('onClick')}>Log In</Button>;

client/components/Button/Button.stories.mdx

@@ -0,0 +1,31 @@
+---
+name: Button
+---
+
+import { Playground, Props } from 'docz';
+import Button from './';
+
+# Button
+
+A button is used to perform an action.
+
+<Props of={Button} />
+
+## Submit button
+
+<Playground>
+    <Button type="submit" label="submit" onClick={() => console.log("onClick")}>This is a submit button</Button>
+</Playground>
+
+
+## Primary button
+
+<Playground>
+  <Button label="Log In" onClick={() => console.log("onClick")}>Log In</Button>
+</Playground>
+
+## Disabled
+
+<Playground>
+  <Button disabled label="Log In" onClick={() => console.log("onClick")}>Log In</Button>
+</Playground>

client/components/Button/index.js

@@ -0,0 +1,50 @@
+import React from "react";
+import PropTypes from "prop-types";
+import styled from 'styled-components';
+import { remSize, prop } from '../../theme';
+
+const StyledButton = styled.button`
+  background-color: ${prop('buttonColorBackground')};
+  color: ${prop('buttonColor')};
+  cursor: pointer;
+  border: 2px solid ${prop('buttonBorderColor')};
+  border-radius: 2px;
+  padding: ${remSize(8)} ${remSize(25)};
+  line-height: 1;
+  margin: 0;
+
+  &:hover:not(:disabled) {
+    color: ${prop('buttonHoverColor')};
+    background-color: ${prop('buttonHoverColorBackground')};
+  }
+
+  &:disabled {
+    color: ${prop('buttonDisabledColor')};
+    background-color: ${prop('buttonDisabledColorBackground')};
+    cursor: not-allowed;
+  }
+`;
+
+/**
+ * This text will be used for the description in the story
+ */
+const Button = ({ children, label, ...props }) => {
+  return <StyledButton aria-label={label} {...props}>{children}</StyledButton>;
+}
+
+Button.propTypes = {
+  /**
+   * The visible part of the button
+   */
+  children: PropTypes.element.isRequired,
+  /**
+    If the button can be clicked or not
+  */
+  disabled: PropTypes.bool,
+  /*
+   * An ARIA Label used for accessibility
+   */
+  label: PropTypes.string.isRequired,
+};
+
+export default Button;

client/index.jsx

@@ -3,8 +3,11 @@ import { render } from 'react-dom';
 import { hot } from 'react-hot-loader/root';
 import { Provider } from 'react-redux';
 import { Router, browserHistory } from 'react-router';
+import { ThemeProvider } from 'styled-components';
+
 import configureStore from './store';
 import routes from './routes';
+import theme, { Theme } from './theme';
 
 require('./styles/main.scss');
 
@@ -16,10 +19,14 @@ const initialState = window.__INITIAL_STATE__;
 
 const store = configureStore(initialState);
 
+const currentTheme = Theme.light;
+
 const App = () => (
-  <Provider store={store}>
-    <Router history={history} routes={routes(store)} />
-  </Provider>
+  <ThemeProvider theme={{ ...theme, current: theme[currentTheme] }}>
+    <Provider store={store}>
+      <Router history={history} routes={routes(store)} />
+    </Provider>
+  </ThemeProvider>
 );
 
 const HotApp = hot(App);

client/index.stories.mdx

@@ -0,0 +1,6 @@
+---
+name: Welcome to the P5.js Web Editor Style Guide
+route: /
+---
+
+This guide will contain all the components in the project, with examples of how they can be reused.

client/theme.js

@@ -0,0 +1,54 @@
+export const Theme = {
+  contrast: 'contrast',
+  dark: 'dark',
+  light: 'light',
+};
+
+export const colors = {
+  p5pink: '#ed225d',
+  yellow: '#f5dc23',
+};
+
+export const common = {
+  baseFontSize: 12
+};
+
+export const remSize = size => `${size / common.baseFontSize}rem`;
+
+export const prop = key => props => props.theme[key];
+
+export default {
+  [Theme.light]: {
+    colors,
+    ...common,
+    primaryTextColor: '#333',
+
+    buttonColor: '#f10046',
+    buttonColorBackground: '#fff',
+    buttonBorderColor: '#b5b5b5',
+    buttonHoverColor: '#fff',
+    buttonHoverColorBackground: colors.p5pink,
+  },
+  [Theme.dark]: {
+    colors,
+    ...common,
+    primaryTextColor: '#FFF',
+
+    buttonColor: '#f10046',
+    buttonColorBackground: '#fff',
+    buttonBorderColor: '#b5b5b5',
+    buttonHoverColor: '#fff',
+    buttonHoverColorBackground: colors.p5pink,
+  },
+  [Theme.contrast]: {
+    colors,
+    ...common,
+    primaryTextColor: '#F5DC23',
+
+    buttonColor: '#333',
+    buttonColorBackground: colors.yellow,
+    buttonBorderColor: '#b5b5b5',
+    buttonHoverColor: '#333',
+    buttonHoverColorBackground: '#fff',
+  },
+};