@furystack/shades-common-components 10.0.35 → 11.0.0

package/src/components/avatar.spec.tsx

@@ -0,0 +1,146 @@
+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 { Avatar } from './avatar.js'
+
+describe('Avatar component', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  it('should render an image with the provided avatarUrl', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const testUrl = 'https://example.com/avatar.png'
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Avatar avatarUrl={testUrl} />,
+      })
+
+      await sleepAsync(50)
+
+      const avatar = document.querySelector('shade-avatar')
+      expect(avatar).not.toBeNull()
+
+      const img = avatar?.querySelector('img')
+      expect(img).not.toBeNull()
+      expect(img?.src).toBe(testUrl)
+      expect(img?.alt).toBe('avatar image')
+    })
+  })
+
+  it('should display default fallback emoji when image fails to load', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Avatar avatarUrl="invalid-url" />,
+      })
+
+      await sleepAsync(50)
+
+      const avatar = document.querySelector('shade-avatar')
+      expect(avatar).not.toBeNull()
+
+      const img = avatar?.querySelector('img')
+      expect(img).not.toBeNull()
+
+      // Trigger the error event
+      const errorEvent = new Event('error')
+      img?.dispatchEvent(errorEvent)
+
+      await sleepAsync(50)
+
+      // After error, img should be replaced with fallback div
+      const fallbackImg = avatar?.querySelector('img')
+      expect(fallbackImg).toBeNull()
+
+      // The fallback div should contain the default emoji
+      const fallbackContent = avatar?.textContent
+      expect(fallbackContent).toContain('🛑')
+    })
+  })
+
+  it('should display custom fallback when image fails to load and fallback prop is provided', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const customFallback = <span data-testid="custom-fallback">AB</span>
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Avatar avatarUrl="invalid-url" fallback={customFallback} />,
+      })
+
+      await sleepAsync(50)
+
+      const avatar = document.querySelector('shade-avatar')
+      expect(avatar).not.toBeNull()
+
+      const img = avatar?.querySelector('img')
+      expect(img).not.toBeNull()
+
+      // Trigger the error event
+      const errorEvent = new Event('error')
+      img?.dispatchEvent(errorEvent)
+
+      await sleepAsync(50)
+
+      // After error, img should be replaced with fallback div
+      const fallbackImg = avatar?.querySelector('img')
+      expect(fallbackImg).toBeNull()
+
+      // The custom fallback should be rendered
+      const customElement = avatar?.querySelector('[data-testid="custom-fallback"]')
+      expect(customElement).not.toBeNull()
+      expect(customElement?.textContent).toBe('AB')
+    })
+  })
+
+  it('should apply custom style from props', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Avatar avatarUrl="https://example.com/avatar.png" style={{ width: '64px', height: '64px' }} />,
+      })
+
+      await sleepAsync(50)
+
+      const avatar = document.querySelector('shade-avatar') as HTMLElement
+      expect(avatar).not.toBeNull()
+      expect(avatar.style.width).toBe('64px')
+      expect(avatar.style.height).toBe('64px')
+    })
+  })
+
+  it('should pass through additional props to the container', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Avatar avatarUrl="https://example.com/avatar.png" className="custom-avatar" title="User Avatar" />,
+      })
+
+      await sleepAsync(50)
+
+      const avatar = document.querySelector('shade-avatar') as HTMLElement
+      expect(avatar).not.toBeNull()
+      expect(avatar.className).toBe('custom-avatar')
+      expect(avatar.title).toBe('User Avatar')
+    })
+  })
+})

package/src/components/avatar.tsx

@@ -5,34 +5,31 @@ export type AvatarProps = { avatarUrl: string; fallback?: JSX.Element } & Partia
 
 export const Avatar = Shade<AvatarProps>({
   shadowDomName: 'shade-avatar',
+  css: {
+    width: '128px',
+    height: '128px',
+    overflow: 'hidden',
+    borderRadius: '50%',
+    boxShadow:
+      '0 0 0 3px rgba(255, 255, 255, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.15), 0 2px 4px -1px rgba(0, 0, 0, 0.1)',
+    backgroundColor: 'linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%)',
+    display: 'flex',
+    position: 'relative',
+    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+    '&:hover': {
+      transform: 'translateY(-2px) scale(1.02)',
+      boxShadow:
+        '0 0 0 3px rgba(255, 255, 255, 0.15), 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1)',
+    },
+  },
   render: ({ props, element }) => {
     const { avatarUrl, ...containerProps } = props
 
     attachProps(element, {
       ...containerProps,
       style: {
-        width: '128px',
-        height: '128px',
-        overflow: 'hidden',
-        borderRadius: '50%',
-        boxShadow:
-          '0 0 0 3px rgba(255, 255, 255, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.15), 0 2px 4px -1px rgba(0, 0, 0, 0.1)',
-        backgroundColor: 'linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%)',
-        display: 'flex',
-        position: 'relative',
-        transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
         ...containerProps?.style,
       },
-      onmouseenter: () => {
-        element.style.transform = 'translateY(-2px) scale(1.02)'
-        element.style.boxShadow =
-          '0 0 0 3px rgba(255, 255, 255, 0.15), 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1)'
-      },
-      onmouseleave: () => {
-        element.style.transform = 'translateY(0) scale(1)'
-        element.style.boxShadow =
-          '0 0 0 3px rgba(255, 255, 255, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.15), 0 2px 4px -1px rgba(0, 0, 0, 0.1)'
-      },
     })
 
     return (

package/src/components/button.spec.tsx

@@ -0,0 +1,193 @@
+import { Injector } from '@furystack/inject'
+import { createComponent, initializeShadeRoot, Shade } from '@furystack/shades'
+import { sleepAsync, usingAsync } from '@furystack/utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { Button } from './button.js'
+
+describe('Button', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  const renderButton = async (props: Parameters<typeof Button>[0] = {}, children?: JSX.Element[]) => {
+    const injector = new Injector()
+    const root = document.getElementById('root')!
+    initializeShadeRoot({
+      injector,
+      rootElement: root,
+      jsxElement: <Button {...props}>{children}</Button>,
+    })
+    await sleepAsync(50)
+    return {
+      injector,
+      button: root.querySelector('button[is="shade-button"]') as HTMLButtonElement,
+    }
+  }
+
+  describe('rendering', () => {
+    it('should render a button element', async () => {
+      const { button } = await renderButton()
+      expect(button).toBeTruthy()
+      expect(button.tagName.toLowerCase()).toBe('button')
+      expect(button.getAttribute('is')).toBe('shade-button')
+    })
+
+    it('should render children', async () => {
+      const { button } = await renderButton({}, ['Click me'] as unknown as JSX.Element[])
+      expect(button.textContent).toContain('Click me')
+    })
+  })
+
+  describe('variants', () => {
+    it('should have no data-variant attribute when variant is not specified (flat default)', async () => {
+      const { button } = await renderButton()
+      expect(button.getAttribute('data-variant')).toBeNull()
+    })
+
+    it('should set data-variant="contained" for contained variant', async () => {
+      const { button } = await renderButton({ variant: 'contained' })
+      expect(button.getAttribute('data-variant')).toBe('contained')
+    })
+
+    it('should set data-variant="outlined" for outlined variant', async () => {
+      const { button } = await renderButton({ variant: 'outlined' })
+      expect(button.getAttribute('data-variant')).toBe('outlined')
+    })
+
+    it('should remove data-variant attribute when variant changes to undefined', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const root = document.getElementById('root')!
+
+        const TestComponent = Shade<{ variant?: 'contained' | 'outlined' }>({
+          shadowDomName: 'button-test-variant-wrapper',
+          render: ({ props }) => <Button variant={props.variant}>Test</Button>,
+        })
+
+        initializeShadeRoot({
+          injector,
+          rootElement: root,
+          jsxElement: <TestComponent variant="contained" />,
+        })
+
+        await sleepAsync(50)
+        const button = root.querySelector('button[is="shade-button"]') as HTMLButtonElement
+        expect(button.getAttribute('data-variant')).toBe('contained')
+      })
+    })
+  })
+
+  describe('colors', () => {
+    const colors = ['primary', 'secondary', 'error', 'warning', 'success', 'info'] as const
+
+    colors.forEach((color) => {
+      it(`should set CSS custom properties for ${color} color`, async () => {
+        const { button } = await renderButton({ color })
+
+        expect(button.style.getPropertyValue('--btn-color-main')).toBe(`var(--shades-theme-palette-${color}-main)`)
+        expect(button.style.getPropertyValue('--btn-color-main-contrast')).toBe(
+          `var(--shades-theme-palette-${color}-main-contrast)`,
+        )
+        expect(button.style.getPropertyValue('--btn-color-light')).toBe(`var(--shades-theme-palette-${color}-light)`)
+        expect(button.style.getPropertyValue('--btn-color-dark')).toBe(`var(--shades-theme-palette-${color}-dark)`)
+        expect(button.style.getPropertyValue('--btn-color-dark-contrast')).toBe(
+          `var(--shades-theme-palette-${color}-dark-contrast)`,
+        )
+      })
+    })
+
+    it('should set default color CSS custom properties when no color is specified', async () => {
+      const { button } = await renderButton()
+
+      expect(button.style.getPropertyValue('--btn-color-main')).toBe('var(--shades-theme-text-secondary)')
+      expect(button.style.getPropertyValue('--btn-color-main-contrast')).toBe('var(--shades-theme-background-default)')
+      expect(button.style.getPropertyValue('--btn-color-light')).toBe('var(--shades-theme-text-primary)')
+      expect(button.style.getPropertyValue('--btn-color-dark')).toBe('var(--shades-theme-button-disabled-background)')
+      expect(button.style.getPropertyValue('--btn-color-dark-contrast')).toBe('var(--shades-theme-text-primary)')
+    })
+  })
+
+  describe('variant and color combinations', () => {
+    it('should apply both contained variant and primary color', async () => {
+      const { button } = await renderButton({ variant: 'contained', color: 'primary' })
+
+      expect(button.getAttribute('data-variant')).toBe('contained')
+      expect(button.style.getPropertyValue('--btn-color-main')).toBe('var(--shades-theme-palette-primary-main)')
+    })
+
+    it('should apply both outlined variant and error color', async () => {
+      const { button } = await renderButton({ variant: 'outlined', color: 'error' })
+
+      expect(button.getAttribute('data-variant')).toBe('outlined')
+      expect(button.style.getPropertyValue('--btn-color-main')).toBe('var(--shades-theme-palette-error-main)')
+    })
+  })
+
+  describe('disabled state', () => {
+    it('should be enabled by default', async () => {
+      const { button } = await renderButton()
+      expect(button.disabled).toBe(false)
+    })
+
+    it('should be disabled when disabled prop is set', async () => {
+      const { button } = await renderButton({ disabled: true })
+      expect(button.disabled).toBe(true)
+    })
+  })
+
+  describe('custom styles', () => {
+    it('should apply custom styles from style prop', async () => {
+      const { button } = await renderButton({
+        style: { margin: '20px', padding: '15px' },
+      })
+
+      expect(button.style.margin).toBe('20px')
+      expect(button.style.padding).toBe('15px')
+    })
+
+    it('should merge custom styles with component defaults', async () => {
+      const { button } = await renderButton({
+        color: 'primary',
+        style: { fontSize: '18px' },
+      })
+
+      expect(button.style.fontSize).toBe('18px')
+      expect(button.style.getPropertyValue('--btn-color-main')).toBe('var(--shades-theme-palette-primary-main)')
+    })
+  })
+
+  describe('event handling', () => {
+    it('should trigger onclick handler when clicked', async () => {
+      const handleClick = vi.fn()
+      const { button } = await renderButton({ onclick: handleClick })
+
+      button.click()
+
+      expect(handleClick).toHaveBeenCalledTimes(1)
+    })
+
+    it('should not trigger onclick when disabled', async () => {
+      const handleClick = vi.fn()
+      const { button } = await renderButton({ onclick: handleClick, disabled: true })
+
+      button.click()
+
+      expect(handleClick).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('HTML button attributes', () => {
+    it('should support type attribute', async () => {
+      const { button } = await renderButton({ type: 'submit' })
+      expect(button.type).toBe('submit')
+    })
+
+    it('should support name attribute', async () => {
+      const { button } = await renderButton({ name: 'my-button' })
+      expect(button.name).toBe('my-button')
+    })
+  })
+})