@furystack/shades-common-components 10.0.35 → 12.0.0

package/src/components/grid.spec.tsx

@@ -0,0 +1,427 @@
+import { Injector } from '@furystack/inject'
+import { createComponent, initializeShadeRoot } from '@furystack/shades'
+import { sleepAsync, usingAsync } from '@furystack/utils'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { Grid, type GridProps, type HeaderCells, type RowCells } from './grid.js'
+
+type TestEntry = { id: number; name: string; value: string }
+type TestColumns = 'id' | 'name' | 'value'
+
+describe('Grid', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  const renderGrid = async (props: GridProps<TestEntry, TestColumns>) => {
+    const injector = new Injector()
+    const root = document.getElementById('root')!
+    initializeShadeRoot({
+      injector,
+      rootElement: root,
+      jsxElement: <Grid {...props} />,
+    })
+    await sleepAsync(50)
+    const grid = document.querySelector('shade-grid') as HTMLElement
+    return {
+      injector,
+      grid,
+      table: grid?.querySelector('table') as HTMLTableElement,
+      [Symbol.asyncDispose]: () => injector[Symbol.asyncDispose](),
+    }
+  }
+
+  describe('rendering', () => {
+    it('should render a grid element as custom element', async () => {
+      await usingAsync(
+        await renderGrid({
+          columns: ['id', 'name'],
+          entries: [],
+        }),
+        async ({ grid }) => {
+          expect(grid).toBeTruthy()
+          expect(grid.tagName.toLowerCase()).toBe('shade-grid')
+        },
+      )
+    })
+
+    it('should render a table inside the grid element', async () => {
+      await usingAsync(
+        await renderGrid({
+          columns: ['id', 'name'],
+          entries: [],
+        }),
+        async ({ table }) => {
+          expect(table).toBeTruthy()
+          expect(table.tagName.toLowerCase()).toBe('table')
+        },
+      )
+    })
+
+    it('should render thead and tbody', async () => {
+      await usingAsync(
+        await renderGrid({
+          columns: ['id', 'name'],
+          entries: [],
+        }),
+        async ({ table }) => {
+          expect(table.querySelector('thead')).toBeTruthy()
+          expect(table.querySelector('tbody')).toBeTruthy()
+        },
+      )
+    })
+  })
+
+  describe('columns', () => {
+    it('should render column headers', async () => {
+      await usingAsync(
+        await renderGrid({
+          columns: ['id', 'name', 'value'],
+          entries: [],
+        }),
+        async ({ table }) => {
+          const headers = table.querySelectorAll('th')
+          expect(headers.length).toBe(3)
+        },
+      )
+    })
+
+    it('should render column names as header text by default', async () => {
+      await usingAsync(
+        await renderGrid({
+          columns: ['id', 'name', 'value'],
+          entries: [],
+        }),
+        async ({ table }) => {
+          const headers = table.querySelectorAll('th')
+          expect(headers[0].textContent).toBe('id')
+          expect(headers[1].textContent).toBe('name')
+          expect(headers[2].textContent).toBe('value')
+        },
+      )
+    })
+
+    it('should use custom header components when provided', async () => {
+      const headerComponents: HeaderCells<TestColumns> = {
+        id: (name) => <span>ID Header: {name}</span>,
+        name: (name) => <span>Name Header: {name}</span>,
+      }
+      await usingAsync(
+        await renderGrid({
+          columns: ['id', 'name', 'value'],
+          entries: [],
+          headerComponents,
+        }),
+        async ({ table }) => {
+          const headers = table.querySelectorAll('th')
+          expect(headers[0].textContent).toContain('ID Header: id')
+          expect(headers[1].textContent).toContain('Name Header: name')
+          expect(headers[2].textContent).toBe('value')
+        },
+      )
+    })
+
+    it('should use default header component for unspecified columns', async () => {
+      const headerComponents: HeaderCells<TestColumns> = {
+        default: (name) => <strong>{name.toUpperCase()}</strong>,
+      }
+      await usingAsync(
+        await renderGrid({
+          columns: ['id', 'name'],
+          entries: [],
+          headerComponents,
+        }),
+        async ({ table }) => {
+          const headers = table.querySelectorAll('th')
+          expect(headers[0].textContent).toBe('ID')
+          expect(headers[1].textContent).toBe('NAME')
+        },
+      )
+    })
+
+    it('should prefer specific header component over default', async () => {
+      const headerComponents: HeaderCells<TestColumns> = {
+        id: () => <span>Custom ID</span>,
+        default: (name) => <span>Default: {name}</span>,
+      }
+      await usingAsync(
+        await renderGrid({
+          columns: ['id', 'name'],
+          entries: [],
+          headerComponents,
+        }),
+        async ({ table }) => {
+          const headers = table.querySelectorAll('th')
+          expect(headers[0].textContent).toBe('Custom ID')
+          expect(headers[1].textContent).toBe('Default: name')
+        },
+      )
+    })
+  })
+
+  describe('rows', () => {
+    const testEntries: TestEntry[] = [
+      { id: 1, name: 'Item 1', value: 'Value 1' },
+      { id: 2, name: 'Item 2', value: 'Value 2' },
+      { id: 3, name: 'Item 3', value: 'Value 3' },
+    ]
+
+    it('should render rows for each entry', async () => {
+      await usingAsync(
+        await renderGrid({
+          columns: ['id', 'name'],
+          entries: testEntries,
+          rowComponents: {
+            default: (entry, column) => <span>{String(entry[column])}</span>,
+          },
+        }),
+        async ({ table }) => {
+          const rows = table.querySelectorAll('tbody tr')
+          expect(rows.length).toBe(3)
+        },
+      )
+    })
+
+    it('should render cells for each column in each row', async () => {
+      await usingAsync(
+        await renderGrid({
+          columns: ['id', 'name', 'value'],
+          entries: testEntries,
+          rowComponents: {
+            default: (entry, column) => <span>{String(entry[column])}</span>,
+          },
+        }),
+        async ({ table }) => {
+          const firstRow = table.querySelector('tbody tr')!
+          const cells = firstRow.querySelectorAll('td')
+          expect(cells.length).toBe(3)
+        },
+      )
+    })
+
+    it('should use custom row components when provided', async () => {
+      const rowComponents: RowCells<TestEntry, TestColumns> = {
+        id: (entry) => <span>ID: {entry.id}</span>,
+        name: (entry) => <strong>{entry.name}</strong>,
+      }
+      await usingAsync(
+        await renderGrid({
+          columns: ['id', 'name', 'value'],
+          entries: [testEntries[0]],
+          rowComponents,
+        }),
+        async ({ table }) => {
+          const cells = table.querySelectorAll('tbody td')
+          expect(cells[0].textContent).toBe('ID: 1')
+          expect(cells[1].textContent).toBe('Item 1')
+          expect(cells[2].textContent).toBe('')
+        },
+      )
+    })
+
+    it('should use default row component for unspecified columns', async () => {
+      const rowComponents: RowCells<TestEntry, TestColumns> = {
+        default: (entry, column) => <span>{String(entry[column])}</span>,
+      }
+      await usingAsync(
+        await renderGrid({
+          columns: ['id', 'name'],
+          entries: [testEntries[0]],
+          rowComponents,
+        }),
+        async ({ table }) => {
+          const cells = table.querySelectorAll('tbody td')
+          expect(cells[0].textContent).toBe('1')
+          expect(cells[1].textContent).toBe('Item 1')
+        },
+      )
+    })
+
+    it('should prefer specific row component over default', async () => {
+      const rowComponents: RowCells<TestEntry, TestColumns> = {
+        id: (entry) => <span>Custom: {entry.id}</span>,
+        default: (entry, column) => <span>Default: {String(entry[column])}</span>,
+      }
+      await usingAsync(
+        await renderGrid({
+          columns: ['id', 'name'],
+          entries: [testEntries[0]],
+          rowComponents,
+        }),
+        async ({ table }) => {
+          const cells = table.querySelectorAll('tbody td')
+          expect(cells[0].textContent).toBe('Custom: 1')
+          expect(cells[1].textContent).toBe('Default: Item 1')
+        },
+      )
+    })
+
+    it('should render empty cells when no row component is provided', async () => {
+      await usingAsync(
+        await renderGrid({
+          columns: ['id', 'name'],
+          entries: [testEntries[0]],
+        }),
+        async ({ table }) => {
+          const cells = table.querySelectorAll('tbody td')
+          expect(cells[0].textContent).toBe('')
+          expect(cells[1].textContent).toBe('')
+        },
+      )
+    })
+  })
+
+  describe('empty state', () => {
+    it('should render empty tbody when no entries', async () => {
+      await usingAsync(
+        await renderGrid({
+          columns: ['id', 'name'],
+          entries: [],
+        }),
+        async ({ table }) => {
+          const rows = table.querySelectorAll('tbody tr')
+          expect(rows.length).toBe(0)
+        },
+      )
+    })
+
+    it('should still render headers when no entries', async () => {
+      await usingAsync(
+        await renderGrid({
+          columns: ['id', 'name', 'value'],
+          entries: [],
+        }),
+        async ({ table }) => {
+          const headers = table.querySelectorAll('th')
+          expect(headers.length).toBe(3)
+        },
+      )
+    })
+  })
+
+  describe('styles', () => {
+    const testEntries: TestEntry[] = [{ id: 1, name: 'Item 1', value: 'Value 1' }]
+
+    it('should apply wrapper styles to the grid element', async () => {
+      await usingAsync(
+        await renderGrid({
+          columns: ['id', 'name'],
+          entries: testEntries,
+          rowComponents: {
+            default: (entry, column) => <span>{String(entry[column])}</span>,
+          },
+          styles: {
+            wrapper: { backgroundColor: 'rgb(255, 0, 0)' },
+          },
+        }),
+        async ({ grid }) => {
+          const computedStyle = window.getComputedStyle(grid)
+          expect(computedStyle.backgroundColor).toBe('rgb(255, 0, 0)')
+        },
+      )
+    })
+
+    it('should apply header styles to th elements', async () => {
+      await usingAsync(
+        await renderGrid({
+          columns: ['id', 'name'],
+          entries: [],
+          styles: {
+            header: { color: 'rgb(0, 255, 0)' },
+          },
+        }),
+        async ({ table }) => {
+          const header = table.querySelector('th')!
+          expect(header.style.color).toBe('rgb(0, 255, 0)')
+        },
+      )
+    })
+
+    it('should apply cell styles to td elements', async () => {
+      await usingAsync(
+        await renderGrid({
+          columns: ['id'],
+          entries: testEntries,
+          rowComponents: {
+            default: (entry, column) => <span>{String(entry[column])}</span>,
+          },
+          styles: {
+            cell: { color: 'rgb(0, 0, 255)' },
+          },
+        }),
+        async ({ table }) => {
+          const cell = table.querySelector('td')!
+          expect(cell.style.color).toBe('rgb(0, 0, 255)')
+        },
+      )
+    })
+
+    it('should apply multiple style properties', async () => {
+      await usingAsync(
+        await renderGrid({
+          columns: ['id'],
+          entries: testEntries,
+          rowComponents: {
+            default: (entry, column) => <span>{String(entry[column])}</span>,
+          },
+          styles: {
+            wrapper: { margin: '10px', padding: '20px' },
+            header: { fontWeight: 'bold' },
+            cell: { textAlign: 'center' },
+          },
+        }),
+        async ({ grid, table }) => {
+          expect(window.getComputedStyle(grid).margin).toBe('10px')
+          expect(window.getComputedStyle(grid).padding).toBe('20px')
+          expect(table.querySelector('th')!.style.fontWeight).toBe('bold')
+          expect(table.querySelector('td')!.style.textAlign).toBe('center')
+        },
+      )
+    })
+  })
+
+  describe('default styles', () => {
+    it('should have full width and height by default', async () => {
+      await usingAsync(
+        await renderGrid({
+          columns: ['id'],
+          entries: [],
+        }),
+        async ({ grid }) => {
+          const computedStyle = window.getComputedStyle(grid)
+          expect(computedStyle.width).toBe('100%')
+          expect(computedStyle.height).toBe('100%')
+        },
+      )
+    })
+
+    it('should have overflow auto', async () => {
+      await usingAsync(
+        await renderGrid({
+          columns: ['id'],
+          entries: [],
+        }),
+        async ({ grid }) => {
+          const computedStyle = window.getComputedStyle(grid)
+          expect(computedStyle.overflow).toBe('auto')
+        },
+      )
+    })
+
+    it('should have display block', async () => {
+      await usingAsync(
+        await renderGrid({
+          columns: ['id'],
+          entries: [],
+        }),
+        async ({ grid }) => {
+          const computedStyle = window.getComputedStyle(grid)
+          expect(computedStyle.display).toBe('block')
+        },
+      )
+    })
+  })
+})

package/src/components/grid.tsx

@@ -1,6 +1,6 @@
 import type { ChildrenList } from '@furystack/shades'
-import { Shade, createComponent } from '@furystack/shades'
-import { ThemeProviderService } from '../services/theme-provider-service.js'
+import { createComponent, Shade } from '@furystack/shades'
+import { cssVariableTheme } from '../services/css-variable-theme.js'
 
 // ToDo: https://stackoverflow.com/questions/51459971/type-of-generic-stateless-component-react-or-extending-generic-function-interfa
 
@@ -26,86 +26,80 @@ export type RowCells<T, Columns extends string> = {
 export const Grid: <T, Column extends string>(props: GridProps<T, Column>, children: ChildrenList) => JSX.Element<any> =
   Shade({
     shadowDomName: 'shade-grid',
-    render: ({ props, injector }) => {
-      const { theme } = injector.getInstance(ThemeProviderService)
-      const headerStyle: Partial<CSSStyleDeclaration> = {
+    css: {
+      display: 'block',
+      width: '100%',
+      height: '100%',
+      overflow: 'auto',
+      '& table': {
+        width: '100%',
+        position: 'relative',
+        borderCollapse: 'collapse',
+      },
+      '& th': {
         padding: '1em 1.2em',
-        backgroundColor: theme.background.paper,
-        color: theme.text.secondary,
-        borderRadius: '2px',
+        backgroundColor: cssVariableTheme.background.paper,
+        color: cssVariableTheme.text.secondary,
+        borderRadius: cssVariableTheme.shape.borderRadius.xs,
         top: '0',
         position: 'sticky',
         cursor: 'pointer',
         fontVariant: 'all-petite-caps',
         fontSize: '0.875rem',
-        fontWeight: '600',
+        fontWeight: cssVariableTheme.typography.fontWeight.semibold,
         letterSpacing: '0.05em',
         textAlign: 'left',
-        borderBottom: `2px solid ${theme.background.default}`,
-        borderRight: `1px solid rgba(128, 128, 128, 0.2)`,
-        ...props.styles?.header,
-      }
-
-      const cellStyle: Partial<CSSStyleDeclaration> = {
+        borderBottom: `2px solid ${cssVariableTheme.background.default}`,
+        borderRight: `1px solid ${cssVariableTheme.action.subtleBorder}`,
+      },
+      '& td': {
         padding: '0.75em 1.2em',
-        borderBottom: `1px solid rgba(128, 128, 128, 0.15)`,
-        transition: 'background-color 0.2s ease',
+        borderBottom: `1px solid ${cssVariableTheme.action.subtleBorder}`,
+        transition: `background-color ${cssVariableTheme.transitions.duration.normal} ease`,
         fontSize: '0.875rem',
         lineHeight: '1.5',
-        ...props.styles?.cell,
+      },
+      '& tbody tr': {
+        transition: `background-color ${cssVariableTheme.transitions.duration.normal} ease`,
+      },
+      '& tbody tr:hover': {
+        backgroundColor: cssVariableTheme.action.hoverBackground,
+      },
+    },
+    render: ({ props, useHostProps }) => {
+      if (props.styles?.wrapper) {
+        useHostProps({ style: props.styles.wrapper as Record<string, string> })
       }
 
       return (
-        <div
-          className="shade-grid-wrapper"
-          style={{
-            ...props.styles?.wrapper,
-            width: '100%',
-            height: '100%',
-            overflow: 'auto',
-          }}
-        >
-          <table style={{ width: '100%', position: 'relative', borderCollapse: 'collapse' }}>
-            <thead>
+        <table>
+          <thead>
+            <tr>
+              {props.columns.map((column) => {
+                return (
+                  <th style={props.styles?.header}>
+                    {props.headerComponents?.[column]?.(column) || props.headerComponents?.default?.(column) || (
+                      <>{column}</>
+                    )}
+                  </th>
+                )
+              })}
+            </tr>
+          </thead>
+          <tbody>
+            {props.entries.map((entry) => (
               <tr>
-                {props.columns.map((column) => {
-                  return (
-                    <th style={headerStyle}>
-                      {props.headerComponents?.[column]?.(column) || props.headerComponents?.default?.(column) || (
-                        <>{column}</>
-                      )}
-                    </th>
-                  )
-                })}
+                {props.columns.map((column) => (
+                  <td style={props.styles?.cell}>
+                    {props.rowComponents?.[column]?.(entry, column) ||
+                      props.rowComponents?.default?.(entry, column) ||
+                      null}
+                  </td>
+                ))}
               </tr>
-            </thead>
-            <tbody>
-              {props.entries.map((entry) => (
-                <tr
-                  style={{
-                    transition: 'background-color 0.2s ease',
-                  }}
-                  onmouseenter={(e) => {
-                    const target = e.currentTarget as HTMLElement
-                    target.style.backgroundColor = `rgba(128, 128, 128, 0.08)`
-                  }}
-                  onmouseleave={(e) => {
-                    const target = e.currentTarget as HTMLElement
-                    target.style.backgroundColor = 'transparent'
-                  }}
-                >
-                  {props.columns.map((column) => (
-                    <td style={cellStyle}>
-                      {props.rowComponents?.[column]?.(entry, column) ||
-                        props.rowComponents?.default?.(entry, column) ||
-                        null}
-                    </td>
-                  ))}
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
+            ))}
+          </tbody>
+        </table>
       )
     },
   })

package/src/components/icons/icon-definitions.spec.ts

@@ -0,0 +1,68 @@
+import { describe, expect, it } from 'vitest'
+import * as allIcons from './icon-definitions.js'
+
+const iconEntries = Object.entries(allIcons)
+
+describe('Icon definitions', () => {
+  it('should export at least 50 icons', () => {
+    expect(iconEntries.length).toBeGreaterThanOrEqual(50)
+  })
+
+  describe.each(iconEntries)('%s', (_name, icon) => {
+    it('should have a paths array with at least one path', () => {
+      expect(Array.isArray(icon.paths)).toBe(true)
+      expect(icon.paths.length).toBeGreaterThanOrEqual(1)
+    })
+
+    it('should have non-empty d attributes on all paths', () => {
+      for (const path of icon.paths) {
+        expect(typeof path.d).toBe('string')
+        expect(path.d.length).toBeGreaterThan(0)
+      }
+    })
+
+    it('should have a valid style if specified', () => {
+      if (icon.style !== undefined) {
+        expect(['fill', 'stroke']).toContain(icon.style)
+      }
+    })
+
+    it('should have a valid viewBox format if specified', () => {
+      if (icon.viewBox !== undefined) {
+        expect(icon.viewBox).toMatch(/^\d+\s+\d+\s+\d+\s+\d+$/)
+      }
+    })
+
+    it('should have a positive strokeWidth if specified', () => {
+      if (icon.strokeWidth !== undefined) {
+        expect(icon.strokeWidth).toBeGreaterThan(0)
+      }
+    })
+
+    it('should have valid fillRule on paths if specified', () => {
+      for (const path of icon.paths) {
+        if (path.fillRule !== undefined) {
+          expect(['evenodd', 'nonzero']).toContain(path.fillRule)
+        }
+      }
+    })
+  })
+
+  it('should not have duplicate path data across different icons', () => {
+    const pathSignatures = new Map<string, string>()
+    for (const [name, icon] of iconEntries) {
+      const signature = icon.paths.map((p) => p.d).join('|')
+      const existing = pathSignatures.get(signature)
+      if (existing) {
+        // Allow outline/fill variants of the same shape (e.g. star / starOutline, heart / heartOutline)
+        const isVariantPair =
+          (name.includes('Outline') && existing === name.replace('Outline', '')) ||
+          (existing.includes('Outline') && name === existing.replace('Outline', ''))
+        if (!isVariantPair) {
+          expect.fail(`Icon "${name}" has identical path data to "${existing}"`)
+        }
+      }
+      pathSignatures.set(signature, name)
+    }
+  })
+})