Add storybook documentation

.storybook/main.js

@@ -1,11 +1,15 @@
 module.exports = {
-  stories: ['../src/**/*.story.tsx'],
+  stories: [
+    '../docs/**/*.story.@(tsx|mdx)',
+    '../src/**/*.story.@(tsx|mdx)',
+  ],
   addons: [
-    '@storybook/addon-knobs',
     'storybook-css-modules-preset',
+    '@storybook/addon-docs',
+    '@storybook/addon-essentials',
     '@storybook/addon-storysource'
   ],
-  webpackFinal: async (config, { configType }) => {
+  webpackFinal: async (config ) => {
     config.module.rules.push({
       type: 'javascript/auto',
       test: /\.mjs$/,

.storybook/manager.js

@@ -1,6 +1,6 @@
-import { themes } from '@storybook/theming/create';
 import { addons } from '@storybook/addons';
+import theme from './theme';
 
 addons.setConfig({
-  theme: themes.dark
+  theme
 });

.storybook/preview-head.html

@@ -1,3 +1,4 @@
+<title>REAFLOW</title>
 <style>
   body {
     font-family: 'Lato', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
@@ -28,4 +29,8 @@
 
     --color-layer-transparent: rgba(5, 6, 12, 0.9);
   }
+
+  .docblock-source {
+    background: #1b1a1a !important;
+  }
 </style>

.storybook/preview.js

@@ -1,3 +1,32 @@
+import theme from './theme';
+
+const order = [
+  'introduction-',
+  'installing-',
+  'getting-started-',
+  'basics-',
+  'docs-',
+  'demos-'
+];
+
 export const parameters = {
-  layout: 'centered'
+  layout: 'centered',
+  docs: {
+    theme
+  },
+  actions: { argTypesRegex: '^on.*' },
+  options: {
+    storySort: (a, b) => {
+      const aName = a[0];
+      const bName = b[0];
+
+      if (aName.includes('docs-') || bName.includes('docs-')) {
+        const aIdx = order.findIndex(i => aName.indexOf(i) > -1);
+        const bIdx = order.findIndex(i => bName.indexOf(i) > -1);
+        return aIdx - bIdx;
+      }
+
+      return aName < bName ? -1 : 1;
+    }
+  },
 };

.storybook/theme.js

@@ -0,0 +1,7 @@
+import { create } from '@storybook/theming/create';
+
+export default create({
+  base: 'dark',
+  brandTitle: 'REALAYERS',
+  brandUrl: 'https://github.com/reaviz/realayers',
+});

docs/Components.story.mdx

@@ -0,0 +1,132 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Docs/Components" />
+
+# Components
+
+
+### Tooltip
+```tsx
+import React, { FC } from 'react';
+import { Tooltip } from 'realayers';
+
+const MyComponent: FC = () => (
+  <Tooltip content="Hi there">Hover me</Tooltip>
+);
+```
+
+### Popover
+```tsx
+import React, { FC } from 'react';
+import { Popover } from 'realayers';
+
+const MyComponent: FC = () => (
+  <Popover
+    content={
+      <div style={{ textAlign: 'center'}}>
+        <h1>WHATS UP????!</h1>
+        <button type="button">Click me</button>
+      </div>
+    }
+  >
+    Click me
+  </Popover>
+);
+```
+
+### Dialog
+```tsx
+import React, { FC } from 'react';
+import { useDialog } from 'realayers';
+
+export const Simple = () => {
+  const { toggleOpen, Dialog } = useDialog();
+
+  return (
+    <div>
+      <button onClick={toggleOpen}>Open</button>
+      <Dialog header="Whats up">
+        Hello
+      </Dialog>
+    </div>
+  );
+};
+```
+
+### Drawer
+```tsx
+import React, { FC } from 'react';
+import { useDrawer } from 'realayers';
+
+export const Simple = () => {
+  const { toggleOpen, Drawer } = useDrawer();
+
+  return (
+    <div>
+      <button onClick={toggleOpen}>Open</button>
+      <Drawer>
+        Hello
+      </Drawer>
+    </div>
+  );
+};
+```
+
+### Menu
+```tsx
+import React, { FC } from 'react';
+import { useMenu } from 'realayers';
+
+export const Simple = () => {
+  const { toggleOpen, ref, Menu } = useMenu();
+
+  return (
+    <div>
+      <button ref={ref} onClick={toggleOpen}>Open</button>
+      <Menu>
+        Hello
+      </Menu>
+    </div>
+  );
+};
+```
+
+### ContextMenu
+```tsx
+import React, { FC } from 'react';
+import { ContextMenu } from 'realayers';
+
+export const Simple = () => (
+  <ContextMenu
+    content={
+      <div style={{ padding: 20 }}>
+        something cool here
+      </div>
+    }
+  >
+    <button>👋 right click me</button>
+  </ContextMenu>
+);
+```
+
+### Notifications
+```tsx
+import React, { FC } from 'react';
+import { Notifications, useNotification } from 'realayers';
+
+export const App = () => (
+  <Notifications>
+    <YourComponent />
+  </Notifications>
+);
+
+export const YourComponent = () => {
+  const { notify } = useNotification();
+
+  return (
+    <button onClick={() => notify('Something good happened!')}>
+      Notify
+    </button>
+  );
+};
+```

docs/Installing.story.mdx

@@ -0,0 +1,34 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Docs/Installing" />
+
+# Installing
+
+You can install REALAYERS with [NPM](https://www.npmjs.com/package/realayers) or Yarn.
+
+- NPM: `npm install realayers --save`
+- YARN: `yarn add realayers`
+
+## Compatibility
+
+REALAYERS is compatible with React v16+ and works with ReactDOM. React Native is not supported at this time.
+
+## Developing
+
+If you want to run the project locally, its really easy!
+
+The project uses Storybook for its demos and development
+environment. To run it locally:
+
+- Clone repo
+- `yarn install`
+- `yarn start`
+
+Once started the browser will open to the storybook url.
+From here you can tweak components and see them build
+and reload in real time.
+
+We use Rollup to build and package for distribution.
+You can run this by doing `yarn build` and it will
+create a `dist` folder with the type definitions, bundled
+javascript and css files.

docs/Introduction.story.mdx

@@ -0,0 +1,32 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Docs/Introduction" />
+
+<div style={{ margin: '0 auto', maxWidth: '600px', color: 'white', textAlign: 'center' }}>
+    <h1>☁ realayers</h1>
+    <br />
+    Layer Components for React: Dialogs, Drawers, Tooltips, Menus, Context Menus, Notifications and Popovers
+    <br /><br />
+    <a href="https://github.com/reaviz/realayers/workflows/build/">
+        <img src="https://github.com/reaviz/realayers/workflows/build/badge.svg?branch=master" />
+    </a>&nbsp;&nbsp;
+    <a href="https://npm.im/realayers">
+        <img src="https://img.shields.io/npm/v/realayers.svg" />
+    </a>&nbsp;&nbsp;
+    <a href="https://npm.im/realayers">
+        <img src="https://badgen.net/npm/dw/realayers" />
+    </a>&nbsp;&nbsp;
+    <a href="https://github.com/realayers/realayers/blob/master/LICENSE">
+        <img src="https://badgen.now.sh/badge/license/apache2" />
+    </a>
+    <br />
+    <a href="https://bundlephobia.com/result?p=realayers">
+        <img src="https://badgen.net/bundlephobia/minzip/realayers" />
+    </a>&nbsp;&nbsp;
+    <a href="https://discord.gg/tt8wGExq35">
+        <img src="https://img.shields.io/discord/773948315037073409?label=discord" />
+    </a>&nbsp;&nbsp;
+    <a href="https://opencollective.com/reaviz">
+        <img alt="Open Collective backers and sponsors" src="https://img.shields.io/opencollective/all/reaviz?label=backers"/>
+    </a>
+</div>

docs/Styling.story.mdx

@@ -0,0 +1,33 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Docs/Styling" />
+
+# Styling
+
+## 🎨 CSS Variables
+Add the following CSS variables to your application's body.
+
+```css
+body {
+  --color-popover: rgb(0, 0, 0, .8);
+  --color-on-popover: white;
+
+  --color-tooltip: rgb(0, 0, 0, .8);
+  --color-on-tooltip: white;
+
+  --color-dialog: #2c2c35;
+  --color-on-dialog: #fff;
+
+  --color-drawer: #2c2c35;
+  --color-on-drawer: #fff;
+
+  --color-notification: rgb(9, 9, 10, 0.9);
+  --color-on-notification: #fff;
+  --color-notification-border: transparent;
+  --color-notification-error: red;
+  --color-notification-warning: yellow;
+  --color-notification-success: green;
+
+  --color-layer-transparent: rgba(5, 6, 12, 0.9);
+}
+```

package.json

@@ -52,10 +52,12 @@
     "react-dom": ">=16"
   },
   "devDependencies": {
-    "@storybook/addon-knobs": "6.3.1",
-    "@storybook/addon-storysource": "^6.3.8",
-    "@storybook/addons": "^6.3.8",
-    "@storybook/react": "^6.3.8",
+    "@mdx-js/react": "1.6.22",
+    "@storybook/addon-docs": "^6.4.20",
+    "@storybook/addon-essentials": "^6.4.20",
+    "@storybook/addon-storysource": "^6.4.20",
+    "@storybook/addons": "^6.4.20",
+    "@storybook/react": "^6.4.20",
     "@types/classnames": "^2.3.1",
     "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.14",

src/ContextMenu/ContextMenu.story.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { ContextMenu } from './ContextMenu';
 
 export default {
-  title: 'Context Menu',
+  title: 'Demos/Context Menu',
   component: ContextMenu
 };