@codeleap/web 3.14.3 → 3.15.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/web",
-  "version": "3.14.3",
+  "version": "3.15.1",
   "main": "src/index.ts",
   "repository": {
     "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",
@@ -20,6 +20,7 @@
     "lint": "eslint -c  .eslintrc.js --fix \"./src/**/*.{ts,tsx,js,jsx}\""
   },
   "dependencies": {
+    "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-slider": "1.1.1",
     "@radix-ui/react-tooltip": "^1.0.6",
     "framer-motion": "^10.10.0",
@@ -27,6 +28,7 @@
     "masonic": "^3.7.0",
     "rc-slider": "^9.7.5",
     "react-autosize-textarea": "^7.1.0",
+    "react-circular-progressbar": "^2.1.0",
     "react-dropzone": "^14.2.3",
     "react-image-crop": "^10.1.8",
     "react-input-mask": "^2.0.4",

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/Progress/Bar/index.tsx

@@ -0,0 +1,122 @@
+import { ProgressBarPresets } from './styles'
+import { TypeGuards, useDefaultComponentStyle } from '@codeleap/common'
+import { Root, Indicator } from '@radix-ui/react-progress'
+import { Icon, Text, View } from '../../components'
+import { ProgressBarProps } from './types'
+import { formatProgress as _formatProgress } from '../utils'
+
+export * from './types'
+export * from './styles'
+
+const defaultProps: Partial<ProgressBarProps> = {
+  progress: 0,
+  variants: [],
+  responsiveVariants: {},
+  styles: {},
+  textProps: {},
+  progressIndicatorProps: {},
+  progressRootProps: {},
+  showProgress: false,
+  formatProgress: _formatProgress,
+}
+
+export const ProgressBar = (props: ProgressBarProps) => {
+  const allProps = {
+    ...ProgressBar.defaultProps,
+    ...props,
+  }
+
+  const {
+    progress,
+    variants,
+    responsiveVariants,
+    styles,
+    debugName,
+    formatProgress,
+    progressIndicatorProps,
+    progressRootProps,
+    showProgress,
+
+    leftIcon,
+    leftIconProps,
+    rightIcon,
+    rightIconProps,
+    text,
+    textProps,
+    leftText,
+    leftTextProps,
+    rightText,
+    rightTextProps,
+    ...rest
+  } = allProps
+
+  const variantStyles = useDefaultComponentStyle<
+    'u:ProgressBar',
+    typeof ProgressBarPresets
+  >('u:ProgressBar', {
+    variants,
+    responsiveVariants,
+    styles,
+  })
+
+  return (
+    <View css={variantStyles.wrapper} debugName={debugName} {...rest}>
+      {!TypeGuards.isNil(leftIcon) ? (
+        <Icon
+          name={leftIcon}
+          style={{ ...variantStyles.icon, ...variantStyles.leftIcon }}
+          debugName={`leftIcon-${debugName}`}
+          {...leftIconProps}
+        />
+      ) : null}
+      {TypeGuards.isString(leftText) ? (
+        <Text
+          text={leftText}
+          css={[variantStyles.text, variantStyles.leftText]}
+          {...leftTextProps}
+        />
+      ) : (
+        leftText
+      )}
+      <Root
+        css={variantStyles.progress}
+        value={progress}
+        {...progressRootProps}
+      >
+        <Indicator
+          css={[
+            variantStyles.indicator,
+            { transform: `translateX(-${100 - progress}%)` },
+          ]}
+          {...progressIndicatorProps}
+        />
+      </Root>
+      {TypeGuards.isString(text) || showProgress ? (
+        <Text
+          style={variantStyles.text}
+          text={showProgress ? formatProgress(progress) : text}
+          {...textProps}
+        />
+      ) : text}
+      {!TypeGuards.isNil(rightIcon) ? (
+        <Icon
+          name={rightIcon}
+          style={{ ...variantStyles.icon, ...variantStyles.rightIcon }}
+          debugName={`rightIcon-${debugName}`}
+          {...rightIconProps}
+        />
+      ) : null}
+      {TypeGuards.isString(rightText) ? (
+        <Text
+          text={rightText}
+          css={[variantStyles.text, variantStyles.rightText]}
+          {...rightTextProps}
+        />
+      ) : (
+        rightText
+      )}
+    </View>
+  )
+}
+
+ProgressBar.defaultProps = defaultProps

package/src/components/Progress/Bar/styles.tsx

@@ -0,0 +1,7 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+
+export type ProgressBarComposition = 'wrapper' | 'progress' | 'indicator' | 'text' | 'icon' | 'leftIcon' | 'leftText' | 'rightIcon' | 'rightText'
+
+const createProgressBarStyle = createDefaultVariantFactory<ProgressBarComposition>()
+
+export const ProgressBarPresets = includePresets((styles) => createProgressBarStyle(() => ({ wrapper: styles })))

package/src/components/Progress/Bar/types.tsx

@@ -0,0 +1,30 @@
+import { ComponentVariants, IconPlaceholder, PropsOf, StylesOf } from '@codeleap/common'
+import { ProgressBarComposition, ProgressBarPresets } from './styles'
+import {
+  ProgressProps,
+  ProgressIndicatorProps,
+} from '@radix-ui/react-progress'
+import { IconProps, View, TextProps as _TextProps } from '../../components'
+import { ProgressPropsRoot } from '..'
+import { ElementType } from 'react'
+
+type TextProps = _TextProps<ElementType>
+
+export type ProgressBarProps = ComponentVariants<typeof ProgressBarPresets> &
+  Omit<PropsOf<typeof View>, 'variants' | 'responsiveVariants' | 'styles'> &
+  ProgressPropsRoot & {
+    styles?: StylesOf<ProgressBarComposition>
+    progressIndicatorProps?: ProgressIndicatorProps
+    progressRootProps?: ProgressProps
+
+    leftIcon?: IconPlaceholder
+    leftIconProps?: Partial<IconProps>
+    rightIcon?: IconPlaceholder
+    rightIconProps?: Partial<IconProps>
+    text?: string
+    textProps?: Partial<TextProps>
+    leftText?: TextProps['text'] | JSX.Element
+    leftTextProps?: Partial<TextProps>
+    rightText?: TextProps['text'] | JSX.Element
+    rightTextProps?: Partial<TextProps>
+  }

package/src/components/Progress/Circle/index.tsx

@@ -0,0 +1,104 @@
+import {
+  CircularProgressbarWithChildren,
+  buildStyles,
+} from 'react-circular-progressbar'
+import { View, Text, Icon } from '../../components'
+import { TypeGuards, useDefaultComponentStyle } from '@codeleap/common'
+import { ProgressCirclePresets } from './styles'
+import { ProgressCircleProps } from './types'
+import { formatProgress as _formatProgress } from '../utils'
+import { useMemo } from '@codeleap/common'
+
+export * from './styles'
+export * from './types'
+
+const defaultProps: Partial<ProgressCircleProps> = {
+  progress: 0,
+  variants: [],
+  responsiveVariants: {},
+  styles: {},
+  showProgress: false,
+  formatProgress: _formatProgress,
+  size: null,
+}
+
+export const ProgressCircle = (props: ProgressCircleProps) => {
+  const allProps = {
+    ...ProgressCircle.defaultProps,
+    ...props,
+  }
+
+  const {
+    text,
+    progress,
+    icon,
+    iconProps,
+    variants,
+    styles,
+    debugName,
+    showProgress,
+    responsiveVariants,
+    circleProps,
+    children,
+    formatProgress,
+    circleStyles,
+    textProps,
+    size: propSize,
+    ...rest
+  } = allProps
+
+  const variantStyles = useDefaultComponentStyle<
+    'u:ProgressCircle',
+    typeof ProgressCirclePresets
+  >('u:ProgressCircle', {
+    variants,
+    responsiveVariants,
+    styles,
+    rootElement: 'wrapper',
+  })
+
+  const wrapperSize = useMemo(() => {
+    if (TypeGuards.isNumber(propSize)) return propSize
+    const { size, width, height } = variantStyles.circle
+    const value = size ?? width ?? height
+    return value ?? 0
+  }, [variantStyles.circle])
+
+  return (
+    <View debugName={debugName} css={variantStyles.wrapper} {...rest}>
+      <CircularProgressbarWithChildren
+        value={progress}
+        css={[
+          variantStyles.circle,
+          { width: wrapperSize, height: wrapperSize },
+        ]}
+        styles={buildStyles({
+          pathColor: variantStyles.line?.borderColor,
+          trailColor: variantStyles.line?.backgroundColor,
+          strokeLinecap: 'butt',
+          ...circleStyles,
+        })}
+        {...circleProps}
+      >
+        {children}
+        {!TypeGuards.isNil(icon) ? (
+          <Icon
+            name={icon}
+            style={variantStyles.icon}
+            debugName={`innerIcon-${debugName}`}
+            {...iconProps}
+          />
+        ) : null}
+        {TypeGuards.isString(text) || showProgress ? (
+          <Text
+            style={variantStyles.text}
+            text={showProgress ? formatProgress(progress) : text}
+            {...textProps}
+          />
+        ) : text}
+      </CircularProgressbarWithChildren>
+    </View>
+  )
+}
+
+ProgressCircle.defaultProps = defaultProps

package/src/components/Progress/Circle/styles.ts

@@ -0,0 +1,8 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import 'react-circular-progressbar/dist/styles.css'
+
+export type ProgressCircleComposition = 'wrapper' | 'line' | 'circle' | 'text' | 'icon' | 'text'
+
+const createProgressCircleStyle = createDefaultVariantFactory<ProgressCircleComposition>()
+
+export const ProgressCirclePresets = includePresets((styles) => createProgressCircleStyle(() => ({ wrapper: styles })))

package/src/components/Progress/Circle/types.ts

@@ -0,0 +1,32 @@
+import { ComponentVariants, IconPlaceholder, PropsOf, StylesOf } from '@codeleap/common'
+import {
+  IconProps,
+  ProgressCircleComposition,
+  ProgressCirclePresets,
+  View,
+  TextProps as _TextProps,
+} from '../../components'
+import { ProgressPropsRoot } from '..'
+import { CircularProgressbarWithChildren, buildStyles } from 'react-circular-progressbar'
+import { ElementType } from 'react'
+
+type TextProps = _TextProps<ElementType>
+
+export type ProgressCircleProps = Omit<
+  PropsOf<typeof View>,
+  'styles' | 'variants' | 'children'
+> &
+  ComponentVariants<typeof ProgressCirclePresets> &
+  ProgressPropsRoot & {
+    styles?: StylesOf<ProgressCircleComposition>
+    circleProps?: PropsOf<typeof CircularProgressbarWithChildren>
+    circleStyles?: Parameters<typeof buildStyles>[0]
+    children?: React.ReactNode
+    size?: number
+
+    text?: TextProps['text'] | JSX.Element
+    textProps?: Partial<TextProps>
+
+    icon?: IconPlaceholder
+    iconProps?: Partial<IconProps>
+  }

package/src/components/Progress/index.tsx

@@ -0,0 +1,10 @@
+export * from './Bar'
+export * from './Circle'
+
+export type ProgressPropsRoot = {
+  progress: number
+  style?: React.CSSProperties
+  showProgress?: boolean
+  debugName?: string
+  formatProgress?: (progress: number) => string
+}

package/src/components/Progress/utils.ts

@@ -0,0 +1,3 @@
+export function formatProgress(value) {
+  return `${value.toFixed(value % 1 != 0 && !isNaN(value % 1) ? 2 : 0)}%`
+}

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

@@ -31,5 +31,8 @@ export * from './EmptyPlaceholder'
 export * from './Grid'
 export * from './Badge'
 export * from './CropPicker'
-export * from './defaultStyles'
 export * from './Dropzone'
+export * from './Progress'
+export * from './Tag'
+
+export * from './defaultStyles'

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)
+    }
+  }
+}