feat(RichTextInput): create new component (#6318)

* feat(RichTextEditor): create new component

* fix(RichTextEditor): fix threads and move component in compositions folder

* fix(RichTextEditor): fix tests

* fix(RichTextEditor): fix anothers threads

* fix(RichTextEditor): add errorLabel prop

* fix(RichTextEditor): update snapshots

* fix(RichTextEditor): fix threads part one

* fix(RichTextInput): fix threads part two and rename to richtextinput

* fix(RichTextInput): fix another threads

* fix(RichTextInput): update snapshot

* fix(RichTextInput): fix last threads

* fix(RichTextInput): fix snapshot

* feat(RichTextInput): fix threads

* fix(RichTextInput): fix format

* fix: statusIcon positionning

* fix: add missing sizes and fix styles

* fix: padding with status Icon

* fix: enter in bullet list not behaving correctly

* fix: test

Signed-off-by: Alexandre Philibeaux <aphilibeaux@scaleway.com>

* fix: lint

* fix: type error

---------

Signed-off-by: Alexandre Philibeaux <aphilibeaux@scaleway.com>
Co-authored-by: Julien Sulpis <jsulpis@scaleway.com>
Co-authored-by: Radhi NASSER <rnasser@scaleway.com>

Author: 3 people

.changeset/fluffy-clowns-repair.md

@@ -0,0 +1,6 @@
+---
+"@ultraviolet/form": minor
+"@ultraviolet/ui": minor
+---
+
+`RichTextInput`: create component `RichTextInput` and `RichTextInputField`

packages/form/src/compositions/RichTextInputField/__stories__/Playground.stories.tsx

@@ -0,0 +1,5 @@
+import { Template } from './Template.stories'
+
+export const Playground = Template.bind({})
+
+Playground.args = Template.args

packages/form/src/compositions/RichTextInputField/__stories__/Required.stories.tsx

@@ -0,0 +1,5 @@
+import { Template } from './Template.stories'
+
+export const Required = Template.bind({})
+
+Required.args = { ...Template.args, required: true }

packages/form/src/compositions/RichTextInputField/__stories__/Template.stories.tsx

@@ -0,0 +1,17 @@
+import type { StoryFn } from '@storybook/react-vite'
+import { Stack } from '@ultraviolet/ui'
+import type { ComponentProps } from 'react'
+import { RichTextInputField } from '..'
+import { Submit } from '../../../components'
+
+export const Template: StoryFn<ComponentProps<typeof RichTextInputField>> = args => (
+  <Stack gap={1}>
+    <RichTextInputField {...args} />
+    <Submit>Submit</Submit>
+  </Stack>
+)
+
+Template.args = {
+  label: 'Label',
+  name: 'richTextInput',
+}

packages/form/src/compositions/RichTextInputField/__stories__/index.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta } from '@storybook/react-vite'
+import { Snippet, Stack, Text } from '@ultraviolet/ui'
+import { RichTextInputField } from '..'
+import { useForm } from '../../..'
+import { Form } from '../../../components'
+import { mockErrors } from '../../../mocks'
+
+export default {
+  component: RichTextInputField,
+  decorators: [
+    ChildStory => {
+      const methods = useForm()
+      const {
+        errors,
+        isDirty,
+        isSubmitting,
+        touchedFields,
+        submitCount,
+        dirtyFields,
+        isValid,
+        isLoading,
+        isSubmitted,
+        isValidating,
+        isSubmitSuccessful,
+      } = methods.formState
+
+      return (
+        <Form errors={mockErrors} methods={methods} onSubmit={() => {}}>
+          <Stack gap={2}>
+            <ChildStory />
+            <Stack gap={1}>
+              <Text as="p" variant="bodyStrong">
+                Form input values:
+              </Text>
+              <Snippet initiallyExpanded prefix="lines">
+                {JSON.stringify(methods.watch(), null, 1)}
+              </Snippet>
+            </Stack>
+            <Stack gap={1}>
+              <Text as="p" variant="bodyStrong">
+                Form values:
+              </Text>
+              <Snippet prefix="lines">
+                {JSON.stringify(
+                  {
+                    errors,
+                    isDirty,
+                    isSubmitting,
+                    touchedFields,
+                    submitCount,
+                    dirtyFields,
+                    isValid,
+                    isLoading,
+                    isSubmitted,
+                    isValidating,
+                    isSubmitSuccessful,
+                  },
+                  null,
+                  1,
+                )}
+              </Snippet>
+            </Stack>
+          </Stack>
+        </Form>
+      )
+    },
+  ],
+  title: 'Form/Components/Compositions/RichTextInputField',
+} as Meta
+
+export { Playground } from './Playground.stories'
+export { Required } from './Required.stories'

packages/form/src/compositions/RichTextInputField/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,89 @@
+import { renderHook, screen, waitFor } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
+import { mockFormErrors, renderWithForm, renderWithTheme } from '@utils/test'
+import { useForm } from 'react-hook-form'
+import { beforeAll, describe, expect, it, vi } from 'vitest'
+import { RichTextInputField } from '..'
+import { Submit } from '../../../components'
+import { Form } from '../../../components/Form'
+
+describe('richTextInputField', () => {
+  beforeAll(() => {
+    Object.defineProperty(document, 'elementFromPoint', {
+      value: vi.fn().mockReturnValue(null),
+      writable: true,
+      configurable: true,
+    })
+  })
+  it('should render correctly', () => {
+    const { asFragment } = renderWithForm(<RichTextInputField label="Test" name="test" />)
+
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  it('should render correctly generated', async () => {
+    const onSubmit = vi.fn()
+    const { result } = renderHook(() => useForm<{ test: string }>({ defaultValues: { test: '' } }))
+
+    const { asFragment } = renderWithTheme(
+      <Form errors={mockFormErrors} methods={result.current} onSubmit={onSubmit}>
+        <RichTextInputField label="Test" name="test" required />
+        <Submit>Submit</Submit>
+      </Form>,
+    )
+
+    await userEvent.click(screen.getByRole('button', { name: 'Submit' }))
+    await waitFor(() => {
+      expect(onSubmit).not.toHaveBeenCalled()
+    })
+
+    const doc = document.querySelector<HTMLDivElement>('[contenteditable="true"]')
+    expect(doc).not.toBeNull()
+    const editor = doc!
+    await userEvent.click(editor)
+    await userEvent.type(editor, 'This is an example')
+    await userEvent.click(screen.getByRole('button', { name: 'Submit' }))
+
+    await waitFor(() => {
+      expect(onSubmit).toHaveBeenCalledOnce()
+      expect(onSubmit).toHaveBeenCalledWith({
+        test: '<p>This is an example</p>',
+      })
+    })
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  it('should submit rich text with style and list', async () => {
+    const onSubmit = vi.fn()
+    const { result } = renderHook(() => useForm<{ test: string }>({ defaultValues: { test: '' } }))
+
+    renderWithTheme(
+      <Form errors={mockFormErrors} methods={result.current} onSubmit={onSubmit}>
+        <RichTextInputField label="Test" name="test" required />
+        <Submit>Submit</Submit>
+      </Form>,
+    )
+
+    const italicButton = screen.getByRole('button', { name: 'Italic' })
+    const bulletListButton = screen.getByRole('button', { name: 'Bullet List' })
+    expect(italicButton).not.toBeNull()
+    expect(bulletListButton).not.toBeNull()
+
+    const doc = document.querySelector<HTMLDivElement>('[contenteditable="true"]')
+    expect(doc).not.toBeNull()
+    const editor = doc!
+    await userEvent.click(editor)
+    await userEvent.click(italicButton)
+    await userEvent.type(editor, 'Styled ')
+    await userEvent.click(bulletListButton)
+    await userEvent.type(editor, 'item')
+    await userEvent.click(screen.getByRole('button', { name: 'Submit' }))
+
+    await waitFor(() => {
+      expect(onSubmit).toHaveBeenCalledOnce()
+      expect(onSubmit).toHaveBeenCalledWith({
+        test: '<ul><li><p><em>Styled item</em></p></li></ul>',
+      })
+    })
+  })
+})

packages/form/src/compositions/RichTextInputField/__tests__/index.test.tsx

@@ -0,0 +1,67 @@
+'use client'
+
+import { RichTextInput } from '@ultraviolet/ui/compositions/RichTextInput'
+import type { ComponentProps, FocusEvent } from 'react'
+import { useController } from 'react-hook-form'
+import type { FieldPath, FieldValues, Path, PathValue } from 'react-hook-form'
+import { useErrors } from '../../providers'
+import type { BaseFieldProps } from '../../types'
+
+export type RichTextInputFieldProps<
+  TFieldValues extends FieldValues,
+  TFieldName extends FieldPath<TFieldValues>,
+> = BaseFieldProps<TFieldValues, TFieldName> &
+  Omit<ComponentProps<typeof RichTextInput>, 'value' | 'onChange' | 'error'>
+
+export const RichTextInputField = <
+  TFieldValues extends FieldValues,
+  TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  control,
+  errorLabel,
+  label,
+  onChange,
+  name,
+  onBlur,
+  required = false,
+  validate,
+  'aria-label': ariaLabel,
+  ...props
+}: RichTextInputFieldProps<TFieldValues, TFieldName>) => {
+  const { getError } = useErrors()
+
+  const {
+    field,
+    fieldState: { error },
+  } = useController<TFieldValues, TFieldName>({
+    control,
+    name,
+    rules: {
+      required,
+      validate,
+    },
+  })
+
+  return (
+    <RichTextInput
+      {...props}
+      error={getError(
+        {
+          label: errorLabel ?? label ?? ariaLabel ?? name,
+          value: field.value,
+        },
+        error,
+      )}
+      onBlur={(event: FocusEvent<HTMLElement>) => {
+        onBlur?.(event)
+        field.onBlur()
+      }}
+      onChange={value => {
+        field.onChange(value)
+        onChange?.(value as PathValue<TFieldValues, Path<TFieldValues>>)
+      }}
+      value={field.value}
+      {...(label ? { label } : { 'aria-label': ariaLabel! })}
+    />
+  )
+}

packages/form/src/compositions/RichTextInputField/index.tsx

@@ -3,3 +3,4 @@ export { CustomerSatisfactionField } from './CustomerSatisfactionField'
 export { OfferListField } from './OfferListField'
 export { OptionSelectorField } from './OptionSelectorField'
 export { PlansField } from './PlansField'
+export { RichTextInputField } from './RichTextInputField'

packages/form/src/compositions/index.ts

@@ -73,6 +73,7 @@
     "watch:build": "vite build  --watch"
   },
   "dependencies": {
+    "@handlewithcare/react-prosemirror": "3.0.0",
     "@nivo/bar": "0.99.0",
     "@nivo/core": "0.99.0",
     "@nivo/line": "0.99.0",
@@ -97,6 +98,13 @@
     "codemirror": "6.0.2",
     "csstype": "3.2.3",
     "deepmerge": "4.3.1",
+    "prosemirror-commands": "1.5.0",
+    "prosemirror-keymap": "1.2.1",
+    "prosemirror-model": "1.25.1",
+    "prosemirror-schema-basic": "1.2.2",
+    "prosemirror-schema-list": "1.2.2",
+    "prosemirror-state": "1.4.3",
+    "prosemirror-view": "1.41.4",
     "react-intersection-observer": "10.0.3",
     "react-toastify": "11.1.0"
   },