Init

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

Author: 0wczar

.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
+};