@guardian/stand 0.0.0 → 0.0.2

package/.changeset/README.md

@@ -0,0 +1,8 @@
+# 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

@@ -0,0 +1,11 @@
+{
+	"$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

@@ -0,0 +1 @@
+"@guardian/prettier"

package/.storybook/main.ts

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

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

@@ -0,0 +1,7 @@
+# @guardian/stand
+
+## 0.0.2
+
+### Patch Changes
+
+- cf56688: Add changesets

package/README.md

@@ -0,0 +1,15 @@
+# Stand - a tools component library
+
+_Find what you need on the (news)stand!_
+
+Stand is component library for Guardian editorial tools. It is co-located within flexible-content as Composer is expected to be the main consumer of the UI components within Stand. But any editorial tool should be able to make use of the components as an npm package - `@guardian/stand` - and developers should feel comfortable contributing.
+
+## Setup
+
+- Run `./setup.sh` in the project root (flexible-content) directory to set up pnpm, install dependencies, and build the project.
+
+## Tasks
+
+- 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

package/dist/byline/Byline.cjs

@@ -0,0 +1,375 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var prosemirrorInvisibles = require('@guardian/prosemirror-invisibles');
+var prosemirrorDropcursor = require('prosemirror-dropcursor');
+var prosemirrorHistory = require('prosemirror-history');
+var prosemirrorState = require('prosemirror-state');
+var prosemirrorView = require('prosemirror-view');
+var react = require('react');
+var lib = require('./lib.cjs');
+var placeholder = require('./placeholder.cjs');
+var plugins = require('./plugins.cjs');
+var Preview = require('./Preview.cjs');
+var schema = require('./schema.cjs');
+var styles = require('./styles.cjs');
+
+const Byline = ({
+  theme,
+  allowUntaggedContributors,
+  contributorLimit,
+  enablePreview,
+  placeholder: placeholder$1,
+  initialValue,
+  readOnly,
+  handleSave,
+  searchContributors,
+  onBlur
+}) => {
+  const editorRef = react.useRef(null);
+  const viewRef = react.useRef(null);
+  const dropdownRef = react.useRef(null);
+  const [currentText, setCurrentText] = react.useState("");
+  const [currentOptionIndex, setCurrentOptionIndex] = react.useState(0);
+  const [taggedContributors, setTaggedContributors] = react.useState([]);
+  const [currentDoc, setCurrentDoc] = react.useState(null);
+  const [showDropdown, setShowDropdown] = react.useState(false);
+  const isTypingFromStartRange = react.useRef(
+    void 0
+  );
+  const trackTypingFromStart = (tr) => {
+    const isCursorSelection = tr.selection.from === tr.selection.to;
+    const currentPosition = tr.selection.from;
+    const hasChanges = tr.steps.length > 0;
+    if (!isCursorSelection) {
+      isTypingFromStartRange.current = void 0;
+      return;
+    }
+    if (!isTypingFromStartRange.current && currentPosition === 1 && hasChanges) {
+      isTypingFromStartRange.current = {
+        start: 1,
+        maxReached: 1,
+        lastPosition: 1
+      };
+      return;
+    }
+    if (isTypingFromStartRange.current) {
+      const { start, maxReached, lastPosition } = isTypingFromStartRange.current;
+      const isWithinRange = currentPosition >= start && currentPosition <= maxReached;
+      const isExtendingRange = hasChanges && currentPosition === maxReached + 1;
+      if (isWithinRange || isExtendingRange) {
+        if (hasChanges) {
+          const positionDelta = currentPosition - lastPosition;
+          if (positionDelta < 0) {
+            isTypingFromStartRange.current.maxReached = maxReached - 1;
+          } else if (positionDelta > 0) {
+            isTypingFromStartRange.current.maxReached = maxReached + 1;
+          }
+          isTypingFromStartRange.current.lastPosition = currentPosition;
+        }
+        return;
+      }
+    }
+    isTypingFromStartRange.current = void 0;
+  };
+  const getShouldShowDropdown = (view, selectedText) => {
+    if (readOnly) {
+      return false;
+    }
+    const showDropdownBasedOnProps = !!searchContributors || !!allowUntaggedContributors;
+    if (lib.hasHitContributorLimit(view.state.doc, contributorLimit)) {
+      return false;
+    }
+    return selectedText.trim() !== "" && showDropdownBasedOnProps;
+  };
+  const [enterHit, setEnterHit] = react.useState(false);
+  const checkDropdownVisibility = () => {
+    if (dropdownRef.current?.checkVisibility) {
+      return dropdownRef.current.checkVisibility();
+    } else {
+      return dropdownRef.current?.offsetParent !== null;
+    }
+  };
+  react.useEffect(() => {
+    if (!editorRef.current) {
+      return;
+    }
+    const initialDoc = lib.convertBylineModelToNode(initialValue);
+    const state = prosemirrorState.EditorState.create({
+      schema: schema.bylineEditorSchema,
+      plugins: [
+        prosemirrorDropcursor.dropCursor(),
+        plugins.clipboardPlugin(allowUntaggedContributors, contributorLimit),
+        prosemirrorHistory.history(),
+        plugins.keybindings(),
+        prosemirrorInvisibles.createInvisiblesPlugin([prosemirrorInvisibles.space, prosemirrorInvisibles.nbSpace], {
+          displayLineEndSelection: true,
+          shouldShowInvisibles: true
+        }),
+        plugins.bylinePlugin(),
+        placeholder.createPlaceholderPlugin(placeholder$1 ?? "Enter a byline...")
+      ],
+      doc: initialDoc
+    });
+    setCurrentDoc(initialDoc);
+    viewRef.current = new prosemirrorView.EditorView(editorRef.current, {
+      state,
+      editable: () => !readOnly,
+      attributes: {
+        role: "combobox",
+        "aria-label": "byline",
+        "aria-controls": "byline-dropdown",
+        "aria-expanded": "false",
+        "data-testid": "byline-input",
+        ...readOnly && { "aria-readonly": "true" }
+      },
+      handleDOMEvents: {
+        keydown: (view, event) => {
+          if (readOnly) {
+            return false;
+          }
+          if (event.key === "Escape") {
+            setShowDropdown(false);
+            return true;
+          }
+          if (event.key === "ArrowDown") {
+            if (checkDropdownVisibility()) {
+              event.preventDefault();
+              setCurrentOptionIndex((currentOptionIndex2) => {
+                return currentOptionIndex2 + 1;
+              });
+              return true;
+            }
+            return false;
+          }
+          if (event.key === "ArrowUp") {
+            if (checkDropdownVisibility()) {
+              event.preventDefault();
+              setCurrentOptionIndex((currentOptionIndex2) => {
+                return currentOptionIndex2 - 1;
+              });
+              return true;
+            }
+            return false;
+          }
+          if (event.key === "Enter") {
+            if (checkDropdownVisibility()) {
+              event.preventDefault();
+              setEnterHit(true);
+            }
+            return false;
+          }
+          return false;
+        },
+        blur: (_view, event) => {
+          if (readOnly) {
+            return false;
+          }
+          if (!dropdownRef.current?.contains(
+            event.relatedTarget
+          )) {
+            setShowDropdown(false);
+          }
+          return false;
+        }
+      },
+      dispatchTransaction(tr) {
+        if (readOnly) {
+          if (tr.docChanged) {
+            return;
+          }
+          if (viewRef.current) {
+            const newState = viewRef.current.state.apply(tr);
+            viewRef.current.updateState(newState);
+          }
+          return;
+        }
+        if (viewRef.current?.hasFocus()) {
+          trackTypingFromStart(tr);
+          const newState = viewRef.current.state.apply(tr);
+          viewRef.current.updateState(newState);
+          const { selectedText } = lib.getCurrentText(
+            newState.doc,
+            newState.selection.from,
+            newState.selection.to,
+            isTypingFromStartRange.current
+          );
+          setCurrentText(selectedText);
+          const shouldShowDropdown = getShouldShowDropdown(
+            viewRef.current,
+            selectedText
+          );
+          if (shouldShowDropdown && searchContributors) {
+            void searchContributors(selectedText).then((contributors) => {
+              setTaggedContributors(contributors);
+            }).catch((error) => {
+              console.error(
+                "Error fetching tagged contributors:",
+                error
+              );
+              setTaggedContributors([]);
+            });
+          } else {
+            setTaggedContributors([]);
+          }
+          setShowDropdown(shouldShowDropdown);
+          if (tr.docChanged) {
+            setCurrentDoc(newState.doc);
+            handleSave(lib.convertNodeToBylineModel(newState.doc));
+          }
+        }
+      }
+    });
+    return () => {
+      viewRef.current?.destroy();
+    };
+  }, []);
+  react.useEffect(() => {
+    const numberOfOptions = taggedContributors.length + (allowUntaggedContributors ? 1 : 0);
+    if (numberOfOptions) {
+      if (currentOptionIndex < 0) {
+        setCurrentOptionIndex(numberOfOptions - 1);
+      } else {
+        setCurrentOptionIndex(currentOptionIndex % numberOfOptions);
+      }
+    }
+    if (showDropdown) {
+      const editor = document.querySelector("[role=combobox]");
+      editor?.setAttribute(
+        "aria-activedescendant",
+        `contributor-option-${currentOptionIndex}`
+      );
+      editor?.setAttribute("aria-expanded", "true");
+    }
+  }, [
+    currentOptionIndex,
+    showDropdown,
+    taggedContributors.length,
+    allowUntaggedContributors
+  ]);
+  react.useEffect(() => {
+    if (showDropdown && currentOptionIndex >= 0) {
+      const selectedOption = document.getElementById(
+        `contributor-option-${currentOptionIndex}`
+      );
+      if (selectedOption && dropdownRef.current) {
+        selectedOption.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest"
+        });
+      }
+    }
+  }, [currentOptionIndex, showDropdown]);
+  react.useEffect(() => {
+    if (enterHit) {
+      if (allowUntaggedContributors && currentOptionIndex === taggedContributors.length) {
+        lib.addUntaggedContributor(
+          viewRef,
+          setShowDropdown,
+          contributorLimit,
+          isTypingFromStartRange.current
+        );
+      } else {
+        const contributorToAdd = taggedContributors[currentOptionIndex];
+        if (contributorToAdd) {
+          lib.addTaggedContributor(
+            contributorToAdd,
+            viewRef,
+            setShowDropdown,
+            contributorLimit,
+            isTypingFromStartRange.current
+          );
+        }
+      }
+      setEnterHit(false);
+    }
+  }, [
+    currentOptionIndex,
+    enterHit,
+    taggedContributors,
+    contributorLimit,
+    allowUntaggedContributors
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { css: styles.bylineContainerStyles, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.bylineEditorStyles(theme?.editor), ref: editorRef, onBlur }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: dropdownRef,
+        tabIndex: 0,
+        css: styles.dropdownContainerStyles(
+          showDropdown && // show the dropdown if there are tagged contributors to select or untagged contributors are allowed
+          (taggedContributors.length > 0 || !!allowUntaggedContributors),
+          theme?.dropdown
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsxs("ul", { id: "byline-dropdown", role: "listbox", css: styles.dropdownUlStyles, children: [
+          taggedContributors.map((contributor, i) => /* @__PURE__ */ jsxRuntime.jsx(
+            "li",
+            {
+              id: `contributor-option-${i}`,
+              role: "option",
+              "aria-selected": i === currentOptionIndex,
+              css: [
+                styles.dropdownLiStyles(theme),
+                i === currentOptionIndex && styles.selectedDropdownLiStyles(theme)
+              ],
+              onMouseMove: () => {
+                if (currentOptionIndex !== i) {
+                  setCurrentOptionIndex(i);
+                }
+              },
+              onMouseDown: (e) => {
+                e.preventDefault();
+                lib.addTaggedContributor(
+                  contributor,
+                  viewRef,
+                  setShowDropdown,
+                  contributorLimit,
+                  isTypingFromStartRange.current
+                );
+              },
+              children: contributor.internalLabel ?? contributor.label
+            },
+            contributor.tagId
+          )),
+          allowUntaggedContributors && /* @__PURE__ */ jsxRuntime.jsxs(
+            "li",
+            {
+              role: "option",
+              id: `contributor-option-${taggedContributors.length}`,
+              "aria-selected": currentOptionIndex === taggedContributors.length,
+              css: [
+                styles.dropdownLiStyles(theme),
+                currentOptionIndex === taggedContributors.length && styles.selectedDropdownLiStyles(theme)
+              ],
+              onMouseMove: () => {
+                if (currentOptionIndex !== taggedContributors.length) {
+                  setCurrentOptionIndex(
+                    taggedContributors.length
+                  );
+                }
+              },
+              onMouseDown: (e) => {
+                e.preventDefault();
+                lib.addUntaggedContributor(
+                  viewRef,
+                  setShowDropdown,
+                  contributorLimit,
+                  isTypingFromStartRange.current
+                );
+              },
+              children: [
+                'Add "',
+                currentText,
+                '" as untagged contributor'
+              ]
+            }
+          )
+        ] })
+      }
+    ),
+    enablePreview && /* @__PURE__ */ jsxRuntime.jsx(Preview.Preview, { doc: currentDoc })
+  ] });
+};
+
+exports.Byline = Byline;