Merge pull request #136 from 5app/try-out-storybook

chore: Migrate from Docz to 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"

.eslintrc.js

@@ -4,7 +4,7 @@ module.exports = {
 		'5app',
 		'plugin:react/recommended',
 		'plugin:jsx-a11y/recommended',
-		'prettier'
+		'prettier',
 	],
 	parser: 'babel-eslint',
 	parserOptions: {

.gitignore

@@ -1,7 +1,7 @@
 dist
 node_modules
+storybook-static
 /test/coverage
 .DS_Store
 
-.docz/**
 yarn-error.log

.prettierignore

@@ -1,3 +1,7 @@
-/*
-!/src
-!/test/*.js
+package-lock.json
+CHANGELOG.md
+
+*.html
+*.scss
+*.css
+*.yml

.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,48 @@
+import React from 'react';
+import {Canvas} from '@storybook/addon-docs/blocks';
+
+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,
+		},
+	},
+	docs: {
+		components: {
+			Canvas: ({children, ...props}) => (
+				<ThemeSection name="page" baseTheme={theme}>
+					<Canvas {...props}>{children}</Canvas>
+				</ThemeSection>
+			),
+		},
+	},
+};

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 [Storybook](https://storybook.js.org/). 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 storybook
+```
+
+The documentation environment should then open in your browser at http://localhost:6006, letting you browse all available components to inspect their API, read documentation 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 online docs will automatically be updated after the changes were merged to the master branch.
+
+-   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.

jest.config.js

@@ -6,9 +6,15 @@ module.exports = {
 	collectCoverageFrom: [
 		'**/*.{js}',
 		'!**/docz/**',
+		'!**/src-icons/**',
 		'!**/node_modules/**',
 		'!**/test/**',
 	],
-	coveragePathIgnorePatterns: ['/node_modules/', '/docz/', '/test/'],
-	modulePathIgnorePatterns: ['/node_modules/', '/docz/'],
+	coveragePathIgnorePatterns: [
+		'/node_modules/',
+		'/.storybook/',
+		'/.src-icons/',
+		'/test/',
+	],
+	modulePathIgnorePatterns: ['/node_modules/', '/.storybook/'],
 };