feat(docz-plugin-css): add initial version (#78)

* fix(docz-core): reduce from plugins arguments
* feat(docz-plugin-css): add initial version of plugin
* chore(docz-plugin-css): add some examples

examples/css-less/doczrc.js

@@ -0,0 +1,10 @@
+import { css } from 'docz-plugin-css'
+
+export default {
+  plugins: [
+    css({
+      preprocessor: 'less',
+      cssmodules: true,
+    }),
+  ],
+}

examples/css-less/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "docz-example-css-less",
+  "version": "0.2.9",
+  "license": "MIT",
+  "scripts": {
+    "dev": "docz dev",
+    "build": "docz build"
+  },
+  "dependencies": {
+    "classnames": "^2.2.6",
+    "docz": "^0.2.9",
+    "docz-core": "^0.2.9",
+    "prop-types": "^15.6.2",
+    "react": "^16.4.1",
+    "react-dom": "^16.4.1"
+  },
+  "devDependencies": {
+    "docz-plugin-css": "^0.2.9"
+  }
+}

examples/css-less/src/components/Alert.jsx

@@ -0,0 +1,23 @@
+import React, { Fragment } from 'react'
+import cx from 'classnames'
+import t from 'prop-types'
+
+import styles from './Alert.module.less'
+
+export const Alert = ({ children, kind }) => (
+  <div
+    className={cx(styles.alert, {
+      [styles[kind]]: true,
+    })}
+  >
+    {children}
+  </div>
+)
+
+Alert.propTypes = {
+  kind: t.oneOf(['info', 'positive', 'negative', 'warning']),
+}
+
+Alert.defaultProps = {
+  kind: 'info',
+}

examples/css-less/src/components/Alert.mdx

@@ -0,0 +1,41 @@
+---
+name: Alert
+menu: Components
+---
+
+import './index.less'
+import { Playground, PropsTable } from 'docz'
+import { Alert } from './Alert'
+
+# Alert
+
+## Properties
+
+<PropsTable 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>
+
+## Use with children as a function
+
+<Playground>
+  {() => {
+    const message = 'Hello world'
+
+    return (
+      <Alert>{message}</Alert>
+    )
+  }}
+</Playground>

examples/css-less/src/components/Alert.module.less

@@ -0,0 +1,22 @@
+.alert {
+  padding: 15px 20px;
+  background: white;
+  border-radius: 3px;
+  color: white;
+}
+
+.info {
+  background: #5352ED;
+}
+
+.positive {
+  background: #2ED573;
+}
+
+.negative {
+  background: #FF4757;
+}
+
+.warning {
+  background: #FFA502;
+}

examples/css-less/src/components/index.less

@@ -0,0 +1,3 @@
+body {
+  background: white;
+}

examples/css-less/src/index.mdx

@@ -0,0 +1,21 @@
+---
+name: Getting Started
+route: /
+order: 1
+---
+
+# 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/css-postcss/doczrc.js

@@ -0,0 +1,10 @@
+import { css } from 'docz-plugin-css'
+
+export default {
+  plugins: [
+    css({
+      preprocessor: 'stylus',
+      cssmodules: true,
+    }),
+  ],
+}

examples/css-postcss/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "docz-example-css-postcss",
+  "version": "0.2.9",
+  "license": "MIT",
+  "scripts": {
+    "dev": "docz dev",
+    "build": "docz build"
+  },
+  "dependencies": {
+    "classnames": "^2.2.6",
+    "docz": "^0.2.9",
+    "docz-core": "^0.2.9",
+    "prop-types": "^15.6.2",
+    "react": "^16.4.1",
+    "react-dom": "^16.4.1"
+  },
+  "devDependencies": {
+    "docz-plugin-css": "^0.2.9"
+  }
+}

examples/css-postcss/src/components/Alert.jsx

@@ -0,0 +1,23 @@
+import React, { Fragment } from 'react'
+import cx from 'classnames'
+import t from 'prop-types'
+
+import styles from './Alert.module.css'
+
+export const Alert = ({ children, kind }) => (
+  <div
+    className={cx(styles.alert, {
+      [styles[kind]]: true,
+    })}
+  >
+    {children}
+  </div>
+)
+
+Alert.propTypes = {
+  kind: t.oneOf(['info', 'positive', 'negative', 'warning']),
+}
+
+Alert.defaultProps = {
+  kind: 'info',
+}

examples/css-postcss/src/components/Alert.mdx

@@ -0,0 +1,41 @@
+---
+name: Alert
+menu: Components
+---
+
+import './index.css'
+import { Playground, PropsTable } from 'docz'
+import { Alert } from './Alert'
+
+# Alert
+
+## Properties
+
+<PropsTable 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>
+
+## Use with children as a function
+
+<Playground>
+  {() => {
+    const message = 'Hello world'
+
+    return (
+      <Alert>{message}</Alert>
+    )
+  }}
+</Playground>

examples/css-postcss/src/components/Alert.module.css

@@ -0,0 +1,22 @@
+.alert {
+  padding: 15px 20px;
+  background: white;
+  border-radius: 3px;
+  color: white;
+}
+
+.info {
+  background: #5352ED;
+}
+
+.positive {
+  background: #2ED573;
+}
+
+.negative {
+  background: #FF4757;
+}
+
+.warning {
+  background: #FFA502;
+}

examples/css-postcss/src/components/index.css

@@ -0,0 +1,3 @@
+body {
+  background: white;
+}

examples/css-postcss/src/index.mdx

@@ -0,0 +1,21 @@
+---
+name: Getting Started
+route: /
+order: 1
+---
+
+# 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/css-sass/doczrc.js

@@ -0,0 +1,10 @@
+import { css } from 'docz-plugin-css'
+
+export default {
+  plugins: [
+    css({
+      preprocessor: 'sass',
+      cssmodules: true,
+    }),
+  ],
+}

examples/css-sass/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "docz-example-css-sass",
+  "version": "0.2.9",
+  "license": "MIT",
+  "scripts": {
+    "dev": "docz dev",
+    "build": "docz build"
+  },
+  "dependencies": {
+    "classnames": "^2.2.6",
+    "docz": "^0.2.9",
+    "docz-core": "^0.2.9",
+    "prop-types": "^15.6.2",
+    "react": "^16.4.1",
+    "react-dom": "^16.4.1"
+  },
+  "devDependencies": {
+    "docz-plugin-css": "^0.2.9"
+  }
+}

examples/css-sass/src/components/Alert.jsx

@@ -0,0 +1,23 @@
+import React, { Fragment } from 'react'
+import cx from 'classnames'
+import t from 'prop-types'
+
+import styles from './Alert.module.scss'
+
+export const Alert = ({ children, kind }) => (
+  <div
+    className={cx(styles.alert, {
+      [styles[kind]]: true,
+    })}
+  >
+    {children}
+  </div>
+)
+
+Alert.propTypes = {
+  kind: t.oneOf(['info', 'positive', 'negative', 'warning']),
+}
+
+Alert.defaultProps = {
+  kind: 'info',
+}

examples/css-sass/src/components/Alert.mdx

@@ -0,0 +1,41 @@
+---
+name: Alert
+menu: Components
+---
+
+import './index.scss'
+import { Playground, PropsTable } from 'docz'
+import { Alert } from './Alert'
+
+# Alert
+
+## Properties
+
+<PropsTable 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>
+
+## Use with children as a function
+
+<Playground>
+  {() => {
+    const message = 'Hello world'
+
+    return (
+      <Alert>{message}</Alert>
+    )
+  }}
+</Playground>

examples/css-sass/src/components/Alert.module.scss

@@ -0,0 +1,22 @@
+.alert {
+  padding: 15px 20px;
+  background: white;
+  border-radius: 3px;
+  color: white;
+}
+
+.info {
+  background: #5352ED;
+}
+
+.positive {
+  background: #2ED573;
+}
+
+.negative {
+  background: #FF4757;
+}
+
+.warning {
+  background: #FFA502;
+}

examples/css-sass/src/components/index.scss

@@ -0,0 +1,3 @@
+body {
+  background: white;
+}

examples/css-sass/src/index.mdx

@@ -0,0 +1,21 @@
+---
+name: Getting Started
+route: /
+order: 1
+---
+
+# 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/css-stylus/doczrc.js

@@ -0,0 +1,10 @@
+import { css } from 'docz-plugin-css'
+
+export default {
+  plugins: [
+    css({
+      preprocessor: 'stylus',
+      cssmodules: true,
+    }),
+  ],
+}

examples/css-stylus/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "docz-example-css-stylus",
+  "version": "0.2.9",
+  "license": "MIT",
+  "scripts": {
+    "dev": "docz dev",
+    "build": "docz build"
+  },
+  "dependencies": {
+    "classnames": "^2.2.6",
+    "docz": "^0.2.9",
+    "docz-core": "^0.2.9",
+    "prop-types": "^15.6.2",
+    "react": "^16.4.1",
+    "react-dom": "^16.4.1"
+  },
+  "devDependencies": {
+    "docz-plugin-css": "^0.2.9"
+  }
+}

examples/css-stylus/src/components/Alert.jsx

@@ -0,0 +1,23 @@
+import React, { Fragment } from 'react'
+import cx from 'classnames'
+import t from 'prop-types'
+
+import styles from './Alert.module.styl'
+
+export const Alert = ({ children, kind }) => (
+  <div
+    className={cx(styles.alert, {
+      [styles[kind]]: true,
+    })}
+  >
+    {children}
+  </div>
+)
+
+Alert.propTypes = {
+  kind: t.oneOf(['info', 'positive', 'negative', 'warning']),
+}
+
+Alert.defaultProps = {
+  kind: 'info',
+}

examples/css-stylus/src/components/Alert.mdx

@@ -0,0 +1,41 @@
+---
+name: Alert
+menu: Components
+---
+
+import './index.styl'
+import { Playground, PropsTable } from 'docz'
+import { Alert } from './Alert'
+
+# Alert
+
+## Properties
+
+<PropsTable 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>
+
+## Use with children as a function
+
+<Playground>
+  {() => {
+    const message = 'Hello world'
+
+    return (
+      <Alert>{message}</Alert>
+    )
+  }}
+</Playground>

examples/css-stylus/src/components/Alert.module.styl

@@ -0,0 +1,22 @@
+.alert {
+  padding: 15px 20px;
+  background: white;
+  border-radius: 3px;
+  color: white;
+}
+
+.info {
+  background: #5352ED;
+}
+
+.positive {
+  background: #2ED573;
+}
+
+.negative {
+  background: #FF4757;
+}
+
+.warning {
+  background: #FFA502;
+}

examples/css-stylus/src/components/index.styl

@@ -0,0 +1,3 @@
+body {
+  background: white;
+}

examples/css-stylus/src/index.mdx

@@ -0,0 +1,21 @@
+---
+name: Getting Started
+route: /
+order: 1
+---
+
+# 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.