@furystack/shades-common-components 10.0.35 → 11.0.0

package/src/components/noty-list.tsx

@@ -39,7 +39,7 @@ export const NotyComponent = Shade<{ model: NotyModel; onDismiss: () => void }>(
       )
     })
   },
-  style: {
+  css: {
     margin: '8px',
     overflow: 'hidden',
     borderRadius: '12px',
@@ -50,6 +50,39 @@ export const NotyComponent = Shade<{ model: NotyModel; onDismiss: () => void }>(
     height: '0px',
     border: '1px solid rgba(0, 0, 0, 0.1)',
     backdropFilter: 'blur(10px)',
+    '& .noty-header': {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      padding: '12px 12px 12px 20px',
+      borderBottom: '1px solid rgba(0, 0, 0, 0.1)',
+    },
+    '& .noty-title': {
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      margin: '0',
+      fontSize: '0.95em',
+      fontWeight: '600',
+      letterSpacing: '0.01em',
+    },
+    '& .dismiss-button': {
+      margin: '0',
+      padding: '4px 8px',
+      fontSize: '16px',
+      minWidth: '28px',
+      opacity: '0.8',
+      transition: 'opacity 0.2s ease',
+    },
+    '& .dismiss-button:hover': {
+      opacity: '1',
+    },
+    '& .noty-body': {
+      padding: '16px 20px 18px 20px',
+      fontSize: '0.9em',
+      lineHeight: '1.5',
+      fontWeight: '400',
+    },
   },
   render: ({ props, injector, element }) => {
     const themeProvider = injector.getInstance(ThemeProviderService)
@@ -84,47 +117,12 @@ export const NotyComponent = Shade<{ model: NotyModel; onDismiss: () => void }>(
 
     return (
       <>
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            padding: '12px 12px 12px 20px',
-            backgroundColor: colors.dark,
-            color: headerTextColor,
-            borderBottom: '1px solid rgba(0, 0, 0, 0.1)',
-          }}
-        >
-          <h5
-            style={{
-              whiteSpace: 'nowrap',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              margin: '0',
-              fontSize: '0.95em',
-              fontWeight: '600',
-              letterSpacing: '0.01em',
-            }}
-            title={props.model.title}
-          >
+        <div className="noty-header" style={{ backgroundColor: colors.dark, color: headerTextColor }}>
+          <h5 className="noty-title" title={props.model.title}>
             {props.model.title}
           </h5>
           <Button
-            style={{
-              margin: '0',
-              padding: '4px 8px',
-              fontSize: '16px',
-              minWidth: '28px',
-              opacity: '0.8',
-              transition: 'opacity 0.2s ease',
-            }}
-            className="dismissNoty"
-            onmouseenter={(e: MouseEvent) => {
-              ;(e.currentTarget as HTMLElement).style.opacity = '1'
-            }}
-            onmouseleave={(e: MouseEvent) => {
-              ;(e.currentTarget as HTMLElement).style.opacity = '0.8'
-            }}
+            className="dismiss-button"
             onclick={removeSelf}
             title="Close Notification"
             variant="contained"
@@ -133,16 +131,7 @@ export const NotyComponent = Shade<{ model: NotyModel; onDismiss: () => void }>(
             ✖
           </Button>
         </div>
-        <div
-          style={{
-            padding: '16px 20px 18px 20px',
-            fontSize: '0.9em',
-            lineHeight: '1.5',
-            fontWeight: '400',
-          }}
-        >
-          {props.model.body}
-        </div>
+        <div className="noty-body">{props.model.body}</div>
       </>
     )
   },
@@ -150,7 +139,7 @@ export const NotyComponent = Shade<{ model: NotyModel; onDismiss: () => void }>(
 
 export const NotyList = Shade({
   shadowDomName: 'shade-noty-list',
-  style: {
+  css: {
     position: 'fixed',
     bottom: '1em',
     right: '1em',

package/src/components/paper.spec.tsx

@@ -0,0 +1,72 @@
+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 { Paper } from './paper.js'
+
+describe('Paper', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  const renderPaper = async (props: Parameters<typeof Paper>[0] = {}, children?: JSX.Element[]) => {
+    const injector = new Injector()
+    const root = document.getElementById('root')!
+    initializeShadeRoot({
+      injector,
+      rootElement: root,
+      jsxElement: <Paper {...props}>{children}</Paper>,
+    })
+    await sleepAsync(50)
+    return {
+      injector,
+      paper: root.querySelector('div[is="shade-paper"]') as HTMLDivElement,
+    }
+  }
+
+  describe('rendering', () => {
+    it('should render a div element', async () => {
+      const { paper } = await renderPaper()
+      expect(paper).toBeTruthy()
+      expect(paper.tagName.toLowerCase()).toBe('div')
+      expect(paper.getAttribute('is')).toBe('shade-paper')
+    })
+
+    it('should render children', async () => {
+      const { paper } = await renderPaper({}, [<span>Child content</span>])
+      expect(paper.textContent).toContain('Child content')
+    })
+
+    it('should render multiple children', async () => {
+      const { paper } = await renderPaper({}, [<span>First</span>, <span>Second</span>])
+      expect(paper.textContent).toContain('First')
+      expect(paper.textContent).toContain('Second')
+    })
+  })
+
+  describe('elevation', () => {
+    it('should have data-elevation="1" by default', async () => {
+      const { paper } = await renderPaper()
+      expect(paper.getAttribute('data-elevation')).toBe('1')
+    })
+
+    it('should set data-elevation="1" for elevation 1', async () => {
+      const { paper } = await renderPaper({ elevation: 1 })
+      expect(paper.getAttribute('data-elevation')).toBe('1')
+    })
+
+    it('should set data-elevation="2" for elevation 2', async () => {
+      const { paper } = await renderPaper({ elevation: 2 })
+      expect(paper.getAttribute('data-elevation')).toBe('2')
+    })
+
+    it('should set data-elevation="3" for elevation 3', async () => {
+      const { paper } = await renderPaper({ elevation: 3 })
+      expect(paper.getAttribute('data-elevation')).toBe('3')
+    })
+  })
+})

package/src/components/paper.tsx

@@ -1,27 +1,29 @@
-import { attachStyles } from '@furystack/shades'
 import { Shade, createComponent } from '@furystack/shades'
-import { ThemeProviderService } from '../services/theme-provider-service.js'
+import { cssVariableTheme } from '../services/css-variable-theme.js'
 
 export const Paper = Shade<{ elevation?: 1 | 2 | 3 }>({
   shadowDomName: 'shade-paper',
   elementBase: HTMLDivElement,
   elementBaseName: 'div',
-  style: {
+  css: {
     borderRadius: '3px',
     margin: '8px',
     padding: '6px 16px',
+    backgroundColor: cssVariableTheme.background.paper,
+    color: cssVariableTheme.text.secondary,
+    '&[data-elevation="1"]': {
+      boxShadow: '1px 1px 1px rgba(0,0,0,0.3)',
+    },
+    '&[data-elevation="2"]': {
+      boxShadow: '1px 2px 2px rgba(0,0,0,0.3)',
+    },
+    '&[data-elevation="3"]': {
+      boxShadow: '1px 3px 3px rgba(0,0,0,0.3)',
+    },
   },
-  render: ({ injector, props, children, element }) => {
-    const themeProvider = injector.getInstance(ThemeProviderService)
+  render: ({ props, children, element }) => {
     const { elevation = 1 } = props
-
-    attachStyles(element, {
-      style: {
-        boxShadow: elevation ? `1px ${elevation}px ${elevation}px rgba(0,0,0,0.3)` : '',
-        backgroundColor: themeProvider.theme.background.paper,
-        color: themeProvider.theme.text.secondary,
-      },
-    })
+    element.setAttribute('data-elevation', elevation.toString())
 
     return <>{children}</>
   },

package/src/components/skeleton.spec.tsx

@@ -0,0 +1,219 @@
+import { Injector } from '@furystack/inject'
+import { createComponent, initializeShadeRoot } from '@furystack/shades'
+import { sleepAsync } from '@furystack/utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { Skeleton } from './skeleton.js'
+
+describe('Skeleton', () => {
+  let originalAnimate: typeof Element.prototype.animate
+  let animateCalls: Array<{ keyframes: unknown; options: unknown }>
+
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+    animateCalls = []
+    originalAnimate = Element.prototype.animate
+
+    Element.prototype.animate = vi.fn(
+      (keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions) => {
+        animateCalls.push({ keyframes, options })
+        const mockAnimation = {
+          onfinish: null as ((event: AnimationPlaybackEvent) => void) | null,
+          oncancel: null as ((event: AnimationPlaybackEvent) => void) | null,
+          cancel: vi.fn(),
+          play: vi.fn(),
+          pause: vi.fn(),
+          finish: vi.fn(),
+          addEventListener: vi.fn(),
+          removeEventListener: vi.fn(),
+        }
+
+        if (Array.isArray(keyframes) && keyframes.some((kf: Keyframe) => 'opacity' in kf)) {
+          setTimeout(() => {
+            if (mockAnimation.onfinish) {
+              mockAnimation.onfinish({} as AnimationPlaybackEvent)
+            }
+          }, 10)
+        }
+
+        return mockAnimation as unknown as Animation
+      },
+    ) as typeof Element.prototype.animate
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+    Element.prototype.animate = originalAnimate
+    vi.restoreAllMocks()
+  })
+
+  it('should render with shadow DOM', async () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <Skeleton />,
+    })
+
+    await sleepAsync(50)
+
+    const skeleton = document.querySelector('shade-skeleton')
+    expect(skeleton).not.toBeNull()
+  })
+
+  it('should have initial opacity of 0', async () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <Skeleton />,
+    })
+
+    await sleepAsync(50)
+
+    const skeleton = document.querySelector('shade-skeleton') as HTMLElement
+    expect(skeleton).not.toBeNull()
+
+    const computedStyle = window.getComputedStyle(skeleton)
+    expect(computedStyle.opacity).toBe('0')
+  })
+
+  it('should use default delay of 1500ms', async () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <Skeleton />,
+    })
+
+    await sleepAsync(50)
+
+    const fadeInCall = animateCalls.find(
+      (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'opacity' in kf),
+    )
+
+    expect(fadeInCall).toBeDefined()
+    expect((fadeInCall?.options as KeyframeAnimationOptions)?.delay).toBe(1500)
+  })
+
+  it('should use custom delay when provided', async () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <Skeleton delay={500} />,
+    })
+
+    await sleepAsync(50)
+
+    const fadeInCall = animateCalls.find(
+      (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'opacity' in kf),
+    )
+
+    expect(fadeInCall).toBeDefined()
+    expect((fadeInCall?.options as KeyframeAnimationOptions)?.delay).toBe(500)
+  })
+
+  it('should have correct css styles applied', async () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <Skeleton />,
+    })
+
+    await sleepAsync(50)
+
+    const skeleton = document.querySelector('shade-skeleton') as HTMLElement
+    expect(skeleton).not.toBeNull()
+
+    const computedStyle = window.getComputedStyle(skeleton)
+    expect(computedStyle.display).toBe('inline-block')
+  })
+
+  it('should start fade-in animation with correct parameters', async () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <Skeleton delay={100} />,
+    })
+
+    await sleepAsync(50)
+
+    const fadeInCall = animateCalls.find(
+      (call) =>
+        Array.isArray(call.keyframes) &&
+        call.keyframes.length === 2 &&
+        (call.keyframes[0] as Keyframe).opacity === 0 &&
+        (call.keyframes[1] as Keyframe).opacity === 1,
+    )
+
+    expect(fadeInCall).toBeDefined()
+
+    const options = fadeInCall?.options as KeyframeAnimationOptions
+    expect(options.fill).toBe('forwards')
+    expect(options.duration).toBe(300)
+    expect(options.easing).toBe('ease-out')
+    expect(options.delay).toBe(100)
+  })
+
+  it('should start background animation after fade-in completes', async () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <Skeleton delay={0} />,
+    })
+
+    await sleepAsync(100)
+
+    const backgroundAnimation = animateCalls.find(
+      (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'backgroundPosition' in kf),
+    )
+
+    expect(backgroundAnimation).toBeDefined()
+
+    const options = backgroundAnimation?.options as KeyframeAnimationOptions
+    expect(options.duration).toBe(10000)
+    expect(options.iterations).toBe(Infinity)
+  })
+
+  it('should have gradient background animation keyframes', async () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <Skeleton delay={0} />,
+    })
+
+    await sleepAsync(100)
+
+    const backgroundAnimation = animateCalls.find(
+      (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'backgroundPosition' in kf),
+    )
+
+    expect(backgroundAnimation).toBeDefined()
+
+    const keyframes = backgroundAnimation?.keyframes as Keyframe[]
+    expect(keyframes).toHaveLength(3)
+    expect(keyframes[0].backgroundPosition).toBe('0% 50%')
+    expect(keyframes[1].backgroundPosition).toBe('100% 50%')
+    expect(keyframes[2].backgroundPosition).toBe('0% 50%')
+  })
+})

package/src/components/skeleton.tsx

@@ -10,7 +10,7 @@ export type SkeletonProps = {
 
 export const Skeleton = Shade<SkeletonProps>({
   shadowDomName: 'shade-skeleton',
-  style: {
+  css: {
     opacity: '0',
     display: 'inline-block',
     background: 'linear-gradient(-45deg, rgba(128,128,128,0.1), rgba(128,128,128,0.3), rgba(128,128,128,0.1))',

package/src/components/styles.spec.ts

@@ -0,0 +1,70 @@
+import { describe, expect, it } from 'vitest'
+import { colors, styles } from './styles.js'
+
+describe('styles', () => {
+  describe('colors', () => {
+    describe('primary', () => {
+      it('should have light color', () => {
+        expect(colors.primary.light).toBe('#82e9de')
+      })
+
+      it('should have main color', () => {
+        expect(colors.primary.main).toBe('#4db6ac')
+      })
+
+      it('should have dark color', () => {
+        expect(colors.primary.dark).toBe('#00867d')
+      })
+
+      it('should have contrastText color', () => {
+        expect(colors.primary.contrastText).toBe('#000')
+      })
+    })
+
+    describe('secondary', () => {
+      it('should have light color', () => {
+        expect(colors.secondary.light).toBe('#62727b')
+      })
+
+      it('should have main color', () => {
+        expect(colors.secondary.main).toBe('#37474f')
+      })
+
+      it('should have dark color', () => {
+        expect(colors.secondary.dark).toBe('#102027')
+      })
+
+      it('should have contrastText color', () => {
+        expect(colors.secondary.contrastText).toBe('#fff')
+      })
+    })
+
+    describe('error', () => {
+      it('should have main color', () => {
+        expect(colors.error.main).toBe('red')
+      })
+    })
+  })
+
+  describe('styles', () => {
+    describe('glassBox', () => {
+      it('should have backdropFilter', () => {
+        expect(styles.glassBox.backdropFilter).toBe('blur(4px)')
+      })
+
+      it('should have borderRadius', () => {
+        expect(styles.glassBox.borderRadius).toBe('5px')
+      })
+
+      it('should have border', () => {
+        expect(styles.glassBox.border).toBe('1px solid rgba(128,128,128,.3)')
+      })
+
+      it('should have boxShadow', () => {
+        expect(styles.glassBox.boxShadow).toBe(
+          'rgba(0, 0, 0, 0.3) 2px 2px 2px, 1px 1px 3px -2px rgba(255,255,255,0.3) inset',
+        )
+      })
+    })
+  })
+})