chore: Replace Docz with Storybook, #135

.babelrc

@@ -3,7 +3,6 @@
 	"plugins": [
 		"@babel/transform-react-jsx",
 		"@babel/proposal-object-rest-spread",
-		"@babel/proposal-class-properties",
 		"@babel/proposal-optional-chaining",
 		"@babel/proposal-nullish-coalescing-operator",
 		"babel-plugin-styled-components"

.storybook/GlobalStyles.js

@@ -0,0 +1,37 @@
+import {createGlobalStyle} from 'styled-components';
+
+const GlobalStyles = createGlobalStyle`
+	* {
+		box-sizing: border-box;
+	}
+
+	*:focus:not(:focus-visible) {
+		outline: none;
+	}
+
+	*:focus:not(.focus-visible) {
+		outline: none;
+	}
+
+	html, body, div, span, h1, h2, h3, h4, h5, p, blockquote, pre, a, dl, dt, dd, ol, ul, li, fieldset, form, label, article, aside, header, footer, menu, nav, section, audio, video, figure, figcaption {
+		margin: 0;
+		padding: 0;
+		border: 0;
+		vertical-align: baseline;
+	}
+
+	input {
+		margin: 0;
+		padding: 0;
+	}
+
+	ul, ol {
+		list-style: none;
+	}
+
+	body {
+		font-family: 'Open Sans', sans-serif;
+	}
+`;
+
+export default GlobalStyles;

.storybook/main.js

@@ -0,0 +1,16 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        transcludeMarkdown: true,
+      },
+    },
+  ],
+};

.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons';
+
+addons.setConfig({
+	panelPosition: 'right',
+	initialActive: 'sidebar',
+});

.storybook/preview.js

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import 'focus-visible';
+
+import ThemeSection from '../src/ThemeSection';
+import theme from '../src/theme';
+
+import GlobalStyles from './GlobalStyles';
+
+export const decorators = [
+  (Story) => (
+    <ThemeSection name="page" baseTheme={theme}>
+      <GlobalStyles />
+      {Story()}
+    </ThemeSection>
+  ),
+];
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  options: {
+    storySort: {
+      order: ['base5-ui', 'Components'],
+    },
+  },
+  backgrounds: {
+    disable: true,
+    grid: {
+      disable: true
+    }
+  }
+}

README.md

@@ -2,6 +2,91 @@
 
 [![Greenkeeper badge](https://badges.greenkeeper.io/5app/base5-ui.svg)](https://greenkeeper.io/)
 
-Welcome to base5-UI, 5app's library of reusable React components. base5-UI's focus lies on providing easy-to-use base & layout components for building highly themeable pages.
+Welcome to base5-ui, 5app's library of reusable React components. base5-ui's focus lies on providing easy-to-use base & layout components for building highly themeable pages.
 
-[View the full Readme](https://5app.github.io/base5-ui)
+## Installation
+
+base5-ui is built on styled-components, so if you're not using it already, install it along with base5-ui.
+
+```
+npm i base5-ui styled-components
+```
+
+## Running the component library locally
+
+base5-ui comes with its own documentation tool & development playground powered by [docz](https://www.docz.site/). To check it out locally, clone this repo to your local machine, install its dependencies (`npm i`), and finally run the following command:
+
+```
+npm run docz:dev
+```
+
+The documentation environment should then open in your browser at http://localhost:3000, letting you browse all available components to inspect their API and see usage examples.
+
+## Using base5-ui
+
+To use the components of base5-ui, your app needs to be wrapped in a `<ThemeSection>` that provides each component with global and local theme information.
+
+A basic app setup using the default base5-ui theme looks like this:
+
+```jsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import ThemeSection from 'base5-ui/ThemeSection';
+import Button from 'base5-ui/Button';
+
+import theme from 'base5-ui/theme';
+
+function App() {
+	return (
+		<ThemeSection name="page" baseTheme={theme}>
+			<Button>Hello world!</Button>
+		</ThemeSection>
+	);
+}
+
+const rootElement = document.getElementById('root');
+
+ReactDOM.render(<App />, rootElement);
+```
+
+## Updating the repo
+
+Want to add/edit icons? Please follow the steps outlined in the [icons README](/src/icons/README.mdx) before continuing here.
+
+To publish changes to the components in this repo, please follow these steps. The docs will automatically be updated after the changes were published.
+
+-   Commit your changes using semantic versioning prefixes:
+    1. `fix:` or `refactor:` for a patch release (x.x.+1)
+    2. `feat:` for a minor release (x.+1.0)
+    3. Add `BREAKING CHANGE:` to the beginning of the commit message's body for a major release: +1.0.0)
+    4. Use `chore:` or `style:` for housekeeping tasks that don't require a release
+-   Submit a PR or push to the `master` branch
+
+## Updating just the docs
+
+If you did not make any changes to components and only want to update the docs in our online [component library](https://5app.github.io/base5-ui), just submit a PR or push to the `master` branch directly using a `docs:` prefix for the commit message.
+
+## Tests
+
+Execute `npm test` or `npm run test` to run the tests
+
+Execute `npm run test:cover` to run the tests with coverage analysis.
+
+-   A summary report such as the following will be available in the terminal:
+
+```
+=============================== Coverage summary ===============================
+Statements   : 76.38% ( 524/686 )
+Branches     : 53.81% ( 120/223 )
+Functions    : 87.06% ( 148/170 )
+Lines        : 77.04% ( 520/675 )
+================================================================================
+Test Suites: 12 passed, 12 total
+Tests:       3 skipped, 32 passed, 35 total
+Snapshots:   0 total
+Time:        3.818s
+```
+
+-   A detailed html code analysis report will be available at `./test/coverage/index.html`
+    The detailed report provides a good insight on what to test and how well the component is tested.