@codeleap/web 6.3.0 → 7.0.0

package/package.json.bak

@@ -1,65 +0,0 @@
-{
-  "name": "@codeleap/web",
-  "version": "6.3.0",
-  "main": "src/index.ts",
-  "repository": {
-    "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",
-    "type": "git",
-    "directory": "packages/web"
-  },
-  "license": "UNLICENSED",
-  "devDependencies": {
-    "@codeleap/config": "workspace:*",
-    "@codeleap/hooks": "workspace:*",
-    "@codeleap/i18n": "workspace:*",
-    "@codeleap/logger": "workspace:*",
-    "@codeleap/query": "workspace:*",
-    "@codeleap/types": "workspace:*",
-    "@codeleap/utils": "workspace:*",
-    "@codeleap/store": "workspace:*"
-  },
-  "scripts": {
-    "build": "tsc --build",
-    "lint": "eslint -c  .eslintrc.js --fix \"./src/**/*.{ts,tsx,js,jsx}\""
-  },
-  "dependencies": {
-    "@fastify/deepmerge": "3.1.0",
-    "@radix-ui/react-progress": "1.1.7",
-    "@radix-ui/react-slider": "1.3.6",
-    "@radix-ui/react-tooltip": "1.2.8",
-    "@tiptap/pm": "^3.7.0",
-    "@tiptap/react": "^3.7.0",
-    "@tiptap/starter-kit": "^3.7.0",
-    "embla-carousel-autoplay": "^8.6.0",
-    "embla-carousel-react": "^8.6.0",
-    "imask": "^7.6.1",
-    "masonic": "4.1.0",
-    "motion": "12.23.24",
-    "react-circular-progressbar": "2.2.0",
-    "react-colorful": "5.6.1",
-    "react-datepicker": "8.7.0",
-    "react-dropzone": "^14.2.3",
-    "react-image-crop": "^10.1.8",
-    "react-imask": "^7.6.1",
-    "react-number-format": "^5.4.2",
-    "react-select": "5.10.2",
-    "react-textarea-autosize": "^8.5.9",
-    "uuid": "13.0.0"
-  },
-  "peerDependencies": {
-    "@codeleap/types": "workspace:*",
-    "@codeleap/utils": "workspace:*",
-    "@codeleap/hooks": "workspace:*",
-    "@codeleap/i18n": "workspace:*",
-    "@codeleap/query": "workspace:*",
-    "@codeleap/logger": "workspace:*",
-    "@codeleap/styles": "workspace:*",
-    "@codeleap/store": "workspace:*",
-    "@emotion/react": "11.14.0",
-    "@reach/router": "^1.3.4",
-    "dayjs": "1.11.18",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
-    "typescript": "5.5.2"
-  }
-}

package/src/components/ActionIcon/index.tsx

@@ -1,93 +0,0 @@
-import { TypeGuards } from '@codeleap/types'
-import { Icon } from '../Icon'
-import { Touchable } from '../Touchable'
-import { View } from '../View'
-import { ActionIconParts } from './styles'
-import { ActionIconProps } from './types'
-import { useStylesFor } from '../../lib/hooks/useStylesFor'
-import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
-import { AnyRecord, IJSX, mergeStyles, StyledComponentProps } from '@codeleap/styles'
-import { ElementType } from 'react'
-
-export * from './styles'
-export * from './types'
-
-export const ActionIcon = (props: ActionIconProps) => {
-  const {
-    icon,
-    name,
-    iconProps,
-    onPress,
-    style,
-    children,
-    disabled,
-    debugName,
-    ...touchableProps
-  } = {
-    ...ActionIcon.defaultProps,
-    ...props,
-  }
-
-  const styles = useStylesFor(ActionIcon.styleRegistryName, style)
-
-  const isPressable = TypeGuards.isFunction(onPress) && !disabled
-
-  const WrapperComponent: any = isPressable ? Touchable : View
-
-  const handlePress = (e) => {
-    if (!isPressable) return
-
-    const pressed = e?.type === 'click' || e?.keyCode === 13 || e?.key === 'Enter'
-
-    if (pressed) {
-      onPress?.()
-    }
-  }
-
-  const getStyles = (key: ActionIconParts) => mergeStyles([
-    styles[key],
-    disabled && styles[`${key}:disabled`],
-    isPressable && styles[`${key}:pressable`],
-  ])
-
-  const wrapperProps = isPressable ? {
-    onPress: () => handlePress({ type: 'click' }),
-    onKeyDown: handlePress,
-  } : {}
-
-  const wrapperStyles = getStyles('touchableWrapper')
-  const iconStyles = getStyles('icon')
-
-  return (
-    <WrapperComponent
-      disabled={disabled}
-      debugName={debugName}
-      {...wrapperProps}
-      {...touchableProps}
-      style={wrapperStyles}
-    >
-      <Icon
-        debugName={debugName}
-        name={icon ?? name}
-        {...iconProps}
-        style={iconStyles}
-      />
-      {children}
-    </WrapperComponent>
-  )
-}
-
-ActionIcon.styleRegistryName = 'ActionIcon'
-ActionIcon.elements = ['touchable', 'icon']
-ActionIcon.rootElement = 'touchableWrapper'
-
-ActionIcon.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return ActionIcon as (props: StyledComponentProps<ActionIconProps, typeof styles>) => IJSX
-}
-
-ActionIcon.defaultProps = {
-  disabled: false,
-  tabIndex: 0,
-} as Partial<ActionIconProps>
-
-WebStyleRegistry.registerComponent(ActionIcon)

package/src/components/ActionIcon/styles.ts

@@ -1,8 +0,0 @@
-import { IconComposition } from '../Icon'
-import { TouchableComposition } from '../Touchable/styles'
-
-export type ActionIconParts = IconComposition | `touchable${Capitalize<TouchableComposition>}`
-
-export type ActionIconStates = 'disabled' | 'pressable'
-
-export type ActionIconComposition = ActionIconParts | `${ActionIconParts}:${ActionIconStates}`

package/src/components/ActionIcon/types.ts

@@ -1,15 +0,0 @@
-import { ComponentCommonProps } from '../../types'
-import { TouchableProps } from '../Touchable'
-import { ActionIconComposition } from './styles'
-import { IconProps } from '../Icon'
-import { AppIcon, StyledProp } from '@codeleap/styles'
-
-export type ActionIconProps =
-  Omit<TouchableProps, 'style' | 'debugName'> &
-  ComponentCommonProps &
-  {
-    iconProps?: Partial<IconProps>
-    icon?: AppIcon
-    name?: AppIcon
-    style?: StyledProp<ActionIconComposition>
-  }

package/src/components/CropPicker/components/CropPickerFooter.tsx

@@ -1,39 +0,0 @@
-import { ICSS } from '@codeleap/styles'
-import { Button, ButtonComposition } from '../../Button'
-import { View } from '../../View'
-import { AnyFunction, StylesOf } from '@codeleap/types'
-
-export type CropPickerFooterProps = {
-  footerStyle: ICSS
-  confirmStyles: StylesOf<ButtonComposition>
-  cancelStyles: StylesOf<ButtonComposition>
-  onConfirmCrop: AnyFunction
-  onCancelCrop: AnyFunction
-}
-
-export const CropPickerFooter = (props: CropPickerFooterProps) => {
-  const {
-    footerStyle,
-    confirmStyles,
-    cancelStyles,
-    onConfirmCrop,
-    onCancelCrop,
-  } = props
-
-  return (
-    <View style={footerStyle}>
-      <Button
-        text={'Cancel'}
-        onPress={onCancelCrop}
-        debugName={'cropModal:cancel'}
-        style={cancelStyles}
-      />
-      <Button
-        text={'Confirm'}
-        onPress={onConfirmCrop}
-        debugName={'cropModal:confirm'}
-        style={confirmStyles}
-      />
-    </View>
-  )
-}

package/src/components/DatePicker/components/DayContent.tsx

@@ -1,52 +0,0 @@
-import dayjs from 'dayjs';
-import { DayComponentProps, DatePickerProps } from '../types'
-import { TypeGuards } from '@codeleap/types'
-import { DatePickerComposition } from '../styles'
-import { View } from '../../View'
-import { Text } from '../../Text'
-import { useInputBasePartialStyles } from '../../InputBase/useInputBasePartialStyles';
-import { StyleRecord } from '@codeleap/styles'
-
-type Props = DayComponentProps & {
-  minDate: DatePickerProps['minDate']
-  maxDate: DatePickerProps['maxDate']
-  styles: StyleRecord<DatePickerComposition>
-  component: DatePickerProps['dayComponent']
-}
-
-export const DayContent = (props: Props) => {
-  const { value, date: providedDate, minDate, maxDate, styles, component: Component, day } = props
-
-  const date = dayjs(providedDate).format('DD MMM YYYY');
-  const dateValue = value ? dayjs(value).format('DD MMM YYYY') : ''
-
-  const isSelected = date === dateValue
-
-  const isDisabled = [
-    dayjs(providedDate).isBefore(dayjs(minDate)),
-    dayjs(providedDate).isAfter(dayjs(maxDate))
-  ].some(Boolean)
-
-  const partialStyles = useInputBasePartialStyles(styles, ['dayWrapper', 'day'], {
-    selected: isSelected,
-    disabled: !isSelected && isDisabled,
-  })
-
-  if (TypeGuards.isFunction(Component)) {
-    return (
-      <Component
-        {...props}
-        value={value}
-        disabled={isDisabled}
-        selected={isSelected}
-        styles={styles}
-      />
-    )
-  }
-
-  return (
-    <View style={partialStyles?.dayWrapper}>
-      <Text style={partialStyles?.day} text={String(day)} />
-    </View>
-  )
-}

package/src/components/DatePicker/components/Header.tsx

@@ -1,79 +0,0 @@
-import { TypeGuards } from '@codeleap/types'
-import { ActionIcon, Text, View } from '../../components'
-import { DatePickerArrowProps, DatePickerHeaderComponent } from '../types'
-import { AppIcon, useCompositionStyles } from '@codeleap/styles'
-import dayjs from 'dayjs'
-
-export const ArrowLabel = ({ name, direction, ...props }: DatePickerArrowProps) => {
-  return (
-    <ActionIcon
-      name={name ?? (`chevron-${direction}` as AppIcon)}
-      debugName={'Calendar arrowLabel'}
-      {...props}
-    />
-  )
-}
-
-export const Header = (props: DatePickerHeaderComponent) => {
-  const {
-    date,
-    decreaseMonth,
-    increaseMonth,
-    prevMonthButtonDisabled,
-    decreaseYear,
-    increaseYear,
-    prevYearButtonDisabled,
-    nextYearButtonDisabled,
-    nextMonthButtonDisabled,
-    setYearShow,
-    styles,
-    formatHeaderTitle,
-  } = props
-
-  const month = dayjs(date).format('MMMM')
-  const year = dayjs(date).year()
-
-  const title = TypeGuards.isFunction(formatHeaderTitle)
-    ? formatHeaderTitle(date)
-    : `${month} ${year}`
-
-  const compositionStyles = useCompositionStyles(['prevButton', 'nextButton'], styles)
-
-  return (
-    <View style={styles.wrapper}>
-      <View style={styles.buttonsWrapper}>
-        <ArrowLabel
-          direction='left'
-          style={compositionStyles.prevButton}
-          onPress={decreaseYear}
-          disabled={prevYearButtonDisabled}
-        />
-        <Text
-          onPress={() => setYearShow((curr) => !curr)}
-          style={styles.title}
-          text={title}
-        />
-        <ArrowLabel
-          direction='right'
-          style={compositionStyles.nextButton}
-          onPress={increaseYear}
-          disabled={nextYearButtonDisabled}
-        />
-      </View>
-      <View style={styles.buttonsWrapper}>
-        <ArrowLabel
-          direction='left'
-          style={compositionStyles.prevButton}
-          onPress={decreaseMonth}
-          disabled={prevMonthButtonDisabled}
-        />
-        <ArrowLabel
-          direction='right'
-          style={compositionStyles.nextButton}
-          onPress={increaseMonth}
-          disabled={nextMonthButtonDisabled}
-        />
-      </View>
-    </View>
-  )
-}

package/src/components/DatePicker/components/OuterInput.tsx

@@ -1,17 +0,0 @@
-import { TextInput } from '../../components'
-import { DatePickerProps } from '../types'
-
-export const OuterInput: DatePickerProps['outerInputComponent'] = ({ hideInput, onChange, value, ...props }) => {
-  if (hideInput) {
-    return null
-  }
-
-  return (
-    <TextInput
-      debugName='DatePicker - OuterInputComponent'
-      {...props}
-      value={value}
-      onChangeText={onChange}
-    />
-  )
-}

package/src/components/DatePicker/components/YearContent.tsx

@@ -1,39 +0,0 @@
-import { StyleRecord } from '@codeleap/styles'
-import { DatePickerProps, YearComponentProps } from '../types'
-import { DatePickerComposition } from '../styles'
-import { TypeGuards } from '@codeleap/types'
-import { View } from '../../View'
-import { Text } from '../../Text'
-import { useInputBasePartialStyles } from '../../InputBase/useInputBasePartialStyles'
-
-type Props = YearComponentProps & {
-  styles: StyleRecord<DatePickerComposition>
-  component: DatePickerProps['yearComponent']
-}
-
-export const YearContent = (props: Props) => {
-  const { value, year, styles, component: Component } = props
-
-  const isSelected = String(value)?.includes(year as string)
-
-  const partialStyles = useInputBasePartialStyles(styles, ['yearWrapper', 'year'], {
-    selected: isSelected,
-  })
-
-  if (TypeGuards.isFunction(Component)) {
-    return (
-      <Component
-        {...props}
-        value={value}
-        selected={isSelected}
-        styles={styles}
-      />
-    )
-  }
-
-  return (
-    <View style={partialStyles?.yearWrapper}>
-      <Text style={partialStyles?.year} text={year as string} />
-    </View>
-  )
-}

package/src/components/DatePicker/components/index.tsx

@@ -1,4 +0,0 @@
-export * from './OuterInput'
-export * from './Header'
-export * from './DayContent'
-export * from './YearContent'

package/src/components/InputBase/index.tsx

@@ -1,138 +0,0 @@
-import React, { forwardRef } from 'react'
-import { TypeGuards } from '@codeleap/types'
-import { getRenderedComponent } from '@codeleap/utils'
-import { ActionIcon, ActionIconProps } from '../ActionIcon'
-import { View } from '../View'
-import { useInputBaseStyles } from './styles'
-import { InputBaseProps } from './types'
-import { Text } from '../Text'
-import { StyledComponentWithProps } from '@codeleap/styles'
-
-export * from './styles'
-export * from './utils'
-export * from './types'
-
-export const InputBaseDefaultOrder: InputBaseProps['order'] = [
-  'label',
-  'description',
-  'innerWrapper',
-  'error',
-]
-
-const KeyPassthrough = (props: React.PropsWithChildren<any>) => {
-  return <React.Fragment>{props.children}</React.Fragment>
-}
-
-export const InputBase = forwardRef((props: InputBaseProps, ref) => {
-  const allProps = {
-    ...InputBase.defaultProps,
-    ...props,
-  }
-
-  const {
-    children,
-    error,
-    label,
-    description,
-    leftIcon,
-    rightIcon,
-    wrapper: WrapperComponent,
-    debugName,
-    innerWrapper: InnerWrapperComponent,
-    focused,
-    innerWrapperProps,
-    wrapperProps,
-    disabled,
-    order,
-    style,
-    noError,
-    labelAsRow,
-    innerWrapperRef,
-    ...otherProps
-  } = allProps
-
-  const styles = useInputBaseStyles(allProps)
-
-  const _leftIcon = getRenderedComponent<Partial<ActionIconProps>>(leftIcon, ActionIcon, {
-    style: styles.leftIconStyles,
-    disabled,
-    debugName: `${debugName} left icon`,
-  })
-
-  const _rightIcon = getRenderedComponent<Partial<ActionIconProps>>(rightIcon, ActionIcon, {
-    style: styles.rightIconStyles,
-    disabled,
-    debugName: `${debugName} right icon`,
-  })
-
-  const _label = TypeGuards.isString(label) ? <Text text={label} style={styles.labelStyle} /> : label
-
-  const _error = TypeGuards.isString(error) ? <Text text={error} style={styles.errorStyle} /> : error
-
-  const _description = TypeGuards.isString(description) ? <Text text={description} style={styles.descriptionStyle} /> : description
-
-  const parts = {
-    label: labelAsRow ? (
-      <View style={styles.labelRowStyle}>
-        {_label}
-        {_description}
-      </View>
-    ) : (
-      _label
-    ),
-    description: labelAsRow ? null : _description,
-    innerWrapper:
-      <InnerWrapperComponent
-        ref={innerWrapperRef}
-        style={styles.innerWrapperStyle}
-        {...innerWrapperProps}
-      >
-        {_leftIcon}
-        {children}
-        {_rightIcon}
-      </InnerWrapperComponent>,
-    error: noError ? null : (_error || <Text children={<React.Fragment> &nbsp; </React.Fragment>} style={styles.errorStyle} />),
-  }
-
-  return (
-    <WrapperComponent
-      {...otherProps}
-      {...wrapperProps}
-      style={styles.wrapperStyle}
-      ref={ref}
-    >
-      {
-        order.map((key) => (
-          <KeyPassthrough key={key}>
-            {parts[key]}
-          </KeyPassthrough>
-        ))
-      }
-    </WrapperComponent>
-  )
-}) as StyledComponentWithProps<InputBaseProps>
-
-InputBase.elements = [
-  'wrapper',
-  'innerWrapper',
-  'label',
-  'errorMessage',
-  'description',
-  'labelRow',
-  'icon',
-  'leftIcon',
-  'rightIcon',
-]
-
-InputBase.defaultProps = {
-  noError: false,
-  labelAsRow: false,
-  disabled: false,
-  order: InputBaseDefaultOrder,
-  rightIcon: null,
-  leftIcon: null,
-  description: null,
-  error: null,
-  wrapper: View,
-  innerWrapper: View,
-} as Partial<InputBaseProps>

package/src/components/InputBase/styles.ts

@@ -1,109 +0,0 @@
-import { TypeGuards } from '@codeleap/types'
-import { useCompositionStyles } from '@codeleap/styles'
-import { ActionIconParts } from '../ActionIcon'
-import { InputBaseProps } from './types'
-import { concatStyles, getIconStyles, iconStylesOf } from './utils'
-
-type InputIcons = 'icon' | 'leftIcon' | 'rightIcon'
-
-type IconParts = ActionIconParts
-
-export type InputIconComposition = `${InputIcons}${Capitalize<IconParts>}`
-
-export type InputBaseStates = 'error' | 'focus' | 'disabled'
-
-export type InputBaseParts =
-  'wrapper' |
-  'innerWrapper' |
-  'label' |
-  'errorMessage' |
-  'description' |
-  'labelRow'|
-  InputIconComposition
-
-export type IconLessInputBaseParts = Exclude<InputBaseParts, InputIconComposition>
-
-export type InputBaseComposition = `${InputBaseParts}:${InputBaseStates}` | InputBaseParts
-
-export const useInputBaseStyles = (props: InputBaseProps) => {
-  const {
-    focused,
-    disabled,
-    error,
-    style: styles,
-  } = props
-
-  const hasError = !TypeGuards.isNil(error)
-
-  const compositionStyles = useCompositionStyles(['leftIcon', 'rightIcon', 'icon'], styles)
-
-  const baseIconStyles = getIconStyles(compositionStyles.icon, { hasError, disabled, focused })
-
-  const leftIconStylesCompose = getIconStyles(compositionStyles.leftIcon, {
-    hasError,
-    disabled: disabled || props?.leftIcon?.disabled,
-    focused,
-  })
-
-  const rightIconStylesCompose = getIconStyles(compositionStyles.rightIcon, {
-    hasError,
-    disabled: disabled || props?.rightIcon?.disabled,
-    focused,
-  })
-
-  const leftIconStyles = iconStylesOf(baseIconStyles, leftIconStylesCompose)
-  const rightIconStyles = iconStylesOf(baseIconStyles, rightIconStylesCompose)
-
-  const labelStyle = [
-    styles.label,
-    focused && styles['label:focus'],
-    hasError && styles['label:error'],
-    disabled && styles['label:disabled'],
-  ]
-
-  const errorStyle = [
-    styles.errorMessage,
-    focused && styles['errorMessage:focus'],
-    hasError && styles['errorMessage:error'],
-    disabled && styles['errorMessage:disabled'],
-  ]
-
-  const descriptionStyle = [
-    styles.description,
-    focused && styles['description:focus'],
-    hasError && styles['description:error'],
-    disabled && styles['description:disabled'],
-  ]
-
-  const wrapperStyle = [
-    styles.wrapper,
-    focused && styles['wrapper:focus'],
-    error && styles['wrapper:error'],
-    disabled && styles['wrapper:disabled'],
-  ]
-
-  const innerWrapperStyle = [
-    concatStyles(Array.isArray(styles.innerWrapper) ? styles.innerWrapper : [styles.innerWrapper]),
-    focused && styles['innerWrapper:focus'],
-    hasError && styles['innerWrapper:error'],
-    disabled && styles['innerWrapper:disabled'],
-  ]
-
-  const labelRowStyle = [
-    styles.labelRow,
-    focused && styles['labelRow:focus'],
-    hasError && styles['labelRow:error'],
-    disabled && styles['labelRow:disabled'],
-  ]
-
-  return {
-    wrapperStyle,
-    innerWrapperStyle,
-    leftIconStyles,
-    rightIconStyles,
-    labelStyle,
-    errorStyle,
-    descriptionStyle,
-    labelRowStyle,
-  }
-}