@codeleap/web 3.25.0 → 3.25.2

package/src/components/Modal/index.tsx

@@ -1,31 +1,90 @@
-import { TypeGuards, onMount, onUpdate, useIsomorphicEffect } from '@codeleap/common'
+/** @jsx jsx */
+import { jsx, CSSObject } from '@emotion/react'
+import {
+  AnyFunction,
+  ComponentVariants,
+  IconPlaceholder,
+  TypeGuards,
+  onMount,
+  onUpdate,
+  useDefaultComponentStyle,
+  useNestedStylesByKey,
+  StylesOf,
+  PropsOf,
+  useIsomorphicEffect,
+} from '@codeleap/common'
+
 import React, { useId, useRef } from 'react'
 import ReactDOM from 'react-dom'
 import { v4 } from 'uuid'
 import { View } from '../View'
 import { Text } from '../Text'
-import { Overlay } from '../Overlay'
-import { ActionIcon } from '../ActionIcon'
-import { Touchable } from '../Touchable'
+import { Overlay, OverlayProps } from '../Overlay'
+import { ModalComposition, ModalPresets } from './styles'
+import { ActionIcon, ActionIconProps } from '../ActionIcon'
+import { Scroll } from '../Scroll'
+import { ComponentCommonProps } from '../../types'
+import { Touchable, TouchableProps } from '../Touchable'
 import { modalScrollLock, ModalStore } from '../../lib/tools/modal'
-import { ModalHeaderProps, ModalProps } from './types'
-import { useStylesFor } from '../../lib/hooks/useStylesFor'
-import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
-import { AnyRecord, AppIcon, IJSX, StyledComponentProps, useNestedStylesByKey } from '@codeleap/styles'
 
 export * from './styles'
-export * from './types'
+
+export type ModalProps =
+  {
+    visible?: boolean
+    children?: React.ReactNode
+    title?: React.ReactNode | string
+    description?: React.ReactNode | string
+    renderModalBody?: (props: ModalBodyProps) => React.ReactElement
+    toggle?: AnyFunction
+    styles?: StylesOf<ModalComposition>
+    style?: React.CSSProperties
+    accessible?: boolean
+    showClose?: boolean
+    closable?: boolean
+    dismissOnBackdrop?: boolean
+    scroll?: boolean
+    header?: React.ReactElement
+    footer?: React.ReactNode
+    withOverlay?: boolean
+    closeIconName?: IconPlaceholder
+    keepMounted?: boolean
+    renderHeader?: (props: ModalHeaderProps) => React.ReactElement
+    debugName?: string
+    closeButtonProps?: Partial<ActionIconProps>
+    closeOnEscape?: boolean
+    onClose?: () => void
+    overlayProps?: Partial<OverlayProps>
+    zIndex?: number
+    withScrollContainer?: boolean
+    scrollLock?: boolean
+    backdropProps?: Partial<TouchableProps>
+    alterHistory?: boolean
+    modalId?: string
+    autoIndex?: boolean
+  } & ComponentVariants<typeof ModalPresets> & ComponentCommonProps
 
 function focusModal(event: FocusEvent, id: string) {
-  event?.preventDefault()
+  event.preventDefault()
   const modal = document.getElementById(id)
   if (modal) modal.focus()
 }
 
+type ModalBodyProps = {
+  id: string
+  variantStyles: PropsOf<ModalComposition>
+}
+
+type ModalHeaderProps = Partial<Omit<ModalProps, 'children'>> & {
+  id: string
+  variantStyles: PropsOf<ModalComposition>
+  onPressClose: () => void
+}
+
 const ModalDefaultHeader = (props: ModalHeaderProps) => {
   const {
     id,
-    styles,
+    variantStyles,
     title,
     showClose,
     closable,
@@ -36,7 +95,7 @@ const ModalDefaultHeader = (props: ModalHeaderProps) => {
     debugName,
   } = props
 
-  const closeButtonStyles = useNestedStylesByKey('closeButton', styles)
+  const closeButtonStyles = useNestedStylesByKey('closeButton', variantStyles)
 
   const showCloseButton = showClose && closable
 
@@ -48,67 +107,98 @@ const ModalDefaultHeader = (props: ModalHeaderProps) => {
     <View
       id={`${id}-header`}
       component='header'
-      style={styles.header}
+      css={variantStyles.header}
       className='modal-header header'
     >
-      <View id={`${id}-title`} style={styles.titleWrapper}>
+      <View id={`${id}-title`} css={variantStyles.titleWrapper}>
         {TypeGuards.isString(title) ? (
-          <Text debugName={debugName} text={title} style={styles.title} />
-        ) : title}
+          <Text debugName={debugName} text={title} css={variantStyles.title} />
+        ) : (
+          title
+        )}
 
-        {showCloseButton ? (
+        {showCloseButton && (
           <ActionIcon
             debugName={debugName}
-            icon={closeIconName as AppIcon}
+            icon={closeIconName as IconPlaceholder}
             onPress={onPressClose}
             {...closeButtonProps}
-            style={closeButtonStyles}
+            styles={closeButtonStyles}
           />
-        ) : null}
+        )}
       </View>
 
       {TypeGuards.isString(description) ? (
-        <Text debugName={debugName} text={description} style={styles.description} />
-      ) : description}
+        <Text debugName={debugName} text={description} style={variantStyles.description} />
+      ) : (
+        description
+      )}
     </View>
   )
 }
 
-export const ModalContent = (modalProps: ModalProps & { id: string }) => {
+const defaultProps: Partial<ModalProps> = {
+  title: '',
+  closeIconName: 'x' as IconPlaceholder,
+  closable: true,
+  withOverlay: true,
+  showClose: true,
+  scroll: false,
+  closeOnEscape: true,
+  renderHeader: ModalDefaultHeader,
+  keepMounted: true,
+  dismissOnBackdrop: true,
+  zIndex: null,
+  description: null,
+  withScrollContainer: false,
+  scrollLock: false,
+  autoIndex: false,
+  alterHistory: false,
+}
+
+export const ModalContent = (
+  modalProps: ModalProps & { id: string },
+) => {
   const {
     children,
     visible,
     title,
     toggle,
+    variants = [],
+    styles,
     footer,
-    style,
+    style = {},
     renderHeader: ModalHeader,
     closable,
     withOverlay,
     showClose,
+    responsiveVariants = {},
     closeIconName,
     scroll,
     renderModalBody,
     closeOnEscape,
     onClose,
-    overlayProps,
+    overlayProps = {},
     dismissOnBackdrop,
     zIndex,
     withScrollContainer,
     debugName,
-    backdropProps,
+    backdropProps = {},
     alterHistory,
     id: modalId,
     autoIndex,
     ...props
   } = modalProps
 
-  const styles = useStylesFor(Modal.styleRegistryName, style)
-
   const index = ModalStore(store => (store.indexes?.[modalId] ?? 0))
 
   const id = useId()
   const modalRef = useRef(null)
+  const variantStyles = useDefaultComponentStyle<'u:Modal', typeof ModalPresets>('u:Modal', {
+    responsiveVariants,
+    variants,
+    styles,
+  })
 
   const toggleAndReturn = () => {
     toggle?.()
@@ -128,7 +218,7 @@ export const ModalContent = (modalProps: ModalProps & { id: string }) => {
     }
   }
 
-  const handleTabKeyPress = (e: React.KeyboardEvent<HTMLDivElement>, { firstElement, lastElement }: Record<'firstElement' | 'lastElement', HTMLDivElement>) => {
+  const handleTabKeyPress = (e: React.KeyboardEvent<HTMLDivElement>, { firstElement, lastElement }: Record<'firstElement' |'lastElement', HTMLDivElement>) => {
     if (e.key === 'Tab' || e?.keyCode === 9) {
       if (e.shiftKey && document.activeElement === firstElement) {
         e.preventDefault()
@@ -166,9 +256,11 @@ export const ModalContent = (modalProps: ModalProps & { id: string }) => {
     if (modal) modal.focus()
   }, [id])
 
-  const close = (closable && dismissOnBackdrop) ? toggleAndReturn : () => null
+  const close = (closable && dismissOnBackdrop) ? toggleAndReturn : () => { }
 
-  const ModalBody = renderModalBody || View
+  const ModalBody = renderModalBody || (scroll ? Scroll : View)
+
+  const ModalArea = withScrollContainer ? Scroll : View
 
   const _zIndex = React.useMemo(() => {
     return TypeGuards.isNumber(zIndex) ? { zIndex } : {}
@@ -178,34 +270,43 @@ export const ModalContent = (modalProps: ModalProps & { id: string }) => {
     <View
       ref={modalRef}
       aria-hidden={!visible}
-      style={[
-        styles.wrapper,
-        visible ? styles['wrapper:visible'] : styles['wrapper:hidden'],
-        autoIndex ? { zIndex: index } : null,
+      css={[
+        variantStyles.wrapper,
+        visible
+          ? variantStyles['wrapper:visible']
+          : variantStyles['wrapper:hidden'],
+        autoIndex ? { zIndex: index } : {},
         _zIndex,
       ]}
     >
       <Overlay
         debugName={debugName}
         visible={withOverlay ? visible : false}
-        {...overlayProps}
-        style={[
-          styles.backdrop,
-          visible ? styles['backdrop:visible'] : styles['backdrop:hidden'],
+        css={[
+          variantStyles.backdrop,
+          visible
+            ? variantStyles['backdrop:visible']
+            : variantStyles['backdrop:hidden'],
         ]}
+        {...overlayProps}
       />
 
-      <View style={styles.innerWrapper}>
+      <ModalArea css={variantStyles.innerWrapper}>
         <Touchable
+          css={variantStyles.backdropPressable}
           onPress={close}
           debounce={1000}
-          debugName='modal backdrop'
           {...backdropProps}
-          style={styles.backdropPressable}
         />
-
         <View
           component='section'
+          css={[
+            variantStyles.box,
+            visible
+              ? variantStyles['box:visible']
+              : variantStyles['box:hidden'],
+            style,
+          ]}
           className='content'
           tabIndex={0}
           id={id}
@@ -214,35 +315,35 @@ export const ModalContent = (modalProps: ModalProps & { id: string }) => {
           aria-describedby={`${id}-title`}
           aria-label='Close the modal by pressing Escape key'
           {...props}
-          style={[
-            styles.box,
-            visible ? styles['box:visible'] : styles['box:hidden'],
-          ]}
         >
           <ModalHeader
             {...modalProps}
-            styles={styles}
+            variantStyles={variantStyles}
             id={id}
             onPressClose={toggleAndReturn}
             debugName={debugName}
           />
 
-          <ModalBody style={styles.body} id={id}>
+          <ModalBody
+            css={variantStyles.body}
+            variantStyles={variantStyles}
+            id={id}
+          >
             {children}
           </ModalBody>
 
-          {footer ? (
-            <View component='footer' style={styles.footer}>
+          {footer && (
+            <View component='footer' css={variantStyles.footer}>
               {footer}
             </View>
-          ) : null}
+          )}
         </View>
-      </View>
+      </ModalArea>
     </View>
   )
 }
 
-export const Modal = (props: ModalProps) => {
+export const Modal = (props) => {
   const allProps = {
     ...Modal.defaultProps,
     ...props,
@@ -279,7 +380,7 @@ export const Modal = (props: ModalProps) => {
     }
 
     if (scrollLock) modalScrollLock(visible, modalId.current)
-
+    
     if (autoIndex) {
       setTimeout(() => {
         setIndex(visible, modalId.current)
@@ -291,7 +392,9 @@ export const Modal = (props: ModalProps) => {
     }
   }, [visible])
 
-  const content = <ModalContent {...allProps} visible={visible} toggle={toggle} id={modalId.current} />
+  const content = <ModalContent {...props} visible={visible} toggle={toggle} id={modalId.current} />
+
+  // if (renderStatus === 'unmounted') return null
 
   if (typeof window === 'undefined') return content
 
@@ -299,48 +402,7 @@ export const Modal = (props: ModalProps) => {
     content,
     document.body,
   )
-}
 
-Modal.styleRegistryName = 'Modal'
-
-Modal.elements = [
-  'wrapper',
-  'box',
-  'backdrop',
-  'body',
-  'footer',
-  'header',
-  'title',
-  'innerWrapper',
-  'backdropPressable',
-  'description',
-  'titleWrapper',
-  `closeButton`,
-]
-
-Modal.rootElement = 'wrapper'
-
-Modal.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return Modal as (props: StyledComponentProps<ModalProps, typeof styles>) => IJSX
 }
 
-Modal.defaultProps = {
-  title: '',
-  closeIconName: 'x' as AppIcon,
-  closable: true,
-  withOverlay: true,
-  showClose: true,
-  scroll: false,
-  closeOnEscape: true,
-  renderHeader: ModalDefaultHeader,
-  keepMounted: true,
-  dismissOnBackdrop: true,
-  zIndex: null,
-  description: null,
-  withScrollContainer: false,
-  scrollLock: false,
-  autoIndex: false,
-  alterHistory: false,
-} as Partial<ModalProps>
-
-WebStyleRegistry.registerComponent(Modal)
+Modal.defaultProps = defaultProps

package/src/components/Modal/styles.ts

@@ -1,3 +1,4 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { ActionIconComposition } from '../ActionIcon'
 
 export type AnimatableParts = 'box' | 'backdrop' | 'wrapper'
@@ -18,3 +19,7 @@ export type ModalComposition =
   | ModalParts
   | `${AnimatableParts}:visible`
   | `${AnimatableParts}:hidden`
+
+const createModalStyle = createDefaultVariantFactory<ModalComposition>()
+
+export const ModalPresets = includePresets((style) => createModalStyle(() => ({ body: style })))

package/src/components/NumberIncrement/index.tsx

@@ -1,45 +1,90 @@
+/** @jsx jsx */
+import { jsx, CSSObject } from '@emotion/react'
 import * as React from 'react'
-import { TypeGuards, onUpdate, useState, useRef, useValidate } from '@codeleap/common'
-import { InputBase, selectInputBaseProps } from '../InputBase'
+import {
+  ComponentVariants,
+  yup,
+  useDefaultComponentStyle,
+  StylesOf,
+  PropsOf,
+  TypeGuards,
+  onUpdate,
+  useState,
+  useRef,
+  useValidate,
+  FormTypes,
+  IconPlaceholder,
+} from '@codeleap/common'
+import { View } from '../View'
+import { NumberIncrementPresets, NumberIncrementComposition } from './styles'
+import { InputBase, InputBaseProps, selectInputBaseProps } from '../InputBase'
 import { Text } from '../Text'
-import { PatternFormat, NumericFormat, NumericFormatProps as NFProps, NumberFormatBase } from 'react-number-format'
-import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
-import { NumberIncrementProps } from './types'
-import { AnyRecord, AppIcon, IJSX, StyledComponentProps } from '@codeleap/styles'
-import { useStylesFor } from '../../lib/hooks/useStylesFor'
+import {
+  PatternFormat,
+  PatternFormatProps as PFProps,
+  NumericFormat,
+  NumericFormatProps as NFProps,
+  NumberFormatBase,
+} from 'react-number-format'
+import { FormatInputValueFunction } from 'react-number-format/types/types'
 
-export * from './types'
 export * from './styles'
 
+export type NumberIncrementProps = Pick<
+  InputBaseProps,
+  'debugName' | 'disabled' | 'label'
+> & {
+  styles?: StylesOf<NumberIncrementComposition>
+  value: number
+  onValueChange: (value: number) => void
+  onChangeText?: (value: number) => void
+  validate?: FormTypes.ValidatorWithoutForm<string> | yup.SchemaOf<string>
+  style?: PropsOf<typeof View>['style']
+  max?: number
+  min?: number
+  step?: number
+  editable?: boolean
+  prefix?: NFProps['prefix']
+  suffix?: NFProps['suffix']
+  separator?: NFProps['thousandSeparator']
+  format?: PFProps['format']
+  mask?: PFProps['mask']
+  hasSeparator?: boolean
+  _error?: string
+  formatter?: FormatInputValueFunction
+  placeholder?: string
+} & ComponentVariants<typeof NumberIncrementPresets>
+
 export const NumberIncrement = (props: NumberIncrementProps) => {
   const {
     inputBaseProps,
-    others: numberIncrementProps,
-  } = selectInputBaseProps({ ...NumberIncrement.defaultProps, ...props })
+    others,
+  } = selectInputBaseProps(props)
 
   const {
-    style,
+    responsiveVariants = {},
+    variants = [],
+    style = {},
+    styles = {},
     value,
     disabled,
     onValueChange,
     onChangeText,
-    max,
-    min,
-    step,
-    editable,
-    hasSeparator,
-    format,
-    mask,
+    max = 1000000000,
+    min = 0,
+    step = 1,
+    editable = true,
+    hasSeparator = false,
+    format = null,
+    mask = undefined,
     suffix,
-    separator,
+    separator = null,
     prefix,
     validate,
     _error,
-    formatter,
+    formatter = null,
     placeholder,
-  } = numberIncrementProps
-
-  const styles = useStylesFor(NumberIncrement.styleRegistryName, style)
+  } = others
 
   const [isFocused, setIsFocused] = useState(false)
 
@@ -65,6 +110,16 @@ export const NumberIncrement = (props: NumberIncrementProps) => {
     return false
   }, [value])
 
+  const variantStyles = useDefaultComponentStyle<'u:NumberIncrement', typeof NumberIncrementPresets>(
+    'u:NumberIncrement',
+    {
+      responsiveVariants,
+      variants,
+      styles,
+      rootElement: 'wrapper',
+    },
+  )
+
   const onChange = (newValue: number) => {
     if (onValueChange) onValueChange?.(newValue)
     if (onChangeText) onChangeText?.(newValue)
@@ -88,19 +143,19 @@ export const NumberIncrement = (props: NumberIncrementProps) => {
 
   const inputTextStyle = React.useMemo(() => {
     return [
-      styles.input,
-      isFocused ? styles['input:focus'] : null,
-      hasError ? styles['input:error'] : null,
-      disabled ? styles['input:disabled'] : null,
-    ].filter(Boolean)
+      variantStyles.input,
+      isFocused && variantStyles['input:focus'],
+      hasError && variantStyles['input:error'],
+      disabled && variantStyles['input:disabled'],
+    ]
   }, [disabled, isFocused, hasError])
 
   const placeholderStyles = [
-    styles.placeholder,
-    isFocused ? styles['placeholder:focus'] : null,
-    hasError ? styles['placeholder:error'] : null,
-    disabled ? styles['placeholder:disabled'] : null,
-  ].filter(Boolean)
+    variantStyles.placeholder,
+    isFocused && variantStyles['placeholder:focus'],
+    hasError && variantStyles['placeholder:error'],
+    disabled && variantStyles['placeholder:disabled'],
+  ]
 
   const handleBlur = React.useCallback(() => {
     if (TypeGuards.isNumber(max) && (value >= max)) {
@@ -169,27 +224,28 @@ export const NumberIncrement = (props: NumberIncrementProps) => {
     <InputBase
       {...inputBaseProps}
       error={hasError ? errorMessage : null}
-      style={{
-        ...styles,
-        innerWrapper: {
-          ...styles.innerWrapper,
-          ...(editable ? styles['innerWrapper:cursor'] : {}),
-        },
+      styles={{
+        ...variantStyles,
+        innerWrapper: [
+          variantStyles.innerWrapper,
+          editable && variantStyles['innerWrapper:cursor'],
+        ],
       }}
       rightIcon={{
-        name: 'plus' as AppIcon,
+        name: 'plus' as IconPlaceholder,
         disabled: disabled || incrementDisabled,
         onPress: () => handleChange('increment'),
         component: 'button',
         ...inputBaseProps.rightIcon,
       }}
       leftIcon={{
-        name: 'minus' as AppIcon,
+        name: 'minus' as IconPlaceholder,
         disabled: disabled || decrementDisabled,
         onPress: () => handleChange('decrement'),
         component: 'button',
         ...inputBaseProps.leftIcon,
       }}
+      style={style}
       disabled={disabled}
       focused={isFocused}
       innerWrapperProps={{
@@ -205,13 +261,10 @@ export const NumberIncrement = (props: NumberIncrementProps) => {
         <Input
           displayType='input'
           css={[
-            // @ts-expect-error
             ...inputTextStyle,
-            // @ts-expect-error
             {
               '&::placeholder': placeholderStyles,
             },
-            // @ts-expect-error
             {
               '&:focus': [
                 {
@@ -236,29 +289,7 @@ export const NumberIncrement = (props: NumberIncrementProps) => {
           placeholder={placeholder}
           getInputRef={innerInputRef}
         />
-      ) : <Text text={String(value)} style={inputTextStyle} />}
+      ) : <Text text={String(value)} css={inputTextStyle} />}
     </InputBase>
   )
 }
-
-NumberIncrement.styleRegistryName = 'NumberIncrement'
-NumberIncrement.elements = [...InputBase.elements, 'input', 'placeholder']
-NumberIncrement.rootElement = 'wrapper'
-
-NumberIncrement.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return NumberIncrement as (props: StyledComponentProps<NumberIncrementProps, typeof styles>) => IJSX
-}
-
-NumberIncrement.defaultProps = {
-  max: 1000000000,
-  min: 0,
-  step: 1,
-  editable: true,
-  hasSeparator: false,
-  mask: undefined,
-  separator: null,
-  format: null,
-  formatter: null,
-} as Partial<NumberIncrementProps>
-
-WebStyleRegistry.registerComponent(NumberIncrement)

package/src/components/NumberIncrement/styles.ts

@@ -1,3 +1,4 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { InputBaseParts } from '../InputBase'
 
 export type NumberIncrementParts = InputBaseParts | 'input' | 'placeholder'
@@ -8,3 +9,7 @@ export type NumberIncrementComposition =
   | NumberIncrementParts
   | `${NumberIncrementParts}:${NumberIncrementStates}`
   | `innerWrapper:cursor`
+
+const createNumberIncrementStyle = createDefaultVariantFactory<NumberIncrementComposition>()
+
+export const NumberIncrementPresets = includePresets((styles) => createNumberIncrementStyle(() => ({ wrapper: styles })))