feat(RichTextInput): create new component

.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,21 @@
+import { Stack } from '@ultraviolet/ui'
+
+import { RichTextInputField } from '..'
+import { Submit } from '../../../components'
+
+import type { StoryFn } from '@storybook/react-vite'
+import type { ComponentProps } from 'react'
+
+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,74 @@
+import { Snippet, Stack, Text } from '@ultraviolet/ui'
+
+import { RichTextInputField } from '..'
+import { useForm } from '../../..'
+import { Form } from '../../../components'
+import { mockErrors } from '../../../mocks'
+
+import type { Meta } from '@storybook/react-vite'
+
+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__/index.test.tsx

@@ -0,0 +1,103 @@
+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 { describe, expect, test, vi } from 'vitest'
+
+import { RichTextInputField } from '..'
+import { Submit } from '../../../components'
+import { Form } from '../../../components/Form'
+
+describe('richTextInputField', () => {
+  test('should render correctly', () => {
+    const { asFragment } = renderWithForm(
+      <RichTextInputField label="Test" name="test" />,
+    )
+
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  test('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).toHaveBeenCalledTimes(0)
+    })
+
+    const doc = document.querySelector<HTMLDivElement>(
+      '[contenteditable="true"]',
+    )
+    if (!doc) {
+      throw new Error('RichTextInput contenteditable not found')
+    }
+    await userEvent.click(doc)
+    await userEvent.type(doc, 'This is an example')
+    await userEvent.click(screen.getByRole('button', { name: 'Submit' }))
+
+    await waitFor(() => {
+      expect(onSubmit).toHaveBeenCalledOnce()
+      expect(onSubmit.mock.calls[0][0]).toEqual({
+        test: '<p>This is an example</p>',
+      })
+    })
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  test('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"]',
+    )
+    if (!doc) {
+      throw new Error('RichTextInput contenteditable not found')
+    }
+    await userEvent.click(doc)
+    await userEvent.click(italicButton)
+    await userEvent.type(doc, 'Styled ')
+    await userEvent.click(bulletListButton)
+    await userEvent.type(doc, 'item')
+    await userEvent.click(screen.getByRole('button', { name: 'Submit' }))
+
+    await waitFor(() => {
+      expect(onSubmit).toHaveBeenCalledOnce()
+      expect(onSubmit.mock.calls[0][0]).toEqual({
+        test: '<ul><li><p><em>Styled item</em></p></li></ul>',
+      })
+    })
+  })
+})

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

@@ -0,0 +1,69 @@
+'use client'
+
+import { RichTextInput } from '@ultraviolet/ui/compositions/RichTextInput'
+import { useController } from 'react-hook-form'
+
+import { useErrors } from '../../providers'
+
+import type { BaseFieldProps } from '../../types'
+import type { ComponentProps, FocusEvent } from 'react'
+import type { FieldPath, FieldValues, Path, PathValue } from 'react-hook-form'
+
+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/index.ts

@@ -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/ui/package.json

@@ -73,6 +73,7 @@
     "watch:build": "vite build --config vite.config.ts --watch"
   },
   "dependencies": {
+    "@handlewithcare/react-prosemirror": "3.0.0",
     "@nivo/bar": "0.99.0",
     "@nivo/core": "0.99.0",
     "@nivo/line": "0.99.0",
@@ -95,6 +96,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.0.5"
   },

packages/ui/src/compositions/RichTextInput/Notice.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import { Row } from '../../components/Row'
+import { Text } from '../../components/Text'
+
+import type { ReactNode } from 'react'
+
+export const Notice = ({
+  error,
+  success,
+  helper,
+  disabled,
+  sentiment,
+  id,
+}: {
+  error?: string | boolean
+  success?: string | boolean
+  helper?: ReactNode
+  disabled?: boolean
+  sentiment?: 'danger' | 'success' | 'neutral'
+  id?: string
+}) => (
+  <div id={id} role="status">
+    <Row gap="1" templateColumns="minmax(0, 1fr) min-content">
+      {error || success || typeof helper === 'string' ? (
+        <Text
+          as="p"
+          disabled={disabled}
+          prominence={error || success ? 'default' : 'weak'}
+          sentiment={sentiment}
+          variant="caption"
+        >
+          {error || success || helper}
+        </Text>
+      ) : null}
+      {!(error || success) && typeof helper !== 'string' && helper
+        ? helper
+        : null}
+    </Row>
+  </div>
+)