@guardian/stand 0.0.5 → 0.0.6

package/package.json

@@ -1,11 +1,20 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "type": "module",
   "exports": {
-    "types": "./dist/types/index.d.ts",
-    "import": "./dist/index.js",
-    "require": "./dist/index.cjs"
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./base/colors.css": "./dist/styleD/build/css/base/colors.css",
+    "./base/typography.css": "./dist/styleD/build/css/base/typography.css",
+    "./semantic/colors.css": "./dist/styleD/build/css/semantic/colors.css",
+    "./semantic/typography.css": "./dist/styleD/build/css/semantic/typography.css",
+    "./component/byline.css": "./dist/styleD/build/css/component/byline.css",
+    "./component/tagAutocomplete.css": "./dist/styleD/build/css/component/tagAutocomplete.css",
+    "./component/tagTable.css": "./dist/styleD/build/css/component/tagTable.css"
   },
   "files": [
     "dist"
@@ -17,28 +26,31 @@
   "main": "./dist/index.cjs",
   "types": "./dist/types/index.d.ts",
   "devDependencies": {
-    "@changesets/cli": "^2.29.7",
+    "@changesets/cli": "^2.29.8",
     "@emotion/react": "11.11.4",
-    "@guardian/eslint-config": "12.0.0",
-    "@guardian/prettier": "8.0.1",
+    "@figma/rest-api-spec": "^0.34.0",
+    "@guardian/eslint-config": "13.0.1",
+    "@guardian/prettier": "9.0.0",
     "@guardian/prosemirror-invisibles": "3.1.1",
-    "@guardian/tsconfig": "1.0.0",
-    "@playwright/experimental-ct-react17": "^1.56.1",
-    "@rollup/plugin-commonjs": "28.0.9",
+    "@guardian/tsconfig": "1.0.1",
+    "@playwright/experimental-ct-react17": "^1.57.0",
+    "@rollup/plugin-commonjs": "29.0.0",
     "@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",
+    "@storybook/addon-docs": "^10.1.11",
+    "@storybook/addon-themes": "^10.1.11",
+    "@storybook/react-vite": "^10.1.11",
+    "@terrazzo/cli": "^0.10.5",
     "@types/jest": "30.0.0",
-    "@types/node": "^24.9.1",
+    "@types/node": "^24.10.1",
     "@types/react": "17.0.76",
     "@types/react-dom": "17.0.25",
-    "eslint": "9.38.0",
-    "eslint-plugin-storybook": "^9.1.15",
+    "change-case": "^5.4.4",
+    "eslint": "9.39.2",
+    "eslint-plugin-storybook": "^10.1.11",
     "jest": "30.2.0",
     "jest-environment-jsdom": "^30.1.2",
-    "prettier": "3.6.2",
+    "prettier": "3.7.4",
     "prosemirror-dropcursor": "1.8.2",
     "prosemirror-history": "1.4.1",
     "prosemirror-keymap": "1.2.2",
@@ -46,13 +58,16 @@
     "prosemirror-state": "1.4.3",
     "prosemirror-view": "1.37.2",
     "react": "17.0.2",
+    "react-aria-components": "1.13.0",
     "react-dom": "17.0.2",
-    "rimraf": "6.0.1",
-    "rollup": "4.52.5",
+    "rimraf": "6.1.2",
+    "rollup": "4.54.0",
+    "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-esbuild": "6.2.1",
-    "rollup-plugin-node-externals": "8.1.1",
-    "storybook": "^9.1.15",
-    "ts-jest": "29.4.5",
+    "rollup-plugin-node-externals": "8.1.2",
+    "storybook": "^10.1.11",
+    "style-dictionary": "^5.1.1",
+    "ts-jest": "29.4.6",
     "tslib": "2.8.1",
     "typescript": "5.1.3"
   },
@@ -66,13 +81,43 @@
     "prosemirror-state": "1.4.3",
     "prosemirror-view": "1.37.2",
     "react": "^17.0.2 || ^18.0.0 || ^19.0.0",
+    "react-aria-components": "1.13.0",
     "react-dom": "^17.0.2 || ^18.0.0 || ^19.0.0",
     "typescript": ">=5.0.0 <=5.9.3"
   },
+  "peerDependenciesMeta": {
+    "@guardian/prosemirror-invisibles": {
+      "optional": true
+    },
+    "prosemirror-dropcursor": {
+      "optional": true
+    },
+    "prosemirror-history": {
+      "optional": true
+    },
+    "prosemirror-keymap": {
+      "optional": true
+    },
+    "prosemirror-model": {
+      "optional": true
+    },
+    "prosemirror-state": {
+      "optional": true
+    },
+    "prosemirror-view": {
+      "optional": true
+    }
+  },
   "scripts": {
     "build": "rimraf dist && rollup -c",
+    "build-styled": "cd src/styleD && node build.js",
     "storybook": "storybook dev -p 6007",
     "build-storybook": "storybook build",
+    "lint": "eslint . --ext .ts,.tsx",
+    "lint:fix": "eslint --fix . --ext .ts,.tsx",
+    "lint:tokens": "tz check",
+    "format:check": "prettier --check .",
+    "format:fix": "prettier --write .",
     "tsc": "tsc",
     "test": "jest",
     "test:e2e": "playwright test -c playwright-ct.config.ts",

package/dist/byline/styles.cjs

@@ -1,244 +0,0 @@
-'use strict';
-
-var react = require('@emotion/react');
-
-const bylineContainerStyles = react.css`
-	position: relative;
-	width: 100%;
-`;
-const bylineEditorStyles = (theme) => react.css`
-	border: ${theme?.border ?? "1px black solid"};
-	background-color: ${theme?.background ?? "white"};
-	color: ${theme?.color ?? "inherit"};
-
-	/* ProseMirror styles from prosemirror-view/styles/prosemirror.css */
-	.ProseMirror {
-		padding: 4px 4px;
-		word-wrap: break-word;
-		white-space: pre-wrap;
-		white-space: break-spaces;
-		-webkit-font-variant-ligatures: none;
-		font-variant-ligatures: none;
-		font-feature-settings: 'liga' 0; /* the above doesn't seem to work in Edge */
-		line-height: ${theme?.lineHeight ?? "1.8"};
-	}
-
-	.ProseMirror[contenteditable='false'] {
-		background: ${theme?.readOnlyBackground ?? "#dcdcdc"};
-		cursor: 'not-allowed';
-	}
-
-	.ProseMirror pre {
-		white-space: pre-wrap;
-	}
-
-	.ProseMirror li {
-		position: relative;
-	}
-
-	.ProseMirror-hideselection *::selection {
-		background: transparent;
-	}
-	.ProseMirror-hideselection *::-moz-selection {
-		background: transparent;
-	}
-	.ProseMirror-hideselection {
-		caret-color: transparent;
-	}
-
-	/* See https://github.com/ProseMirror/prosemirror/issues/1421#issuecomment-1759320191 */
-	.ProseMirror [draggable][contenteditable='false'] {
-		user-select: text;
-	}
-
-	.ProseMirror-selectednode {
-		outline: ${theme?.chip?.selected?.border ?? "1px solid #b4d9ff"};
-	}
-
-	/* Make sure li selections wrap around markers */
-
-	li.ProseMirror-selectednode {
-		outline: none;
-	}
-
-	li.ProseMirror-selectednode:after {
-		content: '';
-		position: absolute;
-		left: -32px;
-		right: -2px;
-		top: -2px;
-		bottom: -2px;
-		border: ${theme?.chip?.selected?.border ?? "1px solid #b4d9ff"};
-		pointer-events: none;
-	}
-
-	/* Protect against generic img rules */
-
-	img.ProseMirror-separator {
-		display: inline !important;
-		border: none !important;
-		margin: 0 !important;
-	}
-
-	.ProseMirror:focus {
-		outline: none;
-	}
-
-	/* Invisible styles from @guardian/prosemirror-invisibles/dist/style.css */
-
-	.invisible {
-		/* Chrome in particular dislikes doing the right thing
-		* with carets and inline elements when contenteditable
-		* is 'false'. See e.g. https://github.com/ProseMirror/prosemirror/issues/1061
-   		*/
-		display: inline;
-		position: relative;
-		pointer-events: none;
-	}
-
-	.invisible:before {
-		position: relative;
-		caret-color: inherit;
-		color: ${theme?.invisibles?.color ?? "gray"};
-		display: inline-block;
-		font-weight: 400;
-		font-style: normal;
-		line-height: initial;
-		width: 0;
-		top: 0;
-		left: 0;
-		z-index: 1;
-	}
-
-	.invisible__selected-marker {
-		position: absolute;
-		caret-color: inherit;
-		background-color: #dcdcdc;
-		display: inline-block;
-		font-weight: 400;
-		font-style: normal;
-		line-height: initial;
-		top: 0;
-		left: 0;
-		width: 10px;
-		height: 100%;
-		z-index: 0;
-	}
-
-	.ProseMirror-focused .invisible__selected-marker {
-		background-color: #b4d9ff;
-	}
-
-	.ProseMirror-focused .invisible--is-selected::before {
-		background-color: #b4d8ff;
-	}
-
-	.invisible--is-selected::before {
-		background-color: #dcdcdc;
-	}
-
-	.invisible--space:before {
-		content: '·';
-	}
-
-	.invisible--nb-space {
-		vertical-align: text-bottom;
-	}
-
-	.invisible--nb-space:before {
-		font-size: 15px;
-		content: '^';
-		position: absolute;
-		top: 9px;
-		left: -1px;
-	}
-
-	chip {
-		border: ${theme?.chip?.border ?? "2px solid lightgrey"};
-		border-radius: ${theme?.chip?.borderRadius ?? "8px"};
-		padding: ${theme?.chip?.padding ?? "2px 4px"};
-		color: ${theme?.chip?.color ?? "inherit"};
-
-		cursor: default;
-
-		&[data-type='tagged'] {
-			background-color: ${theme?.chip?.taggedBackground ?? "lightgrey"};
-		}
-
-		&[data-type='untagged'] {
-			color: ${theme?.chip?.untagged?.color ?? "inherit"};
-		}
-
-		::after {
-			content: '';
-			display: inline-block;
-		}
-
-		span {
-			cursor: pointer;
-			margin-left: 5px;
-		}
-	}
-
-	/* Leave space between subsequent chips */
-	chip + chip {
-		margin-left: 3px;
-	}
-
-	.placeholder {
-		display: inline-block;
-		height: 0;
-		width: 0;
-		white-space: nowrap;
-		color: ${theme?.placeholder?.color ?? "#777575"};
-		pointer-events: none;
-		cursor: text;
-	}
-`;
-const dropdownContainerStyles = (showDropdown, theme) => react.css`
-	position: absolute;
-	box-sizing: border-box;
-	width: 100%;
-	z-index: 1000;
-	border: ${theme?.border ?? "1px solid #ccc"};
-	background-color: ${theme?.background ?? "rgba(255, 255, 255, 0.8)"};
-	display: ${showDropdown ? "block" : "none"};
-	max-height: ${theme?.maxHeight ?? "320px"};
-	overflow-y: auto;
-`;
-const dropdownUlStyles = react.css`
-	margin: 0;
-	padding: 0;
-	list-style-type: none;
-`;
-const dropdownLiStyles = (theme) => react.css`
-	cursor: pointer;
-	padding: 5px;
-	border-bottom: ${theme?.dropdown?.li?.borderBottom ?? "1px solid #ccc"};
-	color: ${theme?.dropdown?.li?.color ?? "inherit"};
-`;
-const selectedDropdownLiStyles = (theme) => react.css`
-	background-color: ${theme?.dropdown?.li?.selected?.background ?? "cadetblue"};
-	color: ${theme?.dropdown?.li?.selected?.color ?? "white"};
-`;
-const previewStyles = react.css`
-	margin-top: 5px;
-	white-space: pre-wrap;
-`;
-const previewFreeTextStyles = react.css`
-	font-style: italic;
-`;
-const previewContributorStyles = (node) => react.css`
-	${node.attrs.type === "tagged" ? "text-decoration: underline;" : ""}
-	color: inherit;
-`;
-
-exports.bylineContainerStyles = bylineContainerStyles;
-exports.bylineEditorStyles = bylineEditorStyles;
-exports.dropdownContainerStyles = dropdownContainerStyles;
-exports.dropdownLiStyles = dropdownLiStyles;
-exports.dropdownUlStyles = dropdownUlStyles;
-exports.previewContributorStyles = previewContributorStyles;
-exports.previewFreeTextStyles = previewFreeTextStyles;
-exports.previewStyles = previewStyles;
-exports.selectedDropdownLiStyles = selectedDropdownLiStyles;

package/dist/byline/styles.js

@@ -1,234 +0,0 @@
-import { css } from '@emotion/react';
-
-const bylineContainerStyles = css`
-	position: relative;
-	width: 100%;
-`;
-const bylineEditorStyles = (theme) => css`
-	border: ${theme?.border ?? "1px black solid"};
-	background-color: ${theme?.background ?? "white"};
-	color: ${theme?.color ?? "inherit"};
-
-	/* ProseMirror styles from prosemirror-view/styles/prosemirror.css */
-	.ProseMirror {
-		padding: 4px 4px;
-		word-wrap: break-word;
-		white-space: pre-wrap;
-		white-space: break-spaces;
-		-webkit-font-variant-ligatures: none;
-		font-variant-ligatures: none;
-		font-feature-settings: 'liga' 0; /* the above doesn't seem to work in Edge */
-		line-height: ${theme?.lineHeight ?? "1.8"};
-	}
-
-	.ProseMirror[contenteditable='false'] {
-		background: ${theme?.readOnlyBackground ?? "#dcdcdc"};
-		cursor: 'not-allowed';
-	}
-
-	.ProseMirror pre {
-		white-space: pre-wrap;
-	}
-
-	.ProseMirror li {
-		position: relative;
-	}
-
-	.ProseMirror-hideselection *::selection {
-		background: transparent;
-	}
-	.ProseMirror-hideselection *::-moz-selection {
-		background: transparent;
-	}
-	.ProseMirror-hideselection {
-		caret-color: transparent;
-	}
-
-	/* See https://github.com/ProseMirror/prosemirror/issues/1421#issuecomment-1759320191 */
-	.ProseMirror [draggable][contenteditable='false'] {
-		user-select: text;
-	}
-
-	.ProseMirror-selectednode {
-		outline: ${theme?.chip?.selected?.border ?? "1px solid #b4d9ff"};
-	}
-
-	/* Make sure li selections wrap around markers */
-
-	li.ProseMirror-selectednode {
-		outline: none;
-	}
-
-	li.ProseMirror-selectednode:after {
-		content: '';
-		position: absolute;
-		left: -32px;
-		right: -2px;
-		top: -2px;
-		bottom: -2px;
-		border: ${theme?.chip?.selected?.border ?? "1px solid #b4d9ff"};
-		pointer-events: none;
-	}
-
-	/* Protect against generic img rules */
-
-	img.ProseMirror-separator {
-		display: inline !important;
-		border: none !important;
-		margin: 0 !important;
-	}
-
-	.ProseMirror:focus {
-		outline: none;
-	}
-
-	/* Invisible styles from @guardian/prosemirror-invisibles/dist/style.css */
-
-	.invisible {
-		/* Chrome in particular dislikes doing the right thing
-		* with carets and inline elements when contenteditable
-		* is 'false'. See e.g. https://github.com/ProseMirror/prosemirror/issues/1061
-   		*/
-		display: inline;
-		position: relative;
-		pointer-events: none;
-	}
-
-	.invisible:before {
-		position: relative;
-		caret-color: inherit;
-		color: ${theme?.invisibles?.color ?? "gray"};
-		display: inline-block;
-		font-weight: 400;
-		font-style: normal;
-		line-height: initial;
-		width: 0;
-		top: 0;
-		left: 0;
-		z-index: 1;
-	}
-
-	.invisible__selected-marker {
-		position: absolute;
-		caret-color: inherit;
-		background-color: #dcdcdc;
-		display: inline-block;
-		font-weight: 400;
-		font-style: normal;
-		line-height: initial;
-		top: 0;
-		left: 0;
-		width: 10px;
-		height: 100%;
-		z-index: 0;
-	}
-
-	.ProseMirror-focused .invisible__selected-marker {
-		background-color: #b4d9ff;
-	}
-
-	.ProseMirror-focused .invisible--is-selected::before {
-		background-color: #b4d8ff;
-	}
-
-	.invisible--is-selected::before {
-		background-color: #dcdcdc;
-	}
-
-	.invisible--space:before {
-		content: '·';
-	}
-
-	.invisible--nb-space {
-		vertical-align: text-bottom;
-	}
-
-	.invisible--nb-space:before {
-		font-size: 15px;
-		content: '^';
-		position: absolute;
-		top: 9px;
-		left: -1px;
-	}
-
-	chip {
-		border: ${theme?.chip?.border ?? "2px solid lightgrey"};
-		border-radius: ${theme?.chip?.borderRadius ?? "8px"};
-		padding: ${theme?.chip?.padding ?? "2px 4px"};
-		color: ${theme?.chip?.color ?? "inherit"};
-
-		cursor: default;
-
-		&[data-type='tagged'] {
-			background-color: ${theme?.chip?.taggedBackground ?? "lightgrey"};
-		}
-
-		&[data-type='untagged'] {
-			color: ${theme?.chip?.untagged?.color ?? "inherit"};
-		}
-
-		::after {
-			content: '';
-			display: inline-block;
-		}
-
-		span {
-			cursor: pointer;
-			margin-left: 5px;
-		}
-	}
-
-	/* Leave space between subsequent chips */
-	chip + chip {
-		margin-left: 3px;
-	}
-
-	.placeholder {
-		display: inline-block;
-		height: 0;
-		width: 0;
-		white-space: nowrap;
-		color: ${theme?.placeholder?.color ?? "#777575"};
-		pointer-events: none;
-		cursor: text;
-	}
-`;
-const dropdownContainerStyles = (showDropdown, theme) => css`
-	position: absolute;
-	box-sizing: border-box;
-	width: 100%;
-	z-index: 1000;
-	border: ${theme?.border ?? "1px solid #ccc"};
-	background-color: ${theme?.background ?? "rgba(255, 255, 255, 0.8)"};
-	display: ${showDropdown ? "block" : "none"};
-	max-height: ${theme?.maxHeight ?? "320px"};
-	overflow-y: auto;
-`;
-const dropdownUlStyles = css`
-	margin: 0;
-	padding: 0;
-	list-style-type: none;
-`;
-const dropdownLiStyles = (theme) => css`
-	cursor: pointer;
-	padding: 5px;
-	border-bottom: ${theme?.dropdown?.li?.borderBottom ?? "1px solid #ccc"};
-	color: ${theme?.dropdown?.li?.color ?? "inherit"};
-`;
-const selectedDropdownLiStyles = (theme) => css`
-	background-color: ${theme?.dropdown?.li?.selected?.background ?? "cadetblue"};
-	color: ${theme?.dropdown?.li?.selected?.color ?? "white"};
-`;
-const previewStyles = css`
-	margin-top: 5px;
-	white-space: pre-wrap;
-`;
-const previewFreeTextStyles = css`
-	font-style: italic;
-`;
-const previewContributorStyles = (node) => css`
-	${node.attrs.type === "tagged" ? "text-decoration: underline;" : ""}
-	color: inherit;
-`;
-
-export { bylineContainerStyles, bylineEditorStyles, dropdownContainerStyles, dropdownLiStyles, dropdownUlStyles, previewContributorStyles, previewFreeTextStyles, previewStyles, selectedDropdownLiStyles };

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

@@ -1,17 +0,0 @@
-import type { FocusEventHandler } from 'react';
-import type { BylineModel, TaggedContributor } from './lib';
-import type { PartialBylineTheme } from './theme';
-type BylineProps = {
-    theme?: PartialBylineTheme;
-    allowUntaggedContributors?: boolean;
-    contributorLimit?: number;
-    enablePreview?: boolean;
-    placeholder?: string;
-    initialValue?: BylineModel;
-    readOnly?: boolean;
-    handleSave: (newValue: BylineModel) => void;
-    searchContributors?: (selectedText: string) => Promise<TaggedContributor[]>;
-    onBlur?: FocusEventHandler<HTMLDivElement>;
-};
-export declare const Byline: ({ theme, allowUntaggedContributors, contributorLimit, enablePreview, placeholder, initialValue, readOnly, handleSave, searchContributors, onBlur, }: BylineProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export {};

package/dist/types/byline/styles.d.ts

@@ -1,11 +0,0 @@
-import type { Node } from 'prosemirror-model';
-import type { PartialBylineTheme } from './theme';
-export declare const bylineContainerStyles: import("@emotion/react").SerializedStyles;
-export declare const bylineEditorStyles: (theme: PartialBylineTheme['editor']) => import("@emotion/react").SerializedStyles;
-export declare const dropdownContainerStyles: (showDropdown: boolean, theme?: PartialBylineTheme['dropdown']) => import("@emotion/react").SerializedStyles;
-export declare const dropdownUlStyles: import("@emotion/react").SerializedStyles;
-export declare const dropdownLiStyles: (theme?: PartialBylineTheme) => import("@emotion/react").SerializedStyles;
-export declare const selectedDropdownLiStyles: (theme?: PartialBylineTheme) => import("@emotion/react").SerializedStyles;
-export declare const previewStyles: import("@emotion/react").SerializedStyles;
-export declare const previewFreeTextStyles: import("@emotion/react").SerializedStyles;
-export declare const previewContributorStyles: (node: Node) => import("@emotion/react").SerializedStyles;

package/dist/types/byline/theme.d.ts

@@ -1,44 +0,0 @@
-import type { DeepPartial } from './util';
-type BylineTheme = {
-    editor: {
-        invisibles: {
-            color: string;
-        };
-        color: string;
-        border: string;
-        background: string;
-        chip: {
-            color: string;
-            border: string;
-            padding: string;
-            borderRadius: string;
-            taggedBackground: string;
-            untagged: {
-                color: string;
-            };
-            selected: {
-                border: string;
-            };
-        };
-        lineHeight: string;
-        placeholder: {
-            color: string;
-        };
-        readOnlyBackground: string;
-    };
-    dropdown: {
-        background: string;
-        border: string;
-        maxHeight: string;
-        li: {
-            color: string;
-            borderBottom: string;
-            selected: {
-                background: string;
-                color: string;
-            };
-        };
-    };
-};
-export type PartialBylineTheme = DeepPartial<BylineTheme>;
-export {};