kokopu-react 1.11.1 → 2.0.1

package/doc_src/demo/{PageMovetextInteraction.js → PageMovetextInteraction.tsx}

@@ -1,4 +1,4 @@
-/******************************************************************************
+/* -------------------------------------------------------------------------- *
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
  *    Copyright (C) 2021-2023  Yoann Le Montagner <yo35 -at- melix.net>       *
@@ -17,13 +17,13 @@
  *    Public License along with this program. If not, see                     *
  *    <http://www.gnu.org/licenses/>.                                         *
  *                                                                            *
- ******************************************************************************/
+ * -------------------------------------------------------------------------- */
 
 
-import React from 'react';
-import { pgnRead } from 'kokopu';
+import * as React from 'react';
+import { pgnRead, Node as GameNode } from 'kokopu';
 
-import { Chessboard, Movetext } from '../../src/index';
+import { Chessboard, Movetext, MovetextProps, MoveSelectEventOrigin } from '../../src/index';
 import { buildComponentDemoCode } from './util';
 
 import Box from '@mui/material/Box';
@@ -41,9 +41,18 @@ import game1 from './game-1.pgn';
 import game2 from './game-2.pgn';
 
 
-export default class Page extends React.Component {
+interface PageState {
+	pgn: string;
+	selection: string;
+	interactionMode: 'none' | 'selectMove';
+	withPopup: boolean;
+	withMove: boolean;
+}
+
 
-	constructor(props) {
+export default class Page extends React.Component<object, PageState> {
+
+	constructor(props: object) {
 		super(props);
 		this.state = {
 			pgn: game1,
@@ -65,25 +74,25 @@ export default class Page extends React.Component {
 		);
 	}
 
-	renderControls() {
+	private renderControls() {
 		return (<>
 			<Stack direction="row" spacing={2} alignItems="center">
 				<ButtonGroup color="primary" size="small">
-					<Button onClick={() => this.set('pgn', game1, 'selection', '28b')}>Game 1</Button>
-					<Button onClick={() => this.set('pgn', game2, 'selection', '15b')}>Game 2</Button>
+					<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.set('interactionMode', evt.target.value)}>
-					<FormControlLabel value="" control={<Radio color="primary" />} label="None" />
+				<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>
 		</>);
 	}
 
-	renderMovetext() {
+	private renderMovetext() {
 		return (
 			<Box>
 				<Movetext
@@ -91,20 +100,20 @@ export default class Page extends React.Component {
 					selection={this.state.selection}
 					pieceSymbols="figurines"
 					diagramVisible={false}
-					interactionMode={this.state.interactionMode}
+					interactionMode={this.getMovetextInterationMode()}
 					onMoveSelected={(nodeId, evtOrigin) => this.handleMoveSelected(nodeId, evtOrigin)}
 				/>
 			</Box>
 		);
 	}
 
-	renderCode() {
-		let attributes = [];
+	private renderCode() {
+		const attributes: string[] = [];
 		attributes.push('game={pgn}');
 		attributes.push('pieceSymbols="figurines"');
 		attributes.push('diagramVisible={false}');
 		attributes.push(`selection="${this.state.selection}"`);
-		switch(this.state.interactionMode) {
+		switch (this.state.interactionMode) {
 			case 'selectMove':
 				attributes.push('interactionMode="selectMove"');
 				attributes.push('onMoveSelected={nodeId => handleMoveSelected(nodeId)}');
@@ -112,48 +121,54 @@ export default class Page extends React.Component {
 			default:
 				break;
 		}
-		let pgnDeclaration = 'const pgn = `\n' + this.state.pgn.trim() + '`;\n\n';
+		const pgnDeclaration = 'const pgn = `\n' + this.state.pgn.trim() + '`;\n\n';
 		return <pre className="kokopu-demoCode">{pgnDeclaration + buildComponentDemoCode('Movetext', attributes)}</pre>;
 	}
 
-	renderNavigationBoard() {
-		let button = <Button size="small" onClick={() => this.handlePopupToggled()}>{this.state.withPopup ? 'Reduce' : 'Open'}</Button>;
-		let { position, move, csl, cal } = this.getCurrentPositionAndAnnotations();
-		let content = this.state.withPopup ? <Stack><Chessboard position={position} move={move} squareMarkers={csl} arrowMarkers={cal} animated={true} />{button}</Stack> : button;
+	private renderNavigationBoard() {
+		const button = <Button size="small" onClick={() => this.setState({ withPopup: !this.state.withPopup })}>{this.state.withPopup ? 'Reduce' : 'Open'}</Button>;
+		const { position, move, csl, cal } = this.getCurrentPositionAndAnnotations();
+		const content = this.state.withPopup ?
+			<Stack><Chessboard position={position} move={move} squareMarkers={csl} arrowMarkers={cal} animated={true} />{button}</Stack> :
+			button;
 		return <Paper className="kokopu-fixedPopup" elevation={3}>{content}</Paper>;
 	}
 
-	handleMoveSelected(nodeId, evtOrigin) {
+	private handleMoveSelected(nodeId: string | undefined, evtOrigin: MoveSelectEventOrigin) {
 		if (nodeId) {
-			this.set('selection', nodeId, 'withMove', evtOrigin === 'key-next');
+			this.setState({ selection: nodeId, withMove: evtOrigin === 'key-next' });
 		}
 	}
 
-	handlePopupToggled() {
-		this.set('withPopup', !this.state.withPopup);
-	}
-
-	set(attributeName, newValue, attributeName2, newValue2) {
-		let newState = {};
-		newState[attributeName] = newValue;
-		if (attributeName2) {
-			newState[attributeName2] = newValue2;
+	private getMovetextInterationMode(): MovetextProps['interactionMode'] {
+		switch (this.state.interactionMode) {
+			case 'selectMove':
+				return this.state.interactionMode;
+			default:
+				return undefined;
 		}
-		this.setState(newState);
 	}
 
-	getCurrentPositionAndAnnotations() {
-		let game = pgnRead(this.state.pgn, 0);
+	private getCurrentPositionAndAnnotations() {
+		const game = pgnRead(this.state.pgn, 0);
 		if (this.state.selection === 'start') {
-			let mainVariation = game.mainVariation();
-			return { position: mainVariation.initialPosition(), csl: mainVariation.tag('csl'), cal: mainVariation.tag('cal') };
+			const mainVariation = game.mainVariation();
+			return {
+				position: mainVariation.initialPosition(),
+				move: undefined,
+				csl: mainVariation.tag('csl'),
+				cal: mainVariation.tag('cal'),
+			};
 		}
 		else {
-			let node = game.findById(this.state.selection);
-			let result = this.state.withMove ? { position: node.positionBefore(), move: node.notation() } : { position: node.position() };
-			result.csl = node.tag('csl');
-			result.cal = node.tag('cal');
-			return result;
+			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,
+				csl: node.tag('csl'),
+				cal: node.tag('cal'),
+			};
 		}
 	}
+
 }

package/doc_src/demo/decs.d.ts

@@ -0,0 +1,31 @@
+/* -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    Copyright (C) 2021-2023  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/>.                                         *
+ *                                                                            *
+ * -------------------------------------------------------------------------- */
+
+
+declare module '*.pgn' {
+	const pgnText: string;
+	export default pgnText;
+}
+
+declare module '*.png' {
+	const path: string;
+	export default path;
+}

package/doc_src/demo/demo.css

@@ -1,4 +1,4 @@
-/******************************************************************************
+/* -------------------------------------------------------------------------- *
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
  *    Copyright (C) 2021-2023  Yoann Le Montagner <yo35 -at- melix.net>       *
@@ -17,7 +17,7 @@
  *    Public License along with this program. If not, see                     *
  *    <http://www.gnu.org/licenses/>.                                         *
  *                                                                            *
- ******************************************************************************/
+ * -------------------------------------------------------------------------- */
 
 
 .kokopu-demoCode {

package/doc_src/demo/{util.js → util.ts}

@@ -1,4 +1,4 @@
-/******************************************************************************
+/* -------------------------------------------------------------------------- *
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
  *    Copyright (C) 2021-2023  Yoann Le Montagner <yo35 -at- melix.net>       *
@@ -17,9 +17,9 @@
  *    Public License along with this program. If not, see                     *
  *    <http://www.gnu.org/licenses/>.                                         *
  *                                                                            *
- ******************************************************************************/
+ * -------------------------------------------------------------------------- */
 
 
-export function buildComponentDemoCode(componentName, attributes) {
+export function buildComponentDemoCode(componentName: string, attributes: string[]) {
 	return attributes.length === 0 ? `<${componentName} />` : `<${componentName} ${attributes.join(' ')} />`;
 }

package/doc_src/migrate_to_2.md

@@ -0,0 +1,26 @@
+Kokopu-React version 2.0.0 introduces some breaking changes with regard to the previous versions.
+Those changes may require some fixes or adjustments in your codebase when upgrading Kokopu-React
+from 1.x to 2.0.0 (or any subsequent version).
+
+
+
+PropTypes
+---------
+
+As of 2.0.0, `Chessboard.propTypes`, `Movetext.propTypes`, etc... are no longer available, as component parameter type validation
+is ensured through TypeScript. If your codebase includes references to the `propTypes` property of any Kokopu-React component,
+you must remove those references.
+
+
+
+SquareSize parameters
+---------------------
+
+Before 2.0.0, it was possible to define the square size of the `Chessboard` components through a string, i.e. for instance to write
+things such as `<Chessboard squareSize="32" />`. As of 2.0.0, a strict type-checking policy is enforced to avoid unexpected type
+conversions leading to hard-to-debug behaviors. As a consequence, the value passed to the square size parameter must be a number,
+i.e. for instance:
+
+```plain
+<Chessboard squareSize={32} />
+```

package/doc_src/theming/LogoRenderer.js

@@ -1,4 +1,4 @@
-/******************************************************************************
+/* -------------------------------------------------------------------------- *
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
  *    Copyright (C) 2021-2023  Yoann Le Montagner <yo35 -at- melix.net>       *
@@ -17,17 +17,17 @@
  *    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';
 
 
+/* eslint-disable react/prop-types */
+
 const styles = ({ color, fontFamily, fontSize }) => ({
 	logo: {
 		color: color.base,
@@ -41,7 +41,7 @@ const styles = ({ color, fontFamily, fontSize }) => ({
 function LogoRenderer({ classes, children }) {
 	return (<>
 		<div className="kokopu-logo">
-			<img src={logo} />
+			<img src="kokopu-react-logo.png" />
 		</div>
 		<h1 className={classes.logo}>{children}</h1>
 	</>);

package/doc_src/theming/theming.css

@@ -1,4 +1,4 @@
-/******************************************************************************
+/* -------------------------------------------------------------------------- *
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
  *    Copyright (C) 2021-2023  Yoann Le Montagner <yo35 -at- melix.net>       *
@@ -17,7 +17,7 @@
  *    Public License along with this program. If not, see                     *
  *    <http://www.gnu.org/licenses/>.                                         *
  *                                                                            *
- ******************************************************************************/
+ * -------------------------------------------------------------------------- */
  
  
 .kokopu-logo {
@@ -27,3 +27,9 @@
 footer {
 	display: none !important;
 }
+
+#changelog h2 {
+	font-size: inherit;
+	font-weight: bold;
+	margin-top: 24px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "kokopu-react",
-	"version": "1.11.1",
+	"version": "2.0.1",
 	"description": "A React-based library to create and display chessboard and chess-related components.",
 	"keywords": [
 		"chess",
@@ -18,65 +18,78 @@
 	"files": [
 		"dist/lib",
 		"doc_src",
-		"graphic_test_src",
-		"scripts/clean-graphic-output.js",
+		"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",
-		".babelrc",
-		".eslint.yml",
-		".nycrc.yml"
+		".eslintrc.yml",
+		".nycrc.yml",
+		"CHANGELOG.md",
+		"CREDITS.md",
+		"LICENSE",
+		"README.md",
+		"tsconfig.json"
 	],
 	"peerDependencies": {
-		"kokopu": "^4.0.1",
+		"kokopu": "^4.3.0",
 		"react": "17.x.x || 18.x.x"
 	},
 	"dependencies": {
-		"htmlparser2": "^8.0.1",
-		"prop-types": "^15.8.1"
+		"htmlparser2": "^9.0.0"
 	},
 	"devDependencies": {
-		"@babel/cli": "^7.20.7",
-		"@babel/core": "^7.20.12",
-		"@babel/preset-env": "^7.20.2",
+		"@babel/preset-env": "^7.21.5",
 		"@babel/preset-react": "^7.18.6",
-		"@emotion/react": "^11.10.5",
-		"@emotion/styled": "^11.10.5",
-		"@mui/material": "^5.11.7",
+		"@emotion/react": "^11.11.0",
+		"@emotion/styled": "^11.11.0",
+		"@mui/material": "^5.13.2",
+		"@types/react": "^18.2.7",
+		"@types/react-dom": "^18.2.4",
+		"@typescript-eslint/eslint-plugin": "^5.59.7",
+		"@typescript-eslint/parser": "^5.59.7",
 		"babel-loader": "^9.1.2",
-		"babel-plugin-istanbul": "^6.1.1",
 		"copy-webpack-plugin": "^11.0.0",
-		"css-loader": "^6.7.3",
-		"eslint": "^8.33.0",
+		"copyfiles": "^2.4.1",
+		"coverage-istanbul-loader": "^3.0.5",
+		"css-loader": "^6.7.4",
+		"eslint": "^8.41.0",
 		"eslint-plugin-react": "^7.32.2",
-		"html-webpack-plugin": "^5.5.0",
+		"html-webpack-plugin": "^5.5.1",
 		"img-diff-js": "^0.5.2",
-		"kokopu": "^4.2.1",
+		"kokopu": "^4.7.0",
 		"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.0.0",
-		"selenium-webdriver": "^4.8.0",
-		"ssh2-sftp-client": "^9.0.4",
-		"style-loader": "^3.3.1",
+		"react-styleguidist": "^13.1.1",
+		"rimraf": "^5.0.1",
+		"selenium-webdriver": "^4.9.2",
+		"ssh2-sftp-client": "^9.1.0",
+		"style-loader": "^3.3.3",
+		"ts-loader": "^9.4.3",
+		"typescript": "^5.0.4",
 		"unit.js": "^2.1.1",
-		"webpack": "^5.75.0",
-		"webpack-cli": "^5.0.1"
+		"webpack": "^5.84.0",
+		"webpack-cli": "^5.1.1"
 	},
 	"scripts": {
-		"lint": "eslint doc_src graphic_test_src src test",
-		"preunit": "webpack --config scripts/test-headless.webpack.config.js && webpack --config scripts/test-graphic.webpack.config.js && node scripts/clean-graphic-output.js",
-		"unit": "nyc mocha --bail --sort",
+		"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": "make -f scripts/build.mk",
-		"clean": "make -f scripts/build.mk clean",
-		"start": "styleguidist server --open --config scripts/styleguide.config.js",
+		"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

@@ -0,0 +1,192 @@
+/* -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    Copyright (C) 2021-2023  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 fs = require('fs');
+const path = require('path');
+const version = require('../package.json').version;
+
+const reactDocgenTypescript = require('react-docgen-typescript');
+
+const docSrcDir = '../doc_src';
+const srcDir = '../src';
+const tmpDir = '../build/tmp_docs';
+
+fs.mkdirSync(path.resolve(__dirname, tmpDir), { recursive: true });
+
+
+// Component section configuration
+// -------------------------------
+
+const componentSectionTitle = 'Components';
+const components = [ 'errorbox/ErrorBox', 'icons/SquareMarkerIcon', 'icons/TextMarkerIcon', 'icons/ArrowMarkerIcon', 'chessboard/Chessboard', 'movetext/Movetext' ];
+
+
+// Demo section configuration
+// --------------------------
+
+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' },
+];
+
+
+// Build the documentation
+// -----------------------
+
+// Generate the Markdown file corresponding to each demo page.
+demoPages.forEach(demoPage => {
+	const filename = `${tmpDir}/${demoPage.id}.md`;
+	fs.writeFileSync(path.resolve(__dirname, filename),
+		'```js\n' +
+		`<Page${demoPage.id} />\n` +
+		'```\n'
+	);
+	demoPage.filename = filename;
+});
+
+// Generate the changelog page.
+const changelog = fs.readFileSync(path.resolve(__dirname, '../CHANGELOG.md'), { encoding: 'utf8' }).split('\n').slice(2);
+changelog.unshift('<div id="changelog">');
+changelog.push('</div>');
+fs.writeFileSync(path.resolve(__dirname, `${tmpDir}/changelog.md`), changelog.join('\n'));
+
+// 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 componentsTocFilename = generateTableOfContents(componentSectionTitle, components);
+const demoTocFilename = generateTableOfContents(demoSectionTitle, demoPages.map(demoPage => demoPage.title));
+
+// Define the symbols available for example blocks in documentation.
+const componentContext = Object.fromEntries(components.map(componentName => [ path.basename(componentName), path.resolve(__dirname, `${srcDir}/${componentName}`) ]));
+const demoContext = Object.fromEntries(demoPages.map(demoPage => [ 'Page' + demoPage.id, path.resolve(__dirname, `${docSrcDir}/demo/Page${demoPage.id}`) ]));
+
+
+// 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: demoPage.filename,
+					exampleMode: 'hide'
+				};
+			}),
+		},
+		{
+			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`,
+		},
+	],
+	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

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