fix(KitchenSink): add all current examples to kitchen sink

react/src/app/containers/AsyncComponent/index.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+class AsyncComponent extends React.Component {
+  state = { Component: null };
+
+  async componentDidMount() {
+    try {
+      const Component = await this.props.loader();
+
+      this.setComponent(Component.default);
+    } catch (e) {
+      return;
+    }
+  }
+
+  setComponent = Component => {
+    this.setState({ Component });
+  }
+
+  render() {
+    const { Component } = this.state;
+    const { Placeholder, ...props } = this.props;
+
+    const getPlaceholder = () => (
+      typeof Placeholder === 'string'
+      /* eslint-disable */
+        ? <div dangerouslySetInnerHTML={{__html: Placeholder}} />
+      /* eslint-enable */
+        : Placeholder
+    );
+
+    return (
+      <div className='row'>
+        {Component ? <Component {...props} /> : getPlaceholder()}
+      </div>
+    );
+  }
+}
+
+AsyncComponent.defaultProps ={
+  Placeholder: <div>Not Found</div>
+};
+
+AsyncComponent.propTypes = {
+  loader: PropTypes.func.isRequired,
+  Placeholder: PropTypes.node,
+};
+
+export default AsyncComponent;

react/src/app/containers/KitchenSink/index.js

@@ -6,12 +6,63 @@ import {
   SidebarNav,
   SidebarNavItem,
 } from '@momentum-ui/react';
-import CheckboxKitchenSink from '../../../lib/Checkbox/examples/KitchenSink';
-import CardKitchenSink from '../../../lib/Card/examples/KitchenSink';
-import InputKitchenSink from '../../../lib/Input/examples/KitchenSink';
-import RadioKitchenSink from '../../../lib/Radio/examples/KitchenSink';
-import SliderKitchenSink from '../../../lib/Slider/examples/KitchenSink';
 import EventOverlay from '../EventOverlay';
+import { snakeCase } from '../../../lib/utils';
+import AsyncComponent from '../AsyncComponent';
+
+const KitchenSinkComponents = [
+  'Alert',
+  'AlertBanner',
+  'AlertCall',
+  'AlertMeeting',
+  'Avatar',
+  'Badge',
+  'Breadcrumbs',
+  'Button',
+  'ButtonGroup',
+  'CallControl',
+  'Card',
+  'CardSection',
+  'Checkbox',
+  'Coachmark',
+  'CollapseButton',
+  'ComboBox',
+  'ContentItem',
+  'DatePicker',
+  'Dialog',
+  'EditableTextfield',
+  'FormSection',
+  'FormSubSection',
+  'Icon',
+  'Input',
+  'InputHelper',
+  'InputSearch',
+  'Label',
+  'Lightbox',
+  'Link',
+  'List',
+  'ListItem',
+  'ListItemHeader',
+  'ListItemMeeting',
+  'Loading',
+  'Menu',
+  'Modal',
+  'ModalBody',
+  'ModalFooter',
+  'Popover',
+  'ProgressBar',
+  'Radio',
+  'Select',
+  'Sidebar',
+  'Slider',
+  'SocialList',
+  'SpaceListItem',
+  'Spinner',
+  'Tabs',
+  'TimePicker',
+  'ToggleSwitch',
+  'Tooltip',
+];
 
 export default class KitchenSink extends React.PureComponent {
   render() {
@@ -31,43 +82,19 @@ export default class KitchenSink extends React.PureComponent {
                   title="Playground"
                 />
                 <SidebarNavItem keyboardKey="k" title="Kitchen Sink">
-                  <SidebarNavItem
-                    key={`CardKitchenSink`}
-                    customAnchorNode={
-                      <NavLink activeClassName="md-active-nav" to={`/card`} />
-                    }
-                    className="md-list-item--primary"
-                    keyboardKey="card"
-                    title="card"
-                  />
-                  <SidebarNavItem
-                    key={`CheckboxKitchenSink`}
-                    customAnchorNode={<NavLink activeClassName="md-active-nav" to={`/checkbox`} />}
-                    className="md-list-item--primary"
-                    keyboardKey="checkbox"
-                    title="checkbox"
-                  />
-                  <SidebarNavItem
-                    key={`InputKitchenSink`}
-                    customAnchorNode={<NavLink activeClassName="md-active-nav" to={`/input`} />}
-                    className="md-list-item--primary"
-                    keyboardKey="input"
-                    title="input"
-                  />
-                  <SidebarNavItem
-                    key={`RadioKitchenSink`}
-                    customAnchorNode={<NavLink activeClassName="md-active-nav" to={`/radio`} />}
-                    className="md-list-item--primary"
-                    keyboardKey="radio"
-                    title="radio"
-                  />
-                  <SidebarNavItem
-                    key={`SliderKitchenSink`}
-                    customAnchorNode={<NavLink activeClassName="md-active-nav" to={`/slider`} />}
-                    className="md-list-item--primary"
-                    keyboardKey="slider"
-                    title="slider"
-                  />
+                  {
+                    KitchenSinkComponents.map(ele=> (
+                      <SidebarNavItem
+                        key={ele}
+                        customAnchorNode={
+                          <NavLink activeClassName="md-active-nav" to={`/${snakeCase(ele)}`} />
+                        }
+                        className="md-list-item--primary"
+                        keyboardKey={`${snakeCase(ele)}`}
+                        title={`${snakeCase(ele)}`}
+                      />
+                    ))
+                  }
                   <SidebarNavItem
                     key={`EventOverlay`}
                     customAnchorNode={
@@ -84,36 +111,20 @@ export default class KitchenSink extends React.PureComponent {
           <div className="docs-container__content">
             <h1>React Kitchen Sink</h1>
             <Switch>
-              <Route
-                key={`CardKitchenSink`}
-                exact
-                path={`/card`}
-                render={() => <CardKitchenSink />}
-              />
-              <Route
-                key={`CheckboxKitchenSink`}
-                exact
-                path={`/checkbox`}
-                render={() => <CheckboxKitchenSink />}
-              />
-              <Route
-                key={`InputKitchenSink`}
-                exact
-                path={`/input`}
-                render={() => <InputKitchenSink />}
-              />
-              <Route
-                key={`RadioKitchenSink`}
-                exact
-                path={`/radio`}
-                render={() => <RadioKitchenSink />}
-              />
-              <Route
-                key={`SliderKitchenSink`}
-                exact
-                path={`/slider`}
-                render={() => <SliderKitchenSink />}
-              />
+              {
+                KitchenSinkComponents.map(ele=> (
+                  <Route
+                    key={ele}
+                    exact
+                    path={`/${snakeCase(ele)}`}
+                    render={()=> (
+                      <AsyncComponent
+                        loader={() => import(`../../../lib/${ele}/examples/KitchenSink.js`)}
+                      />
+                    )}
+                  />
+                ))
+              }
               <Route
                 key={`EventOverlay`}
                 exact

react/src/lib/Accordion/examples/KitchenSink.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import {
+  AccordionDefault,
+  AccordionMultiOpen,
+  AccordionPreSelectedOpen,
+} from './index';
+
+export default class AccordionKitchenSink extends React.Component {
+  render() {
+    return (
+      <React.Fragment>
+        <AccordionDefault />
+        <AccordionMultiOpen />
+        <AccordionPreSelectedOpen />
+      </React.Fragment>
+    );
+  }
+}

react/src/lib/Accordion/examples/index.js

@@ -1,3 +1,4 @@
 export { default as AccordionDefault } from './Default';
+export { default as AccordionKitchenSink } from './KitchenSink';
 export { default as AccordionMultiOpen } from './MultiOpen';
 export { default as AccordionPreSelectedOpen } from './PreSelectedOpen';

react/src/lib/ActivityButton/examples/KitchenSink.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import {
+  ActivityButtonDefault,
+  ActivityButtonLarge,
+  ActivityButtonSize56,
+} from './index';
+
+export default class ActivityButtonKitchenSink extends React.Component {
+  render() {
+    return (
+      <React.Fragment>
+        <ActivityButtonDefault />
+        <ActivityButtonLarge />
+        <ActivityButtonSize56 />
+      </React.Fragment>
+    );
+  }
+}

react/src/lib/ActivityButton/examples/index.js

@@ -1,3 +1,4 @@
 export { default as ActivityButtonDefault } from './Default';
-export { default as ActivityButtonSize56 } from './Size56';
+export { default as ActivityButtonKitchenSink } from './KitchenSink';
 export { default as ActivityButtonLarge } from './Large';
+export { default as ActivityButtonSize56 } from './Size56';

react/src/lib/Alert/examples/KitchenSink.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import {
+  AlertDefault,
+  AlertError,
+  AlertSuccess,
+  AlertWarning,
+} from './index';
+
+export default class AlertKitchenSink extends React.Component {
+  render() {
+    return (
+      <React.Fragment>
+        <AlertDefault />
+        <AlertError />
+        <AlertSuccess />
+        <AlertWarning />
+      </React.Fragment>
+    );
+  }
+}

react/src/lib/Alert/examples/index.js

@@ -1,4 +1,5 @@
 export { default as AlertDefault } from './Default';
 export { default as AlertError } from './Error';
+export { default as AlertKitchenSink } from './KitchenSink';
 export { default as AlertSuccess } from './Success';
 export { default as AlertWarning } from './Warning';

react/src/lib/AlertBanner/examples/KitchenSink.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import {
+  AlertBannerDefault,
+  AlertBannerError,
+  AlertBannerWarning,
+} from './index';
+
+export default class AlertBannerKitchenSink extends React.Component {
+  render() {
+    return (
+      <React.Fragment>
+        <AlertBannerDefault />
+        <AlertBannerError />
+        <AlertBannerWarning />
+      </React.Fragment>
+    );
+  }
+}

react/src/lib/AlertBanner/examples/index.js

@@ -1,3 +1,4 @@
 export { default as AlertBannerDefault } from './Default';
 export { default as AlertBannerError } from './Error';
+export { default as AlertBannerKitchenSink } from './KitchenSink';
 export { default as AlertBannerWarning } from './Warning';

react/src/lib/AlertCall/examples/KitchenSink.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import {
+  AlertCallDefault,
+  AlertCallDevice,
+  AlertCallDeviceList,
+  AlertCallNumber,
+} from './index';
+
+export default class AlertCallKitchenSink extends React.Component {
+  render() {
+    return (
+      <React.Fragment>
+        <AlertCallDefault />
+        <AlertCallDevice />
+        <AlertCallDeviceList />
+        <AlertCallNumber />
+      </React.Fragment>
+    );
+  }
+}

react/src/lib/AlertCall/examples/index.js

@@ -1,4 +1,5 @@
 export { default as AlertCallDefault } from './Default';
 export { default as AlertCallDevice } from './Device';
-export { default as AlertCallDevicelist } from './DeviceList';
+export { default as AlertCallDeviceList } from './DeviceList';
+export { default as AlertCallKitchenSink } from './KitchenSink';
 export { default as AlertCallNumber } from './Number';

react/src/lib/AlertMeeting/examples/KitchenSink.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import {
+  AlertMeetingDefault,
+  AlertMeetingMultiple,
+} from './index';
+
+export default class AlertMeetingKitchenSink extends React.Component {
+  render() {
+    return (
+      <React.Fragment>
+        <AlertMeetingDefault />
+        <AlertMeetingMultiple />
+      </React.Fragment>
+    );
+  }
+}

react/src/lib/AlertMeeting/examples/index.js

@@ -1,2 +1,3 @@
 export { default as AlertMeetingDefault } from './Default';
+export { default as AlertMeetingKitchenSink } from './KitchenSink';
 export { default as AlertMeetingMultiple } from './Multiple';