🚀 Introduce v2

.eslintignore

@@ -1 +1 @@
-**/dist
+**/**/dist/**

.github/FUNDING.yml

@@ -0,0 +1,5 @@
+# These are supported funding model platforms
+
+github: [pedronauck]
+patreon: pedronauck
+open_collective: pedronauck

.vscode/settings.json

@@ -1,9 +1,10 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
+  "javascript.format.enable": false,
   "eslint.autoFixOnSave": true,
   "eslint.validate": [
-    "javascript",
-    "javascriptreact",
+    { "language": "javascript", "autoFix": true },
+    { "language": "javascriptreact", "autoFix": true },
     { "language": "typescript", "autoFix": true },
     { "language": "typescriptreact", "autoFix": true }
   ]

MIGRATION_GUIDE.md

@@ -1,166 +1,83 @@
 # Migration Guide
+The [v2 release](https://github.com/pedronauck/docz/pull/950) is our biggest release in terms of changes on our core scripts. Our bundler system was entirely modified in order to use Gatsby as default bundler and you will need to update your code if you’re coming from a previous version. It’s not a big deal, but you need to follow this guide in order to get Docz running properly on your project after the upgrade.
 
-The [v1 release](https://github.com/pedronauck/docz/pull/656) was one of our big releases so far and a lot of breaking changes were introduced. A few APIs were changed and you will need to update your code if you're coming from a previous version. It's not a big deal, but you need to follow this guide in order to get Docz running properly on your project after the upgrade.
+## Gatsby as default bundler
+The biggest change in the new v2 is that now our core is entirely build using Gatsby behind the scenes. This is a huge win for Docz, since now we can focus on build new features instead of handling with a lot of bundlers issues (our biggest bottleneck) and enjoy all Gatsby ecosystem.
 
-## Update React to use Hooks
+So, in order to refactoring our core, we need to change a lot of things and remove others that no longer make sense. The most expressive changes here is about the configuration for `doczrc.js` and the plugin system.
 
-We made a [huge improvement](https://github.com/pedronauck/docz/commit/f57f987df0536b3b65a26f1b0e8a8f8f00d63800) on docz using the new react hooks. So, the biggest requirement is that you need `react` and `react-dom` with the version `>= 16.8.0`, because that's the version that has hooks released and stable. So, just update your React version, it's fully retro compatible.
+### List of removed properties from `doczrc.js`
+* **`websocketHost`** ▶︎ _no longer need_
+* **`websocketPort`** ︎︎︎▶︎ _no longer need_
+* **`wrapper`** ▶︎ _removed_
+* **`theme`** ▶︎ _removed_
+* **`indexHtml`** ▶︎ _removed_
+* **`codeSandbox`** ▶︎ _removed_
+* **`onCreateWebpackChain`** ▶︎ _removed_
+* **`modifyBundlerConfig`** ▶︎ use Gatsby [`onCreateWebpackConfig`](https://www.gatsbyjs.org/docs/node-apis/#onCreateWebpackConfig) hook
+* **`modifyBabelRc`** ▶︎ use Gatsby [`onCreateBabelConfig`](https://www.gatsbyjs.org/docs/node-apis/#onCreateBabelConfig) hook
 
-## Spectrum instead of Discord
+## New hooks for plugins
+The `createPlugin` method also changed in order to fit with Gatsby now.
 
-Another thing that has changed is our community is now on Spectrum instead of Discord. You can check the [Docz community](https://spectrum.chat/docz) and ask us whatever you want!
+### List of removed/changed properties from `createPlugin()`
 
-## No more render props
+* **`modifyBundlerConfig`** ▶︎ `onCreateWebpackConfig`
+* **`modifyBabelRc`** ▶︎ `onCreateBabelConfig`
+* **`onCreateApp`** ▶︎ `onCreateDevServer`
+* **`onPreCreateApp`** ▶︎ _removed_
+* **`onServerListening`** ▶︎ _removed_
+* **`onPreRender`** ▶︎ _removed_
+* **`onPostRender`** ▶︎ _removed_
 
-In the older version of docz, we're using render props as data components in order to get data from the docz database and use it on themes. Now, all this render props became hooks. This is a huge improvement, since it's much easier to use them.
+> All methods that changed now are using the same API of Gatsby hooks.
+> You can have more details about then [here](https://www.gatsbyjs.org/docs/node-apis).
 
-#### `<Docs>` now is `useDocs()`
+## `docz-theme-default` removed
+The main reason that made us change our core to use Gatsby is that now it have a feature called themes. In the last major version we launched our own `gatsby-theme-docz` and this was impressive since we could use Docz inside a Gatsby project and brings a lot of new possibilites when creating a documentation.
 
-With this hook you can get all mdx entries used on docz.
+So, indeed we were using Gatsby theme at all, but in the wrong way. One of the best benefits of Gatsby theme are the feature called Component Shadowing, that’s the ability to replace theme files just by creating your own file following a file naming convention. This is awesome and is something that people always ask for me, like: “I want just to change the head in the Docz theme”.
 
-```jsx
-// old
-<Docs>
-  {({ docs, menus }) => /* do something */}
-</Docs>
+In order to get Docz running with component shadowing we removed `docz-theme-default` and now you don’t need to install it anymore. You can just add `docz` and your project is done.
 
-// new
-const docs = useDocs()
-```
+Check [here](h) readme for more information.
 
-#### `<ThemeConfig>` now is `useConfig()`
+### Code highlight with PrismJS
+In the last version of Docz we’re using Codemirror to highlight code inside `<Playground>` and code blocks. Now we are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) together with Theme UI.
 
-Get information about the configuration of your project.
+Check [here](h) for more information.
 
-```jsx
-// old
-<ThemeConfig>
-  {(config) => /* do something */}
-</ThemeConfig>
+### New `themeConfig` properties
+Another great thing launched in the newest version is the integration with the [Theme UI](https://theme-ui.com). Theme UI it’s a library for build consistent, themeable React apps based on constraint-based design principles. So, in order to integration it with our new theme, a lot of changes are made inside the `themeConfig` object.
 
-// new
-const config = useConfig()
-```
+Check [here](h) for more information.
 
-#### New `useMenus()`
+## `theme` property removed
+The property used to define your Docz theme inside the `doczrc.js` was removed. But you can still create and use your own theme from scratch if you want.
 
-If you want just the menu information you can use this hook.
+If you want to use your own theme, just create a file called `src/gatsby-theme-docz/index.js` in order to use component shadowing and replace it with your new theme.
 
 ```js
-const menus = useMenus({ query: 'some search' })
-```
-
-#### New `useComponents()`
-
-Get all components passed to `<ComponentsProvider>`
-
-```jsx
-const components = useComponents()
-```
-
-## Order deprecated removed
-
-Since [v0.12.4](https://github.com/pedronauck/docz/releases/tag/v0.12.4) we launched `menu` property to create and sort the menu, and the `ordering` frontmatter field was deprecated. So, now we're removing this property. If you wanna see more information about the `menu` order property, you can take a look at the `Ordering` session on our website.
-
-## Use Props instead of PropsTable
-
-Another change that we've made in this version is that now we have a `<Props>` component instead of `<PropsTable>`. So, the `<PropsTable>` component doesn't exist anymore and the new one don't have more a table format, instead of that, it's just a list with the props and their values. So, it became more simple and flexible to be stylized.
-
-#### The old way
-
-```jsx
-import { PropsTable } from 'docz'
-import MyComponent from './my-components'
-
-<PropsTable of={MyComponent} />
-```
-
-### The new way
-
-```jsx
-import { Props } from 'docz'
-import MyComponent from './my-components'
+// src/gatsby-theme-docz/index.js
+import React from 'react'
+import Theme from './my-custom-theme'
 
-<Props of={MyComponent} />
+export default (props) => <Theme {...props} />
 ```
 
-## Remove hash router support
-
-In the newest version of Docz, because of some performance and bundle issues, we are now using `@reach/router` instead of `react-router`. As `@reach/router` doesn't have official support for hash routing yet, and as there are lots of good free services to host static sites besides Github pages ([Surge](https://surge.sh/), for instance, is free and has full support for browser history navigation) we have decided to deprecate hash router support.
-
-## Creating and using Docz themes
-
-The process to create themes for docz is very similar to the previous one; there are no big changes here, but you need to know a few changes that we made.
-
-- The first one, is you don't have `DocPreview` anymore. Instead, we introduced the `ComponentsProvider` component.
-- The second one is that the `render` field previously passed in the components mapper; now it is called `playground`.
-- And the last one, is now you need to pass a children for your theme.
+Check [here](https://www.docz.site/docs/creating-themes) for more information about how to create themes.
 
-#### The old way
+## `wrapper` property removed
+The same thing happened here for the oldest `wrapper` property. Now you can wrap your entire application by just creating a file called `src/gatsby-theme-docz/wrapper.js`
 
-```jsx
+```js
+// src/gatsby-theme-docz/index.js
 import React from 'react'
-import { theme, DocPreview } from 'docz'
-import * as components from './my-components'
-
-const Theme = () => (
-  <DocPreview
-    components={{
-      page: components.Page,
-      notFound: components.NotFound,
-      render: components.Render,
-      props: components.Props,
-      h1: components.H1,
-      h2: components.H2,
-      h3: components.H3,
-      h4: components.H4,
-      h5: components.H5,
-      h6: components.H6,
-      ul: components.List,
-      loading: components.Loading,
-      table: components.Table,
-      pre: components.Pre,
-      inlineCode: components.Code,
-    }}
-  />
-)
-
-const themeConfig = {
-  /* your theme config */
-}
-export default theme(themeConfig)(Theme)
-```
 
-#### The new way
-
-```jsx
-import React from 'react'
-import { theme, ComponentsProvider } from 'docz'
-import * as components from './my-components'
-
-const map = {
-  page: components.Page,
-  notFound: components.NotFound,
-  playground: components.Playground,
-  h1: components.H1,
-  h2: components.H2,
-  h3: components.H3,
-  h4: components.H4,
-  h5: components.H5,
-  h6: components.H6,
-  ul: components.List,
-  loading: components.Loading,
-  table: components.Table,
-  pre: components.Pre,
-  inlineCode: components.Code,
-}
-
-const Theme = ({ children }) => (
-  <ComponentsProvider components={map}>{children}</ComponentsProvider>
+export default ({ children }) => (
+  <div>
+    <h1>My custom wrapper</h1>
+    {children}
+  </div>
 )
-
-const themeConfig = {
-  /* your theme config */
-}
-export default theme(themeConfig)(Theme)
 ```

README.md

@@ -28,10 +28,11 @@
 
 ## ✅️   Migration Guide
 
-This documentation is for Docz [v1](https://github.com/pedronauck/docz/pull/656). Follow our [migration guide](/MIGRATION_GUIDE.md) if you haven't upgraded your project yet.
+This documentation is for Docz [v2](https://github.com/pedronauck/docz/pull/950). Follow our [migration guide](/MIGRATION_GUIDE.md) if you haven't upgraded your project yet.
 
 ## 🎩   Features
 
+- 🔩 **Powered by Gatsby.** Bundling and ecossystem powered by [Gatsby](https://gatsbyjs.org).
 - 🧘 **Zero config and easy.** Don't worry about complex configurations steps.
 - ⚡️ **Blazing Fast.** Full hot reload support with webpack 4 and automatic code splitting.
 - 💅 **Easy to customize.** Create and use real customizable themes.
@@ -50,16 +51,14 @@ Documenting code is one of the most important and time-heavy processes when you'
 ## 🎛   Plugins
 
 - **[gatsby-theme-docz](https://github.com/pedronauck/docz/tree/master/core/gatsby-theme-docz)** - Use Docz as a theme for Gatsby.
-- **[css](https://github.com/pedronauck/docz-plugin-css)** - Parse CSS files inside your documents.
 - **[netlify](https://github.com/nicholasess/docz-plugin-netlify)** - Deploy your Docz site to [Netlify](http://netlify.com/).
-- **[postcss](https://github.com/andreasonny83/docz-plugin-postcss)** - Use Docz with PostCSS.
 - **[svg sprite loader](https://github.com/trustedhousesitters/docz-plugin-svg-sprite-loader)** - Docz plugin for SVG sprite loader.
 - **[snapshots](https://github.com/JosephConradBlack/docz-plugin-snapshots)** - A plugin for Docz that creates jest snapshots for all documented component usages.
 
 ## 🗃   Examples
 
 - **[basic](https://github.com/pedronauck/docz/tree/master/examples/basic)** - Barebones example.
-- **[gatsby](https://github.com/pedronauck/docz/tree/master/examples/gatsby)** - Example using Docz as a theme for Gatsby.
+- **[gatsby](https://github.com/pedronauck/docz/tree/master/examples/gatsby)** - Example using Docz in a Gastby project.
 - **[react native](https://github.com/pedronauck/docz/tree/master/examples/react-native)** - Using Docz in a React Native project.
 - **[styled-components](https://github.com/pedronauck/docz/tree/master/examples/styled-components)** - Using Docz with `styled-components`.
 - **[with typescript](https://github.com/pedronauck/docz/tree/master/examples/typescript)** - Using Docz with Typescript.
@@ -88,19 +87,21 @@ Since the release of v1 you need `react` and `react-dom` `v16.8.0` or later inst
 
 Getting started with **Docz** is really quick and easy.
 
-Firstly, install `docz` and a theme of your choosing using your favourite package manager:
+Firstly, install `docz` using your favourite package manager:
 
 ```bash
-$ yarn add --dev docz docz-theme-default
+$ yarn add --dev docz react react-dom
 
 # or
 
-$ npm install --save-dev docz docz-theme-default
+$ npm install --save-dev docz react react-dom
 ```
 
+**Note**: `react` and `react-dom` will not be installed automatically. You'll have to install them yourself.
+
 Next, add some `.mdx` files anywhere inside your project:
 
-```markdown
+```mdx
 ---
 name: Button
 ---
@@ -128,7 +129,7 @@ $ yarn docz dev
 
 That's it! Now you have some real badass documentation 👊
 
-![](https://cdn-std.dprcdn.net/files/acc_649651/7RRXv)
+![](https://cdn-std.dprcdn.net/files/acc_649651/S2YCID)
 
 Any doubt? Check [our docs](http://docz.site) to see more about **Docz**!
 

core/docz-core/.eslintignore

@@ -0,0 +1 @@
+dist

core/docz-core/.eslintrc.js

@@ -1,3 +1,3 @@
 module.exports = {
-  extends: ['eslint-config-docz'],
+  extends: 'docz-ts',
 }