@furystack/shades-common-components 12.5.0 → 12.6.0

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

@@ -2,6 +2,7 @@ import { Injector } from '@furystack/inject'
 import { createComponent, flushUpdates, initializeShadeRoot } from '@furystack/shades'
 import { usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { Form } from '../form.js'
 import { MarkdownInput } from './markdown-input.js'
 
 describe('MarkdownInput', () => {
@@ -160,6 +161,147 @@ describe('MarkdownInput', () => {
     })
   })
 
+  it('should set name attribute on textarea', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <MarkdownInput value="" name="description" />,
+      })
+
+      await flushUpdates()
+
+      const textarea = document.querySelector('shade-markdown-input textarea') as HTMLTextAreaElement
+      expect(textarea.name).toBe('description')
+    })
+  })
+
+  it('should set required attribute on textarea', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <MarkdownInput value="" required />,
+      })
+
+      await flushUpdates()
+
+      const textarea = document.querySelector('shade-markdown-input textarea') as HTMLTextAreaElement
+      expect(textarea.required).toBe(true)
+    })
+  })
+
+  it('should set data-invalid when required and value is empty', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <MarkdownInput value="" required />,
+      })
+
+      await flushUpdates()
+
+      const wrapper = document.querySelector('shade-markdown-input') as HTMLElement
+      expect(wrapper.hasAttribute('data-invalid')).toBe(true)
+    })
+  })
+
+  it('should not set data-invalid when required and value is provided', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <MarkdownInput value="some content" required />,
+      })
+
+      await flushUpdates()
+
+      const wrapper = document.querySelector('shade-markdown-input') as HTMLElement
+      expect(wrapper.hasAttribute('data-invalid')).toBe(false)
+    })
+  })
+
+  it('should show validation error message from getValidationResult', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <MarkdownInput
+            value="short"
+            getValidationResult={({ value }) =>
+              value.length < 10 ? { isValid: false, message: 'Too short' } : { isValid: true }
+            }
+          />
+        ),
+      })
+
+      await flushUpdates()
+
+      const wrapper = document.querySelector('shade-markdown-input') as HTMLElement
+      expect(wrapper.hasAttribute('data-invalid')).toBe(true)
+      expect(wrapper.textContent).toContain('Too short')
+    })
+  })
+
+  it('should show helper text from getHelperText', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <MarkdownInput value="" getHelperText={() => 'Write some markdown here'} />,
+      })
+
+      await flushUpdates()
+
+      const wrapper = document.querySelector('shade-markdown-input') as HTMLElement
+      expect(wrapper.textContent).toContain('Write some markdown here')
+    })
+  })
+
+  it('should render with validation inside a Form', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <Form onSubmit={() => {}} validate={(_data): _data is { content: string } => true}>
+            <MarkdownInput
+              value="short"
+              name="content"
+              getValidationResult={({ value }) =>
+                value.length < 10 ? { isValid: false, message: 'Too short' } : { isValid: true }
+              }
+            />
+          </Form>
+        ),
+      })
+
+      await flushUpdates()
+
+      const wrapper = document.querySelector('shade-markdown-input') as HTMLElement
+      expect(wrapper.hasAttribute('data-invalid')).toBe(true)
+      expect(wrapper.textContent).toContain('Too short')
+
+      const textarea = wrapper.querySelector('textarea') as HTMLTextAreaElement
+      expect(textarea.name).toBe('content')
+    })
+  })
+
   describe('image paste', () => {
     const createPasteEvent = (items: Array<{ type: string; file: File | null }>) => {
       const pasteEvent = new Event('paste', { bubbles: true, cancelable: true })

package/src/components/markdown/markdown-input.tsx

@@ -1,5 +1,7 @@
 import { Shade, createComponent } from '@furystack/shades'
 import { cssVariableTheme } from '../../services/css-variable-theme.js'
+import type { InputValidationResult } from '../inputs/input.js'
+import { FormService } from '../form.js'
 
 const DEFAULT_MAX_IMAGE_SIZE = 256 * 1024
 
@@ -20,6 +22,14 @@ export type MarkdownInputProps = {
   labelTitle?: string
   /** Number of visible text rows */
   rows?: number
+  /** Form field name for FormService integration */
+  name?: string
+  /** Whether the field is required */
+  required?: boolean
+  /** Custom validation callback */
+  getValidationResult?: (options: { value: string }) => InputValidationResult
+  /** Optional helper text callback */
+  getHelperText?: (options: { value: string; validationResult?: InputValidationResult }) => JSX.Element | string
 }
 
 /**
@@ -53,6 +63,11 @@ export const MarkdownInput = Shade<MarkdownInputProps>({
       color: cssVariableTheme.palette.primary.main,
     },
 
+    '&[data-invalid] label': {
+      borderColor: cssVariableTheme.palette.error.main,
+      color: cssVariableTheme.palette.error.main,
+    },
+
     '& textarea': {
       border: 'none',
       backgroundColor: 'transparent',
@@ -71,15 +86,61 @@ export const MarkdownInput = Shade<MarkdownInputProps>({
     '&:focus-within textarea': {
       boxShadow: `0px 3px 0px ${cssVariableTheme.palette.primary.main}`,
     },
+
+    '&[data-invalid]:focus-within textarea': {
+      boxShadow: `0px 3px 0px ${cssVariableTheme.palette.error.main}`,
+    },
+
+    '& .helperText': {
+      fontSize: cssVariableTheme.typography.fontSize.xs,
+      marginTop: '6px',
+      opacity: '0.85',
+      lineHeight: '1.4',
+    },
   },
-  render: ({ props, useHostProps, useRef }) => {
+  render: ({ props, injector, useDisposable, useHostProps, useRef }) => {
     const maxSize = props.maxImageSizeBytes ?? DEFAULT_MAX_IMAGE_SIZE
     const textareaRef = useRef<HTMLTextAreaElement>('textarea')
 
+    useDisposable('form-registration', () => {
+      const formService = injector.cachedSingletons.has(FormService) ? injector.getInstance(FormService) : null
+      if (formService) {
+        queueMicrotask(() => {
+          if (textareaRef.current) formService.inputs.add(textareaRef.current as unknown as HTMLInputElement)
+        })
+      }
+      return {
+        [Symbol.dispose]: () => {
+          if (textareaRef.current && formService)
+            formService.inputs.delete(textareaRef.current as unknown as HTMLInputElement)
+        },
+      }
+    })
+
+    const validationResult = props.getValidationResult?.({ value: props.value })
+    const isRequired = props.required && !props.value
+    const isInvalid = validationResult?.isValid === false || isRequired
+
+    if (injector.cachedSingletons.has(FormService) && props.name) {
+      const formService = injector.getInstance(FormService)
+      const fieldResult: InputValidationResult = isRequired
+        ? { isValid: false, message: 'Value is required' }
+        : validationResult || { isValid: true }
+      const validity = textareaRef.current?.validity ?? ({} as ValidityState)
+      formService.setFieldState(props.name as keyof unknown, fieldResult, validity)
+    }
+
     useHostProps({
       'data-disabled': props.disabled ? '' : undefined,
+      'data-invalid': isInvalid ? '' : undefined,
     })
 
+    const helperNode =
+      (validationResult?.isValid === false && validationResult?.message) ||
+      (isRequired && 'Value is required') ||
+      props.getHelperText?.({ value: props.value, validationResult }) ||
+      ''
+
     const handleInput = (ev: Event) => {
       const target = ev.target as HTMLTextAreaElement
       props.onValueChange?.(target.value)
@@ -129,6 +190,8 @@ export const MarkdownInput = Shade<MarkdownInputProps>({
         {props.labelTitle ? <span>{props.labelTitle}</span> : null}
         <textarea
           ref={textareaRef}
+          name={props.name}
+          required={props.required}
           value={props.value}
           oninput={handleInput}
           onpaste={handlePaste}
@@ -137,6 +200,7 @@ export const MarkdownInput = Shade<MarkdownInputProps>({
           placeholder={props.placeholder}
           rows={props.rows ?? 10}
         />
+        {helperNode ? <span className="helperText">{helperNode}</span> : null}
       </label>
     )
   },

package/src/components/suggest/index.spec.tsx

@@ -882,4 +882,87 @@ describe('Suggest', () => {
       })
     })
   })
+
+  describe('synchronous suggestions mode', () => {
+    it('should render with string[] suggestions', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onSelectSuggestion = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Suggest
+              defaultPrefix="🔍"
+              suggestions={['Apple', 'Banana', 'Cherry']}
+              onSelectSuggestion={onSelectSuggestion}
+            />
+          ),
+        })
+
+        await advanceTimers(50)
+
+        const suggest = document.querySelector('shade-suggest') as HTMLElement
+        expect(suggest).not.toBeNull()
+      })
+    })
+
+    it('should render input in sync mode', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onSelectSuggestion = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Suggest
+              defaultPrefix="🔍"
+              suggestions={['Apple', 'Banana', 'Cherry']}
+              onSelectSuggestion={onSelectSuggestion}
+            />
+          ),
+        })
+
+        await advanceTimers(50)
+
+        const suggest = document.querySelector('shade-suggest') as HTMLElement
+        const input = suggest?.querySelector('input')
+        expect(input).not.toBeNull()
+      })
+    })
+
+    it('should show filtered suggestions in sync mode', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onSelectSuggestion = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Suggest
+              defaultPrefix="🔍"
+              suggestions={['Apple', 'Apricot', 'Banana']}
+              onSelectSuggestion={onSelectSuggestion}
+            />
+          ),
+        })
+
+        await advanceTimers(50)
+
+        const suggest = document.querySelector('shade-suggest') as HTMLElement
+        const input = suggest?.querySelector('input') as HTMLInputElement
+
+        input.value = 'ap'
+        input.dispatchEvent(new KeyboardEvent('keyup', { key: 'p', bubbles: true }))
+
+        await advanceTimers(300)
+
+        const suggestionItems = suggest?.querySelectorAll('.suggestion-item')
+        expect(suggestionItems?.length).toBe(2)
+      })
+    })
+  })
 })

package/src/components/suggest/index.tsx

@@ -15,7 +15,7 @@ export * from './suggest-manager.js'
 export * from './suggestion-list.js'
 export * from './suggestion-result.js'
 
-export interface SuggestProps<T> {
+type SuggestAsyncProps<T> = {
   defaultPrefix: JSX.Element | string
   getEntries: (term: string) => Promise<T[]>
   getSuggestionEntry: (entry: T) => SuggestionResult
@@ -23,6 +23,20 @@ export interface SuggestProps<T> {
   style?: Partial<CSSStyleDeclaration>
 }
 
+type SuggestSyncProps = {
+  defaultPrefix: JSX.Element | string
+  /** Static list of string suggestions. Filtered client-side by the search term. When the term is empty, all suggestions are shown. */
+  suggestions: string[]
+  onSelectSuggestion: (entry: string) => void
+  style?: Partial<CSSStyleDeclaration>
+}
+
+export type SuggestProps<T> = SuggestAsyncProps<T> | SuggestSyncProps
+
+const isSyncProps = (props: SuggestProps<unknown>): props is SuggestSyncProps => {
+  return 'suggestions' in props
+}
+
 export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX.Element<any> = Shade<
   SuggestProps<any>
 >({
@@ -35,7 +49,24 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
     },
   },
   render: ({ props, injector, useDisposable, useRef, useHostProps, useObservable }) => {
-    const manager = useDisposable('manager', () => new SuggestManager(props.getEntries, props.getSuggestionEntry))
+    let getEntries: (term: string) => Promise<unknown[]>
+    let getSuggestionEntry: (entry: unknown) => SuggestionResult
+
+    if (isSyncProps(props)) {
+      const { suggestions } = props
+      getEntries = async (term: string) => {
+        const lower = term.toLowerCase()
+        return suggestions.filter((s) => s.toLowerCase().includes(lower))
+      }
+      getSuggestionEntry = (entry: unknown) => ({
+        element: <>{entry as string}</>,
+        score: 1,
+      })
+    } else {
+      ;({ getEntries, getSuggestionEntry } = props)
+    }
+
+    const manager = useDisposable('manager', () => new SuggestManager(getEntries, getSuggestionEntry))
     const wrapperRef = useRef<HTMLDivElement>('wrapper')
     const loaderRef = useRef<HTMLSpanElement>('loader')
 
@@ -65,7 +96,9 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
         })
       }
     })
-    useDisposable('onSelectSuggestion', () => manager.subscribe('onSelectSuggestion', props.onSelectSuggestion))
+    useDisposable('onSelectSuggestion', () =>
+      manager.subscribe('onSelectSuggestion', props.onSelectSuggestion as (entry: unknown) => void),
+    )
     return (
       <div
         ref={wrapperRef}

package/src/components/wizard/index.spec.tsx

@@ -72,13 +72,21 @@ describe('Wizard', () => {
   const renderWizard = async (
     steps: Array<(props: WizardStepProps, children: ChildrenList) => JSX.Element>,
     onFinish?: () => void,
+    options?: { stepLabels?: string[]; showProgress?: boolean },
   ) => {
     const injector = new Injector()
     const root = document.getElementById('root')!
     initializeShadeRoot({
       injector,
       rootElement: root,
-      jsxElement: <Wizard steps={steps} onFinish={onFinish} />,
+      jsxElement: (
+        <Wizard
+          steps={steps}
+          onFinish={onFinish}
+          stepLabels={options?.stepLabels}
+          showProgress={options?.showProgress}
+        />
+      ),
     })
     await flushUpdates()
 
@@ -215,6 +223,115 @@ describe('Wizard', () => {
     })
   })
 
+  describe('step indicator', () => {
+    it('should not render step indicator when stepLabels is not provided', async () => {
+      await usingAsync(await renderWizard([Step1, Step2]), async ({ wizard }) => {
+        const indicator = wizard.querySelector('[data-testid="wizard-step-indicator"]')
+        expect(indicator).toBeNull()
+      })
+    })
+
+    it('should render step indicator when stepLabels is provided', async () => {
+      await usingAsync(
+        await renderWizard([Step1, Step2, Step3], undefined, {
+          stepLabels: ['First', 'Second', 'Third'],
+        }),
+        async ({ wizard }) => {
+          const indicator = wizard.querySelector('[data-testid="wizard-step-indicator"]')
+          expect(indicator).toBeTruthy()
+
+          const circles = indicator?.querySelectorAll('.wizard-step-circle')
+          expect(circles?.length).toBe(3)
+        },
+      )
+    })
+
+    it('should show step labels', async () => {
+      await usingAsync(
+        await renderWizard([Step1, Step2], undefined, {
+          stepLabels: ['Setup', 'Confirm'],
+        }),
+        async ({ wizard }) => {
+          const labels = wizard.querySelectorAll('.wizard-step-label')
+          expect(labels[0]?.textContent).toBe('Setup')
+          expect(labels[1]?.textContent).toBe('Confirm')
+        },
+      )
+    })
+
+    it('should mark the current step as active', async () => {
+      await usingAsync(
+        await renderWizard([Step1, Step2, Step3], undefined, {
+          stepLabels: ['A', 'B', 'C'],
+        }),
+        async ({ wizard }) => {
+          const circles = wizard.querySelectorAll('.wizard-step-circle')
+          expect(circles[0]?.hasAttribute('data-active')).toBe(true)
+          expect(circles[1]?.hasAttribute('data-active')).toBe(false)
+        },
+      )
+    })
+
+    it('should update active step on navigation', async () => {
+      await usingAsync(
+        await renderWizard([Step1, Step2, Step3], undefined, {
+          stepLabels: ['A', 'B', 'C'],
+        }),
+        async ({ wizard, clickNext }) => {
+          await clickNext()
+          const circles = wizard.querySelectorAll('.wizard-step-circle')
+          expect(circles[0]?.hasAttribute('data-completed')).toBe(true)
+          expect(circles[1]?.hasAttribute('data-active')).toBe(true)
+          expect(circles[2]?.hasAttribute('data-active')).toBe(false)
+        },
+      )
+    })
+  })
+
+  describe('progress bar', () => {
+    it('should not render progress bar when showProgress is false', async () => {
+      await usingAsync(await renderWizard([Step1, Step2]), async ({ wizard }) => {
+        const progressBar = wizard.querySelector('[data-testid="wizard-progress-bar"]')
+        expect(progressBar).toBeNull()
+      })
+    })
+
+    it('should render progress bar when showProgress is true', async () => {
+      await usingAsync(
+        await renderWizard([Step1, Step2, Step3], undefined, { showProgress: true }),
+        async ({ wizard }) => {
+          const progressBar = wizard.querySelector('[data-testid="wizard-progress-bar"]')
+          expect(progressBar).toBeTruthy()
+        },
+      )
+    })
+
+    it('should start at 0% on first step', async () => {
+      await usingAsync(
+        await renderWizard([Step1, Step2, Step3], undefined, { showProgress: true }),
+        async ({ wizard }) => {
+          const fill = wizard.querySelector('.wizard-progress-fill') as HTMLElement
+          expect(fill?.style.width).toBe('0%')
+        },
+      )
+    })
+
+    it('should update progress on navigation', async () => {
+      await usingAsync(
+        await renderWizard([Step1, Step2, Step3], undefined, { showProgress: true }),
+        async ({ wizard, clickNext }) => {
+          await clickNext()
+          const fill = wizard.querySelector('.wizard-progress-fill') as HTMLElement
+          expect(fill?.style.width).toBe('50%')
+
+          await clickNext()
+          const fill2 = wizard.querySelector('.wizard-progress-fill') as HTMLElement
+          expect(fill2?.style.width).toBe('100%')
+        },
+      )
+    })
+  })
+
   describe('Paper container', () => {
     it('should render step inside a Paper component', async () => {
       await usingAsync(await renderWizard([Step1]), async ({ wizard }) => {