handle core components + styled components

Author: NogsMPLS

app/components/Sections/index.js

@@ -28,7 +28,7 @@ class Sections extends Component {
   }
 
   render () {
-    var componentsObj = contents.allComponents;
+    var componentsObj = Object.assign({}, contents.allComponents, contents.allStyledComponents);
     return (
       <div>
         {this.getContents().map((Content, i) => {

app/utils/contents.js

@@ -1,12 +1,15 @@
 // component-requires.js is a generated file in rsg.js that contains
 // the list of required user-defined components
 import Components from '../../rcs-tmp/component-requires'
+import StyledComponents from '../../rcs-tmp/styled-component-requires'
 import reactPropMeta from '../../rcs-tmp/propsdoc'
 
+let StyledContents = StyledComponents ? StyledComponents
+    .map((Content) => Content.default || Content) : false;
 // for `commonStrict` module formatter
 // https://babeljs.io/docs/usage/modules/#interop
 let Contents = Components
-  .map((Content) => Content.default || Content)
+ .map((Content) => Content.default || Content)
  .sort((a, b) => {
 
    a.styleguide = a.styleguide ? a.styleguide : {};
@@ -132,7 +135,19 @@ var contentObj = {
         prevVal[currentValName] = currentVal;
         return prevVal;
       }, {})
+  })(),
+
+  allStyledComponents: (() => {
+    if (StyledContents) {
+        return StyledContents.reduce(function(prevVal, currentVal, idx) {
+            Object.assign(prevVal, currentVal);
+            return prevVal;
+          }, {})
+    } else {
+        return {}
+    }
   })()
+
 };
 
 export default contentObj;

bin/rcs

@@ -23,7 +23,8 @@ var log
     files: argv.f || argv.files,
     config: argv.c || argv.config,
     dev: argv.d || argv.dev,
-    verbose: argv.v || argv.verbose
+    verbose: argv.v || argv.verbose,
+    styleComponents: argv.s || argv.styleComponents
   }
 
   log = require('../lib/logger')('bin', { debug: true })

example/components/Buttons/Button.js

@@ -1,59 +1,12 @@
 import React, { PropTypes } from 'react';
-import ClassNames from 'classnames/bind';
-import style from './button.css';
 
 /**
  * Creates a reusable, customizable button.
  */
-const Button = ({className, outline, href, loading, primary, secondary, success, warning, danger, link, large, small, block, disabled, children, ...others}) => {
-
-    const element = href ? 'a' : 'button';
-    const cx = ClassNames.bind(style);
-    let classNames = cx({
-        large,
-        small,
-        block,
-        disabled,
-        className
-    });
-
-    if (outline) {
-      classNames += ' ' + cx({
-        primary_outline: !secondary && !success && !warning && !danger && !link,
-        secondary,
-        success_outline: success,
-        warning_outline: warning,
-        danger_outline: danger,
-        link_outline: link
-      });
-    } else {
-      classNames += ' ' + cx({
-        primary: !secondary && !success && !warning && !danger && !link,
-        secondary,
-        success,
-        warning,
-        danger,
-        link
-      });
-    }
-
-
-    let role;
-    if (element === 'a') {
-      role = 'button';
-    }
-    const props = {
-      ...others,
-      href,
-      className: classNames,
-      disabled: disabled || loading,
-      role
-    };
-
-    return React.createElement(element, props,
-      children
-    );
+const Button = ({loading, disabled, children, theme, className, ...props}) => {
 
+    var disabledStyle = disabled || loading ? theme.disabled : '';
+    return <button {...props} className={`${theme.base} ${disabledStyle} ${className}`}>{children}</button>
 };
 
 Button.displayName = 'Button';
@@ -64,44 +17,10 @@ Button.styleguide = {
   example: `
   <section>
     <p>Regular Buttons</p>
-    <Button>Button</Button>
-    <Button>Secondary</Button>
-    <Button>Success</Button>
-    <Button>Warning</Button>
-    <Button>Danger</Button>
-
-    <p>Disabled Regular Buttons</p>
-    <Button disabled >Button</Button>
-    <Button disabled>Secondary</Button>
-    <Button disabled >Success</Button>
-    <Button disabled >Warning</Button>
-    <Button disabled >Danger</Button>
-
-    <p>Outline Buttons</p>
-    <Button>Button</Button>
-    <Button>Secondary</Button>
-    <Button>Success</Button>
-    <Button>Warning</Button>
-    <Button>Danger</Button>
-
-    <p>Disabled Outline Buttons</p>
-    <Button disabled>Button</Button>
-    <Button disabled>Secondary</Button>
-    <Button disabled>Success</Button>
-    <Button disabled>Warning</Button>
-    <Button disabled>Danger</Button>
-
-    <p>Large Buttons</p>
-    <Button>Button</Button>
-    <Button>Secondary</Button>
-
-    <p>Small Buttons</p>
-    <Button>Button</Button>
-    <Button>Secondary</Button>
-
-    <p>Block Level Buttons</p>
-    <Button>Button</Button>
-    <Button>Secondary</Button>
+    <PrimaryButton>PrimaryButton</PrimaryButton>
+    <SecondaryButton>Secondary</SecondaryButton>
+    <div style={{clear: 'both'}}> </div>
+    <Button>Core 'unstyled' Button with primary theme as default</Button>
   </section>
   `
 };
@@ -126,34 +45,7 @@ Button.propTypes = {
      * Use outline styled button
      * @examples <Button outline>
      */
-  outline: PropTypes.bool,
-    /**
-     * Define button href if anchor
-     * @examples '#', 'http://some-website.com/'
-     */
-  href: PropTypes.string,
-    /**
-     * Set loading animation on button
-     * @examples <Button loading>
-     */
-  loading: PropTypes.bool,
-    /**
-     * Use primary style button (button is set to this by default)
-     * @examples <Button primary>
-     */
-  primary: PropTypes.bool,
-  type: PropTypes.string,
-    /**
-     * Use secondary style button
-     * @examples <Button secondary>
-     */
-  secondary: PropTypes.bool,
-  success: PropTypes.bool,
-  warning: PropTypes.bool,
-  danger: PropTypes.bool,
-  link: PropTypes.bool,
-  large: PropTypes.bool,
-  small: PropTypes.bool
+  theme: PropTypes.object
 };
 
 Button.defaultProps = {
@@ -170,8 +62,11 @@ Button.defaultProps = {
   danger: false,
   link: false,
   large: false,
-  small: false
-
+  small: false,
+  theme: {
+    base: "",
+    disabled: ""
+  }
 };
 
 export default Button;

example/components/Buttons/button.css

@@ -3,7 +3,7 @@
   "private": true,
   "scripts": {
     "start": "npm run styleguide && npm run serve",
-    "styleguide": "node ../bin/rcs \"components/**/*.js\" -v -r /atlas -c ./styleguide.js -d",
+    "styleguide": "node ../bin/rcs \"components/**/*.js\" -v -s \"styledComponents/**/*.js\" -c ./styleguide.js -d",
     "serve": "serve ./styleguide"
   },
   "dependencies": {