chore: update example project dependencies and code

Author: strothj

examples/storybook/.storybook/addons.js

@@ -1,2 +1,2 @@
-import '@storybook/addon-actions/register';
-import '@storybook/addon-links/register';
+import "@storybook/addon-actions/register";
+import "@storybook/addon-links/register";

examples/storybook/.storybook/config.js

@@ -1,22 +1,6 @@
-import React from "react";
-import { addDecorator, configure } from "@storybook/react";
+import { configure } from "@storybook/react";
 
-addDecorator(story => (
-  <React.Fragment>
-    <style dangerouslySetInnerHTML={{__html: `
-      html {
-        box-sizing: border-box;
-      }
-
-      *, *:before, *:after {
-        box-sizing: inherit;
-      }
-    `}}/>
-    {story()}
-  </React.Fragment>
-))
-
-// automatically import all files ending in *.stories.js
+// automatically import all files ending in *.stories.tsx
 const req = require.context("../src/components", true, /.stories.tsx$/);
 function loadStories() {
   req.keys().forEach(filename => req(filename));

examples/storybook/.storybook/preview-head.html

@@ -0,0 +1,11 @@
+<style>
+  html {
+    box-sizing: border-box;
+  }
+
+  *,
+  *:before,
+  *:after {
+    box-sizing: inherit;
+  }
+</style>

examples/storybook/.storybook/webpack.config.js

@@ -1,16 +1,6 @@
 const path = require("path");
 
-/**
- * To extend the default Storybook 3 config, it is necessary to import it from
- * the @storybook/react package. Storybook 4 provides the default config as the
- * third parameter to this module's exported function.
- */
-// const genDefaultConfig = require("@storybook/react/dist/server/config/defaults/webpack.config.js");
-
-module.exports = (baseConfig, env, config /* Storybook 4 default config */) => {
-  // Storybook 3 default config
-  // const config = genDefaultConfig(baseConfig);
-
+module.exports = (baseConfig, env, config) => {
   config.module.rules.push({
     test: /\.tsx?$/,
     include: path.resolve(__dirname, "../src"),
@@ -20,24 +10,6 @@ module.exports = (baseConfig, env, config /* Storybook 4 default config */) => {
     ],
   });
 
-  // Just enabling CSS modules here
-  config.module.rules = config.module.rules
-    .filter(r => r.test.toString() !== "/\\.css$/")
-    .concat({
-      test: /\.css$/,
-      use: [
-        {
-          loader: require.resolve("style-loader"),
-        },
-        {
-          loader: require.resolve("css-loader"),
-          options: {
-            modules: true,
-          },
-        },
-      ],
-    });
-
   config.resolve.extensions.push(".ts", ".tsx");
 
   return config;

examples/storybook/package.json

@@ -4,29 +4,27 @@
   "version": "1.0.0",
   "main": "index.js",
   "license": "MIT",
+  "scripts": {
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
+  },
   "dependencies": {
     "react": "^16.5.2",
     "react-dom": "^16.5.2"
   },
-  "scripts": {
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
-    "clean": "rimraf storybook-static"
-  },
   "devDependencies": {
-    "@storybook/addon-actions": "4.0.0-alpha.2",
-    "@storybook/addon-info": "4.0.0-alpha.2",
-    "@storybook/addon-links": "4.0.0-alpha.2",
-    "@storybook/addons": "4.0.0-alpha.2",
-    "@storybook/react": "4.0.0-alpha.2",
+    "@babel/core": "^7.2.2",
+    "@storybook/addon-actions": "4.1.11",
+    "@storybook/addon-info": "4.1.11",
+    "@storybook/addon-links": "4.1.11",
+    "@storybook/addons": "4.1.11",
+    "@storybook/react": "4.1.11",
     "@types/react": "^16.4.14",
     "@types/storybook__addon-actions": "^3.0.3",
     "@types/storybook__addon-info": "^3.4.2",
-    "@types/storybook__react": "^3.0.8",
-    "babel-core": "^6.26.3",
-    "babel-runtime": "^6.26.0",
-    "react-docgen-typescript-loader": "^2.0.3",
-    "rimraf": "^2.6.2",
+    "@types/storybook__react": "^4.0.1",
+    "babel-loader": "^8.0.5",
+    "react-docgen-typescript-loader": "^3.0.1",
     "ts-loader": "^5.1.1",
     "typescript": "^3.0.3"
   }

examples/storybook/src/components/TicTacToeCell/TicTacToeCell.css

@@ -1,4 +1,4 @@
-.button {
+.ttt-cell {
   display: block;
   width: 100%;
   height: 100%;
@@ -11,6 +11,6 @@
   cursor: pointer;
 }
 
-.disabled {
+.ttt-cell--hidden {
   cursor: inherit;
 }

examples/storybook/src/components/TicTacToeCell/TicTacToeCell.stories.tsx

@@ -6,27 +6,27 @@ import { TicTacToeCell } from "./TicTacToeCell";
 
 const stories = storiesOf("Components", module);
 
-stories.add(
-  "TicTacToeCell",
-  withInfo({ inline: true })(() => (
-    <div style={styles.container}>
-      <div style={styles.firstCellContainer}>
-        <TicTacToeCell
-          value="X"
-          position={{ x: 0, y: 0 }}
-          onClick={action("onClick")}
-        />
-      </div>
-      <div style={styles.cellContainer}>
-        <TicTacToeCell
-          value=" "
-          position={{ x: 0, y: 1 }}
-          onClick={action("onClick")}
-        />
-      </div>
+stories.addDecorator(withInfo);
+stories.addParameters({ info: { inline: true } });
+
+stories.add("TicTacToeCell", () => (
+  <div style={styles.container}>
+    <div style={styles.firstCellContainer}>
+      <TicTacToeCell
+        value="X"
+        position={{ x: 0, y: 0 }}
+        onClick={action("onClick")}
+      />
+    </div>
+    <div style={styles.cellContainer}>
+      <TicTacToeCell
+        value=" "
+        position={{ x: 0, y: 1 }}
+        onClick={action("onClick")}
+      />
     </div>
-  )),
-);
+  </div>
+));
 
 const styles: { [key: string]: CSSProperties } = {
   container: {

examples/storybook/src/components/TicTacToeCell/TicTacToeCell.tsx

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
-import * as styles from "./TicTacToeCell.css";
+import "./TicTacToeCell.css";
 
-interface Props {
+export interface TicTacToeCellProps {
   /**
    * Value to display, either empty (" ") or "X" / "O".
    *
@@ -20,7 +20,7 @@ interface Props {
  * TicTacToe game cell. Displays a clickable button when the value is " ",
  * otherwise displays "X" or "O".
  */
-export class TicTacToeCell extends Component<Props> {
+export class TicTacToeCell extends Component<TicTacToeCellProps> {
   handleClick = () => {
     const {
       position: { x, y },
@@ -34,7 +34,7 @@ export class TicTacToeCell extends Component<Props> {
   render() {
     const { value = " " } = this.props;
     const disabled = value !== " ";
-    const classes = `${styles.button} ${disabled ? styles.disabled : ""}`;
+    const classes = `ttt-cell ${disabled ? "ttt-cell--hidden" : ""}`;
 
     return (
       <button

examples/storybook/src/components/TicTacToeCell/index.ts

@@ -1 +1 @@
-export { TicTacToeCell as default } from "./TicTacToeCell";
+export { TicTacToeCell as default, TicTacToeCellProps } from "./TicTacToeCell";

examples/storybook/src/components/TicTacToeGameBoard/TicTacToeGameBoard.css

@@ -1,10 +1,10 @@
-.container {
+.ttt-game-board {
   position: relative;
   padding-bottom: 100%;
   background-color: rgb(72, 78, 104);
 }
 
-.innerContainer {
+.ttt-game-board__content {
   display: flex;
   flex-wrap: wrap;
   position: absolute;
@@ -13,17 +13,17 @@
   padding: 8px;
 }
 
-.cell {
+.ttt-game-board__cell {
   width: calc(100% / 3);
   padding: 8px;
   border: 2px transparent;
 }
 
-.cell:nth-child(3n - 2),
-.cell:nth-child(3n - 1) {
-  border-right-color: #FFC153;
+.ttt-game-board__cell:nth-child(3n - 2),
+.ttt-game-board__cell:nth-child(3n - 1) {
+  border-right-color: #ffc153;
 }
 
-.cell:nth-child(-n + 6) {
-  border-bottom-color: #FFC153;
+.ttt-game-board__cell:nth-child(-n + 6) {
+  border-bottom-color: #ffc153;
 }

examples/storybook/src/components/TicTacToeGameBoard/TicTacToeGameBoard.stories.tsx

@@ -1,44 +1,38 @@
-import React, { SFC, ReactElement } from "react";
+import React, { FC } from "react";
 import { storiesOf } from "@storybook/react";
 import { withInfo } from "@storybook/addon-info";
 import { TicTacToeGameBoard } from "./TicTacToeGameBoard";
-import TicTacToeCell from "../TicTacToeCell";
+import TicTacToeCell, { TicTacToeCellProps } from "../TicTacToeCell";
 
 const stories = storiesOf("Components", module);
 
-stories.add(
-  "TicTacToeGameBoard",
-  withInfo({ inline: true })(() => (
-    <div style={{ display: "flex" }}>
-      <div style={{ width: 300, marginRight: 20 }}>
-        <TicTacToeGameBoard cells={placeholderCells} />
-      </div>
-      <div style={{ width: 300 }}>
-        <TicTacToeGameBoard cells={gameCells} lineStyle="dashed" />
-      </div>
+stories.addDecorator(withInfo);
+stories.addParameters({ info: { inline: true } });
+
+stories.add("TicTacToeGameBoard", () => (
+  <div style={{ display: "flex" }}>
+    <div style={{ width: 300, marginRight: 20 }}>
+      <TicTacToeGameBoard cells={placeholderCells} />
     </div>
-  )),
-);
+    <div style={{ width: 300 }}>
+      <TicTacToeGameBoard cells={gameCells} lineStyle="dashed" />
+    </div>
+  </div>
+));
 
-const PlaceholderCell: SFC<object> = () => (
+const PlaceholderCell: FC = () => (
   <p style={{ margin: 0, color: "#eee" }}>Cell</p>
 );
 
-const placeholderCells: ReactElement<any>[] = [];
-for (let i = 0; i < 9; i += 1) {
-  placeholderCells.push(<PlaceholderCell key={i} />);
-}
+const placeholderCells = Array.from({ length: 9 }, (_, index) => (
+  <PlaceholderCell key={index} />
+));
 
-const gameCells: ReactElement<any>[] = [];
-const gameCellValues = "XOX O O X";
-for (let y = 0; y < 3; y += 1) {
-  for (let x = 0; x < 3; x += 1) {
-    gameCells.push(
-      <TicTacToeCell
-        key={`${x}${y}`}
-        value={gameCellValues.charAt(y * 3 + x) as any}
-        position={{ x, y }}
-      />,
-    );
-  }
-}
+const gameCellValues = "XOX O O X".split("") as TicTacToeCellProps["value"][];
+const gameCells = Array.from(gameCellValues, (char, index) => (
+  <TicTacToeCell
+    key={index}
+    value={char}
+    position={{ x: index % 3, y: index / 3 }}
+  />
+));

examples/storybook/src/components/TicTacToeGameBoard/TicTacToeGameBoard.tsx

@@ -1,5 +1,5 @@
-import React, { ReactElement, SFC } from "react";
-import * as styles from "./TicTacToeGameBoard.css";
+import React, { ReactElement, FC } from "react";
+import "./TicTacToeGameBoard.css";
 
 interface Props {
   /**
@@ -10,7 +10,7 @@ interface Props {
   /**
    * Line style to use when dividing game cells.
    *
-   * @default solid
+   * @default "solid"
    */
   lineStyle?: "solid" | "dashed";
 }
@@ -20,16 +20,16 @@ interface Props {
  * It requires that 9 elements be provided. The game board maintains a 1:1 size
  * ratio.
  */
-export const TicTacToeGameBoard: SFC<Props> = props => {
+export const TicTacToeGameBoard: FC<Props> = props => {
   const { cells, lineStyle = "solid", ...rest } = props;
 
   return (
-    <div className={styles.container} {...rest}>
-      <div className={styles.innerContainer}>
+    <div className="ttt-game-board" {...rest}>
+      <div className="ttt-game-board__content">
         {cells.map((cell, index) => (
           <div
             key={index}
-            className={styles.cell}
+            className="ttt-game-board__cell"
             style={{ borderStyle: lineStyle }}
           >
             {cell}