├── .babelrc ├── .eslintignore ├── .eslintrc ├── .gitignore ├── LICENSE ├── README.markdown ├── assets ├── caralho.png ├── city.jpg ├── code.example ├── config.example ├── deck.example ├── figma.png ├── first-slide.jpeg ├── formidable-logo.svg ├── frameworks.png ├── image.gif ├── interactive.js ├── kat.png ├── kitten.jpg ├── kitten1.jpg ├── markdown.example ├── markdown.png ├── me.jpg ├── second-slide.jpeg ├── soccer.svg ├── story.example ├── storybook-start.png ├── storybook.png ├── styleguide-config.example ├── styleguide.png ├── styleguidist-start.png ├── styleguidist.png └── zombie.svg ├── dist ├── 12e579dbd8f25c1aefebbbb984549e2a.png ├── 17254b66a57f162d663d29e3a9ccc8d1.png ├── 7a499588c9f542c2736ae3e93770437d.gif ├── 8fe4c7b3b1eaece2aa7f5d121a0768a2.png ├── 9fbe5a33c99176cbabf35f789050e011.jpg ├── b3c59d4f892628a3797f77c0902508b9.jpg ├── bundle.js ├── c3972243a5ac062a57d8d999f47a797a.png └── dc1fc4c56aed1be833af6ef12fbf2ead.png ├── index.html ├── index.js ├── package.json ├── presentation └── index.js ├── server.js ├── webpack.config.js ├── webpack.config.production.js ├── yarn-error.log └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ "es2015", { "loose": true, "modules" : false } ], 4 | "stage-0", 5 | "react" 6 | ], 7 | "plugins": [ 8 | "transform-decorators-legacy", 9 | ], 10 | "env": { 11 | "production": { 12 | "plugins": [ 13 | "transform-es2015-modules-commonjs", 14 | "transform-react-remove-prop-types", 15 | "transform-react-constant-elements", 16 | "transform-react-inline-elements", 17 | "transform-runtime", 18 | "transform-decorators-legacy", 19 | ], 20 | }, 21 | "test": { 22 | "plugins": [ 23 | "transform-es2015-modules-commonjs" 24 | ] 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | --- 2 | "extends": 3 | - "formidable/configurations/es6-react" 4 | 5 | "rules": 6 | "indent": [2, 2, {"SwitchCase": 1}] 7 | "max-len": 0 8 | "no-magic-numbers": 0 9 | "react/prefer-es6-class": 0 10 | "react/no-multi-comp": 0 11 | 12 | "env": 13 | "browser": true, 14 | "node": true 15 | "globals": 16 | "afterEach": true, 17 | "describe": true, 18 | "expect": true, 19 | "it": true, 20 | "jest": true, 21 | "test": true 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | npm-debug.log 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2013 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.markdown: -------------------------------------------------------------------------------- 1 | # Styleguide Driven Development 2 | 3 | ## Links 4 | 5 | * [React Styleguidist](https://react-styleguidist.js.org) 6 | * [Storybook](https://storybook.js.org/) 7 | * [Storybook for Vue](https://storybook.js.org/basics/guide-vue/) 8 | * [React Styleguidist Preact](https://react-styleguidist.js.org/docs/cookbook#how-to-use-react-styleguidist-with-preact) 9 | * [React Styleguidist Boilerplate](https://github.com/SaraVieira/react-styleguidist-boilerplate) 10 | * [Storybook Boilerplate](https://github.com/SaraVieira/storybook-boilerplate) 11 | * [Storybook Addons](https://storybook.js.org/addons/addon-gallery/) -------------------------------------------------------------------------------- /assets/caralho.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraVieira/styleguide-driven-development/e9d5026ae3270e82073ed0fa69c2dfc8d228ffde/assets/caralho.png -------------------------------------------------------------------------------- /assets/city.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraVieira/styleguide-driven-development/e9d5026ae3270e82073ed0fa69c2dfc8d228ffde/assets/city.jpg -------------------------------------------------------------------------------- /assets/code.example: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | 4 | import "./Button.css"; 5 | 6 | const Button = ({ onClick, children }) => { 7 | return ( 8 | 14 | ); 15 | }; 16 | 17 | export default Button; 18 | 19 | Button.propTypes = { 20 | /** Button label */ 21 | children: PropTypes.string.isRequired, 22 | /** Gets called when the user clicks on the button */ 23 | onClick: PropTypes.func 24 | }; 25 | 26 | Button.defaultProps = { 27 | onClick: event => { 28 | console.log("You have clicked me!", event.target); 29 | } 30 | }; 31 | -------------------------------------------------------------------------------- /assets/config.example: -------------------------------------------------------------------------------- 1 | import { configure } from '@storybook/react'; 2 | 3 | function loadStories() { 4 | require('../src/stories'); 5 | } 6 | 7 | configure(loadStories, module); 8 | -------------------------------------------------------------------------------- /assets/deck.example: -------------------------------------------------------------------------------- 1 | return ( 2 | 3 | 4 | 5 | React Presentations 6 | 7 | 8 | Written In React 9 | 10 | 11 | 12 | 13 | Wait What? 14 | 15 | 16 | 17 | 18 | Thats right 19 | 20 | 21 | Inline style based theme system 22 | Autofit Text 23 | react-router navigation 24 | PDF Export 25 | 26 | 27 | 28 | ) 29 | -------------------------------------------------------------------------------- /assets/figma.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraVieira/styleguide-driven-development/e9d5026ae3270e82073ed0fa69c2dfc8d228ffde/assets/figma.png -------------------------------------------------------------------------------- /assets/first-slide.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraVieira/styleguide-driven-development/e9d5026ae3270e82073ed0fa69c2dfc8d228ffde/assets/first-slide.jpeg -------------------------------------------------------------------------------- /assets/formidable-logo.svg: -------------------------------------------------------------------------------- 1 | image/svg+xml -------------------------------------------------------------------------------- /assets/frameworks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraVieira/styleguide-driven-development/e9d5026ae3270e82073ed0fa69c2dfc8d228ffde/assets/frameworks.png -------------------------------------------------------------------------------- /assets/image.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraVieira/styleguide-driven-development/e9d5026ae3270e82073ed0fa69c2dfc8d228ffde/assets/image.gif -------------------------------------------------------------------------------- /assets/interactive.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { Heading } from "spectacle"; 3 | 4 | export default class Interactive extends Component { 5 | constructor() { 6 | super(); 7 | this.state = { 8 | count: 0 9 | }; 10 | this.handleClick = this.handleClick.bind(this); 11 | } 12 | handleClick() { 13 | this.setState({ 14 | count: this.state.count + 1 15 | }); 16 | } 17 | render() { 18 | const styles = { 19 | padding: 20, 20 | background: "black", 21 | minWidth: 300, 22 | marginTop: 20, 23 | textTransform: "uppercase", 24 | border: "none", 25 | color: "white", 26 | outline: "none", 27 | fontWeight: "bold", 28 | fontSize: "2em" 29 | }; 30 | return ( 31 |
32 | {this.state.count < 5 ? 33 |
34 | 35 | The button has been clicked {this.state.count} times 36 | 37 | 38 |
: 39 | Easy there pal 40 | } 41 |
42 | ); 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /assets/kat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraVieira/styleguide-driven-development/e9d5026ae3270e82073ed0fa69c2dfc8d228ffde/assets/kat.png -------------------------------------------------------------------------------- /assets/kitten.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraVieira/styleguide-driven-development/e9d5026ae3270e82073ed0fa69c2dfc8d228ffde/assets/kitten.jpg -------------------------------------------------------------------------------- /assets/kitten1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraVieira/styleguide-driven-development/e9d5026ae3270e82073ed0fa69c2dfc8d228ffde/assets/kitten1.jpg -------------------------------------------------------------------------------- /assets/markdown.example: -------------------------------------------------------------------------------- 1 | Basic button: 2 | 3 | ```jsx 4 | 5 | ``` 6 | 7 | Big pink button: 8 | 9 | ```jsx 10 | 11 | ``` 12 | 13 | Or disable an editor by passing a `noeditor` modifier (```` ```js noeditor````): 14 | 15 | ```jsx noeditor 16 | 17 | ``` 18 | 19 | To render an example as highlighted source code add a `static` modifier: (```` ```js static````): 20 | 21 | ```js static 22 | import React from 'react'; 23 | ``` 24 | -------------------------------------------------------------------------------- /assets/markdown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraVieira/styleguide-driven-development/e9d5026ae3270e82073ed0fa69c2dfc8d228ffde/assets/markdown.png -------------------------------------------------------------------------------- /assets/me.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraVieira/styleguide-driven-development/e9d5026ae3270e82073ed0fa69c2dfc8d228ffde/assets/me.jpg -------------------------------------------------------------------------------- /assets/second-slide.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraVieira/styleguide-driven-development/e9d5026ae3270e82073ed0fa69c2dfc8d228ffde/assets/second-slide.jpeg -------------------------------------------------------------------------------- /assets/soccer.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/story.example: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { storiesOf } from "@storybook/react"; 3 | import { action } from "@storybook/addon-actions"; 4 | import Button from "../src/components/Button/Button"; 5 | 6 | storiesOf("Button", module) 7 | .add("with text", () => ( 8 | 9 | )) 10 | .add("with some emoji", () => ( 11 | 12 | )) 13 | .add("with deeppink", () => ( 14 | 17 | )); 18 | -------------------------------------------------------------------------------- /assets/storybook-start.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraVieira/styleguide-driven-development/e9d5026ae3270e82073ed0fa69c2dfc8d228ffde/assets/storybook-start.png -------------------------------------------------------------------------------- /assets/storybook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraVieira/styleguide-driven-development/e9d5026ae3270e82073ed0fa69c2dfc8d228ffde/assets/storybook.png -------------------------------------------------------------------------------- /assets/styleguide-config.example: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | components: "src/components/**/[A-Z]*.js", 3 | defaultExample: true, 4 | title: "Styleguidist Boilerplate", 5 | webpackConfig: { 6 | module: { 7 | rules: [ 8 | { 9 | test: /\.jsx?$/, 10 | exclude: /node_modules/, 11 | loader: "babel-loader" 12 | }, 13 | { 14 | test: /\.css$/, 15 | loader: "style-loader!css-loader" 16 | } 17 | ] 18 | } 19 | } 20 | }; 21 | -------------------------------------------------------------------------------- /assets/styleguide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraVieira/styleguide-driven-development/e9d5026ae3270e82073ed0fa69c2dfc8d228ffde/assets/styleguide.png -------------------------------------------------------------------------------- /assets/styleguidist-start.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraVieira/styleguide-driven-development/e9d5026ae3270e82073ed0fa69c2dfc8d228ffde/assets/styleguidist-start.png -------------------------------------------------------------------------------- /assets/styleguidist.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraVieira/styleguide-driven-development/e9d5026ae3270e82073ed0fa69c2dfc8d228ffde/assets/styleguidist.png -------------------------------------------------------------------------------- /assets/zombie.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/12e579dbd8f25c1aefebbbb984549e2a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraVieira/styleguide-driven-development/e9d5026ae3270e82073ed0fa69c2dfc8d228ffde/dist/12e579dbd8f25c1aefebbbb984549e2a.png -------------------------------------------------------------------------------- /dist/17254b66a57f162d663d29e3a9ccc8d1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraVieira/styleguide-driven-development/e9d5026ae3270e82073ed0fa69c2dfc8d228ffde/dist/17254b66a57f162d663d29e3a9ccc8d1.png -------------------------------------------------------------------------------- /dist/7a499588c9f542c2736ae3e93770437d.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraVieira/styleguide-driven-development/e9d5026ae3270e82073ed0fa69c2dfc8d228ffde/dist/7a499588c9f542c2736ae3e93770437d.gif -------------------------------------------------------------------------------- /dist/8fe4c7b3b1eaece2aa7f5d121a0768a2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraVieira/styleguide-driven-development/e9d5026ae3270e82073ed0fa69c2dfc8d228ffde/dist/8fe4c7b3b1eaece2aa7f5d121a0768a2.png -------------------------------------------------------------------------------- /dist/9fbe5a33c99176cbabf35f789050e011.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraVieira/styleguide-driven-development/e9d5026ae3270e82073ed0fa69c2dfc8d228ffde/dist/9fbe5a33c99176cbabf35f789050e011.jpg -------------------------------------------------------------------------------- /dist/b3c59d4f892628a3797f77c0902508b9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraVieira/styleguide-driven-development/e9d5026ae3270e82073ed0fa69c2dfc8d228ffde/dist/b3c59d4f892628a3797f77c0902508b9.jpg -------------------------------------------------------------------------------- /dist/c3972243a5ac062a57d8d999f47a797a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraVieira/styleguide-driven-development/e9d5026ae3270e82073ed0fa69c2dfc8d228ffde/dist/c3972243a5ac062a57d8d999f47a797a.png -------------------------------------------------------------------------------- /dist/dc1fc4c56aed1be833af6ef12fbf2ead.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraVieira/styleguide-driven-development/e9d5026ae3270e82073ed0fa69c2dfc8d228ffde/dist/dc1fc4c56aed1be833af6ef12fbf2ead.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Styleguide Driven Development 8 | 9 | 10 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import Presentation from "./presentation"; 5 | 6 | render(, document.getElementById("root")); 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "styleguide-driven-development", 3 | "version": "1.0.0", 4 | "description": "Styleguide Driven Development", 5 | "main": "lib/index.js", 6 | "homepage": "https://styleguide-driven-development.now.sh", 7 | "scripts": { 8 | "clean": "rimraf dist", 9 | "build": "cross-env NODE_ENV=production webpack --config webpack.config.production.js", 10 | "lint": "eslint --ext .js,.jsx .", 11 | "deploy": "now", 12 | "start": "cross-env NODE_ENV=development node server.js" 13 | }, 14 | "author": "Sara Vieira", 15 | "license": "MIT", 16 | "dependencies": { 17 | "normalize.css": "3.0.3", 18 | "react": "15.4.2", 19 | "react-dom": "15.4.2", 20 | "spectacle": "2.0.0", 21 | "spectacle-code-slide": "0.4.0", 22 | "spectacle-terminal": "0.3.0" 23 | }, 24 | "devDependencies": { 25 | "babel-cli": "6.16.0", 26 | "babel-core": "6.18.0", 27 | "babel-eslint": "7.0.0", 28 | "babel-loader": "6.2.5", 29 | "babel-plugin-react-transform": "2.0.0-beta1", 30 | "babel-plugin-transform-decorators-legacy": "1.2.0", 31 | "babel-plugin-transform-react-constant-elements": "6.4.0", 32 | "babel-plugin-transform-react-inline-elements": "6.4.0", 33 | "babel-plugin-transform-react-remove-prop-types": "0.2.1", 34 | "babel-plugin-transform-runtime": "6.4.3", 35 | "babel-polyfill": "6.16.0", 36 | "babel-preset-es2015": "6.18.0", 37 | "babel-preset-react": "6.3.13", 38 | "babel-preset-stage-0": "6.3.13", 39 | "babel-runtime": "6.18.0", 40 | "cross-env": "1.0.7", 41 | "css-loader": "0.23.0", 42 | "eslint": "3.8.0", 43 | "eslint-config-formidable": "2.0.1", 44 | "eslint-plugin-filenames": "1.1.0", 45 | "eslint-plugin-import": "2.0.1", 46 | "eslint-plugin-react": "6.4.1", 47 | "express": "4.13.3", 48 | "file-loader": "0.9.0", 49 | "html-loader": "0.4.0", 50 | "is-buffer": "1.1.1", 51 | "markdown-loader": "0.1.7", 52 | "node-libs-browser": "0.5.3", 53 | "raw-loader": "0.5.1", 54 | "react-transform-catch-errors": "1.0.0", 55 | "react-transform-hmr": "1.0.4", 56 | "redbox-react": "1.2.0", 57 | "rimraf": "2.4.4", 58 | "style-loader": "0.13.0", 59 | "url-loader": "0.5.6", 60 | "webpack": "2.2.0", 61 | "webpack-dev-middleware": "1.8.4", 62 | "webpack-hot-middleware": "2.13.0" 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /presentation/index.js: -------------------------------------------------------------------------------- 1 | // Import React 2 | import React from "react"; 3 | import Terminal from "spectacle-terminal"; 4 | import CodeSlide from "spectacle-code-slide"; 5 | 6 | // Import Spectacle Core tags 7 | import { 8 | Layout, 9 | Fit, 10 | Deck, 11 | Heading, 12 | Image, 13 | List, 14 | ListItem, 15 | Slide, 16 | Text, 17 | Appear, 18 | CodePane, 19 | Link 20 | } from "spectacle"; 21 | 22 | // Import image preloader util 23 | import preloader from "spectacle/lib/utils/preloader"; 24 | 25 | // Import theme 26 | import createTheme from "spectacle/lib/themes/default"; 27 | 28 | // Require CSS 29 | require("normalize.css"); 30 | require("spectacle/lib/themes/default/index.css"); 31 | 32 | const images = { 33 | kitten: require("../assets/kitten1.jpg"), 34 | caralho: require("../assets/caralho.png"), 35 | me: require("../assets/me.jpg"), 36 | styleguide: require("../assets/styleguide.png"), 37 | yld: require("../assets/image.gif"), 38 | soccer: require("../assets/soccer.svg"), 39 | zombie: require("../assets/zombie.svg"), 40 | storybook: require("../assets/storybook.png"), 41 | storybookStart: require("../assets/storybook-start.png"), 42 | figma: require("../assets/figma.png"), 43 | frameworks: require("../assets/frameworks.png") 44 | }; 45 | 46 | preloader(images); 47 | 48 | const theme = createTheme( 49 | { 50 | primary: "white", 51 | secondary: "#100830", 52 | tertiary: "#73E9AC", 53 | quartenary: "#9E79F3" 54 | }, 55 | { 56 | primary: "Montserrat", 57 | secondary: "Helvetica" 58 | } 59 | ); 60 | 61 | export default class Presentation extends React.Component { 62 | render() { 63 | return ( 64 | 65 | 70 | 71 | Story Time 72 | 73 | 74 | 75 | How I fell in love with styleguides 76 | 77 | 78 | 79 | 84 | 91 | 92 | 106 | 107 | 108 | 113 | 118 | 119 | 124 | 125 | !important overrides all of this 126 | 127 | 128 | 133 | 134 | How do you override this ? 135 | 136 | 146 | 147 | 153 | 158 | 168 | 169 | 174 | 175 | 176 | 181 | 182 | 183 | 191 | Sara Vieira 192 | Developer Advocate 193 | @NikkitaFTW 194 | 198 | 206 | 207 | Football{" "} 208 | 209 | 210 | 214 | 222 | 223 | Horror Movies 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | StyleGuide Driven Development 236 | 237 | 238 | 239 | 240 | What ? 241 | 242 | How ? 243 | 244 | 245 | Why ? 246 | 247 | 248 | 249 | 250 | 251 | What is styleguide driven development ? 252 | 253 | 254 | 255 | 256 | A change in perspective 257 | 258 | 259 | 264 |
265 | 269 |
270 | 271 | 276 | 277 | 278 | 283 | 284 | Custom CSS is the death of a developer 285 | 286 | 287 | 288 | So is opera mini but that's for another day 289 | 290 | 291 | 292 | 300 |
301 | 302 |
303 | 304 | 305 | 306 | Recap 307 | 308 | 309 | 310 | 311 | Styleguide driven development is a mentality not a skill 312 | 313 | 314 | 315 | 316 | Divide your layouts in building blocks 317 | 318 | 319 | 320 | 321 | Think of your website from a design standpoint and not as 1's as 322 | 0's 323 | 324 | 325 | 326 | 327 | 328 | 329 | How ? 330 | 331 | 332 | 333 | 334 | Storybook 335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 | Quick Start 343 | 344 | > create-react-app my-app, 348 |
> cd my-app
, 349 |
350 | > npm i -g @storybook/cli@rc 351 |
, 352 |
> sb init
, 353 |
> yarn storybook
354 | ]} 355 | /> 356 | 357 | 358 | 363 | Starter 364 | 365 |
366 | 367 |
368 | 369 | 370 | 388 | 389 | 402 | 416 | 428 | 429 | 430 | What makes this tool amazing ? 😍 431 | 432 | 433 | 434 | 435 | An amazing Community 436 | 437 | 438 | 439 | Over 168 PRs merged last month for example by over 50 people 440 | 441 | 442 | 443 | 444 | 445 | No Hate 446 | 447 | 448 | 449 | Support for 10 Frameworks and also plain HTML 450 | 451 | 452 | 453 | 454 | 455 | 456 | 457 | 458 | 459 | 460 | Addons 461 | 462 | 463 | 464 | Official and Community addons for everything 465 | 466 | 467 | 468 | 469 | 470 | Component Isolation 471 | 472 | 473 | 474 | 475 | How to integrate in a project and in a team? 476 | 477 | 478 | 479 | 480 | Developers 481 | 482 | 483 | 484 | 485 | Use within your own repo in a separate folder 486 | 487 | 488 | 489 | 490 | Create an NPM package with versioning and keep updating that 491 | package 492 | 493 | 494 | 495 | 496 | User lerna and create a Monorepo 497 | 498 | 499 | 500 | 501 | 502 | 503 | Designers 504 | 505 | 506 | 507 | 508 | Well, have all design folders in dropbox 509 | 510 | 511 | 512 | 513 | Use Sketch with{" "} 514 | 515 | Cactus 516 | 517 | 518 | 519 | 520 | 521 | Use{" "} 522 | 523 | Figma 524 | 525 | 529 | 530 | 531 | 532 | 533 | 534 | 535 | FRAMER X 536 | 537 | 543 | 544 | 545 | 546 | Why ? 547 | 548 | 549 | 550 | 551 | More maintainable styles 552 | 553 | Less specific bugs 554 | 555 | 556 | One source of truth! 557 | 558 | 559 | Better for unit testing 560 | 561 | 562 | 563 | UI Development is generally better! 564 | 565 | 566 | 567 | 568 | 569 | 570 | Thank you 571 | 572 |
573 | 577 | github.com/SaraVieira/styleguide-driven-development 578 | 579 |
580 | 584 | styleguide-driven-development.now.sh 585 | 586 | 587 | 588 | ); 589 | } 590 | } 591 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | var path = require("path"); 4 | var express = require("express"); 5 | var webpack = require("webpack"); 6 | var config = require("./webpack.config"); 7 | 8 | var app = express(); 9 | var compiler = webpack(config); 10 | 11 | var serverPort = process.env.PORT || 3000; 12 | 13 | app.use(require("webpack-dev-middleware")(compiler, { 14 | noInfo: true, 15 | publicPath: config.output.publicPath 16 | })); 17 | 18 | app.use(require("webpack-hot-middleware")(compiler)); 19 | 20 | app.get("*", function(req, res) { 21 | res.sendFile(path.join(__dirname, "index.html")); 22 | }); 23 | 24 | app.listen(serverPort, "localhost", function (err) { 25 | if (err) { 26 | console.log(err); 27 | return; 28 | } 29 | 30 | console.log("Listening at http://localhost:" + serverPort); 31 | }); 32 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | var path = require("path"); 4 | var webpack = require("webpack"); 5 | 6 | module.exports = { 7 | devtool: "source-map", 8 | entry: ["webpack-hot-middleware/client", "babel-polyfill", "./index"], 9 | output: { 10 | path: path.join(__dirname, "dist"), 11 | filename: "bundle.js", 12 | publicPath: "/dist/" 13 | }, 14 | plugins: [ 15 | new webpack.HotModuleReplacementPlugin(), 16 | new webpack.NoEmitOnErrorsPlugin() 17 | ], 18 | module: { 19 | loaders: [ 20 | { 21 | test: /\.md$/, 22 | loader: "html-loader!markdown-loader?gfm=false" 23 | }, 24 | { 25 | test: /\.(js|jsx)$/, 26 | exclude: /node_modules/, 27 | loader: "babel-loader", 28 | query: { 29 | plugins: [ 30 | [ 31 | "react-transform", 32 | { 33 | transforms: [ 34 | { 35 | transform: "react-transform-hmr", 36 | imports: ["react"], 37 | locals: ["module"] 38 | }, 39 | { 40 | transform: "react-transform-catch-errors", 41 | imports: ["react", "redbox-react"] 42 | } 43 | ] 44 | } 45 | ] 46 | ] 47 | }, 48 | exclude: /node_modules/, 49 | include: __dirname 50 | }, 51 | { 52 | test: /\.css$/, 53 | loaders: ["style-loader", "raw-loader"], 54 | include: __dirname 55 | }, 56 | { 57 | test: /\.svg$/, 58 | loader: "url-loader?limit=10000&mimetype=image/svg+xml", 59 | include: path.join(__dirname, "assets") 60 | }, 61 | { 62 | test: /\.png$/, 63 | loader: "url-loader?mimetype=image/png", 64 | include: path.join(__dirname, "assets") 65 | }, 66 | { 67 | test: /\.gif$/, 68 | loader: "url-loader?mimetype=image/gif", 69 | include: path.join(__dirname, "assets") 70 | }, 71 | { 72 | test: /\.jpg$/, 73 | loader: "url-loader?mimetype=image/jpg", 74 | include: path.join(__dirname, "assets") 75 | }, 76 | { 77 | test: /\.jpeg$/, 78 | loader: "url-loader?mimetype=image/jpg", 79 | include: path.join(__dirname, "assets") 80 | } 81 | ] 82 | } 83 | }; 84 | -------------------------------------------------------------------------------- /webpack.config.production.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | var path = require("path"); 4 | var webpack = require("webpack"); 5 | 6 | module.exports = { 7 | entry: [ 8 | "babel-polyfill", 9 | "./index" 10 | ], 11 | output: { 12 | path: path.join(__dirname, "dist"), 13 | filename: "bundle.js", 14 | publicPath: "/dist/" 15 | }, 16 | plugins: [ 17 | new webpack.DefinePlugin({ 18 | "process.env": { 19 | "NODE_ENV": JSON.stringify("production") 20 | } 21 | }), 22 | new webpack.optimize.UglifyJsPlugin({ 23 | compressor: { 24 | warnings: false 25 | } 26 | }) 27 | ], 28 | module: { 29 | loaders: [{ 30 | test: /\.md$/, 31 | loader: "html-loader!markdown-loader?gfm=false" 32 | }, { 33 | test: /\.(js|jsx)$/, 34 | exclude: /node_modules/, 35 | loader: "babel-loader" 36 | }, { 37 | test: /\.css$/, 38 | loader: "style-loader!css-loader" 39 | }, { 40 | test: /\.(png|jpg|gif)$/, 41 | loader: "url-loader?limit=8192" 42 | }, { 43 | test: /\.svg$/, 44 | loader: "url-loader?limit=10000&mimetype=image/svg+xml" 45 | }] 46 | } 47 | }; 48 | --------------------------------------------------------------------------------