kokopu-react 3.4.1 → 3.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,6 +1,10 @@
1
1
  ChangeLog
2
2
  =========
3
3
 
4
+ 3.4.2 (July 18, 2026)
5
+ ---------------------
6
+ * Minor fixes.
7
+
4
8
  3.4.1 (May 10, 2026)
5
9
  --------------------
6
10
  * Minor fixes.
@@ -151,7 +151,7 @@ export declare class NavigationBoard extends React.Component<NavigationBoardProp
151
151
  turnVisible: boolean;
152
152
  colorset: string;
153
153
  pieceset: string;
154
- smallScreenLimits?: import("../chessboard/BoardProperties").SmallScreenLimit[];
154
+ smallScreenLimits?: import("..").SmallScreenLimit[];
155
155
  };
156
156
  private navigationFieldRef;
157
157
  private timeoutId?;
@@ -77,7 +77,7 @@ export default class Page extends React.Component<object, PageState> {
77
77
 
78
78
  render() {
79
79
  return (
80
- <Stack spacing={2} mt={2}>
80
+ <Stack spacing={2} sx={{ mt: 2 }}>
81
81
  {this.renderControls()}
82
82
  {this.renderChessboard()}
83
83
  {this.renderCode()}
@@ -88,7 +88,7 @@ export default class Page extends React.Component<object, PageState> {
88
88
  private renderControls() {
89
89
  return (
90
90
  <>
91
- <Stack direction="row" spacing={2} alignItems="center">
91
+ <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
92
92
  <FormControlLabel
93
93
  label="Flip"
94
94
  control={<Switch checked={this.state.flipped} onChange={() => this.setState({ flipped: !this.state.flipped })} color="primary" />}
@@ -113,7 +113,7 @@ export default class Page extends React.Component<object, PageState> {
113
113
  min={Chessboard.minSquareSize()} max={Chessboard.maxSquareSize()} step={1} valueLabelDisplay="on" color="primary"
114
114
  />
115
115
  </Box>
116
- <Stack direction="row" spacing={2} alignItems="center">
116
+ <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
117
117
  <FormControl variant="standard">
118
118
  <InputLabel id="colorset-label">Colorset</InputLabel>
119
119
  <Select labelId="colorset-label" sx={{ width: '8em' }} value={this.state.colorset} onChange={evt => this.setState({ colorset: evt.target.value })}>
@@ -87,7 +87,7 @@ export default class Page extends React.Component<object, PageState> {
87
87
 
88
88
  render() {
89
89
  return (
90
- <Stack spacing={2} mt={2}>
90
+ <Stack spacing={2} sx={{ mt: 2 }}>
91
91
  {this.renderControls()}
92
92
  {this.renderChessboard()}
93
93
  {this.renderCode()}
@@ -98,7 +98,7 @@ export default class Page extends React.Component<object, PageState> {
98
98
  private renderControls() {
99
99
  return (
100
100
  <>
101
- <Stack direction="row" spacing={2} alignItems="center">
101
+ <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
102
102
  <FormControlLabel
103
103
  label="Flip"
104
104
  control={<Switch checked={this.state.flipped} onChange={() => this.setState({ flipped: !this.state.flipped })} color="primary" />}
@@ -118,7 +118,7 @@ export default class Page extends React.Component<object, PageState> {
118
118
  <FormControlLabel
119
119
  value="addRemovePieces" control={<Radio color="primary" />}
120
120
  label={(
121
- <Stack direction="row" spacing={2} alignItems="center">
121
+ <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
122
122
  <span>Add/remove pieces</span>
123
123
  {this.renderPieceSelector()}
124
124
  </Stack>
@@ -129,7 +129,7 @@ export default class Page extends React.Component<object, PageState> {
129
129
  <FormControlLabel
130
130
  value="editSquareMarkers" control={<Radio color="primary" />}
131
131
  label={(
132
- <Stack direction="row" spacing={2} alignItems="center">
132
+ <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
133
133
  <span>Edit square annotations</span>
134
134
  {this.renderMarkerColorSelector('editSquareMarkers', this.state.squareMarkerColor, newColor => this.handleSquareMarkerColorChanged(newColor))}
135
135
  </Stack>
@@ -138,7 +138,7 @@ export default class Page extends React.Component<object, PageState> {
138
138
  <FormControlLabel
139
139
  value="editTextMarkers" control={<Radio color="primary" />}
140
140
  label={(
141
- <Stack direction="row" spacing={2} alignItems="center">
141
+ <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
142
142
  <span>Edit text annotations</span>
143
143
  {this.renderMarkerColorSelector('editTextMarkers', this.state.textMarkerColor, newColor => this.handleTextMarkerColorChanged(newColor))}
144
144
  {this.renderTextMarkerSymbolSelector()}
@@ -148,7 +148,7 @@ export default class Page extends React.Component<object, PageState> {
148
148
  <FormControlLabel
149
149
  value="editArrowMarkers" control={<Radio color="primary" />}
150
150
  label={(
151
- <Stack direction="row" spacing={2} alignItems="center">
151
+ <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
152
152
  <span>Edit arrow annotations</span>
153
153
  {this.renderMarkerColorSelector('editArrowMarkers', this.state.arrowMarkerColor, newColor => this.handleArrowMarkerColorChanged(newColor))}
154
154
  </Stack>
@@ -78,7 +78,7 @@ export default class Page extends React.Component<object, PageState> {
78
78
 
79
79
  render() {
80
80
  return (
81
- <Stack spacing={2} mt={2}>
81
+ <Stack spacing={2} sx={{ mt: 2 }}>
82
82
  {this.renderControls()}
83
83
  {this.renderChessboard()}
84
84
  {this.renderCode()}
@@ -89,7 +89,7 @@ export default class Page extends React.Component<object, PageState> {
89
89
  private renderControls() {
90
90
  return (
91
91
  <>
92
- <Stack direction="row" spacing={2} alignItems="center">
92
+ <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
93
93
  <FormControlLabel
94
94
  label="Flip"
95
95
  control={<Switch checked={this.state.flipped} onChange={() => this.setState({ flipped: !this.state.flipped })} color="primary" />}
@@ -108,7 +108,7 @@ export default class Page extends React.Component<object, PageState> {
108
108
  />
109
109
  {this.renderColorSelector()}
110
110
  </Stack>
111
- <Stack direction="row" spacing={2} alignItems="center">
111
+ <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
112
112
  <TextField label="Move" variant="standard" value={this.state.editedMove} onChange={evt => this.setState({ editedMove: evt.target.value })} />
113
113
  <Button color="primary" size="small" variant="contained" onClick={() => this.handlePlayClicked()}>Play</Button>
114
114
  <ButtonGroup color="primary" size="small">
@@ -75,7 +75,7 @@ export default class Page extends React.Component<object, PageState> {
75
75
 
76
76
  render() {
77
77
  return (
78
- <Stack spacing={2} mt={2}>
78
+ <Stack spacing={2} sx={{ mt: 2 }}>
79
79
  {this.renderControls()}
80
80
  {this.renderChessboard()}
81
81
  {this.renderCode()}
@@ -87,7 +87,7 @@ export default class Page extends React.Component<object, PageState> {
87
87
 
88
88
  render() {
89
89
  return (
90
- <Stack spacing={2} mt={2}>
90
+ <Stack spacing={2} sx={{ mt: 2 }}>
91
91
  {this.renderControls()}
92
92
  {this.renderMovetext()}
93
93
  {this.renderCode()}
@@ -99,7 +99,7 @@ export default class Page extends React.Component<object, PageState> {
99
99
  const opts = this.state.diagramOptions;
100
100
  return (
101
101
  <>
102
- <Stack direction="row" spacing={2} alignItems="center">
102
+ <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
103
103
  <ButtonGroup color="primary" size="small">
104
104
  <Button onClick={() => this.setState({ pgn: game1 })}>Game 1</Button>
105
105
  <Button onClick={() => this.setState({ pgn: game2 })}>Game 2</Button>
@@ -114,7 +114,7 @@ export default class Page extends React.Component<object, PageState> {
114
114
  control={<Switch checked={this.state.diagramVisible} onChange={() => this.setState({ diagramVisible: !this.state.diagramVisible })} color="primary" />}
115
115
  />
116
116
  </Stack>
117
- <Stack direction="row" spacing={2} alignItems="center">
117
+ <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
118
118
  <FormControl variant="standard">
119
119
  <InputLabel id="piecesymbols-label">Piece symbols</InputLabel>
120
120
  <Select
@@ -128,7 +128,7 @@ export default class Page extends React.Component<object, PageState> {
128
128
  </FormControl>
129
129
  {this.renderCustomSymbolSelector()}
130
130
  </Stack>
131
- <Stack direction="row" spacing={2} alignItems="center">
131
+ <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
132
132
  <FormControlLabel
133
133
  label="Flip diagram(s)"
134
134
  control={<Switch checked={opts.flipped} onChange={() => this.setDiagramOption({ flipped: !opts.flipped })} color="primary" />}
@@ -142,7 +142,7 @@ export default class Page extends React.Component<object, PageState> {
142
142
  control={<Switch checked={opts.turnVisible} onChange={() => this.setDiagramOption({ turnVisible: !opts.turnVisible })} color="primary" />}
143
143
  />
144
144
  </Stack>
145
- <Stack direction="row" spacing={2} alignItems="center">
145
+ <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
146
146
  <FormControl variant="standard">
147
147
  <InputLabel id="colorset-label">Colorset</InputLabel>
148
148
  <Select labelId="colorset-label" sx={{ width: '8em' }} value={opts.colorset} onChange={evt => this.setDiagramOption({ colorset: evt.target.value })}>
@@ -65,7 +65,7 @@ export default class Page extends React.Component<object, PageState> {
65
65
 
66
66
  render() {
67
67
  return (
68
- <Stack spacing={2} mt={2}>
68
+ <Stack spacing={2} sx={{ mt: 2 }}>
69
69
  {this.renderControls()}
70
70
  {this.renderMovetext()}
71
71
  {this.renderCode()}
@@ -77,7 +77,7 @@ export default class Page extends React.Component<object, PageState> {
77
77
  private renderControls() {
78
78
  return (
79
79
  <>
80
- <Stack direction="row" spacing={2} alignItems="center">
80
+ <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
81
81
  <ButtonGroup color="primary" size="small">
82
82
  <Button onClick={() => this.setState({ pgn: game1, selection: '28b' })}>Game 1</Button>
83
83
  <Button onClick={() => this.setState({ pgn: game2, selection: '15b' })}>Game 2</Button>
@@ -83,7 +83,7 @@ export default class Page extends React.Component<object, PageState> {
83
83
 
84
84
  render() {
85
85
  return (
86
- <Stack spacing={2} mt={2}>
86
+ <Stack spacing={2} sx={{ mt: 2 }}>
87
87
  {this.renderControls()}
88
88
  {this.renderNavigationBoard()}
89
89
  {this.renderCode()}
@@ -94,7 +94,7 @@ export default class Page extends React.Component<object, PageState> {
94
94
  private renderControls() {
95
95
  return (
96
96
  <>
97
- <Stack direction="row" spacing={2} alignItems="center">
97
+ <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
98
98
  <FormControlLabel
99
99
  label="Show play/stop button"
100
100
  control={<Switch checked={this.state.playButtonVisible} onChange={() => this.setState({ playButtonVisible: !this.state.playButtonVisible })} color="primary" />}
@@ -112,7 +112,7 @@ export default class Page extends React.Component<object, PageState> {
112
112
  control={<Switch checked={this.state.turnVisible} onChange={() => this.setState({ turnVisible: !this.state.turnVisible })} color="primary" />}
113
113
  />
114
114
  </Stack>
115
- <Stack direction="row" spacing={2} alignItems="center">
115
+ <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
116
116
  <FormControlLabel
117
117
  label="Animation"
118
118
  control={<Switch checked={this.state.animated} onChange={() => this.setState({ animated: !this.state.animated })} color="primary" />}
@@ -129,7 +129,7 @@ export default class Page extends React.Component<object, PageState> {
129
129
  min={Chessboard.minSquareSize()} max={Chessboard.maxSquareSize()} step={1} valueLabelDisplay="on" color="primary"
130
130
  />
131
131
  </Box>
132
- <Stack direction="row" spacing={2} alignItems="center">
132
+ <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
133
133
  <FormControl variant="standard">
134
134
  <InputLabel id="colorset-label">Colorset</InputLabel>
135
135
  <Select labelId="colorset-label" sx={{ width: '8em' }} value={this.state.colorset} onChange={evt => this.setState({ colorset: evt.target.value })}>
@@ -51,7 +51,7 @@ export default class Page extends React.Component<object, PageState> {
51
51
 
52
52
  render() {
53
53
  return (
54
- <Stack spacing={2} mt={2}>
54
+ <Stack spacing={2} sx={{ mt: 2 }}>
55
55
  {this.renderControls()}
56
56
  {this.renderNavigationBoards()}
57
57
  {this.renderCode()}
@@ -81,17 +81,17 @@ export default class Page extends React.Component<object, PageState> {
81
81
 
82
82
  private renderNavigationBoards() {
83
83
  return (
84
- <Box display="flex" alignItems="top" justifyContent="space-around">
84
+ <Stack direction="row" sx={{ alignItems: 'top', justifyContent: 'space-around' }}>
85
85
  <Box>
86
86
  <NavigationBoard game={pgn} animated sound initialNodeId="9b" />
87
- <Typography mt={2} textAlign="center">Uncontrolled</Typography>
87
+ <Typography sx={{ mt: 2, textAlign: 'center' }}>Uncontrolled</Typography>
88
88
  </Box>
89
89
  <Box>
90
90
  <NavigationBoard game={pgn} animated sound nodeId={this.state.nodeId} onNodeIdChanged={nodeId => this.setState({ nodeId: nodeId })} />
91
- <Typography mt={2} textAlign="center">Controlled</Typography>
92
- <Typography textAlign="center">{`Current node ID: ${this.state.nodeId}`}</Typography>
91
+ <Typography sx={{ mt: 2, textAlign: 'center' }}>Controlled</Typography>
92
+ <Typography sx={{ textAlign: 'center' }}>{`Current node ID: ${this.state.nodeId}`}</Typography>
93
93
  </Box>
94
- </Box>
94
+ </Stack>
95
95
  );
96
96
  }
97
97
 
@@ -74,7 +74,7 @@ export default class Page extends React.Component<object, PageState> {
74
74
 
75
75
  render() {
76
76
  return (
77
- <Stack spacing={2} mt={2}>
77
+ <Stack spacing={2} sx={{ mt: 2 }}>
78
78
  {this.renderControls()}
79
79
  {this.renderNavigationBoardWithMovetext()}
80
80
  {this.renderCode()}
@@ -84,7 +84,7 @@ export default class Page extends React.Component<object, PageState> {
84
84
 
85
85
  private renderControls() {
86
86
  return (
87
- <Stack direction="row" spacing={2} alignItems="center">
87
+ <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
88
88
  <ButtonGroup color="primary" size="small">
89
89
  <Button onClick={() => this.setState({ componentKey: 'game1', pgn: game1 })}>Game 1</Button>
90
90
  <Button onClick={() => this.setState({ componentKey: 'game2', pgn: game2 })}>Game 2</Button>
@@ -22,6 +22,8 @@
22
22
  * -------------------------------------------------------------------------- */
23
23
 
24
24
 
25
+ declare module '*.css' {}
26
+
25
27
  declare module '*.pgn' {
26
28
  const pgnText: string;
27
29
  export default pgnText;
@@ -0,0 +1,8 @@
1
+ {
2
+ "extends": "../../tsconfig.json",
3
+ "include": [ "./**/*", "../../src/**/*" ],
4
+ "compilerOptions": {
5
+ "rootDir": "../..",
6
+ "declaration": false
7
+ }
8
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kokopu-react",
3
- "version": "3.4.1",
3
+ "version": "3.4.2",
4
4
  "description": "A React-based library to create and display chessboard and chess-related components.",
5
5
  "keywords": [
6
6
  "chess",
@@ -20,9 +20,7 @@
20
20
  "dist/lib",
21
21
  "doc_src",
22
22
  "scripts/doc.styleguide.config.js",
23
- "scripts/doc.tsconfig.json",
24
23
  "scripts/docker-compose.yml",
25
- "scripts/test-graphic.tsconfig.json",
26
24
  "scripts/test-graphic.webpack.config.js",
27
25
  "scripts/test-headless.webpack.config.js",
28
26
  "src",
@@ -43,43 +41,43 @@
43
41
  "htmlparser2": "^9.1.0"
44
42
  },
45
43
  "devDependencies": {
46
- "@babel/preset-env": "^7.29.5",
47
- "@babel/preset-react": "^7.28.5",
44
+ "@babel/preset-env": "^8.0.2",
45
+ "@babel/preset-react": "^8.0.1",
48
46
  "@emotion/react": "^11.14.0",
49
47
  "@emotion/styled": "^11.14.1",
50
- "@eslint/js": "^9.39.4",
51
- "@mui/material": "^7.3.11",
48
+ "@eslint/js": "^9.39.5",
49
+ "@mui/material": "^9.2.0",
52
50
  "@stylistic/eslint-plugin": "^5.10.0",
53
- "@types/react": "^19.2.14",
51
+ "@types/react": "^19.2.17",
54
52
  "@types/react-dom": "^19.2.3",
55
53
  "babel-loader": "^10.1.1",
56
54
  "copy-webpack-plugin": "^14.0.0",
57
55
  "copyfiles": "^2.4.1",
58
56
  "coverage-istanbul-loader": "^3.0.5",
59
57
  "css-loader": "^7.1.4",
60
- "eslint": "^9.39.4",
58
+ "eslint": "^9.39.5",
61
59
  "eslint-plugin-react": "^7.37.5",
62
60
  "eslint-plugin-react-hooks": "^7.1.1",
63
- "globals": "^17.6.0",
61
+ "globals": "^17.7.0",
64
62
  "html-webpack-plugin": "^5.6.7",
65
63
  "img-diff-js": "^0.5.4",
66
- "kokopu": "^4.13.2",
67
- "mocha": "^11.7.5",
64
+ "kokopu": "^4.13.4",
65
+ "mocha": "^11.7.6",
68
66
  "null-loader": "^4.0.1",
69
67
  "nyc": "^18.0.0",
70
- "react": "^19.2.6",
68
+ "react": "^19.2.7",
71
69
  "react-docgen-typescript": "~2.2.2",
72
- "react-dom": "^19.2.6",
70
+ "react-dom": "^19.2.7",
73
71
  "react-styleguidist": "^13.1.4",
74
72
  "rimraf": "^6.1.3",
75
- "selenium-webdriver": "^4.43.0",
73
+ "selenium-webdriver": "^4.46.0",
76
74
  "ssh2-sftp-client": "^12.1.1",
77
75
  "style-loader": "^4.0.0",
78
- "ts-loader": "^9.5.7",
79
- "typescript": "^5.9.3",
80
- "typescript-eslint": "^8.59.2",
81
- "webpack": "^5.106.2",
82
- "webpack-cli": "^7.0.2"
76
+ "ts-loader": "^9.6.2",
77
+ "typescript": "^6.0.3",
78
+ "typescript-eslint": "^8.64.0",
79
+ "webpack": "^5.108.4",
80
+ "webpack-cli": "^7.2.1"
83
81
  },
84
82
  "scripts": {
85
83
  "lint": "eslint doc_src src test",
@@ -112,20 +112,23 @@ module.exports = {
112
112
  module: {
113
113
  rules: [
114
114
  {
115
- test: /\.js$/i,
115
+ test: /\.m?js$/i,
116
116
  use: {
117
117
  loader: 'babel-loader',
118
118
  options: {
119
119
  presets: [ '@babel/preset-env', '@babel/preset-react' ],
120
120
  },
121
- }
121
+ },
122
+ resolve: {
123
+ fullySpecified: false,
124
+ },
122
125
  },
123
126
  {
124
127
  test: /\.tsx?$/i,
125
128
  use: {
126
129
  loader: 'ts-loader',
127
130
  options: {
128
- configFile: path.resolve(__dirname, 'doc.tsconfig.json'),
131
+ configFile: path.resolve(__dirname, `${docSrcDir}/demo/tsconfig.json`),
129
132
  },
130
133
  },
131
134
  },
@@ -75,7 +75,7 @@ module.exports = {
75
75
  {
76
76
  loader: 'ts-loader',
77
77
  options: {
78
- configFile: path.resolve(__dirname, 'test-graphic.tsconfig.json'),
78
+ configFile: path.resolve(__dirname, '../test/graphic_test_app/tsconfig.json'),
79
79
  },
80
80
  },
81
81
  ],
package/src/decs.d.ts CHANGED
@@ -22,6 +22,8 @@
22
22
  * -------------------------------------------------------------------------- */
23
23
 
24
24
 
25
+ declare module '*.css' {}
26
+
25
27
  declare module '*.ogg' {
26
28
  const path: string;
27
29
  export default path;
@@ -22,6 +22,8 @@
22
22
  * -------------------------------------------------------------------------- */
23
23
 
24
24
 
25
+ declare module '*.css' {}
26
+
25
27
  declare module '*.pgn' {
26
28
  const pgnText: string;
27
29
  export default pgnText;
@@ -0,0 +1,8 @@
1
+ {
2
+ "extends": "../../tsconfig.json",
3
+ "include": [ "./**/*" ],
4
+ "compilerOptions": {
5
+ "rootDir": ".",
6
+ "declaration": false
7
+ }
8
+ }
package/tsconfig.json CHANGED
@@ -1,6 +1,7 @@
1
1
  {
2
2
  "include": [ "./src/**/*" ],
3
3
  "compilerOptions": {
4
+ "rootDir": "./src",
4
5
  "sourceMap": true,
5
6
  "declaration": true,
6
7
  "module": "es2020",
@@ -8,8 +9,6 @@
8
9
  "jsx": "react",
9
10
  "types": [],
10
11
  "allowJs": false,
11
- "strict": true,
12
- "forceConsistentCasingInFileNames": true,
13
- "moduleResolution": "node"
12
+ "strict": true
14
13
  }
15
14
  }
@@ -1,7 +0,0 @@
1
- {
2
- "extends": "../tsconfig.json",
3
- "include": [ "../doc_src/demo/**/*", "../src/**/*" ],
4
- "compilerOptions": {
5
- "declaration": false
6
- }
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "extends": "../tsconfig.json",
3
- "include": [ "../test/graphic_test_app/**/*" ],
4
- "compilerOptions": {
5
- "declaration": false
6
- }
7
- }