├── .editorconfig ├── .gitignore ├── .prettierrc ├── CHANGELOG.md ├── README.md ├── examples ├── css-less │ ├── CHANGELOG.md │ ├── doczrc.js │ ├── package.json │ └── src │ │ ├── components │ │ ├── Alert.jsx │ │ ├── Alert.mdx │ │ └── Alert.module.less │ │ ├── index.less │ │ └── index.mdx ├── css-postcss │ ├── CHANGELOG.md │ ├── doczrc.js │ ├── package.json │ └── src │ │ ├── components │ │ ├── Alert.jsx │ │ ├── Alert.mdx │ │ └── Alert.module.css │ │ ├── index.css │ │ └── index.mdx ├── css-sass │ ├── CHANGELOG.md │ ├── doczrc.js │ ├── package.json │ └── src │ │ ├── components │ │ ├── Alert.jsx │ │ ├── Alert.mdx │ │ └── Alert.module.scss │ │ ├── index.mdx │ │ └── index.scss └── css-stylus │ ├── CHANGELOG.md │ ├── doczrc.js │ ├── package.json │ └── src │ ├── components │ ├── Alert.jsx │ ├── Alert.mdx │ └── Alert.module.styl │ ├── index.mdx │ └── index.styl ├── librc.js ├── package.json ├── src ├── get-local-ident.ts ├── index.ts └── typed.d.ts ├── tsconfig.json ├── tslint.json └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | logs 2 | *.log 3 | npm-debug.log* 4 | yarn-debug.log* 5 | yarn-error.log* 6 | pids 7 | *.pid 8 | *.seed 9 | *.pid.lock 10 | lib-cov 11 | coverage 12 | .nyc_output 13 | .grunt 14 | bower_components 15 | .lock-wscript 16 | build/Release 17 | node_modules/ 18 | jspm_packages/ 19 | typings/ 20 | .npm 21 | .npmrc 22 | .eslintcache 23 | .node_repl_history 24 | *.tgz 25 | .yarn-integrity 26 | .env 27 | es 28 | lib 29 | stats.html 30 | build 31 | dist 32 | .rpt2_cache 33 | .cache 34 | .docz 35 | .idea 36 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "typescript", 3 | "requirePragma": false, 4 | "printWidth": 80, 5 | "tabWidth": 2, 6 | "useTabs": false, 7 | "semi": false, 8 | "singleQuote": true, 9 | "trailingComma": "es5", 10 | "bracketSpacing": true, 11 | "jsxBracketSameLine": false 12 | } 13 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | 7 | # [0.11.0](https://github.com/pedronauck/docz/compare/v0.10.3...v0.11.0) (2018-09-02) 8 | 9 | 10 | ### Bug Fixes 11 | 12 | * **docz-plugin-css:** fix empty loaderOpts ([bb9b946](https://github.com/pedronauck/docz/commit/bb9b946)) 13 | 14 | 15 | 16 | 17 | 18 | 19 | ## [0.10.3](https://github.com/pedronauck/docz/compare/v0.9.6...v0.10.3) (2018-08-16) 20 | 21 | 22 | 23 | 24 | **Note:** Version bump only for package docz-plugin-css 25 | 26 | 27 | ## [0.10.2](https://github.com/pedronauck/docz/compare/v0.10.1...v0.10.2) (2018-08-13) 28 | 29 | 30 | 31 | 32 | **Note:** Version bump only for package docz-plugin-css 33 | 34 | 35 | ## [0.10.1](https://github.com/pedronauck/docz/compare/v0.10.0...v0.10.1) (2018-08-13) 36 | 37 | 38 | 39 | 40 | **Note:** Version bump only for package docz-plugin-css 41 | 42 | 43 | # [0.10.0](https://github.com/pedronauck/docz/compare/v0.9.6...v0.10.0) (2018-08-13) 44 | 45 | 46 | 47 | 48 | **Note:** Version bump only for package docz-plugin-css 49 | 50 | 51 | ## [0.9.6](https://github.com/pedronauck/docz/compare/v0.9.5...v0.9.6) (2018-08-06) 52 | 53 | 54 | 55 | 56 | **Note:** Version bump only for package docz-plugin-css 57 | 58 | 59 | ## [0.9.4](https://github.com/pedronauck/docz/compare/v0.9.4-beta.1...v0.9.4) (2018-08-04) 60 | 61 | 62 | 63 | 64 | **Note:** Version bump only for package docz-plugin-css 65 | 66 | 67 | ## [0.9.3](https://github.com/pedronauck/docz/compare/v0.9.2...v0.9.3) (2018-08-03) 68 | 69 | 70 | 71 | 72 | **Note:** Version bump only for package docz-plugin-css 73 | 74 | 75 | ## [0.9.2](https://github.com/pedronauck/docz/compare/v0.9.1...v0.9.2) (2018-08-02) 76 | 77 | 78 | 79 | 80 | **Note:** Version bump only for package docz-plugin-css 81 | 82 | 83 | ## [0.9.1](https://github.com/pedronauck/docz/compare/v0.9.0...v0.9.1) (2018-08-02) 84 | 85 | 86 | 87 | 88 | **Note:** Version bump only for package docz-plugin-css 89 | 90 | 91 | # [0.9.0](https://github.com/pedronauck/docz/compare/v0.9.0-beta.1...v0.9.0) (2018-08-02) 92 | 93 | 94 | ### Bug Fixes 95 | 96 | * **docz:** using context for imports to prevent disposed hmr ([b37284c](https://github.com/pedronauck/docz/commit/b37284c)) 97 | * **docz-plugin-css:** pass default parameter ([389979a](https://github.com/pedronauck/docz/commit/389979a)) 98 | 99 | 100 | 101 | 102 | 103 | # [0.9.0-beta.1](https://github.com/pedronauck/docz/compare/v0.9.0-beta.0...v0.9.0-beta.1) (2018-08-01) 104 | 105 | 106 | 107 | 108 | **Note:** Version bump only for package docz-plugin-css 109 | 110 | 111 | # [0.9.0-beta.0](https://github.com/pedronauck/docz/compare/v0.8.0...v0.9.0-beta.0) (2018-08-01) 112 | 113 | 114 | 115 | 116 | **Note:** Version bump only for package docz-plugin-css 117 | 118 | 119 | # [0.8.0](https://github.com/pedronauck/docz/compare/v0.7.1...v0.8.0) (2018-07-28) 120 | 121 | 122 | 123 | 124 | **Note:** Version bump only for package docz-plugin-css 125 | 126 | 127 | ## [0.7.1](https://github.com/pedronauck/docz/compare/v0.7.0...v0.7.1) (2018-07-24) 128 | 129 | 130 | ### Bug Fixes 131 | 132 | * **docz-plugin-css:** allow css from node_modules ([c21929a](https://github.com/pedronauck/docz/commit/c21929a)) 133 | 134 | 135 | 136 | 137 | 138 | # [0.7.0](https://github.com/pedronauck/docz/compare/v0.6.2...v0.7.0) (2018-07-23) 139 | 140 | 141 | ### Bug Fixes 142 | 143 | * **docz-plugin-css:** css modules applied logic ([c5fa378](https://github.com/pedronauck/docz/commit/c5fa378)) 144 | 145 | 146 | 147 | 148 | 149 | ## [0.6.2](https://github.com/pedronauck/docz/compare/v0.6.1...v0.6.2) (2018-07-20) 150 | 151 | 152 | 153 | 154 | **Note:** Version bump only for package docz-plugin-css 155 | 156 | 157 | # [0.6.0](https://github.com/pedronauck/docz/compare/v0.5.9...v0.6.0) (2018-07-19) 158 | 159 | 160 | 161 | 162 | **Note:** Version bump only for package docz-plugin-css 163 | 164 | 165 | ## [0.5.9](https://github.com/pedronauck/docz/compare/v0.5.8...v0.5.9) (2018-07-16) 166 | 167 | 168 | 169 | 170 | **Note:** Version bump only for package docz-plugin-css 171 | 172 | 173 | ## [0.5.7](https://github.com/pedronauck/docz/compare/v0.5.6...v0.5.7) (2018-07-11) 174 | 175 | 176 | 177 | 178 | **Note:** Version bump only for package docz-plugin-css 179 | 180 | 181 | ## [0.5.6](https://github.com/pedronauck/docz/compare/v0.5.5...v0.5.6) (2018-07-11) 182 | 183 | 184 | 185 | 186 | **Note:** Version bump only for package docz-plugin-css 187 | 188 | 189 | ## [0.5.5](https://github.com/pedronauck/docz/compare/v0.5.4...v0.5.5) (2018-07-07) 190 | 191 | 192 | 193 | 194 | **Note:** Version bump only for package docz-plugin-css 195 | 196 | 197 | ## [0.5.4](https://github.com/pedronauck/docz/compare/v0.5.3...v0.5.4) (2018-07-07) 198 | 199 | 200 | 201 | 202 | **Note:** Version bump only for package docz-plugin-css 203 | 204 | 205 | ## [0.5.2](https://github.com/pedronauck/docz/compare/v0.5.1...v0.5.2) (2018-07-05) 206 | 207 | 208 | 209 | 210 | **Note:** Version bump only for package docz-plugin-css 211 | 212 | 213 | ## [0.5.1](https://github.com/pedronauck/docz/compare/v0.3.4...v0.5.1) (2018-07-03) 214 | 215 | 216 | 217 | 218 | **Note:** Version bump only for package docz-plugin-css 219 | 220 | 221 | # [0.5.0](https://github.com/pedronauck/docz/compare/v0.3.4...v0.5.0) (2018-07-03) 222 | 223 | 224 | 225 | 226 | **Note:** Version bump only for package docz-plugin-css 227 | 228 | 229 | # [0.4.0](https://github.com/pedronauck/docz/compare/v0.3.4...v0.4.0) (2018-06-30) 230 | 231 | 232 | 233 | 234 | **Note:** Version bump only for package docz-plugin-css 235 | 236 | 237 | ## [0.3.4](https://github.com/pedronauck/docz/compare/v0.3.3...v0.3.4) (2018-06-26) 238 | 239 | 240 | 241 | 242 | **Note:** Version bump only for package docz-plugin-css 243 | 244 | 245 | ## [0.3.3](https://github.com/pedronauck/docz/compare/v0.3.2...v0.3.3) (2018-06-26) 246 | 247 | 248 | ### Bug Fixes 249 | 250 | * **docz-core:** copy templates files for dist ([#88](https://github.com/pedronauck/docz/issues/88)) ([5e4b98d](https://github.com/pedronauck/docz/commit/5e4b98d)) 251 | 252 | 253 | 254 | 255 | 256 | ## [0.3.2](https://github.com/pedronauck/docz/compare/v0.3.1...v0.3.2) (2018-06-25) 257 | 258 | 259 | 260 | 261 | **Note:** Version bump only for package docz-plugin-css 262 | 263 | 264 | ## [0.3.1](https://github.com/pedronauck/docz/compare/v0.2.11...v0.3.1) (2018-06-25) 265 | 266 | 267 | 268 | 269 | **Note:** Version bump only for package docz-plugin-css 270 | 271 | 272 | ## [0.2.11](https://github.com/pedronauck/docz/compare/v0.2.10...v0.2.11) (2018-06-22) 273 | 274 | 275 | ### Bug Fixes 276 | 277 | * **docz-plugin-css:** production build ([1a66d8a](https://github.com/pedronauck/docz/commit/1a66d8a)) 278 | 279 | 280 | 281 | 282 | 283 | ## [0.2.10](https://github.com/pedronauck/docz/compare/v0.2.9...v0.2.10) (2018-06-21) 284 | 285 | 286 | ### Features 287 | 288 | * **docz-plugin-css:** add initial version ([#78](https://github.com/pedronauck/docz/issues/78)) ([299372e](https://github.com/pedronauck/docz/commit/299372e)) 289 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # docz-plugin-css 2 | 3 | Docz plugin to parse css files inside your documents 4 | 5 | ![](https://cdn-std.dprcdn.net/files/acc_649651/4Q4QBN) 6 | 7 | ## Examples 8 | 9 | - [PostCSS](https://github.com/pedronauck/docz-plugin-css/tree/master/examples/css-postcss) 10 | - [Less](https://github.com/pedronauck/docz-plugin-css/tree/master/examples/css-less) 11 | - [Sass](https://github.com/pedronauck/docz-plugin-css/tree/master/examples/css-sass) 12 | - [Stylus](https://github.com/pedronauck/docz-plugin-css/tree/master/examples/css-stylus) 13 | 14 | ## Installation 15 | 16 | First of all, install plugin: 17 | 18 | ```bash 19 | $ yarn add docz-plugin-css --dev 20 | ``` 21 | 22 | After that, use the plugin on your `doczrc.js`: 23 | 24 | ```js 25 | // doczrc.js 26 | import { css } from 'docz-plugin-css' 27 | 28 | export default { 29 | plugins: [ 30 | css({ 31 | preprocessor: 'postcss', 32 | cssmodules: true, 33 | loaderOpts: { 34 | /* whatever your preprocessor loader accept */ 35 | } 36 | }) 37 | ] 38 | } 39 | ``` 40 | 41 | ### Choosing PostCSS, Sass, Less or Stylus 42 | 43 | Do you can choose how preprocessor your bundler will use just by changing the `preprocessor` property at the plugin definition: 44 | 45 | ```js 46 | // doczrc.js 47 | import { css } from 'docz-plugin-css' 48 | 49 | export default { 50 | plugins: [ 51 | css({ 52 | preprocessor: 'sass' 53 | }) 54 | ] 55 | } 56 | ``` 57 | 58 | ### Using CSS Modules 59 | 60 | To use css modules, just turn on `cssmodules` property on your project configuration: 61 | 62 | ```js 63 | // doczrc.js 64 | import { css } from 'docz-plugin-css' 65 | 66 | export default { 67 | plugins: [ 68 | css({ 69 | preprocessor: 'sass', 70 | cssmodules: true 71 | }) 72 | ] 73 | } 74 | ``` 75 | 76 | After that, to import styles from css modules, just use `.module.{preprocessor-ext}` on your files 77 | 78 | ```markdown 79 | --- 80 | name: Button 81 | ---- 82 | 83 | import { Playground } from 'docz' 84 | 85 | import { Button } from './Button' 86 | import { styles } from './styles.module.css' 87 | 88 | # Button 89 | 90 | Example of Button component with custom class! 91 | 92 | 93 | 96 | 97 | ``` 98 | 99 | If you don't pass `.module` in front of the preprocessor extension, bundler will don't parse your css as cssmodule! 100 | 101 | If in your project some places use both CSS modules and some place doesn't, you can leave out the `cssmodules` option so that `webpack` can determined by itself the correct way to load the CSS. 102 | 103 | ### Multiple pre-processor 104 | 105 | You can still use multiple pre-processor together in the same configuration: 106 | 107 | ```js 108 | // doczrc.js 109 | import { css } from 'docz-plugin-css' 110 | 111 | export default { 112 | plugins: [ 113 | css({ preprocessor: 'sass' }), 114 | css({ preprocessor: 'stylus' }), 115 | ] 116 | } 117 | ``` 118 | 119 | ## Api 120 | 121 | ### Params 122 | 123 | #### `preprocessor` 124 | 125 | - **Type:** `postcss | sass | less | stylus` 126 | - **Default:** `postcss` 127 | 128 | Use to define the preprocessor you want to use 129 | 130 | #### `cssmodules` 131 | - **Type:** `Boolean` 132 | - **Default:** `false` 133 | 134 | Use this option if you want to use css modules 135 | 136 | #### `loaderOpts` 137 | - **Type:** `{ [key:string]: any }` 138 | - **Default:** `{}` 139 | 140 | Custom options passed on pre-processor loader configuration 141 | 142 | #### `cssOpts` 143 | - **Type:** `{ [key:string]: any }` 144 | - **Default:** `{}` 145 | 146 | Custom options passed on [css-loader](https://github.com/webpack-contrib/css-loader) configuration 147 | 148 | #### `ruleOpts` 149 | - **Type:** `{ [key:string]: any }` 150 | - **Default:** `{}` 151 | 152 | Custom options passed on webpack rule configuration 153 | -------------------------------------------------------------------------------- /examples/css-less/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | 7 | # [0.11.0](https://github.com/pedronauck/docz/compare/v0.10.3...v0.11.0) (2018-09-02) 8 | 9 | 10 | ### Features 11 | 12 | * **docz:** move docz/docz-core to dev dependency on examples ([e7153a4](https://github.com/pedronauck/docz/commit/e7153a4)) 13 | 14 | 15 | 16 | 17 | 18 | 19 | ## [0.10.3](https://github.com/pedronauck/docz/compare/v0.9.6...v0.10.3) (2018-08-16) 20 | 21 | 22 | 23 | 24 | **Note:** Version bump only for package docz-example-css-less 25 | 26 | 27 | ## [0.10.2](https://github.com/pedronauck/docz/compare/v0.10.1...v0.10.2) (2018-08-13) 28 | 29 | 30 | 31 | 32 | **Note:** Version bump only for package docz-example-css-less 33 | 34 | 35 | ## [0.10.1](https://github.com/pedronauck/docz/compare/v0.10.0...v0.10.1) (2018-08-13) 36 | 37 | 38 | 39 | 40 | **Note:** Version bump only for package docz-example-css-less 41 | 42 | 43 | # [0.10.0](https://github.com/pedronauck/docz/compare/v0.9.6...v0.10.0) (2018-08-13) 44 | 45 | 46 | 47 | 48 | **Note:** Version bump only for package docz-example-css-less 49 | 50 | 51 | ## [0.9.6](https://github.com/pedronauck/docz/compare/v0.9.5...v0.9.6) (2018-08-06) 52 | 53 | 54 | 55 | 56 | **Note:** Version bump only for package docz-example-css-less 57 | 58 | 59 | ## [0.9.5](https://github.com/pedronauck/docz/compare/v0.9.4...v0.9.5) (2018-08-04) 60 | 61 | 62 | 63 | 64 | **Note:** Version bump only for package docz-example-css-less 65 | 66 | 67 | ## [0.9.4](https://github.com/pedronauck/docz/compare/v0.9.4-beta.1...v0.9.4) (2018-08-04) 68 | 69 | 70 | 71 | 72 | **Note:** Version bump only for package docz-example-css-less 73 | 74 | 75 | ## [0.9.3](https://github.com/pedronauck/docz/compare/v0.9.2...v0.9.3) (2018-08-03) 76 | 77 | 78 | 79 | 80 | **Note:** Version bump only for package docz-example-css-less 81 | 82 | 83 | ## [0.9.2](https://github.com/pedronauck/docz/compare/v0.9.1...v0.9.2) (2018-08-02) 84 | 85 | 86 | 87 | 88 | **Note:** Version bump only for package docz-example-css-less 89 | 90 | 91 | ## [0.9.1](https://github.com/pedronauck/docz/compare/v0.9.0...v0.9.1) (2018-08-02) 92 | 93 | 94 | 95 | 96 | **Note:** Version bump only for package docz-example-css-less 97 | 98 | 99 | # [0.9.0](https://github.com/pedronauck/docz/compare/v0.9.0-beta.1...v0.9.0) (2018-08-02) 100 | 101 | 102 | 103 | 104 | **Note:** Version bump only for package docz-example-css-less 105 | 106 | 107 | # [0.9.0-beta.1](https://github.com/pedronauck/docz/compare/v0.9.0-beta.0...v0.9.0-beta.1) (2018-08-01) 108 | 109 | 110 | 111 | 112 | **Note:** Version bump only for package docz-example-css-less 113 | 114 | 115 | # [0.9.0-beta.0](https://github.com/pedronauck/docz/compare/v0.8.0...v0.9.0-beta.0) (2018-08-01) 116 | 117 | 118 | 119 | 120 | **Note:** Version bump only for package docz-example-css-less 121 | 122 | 123 | # [0.8.0](https://github.com/pedronauck/docz/compare/v0.7.1...v0.8.0) (2018-07-28) 124 | 125 | 126 | 127 | 128 | **Note:** Version bump only for package docz-example-css-less 129 | 130 | 131 | ## [0.7.1](https://github.com/pedronauck/docz/compare/v0.7.0...v0.7.1) (2018-07-24) 132 | 133 | 134 | 135 | 136 | **Note:** Version bump only for package docz-example-css-less 137 | 138 | 139 | # [0.7.0](https://github.com/pedronauck/docz/compare/v0.6.2...v0.7.0) (2018-07-23) 140 | 141 | 142 | 143 | 144 | **Note:** Version bump only for package docz-example-css-less 145 | 146 | 147 | ## [0.6.2](https://github.com/pedronauck/docz/compare/v0.6.1...v0.6.2) (2018-07-20) 148 | 149 | 150 | 151 | 152 | **Note:** Version bump only for package docz-example-css-less 153 | 154 | 155 | ## [0.6.1](https://github.com/pedronauck/docz/compare/v0.6.0...v0.6.1) (2018-07-19) 156 | 157 | 158 | 159 | 160 | **Note:** Version bump only for package docz-example-css-less 161 | 162 | 163 | # [0.6.0](https://github.com/pedronauck/docz/compare/v0.5.9...v0.6.0) (2018-07-19) 164 | 165 | 166 | 167 | 168 | **Note:** Version bump only for package docz-example-css-less 169 | 170 | 171 | ## [0.5.9](https://github.com/pedronauck/docz/compare/v0.5.8...v0.5.9) (2018-07-16) 172 | 173 | 174 | 175 | 176 | **Note:** Version bump only for package docz-example-css-less 177 | 178 | 179 | ## [0.5.8](https://github.com/pedronauck/docz/compare/v0.5.7...v0.5.8) (2018-07-11) 180 | 181 | 182 | 183 | 184 | **Note:** Version bump only for package docz-example-css-less 185 | 186 | 187 | ## [0.5.7](https://github.com/pedronauck/docz/compare/v0.5.6...v0.5.7) (2018-07-11) 188 | 189 | 190 | 191 | 192 | **Note:** Version bump only for package docz-example-css-less 193 | 194 | 195 | ## [0.5.6](https://github.com/pedronauck/docz/compare/v0.5.5...v0.5.6) (2018-07-11) 196 | 197 | 198 | 199 | 200 | **Note:** Version bump only for package docz-example-css-less 201 | 202 | 203 | ## [0.5.5](https://github.com/pedronauck/docz/compare/v0.5.4...v0.5.5) (2018-07-07) 204 | 205 | 206 | 207 | 208 | **Note:** Version bump only for package docz-example-css-less 209 | 210 | 211 | ## [0.5.4](https://github.com/pedronauck/docz/compare/v0.5.3...v0.5.4) (2018-07-07) 212 | 213 | 214 | 215 | 216 | **Note:** Version bump only for package docz-example-css-less 217 | 218 | 219 | ## [0.5.3](https://github.com/pedronauck/docz/compare/v0.5.2...v0.5.3) (2018-07-05) 220 | 221 | 222 | 223 | 224 | **Note:** Version bump only for package docz-example-css-less 225 | 226 | 227 | ## [0.5.2](https://github.com/pedronauck/docz/compare/v0.5.1...v0.5.2) (2018-07-05) 228 | 229 | 230 | 231 | 232 | **Note:** Version bump only for package docz-example-css-less 233 | 234 | 235 | ## [0.5.1](https://github.com/pedronauck/docz/compare/v0.3.4...v0.5.1) (2018-07-03) 236 | 237 | 238 | 239 | 240 | **Note:** Version bump only for package docz-example-css-less 241 | 242 | 243 | # [0.5.0](https://github.com/pedronauck/docz/compare/v0.3.4...v0.5.0) (2018-07-03) 244 | 245 | 246 | 247 | 248 | **Note:** Version bump only for package docz-example-css-less 249 | 250 | 251 | # [0.4.0](https://github.com/pedronauck/docz/compare/v0.3.4...v0.4.0) (2018-06-30) 252 | 253 | 254 | 255 | 256 | **Note:** Version bump only for package docz-example-css-less 257 | 258 | 259 | ## [0.3.4](https://github.com/pedronauck/docz/compare/v0.3.3...v0.3.4) (2018-06-26) 260 | 261 | 262 | 263 | 264 | **Note:** Version bump only for package docz-example-css-less 265 | 266 | 267 | ## [0.3.3](https://github.com/pedronauck/docz/compare/v0.3.2...v0.3.3) (2018-06-26) 268 | 269 | 270 | 271 | 272 | **Note:** Version bump only for package docz-example-css-less 273 | 274 | 275 | ## [0.3.2](https://github.com/pedronauck/docz/compare/v0.3.1...v0.3.2) (2018-06-25) 276 | 277 | 278 | 279 | 280 | **Note:** Version bump only for package docz-example-css-less 281 | 282 | 283 | ## [0.3.1](https://github.com/pedronauck/docz/compare/v0.2.11...v0.3.1) (2018-06-25) 284 | 285 | 286 | ### Features 287 | 288 | * **docz-default-theme:** dark mode and responsiveness ([#87](https://github.com/pedronauck/docz/issues/87)) ([a4db115](https://github.com/pedronauck/docz/commit/a4db115)), closes [#81](https://github.com/pedronauck/docz/issues/81) 289 | 290 | 291 | 292 | 293 | 294 | # [0.3.0](https://github.com/pedronauck/docz/compare/v0.3.0-beta.0...v0.3.0) (2018-06-25) 295 | 296 | 297 | 298 | 299 | **Note:** Version bump only for package docz-example-css-less 300 | 301 | 302 | # [0.3.0-beta.0](https://github.com/pedronauck/docz/compare/v0.2.11...v0.3.0-beta.0) (2018-06-25) 303 | 304 | 305 | 306 | 307 | **Note:** Version bump only for package docz-example-css-less 308 | 309 | 310 | ## [0.2.11](https://github.com/pedronauck/docz/compare/v0.2.10...v0.2.11) (2018-06-22) 311 | 312 | 313 | ### Bug Fixes 314 | 315 | * some changes on css examples ([058660f](https://github.com/pedronauck/docz/commit/058660f)) 316 | 317 | 318 | 319 | 320 | 321 | ## [0.2.10](https://github.com/pedronauck/docz/compare/v0.2.9...v0.2.10) (2018-06-21) 322 | 323 | 324 | ### Features 325 | 326 | * **docz-plugin-css:** add initial version ([#78](https://github.com/pedronauck/docz/issues/78)) ([299372e](https://github.com/pedronauck/docz/commit/299372e)) 327 | -------------------------------------------------------------------------------- /examples/css-less/doczrc.js: -------------------------------------------------------------------------------- 1 | import { css } from 'docz-plugin-css' 2 | 3 | export default { 4 | title: 'CSS Less', 5 | plugins: [ 6 | css({ 7 | preprocessor: 'less', 8 | cssmodules: true, 9 | }), 10 | ], 11 | } 12 | -------------------------------------------------------------------------------- /examples/css-less/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "docz-example-css-less", 3 | "version": "0.11.0", 4 | "license": "MIT", 5 | "scripts": { 6 | "dev": "docz dev", 7 | "build": "docz build" 8 | }, 9 | "dependencies": { 10 | "classnames": "^2.2.6", 11 | "prop-types": "^15.6.2", 12 | "react": "^16.5.0", 13 | "react-dom": "^16.5.0" 14 | }, 15 | "devDependencies": { 16 | "docz": "^0.11.0", 17 | "docz-plugin-css": "^0.11.0" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/css-less/src/components/Alert.jsx: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from 'react' 2 | import cx from 'classnames' 3 | import t from 'prop-types' 4 | 5 | import styles from './Alert.module.less' 6 | 7 | export const Alert = ({ children, kind }) => ( 8 |
13 | {children} 14 |
15 | ) 16 | 17 | Alert.propTypes = { 18 | kind: t.oneOf(['info', 'positive', 'negative', 'warning']), 19 | } 20 | 21 | Alert.defaultProps = { 22 | kind: 'info', 23 | } 24 | -------------------------------------------------------------------------------- /examples/css-less/src/components/Alert.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: Alert 3 | menu: Components 4 | --- 5 | 6 | import { Playground, PropsTable } from 'docz' 7 | import { Alert } from './Alert' 8 | 9 | # Alert 10 | 11 | ## Properties 12 | 13 | 14 | 15 | ## Basic usage 16 | 17 | 18 | Some message 19 | 20 | 21 | ## Using different kinds 22 | 23 | 24 | Some message 25 | Some message 26 | Some message 27 | Some message 28 | 29 | 30 | ## Use with children as a function 31 | 32 | 33 | {() => { 34 | const message = 'Hello world' 35 | 36 | return ( 37 | {message} 38 | ) 39 | }} 40 | 41 | -------------------------------------------------------------------------------- /examples/css-less/src/components/Alert.module.less: -------------------------------------------------------------------------------- 1 | .alert { 2 | padding: 15px 20px; 3 | background: white; 4 | border-radius: 3px; 5 | color: white; 6 | } 7 | 8 | .info { 9 | background: #5352ED; 10 | } 11 | 12 | .positive { 13 | background: #2ED573; 14 | } 15 | 16 | .negative { 17 | background: #FF4757; 18 | } 19 | 20 | .warning { 21 | background: #FFA502; 22 | } 23 | -------------------------------------------------------------------------------- /examples/css-less/src/index.less: -------------------------------------------------------------------------------- 1 | body { 2 | background: white; 3 | } 4 | -------------------------------------------------------------------------------- /examples/css-less/src/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: Getting Started 3 | route: / 4 | order: 1 5 | --- 6 | 7 | import './index.less' 8 | 9 | # Getting Started 10 | 11 | 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. 12 | 13 | Regardless of the technologies and tools behind them, a successful design system follows these guiding principles: 14 | 15 | - **It’s consistent**. The way components are built and managed follows a predictable pattern. 16 | - **It’s self-contained**. Your design system is treated as a standalone dependency. 17 | - **It’s reusable**. You’ve built components so they can be reused in many contexts. 18 | - **It’s accessible**. Applications built with your design system are usable by as many people as possible, no matter how they access the web. 19 | - **It’s robust**. No matter the product or platform to which your design system is applied, it should perform with grace and minimal bugs. 20 | 21 | ## Consistency 22 | 23 | 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. 24 | -------------------------------------------------------------------------------- /examples/css-postcss/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | 7 | # [0.11.0](https://github.com/pedronauck/docz/compare/v0.10.3...v0.11.0) (2018-09-02) 8 | 9 | 10 | ### Features 11 | 12 | * **docz:** move docz/docz-core to dev dependency on examples ([e7153a4](https://github.com/pedronauck/docz/commit/e7153a4)) 13 | 14 | 15 | 16 | 17 | 18 | 19 | ## [0.10.3](https://github.com/pedronauck/docz/compare/v0.9.6...v0.10.3) (2018-08-16) 20 | 21 | 22 | 23 | 24 | **Note:** Version bump only for package docz-example-css-postcss 25 | 26 | 27 | ## [0.10.2](https://github.com/pedronauck/docz/compare/v0.10.1...v0.10.2) (2018-08-13) 28 | 29 | 30 | 31 | 32 | **Note:** Version bump only for package docz-example-css-postcss 33 | 34 | 35 | ## [0.10.1](https://github.com/pedronauck/docz/compare/v0.10.0...v0.10.1) (2018-08-13) 36 | 37 | 38 | 39 | 40 | **Note:** Version bump only for package docz-example-css-postcss 41 | 42 | 43 | # [0.10.0](https://github.com/pedronauck/docz/compare/v0.9.6...v0.10.0) (2018-08-13) 44 | 45 | 46 | 47 | 48 | **Note:** Version bump only for package docz-example-css-postcss 49 | 50 | 51 | ## [0.9.6](https://github.com/pedronauck/docz/compare/v0.9.5...v0.9.6) (2018-08-06) 52 | 53 | 54 | 55 | 56 | **Note:** Version bump only for package docz-example-css-postcss 57 | 58 | 59 | ## [0.9.5](https://github.com/pedronauck/docz/compare/v0.9.4...v0.9.5) (2018-08-04) 60 | 61 | 62 | 63 | 64 | **Note:** Version bump only for package docz-example-css-postcss 65 | 66 | 67 | ## [0.9.4](https://github.com/pedronauck/docz/compare/v0.9.4-beta.1...v0.9.4) (2018-08-04) 68 | 69 | 70 | 71 | 72 | **Note:** Version bump only for package docz-example-css-postcss 73 | 74 | 75 | ## [0.9.3](https://github.com/pedronauck/docz/compare/v0.9.2...v0.9.3) (2018-08-03) 76 | 77 | 78 | 79 | 80 | **Note:** Version bump only for package docz-example-css-postcss 81 | 82 | 83 | ## [0.9.2](https://github.com/pedronauck/docz/compare/v0.9.1...v0.9.2) (2018-08-02) 84 | 85 | 86 | 87 | 88 | **Note:** Version bump only for package docz-example-css-postcss 89 | 90 | 91 | ## [0.9.1](https://github.com/pedronauck/docz/compare/v0.9.0...v0.9.1) (2018-08-02) 92 | 93 | 94 | 95 | 96 | **Note:** Version bump only for package docz-example-css-postcss 97 | 98 | 99 | # [0.9.0](https://github.com/pedronauck/docz/compare/v0.9.0-beta.1...v0.9.0) (2018-08-02) 100 | 101 | 102 | 103 | 104 | **Note:** Version bump only for package docz-example-css-postcss 105 | 106 | 107 | # [0.9.0-beta.1](https://github.com/pedronauck/docz/compare/v0.9.0-beta.0...v0.9.0-beta.1) (2018-08-01) 108 | 109 | 110 | 111 | 112 | **Note:** Version bump only for package docz-example-css-postcss 113 | 114 | 115 | # [0.9.0-beta.0](https://github.com/pedronauck/docz/compare/v0.8.0...v0.9.0-beta.0) (2018-08-01) 116 | 117 | 118 | 119 | 120 | **Note:** Version bump only for package docz-example-css-postcss 121 | 122 | 123 | # [0.8.0](https://github.com/pedronauck/docz/compare/v0.7.1...v0.8.0) (2018-07-28) 124 | 125 | 126 | 127 | 128 | **Note:** Version bump only for package docz-example-css-postcss 129 | 130 | 131 | ## [0.7.1](https://github.com/pedronauck/docz/compare/v0.7.0...v0.7.1) (2018-07-24) 132 | 133 | 134 | 135 | 136 | **Note:** Version bump only for package docz-example-css-postcss 137 | 138 | 139 | # [0.7.0](https://github.com/pedronauck/docz/compare/v0.6.2...v0.7.0) (2018-07-23) 140 | 141 | 142 | 143 | 144 | **Note:** Version bump only for package docz-example-css-postcss 145 | 146 | 147 | ## [0.6.2](https://github.com/pedronauck/docz/compare/v0.6.1...v0.6.2) (2018-07-20) 148 | 149 | 150 | 151 | 152 | **Note:** Version bump only for package docz-example-css-postcss 153 | 154 | 155 | ## [0.6.1](https://github.com/pedronauck/docz/compare/v0.6.0...v0.6.1) (2018-07-19) 156 | 157 | 158 | 159 | 160 | **Note:** Version bump only for package docz-example-css-postcss 161 | 162 | 163 | # [0.6.0](https://github.com/pedronauck/docz/compare/v0.5.9...v0.6.0) (2018-07-19) 164 | 165 | 166 | 167 | 168 | **Note:** Version bump only for package docz-example-css-postcss 169 | 170 | 171 | ## [0.5.9](https://github.com/pedronauck/docz/compare/v0.5.8...v0.5.9) (2018-07-16) 172 | 173 | 174 | 175 | 176 | **Note:** Version bump only for package docz-example-css-postcss 177 | 178 | 179 | ## [0.5.8](https://github.com/pedronauck/docz/compare/v0.5.7...v0.5.8) (2018-07-11) 180 | 181 | 182 | 183 | 184 | **Note:** Version bump only for package docz-example-css-postcss 185 | 186 | 187 | ## [0.5.7](https://github.com/pedronauck/docz/compare/v0.5.6...v0.5.7) (2018-07-11) 188 | 189 | 190 | 191 | 192 | **Note:** Version bump only for package docz-example-css-postcss 193 | 194 | 195 | ## [0.5.6](https://github.com/pedronauck/docz/compare/v0.5.5...v0.5.6) (2018-07-11) 196 | 197 | 198 | 199 | 200 | **Note:** Version bump only for package docz-example-css-postcss 201 | 202 | 203 | ## [0.5.5](https://github.com/pedronauck/docz/compare/v0.5.4...v0.5.5) (2018-07-07) 204 | 205 | 206 | 207 | 208 | **Note:** Version bump only for package docz-example-css-postcss 209 | 210 | 211 | ## [0.5.4](https://github.com/pedronauck/docz/compare/v0.5.3...v0.5.4) (2018-07-07) 212 | 213 | 214 | 215 | 216 | **Note:** Version bump only for package docz-example-css-postcss 217 | 218 | 219 | ## [0.5.3](https://github.com/pedronauck/docz/compare/v0.5.2...v0.5.3) (2018-07-05) 220 | 221 | 222 | 223 | 224 | **Note:** Version bump only for package docz-example-css-postcss 225 | 226 | 227 | ## [0.5.2](https://github.com/pedronauck/docz/compare/v0.5.1...v0.5.2) (2018-07-05) 228 | 229 | 230 | 231 | 232 | **Note:** Version bump only for package docz-example-css-postcss 233 | 234 | 235 | ## [0.5.1](https://github.com/pedronauck/docz/compare/v0.3.4...v0.5.1) (2018-07-03) 236 | 237 | 238 | 239 | 240 | **Note:** Version bump only for package docz-example-css-postcss 241 | 242 | 243 | # [0.5.0](https://github.com/pedronauck/docz/compare/v0.3.4...v0.5.0) (2018-07-03) 244 | 245 | 246 | 247 | 248 | **Note:** Version bump only for package docz-example-css-postcss 249 | 250 | 251 | # [0.4.0](https://github.com/pedronauck/docz/compare/v0.3.4...v0.4.0) (2018-06-30) 252 | 253 | 254 | 255 | 256 | **Note:** Version bump only for package docz-example-css-postcss 257 | 258 | 259 | ## [0.3.4](https://github.com/pedronauck/docz/compare/v0.3.3...v0.3.4) (2018-06-26) 260 | 261 | 262 | 263 | 264 | **Note:** Version bump only for package docz-example-css-postcss 265 | 266 | 267 | ## [0.3.3](https://github.com/pedronauck/docz/compare/v0.3.2...v0.3.3) (2018-06-26) 268 | 269 | 270 | 271 | 272 | **Note:** Version bump only for package docz-example-css-postcss 273 | 274 | 275 | ## [0.3.2](https://github.com/pedronauck/docz/compare/v0.3.1...v0.3.2) (2018-06-25) 276 | 277 | 278 | 279 | 280 | **Note:** Version bump only for package docz-example-css-postcss 281 | 282 | 283 | ## [0.3.1](https://github.com/pedronauck/docz/compare/v0.2.11...v0.3.1) (2018-06-25) 284 | 285 | 286 | ### Features 287 | 288 | * **docz-default-theme:** dark mode and responsiveness ([#87](https://github.com/pedronauck/docz/issues/87)) ([a4db115](https://github.com/pedronauck/docz/commit/a4db115)), closes [#81](https://github.com/pedronauck/docz/issues/81) 289 | 290 | 291 | 292 | 293 | 294 | # [0.3.0](https://github.com/pedronauck/docz/compare/v0.3.0-beta.0...v0.3.0) (2018-06-25) 295 | 296 | 297 | 298 | 299 | **Note:** Version bump only for package docz-example-css-postcss 300 | 301 | 302 | # [0.3.0-beta.0](https://github.com/pedronauck/docz/compare/v0.2.11...v0.3.0-beta.0) (2018-06-25) 303 | 304 | 305 | 306 | 307 | **Note:** Version bump only for package docz-example-css-postcss 308 | 309 | 310 | ## [0.2.11](https://github.com/pedronauck/docz/compare/v0.2.10...v0.2.11) (2018-06-22) 311 | 312 | 313 | ### Bug Fixes 314 | 315 | * some changes on css examples ([058660f](https://github.com/pedronauck/docz/commit/058660f)) 316 | 317 | 318 | 319 | 320 | 321 | ## [0.2.10](https://github.com/pedronauck/docz/compare/v0.2.9...v0.2.10) (2018-06-21) 322 | 323 | 324 | ### Features 325 | 326 | * **docz-plugin-css:** add initial version ([#78](https://github.com/pedronauck/docz/issues/78)) ([299372e](https://github.com/pedronauck/docz/commit/299372e)) 327 | -------------------------------------------------------------------------------- /examples/css-postcss/doczrc.js: -------------------------------------------------------------------------------- 1 | import { css } from 'docz-plugin-css' 2 | 3 | export default { 4 | title: 'CSS PostCSS', 5 | plugins: [ 6 | css({ 7 | preprocessor: 'postcss', 8 | cssmodules: true, 9 | }), 10 | ], 11 | } 12 | -------------------------------------------------------------------------------- /examples/css-postcss/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "docz-example-css-postcss", 3 | "version": "0.11.0", 4 | "license": "MIT", 5 | "scripts": { 6 | "dev": "docz dev", 7 | "build": "docz build" 8 | }, 9 | "dependencies": { 10 | "classnames": "^2.2.6", 11 | "prop-types": "^15.6.2", 12 | "react": "^16.5.0", 13 | "react-dom": "^16.5.0" 14 | }, 15 | "devDependencies": { 16 | "docz": "^0.11.0", 17 | "docz-plugin-css": "^0.11.0" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/css-postcss/src/components/Alert.jsx: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from 'react' 2 | import cx from 'classnames' 3 | import t from 'prop-types' 4 | 5 | import styles from './Alert.module.css' 6 | 7 | export const Alert = ({ children, kind }) => ( 8 |
13 | {children} 14 |
15 | ) 16 | 17 | Alert.propTypes = { 18 | kind: t.oneOf(['info', 'positive', 'negative', 'warning']), 19 | } 20 | 21 | Alert.defaultProps = { 22 | kind: 'info', 23 | } 24 | -------------------------------------------------------------------------------- /examples/css-postcss/src/components/Alert.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: Alert 3 | menu: Components 4 | --- 5 | 6 | import { Playground, PropsTable } from 'docz' 7 | import { Alert } from './Alert' 8 | 9 | # Alert 10 | 11 | ## Properties 12 | 13 | 14 | 15 | ## Basic usage 16 | 17 | 18 | Some message 19 | 20 | 21 | ## Using different kinds 22 | 23 | 24 | Some message 25 | Some message 26 | Some message 27 | Some message 28 | 29 | 30 | ## Use with children as a function 31 | 32 | 33 | {() => { 34 | const message = 'Hello world' 35 | 36 | return ( 37 | {message} 38 | ) 39 | }} 40 | 41 | -------------------------------------------------------------------------------- /examples/css-postcss/src/components/Alert.module.css: -------------------------------------------------------------------------------- 1 | .alert { 2 | padding: 15px 20px; 3 | background: white; 4 | border-radius: 3px; 5 | color: white; 6 | } 7 | 8 | .info { 9 | background: #5352ED; 10 | } 11 | 12 | .positive { 13 | background: #2ED573; 14 | } 15 | 16 | .negative { 17 | background: #FF4757; 18 | } 19 | 20 | .warning { 21 | background: #FFA502; 22 | } 23 | -------------------------------------------------------------------------------- /examples/css-postcss/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: white; 3 | } 4 | -------------------------------------------------------------------------------- /examples/css-postcss/src/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: Getting Started 3 | route: / 4 | order: 1 5 | --- 6 | 7 | import './index.css' 8 | 9 | # Getting Started 10 | 11 | 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. 12 | 13 | Regardless of the technologies and tools behind them, a successful design system follows these guiding principles: 14 | 15 | - **It’s consistent**. The way components are built and managed follows a predictable pattern. 16 | - **It’s self-contained**. Your design system is treated as a standalone dependency. 17 | - **It’s reusable**. You’ve built components so they can be reused in many contexts. 18 | - **It’s accessible**. Applications built with your design system are usable by as many people as possible, no matter how they access the web. 19 | - **It’s robust**. No matter the product or platform to which your design system is applied, it should perform with grace and minimal bugs. 20 | 21 | ## Consistency 22 | 23 | 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. 24 | -------------------------------------------------------------------------------- /examples/css-sass/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | 7 | # [0.11.0](https://github.com/pedronauck/docz/compare/v0.10.3...v0.11.0) (2018-09-02) 8 | 9 | 10 | ### Features 11 | 12 | * **docz:** move docz/docz-core to dev dependency on examples ([e7153a4](https://github.com/pedronauck/docz/commit/e7153a4)) 13 | 14 | 15 | 16 | 17 | 18 | 19 | ## [0.10.3](https://github.com/pedronauck/docz/compare/v0.9.6...v0.10.3) (2018-08-16) 20 | 21 | 22 | 23 | 24 | **Note:** Version bump only for package docz-example-css-sass 25 | 26 | 27 | ## [0.10.2](https://github.com/pedronauck/docz/compare/v0.10.1...v0.10.2) (2018-08-13) 28 | 29 | 30 | 31 | 32 | **Note:** Version bump only for package docz-example-css-sass 33 | 34 | 35 | ## [0.10.1](https://github.com/pedronauck/docz/compare/v0.10.0...v0.10.1) (2018-08-13) 36 | 37 | 38 | 39 | 40 | **Note:** Version bump only for package docz-example-css-sass 41 | 42 | 43 | # [0.10.0](https://github.com/pedronauck/docz/compare/v0.9.6...v0.10.0) (2018-08-13) 44 | 45 | 46 | 47 | 48 | **Note:** Version bump only for package docz-example-css-sass 49 | 50 | 51 | ## [0.9.6](https://github.com/pedronauck/docz/compare/v0.9.5...v0.9.6) (2018-08-06) 52 | 53 | 54 | 55 | 56 | **Note:** Version bump only for package docz-example-css-sass 57 | 58 | 59 | ## [0.9.5](https://github.com/pedronauck/docz/compare/v0.9.4...v0.9.5) (2018-08-04) 60 | 61 | 62 | 63 | 64 | **Note:** Version bump only for package docz-example-css-sass 65 | 66 | 67 | ## [0.9.4](https://github.com/pedronauck/docz/compare/v0.9.4-beta.1...v0.9.4) (2018-08-04) 68 | 69 | 70 | 71 | 72 | **Note:** Version bump only for package docz-example-css-sass 73 | 74 | 75 | ## [0.9.3](https://github.com/pedronauck/docz/compare/v0.9.2...v0.9.3) (2018-08-03) 76 | 77 | 78 | 79 | 80 | **Note:** Version bump only for package docz-example-css-sass 81 | 82 | 83 | ## [0.9.2](https://github.com/pedronauck/docz/compare/v0.9.1...v0.9.2) (2018-08-02) 84 | 85 | 86 | 87 | 88 | **Note:** Version bump only for package docz-example-css-sass 89 | 90 | 91 | ## [0.9.1](https://github.com/pedronauck/docz/compare/v0.9.0...v0.9.1) (2018-08-02) 92 | 93 | 94 | 95 | 96 | **Note:** Version bump only for package docz-example-css-sass 97 | 98 | 99 | # [0.9.0](https://github.com/pedronauck/docz/compare/v0.9.0-beta.1...v0.9.0) (2018-08-02) 100 | 101 | 102 | 103 | 104 | **Note:** Version bump only for package docz-example-css-sass 105 | 106 | 107 | # [0.9.0-beta.1](https://github.com/pedronauck/docz/compare/v0.9.0-beta.0...v0.9.0-beta.1) (2018-08-01) 108 | 109 | 110 | 111 | 112 | **Note:** Version bump only for package docz-example-css-sass 113 | 114 | 115 | # [0.9.0-beta.0](https://github.com/pedronauck/docz/compare/v0.8.0...v0.9.0-beta.0) (2018-08-01) 116 | 117 | 118 | 119 | 120 | **Note:** Version bump only for package docz-example-css-sass 121 | 122 | 123 | # [0.8.0](https://github.com/pedronauck/docz/compare/v0.7.1...v0.8.0) (2018-07-28) 124 | 125 | 126 | 127 | 128 | **Note:** Version bump only for package docz-example-css-sass 129 | 130 | 131 | ## [0.7.1](https://github.com/pedronauck/docz/compare/v0.7.0...v0.7.1) (2018-07-24) 132 | 133 | 134 | 135 | 136 | **Note:** Version bump only for package docz-example-css-sass 137 | 138 | 139 | # [0.7.0](https://github.com/pedronauck/docz/compare/v0.6.2...v0.7.0) (2018-07-23) 140 | 141 | 142 | 143 | 144 | **Note:** Version bump only for package docz-example-css-sass 145 | 146 | 147 | ## [0.6.2](https://github.com/pedronauck/docz/compare/v0.6.1...v0.6.2) (2018-07-20) 148 | 149 | 150 | 151 | 152 | **Note:** Version bump only for package docz-example-css-sass 153 | 154 | 155 | ## [0.6.1](https://github.com/pedronauck/docz/compare/v0.6.0...v0.6.1) (2018-07-19) 156 | 157 | 158 | 159 | 160 | **Note:** Version bump only for package docz-example-css-sass 161 | 162 | 163 | # [0.6.0](https://github.com/pedronauck/docz/compare/v0.5.9...v0.6.0) (2018-07-19) 164 | 165 | 166 | 167 | 168 | **Note:** Version bump only for package docz-example-css-sass 169 | 170 | 171 | ## [0.5.9](https://github.com/pedronauck/docz/compare/v0.5.8...v0.5.9) (2018-07-16) 172 | 173 | 174 | 175 | 176 | **Note:** Version bump only for package docz-example-css-sass 177 | 178 | 179 | ## [0.5.8](https://github.com/pedronauck/docz/compare/v0.5.7...v0.5.8) (2018-07-11) 180 | 181 | 182 | 183 | 184 | **Note:** Version bump only for package docz-example-css-sass 185 | 186 | 187 | ## [0.5.7](https://github.com/pedronauck/docz/compare/v0.5.6...v0.5.7) (2018-07-11) 188 | 189 | 190 | 191 | 192 | **Note:** Version bump only for package docz-example-css-sass 193 | 194 | 195 | ## [0.5.6](https://github.com/pedronauck/docz/compare/v0.5.5...v0.5.6) (2018-07-11) 196 | 197 | 198 | 199 | 200 | **Note:** Version bump only for package docz-example-css-sass 201 | 202 | 203 | ## [0.5.5](https://github.com/pedronauck/docz/compare/v0.5.4...v0.5.5) (2018-07-07) 204 | 205 | 206 | 207 | 208 | **Note:** Version bump only for package docz-example-css-sass 209 | 210 | 211 | ## [0.5.4](https://github.com/pedronauck/docz/compare/v0.5.3...v0.5.4) (2018-07-07) 212 | 213 | 214 | 215 | 216 | **Note:** Version bump only for package docz-example-css-sass 217 | 218 | 219 | ## [0.5.3](https://github.com/pedronauck/docz/compare/v0.5.2...v0.5.3) (2018-07-05) 220 | 221 | 222 | 223 | 224 | **Note:** Version bump only for package docz-example-css-sass 225 | 226 | 227 | ## [0.5.2](https://github.com/pedronauck/docz/compare/v0.5.1...v0.5.2) (2018-07-05) 228 | 229 | 230 | 231 | 232 | **Note:** Version bump only for package docz-example-css-sass 233 | 234 | 235 | ## [0.5.1](https://github.com/pedronauck/docz/compare/v0.3.4...v0.5.1) (2018-07-03) 236 | 237 | 238 | 239 | 240 | **Note:** Version bump only for package docz-example-css-sass 241 | 242 | 243 | # [0.5.0](https://github.com/pedronauck/docz/compare/v0.3.4...v0.5.0) (2018-07-03) 244 | 245 | 246 | 247 | 248 | **Note:** Version bump only for package docz-example-css-sass 249 | 250 | 251 | # [0.4.0](https://github.com/pedronauck/docz/compare/v0.3.4...v0.4.0) (2018-06-30) 252 | 253 | 254 | 255 | 256 | **Note:** Version bump only for package docz-example-css-sass 257 | 258 | 259 | ## [0.3.4](https://github.com/pedronauck/docz/compare/v0.3.3...v0.3.4) (2018-06-26) 260 | 261 | 262 | 263 | 264 | # [0.3.0](https://github.com/pedronauck/docz/compare/v0.3.0-beta.0...v0.3.0) (2018-06-25) 265 | 266 | 267 | 268 | 269 | # [0.3.0-beta.0](https://github.com/pedronauck/docz/compare/v0.2.11...v0.3.0-beta.0) (2018-06-25) 270 | 271 | 272 | 273 | 274 | **Note:** Version bump only for package docz-example-css-sass 275 | 276 | 277 | ## [0.3.3](https://github.com/pedronauck/docz/compare/v0.3.2...v0.3.3) (2018-06-26) 278 | 279 | 280 | 281 | 282 | **Note:** Version bump only for package docz-example-css-sass 283 | 284 | 285 | ## [0.3.2](https://github.com/pedronauck/docz/compare/v0.3.1...v0.3.2) (2018-06-25) 286 | 287 | 288 | 289 | 290 | **Note:** Version bump only for package docz-example-css-sass 291 | 292 | 293 | ## [0.3.1](https://github.com/pedronauck/docz/compare/v0.2.11...v0.3.1) (2018-06-25) 294 | 295 | 296 | ### Features 297 | 298 | * **docz-default-theme:** dark mode and responsiveness ([#87](https://github.com/pedronauck/docz/issues/87)) ([a4db115](https://github.com/pedronauck/docz/commit/a4db115)), closes [#81](https://github.com/pedronauck/docz/issues/81) 299 | 300 | 301 | 302 | 303 | 304 | # [0.3.0](https://github.com/pedronauck/docz/compare/v0.3.0-beta.0...v0.3.0) (2018-06-25) 305 | 306 | 307 | 308 | 309 | **Note:** Version bump only for package docz-example-css-sass 310 | 311 | 312 | # [0.3.0-beta.0](https://github.com/pedronauck/docz/compare/v0.2.11...v0.3.0-beta.0) (2018-06-25) 313 | 314 | 315 | 316 | 317 | **Note:** Version bump only for package docz-example-css-sass 318 | 319 | 320 | ## [0.2.11](https://github.com/pedronauck/docz/compare/v0.2.10...v0.2.11) (2018-06-22) 321 | 322 | 323 | ### Bug Fixes 324 | 325 | * some changes on css examples ([058660f](https://github.com/pedronauck/docz/commit/058660f)) 326 | 327 | 328 | 329 | 330 | 331 | ## [0.2.10](https://github.com/pedronauck/docz/compare/v0.2.9...v0.2.10) (2018-06-21) 332 | 333 | 334 | ### Features 335 | 336 | * **docz-plugin-css:** add initial version ([#78](https://github.com/pedronauck/docz/issues/78)) ([299372e](https://github.com/pedronauck/docz/commit/299372e)) 337 | -------------------------------------------------------------------------------- /examples/css-sass/doczrc.js: -------------------------------------------------------------------------------- 1 | import { css } from 'docz-plugin-css' 2 | 3 | export default { 4 | title: 'CSS Sass', 5 | plugins: [ 6 | css({ 7 | preprocessor: 'sass', 8 | cssmodules: true, 9 | }), 10 | ], 11 | } 12 | -------------------------------------------------------------------------------- /examples/css-sass/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "docz-example-css-sass", 3 | "version": "0.11.0", 4 | "license": "MIT", 5 | "scripts": { 6 | "dev": "docz dev", 7 | "build": "docz build" 8 | }, 9 | "dependencies": { 10 | "classnames": "^2.2.6", 11 | "prop-types": "^15.6.2", 12 | "react": "^16.5.0", 13 | "react-dom": "^16.5.0" 14 | }, 15 | "devDependencies": { 16 | "docz": "^0.11.0", 17 | "docz-plugin-css": "^0.11.0" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/css-sass/src/components/Alert.jsx: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from 'react' 2 | import cx from 'classnames' 3 | import t from 'prop-types' 4 | 5 | import styles from './Alert.module.scss' 6 | 7 | export const Alert = ({ children, kind }) => ( 8 |
13 | {children} 14 |
15 | ) 16 | 17 | Alert.propTypes = { 18 | kind: t.oneOf(['info', 'positive', 'negative', 'warning']), 19 | } 20 | 21 | Alert.defaultProps = { 22 | kind: 'info', 23 | } 24 | -------------------------------------------------------------------------------- /examples/css-sass/src/components/Alert.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: Alert 3 | menu: Components 4 | --- 5 | 6 | import { Playground, PropsTable } from 'docz' 7 | import { Alert } from './Alert' 8 | 9 | # Alert 10 | 11 | ## Properties 12 | 13 | 14 | 15 | ## Basic usage 16 | 17 | 18 | Some message 19 | 20 | 21 | ## Using different kinds 22 | 23 | 24 | Some message 25 | Some message 26 | Some message 27 | Some message 28 | 29 | 30 | ## Use with children as a function 31 | 32 | 33 | {() => { 34 | const message = 'Hello world' 35 | 36 | return ( 37 | {message} 38 | ) 39 | }} 40 | 41 | -------------------------------------------------------------------------------- /examples/css-sass/src/components/Alert.module.scss: -------------------------------------------------------------------------------- 1 | .alert { 2 | padding: 15px 20px; 3 | background: white; 4 | border-radius: 3px; 5 | color: white; 6 | } 7 | 8 | .info { 9 | background: #5352ED; 10 | } 11 | 12 | .positive { 13 | background: #2ED573; 14 | } 15 | 16 | .negative { 17 | background: #FF4757; 18 | } 19 | 20 | .warning { 21 | background: #FFA502; 22 | } 23 | -------------------------------------------------------------------------------- /examples/css-sass/src/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: Getting Started 3 | route: / 4 | order: 1 5 | --- 6 | 7 | import './index.scss' 8 | 9 | # Getting Started 10 | 11 | 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. 12 | 13 | Regardless of the technologies and tools behind them, a successful design system follows these guiding principles: 14 | 15 | - **It’s consistent**. The way components are built and managed follows a predictable pattern. 16 | - **It’s self-contained**. Your design system is treated as a standalone dependency. 17 | - **It’s reusable**. You’ve built components so they can be reused in many contexts. 18 | - **It’s accessible**. Applications built with your design system are usable by as many people as possible, no matter how they access the web. 19 | - **It’s robust**. No matter the product or platform to which your design system is applied, it should perform with grace and minimal bugs. 20 | 21 | ## Consistency 22 | 23 | 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. 24 | -------------------------------------------------------------------------------- /examples/css-sass/src/index.scss: -------------------------------------------------------------------------------- 1 | body { 2 | background: white; 3 | } 4 | -------------------------------------------------------------------------------- /examples/css-stylus/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | 7 | # [0.11.0](https://github.com/pedronauck/docz/compare/v0.10.3...v0.11.0) (2018-09-02) 8 | 9 | 10 | ### Features 11 | 12 | * **docz:** move docz/docz-core to dev dependency on examples ([e7153a4](https://github.com/pedronauck/docz/commit/e7153a4)) 13 | 14 | 15 | 16 | 17 | 18 | 19 | ## [0.10.3](https://github.com/pedronauck/docz/compare/v0.9.6...v0.10.3) (2018-08-16) 20 | 21 | 22 | 23 | 24 | **Note:** Version bump only for package docz-example-css-stylus 25 | 26 | 27 | ## [0.10.2](https://github.com/pedronauck/docz/compare/v0.10.1...v0.10.2) (2018-08-13) 28 | 29 | 30 | 31 | 32 | **Note:** Version bump only for package docz-example-css-stylus 33 | 34 | 35 | ## [0.10.1](https://github.com/pedronauck/docz/compare/v0.10.0...v0.10.1) (2018-08-13) 36 | 37 | 38 | 39 | 40 | **Note:** Version bump only for package docz-example-css-stylus 41 | 42 | 43 | # [0.10.0](https://github.com/pedronauck/docz/compare/v0.9.6...v0.10.0) (2018-08-13) 44 | 45 | 46 | 47 | 48 | **Note:** Version bump only for package docz-example-css-stylus 49 | 50 | 51 | ## [0.9.6](https://github.com/pedronauck/docz/compare/v0.9.5...v0.9.6) (2018-08-06) 52 | 53 | 54 | 55 | 56 | **Note:** Version bump only for package docz-example-css-stylus 57 | 58 | 59 | ## [0.9.5](https://github.com/pedronauck/docz/compare/v0.9.4...v0.9.5) (2018-08-04) 60 | 61 | 62 | 63 | 64 | **Note:** Version bump only for package docz-example-css-stylus 65 | 66 | 67 | ## [0.9.4](https://github.com/pedronauck/docz/compare/v0.9.4-beta.1...v0.9.4) (2018-08-04) 68 | 69 | 70 | 71 | 72 | **Note:** Version bump only for package docz-example-css-stylus 73 | 74 | 75 | ## [0.9.3](https://github.com/pedronauck/docz/compare/v0.9.2...v0.9.3) (2018-08-03) 76 | 77 | 78 | 79 | 80 | **Note:** Version bump only for package docz-example-css-stylus 81 | 82 | 83 | ## [0.9.2](https://github.com/pedronauck/docz/compare/v0.9.1...v0.9.2) (2018-08-02) 84 | 85 | 86 | 87 | 88 | **Note:** Version bump only for package docz-example-css-stylus 89 | 90 | 91 | ## [0.9.1](https://github.com/pedronauck/docz/compare/v0.9.0...v0.9.1) (2018-08-02) 92 | 93 | 94 | 95 | 96 | **Note:** Version bump only for package docz-example-css-stylus 97 | 98 | 99 | # [0.9.0](https://github.com/pedronauck/docz/compare/v0.9.0-beta.1...v0.9.0) (2018-08-02) 100 | 101 | 102 | 103 | 104 | **Note:** Version bump only for package docz-example-css-stylus 105 | 106 | 107 | # [0.9.0-beta.1](https://github.com/pedronauck/docz/compare/v0.9.0-beta.0...v0.9.0-beta.1) (2018-08-01) 108 | 109 | 110 | 111 | 112 | **Note:** Version bump only for package docz-example-css-stylus 113 | 114 | 115 | # [0.9.0-beta.0](https://github.com/pedronauck/docz/compare/v0.8.0...v0.9.0-beta.0) (2018-08-01) 116 | 117 | 118 | 119 | 120 | **Note:** Version bump only for package docz-example-css-stylus 121 | 122 | 123 | # [0.8.0](https://github.com/pedronauck/docz/compare/v0.7.1...v0.8.0) (2018-07-28) 124 | 125 | 126 | 127 | 128 | **Note:** Version bump only for package docz-example-css-stylus 129 | 130 | 131 | ## [0.7.1](https://github.com/pedronauck/docz/compare/v0.7.0...v0.7.1) (2018-07-24) 132 | 133 | 134 | 135 | 136 | **Note:** Version bump only for package docz-example-css-stylus 137 | 138 | 139 | # [0.7.0](https://github.com/pedronauck/docz/compare/v0.6.2...v0.7.0) (2018-07-23) 140 | 141 | 142 | 143 | 144 | **Note:** Version bump only for package docz-example-css-stylus 145 | 146 | 147 | ## [0.6.2](https://github.com/pedronauck/docz/compare/v0.6.1...v0.6.2) (2018-07-20) 148 | 149 | 150 | 151 | 152 | **Note:** Version bump only for package docz-example-css-stylus 153 | 154 | 155 | ## [0.6.1](https://github.com/pedronauck/docz/compare/v0.6.0...v0.6.1) (2018-07-19) 156 | 157 | 158 | 159 | 160 | **Note:** Version bump only for package docz-example-css-stylus 161 | 162 | 163 | # [0.6.0](https://github.com/pedronauck/docz/compare/v0.5.9...v0.6.0) (2018-07-19) 164 | 165 | 166 | 167 | 168 | **Note:** Version bump only for package docz-example-css-stylus 169 | 170 | 171 | ## [0.5.9](https://github.com/pedronauck/docz/compare/v0.5.8...v0.5.9) (2018-07-16) 172 | 173 | 174 | 175 | 176 | **Note:** Version bump only for package docz-example-css-stylus 177 | 178 | 179 | ## [0.5.8](https://github.com/pedronauck/docz/compare/v0.5.7...v0.5.8) (2018-07-11) 180 | 181 | 182 | 183 | 184 | **Note:** Version bump only for package docz-example-css-stylus 185 | 186 | 187 | ## [0.5.7](https://github.com/pedronauck/docz/compare/v0.5.6...v0.5.7) (2018-07-11) 188 | 189 | 190 | 191 | 192 | **Note:** Version bump only for package docz-example-css-stylus 193 | 194 | 195 | ## [0.5.6](https://github.com/pedronauck/docz/compare/v0.5.5...v0.5.6) (2018-07-11) 196 | 197 | 198 | 199 | 200 | **Note:** Version bump only for package docz-example-css-stylus 201 | 202 | 203 | ## [0.5.5](https://github.com/pedronauck/docz/compare/v0.5.4...v0.5.5) (2018-07-07) 204 | 205 | 206 | 207 | 208 | **Note:** Version bump only for package docz-example-css-stylus 209 | 210 | 211 | ## [0.5.4](https://github.com/pedronauck/docz/compare/v0.5.3...v0.5.4) (2018-07-07) 212 | 213 | 214 | 215 | 216 | **Note:** Version bump only for package docz-example-css-stylus 217 | 218 | 219 | ## [0.5.3](https://github.com/pedronauck/docz/compare/v0.5.2...v0.5.3) (2018-07-05) 220 | 221 | 222 | 223 | 224 | **Note:** Version bump only for package docz-example-css-stylus 225 | 226 | 227 | ## [0.5.2](https://github.com/pedronauck/docz/compare/v0.5.1...v0.5.2) (2018-07-05) 228 | 229 | 230 | 231 | 232 | **Note:** Version bump only for package docz-example-css-stylus 233 | 234 | 235 | ## [0.5.1](https://github.com/pedronauck/docz/compare/v0.3.4...v0.5.1) (2018-07-03) 236 | 237 | 238 | 239 | 240 | **Note:** Version bump only for package docz-example-css-stylus 241 | 242 | 243 | # [0.5.0](https://github.com/pedronauck/docz/compare/v0.3.4...v0.5.0) (2018-07-03) 244 | 245 | 246 | 247 | 248 | **Note:** Version bump only for package docz-example-css-stylus 249 | 250 | 251 | # [0.4.0](https://github.com/pedronauck/docz/compare/v0.3.4...v0.4.0) (2018-06-30) 252 | 253 | 254 | 255 | 256 | **Note:** Version bump only for package docz-example-css-stylus 257 | 258 | 259 | ## [0.3.4](https://github.com/pedronauck/docz/compare/v0.3.3...v0.3.4) (2018-06-26) 260 | 261 | 262 | 263 | 264 | **Note:** Version bump only for package docz-example-css-stylus 265 | 266 | 267 | ## [0.3.3](https://github.com/pedronauck/docz/compare/v0.3.2...v0.3.3) (2018-06-26) 268 | 269 | 270 | 271 | 272 | **Note:** Version bump only for package docz-example-css-stylus 273 | 274 | 275 | ## [0.3.2](https://github.com/pedronauck/docz/compare/v0.3.1...v0.3.2) (2018-06-25) 276 | 277 | 278 | 279 | 280 | **Note:** Version bump only for package docz-example-css-stylus 281 | 282 | 283 | ## [0.3.1](https://github.com/pedronauck/docz/compare/v0.2.11...v0.3.1) (2018-06-25) 284 | 285 | 286 | ### Features 287 | 288 | * **docz-default-theme:** dark mode and responsiveness ([#87](https://github.com/pedronauck/docz/issues/87)) ([a4db115](https://github.com/pedronauck/docz/commit/a4db115)), closes [#81](https://github.com/pedronauck/docz/issues/81) 289 | 290 | 291 | 292 | 293 | 294 | # [0.3.0](https://github.com/pedronauck/docz/compare/v0.3.0-beta.0...v0.3.0) (2018-06-25) 295 | 296 | 297 | 298 | 299 | **Note:** Version bump only for package docz-example-css-stylus 300 | 301 | 302 | # [0.3.0-beta.0](https://github.com/pedronauck/docz/compare/v0.2.11...v0.3.0-beta.0) (2018-06-25) 303 | 304 | 305 | 306 | 307 | **Note:** Version bump only for package docz-example-css-stylus 308 | 309 | 310 | ## [0.2.11](https://github.com/pedronauck/docz/compare/v0.2.10...v0.2.11) (2018-06-22) 311 | 312 | 313 | ### Bug Fixes 314 | 315 | * some changes on css examples ([058660f](https://github.com/pedronauck/docz/commit/058660f)) 316 | 317 | 318 | 319 | 320 | 321 | ## [0.2.10](https://github.com/pedronauck/docz/compare/v0.2.9...v0.2.10) (2018-06-21) 322 | 323 | 324 | ### Features 325 | 326 | * **docz-plugin-css:** add initial version ([#78](https://github.com/pedronauck/docz/issues/78)) ([299372e](https://github.com/pedronauck/docz/commit/299372e)) 327 | -------------------------------------------------------------------------------- /examples/css-stylus/doczrc.js: -------------------------------------------------------------------------------- 1 | import { css } from 'docz-plugin-css' 2 | 3 | export default { 4 | plugins: [ 5 | title: 'CSS Styles', 6 | css({ 7 | preprocessor: 'stylus', 8 | cssmodules: true, 9 | }), 10 | ], 11 | } 12 | -------------------------------------------------------------------------------- /examples/css-stylus/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "docz-example-css-stylus", 3 | "version": "0.11.0", 4 | "license": "MIT", 5 | "scripts": { 6 | "dev": "docz dev", 7 | "build": "docz build" 8 | }, 9 | "dependencies": { 10 | "classnames": "^2.2.6", 11 | "prop-types": "^15.6.2", 12 | "react": "^16.5.0", 13 | "react-dom": "^16.5.0" 14 | }, 15 | "devDependencies": { 16 | "docz": "^0.11.0", 17 | "docz-plugin-css": "^0.11.0" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/css-stylus/src/components/Alert.jsx: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from 'react' 2 | import cx from 'classnames' 3 | import t from 'prop-types' 4 | 5 | import styles from './Alert.module.styl' 6 | 7 | export const Alert = ({ children, kind }) => ( 8 |
13 | {children} 14 |
15 | ) 16 | 17 | Alert.propTypes = { 18 | kind: t.oneOf(['info', 'positive', 'negative', 'warning']), 19 | } 20 | 21 | Alert.defaultProps = { 22 | kind: 'info', 23 | } 24 | -------------------------------------------------------------------------------- /examples/css-stylus/src/components/Alert.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: Alert 3 | menu: Components 4 | --- 5 | 6 | import { Playground, PropsTable } from 'docz' 7 | import { Alert } from './Alert' 8 | 9 | # Alert 10 | 11 | ## Properties 12 | 13 | 14 | 15 | ## Basic usage 16 | 17 | 18 | Some message 19 | 20 | 21 | ## Using different kinds 22 | 23 | 24 | Some message 25 | Some message 26 | Some message 27 | Some message 28 | 29 | 30 | ## Use with children as a function 31 | 32 | 33 | {() => { 34 | const message = 'Hello world' 35 | 36 | return ( 37 | {message} 38 | ) 39 | }} 40 | 41 | -------------------------------------------------------------------------------- /examples/css-stylus/src/components/Alert.module.styl: -------------------------------------------------------------------------------- 1 | .alert { 2 | padding: 15px 20px; 3 | background: white; 4 | border-radius: 3px; 5 | color: white; 6 | } 7 | 8 | .info { 9 | background: #5352ED; 10 | } 11 | 12 | .positive { 13 | background: #2ED573; 14 | } 15 | 16 | .negative { 17 | background: #FF4757; 18 | } 19 | 20 | .warning { 21 | background: #FFA502; 22 | } 23 | -------------------------------------------------------------------------------- /examples/css-stylus/src/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: Getting Started 3 | route: / 4 | order: 1 5 | --- 6 | 7 | import './index.styl' 8 | 9 | # Getting Started 10 | 11 | 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. 12 | 13 | Regardless of the technologies and tools behind them, a successful design system follows these guiding principles: 14 | 15 | - **It’s consistent**. The way components are built and managed follows a predictable pattern. 16 | - **It’s self-contained**. Your design system is treated as a standalone dependency. 17 | - **It’s reusable**. You’ve built components so they can be reused in many contexts. 18 | - **It’s accessible**. Applications built with your design system are usable by as many people as possible, no matter how they access the web. 19 | - **It’s robust**. No matter the product or platform to which your design system is applied, it should perform with grace and minimal bugs. 20 | 21 | ## Consistency 22 | 23 | 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. 24 | -------------------------------------------------------------------------------- /examples/css-stylus/src/index.styl: -------------------------------------------------------------------------------- 1 | body { 2 | background: white; 3 | } 4 | -------------------------------------------------------------------------------- /librc.js: -------------------------------------------------------------------------------- 1 | const pkg = require('./package.json') 2 | 3 | module.exports = { 4 | external: Object.keys(pkg.dependencies).concat([ 5 | 'react-dev-utils/getCSSModuleLocalIdent', 6 | ]), 7 | } 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "docz-plugin-css", 3 | "version": "0.11.0", 4 | "description": "This package makes it possible to use preprocessors and css modules on docz", 5 | "license": "MIT", 6 | "main": "dist/index.js", 7 | "umd:main": "dist/index.umd.js", 8 | "module": "dist/index.m.js", 9 | "typings": "dist/index.d.ts", 10 | "source": "src/index.ts", 11 | "homepage": "https://docz.site", 12 | "repository": { 13 | "type": "git", 14 | "url": "git://github.com/pedronauck/docz-plugin-css.git" 15 | }, 16 | "bugs": { 17 | "url": "https://github.com/pedronauck/docz-plugin-css/issues" 18 | }, 19 | "files": [ 20 | "dist/", 21 | "package.json", 22 | "README.md" 23 | ], 24 | "scripts": { 25 | "dev": "libundler watch --ts", 26 | "build": "libundler build --ts --c", 27 | "fix": "run-s fix:*", 28 | "fix:prettier": "prettier \"src/**/*.{ts,tsx}\" --write", 29 | "fix:tslint": "tslint --fix --project .", 30 | "tslint": "tslint --project ." 31 | }, 32 | "dependencies": { 33 | "autoprefixer": "^9.1.5", 34 | "css-loader": "^1.0.0", 35 | "deepmerge": "^2.1.1", 36 | "docz-core": "^0.11.0", 37 | "less": "^3.8.1", 38 | "less-loader": "^4.1.0", 39 | "loader-utils": "^1.1.0", 40 | "mini-css-extract-plugin": "^0.4.2", 41 | "node-sass": "^4.9.3", 42 | "optimize-css-assets-webpack-plugin": "^5.0.1", 43 | "postcss": "^7.0.2", 44 | "postcss-flexbugs-fixes": "^4.1.0", 45 | "postcss-loader": "^3.0.0", 46 | "sass-loader": "^7.1.0", 47 | "style-loader": "^0.23.0", 48 | "stylus": "^0.54.5", 49 | "stylus-loader": "^3.0.2", 50 | "webpack": "^4.17.2", 51 | "webpack-chain": "^4.10.0" 52 | }, 53 | "devDependencies": { 54 | "libundler": "^1.7.1", 55 | "lint-staged": "^7.2.2", 56 | "npm-run-all": "^4.1.3", 57 | "prettier": "^1.14.2", 58 | "trash-cli": "^1.4.0", 59 | "tslint": "^5.11.0", 60 | "tslint-config-prettier": "^1.15.0", 61 | "typescript": "^2.9.2" 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /src/get-local-ident.ts: -------------------------------------------------------------------------------- 1 | import loaderUtils from 'loader-utils' 2 | 3 | export const getLocalIdent = ( 4 | context: any, 5 | localIdentName: any, 6 | localName: any, 7 | options: any 8 | ) => { 9 | // Use the filename or folder name, based on some uses the index.js / index.module.(css|scss|sass) project style 10 | const fileNameOrFolder = context.resourcePath.match( 11 | /index\.module\.(css|scss|sass)$/ 12 | ) 13 | ? '[folder]' 14 | : '[name]' 15 | // Create a hash based on a the file location and class name. Will be unique across a project, and close to globally unique. 16 | const hash = loaderUtils.getHashDigest( 17 | context.resourcePath + localName, 18 | 'md5', 19 | 'base64', 20 | 5 21 | ) 22 | // Use loaderUtils to find the file or folder name 23 | const className = loaderUtils.interpolateName( 24 | context, 25 | fileNameOrFolder + '_' + localName + '__' + hash, 26 | options 27 | ) 28 | // remove the .module that appears in every classname when based on the file. 29 | return className.replace('.module_', '_') 30 | } 31 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import { createPlugin } from 'docz-core' 2 | import MiniCssExtractPlugin from 'mini-css-extract-plugin' 3 | import OptimizeCSSAssetsPlugin from 'optimize-css-assets-webpack-plugin' 4 | import merge from 'deepmerge' 5 | 6 | import { getLocalIdent } from './get-local-ident' 7 | 8 | /** 9 | * Tests 10 | */ 11 | 12 | type PreProcessor = 'postcss' | 'sass' | 'less' | 'stylus' 13 | const tests: Record = { 14 | postcss: /(\.module)?\.css$/, 15 | sass: /(\.module)?\.s(a|c)ss$/, 16 | less: /(\.module)?\.less$/, 17 | stylus: /(\.module)?\.styl(us)?$/, 18 | } 19 | 20 | /** 21 | * Loaders 22 | */ 23 | 24 | export interface Opts { 25 | [key: string]: any 26 | } 27 | 28 | const getStyleLoaders = (loader: any, opts: Opts) => ( 29 | cssopts: any, 30 | dev: boolean 31 | ) => { 32 | return [ 33 | { 34 | loader: dev 35 | ? require.resolve('style-loader') 36 | : MiniCssExtractPlugin.loader, 37 | }, 38 | { 39 | loader: require.resolve('css-loader'), 40 | options: cssopts, 41 | }, 42 | { 43 | loader, 44 | options: opts, 45 | }, 46 | ] 47 | } 48 | 49 | const loaders = { 50 | postcss: (opts: Opts = { plugins: [] }) => 51 | getStyleLoaders( 52 | require.resolve('postcss-loader'), 53 | merge(opts, { 54 | plugins: () => { 55 | const defaultPlugins = [ 56 | require('postcss-flexbugs-fixes'), 57 | require('autoprefixer')({ 58 | flexbox: 'no-2009', 59 | }), 60 | ] 61 | 62 | return opts && opts.plugins && Array.isArray(opts.plugins) 63 | ? opts.plugins.concat(defaultPlugins) 64 | : defaultPlugins 65 | }, 66 | }) 67 | ), 68 | 69 | sass: (opts: Opts = {}) => 70 | getStyleLoaders( 71 | require.resolve('sass-loader'), 72 | merge({ indentedSyntax: false }, opts) 73 | ), 74 | 75 | less: (opts: Opts = {}) => 76 | getStyleLoaders(require.resolve('less-loader'), opts), 77 | 78 | stylus: (opts: Opts = {}) => 79 | getStyleLoaders( 80 | require.resolve('stylus-loader'), 81 | merge(opts, { preferPathResolver: 'webpack' }) 82 | ), 83 | } 84 | 85 | /** 86 | * Rules 87 | */ 88 | 89 | const applyRule = ( 90 | opts: CSSPluginOptions, 91 | cssmodules: boolean | undefined, // if cssmodules === undefined, then let webpack decide whether to use CSS modules by itself 92 | dev: boolean 93 | ) => { 94 | const { preprocessor, cssOpts, loaderOpts, ruleOpts } = opts 95 | 96 | const loaderfn = loaders[preprocessor as PreProcessor] 97 | const loader = loaderfn(loaderOpts) 98 | const cssoptions = merge( 99 | cssOpts, 100 | { 101 | importLoaders: 1, 102 | sourceMap: !dev, 103 | ...(cssmodules && { getLocalIdent }), 104 | ...(typeof cssmodules === 'boolean' ? { modules: cssmodules } : {}) 105 | } 106 | ) 107 | 108 | return { 109 | test: tests[preprocessor as PreProcessor], 110 | use: loader(cssoptions, dev), 111 | ...ruleOpts, 112 | } 113 | } 114 | 115 | export interface CSSPluginOptions { 116 | preprocessor?: 'postcss' | 'sass' | 'less' | 'stylus' 117 | cssmodules?: boolean 118 | loaderOpts?: Opts 119 | cssOpts?: Opts 120 | ruleOpts?: Opts 121 | } 122 | 123 | const defaultOpts: Record = { 124 | preprocessor: 'postcss', 125 | cssmodules: undefined, 126 | loadersOpts: {}, 127 | cssOpts: {}, 128 | ruleOpts: {}, 129 | } 130 | 131 | export const css = (opts: CSSPluginOptions = defaultOpts) => 132 | createPlugin({ 133 | modifyBundlerConfig: (config, dev) => { 134 | config.module.rules.push(applyRule(opts, opts.cssmodules, dev)) 135 | 136 | if (!dev) { 137 | const test = tests[opts.preprocessor || ('postcss' as PreProcessor)] 138 | const minimizer = config.optimization.minimizer || [] 139 | const splitChunks = { ...config.optimization.splitChunks } 140 | 141 | config.optimization.minimizer = minimizer.concat([ 142 | new OptimizeCSSAssetsPlugin({}), 143 | ]) 144 | 145 | config.optimization.splitChunks = merge(splitChunks, { 146 | cacheGroups: { 147 | styles: { 148 | test: (m: any) => test.test(m.type), 149 | name: 'styles', 150 | chunks: 'all', 151 | enforce: true, 152 | }, 153 | }, 154 | }) 155 | 156 | config.plugins.push( 157 | new MiniCssExtractPlugin({ 158 | filename: 'static/css/[name].[hash].css', 159 | }) 160 | ) 161 | } 162 | 163 | return config 164 | }, 165 | }) 166 | -------------------------------------------------------------------------------- /src/typed.d.ts: -------------------------------------------------------------------------------- 1 | declare module 'optimize-css-assets-webpack-plugin' 2 | declare module 'mini-css-extract-plugin' 3 | declare module 'loader-utils' 4 | declare module 'deepmerge' 5 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "target": "es2017", 5 | "module": "es2015", 6 | "moduleResolution": "node", 7 | "inlineSourceMap": true, 8 | "allowSyntheticDefaultImports": true, 9 | "jsx": "react", 10 | "strict": true, 11 | "noImplicitAny": true, 12 | "strictNullChecks": true, 13 | "strictFunctionTypes": true, 14 | "strictPropertyInitialization": true, 15 | "noImplicitThis": true, 16 | "alwaysStrict": true, 17 | "noUnusedLocals": true, 18 | "noUnusedParameters": false, 19 | "noImplicitReturns": true, 20 | "noFallthroughCasesInSwitch": true, 21 | "traceResolution": false, 22 | "listEmittedFiles": false, 23 | "listFiles": false, 24 | "pretty": true, 25 | "lib": ["es2017", "dom"], 26 | "outDir": "dist", 27 | "rootDir": "src", 28 | "declaration": true, 29 | "types": ["node"], 30 | "typeRoots": ["node_modules/@types"] 31 | }, 32 | "include": ["src/**/*", "src/types.d.ts"], 33 | "exclude": ["node_modules/**"] 34 | } 35 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["tslint:latest", "tslint-config-prettier"], 3 | "rules": { 4 | "curly": false, 5 | "interface-name": [true, "never-prefix"], 6 | "ordered-imports": false, 7 | "object-literal-sort-keys": false, 8 | "no-console": false, 9 | "no-unused-expression": [true, "allow-fast-null-checks"], 10 | "no-implicit-dependencies": [true, "dev"], 11 | "no-duplicate-imports": false, 12 | "no-submodule-imports": false, 13 | "no-shadowed-variable": false, 14 | "max-classes-per-file": false, 15 | "no-var-keyword": false, 16 | "no-parameter-reassignment": false, 17 | "no-object-literal-type-assertion": false, 18 | "typedef": [true, "call-signature"] 19 | } 20 | } 21 | --------------------------------------------------------------------------------