@guardian/stand 0.0.0 → 0.0.2

package/dist/byline/styles.cjs

@@ -0,0 +1,244 @@
+'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

@@ -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/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 {};