SASS examples ready

chapter07/.flowconfig

@@ -1,4 +1,5 @@
 [ignore]
+.*/node_modules/.*
 
 [include]
 
@@ -11,5 +12,6 @@ unsafe-getters-setters=off
 
 [options]
 include_warnings=true
+module.file_ext=.scss
 
 [strict]

chapter07/config-overrides.js

@@ -1,4 +1,6 @@
 const rewireEslint = require("react-app-rewire-eslint");
+// const rewireSass = require("react-app-rewire-scss");
+
 function overrideEslintOptions(options) {
     // do stuff with the eslint options...
     return options;
@@ -7,6 +9,6 @@ function overrideEslintOptions(options) {
 /* global module */
 module.exports = function override(config, env) {
     config = rewireEslint(config, env, overrideEslintOptions);
+    //    config = rewireSass(config, env);
     return config;
 };
-

chapter07/package.json

@@ -8,26 +8,36 @@
         "@storybook/addon-notes": "^3.4.8",
         "@storybook/react": "^3.4.8",
         "babel-eslint": "^8.2.5",
+        "babel-register": "^6.26.0",
         "eslint": "^5.0.1",
         "eslint-config-recommended": "^3.0.0",
         "eslint-plugin-babel": "^5.1.0",
         "eslint-plugin-flowtype": "^2.49.3",
         "eslint-plugin-react": "^7.10.0",
+        "flow": "^0.2.3",
         "flow-bin": "^0.75.0",
         "flow-typed": "^2.4.0",
         "react-app-rewire-eslint": "^0.2.3",
+        "react-app-rewire-scss": "^1.0.2",
         "react-app-rewired": "^1.5.2"
     },
     "dependencies": {
+        "node-sass-chokidar": "^1.3.0",
+        "npm-run-all": "^4.1.3",
         "react": "^16.4.1",
         "react-dom": "^16.4.1"
     },
     "scripts": {
-        "start": "react-app-rewired start",
-        "build": "react-app-rewired build",
+        "build-css": "node-sass-chokidar src/ -o src/",
+        "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
+        "start-js": "react-app-rewired start",
+        "build-js": "react-app-rewired build",
+        "start": "npm-run-all -p watch-css start-js",
+        "build": "npm-run-all build-css build-js",
         "test": "react-app-rewired test --env=jsdom",
         "eject": "react-app-rewired eject",
-        "storybook": "start-storybook -p 9001 -c .storybook",
+        "storybook-js": "start-storybook -p 9001 -c .storybook",
+        "storybook": "npm-run-all -p watch-css storybook-js",
         "build-storybook": "build-storybook -c .storybook -o out_sb",
         "flow": "flow",
         "addTypes": "flow-typed install"

chapter07/src/App.css

@@ -1,28 +1,24 @@
 .App {
-  text-align: center;
-}
+  text-align: center; }
 
 .App-logo {
   animation: App-logo-spin infinite 20s linear;
-  height: 80px;
-}
+  height: 80px; }
 
 .App-header {
   background-color: #222;
   height: 150px;
   padding: 20px;
-  color: white;
-}
+  color: green; }
 
 .App-title {
-  font-size: 1.5em;
-}
+  font-size: 1.5em; }
 
 .App-intro {
-  font-size: large;
-}
+  font-size: large; }
 
 @keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
+  from {
+    transform: rotate(0deg); }
+  to {
+    transform: rotate(360deg); } }

chapter07/src/App.js

@@ -4,7 +4,7 @@ import React, { Component } from "react";
 import logo from "./logo.svg";
 import "./App.css";
 
-type Props = {}
+type Props = {};
 
 class App extends Component<Props> {
     render() {

chapter07/src/App.scss

@@ -0,0 +1,34 @@
+$micolor: green;
+
+.App {
+    text-align: center;
+}
+
+.App-logo {
+    animation: App-logo-spin infinite 20s linear;
+    height: 80px;
+}
+
+.App-header {
+    background-color: #222;
+    height: 150px;
+    padding: 20px;
+    color: $micolor;
+}
+
+.App-title {
+    font-size: 1.5em;
+}
+
+.App-intro {
+    font-size: large;
+}
+
+@keyframes App-logo-spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}

chapter07/src/components/sassButton/_constants.scss

@@ -0,0 +1,5 @@
+$normalColor: green;
+$normalText: yellow;
+
+$alertColor: red;
+$alertText: white;

chapter07/src/components/sassButton/_mixins.scss

@@ -0,0 +1,12 @@
+@mixin darkenBackground($color) {
+    background-color: $color;
+    &:hover {
+        background-color: darken($color, 25%);
+        transition: all 0.5s ease;
+    }
+}
+
+@mixin coloredBoldText($color) {
+    color: $color;
+    font-weight: bold;
+}

chapter07/src/components/sassButton/index.js

@@ -0,0 +1,34 @@
+/* @flow */
+
+import React from "react";
+import PropTypes from "prop-types";
+import "./styles.css";
+
+export class SassButton extends React.PureComponent<{
+    normal: boolean,
+    buttonText: string,
+    onSelect: void => void
+}> {
+    static propTypes = {
+        normal: PropTypes.bool.isRequired,
+        buttonText: PropTypes.string.isRequired,
+        onSelect: PropTypes.func.isRequired
+    };
+
+    onSelect() {
+        this.props.onSelect();
+    }
+
+    render() {
+        return (
+            <div
+                className={
+                    this.props.normal ? "normalButton" : "alertButton"
+                }
+                onClick={this.onSelect.bind(this)}
+            >
+                <span>{this.props.buttonText}</span>
+            </div>
+        );
+    }
+}

chapter07/src/components/sassButton/sassButton.story.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+
+import { SassButton } from "./";
+
+storiesOf("SASS buttons", module)
+    .add("normal style", () => (
+        <SassButton
+            normal
+            buttonText={"A normal SASSy button!"}
+            onSelect={action("click:normal")}
+        />
+    ))
+    .add("alert style", () => (
+        <SassButton
+            normal={false}
+            buttonText={"An alert SASSy button!"}
+            onSelect={action("click:alert")}
+        />
+    ));

chapter07/src/components/sassButton/styles.css

@@ -0,0 +1,23 @@
+.normalButton, .alertButton {
+  display: inline-block;
+  text-decoration: none;
+  padding: 5px 10px;
+  border-radius: 3px; }
+
+.normalButton {
+  background-color: green; }
+  .normalButton:hover {
+    background-color: #000100;
+    transition: all 0.5s ease; }
+  .normalButton span {
+    color: yellow;
+    font-weight: bold; }
+
+.alertButton {
+  background-color: red; }
+  .alertButton:hover {
+    background-color: maroon;
+    transition: all 0.5s ease; }
+  .alertButton span {
+    color: white;
+    font-weight: bold; }

chapter07/src/components/sassButton/styles.scss

@@ -0,0 +1,29 @@
+@import "_constants.scss";
+// @import "_darken.scss";
+// @import "_coloredText.scss";
+@import "_mixins.scss";
+
+%baseButton {
+    display: inline-block;
+    text-decoration: none;
+    padding: 5px 10px;
+    border-radius: 3px;
+}
+
+.normalButton {
+    @extend %baseButton;
+    @include darkenBackground($normalColor);
+
+    span {
+        @include coloredBoldText($normalText);
+    }
+}
+
+.alertButton {
+    @extend %baseButton;
+    @include darkenBackground($alertColor);
+
+    span {
+        @include coloredBoldText($alertText);
+    }
+}

chapter07/src/index.css

@@ -1,5 +1,4 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: sans-serif;
-}
+  font-family: Helvetica, sans-serif; }

chapter07/src/index.js

@@ -1,8 +1,8 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import registerServiceWorker from './registerServiceWorker';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./App.scss";
+import App from "./App";
+import registerServiceWorker from "./registerServiceWorker";
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<App />, document.getElementById("root"));
 registerServiceWorker();

chapter07/src/index.scss

@@ -0,0 +1,8 @@
+$font-stack: Helvetica, sans-serif;
+$real-margin: 0;
+
+body {
+    margin: $real-margin;
+    padding: 0;
+    font-family: $font-stack;
+}