@furystack/shades-common-components 12.2.0 → 12.4.0

package/src/components/form.spec.tsx

@@ -35,6 +35,18 @@ describe('FormService', () => {
         expect(service.inputs.size).toBe(0)
       })
     })
+
+    it('should initialize isSubmitting as false', () => {
+      using(new FormService(), (service) => {
+        expect(service.isSubmitting.getValue()).toBe(false)
+      })
+    })
+
+    it('should initialize submitError as undefined', () => {
+      using(new FormService(), (service) => {
+        expect(service.submitError.getValue()).toBeUndefined()
+      })
+    })
   })
 
   describe('setFieldState', () => {
@@ -84,12 +96,18 @@ describe('FormService', () => {
       const validatedFormDataDisposeSpy = vi.spyOn(service.validatedFormData, Symbol.dispose)
       const rawFormDataDisposeSpy = vi.spyOn(service.rawFormData, Symbol.dispose)
       const validationResultDisposeSpy = vi.spyOn(service.validationResult, Symbol.dispose)
+      const fieldErrorsDisposeSpy = vi.spyOn(service.fieldErrors, Symbol.dispose)
+      const isSubmittingDisposeSpy = vi.spyOn(service.isSubmitting, Symbol.dispose)
+      const submitErrorDisposeSpy = vi.spyOn(service.submitError, Symbol.dispose)
 
       service[Symbol.dispose]()
 
       expect(validatedFormDataDisposeSpy).toHaveBeenCalled()
       expect(rawFormDataDisposeSpy).toHaveBeenCalled()
       expect(validationResultDisposeSpy).toHaveBeenCalled()
+      expect(fieldErrorsDisposeSpy).toHaveBeenCalled()
+      expect(isSubmittingDisposeSpy).toHaveBeenCalled()
+      expect(submitErrorDisposeSpy).toHaveBeenCalled()
     })
   })
 })
@@ -488,4 +506,295 @@ describe('Form component', () => {
       await sleepAsync(50)
     })
   })
+
+  it('should set isSubmitting during async onSubmit and reset after', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      let resolveSubmit: () => void
+      const submitPromise = new Promise<void>((resolve) => {
+        resolveSubmit = resolve
+      })
+
+      type FormData = { name: string }
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <Form<FormData>
+            onSubmit={() => submitPromise}
+            validate={(data): data is FormData => {
+              const d = data as Record<string, unknown>
+              return typeof d.name === 'string'
+            }}
+          >
+            <input name="name" type="text" />
+            <button type="submit">Submit</button>
+          </Form>
+        ),
+      })
+
+      await sleepAsync(50)
+
+      const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
+      const input = form.querySelector('input[name="name"]') as HTMLInputElement
+      input.value = 'Test'
+
+      const formInjector = (form as unknown as { injector: Injector }).injector
+      const formService = formInjector.getInstance(FormService)
+
+      expect(formService.isSubmitting.getValue()).toBe(false)
+
+      const submitEvent = new Event('submit', { bubbles: true, cancelable: true })
+      form.dispatchEvent(submitEvent)
+
+      await sleepAsync(50)
+      expect(formService.isSubmitting.getValue()).toBe(true)
+
+      resolveSubmit!()
+      await sleepAsync(50)
+      expect(formService.isSubmitting.getValue()).toBe(false)
+    })
+  })
+
+  it('should reset isSubmitting to false and set submitError when onSubmit throws', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      type FormData = { name: string }
+
+      const submitError = new Error('Submit failed')
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <Form<FormData>
+            onSubmit={async () => {
+              throw submitError
+            }}
+            validate={(data): data is FormData => {
+              const d = data as Record<string, unknown>
+              return typeof d.name === 'string'
+            }}
+          >
+            <input name="name" type="text" />
+            <button type="submit">Submit</button>
+          </Form>
+        ),
+      })
+
+      await sleepAsync(50)
+
+      const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
+      const input = form.querySelector('input[name="name"]') as HTMLInputElement
+      input.value = 'Test'
+
+      const formInjector = (form as unknown as { injector: Injector }).injector
+      const formService = formInjector.getInstance(FormService)
+
+      const submitEvent = new Event('submit', { bubbles: true, cancelable: true })
+      form.dispatchEvent(submitEvent)
+
+      await sleepAsync(50)
+      expect(formService.isSubmitting.getValue()).toBe(false)
+      expect(formService.submitError.getValue()).toBe(submitError)
+    })
+  })
+
+  it('should clear submitError before a new submission', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      let shouldThrow = true
+      let resolveSubmit: () => void
+
+      type FormData = { name: string }
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <Form<FormData>
+            onSubmit={async () => {
+              if (shouldThrow) {
+                throw new Error('First submit fails')
+              }
+              return new Promise<void>((resolve) => {
+                resolveSubmit = resolve
+              })
+            }}
+            validate={(data): data is FormData => {
+              const d = data as Record<string, unknown>
+              return typeof d.name === 'string'
+            }}
+          >
+            <input name="name" type="text" />
+            <button type="submit">Submit</button>
+          </Form>
+        ),
+      })
+
+      await sleepAsync(50)
+
+      const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
+      const input = form.querySelector('input[name="name"]') as HTMLInputElement
+      input.value = 'Test'
+
+      const formInjector = (form as unknown as { injector: Injector }).injector
+      const formService = formInjector.getInstance(FormService)
+
+      form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }))
+      await sleepAsync(50)
+      expect(formService.submitError.getValue()).toBeInstanceOf(Error)
+
+      shouldThrow = false
+      form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }))
+      await sleepAsync(50)
+      expect(formService.submitError.getValue()).toBeUndefined()
+      expect(formService.isSubmitting.getValue()).toBe(true)
+
+      resolveSubmit!()
+      await sleepAsync(50)
+      expect(formService.isSubmitting.getValue()).toBe(false)
+    })
+  })
+
+  it('should set inert on form element when disableOnSubmit is true during async submit', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      let resolveSubmit: () => void
+      const submitPromise = new Promise<void>((resolve) => {
+        resolveSubmit = resolve
+      })
+
+      type FormData = { name: string }
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <Form<FormData>
+            onSubmit={() => submitPromise}
+            disableOnSubmit
+            validate={(data): data is FormData => {
+              const d = data as Record<string, unknown>
+              return typeof d.name === 'string'
+            }}
+          >
+            <input name="name" type="text" />
+            <button type="submit">Submit</button>
+          </Form>
+        ),
+      })
+
+      await sleepAsync(50)
+
+      const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
+      const input = form.querySelector('input[name="name"]') as HTMLInputElement
+      input.value = 'Test'
+
+      expect(form.inert).toBeFalsy()
+
+      const submitEvent = new Event('submit', { bubbles: true, cancelable: true })
+      form.dispatchEvent(submitEvent)
+
+      await sleepAsync(50)
+      expect(form.inert).toBe(true)
+
+      resolveSubmit!()
+      await sleepAsync(50)
+      expect(form.inert).toBe(false)
+    })
+  })
+
+  it('should not set inert when disableOnSubmit is not provided', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      let resolveSubmit: () => void
+      const submitPromise = new Promise<void>((resolve) => {
+        resolveSubmit = resolve
+      })
+
+      type FormData = { name: string }
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <Form<FormData>
+            onSubmit={() => submitPromise}
+            validate={(data): data is FormData => {
+              const d = data as Record<string, unknown>
+              return typeof d.name === 'string'
+            }}
+          >
+            <input name="name" type="text" />
+            <button type="submit">Submit</button>
+          </Form>
+        ),
+      })
+
+      await sleepAsync(50)
+
+      const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
+      const input = form.querySelector('input[name="name"]') as HTMLInputElement
+      input.value = 'Test'
+
+      const submitEvent = new Event('submit', { bubbles: true, cancelable: true })
+      form.dispatchEvent(submitEvent)
+
+      await sleepAsync(50)
+      expect(form.inert).toBeFalsy()
+
+      resolveSubmit!()
+      await sleepAsync(50)
+    })
+  })
+
+  it('should remove inert even if onSubmit throws when disableOnSubmit is true', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      type FormData = { name: string }
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <Form<FormData>
+            onSubmit={async () => {
+              throw new Error('Submit failed')
+            }}
+            disableOnSubmit
+            validate={(data): data is FormData => {
+              const d = data as Record<string, unknown>
+              return typeof d.name === 'string'
+            }}
+          >
+            <input name="name" type="text" />
+            <button type="submit">Submit</button>
+          </Form>
+        ),
+      })
+
+      await sleepAsync(50)
+
+      const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
+      const input = form.querySelector('input[name="name"]') as HTMLInputElement
+      input.value = 'Test'
+
+      const submitEvent = new Event('submit', { bubbles: true, cancelable: true })
+      form.dispatchEvent(submitEvent)
+
+      await sleepAsync(50)
+      expect(form.inert).toBe(false)
+      const formInjector = (form as unknown as { injector: Injector }).injector
+      const formService = formInjector.getInstance(FormService)
+      expect(formService.isSubmitting.getValue()).toBe(false)
+    })
+  })
 })

package/src/components/form.tsx

@@ -29,6 +29,10 @@ export class FormService<T> {
 
   public inputs = new Set<HTMLInputElement>()
 
+  public isSubmitting = new ObservableValue<boolean>(false)
+
+  public submitError = new ObservableValue<unknown>(undefined)
+
   public setFieldState = (key: keyof T, validationResult: InputValidationResult, validity: ValidityState) => {
     this.fieldErrors.setValue({ ...this.fieldErrors.getValue(), [key]: { validationResult, validity } })
   }
@@ -37,13 +41,17 @@ export class FormService<T> {
     this.validatedFormData[Symbol.dispose]()
     this.rawFormData[Symbol.dispose]()
     this.validationResult[Symbol.dispose]()
+    this.fieldErrors[Symbol.dispose]()
+    this.isSubmitting[Symbol.dispose]()
+    this.submitError[Symbol.dispose]()
   }
 }
 
 type FormProps<T> = {
-  onSubmit: (formData: T) => void
+  onSubmit: (formData: T) => void | Promise<void>
   onReset?: () => void
-  validate: (formData: any) => formData is T
+  validate: (formData: unknown) => formData is T
+  disableOnSubmit?: boolean
 } & PartialElement<Omit<HTMLFormElement, 'onsubmit' | 'onchange' | 'onreset'>>
 
 export const Form: <T>(props: FormProps<T>, children: ChildrenList) => JSX.Element = Shade({
@@ -61,13 +69,14 @@ export const Form: <T>(props: FormProps<T>, children: ChildrenList) => JSX.Eleme
     // `injector` setter defined on the Shade base class.
     useHostProps({ injector: formInjector })
 
-    const changeHandler = (ev: Event, shouldSubmit?: boolean) => {
+    const changeHandler = async (ev: Event, shouldSubmit?: boolean) => {
       formService.inputs.forEach((i) => {
         const e = document.createEvent('FocusEvent')
         e.initEvent('blur', true, true)
         i.dispatchEvent(e)
       })
-      const formData = Object.fromEntries(new FormData(ev.currentTarget as HTMLFormElement).entries())
+      const formElement = ev.currentTarget as HTMLFormElement
+      const formData = Object.fromEntries(new FormData(formElement).entries())
       formService.rawFormData.setValue(formData)
       const currentFieldErrors = formService.fieldErrors.getValue()
 
@@ -80,7 +89,21 @@ export const Form: <T>(props: FormProps<T>, children: ChildrenList) => JSX.Eleme
         formService.validationResult.setValue({ isValid: true })
         formService.validatedFormData.setValue(formData)
         if (shouldSubmit) {
-          props.onSubmit(formData)
+          formService.isSubmitting.setValue(true)
+          formService.submitError.setValue(undefined)
+          if (props.disableOnSubmit) {
+            formElement.inert = true
+          }
+          try {
+            await props.onSubmit(formData)
+          } catch (error) {
+            formService.submitError.setValue(error)
+          } finally {
+            formService.isSubmitting.setValue(false)
+            if (props.disableOnSubmit) {
+              formElement.inert = false
+            }
+          }
         }
       } else {
         formService.validationResult.setValue({ isValid: false, reason: 'validation-failed' })
@@ -89,14 +112,14 @@ export const Form: <T>(props: FormProps<T>, children: ChildrenList) => JSX.Eleme
 
     useHostProps({
       oninvalid: (ev: Event) => {
-        changeHandler(ev)
+        void changeHandler(ev)
       },
       onsubmit: (ev: SubmitEvent) => {
         ev.preventDefault()
-        changeHandler(ev, true)
+        void changeHandler(ev, true)
       },
       onchange: (ev: Event) => {
-        changeHandler(ev)
+        void changeHandler(ev)
       },
       onreset: () => {
         formService.rawFormData.setValue(null)

package/src/components/index.ts

@@ -29,6 +29,7 @@ export * from './inputs/index.js'
 export * from './linear-progress.js'
 export * from './list/index.js'
 export * from './loader.js'
+export * from './markdown/index.js'
 export * from './menu/index.js'
 export * from './modal.js'
 export * from './noty-list.js'

package/src/components/markdown/index.ts

@@ -0,0 +1,4 @@
+export * from './markdown-parser.js'
+export * from './markdown-display.js'
+export * from './markdown-input.js'
+export * from './markdown-editor.js'

package/src/components/markdown/markdown-display.spec.tsx

@@ -0,0 +1,243 @@
+import { Injector } from '@furystack/inject'
+import { createComponent, initializeShadeRoot } from '@furystack/shades'
+import { sleepAsync, usingAsync } from '@furystack/utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { MarkdownDisplay } from './markdown-display.js'
+
+describe('MarkdownDisplay', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+    vi.restoreAllMocks()
+  })
+
+  it('should render with shadow DOM', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <MarkdownDisplay content="Hello" />,
+      })
+
+      await sleepAsync(50)
+
+      const el = document.querySelector('shade-markdown-display')
+      expect(el).not.toBeNull()
+    })
+  })
+
+  it('should render a heading', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <MarkdownDisplay content="# Hello World" />,
+      })
+
+      await sleepAsync(50)
+
+      const typography = document.querySelector('shade-markdown-display shade-typography')
+      expect(typography).not.toBeNull()
+      expect(typography?.getAttribute('data-variant')).toBe('h1')
+      expect(typography?.textContent).toContain('Hello World')
+    })
+  })
+
+  it('should render a paragraph', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <MarkdownDisplay content="Just a paragraph." />,
+      })
+
+      await sleepAsync(50)
+
+      const typography = document.querySelector('shade-markdown-display shade-typography[data-variant="body1"]')
+      expect(typography).not.toBeNull()
+      expect(typography?.textContent).toContain('Just a paragraph.')
+    })
+  })
+
+  it('should render a code block', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <MarkdownDisplay content={'```js\nconsole.log("hi")\n```'} />,
+      })
+
+      await sleepAsync(50)
+
+      const codeBlock = document.querySelector('shade-markdown-display .md-code-block')
+      expect(codeBlock).not.toBeNull()
+      expect(codeBlock?.textContent).toContain('console.log("hi")')
+    })
+  })
+
+  it('should render a list', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <MarkdownDisplay content={'- Item A\n- Item B'} />,
+      })
+
+      await sleepAsync(50)
+
+      const list = document.querySelector('shade-markdown-display ul')
+      expect(list).not.toBeNull()
+      const items = document.querySelectorAll('shade-markdown-display .md-list-item')
+      expect(items.length).toBe(2)
+    })
+  })
+
+  it('should render checkboxes as disabled when readOnly (default)', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <MarkdownDisplay content="- [ ] Task" />,
+      })
+
+      await sleepAsync(50)
+
+      const checkbox = document.querySelector('shade-markdown-display shade-checkbox')
+      expect(checkbox).not.toBeNull()
+      expect(checkbox?.hasAttribute('data-disabled')).toBe(true)
+    })
+  })
+
+  it('should render checkboxes as enabled when readOnly is false', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const onChange = vi.fn()
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <MarkdownDisplay content="- [ ] Task" readOnly={false} onChange={onChange} />,
+      })
+
+      await sleepAsync(50)
+
+      const checkbox = document.querySelector('shade-markdown-display shade-checkbox')
+      expect(checkbox).not.toBeNull()
+      expect(checkbox?.hasAttribute('data-disabled')).toBe(false)
+
+      const input = checkbox?.querySelector('input[type="checkbox"]') as HTMLInputElement
+      expect(input).not.toBeNull()
+      input.click()
+
+      await sleepAsync(50)
+
+      expect(onChange).toHaveBeenCalledOnce()
+      expect(onChange).toHaveBeenCalledWith('- [x] Task')
+    })
+  })
+
+  it('should render a blockquote', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <MarkdownDisplay content="> Quote text" />,
+      })
+
+      await sleepAsync(50)
+
+      const bq = document.querySelector('shade-markdown-display .md-blockquote')
+      expect(bq).not.toBeNull()
+      expect(bq?.textContent).toContain('Quote text')
+    })
+  })
+
+  it('should render a horizontal rule', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <MarkdownDisplay content="---" />,
+      })
+
+      await sleepAsync(50)
+
+      const hr = document.querySelector('shade-markdown-display .md-hr')
+      expect(hr).not.toBeNull()
+    })
+  })
+
+  it('should render links', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <MarkdownDisplay content="[Click here](https://example.com)" />,
+      })
+
+      await sleepAsync(50)
+
+      const link = document.querySelector('shade-markdown-display .md-link') as HTMLAnchorElement
+      expect(link).not.toBeNull()
+      expect(link?.href).toContain('example.com')
+      expect(link?.textContent).toContain('Click here')
+    })
+  })
+
+  it('should render images', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <MarkdownDisplay content="![alt text](image.png)" />,
+      })
+
+      await sleepAsync(50)
+
+      const img = document.querySelector('shade-markdown-display .md-image') as HTMLImageElement
+      expect(img).not.toBeNull()
+      expect(img?.alt).toBe('alt text')
+    })
+  })
+
+  it('should render empty for empty content', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <MarkdownDisplay content="" />,
+      })
+
+      await sleepAsync(50)
+
+      const root = document.querySelector('shade-markdown-display .md-root')
+      expect(root).not.toBeNull()
+      expect(root?.children.length).toBe(0)
+    })
+  })
+})