chore(docz): add css preprocessor examples and info

MIGRATION_GUIDE.md

@@ -81,3 +81,28 @@ export default ({ children }) => (
   </div>
 )
 ```
+
+## CSS preprocessors managed by gatsby
+
+CSS preprocessors and modules were handled by [`docz-plugin-css`](https://github.com/doczjs/docz-plugin-css) which hooked into the bundler config to add different loader support via webpack.
+
+With the change to gatsby preprocessors like `sass` can be handled by gatby via [Plugins](https://www.gatsbyjs.org/plugins/)
+
+These plugins are added by adding a `gatsby-config.js` in your project root or modifying an existing one. For example if you want to add support for `sass` you would do the following:
+
+1. Install [`node-sass`](https://github.com/sass/node-sass) and [`gatsby-plugin-sass`](https://www.gatsbyjs.org/packages/gatsby-plugin-sass/)
+```bash
+# npm
+npm install --save node-sass gatsby-plugin-sass
+
+# yarn
+yarn add node-sass gatsby-plugin-sass
+```
+
+2. Add the plugin to your `gatsby-config.js`
+```js
+//gatsby-config.js
+module.exports = {
+  plugins: ['gatsby-plugin-sass']
+}
+```

README.md

@@ -141,11 +141,10 @@ Documenting code is one of the most important and time-heavy processes when you'
 - **[with flow](https://github.com/pedronauck/docz/tree/master/examples/flow)** - Using Docz with Flow.
 - **[with images](https://github.com/pedronauck/docz/tree/master/examples/images)** - Using Docz with images in mdx and jsx.
 
-<!-- TODO: Add missing v2 examples-->
-<!-- - **[with sass](https://github.com/pedronauck/docz-plugin-css/tree/master/examples/css-sass)** - Using Docz parsing CSS with SASS.
-- **[with less](https://github.com/pedronauck/docz-plugin-css/tree/master/examples/css-less)** - Using Docz parsing CSS with LESS.
-- **[with postcss](https://github.com/pedronauck/docz-plugin-css/tree/master/examples/css-postcss)** - Using Docz parsing CSS with PostCSS.
-- **[with stylus](https://github.com/pedronauck/docz-plugin-css/tree/master/examples/css-stylus)** - Using Docz parsing CSS with Stylus. -->
+- **[with sass](https://github.com/pedronauck/docz/tree/master/examples/sass)** - Using Docz parsing CSS with SASS.
+- **[with less](https://github.com/pedronauck/docz/tree/master/examples/less)** - Using Docz parsing CSS with LESS.
+- **[with stylus](https://github.com/pedronauck/docz/tree/master/examples/css-stylus)** - Using Docz parsing CSS with Stylus.
+- **with css modules**: works out of the box with gatsby
 
 ## 👉🏻 &nbsp; More info on [our website](https://docz.site)
 

examples/less/.gitignore

@@ -0,0 +1,2 @@
+.docz
+node_modules

examples/less/README.md

@@ -0,0 +1,29 @@
+# less Docz example
+
+## Using `create-docz-app`
+
+```sh
+npx create-docz-app docz-app-less --example less
+# or
+yarn create docz-app docz-app-less --example less
+```
+
+## Download manually
+
+```sh
+curl https://codeload.github.com/doczjs/docz/tar.gz/master | tar -xz --strip=2 docz-master/examples/less
+mv less docz-less-example
+cd docz-less-example
+```
+
+## Setup
+
+```sh
+yarn # npm i
+```
+
+## Run
+
+```sh
+yarn dev # npm run dev
+```

examples/less/doczrc.js

@@ -0,0 +1,4 @@
+export default {
+  title: 'Docz Less',
+  menu: ['Getting Started', 'Components'],
+}

examples/less/gatsby-config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: ['gatsby-plugin-less'],
+}

examples/less/package.json

@@ -0,0 +1,24 @@
+{
+  "private": true,
+  "name": "docz-example-less",
+  "version": "2.0.0-rc.52",
+  "license": "MIT",
+  "files": [
+    "src/",
+    "doczrc.js",
+    "package.json"
+  ],
+  "scripts": {
+    "dev": "docz dev",
+    "build": "docz build"
+  },
+  "dependencies": {
+    "docz": "next",
+    "gatsby-plugin-less": "3.0.9",
+    "less": "3.10.3",
+    "prop-types": "^15.7.2",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "scheduler": "^0.15.0"
+  }
+}

examples/less/src/components/Alert.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import t from 'prop-types'
+
+import './Alert.less'
+
+export const Alert = ({ children, kind, ...rest }) => (
+  <div className="Alert" {...rest}>
+    {children}
+  </div>
+)
+
+Alert.propTypes = {
+  kind: t.oneOf(['info', 'positive', 'negative', 'warning']),
+}
+
+Alert.defaultProps = {
+  kind: 'info',
+}

examples/less/src/components/Alert.less

@@ -0,0 +1,5 @@
+.Alert {
+  padding: 1rem;
+  margin: 1rem;
+  border-radius: 0.25rem;
+}

examples/less/src/components/Alert.mdx

@@ -0,0 +1,28 @@
+---
+name: Alert
+menu: Components
+---
+
+import { Playground, Props } from 'docz'
+import { Alert } from './Alert'
+
+# Alert
+
+## Properties
+
+<Props of={Alert} />
+
+## Basic usage
+
+<Playground>
+  <Alert>Some message</Alert>
+</Playground>
+
+## Using different kinds
+
+<Playground>
+  <Alert kind="info">Some message</Alert>
+  <Alert kind="positive">Some message</Alert>
+  <Alert kind="negative">Some message</Alert>
+  <Alert kind="warning">Some message</Alert>
+</Playground>

examples/less/src/index.mdx

@@ -0,0 +1,20 @@
+---
+name: Getting Started
+route: /
+---
+
+# Getting Started
+
+Design systems enable teams to build better products faster by making design reusable—reusability makes scale possible. This is the heart and primary value of design systems. A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.
+
+Regardless of the technologies and tools behind them, a successful design system follows these guiding principles:
+
+- **It’s consistent**. The way components are built and managed follows a predictable pattern.
+- **It’s self-contained**. Your design system is treated as a standalone dependency.
+- **It’s reusable**. You’ve built components so they can be reused in many contexts.
+- **It’s accessible**. Applications built with your design system are usable by as many people as possible, no matter how they access the web.
+- **It’s robust**. No matter the product or platform to which your design system is applied, it should perform with grace and minimal bugs.
+
+## Consistency
+
+Your first, most important task when starting out is to define the rules of your system, document them, and ensure that everyone follows them. When you have clearly documented code standards and best practices in place, designers and developers from across your organization can easily use and, more importantly, contribute to your design system.

examples/sass/.gitignore

@@ -0,0 +1,2 @@
+.docz
+node_modules

examples/sass/README.md

@@ -0,0 +1,29 @@
+# Sass Docz example
+
+## Using `create-docz-app`
+
+```sh
+npx create-docz-app docz-app-sass --example sass
+# or
+yarn create docz-app docz-app-sass --example sass
+```
+
+## Download manually
+
+```sh
+curl https://codeload.github.com/doczjs/docz/tar.gz/master | tar -xz --strip=2 docz-master/examples/sass
+mv sass docz-sass-example
+cd docz-sass-example
+```
+
+## Setup
+
+```sh
+yarn # npm i
+```
+
+## Run
+
+```sh
+yarn dev # npm run dev
+```

examples/sass/doczrc.js

@@ -0,0 +1,4 @@
+export default {
+  title: 'Docz Sass',
+  menu: ['Getting Started', 'Components'],
+}

examples/sass/gatsby-config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: ['gatsby-plugin-sass'],
+}

examples/sass/package.json

@@ -0,0 +1,24 @@
+{
+  "private": true,
+  "name": "docz-example-sass",
+  "version": "2.0.0-rc.52",
+  "license": "MIT",
+  "files": [
+    "src/",
+    "doczrc.js",
+    "package.json"
+  ],
+  "scripts": {
+    "dev": "docz dev",
+    "build": "docz build"
+  },
+  "dependencies": {
+    "docz": "next",
+    "gatsby-plugin-sass": "2.1.17",
+    "node-sass": "4.12.0",
+    "prop-types": "^15.7.2",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "scheduler": "^0.15.0"
+  }
+}

examples/sass/src/components/Alert.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import t from 'prop-types'
+
+import './Alert.scss'
+
+export const Alert = ({ children, kind, ...rest }) => (
+  <div className="Alert" {...rest}>
+    {children}
+  </div>
+)
+
+Alert.propTypes = {
+  kind: t.oneOf(['info', 'positive', 'negative', 'warning']),
+}
+
+Alert.defaultProps = {
+  kind: 'info',
+}

examples/sass/src/components/Alert.mdx

@@ -0,0 +1,28 @@
+---
+name: Alert
+menu: Components
+---
+
+import { Playground, Props } from 'docz'
+import { Alert } from './Alert'
+
+# Alert
+
+## Properties
+
+<Props of={Alert} />
+
+## Basic usage
+
+<Playground>
+  <Alert>Some message</Alert>
+</Playground>
+
+## Using different kinds
+
+<Playground>
+  <Alert kind="info">Some message</Alert>
+  <Alert kind="positive">Some message</Alert>
+  <Alert kind="negative">Some message</Alert>
+  <Alert kind="warning">Some message</Alert>
+</Playground>

examples/sass/src/components/Alert.scss

@@ -0,0 +1,5 @@
+.Alert {
+  padding: 1rem;
+  margin: 1rem;
+  border-radius: 0.25rem;
+}

examples/sass/src/index.mdx

@@ -0,0 +1,20 @@
+---
+name: Getting Started
+route: /
+---
+
+# Getting Started
+
+Design systems enable teams to build better products faster by making design reusable—reusability makes scale possible. This is the heart and primary value of design systems. A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.
+
+Regardless of the technologies and tools behind them, a successful design system follows these guiding principles:
+
+- **It’s consistent**. The way components are built and managed follows a predictable pattern.
+- **It’s self-contained**. Your design system is treated as a standalone dependency.
+- **It’s reusable**. You’ve built components so they can be reused in many contexts.
+- **It’s accessible**. Applications built with your design system are usable by as many people as possible, no matter how they access the web.
+- **It’s robust**. No matter the product or platform to which your design system is applied, it should perform with grace and minimal bugs.
+
+## Consistency
+
+Your first, most important task when starting out is to define the rules of your system, document them, and ensure that everyone follows them. When you have clearly documented code standards and best practices in place, designers and developers from across your organization can easily use and, more importantly, contribute to your design system.

examples/stylus/.gitignore

@@ -0,0 +1,2 @@
+.docz
+node_modules

examples/stylus/README.md

@@ -0,0 +1,29 @@
+# stylus Docz example
+
+## Using `create-docz-app`
+
+```sh
+npx create-docz-app docz-app-stylus --example stylus
+# or
+yarn create docz-app docz-app-stylus --example stylus
+```
+
+## Download manually
+
+```sh
+curl https://codeload.github.com/doczjs/docz/tar.gz/master | tar -xz --strip=2 docz-master/examples/stylus
+mv stylus docz-stylus-example
+cd docz-stylus-example
+```
+
+## Setup
+
+```sh
+yarn # npm i
+```
+
+## Run
+
+```sh
+yarn dev # npm run dev
+```

examples/stylus/doczrc.js

@@ -0,0 +1,4 @@
+export default {
+  title: 'Docz Stylus',
+  menu: ['Getting Started', 'Components'],
+}

examples/stylus/gatsby-config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: ['gatsby-plugin-stylus'],
+}

examples/stylus/package.json

@@ -0,0 +1,23 @@
+{
+  "private": true,
+  "name": "docz-example-stylus",
+  "version": "2.0.0-rc.52",
+  "license": "MIT",
+  "files": [
+    "src/",
+    "doczrc.js",
+    "package.json"
+  ],
+  "scripts": {
+    "dev": "docz dev",
+    "build": "docz build"
+  },
+  "dependencies": {
+    "docz": "next",
+    "gatsby-plugin-stylus": "2.1.11",
+    "prop-types": "^15.7.2",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "scheduler": "^0.15.0"
+  }
+}