Merge release/2.7.0 into main branch (#1174)

* Update RichTextEditor to be a forwardRef and expose setContent through useImperativeHandle (#1173)

* Bump express from 4.18.2 to 4.19.2 (#1171)

* Converts Card to typescript (#1160)

Author: github-actions[bot]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@user-interviews/ui-design-system",
-  "version": "2.6.1",
+  "version": "2.7.0",
   "dependencies": {
     "@tiptap/core": "^2.0.3",
     "@tiptap/extension-bold": "^2.0.3",

src/Card/Card.jsx

@@ -0,0 +1,98 @@
+import React, {
+  createElement,
+  type DetailedHTMLProps,
+  type HTMLAttributes,
+  type ReactNode,
+} from 'react';
+import classNames from 'classnames';
+
+import { LoadingSkeleton } from 'src/LoadingSkeleton';
+
+import './Card.scss';
+
+export const CardSizes = {
+  EXTRA_SMALL: 'xs',
+  SMALL: 'sm',
+  MEDIUM: 'md',
+  LARGE: 'lg',
+} as const;
+
+type ElementProps = DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+
+type CardProps = {
+  children?: ReactNode;
+  className?: string;
+  divided?: boolean;
+  elementType?: string;
+  helperText?: ReactNode;
+  isLoading?: boolean;
+  loadingSkeleton?: ReactNode;
+  loadingSkeletonParagraphCount?: number;
+  noPadding?: boolean;
+  size: 'xs' | 'sm' | 'md' | 'lg';
+  subTitle?: ReactNode;
+  title?: ReactNode;
+} & ElementProps;
+
+const Card = ({
+  children,
+  className,
+  divided = false,
+  elementType = 'section',
+  helperText,
+  isLoading = false,
+  loadingSkeleton,
+  loadingSkeletonParagraphCount = 1,
+  noPadding = false,
+  size,
+  subTitle,
+  title,
+  ...props
+}: CardProps) => {
+  const defaultLoadingSkeleton = (
+    <>
+      <LoadingSkeleton height={24} width="33%" />
+      <br />
+      {Array(loadingSkeletonParagraphCount).fill(0).map((_, i) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <div className="Card__loading-skeleton-paragraphs" key={`skeleton-paragraph-${i}`}>
+          <LoadingSkeleton count={3} />
+        </div>
+      ))}
+    </>
+  );
+
+  return createElement(
+    elementType,
+    {
+      ...props,
+      className: classNames(
+        'Card',
+        { [`Card--${size}`]: size },
+        className,
+        {
+          'Card--divided': divided,
+          'Card--no-padding': noPadding,
+        },
+      ),
+    },
+    <>
+      {isLoading ? (loadingSkeleton || defaultLoadingSkeleton) : (
+        <>
+          {title && (
+            <div className="Card__header">
+              <h2 className="Card__title">{title}</h2>
+              {helperText && <span className="Card__helper-text">{helperText}</span>}
+            </div>
+          )}
+
+          {divided && <hr className="Card__divider" /> }
+          {subTitle && <h3 className="Card__subtitle">{subTitle}</h3> }
+          {children}
+        </>
+      )}
+    </>,
+  );
+};
+
+export default Card;

src/Card/Card.tsx

@@ -10,7 +10,7 @@ import * as ComponentStories from './RichTextEditor.stories';
 
 <Canvas of={ComponentStories.Default} />
 
-### When to use 
+### When to use
 To allow users to edit text where formatting is important, such as messages to be sent via email.
 
 ### When to not use
@@ -45,3 +45,7 @@ RichTextEditor also has an error state to display that the input is invalid. The
 but by setting `hasErrors` via your provided `onChange` callback you can check the HTML produced by the RichTextEditor for any requirements that you have.
 
 <Canvas of={ComponentStories.Error} />
+
+RichTextEditor can optionally take in a forwardedRef to allow content to be programmatically manipulated.
+
+<Canvas of={ComponentStories.SetContent} />

src/Card/index.js renamed to src/Card/index.ts

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useRef } from 'react';
 
+import Button from 'src/Button';
 import { RichTextEditor, RichTextEditorActions } from 'src/RichTextEditor';
 
 import mdx from './RichTextEditor.mdx';
@@ -60,3 +61,22 @@ export const Error = () => (
     onChange={() => null}
   />
 );
+
+export const SetContent = () => {
+  const ref = useRef(null);
+
+  const handleClick = () => {
+    ref.current.setContent('Oh hey');
+  };
+
+  return (
+    <>
+      <Button onClick={handleClick}>Set content to "Oh hey"</Button>
+      <RichTextEditor
+        id="text-editor"
+        ref={ref}
+        onChange={() => null}
+      />
+    </>
+  );
+};

src/RichTextEditor/RichTextEditor.mdx

@@ -4,7 +4,7 @@ import type { Extension, Node as TipTapNode, Mark } from '@tiptap/core';
 
 import './RichTextEditor.scss';
 
-import React from 'react';
+import React, { forwardRef, type ForwardedRef, useImperativeHandle } from 'react';
 
 import classNames from 'classnames';
 
@@ -94,21 +94,28 @@ export type RichTextEditorProps = {
   onChange: (arg0: string) => void;
 }
 
-function RichTextEditor({
-  allowedAttributes,
-  allowedTags,
-  ariaAttributes,
-  availableActions = RichTextEditorDefaultActionsArray,
-  characterLimit,
-  className,
-  hasErrors,
-  id,
-  initialValue,
-  isOneLine,
-  onChange,
-  placeholder,
-  customExtensions = [],
-}: RichTextEditorProps) {
+export type RichTextEditorRef = {
+  setContent: (content: string) => void;
+}
+
+const RichTextEditor = forwardRef((
+  {
+    allowedAttributes,
+    allowedTags,
+    ariaAttributes,
+    availableActions = RichTextEditorDefaultActionsArray,
+    characterLimit,
+    className,
+    hasErrors,
+    id,
+    initialValue,
+    isOneLine,
+    onChange,
+    placeholder,
+    customExtensions = [],
+  }: RichTextEditorProps,
+  ref: ForwardedRef<RichTextEditorRef> = null,
+) => {
   const oneLineExtension = isOneLine ? [OneLineLimit] : [];
 
   const requiredExtensions = [
@@ -183,6 +190,13 @@ function RichTextEditor({
     },
   });
 
+  useImperativeHandle(ref, () => ({
+    setContent: (content: string) => {
+      editor?.commands.setContent(content);
+      onChange(content);
+    },
+  }));
+
   return (
     editor ? (
       <div
@@ -221,7 +235,7 @@ function RichTextEditor({
       </>
     )
   );
-}
+});
 
 // eslint-disable-next-line import/no-default-export
 export default RichTextEditor;