@furystack/shades-common-components 10.0.35 → 11.0.0

package/src/components/inputs/text-area.tsx

@@ -1,7 +1,6 @@
 import type { PartialElement } from '@furystack/shades'
 import { createComponent, Shade } from '@furystack/shades'
-import { ThemeProviderService } from '../../services/theme-provider-service.js'
-import { promisifyAnimation } from '../../utils/promisify-animation.js'
+import { cssVariableTheme } from '../../services/css-variable-theme.js'
 
 export interface TextAreaProps extends PartialElement<HTMLTextAreaElement> {
   labelTitle?: string
@@ -12,90 +11,65 @@ export interface TextAreaProps extends PartialElement<HTMLTextAreaElement> {
 
 export const TextArea = Shade<TextAreaProps>({
   shadowDomName: 'shade-text-area',
-  render: ({ props, element, injector }) => {
-    const themeProvider = injector.getInstance(ThemeProviderService)
-    const { theme } = themeProvider
-    const { palette } = theme
+  css: {
+    display: 'block',
+    marginBottom: '1em',
+    '& label': {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+      justifyContent: 'space-between',
+      fontSize: '10px',
+      color: '#bbb',
+      padding: '1em',
+      borderRadius: '5px',
+      border: 'none',
+      transition: 'color 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955)',
+    },
+    '&[data-variant="outlined"] label': {
+      border: '1px solid #bbb',
+    },
+    '&[data-disabled] label': {
+      color: 'rgb(170, 170, 170)',
+    },
+    '&:focus-within label': {
+      color: cssVariableTheme.palette.primary.main,
+    },
+    '& .textarea-content': {
+      border: 'none',
+      backgroundColor: 'transparent',
+      outline: 'none',
+      fontSize: '12px',
+      width: '100%',
+      textOverflow: 'ellipsis',
+      boxShadow: '0px 0px 0px rgba(128,128,128,0.1)',
+      transition: 'box-shadow 0.2s ease',
+    },
+    '&:focus-within .textarea-content': {
+      boxShadow: `0px 3px 0px ${cssVariableTheme.palette.primary.main}`,
+    },
+  },
+  render: ({ props, element }) => {
+    if (props.variant) {
+      element.setAttribute('data-variant', props.variant)
+    } else {
+      element.removeAttribute('data-variant')
+    }
+    if (props.disabled) {
+      element.setAttribute('data-disabled', '')
+    } else {
+      element.removeAttribute('data-disabled')
+    }
 
     return (
-      <label
-        {...props.labelProps}
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'flex-start',
-          justifyContent: 'space-between',
-          fontSize: '10px',
-          color: props.disabled ? 'rgb(170, 170, 170)' : '#bbb',
-          marginBottom: '1em',
-          padding: '1em',
-          borderRadius: '5px',
-          border: props.variant === 'outlined' ? '1px solid #bbb' : 'none',
-          ...props.labelProps?.style,
-        }}
-      >
+      <label {...props.labelProps} style={props.labelProps?.style}>
         <span>{props.labelTitle}</span>
 
         <div
+          className="textarea-content"
           contentEditable={props.readOnly === true || props.disabled === true ? 'inherit' : 'true'}
           {...props}
-          style={{
-            border: 'none',
-            backgroundColor: 'transparent',
-            outline: 'none',
-            fontSize: '12px',
-            width: '100%',
-            textOverflow: 'ellipsis',
-            ...props.style,
-          }}
-          onfocus={() => {
-            if (!props.disabled) {
-              void promisifyAnimation(
-                element.querySelector('label'),
-                [{ color: themeProvider.getTextColor(theme.background.default) }, { color: palette.primary.main }],
-                {
-                  duration: 500,
-                  easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
-                  fill: 'forwards',
-                },
-              )
-              void promisifyAnimation(
-                element.querySelector('div[contenteditable="true"]'),
-                [
-                  { boxShadow: '0px 0px 0px rgba(128,128,128,0.1)' },
-                  { boxShadow: `0px 3px 0px ${palette.primary.main}` },
-                ],
-                {
-                  duration: 200,
-                  fill: 'forwards',
-                },
-              )
-            }
-          }}
-          onblur={() => {
-            if (!props.disabled) {
-              void promisifyAnimation(
-                element.querySelector('label'),
-                [{ color: palette.primary.main }, { color: themeProvider.getTextColor(theme.background.default) }],
-                {
-                  duration: 200,
-                  easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
-                  fill: 'forwards',
-                },
-              )
-              void promisifyAnimation(
-                element.querySelector('div[contenteditable="true"]'),
-                [
-                  { boxShadow: '0px 3px 0px rgba(128,128,128,0.4)' },
-                  { boxShadow: '0px 0px 0px rgba(128,128,128,0.1)' },
-                ],
-                {
-                  duration: 400,
-                  fill: 'forwards',
-                },
-              )
-            }
-          }}
+          style={props.style}
         >
           {props.value}
         </div>

package/src/components/loader.spec.tsx

@@ -0,0 +1,346 @@
+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 { ThemeProviderService } from '../services/theme-provider-service.js'
+import { Loader } from './loader.js'
+
+describe('Loader', () => {
+  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(),
+        }
+
+        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: <Loader />,
+    })
+
+    await sleepAsync(50)
+
+    const loader = document.querySelector('shade-loader')
+    expect(loader).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: <Loader />,
+    })
+
+    await sleepAsync(50)
+
+    const loader = document.querySelector('shade-loader') as HTMLElement
+    expect(loader).not.toBeNull()
+
+    const computedStyle = window.getComputedStyle(loader)
+    expect(computedStyle.opacity).toBe('0')
+  })
+
+  it('should have correct css styles applied', async () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <Loader />,
+    })
+
+    await sleepAsync(50)
+
+    const loader = document.querySelector('shade-loader') as HTMLElement
+    expect(loader).not.toBeNull()
+
+    const computedStyle = window.getComputedStyle(loader)
+    expect(computedStyle.display).toBe('inline-block')
+    expect(computedStyle.transformOrigin).toBe('center')
+  })
+
+  it('should use default delay of 500ms', async () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <Loader />,
+    })
+
+    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 use custom delay when provided', async () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <Loader delay={200} />,
+    })
+
+    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(200)
+  })
+
+  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: <Loader 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(500)
+    expect(options.delay).toBe(100)
+  })
+
+  it('should start rotation animation', async () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <Loader />,
+    })
+
+    await sleepAsync(50)
+
+    const rotationCall = animateCalls.find(
+      (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'transform' in kf),
+    )
+
+    expect(rotationCall).toBeDefined()
+
+    const options = rotationCall?.options as KeyframeAnimationOptions
+    expect(options.duration).toBe(1500)
+    expect(options.easing).toBe('ease-in-out')
+    expect(options.iterations).toBe(Infinity)
+  })
+
+  it('should have rotation keyframes from 0 to 360 degrees', async () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <Loader />,
+    })
+
+    await sleepAsync(50)
+
+    const rotationCall = animateCalls.find(
+      (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'transform' in kf),
+    )
+
+    expect(rotationCall).toBeDefined()
+
+    const keyframes = rotationCall?.keyframes as Keyframe[]
+    expect(keyframes).toHaveLength(3)
+    expect(keyframes[0].transform).toBe('rotate(0deg)')
+    expect(keyframes[1].transform).toBe('rotate(180deg)')
+    expect(keyframes[2].transform).toBe('rotate(360deg)')
+  })
+
+  it('should use default borderWidth of 15px', async () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <Loader />,
+    })
+
+    await sleepAsync(50)
+
+    const loader = document.querySelector('shade-loader') as HTMLElement
+    expect(loader).not.toBeNull()
+
+    const innerDiv = loader.querySelector('div') as HTMLElement
+    expect(innerDiv).not.toBeNull()
+
+    expect(innerDiv.style.width).toBe('calc(100% - 30px)')
+    expect(innerDiv.style.height).toBe('calc(100% - 30px)')
+    expect(innerDiv.style.borderTopWidth).toBe('15px')
+  })
+
+  it('should use custom borderWidth when provided', async () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <Loader borderWidth={10} />,
+    })
+
+    await sleepAsync(50)
+
+    const loader = document.querySelector('shade-loader') as HTMLElement
+    expect(loader).not.toBeNull()
+
+    const innerDiv = loader.querySelector('div') as HTMLElement
+    expect(innerDiv).not.toBeNull()
+
+    expect(innerDiv.style.width).toBe('calc(100% - 20px)')
+    expect(innerDiv.style.height).toBe('calc(100% - 20px)')
+    expect(innerDiv.style.borderTopWidth).toBe('10px')
+  })
+
+  it('should use custom borderColor when provided', async () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <Loader borderColor="#ff0000" />,
+    })
+
+    await sleepAsync(50)
+
+    const loader = document.querySelector('shade-loader') as HTMLElement
+    expect(loader).not.toBeNull()
+
+    const innerDiv = loader.querySelector('div') as HTMLElement
+    expect(innerDiv).not.toBeNull()
+
+    expect(innerDiv.style.borderBottomColor).toBe('rgb(255, 0, 0)')
+  })
+
+  it('should use theme primary color as default borderColor', async () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <Loader />,
+    })
+
+    await sleepAsync(50)
+
+    const loader = document.querySelector('shade-loader') as HTMLElement
+    expect(loader).not.toBeNull()
+
+    const innerDiv = loader.querySelector('div') as HTMLElement
+    expect(innerDiv).not.toBeNull()
+
+    const themeService = injector.getInstance(ThemeProviderService)
+    expect(innerDiv.style.borderBottom).toContain(themeService.theme.palette.primary.main)
+  })
+
+  it('should render with circular shape', async () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <Loader />,
+    })
+
+    await sleepAsync(50)
+
+    const loader = document.querySelector('shade-loader') as HTMLElement
+    expect(loader).not.toBeNull()
+
+    const innerDiv = loader.querySelector('div') as HTMLElement
+    expect(innerDiv).not.toBeNull()
+
+    expect(innerDiv.style.borderRadius).toBe('50%')
+    expect(innerDiv.style.position).toBe('relative')
+  })
+
+  it('should have a semi-transparent main border and colored bottom border', async () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <Loader borderColor="#00ff00" />,
+    })
+
+    await sleepAsync(50)
+
+    const loader = document.querySelector('shade-loader') as HTMLElement
+    expect(loader).not.toBeNull()
+
+    const innerDiv = loader.querySelector('div') as HTMLElement
+    expect(innerDiv).not.toBeNull()
+
+    expect(innerDiv.style.borderTopColor).toBe('rgba(128, 128, 128, 0.1)')
+    expect(innerDiv.style.borderBottomColor).toBe('rgb(0, 255, 0)')
+  })
+})

package/src/components/loader.tsx

@@ -25,7 +25,7 @@ interface LoaderProps {
 
 export const Loader = Shade<LoaderProps>({
   shadowDomName: 'shade-loader',
-  style: {
+  css: {
     display: 'inline-block',
     transformOrigin: 'center',
     opacity: '0',