@furystack/shades-common-components 11.0.0 → 12.0.1

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

@@ -1,6 +1,6 @@
 import { Injector } from '@furystack/inject'
 import { createComponent, initializeShadeRoot } from '@furystack/shades'
-import { sleepAsync } from '@furystack/utils'
+import { sleepAsync, usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it } from 'vitest'
 import { TextArea } from './text-area.js'
 
@@ -14,272 +14,287 @@ describe('TextArea', () => {
   })
 
   it('should render with shadow DOM', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <TextArea />,
-    })
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <TextArea />,
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const textArea = document.querySelector('shade-text-area')
-    expect(textArea).not.toBeNull()
+      const textArea = document.querySelector('shade-text-area')
+      expect(textArea).not.toBeNull()
+    })
   })
 
   it('should render label with labelTitle', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <TextArea labelTitle="Test Label" />,
-    })
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <TextArea labelTitle="Test Label" />,
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const textArea = document.querySelector('shade-text-area')
-    expect(textArea).not.toBeNull()
+      const textArea = document.querySelector('shade-text-area')
+      expect(textArea).not.toBeNull()
 
-    const label = textArea?.querySelector('label')
-    expect(label).not.toBeNull()
+      const label = textArea?.querySelector('label')
+      expect(label).not.toBeNull()
 
-    const span = textArea?.querySelector('span')
-    expect(span?.textContent).toBe('Test Label')
+      const span = textArea?.querySelector('span')
+      expect(span?.textContent).toBe('Test Label')
+    })
   })
 
   it('should apply labelProps to label element', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <TextArea labelTitle="Test" labelProps={{ className: 'custom-label-class' }} />,
-    })
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <TextArea labelTitle="Test" labelProps={{ className: 'custom-label-class' }} />,
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const textArea = document.querySelector('shade-text-area')
-    const label = textArea?.querySelector('label')
+      const textArea = document.querySelector('shade-text-area')
+      const label = textArea?.querySelector('label')
 
-    expect(label?.className).toBe('custom-label-class')
+      expect(label?.className).toBe('custom-label-class')
+    })
   })
 
   it('should set data-variant attribute for outlined variant', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <TextArea variant="outlined" />,
-    })
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <TextArea variant="outlined" />,
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const textArea = document.querySelector('shade-text-area') as HTMLElement
-    expect(textArea).not.toBeNull()
-    expect(textArea.getAttribute('data-variant')).toBe('outlined')
+      const textArea = document.querySelector('shade-text-area') as HTMLElement
+      expect(textArea).not.toBeNull()
+      expect(textArea.getAttribute('data-variant')).toBe('outlined')
+    })
   })
 
   it('should set data-variant attribute for contained variant', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <TextArea variant="contained" />,
-    })
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <TextArea variant="contained" />,
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const textArea = document.querySelector('shade-text-area') as HTMLElement
-    expect(textArea).not.toBeNull()
-    expect(textArea.getAttribute('data-variant')).toBe('contained')
+      const textArea = document.querySelector('shade-text-area') as HTMLElement
+      expect(textArea).not.toBeNull()
+      expect(textArea.getAttribute('data-variant')).toBe('contained')
+    })
   })
 
   it('should not set data-variant attribute when no variant is provided', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <TextArea />,
-    })
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <TextArea />,
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const textArea = document.querySelector('shade-text-area') as HTMLElement
-    expect(textArea).not.toBeNull()
-    expect(textArea.hasAttribute('data-variant')).toBe(false)
+      const textArea = document.querySelector('shade-text-area') as HTMLElement
+      expect(textArea).not.toBeNull()
+      expect(textArea.hasAttribute('data-variant')).toBe(false)
+    })
   })
 
   it('should set data-disabled attribute when disabled', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <TextArea disabled />,
-    })
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <TextArea disabled />,
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const textArea = document.querySelector('shade-text-area') as HTMLElement
-    expect(textArea).not.toBeNull()
-    expect(textArea.hasAttribute('data-disabled')).toBe(true)
+      const textArea = document.querySelector('shade-text-area') as HTMLElement
+      expect(textArea).not.toBeNull()
+      expect(textArea.hasAttribute('data-disabled')).toBe(true)
+    })
   })
 
   it('should not set data-disabled attribute when not disabled', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <TextArea disabled={false} />,
-    })
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <TextArea disabled={false} />,
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const textArea = document.querySelector('shade-text-area') as HTMLElement
-    expect(textArea).not.toBeNull()
-    expect(textArea.hasAttribute('data-disabled')).toBe(false)
+      const textArea = document.querySelector('shade-text-area') as HTMLElement
+      expect(textArea).not.toBeNull()
+      expect(textArea.hasAttribute('data-disabled')).toBe(false)
+    })
   })
 
   it('should render value in contentEditable div', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <TextArea value="Test content" />,
-    })
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <TextArea value="Test content" />,
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const textArea = document.querySelector('shade-text-area')
-    const contentDiv = textArea?.querySelector('.textarea-content')
+      const textArea = document.querySelector('shade-text-area')
+      const contentDiv = textArea?.querySelector('.textarea-content')
 
-    expect(contentDiv).not.toBeNull()
-    expect(contentDiv?.textContent).toBe('Test content')
+      expect(contentDiv).not.toBeNull()
+      expect(contentDiv?.textContent).toBe('Test content')
+    })
   })
 
   it('should have contentEditable true when not readOnly or disabled', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <TextArea />,
-    })
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <TextArea />,
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const textArea = document.querySelector('shade-text-area')
-    const contentDiv = textArea?.querySelector('.textarea-content') as HTMLElement
+      const textArea = document.querySelector('shade-text-area')
+      const contentDiv = textArea?.querySelector('.textarea-content') as HTMLElement
 
-    expect(contentDiv?.contentEditable).toBe('true')
+      expect(contentDiv?.contentEditable).toBe('true')
+    })
   })
 
   it('should have contentEditable inherit when readOnly is true', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <TextArea readOnly />,
-    })
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <TextArea readOnly />,
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const textArea = document.querySelector('shade-text-area')
-    const contentDiv = textArea?.querySelector('.textarea-content') as HTMLElement
+      const textArea = document.querySelector('shade-text-area')
+      const contentDiv = textArea?.querySelector('.textarea-content') as HTMLElement
 
-    expect(contentDiv?.contentEditable).toBe('inherit')
+      expect(contentDiv?.contentEditable).toBe('inherit')
+    })
   })
 
   it('should have contentEditable inherit when disabled is true', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <TextArea disabled />,
-    })
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <TextArea disabled />,
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const textArea = document.querySelector('shade-text-area')
-    const contentDiv = textArea?.querySelector('.textarea-content') as HTMLElement
+      const textArea = document.querySelector('shade-text-area')
+      const contentDiv = textArea?.querySelector('.textarea-content') as HTMLElement
 
-    expect(contentDiv?.contentEditable).toBe('inherit')
+      expect(contentDiv?.contentEditable).toBe('inherit')
+    })
   })
 
   it('should apply custom style to content div', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <TextArea style={{ color: 'red' }} />,
-    })
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <TextArea style={{ color: 'red' }} />,
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const textArea = document.querySelector('shade-text-area')
-    const contentDiv = textArea?.querySelector('.textarea-content') as HTMLElement
+      const textArea = document.querySelector('shade-text-area')
+      const contentDiv = textArea?.querySelector('.textarea-content') as HTMLElement
 
-    expect(contentDiv?.style.color).toBe('red')
+      expect(contentDiv?.style.color).toBe('red')
+    })
   })
 
   it('should apply custom style to label element', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <TextArea labelProps={{ style: { backgroundColor: 'blue' } }} />,
-    })
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <TextArea labelProps={{ style: { backgroundColor: 'blue' } }} />,
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const textArea = document.querySelector('shade-text-area')
-    const label = textArea?.querySelector('label') as HTMLElement
+      const textArea = document.querySelector('shade-text-area')
+      const label = textArea?.querySelector('label') as HTMLElement
 
-    expect(label?.style.backgroundColor).toBe('blue')
+      expect(label?.style.backgroundColor).toBe('blue')
+    })
   })
 
   it('should have correct CSS styles applied', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <TextArea />,
-    })
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <TextArea />,
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const textArea = document.querySelector('shade-text-area') as HTMLElement
-    expect(textArea).not.toBeNull()
+      const textArea = document.querySelector('shade-text-area') as HTMLElement
+      expect(textArea).not.toBeNull()
 
-    const computedStyle = window.getComputedStyle(textArea)
-    expect(computedStyle.display).toBe('block')
-    expect(computedStyle.marginBottom).toBe('1em')
+      const computedStyle = window.getComputedStyle(textArea)
+      expect(computedStyle.display).toBe('block')
+      expect(computedStyle.marginBottom).toBe('1em')
+    })
   })
 })

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

@@ -19,18 +19,18 @@ export const TextArea = Shade<TextAreaProps>({
       flexDirection: 'column',
       alignItems: 'flex-start',
       justifyContent: 'space-between',
-      fontSize: '10px',
-      color: '#bbb',
+      fontSize: cssVariableTheme.typography.fontSize.xs,
+      color: cssVariableTheme.text.secondary,
       padding: '1em',
-      borderRadius: '5px',
+      borderRadius: cssVariableTheme.shape.borderRadius.md,
       border: 'none',
-      transition: 'color 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955)',
+      transition: `color ${cssVariableTheme.transitions.duration.slow} ${cssVariableTheme.transitions.easing.default}`,
     },
     '&[data-variant="outlined"] label': {
-      border: '1px solid #bbb',
+      border: `1px solid ${cssVariableTheme.action.subtleBorder}`,
     },
     '&[data-disabled] label': {
-      color: 'rgb(170, 170, 170)',
+      color: cssVariableTheme.text.disabled,
     },
     '&:focus-within label': {
       color: cssVariableTheme.palette.primary.main,
@@ -39,27 +39,21 @@ export const TextArea = Shade<TextAreaProps>({
       border: 'none',
       backgroundColor: 'transparent',
       outline: 'none',
-      fontSize: '12px',
+      fontSize: cssVariableTheme.typography.fontSize.sm,
       width: '100%',
       textOverflow: 'ellipsis',
       boxShadow: '0px 0px 0px rgba(128,128,128,0.1)',
-      transition: 'box-shadow 0.2s ease',
+      transition: `box-shadow ${cssVariableTheme.transitions.duration.normal} 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')
-    }
+  render: ({ props, useHostProps }) => {
+    useHostProps({
+      'data-variant': props.variant || undefined,
+      'data-disabled': props.disabled ? '' : undefined,
+    })
 
     return (
       <label {...props.labelProps} style={props.labelProps?.style}>