@guardian/stand 0.0.0 → 0.0.3

package/dist/byline/styles.js

@@ -0,0 +1,234 @@
+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/index.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-function byline() {
-  return "byline";
-}
+var Byline = require('./byline/Byline.cjs');
 
-exports.byline = byline;
+
+
+exports.Byline = Byline.Byline;

package/dist/index.js

@@ -1,5 +1 @@
-function byline() {
-  return "byline";
-}
-
-export { byline };
+export { Byline } from './byline/Byline.js';

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

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

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

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

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

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

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

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

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/dist/types/src/byline/Byline.d.ts

@@ -0,0 +1,17 @@
+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/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/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';