@guardian/stand 0.0.0 → 0.0.2

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

@@ -0,0 +1,206 @@
+/// <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

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

package/dist/types/src/byline/Preview.d.ts

@@ -0,0 +1,4 @@
+import type { Node } from 'prosemirror-model';
+export declare const Preview: ({ doc }: {
+    doc: Node | null;
+}) => import("@emotion/react/jsx-runtime").JSX.Element | null;

package/dist/types/src/byline/contributors-fixture.d.ts

@@ -0,0 +1 @@
+export declare const contributors: string[];

package/dist/types/src/byline/lib.d.ts

@@ -0,0 +1,48 @@
+import type { Node } from 'prosemirror-model';
+import type { Command } from 'prosemirror-state';
+import type { EditorView } from 'prosemirror-view';
+export type TypingFromStartRange = {
+    start: number;
+    maxReached: number;
+    lastPosition: number;
+};
+export declare const detectNameInText: (text: string, cursorOffset: number, isTypingFromStartRange?: TypingFromStartRange) => {
+    name: string;
+    startIndex: number;
+    endIndex: number;
+} | undefined;
+export declare function insertChip(text: string, from: number, to: number, type: 'tagged', tagId: string, path?: string, meta?: unknown): Command;
+export declare function insertChip(text: string, from: number, to: number, type: 'untagged', tagId?: undefined, meta?: undefined): Command;
+export declare const getCurrentText: (doc: Node, currentOffset: number, toOffset: number, isTypingFromStartRange?: TypingFromStartRange) => {
+    currentTextNode: Node | null;
+    startOffset: number;
+    endOffset: number;
+    selectedText: string;
+    hasSelection: boolean;
+};
+export declare const hasHitContributorLimit: (doc: Node, contributorLimit?: number) => boolean;
+export type TaggedContributor = {
+    tagId: string;
+    label: string;
+    internalLabel?: string;
+    path?: string;
+    meta?: unknown;
+};
+export declare const addUntaggedContributor: (viewRef: React.MutableRefObject<EditorView | null>, setShowDropdown: React.Dispatch<React.SetStateAction<boolean>>, contributorLimit?: number, isTypingFromStartRange?: TypingFromStartRange) => boolean | undefined;
+export declare const addTaggedContributor: (contributor: TaggedContributor, viewRef: React.MutableRefObject<EditorView | null>, setShowDropdown: React.Dispatch<React.SetStateAction<boolean>>, contributorLimit?: number, isTypingFromStartRange?: TypingFromStartRange) => boolean | undefined;
+type BylineText = {
+    type: 'text';
+    value: string;
+};
+type BylineContributor = {
+    type: 'contributor';
+    value: string;
+    tagId?: string;
+    path?: string;
+    meta?: unknown;
+};
+type BylinePart = BylineText | BylineContributor;
+export type BylineModel = BylinePart[];
+export declare const convertBylineModelToNode: (value?: BylineModel) => Node;
+export declare const convertNodeToBylineModel: (doc: Node) => BylineModel;
+export {};

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

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

package/dist/types/src/byline/placeholder.d.ts

@@ -0,0 +1,2 @@
+import { Plugin } from 'prosemirror-state';
+export declare const createPlaceholderPlugin: (text: string) => Plugin<any>;

package/dist/types/src/byline/plugins.d.ts

@@ -0,0 +1,4 @@
+import { Plugin } from 'prosemirror-state';
+export declare const clipboardPlugin: (allowUntaggedContributors?: boolean, contributorLimit?: number) => Plugin;
+export declare const keybindings: () => Plugin<any>;
+export declare const bylinePlugin: () => Plugin;

package/dist/types/src/byline/schema.d.ts

@@ -0,0 +1,2 @@
+import { Schema } from 'prosemirror-model';
+export declare const bylineEditorSchema: Schema<"doc" | "chip" | "text", any>;

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

@@ -0,0 +1,11 @@
+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/src/byline/theme.d.ts

@@ -0,0 +1,44 @@
+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 {};

package/dist/types/src/byline/util.d.ts

@@ -0,0 +1,3 @@
+export type DeepPartial<T> = T extends object ? {
+    [P in keyof T]?: DeepPartial<T[P]>;
+} : T;

package/dist/types/src/index.d.ts

@@ -0,0 +1,2 @@
+export { Byline } from './byline/Byline';
+export type { BylineModel } from './byline/lib';

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

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

package/eslint.config.js

@@ -0,0 +1,14 @@
+// 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

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

package/jest.config.js

@@ -0,0 +1,12 @@
+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/package.json

@@ -1,143 +1,74 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.0",
-  "private": false,
-  "description": "",
-  "license": "Apache-2.0",
-  "sideEffects": false,
+  "version": "0.0.2",
   "type": "module",
   "exports": {
-    "types": "./dist/index.d.ts",
+    "types": "./dist/types/src/index.d.ts",
     "import": "./dist/index.js",
     "require": "./dist/index.cjs"
   },
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "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"
+  },
   "devDependencies": {
-    "@types/jest": "29.5.8",
-    "eslint": "9.19.0",
-    "jest": "29.7.0",
-    "rollup": "4.45.1",
-    "ts-jest": "29.4.0",
-    "tslib": "2.6.2",
-    "typescript": "5.5.2",
-    "wireit": "0.14.12",
-    "@guardian/eslint-config": "12.0.0"
+    "@changesets/cli": "^2.29.7",
+    "@guardian/eslint-config": "12.0.0",
+    "@guardian/prettier": "8.0.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",
+    "@types/jest": "30.0.0",
+    "@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",
+    "jest-environment-jsdom": "^30.1.2",
+    "prettier": "3.6.2",
+    "rimraf": "6.0.1",
+    "rollup": "4.52.1",
+    "rollup-plugin-esbuild": "6.2.1",
+    "rollup-plugin-node-externals": "8.1.1",
+    "storybook": "^9.1.7",
+    "ts-jest": "29.4.4",
+    "tslib": "2.8.1",
+    "typescript": "5.1.3"
   },
   "peerDependencies": {
-    "tslib": "^2.6.2",
-    "typescript": "~5.5.2"
-  },
-  "peerDependenciesMeta": {
-    "typescript": {
-      "optional": true
-    }
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "wireit": {
-    "__deps__": {
-      "dependencies": [
-        "../libs:build"
-      ]
-    },
-    "build": {
-      "command": "rollup -c",
-      "dependencies": [
-        "__deps__"
-      ],
-      "files": [
-        "src/**",
-        "package.json",
-        "tsconfig.json",
-        "rollup.config.js",
-        "../../../configs/rollup/rollup.config.js"
-      ],
-      "output": [
-        "dist"
-      ]
-    },
-    "fix": {
-      "command": "eslint --cache --color . --fix",
-      "dependencies": [
-        "__deps__"
-      ],
-      "files": [
-        "**",
-        "!(dist)/**",
-        "!.eslintcache"
-      ],
-      "clean": false,
-      "output": [
-        "."
-      ]
-    },
-    "lint": {
-      "command": "eslint --cache --color .",
-      "dependencies": [
-        "__deps__"
-      ],
-      "files": [
-        "**",
-        "!(dist)/**",
-        "!.eslintcache"
-      ],
-      "output": []
-    },
-    "test": {
-      "command": "jest",
-      "dependencies": [
-        "__deps__"
-      ],
-      "files": [
-        "**",
-        "../../../configs/jest.*",
-        "!(dist)/**",
-        "!.eslintcache"
-      ],
-      "output": []
-    },
-    "tsc": {
-      "command": "tsc --pretty",
-      "dependencies": [
-        "__deps__"
-      ],
-      "files": [
-        "**",
-        "tsconfig.json",
-        "../tsconfig/tsconfig.json",
-        "../../../@types/**",
-        "../../../tsconfig.base.json",
-        "!(dist)/**",
-        "!.eslintcache"
-      ],
-      "output": []
-    },
-    "verify-dist": {
-      "command": "jest --setupFilesAfterEnv ./jest.dist.setup.js",
-      "dependencies": [
-        "build"
-      ],
-      "files": [
-        "**",
-        "../../../configs/jest.*",
-        "!(dist)/**",
-        "!.eslintcache"
-      ],
-      "output": []
-    }
+    "@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",
+    "typescript": "5.5.2"
   },
   "scripts": {
-    "build": "wireit",
-    "dev": "jest --watch",
-    "fix": "wireit",
-    "lint": "wireit",
-    "test": "wireit",
-    "tsc": "wireit",
-    "verify-dist": "wireit"
+    "build": "rimraf dist && rollup -c",
+    "storybook": "storybook dev -p 6007",
+    "build-storybook": "storybook build",
+    "test": "jest"
   }
 }

package/rollup.config.js

@@ -0,0 +1,49 @@
+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',
+			}),
+		],
+	},
+];