Add Crossword component to dev kitchen (#1753)

Co-authored-by: oliverabrahams <[email protected]>

libs/@guardian/eslint-config/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @guardian/eslint-config
 
+## 10.0.0-beta.5
+
+### Breaking Changes
+
+`react-hooks/exhaustive-deps` is now an `error` (rather than `warn`).
+
+This means that if a hook that takes an array of deps is not passed all the deps it needs, linting will fail.
+
 ## 10.0.0-beta.4
 
 ### Patch Changes
@@ -43,7 +51,8 @@ It also includes configs for `jest`, `storybook` and `react`.
 
 See the [README](README.md) for full details.
 
-> ESLint 9 contains a lot of breaking changes, including a new config format. See their [migration guide](https://eslint.org/docs/latest/use/migrate-to-9.0.0) for more details.
+> ESLint 9 contains a lot of breaking changes, including a new config format. See
+> their [migration guide](https://eslint.org/docs/latest/use/migrate-to-9.0.0) for more details.
 >
 > Note that [ESLint 8 is EOL 2024-10-05](https://eslint.org/version-support/).
 
@@ -62,17 +71,21 @@ See the [README](README.md) for full details.
 
 ### Patch Changes
 
-- 0382052: 1. All packages are now ES modules, although they should be compatible with CommonJS environments. 2. Adds entry points for projects that can consume [`package.json#exports`](https://nodejs.org/api/packages.html#exports), alongside `main`.
+- 0382052: 1. All packages are now ES modules, although they should be compatible with CommonJS environments. 2. Adds
+  entry points for projects that can consume [`package.json#exports`](https://nodejs.org/api/packages.html#exports),
+  alongside `main`.
 
 ## 8.0.0
 
 ### Major Changes
 
 - cc7aa7d: Requires curly braces in all circumstances.
 
-  This should help reduce noise in diffs, and remove ambiguity about when you should use curly braces (and possibly when a block starts and ends), especially for people unfamiliar with the language.
+  This should help reduce noise in diffs, and remove ambiguity about when you should use curly braces (and possibly when
+  a block starts and ends), especially for people unfamiliar with the language.
 
-  _Note that this rule is fixable, so running eslint with the `--fix` flag will automatically update your code to comply with the new setting._
+  _Note that this rule is fixable, so running eslint with the `--fix` flag will automatically update your code to comply
+  with the new setting._
 
 ## 7.0.1
 
@@ -93,7 +106,8 @@ See the [README](README.md) for full details.
 
 ### Major Changes
 
-- 9e0cb43: `@typescript-eslint/eslint-plugin` and `@typescript-eslint/parser` dependencies upgraded to next major version (6).
+- 9e0cb43: `@typescript-eslint/eslint-plugin` and `@typescript-eslint/parser` dependencies upgraded to next major
+  version (6).
 
 ## 5.0.0
 
@@ -151,14 +165,17 @@ See the [README](README.md) for full details.
 
   We extended `plugin:prettier/recommended` which
 
-  1. used `eslint-config-prettier` to disable any white-space formatting rules that would conflict with our prettier config
-  2. used `eslint-plugin-prettier` to lint for formatting errors that did not match our prettier config
+  1.  used `eslint-config-prettier` to disable any white-space formatting rules that would conflict with our prettier
+      config
+  2.  used `eslint-plugin-prettier` to lint for formatting errors that did not match our prettier config
 
-  This is quite expensive, and although it means you could use `--fix` to apply prettier, it's not as fast as using prettier directly.
+  This is quite expensive, and although it means you could use `--fix` to apply prettier, it's not as fast as using
+  prettier directly.
 
   ### After
 
-  We still use `eslint-config-prettier` to avoid conflicts with our `prettier` config, but we no longer lint for errors (and therefore also don't fix them).
+  We still use `eslint-config-prettier` to avoid conflicts with our `prettier` config, but we no longer lint for
+  errors (and therefore also don't fix them).
 
   ### Recommendations
 
@@ -167,7 +184,8 @@ See the [README](README.md) for full details.
   - via [editor integration](https://prettier.io/docs/en/editors.html)
   - via a [pre-commit hook](https://prettier.io/docs/en/precommit.html)
 
-  If you prefer the way this used to work (applying `prettier` formatting as part of linting), add the [eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier) manually to your ESLint config.
+  If you prefer the way this used to work (applying `prettier` formatting as part of linting), add
+  the [eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier) manually to your ESLint config.
 
 ## 1.0.2
 

libs/@guardian/eslint-config/configs/react.js

@@ -29,6 +29,7 @@ export default [
 				},
 			],
 			...hooks.configs.recommended.rules,
+			'react-hooks/exhaustive-deps': 'error',
 		},
 		settings: {
 			react: {

libs/@guardian/eslint-config/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@guardian/eslint-config",
-	"version": "10.0.0-beta.4",
+	"version": "10.0.0-beta.5",
 	"description": "ESLint config for Guardian JavaScript projects",
 	"type": "module",
 	"main": "index.js",

libs/@guardian/source-development-kitchen/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @guardian/source-development-kitchen
 
+## 13.1.0
+
+### Minor Changes
+
+- afe409d: Add WIP `Crossword` component
+
 ## 13.0.0
 
 ### Major Changes

libs/@guardian/source-development-kitchen/eslint.config.js

@@ -7,6 +7,7 @@ export default [
 			'jest.dist.*', // depends on build output, so don't lint it
 			'.wireit',
 			'storybook-static',
+			'src/react-components/crossword/vendor',
 		],
 	},
 	...guardian.configs.recommended,

libs/@guardian/source-development-kitchen/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@guardian/source-development-kitchen",
-	"version": "13.0.0",
+	"version": "13.1.0",
 	"sideEffects": false,
 	"type": "module",
 	"exports": {

libs/@guardian/source-development-kitchen/src/react-components/crossword/@types/crossword.ts

@@ -0,0 +1,45 @@
+export type CrosswordData = {
+	creator?: {
+		name: string;
+		webUrl: string;
+	};
+	crosswordType:
+		| 'cryptic'
+		| 'everyman'
+		| 'prize'
+		| 'quick-cryptic'
+		| 'quick'
+		| 'quiptic'
+		| 'special'
+		| 'speedy'
+		| 'weekend';
+
+	date: number;
+	dateSolutionAvailable?: number;
+	dimensions: {
+		cols: number;
+		rows: number;
+	};
+	entries: Array<{
+		clue: string;
+		direction: 'across' | 'down';
+		group: string[];
+		humanNumber: string;
+		id: string;
+		length: number;
+		number: number;
+		position: { x: number; y: number };
+		separatorLocations: {
+			','?: number[] | undefined;
+			'-'?: number[] | undefined;
+		};
+		solution?: string;
+	}>;
+	id: string;
+	name: string;
+	number: number;
+	pdf?: string;
+	solutionAvailable: boolean;
+	webPublicationDate?: number;
+	instructions?: string;
+};

libs/@guardian/source-development-kitchen/src/react-components/crossword/Crossword.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryFn } from '@storybook/react';
+import type { CrosswordProps } from './Crossword';
+import { Crossword } from './Crossword';
+import { cryptic } from './stories/cryptic';
+import { everyman } from './stories/everyman';
+import { prize } from './stories/prize';
+import { quick } from './stories/quick';
+import { quickCryptic } from './stories/quick-cryptic';
+import { quiptic } from './stories/quiptic';
+import { special } from './stories/special';
+import { speedy } from './stories/speedy';
+import { weekend } from './stories/weekend';
+
+const meta: Meta<typeof Crossword> = {
+	component: Crossword,
+	title: 'React Components/Crossword',
+};
+
+export default meta;
+
+const Template: StoryFn<typeof Crossword> = (args: CrosswordProps) => {
+	return <Crossword {...args} />;
+};
+
+export const Cryptic: StoryFn<typeof Crossword> = Template.bind({});
+Cryptic.args = { data: cryptic };
+
+export const Everyman: StoryFn<typeof Crossword> = Template.bind({});
+Everyman.args = { data: everyman };
+
+export const Prize: StoryFn<typeof Crossword> = Template.bind({});
+Prize.args = { data: prize };
+
+export const Quick: StoryFn<typeof Crossword> = Template.bind({});
+Quick.args = { data: quick };
+
+export const QuickCryptic: StoryFn<typeof Crossword> = Template.bind({});
+QuickCryptic.args = { data: quickCryptic };
+
+export const Quiptic: StoryFn<typeof Crossword> = Template.bind({});
+Quiptic.args = { data: quiptic };
+
+export const Special: StoryFn<typeof Crossword> = Template.bind({});
+Special.args = { data: special };
+
+export const Speedy: StoryFn<typeof Crossword> = Template.bind({});
+Speedy.args = { data: speedy };
+
+export const Weekend: StoryFn<typeof Crossword> = Template.bind({});
+Weekend.args = { data: weekend };

libs/@guardian/source-development-kitchen/src/react-components/crossword/Crossword.tsx

@@ -0,0 +1,37 @@
+import { css } from '@emotion/react';
+import { palette } from '@guardian/source/foundations';
+import type { CrosswordData } from './@types/crossword';
+import { CrosswordPlayer } from './vendor/mycrossword';
+
+export type CrosswordProps = {
+	data: CrosswordData;
+	theme?: {
+		background?: string;
+		grid?: string;
+	};
+};
+
+const defaultTheme: CrosswordProps['theme'] = {
+	background: palette.neutral[100],
+	grid: palette.neutral[7],
+};
+
+export const Crossword = ({
+	theme: userTheme,
+	data,
+	...props
+}: CrosswordProps) => {
+	const theme = { ...defaultTheme, ...userTheme };
+
+	return (
+		<div
+			css={css`
+				background-color: ${theme.background};
+				border: ${theme.grid} solid 1px;
+			`}
+			{...props}
+		>
+			<CrosswordPlayer data={data} id={data.id} />
+		</div>
+	);
+};

libs/@guardian/source-development-kitchen/src/react-components/crossword/README.md

@@ -0,0 +1,21 @@
+# `Crossword`
+
+A standalone component for rendering crosswords.
+
+## Install
+
+```sh
+$ pnpm add @guardian/source-development-kitchen
+```
+
+or
+
+```sh
+$ npm i @guardian/source-development-kitchen
+```
+
+## Use
+
+### API
+
+See [storybook](https://guardian.github.io/storybooks/?path=/docs/source-development-kitchen_react-components-crossword--docs)