Init

Preview: http://dashboards.webkom.co/react/airframe

.babelrc

@@ -0,0 +1,19 @@
+{
+    "presets": [
+        "@babel/preset-env",
+        "@babel/preset-react",
+    ],
+    "plugins": [
+        "@babel/plugin-proposal-class-properties",
+        "@babel/plugin-syntax-dynamic-import",
+        "universal-import",
+        "react-hot-loader/babel"
+    ],
+    "env": {
+        "development": {
+            "plugins": [
+                "react-hot-loader/babel"
+            ]
+        }
+    }
+}

.eslintrc

@@ -0,0 +1,26 @@
+{
+    "parser": "babel-eslint",
+    "plugins": [
+        "react"
+    ],
+    "parserOptions": {
+        "ecmaVersion": 6,
+        "sourceType": "module",
+        "ecmaFeatures": {
+            "jsx": true,
+            "experimentalObjectRestSpread": true
+        }
+    },
+    "env": {
+        "es6":     true,
+        "browser": true,
+        "node":    true,
+        "mocha":   true
+    },   
+    "extends": [
+        "eslint:recommended", 
+        "plugin:react/recommended"
+    ],    
+    "rules": {
+    }
+}

.gitignore

@@ -0,0 +1,10 @@
+# build output
+dist
+
+# dependencies
+node_modules
+package-lock.json
+yarn.lock
+
+# other
+.DS_Store

.npmrc

@@ -0,0 +1 @@
+//registry.npmjs.org/:_authToken=57c97b55-1617-4b16-9f1b-2bffb2cdcc7e

app/colors.js

@@ -0,0 +1,14 @@
+import _ from 'lodash';
+
+import colors from './colors.scss';
+
+const colorKeys = _
+    .chain(colors)
+    .keys()
+    .filter((colorKey) => (
+        colorKey.indexOf('bg-') === -1 &&
+        colorKey.indexOf('fg-') === -1
+    ))
+    .value();
+
+export default _.pick(colors, colorKeys);

app/colors.scss

@@ -0,0 +1,16 @@
+@import "./styles/variables";
+
+@each $name, $color in $dashboard-colors {
+    .fg-color--#{ $name } {
+        color: $color;
+    }
+    .bg-color--#{ $name } {
+        background-color: $color;
+    }
+}
+
+:export {
+    @each $name, $color in $dashboard-colors {
+        #{$name}: $color
+    }
+}

app/common.js

@@ -0,0 +1,3 @@
+import * as CommonDashboardFuncs from '@owczar/dashboard-style--airframe';
+
+export default CommonDashboardFuncs;

app/components/Accordion/Accordion.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Card from './../Card';
+
+import { Provider } from './context';
+
+export class Accordion extends React.Component {
+    static propTypes = {
+        initialOpen: PropTypes.bool,
+        onToggle: PropTypes.func,
+        open: PropTypes.bool,
+        children: PropTypes.node,
+        className: PropTypes.string
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            isOpen: props.initialOpen
+        }
+
+        if (props.open !== 'undefined' && props.onToggle === 'undefined') {
+            throw "Accordion: props.open has to be used combined with props.onToggle " +
+                "use props.initialOpen to create an uncontrolled Accordion."
+        }
+    }
+
+    toggleHandler() {
+        const { onToggle } = this.props;
+
+        if (!onToggle) {
+            this.setState({ isOpen: !this.state.isOpen });
+        } else {
+            this.onToggle(!this.props.open);
+        }
+    }
+
+    isOpen() {
+        return !this.props.onToggle ?
+            this.state.isOpen : this.props.open;
+    }
+
+    render() {
+        /* eslint-disable-next-line no-unused-vars */
+        const { className, children, initialOpen, ...otherProps } = this.props;
+
+        return (
+            <Provider
+                value={{
+                    onToggle: this.toggleHandler.bind(this),
+                    isOpen: this.isOpen()
+                }}
+            >
+                <Card className={ className } { ...otherProps }>
+                    { children }
+                </Card>
+            </Provider>
+        );
+    }
+}

app/components/Accordion/AccordionBody.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { Collapse, CardBody } from 'reactstrap';
+
+import { Consumer } from './context';
+
+export const AccordionBody = (props) => (
+    <Consumer>
+    {
+        ({ isOpen }) => (
+            <Collapse isOpen={ isOpen }>
+                <CardBody className={ classNames(props.className, 'pt-0') }>
+                    { props.children }
+                </CardBody>
+            </Collapse>
+        )
+    }
+    </Consumer>
+);
+AccordionBody.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string
+};

app/components/Accordion/AccordionHeader.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import CardHeader from './../CardHeader';
+
+import { Consumer } from './context';
+import classes from './AccordionHeader.scss';
+
+export const AccordionHeader = (props) => (
+    <Consumer>
+    {
+        ({ onToggle }) => (
+            <CardHeader
+                className={
+                    classNames(
+                        props.className,
+                        classes.header
+                    )
+                }
+                onClick={ onToggle}
+            >
+                { props.children }
+            </CardHeader>
+        )   
+    }
+    </Consumer>
+);
+AccordionHeader.propTypes = {
+    children: PropTypes.node,
+    onClick: PropTypes.func,
+    className: PropTypes.string
+};

app/components/Accordion/AccordionHeader.scss

@@ -0,0 +1,14 @@
+@import '../../styles/variables';
+
+div.header {
+    background: none;
+    border-bottom: none;
+    cursor: pointer;
+    color: $link-color;
+    text-decoration: $link-decoration;
+
+    &:hover {
+        color: $link-hover-color;
+        text-decoration: $link-hover-decoration;
+    }
+}

app/components/Accordion/AccordionIndicator.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import { Consumer } from './context';
+
+export const AccordionIndicator = (props) => (
+    <Consumer>
+    {
+        ({ isOpen }) => isOpen ?
+            React.cloneElement(props.open, {
+                className: classNames(props.className, props.open.props.className)
+            }) : React.cloneElement(props.closed, {
+                className: classNames(props.className, props.closed.props.className)
+            })
+    }
+    </Consumer>
+);
+AccordionIndicator.propTypes = {
+    open: PropTypes.node,
+    closed: PropTypes.node,
+    className: PropTypes.string
+}
+AccordionIndicator.defaultProps = {
+    open: <i className="fa fa-fw fa-minus"></i>,
+    closed: <i className="fa fa-fw fa-plus"></i>
+}

app/components/Accordion/context.js

@@ -0,0 +1,8 @@
+import React from 'react';
+
+const { Provider, Consumer } = React.createContext();
+
+export {
+    Provider,
+    Consumer
+};

app/components/Accordion/index.js

@@ -0,0 +1,10 @@
+import { Accordion } from './Accordion';
+import { AccordionBody } from './AccordionBody';
+import { AccordionHeader } from './AccordionHeader';
+import { AccordionIndicator } from './AccordionIndicator';
+
+Accordion.Body = AccordionBody;
+Accordion.Header = AccordionHeader;
+Accordion.Indicator = AccordionIndicator;
+
+export default Accordion;

app/components/App/AppClient.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { hot } from 'react-hot-loader'
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import AppLayout from './../../layout/default';
+import { RoutedContent } from './../../routes';
+
+const basePath = process.env.BASE_PATH || '/';
+
+const AppClient = () => {
+    return (
+        <Router basename={ basePath }>
+            <AppLayout>
+                <RoutedContent />
+            </AppLayout>
+        </Router>
+    );
+}
+
+export default hot(module)(AppClient);

app/components/App/index.js

@@ -0,0 +1,3 @@
+import AppClient from './AppClient';
+
+export default AppClient;

app/components/Avatar/Avatar.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import _ from 'lodash';
+
+const Avatar = (props) => {
+    const avatarClass = classNames(
+        'avatar',
+        `avatar--${ props.size }`,
+        props.className
+    );
+    const addOnsdArr = React.Children.toArray(props.addOns);
+    const badge = _.find(addOnsdArr, (avatarAddOn) =>
+        avatarAddOn.type.addOnId === "avatar--badge");
+    const icons = _.filter(addOnsdArr, (avatarAddOn) =>
+        avatarAddOn.type.addOnId === "avatar--icon");
+    const isNested = _.reduce(addOnsdArr, (acc, avatarAddOn) =>
+        acc || !!avatarAddOn.props.small, false);
+
+    return (
+        <div className={ avatarClass } style={ props.style }>
+            {
+                badge && (
+                    <div className="avatar__badge">
+                        { badge }
+                    </div>
+                )
+            }
+            {
+                !_.isEmpty(icons) && (() => {
+                    switch(icons.length) {
+                        case 1:
+                            return (
+                                <div className="avatar__icon">
+                                    { _.first(icons) }
+                                </div>
+                            )
+                        default:
+                            return (
+                                <div
+                                    className={
+                                        classNames({
+                                            'avatar__icon--nested': isNested,
+                                        }, 'avatar__icon', 'avatar__icon--stack')
+                                    }
+                                >
+                                    { icons }
+                                </div>
+                            )
+                    }
+                })() 
+            }
+            <div className='avatar__content'>
+                { props.children }
+            </div>
+        </div>
+    );
+};
+Avatar.propTypes = {
+    size: PropTypes.string,
+    children: PropTypes.node.isRequired,
+    addOns: PropTypes.node,
+    style: PropTypes.object,
+    className: PropTypes.string
+};
+Avatar.defaultProps = {
+    size: "md",
+    style: {}
+};
+
+export { Avatar };