@guardian/stand 0.0.3 → 0.0.5

package/README.md

@@ -17,3 +17,40 @@ Stand is component library for Guardian editorial tools. It is co-located within
 ## 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,61 +1,63 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "type": "module",
   "exports": {
-    "types": "./dist/types/src/index.d.ts",
+    "types": "./dist/types/index.d.ts",
     "import": "./dist/index.js",
     "require": "./dist/index.cjs"
   },
   "files": [
     "dist"
   ],
-  "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"
+  "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",
-    "@playwright/experimental-ct-react17": "^1.55.1",
-    "@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",
+    "@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.5.2",
+    "@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",
@@ -63,15 +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",
+    "tsc": "tsc",
     "test": "jest",
-    "test-e2e": "playwright test -c playwright-ct.config.ts"
+    "test:e2e": "playwright test -c playwright-ct.config.ts",
+    "test:react-matrix": "./scripts/test-react-matrix.sh"
   }
 }

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/playwright/byline.mock.d.ts

@@ -1,3 +0,0 @@
-import type { ComponentProps } from 'react';
-import { Byline } from '../src';
-export declare const BylineWithMockSearchContributors: (props: Omit<ComponentProps<typeof Byline>, 'searchContributors' | 'handleSave'>) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/playwright/byline.spec.d.ts

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

package/dist/types/playwright-ct.config.d.ts

@@ -1,5 +0,0 @@
-/**
- * See https://playwright.dev/docs/test-configuration.
- */
-declare const _default: import("@playwright/experimental-ct-react17").PlaywrightTestConfig<{}, {}>;
-export default _default;

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;