diff --git a/examples/storybook/.storybook/addons.js b/examples/storybook/.storybook/addons.js index 6aed412..a36dde0 100644 --- a/examples/storybook/.storybook/addons.js +++ b/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"; diff --git a/examples/storybook/.storybook/config.js b/examples/storybook/.storybook/config.js index 41a2346..0ddce34 100644 --- a/examples/storybook/.storybook/config.js +++ b/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 => ( - - diff --git a/examples/storybook/.storybook/webpack.config.js b/examples/storybook/.storybook/webpack.config.js index d38e24a..dd913f8 100644 --- a/examples/storybook/.storybook/webpack.config.js +++ b/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; diff --git a/examples/storybook/package.json b/examples/storybook/package.json index d6a74d6..935a1c8 100644 --- a/examples/storybook/package.json +++ b/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" } diff --git a/examples/storybook/src/components/TicTacToeCell/TicTacToeCell.css b/examples/storybook/src/components/TicTacToeCell/TicTacToeCell.css index c4771d1..95d1d05 100644 --- a/examples/storybook/src/components/TicTacToeCell/TicTacToeCell.css +++ b/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; } diff --git a/examples/storybook/src/components/TicTacToeCell/TicTacToeCell.stories.tsx b/examples/storybook/src/components/TicTacToeCell/TicTacToeCell.stories.tsx index e68e07b..e22fa54 100644 --- a/examples/storybook/src/components/TicTacToeCell/TicTacToeCell.stories.tsx +++ b/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 })(() => ( -
-
- -
-
- -
+stories.addDecorator(withInfo); +stories.addParameters({ info: { inline: true } }); + +stories.add("TicTacToeCell", () => ( +
+
+ +
+
+
- )), -); +
+)); const styles: { [key: string]: CSSProperties } = { container: { diff --git a/examples/storybook/src/components/TicTacToeCell/TicTacToeCell.tsx b/examples/storybook/src/components/TicTacToeCell/TicTacToeCell.tsx index bbaeb0e..41c19a9 100644 --- a/examples/storybook/src/components/TicTacToeCell/TicTacToeCell.tsx +++ b/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 { +export class TicTacToeCell extends Component { handleClick = () => { const { position: { x, y }, @@ -34,7 +34,7 @@ export class TicTacToeCell extends Component { render() { const { value = " " } = this.props; const disabled = value !== " "; - const classes = `${styles.button} ${disabled ? styles.disabled : ""}`; + const classes = `ttt-cell ${disabled ? "ttt-cell--hidden" : ""}`; return (