@kaizen/components 0.0.0-canary-debug-kaizenprovider-20241223004555 → 0.0.0-canary-debug-kaizen-provider-take-2-20241223005900

package/src/RichTextEditor/RichTextEditor/RichTextEditor.tsx

@@ -1,27 +1,33 @@
-import React, { useEffect, useId, useState, type HTMLAttributes, type ReactNode } from 'react'
-import classnames from 'classnames'
-import { FieldMessage } from '~components/FieldMessage'
-import { Label } from '~components/Label'
-import { InlineNotification } from '~components/Notification'
-import { type OverrideClassName } from '~components/types/OverrideClassName'
-import { type EditorContentArray, type EditorRows, type ToolbarItems } from '../types'
-import { useRichTextEditor } from '../utils/core'
-import { createLinkManager } from '../utils/plugins'
+import React, {
+  useState,
+  useEffect,
+  HTMLAttributes,
+  ReactNode,
+  useId,
+} from "react"
+import classnames from "classnames"
+import { FieldMessage } from "~components/FieldMessage"
+import { Label } from "~components/Label"
+import { InlineNotification } from "~components/Notification"
+import { OverrideClassName } from "~components/types/OverrideClassName"
+import { ToolbarItems, EditorContentArray, EditorRows } from "../types"
+import { useRichTextEditor } from "../utils/core"
+import { createLinkManager } from "../utils/plugins"
 import {
   ProseMirrorCommands,
   ProseMirrorHistory,
   ProseMirrorKeymap,
   ProseMirrorModel,
   ProseMirrorState,
-} from '../utils/prosemirror'
-import { createSchemaFromControls } from './schema'
-import { ToggleIconButton } from './subcomponents/ToggleIconButton'
-import { Toolbar } from './subcomponents/Toolbar'
-import { ToolbarSection } from './subcomponents/ToolbarSection'
-import { buildControlMap } from './utils/controlmap'
-import { buildInputRules } from './utils/inputrules'
-import { buildKeymap } from './utils/keymap'
-import styles from './RichTextEditor.module.scss'
+} from "../utils/prosemirror"
+import { createSchemaFromControls } from "./schema"
+import { ToggleIconButton } from "./subcomponents/ToggleIconButton"
+import { Toolbar } from "./subcomponents/Toolbar"
+import { ToolbarSection } from "./subcomponents/ToolbarSection"
+import { buildControlMap } from "./utils/controlmap"
+import { buildInputRules } from "./utils/inputrules"
+import { buildKeymap } from "./utils/keymap"
+import styles from "./RichTextEditor.module.scss"
 
 type BaseRichTextEditorProps = {
   id?: string
@@ -35,7 +41,7 @@ type BaseRichTextEditorProps = {
   rows?: EditorRows
   dataError?: React.ReactElement
   onDataError?: () => void
-  status?: 'default' | 'error' | 'caution'
+  status?: "default" | "error" | "caution"
   /**
    * A descriptive message for `error` or `caution` states
    */
@@ -44,19 +50,22 @@ type BaseRichTextEditorProps = {
    * A description that provides context
    */
   description?: React.ReactNode
-} & OverrideClassName<Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'>>
+} & OverrideClassName<
+  Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue">
+>
 
 type WithLabelText = {
-  'labelText': ReactNode
-  'aria-labelledby'?: never
+  labelText: ReactNode
+  "aria-labelledby"?: never
 }
 
 type WithLabelledBy = {
-  'labelText'?: never
-  'aria-labelledby': string
+  labelText?: never
+  "aria-labelledby": string
 }
 
-export type RichTextEditorProps = BaseRichTextEditorProps & (WithLabelText | WithLabelledBy)
+export type RichTextEditorProps = BaseRichTextEditorProps &
+  (WithLabelText | WithLabelledBy)
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896752/Rich+Text+Editor Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-richtexteditor--docs Storybook}
@@ -66,8 +75,8 @@ export const RichTextEditor = ({
   onChange,
   defaultValue,
   labelText,
-  'aria-labelledby': labelledBy,
-  'aria-describedby': describedBy,
+  "aria-labelledby": labelledBy,
+  "aria-describedby": describedBy,
   classNameOverride,
   controls,
   rows = 3,
@@ -75,57 +84,66 @@ export const RichTextEditor = ({
   onDataError,
   validationMessage,
   description,
-  status = 'default',
+  status = "default",
   ...restProps
 }: RichTextEditorProps): JSX.Element => {
   const generatedId = useId()
-  const [schema] = useState<ProseMirrorModel.Schema>(createSchemaFromControls(controls))
-
-  const editorId = id ?? generatedId
-  const labelId = labelledBy ?? `${editorId}-rte-label`
-  const validationMessageAria = validationMessage ? `${editorId}-rte-validation-message` : ''
-  const descriptionAria = description ? `${editorId}-rte-description` : ''
+  const [schema] = useState<ProseMirrorModel.Schema>(
+    createSchemaFromControls(controls)
+  )
 
-  const ariaDescribedBy = classnames(validationMessageAria, descriptionAria, describedBy)
+  const editorId = id || generatedId
+  const labelId = labelledBy || `${editorId}-rte-label`
+  const validationMessageAria = validationMessage
+    ? `${editorId}-rte-validation-message`
+    : ""
+  const descriptionAria = description ? `${editorId}-rte-description` : ""
+
+  const ariaDescribedBy = classnames(
+    validationMessageAria,
+    descriptionAria,
+    describedBy
+  )
 
-  const useRichTextEditorResult = ((): ReturnType<typeof useRichTextEditor> | Error => {
+  const useRichTextEditorResult = (():
+    | ReturnType<typeof useRichTextEditor>
+    | Error => {
     try {
-      // @todo: Fix if possible - avoiding breaking in eslint upgrade
-      // eslint-disable-next-line react-hooks/rules-of-hooks
       return useRichTextEditor(
         ProseMirrorState.EditorState.create({
           doc: ProseMirrorModel.Node.fromJSON(schema, {
-            type: 'doc',
+            type: "doc",
             // we're converting empty arrays to the ProseMirror default "empty" state because when
             // given an empty array ProseMirror returns undefined, breaking the type
-            content: defaultValue?.length > 0 ? defaultValue : [{ type: 'paragraph' }],
+            content:
+              defaultValue?.length > 0 ? defaultValue : [{ type: "paragraph" }],
           }),
           schema,
           plugins: getPlugins(controls, schema),
         }),
         {
-          'aria-labelledby': labelId,
-          'role': 'textbox',
-          'aria-describedby': ariaDescribedBy,
-        },
+          "aria-labelledby": labelId,
+          role: "textbox",
+          "aria-describedby": ariaDescribedBy,
+        }
       )
     } catch {
-      return new Error('Bad data error')
+      return new Error("Bad data error")
     }
   })()
 
   if (useRichTextEditorResult instanceof Error) {
-    onDataError?.()
+    onDataError && onDataError()
     return (
       <InlineNotification
         headingProps={{
-          children: 'Error',
-          variant: 'heading-6',
+          children: "Error",
+          variant: "heading-6",
         }}
         type="negative"
         persistent
       >
-        {dataError ?? 'Something went wrong'}
+        {dataError || "Something went wrong"}
       </InlineNotification>
     )
   }
@@ -134,18 +152,19 @@ export const RichTextEditor = ({
 
   const controlMap = buildControlMap(schema, editorState, controls)
 
-  // @todo: Fix if possible - avoiding breaking in eslint upgrade
-  // eslint-disable-next-line react-hooks/rules-of-hooks
   useEffect(() => {
     onChange(editorState)
     // Including `onContentChange` in the dependencies here will cause a 'Maximum update depth exceeded' issue
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editorState])
 
   return (
     <>
       {!labelledBy && labelText && (
-        <Label classNameOverride={styles.editorLabel} id={labelId} labelText={labelText} />
+        <Label
+          classNameOverride={styles.editorLabel}
+          id={labelId}
+          labelText={labelText}
+        />
       )}
       <div className={classnames(styles.editorWrapper, styles[status])}>
         {controls && (
@@ -163,7 +182,9 @@ export const RichTextEditor = ({
                     disabled={controlConfig.disabled}
                     label={controlConfig.label}
                     isActive={controlConfig.isActive}
-                    onClick={(): void => dispatchTransaction(controlConfig.action)}
+                    onClick={(): void =>
+                      dispatchTransaction(controlConfig.action)
+                    }
                   />
                 ))}
               </ToolbarSection>
@@ -177,27 +198,33 @@ export const RichTextEditor = ({
             styles.editor,
             styles[`rows${rows}`],
             classNameOverride,
-            controls != null && controls.length > 0 && styles.hasToolbar,
+            controls != null && controls.length > 0 && styles.hasToolbar
           )}
           {...restProps}
         />
       </div>
 
       {validationMessage && (
-        <FieldMessage id={validationMessageAria} message={validationMessage} status={status} />
+        <FieldMessage
+          id={validationMessageAria}
+          message={validationMessage}
+          status={status}
+        />
       )}
 
-      {description && <FieldMessage id={descriptionAria} message={description} />}
+      {description && (
+        <FieldMessage id={descriptionAria} message={description} />
+      )}
     </>
   )
 }
 
-RichTextEditor.displayName = 'RichTextEditor'
+RichTextEditor.displayName = "RichTextEditor"
 
 function getPlugins(
   controls: ToolbarItems[] | undefined,
-  schema: ProseMirrorModel.Schema,
-): (
+  schema: ProseMirrorModel.Schema
+): Array<
   | ProseMirrorState.Plugin<unknown>
   | ProseMirrorState.Plugin<{
       transform: ProseMirrorState.Transaction
@@ -205,7 +232,7 @@ function getPlugins(
       to: number
       text: string
     } | null>
-)[] {
+> {
   const allControlNames: string[] = controls
     ? controls.reduce((acc: string[], c: ToolbarItems) => [...acc, c.name], [])
     : []
@@ -216,11 +243,11 @@ function getPlugins(
     buildInputRules(schema),
   ]
 
-  if (allControlNames.includes('link')) {
+  if (allControlNames.includes("link")) {
     plugins.push(
       createLinkManager({
         markType: schema.marks.link,
-      }),
+      })
     )
   }
 

package/src/RichTextEditor/RichTextEditor/_docs/RichTextEditor.mdx

@@ -1,8 +1,8 @@
-import { Canvas, Controls, DocsStory, Meta } from '@storybook/blocks'
-import { ResourceLinks, KAIOInstallation } from '~storybook/components'
-import * as EditableRichTextContentStories from '../../EditableRichTextContent/_docs/EditableRichTextContent.stories'
-import * as RichTextContentStories from '../../RichTextContent/_docs/RichTextContent.stories'
-import * as RichTextEditorStories from './RichTextEditor.stories'
+import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
+import * as EditableRichTextContentStories from "../../EditableRichTextContent/_docs/EditableRichTextContent.stories"
+import * as RichTextContentStories from "../../RichTextContent/_docs/RichTextContent.stories"
+import * as RichTextEditorStories from "./RichTextEditor.stories"
 
 <Meta of={RichTextEditorStories} />
 
@@ -40,6 +40,7 @@ With all controls, the Kaizen `RichTextEditor` can create and render formatted t
 
 <Canvas of={RichTextEditorStories.AllAvailableContent} />
 
+
 ### The EditorContentArray and defaultValue
 
 The `defaultValue` is the initial content of the `RichTextEditor`. It accepts an array of objects in the [ProseMirror's rich text format](https://cultureamp.atlassian.net/wiki/spaces/TV/pages/3380543671/ProseMirror+rich+formatted+text+data+format).
@@ -63,14 +64,13 @@ For example: if your `defaultValue` contains bolded text, you must pass bold int
 ```
 
 ### Data errors and onDataError
-
 When content is passed to the `defaultValue` that does not match to the `RichTextEditor`'s [schema](https://github.com/cultureamp/kaizen-design-system/blob/main/packages/components/src/RichTextEditor/RichTextEditor/schema.ts), the component will throw and render a generic error.
 
 <Canvas of={RichTextEditorStories.MalformedContent} />
 
 This will also throw if you have passed in an `EditorContentArray` that contains data that cannot map to the `controls` provided to the component.
 
-<Canvas of={RichTextEditorStories.IncorrectDataForControls} />
+<Canvas of={RichTextEditorStories.IncorrectDataForControls}/>
 
 The `dataError` React Node and `onDataError` callback also allows you to handle these edge cases without breaking the page.
 
@@ -84,6 +84,7 @@ Sets the minimum height for the editable area of the RichTextEditor.
 
 <DocsStory of={RichTextEditorStories.Validation} />
 
+
 ### Inactive states and read-only text
 
 In addition to the `RichTextEditor`, there are two additional Kaizen components that support rendering data in the RTE format.
@@ -99,3 +100,4 @@ For rendering editable content that can toggle between an active and inactive st
 For rendering content as read-only text we recommend using the [RichTextContent](/docs/components-richtexteditor-richtextcontent--docs).
 
 <Canvas of={RichTextContentStories.Playground} />
+

package/src/RichTextEditor/RichTextEditor/_docs/RichTextEditor.stories.tsx

@@ -1,24 +1,24 @@
-import React, { useState } from 'react'
-import { type Meta, type StoryObj } from '@storybook/react'
-import { fn } from '@storybook/test'
-import dummyContent from '../../EditableRichTextContent/_docs/dummyContent.json'
-import { type EditorContentArray } from '../../index'
-import { RichTextEditor, type RichTextEditorProps } from '../index'
+import React, { useState } from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
+import dummyContent from "../../EditableRichTextContent/_docs/dummyContent.json"
+import { EditorContentArray } from "../../index"
+import { RichTextEditor, RichTextEditorProps } from "../index"
 
 const meta = {
-  title: 'Components/RichTextEditor/RichTextEditor',
+  title: "Components/RichTextEditor/RichTextEditor",
   component: RichTextEditor,
   parameters: {
     chromatic: { disable: false },
   },
   args: {
-    labelText: 'Rich Text',
+    labelText: "Rich Text",
     defaultValue: [],
     onChange: () => undefined,
     controls: [
-      { name: 'bold', group: 'inline' },
-      { name: 'italic', group: 'inline' },
-      { name: 'underline', group: 'inline' },
+      { name: "bold", group: "inline" },
+      { name: "italic", group: "inline" },
+      { name: "underline", group: "inline" },
     ],
   },
 } satisfies Meta<typeof RichTextEditor>
@@ -28,12 +28,18 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Playground: Story = {
-  render: (args) => {
+  render: args => {
     const [rteData, setRTEData] = useState<EditorContentArray>([])
-    const handleOnChange: RichTextEditorProps['onChange'] = (editorState) =>
+    const handleOnChange: RichTextEditorProps["onChange"] = editorState =>
       setRTEData(editorState.toJSON().doc.content)
 
-    return <RichTextEditor {...args} defaultValue={rteData} onChange={handleOnChange} />
+    return (
+      <RichTextEditor
+        {...args}
+        defaultValue={rteData}
+        onChange={handleOnChange}
+      />
+    )
   },
   parameters: {
     chromatic: { disable: true },
@@ -61,7 +67,7 @@ const MyEditor = () => {
 `,
       },
       canvas: {
-        sourceState: 'shown',
+        sourceState: "shown",
       },
     },
   },
@@ -70,9 +76,9 @@ const MyEditor = () => {
 export const Controls: Story = {
   args: {
     controls: [
-      { name: 'bold', group: 'inline' },
-      { name: 'italic', group: 'inline' },
-      { name: 'underline', group: 'inline' },
+      { name: "bold", group: "inline" },
+      { name: "italic", group: "inline" },
+      { name: "underline", group: "inline" },
     ],
   },
 }
@@ -80,16 +86,16 @@ export const Controls: Story = {
 export const ControlsWithoutBold: Story = {
   args: {
     controls: [
-      { name: 'italic', group: 'inline' },
-      { name: 'underline', group: 'inline' },
+      { name: "italic", group: "inline" },
+      { name: "underline", group: "inline" },
     ],
     defaultValue: [
       {
-        type: 'paragraph',
+        type: "paragraph",
         content: [
           {
-            type: 'text',
-            text: 'This user text cannot be bolded',
+            type: "text",
+            text: "This user text cannot be bolded",
           },
         ],
       },
@@ -101,11 +107,11 @@ export const DefaultValue: Story = {
   args: {
     defaultValue: [
       {
-        type: 'paragraph',
+        type: "paragraph",
         content: [
           {
-            type: 'text',
-            text: 'User text goes here',
+            type: "text",
+            text: "User text goes here",
           },
         ],
       },
@@ -117,33 +123,33 @@ export const AllAvailableContent: Story = {
   args: {
     defaultValue: dummyContent,
     controls: [
-      { name: 'bold', group: 'inline' },
-      { name: 'italic', group: 'inline' },
-      { name: 'underline', group: 'inline' },
-      { name: 'orderedList', group: 'list' },
-      { name: 'bulletList', group: 'list' },
-      { name: 'link', group: 'link' },
+      { name: "bold", group: "inline" },
+      { name: "italic", group: "inline" },
+      { name: "underline", group: "inline" },
+      { name: "orderedList", group: "list" },
+      { name: "bulletList", group: "list" },
+      { name: "link", group: "link" },
     ],
   },
 }
 
 export const Rows: Story = {
   args: {
-    labelText: '1 Row',
+    labelText: "1 Row",
     rows: 1,
   },
 }
 
 export const Description: Story = {
   args: {
-    description: 'Description text',
+    description: "Description text",
   },
 }
 
 export const Validation: Story = {
   args: {
-    validationMessage: 'Error message',
-    status: 'error',
+    validationMessage: "Error message",
+    status: "error",
   },
 }
 
@@ -151,12 +157,12 @@ export const MalformedContent: Story = {
   args: {
     defaultValue: [
       {
-        type: 'plaragraph',
+        type: "plaragraph",
         content: [
           {
-            type: 'text',
-            marks: [{ type: 'strong' }],
-            text: 'User text goes here in bold text',
+            type: "text",
+            marks: [{ type: "strong" }],
+            text: "User text goes here in bold text",
           },
         ],
       },
@@ -168,17 +174,17 @@ export const IncorrectDataForControls: Story = {
   args: {
     defaultValue: [
       {
-        type: 'paragraph',
+        type: "paragraph",
         content: [
           {
-            type: 'text',
-            marks: [{ type: 'strong' }],
-            text: 'User text goes here in bold text',
+            type: "text",
+            marks: [{ type: "strong" }],
+            text: "User text goes here in bold text",
           },
         ],
       },
     ],
-    controls: [{ name: 'italic', group: 'inline' }],
+    controls: [{ name: "italic", group: "inline" }],
     dataError: <>Cannot bold text without a bold control</>,
     onDataError: () => fn(),
   },

package/src/RichTextEditor/RichTextEditor/index.ts

@@ -1,4 +1,4 @@
-export * from './RichTextEditor'
-export * from './subcomponents/ToggleIconButton'
-export * from './subcomponents/Toolbar'
-export * from './subcomponents/ToolbarSection'
+export * from "./RichTextEditor"
+export * from "./subcomponents/ToggleIconButton"
+export * from "./subcomponents/Toolbar"
+export * from "./subcomponents/ToolbarSection"

package/src/RichTextEditor/RichTextEditor/schema.ts

@@ -1,11 +1,11 @@
-import type { MarkSpec } from 'prosemirror-model'
-import { TOOLBAR_CONTROLS } from '../constants'
-import { type ToolbarControlTypes, type ToolbarItems } from '../types'
-import { ProseMirrorModel } from '../utils/prosemirror'
-import { getMarks, getNodes } from '../utils/schema'
+import { MarkSpec } from "prosemirror-model"
+import { TOOLBAR_CONTROLS } from "../constants"
+import { ToolbarItems, ToolbarControlTypes } from "../types"
+import { ProseMirrorModel } from "../utils/prosemirror"
+import { getMarks, getNodes } from "../utils/schema"
 
 export const createSchemaFromControls = (
-  controls?: ToolbarItems[],
+  controls?: ToolbarItems[]
 ): ProseMirrorModel.Schema<string> => {
   if (!controls) {
     return createSchema()
@@ -13,7 +13,7 @@ export const createSchemaFromControls = (
 
   const namesFromControls = controls.reduce(
     (acc: ToolbarControlTypes[], c: ToolbarItems) => [...acc, c.name],
-    [],
+    []
   )
 
   return createSchema(namesFromControls)
@@ -22,7 +22,9 @@ export const createSchemaFromControls = (
 export const createSchemaWithAll = (): ProseMirrorModel.Schema<string> =>
   createSchema(TOOLBAR_CONTROLS)
 
-const createSchema = (controls?: ToolbarControlTypes[]): ProseMirrorModel.Schema<string> => {
+const createSchema = (
+  controls?: ToolbarControlTypes[]
+): ProseMirrorModel.Schema<string> => {
   const nodes = getNodes()
   const marks = getMarks()
 
@@ -42,30 +44,30 @@ const createSchema = (controls?: ToolbarControlTypes[]): ProseMirrorModel.Schema
   const newNodes: typeof nodes = { ...defaultNodes }
   const newMarks: MarkSpec = {}
 
-  if (controls.includes('bold')) {
-    newMarks.strong = marks.strong
+  if (controls.includes("bold")) {
+    newMarks["strong"] = marks.strong
   }
 
-  if (controls.includes('italic')) {
-    newMarks.em = marks.em
+  if (controls.includes("italic")) {
+    newMarks["em"] = marks.em
   }
 
-  if (controls.includes('underline')) {
-    newMarks.underline = marks.underline
+  if (controls.includes("underline")) {
+    newMarks["underline"] = marks.underline
   }
 
-  if (controls.includes('bulletList')) {
-    newNodes.bulletList = nodes.bulletList
-    newNodes.listItem = nodes.listItem
+  if (controls.includes("bulletList")) {
+    newNodes["bulletList"] = nodes.bulletList
+    newNodes["listItem"] = nodes.listItem
   }
 
-  if (controls.includes('orderedList')) {
-    newNodes.orderedList = nodes.orderedList
-    newNodes.listItem = nodes.listItem
+  if (controls.includes("orderedList")) {
+    newNodes["orderedList"] = nodes.orderedList
+    newNodes["listItem"] = nodes.listItem
   }
 
-  if (controls.includes('link')) {
-    newMarks.link = marks.link
+  if (controls.includes("link")) {
+    newMarks["link"] = marks.link
   }
 
   return new ProseMirrorModel.Schema({

package/src/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/ToggleIconButton.module.scss

@@ -1,6 +1,6 @@
-@import '~@kaizen/design-tokens/sass/animation';
-@import '~@kaizen/design-tokens/sass/border';
-@import '~@kaizen/design-tokens/sass/color';
+@import "~@kaizen/design-tokens/sass/animation";
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
 
 .button {
   border: none;
@@ -21,7 +21,7 @@
   &:focus-visible::after {
     $focus-ring-offset: 3px;
 
-    content: '';
+    content: "";
     position: absolute;
     background: transparent;
     border-radius: $border-focus-ring-border-radius;
@@ -113,6 +113,7 @@
     background-color: transparent;
     border-color: transparent;
     opacity: 100%;
-    outline: $color-purple-800 $border-solid-border-style $border-focus-ring-border-width;
+    outline: $color-purple-800 $border-solid-border-style
+      $border-focus-ring-border-width;
   }
 }