@furystack/shades-common-components 11.0.0 → 12.0.0

package/src/components/page-container/index.spec.tsx

@@ -0,0 +1,274 @@
+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 { PageContainer } from './index.js'
+
+describe('PageContainer component', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  describe('rendering', () => {
+    it('should render the shade-page-container custom element', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <PageContainer>Content</PageContainer>,
+        })
+
+        await sleepAsync(50)
+        const element = document.querySelector('div[is="shade-page-container"]')
+        expect(element).not.toBeNull()
+        expect(element?.tagName.toLowerCase()).toBe('div')
+        expect(element?.getAttribute('is')).toBe('shade-page-container')
+      })
+    })
+
+    it('should render children', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <PageContainer>
+              <span>Child content</span>
+            </PageContainer>
+          ),
+        })
+
+        await sleepAsync(50)
+        const element = document.querySelector('div[is="shade-page-container"]')
+        expect(element?.textContent).toContain('Child content')
+      })
+    })
+
+    it('should render multiple children', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <PageContainer>
+              <span>First</span>
+              <span>Second</span>
+            </PageContainer>
+          ),
+        })
+
+        await sleepAsync(50)
+        const element = document.querySelector('div[is="shade-page-container"]')
+        expect(element?.textContent).toContain('First')
+        expect(element?.textContent).toContain('Second')
+      })
+    })
+  })
+
+  describe('default styling', () => {
+    it('should apply default padding of 24px', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <PageContainer>Content</PageContainer>,
+        })
+
+        await sleepAsync(50)
+        const element = document.querySelector('div[is="shade-page-container"]') as HTMLDivElement
+        expect(element.style.padding).toBe('24px')
+      })
+    })
+
+    it('should apply default gap of 16px', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <PageContainer>Content</PageContainer>,
+        })
+
+        await sleepAsync(50)
+        const element = document.querySelector('div[is="shade-page-container"]') as HTMLDivElement
+        expect(element.style.gap).toBe('16px')
+      })
+    })
+
+    it('should apply default maxWidth of 100%', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <PageContainer>Content</PageContainer>,
+        })
+
+        await sleepAsync(50)
+        const element = document.querySelector('div[is="shade-page-container"]') as HTMLDivElement
+        expect(element.style.maxWidth).toBe('100%')
+      })
+    })
+
+    it('should apply full height by default', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <PageContainer>Content</PageContainer>,
+        })
+
+        await sleepAsync(50)
+        const element = document.querySelector('div[is="shade-page-container"]') as HTMLDivElement
+        expect(element.style.height).toBe('100%')
+      })
+    })
+
+    it('should not center by default', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <PageContainer>Content</PageContainer>,
+        })
+
+        await sleepAsync(50)
+        const element = document.querySelector('div[is="shade-page-container"]') as HTMLDivElement
+        expect(element.style.marginLeft).toBe('')
+        expect(element.style.marginRight).toBe('')
+      })
+    })
+  })
+
+  describe('custom props', () => {
+    it('should apply custom maxWidth', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <PageContainer maxWidth="800px">Content</PageContainer>,
+        })
+
+        await sleepAsync(50)
+        const element = document.querySelector('div[is="shade-page-container"]') as HTMLDivElement
+        expect(element.style.maxWidth).toBe('800px')
+      })
+    })
+
+    it('should apply custom padding', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <PageContainer padding="48px">Content</PageContainer>,
+        })
+
+        await sleepAsync(50)
+        const element = document.querySelector('div[is="shade-page-container"]') as HTMLDivElement
+        expect(element.style.padding).toBe('48px')
+      })
+    })
+
+    it('should apply custom gap', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <PageContainer gap="32px">Content</PageContainer>,
+        })
+
+        await sleepAsync(50)
+        const element = document.querySelector('div[is="shade-page-container"]') as HTMLDivElement
+        expect(element.style.gap).toBe('32px')
+      })
+    })
+
+    it('should center when centered prop is true', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <PageContainer centered maxWidth="600px">
+              Content
+            </PageContainer>
+          ),
+        })
+
+        await sleepAsync(50)
+        const element = document.querySelector('div[is="shade-page-container"]') as HTMLDivElement
+        expect(element.style.marginLeft).toBe('auto')
+        expect(element.style.marginRight).toBe('auto')
+      })
+    })
+
+    it('should apply auto height when fullHeight is false', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <PageContainer fullHeight={false}>Content</PageContainer>,
+        })
+
+        await sleepAsync(50)
+        const element = document.querySelector('div[is="shade-page-container"]') as HTMLDivElement
+        expect(element.style.height).toBe('auto')
+      })
+    })
+  })
+
+  describe('combined props', () => {
+    it('should apply all custom props together', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <PageContainer maxWidth="800px" centered padding="48px" gap="32px" fullHeight={false}>
+              Content
+            </PageContainer>
+          ),
+        })
+
+        await sleepAsync(50)
+        const element = document.querySelector('div[is="shade-page-container"]') as HTMLDivElement
+        expect(element.style.maxWidth).toBe('800px')
+        expect(element.style.marginLeft).toBe('auto')
+        expect(element.style.marginRight).toBe('auto')
+        expect(element.style.padding).toBe('48px')
+        expect(element.style.gap).toBe('32px')
+        expect(element.style.height).toBe('auto')
+      })
+    })
+  })
+})

package/src/components/page-container/index.tsx

@@ -0,0 +1,82 @@
+import { Shade, createComponent } from '@furystack/shades'
+import { cssVariableTheme } from '../../services/css-variable-theme.js'
+
+/**
+ * Props for the PageContainer component.
+ */
+export type PageContainerProps = {
+  /** Maximum width of the container (CSS value). Default: '100%' */
+  maxWidth?: string
+  /** Center the container horizontally. Default: false */
+  centered?: boolean
+  /** Padding around the content (CSS value). Default: '24px' */
+  padding?: string
+  /** Gap between child elements (CSS value). Default: '16px' */
+  gap?: string
+  /** Fill the available height. Default: true */
+  fullHeight?: boolean
+}
+
+/**
+ * PageContainer component for common page-level patterns.
+ *
+ * Provides a consistent container for page content with:
+ * - Optional max-width constraint
+ * - Horizontal centering option
+ * - Configurable padding and gap
+ * - Flex column layout with gap between children
+ *
+ * @example
+ * ```tsx
+ * <PageContainer maxWidth="800px" centered padding="48px" gap="24px">
+ *   <PageHeader
+ *     icon="👥"
+ *     title="Users"
+ *     description="Manage user accounts and their roles."
+ *   />
+ *   <Paper>
+ *     Content here...
+ *   </Paper>
+ * </PageContainer>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Full width container
+ * <PageContainer gap="16px">
+ *   <h2>Dashboard</h2>
+ *   <GridOfCards />
+ * </PageContainer>
+ * ```
+ */
+export const PageContainer = Shade<PageContainerProps>({
+  shadowDomName: 'shade-page-container',
+  elementBase: HTMLDivElement,
+  elementBaseName: 'div',
+  css: {
+    display: 'flex',
+    flexDirection: 'column',
+    boxSizing: 'border-box',
+    color: cssVariableTheme.text.primary,
+    position: 'relative',
+  },
+  render: ({ props, children, useHostProps }) => {
+    const { maxWidth = '100%', centered = false, padding = '24px', gap = '16px', fullHeight = true } = props
+
+    const hostStyle: Record<string, string> = {
+      maxWidth,
+      padding,
+      gap,
+      height: fullHeight ? '100%' : 'auto',
+    }
+    if (centered) {
+      hostStyle.marginLeft = 'auto'
+      hostStyle.marginRight = 'auto'
+    }
+    useHostProps({ style: hostStyle })
+
+    return <>{children}</>
+  },
+})
+
+export * from './page-header.js'

package/src/components/page-container/page-header.spec.tsx

@@ -0,0 +1,308 @@
+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 { PageHeader } from './page-header.js'
+
+describe('PageHeader component', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  describe('rendering', () => {
+    it('should render the shade-page-header custom element', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <PageHeader title="Test Title" />,
+        })
+
+        await sleepAsync(50)
+        const element = document.querySelector('shade-page-header')
+        expect(element).not.toBeNull()
+        expect(element?.tagName.toLowerCase()).toBe('shade-page-header')
+      })
+    })
+
+    it('should render the title', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <PageHeader title="Users" />,
+        })
+
+        await sleepAsync(50)
+        const title = document.querySelector('[data-testid="page-header-title"]')
+        expect(title).not.toBeNull()
+        expect(title?.textContent).toBe('Users')
+      })
+    })
+
+    it('should render the title as h2', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <PageHeader title="Dashboard" />,
+        })
+
+        await sleepAsync(50)
+        const title = document.querySelector('[data-testid="page-header-title"]')
+        expect(title?.tagName.toLowerCase()).toBe('h2')
+      })
+    })
+  })
+
+  describe('icon', () => {
+    it('should render icon when provided', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <PageHeader icon="👥" title="Users" />,
+        })
+
+        await sleepAsync(50)
+        const icon = document.querySelector('.page-header-icon')
+        expect(icon).not.toBeNull()
+        expect(icon?.textContent).toBe('👥')
+      })
+    })
+
+    it('should not render icon element when not provided', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <PageHeader title="Users" />,
+        })
+
+        await sleepAsync(50)
+        const icon = document.querySelector('.page-header-icon')
+        expect(icon).toBeNull()
+      })
+    })
+
+    it('should include icon in title text', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <PageHeader icon="📁" title="Projects" />,
+        })
+
+        await sleepAsync(50)
+        const title = document.querySelector('[data-testid="page-header-title"]')
+        expect(title?.textContent).toContain('📁')
+        expect(title?.textContent).toContain('Projects')
+      })
+    })
+  })
+
+  describe('description', () => {
+    it('should render description when provided', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <PageHeader title="Users" description="Manage user accounts." />,
+        })
+
+        await sleepAsync(50)
+        const description = document.querySelector('[data-testid="page-header-description"]')
+        expect(description).not.toBeNull()
+        expect(description?.textContent).toBe('Manage user accounts.')
+      })
+    })
+
+    it('should not render description element when not provided', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <PageHeader title="Users" />,
+        })
+
+        await sleepAsync(50)
+        const description = document.querySelector('[data-testid="page-header-description"]')
+        expect(description).toBeNull()
+      })
+    })
+
+    it('should render description as p element', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <PageHeader title="Dashboard" description="Overview of your data." />,
+        })
+
+        await sleepAsync(50)
+        const description = document.querySelector('[data-testid="page-header-description"]')
+        expect(description?.tagName.toLowerCase()).toBe('p')
+      })
+    })
+  })
+
+  describe('actions', () => {
+    it('should render actions when provided', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <PageHeader
+              title="Users"
+              actions={
+                <button type="button" data-testid="action-button">
+                  Add User
+                </button>
+              }
+            />
+          ),
+        })
+
+        await sleepAsync(50)
+        const actionsContainer = document.querySelector('[data-testid="page-header-actions"]')
+        expect(actionsContainer).not.toBeNull()
+
+        const actionButton = document.querySelector('[data-testid="action-button"]')
+        expect(actionButton).not.toBeNull()
+        expect(actionButton?.textContent).toBe('Add User')
+      })
+    })
+
+    it('should not render actions element when not provided', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <PageHeader title="Users" />,
+        })
+
+        await sleepAsync(50)
+        const actionsContainer = document.querySelector('[data-testid="page-header-actions"]')
+        expect(actionsContainer).toBeNull()
+      })
+    })
+
+    it('should render multiple action elements', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <PageHeader
+              title="Users"
+              actions={
+                <>
+                  <button type="button">Export</button>
+                  <button type="button">Add User</button>
+                </>
+              }
+            />
+          ),
+        })
+
+        await sleepAsync(50)
+        const actionsContainer = document.querySelector('[data-testid="page-header-actions"]')
+        const buttons = actionsContainer?.querySelectorAll('button')
+        expect(buttons?.length).toBe(2)
+      })
+    })
+  })
+
+  describe('combined props', () => {
+    it('should render all props together', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <PageHeader
+              icon="👥"
+              title="Users"
+              description="Manage user accounts and their roles."
+              actions={<button type="button">Add User</button>}
+            />
+          ),
+        })
+
+        await sleepAsync(50)
+
+        const icon = document.querySelector('.page-header-icon')
+        expect(icon?.textContent).toBe('👥')
+
+        const title = document.querySelector('[data-testid="page-header-title"]')
+        expect(title?.textContent).toContain('Users')
+
+        const description = document.querySelector('[data-testid="page-header-description"]')
+        expect(description?.textContent).toBe('Manage user accounts and their roles.')
+
+        const actionsContainer = document.querySelector('[data-testid="page-header-actions"]')
+        expect(actionsContainer?.querySelector('button')).not.toBeNull()
+      })
+    })
+
+    it('should work with PageContainer integration', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const { PageContainer } = await import('./index.js')
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <PageContainer maxWidth="800px" centered>
+              <PageHeader icon="📊" title="Dashboard" description="Your data overview." />
+              <div>Content area</div>
+            </PageContainer>
+          ),
+        })
+
+        await sleepAsync(50)
+
+        const container = document.querySelector('div[is="shade-page-container"]')
+        expect(container).not.toBeNull()
+
+        const header = document.querySelector('shade-page-header')
+        expect(header).not.toBeNull()
+
+        const title = document.querySelector('[data-testid="page-header-title"]')
+        expect(title?.textContent).toContain('Dashboard')
+      })
+    })
+  })
+})