storybookを作成

- Square
- Board
- Game

src/components/Board.js

@@ -1,7 +1,7 @@
 import Square from './Square';
 import '../App.css';
 
-export default function Board({ xIsNext, squares, onPlay }) {
+function Board({ xIsNext, squares, onPlay }) {
 
   function handleClick(i) {
     if (squares[i] || calculateWinner(squares)) {
@@ -62,4 +62,6 @@ function calculateWinner(squares) {
     }
   }
   return null;
-}
+}
+
+export default Board;

src/components/Game.js

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import '../App.css';
 import Board from './Board';
 
-export default function Game() {
+function Game() {
   const [history, setHistory] = useState([Array(9).fill(null)]);
   const [currentMove, setCurrentMove] = useState(0);
   const xIsNext = currentMove % 2 === 0;
@@ -43,3 +43,5 @@ export default function Game() {
     </div>
   );
 }
+
+export default Game;

src/components/Square.js

@@ -1,5 +1,8 @@
 import '../App.css';
+import PropTypes from 'prop-types';
 
-export default function Square({value, onSquareClick}) {
+function Square({value, onSquareClick}) {
   return (<button className="square" onClick={onSquareClick}>{value}</button>);
 }
+
+export default Square;

src/stories/Board.stories.js

@@ -0,0 +1,64 @@
+import Board from '../components/Board';
+
+export default {
+  title: 'Board',
+  component: Board
+}
+
+const Template = args => <Board {...args} />
+
+export const Empty = Template.bind({})
+Empty.args = {
+  xIsNext: true,
+  squares: Array(9).fill(null),
+  onplay: () => null
+}
+
+export const AllRound = Template.bind({})
+AllRound.args = {
+  xIsNext: true,
+  squares: Array(9).fill('O'),
+  onplay: () => null
+}
+
+export const AllCross = Template.bind({})
+AllCross.args = {
+  xIsNext: true,
+  squares: Array(9).fill('X'),
+  onplay: () => null
+}
+
+export const AllTriangle = Template.bind({})
+AllTriangle.args = {
+  xIsNext: true,
+  squares: Array(9).fill('△'),
+  onplay: () => null
+}
+
+export const RoundAndCross = Template.bind({})
+RoundAndCross.args = {
+  xIsNext: true,
+  squares: ['X', 'O', 'X', 'X', 'O', 'O', 'O', 'X', 'O',],
+  onplay: () => null
+}
+
+export const RoundAndTriangle = Template.bind({})
+RoundAndTriangle.args = {
+  xIsNext: true,
+  squares: ['△', 'O', '△', '△', 'O', 'O', 'O', '△', 'O',],
+  onplay: () => null
+}
+
+export const CrossAndTriangle = Template.bind({})
+CrossAndTriangle.args = {
+  xIsNext: true,
+  squares: ['X', '△', 'X', 'X', '△', '△', '△', 'X', '△',],
+  onplay: () => null
+}
+
+export const RoundAndCrossAndTriangle = Template.bind({})
+RoundAndCrossAndTriangle.args = {
+  xIsNext: true,
+  squares: ['X', 'O', 'O', '△', 'O', '△', 'X', 'X', '△',],
+  onplay: () => null
+}

src/stories/Game.stories.js

@@ -0,0 +1,14 @@
+import Game from '../components/Game';
+import PropTypes from 'prop-types';
+
+export default {
+  title: 'Game',
+  component: Game
+}
+
+const Template = args => <Game {...args} />
+
+export const Empty = Template.bind()
+Empty.args = {
+  value: ''
+}