chore(rich-text-editor)!: Rename value to defaultValue

.changeset/fluffy-camels-applaud.md

@@ -0,0 +1,23 @@
+---
+"@kaizen/rich-text-editor": major
+---
+
+Rename `value` prop to reflect uncontrolled form field
+
+To conform to React naming convention for form control props.
+Uncontrolled form fields take a `defaultValue` to indicate that
+changes to this prop's value will not update the mounted component.
+Rather, the component manages its current value as internal state,
+and notifies subscribers via `onChange` when it changes.
+
+Consumers will need to update their code to the new prop name. E.g. before:
+
+```jsx
+<RichTextEditor value={…}>
+```
+
+and after:
+
+```jsx
+<RichTextEditor defaultValue={…}>
+```

.eslintignore

@@ -1 +1,9 @@
-/packages/**/dist
+/packages/**/dist
+/draft-packages/**/*.js
+/draft-packages/**/*.js.map
+/draft-packages/**/*.d.ts
+/packages/**/*.js
+!/packages/**/*.config.js
+!/packages/**/svgMock.js
+/packages/**/*.js.map
+/packages/**/*.d.ts

packages/rich-text-editor/docs/EditableRichTextContent.stories.tsx

@@ -60,7 +60,7 @@ function InlineEditor(props: {
             { name: "bulletList", group: "list" },
             { name: "link", group: "link" },
           ]}
-          value={rteData}
+          defaultValue={rteData}
           onChange={handleOnChange}
         />
         <Box mt={0.5} style={{ display: "flex", justifyContent: "end" }}>

packages/rich-text-editor/docs/RichTextEditor.stories.tsx

@@ -9,7 +9,7 @@ import dummyContent from "./dummyContent.json"
 import dummyMalformedContent from "./dummyMalformedContent.json"
 
 type RTEStory = StoryFn<
-  Omit<RichTextEditorProps, "value" | "onChange" | "aria-labelledby">
+  Omit<RichTextEditorProps, "defaultValue" | "onChange" | "aria-labelledby">
 >
 
 export default {
@@ -32,7 +32,7 @@ export const Default: RTEStory = ({ labelText, ...args }) => {
   return (
     <RichTextEditor
       labelText={labelText}
-      value={rteData}
+      defaultValue={rteData}
       onChange={handleOnChange}
       {...args}
     />
@@ -60,7 +60,7 @@ export const WithData: RTEStory = ({ labelText, ...args }) => {
   return (
     <RichTextEditor
       labelText={labelText}
-      value={rteData}
+      defaultValue={rteData}
       onChange={handleOnChange}
       {...args}
     />
@@ -89,7 +89,7 @@ export const WithBadData: RTEStory = ({ labelText, ...args }) => {
   return (
     <RichTextEditor
       labelText={labelText}
-      value={rteData}
+      defaultValue={rteData}
       onChange={handleOnChange}
       {...args}
     />
@@ -121,14 +121,14 @@ export const WithDescriptionAndValidationMessage: RTEStory = ({
     <>
       <RichTextEditor
         labelText={labelText}
-        value={rteData}
+        defaultValue={rteData}
         onChange={handleOnChange}
         status="error"
         {...args}
       />
       <RichTextEditor
         labelText={labelText}
-        value={rteData}
+        defaultValue={rteData}
         onChange={handleOnChange}
         status="caution"
         {...args}

packages/rich-text-editor/src/RichTextEditor/RichTextEditor.spec.stories.tsx

@@ -21,7 +21,7 @@ const TestBase: Story = {
     return (
       <RichTextEditor
         labelText="Label"
-        value={rteData}
+        defaultValue={rteData}
         onChange={handleOnChange}
         rows={3}
         controls={[

packages/rich-text-editor/src/RichTextEditor/RichTextEditor.spec.tsx

@@ -18,8 +18,11 @@ const getSelectionOfNode = (node: Node): void => {
 }
 
 const TestRTE = (
-  args: Omit<RichTextEditorProps, "value" | "onChange" | "aria-labelledby"> & {
-    rteMockData?: RichTextEditorProps["value"]
+  args: Omit<
+    RichTextEditorProps,
+    "defaultValue" | "onChange" | "aria-labelledby"
+  > & {
+    rteMockData?: RichTextEditorProps["defaultValue"]
   }
 ): JSX.Element => {
   const { rteMockData, ...rest } = args
@@ -34,7 +37,7 @@ const TestRTE = (
         { name: "orderedList", group: "list" },
         { name: "bulletList", group: "list" },
       ]}
-      value={rteData}
+      defaultValue={rteData}
       onChange={handleOnChange}
       {...rest}
     />

packages/rich-text-editor/src/RichTextEditor/RichTextEditor.tsx

@@ -23,10 +23,10 @@ import styles from "./RichTextEditor.module.scss"
 
 export interface BaseRichTextEditorProps
   extends OverrideClassName<
-    Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "content">
+    Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue">
   > {
   onChange: (content: ProseMirrorState.EditorState) => void
-  value: EditorContentArray
+  defaultValue: EditorContentArray
   controls?: ToolbarItems[]
   /**
    * Sets a default min-height for the editable area in units of body paragraph line height, similar to the 'rows' attribute on <textarea>.
@@ -64,7 +64,7 @@ export type RichTextEditorProps = RTEWithLabelText | RTEWithLabelledBy
 export const RichTextEditor = (props: RichTextEditorProps): JSX.Element => {
   const {
     onChange,
-    value,
+    defaultValue,
     labelText,
     "aria-labelledby": labelledBy,
     classNameOverride,
@@ -93,7 +93,8 @@ export const RichTextEditor = (props: RichTextEditorProps): JSX.Element => {
             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: value?.length > 0 ? value : [{ type: "paragraph" }],
+            content:
+              defaultValue?.length > 0 ? defaultValue : [{ type: "paragraph" }],
           }),
           schema,
           plugins: getPlugins(controls, schema),