@furystack/shades-common-components 12.5.0 → 12.7.0

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

@@ -139,4 +139,265 @@ describe('MarkdownEditor', () => {
       expect(heading?.textContent).toContain('Test Content')
     })
   })
+
+  describe('form integration', () => {
+    it('should render a label when labelTitle is provided', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <MarkdownEditor value="" labelTitle="Description" />,
+        })
+
+        await flushUpdates()
+
+        const label = document.querySelector('shade-markdown-editor .md-editor-label')
+        expect(label).not.toBeNull()
+        expect(label?.textContent).toBe('Description')
+      })
+    })
+
+    it('should not render a label when labelTitle is not provided', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <MarkdownEditor value="" />,
+        })
+
+        await flushUpdates()
+
+        const label = document.querySelector('shade-markdown-editor .md-editor-label')
+        expect(label).toBeNull()
+      })
+    })
+
+    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: <MarkdownEditor value="" required />,
+        })
+
+        await flushUpdates()
+
+        const editor = document.querySelector('shade-markdown-editor') as HTMLElement
+        expect(editor.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: <MarkdownEditor value="some content" required />,
+        })
+
+        await flushUpdates()
+
+        const editor = document.querySelector('shade-markdown-editor') as HTMLElement
+        expect(editor.hasAttribute('data-invalid')).toBe(false)
+      })
+    })
+
+    it('should show "Value is required" helper text when required and empty', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <MarkdownEditor value="" required />,
+        })
+
+        await flushUpdates()
+
+        const helperText = document.querySelector('shade-markdown-editor .md-editor-helperText')
+        expect(helperText).not.toBeNull()
+        expect(helperText?.textContent).toBe('Value is required')
+      })
+    })
+
+    it('should set data-invalid when getValidationResult returns invalid', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <MarkdownEditor
+              value="short"
+              getValidationResult={({ value }) =>
+                value.length < 10 ? { isValid: false, message: 'Too short' } : { isValid: true }
+              }
+            />
+          ),
+        })
+
+        await flushUpdates()
+
+        const editor = document.querySelector('shade-markdown-editor') as HTMLElement
+        expect(editor.hasAttribute('data-invalid')).toBe(true)
+        expect(editor.textContent).toContain('Too short')
+      })
+    })
+
+    it('should not set data-invalid when getValidationResult returns valid', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <MarkdownEditor
+              value="long enough content"
+              getValidationResult={({ value }) =>
+                value.length < 10 ? { isValid: false, message: 'Too short' } : { isValid: true }
+              }
+            />
+          ),
+        })
+
+        await flushUpdates()
+
+        const editor = document.querySelector('shade-markdown-editor') as HTMLElement
+        expect(editor.hasAttribute('data-invalid')).toBe(false)
+      })
+    })
+
+    it('should display helper text from getHelperText', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <MarkdownEditor value="" getHelperText={() => 'Enter your description'} />,
+        })
+
+        await flushUpdates()
+
+        const helperText = document.querySelector('shade-markdown-editor .md-editor-helperText')
+        expect(helperText).not.toBeNull()
+        expect(helperText?.textContent).toBe('Enter your description')
+      })
+    })
+
+    it('should forward name prop to the inner textarea', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <MarkdownEditor value="" name="description" />,
+        })
+
+        await flushUpdates()
+
+        const textarea = document.querySelector('shade-markdown-editor textarea') as HTMLTextAreaElement
+        expect(textarea.name).toBe('description')
+      })
+    })
+
+    it('should forward required prop to the inner textarea', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <MarkdownEditor value="content" required />,
+        })
+
+        await flushUpdates()
+
+        const textarea = document.querySelector('shade-markdown-editor textarea') as HTMLTextAreaElement
+        expect(textarea.required).toBe(true)
+      })
+    })
+
+    it('should forward disabled prop to the inner textarea', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <MarkdownEditor value="" disabled />,
+        })
+
+        await flushUpdates()
+
+        const textarea = document.querySelector('shade-markdown-editor textarea') as HTMLTextAreaElement
+        expect(textarea.disabled).toBe(true)
+      })
+    })
+
+    it('should forward placeholder prop to the inner textarea', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <MarkdownEditor value="" placeholder="Type here..." />,
+        })
+
+        await flushUpdates()
+
+        const textarea = document.querySelector('shade-markdown-editor textarea') as HTMLTextAreaElement
+        expect(textarea.placeholder).toBe('Type here...')
+      })
+    })
+
+    it('should forward rows prop to the inner textarea', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <MarkdownEditor value="" rows={5} />,
+        })
+
+        await flushUpdates()
+
+        const textarea = document.querySelector('shade-markdown-editor textarea') as HTMLTextAreaElement
+        expect(textarea.rows).toBe(5)
+      })
+    })
+
+    it('should set hideChrome on the inner MarkdownInput', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <MarkdownEditor value="" labelTitle="My Label" />,
+        })
+
+        await flushUpdates()
+
+        const editorLabel = document.querySelector('shade-markdown-editor .md-editor-label')
+        expect(editorLabel?.textContent).toBe('My Label')
+
+        const inputLabel = document.querySelector('shade-markdown-editor shade-markdown-input label > span')
+        expect(inputLabel).toBeNull()
+      })
+    })
+  })
 })

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

@@ -2,7 +2,8 @@ import { Shade, createComponent } from '@furystack/shades'
 import { cssVariableTheme } from '../../services/css-variable-theme.js'
 import { Tabs } from '../tabs.js'
 import { MarkdownDisplay } from './markdown-display.js'
-import { MarkdownInput } from './markdown-input.js'
+import { MarkdownInput, type MarkdownInputProps } from './markdown-input.js'
+import { resolveValidationState } from './markdown-validation.js'
 
 export type MarkdownEditorLayout = 'side-by-side' | 'tabs' | 'above-below'
 
@@ -19,7 +20,10 @@ export type MarkdownEditorProps = {
   readOnly?: boolean
   /** Inline styles applied to the host element */
   style?: Partial<CSSStyleDeclaration>
-}
+} & Pick<
+  MarkdownInputProps,
+  'name' | 'required' | 'labelTitle' | 'disabled' | 'placeholder' | 'rows' | 'getValidationResult' | 'getHelperText'
+>
 
 type TabType = 'edit' | 'preview'
 
@@ -32,11 +36,40 @@ export const MarkdownEditor = Shade<MarkdownEditorProps>({
   css: {
     display: 'flex',
     flexDirection: 'column',
-    border: `1px solid ${cssVariableTheme.action.subtleBorder}`,
-    borderRadius: cssVariableTheme.shape.borderRadius.md,
-    overflow: 'hidden',
     minHeight: '0',
 
+    '& .md-editor-label': {
+      fontSize: cssVariableTheme.typography.fontSize.xs,
+      color: cssVariableTheme.text.secondary,
+      padding: `0 0 ${cssVariableTheme.spacing.sm} 0`,
+      transition: `color ${cssVariableTheme.transitions.duration.slow} ${cssVariableTheme.transitions.easing.default}`,
+    },
+
+    '&[data-invalid] .md-editor-label': {
+      color: cssVariableTheme.palette.error.main,
+    },
+
+    '& .md-editor-frame': {
+      display: 'flex',
+      flexDirection: 'column',
+      border: `1px solid ${cssVariableTheme.action.subtleBorder}`,
+      borderRadius: cssVariableTheme.shape.borderRadius.md,
+      overflow: 'hidden',
+      flex: '1',
+      minHeight: '0',
+    },
+
+    '&[data-invalid] .md-editor-frame': {
+      borderColor: cssVariableTheme.palette.error.main,
+    },
+
+    '& .md-editor-helperText': {
+      fontSize: cssVariableTheme.typography.fontSize.xs,
+      padding: `${cssVariableTheme.spacing.sm} 0 0 0`,
+      opacity: '0.85',
+      lineHeight: '1.4',
+    },
+
     '& .md-editor-split': {
       display: 'flex',
       flex: '1',
@@ -119,8 +152,11 @@ export const MarkdownEditor = Shade<MarkdownEditorProps>({
   render: ({ props, useState, useHostProps }) => {
     const layout = props.layout ?? 'side-by-side'
 
+    const { isInvalid, helperNode } = resolveValidationState(props)
+
     useHostProps({
       ...(props.style ? { style: props.style as Record<string, string> } : {}),
+      'data-invalid': isInvalid ? '' : undefined,
     })
 
     const [activeTab, setActiveTab] = useState<TabType>('activeTab', 'edit')
@@ -131,13 +167,22 @@ export const MarkdownEditor = Shade<MarkdownEditorProps>({
         onValueChange={props.onValueChange}
         maxImageSizeBytes={props.maxImageSizeBytes}
         readOnly={props.readOnly}
+        name={props.name}
+        required={props.required}
+        disabled={props.disabled}
+        placeholder={props.placeholder}
+        rows={props.rows}
+        getValidationResult={props.getValidationResult}
+        hideChrome
       />
     )
 
     const previewPane = <MarkdownDisplay content={props.value} readOnly={false} onChange={props.onValueChange} />
 
+    let content: JSX.Element
+
     if (layout === 'tabs') {
-      return (
+      content = (
         <Tabs
           activeKey={activeTab}
           onTabChange={(key) => setActiveTab(key as TabType)}
@@ -155,13 +200,21 @@ export const MarkdownEditor = Shade<MarkdownEditorProps>({
           ]}
         />
       )
+    } else {
+      content = (
+        <div className="md-editor-split" data-layout={layout}>
+          <div className="md-editor-pane md-editor-pane-input">{inputPane}</div>
+          <div className="md-editor-pane md-editor-pane-preview">{previewPane}</div>
+        </div>
+      )
     }
 
     return (
-      <div className="md-editor-split" data-layout={layout}>
-        <div className="md-editor-pane md-editor-pane-input">{inputPane}</div>
-        <div className="md-editor-pane md-editor-pane-preview">{previewPane}</div>
-      </div>
+      <>
+        {props.labelTitle ? <span className="md-editor-label">{props.labelTitle}</span> : null}
+        <div className="md-editor-frame">{content}</div>
+        {helperNode ? <span className="md-editor-helperText">{helperNode}</span> : null}
+      </>
     )
   },
 })

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,210 @@ 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')
+    })
+  })
+
+  describe('hideChrome', () => {
+    it('should suppress the label when hideChrome is true', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <MarkdownInput value="" labelTitle="My Label" hideChrome />,
+        })
+
+        await flushUpdates()
+
+        const wrapper = document.querySelector('shade-markdown-input') as HTMLElement
+        const spans = wrapper.querySelectorAll('label > span')
+        const labelSpan = Array.from(spans).find((s) => s.textContent === 'My Label')
+        expect(labelSpan).toBeUndefined()
+      })
+    })
+
+    it('should suppress the helper text when hideChrome is true', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <MarkdownInput
+              value="short"
+              hideChrome
+              getValidationResult={({ value }) =>
+                value.length < 10 ? { isValid: false, message: 'Too short' } : { isValid: true }
+              }
+            />
+          ),
+        })
+
+        await flushUpdates()
+
+        const helperText = document.querySelector('shade-markdown-input .helperText')
+        expect(helperText).toBeNull()
+      })
+    })
+
+    it('should still set data-invalid when hideChrome is true', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <MarkdownInput value="" required hideChrome />,
+        })
+
+        await flushUpdates()
+
+        const wrapper = document.querySelector('shade-markdown-input') as HTMLElement
+        expect(wrapper.hasAttribute('data-invalid')).toBe(true)
+      })
+    })
+  })
+
+  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 })