feat: Adding docz example

EmaSuriano · Jul 17, 2018 · f047130 · f047130
1 parent 280ad29
commit f047130
Show file tree

Hide file tree

Showing 15 changed files with 14,869 additions and 21,377 deletions.
diff --git a/.docz/app/imports.js b/.docz/app/imports.js
@@ -0,0 +1,4 @@
+export const imports = {
+  'doc/index.mdx': () =>
+    import(/* webpackPrefetch: true, webpackChunkName: "doc-index" */ 'doc/index.mdx'),
+}
diff --git a/.docz/app/index.html b/.docz/app/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="description" content="My awesome app using Docz">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>React Hotkey Tooltip</title>
+  </head>
+  <body>
+    <div id="root" />
+  </body>
+</html>
diff --git a/.docz/app/index.jsx b/.docz/app/index.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+import { imports } from './imports'
+import Root from './root'
+
+const _onPreRenders = []
+const _onPostRenders = []
+
+const onPreRender = () => _onPreRenders.forEach(f => f && f())
+const onPostRender = () => _onPostRenders.forEach(f => f && f())
+
+const root = document.querySelector('#root')
+const render = (Component = Root) => {
+  onPreRender()
+  ReactDOM.render(<Component imports={imports} />, root, onPostRender)
+}
+
+if (module.hot) {
+  module.hot.accept('./imports', () => render(Root))
+}
+
+render(Root)
diff --git a/.docz/app/root.jsx b/.docz/app/root.jsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import { hot } from 'react-hot-loader'
+import Theme from 'docz-theme-default'
+
+const socket = new WebSocket(`ws://127.0.0.1:8089`)
+
+class Root extends React.Component {
+  state = {
+    config: {},
+    entries: {},
+  }
+
+  async componentDidMount() {
+    socket.onmessage = ev => {
+      const message = JSON.parse(ev.data)
+
+      if (message.type === 'docz.entries') {
+        this.setState({ entries: message.data })
+      }
+
+      if (message.type === 'docz.config') {
+        this.setState({ config: message.data })
+      }
+    }
+  }
+
+  render() {
+    const { imports } = this.props
+
+    return <Theme {...this.state} imports={imports} hashRouter={false} />
+  }
+}
+
+export default hot(module)(Root)
diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@
 
 A global Hotkey provider with built in tooltip for React. Demo at [Demo Page](https://emasuriano.github.io/react-hotkey-tooltip/).
 
-![Example](doc/Demo.gif)
+![Example](asset/Demo.gif)
 
 ## Why you should use it?
 

diff --git a/doc/Demo.gif → asset/Demo.gif b/doc/Demo.gif → asset/Demo.gif
diff --git a/doc/Button.js b/doc/Button.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Button = ({ onClick }) => {
+  return <button onClick={onClick}>This</button>;
+};
+
+Button.propTypes = {
+  onClick: PropTypes.func.isRequired,
+};
+
+export default Button;
diff --git a/doc/index.mdx b/doc/index.mdx
@@ -0,0 +1,14 @@
+---
+name: Introduction
+route: /
+order: 1
+fullpage: false
+---
+
+import Button from './Button'
+
+
+# Hello world
+
+<Button onClick={console.log} />
+
diff --git a/doczrc.js b/doczrc.js
@@ -0,0 +1,57 @@
+import { css } from 'docz-plugin-css';
+
+export default {
+  themeConfig: {
+    /**
+     * Mode
+     */
+    mode: 'light', // you can use: 'dark' or 'light'
+    /**
+     * Logo
+     */
+    // logo: {
+    //   src: null,
+    //   width: null,
+    // },
+    /**
+     * Colors (depends on select mode)
+     */
+    // colors: {
+    //   white: '#FFFFFF',
+    //   grayExtraLight: '#EEF1F5',
+    //   grayLight: '#CED4DE',
+    //   gray: '#7D899C',
+    //   grayDark: '#2D3747',
+    //   grayExtraDark: '#1D2330',
+    //   dark: '#13161F',
+    //   blue: '#0B5FFF',
+    //   skyBlue: '#1FB6FF',
+    //   /** properties bellow depends on mode select */
+    //   primary: colors.blue,
+    //   text: colors.dark,
+    //   link: colors.blue,
+    //   footerText: colors.grayDark,
+    //   sidebarBg: colors.grayExtraLight,
+    //   sidebarText: colors.dark,
+    //   background: colors.white,
+    //   border: colors.grayLight,
+    //   theadColor: colors.gray,
+    //   theadBg: colors.grayExtraLight,
+    //   tableColor: colors.dark,
+    //   tooltipBg: colors.dark,
+    //   tooltipColor: colors.grayExtraLight,
+    //   codeBg: colors.grayExtraLight,
+    //   codeColor: colors.gray,
+    //   preBg: colors.grayExtraLight,
+    // },
+  },
+  plugins: [
+    css({
+      preprocessor: 'postcss',
+      cssmodules: true,
+      loaderOpts: {
+        /* whatever your preprocessor loader accept */
+      },
+    }),
+  ],
+};