Exclude documentation components from library to decrease bundle build size (#32)

Author: adamkudrna

demo/generated/demo.js

@@ -1,6 +1,6 @@
-@import '../../../styles/settings/colors';
-@import '../../../styles/settings/typography';
-@import '../../../styles/tools/offset';
+@import '../../../lib/styles/settings/colors';
+@import '../../../lib/styles/settings/typography';
+@import '../../../lib/styles/tools/offset';
 
 .root {
   margin-bottom: offset(7);

dist/lib.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as Documentation } from './Documentation';

src/lib/components/documentation/Documentation/Documentation.jsx renamed to src/demo/components/Documentation/Documentation.jsx

@@ -1,22 +1,22 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import styles from './DocumentationLayout.scss';
+import styles from './Layout.scss';
 
-const DocumentationLayout = (props) => (
+const Layout = (props) => (
   <div className={styles.root}>
     {props.children}
   </div>
 );
 
-DocumentationLayout.defaultProps = {
+Layout.defaultProps = {
   children: null,
 };
 
-DocumentationLayout.propTypes = {
+Layout.propTypes = {
   children: PropTypes.oneOfType([
     PropTypes.element,
     PropTypes.arrayOf(PropTypes.element),
   ]),
 };
 
-export default DocumentationLayout;
+export default Layout;

src/lib/components/documentation/Documentation/Documentation.scss renamed to src/demo/components/Documentation/Documentation.scss

@@ -1,6 +1,6 @@
-@import '../../../styles/settings/colors';
-@import '../../../styles/tools/breakpoints';
-@import '../../../styles/tools/offset';
+@import '../../../lib/styles/settings/colors';
+@import '../../../lib/styles/tools/breakpoints';
+@import '../../../lib/styles/tools/offset';
 
 .content {
   padding: offset(5);

src/demo/components/Documentation/index.js

@@ -1,22 +1,22 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import styles from './DocumentationLayout.scss';
+import styles from './Layout.scss';
 
-const DocumentationLayoutContent = (props) => (
+const LayoutContent = (props) => (
   <main className={styles.content}>
     {props.children}
   </main>
 );
 
-DocumentationLayoutContent.defaultProps = {
+LayoutContent.defaultProps = {
   children: null,
 };
 
-DocumentationLayoutContent.propTypes = {
+LayoutContent.propTypes = {
   children: PropTypes.oneOfType([
     PropTypes.element,
     PropTypes.arrayOf(PropTypes.element),
   ]),
 };
 
-export default DocumentationLayoutContent;
+export default LayoutContent;

src/lib/components/documentation/DocumentationLayout/DocumentationLayout.jsx renamed to src/demo/components/Layout/Layout.jsx

@@ -1,22 +1,22 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import styles from './DocumentationLayout.scss';
+import styles from './Layout.scss';
 
-const DocumentationLayoutSidebar = (props) => (
+const LayoutSidebar = (props) => (
   <aside className={styles.sidebar}>
     {props.children}
   </aside>
 );
 
-DocumentationLayoutSidebar.defaultProps = {
+LayoutSidebar.defaultProps = {
   children: null,
 };
 
-DocumentationLayoutSidebar.propTypes = {
+LayoutSidebar.propTypes = {
   children: PropTypes.oneOfType([
     PropTypes.element,
     PropTypes.arrayOf(PropTypes.element),
   ]),
 };
 
-export default DocumentationLayoutSidebar;
+export default LayoutSidebar;

src/lib/components/documentation/DocumentationLayout/DocumentationLayout.scss renamed to src/demo/components/Layout/Layout.scss

@@ -0,0 +1,3 @@
+export { default as Layout } from './Layout';
+export { default as LayoutContent } from './LayoutContent';
+export { default as LayoutSidebar } from './LayoutSidebar';

src/lib/components/documentation/DocumentationLayout/DocumentationLayoutContent.jsx renamed to src/demo/components/Layout/LayoutContent.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import styles from './DocumentationNavigation.scss';
+import styles from './Navigation.scss';
 
-const DocumentationNavigation = (props) => (
+const Navigation = (props) => (
   <div>
     <h1 className={styles.headline}>React UI</h1>
     <ul className={styles.root}>
@@ -26,7 +26,7 @@ const DocumentationNavigation = (props) => (
   </div>
 );
 
-DocumentationNavigation.propTypes = {
+Navigation.propTypes = {
   items: PropTypes.arrayOf(PropTypes.shape({
     items: PropTypes.arrayOf(PropTypes.shape({
       link: PropTypes.string.isRequired,
@@ -37,4 +37,4 @@ DocumentationNavigation.propTypes = {
   })).isRequired,
 };
 
-export default DocumentationNavigation;
+export default Navigation;

src/lib/components/documentation/DocumentationLayout/DocumentationLayoutSidebar.jsx renamed to src/demo/components/Layout/LayoutSidebar.jsx

@@ -1,7 +1,7 @@
-@import '../../../styles/settings/colors';
-@import '../../../styles/settings/typography';
-@import '../../../styles/tools/offset';
-@import '../../../styles/tools/transitions';
+@import '../../../lib/styles/settings/colors';
+@import '../../../lib/styles/settings/typography';
+@import '../../../lib/styles/tools/offset';
+@import '../../../lib/styles/tools/transitions';
 
 .headline {
   padding: offset(6) offset(5) offset(2);

src/demo/components/Layout/index.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as Navigation } from './Navigation';

src/lib/components/documentation/DocumentationNavigation/DocumentationNavigation.jsx renamed to src/demo/components/Navigation/Navigation.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import styles from './DocumentationPlaceholder.scss';
+import styles from './Placeholder.scss';
 
 const DocumentationPlaceholder = (props) => (
   <div className={styles.root}>

src/lib/components/documentation/DocumentationNavigation/DocumentationNavigation.scss renamed to src/demo/components/Navigation/Navigation.scss

@@ -1,5 +1,5 @@
-@import '../../../styles/settings/colors';
-@import '../../../styles/tools/offset';
+@import '../../../lib/styles/settings/colors';
+@import '../../../lib/styles/tools/offset';
 
 .root {
   padding: offset(3);

src/demo/components/Navigation/index.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as Placeholder } from './Placeholder';

src/lib/components/documentation/DocumentationPlaceholder/DocumentationPlaceholder.jsx renamed to src/demo/components/Placeholder/Placeholder.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import styles from './DocumentationSwatch.scss';
+import styles from './Swatch.scss';
 
-const DocumentationSwatch = (props) => {
+const Swatch = (props) => {
   const style = {
     backgroundColor: `var(--rui-color-${props.color})`,
   };
@@ -17,8 +17,8 @@ const DocumentationSwatch = (props) => {
   );
 };
 
-DocumentationSwatch.propTypes = {
+Swatch.propTypes = {
   color: PropTypes.string.isRequired,
 };
 
-export default DocumentationSwatch;
+export default Swatch;

src/lib/components/documentation/DocumentationPlaceholder/DocumentationPlaceholder.scss renamed to src/demo/components/Placeholder/Placeholder.scss

@@ -1,5 +1,5 @@
-@import '../../../styles/settings/typography';
-@import '../../../styles/tools/offset';
+@import '../../../lib/styles/settings/typography';
+@import '../../../lib/styles/tools/offset';
 
 .root {
   display: inline-block;

src/demo/components/Placeholder/index.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as Swatch } from './Swatch';

src/lib/components/documentation/DocumentationSwatch/DocumentationSwatch.jsx renamed to src/demo/components/Swatch/Swatch.jsx

@@ -0,0 +1,10 @@
+export { Documentation } from './Documentation';
+export { Icon } from './Icon';
+export {
+  Layout,
+  LayoutContent,
+  LayoutSidebar,
+} from './Layout';
+export { Navigation } from './Navigation';
+export { Placeholder } from './Placeholder';
+export { Swatch } from './Swatch';