@furystack/shades-common-components 3.6.0 → 4.0.0

package/src/components/data-grid/header.tsx

@@ -19,37 +19,41 @@ export interface DataGridHeaderState<T> {
 export const DataGridHeader: <T, K extends keyof T>(
   props: DataGridHeaderProps<T, K>,
   children: ChildrenList,
-) => JSX.Element<any, any> = Shade<DataGridHeaderProps<any, any>, DataGridHeaderState<any>>({
+) => JSX.Element<any> = Shade<DataGridHeaderProps<any, any>>({
   shadowDomName: 'data-grid-header',
-  getInitialState: ({ props }) => ({
-    querySettings: props.collectionService.querySettings.getValue(),
-    isSearchOpened: false,
-    updateSearchValue: debounce((value: string) => {
-      const currentSettings = props.collectionService.querySettings.getValue()
-      const newSettings: FindOptions<unknown, any> = {
-        ...currentSettings,
-        filter: {
-          ...currentSettings.filter,
-          [props.field]: { $regex: value },
-        },
-      }
-      props.collectionService.querySettings.setValue(newSettings)
-    }),
-  }),
-  constructed: ({ props, updateState, getState }) => {
-    const disposable = props.collectionService.querySettings.subscribe((querySettings) =>
-      updateState({ querySettings }, getState().isSearchOpened),
+  // getInitialState: ({ props }) => ({
+  //   querySettings: props.collectionService.querySettings.getValue(),
+  //   isSearchOpened: false,
+  // updateSearchValue: ,
+  // }),
+  render: ({ props, element, useState, useObservable }) => {
+    const [querySettings, setQuerySettings] = useObservable('querySettings', props.collectionService.querySettings)
+    const currentOrder = Object.keys(querySettings.order || {})[0]
+    const currentOrderDirection = Object.values(querySettings.order || {})[0]
+
+    const [isSearchOpened, setIsSearchOpened] = useState('isSearchOpened', false)
+    const [updateSearchValue] = useState(
+      'updateSearchValue',
+      debounce((value: string) => {
+        const currentSettings = props.collectionService.querySettings.getValue()
+        const newSettings: FindOptions<unknown, any> = {
+          ...currentSettings,
+          filter: {
+            ...currentSettings.filter,
+            [props.field]: { $regex: value },
+          },
+        }
+        props.collectionService.querySettings.setValue(newSettings)
+      }),
     )
-    return () => disposable.dispose()
-  },
-  render: ({ getState, props, updateState, element }) => {
-    const currentState = getState()
-    const currentOrder = Object.keys(currentState.querySettings.order || {})[0]
-    const currentOrderDirection = Object.values(currentState.querySettings.order || {})[0]
 
     const filterValue = (props.collectionService.querySettings.getValue().filter as any)?.[props.field]?.$regex || ''
 
-    if (currentState.isSearchOpened) {
+    useObservable('querySettingsChange', props.collectionService.querySettings, (newSettings) => {
+      setQuerySettings(newSettings)
+    })
+
+    if (isSearchOpened) {
       setTimeout(() => {
         element.querySelector('input')?.focus()
       }, 1)
@@ -59,8 +63,8 @@ export const DataGridHeader: <T, K extends keyof T>(
           value={filterValue}
           placeholder={props.field}
           autofocus
-          onblur={() => updateState({ isSearchOpened: false })}
-          onkeyup={(ev) => currentState.updateSearchValue((ev.target as HTMLInputElement).value)}
+          onblur={() => setIsSearchOpened(false)}
+          onkeyup={(ev) => updateSearchValue((ev.target as HTMLInputElement).value)}
           labelProps={{
             style: { padding: '0px 2em' },
           }}
@@ -71,7 +75,7 @@ export const DataGridHeader: <T, K extends keyof T>(
     return (
       <div
         style={{ display: 'flex', width: '100%', height: '100%', justifyContent: 'space-around' }}
-        onclick={() => updateState({ isSearchOpened: true })}
+        onclick={() => setIsSearchOpened(true)}
       >
         <div>{props.field}</div>
         <div className="header-controls" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
@@ -88,7 +92,7 @@ export const DataGridHeader: <T, K extends keyof T>(
               }
               newOrder[props.field] = newDirection
               props.collectionService.querySettings.setValue({
-                ...currentState.querySettings,
+                ...querySettings,
                 order: newOrder,
               })
             }}

package/src/components/data-grid/selection-cell.tsx

@@ -3,29 +3,19 @@ import type { CollectionService } from '../../services'
 
 export const SelectionCell = Shade<{ entry: any; service: CollectionService<any> }>({
   shadowDomName: 'shades-data-grid-selection-cell',
-  resources: ({ props, element }) => [
-    props.service.selection.subscribe((selection) => {
-      if (selection.includes(props.entry)) {
-        ;(element.firstChild as HTMLInputElement).checked = true
-      } else {
-        ;(element.firstChild as HTMLInputElement).checked = false
-      }
-    }),
-  ],
-  render: ({ props }) => {
+  render: ({ props, useObservable, element }) => {
+    const [selection] = useObservable('selection', props.service.selection, (newSelection) => {
+      ;(element.querySelector('input') as HTMLInputElement).checked = newSelection.includes(props.entry)
+    })
+    const isSelected = selection.includes(props.entry)
+
     return (
       <input
-        onchange={(ev) => {
-          if ((ev.target as HTMLInputElement).checked) {
-            props.service.selection.setValue([...props.service.selection.getValue(), props.entry])
-          } else {
-            props.service.selection.setValue([
-              ...props.service.selection.getValue().filter((entry) => entry !== props.entry),
-            ])
-          }
+        onchange={() => {
+          props.service.toggleSelection(props.entry)
         }}
         type="checkbox"
-        checked={props.service.selection.getValue().includes(props.entry) ? true : false}
+        checked={isSelected}
       />
     )
   },

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,19 +23,10 @@ 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',
-  resources: ({ injector, element }) => [
-    injector.getInstance(ThemeProviderService).theme.subscribe((t) => {
-      const headers = element.querySelectorAll('th')
-      headers.forEach((header) => {
-        header.style.color = t.text.secondary
-        header.style.background = t.background.paper
-      })
-    }),
-  ],
   render: ({ props, injector }) => {
-    const theme = injector.getInstance(ThemeProviderService).theme.getValue()
+    const { theme } = injector.getInstance(ThemeProviderService)
     const headerStyle: Partial<CSSStyleDeclaration> = {
       padding: '0 0.51em',
       backgroundColor: theme.background.paper,

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,7 +1,8 @@
 import type { PartialElement } from '@furystack/shades'
 import { Shade, createComponent, attachStyles } from '@furystack/shades'
+import { ObservableValue } from '@furystack/utils'
 import { ThemeProviderService } from '../..'
-import type { Palette, Theme } from '../../services'
+import type { Palette } from '../../services'
 
 export interface TextInputProps extends PartialElement<HTMLInputElement> {
   /**
@@ -47,7 +48,6 @@ export interface TextInputProps extends PartialElement<HTMLInputElement> {
 }
 
 export type TextInputState = {
-  theme: Theme
   value: string
   focused: boolean
   validity: ValidityState
@@ -69,12 +69,12 @@ const getLabelStyle = ({
     justifyContent: 'space-between',
     fontSize: '10px',
     color: props.disabled
-      ? state.theme.text.disabled
+      ? themeProvider.theme.text.disabled
       : state.validity?.valid === false
-      ? state.theme.palette.error.main
+      ? themeProvider.theme.palette.error.main
       : state.focused
-      ? state.theme.text.primary
-      : state.theme.text.secondary,
+      ? themeProvider.theme.text.primary
+      : themeProvider.theme.text.secondary,
     marginBottom: '1em',
     padding: '1em',
     borderRadius: '5px',
@@ -83,8 +83,8 @@ const getLabelStyle = ({
         ? themeProvider
             .getRgbFromColorString(
               state.validity?.valid === false
-                ? state.theme.palette.error.main
-                : state.theme.palette[props.defaultColor || 'primary'].main,
+                ? themeProvider.theme.palette.error.main
+                : themeProvider.theme.palette[props.defaultColor || 'primary'].main,
             )
             .update('a', state.focused ? 0.1 : 0.2)
             .toString()
@@ -93,10 +93,10 @@ const getLabelStyle = ({
       props.variant === 'outlined' || props.variant === 'contained'
         ? `0 0 0 1px ${
             state.validity?.valid === false
-              ? state.theme.palette.error.main
+              ? themeProvider.theme.palette.error.main
               : state.focused
-              ? state.theme.palette[props.defaultColor || 'primary'].main
-              : state.theme.text.primary
+              ? themeProvider.theme.palette[props.defaultColor || 'primary'].main
+              : themeProvider.theme.text.primary
           }`
         : 'none',
     filter: props.disabled ? 'grayscale(100%)' : 'none',
@@ -107,37 +107,32 @@ const getLabelStyle = ({
   }
 }
 
-export const Input = Shade<TextInputProps, TextInputState>({
+export const Input = Shade<TextInputProps>({
   shadowDomName: 'shade-input',
-  getInitialState: ({ injector, props }) => ({
-    theme: injector.getInstance(ThemeProviderService).theme.getValue(),
-    value: props.value || '',
-    focused: props.autofocus || false,
-    validity: { valid: true } as ValidityState,
-  }),
-  resources: ({ injector, updateState }) => [
-    injector.getInstance(ThemeProviderService).theme.subscribe((theme) => updateState({ theme })),
-  ],
-  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 })}>
@@ -155,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={{
@@ -185,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

@@ -1,6 +1,5 @@
 import type { PartialElement } from '@furystack/shades'
 import { createComponent, Shade } from '@furystack/shades'
-import type { Theme } from '../../services'
 import { ThemeProviderService } from '../../services'
 import { promisifyAnimation } from '../../utils'
 
@@ -11,24 +10,11 @@ export interface TextAreaProps extends PartialElement<HTMLTextAreaElement> {
   variant?: 'contained' | 'outlined'
 }
 
-export type TextAreaInputState = {
-  theme: Theme
-  value?: string
-}
-
-export const TextArea = Shade<TextAreaProps, TextAreaInputState>({
+export const TextArea = Shade<TextAreaProps>({
   shadowDomName: 'shade-text-area',
-  getInitialState: ({ injector, props }) => ({
-    theme: injector.getInstance(ThemeProviderService).theme.getValue(),
-    value: props.value,
-  }),
-  resources: ({ injector, updateState }) => {
-    const themeProvider = injector.getInstance(ThemeProviderService)
-    return [themeProvider.theme.subscribe((theme) => updateState({ theme }))]
-  },
-  render: ({ props, element, injector, getState }) => {
+  render: ({ props, element, injector }) => {
     const themeProvider = injector.getInstance(ThemeProviderService)
-    const { theme, value } = getState()
+    const { theme } = themeProvider
     const { palette } = theme
 
     return (
@@ -111,7 +97,7 @@ export const TextArea = Shade<TextAreaProps, TextAreaInputState>({
             }
           }}
         >
-          {value}
+          {props.value}
         </div>
       </label>
     )

package/src/components/loader.tsx

@@ -11,23 +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',
-  resources: ({ injector, element }) => [
-    injector.getInstance(ThemeProviderService).theme.subscribe((theme) => {
-      const el = element.firstElementChild
-      if (el) {
-        ;(el as HTMLElement).style.borderBottom = `15px solid ${theme.palette.primary.main}`
-      }
-    }, true),
-  ],
-  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' }], {
@@ -49,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={{