@furystack/shades-common-components 3.2.2 → 3.4.0

package/src/components/{autocomplete.tsx → inputs/autocomplete.tsx}

@@ -1,8 +1,8 @@
 import { Shade, createComponent } from '@furystack/shades'
-import { Input, InputProps } from './input'
+import { Input, TextInputProps } from './input'
 
 export const Autocomplete = Shade<
-  { inputProps?: InputProps; suggestions: string[]; strict?: boolean; onchange: (value: string) => void },
+  { inputProps?: TextInputProps; suggestions: string[]; strict?: boolean; onchange?: (value: string) => void },
   { dataListId: string }
 >({
   getInitialState: () => ({
@@ -30,7 +30,7 @@ export const Autocomplete = Shade<
                 return
               }
             }
-            props.onchange(value)
+            props.onchange?.(value)
           }}
         />
         <datalist id={dataListId}>

package/src/components/inputs/index.ts

@@ -0,0 +1,3 @@
+export * from './autocomplete'
+export * from './input'
+export * from './text-area'

package/src/components/inputs/input.tsx

@@ -0,0 +1,195 @@
+import { Shade, PartialElement, createComponent, attachStyles } from '@furystack/shades'
+import { ThemeProviderService } from '../..'
+import { Palette, Theme } from '../../services'
+
+export interface TextInputProps extends PartialElement<HTMLInputElement> {
+  /**
+   * Callback that will be called when the input value changes
+   */
+  onTextChange?: (text: string) => void
+  /**
+   * An optional label title element or string
+   */
+  labelTitle?: JSX.Element | string
+
+  /**
+   * Optional props for the label element
+   */
+  labelProps?: PartialElement<HTMLLabelElement>
+
+  /**
+   * Boolean that indicates if the field will be focused automatically
+   */
+  autofocus?: boolean
+  /**
+   * The variant of the input
+   */
+  variant?: 'contained' | 'outlined'
+  /**
+   * The default color of the input (Error color will be used in case of invalid input value)
+   */
+  defaultColor?: keyof Palette
+  /**
+   * Optional callback for the helper text
+   */
+  getHelperText?: (options: { state: TextInputState }) => JSX.Element | string
+
+  /**
+   * Optional callback for retrieving an icon element on the left side of the input field
+   */
+  getStartIcon?: (options: { state: TextInputState }) => JSX.Element | string
+
+  /**
+   * Optional callback for retrieving an icon element on the right side of the input field
+   */
+  getEndIcon?: (options: { state: TextInputState }) => JSX.Element | string
+}
+
+export type TextInputState = {
+  theme: Theme
+  value: string
+  focused: boolean
+  validity: ValidityState
+}
+
+const getLabelStyle = ({
+  themeProvider,
+  props,
+  state,
+}: {
+  themeProvider: ThemeProviderService
+  props: TextInputProps
+  state: TextInputState
+}): Partial<CSSStyleDeclaration> => {
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    fontSize: '10px',
+    color: props.disabled
+      ? state.theme.text.disabled
+      : state.validity?.valid === false
+      ? state.theme.palette.error.main
+      : state.focused
+      ? state.theme.text.primary
+      : state.theme.text.secondary,
+    marginBottom: '1em',
+    padding: '1em',
+    borderRadius: '5px',
+    background:
+      props.variant === 'contained'
+        ? themeProvider
+            .getRgbFromColorString(
+              state.validity?.valid === false
+                ? state.theme.palette.error.main
+                : state.theme.palette[props.defaultColor || 'primary'].main,
+            )
+            .update('a', state.focused ? 0.1 : 0.2)
+            .toString()
+        : 'transparent',
+    boxShadow:
+      props.variant === 'outlined' || props.variant === 'contained'
+        ? `0 0 0 1px ${
+            state.validity?.valid === false
+              ? state.theme.palette.error.main
+              : state.focused
+              ? state.theme.palette[props.defaultColor || 'primary'].main
+              : state.theme.text.primary
+          }`
+        : 'none',
+    filter: props.disabled ? 'grayscale(100%)' : 'none',
+    opacity: props.disabled ? '0.5' : '1',
+    transition:
+      'color 0.2s ease-in-out, filter 0.2s ease-in-out, opacity 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out',
+    ...props.labelProps?.style,
+  }
+}
+
+export const Input = Shade<TextInputProps, TextInputState>({
+  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 }) => {
+    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 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 false
+  },
+  render: ({ props, getState, updateState, injector }) => {
+    const state = getState()
+    const { value } = state
+    const themeProvider = injector.getInstance(ThemeProviderService)
+
+    return (
+      <label {...props.labelProps} style={getLabelStyle({ props, state, themeProvider })}>
+        {props.labelTitle}
+
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            width: '100%',
+          }}
+        >
+          {props.getStartIcon ? <span className="startIcon">{props.getStartIcon?.({ state })}</span> : null}
+          <input
+            oninvalid={(ev) => {
+              ev.preventDefault()
+              const el = ev.target as HTMLInputElement
+              updateState({ validity: el.validity })
+            }}
+            onchange={(ev) => {
+              const el = ev.target as HTMLInputElement
+              const newValue = el.value
+              updateState({ value: newValue, validity: el?.validity })
+              props.onTextChange?.(newValue)
+              props.onchange && (props.onchange as any)(ev)
+            }}
+            onfocus={() => {
+              updateState({ focused: true })
+            }}
+            onblur={() => {
+              updateState({ focused: false })
+            }}
+            {...props}
+            style={{
+              color: 'inherit',
+              border: 'none',
+              backgroundColor: 'transparent',
+              outline: 'none',
+              fontSize: '12px',
+              width: '100%',
+              textOverflow: 'ellipsis',
+              padding: '0',
+              marginTop: '0.6em',
+              marginBottom: '0.4em',
+              flexGrow: '1',
+              ...props.style,
+            }}
+            value={value}
+          />
+          {props.getEndIcon ? <span className="endIcon">{props.getEndIcon({ state })}</span> : null}
+        </div>
+        <span className="helperText">{props.getHelperText?.({ state })}</span>
+      </label>
+    )
+  },
+})

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

@@ -0,0 +1,117 @@
+import { createComponent, PartialElement, Shade } from '@furystack/shades'
+import { Theme, ThemeProviderService } from '../../services'
+import { promisifyAnimation } from '../../utils'
+
+export interface TextAreaProps extends PartialElement<HTMLTextAreaElement> {
+  labelTitle?: string
+  labelProps?: PartialElement<HTMLLabelElement>
+  autofocus?: boolean
+  variant?: 'contained' | 'outlined'
+}
+
+export type TextAreaInputState = {
+  theme: Theme
+  value?: string
+}
+
+export const TextArea = Shade<TextAreaProps, TextAreaInputState>({
+  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 }) => {
+    const themeProvider = injector.getInstance(ThemeProviderService)
+    const { theme, value } = getState()
+    const { palette } = theme
+
+    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,
+        }}
+      >
+        <span>{props.labelTitle}</span>
+
+        <div
+          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) {
+              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',
+                },
+              )
+              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) {
+              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',
+                },
+              )
+              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',
+                },
+              )
+            }
+          }}
+        >
+          {value}
+        </div>
+      </label>
+    )
+  },
+})

package/src/components/modal.tsx

@@ -1,12 +1,36 @@
 import { Shade, createComponent } from '@furystack/shades'
+import { ObservableValue } from '@furystack/utils'
 
-export const Modal = Shade<{ isVisible: boolean; onClose?: () => void }>({
+export type ModalProps = {
+  backdropStyle?: Partial<CSSStyleDeclaration>
+  isVisible: ObservableValue<boolean>
+  onClose?: () => void
+  showAnimation?: (el: Element | null) => Promise<void>
+  hideAnimation?: (el: Element | null) => Promise<void>
+}
+
+export const Modal = Shade<ModalProps, { isVisible?: boolean }>({
+  getInitialState: ({ props }) => ({ isVisible: props.isVisible.getValue() }),
   shadowDomName: 'shade-modal',
-  render: ({ props, children }) => {
-    return props.isVisible ? (
+  resources: ({ props, element, updateState }) => [
+    props.isVisible.subscribe(async (visible) => {
+      if (visible) {
+        updateState({ isVisible: visible })
+        await props.showAnimation?.(element)
+      } else {
+        await props.hideAnimation?.(element).finally(() => updateState({ isVisible: visible }))
+      }
+    }),
+  ],
+
+  render: ({ props, getState, children }) => {
+    const { isVisible } = getState()
+    return isVisible ? (
       <div
         className="shade-backdrop"
-        onclick={() => props.onClose?.()}
+        onclick={() => {
+          props.onClose?.()
+        }}
         style={{
           width: '100%',
           height: '100%',
@@ -14,12 +38,11 @@ export const Modal = Shade<{ isVisible: boolean; onClose?: () => void }>({
           position: 'fixed',
           top: '0',
           left: '0',
+          ...props.backdropStyle,
         }}
       >
         {children}
       </div>
-    ) : (
-      <div />
-    )
+    ) : null
   },
 })

package/src/components/noty-list.tsx

@@ -131,7 +131,7 @@ export const NotyList = Shade<unknown, { currentNotys: NotyModel[] }>({
       }),
       notyService.onNotyRemoved.subscribe((n) => {
         element.querySelectorAll('shade-noty').forEach((e) => {
-          if ((e as any).props.getValue().model === n) {
+          if ((e as JSX.Element).props.model === n) {
             e.remove()
           }
         })

package/src/components/wizard/index.tsx

@@ -0,0 +1,62 @@
+import { ChildrenList, createComponent, Shade } from '@furystack/shades'
+import { Paper } from '../paper'
+
+export interface WizardStepProps {
+  currentPage: number
+  maxPages: number
+  onNext?: () => void
+  onPrev?: () => void
+}
+
+export interface WizardProps {
+  steps: Array<(props: WizardStepProps, children: ChildrenList) => JSX.Element<any, any>>
+  isOpened?: boolean
+  onFinish?: () => void
+}
+
+interface WizardState {
+  currentPage: number
+}
+
+export const Wizard = Shade<WizardProps, WizardState>({
+  shadowDomName: 'shades-wizard',
+  getInitialState: () => ({
+    currentPage: 0,
+  }),
+  render: ({ props, getState, updateState }) => {
+    const { currentPage } = getState()
+
+    const CurrentPage = props.steps[currentPage]
+
+    return (
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '100%',
+          height: '100%',
+        }}
+      >
+        <Paper elevation={3} onclick={(ev) => ev.stopPropagation()}>
+          <CurrentPage
+            currentPage={currentPage}
+            maxPages={props.steps.length}
+            onNext={() => {
+              if (currentPage < props.steps.length - 1) {
+                updateState({ currentPage: currentPage + 1 })
+              } else {
+                props.onFinish?.()
+              }
+            }}
+            onPrev={() => {
+              if (currentPage > 0) {
+                updateState({ currentPage: currentPage - 1 })
+              }
+            }}
+          />
+        </Paper>
+      </div>
+    )
+  },
+})

package/src/services/theme-provider-service.ts

@@ -46,6 +46,19 @@ export interface Theme {
   divider: Color
 }
 
+export class RgbColor {
+  constructor(public r: number, public g: number, public b: number, public a: number = 1) {}
+
+  public update(key: 'r' | 'g' | 'b' | 'a', value: number): RgbColor {
+    this[key] = value
+    return this
+  }
+
+  public toString(): string {
+    return `rgba(${this.r},${this.g},${this.b},${this.a})`
+  }
+}
+
 /**
  * Service class for theme-related operations
  */
@@ -75,13 +88,13 @@ export class ThemeProviderService {
         const r = parseInt(color.substr(1, 2), 16)
         const g = parseInt(color.substr(3, 2), 16)
         const b = parseInt(color.substr(5, 2), 16)
-        return { r, g, b }
+        return new RgbColor(r, g, b)
       }
       if (color.length === 4) {
         const r = parseInt(color.substr(1, 1) + color.substr(1, 1), 16)
         const g = parseInt(color.substr(2, 1) + color.substr(2, 1), 16)
         const b = parseInt(color.substr(3, 1) + color.substr(3, 1), 16)
-        return { r, g, b }
+        return new RgbColor(r, g, b)
       }
     }
     if (color.startsWith('rgba(')) {
@@ -89,12 +102,12 @@ export class ThemeProviderService {
         /^rgba[(](?<red>[\d]+)[,][\s]?(?<green>[\d]+)[,][\s]?(?<blue>[\d]+)[,][\s]?(?<alpha>[\d|.]+)[)]/gm,
       ).exec(color)
       if (result && result.groups) {
-        return {
-          r: parseInt(result.groups.red, 10),
-          g: parseInt(result.groups.green, 10),
-          b: parseInt(result.groups.blue, 10),
-          a: parseInt(result.groups.alpha, 10),
-        }
+        return new RgbColor(
+          parseInt(result.groups.red, 10),
+          parseInt(result.groups.green, 10),
+          parseInt(result.groups.blue, 10),
+          parseInt(result.groups.alpha, 10),
+        )
       }
     }
     throw Error(`Color format '${color} is not supported.'`)

package/src/utils/promisify-animation.ts

@@ -1,3 +1,9 @@
+/**
+ * @param el The element to animate
+ * @param keyframes A list of keyframe definitions
+ * @param options Animation options
+ * @returns A promise that resolves when the animation is complete or rejects if cancelled
+ */
 export const promisifyAnimation = async (
   el: Element | null,
   keyframes: Keyframe[] | PropertyIndexedKeyframes | null,