@guardian/stand 0.0.2 → 0.0.4

package/README.md

@@ -13,3 +13,44 @@ Stand is component library for Guardian editorial tools. It is co-located within
 - Run `pnpm install` to install dependencies.
 - Run `pnpm build` to build, this makes any changes available to flexible-frontend
 - Run `pnpm storybook` to run Storybook
+
+## Contributing
+
+See the [Contributing to Stand](./CONTRIBUTING.md) documentation
+
+## Compatibility
+
+See the package.json `peerDependencies` section for compatible versions of React and other dependencies that Stand works with.
+
+Version sets for matrix testing live in `./scripts/deps-matrix-versions.json`:
+
+The test script `./scripts/test-deps-matrix.sh` reads this JSON file first, then applies any environment overrides you supply. Precedence is:
+
+1. Explicit env var (e.g. `REACT_VERSIONS="18.0.0 19.0.0"`)
+2. Value from `deps-matrix-versions.json`
+
+All three variables (`REACT_VERSIONS`, `EMOTION_VERSIONS`, `TS_VERSIONS`) must be defined after loading; otherwise the script exits with an error.
+
+Matrix generation in CI uses the same JSON file in the workflow: `../.github/workflows/stand-component-library-deps-matrix.yml` to ensure consistency.
+
+### Updating Supported Versions
+
+1. Edit `./scripts/deps-matrix-versions.json` with new versions
+2. Run the matrix test locally:
+    ```bash
+    ./scripts/test-deps-matrix.sh
+    ```
+3. (Optional) Narrow the matrix with overrides:
+    ```bash
+    REACT_VERSIONS="18.0.0" EMOTION_VERSIONS="11.14.0" TS_VERSIONS="5.1" ./scripts/test-deps-matrix.sh
+    ```
+4. Review results (table output and any failures). Fix issues or adjust code
+5. Update `peerDependencies` in `package.json` to reflect the new minimum / tested range
+6. Open a PR, the CI pipeline will comment with the compatibility matrix
+
+### Tips
+
+- Keep versions in ascending order for readability
+- Remove deprecated versions only after confirming no downstream tool depends on them
+- Add a new version first, then run the matrix, then adjust `peerDependencies` once green
+- Changes to `peerDependencies` are always a breaking change to the library, as per our [recommendations](https://github.com/guardian/recommendations/blob/main/npm-packages.md#changes-to-peerdependencies-ranges-are-breaking)

package/dist/byline/Byline.cjs

@@ -291,7 +291,14 @@ const Byline = ({
     allowUntaggedContributors
   ]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { css: styles.bylineContainerStyles, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.bylineEditorStyles(theme?.editor), ref: editorRef, onBlur }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        css: styles.bylineEditorStyles(theme?.editor),
+        ref: editorRef,
+        onBlur
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {

package/package.json

@@ -1,59 +1,63 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "type": "module",
   "exports": {
-    "types": "./dist/types/src/index.d.ts",
+    "types": "./dist/types/index.d.ts",
     "import": "./dist/index.js",
     "require": "./dist/index.cjs"
   },
-  "main": "./dist/index.cjs",
-  "types": "./dist/types/src/index.d.ts",
-  "dependencies": {
-    "@emotion/react": "11.11.4",
-    "@guardian/prosemirror-invisibles": "3.1.1",
-    "prosemirror-dropcursor": "1.8.2",
-    "prosemirror-history": "1.4.1",
-    "prosemirror-keymap": "1.2.2",
-    "prosemirror-model": "1.25.0",
-    "prosemirror-state": "1.4.3",
-    "prosemirror-view": "1.37.2",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "url": "https://github.com/guardian/flexible-content",
+    "directory": "stand-component-library"
   },
+  "main": "./dist/index.cjs",
+  "types": "./dist/types/index.d.ts",
   "devDependencies": {
     "@changesets/cli": "^2.29.7",
+    "@emotion/react": "11.11.4",
     "@guardian/eslint-config": "12.0.0",
     "@guardian/prettier": "8.0.1",
+    "@guardian/prosemirror-invisibles": "3.1.1",
     "@guardian/tsconfig": "1.0.0",
-    "@rollup/plugin-commonjs": "28.0.6",
-    "@rollup/plugin-node-resolve": "16.0.1",
-    "@rollup/plugin-typescript": "12.1.4",
-    "@storybook/addon-docs": "^9.1.7",
-    "@storybook/addon-themes": "^9.1.7",
-    "@storybook/react-vite": "^9.1.7",
-    "@testing-library/jest-dom": "6.8.0",
-    "@testing-library/react": "12.1.5",
-    "@testing-library/user-event": "14.6.1",
+    "@playwright/experimental-ct-react17": "^1.56.1",
+    "@rollup/plugin-commonjs": "28.0.9",
+    "@rollup/plugin-node-resolve": "16.0.3",
+    "@rollup/plugin-typescript": "12.3.0",
+    "@storybook/addon-docs": "^9.1.15",
+    "@storybook/addon-themes": "^9.1.15",
+    "@storybook/react-vite": "^9.1.15",
     "@types/jest": "30.0.0",
+    "@types/node": "^24.9.1",
     "@types/react": "17.0.76",
     "@types/react-dom": "17.0.25",
-    "eslint": "9.36.0",
-    "eslint-plugin-storybook": "^9.1.7",
-    "jest": "30.1.3",
+    "eslint": "9.38.0",
+    "eslint-plugin-storybook": "^9.1.15",
+    "jest": "30.2.0",
     "jest-environment-jsdom": "^30.1.2",
     "prettier": "3.6.2",
+    "prosemirror-dropcursor": "1.8.2",
+    "prosemirror-history": "1.4.1",
+    "prosemirror-keymap": "1.2.2",
+    "prosemirror-model": "1.25.0",
+    "prosemirror-state": "1.4.3",
+    "prosemirror-view": "1.37.2",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "rimraf": "6.0.1",
-    "rollup": "4.52.1",
+    "rollup": "4.52.5",
     "rollup-plugin-esbuild": "6.2.1",
     "rollup-plugin-node-externals": "8.1.1",
-    "storybook": "^9.1.7",
-    "ts-jest": "29.4.4",
+    "storybook": "^9.1.15",
+    "ts-jest": "29.4.5",
     "tslib": "2.8.1",
     "typescript": "5.1.3"
   },
   "peerDependencies": {
-    "@emotion/react": "11.11.4",
+    "@emotion/react": ">=11.11.4 <=11.14.0",
     "@guardian/prosemirror-invisibles": "3.1.1",
     "prosemirror-dropcursor": "1.8.2",
     "prosemirror-history": "1.4.1",
@@ -61,14 +65,17 @@
     "prosemirror-model": "1.25.0",
     "prosemirror-state": "1.4.3",
     "prosemirror-view": "1.37.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "typescript": "5.5.2"
+    "react": "^17.0.2 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.2 || ^18.0.0 || ^19.0.0",
+    "typescript": ">=5.0.0 <=5.9.3"
   },
   "scripts": {
     "build": "rimraf dist && rollup -c",
     "storybook": "storybook dev -p 6007",
     "build-storybook": "storybook build",
-    "test": "jest"
+    "tsc": "tsc",
+    "test": "jest",
+    "test:e2e": "playwright test -c playwright-ct.config.ts",
+    "test:react-matrix": "./scripts/test-react-matrix.sh"
   }
 }

package/.changeset/README.md

@@ -1,8 +0,0 @@
-# Changesets
-
-Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
-with multi-package repos, or single-package repos to help you version and publish your code. You can
-find the full documentation for it [in our repository](https://github.com/changesets/changesets)
-
-We have a quick list of common questions to get you started engaging with this project in
-[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

package/.changeset/config.json

@@ -1,11 +0,0 @@
-{
-	"$schema": "https://unpkg.com/@changesets/config@3.1.1/schema.json",
-	"changelog": "@changesets/cli/changelog",
-	"commit": false,
-	"fixed": [],
-	"linked": [],
-	"access": "public",
-	"baseBranch": "main",
-	"updateInternalDependencies": "patch",
-	"ignore": []
-}

package/.prettierrc

@@ -1 +0,0 @@
-"@guardian/prettier"

package/.storybook/main.ts

@@ -1,12 +0,0 @@
-import type { StorybookConfig } from '@storybook/react-vite';
-
-const config: StorybookConfig = {
-	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-	addons: ['@storybook/addon-docs'],
-	framework: {
-		name: '@storybook/react-vite',
-		options: {},
-	},
-};
-
-export default config;

package/.storybook/preview.tsx

@@ -1,83 +0,0 @@
-import { Global } from '@emotion/react';
-import { css } from '@emotion/react';
-import { withThemeFromJSXProvider } from '@storybook/addon-themes';
-import type { Preview } from '@storybook/react-vite';
-
-const ASSETS_URL = 'https://interactive.guim.co.uk/fonts/guss-webfonts/';
-
-const Fonts = css`
-	@font-face {
-		font-family: 'Guardian Agate Sans';
-		src: url('${ASSETS_URL}GuardianAgateSans1Web/GuardianAgateSans1Web-Regular.woff2')
-			format('woff2');
-		font-weight: 400;
-		font-style: 'normal';
-		font-display: 'fallback';
-	}
-	@font-face {
-		font-family: 'Guardian Agate Sans';
-		src: url('${ASSETS_URL}GuardianAgateSans1Web/GuardianAgateSans1Web-Bold.woff2')
-			format('woff2');
-		font-weight: 700;
-		font-style: normal;
-		font-display: swap;
-	}
-	@font-face {
-		font-family: 'Guardian Agate Sans';
-		src: url('${ASSETS_URL}GuardianAgateSans1Web/GuardianAgateSans1Web-RegularItalic.woff2')
-			format('woff2');
-		font-weight: 400;
-		font-style: italic;
-		font-display: swap;
-	}
-	@font-face {
-		font-family: 'Guardian Agate Sans';
-		src: url('${ASSETS_URL}GuardianAgateSans1Web/GuardianAgateSans1Web-BoldItalic.woff2')
-			format('woff2');
-		font-weight: 700;
-		font-style: italic;
-		font-display: swap;
-	}
-`;
-
-const globalFont = {
-	fontFamily: '"Guardian Agate Sans", "Arial", sans-serif',
-	fontSize: '13px',
-	lineHeight: '1.2',
-	color: '#292929',
-};
-
-const globalStyles = css({
-	html: {
-		height: '100vh',
-		width: '100vw',
-	},
-	body: {
-		...globalFont,
-		minHeight: '100vh',
-		width: '100vw',
-		margin: '0 auto',
-	},
-});
-
-const GlobalStyles = () => <Global styles={[Fonts, globalStyles]} />;
-
-const preview: Preview = {
-	parameters: {
-		controls: {
-			matchers: {
-				color: /(background|color)$/i,
-				date: /Date$/i,
-			},
-		},
-	},
-	decorators: [
-		// eslint-disable-next-line @typescript-eslint/no-unsafe-call -- withThemeFromJSXProvider is a valid function
-		withThemeFromJSXProvider({
-			GlobalStyles, // Adds GlobalStyles to all stories
-		}),
-	],
-};
-
-// eslint-disable-next-line import/no-default-export -- storybook expects default
-export default preview;

package/CHANGELOG.md

@@ -1,7 +0,0 @@
-# @guardian/stand
-
-## 0.0.2
-
-### Patch Changes
-
-- cf56688: Add changesets

package/dist/types/.storybook/main.d.ts

@@ -1,3 +0,0 @@
-import type { StorybookConfig } from '@storybook/react-vite';
-declare const config: StorybookConfig;
-export default config;

package/dist/types/.storybook/preview.d.ts

@@ -1,3 +0,0 @@
-import type { Preview } from '@storybook/react-vite';
-declare const preview: Preview;
-export default preview;

package/dist/types/jest-setup-after-env.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/src/byline/Byline.stories.d.ts

@@ -1,206 +0,0 @@
-/// <reference types="react" />
-import type { TaggedContributor } from './lib';
-declare const meta: {
-    title: string;
-    component: ({ theme, allowUntaggedContributors, contributorLimit, enablePreview, placeholder, initialValue, readOnly, handleSave, searchContributors, onBlur, }: {
-        theme?: {
-            editor?: {
-                invisibles?: {
-                    color?: string | undefined;
-                } | undefined;
-                color?: string | undefined;
-                border?: string | undefined;
-                background?: string | undefined;
-                chip?: {
-                    color?: string | undefined;
-                    border?: string | undefined;
-                    padding?: string | undefined;
-                    borderRadius?: string | undefined;
-                    taggedBackground?: string | undefined;
-                    untagged?: {
-                        color?: string | undefined;
-                    } | undefined;
-                    selected?: {
-                        border?: string | undefined;
-                    } | undefined;
-                } | undefined;
-                lineHeight?: string | undefined;
-                placeholder?: {
-                    color?: string | undefined;
-                } | undefined;
-                readOnlyBackground?: string | undefined;
-            } | undefined;
-            dropdown?: {
-                background?: string | undefined;
-                border?: string | undefined;
-                maxHeight?: string | undefined;
-                li?: {
-                    color?: string | undefined;
-                    borderBottom?: string | undefined;
-                    selected?: {
-                        background?: string | undefined;
-                        color?: string | undefined;
-                    } | undefined;
-                } | undefined;
-            } | undefined;
-        } | undefined;
-        allowUntaggedContributors?: boolean | undefined;
-        contributorLimit?: number | undefined;
-        enablePreview?: boolean | undefined;
-        placeholder?: string | undefined;
-        initialValue?: import("./lib").BylineModel | undefined;
-        readOnly?: boolean | undefined;
-        handleSave: (newValue: import("./lib").BylineModel) => void;
-        searchContributors?: ((selectedText: string) => Promise<TaggedContributor[]>) | undefined;
-        onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element;
-    parameters: {};
-    args: {
-        handleSave: () => void;
-        initialValue: never[];
-        searchContributors: (selectedText: string) => Promise<TaggedContributor[]>;
-        enablePreview: true;
-    };
-};
-export declare const Default: {};
-export declare const WithTheme: {
-    args: {
-        allowUntaggedContributors: true;
-        searchContributors: (selectedText: string) => Promise<TaggedContributor[]>;
-        theme: {
-            editor: {
-                invisibles: {
-                    color: string;
-                };
-                color: string;
-                background: string;
-                border: string;
-                chip: {
-                    color: string;
-                    taggedBackground: string;
-                    border: string;
-                    borderRadius: string;
-                    padding: string;
-                    untagged: {
-                        color: string;
-                    };
-                };
-            };
-            dropdown: {
-                background: string;
-                li: {
-                    color: string;
-                    borderBottom: string;
-                    selected: {
-                        color: string;
-                        background: string;
-                    };
-                };
-            };
-        };
-    };
-};
-export declare const WithUntaggedContributors: {
-    parameters: {
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-    args: {
-        allowUntaggedContributors: true;
-    };
-};
-export declare const WithInitialValue: {
-    args: {
-        allowUntaggedContributors: true;
-        initialValue: ({
-            type: "contributor";
-            value: string;
-            tagId: string;
-            path: string;
-        } | {
-            type: "text";
-            value: string;
-            tagId?: undefined;
-            path?: undefined;
-        } | {
-            type: "contributor";
-            value: string;
-            tagId?: undefined;
-            path?: undefined;
-        })[];
-    };
-};
-export declare const WithNoSearch: {
-    parameters: {
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-    args: {
-        allowUntaggedContributors: true;
-        searchContributors: undefined;
-    };
-};
-export declare const WithNoSearchAndNoUntagged: {
-    parameters: {
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-    args: {
-        allowUntaggedContributors: false;
-        searchContributors: undefined;
-    };
-};
-export declare const WithCustomPlaceholder: {
-    args: {
-        allowUntaggedContributors: true;
-        placeholder: string;
-    };
-};
-export declare const WithContributorLimit: {
-    parameters: {
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-    args: {
-        contributorLimit: number;
-    };
-};
-export declare const WithoutPreview: {
-    parameters: {
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-    args: {
-        allowUntaggedContributors: true;
-        enablePreview: false;
-    };
-};
-export declare const ReadOnly: {
-    args: {
-        readOnly: true;
-        allowUntaggedContributors: true;
-        enablePreview: true;
-        initialValue: ({
-            type: "contributor";
-            value: string;
-            tagId: string;
-            path: string;
-        } | {
-            type: "text";
-            value: string;
-            tagId?: undefined;
-            path?: undefined;
-        } | {
-            type: "contributor";
-            value: string;
-            tagId?: undefined;
-            path?: undefined;
-        })[];
-    };
-};
-export default meta;

package/dist/types/src/byline/Byline.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/types/src/mocks/prosemirror-view.d.ts

@@ -1,10 +0,0 @@
-declare const mockEditorViewMethods: {
-    posAtCoords: () => null;
-    coordsAtPos: () => {
-        left: number;
-        right: number;
-        top: number;
-        bottom: number;
-    };
-};
-export { mockEditorViewMethods };

package/eslint.config.js

@@ -1,14 +0,0 @@
-// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
-import storybook from 'eslint-plugin-storybook';
-
-import guardian from '@guardian/eslint-config';
-
-export default [
-	{
-		ignores: ['dist'],
-	},
-	...guardian.configs.recommended,
-	...guardian.configs.jest,
-	...guardian.configs.react,
-	...storybook.configs['flat/recommended'],
-];

package/jest-setup-after-env.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/jest.config.js

@@ -1,12 +0,0 @@
-import { createDefaultPreset } from 'ts-jest';
-
-const tsJestTransformCfg = createDefaultPreset().transform;
-
-/** @type {import("jest").Config} **/
-export default {
-	testEnvironment: 'jsdom',
-	setupFilesAfterEnv: ['<rootDir>/jest-setup-after-env.ts'],
-	transform: {
-		...tsJestTransformCfg,
-	},
-};

package/rollup.config.js

@@ -1,49 +0,0 @@
-import commonjs from '@rollup/plugin-commonjs';
-import resolve from '@rollup/plugin-node-resolve';
-import typescript from '@rollup/plugin-typescript';
-import esbuild from 'rollup-plugin-esbuild';
-import { nodeExternals } from 'rollup-plugin-node-externals';
-
-/**
- * @returns {import("rollup").RollupOptions[]}
- */
-export default [
-	{
-		input: 'src/index.ts',
-		output: {
-			dir: 'dist',
-			format: 'esm',
-			preserveModules: true,
-			preserveModulesRoot: 'src',
-		},
-		plugins: [
-			resolve(),
-			nodeExternals(),
-			esbuild({
-				jsx: 'automatic',
-			}),
-			typescript({
-				tsconfig: './tsconfig.json',
-				outDir: 'dist/types',
-			}),
-		],
-	},
-	{
-		input: 'src/index.ts',
-		output: {
-			dir: 'dist',
-			format: 'cjs',
-			preserveModules: true,
-			preserveModulesRoot: 'src',
-			entryFileNames: '[name].cjs',
-		},
-		plugins: [
-			resolve(),
-			nodeExternals(),
-			commonjs(),
-			esbuild({
-				jsx: 'automatic',
-			}),
-		],
-	},
-];