kokopu-react 3.0.2 → 3.2.0

package/package.json

@@ -1,97 +1,97 @@
 {
-	"name": "kokopu-react",
-	"version": "3.0.2",
-	"description": "A React-based library to create and display chessboard and chess-related components.",
-	"keywords": [
-		"chess",
-		"react",
-		"chessboard",
-		"ui",
-		"games"
-	],
-	"homepage": "https://www.npmjs.com/package/kokopu-react",
-	"bugs": "https://github.com/yo35/kokopu-react/issues",
-	"repository": "github:yo35/kokopu-react",
-	"license": "LGPL-3.0-or-later",
-	"author": "Yoann Le Montagner <yo35@melix.net>",
-	"funding": "https://www.paypal.com/donate?hosted_button_id=4EGWA4YEZSALW",
-	"main": "dist/lib/index.js",
-	"files": [
-		"dist/lib",
-		"doc_src",
-		"scripts/doc.styleguide.config.js",
-		"scripts/doc.tsconfig.json",
-		"scripts/docker-compose.yml",
-		"scripts/test-graphic.tsconfig.json",
-		"scripts/test-graphic.webpack.config.js",
-		"scripts/test-headless.webpack.config.js",
-		"src",
-		"test",
-		".eslintrc.yml",
-		".nycrc.yml",
-		"CHANGELOG.md",
-		"CREDITS.md",
-		"LICENSE",
-		"README.md",
-		"tsconfig.json"
-	],
-	"peerDependencies": {
-		"kokopu": "^4.3.0",
-		"react": "17.x.x || 18.x.x"
-	},
-	"dependencies": {
-		"htmlparser2": "^9.1.0"
-	},
-	"devDependencies": {
-		"@babel/preset-env": "^7.23.8",
-		"@babel/preset-react": "^7.23.3",
-		"@emotion/react": "^11.11.3",
-		"@emotion/styled": "^11.11.0",
-		"@mui/material": "^5.15.5",
-		"@types/react": "^18.2.48",
-		"@types/react-dom": "^18.2.18",
-		"@typescript-eslint/eslint-plugin": "^6.19.0",
-		"@typescript-eslint/parser": "^6.19.0",
-		"babel-loader": "^9.1.3",
-		"copy-webpack-plugin": "^12.0.2",
-		"copyfiles": "^2.4.1",
-		"coverage-istanbul-loader": "^3.0.5",
-		"css-loader": "^6.9.1",
-		"eslint": "^8.56.0",
-		"eslint-plugin-react": "^7.33.2",
-		"html-webpack-plugin": "^5.6.0",
-		"img-diff-js": "^0.5.2",
-		"kokopu": "^4.8.1",
-		"mocha": "^10.2.0",
-		"null-loader": "^4.0.1",
-		"nyc": "^15.1.0",
-		"react": "^18.2.0",
-		"react-docgen-typescript": "^2.2.2",
-		"react-dom": "^18.2.0",
-		"react-styleguidist": "^13.1.2",
-		"rimraf": "^5.0.5",
-		"selenium-webdriver": "^4.16.0",
-		"ssh2-sftp-client": "^10.0.0",
-		"style-loader": "^3.3.4",
-		"ts-loader": "^9.5.1",
-		"typescript": "^5.3.3",
-		"unit.js": "^2.1.1",
-		"webpack": "^5.89.0",
-		"webpack-cli": "^5.1.4"
-	},
-	"scripts": {
-		"lint": "eslint doc_src src test",
-		"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",
-		"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",
-		"start": "styleguidist server --open --config scripts/doc.styleguide.config.js",
-		"clean": "rimraf build dist",
-		"predeploy": "npm run test && npm run build",
-		"deploy": "npm publish && node scripts/deploy.js"
-	}
+    "name": "kokopu-react",
+    "version": "3.2.0",
+    "description": "A React-based library to create and display chessboard and chess-related components.",
+    "keywords": [
+        "chess",
+        "react",
+        "chessboard",
+        "ui",
+        "games"
+    ],
+    "homepage": "https://www.npmjs.com/package/kokopu-react",
+    "bugs": "https://github.com/yo35/kokopu-react/issues",
+    "repository": "github:yo35/kokopu-react",
+    "license": "LGPL-3.0-or-later",
+    "author": "Yoann Le Montagner <yo35@melix.net>",
+    "funding": "https://www.paypal.com/donate?hosted_button_id=4EGWA4YEZSALW",
+    "main": "dist/lib/index.js",
+    "files": [
+        "dist/lib",
+        "doc_src",
+        "scripts/doc.styleguide.config.js",
+        "scripts/doc.tsconfig.json",
+        "scripts/docker-compose.yml",
+        "scripts/test-graphic.tsconfig.json",
+        "scripts/test-graphic.webpack.config.js",
+        "scripts/test-headless.webpack.config.js",
+        "src",
+        "test",
+        ".eslintrc.yml",
+        ".nycrc.yml",
+        "CHANGELOG.md",
+        "CREDITS.md",
+        "LICENSE",
+        "README.md",
+        "tsconfig.json"
+    ],
+    "peerDependencies": {
+        "kokopu": "^4.9.1",
+        "react": "17.x.x || 18.x.x"
+    },
+    "dependencies": {
+        "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",
+        "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",
+        "img-diff-js": "^0.5.4",
+        "kokopu": "^4.10.0",
+        "mocha": "^10.4.0",
+        "null-loader": "^4.0.1",
+        "nyc": "^15.1.0",
+        "react": "^18.2.0",
+        "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",
+        "style-loader": "^4.0.0",
+        "ts-loader": "^9.5.1",
+        "typescript": "^5.4.5",
+        "unit.js": "^2.1.1",
+        "webpack": "^5.91.0",
+        "webpack-cli": "^5.1.4"
+    },
+    "scripts": {
+        "lint": "eslint doc_src src test",
+        "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",
+        "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",
+        "start": "styleguidist server --open --config scripts/doc.styleguide.config.js",
+        "clean": "rimraf build dist",
+        "predeploy": "npm run test && npm run build",
+        "deploy": "npm publish && node scripts/deploy.js"
+    }
 }

package/scripts/doc.styleguide.config.js

@@ -39,8 +39,16 @@ fs.mkdirSync(path.resolve(__dirname, tmpDir), { recursive: true });
 // -------------------------------
 
 const componentSectionTitle = 'Components';
-const components = [ 'errorbox/ErrorBox', 'icons/SquareMarkerIcon', 'icons/TextMarkerIcon', 'icons/ArrowMarkerIcon', 'icons/ChessPieceIcon',
-	'chessboard/Chessboard', 'movetext/Movetext' ];
+const components = [
+    'errorbox/ErrorBox',
+    'icons/SquareMarkerIcon',
+    'icons/TextMarkerIcon',
+    'icons/ArrowMarkerIcon',
+    'icons/ChessPieceIcon',
+    'chessboard/Chessboard',
+    'navigationboard/NavigationBoard',
+    'movetext/Movetext',
+];
 
 
 // Demo section configuration
@@ -48,12 +56,14 @@ const components = [ 'errorbox/ErrorBox', 'icons/SquareMarkerIcon', 'icons/TextM
 
 const demoSectionTitle = 'Live demo';
 const demoPages = [
-	{ id: 'ChessboardBase', title: 'Chessboard - Basic features' },
-	{ id: 'ChessboardInteraction', title: 'Chessboard - Interactions' },
-	{ id: 'ChessboardMove', title: 'Chessboard - Display moves' },
-	{ id: 'ChessboardSmallScreens', title: 'Chessboard - Small screens' },
-	{ id: 'MovetextBase', title: 'Movetext - Basic features' },
-	{ id: 'MovetextInteraction', title: 'Movetext - Interactions' },
+    { id: 'ChessboardBase', title: 'Chessboard - Basic features' },
+    { id: 'ChessboardInteraction', title: 'Chessboard - Interactions' },
+    { id: 'ChessboardMove', title: 'Chessboard - Display moves' },
+    { id: 'ChessboardSmallScreens', title: 'Chessboard - Small screens' },
+    { id: 'NavigationBoardBase', title: 'NavigationBoard - Basic features' },
+    { id: 'NavigationBoardUncontrolledVsControlled', title: 'NavigationBoard - Uncontrolled vs. controlled' },
+    { id: 'MovetextBase', title: 'Movetext - Basic features' },
+    { id: 'MovetextInteraction', title: 'Movetext - Interactions' },
 ];
 
 
@@ -62,11 +72,11 @@ const demoPages = [
 
 // Generate the Markdown file corresponding to each demo page.
 demoPages.forEach(demoPage => {
-	fs.writeFileSync(path.resolve(__dirname, `${tmpDir}/${demoPage.id}.md`),
-		'```js\n' +
-		`<Page${demoPage.id} />\n` +
-		'```\n'
-	);
+    fs.writeFileSync(path.resolve(__dirname, `${tmpDir}/${demoPage.id}.md`),
+        '```js\n' +
+        `<Page${demoPage.id} />\n` +
+        '```\n'
+    );
 });
 
 // Generate the changelog page.
@@ -77,14 +87,14 @@ fs.writeFileSync(path.resolve(__dirname, `${tmpDir}/changelog.md`), changelog.jo
 
 // Generate the table of contents for each sections with sub-sections.
 function generateTableOfContents(parentName, itemNames) {
-	const text = itemNames.map(itemName => {
-		itemName = path.basename(itemName);
-		const link = `#/${parentName}/${itemName}`.replace(/ /g, '%20');
-		return `- [${itemName}](${link})\n`;
-	}).join('');
-	const filename = `${tmpDir}/Header_${parentName.replace(/ /g, '_')}.md`;
-	fs.writeFileSync(path.resolve(__dirname, filename), text);
-	return filename;
+    const text = itemNames.map(itemName => {
+        itemName = path.basename(itemName);
+        const link = `#/${parentName}/${itemName}`.replace(/ /g, '%20');
+        return `- [${itemName}](${link})\n`;
+    }).join('');
+    const filename = `${tmpDir}/Header_${parentName.replace(/ /g, '_')}.md`;
+    fs.writeFileSync(path.resolve(__dirname, filename), text);
+    return filename;
 }
 const componentsTocFilename = generateTableOfContents(componentSectionTitle, components);
 const demoTocFilename = generateTableOfContents(demoSectionTitle, demoPages.map(demoPage => demoPage.title));
@@ -96,106 +106,106 @@ const demoContext = Object.fromEntries(demoPages.map(demoPage => [ 'Page' + demo
 
 // Styleguidist config.
 module.exports = {
-	styleguideDir: '../dist/docs',
-	webpackConfig: {
-		module: {
-			rules: [
-				{
-					test: /\.js$/i,
-					use: {
-						loader: 'babel-loader',
-						options: {
-							presets: [ '@babel/preset-env', '@babel/preset-react' ],
-						},
-					}
-				},
-				{
-					test: /\.tsx?$/i,
-					use: {
-						loader: 'ts-loader',
-						options: {
-							configFile: path.resolve(__dirname, 'doc.tsconfig.json'),
-						},
-					},
-				},
-				{
-					test: /\.css$/i,
-					use: [ 'style-loader', 'css-loader' ],
-				},
-				{
-					test: /\.(png|woff|woff2)$/i,
-					type: 'asset/resource',
-				},
-				{
-					test: /\.pgn$/i,
-					type: 'asset/source',
-				},
-			],
-		},
-		resolve: {
-			extensions: [ '*.js', '*.ts', '*.tsx' ],
-		},
-	},
-	propsParser: (filePath, source, resolver, handlers) => reactDocgenTypescript.parse(filePath, source, resolver, handlers),
-	usageMode: 'expand',
-	exampleMode: 'expand',
-	context: Object.assign({}, componentContext, demoContext),
-	getComponentPathLine: componentPath => `import { ${path.basename(componentPath, '.tsx')} } from 'kokopu-react';`,
-	getExampleFilename: componentPath => path.resolve(__dirname, `${docSrcDir}/examples/${path.basename(componentPath, '.tsx')}.md`),
-	pagePerSection: true,
-	sections: [
-		{
-			name: 'Home',
-			content: `${docSrcDir}/home.md`,
-		},
-		{
-			name: componentSectionTitle,
-			content: componentsTocFilename,
-			components: components.map(componentName => `${srcDir}/${componentName}.tsx`),
-			sectionDepth: 1,
-		},
-		{
-			name: demoSectionTitle,
-			content: demoTocFilename,
-			sectionDepth: 1,
-			sections: demoPages.map(demoPage => {
-				return {
-					name: demoPage.title,
-					content: `${tmpDir}/${demoPage.id}.md`,
-					exampleMode: 'hide',
-				};
-			}),
-		},
-		{
-			name: 'Webpack configuration',
-			content: `${docSrcDir}/webpack_configuration.md`,
-		},
-		{
-			name: 'Kokopu core library documentation',
-			href: 'https://kokopu.yo35.org/',
-		},
-		{
-			name: 'ChangeLog',
-			content: `${tmpDir}/changelog.md`,
-		},
-		{
-			name: 'Migrate to 2.x',
-			content: `${docSrcDir}/migrate_to_2.md`,
-		},
-		{
-			name: 'Migrate to 3.x',
-			content: `${docSrcDir}/migrate_to_3.md`,
-		},
-	],
-	styleguideComponents: {
-		LogoRenderer: path.resolve(__dirname, `${docSrcDir}/theming/LogoRenderer`),
-	},
-	template: {
-		favicon: 'kokopu-react-favicon.png',
-	},
-	theme: {
-		sidebarWidth: 300,
-	},
-	title: 'Kokopu-React documentation',
-	version: version,
+    styleguideDir: '../dist/docs',
+    webpackConfig: {
+        module: {
+            rules: [
+                {
+                    test: /\.js$/i,
+                    use: {
+                        loader: 'babel-loader',
+                        options: {
+                            presets: [ '@babel/preset-env', '@babel/preset-react' ],
+                        },
+                    }
+                },
+                {
+                    test: /\.tsx?$/i,
+                    use: {
+                        loader: 'ts-loader',
+                        options: {
+                            configFile: path.resolve(__dirname, 'doc.tsconfig.json'),
+                        },
+                    },
+                },
+                {
+                    test: /\.css$/i,
+                    use: [ 'style-loader', 'css-loader' ],
+                },
+                {
+                    test: /\.(png|woff|woff2)$/i,
+                    type: 'asset/resource',
+                },
+                {
+                    test: /\.pgn$/i,
+                    type: 'asset/source',
+                },
+            ],
+        },
+        resolve: {
+            extensions: [ '*.js', '*.ts', '*.tsx' ],
+        },
+    },
+    propsParser: (filePath, source, resolver, handlers) => reactDocgenTypescript.parse(filePath, source, resolver, handlers),
+    usageMode: 'expand',
+    exampleMode: 'expand',
+    context: Object.assign({}, componentContext, demoContext),
+    getComponentPathLine: componentPath => `import { ${path.basename(componentPath, '.tsx')} } from 'kokopu-react';`,
+    getExampleFilename: componentPath => path.resolve(__dirname, `${docSrcDir}/examples/${path.basename(componentPath, '.tsx')}.md`),
+    pagePerSection: true,
+    sections: [
+        {
+            name: 'Home',
+            content: `${docSrcDir}/home.md`,
+        },
+        {
+            name: componentSectionTitle,
+            content: componentsTocFilename,
+            components: components.map(componentName => `${srcDir}/${componentName}.tsx`),
+            sectionDepth: 1,
+        },
+        {
+            name: demoSectionTitle,
+            content: demoTocFilename,
+            sectionDepth: 1,
+            sections: demoPages.map(demoPage => {
+                return {
+                    name: demoPage.title,
+                    content: `${tmpDir}/${demoPage.id}.md`,
+                    exampleMode: 'hide',
+                };
+            }),
+        },
+        {
+            name: 'Webpack configuration',
+            content: `${docSrcDir}/webpack_configuration.md`,
+        },
+        {
+            name: 'Kokopu core library documentation',
+            href: 'https://kokopu.yo35.org/',
+        },
+        {
+            name: 'ChangeLog',
+            content: `${tmpDir}/changelog.md`,
+        },
+        {
+            name: 'Migrate to 2.x',
+            content: `${docSrcDir}/migrate_to_2.md`,
+        },
+        {
+            name: 'Migrate to 3.x',
+            content: `${docSrcDir}/migrate_to_3.md`,
+        },
+    ],
+    styleguideComponents: {
+        LogoRenderer: path.resolve(__dirname, `${docSrcDir}/theming/LogoRenderer`),
+    },
+    template: {
+        favicon: 'kokopu-react-favicon.png',
+    },
+    theme: {
+        sidebarWidth: 300,
+    },
+    title: 'Kokopu-React documentation',
+    version: version,
 };

package/scripts/doc.tsconfig.json

@@ -1,7 +1,7 @@
 {
-	"extends": "../tsconfig.json",
-	"include": [ "../doc_src/demo/**/*" ],
-	"compilerOptions": {
-		"declaration": false
-	}
+    "extends": "../tsconfig.json",
+    "include": [ "../doc_src/demo/**/*" ],
+    "compilerOptions": {
+        "declaration": false
+    }
 }

package/scripts/docker-compose.yml

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

package/scripts/test-graphic.tsconfig.json

@@ -1,7 +1,7 @@
 {
-	"extends": "../tsconfig.json",
-	"include": [ "../test/graphic_test_app/**/*" ],
-	"compilerOptions": {
-		"declaration": false
-	}
+    "extends": "../tsconfig.json",
+    "include": [ "../test/graphic_test_app/**/*" ],
+    "compilerOptions": {
+        "declaration": false
+    }
 }