@furystack/shades-common-components 12.1.0 → 12.3.0

package/src/components/icons/icon-types.ts

@@ -8,6 +8,9 @@ export type IconPath = {
   fillRule?: 'evenodd' | 'nonzero'
 }
 
+/** Category for grouping icons in galleries */
+export type IconCategory = 'Actions' | 'Navigation' | 'Status' | 'Content' | 'UI' | 'Common'
+
 /**
  * Defines an icon as a set of SVG paths with rendering metadata.
  * Icons are lightweight objects containing only path data -- no embedded SVG markup.
@@ -45,4 +48,13 @@ export type IconDefinition = {
    * @default 2
    */
   strokeWidth?: number
+
+  /** Human-readable display name (e.g., "Check Circle", "Arrow Left") */
+  name?: string
+  /** Short description of the icon's intended use */
+  description?: string
+  /** Search keywords for filtering (e.g., ['dismiss', 'cancel', 'x'] for close) */
+  keywords?: string[]
+  /** Category for grouping in galleries */
+  category?: IconCategory
 }

package/src/components/icons/index.ts

@@ -1,4 +1,4 @@
-export type { IconDefinition, IconPath } from './icon-types.js'
+export type { IconCategory, IconDefinition, IconPath } from './icon-types.js'
 export { Icon } from './icon.js'
 export type { IconProps } from './icon.js'
 export * as icons from './icon-definitions.js'

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)
+    })
+  })
+})

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

@@ -0,0 +1,202 @@
+import { Shade, createComponent } from '@furystack/shades'
+import { cssVariableTheme } from '../../services/css-variable-theme.js'
+import { Checkbox } from '../inputs/checkbox.js'
+import { Typography } from '../typography.js'
+import type { InlineNode, MarkdownNode } from './markdown-parser.js'
+import { parseMarkdown, toggleCheckbox } from './markdown-parser.js'
+
+export type MarkdownDisplayProps = {
+  /** The raw Markdown string to render */
+  content: string
+  /** When false, checkboxes can be toggled. Defaults to true. */
+  readOnly?: boolean
+  /** Called with the updated Markdown string when a checkbox is toggled */
+  onChange?: (newContent: string) => void
+}
+
+const renderInline = (nodes: InlineNode[]): JSX.Element => {
+  return (
+    <>
+      {nodes.map((node) => {
+        switch (node.type) {
+          case 'text':
+            return <>{node.content}</>
+          case 'bold':
+            return <strong>{renderInline(node.children)}</strong>
+          case 'italic':
+            return <em>{renderInline(node.children)}</em>
+          case 'code':
+            return <code className="md-inline-code">{node.content}</code>
+          case 'link':
+            return (
+              <a className="md-link" href={node.href} target="_blank" rel="noopener noreferrer">
+                {renderInline(node.children)}
+              </a>
+            )
+          case 'image':
+            return <img className="md-image" src={node.src} alt={node.alt} />
+          default:
+            return <></>
+        }
+      })}
+    </>
+  )
+}
+
+const variantForLevel = (level: 1 | 2 | 3 | 4 | 5 | 6) => {
+  const map = { 1: 'h1', 2: 'h2', 3: 'h3', 4: 'h4', 5: 'h5', 6: 'h6' } as const
+  return map[level]
+}
+
+const renderBlock = (
+  node: MarkdownNode,
+  _index: number,
+  options: { content: string; readOnly: boolean; onChange?: (newContent: string) => void },
+): JSX.Element => {
+  switch (node.type) {
+    case 'heading':
+      return <Typography variant={variantForLevel(node.level)}>{renderInline(node.children)}</Typography>
+    case 'paragraph':
+      return <Typography variant="body1">{renderInline(node.children)}</Typography>
+    case 'codeBlock':
+      return (
+        <pre className="md-code-block" data-language={node.language || undefined}>
+          <code>{node.content}</code>
+        </pre>
+      )
+    case 'blockquote':
+      return (
+        <blockquote className="md-blockquote">
+          {node.children.map((child, i) => renderBlock(child, i, options))}
+        </blockquote>
+      )
+    case 'horizontalRule':
+      return <hr className="md-hr" />
+    case 'list': {
+      const listItems = node.items.map((item) => {
+        if (item.checkbox !== undefined) {
+          const handleChange = () => {
+            if (!options.readOnly && options.onChange) {
+              options.onChange(toggleCheckbox(options.content, item.sourceLineIndex))
+            }
+          }
+          return (
+            <li className="md-list-item md-checkbox-item" data-source-line={String(item.sourceLineIndex)}>
+              <Checkbox checked={item.checkbox === 'checked'} disabled={options.readOnly} onchange={handleChange} />
+              <span className="md-checkbox-label">{renderInline(item.children)}</span>
+            </li>
+          )
+        }
+        return <li className="md-list-item">{renderInline(item.children)}</li>
+      })
+      if (node.ordered) {
+        return <ol className="md-list">{listItems}</ol>
+      }
+      return <ul className="md-list">{listItems}</ul>
+    }
+    default:
+      return <></>
+  }
+}
+
+/**
+ * Renders a Markdown string using FuryStack Shades components.
+ * Supports headings, paragraphs, lists, checkboxes, code blocks,
+ * blockquotes, images, links, and horizontal rules.
+ */
+export const MarkdownDisplay = Shade<MarkdownDisplayProps>({
+  shadowDomName: 'shade-markdown-display',
+  css: {
+    display: 'block',
+    fontFamily: cssVariableTheme.typography.fontFamily,
+    color: cssVariableTheme.text.primary,
+    lineHeight: cssVariableTheme.typography.lineHeight.relaxed,
+
+    '& .md-inline-code': {
+      fontFamily: 'monospace',
+      backgroundColor: cssVariableTheme.action.hoverBackground,
+      padding: '2px 6px',
+      borderRadius: cssVariableTheme.shape.borderRadius.xs,
+      fontSize: '0.9em',
+    },
+
+    '& .md-code-block': {
+      fontFamily: 'monospace',
+      backgroundColor: cssVariableTheme.background.default,
+      border: `1px solid ${cssVariableTheme.action.subtleBorder}`,
+      borderRadius: cssVariableTheme.shape.borderRadius.md,
+      padding: cssVariableTheme.spacing.md,
+      overflow: 'auto',
+      fontSize: cssVariableTheme.typography.fontSize.sm,
+      margin: `${cssVariableTheme.spacing.sm} 0`,
+    },
+
+    '& .md-code-block code': {
+      font: 'inherit',
+      whiteSpace: 'pre',
+    },
+
+    '& .md-blockquote': {
+      borderLeft: `4px solid ${cssVariableTheme.palette.primary.main}`,
+      margin: `${cssVariableTheme.spacing.sm} 0`,
+      padding: `${cssVariableTheme.spacing.sm} ${cssVariableTheme.spacing.md}`,
+      color: cssVariableTheme.text.secondary,
+    },
+
+    '& .md-link': {
+      color: cssVariableTheme.palette.primary.main,
+      textDecoration: 'none',
+    },
+    '& .md-link:hover': {
+      textDecoration: 'underline',
+    },
+
+    '& .md-image': {
+      maxWidth: '100%',
+      borderRadius: cssVariableTheme.shape.borderRadius.md,
+    },
+
+    '& .md-hr': {
+      border: 'none',
+      borderTop: `1px solid ${cssVariableTheme.divider}`,
+      margin: `${cssVariableTheme.spacing.md} 0`,
+    },
+
+    '& .md-list': {
+      paddingLeft: cssVariableTheme.spacing.xl,
+      margin: `${cssVariableTheme.spacing.sm} 0`,
+    },
+
+    '& .md-list-item': {
+      marginBottom: cssVariableTheme.spacing.xs,
+      fontSize: cssVariableTheme.typography.fontSize.md,
+    },
+
+    '& .md-checkbox-item': {
+      listStyle: 'none',
+      display: 'flex',
+      alignItems: 'center',
+      gap: cssVariableTheme.spacing.sm,
+    },
+
+    '& .md-checkbox-label': {
+      fontSize: cssVariableTheme.typography.fontSize.md,
+    },
+  },
+  render: ({ props }) => {
+    const readOnly = props.readOnly !== false
+    const ast = parseMarkdown(props.content)
+
+    return (
+      <div className="md-root">
+        {ast.map((node, i) =>
+          renderBlock(node, i, {
+            content: props.content,
+            readOnly,
+            onChange: props.onChange,
+          }),
+        )}
+      </div>
+    )
+  },
+})

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

@@ -0,0 +1,142 @@
+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 { MarkdownEditor } from './markdown-editor.js'
+
+describe('MarkdownEditor', () => {
+  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: <MarkdownEditor value="# Hello" />,
+      })
+
+      await sleepAsync(50)
+
+      const el = document.querySelector('shade-markdown-editor')
+      expect(el).not.toBeNull()
+    })
+  })
+
+  describe('side-by-side layout (default)', () => {
+    it('should render input and preview panes side by side', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <MarkdownEditor value="# Hello" />,
+        })
+
+        await sleepAsync(50)
+
+        const split = document.querySelector('.md-editor-split') as HTMLElement
+        expect(split).not.toBeNull()
+        expect(split.dataset.layout).toBe('side-by-side')
+
+        const input = document.querySelector('shade-markdown-editor shade-markdown-input')
+        expect(input).not.toBeNull()
+
+        const display = document.querySelector('shade-markdown-editor shade-markdown-display')
+        expect(display).not.toBeNull()
+      })
+    })
+  })
+
+  describe('above-below layout', () => {
+    it('should render with above-below layout', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <MarkdownEditor value="# Hello" layout="above-below" />,
+        })
+
+        await sleepAsync(50)
+
+        const split = document.querySelector('.md-editor-split') as HTMLElement
+        expect(split).not.toBeNull()
+        expect(split.dataset.layout).toBe('above-below')
+      })
+    })
+  })
+
+  describe('tabs layout', () => {
+    it('should render with tabs layout', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <MarkdownEditor value="# Hello" layout="tabs" />,
+        })
+
+        await sleepAsync(50)
+
+        const tabs = document.querySelector('shade-markdown-editor shade-tabs')
+        expect(tabs).not.toBeNull()
+
+        const tabButtons = document.querySelectorAll('shade-markdown-editor .shade-tab-btn')
+        expect(tabButtons.length).toBe(2)
+      })
+    })
+
+    it('should show the edit tab by default', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <MarkdownEditor value="# Hello" layout="tabs" />,
+        })
+
+        await sleepAsync(50)
+
+        const input = document.querySelector('shade-markdown-editor shade-markdown-input')
+        expect(input).not.toBeNull()
+      })
+    })
+  })
+
+  it('should pass value to both input and display', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const mdContent = '# Test Content'
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <MarkdownEditor value={mdContent} />,
+      })
+
+      await sleepAsync(50)
+
+      const textarea = document.querySelector('shade-markdown-editor textarea') as HTMLTextAreaElement
+      expect(textarea.value).toBe(mdContent)
+
+      const heading = document.querySelector(
+        'shade-markdown-editor shade-markdown-display shade-typography[data-variant="h1"]',
+      )
+      expect(heading).not.toBeNull()
+      expect(heading?.textContent).toContain('Test Content')
+    })
+  })
+})