kokopu-react 3.2.0 → 3.3.1

package/doc_src/demo/PageMovetextBase.tsx

@@ -48,19 +48,19 @@ import invalidGame from './game-invalid.pgn';
 
 
 interface PageState {
-    pgn: string;
-    headerVisible: boolean;
-    diagramVisible: boolean;
-    pieceSymbols: 'native' | 'figurines' | 'custom';
-    customSymbols: PieceSymbolMapping;
+    pgn: string,
+    headerVisible: boolean,
+    diagramVisible: boolean,
+    pieceSymbols: 'native' | 'figurines' | 'custom',
+    customSymbols: PieceSymbolMapping,
     diagramOptions: {
-        flipped: boolean;
-        squareSize: number;
-        coordinateVisible: boolean;
-        turnVisible: boolean;
-        colorset: string;
-        pieceset: string;
-    };
+        flipped: boolean,
+        squareSize: number,
+        coordinateVisible: boolean,
+        turnVisible: boolean,
+        colorset: string,
+        pieceset: string,
+    },
 }
 
 
@@ -73,7 +73,7 @@ export default class Page extends React.Component<object, PageState> {
             headerVisible: true,
             diagramVisible: true,
             pieceSymbols: 'figurines',
-            customSymbols: { K:'R', Q:'D', R:'T', B:'F', N:'C', P:'P' },
+            customSymbols: { K: 'R', Q: 'D', R: 'T', B: 'F', N: 'C', P: 'P' },
             diagramOptions: {
                 flipped: false,
                 squareSize: 32,
@@ -97,66 +97,74 @@ export default class Page extends React.Component<object, PageState> {
 
     private renderControls() {
         const opts = this.state.diagramOptions;
-        return (<>
-            <Stack direction="row" spacing={2} alignItems="center">
-                <ButtonGroup color="primary" size="small">
-                    <Button onClick={() => this.setState({ pgn: game1 })}>Game 1</Button>
-                    <Button onClick={() => this.setState({ pgn: game2 })}>Game 2</Button>
-                    <Button onClick={() => this.setState({ pgn: invalidGame })}>Invalid game</Button>
-                </ButtonGroup>
-                <FormControlLabel label="Show headers"
-                    control={<Switch checked={this.state.headerVisible} onChange={() => this.setState({ headerVisible: !this.state.headerVisible })} color="primary" />}
-                />
-                <FormControlLabel label="Show diagrams"
-                    control={<Switch checked={this.state.diagramVisible} onChange={() => this.setState({ diagramVisible: !this.state.diagramVisible })} color="primary" />}
-                />
-            </Stack>
-            <Stack direction="row" spacing={2} alignItems="center">
-                <FormControl variant="standard">
-                    <InputLabel id="piecesymbols-label">Piece symbols</InputLabel>
-                    <Select labelId="piecesymbols-label" sx={{ width: '8em' }} value={this.state.pieceSymbols}
-                        onChange={evt => this.setState({ pieceSymbols: evt.target.value as PageState['pieceSymbols'] })}
-                    >
-                        <MenuItem value="native">Native</MenuItem>
-                        <MenuItem value="figurines">Figurines</MenuItem>
-                        <MenuItem value="custom">Custom</MenuItem>
-                    </Select>
-                </FormControl>
-                {this.renderCustomSymbolSelector()}
-            </Stack>
-            <Stack direction="row" spacing={2} alignItems="center">
-                <FormControlLabel label="Flip diagram(s)"
-                    control={<Switch checked={opts.flipped} onChange={() => this.setDiagramOption({ flipped: !opts.flipped })} color="primary" />}
-                />
-                <FormControlLabel label="Show coordinates in diagram(s)"
-                    control={<Switch checked={opts.coordinateVisible} onChange={() => this.setDiagramOption({ coordinateVisible: !opts.coordinateVisible })} color="primary" />}
-                />
-                <FormControlLabel label="Show turn in diagram(s)"
-                    control={<Switch checked={opts.turnVisible} onChange={() => this.setDiagramOption({ turnVisible: !opts.turnVisible })} color="primary" />}
-                />
-            </Stack>
-            <Stack direction="row" spacing={2} alignItems="center">
-                <FormControl variant="standard">
-                    <InputLabel id="colorset-label">Colorset</InputLabel>
-                    <Select labelId="colorset-label" sx={{ width: '8em' }} value={opts.colorset} onChange={evt => this.setDiagramOption({ colorset: evt.target.value })}>
-                        {Object.keys(Chessboard.colorsets()).sort().map(colorset => <MenuItem key={colorset} value={colorset}>{colorset}</MenuItem>)}
-                    </Select>
-                </FormControl>
-                <FormControl variant="standard">
-                    <InputLabel id="pieceset-label">Pieceset</InputLabel>
-                    <Select labelId="pieceset-label" sx={{ width: '8em' }} value={opts.pieceset} onChange={evt => this.setDiagramOption({ pieceset: evt.target.value })}>
-                        {Object.keys(Chessboard.piecesets()).sort().map(pieceset => <MenuItem key={pieceset} value={pieceset}>{pieceset}</MenuItem>)}
-                    </Select>
-                </FormControl>
-            </Stack>
-            <Box>
-                <Typography gutterBottom>Diagram square size</Typography>
-                <Slider
-                    value={opts.squareSize} onChange={(_, newValue) => this.setDiagramOption({ squareSize: newValue as number })}
-                    min={Chessboard.minSquareSize()} max={Chessboard.maxSquareSize()} step={1} valueLabelDisplay="on" color="primary"
-                />
-            </Box>
-        </>);
+        return (
+            <>
+                <Stack direction="row" spacing={2} alignItems="center">
+                    <ButtonGroup color="primary" size="small">
+                        <Button onClick={() => this.setState({ pgn: game1 })}>Game 1</Button>
+                        <Button onClick={() => this.setState({ pgn: game2 })}>Game 2</Button>
+                        <Button onClick={() => this.setState({ pgn: invalidGame })}>Invalid game</Button>
+                    </ButtonGroup>
+                    <FormControlLabel
+                        label="Show headers"
+                        control={<Switch checked={this.state.headerVisible} onChange={() => this.setState({ headerVisible: !this.state.headerVisible })} color="primary" />}
+                    />
+                    <FormControlLabel
+                        label="Show diagrams"
+                        control={<Switch checked={this.state.diagramVisible} onChange={() => this.setState({ diagramVisible: !this.state.diagramVisible })} color="primary" />}
+                    />
+                </Stack>
+                <Stack direction="row" spacing={2} alignItems="center">
+                    <FormControl variant="standard">
+                        <InputLabel id="piecesymbols-label">Piece symbols</InputLabel>
+                        <Select
+                            labelId="piecesymbols-label" sx={{ width: '8em' }} value={this.state.pieceSymbols}
+                            onChange={evt => this.setState({ pieceSymbols: evt.target.value as PageState['pieceSymbols'] })}
+                        >
+                            <MenuItem value="native">Native</MenuItem>
+                            <MenuItem value="figurines">Figurines</MenuItem>
+                            <MenuItem value="custom">Custom</MenuItem>
+                        </Select>
+                    </FormControl>
+                    {this.renderCustomSymbolSelector()}
+                </Stack>
+                <Stack direction="row" spacing={2} alignItems="center">
+                    <FormControlLabel
+                        label="Flip diagram(s)"
+                        control={<Switch checked={opts.flipped} onChange={() => this.setDiagramOption({ flipped: !opts.flipped })} color="primary" />}
+                    />
+                    <FormControlLabel
+                        label="Show coordinates in diagram(s)"
+                        control={<Switch checked={opts.coordinateVisible} onChange={() => this.setDiagramOption({ coordinateVisible: !opts.coordinateVisible })} color="primary" />}
+                    />
+                    <FormControlLabel
+                        label="Show turn in diagram(s)"
+                        control={<Switch checked={opts.turnVisible} onChange={() => this.setDiagramOption({ turnVisible: !opts.turnVisible })} color="primary" />}
+                    />
+                </Stack>
+                <Stack direction="row" spacing={2} alignItems="center">
+                    <FormControl variant="standard">
+                        <InputLabel id="colorset-label">Colorset</InputLabel>
+                        <Select labelId="colorset-label" sx={{ width: '8em' }} value={opts.colorset} onChange={evt => this.setDiagramOption({ colorset: evt.target.value })}>
+                            {Object.keys(Chessboard.colorsets()).sort().map(colorset => <MenuItem key={colorset} value={colorset}>{colorset}</MenuItem>)}
+                        </Select>
+                    </FormControl>
+                    <FormControl variant="standard">
+                        <InputLabel id="pieceset-label">Pieceset</InputLabel>
+                        <Select labelId="pieceset-label" sx={{ width: '8em' }} value={opts.pieceset} onChange={evt => this.setDiagramOption({ pieceset: evt.target.value })}>
+                            {Object.keys(Chessboard.piecesets()).sort().map(pieceset => <MenuItem key={pieceset} value={pieceset}>{pieceset}</MenuItem>)}
+                        </Select>
+                    </FormControl>
+                </Stack>
+                <Box>
+                    <Typography gutterBottom>Diagram square size</Typography>
+                    <Slider
+                        value={opts.squareSize} onChange={(_, newValue) => this.setDiagramOption({ squareSize: newValue as number })}
+                        min={Chessboard.minSquareSize()} max={Chessboard.maxSquareSize()} step={1} valueLabelDisplay="on" color="primary"
+                    />
+                </Box>
+            </>
+        );
     }
 
     private renderCustomSymbolSelector() {
@@ -164,14 +172,16 @@ export default class Page extends React.Component<object, PageState> {
             return undefined;
         }
         const symbols = this.state.customSymbols;
-        return (<>
-            <TextField variant="standard" sx={{ width: '3em' }} label="King" value={symbols.K} onChange={evt => this.handleCustomSymbolChanged('K', evt.target.value)} />
-            <TextField variant="standard" sx={{ width: '3em' }} label="Queen" value={symbols.Q} onChange={evt => this.handleCustomSymbolChanged('Q', evt.target.value)} />
-            <TextField variant="standard" sx={{ width: '3em' }} label="Rook" value={symbols.R} onChange={evt => this.handleCustomSymbolChanged('R', evt.target.value)} />
-            <TextField variant="standard" sx={{ width: '3em' }} label="Bishop" value={symbols.B} onChange={evt => this.handleCustomSymbolChanged('B', evt.target.value)} />
-            <TextField variant="standard" sx={{ width: '3em' }} label="Knight" value={symbols.N} onChange={evt => this.handleCustomSymbolChanged('N', evt.target.value)} />
-            <TextField variant="standard" sx={{ width: '3em' }} label="Pawn" value={symbols.P} onChange={evt => this.handleCustomSymbolChanged('P', evt.target.value)} />
-        </>);
+        return (
+            <>
+                <TextField variant="standard" sx={{ width: '3em' }} label="King" value={symbols.K} onChange={evt => this.handleCustomSymbolChanged('K', evt.target.value)} />
+                <TextField variant="standard" sx={{ width: '3em' }} label="Queen" value={symbols.Q} onChange={evt => this.handleCustomSymbolChanged('Q', evt.target.value)} />
+                <TextField variant="standard" sx={{ width: '3em' }} label="Rook" value={symbols.R} onChange={evt => this.handleCustomSymbolChanged('R', evt.target.value)} />
+                <TextField variant="standard" sx={{ width: '3em' }} label="Bishop" value={symbols.B} onChange={evt => this.handleCustomSymbolChanged('B', evt.target.value)} />
+                <TextField variant="standard" sx={{ width: '3em' }} label="Knight" value={symbols.N} onChange={evt => this.handleCustomSymbolChanged('N', evt.target.value)} />
+                <TextField variant="standard" sx={{ width: '3em' }} label="Pawn" value={symbols.P} onChange={evt => this.handleCustomSymbolChanged('P', evt.target.value)} />
+            </>
+        );
     }
 
     private renderMovetext() {

package/doc_src/demo/PageMovetextInteraction.tsx

@@ -44,11 +44,11 @@ import game2 from './game-2.pgn';
 
 
 interface PageState {
-    pgn: string;
-    selection: string;
-    interactionMode: 'none' | 'selectMove';
-    withPopup: boolean;
-    withMove: boolean;
+    pgn: string,
+    selection: string,
+    interactionMode: 'none' | 'selectMove',
+    withPopup: boolean,
+    withMove: boolean,
 }
 
 
@@ -77,21 +77,23 @@ export default class Page extends React.Component<object, PageState> {
     }
 
     private renderControls() {
-        return (<>
-            <Stack direction="row" spacing={2} alignItems="center">
-                <ButtonGroup color="primary" size="small">
-                    <Button onClick={() => this.setState({ pgn: game1, selection: '28b' })}>Game 1</Button>
-                    <Button onClick={() => this.setState({ pgn: game2, selection: '15b' })}>Game 2</Button>
-                </ButtonGroup>
-            </Stack>
-            <Box>
-                <Typography gutterBottom>Interaction mode</Typography>
-                <RadioGroup value={this.state.interactionMode} onChange={evt => this.setState({ interactionMode: evt.target.value as PageState['interactionMode'] })}>
-                    <FormControlLabel value="none" control={<Radio color="primary" />} label="None" />
-                    <FormControlLabel value="selectMove" control={<Radio color="primary" />} label="Select moves" />
-                </RadioGroup>
-            </Box>
-        </>);
+        return (
+            <>
+                <Stack direction="row" spacing={2} alignItems="center">
+                    <ButtonGroup color="primary" size="small">
+                        <Button onClick={() => this.setState({ pgn: game1, selection: '28b' })}>Game 1</Button>
+                        <Button onClick={() => this.setState({ pgn: game2, selection: '15b' })}>Game 2</Button>
+                    </ButtonGroup>
+                </Stack>
+                <Box>
+                    <Typography gutterBottom>Interaction mode</Typography>
+                    <RadioGroup value={this.state.interactionMode} onChange={evt => this.setState({ interactionMode: evt.target.value as PageState['interactionMode'] })}>
+                        <FormControlLabel value="none" control={<Radio color="primary" />} label="None" />
+                        <FormControlLabel value="selectMove" control={<Radio color="primary" />} label="Select moves" />
+                    </RadioGroup>
+                </Box>
+            </>
+        );
     }
 
     private renderMovetext() {
@@ -166,7 +168,7 @@ export default class Page extends React.Component<object, PageState> {
             const node = game.findById(this.state.selection) as GameNode;
             return {
                 position: this.state.withMove ? node.positionBefore() : node.position(),
-                move:  this.state.withMove ? node.notation() : undefined,
+                move: this.state.withMove ? node.notation() : undefined,
                 csl: node.tag('csl'),
                 cal: node.tag('cal'),
             };

package/doc_src/demo/PageNavigationBoardBase.tsx

@@ -48,16 +48,16 @@ const COLOR_ICON_SIZE = 16;
 
 
 interface PageState {
-    squareSize: number;
-    coordinateVisible: boolean;
-    turnVisible: boolean;
-    colorset: string;
-    pieceset: string;
-    moveArrowVisible: boolean;
-    moveArrowColor: AnnotationColor;
-    animated: boolean;
-    playButtonVisible: boolean;
-    flipButtonVisible: boolean;
+    squareSize: number,
+    coordinateVisible: boolean,
+    turnVisible: boolean,
+    colorset: string,
+    pieceset: string,
+    moveArrowVisible: boolean,
+    moveArrowColor: AnnotationColor,
+    animated: boolean,
+    playButtonVisible: boolean,
+    flipButtonVisible: boolean,
 }
 
 
@@ -90,50 +90,58 @@ export default class Page extends React.Component<object, PageState> {
     }
 
     private renderControls() {
-        return (<>
-            <Stack direction="row" spacing={2} alignItems="center">
-                <FormControlLabel label="Show play/stop button"
-                    control={<Switch checked={this.state.playButtonVisible} onChange={() => this.setState({ playButtonVisible: !this.state.playButtonVisible })} color="primary" />}
-                />
-                <FormControlLabel label="Show flip button"
-                    control={<Switch checked={this.state.flipButtonVisible} onChange={() => this.setState({ flipButtonVisible: !this.state.flipButtonVisible })} color="primary" />}
-                />
-                <FormControlLabel label="Show coordinates"
-                    control={<Switch checked={this.state.coordinateVisible} onChange={() => this.setState({ coordinateVisible: !this.state.coordinateVisible })} color="primary" />}
-                />
-                <FormControlLabel label="Show turn"
-                    control={<Switch checked={this.state.turnVisible} onChange={() => this.setState({ turnVisible: !this.state.turnVisible })} color="primary" />}
-                />
-                <FormControlLabel label="Animated"
-                    control={<Switch checked={this.state.animated} onChange={() => this.setState({ animated: !this.state.animated })} color="primary" />}
-                />
-            </Stack>
-            <Box>
-                <Typography gutterBottom>Square size</Typography>
-                <Slider
-                    value={this.state.squareSize} onChange={(_, newValue) => this.setState({ squareSize: newValue as number })}
-                    min={Chessboard.minSquareSize()} max={Chessboard.maxSquareSize()} step={1} valueLabelDisplay="on" color="primary"
-                />
-            </Box>
-            <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.setState({ colorset: evt.target.value })}>
-                        {Object.keys(Chessboard.colorsets()).sort().map(colorset => <MenuItem key={colorset} value={colorset}>{colorset}</MenuItem>)}
-                    </Select>
-                </FormControl>
-                <FormControl variant="standard">
-                    <InputLabel id="pieceset-label">Pieceset</InputLabel>
-                    <Select labelId="pieceset-label" sx={{ width: '8em' }} value={this.state.pieceset} onChange={evt => this.setState({ pieceset: evt.target.value })}>
-                        {Object.keys(Chessboard.piecesets()).sort().map(pieceset => <MenuItem key={pieceset} value={pieceset}>{pieceset}</MenuItem>)}
-                    </Select>
-                </FormControl>
-                <FormControlLabel label="Show move arrow"
-                    control={<Switch checked={this.state.moveArrowVisible} onChange={() => this.setState({ moveArrowVisible: !this.state.moveArrowVisible })} color="primary" />}
-                />
-                {this.renderMoveArrowColorSelector()}
-            </Stack>
-        </>);
+        return (
+            <>
+                <Stack direction="row" spacing={2} alignItems="center">
+                    <FormControlLabel
+                        label="Show play/stop button"
+                        control={<Switch checked={this.state.playButtonVisible} onChange={() => this.setState({ playButtonVisible: !this.state.playButtonVisible })} color="primary" />}
+                    />
+                    <FormControlLabel
+                        label="Show flip button"
+                        control={<Switch checked={this.state.flipButtonVisible} onChange={() => this.setState({ flipButtonVisible: !this.state.flipButtonVisible })} color="primary" />}
+                    />
+                    <FormControlLabel
+                        label="Show coordinates"
+                        control={<Switch checked={this.state.coordinateVisible} onChange={() => this.setState({ coordinateVisible: !this.state.coordinateVisible })} color="primary" />}
+                    />
+                    <FormControlLabel
+                        label="Show turn"
+                        control={<Switch checked={this.state.turnVisible} onChange={() => this.setState({ turnVisible: !this.state.turnVisible })} color="primary" />}
+                    />
+                    <FormControlLabel
+                        label="Animated"
+                        control={<Switch checked={this.state.animated} onChange={() => this.setState({ animated: !this.state.animated })} color="primary" />}
+                    />
+                </Stack>
+                <Box>
+                    <Typography gutterBottom>Square size</Typography>
+                    <Slider
+                        value={this.state.squareSize} onChange={(_, newValue) => this.setState({ squareSize: newValue as number })}
+                        min={Chessboard.minSquareSize()} max={Chessboard.maxSquareSize()} step={1} valueLabelDisplay="on" color="primary"
+                    />
+                </Box>
+                <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.setState({ colorset: evt.target.value })}>
+                            {Object.keys(Chessboard.colorsets()).sort().map(colorset => <MenuItem key={colorset} value={colorset}>{colorset}</MenuItem>)}
+                        </Select>
+                    </FormControl>
+                    <FormControl variant="standard">
+                        <InputLabel id="pieceset-label">Pieceset</InputLabel>
+                        <Select labelId="pieceset-label" sx={{ width: '8em' }} value={this.state.pieceset} onChange={evt => this.setState({ pieceset: evt.target.value })}>
+                            {Object.keys(Chessboard.piecesets()).sort().map(pieceset => <MenuItem key={pieceset} value={pieceset}>{pieceset}</MenuItem>)}
+                        </Select>
+                    </FormControl>
+                    <FormControlLabel
+                        label="Show move arrow"
+                        control={<Switch checked={this.state.moveArrowVisible} onChange={() => this.setState({ moveArrowVisible: !this.state.moveArrowVisible })} color="primary" />}
+                    />
+                    {this.renderMoveArrowColorSelector()}
+                </Stack>
+            </>
+        );
     }
 
     private renderMoveArrowColorSelector() {

package/doc_src/demo/PageNavigationBoardUncontrolledVsControlled.tsx

@@ -36,7 +36,7 @@ import pgn from './game-3.pgn';
 
 
 interface PageState {
-    nodeId: string;
+    nodeId: string,
 }
 
 
@@ -60,21 +60,23 @@ export default class Page extends React.Component<object, PageState> {
     }
 
     private renderControls() {
-        return (<>
-            <Typography>
-                In uncontrolled mode, the current node ID (aka. the current move) of the <code>NavigationBoard</code> component is managed internally.
-                No additional code is needed to make the navigation buttons work.
-            </Typography>
-            <Typography>
-                In controlled mode, the current node ID is defined by the <code>nodeId</code> attribute, and a callback must be set
-                on the <code>onNodeIdChanged</code> attribute to respond to clicks on the navigation buttons.
-                This mode requires more code, as a state variable holding the current node ID must be explicitely managed out of the component,
-                but it allows to define more complex behaviors (e.g. synchronizing the node ID on the <code>NavigationBoard</code> with another component).
-            </Typography>
-            <Typography>
-                Whether the component is in uncontrolled mode or controlled mode depends on the presence of the <code>nodeId</code> attribute.
-            </Typography>
-        </>);
+        return (
+            <>
+                <Typography>
+                    In uncontrolled mode, the current node ID (aka. the current move) of the <code>NavigationBoard</code> component is managed internally.
+                    No additional code is needed to make the navigation buttons work.
+                </Typography>
+                <Typography>
+                    In controlled mode, the current node ID is defined by the <code>nodeId</code> attribute, and a callback must be set
+                    on the <code>onNodeIdChanged</code> attribute to respond to clicks on the navigation buttons.
+                    This mode requires more code, as a state variable holding the current node ID must be explicitely managed out of the component,
+                    but it allows to define more complex behaviors (e.g. synchronizing the node ID on the <code>NavigationBoard</code> with another component).
+                </Typography>
+                <Typography>
+                    Whether the component is in uncontrolled mode or controlled mode depends on the presence of the <code>nodeId</code> attribute.
+                </Typography>
+            </>
+        );
     }
 
     private renderNavigationBoards() {
@@ -107,8 +109,12 @@ export default class Page extends React.Component<object, PageState> {
         controlledAttributes.push('onNodeIdChanged={nodeId => handleNodeIdChanged(nodeId)}');
 
         const pgnDeclaration = 'const pgn = `\n' + pgn.trim() + '`;\n\n';
-        return <pre className="kokopu-demoCode">{pgnDeclaration + '// Uncontrolled\n' + buildComponentDemoCode('NavigationBoard', uncontrolledAttributes)
-            + '\n\n// Controlled\n' + buildComponentDemoCode('NavigationBoard', controlledAttributes)}</pre>;
+        return (
+            <pre className="kokopu-demoCode">
+                {pgnDeclaration + '// Uncontrolled\n' + buildComponentDemoCode('NavigationBoard', uncontrolledAttributes)
+                + '\n\n// Controlled\n' + buildComponentDemoCode('NavigationBoard', controlledAttributes)}
+            </pre>
+        );
     }
 
 }

package/doc_src/theming/LogoRenderer.js

@@ -27,9 +27,6 @@ import Styled from 'react-styleguidist/lib/client/rsg-components/Styled';
 
 import './theming.css';
 
-
-/* eslint-disable react/prop-types */
-
 const styles = ({ color, fontFamily, fontSize }) => ({
     logo: {
         color: color.base,
@@ -41,12 +38,14 @@ const styles = ({ color, fontFamily, fontSize }) => ({
 });
 
 function LogoRenderer({ classes, children }) {
-    return (<>
-        <div className="kokopu-logo">
-            <img src="kokopu-react-logo.png" />
-        </div>
-        <h1 className={classes.logo}>{children}</h1>
-    </>);
+    return (
+        <>
+            <div className="kokopu-logo">
+                <img src="kokopu-react-logo.png" />
+            </div>
+            <h1 className={classes.logo}>{children}</h1>
+        </>
+    );
 }
 
 export default Styled(styles)(LogoRenderer);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "kokopu-react",
-    "version": "3.2.0",
+    "version": "3.3.1",
     "description": "A React-based library to create and display chessboard and chess-related components.",
     "keywords": [
         "chess",
@@ -43,40 +43,42 @@
         "htmlparser2": "^9.1.0"
     },
     "devDependencies": {
-        "@babel/preset-env": "^7.24.4",
-        "@babel/preset-react": "^7.24.1",
-        "@emotion/react": "^11.11.4",
-        "@emotion/styled": "^11.11.5",
-        "@mui/material": "^5.15.15",
-        "@types/react": "^18.2.79",
-        "@types/react-dom": "^18.2.25",
-        "@typescript-eslint/eslint-plugin": "^7.7.0",
-        "@typescript-eslint/parser": "^7.7.0",
-        "babel-loader": "^9.1.3",
+        "@babel/preset-env": "^7.26.0",
+        "@babel/preset-react": "^7.25.9",
+        "@emotion/react": "^11.13.3",
+        "@emotion/styled": "^11.13.0",
+        "@eslint/js": "^9.13.0",
+        "@mui/material": "^6.1.6",
+        "@stylistic/eslint-plugin": "^2.10.1",
+        "@types/react": "^18.3.12",
+        "@types/react-dom": "^18.3.1",
+        "babel-loader": "^9.2.1",
         "copy-webpack-plugin": "^12.0.2",
         "copyfiles": "^2.4.1",
         "coverage-istanbul-loader": "^3.0.5",
-        "css-loader": "^7.1.1",
-        "eslint": "^8.57.0",
-        "eslint-plugin-react": "~7.33.2",
-        "html-webpack-plugin": "^5.6.0",
+        "css-loader": "^7.1.2",
+        "eslint": "^9.13.0",
+        "eslint-plugin-react": "^7.37.2",
+        "globals": "^15.11.0",
+        "html-webpack-plugin": "^5.6.3",
         "img-diff-js": "^0.5.4",
-        "kokopu": "^4.10.0",
-        "mocha": "^10.4.0",
+        "kokopu": "^4.11.2",
+        "mocha": "^10.8.2",
         "null-loader": "^4.0.1",
-        "nyc": "^15.1.0",
-        "react": "^18.2.0",
+        "nyc": "^17.1.0",
+        "react": "^18.3.1",
         "react-docgen-typescript": "^2.2.2",
-        "react-dom": "^18.2.0",
-        "react-styleguidist": "^13.1.2",
-        "rimraf": "^5.0.5",
-        "selenium-webdriver": "^4.19.0",
-        "ssh2-sftp-client": "^10.0.3",
+        "react-dom": "^18.3.1",
+        "react-styleguidist": "^13.1.3",
+        "rimraf": "^6.0.1",
+        "selenium-webdriver": "^4.26.0",
+        "ssh2-sftp-client": "^11.0.0",
         "style-loader": "^4.0.0",
         "ts-loader": "^9.5.1",
-        "typescript": "^5.4.5",
+        "typescript": "^5.6.3",
+        "typescript-eslint": "^8.12.2",
         "unit.js": "^2.1.1",
-        "webpack": "^5.91.0",
+        "webpack": "^5.96.1",
         "webpack-cli": "^5.1.4"
     },
     "scripts": {
@@ -84,8 +86,8 @@
         "preunit": "npm run build:lib && webpack --config scripts/test-headless.webpack.config.js && webpack --config scripts/test-graphic.webpack.config.js && rimraf build/graphic_output",
         "unit": "nyc mocha --enable-source-maps --bail --sort",
         "test": "npm run lint && npm run unit",
-        "test_env:start": "docker-compose -p kokopu-react-test-env -f scripts/docker-compose.yml up -d",
-        "test_env:stop": "docker-compose -p kokopu-react-test-env -f scripts/docker-compose.yml down",
+        "test_env:start": "docker compose -p kokopu-react-test-env -f scripts/docker-compose.yml up -d",
+        "test_env:stop": "docker compose -p kokopu-react-test-env -f scripts/docker-compose.yml down",
         "build": "npm run build:lib && npm run build:doc",
         "build:doc": "rimraf dist/docs && styleguidist build --config scripts/doc.styleguide.config.js && copyfiles -u 2 'doc_src/theming/*.png' dist/docs",
         "build:lib": "rimraf dist/lib && tsc --outDir dist/lib && copyfiles -u 1 'src/**/*.{css,png,woff,woff2}' dist/lib",

package/scripts/docker-compose.yml

@@ -1,8 +1,6 @@
-version: "3.7"
-
 services:
   web-client:
-    image: selenium/standalone-firefox:4.19.1-20240402 # https://github.com/SeleniumHQ/docker-selenium to get the latest version
+    image: selenium/standalone-firefox:4.25.0-20241024 # https://github.com/SeleniumHQ/docker-selenium to get the latest version
     shm_size: '2gb'
     ports:
       - 4444:4444 # http://localhost:4444/ (driver)