@furystack/shades-common-components 10.0.35 → 11.0.0

package/src/components/grid.spec.tsx

@@ -0,0 +1,334 @@
+import { Injector } from '@furystack/inject'
+import { createComponent, initializeShadeRoot } from '@furystack/shades'
+import { sleepAsync } 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,
+    }
+  }
+
+  describe('rendering', () => {
+    it('should render a grid element as custom element', async () => {
+      const { grid } = await renderGrid({
+        columns: ['id', 'name'],
+        entries: [],
+      })
+      expect(grid).toBeTruthy()
+      expect(grid.tagName.toLowerCase()).toBe('shade-grid')
+    })
+
+    it('should render a table inside the grid element', async () => {
+      const { table } = await renderGrid({
+        columns: ['id', 'name'],
+        entries: [],
+      })
+      expect(table).toBeTruthy()
+      expect(table.tagName.toLowerCase()).toBe('table')
+    })
+
+    it('should render thead and tbody', async () => {
+      const { table } = await renderGrid({
+        columns: ['id', 'name'],
+        entries: [],
+      })
+      expect(table.querySelector('thead')).toBeTruthy()
+      expect(table.querySelector('tbody')).toBeTruthy()
+    })
+  })
+
+  describe('columns', () => {
+    it('should render column headers', async () => {
+      const { table } = await renderGrid({
+        columns: ['id', 'name', 'value'],
+        entries: [],
+      })
+      const headers = table.querySelectorAll('th')
+      expect(headers.length).toBe(3)
+    })
+
+    it('should render column names as header text by default', async () => {
+      const { table } = await renderGrid({
+        columns: ['id', 'name', 'value'],
+        entries: [],
+      })
+      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>,
+      }
+      const { table } = await renderGrid({
+        columns: ['id', 'name', 'value'],
+        entries: [],
+        headerComponents,
+      })
+      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>,
+      }
+      const { table } = await renderGrid({
+        columns: ['id', 'name'],
+        entries: [],
+        headerComponents,
+      })
+      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>,
+      }
+      const { table } = await renderGrid({
+        columns: ['id', 'name'],
+        entries: [],
+        headerComponents,
+      })
+      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 () => {
+      const { table } = await renderGrid({
+        columns: ['id', 'name'],
+        entries: testEntries,
+        rowComponents: {
+          default: (entry, column) => <span>{String(entry[column])}</span>,
+        },
+      })
+      const rows = table.querySelectorAll('tbody tr')
+      expect(rows.length).toBe(3)
+    })
+
+    it('should render cells for each column in each row', async () => {
+      const { table } = await renderGrid({
+        columns: ['id', 'name', 'value'],
+        entries: testEntries,
+        rowComponents: {
+          default: (entry, column) => <span>{String(entry[column])}</span>,
+        },
+      })
+      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>,
+      }
+      const { table } = await renderGrid({
+        columns: ['id', 'name', 'value'],
+        entries: [testEntries[0]],
+        rowComponents,
+      })
+      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>,
+      }
+      const { table } = await renderGrid({
+        columns: ['id', 'name'],
+        entries: [testEntries[0]],
+        rowComponents,
+      })
+      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>,
+      }
+      const { table } = await renderGrid({
+        columns: ['id', 'name'],
+        entries: [testEntries[0]],
+        rowComponents,
+      })
+      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 () => {
+      const { table } = await renderGrid({
+        columns: ['id', 'name'],
+        entries: [testEntries[0]],
+      })
+      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 () => {
+      const { table } = await renderGrid({
+        columns: ['id', 'name'],
+        entries: [],
+      })
+      const rows = table.querySelectorAll('tbody tr')
+      expect(rows.length).toBe(0)
+    })
+
+    it('should still render headers when no entries', async () => {
+      const { table } = await renderGrid({
+        columns: ['id', 'name', 'value'],
+        entries: [],
+      })
+      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 () => {
+      const { grid } = await renderGrid({
+        columns: ['id', 'name'],
+        entries: testEntries,
+        rowComponents: {
+          default: (entry, column) => <span>{String(entry[column])}</span>,
+        },
+        styles: {
+          wrapper: { backgroundColor: 'rgb(255, 0, 0)' },
+        },
+      })
+      const computedStyle = window.getComputedStyle(grid)
+      expect(computedStyle.backgroundColor).toBe('rgb(255, 0, 0)')
+    })
+
+    it('should apply header styles to th elements', async () => {
+      const { table } = await renderGrid({
+        columns: ['id', 'name'],
+        entries: [],
+        styles: {
+          header: { color: 'rgb(0, 255, 0)' },
+        },
+      })
+      const header = table.querySelector('th')!
+      expect(header.style.color).toBe('rgb(0, 255, 0)')
+    })
+
+    it('should apply cell styles to td elements', async () => {
+      const { table } = await renderGrid({
+        columns: ['id'],
+        entries: testEntries,
+        rowComponents: {
+          default: (entry, column) => <span>{String(entry[column])}</span>,
+        },
+        styles: {
+          cell: { color: 'rgb(0, 0, 255)' },
+        },
+      })
+      const cell = table.querySelector('td')!
+      expect(cell.style.color).toBe('rgb(0, 0, 255)')
+    })
+
+    it('should apply multiple style properties', async () => {
+      const { grid, table } = 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' },
+        },
+      })
+      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 () => {
+      const { grid } = await renderGrid({
+        columns: ['id'],
+        entries: [],
+      })
+      const computedStyle = window.getComputedStyle(grid)
+      expect(computedStyle.width).toBe('100%')
+      expect(computedStyle.height).toBe('100%')
+    })
+
+    it('should have overflow auto', async () => {
+      const { grid } = await renderGrid({
+        columns: ['id'],
+        entries: [],
+      })
+      const computedStyle = window.getComputedStyle(grid)
+      expect(computedStyle.overflow).toBe('auto')
+    })
+
+    it('should have display block', async () => {
+      const { grid } = await renderGrid({
+        columns: ['id'],
+        entries: [],
+      })
+      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 { attachStyles, 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,12 +26,20 @@ 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,
+        backgroundColor: cssVariableTheme.background.paper,
+        color: cssVariableTheme.text.secondary,
         borderRadius: '2px',
         top: '0',
         position: 'sticky',
@@ -41,71 +49,57 @@ export const Grid: <T, Column extends string>(props: GridProps<T, Column>, child
         fontWeight: '600',
         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 rgba(128, 128, 128, 0.2)',
+      },
+      '& td': {
         padding: '0.75em 1.2em',
-        borderBottom: `1px solid rgba(128, 128, 128, 0.15)`,
+        borderBottom: '1px solid rgba(128, 128, 128, 0.15)',
         transition: 'background-color 0.2s ease',
         fontSize: '0.875rem',
         lineHeight: '1.5',
-        ...props.styles?.cell,
+      },
+      '& tbody tr': {
+        transition: 'background-color 0.2s ease',
+      },
+      '& tbody tr:hover': {
+        backgroundColor: 'rgba(128, 128, 128, 0.08)',
+      },
+    },
+    render: ({ props, element }) => {
+      if (props.styles?.wrapper) {
+        attachStyles(element, { style: props.styles.wrapper })
       }
 
       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>
       )
     },
   })