@guardian/stand 0.0.2 → 0.0.3

package/README.md

@@ -13,3 +13,7 @@ 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

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

@@ -0,0 +1,3 @@
+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-ct.config.d.ts

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

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "exports": {
     "types": "./dist/types/src/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": {
@@ -26,16 +29,15 @@
     "@guardian/eslint-config": "12.0.0",
     "@guardian/prettier": "8.0.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",
-    "@testing-library/jest-dom": "6.8.0",
-    "@testing-library/react": "12.1.5",
-    "@testing-library/user-event": "14.6.1",
     "@types/jest": "30.0.0",
+    "@types/node": "^24.5.2",
     "@types/react": "17.0.76",
     "@types/react-dom": "17.0.25",
     "eslint": "9.36.0",
@@ -69,6 +71,7 @@
     "build": "rimraf dist && rollup -c",
     "storybook": "storybook dev -p 6007",
     "build-storybook": "storybook build",
-    "test": "jest"
+    "test": "jest",
+    "test-e2e": "playwright test -c playwright-ct.config.ts"
   }
 }

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/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',
-			}),
-		],
-	},
-];

package/src/byline/Byline.stories.tsx

@@ -1,186 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Byline } from './Byline';
-import { contributors } from './contributors-fixture';
-import type { TaggedContributor } from './lib';
-
-const searchContributors = (
-	selectedText: string,
-): Promise<TaggedContributor[]> => {
-	return new Promise<TaggedContributor[]>((resolve) => {
-		const results = contributors
-			.filter((name) =>
-				name.toLowerCase().includes(selectedText.toLowerCase()),
-			)
-			.map((name, index) => ({
-				path: `profile/${name.toLowerCase().replace(/\s/g, '-')}`,
-				label: name,
-				type: 'Contributor',
-				tagId: `${index + 1}`,
-				// show internal label for every 5th contributor for testing internalLabel
-				internalLabel:
-					index % 5 === 0 ? `${name} (internal)` : undefined,
-			}))
-			.slice(0, 20);
-
-		return resolve(results);
-	});
-};
-
-const disableSnapshot = {
-	parameters: {
-		chromatic: { disableSnapshot: true },
-	},
-};
-
-const meta = {
-	title: 'Stand/Byline',
-	component: Byline,
-	parameters: {},
-	args: {
-		handleSave: () => {},
-		initialValue: [],
-		searchContributors,
-		enablePreview: true,
-	},
-} satisfies Meta<typeof Byline>;
-
-type Story = StoryObj<typeof Byline>;
-
-export const Default = {} satisfies Story;
-
-export const WithTheme = {
-	args: {
-		allowUntaggedContributors: true,
-		searchContributors,
-		theme: {
-			editor: {
-				invisibles: {
-					color: 'lightblue',
-				},
-				color: 'rgba(255, 255, 255, 0.87)',
-				background: 'rgb(51, 51, 51)',
-				border: '1px solid rgb(173, 216, 230)',
-				chip: {
-					color: 'initial',
-					taggedBackground: 'rgb(173, 216, 230)',
-					border: '1px solid rgb(173, 216, 230)',
-					borderRadius: '3px',
-					padding: '5.5px 7px',
-					untagged: {
-						color: 'rgba(255, 255, 255, 0.87)',
-					},
-				},
-			},
-			dropdown: {
-				background: 'rgb(36, 36, 36)',
-				li: {
-					color: 'rgba(255, 255, 255, 0.87)',
-					borderBottom: 'none',
-					selected: {
-						color: 'rgba(255, 255, 255, 0.87)',
-						background: 'rgb(51, 51, 51)',
-					},
-				},
-			},
-		},
-	},
-} satisfies Story;
-
-export const WithUntaggedContributors = {
-	args: {
-		allowUntaggedContributors: true,
-	},
-	...disableSnapshot,
-} satisfies Story;
-
-export const WithInitialValue = {
-	args: {
-		allowUntaggedContributors: true,
-		initialValue: [
-			{
-				type: 'contributor',
-				value: 'Joe Bloggs',
-				tagId: '1',
-				path: 'profile/joebloggs',
-			},
-			{
-				type: 'text',
-				value: ' in London, ',
-			},
-			{
-				type: 'contributor',
-				value: 'Jane Doe',
-			},
-			{
-				type: 'text',
-				value: ' in New York',
-			},
-		],
-	},
-} satisfies Story;
-
-export const WithNoSearch = {
-	args: {
-		allowUntaggedContributors: true,
-		searchContributors: undefined,
-	},
-	...disableSnapshot,
-} satisfies Story;
-
-export const WithNoSearchAndNoUntagged = {
-	args: {
-		allowUntaggedContributors: false,
-		searchContributors: undefined,
-	},
-	...disableSnapshot,
-} satisfies Story;
-
-export const WithCustomPlaceholder = {
-	args: {
-		allowUntaggedContributors: true,
-		placeholder: 'A custom placeholder...',
-	},
-} satisfies Story;
-
-export const WithContributorLimit = {
-	args: { contributorLimit: 1 },
-	...disableSnapshot,
-} satisfies Story;
-
-export const WithoutPreview = {
-	args: {
-		allowUntaggedContributors: true,
-		enablePreview: false,
-	},
-	...disableSnapshot,
-} satisfies Story;
-
-export const ReadOnly = {
-	args: {
-		readOnly: true,
-		allowUntaggedContributors: true,
-		enablePreview: true,
-		initialValue: [
-			{
-				type: 'contributor',
-				value: 'Joe Bloggs',
-				tagId: '1',
-				path: 'profile/joebloggs',
-			},
-			{
-				type: 'text',
-				value: ' in London and ',
-			},
-			{
-				type: 'contributor',
-				value: 'Jane Doe',
-			},
-			{
-				type: 'text',
-				value: ' in New York',
-			},
-		],
-	},
-} satisfies Story;
-
-export default meta;