create react-crossword package in workspace

and restore dev kitchen `Crossword` export to `main`

Author: sndrs

.changeset/config.json

@@ -8,7 +8,13 @@
 	"baseBranch": "main",
 	"updateInternalDependencies": "patch",
 	"bumpVersionsWithWorkspaceProtocolOnly": false,
-	"ignore": ["github-pages", "@configs/*", "coverage", "storybooks"],
+	"ignore": [
+		"github-pages",
+		"@configs/*",
+		"coverage",
+		"storybooks",
+		"@guardian/react-crossword"
+	],
 	"___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
 		"onlyUpdatePeerDependentsWhenOutOfRange": true
 	}

.github/workflows/chromatic-label-trigger.yml

@@ -17,3 +17,4 @@ jobs:
     secrets:
       CHROMATIC_SOURCE_TOKEN: ${{ secrets.CHROMATIC_SOURCE_TOKEN }}
       CHROMATIC_SOURCE_DEVELOPMENT_KITCHEN_TOKEN: ${{ secrets.CHROMATIC_SOURCE_DEVELOPMENT_KITCHEN_TOKEN }}
+      CHROMATIC_REACT_CROSSWORD: ${{ secrets.CHROMATIC_REACT_CROSSWORD }}

.github/workflows/chromatic.yml

@@ -7,6 +7,8 @@ on:
         required: true
       CHROMATIC_SOURCE_DEVELOPMENT_KITCHEN_TOKEN:
         required: true
+      CHROMATIC_REACT_CROSSWORD:
+        required: true
 
 jobs:
   deploy:
@@ -20,6 +22,8 @@ jobs:
             token: CHROMATIC_SOURCE_TOKEN
           - lib: source-development-kitchen
             token: CHROMATIC_SOURCE_DEVELOPMENT_KITCHEN_TOKEN
+          - lib: react-crossword
+            token: CHROMATIC_REACT_CROSSWORD
     steps:
       - uses: actions/checkout@v4
         with:

.github/workflows/ci.yml

@@ -44,6 +44,7 @@ jobs:
     secrets:
       CHROMATIC_SOURCE_TOKEN: ${{ secrets.CHROMATIC_SOURCE_TOKEN }}
       CHROMATIC_SOURCE_DEVELOPMENT_KITCHEN_TOKEN: ${{ secrets.CHROMATIC_SOURCE_DEVELOPMENT_KITCHEN_TOKEN }}
+      CHROMATIC_REACT_CROSSWORD: ${{ secrets.CHROMATIC_REACT_CROSSWORD }}
     if: |
       github.ref == 'refs/heads/main' ||
       contains(github.event.pull_request.labels.*.name, 'run_chromatic') ||

Makefile

@@ -394,6 +394,42 @@ install: check-node-version
 @guardian/prettier\:tsc: env
 	@corepack pnpm --filter @guardian/prettier tsc
 
+.PHONY: @guardian/react-crossword\:build
+@guardian/react-crossword\:build: env
+	@corepack pnpm --filter @guardian/react-crossword build
+
+.PHONY: @guardian/react-crossword\:build-storybook
+@guardian/react-crossword\:build-storybook: env
+	@corepack pnpm --filter @guardian/react-crossword build-storybook
+
+.PHONY: @guardian/react-crossword\:dev
+@guardian/react-crossword\:dev: env
+	@corepack pnpm --filter @guardian/react-crossword dev
+
+.PHONY: @guardian/react-crossword\:fix
+@guardian/react-crossword\:fix: env
+	@corepack pnpm --filter @guardian/react-crossword fix
+
+.PHONY: @guardian/react-crossword\:lint
+@guardian/react-crossword\:lint: env
+	@corepack pnpm --filter @guardian/react-crossword lint
+
+.PHONY: @guardian/react-crossword\:storybook
+@guardian/react-crossword\:storybook: env
+	@corepack pnpm --filter @guardian/react-crossword storybook
+
+.PHONY: @guardian/react-crossword\:test
+@guardian/react-crossword\:test: env
+	@corepack pnpm --filter @guardian/react-crossword test
+
+.PHONY: @guardian/react-crossword\:tsc
+@guardian/react-crossword\:tsc: env
+	@corepack pnpm --filter @guardian/react-crossword tsc
+
+.PHONY: @guardian/react-crossword\:verify-dist
+@guardian/react-crossword\:verify-dist: env
+	@corepack pnpm --filter @guardian/react-crossword verify-dist
+
 .PHONY: @guardian/source\:build
 @guardian/source\:build: env
 	@corepack pnpm --filter @guardian/source build

README.md

@@ -24,6 +24,7 @@ The following packages live in `libs/@guardian/*` and are published to NPM:
 - [@guardian/libs](libs/@guardian/libs)
 - [@guardian/newsletter-types](libs/@guardian/newsletter-types)
 - [@guardian/prettier](libs/@guardian/prettier)
+- [@guardian/react-crossword](libs/@guardian/react-crossword)
 - [@guardian/source](libs/@guardian/source)
 - [@guardian/source-development-kitchen](libs/@guardian/source-development-kitchen)
 - [@guardian/tsconfig](libs/@guardian/tsconfig)
@@ -161,6 +162,18 @@ Project-specific tasks are defined as `scripts` in their `package.json`, and can
 - `make @guardian/prettier:lint`
 - `make @guardian/prettier:tsc`
 
+#### @guardian/react-crossword
+
+- `make @guardian/react-crossword:build`
+- `make @guardian/react-crossword:build-storybook`
+- `make @guardian/react-crossword:dev`
+- `make @guardian/react-crossword:fix`
+- `make @guardian/react-crossword:lint`
+- `make @guardian/react-crossword:storybook`
+- `make @guardian/react-crossword:test`
+- `make @guardian/react-crossword:tsc`
+- `make @guardian/react-crossword:verify-dist`
+
 #### @guardian/source
 
 - `make @guardian/source:build`

apps/storybooks/.storybook/main.ts

@@ -24,6 +24,11 @@ const config: StorybookConfig = {
 				// port set in libs/@guardian/source-development-kitchen/package.json
 				url: 'http://localhost:4402',
 			},
+			'react-crossword': {
+				title: 'react-crossword',
+				// port set in libs/@guardian/react-crossword/package.json
+				url: 'http://localhost:4403',
+			},
 		};
 	},
 };

libs/@guardian/react-crossword/.storybook/main.ts

@@ -0,0 +1,21 @@
+import { resolve } from 'node:path';
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+	stories: [
+		resolve('..', process.cwd(), 'src/**/*.mdx'),
+		resolve('..', process.cwd(), 'src/**/*.stories.@(js|jsx|mjs|ts|tsx)'),
+	],
+	addons: [
+		'@storybook/addon-a11y',
+		'@storybook/addon-links',
+		'@storybook/addon-essentials',
+		'@storybook/addon-interactions',
+	],
+	framework: {
+		name: '@storybook/react-vite',
+		options: {},
+	},
+};
+
+export default config;