feat(docs): use next instead of storybook (#122)

bigcommerce · Aug 2, 2019 · 986ebd6 · 986ebd6
1 parent 4e58296
commit 986ebd6
Show file tree

Hide file tree

Showing 126 changed files with 1,315 additions and 4,550 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,5 +2,6 @@ node_modules
 dist
 .cache
 coverage
-storybook-static
 .vscode
+packages/docs/.next
+packages/docs/out
diff --git a/README.md b/README.md
@@ -48,7 +48,7 @@ Workspaces are inside the [packages](https://github.com/bigcommerce/big-design/b
 - [big-design](https://github.com/bigcommerce/big-design/blob/master/packages/big-design): React component library.
 - [big-design-theme](https://github.com/bigcommerce/big-design/blob/master/packages/big-design-theme): Default Theme.
 - [big-design-icons](https://github.com/bigcommerce/big-design/blob/master/packages/big-design-icons): Icons library.
-- [storybook](https://github.com/bigcommerce/big-design/blob/master/packages/storybook): Component stories and docs live here.
+- [docs](https://github.com/bigcommerce/big-design/blob/master/packages/docs): Documentation live here.
 - [configs](https://github.com/bigcommerce/big-design/blob/master/packages/configs): (internal) Shared configs between packages.
 
 ### Changelogs
@@ -59,7 +59,7 @@ As this is a monorepo, each package has it's own Changelog. Links for each can b
 - [big-design-theme](https://github.com/bigcommerce/big-design/blob/master/packages/big-design-theme/CHANGELOG.md)
 - [big-design-icons](https://github.com/bigcommerce/big-design/blob/master/packages/big-design-icons/CHANGELOG.md)
 - [configs](https://github.com/bigcommerce/big-design/tree/master/packages/configs)
-- [storybook](https://github.com/bigcommerce/big-design/blob/master/packages/storybook/CHANGELOG.md)
+- [docs](https://github.com/bigcommerce/big-design/blob/master/packages/docs/CHANGELOG.md)
 
 ### Contributing
 
@@ -68,7 +68,7 @@ and [Code of Conduct](https://github.com/bigcommerce/big-design/blob/master/CODE
 
 ### Development
 
-Running the following commands will run `big-design` and `storybook` in watch mode.
+Running the following commands will run `big-design` and `docs` in watch mode.
 
 ```
 yarn

diff --git a/commitlint.config.js b/commitlint.config.js
@@ -4,16 +4,7 @@ module.exports = {
     'scope-enum': [
       2,
       'always',
-      [
-        'all',
-        'ci',
-        'component',
-        'configs',
-        'icons',
-        'release',
-        'story',
-        'theme'
-      ]
+      ['all', 'ci', 'component', 'configs', 'icons', 'release', 'theme', 'docs']
     ]
   }
 };
diff --git a/packages/big-design/src/components/List/List.tsx b/packages/big-design/src/components/List/List.tsx
@@ -21,38 +21,43 @@ export class List extends React.PureComponent<ListProps> {
     placement: 'bottom-start',
   };
 
-  private listContainer = document.createElement('div');
+  private listContainer?: HTMLDivElement;
 
   componentDidMount() {
+    this.listContainer = document.createElement('div');
     document.body.appendChild(this.listContainer);
   }
 
   componentWillUnmount() {
-    document.body.removeChild(this.listContainer);
+    if (this.listContainer) {
+      document.body.removeChild(this.listContainer);
+    }
   }
 
   render() {
     const { children, handleListRef, isOpen, maxHeight, placement: selectedPlacement, ...rest } = this.props;
 
-    return createPortal(
-      <Popper innerRef={handleListRef} placement={selectedPlacement} modifiers={{ offset: { offset: '0, 10' } }}>
-        {({ ref, placement, style }) =>
-          isOpen && (
-            <StyledList
-              data-placement={placement}
-              isOpen={isOpen}
-              maxHeight={maxHeight}
-              ref={ref}
-              style={style}
-              tabIndex={-1}
-              {...rest}
-            >
-              {children}
-            </StyledList>
-          )
-        }
-      </Popper>,
-      this.listContainer,
-    );
+    return this.listContainer
+      ? createPortal(
+          <Popper innerRef={handleListRef} placement={selectedPlacement} modifiers={{ offset: { offset: '0, 10' } }}>
+            {({ ref, placement, style }) =>
+              isOpen && (
+                <StyledList
+                  data-placement={placement}
+                  isOpen={isOpen}
+                  maxHeight={maxHeight}
+                  ref={ref}
+                  style={style}
+                  tabIndex={-1}
+                  {...rest}
+                >
+                  {children}
+                </StyledList>
+              )
+            }
+          </Popper>,
+          this.listContainer,
+        )
+      : null;
   }
 }
diff --git a/packages/big-design/src/components/Modal/Modal.tsx b/packages/big-design/src/components/Modal/Modal.tsx
@@ -42,16 +42,19 @@ export class Modal extends React.PureComponent<ModalProps> {
   static Body = StyledModalBody;
   static Header = ModalHeader;
 
+  private modalContainer?: HTMLDivElement;
   private modalRef = React.createRef<HTMLDivElement>();
-  private modalContainer = document.createElement('div');
   private readonly headerUniqueId = uniqueId('modal_header_');
 
   componentDidMount() {
+    this.modalContainer = document.createElement('div');
     document.body.appendChild(this.modalContainer);
   }
 
   componentWillUnmount() {
-    document.body.removeChild(this.modalContainer);
+    if (this.modalContainer) {
+      document.body.removeChild(this.modalContainer);
+    }
   }
 
   componentDidUpdate(prevProps: ModalProps) {
@@ -84,7 +87,7 @@ export class Modal extends React.PureComponent<ModalProps> {
       </StyledModal>
     );
 
-    return isOpen && createPortal(modalContent, this.modalContainer);
+    return isOpen && this.modalContainer ? createPortal(modalContent, this.modalContainer) : null;
   }
 
   private renderClose() {

diff --git a/packages/big-design/src/components/Modal/spec.tsx b/packages/big-design/src/components/Modal/spec.tsx
@@ -6,15 +6,23 @@ import { Modal } from './Modal';
 
 test('render open modal', () => {
   const text = 'This is a modal';
-  const { queryByText } = render(<Modal isOpen={true}>{text}</Modal>);
+  const { queryByText, rerender } = render(<Modal isOpen={false}>{text}</Modal>);
+
+  rerender(<Modal isOpen={true}>{text}</Modal>);
 
   expect(document.body).toMatchSnapshot();
   expect(queryByText(text)).toBeInTheDocument();
 });
 
 test('render open modal without backdrop', () => {
   const text = 'This is a modal';
-  const { queryByText } = render(
+  const { queryByText, rerender } = render(
+    <Modal isOpen={false} backdrop={false}>
+      {text}
+    </Modal>,
+  );
+
+  rerender(
     <Modal isOpen={true} backdrop={false}>
       {text}
     </Modal>,
@@ -45,7 +53,13 @@ test('triggers onClose when pressing esc', () => {
   const text = 'This is a modal';
   const onClose = jest.fn();
 
-  const { queryByText } = render(
+  const { queryByText, rerender } = render(
+    <Modal isOpen={false} onClose={onClose}>
+      {text}
+    </Modal>,
+  );
+
+  rerender(
     <Modal isOpen={true} onClose={onClose}>
       {text}
     </Modal>,
@@ -62,7 +76,13 @@ test('does not trigger onClose when pressing esc and closeOnEscKey is false', ()
   const text = 'This is a modal';
   const onClose = jest.fn();
 
-  const { queryByText } = render(
+  const { queryByText, rerender } = render(
+    <Modal isOpen={false} onClose={onClose} closeOnEscKey={false}>
+      {text}
+    </Modal>,
+  );
+
+  rerender(
     <Modal isOpen={true} onClose={onClose} closeOnEscKey={false}>
       {text}
     </Modal>,
@@ -79,7 +99,13 @@ test('trigger onClose when clicking outside the modal', () => {
   const text = 'This is a modal';
   const onClose = jest.fn();
 
-  const { queryByRole } = render(
+  const { queryByRole, rerender } = render(
+    <Modal isOpen={false} onClose={onClose} closeOnClickOutside={true}>
+      {text}
+    </Modal>,
+  );
+
+  rerender(
     <Modal isOpen={true} onClose={onClose} closeOnClickOutside={true}>
       {text}
     </Modal>,
@@ -96,7 +122,13 @@ test('do not trigger onClose when clicking outside the modal and closeOnClickOut
   const text = 'This is a modal';
   const onClose = jest.fn();
 
-  const { queryByRole } = render(
+  const { queryByRole, rerender } = render(
+    <Modal isOpen={false} onClose={onClose}>
+      {text}
+    </Modal>,
+  );
+
+  rerender(
     <Modal isOpen={true} onClose={onClose}>
       {text}
     </Modal>,
@@ -112,7 +144,13 @@ test('do not trigger onClose when clicking outside the modal and closeOnClickOut
 test('do not trigger onClose when clicking inside the modal', () => {
   const onClose = jest.fn();
 
-  const { queryByTestId } = render(
+  const { queryByTestId, rerender } = render(
+    <Modal isOpen={false} onClose={onClose}>
+      <p data-testid="inside-modal">Content</p>
+    </Modal>,
+  );
+
+  rerender(
     <Modal isOpen={true} onClose={onClose}>
       <p data-testid="inside-modal">Content</p>
     </Modal>,
@@ -129,7 +167,13 @@ test('render close button on modal variation', () => {
   const text = 'This is a modal';
   const onClose = jest.fn();
 
-  const { queryByTitle } = render(
+  const { queryByTitle, rerender } = render(
+    <Modal isOpen={false} onClose={onClose} variant="modal">
+      {text}
+    </Modal>,
+  );
+
+  rerender(
     <Modal isOpen={true} onClose={onClose} variant="modal">
       {text}
     </Modal>,

diff --git a/packages/big-design/src/components/Tooltip/Tooltip.tsx b/packages/big-design/src/components/Tooltip/Tooltip.tsx
@@ -22,14 +22,17 @@ export class Tooltip extends React.PureComponent<TooltipProps, State> {
     visible: false,
   };
 
-  private tooltipContainer = document.createElement('div');
+  private tooltipContainer?: HTMLDivElement;
 
   componentDidMount() {
+    this.tooltipContainer = document.createElement('div');
     document.body.appendChild(this.tooltipContainer);
   }
 
   componentWillUnmount() {
-    document.body.removeChild(this.tooltipContainer);
+    if (this.tooltipContainer) {
+      document.body.removeChild(this.tooltipContainer);
+    }
   }
 
   render() {
@@ -51,18 +54,20 @@ export class Tooltip extends React.PureComponent<TooltipProps, State> {
             </StyledTooltipTrigger>
           )}
         </Reference>
-        {createPortal(
-          <Popper placement={this.props.placement} modifiers={{ offset: { offset: '0, 8' } }}>
-            {({ placement, ref, style }) =>
-              this.state.visible && (
-                <StyledTooltip ref={ref} style={style} data-placement={placement}>
-                  {content}
-                </StyledTooltip>
-              )
-            }
-          </Popper>,
-          this.tooltipContainer,
-        )}
+        {this.tooltipContainer
+          ? createPortal(
+              <Popper placement={this.props.placement} modifiers={{ offset: { offset: '0, 8' } }}>
+                {({ placement, ref, style }) =>
+                  this.state.visible && (
+                    <StyledTooltip ref={ref} style={style} data-placement={placement}>
+                      {content}
+                    </StyledTooltip>
+                  )
+                }
+              </Popper>,
+              this.tooltipContainer,
+            )
+          : null}
       </Manager>
     );
   }

diff --git a/packages/configs/rollup/rollup.config.js b/packages/configs/rollup/rollup.config.js
@@ -9,6 +9,7 @@ const sourceMaps = require('rollup-plugin-sourcemaps');
 const typescript = require('rollup-plugin-typescript2');
 
 const nodeEnv = process.env.NODE_ENV || 'production';
+const isDev = nodeEnv === 'dev';
 
 function generateConfig(pkg) {
   const externals = [
@@ -19,9 +20,9 @@ function generateConfig(pkg) {
   return {
     input: 'src/index.ts',
     output: [
-      { file: pkg.main, format: 'cjs', sourcemap: true },
+      !isDev && { file: pkg.main, format: 'cjs', sourcemap: true },
       { file: pkg.module, format: 'es', sourcemap: true }
-    ],
+    ].filter(Boolean),
     external: makeExternalPredicate(externals),
     watch: {
       include: 'src/**'

diff --git a/packages/docs/.babelrc b/packages/docs/.babelrc
@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [["styled-components", { "ssr": true }]]
+}
diff --git a/packages/storybook/LICENSE.md → packages/docs/LICENSE.md b/packages/storybook/LICENSE.md → packages/docs/LICENSE.md
diff --git a/...torybook/stories/Badge/BadgePropTable.tsx → packages/docs/PropTables/BadgePropTable.tsx b/...torybook/stories/Badge/BadgePropTable.tsx → packages/docs/PropTables/BadgePropTable.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { PropTable } from '../../components';
+import { PropTable } from '../components';
 
 export const BadgePropTable: React.FC = () => (
   <PropTable>

diff --git a/...es/storybook/stories/Box/BoxPropTable.tsx → packages/docs/PropTables/BoxPropTable.tsx b/...es/storybook/stories/Box/BoxPropTable.tsx → packages/docs/PropTables/BoxPropTable.tsx
@@ -1,13 +1,12 @@
 import { Link } from '@bigcommerce/big-design';
-import { linkTo } from '@storybook/addon-links';
 import React from 'react';
 
-import { PropTable } from '../../components';
+import { PropTable } from '../components';
 
 export const BoxPropTable: React.FC = () => (
   <PropTable>
-    <PropTable.Prop name="backgroundColor" types={<Link onClick={linkTo('Colors') as any}>Color</Link>}>
-      Sets the background color given a color name from our <Link onClick={linkTo('Colors') as any}>palette</Link>.
+    <PropTable.Prop name="backgroundColor" types={<Link href="/colors">Color</Link>}>
+      Sets the background color given a color name from our <Link href="/colors">palette</Link>.
     </PropTable.Prop>
     <PropTable.Prop name="elevation" types={['floating', 'raised']}>
       Determines the type of elevation to be applied.

diff --git a/...rybook/stories/Button/ButtonPropTable.tsx → packages/docs/PropTables/ButtonPropTable.tsx b/...rybook/stories/Button/ButtonPropTable.tsx → packages/docs/PropTables/ButtonPropTable.tsx
@@ -1,23 +1,22 @@
 import { Link } from '@bigcommerce/big-design';
-import { linkTo } from '@storybook/addon-links';
 import React from 'react';
 
-import { PropTable } from '../../components';
+import { PropTable } from '../components';
 
 export const ButtonPropTable: React.FC = () => {
   return (
     <PropTable>
       <PropTable.Prop name="actionType" types={['normal', 'destructive']} defaults="normal">
         Indicates whether your button's action is of normal or destructive nature.
       </PropTable.Prop>
-      <PropTable.Prop name="iconLeft" types={<Link onClick={linkTo('Icons') as any}>Icon</Link>} defaults="">
-        Pass in an <Link onClick={linkTo('Icons') as any}>Icon</Link> component to display to the left of the text.
+      <PropTable.Prop name="iconLeft" types={<Link href="/icons">Icon</Link>} defaults="">
+        Pass in an <Link href="/icons">Icon</Link> component to display to the left of the text.
       </PropTable.Prop>
-      <PropTable.Prop name="iconOnly" types={<Link onClick={linkTo('Icons') as any}>Icon</Link>} defaults="">
-        Pass in an <Link onClick={linkTo('Icons') as any}>Icon</Link> component to replace content with an icon.
+      <PropTable.Prop name="iconOnly" types={<Link href="/icons">Icon</Link>} defaults="">
+        Pass in an <Link href="/icons">Icon</Link> component to replace content with an icon.
       </PropTable.Prop>
-      <PropTable.Prop name="iconRight" types={<Link onClick={linkTo('Icons') as any}>Icon</Link>} defaults="">
-        Pass in an <Link onClick={linkTo('Icons') as any}>Icon</Link> component to display to the right of the text.
+      <PropTable.Prop name="iconRight" types={<Link href="/icons">Icon</Link>} defaults="">
+        Pass in an <Link href="/icons">Icon</Link> component to display to the right of the text.
       </PropTable.Prop>
       <PropTable.Prop name="isLoading" types="boolean" defaults="false">
         Used to determine if component is in a loading state.