@furystack/shades-common-components 3.6.1 → 4.0.1

package/src/components/fab.tsx

@@ -1,30 +1,28 @@
 import type { PartialElement } from '@furystack/shades'
+import { attachProps } from '@furystack/shades'
 import { Shade, createComponent } from '@furystack/shades'
 
 export const Fab = Shade<PartialElement<HTMLDivElement>>({
   shadowDomName: 'shade-fab',
-  render: ({ props, children }) => {
-    return (
-      <div
-        {...props}
-        style={{
-          position: 'fixed',
-          bottom: '32px',
-          right: '32px',
-          background: 'gray',
-          width: '64px',
-          height: '64px',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          borderRadius: '50%',
-          boxShadow: '2px 2px 4px rgba(0,0,0,0.3)',
-          cursor: 'pointer',
-          ...props.style,
-        }}
-      >
-        {children}
-      </div>
-    )
+  render: ({ props, children, element }) => {
+    attachProps(element, {
+      ...props,
+      style: {
+        position: 'fixed',
+        bottom: '32px',
+        right: '32px',
+        background: 'gray',
+        width: '64px',
+        height: '64px',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: '50%',
+        boxShadow: '2px 2px 4px rgba(0,0,0,0.3)',
+        cursor: 'pointer',
+        ...props?.style,
+      },
+    })
+    return <>{children}</>
   },
 })

package/src/components/grid.tsx

@@ -23,7 +23,7 @@ export type RowCells<T> = {
   [TKey in keyof T | 'default']?: (element: T) => JSX.Element
 }
 
-export const Grid: <T>(props: GridProps<T>, children: ChildrenList) => JSX.Element<any, any> = Shade({
+export const Grid: <T>(props: GridProps<T>, children: ChildrenList) => JSX.Element<any> = Shade({
   shadowDomName: 'shade-grid',
   render: ({ props, injector }) => {
     const { theme } = injector.getInstance(ThemeProviderService)

package/src/components/inputs/autocomplete.tsx

@@ -2,27 +2,21 @@ import { Shade, createComponent } from '@furystack/shades'
 import type { TextInputProps } from './input'
 import { Input } from './input'
 
-export const Autocomplete = Shade<
-  { inputProps?: TextInputProps; suggestions: string[]; strict?: boolean; onchange?: (value: string) => void },
-  { dataListId: string }
->({
-  getInitialState: () => ({
-    dataListId: (Math.random() + 1).toString(36).substring(3),
-  }),
-  constructed: ({ getState, element }) => {
-    const { dataListId } = getState()
-    const input = element.querySelector('input')
-    if (input) {
-      input.setAttribute('list', dataListId)
-    }
-  },
+export const Autocomplete = Shade<{
+  inputProps?: TextInputProps
+  suggestions: string[]
+  strict?: boolean
+  onchange?: (value: string) => void
+}>({
   shadowDomName: 'shade-autocomplete',
-  render: ({ props, getState }) => {
-    const { dataListId } = getState()
+  render: ({ props, useState }) => {
+    const [dataListId] = useState('dataListId', (Math.random() + 1).toString(36).substring(3))
+
     return (
       <div>
         <Input
           {...props.inputProps}
+          list={dataListId as any}
           onchange={(ev) => {
             const { value } = ev.target as any
             if (props.strict) {

package/src/components/inputs/input.tsx

@@ -1,5 +1,6 @@
 import type { PartialElement } from '@furystack/shades'
 import { Shade, createComponent, attachStyles } from '@furystack/shades'
+import { ObservableValue } from '@furystack/utils'
 import { ThemeProviderService } from '../..'
 import type { Palette } from '../../services'
 
@@ -106,33 +107,32 @@ const getLabelStyle = ({
   }
 }
 
-export const Input = Shade<TextInputProps, TextInputState>({
+export const Input = Shade<TextInputProps>({
   shadowDomName: 'shade-input',
-  getInitialState: ({ props }) => ({
-    value: props.value || '',
-    focused: props.autofocus || false,
-    validity: { valid: true } as ValidityState,
-  }),
-  compareState: ({ newState, element, props, injector }) => {
+  render: ({ props, injector, useObservable, element }) => {
     const themeProvider = injector.getInstance(ThemeProviderService)
-    const label = element.querySelector('label') as HTMLLabelElement
-    attachStyles(label, { style: getLabelStyle({ themeProvider, props, state: newState }) })
 
-    const helper = element.querySelector<HTMLSpanElement>('span.helperText')
-    const helperNode = props.getHelperText?.({ state: newState }) || ''
-    helper?.replaceChildren(helperNode)
+    const [state, setState] = useObservable<TextInputState>(
+      'inputState',
+      new ObservableValue({
+        value: props.value || '',
+        focused: props.autofocus || false,
+        validity: { valid: true } as ValidityState,
+      }),
+      (newState) => {
+        const label = element.querySelector('label') as HTMLLabelElement
+        attachStyles(label, { style: getLabelStyle({ themeProvider, props, state: newState }) })
 
-    const startIcon = element.querySelector<HTMLSpanElement>('span.startIcon')
-    startIcon?.replaceChildren(props.getStartIcon?.({ state: newState }) || '')
-    const endIcon = element.querySelector<HTMLSpanElement>('span.endIcon')
-    endIcon?.replaceChildren(props.getEndIcon?.({ state: newState }) || '')
+        const helper = element.querySelector<HTMLSpanElement>('span.helperText')
+        const helperNode = props.getHelperText?.({ state: newState }) || ''
+        helper?.replaceChildren(helperNode)
 
-    return false
-  },
-  render: ({ props, getState, updateState, injector }) => {
-    const state = getState()
-    const { value } = state
-    const themeProvider = injector.getInstance(ThemeProviderService)
+        const startIcon = element.querySelector<HTMLSpanElement>('span.startIcon')
+        startIcon?.replaceChildren(props.getStartIcon?.({ state: newState }) || '')
+        const endIcon = element.querySelector<HTMLSpanElement>('span.endIcon')
+        endIcon?.replaceChildren(props.getEndIcon?.({ state: newState }) || '')
+      },
+    )
 
     return (
       <label {...props.labelProps} style={getLabelStyle({ props, state, themeProvider })}>
@@ -150,20 +150,20 @@ export const Input = Shade<TextInputProps, TextInputState>({
             oninvalid={(ev) => {
               ev.preventDefault()
               const el = ev.target as HTMLInputElement
-              updateState({ validity: el.validity })
+              setState({ ...state, validity: el.validity })
             }}
             onchange={(ev) => {
               const el = ev.target as HTMLInputElement
               const newValue = el.value
-              updateState({ value: newValue, validity: el?.validity })
+              setState({ ...state, value: newValue, validity: el?.validity })
               props.onTextChange?.(newValue)
               props.onchange && (props.onchange as any)(ev)
             }}
             onfocus={() => {
-              updateState({ focused: true })
+              setState({ ...state, focused: true })
             }}
             onblur={() => {
-              updateState({ focused: false })
+              setState({ ...state, focused: false })
             }}
             {...props}
             style={{
@@ -180,7 +180,7 @@ export const Input = Shade<TextInputProps, TextInputState>({
               flexGrow: '1',
               ...props.style,
             }}
-            value={value}
+            value={state.value}
           />
           {props.getEndIcon ? <span className="endIcon">{props.getEndIcon({ state })}</span> : null}
         </div>

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

@@ -10,19 +10,11 @@ export interface TextAreaProps extends PartialElement<HTMLTextAreaElement> {
   variant?: 'contained' | 'outlined'
 }
 
-export type TextAreaInputState = {
-  value?: string
-}
-
-export const TextArea = Shade<TextAreaProps, TextAreaInputState>({
+export const TextArea = Shade<TextAreaProps>({
   shadowDomName: 'shade-text-area',
-  getInitialState: ({ props }) => ({
-    value: props.value,
-  }),
-  render: ({ props, element, injector, getState }) => {
+  render: ({ props, element, injector }) => {
     const themeProvider = injector.getInstance(ThemeProviderService)
     const { theme } = themeProvider
-    const { value } = getState()
     const { palette } = theme
 
     return (
@@ -105,7 +97,7 @@ export const TextArea = Shade<TextAreaProps, TextAreaInputState>({
             }
           }}
         >
-          {value}
+          {props.value}
         </div>
       </label>
     )

package/src/components/loader.tsx

@@ -1,4 +1,5 @@
 import { Shade, createComponent } from '@furystack/shades'
+import { ThemeProviderService } from '../services'
 import { promisifyAnimation } from '../utils'
 
 interface LoaderProps {
@@ -10,15 +11,29 @@ interface LoaderProps {
    * The time to wait before the loader shows up
    */
   delay?: number
+
+  /**
+   * The color of the loader
+   */
+  borderColor?: string
+
+  /**
+   * The width of the border
+   */
+  borderWidth?: number
 }
 
 export const Loader = Shade<LoaderProps>({
   shadowDomName: 'shade-loader',
-  render: ({ element, props }) => {
+  render: ({ element, props, injector }) => {
+    const { theme } = injector.getInstance(ThemeProviderService)
+
     element.style.display = 'inline-block'
     element.style.transformOrigin = 'center'
     element.style.opacity = '0'
     const { delay = 500 } = props
+    const { borderWidth = 15 } = props
+    const { borderColor = theme.palette.primary.main } = props
 
     setTimeout(() => {
       promisifyAnimation(element, [{ opacity: '0' }, { opacity: '1' }], {
@@ -40,10 +55,10 @@ export const Loader = Shade<LoaderProps>({
       <div
         style={{
           position: 'relative',
-          width: 'calc(100% - 30px)',
-          height: 'calc(100% - 30px)',
-          border: '15px solid rgba(128,128,128,0.1)',
-          borderBottom: '15px solid red',
+          width: `calc(100% - ${borderWidth * 2}px)`,
+          height: `calc(100% - ${borderWidth * 2}px)`,
+          border: `${borderWidth}px solid rgba(128,128,128,0.1)`,
+          borderBottom: `${borderWidth}px solid ${borderColor}`,
           borderRadius: '50%',
         }}
       />

package/src/components/modal.tsx

@@ -9,28 +9,20 @@ export type ModalProps = {
   hideAnimation?: (el: Element | null) => Promise<unknown>
 }
 
-export const Modal = Shade<ModalProps, { isVisible?: boolean }>({
-  getInitialState: ({ props }) => ({ isVisible: props.isVisible.getValue() }),
+export const Modal = Shade<ModalProps>({
   shadowDomName: 'shade-modal',
-  resources: ({ props, element, updateState }) => [
-    props.isVisible.subscribe(async (visible) => {
-      if (visible) {
-        updateState({ isVisible: visible })
-        await props.showAnimation?.(element)
-      } else {
-        props.hideAnimation
-          ? await props.hideAnimation?.(element).finally(() => updateState({ isVisible: visible }))
-          : updateState({ isVisible: visible })
-      }
-    }),
-  ],
+  render: ({ props, children, useObservable, element }) => {
+    const [isVisible] = useObservable('isVisible', props.isVisible)
+
+    if (isVisible) {
+      props.showAnimation?.(element)
+    }
 
-  render: ({ props, getState, children }) => {
-    const { isVisible } = getState()
     return isVisible ? (
       <div
         className="shade-backdrop"
-        onclick={() => {
+        onclick={async () => {
+          await props.hideAnimation?.(element)
           props.onClose?.()
         }}
         style={{

package/src/components/noty-list.tsx

@@ -1,4 +1,4 @@
-import { createComponent, Shade } from '@furystack/shades'
+import { attachProps, createComponent, Shade } from '@furystack/shades'
 import type { NotyModel } from '../services/noty-service'
 import { NotyService } from '../services/noty-service'
 import { ThemeProviderService } from '../services/theme-provider-service'
@@ -24,10 +24,9 @@ export const NotyComponent = Shade<{ model: NotyModel; onDismiss: () => void }>(
   shadowDomName: 'shade-noty',
   constructed: ({ element }) => {
     setTimeout(() => {
-      const container = element.querySelector('div')
-      const height = container?.scrollHeight || 80
+      const height = element.scrollHeight || 80
       promisifyAnimation(
-        container,
+        element,
         [
           { opacity: '0', height: '0px' },
           { opacity: '1', height: `${height}px` },
@@ -47,11 +46,10 @@ export const NotyComponent = Shade<{ model: NotyModel; onDismiss: () => void }>(
     const textColor = themeProvider.getTextColor(colors.main)
 
     const removeSelf = async () => {
-      const container = element.querySelector('div')
       await promisifyAnimation(
-        container,
+        element,
         [
-          { opacity: '1', height: `${container?.scrollHeight || 0}px`, margin: '8px 8px' },
+          { opacity: '1', height: `${element?.scrollHeight || 0}px`, margin: '8px 8px' },
           { opacity: '0', height: '0px', margin: '0px 8px' },
         ],
         {
@@ -68,22 +66,24 @@ export const NotyComponent = Shade<{ model: NotyModel; onDismiss: () => void }>(
       setTimeout(removeSelf, timeout)
     }
 
+    attachProps(element, {
+      className: `noty ${props.model.type}`,
+      style: {
+        width: '300px',
+        display: 'flex',
+        flexDirection: 'column',
+        height: '0px',
+        backgroundColor: colors.main,
+        color: textColor,
+        margin: '8px',
+        overflow: 'hidden',
+        borderRadius: '6px',
+        boxShadow: '1px 3px 6px rgba(0,0,0,0.3)',
+      },
+    })
+
     return (
-      <div
-        className={`noty ${props.model.type}`}
-        style={{
-          width: '300px',
-          display: 'flex',
-          flexDirection: 'column',
-          height: '0px',
-          backgroundColor: colors.main,
-          color: textColor,
-          margin: '8px',
-          overflow: 'hidden',
-          borderRadius: '6px',
-          boxShadow: '1px 3px 6px rgba(0,0,0,0.3)',
-        }}
-      >
+      <>
         <div
           style={{
             display: 'flex',
@@ -119,45 +119,46 @@ export const NotyComponent = Shade<{ model: NotyModel; onDismiss: () => void }>(
           </Button>
         </div>
         <div style={{ padding: '16px 16px' }}>{props.model.body}</div>
-      </div>
+      </>
     )
   },
 })
 
-export const NotyList = Shade<unknown, { currentNotys: NotyModel[] }>({
-  getInitialState: ({ injector }) => ({ currentNotys: injector.getInstance(NotyService).notys.getValue() }),
-  constructed: ({ injector, element }) => {
-    const notyService = injector.getInstance(NotyService)
-    const observables = [
-      notyService.onNotyAdded.subscribe((n) => {
-        element.querySelector('div')?.append(<NotyComponent model={n} onDismiss={() => notyService.removeNoty(n)} />)
-      }),
-      notyService.onNotyRemoved.subscribe((n) => {
-        element.querySelectorAll('shade-noty').forEach((e) => {
-          if ((e as JSX.Element).props.model === n) {
-            e.remove()
-          }
-        })
-      }),
-    ]
-    return () => observables.forEach((o) => o.dispose())
-  },
+export const NotyList = Shade({
   shadowDomName: 'shade-noty-list',
-  render: ({ getState, injector }) => {
+  render: ({ useObservable, injector, element }) => {
+    const notyService = injector.getInstance(NotyService)
+
+    attachProps(element, {
+      style: {
+        position: 'fixed',
+        bottom: '1em',
+        right: '1em',
+        display: 'flex',
+        flexDirection: 'column',
+      },
+    })
+
+    const currentNotys = notyService.notys.getValue()
+
+    useObservable('addNoty', notyService.onNotyAdded, (n) =>
+      element.append(<NotyComponent model={n} onDismiss={() => notyService.removeNoty(n)} />),
+    )
+
+    useObservable('removeNoty', notyService.onNotyRemoved, (n) => {
+      element.querySelectorAll('shade-noty').forEach((e) => {
+        if ((e as JSX.Element).props.model === n) {
+          e.remove()
+        }
+      })
+    })
+
     return (
-      <div
-        style={{
-          position: 'fixed',
-          bottom: '1em',
-          right: '1em',
-          display: 'flex',
-          flexDirection: 'column',
-        }}
-      >
-        {getState().currentNotys.map((n) => (
+      <>
+        {currentNotys.map((n) => (
           <NotyComponent model={n} onDismiss={() => injector.getInstance(NotyService).removeNoty(n)} />
         ))}
-      </div>
+      </>
     )
   },
 })

package/src/components/paper.tsx

@@ -1,27 +1,28 @@
 import type { PartialElement } from '@furystack/shades'
+import { attachProps } from '@furystack/shades'
 import { Shade, createComponent } from '@furystack/shades'
 import { ThemeProviderService } from '../services/theme-provider-service'
 
 export const Paper = Shade<PartialElement<HTMLDivElement> & { elevation?: 1 | 2 | 3 }>({
   shadowDomName: 'shade-paper',
 
-  render: ({ injector, props, children }) => {
+  render: ({ injector, props, children, element }) => {
     const themeProvider = injector.getInstance(ThemeProviderService)
-    return (
-      <div
-        {...props}
-        style={{
-          borderRadius: '3px',
-          boxShadow: props.elevation ? `1px ${props.elevation}px ${props.elevation}px rgba(0,0,0,0.3)` : '',
-          backgroundColor: themeProvider.theme.background.paper,
-          color: themeProvider.theme.text.secondary,
-          margin: '8px',
-          padding: '6px 16px',
-          ...props?.style,
-        }}
-      >
-        {children}
-      </div>
-    )
+    const { elevation = 1 } = props
+
+    attachProps(element, {
+      ...props,
+      style: {
+        borderRadius: '3px',
+        boxShadow: elevation ? `1px ${elevation}px ${elevation}px rgba(0,0,0,0.3)` : '',
+        backgroundColor: themeProvider.theme.background.paper,
+        color: themeProvider.theme.text.secondary,
+        margin: '8px',
+        padding: '6px 16px',
+        ...props?.style,
+      },
+    })
+
+    return <>{children}</>
   },
 })

package/src/components/suggest/index.tsx

@@ -6,6 +6,7 @@ import { SuggestManager } from './suggest-manager'
 import type { SuggestionResult } from './suggestion-result'
 import { SuggestInput } from './suggest-input'
 import { SuggestionList } from './suggestion-list'
+import { ThemeProviderService } from '../../services'
 
 export * from './suggest-input'
 export * from './suggest-manager'
@@ -20,25 +21,19 @@ export interface SuggestProps<T> {
   style?: Partial<CSSStyleDeclaration>
 }
 
-export interface SuggestState<T> {
-  manager: SuggestManager<T>
-}
-
-export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX.Element<any, any> = Shade<
-  SuggestProps<any>,
-  SuggestState<any>
+export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX.Element<any> = Shade<
+  SuggestProps<any>
 >({
   shadowDomName: 'shade-suggest',
-  getInitialState: ({ props }) => ({
-    manager: new SuggestManager(props.getEntries, props.getSuggestionEntry),
-  }),
-  constructed: ({ element: el, getState, props }) => {
-    const { manager } = getState()
-    const element = el.querySelector('.input-container') as HTMLDivElement
-    manager.element = el
+  render: ({ props, injector, element, useDisposable, useObservable }) => {
+    element.style.flexGrow = '1'
+    const manager = useDisposable('manager', () => new SuggestManager(props.getEntries, props.getSuggestionEntry))
+    const { theme } = injector.getInstance(ThemeProviderService)
+    const inputContainer = element.querySelector('.input-container') as HTMLDivElement
+    manager.element = element
     manager.isOpened.subscribe((isOpened) => {
-      const suggestions = el.querySelector('.close-suggestions')
-      const postControls = el.querySelector('.post-controls')
+      const suggestions = element.querySelector('.close-suggestions')
+      const postControls = element.querySelector('.post-controls')
       if (isOpened) {
         promisifyAnimation(suggestions, [{ opacity: 0 }, { opacity: 1 }], {
           duration: 500,
@@ -50,7 +45,7 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
           fill: 'forwards',
         })
 
-        promisifyAnimation(element, [{ background: 'transparent' }, { background: 'rgba(128,128,128,0.1)' }], {
+        promisifyAnimation(inputContainer, [{ background: 'transparent' }, { background: theme.background.default }], {
           duration: 500,
           fill: 'forwards',
           easing: 'cubic-bezier(0.050, 0.570, 0.840, 1.005)',
@@ -67,7 +62,7 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
           delay: 300,
         })
 
-        promisifyAnimation(element, [{ background: 'rgba(128,128,128,0.1)' }, { background: 'transparent' }], {
+        promisifyAnimation(inputContainer, [{ background: theme.background.default }, { background: 'transparent' }], {
           duration: 300,
           fill: 'forwards',
           easing: 'cubic-bezier(0.000, 0.245, 0.190, 0.790)',
@@ -75,7 +70,7 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
       }
     })
     manager.isLoading.subscribe(async (isLoading) => {
-      const loader = el.querySelector('.loader-container')
+      const loader = element.querySelector('shade-loader')
       if (isLoading) {
         promisifyAnimation(loader, [{ opacity: 0 }, { opacity: 1 }], {
           duration: 100,
@@ -88,12 +83,7 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
         })
       }
     })
-    manager.onSelectSuggestion.subscribe((value) => props.onSelectSuggestion(value))
-    return () => manager.dispose()
-  },
-  render: ({ props, injector, element, getState }) => {
-    element.style.flexGrow = '1'
-    const { manager } = getState()
+    useObservable('onSelectSuggestion', manager.onSelectSuggestion, props.onSelectSuggestion)
     return (
       <div
         style={{ display: 'flex', flexDirection: 'column' }}
@@ -153,12 +143,11 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
               overflow: 'hidden',
             }}
           >
-            <div
-              className="loader-container"
+            <Loader
               style={{ width: '20px', height: '20px', opacity: manager.isLoading.getValue() ? '1' : '0' }}
-            >
-              <Loader style={{ width: '100%', height: '100%' }} />
-            </div>
+              delay={0}
+              borderWidth={4}
+            />
             <div
               className="close-suggestions"
               onclick={() => manager.isOpened.setValue(false)}

package/src/components/suggest/suggest-input.tsx

@@ -1,27 +1,34 @@
 import { Shade, createComponent } from '@furystack/shades'
+import { ThemeProviderService } from '../../services'
 import type { SuggestManager } from './suggest-manager'
 
-export const SuggestInput = Shade<{ manager: SuggestManager<any> }, { isOpened: boolean }>({
-  getInitialState: ({ props }) => ({ isOpened: props.manager.isOpened.getValue() }),
-  resources: ({ element, props }) => [
-    props.manager.isOpened.subscribe(async (isOpened) => {
-      const input = element.firstChild as HTMLInputElement
-      if (isOpened) {
-        input.focus()
-      } else {
-        input.value = ''
-      }
-    }),
-  ],
+export const SuggestInput = Shade<{ manager: SuggestManager<any> }>({
   shadowDomName: 'shades-suggest-input',
-  render: ({ element }) => {
-    element.style.width = '100%' //manager.isOpened.getValue() ? '100%' : '0%'
+  render: ({ element, props, useObservable, injector }) => {
+    const { theme } = injector.getInstance(ThemeProviderService)
+
+    element.style.width = '100%'
     element.style.overflow = 'hidden'
+
+    useObservable(
+      'isOpened',
+      props.manager.isOpened,
+      (isOpened) => {
+        const input = element.firstChild as HTMLInputElement
+        if (isOpened) {
+          input.focus()
+        } else {
+          input.value = ''
+        }
+      },
+      true,
+    )
+
     return (
       <input
         autofocus
         style={{
-          color: 'white',
+          color: theme.text.primary,
           outline: 'none',
           padding: '1em',
           background: 'transparent',