Update to newer react version and migrate components

components/alert/Alert.js

@@ -1,66 +1,56 @@
-import React from "react";
-import PropTypes from "prop-types";
-import classNames from "classnames";
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
-import Fade from "../fade";
+import Fade from '../fade';
 
 /**
  * The alert component can be used to display contextual user messages.
  */
-const Alert = props => {
-  const {
-    className,
-    closeClassName,
-    closeAriaLabel,
-    tag: Tag,
-    theme,
-    open,
-    dismissible,
-    children,
-    transition,
-    fade,
-    ...attrs
-  } = props;
-
-  const classes = classNames(
-    className,
-    "alert",
-    `alert-${theme}`,
-    dismissible && "alert-dismissible"
-  );
-
-  const closeClasses = classNames("close", closeClassName);
-
-  const alertTransition = {
-    ...Fade.defaultProps,
-    ...transition,
-    baseClass: fade ? transition.baseClass : "",
-    timeout: fade ? transition.timeout : 0
-  };
-
-  return (
-    <Fade
-      {...attrs}
-      {...alertTransition}
-      tag={Tag}
-      className={classes}
-      in={open}
-      role="alert"
-    >
-      {dismissible ? (
-        <button
-          type="button"
-          className={closeClasses}
-          aria-label={closeAriaLabel}
-          onClick={dismissible}
-        >
-          <span aria-hidden="true">&times;</span>
-        </button>
-      ) : null}
-      {children}
-    </Fade>
-  );
-};
+export const Alert = ({
+  className,
+  closeClassName,
+  closeAriaLabel,
+  tag: Tag,
+  theme,
+  open,
+  dismissible,
+  children,
+  transition,
+  fade,
+  ...attrs
+}) => (
+  <Fade
+    {...{
+      ...attrs,
+      ...Fade.defaultProps,
+      ...transition,
+      baseClass: fade ? transition.baseClass : '',
+      timeout: fade ? transition.timeout : 0,
+      tag: Tag,
+      className: classNames(
+        className,
+        'alert',
+        `alert-${theme}`,
+        dismissible && 'alert-dismissible'
+      ),
+      in: open,
+      role: 'alert',
+    }}
+  >
+    {dismissible ? (
+      <button
+        type="button"
+        className={classNames('close', closeClassName)}
+        aria-label={closeAriaLabel}
+        onClick={dismissible}
+      >
+        <span aria-hidden="true">&times;</span>
+      </button>
+    ) : null}
+    {children}
+  </Fade>
+);
 
 Alert.propTypes = {
   /**
@@ -102,19 +92,17 @@ Alert.propTypes = {
   /**
    * The component tag type.
    */
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
+  tag: PropTypes.oneOfType([ PropTypes.func, PropTypes.string ])
 };
 
 Alert.defaultProps = {
-  theme: "primary",
+  theme: 'primary',
   open: true,
-  tag: "div",
-  closeAriaLabel: "Close",
+  tag: 'div',
+  closeAriaLabel: 'Close',
   fade: true,
   transition: {
     ...Fade.defaultProps,
     unmountOnExit: true
   }
 };
-
-export default Alert;

components/alert/docs/01-basic-alert.js

@@ -1,5 +1,5 @@
-import React from "react";
-import { Alert } from "shards-react";
+import React from 'react';
+import { Alert } from 'shards-react';
 
 /**
  * ## Basic Alerts
@@ -10,49 +10,49 @@ export default function AlertExample() {
   return (
     <div className="example">
       <Alert theme="primary">
-        Alert - Primary Theme (default) -{" "}
+        Alert - Primary Theme (default) -{' '}
         <a className="alert-link" href="#">
           Example Link
         </a>
       </Alert>
       <Alert theme="secondary">
-        Alert - Secondary Theme -{" "}
+        Alert - Secondary Theme -{' '}
         <a className="alert-link" href="#">
           Example Link
         </a>
       </Alert>
       <Alert theme="success">
-        Alert - Success Theme -{" "}
+        Alert - Success Theme -{' '}
         <a className="alert-link" href="#">
           Example Link
         </a>
       </Alert>
       <Alert theme="danger">
-        Alert - Danger Theme -{" "}
+        Alert - Danger Theme -{' '}
         <a className="alert-link" href="#">
           Example Link
         </a>
       </Alert>
       <Alert theme="warning">
-        Alert - Warning Theme -{" "}
+        Alert - Warning Theme -{' '}
         <a className="alert-link" href="#">
           Example Link
         </a>
       </Alert>
       <Alert theme="info">
-        Alert - Info Theme -{" "}
+        Alert - Info Theme -{' '}
         <a className="alert-link" href="#">
           Example Link
         </a>
       </Alert>
       <Alert theme="light">
-        Alert - Light Theme -{" "}
+        Alert - Light Theme -{' '}
         <a className="alert-link" href="#">
           Example Link
         </a>
       </Alert>
       <Alert theme="dark">
-        Alert - Dark Theme -{" "}
+        Alert - Dark Theme -{' '}
         <a className="alert-link" href="#">
           Example Link
         </a>

components/alert/docs/02-dismissible-alert.js

@@ -1,5 +1,5 @@
-import React from "react";
-import { Alert } from "shards-react";
+import React from 'react';
+import { Alert } from 'shards-react';
 
 /**
  * ## Dismissible Alerts
@@ -10,7 +10,7 @@ export default class DismissibleAlertExample extends React.Component {
   constructor(props) {
     super(props);
     this.dismiss = this.dismiss.bind(this);
-    this.state = { visible: true };
+    this.state = {visible: true};
   }
 
   render() {
@@ -22,6 +22,6 @@ export default class DismissibleAlertExample extends React.Component {
   }
 
   dismiss() {
-    this.setState({ visible: false });
+    this.setState({visible: false});
   }
 }

components/alert/docs/03-self-dismissing-alert.js

@@ -1,5 +1,5 @@
-import React from "react";
-import { Alert, Button } from "shards-react";
+import React from 'react';
+import { Alert, Button } from 'shards-react';
 
 /**
  * ## Self Dismissing Alert
@@ -24,20 +24,20 @@ export default class SelfDismissingAlertExample extends React.Component {
 
   showAlert() {
     this.clearInterval();
-    this.setState({ visible: true, countdown: 0, timeUntilDismissed: 5 });
+    this.setState({visible: true, countdown: 0, timeUntilDismissed: 5});
     this.interval = setInterval(this.handleTimeChange, 1000);
   }
 
   handleTimeChange() {
     if (this.state.countdown < this.state.timeUntilDismissed - 1) {
       this.setState({
         ...this.state,
-        ...{ countdown: this.state.countdown + 1 }
+        ...{countdown: this.state.countdown + 1}
       });
       return;
     }
 
-    this.setState({ ...this.state, ...{ visible: false } });
+    this.setState({...this.state, ...{visible: false}});
     this.clearInterval();
   }
 
@@ -50,7 +50,7 @@ export default class SelfDismissingAlertExample extends React.Component {
     return (
       <div>
         <Alert className="mb-3" open={this.state.visible} theme="success">
-          Success! This alert will will be dismissed in{" "}
+          Success! This alert will will be dismissed in{' '}
           {this.state.timeUntilDismissed - this.state.countdown} seconds!
         </Alert>
         <Button onClick={this.showAlert}>Show Alert!</Button>

components/alert/index.js

@@ -1,3 +1 @@
-import Alert from "./Alert";
-
-export default Alert;
+export * from './Alert';

components/badge/Badge.js

@@ -1,24 +1,29 @@
-import React from "react";
-import PropTypes from "prop-types";
-import classNames from "classnames";
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
 /**
  * Badges are really great for labels and count values.
  */
-const Badge = props => {
-  let { tag: Tag, className, theme, pill, outline, ...attrs } = props;
+export const Badge = ({
+  tag: Tag,
+  className,
+  theme,
+  pill,
+  outline,
+  ...attrs
+}) => {
+  Tag = attrs.href && Tag === 'span' ? 'a' : Tag;
 
-  const classes = classNames(
-    className,
-    "badge",
-    theme && !outline && `badge-${theme}`,
-    outline && `badge-outline-${theme}`,
-    pill && "badge-pill"
-  );
-
-  Tag = attrs.href && Tag === "span" ? "a" : Tag;
-
-  return <Tag {...attrs} className={classes} />;
+  return <Tag {...attrs} className={
+    classNames(
+      className,
+      'badge',
+      theme && !outline && `badge-${theme}`,
+      outline && `badge-outline-${theme}`,
+      pill && 'badge-pill'
+    )
+  }/>;
 };
 
 Badge.propTypes = {
@@ -45,14 +50,12 @@ Badge.propTypes = {
   /**
    * The component tag.
    */
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
+  tag: PropTypes.oneOfType([ PropTypes.func, PropTypes.string ])
 };
 
 Badge.defaultProps = {
-  theme: "primary",
+  theme: 'primary',
   pill: false,
   outline: false,
-  tag: "span"
+  tag: 'span'
 };
-
-export default Badge;

components/badge/docs/01-basic-badges.js

@@ -1,5 +1,5 @@
-import React from "react";
-import { Badge } from "shards-react";
+import React from 'react';
+import { Badge } from 'shards-react';
 
 /**
  * ## Contextual Variations

components/badge/docs/02-pill-badges.js

@@ -1,5 +1,5 @@
-import React from "react";
-import { Badge } from "shards-react";
+import React from 'react';
+import { Badge } from 'shards-react';
 
 /**
  * ## Pill-Shaped Badges

components/badge/docs/03-outline-badges.js

@@ -1,5 +1,5 @@
-import React from "react";
-import { Badge } from "shards-react";
+import React from 'react';
+import { Badge } from 'shards-react';
 
 /**
  * ## Outline Badges

components/badge/docs/04-mixed-badges.js

@@ -1,5 +1,5 @@
-import React from "react";
-import { Badge } from "shards-react";
+import React from 'react';
+import { Badge } from 'shards-react';
 
 /**
  * ## Mixed Effects

components/badge/docs/05-link-badges.js

@@ -1,5 +1,5 @@
-import React from "react";
-import { Badge } from "shards-react";
+import React from 'react';
+import { Badge } from 'shards-react';
 
 /**
  * ## Link Badges

components/badge/index.js

@@ -1,3 +1 @@
-import Badge from "./Badge";
-
-export default Badge;
+export * from './Badge';