@codeleap/web 3.14.3 → 3.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/web",
-  "version": "3.14.3",
+  "version": "3.15.0",
   "main": "src/index.ts",
   "repository": {
     "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",

package/src/components/CropPicker/index.tsx

@@ -10,6 +10,7 @@ import { Modal, Button, FileInput, FileInputRef } from '../components'
 
 const ReactCrop: React.Component = require('react-image-crop').Component
 import 'react-image-crop/dist/ReactCrop.css'
+import { ComponentWithDefaultProps } from '../../types'
 
 export * from './styles'
 export * from './types'
@@ -18,6 +19,11 @@ export * from './useCropPicker'
 
 export const _CropPicker = forwardRef<FileInputRef, CropPickerProps>(
   (props: CropPickerProps, ref) => {
+    const allProps = {
+      ...CropPicker.defaultProps,
+      ...props,
+    }
+
     const {
       onFileSelect,
       targetCrop,
@@ -30,7 +36,7 @@ export const _CropPicker = forwardRef<FileInputRef, CropPickerProps>(
       debugName,
       handle,
       ...fileInputProps
-    } = props
+    } = allProps
 
     const {
       onConfirmCrop,
@@ -98,4 +104,4 @@ export const _CropPicker = forwardRef<FileInputRef, CropPickerProps>(
   },
 )
 
-export const CropPicker = React.memo(_CropPicker) as (props: CropPickerProps) => JSX.Element
+export const CropPicker = React.memo(_CropPicker) as ComponentWithDefaultProps<CropPickerProps>

package/src/components/CropPicker/useCropPicker.tsx

@@ -33,9 +33,10 @@ export function useCropPicker({
   }
 
   const cleanup = () => {
-    setImage(null)
+    toggle()
     setRelativeCrop(null)
     setCrop(undefined)
+    setTimeout(() => setImage(null), 500)
   }
 
   const onConfirmCrop = async () => {
@@ -46,7 +47,6 @@ export function useCropPicker({
         preview,
       },
     ])
-    toggle()
     setTimeout(() => cleanup())
   }
 
@@ -80,7 +80,6 @@ export function useCropPicker({
   }
 
   const onClose = () => {
-    toggle()
     onCancel()
     setTimeout(() => cleanup())
   }

package/src/components/SegmentedControl/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { View } from '../View'
 import { SegmentedControlOption } from './SegmentedControlOption'
-import { ComponentVariants, useDefaultComponentStyle, PropsOf, IconPlaceholder, StylesOf, useRef } from '@codeleap/common'
+import { ComponentVariants, useDefaultComponentStyle, PropsOf, IconPlaceholder, StylesOf, useRef, TypeGuards } from '@codeleap/common'
 import { SegmentedControlPresets } from './styles'
 import { Text } from '../Text'
 import { Touchable } from '../Touchable'
@@ -49,6 +49,8 @@ export type SegmentedControlProps<T = string> = ComponentVariants<typeof Segment
   RenderAnimatedView?: ForwardRefComponent<HTMLDivElement, any>
   textProps?: Omit<PropsOf<typeof Text>, 'key'>
   iconProps?: Partial<IconProps>
+  debounce?: number
+  debounceEnabled?: boolean
 }
 
 const defaultProps: Partial<SegmentedControlProps> = {
@@ -56,6 +58,8 @@ const defaultProps: Partial<SegmentedControlProps> = {
   transitionDuration: 0.2,
   disabled: false,
   RenderAnimatedView: motion.div,
+  debounce: 1000,
+  debounceEnabled: true,
 }
 
 export const SegmentedControl = (props: SegmentedControlProps) => {
@@ -81,6 +85,8 @@ export const SegmentedControl = (props: SegmentedControlProps) => {
     textProps = {},
     iconProps = {},
     debugName,
+    debounce,
+    debounceEnabled,
     ...rest
   } = allProps
 
@@ -98,6 +104,7 @@ export const SegmentedControl = (props: SegmentedControlProps) => {
   }, [value])
 
   const maxDivWidthRef = useRef(null)
+  const sectionPressedRef = useRef(null)
 
   const largestWidth = React.useMemo(() => {
     return {
@@ -128,6 +135,21 @@ export const SegmentedControl = (props: SegmentedControlProps) => {
     largestWidth,
   ]
 
+  const onSelectTab = (option: SegmentedControlOptionProps) => {
+    if (!debounceEnabled || !TypeGuards.isNumber(debounce)) {
+      onValueChange(option.value)
+      return
+    }
+
+    if (sectionPressedRef.current !== null) return
+
+    onValueChange(option.value)
+    sectionPressedRef.current = setTimeout(() => {
+      clearTimeout(sectionPressedRef.current)
+      sectionPressedRef.current = null
+    }, debounce)
+  }
+
   return (
     <View css={[variantStyles.wrapper, style]} {...rest}>
       {label && <Text text={label} css={[variantStyles.label, disabled && variantStyles['label:disabled']]} />}
@@ -148,7 +170,7 @@ export const SegmentedControl = (props: SegmentedControlProps) => {
             debugName={debugName}
             label={o.label}
             value={o.value}
-            onPress={() => onValueChange(o.value)}
+            onPress={() => onSelectTab(o)}
             key={idx}
             icon={o.icon}
             selected={value === o.value}

package/src/components/Tag/index.tsx

@@ -0,0 +1,126 @@
+import React from 'react'
+import { TypeGuards, useDefaultComponentStyle, useNestedStylesByKey } from '@codeleap/common'
+import { TagParts, TagPresets } from './styles'
+import { TagProps } from './types'
+import { Icon } from '../Icon'
+import { Text } from '../Text'
+import { Touchable } from '../Touchable'
+import { View } from '../View'
+import { Badge } from '../Badge'
+
+export * from './styles'
+export * from './types'
+
+const defaultProps: Partial<TagProps> = {
+  debugName: 'Tag component',
+  disabled: false,
+}
+
+export const Tag = (props: TagProps) => {
+  const allProps = {
+    ...Tag.defaultProps,
+    ...props,
+  }
+
+  const {
+    variants,
+    rightComponent,
+    leftComponent,
+    responsiveVariants,
+    styles,
+    style,
+    css,
+    leftIcon,
+    text,
+    textProps,
+    rightIcon,
+    rightIconProps,
+    leftIconProps,
+    leftBadgeProps,
+    leftBadge,
+    rightBadge,
+    rightBadgeProps,
+    children,
+    onPress,
+    disabled,
+    ...touchableProps
+  } = allProps
+
+  const variantStyles = useDefaultComponentStyle<'u:Tag', typeof TagPresets>('u:Tag', {
+    variants,
+    responsiveVariants,
+    styles,
+  })
+
+  const leftBadgeStyles = useNestedStylesByKey('leftBadge', variantStyles)
+  const rightBadgeStyles = useNestedStylesByKey('rightBadge', variantStyles)
+
+  const isPressable = TypeGuards.isFunction(onPress)
+
+  const Wrapper: any = isPressable ? Touchable : View
+
+  const wrapperProps = isPressable ? { onPress, ...touchableProps } : touchableProps
+
+  const getStylesByKey = (styleKey: TagParts) => ([
+    variantStyles?.[styleKey],
+    isPressable && variantStyles[`${styleKey}:pressable`],
+    disabled && variantStyles[`${styleKey}:disabled`],
+  ])
+
+  const wrapperStyles = React.useMemo(() => ([
+    getStylesByKey('wrapper'),
+    css,
+    style,
+  ]), [variantStyles, disabled, isPressable, style])
+
+  const textStyles = React.useMemo(() => getStylesByKey('text'), [variantStyles, disabled, isPressable])
+  const leftIconStyles = React.useMemo(() => getStylesByKey('leftIcon'), [variantStyles, disabled, isPressable])
+  const rightIconStyles = React.useMemo(() => getStylesByKey('rightIcon'), [variantStyles, disabled, isPressable])
+
+  return (
+    <Wrapper css={wrapperStyles} disabled={disabled} {...wrapperProps}>
+      {leftComponent}
+      {leftBadge && (
+        <Badge
+          debugName={`${touchableProps?.debugName}:leftBadge`}
+          styles={leftBadgeStyles}
+          badge={leftBadge}
+          disabled={disabled}
+          {...leftBadgeProps}
+        />
+      )}
+      {!TypeGuards.isNil(leftIcon) && (
+        <Icon
+          debugName={`${touchableProps?.debugName}:leftIcon`}
+          css={leftIconStyles}
+          name={leftIcon}
+          {...leftIconProps}
+        />
+      )}
+
+      {TypeGuards.isString(text) ? <Text text={text} css={textStyles} {...textProps} /> : text}
+      {children}
+
+      {!TypeGuards.isNil(rightIcon) && (
+        <Icon
+          debugName={`${touchableProps?.debugName}:rightIcon`}
+          css={rightIconStyles}
+          name={rightIcon}
+          {...rightIconProps}
+        />
+      )}
+      {rightBadge && (
+        <Badge
+          debugName={`${touchableProps?.debugName}:rightBadge`}
+          styles={rightBadgeStyles}
+          badge={rightBadge}
+          disabled={disabled}
+          {...rightBadgeProps}
+        />
+      )}
+      {rightComponent}
+    </Wrapper>
+  )
+}
+
+Tag.defaultProps = defaultProps

package/src/components/Tag/styles.ts

@@ -0,0 +1,23 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { BadgeComposition } from '../Badge'
+
+export type TagStates = 'pressable' | 'disabled'
+
+type TagBadgeParts = 
+  | `leftBadge${Capitalize<BadgeComposition>}`
+  | `rightBadge${Capitalize<BadgeComposition>}`
+
+export type TagParts =
+  | `wrapper`
+  | 'text'
+  | 'leftIcon'
+  | 'rightIcon'
+
+export type TagComposition = TagParts | TagBadgeParts | `${TagParts}:${TagStates}`
+
+const createTagStyle = createDefaultVariantFactory<TagComposition>()
+
+export const TagPresets = includePresets((styles) => createTagStyle(() => ({
+  wrapper: styles,
+})),
+)

package/src/components/Tag/types.ts

@@ -0,0 +1,29 @@
+import { StylesOf, ComponentVariants, IconPlaceholder } from '@codeleap/common'
+import { ReactElement } from 'react'
+import { TagComposition, TagPresets } from './styles'
+import { BadgeProps } from '../Badge'
+import { TextProps } from '../Text'
+import { IconProps } from '../Icon'
+import { ComponentCommonProps } from '../../types'
+import { TouchableProps } from '../Touchable'
+import { ViewProps } from '../View'
+
+export type TagProps = 
+  Omit<ViewProps<'div'>, 'styles' | 'variants' | 'responsiveVariants'> &
+  Omit<TouchableProps, 'styles' | 'variants' | 'responsiveVariants'> &
+  ComponentVariants<typeof TagPresets> &
+  ComponentCommonProps & {
+    styles?: StylesOf<TagComposition>
+    text?: TextProps<'p'>['text'] | ReactElement
+    textProps?: Partial<TextProps<'p'>>
+    leftIcon?: IconPlaceholder
+    leftIconProps?: Partial<IconProps>
+    rightIcon?: IconPlaceholder
+    rightIconProps?: Partial<IconProps>
+    leftComponent?: ReactElement
+    rightComponent?: ReactElement
+    leftBadge?: BadgeProps['badge']
+    rightBadge?: BadgeProps['badge']
+    leftBadgeProps?: Partial<BadgeProps>
+    rightBadgeProps?: Partial<BadgeProps>
+  }

package/src/components/components.ts

@@ -33,3 +33,4 @@ export * from './Badge'
 export * from './CropPicker'
 export * from './defaultStyles'
 export * from './Dropzone'
+export * from './Tag'

package/src/components/defaultStyles.ts

@@ -27,6 +27,7 @@ import { EmptyPlaceholderPresets } from './EmptyPlaceholder/styles'
 import { GridPresets } from './Grid/styles'
 import { BadgePresets } from './Badge/styles'
 import { CropPickerPresets } from './CropPicker'
+import { TagPresets } from './Tag/styles'
 
 export const defaultStyles = {
   View: ViewPresets,
@@ -61,6 +62,7 @@ export const defaultStyles = {
   Badge: BadgePresets,
   Dropzone: DropzonePresets,
   CropPicker: CropPickerPresets,
+  Tag: TagPresets,
 }
 
 import createCache from '@emotion/cache'

package/src/index.ts

@@ -8,3 +8,5 @@ export * from './lib/usePopState'
 export { default as Toast } from './lib/Toast'
 export { CreateOSAlert, useGlobalAlertComponent, AlertOutlet } from './lib/OSAlert'
 export type { GlobalAlertComponentProps, GlobalAlertType } from './lib/OSAlert'
+export * from './lib/keyboard'
+export * from './lib/localStorage'

package/src/lib/OSAlert.tsx

@@ -14,12 +14,13 @@ type OSAlertArgs = {
   options?: AlertButton[]
   onDismiss?: AnyFunction
   onAction?: AnyFunction
+  type?: Exclude<GlobalAlertType, 'custom'> | string
 }
 type AlertEvent = AlertButton['onPress']
 
 type NamedEvents<E extends string> = Partial<Record<E, AlertEvent>>
 
-export type GlobalAlertType = 'info' | 'error' | 'warn' | 'ask'
+export type GlobalAlertType = 'info' | 'error' | 'warn' | 'ask' | 'custom'
 
 export type GlobalAlertComponentProps = {
   args: OSAlertArgs
@@ -166,11 +167,29 @@ export function CreateOSAlert(Component) {
       onDismiss,
     })
   }
+
+  function custom(args: OSAlertArgs & {type: string}) {
+    const {
+      title = 'Hang on',
+      body = 'Are you sure?',
+      type,
+      ...rest
+    } = args
+
+    OSAlert({
+      title,
+      body,
+      type: type as GlobalAlertType,
+      ...rest,
+    })
+  }
+
   return {
     ask,
     warn,
     info,
     error: OSError,
+    custom,
   }
 }
 

package/src/lib/index.ts

@@ -5,3 +5,4 @@ export * from './usePopState'
 export * from './useBreakpointMatch'
 export * from './useClick'
 export * from './ListMasonry'
+export * from './localStorage'

package/src/lib/keyboard.ts

@@ -0,0 +1,41 @@
+import { onUpdate, TypeGuards } from '@codeleap/common'
+
+export const keydownDefaultKeyOptions = {
+  ArrowLeft: 'ArrowLeft',
+  ArrowRight: 'ArrowRight',
+  ArrowUp: 'ArrowUp',
+  ArrowDown: 'ArrowDown',
+  Enter: 'Enter',
+  Space: {
+    key: ' ',
+    code: 'Space',
+  },
+}
+ 
+export function useKeydown(
+  expectedKey: keyof typeof useKeydown.keys | { key: string; code: string },
+  handler: (event: KeyboardEvent) => void, 
+  deps: Array<any> = [], 
+  options?: boolean | AddEventListenerOptions
+) {
+  const eventKey = TypeGuards.isString(expectedKey) ? (useKeydown?.keys?.[expectedKey] ?? expectedKey) : expectedKey
+
+  const handleKeyPress = (event: KeyboardEvent) => {
+    const { key, code } = TypeGuards.isString(eventKey) ? { key: eventKey, code: eventKey } : eventKey
+
+    if (event?.key === key || event?.code === code) {
+      handler?.(event)
+    }
+  }
+
+  onUpdate(() => {
+    document.addEventListener('keydown', handleKeyPress, options)
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyPress)
+    }
+  }, deps)
+}
+
+useKeydown.keys = keydownDefaultKeyOptions
+useKeydown.defaultKeyOptions = keydownDefaultKeyOptions

package/src/lib/localStorage.ts

@@ -0,0 +1,191 @@
+import React from 'react'
+import { onMount, TypeGuards, useState } from '@codeleap/common'
+
+export type LocalStorageHandler<T> = (key: T, event: StorageEvent, value: any) => void
+export type Key<T> = keyof T
+
+type UseLocalStorageOptions = {
+  disableListen?: boolean
+  setItemValueOnMutate?: boolean
+  getItemValueOnMount?: boolean
+  parseValueOnGet?: boolean
+}
+
+export class LocalStorage<T extends Record<string, string>> {
+  public storageKeys: T
+
+  private storageListeners: ((event: StorageEvent) => void)[] = []
+
+  constructor(keys: T) {
+    this.storageKeys = keys
+  }
+
+  public getLocalStorage(): Storage {
+    if (typeof window === 'undefined') {
+      return {} as Storage
+    }
+    return localStorage
+  }
+
+  public getStorageKey(key: Key<T>): string {
+    return String(this.storageKeys[key] ?? key)
+  }
+
+  private parseValue(value: any) {
+    try {
+      return JSON.parse(value)
+    } catch (e) {
+      return value
+    }
+  }
+
+  private serializeValue(value: any): string {
+    if (TypeGuards.isString(value)) return value
+
+    try {
+      return JSON.stringify(value)
+    } catch (e) {
+      return value
+    }
+  }
+
+  public replaceItem(key: Key<T>, value: any): string {
+    const storageKey = this.getStorageKey(key)
+    const storage = this.getLocalStorage()
+    storage.removeItem(storageKey)
+    const serializedValue = this.serializeValue(value)
+    storage.setItem(storageKey, serializedValue)
+    return serializedValue
+  }
+
+  public getItem(key: Key<T>, parseValue = true): string | null {
+    const storageKey = this.getStorageKey(key)
+    const storage = this.getLocalStorage()
+
+    let value = storage.getItem(storageKey)
+
+    if (parseValue) {
+      value = this.parseValue(value)
+    }
+
+    return value
+  }
+
+  public removeItem(key: Key<T>): void {
+    const storageKey = this.getStorageKey(key)
+    const storage = this.getLocalStorage()
+    storage.removeItem(storageKey)
+  }
+
+  public setItem(key: Key<T>, value: any): string {
+    const storageKey = this.getStorageKey(key)
+    const storage = this.getLocalStorage()
+    const serializedValue = this.serializeValue(value)
+    storage.setItem(storageKey, serializedValue)
+    return serializedValue
+  }
+
+  public clear(): void {
+    const storage = this.getLocalStorage()
+    storage.clear()
+  }
+
+  public multiSet(keyValuePairs: Array<[Key<T>, any]>): void {
+    for (const [key, value] of keyValuePairs) {
+      this.setItem(key, value)
+    }
+  }
+
+  public multiRemove(keys: Key<T>[]): void {
+    for (const key of keys) {
+      this.removeItem(key)
+    }
+  }
+
+  public multiGet(keys: Key<T>[]): Record<string, any> {
+    const storage = this.getLocalStorage()
+    const values: Record<string, any> = {}
+
+    for (const key of keys) {
+      const storageKey = this.getStorageKey(key)
+      const value = storage.getItem(storageKey)
+      
+      values[key as string] = value
+    }
+
+    return values
+  }
+
+  public use<S = any>(
+    key: Key<T>, 
+    initialValue: any = null,
+    options: UseLocalStorageOptions = {}
+  ): [S, (to: S | ((prev: S) => S)) => any] {
+    const { 
+      disableListen = false, 
+      setItemValueOnMutate = true,
+      getItemValueOnMount = true,
+      parseValueOnGet = true,
+    } = options
+
+    const [value, _setValue] = useState<S>(() => {
+      return getItemValueOnMount ? (this.getItem(key, parseValueOnGet) ?? initialValue) : initialValue
+    })
+    
+    onMount(() => {
+      const handler = () => {
+        let _initialValue = initialValue
+        let storedValue = this.getItem(key, parseValueOnGet)
+
+        if (!TypeGuards.isNil(storedValue) && getItemValueOnMount) {
+          _initialValue = this.parseValue(storedValue)
+        }
+
+        _setValue(_initialValue)
+      }
+
+      handler()
+
+      return disableListen ? null : this.listen(key, handler)
+    })
+
+    const setValue = (to: S | ((prev:S) => S)) => {
+      return _setValue((prev) => {
+        let newValue = prev
+
+        if (!TypeGuards.isFunction(to)) {
+          newValue = to
+        } else {
+          const fn = to as ((prev:S) => S)
+          newValue = fn(value)
+        }
+
+        if (setItemValueOnMutate) {
+          this.setItem(key, newValue)
+        }
+
+        return newValue
+      })
+    }
+
+    return [value, setValue]
+  }
+
+  public listen(key: Key<T>, handler: LocalStorageHandler<Key<T>>) {
+    const trigger = (event: StorageEvent) => {
+      const storageKey = this.getStorageKey(key)
+
+      if (event?.key === storageKey) {
+        handler(key, event, this.parseValue(event?.newValue))
+      }
+    }
+
+    const newLength = this.storageListeners.push(trigger)
+    window.addEventListener('storage', trigger)
+
+    return () => {
+      this.storageListeners.splice(newLength - 1, 1)
+      window.removeEventListener('storage', trigger)
+    }
+  }
+}