kokopu-react 1.2.0 → 1.3.0

package/CHANGELOG.md

@@ -1,6 +1,11 @@
 ChangeLog
 =========
 
+1.3.0 (September 26, 2021)
+--------------------------
+* Expose component `ErrorBox`.
+* Minor fixes in documentation.
+
 1.2.0 (September 13, 2021)
 --------------------------
 * Fix ambiguous castling move issue at Chess960.

package/dist/lib/Chessboard.js

@@ -21,7 +21,9 @@ var _piecesets2 = _interopRequireDefault(require("./impl/piecesets"));
 
 var _ArrowTip = _interopRequireDefault(require("./impl/ArrowTip"));
 
-var _ErrorBox = _interopRequireDefault(require("./impl/ErrorBox"));
+var _ErrorBox = _interopRequireDefault(require("./ErrorBox"));
+
+var _i18n = _interopRequireDefault(require("./i18n"));
 
 var _markers = require("./markers");
 
@@ -133,12 +135,12 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
 
       if (info.positionError) {
         return /*#__PURE__*/_react["default"].createElement(_ErrorBox["default"], {
-          title: "Error while analysing a FEN string.",
+          title: _i18n["default"].INVALID_FEN_ERROR_TITLE,
           message: info.message
         });
       } else if (info.moveError) {
         return /*#__PURE__*/_react["default"].createElement(_ErrorBox["default"], {
-          title: "Invalid move notation.",
+          title: _i18n["default"].INVALID_NOTATION_ERROR_TITLE,
           message: info.message
         });
       }
@@ -1317,7 +1319,7 @@ function parsePosition(position) {
   } else {
     return {
       error: true,
-      message: 'Invalid "position" attribute.'
+      message: _i18n["default"].INVALID_POSITION_ATTRIBUTE_ERROR_MESSAGE
     };
   }
 }
@@ -1352,7 +1354,7 @@ function parseMove(position, move) {
   } else {
     return {
       error: true,
-      message: 'Invalid "move" attribute.'
+      message: _i18n["default"].INVALID_MOVE_ATTRIBUTE_ERROR_MESSAGE
     };
   }
 }

package/dist/lib/{impl/ErrorBox.js → ErrorBox.js}

@@ -9,7 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireDefault(require("react"));
 
-require("../css/error_box.css");
+require("./css/error_box.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 

package/dist/lib/i18n.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+/******************************************************************************
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    Copyright (C) 2021  Yoann Le Montagner <yo35 -at- melix.net>            *
+ *                                                                            *
+ *    This program is free software: you can redistribute it and/or           *
+ *    modify it under the terms of the GNU Lesser General Public License      *
+ *    as published by the Free Software Foundation, either version 3 of       *
+ *    the License, or (at your option) any later version.                     *
+ *                                                                            *
+ *    This program is distributed in the hope that it will be useful,         *
+ *    but WITHOUT ANY WARRANTY; without even the implied warranty of          *
+ *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the            *
+ *    GNU Lesser General Public License for more details.                     *
+ *                                                                            *
+ *    You should have received a copy of the GNU Lesser General               *
+ *    Public License along with this program. If not, see                     *
+ *    <http://www.gnu.org/licenses/>.                                         *
+ *                                                                            *
+ ******************************************************************************/
+var i18n = {
+  INVALID_FEN_ERROR_TITLE: 'Invalid FEN string.',
+  INVALID_NOTATION_ERROR_TITLE: 'Invalid move notation.',
+  INVALID_POSITION_ATTRIBUTE_ERROR_MESSAGE: 'Invalid "position" attribute.',
+  INVALID_MOVE_ATTRIBUTE_ERROR_MESSAGE: 'Invalid "move" attribute.'
+};
+var _default = i18n;
+exports["default"] = _default;

package/dist/lib/index.js

@@ -39,6 +39,12 @@ Object.defineProperty(exports, "parseArrowMarkers", {
     return _markers.parseArrowMarkers;
   }
 });
+Object.defineProperty(exports, "i18n", {
+  enumerable: true,
+  get: function get() {
+    return _i18n["default"];
+  }
+});
 Object.defineProperty(exports, "Chessboard", {
   enumerable: true,
   get: function get() {
@@ -66,6 +72,8 @@ Object.defineProperty(exports, "ArrowMarkerIcon", {
 
 var _markers = require("./markers");
 
+var _i18n = _interopRequireDefault(require("./i18n"));
+
 var _Chessboard = _interopRequireDefault(require("./Chessboard"));
 
 var _SquareMarkerIcon = _interopRequireDefault(require("./SquareMarkerIcon"));

package/doc_src/demo/PageChessboardBase.js

@@ -25,15 +25,18 @@ import React from 'react';
 import { Chessboard } from '../../src/index';
 import { buildComponentDemoCode } from './util';
 
-import Box from '@material-ui/core/Box';
-import Button from '@material-ui/core/Button';
-import ButtonGroup from '@material-ui/core/ButtonGroup';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import MenuItem from '@material-ui/core/MenuItem';
-import Select from '@material-ui/core/Select';
-import Slider from '@material-ui/core/Slider';
-import Switch from '@material-ui/core/Switch';
-import Typography from '@material-ui/core/Typography';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import ButtonGroup from '@mui/material/ButtonGroup';
+import FormControl from '@mui/material/FormControl';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
+import Slider from '@mui/material/Slider';
+import Stack from '@mui/material/Stack';
+import Switch from '@mui/material/Switch';
+import Typography from '@mui/material/Typography';
 
 import './demo.css';
 
@@ -59,17 +62,17 @@ export default class Page extends React.Component {
 
 	render() {
 		return (
-			<div>
+			<Stack spacing={2} mt={2}>
 				{this.renderControls()}
 				{this.renderChessboard()}
 				{this.renderCode()}
-			</div>
+			</Stack>
 		);
 	}
 
 	renderControls() {
 		return (<>
-			<Box my={2}>
+			<Stack direction="row" spacing={2} alignItems="center">
 				<FormControlLabel label="Flip"
 					control={<Switch checked={this.state.flipped} onChange={() => this.set('flipped', !this.state.flipped)} color="primary" />}
 				/>
@@ -79,42 +82,40 @@ export default class Page extends React.Component {
 				<FormControlLabel label="Show annotations"
 					control={<Switch checked={this.state.annotationVisible} onChange={() => this.set('annotationVisible', !this.state.annotationVisible)} color="primary" />}
 				/>
-			</Box>
-			<Box my={2}>
+			</Stack>
+			<Box>
 				<Typography gutterBottom>Square size</Typography>
 				<Slider
 					value={this.state.squareSize} onChange={(_, newValue) => this.set('squareSize', newValue)}
 					min={Chessboard.minSquareSize()} max={Chessboard.maxSquareSize()} step={1} valueLabelDisplay="on" color="primary"
 				/>
 			</Box>
-			<Box my={2} display="flex" flexDirection="row" alignItems="center">
-				<Box mr={2}>
-					<Typography>Colorset</Typography>
-					<Select value={this.state.colorset} onChange={evt => this.set('colorset', evt.target.value)}>
+			<Stack direction="row" spacing={2} alignItems="center">
+				<FormControl variant="standard">
+					<InputLabel id="colorset-label">Colorset</InputLabel>
+					<Select labelId="colorset-label" sx={{ width: '8em' }} value={this.state.colorset} onChange={evt => this.set('colorset', evt.target.value)}>
 						{Object.keys(Chessboard.colorsets()).sort().map(colorset => <MenuItem key={colorset} value={colorset}>{colorset}</MenuItem>)}
 					</Select>
-				</Box>
-				<Box mx={2}>
-					<Typography>Pieceset</Typography>
-					<Select value={this.state.pieceset} onChange={evt => this.set('pieceset', evt.target.value)}>
+				</FormControl>
+				<FormControl variant="standard">
+					<InputLabel id="pieceset-label">Pieceset</InputLabel>
+					<Select labelId="pieceset-label" sx={{ width: '8em' }} value={this.state.pieceset} onChange={evt => this.set('pieceset', evt.target.value)}>
 						{Object.keys(Chessboard.piecesets()).sort().map(pieceset => <MenuItem key={pieceset} value={pieceset}>{pieceset}</MenuItem>)}
 					</Select>
-				</Box>
-				<Box ml={2}>
-					<ButtonGroup color="primary" size="small">
-						<Button onClick={() => this.set('position', 'empty')}>Clear</Button>
-						<Button onClick={() => this.set('position', 'start')}>Reset</Button>
-						<Button onClick={() => this.set('position', '8/8/8/8/8/4k3/q7/4K3 b - - 0 1')}>Set FEN</Button>
-						<Button onClick={() => this.set('position', 'I\'m an invalid FEN string')}>Set ill-formed FEN</Button>
-					</ButtonGroup>
-				</Box>
-			</Box>
+				</FormControl>
+				<ButtonGroup color="primary" size="small">
+					<Button onClick={() => this.set('position', 'empty')}>Clear</Button>
+					<Button onClick={() => this.set('position', 'start')}>Reset</Button>
+					<Button onClick={() => this.set('position', '8/8/8/8/8/4k3/q7/4K3 b - - 0 1')}>Set FEN</Button>
+					<Button onClick={() => this.set('position', 'I\'m an invalid FEN string')}>Set ill-formed FEN</Button>
+				</ButtonGroup>
+			</Stack>
 		</>);
 	}
 
 	renderChessboard() {
 		return (
-			<Box my={2}>
+			<Box>
 				<Chessboard
 					position={this.state.position}
 					flipped={this.state.flipped}
@@ -145,13 +146,7 @@ export default class Page extends React.Component {
 		attributes.push(`coordinateVisible={${this.state.coordinateVisible}}`);
 		attributes.push(`colorset="${this.state.colorset}"`);
 		attributes.push(`pieceset="${this.state.pieceset}"`);
-		return (
-			<Box my={2}>
-				<pre className="kokopu-demoCode">
-					{buildComponentDemoCode('Chessboard', attributes)}
-				</pre>
-			</Box>
-		);
+		return <pre className="kokopu-demoCode">{buildComponentDemoCode('Chessboard', attributes)}</pre>;
 	}
 
 	set(attributeName, newValue) {

package/doc_src/demo/PageChessboardEdition.js

@@ -26,18 +26,19 @@ import kokopu from 'kokopu';
 import { Chessboard, SquareMarkerIcon, TextMarkerIcon, ArrowMarkerIcon, flattenSquareMarkers, flattenTextMarkers, flattenArrowMarkers } from '../../src/index';
 import { buildComponentDemoCode } from './util';
 
-import Box from '@material-ui/core/Box';
-import Button from '@material-ui/core/Button';
-import ButtonGroup from '@material-ui/core/ButtonGroup';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import MenuItem from '@material-ui/core/MenuItem';
-import Radio from '@material-ui/core/Radio';
-import RadioGroup from '@material-ui/core/RadioGroup';
-import Select from '@material-ui/core/Select';
-import Switch from '@material-ui/core/Switch';
-import ToggleButton from '@material-ui/lab/ToggleButton';
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
-import Typography from '@material-ui/core/Typography';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import ButtonGroup from '@mui/material/ButtonGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import MenuItem from '@mui/material/MenuItem';
+import Radio from '@mui/material/Radio';
+import RadioGroup from '@mui/material/RadioGroup';
+import Select from '@mui/material/Select';
+import Stack from '@mui/material/Stack';
+import Switch from '@mui/material/Switch';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import Typography from '@mui/material/Typography';
 
 import './demo.css';
 
@@ -68,55 +69,53 @@ export default class Page extends React.Component {
 
 	render() {
 		return (
-			<div>
+			<Stack spacing={2} mt={2}>
 				{this.renderControls()}
 				{this.renderChessboard()}
 				{this.renderCode()}
-			</div>
+			</Stack>
 		);
 	}
 
 	renderControls() {
 		return (<>
-			<Box my={2} display="flex" flexDirection="row" alignItems="center">
+			<Stack direction="row" spacing={2} alignItems="center">
 				<FormControlLabel label="Flip"
 					control={<Switch checked={this.state.flipped} onChange={() => this.set('flipped', !this.state.flipped)} color="primary" />}
 				/>
 				<Button color="primary" size="small" variant="contained" onClick={() => this.handleTurnClicked(kokopu.oppositeColor(this.state.position.turn()))}>
 					Change turn
 				</Button>
-				<Box mx={2}>
-					<ButtonGroup color="primary" size="small">
-						<Button onClick={() => this.set('position', new kokopu.Position('empty'))}>Clear</Button>
-						<Button onClick={() => this.set('position', new kokopu.Position())}>Reset</Button>
-					</ButtonGroup>
-				</Box>
-			</Box>
-			<Box my={2}>
+				<ButtonGroup color="primary" size="small">
+					<Button onClick={() => this.set('position', new kokopu.Position('empty'))}>Clear</Button>
+					<Button onClick={() => this.set('position', new kokopu.Position())}>Reset</Button>
+				</ButtonGroup>
+			</Stack>
+			<Box>
 				<Typography gutterBottom>
 					Edition mode
 				</Typography>
 				<RadioGroup value={this.state.interactionMode} onChange={evt => this.set('interactionMode', evt.target.value)}>
 					<FormControlLabel value="" control={<Radio color="primary" />} label="None" />
-					<Box display="flex" flexDirection="row">
+					<Stack direction="row" spacing={2} alignItems="center">
 						<FormControlLabel value="addRemovePieces" control={<Radio color="primary" />} label="Add/remove pieces" />
 						{this.renderPieceSelector()}
-					</Box>
+					</Stack>
 					<FormControlLabel value="movePieces" control={<Radio color="primary" />} label="Move pieces" />
 					<FormControlLabel value="playMoves" control={<Radio color="primary" />} label="Move pieces (obeying chess rules)" />
-					<Box display="flex" flexDirection="row">
+					<Stack direction="row" spacing={2} alignItems="center">
 						<FormControlLabel value="editSquareMarkers" control={<Radio color="primary" />} label="Edit square annotations" />
 						{this.renderMarkerColorSelector('squareMarkerColor', 'editSquareMarkers')}
-					</Box>
-					<Box display="flex" flexDirection="row">
+					</Stack>
+					<Stack direction="row" spacing={2} alignItems="center">
 						<FormControlLabel value="editTextMarkers" control={<Radio color="primary" />} label="Edit text annotations" />
 						{this.renderMarkerColorSelector('textMarkerColor', 'editTextMarkers')}
 						{this.renderTextMarkerSymbolSelector()}
-					</Box>
-					<Box display="flex" flexDirection="row">
+					</Stack>
+					<Stack direction="row" spacing={2} alignItems="center">
 						<FormControlLabel value="editArrowMarkers" control={<Radio color="primary" />} label="Edit arrow annotations" />
 						{this.renderMarkerColorSelector('arrowMarkerColor', 'editArrowMarkers')}
-					</Box>
+					</Stack>
 				</RadioGroup>
 			</Box>
 		</>);
@@ -128,28 +127,24 @@ export default class Page extends React.Component {
 		}
 		let pieceset = Chessboard.piecesets()['cburnett'];
 		return (
-			<Box mx={2}>
-				<Box my={0.5}>
-					<ToggleButtonGroup value={this.state.pieceEditMode} exclusive size="small" onChange={(_, newMode) => this.setIfNonNull('pieceEditMode', newMode)}>
-						<ToggleButton value="wk"><img src={pieceset.wk} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
-						<ToggleButton value="wq"><img src={pieceset.wq} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
-						<ToggleButton value="wr"><img src={pieceset.wr} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
-						<ToggleButton value="wb"><img src={pieceset.wb} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
-						<ToggleButton value="wn"><img src={pieceset.wn} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
-						<ToggleButton value="wp"><img src={pieceset.wp} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
-					</ToggleButtonGroup>
-				</Box>
-				<Box my={0.5}>
-					<ToggleButtonGroup value={this.state.pieceEditMode} exclusive size="small" onChange={(_, newMode) => this.setIfNonNull('pieceEditMode', newMode)}>
-						<ToggleButton value="bk"><img src={pieceset.bk} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
-						<ToggleButton value="bq"><img src={pieceset.bq} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
-						<ToggleButton value="br"><img src={pieceset.br} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
-						<ToggleButton value="bb"><img src={pieceset.bb} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
-						<ToggleButton value="bn"><img src={pieceset.bn} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
-						<ToggleButton value="bp"><img src={pieceset.bp} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
-					</ToggleButtonGroup>
-				</Box>
-			</Box>
+			<Stack spacing={0.5}>
+				<ToggleButtonGroup value={this.state.pieceEditMode} exclusive size="small" onChange={(_, newMode) => this.setIfNonNull('pieceEditMode', newMode)}>
+					<ToggleButton value="wk"><img src={pieceset.wk} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
+					<ToggleButton value="wq"><img src={pieceset.wq} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
+					<ToggleButton value="wr"><img src={pieceset.wr} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
+					<ToggleButton value="wb"><img src={pieceset.wb} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
+					<ToggleButton value="wn"><img src={pieceset.wn} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
+					<ToggleButton value="wp"><img src={pieceset.wp} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
+				</ToggleButtonGroup>
+				<ToggleButtonGroup value={this.state.pieceEditMode} exclusive size="small" onChange={(_, newMode) => this.setIfNonNull('pieceEditMode', newMode)}>
+					<ToggleButton value="bk"><img src={pieceset.bk} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
+					<ToggleButton value="bq"><img src={pieceset.bq} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
+					<ToggleButton value="br"><img src={pieceset.br} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
+					<ToggleButton value="bb"><img src={pieceset.bb} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
+					<ToggleButton value="bn"><img src={pieceset.bn} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
+					<ToggleButton value="bp"><img src={pieceset.bp} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
+				</ToggleButtonGroup>
+			</Stack>
 		);
 	}
 
@@ -158,7 +153,7 @@ export default class Page extends React.Component {
 			return undefined;
 		}
 		return (
-			<Select value={this.state.textMarkerSymbol} onChange={evt => this.set('textMarkerSymbol', evt.target.value)}>
+			<Select variant="standard" value={this.state.textMarkerSymbol} onChange={evt => this.set('textMarkerSymbol', evt.target.value)}>
 				{[...'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'].map(mode => <MenuItem key={mode} value={mode}>{mode}</MenuItem>)}
 			</Select>
 		);
@@ -170,13 +165,11 @@ export default class Page extends React.Component {
 		}
 		let colorset = Chessboard.colorsets()['original'];
 		return (
-			<Box mx={2} my={0.5}>
-				<ToggleButtonGroup value={this.state[attributeName]} exclusive size="small" onChange={(_, newColor) => this.setIfNonNull(attributeName, newColor)}>
-					<ToggleButton className="kokopu-fixTextTransform" value="g">{this.renderColorButtonLabel(colorset.g)}</ToggleButton>
-					<ToggleButton className="kokopu-fixTextTransform" value="r">{this.renderColorButtonLabel(colorset.r)}</ToggleButton>
-					<ToggleButton className="kokopu-fixTextTransform" value="y">{this.renderColorButtonLabel(colorset.y)}</ToggleButton>
-				</ToggleButtonGroup>
-			</Box>
+			<ToggleButtonGroup value={this.state[attributeName]} exclusive size="small" onChange={(_, newColor) => this.setIfNonNull(attributeName, newColor)}>
+				<ToggleButton className="kokopu-fixTextTransform" value="g">{this.renderColorButtonLabel(colorset.g)}</ToggleButton>
+				<ToggleButton className="kokopu-fixTextTransform" value="r">{this.renderColorButtonLabel(colorset.r)}</ToggleButton>
+				<ToggleButton className="kokopu-fixTextTransform" value="y">{this.renderColorButtonLabel(colorset.y)}</ToggleButton>
+			</ToggleButtonGroup>
 		);
 	}
 
@@ -195,7 +188,7 @@ export default class Page extends React.Component {
 
 	renderChessboard() {
 		return (
-			<Box my={2}>
+			<Box>
 				<Chessboard
 					position={this.state.position}
 					flipped={this.state.flipped}
@@ -257,13 +250,7 @@ export default class Page extends React.Component {
 			default:
 				break;
 		}
-		return (
-			<Box my={2}>
-				<pre className="kokopu-demoCode">
-					{buildComponentDemoCode('Chessboard', attributes)}
-				</pre>
-			</Box>
-		);
+		return <pre className="kokopu-demoCode">{buildComponentDemoCode('Chessboard', attributes)}</pre>;
 	}
 
 	set(attributeName, newValue) {

package/doc_src/demo/PageChessboardMove.js

@@ -26,12 +26,13 @@ import kokopu from 'kokopu';
 import { Chessboard } from '../../src/index';
 import { buildComponentDemoCode } from './util';
 
-import Box from '@material-ui/core/Box';
-import Button from '@material-ui/core/Button';
-import ButtonGroup from '@material-ui/core/ButtonGroup';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Switch from '@material-ui/core/Switch';
-import TextField from '@material-ui/core/TextField';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import ButtonGroup from '@mui/material/ButtonGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Stack from '@mui/material/Stack';
+import Switch from '@mui/material/Switch';
+import TextField from '@mui/material/TextField';
 
 import './demo.css';
 
@@ -56,17 +57,17 @@ export default class Page extends React.Component {
 
 	render() {
 		return (
-			<div>
+			<Stack spacing={2} mt={2}>
 				{this.renderControls()}
 				{this.renderChessboard()}
 				{this.renderCode()}
-			</div>
+			</Stack>
 		);
 	}
 
 	renderControls() {
 		return (<>
-			<Box my={2}>
+			<Stack direction="row" spacing={2} alignItems="center">
 				<FormControlLabel label="Flip"
 					control={<Switch checked={this.state.flipped} onChange={() => this.set('flipped', !this.state.flipped)} color="primary" />}
 				/>
@@ -76,23 +77,21 @@ export default class Page extends React.Component {
 				<FormControlLabel label="Animation" disabled={!this.state.positionAfter}
 					control={<Switch checked={this.state.animated} onChange={() => this.set('animated', !this.state.animated)} color="primary" />}
 				/>
-			</Box>
-			<Box my={2} display="flex" flexDirection="row" alignItems="center">
-				<TextField label="Move" value={this.state.editedMove} onChange={evt => this.set('editedMove', evt.target.value)} />
+			</Stack>
+			<Stack direction="row" spacing={2} alignItems="center">
+				<TextField label="Move" variant="standard" value={this.state.editedMove} onChange={evt => this.set('editedMove', evt.target.value)} />
 				<Button color="primary" size="small" variant="contained" onClick={() => this.handlePlayClicked()}>Play</Button>
-				<Box mx={2}>
-					<ButtonGroup color="primary" size="small">
-						<Button onClick={() => this.setPosition(new kokopu.Position('empty'))}>Clear</Button>
-						<Button onClick={() => this.setPosition(new kokopu.Position())}>Reset</Button>
-					</ButtonGroup>
-				</Box>
-			</Box>
+				<ButtonGroup color="primary" size="small">
+					<Button onClick={() => this.setPosition(new kokopu.Position('empty'))}>Clear</Button>
+					<Button onClick={() => this.setPosition(new kokopu.Position())}>Reset</Button>
+				</ButtonGroup>
+			</Stack>
 		</>);
 	}
 
 	renderChessboard() {
 		return (
-			<Box my={2}>
+			<Box>
 				<Chessboard
 					position={this.state.position}
 					move={this.state.playedMove}
@@ -115,13 +114,7 @@ export default class Page extends React.Component {
 		}
 		attributes.push(`moveArrowVisible={${this.state.moveArrowVisible}}`);
 		attributes.push(`animated={${this.state.animated}}`);
-		return (
-			<Box my={2}>
-				<pre className="kokopu-demoCode">
-					{buildComponentDemoCode('Chessboard', attributes)}
-				</pre>
-			</Box>
-		);
+		return <pre className="kokopu-demoCode">{buildComponentDemoCode('Chessboard', attributes)}</pre>;
 	}
 
 	set(attributeName, newValue) {

package/doc_src/demo/PageChessboardSmallScreens.js

@@ -25,8 +25,9 @@ import React from 'react';
 import { Chessboard } from '../../src/index';
 import { buildComponentDemoCode } from './util';
 
-import Box from '@material-ui/core/Box';
-import Typography from '@material-ui/core/Typography';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
 
 import './demo.css';
 
@@ -63,17 +64,17 @@ export default class Page extends React.Component {
 
 	render() {
 		return (
-			<div>
+			<Stack spacing={2} mt={2}>
 				{this.renderControls()}
 				{this.renderChessboard()}
 				{this.renderCode()}
-			</div>
+			</Stack>
 		);
 	}
 
 	renderControls() {
 		return (
-			<Box my={2}>
+			<Box>
 				<Typography>Resize the browser to see the chessboard adapt its size...</Typography>
 				<Typography>{`Current browser width: ${this.state.windowWidth} px`}</Typography>
 			</Box>
@@ -82,7 +83,7 @@ export default class Page extends React.Component {
 
 	renderChessboard() {
 		return (
-			<Box my={2}>
+			<Box>
 				<Chessboard squareSize={this.state.squareSize} smallScreenLimits={this.state.limits} />
 			</Box>
 		);
@@ -102,16 +103,14 @@ export default class Page extends React.Component {
 		attributes.push(`squareSize={${this.state.squareSize}}`);
 		attributes.push('smallScreenLimits={limits}');
 		return (
-			<Box my={2}>
-				<pre className="kokopu-demoCode">
-					{
-						'let limits = [\n' +
-						limits.join('') +
-						'];\n' +
-						buildComponentDemoCode('Chessboard', attributes)
-					}
-				</pre>
-			</Box>
+			<pre className="kokopu-demoCode">
+				{
+					'let limits = [\n' +
+					limits.join('') +
+					'];\n' +
+					buildComponentDemoCode('Chessboard', attributes)
+				}
+			</pre>
 		);
 	}
 

package/doc_src/examples/ErrorBox.md

@@ -0,0 +1,3 @@
+```js
+<ErrorBox title="Something went wrong" message="This message describes what went wrong." />
+```

package/doc_src/theming/LogoRenderer.js

@@ -0,0 +1,50 @@
+/******************************************************************************
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    Copyright (C) 2021  Yoann Le Montagner <yo35 -at- melix.net>            *
+ *                                                                            *
+ *    This program is free software: you can redistribute it and/or           *
+ *    modify it under the terms of the GNU Lesser General Public License      *
+ *    as published by the Free Software Foundation, either version 3 of       *
+ *    the License, or (at your option) any later version.                     *
+ *                                                                            *
+ *    This program is distributed in the hope that it will be useful,         *
+ *    but WITHOUT ANY WARRANTY; without even the implied warranty of          *
+ *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the            *
+ *    GNU Lesser General Public License for more details.                     *
+ *                                                                            *
+ *    You should have received a copy of the GNU Lesser General               *
+ *    Public License along with this program. If not, see                     *
+ *    <http://www.gnu.org/licenses/>.                                         *
+ *                                                                            *
+ ******************************************************************************/
+
+
+import React from 'react';
+import Styled from 'react-styleguidist/lib/client/rsg-components/Styled';
+
+import logo from './kokopu-react-logo.png';
+
+import './theming.css';
+
+
+const styles = ({ color, fontFamily, fontSize }) => ({
+	logo: {
+		color: color.base,
+		margin: 0,
+		fontFamily: fontFamily.base,
+		fontSize: fontSize.h4,
+		fontWeight: 'normal',
+	},
+});
+
+function LogoRenderer({ classes, children }) {
+	return (<>
+		<div className="kokopu-logo">
+			<img src={logo} />
+		</div>
+		<h1 className={classes.logo}>{children}</h1>
+	</>);
+}
+
+export default Styled(styles)(LogoRenderer);

package/doc_src/theming/theming.css

@@ -0,0 +1,29 @@
+/******************************************************************************
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    Copyright (C) 2021  Yoann Le Montagner <yo35 -at- melix.net>            *
+ *                                                                            *
+ *    This program is free software: you can redistribute it and/or           *
+ *    modify it under the terms of the GNU Lesser General Public License      *
+ *    as published by the Free Software Foundation, either version 3 of       *
+ *    the License, or (at your option) any later version.                     *
+ *                                                                            *
+ *    This program is distributed in the hope that it will be useful,         *
+ *    but WITHOUT ANY WARRANTY; without even the implied warranty of          *
+ *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the            *
+ *    GNU Lesser General Public License for more details.                     *
+ *                                                                            *
+ *    You should have received a copy of the GNU Lesser General               *
+ *    Public License along with this program. If not, see                     *
+ *    <http://www.gnu.org/licenses/>.                                         *
+ *                                                                            *
+ ******************************************************************************/
+ 
+ 
+.kokopu-logo {
+	text-align: center;
+}
+
+footer {
+	display: none !important;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "kokopu-react",
-	"version": "1.2.0",
+	"version": "1.3.0",
 	"description": "A React-based library to create and display chessboard components.",
 	"keywords": [
 		"chess",
@@ -29,26 +29,27 @@
 		".nycrc.yml"
 	],
 	"dependencies": {
-		"kokopu": "^2.0.0",
+		"kokopu": "^2.1.0",
 		"prop-types": "^15.7.2",
 		"react": "^17.0.2",
 		"react-draggable": "^4.4.4",
 		"react-motion": "^0.5.2"
 	},
 	"devDependencies": {
-		"@babel/cli": "^7.15.4",
+		"@babel/cli": "^7.15.7",
 		"@babel/core": "^7.15.5",
 		"@babel/preset-env": "^7.15.6",
 		"@babel/preset-react": "^7.14.5",
-		"@material-ui/core": "^4.12.3",
-		"@material-ui/lab": "^4.0.0-alpha.60",
+		"@emotion/react": "^11.4.1",
+		"@emotion/styled": "^11.3.0",
+		"@mui/material": "^5.0.1",
 		"babel-loader": "^8.2.2",
 		"babel-plugin-istanbul": "^6.0.0",
 		"copy-webpack-plugin": "^9.0.1",
 		"coveralls": "^3.1.1",
-		"css-loader": "^6.2.0",
+		"css-loader": "^6.3.0",
 		"eslint": "^7.32.0",
-		"eslint-plugin-react": "^7.25.1",
+		"eslint-plugin-react": "^7.26.0",
 		"html-webpack-plugin": "^5.3.2",
 		"img-diff-js": "^0.5.2",
 		"mocha": "^9.1.1",
@@ -59,9 +60,9 @@
 		"react-styleguidist": "^11.1.7",
 		"selenium-webdriver": "^4.0.0-rc-1",
 		"ssh2-sftp-client": "^7.0.4",
-		"style-loader": "^3.2.1",
+		"style-loader": "^3.3.0",
 		"unit.js": "^2.1.1",
-		"webpack": "^5.52.1",
+		"webpack": "^5.53.0",
 		"webpack-cli": "^4.8.0"
 	},
 	"scripts": {

package/src/Chessboard.js

@@ -29,7 +29,8 @@ import kokopu from 'kokopu';
 import colorsets from './impl/colorsets';
 import piecesets from './impl/piecesets';
 import ArrowTip from './impl/ArrowTip';
-import ErrorBox from './impl/ErrorBox';
+import ErrorBox from './ErrorBox';
+import i18n from './i18n';
 import { parseSquareMarkers, parseTextMarkers, parseArrowMarkers } from './markers';
 import { MIN_SQUARE_SIZE, MAX_SQUARE_SIZE, sanitizeInteger, generateRandomId, isValidSquare, isValidVector, isValidColor, isValidSymbol } from './impl/util';
 
@@ -82,10 +83,10 @@ export default class Chessboard extends React.Component {
 		// Compute the current position.
 		let info = this.getPositionAndMoveInfo();
 		if (info.positionError) {
-			return <ErrorBox title="Error while analysing a FEN string." message={info.message}></ErrorBox>;
+			return <ErrorBox title={i18n.INVALID_FEN_ERROR_TITLE} message={info.message}></ErrorBox>;
 		}
 		else if (info.moveError) {
-			return <ErrorBox title="Invalid move notation." message={info.message}></ErrorBox>;
+			return <ErrorBox title={i18n.INVALID_NOTATION_ERROR_TITLE} message={info.message}></ErrorBox>;
 		}
 		let { position, move, positionBefore } = info;
 
@@ -938,7 +939,7 @@ function parsePosition(position) {
 		}
 	}
 	else {
-		return { error: true, message: 'Invalid "position" attribute.' };
+		return { error: true, message: i18n.INVALID_POSITION_ATTRIBUTE_ERROR_MESSAGE };
 	}
 }
 
@@ -965,7 +966,7 @@ function parseMove(position, move) {
 		}
 	}
 	else {
-		return { error: true, message: 'Invalid "move" attribute.' };
+		return { error: true, message: i18n.INVALID_MOVE_ATTRIBUTE_ERROR_MESSAGE };
 	}
 }
 

package/src/{impl/ErrorBox.js → ErrorBox.js}

@@ -23,7 +23,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import '../css/error_box.css';
+import './css/error_box.css';
 
 
 /**

package/src/i18n.js

@@ -0,0 +1,30 @@
+/******************************************************************************
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    Copyright (C) 2021  Yoann Le Montagner <yo35 -at- melix.net>            *
+ *                                                                            *
+ *    This program is free software: you can redistribute it and/or           *
+ *    modify it under the terms of the GNU Lesser General Public License      *
+ *    as published by the Free Software Foundation, either version 3 of       *
+ *    the License, or (at your option) any later version.                     *
+ *                                                                            *
+ *    This program is distributed in the hope that it will be useful,         *
+ *    but WITHOUT ANY WARRANTY; without even the implied warranty of          *
+ *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the            *
+ *    GNU Lesser General Public License for more details.                     *
+ *                                                                            *
+ *    You should have received a copy of the GNU Lesser General               *
+ *    Public License along with this program. If not, see                     *
+ *    <http://www.gnu.org/licenses/>.                                         *
+ *                                                                            *
+ ******************************************************************************/
+
+
+const i18n = {
+	INVALID_FEN_ERROR_TITLE: 'Invalid FEN string.',
+	INVALID_NOTATION_ERROR_TITLE: 'Invalid move notation.',
+	INVALID_POSITION_ATTRIBUTE_ERROR_MESSAGE: 'Invalid "position" attribute.',
+	INVALID_MOVE_ATTRIBUTE_ERROR_MESSAGE: 'Invalid "move" attribute.',
+};
+
+export default i18n;

package/src/index.js

@@ -21,6 +21,7 @@
 
 
 export { flattenSquareMarkers, parseSquareMarkers, flattenTextMarkers, parseTextMarkers, flattenArrowMarkers, parseArrowMarkers } from './markers';
+export { default as i18n } from './i18n';
 export { default as Chessboard } from './Chessboard';
 export { default as SquareMarkerIcon } from './SquareMarkerIcon';
 export { default as TextMarkerIcon } from './TextMarkerIcon';