@furystack/shades-common-components 10.0.35 → 12.0.0

package/src/components/searchable-input-styles.ts

@@ -0,0 +1,81 @@
+import type { CSSObject } from '@furystack/shades'
+import { cssVariableTheme } from '../services/css-variable-theme.js'
+
+/**
+ * Shared CSS styles for searchable input components (CommandPalette, Suggest).
+ * These components share the same input container, term icon, post controls,
+ * and close button patterns.
+ */
+export const searchableInputStyles: CSSObject = {
+  flexGrow: '1',
+
+  '& .input-container': {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    padding: '0 1.25em',
+    borderRadius: cssVariableTheme.shape.borderRadius.lg,
+    position: 'relative',
+    background: cssVariableTheme.action.hoverBackground,
+    border: `1px solid ${cssVariableTheme.action.subtleBorder}`,
+    boxShadow: cssVariableTheme.shadows.sm,
+    transition: `all ${cssVariableTheme.transitions.duration.slow} ${cssVariableTheme.transitions.easing.default}`,
+  },
+
+  '&[data-opened] .input-container': {
+    background: cssVariableTheme.background.default,
+    border: `1px solid ${cssVariableTheme.action.subtleBorder}`,
+    boxShadow: cssVariableTheme.shadows.md,
+  },
+
+  '& .term-icon': {
+    cursor: 'pointer',
+    color: cssVariableTheme.text.secondary,
+    fontWeight: cssVariableTheme.typography.fontWeight.semibold,
+    fontSize: '0.95em',
+    transition: `color ${cssVariableTheme.transitions.duration.normal} ease`,
+    padding: '0.5em 0.75em 0.5em 0',
+    userSelect: 'none',
+  },
+
+  '& .term-icon:hover': {
+    color: cssVariableTheme.text.primary,
+  },
+
+  '& .post-controls': {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '0px',
+    overflow: 'hidden',
+  },
+
+  '&[data-opened] .post-controls': {
+    width: '50px',
+  },
+
+  '& .close-suggestions': {
+    width: '24px',
+    height: '24px',
+    opacity: '0',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    cursor: 'pointer',
+    borderRadius: cssVariableTheme.shape.borderRadius.sm,
+    transition: `all ${cssVariableTheme.transitions.duration.normal} ease`,
+    fontSize: cssVariableTheme.typography.fontSize.md,
+    color: cssVariableTheme.text.secondary,
+    background: 'transparent',
+    transform: 'scale(1)',
+  },
+
+  '&[data-opened] .close-suggestions': {
+    opacity: '1',
+  },
+
+  '& .close-suggestions:hover': {
+    background: cssVariableTheme.action.hoverBackground,
+    transform: 'scale(1.1)',
+  },
+}

package/src/components/skeleton.spec.tsx

@@ -0,0 +1,227 @@
+import { Injector } from '@furystack/inject'
+import { createComponent, initializeShadeRoot } from '@furystack/shades'
+import { sleepAsync, usingAsync } 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 () => {
+    await usingAsync(new Injector(), async (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 () => {
+    await usingAsync(new Injector(), async (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 () => {
+    await usingAsync(new Injector(), async (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 () => {
+    await usingAsync(new Injector(), async (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 () => {
+    await usingAsync(new Injector(), async (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 () => {
+    await usingAsync(new Injector(), async (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 () => {
+    await usingAsync(new Injector(), async (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 () => {
+    await usingAsync(new Injector(), async (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

@@ -1,4 +1,5 @@
-import { Shade } from '@furystack/shades'
+import { Shade, createComponent } from '@furystack/shades'
+import { cssVariableTheme } from '../services/css-variable-theme.js'
 import { promisifyAnimation } from '../utils/promisify-animation.js'
 
 export type SkeletonProps = {
@@ -10,26 +11,29 @@ 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))',
+    background: `linear-gradient(-45deg, color-mix(in srgb, ${cssVariableTheme.text.secondary} 10%, transparent), color-mix(in srgb, ${cssVariableTheme.text.secondary} 30%, transparent), color-mix(in srgb, ${cssVariableTheme.text.secondary} 10%, transparent))`,
     backgroundSize: '400% 400%',
     width: '100%',
     height: '100%',
     minHeight: '1em',
   },
-  render: ({ element, props }) => {
+  render: ({ props, useRef }) => {
+    const wrapperRef = useRef<HTMLDivElement>('wrapper')
     const { delay = 1500 } = props
     setTimeout(() => {
-      void promisifyAnimation(element, [{ opacity: 0 }, { opacity: 1 }], {
+      const el = wrapperRef.current
+      if (!el) return
+      void promisifyAnimation(el, [{ opacity: 0 }, { opacity: 1 }], {
         fill: 'forwards',
         duration: 300,
         easing: 'ease-out',
         delay,
       }).then(() => {
         void promisifyAnimation(
-          element,
+          el,
           [{ backgroundPosition: '0% 50%' }, { backgroundPosition: '100% 50%' }, { backgroundPosition: '0% 50%' }],
           {
             duration: 10000,
@@ -39,6 +43,19 @@ export const Skeleton = Shade<SkeletonProps>({
       })
     })
 
-    return null
+    return (
+      <div
+        ref={wrapperRef}
+        style={{
+          opacity: '0',
+          display: 'inline-block',
+          background: 'inherit',
+          backgroundSize: 'inherit',
+          width: '100%',
+          height: '100%',
+          minHeight: '1em',
+        }}
+      />
+    )
   },
 })

package/src/components/styles.spec.ts

@@ -0,0 +1,69 @@
+import { describe, expect, it } from 'vitest'
+import { cssVariableTheme } from '../services/css-variable-theme.js'
+import { colors, styles } from './styles.js'
+
+describe('styles', () => {
+  describe('colors', () => {
+    describe('primary', () => {
+      it('should reference theme palette primary light', () => {
+        expect(colors.primary.light).toBe(cssVariableTheme.palette.primary.light)
+      })
+
+      it('should reference theme palette primary main', () => {
+        expect(colors.primary.main).toBe(cssVariableTheme.palette.primary.main)
+      })
+
+      it('should reference theme palette primary dark', () => {
+        expect(colors.primary.dark).toBe(cssVariableTheme.palette.primary.dark)
+      })
+
+      it('should reference theme palette primary mainContrast', () => {
+        expect(colors.primary.contrastText).toBe(cssVariableTheme.palette.primary.mainContrast)
+      })
+    })
+
+    describe('secondary', () => {
+      it('should reference theme palette secondary light', () => {
+        expect(colors.secondary.light).toBe(cssVariableTheme.palette.secondary.light)
+      })
+
+      it('should reference theme palette secondary main', () => {
+        expect(colors.secondary.main).toBe(cssVariableTheme.palette.secondary.main)
+      })
+
+      it('should reference theme palette secondary dark', () => {
+        expect(colors.secondary.dark).toBe(cssVariableTheme.palette.secondary.dark)
+      })
+
+      it('should reference theme palette secondary mainContrast', () => {
+        expect(colors.secondary.contrastText).toBe(cssVariableTheme.palette.secondary.mainContrast)
+      })
+    })
+
+    describe('error', () => {
+      it('should reference theme palette error main', () => {
+        expect(colors.error.main).toBe(cssVariableTheme.palette.error.main)
+      })
+    })
+  })
+
+  describe('styles', () => {
+    describe('glassBox', () => {
+      it('should have backdropFilter using theme blur token', () => {
+        expect(styles.glassBox.backdropFilter).toBe(`blur(${cssVariableTheme.effects.blurSm})`)
+      })
+
+      it('should have borderRadius using theme token', () => {
+        expect(styles.glassBox.borderRadius).toBe(cssVariableTheme.shape.borderRadius.sm)
+      })
+
+      it('should have border using theme subtleBorder', () => {
+        expect(styles.glassBox.border).toBe(`1px solid ${cssVariableTheme.action.subtleBorder}`)
+      })
+
+      it('should have boxShadow using theme shadow', () => {
+        expect(styles.glassBox.boxShadow).toBe(cssVariableTheme.shadows.md)
+      })
+    })
+  })
+})

package/src/components/styles.tsx

@@ -1,3 +1,5 @@
+import { cssVariableTheme } from '../services/css-variable-theme.js'
+
 declare global {
   interface CSSStyleDeclaration {
     backdropFilter: string
@@ -5,27 +7,27 @@ declare global {
 }
 
 const glassBox: Partial<CSSStyleDeclaration> = {
-  backdropFilter: 'blur(4px)',
-  borderRadius: '5px',
-  border: '1px solid rgba(128,128,128,.3)',
-  boxShadow: 'rgba(0, 0, 0, 0.3) 2px 2px 2px, 1px 1px 3px -2px rgba(255,255,255,0.3) inset',
+  backdropFilter: `blur(${cssVariableTheme.effects.blurSm})`,
+  borderRadius: cssVariableTheme.shape.borderRadius.sm,
+  border: `1px solid ${cssVariableTheme.action.subtleBorder}`,
+  boxShadow: cssVariableTheme.shadows.md,
 }
 
 export const colors = {
   primary: {
-    light: '#82e9de',
-    main: '#4db6ac',
-    dark: '#00867d',
-    contrastText: '#000',
+    light: cssVariableTheme.palette.primary.light,
+    main: cssVariableTheme.palette.primary.main,
+    dark: cssVariableTheme.palette.primary.dark,
+    contrastText: cssVariableTheme.palette.primary.mainContrast,
   },
   secondary: {
-    light: '#62727b',
-    main: '#37474f',
-    dark: '#102027',
-    contrastText: '#fff',
+    light: cssVariableTheme.palette.secondary.light,
+    main: cssVariableTheme.palette.secondary.main,
+    dark: cssVariableTheme.palette.secondary.dark,
+    contrastText: cssVariableTheme.palette.secondary.mainContrast,
   },
   error: {
-    main: 'red',
+    main: cssVariableTheme.palette.error.main,
   },
 }