@codeleap/web 4.0.1 → 4.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/web",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "main": "src/index.ts",
   "repository": {
     "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",
@@ -20,7 +20,7 @@
     "lint": "eslint -c  .eslintrc.js --fix \"./src/**/*.{ts,tsx,js,jsx}\""
   },
   "dependencies": {
-    "@radix-ui/react-progress": "^1.0.3",
+    "@radix-ui/react-progress": "1.1.0",
     "@radix-ui/react-slider": "1.1.1",
     "@radix-ui/react-tooltip": "^1.0.6",
     "@tiptap/react": "2.1.16",
@@ -33,7 +33,7 @@
     "react-dropzone": "^14.2.3",
     "react-image-crop": "^10.1.8",
     "react-input-mask": "^2.0.4",
-    "react-number-format": "^5.2.1",
+    "react-number-format": "^5.4.2",
     "react-select": "^5.7.3",
     "react-slick": "^0.29.0",
     "slick-carousel": "^1.8.1",

package/src/components/Collapse/index.tsx

@@ -26,10 +26,9 @@ export const Collapse = (props: CollapseProps) => {
       animate={{ height: open ? 'auto' : 0, opacity: open ? 1 : 0 }}
       transition={{ duration: 0.2 }}
       {...rest}
-      style={{
-        ...styles.wrapper,
-        ...(open ? styles?.['wrapper:open'] : styles?.['wrapper:closed']),
-      }}
+      style={open ? styles?.['wrapper:open'] : styles?.['wrapper:closed']}
+      // @ts-expect-error css type
+      css={[styles.wrapper, open ? styles?.['wrapper:open'] : styles?.['wrapper:closed']]}
     >
       {children}
     </motion.div>

package/src/components/EmptyPlaceholder/index.tsx

@@ -27,6 +27,7 @@ export const EmptyPlaceholder = (props: EmptyPlaceholderProps) => {
     imageWrapperProps,
     indicatorProps,
     debugName,
+    ImageComponent,
   } = {
     ...EmptyPlaceholder.defaultProps,
     ...props,
@@ -39,11 +40,14 @@ export const EmptyPlaceholder = (props: EmptyPlaceholderProps) => {
   const activityIndicatorStyles = useNestedStylesByKey('loader', styles)
 
   const _Image = React.useMemo(() => {
-    if (TypeGuards.isString(image)) {
-      return <img
+
+    if (!TypeGuards.isNil(image)) {
+
+      return <ImageComponent
         {...imageProps}
-        src={image as HTMLImageElement['src']}
-        // @ts-expect-error
+        // @ts-ignore
+        source={image as HTMLImageElement['src']}
+
         css={styles.image}
       />
     }
@@ -102,7 +106,7 @@ export const EmptyPlaceholder = (props: EmptyPlaceholderProps) => {
 EmptyPlaceholder.styleRegistryName = 'EmptyPlaceholder'
 EmptyPlaceholder.elements = ['wrapper', 'loader', 'title', 'description', 'image', 'imageWrapper', 'icon']
 EmptyPlaceholder.rootElement = 'wrapper'
-
+EmptyPlaceholder.ImageComponent = 'img'
 EmptyPlaceholder.withVariantTypes = <S extends AnyRecord>(styles: S) => {
   return EmptyPlaceholder as (props: StyledComponentProps<EmptyPlaceholderProps, typeof styles>) => IJSX
 }

package/src/components/EmptyPlaceholder/types.ts

@@ -29,4 +29,5 @@ export type EmptyPlaceholderProps =
     wrapperProps?: ViewProps
     imageWrapperProps?: ViewProps
     indicatorProps?: Partial<ActivityIndicatorProps>
+    ImageComponent?: React.ComponentType
   }

package/src/components/List/ListLayout.tsx

@@ -56,6 +56,7 @@ export const ListLayout = (props: ListLayoutProps) => {
     ListLoadingIndicatorComponent,
     scrollableRef,
     showFooter = true,
+    wrapperProps,
   } = props
 
   const getKeyStyle = (key: ListParts) => mergeStyles([
@@ -67,7 +68,7 @@ export const ListLayout = (props: ListLayoutProps) => {
   const showIndicator = (isFetching || isFetchingNextPage) && !TypeGuards.isNil(ListLoadingIndicatorComponent)
 
   return (
-    <View style={getKeyStyle('wrapper')} ref={scrollableRef}>
+    <View style={getKeyStyle('wrapper')} ref={scrollableRef} {...wrapperProps}>
       {!!ListHeaderComponent ? <ListHeaderComponent /> : null}
 
       {isEmpty ? <ListEmptyComponent debugName={debugName} {...placeholder} /> : null}

package/src/components/List/index.tsx

@@ -33,6 +33,7 @@ export function List(props: ListProps) {
     reloadTimeout,
     showFooter,
     style,
+    layoutWrapperProps,
   } = allProps
 
   const styles = useStylesFor(List.styleRegistryName, style)
@@ -75,6 +76,7 @@ export function List(props: ListProps) {
     <ListLayout
       {...allProps}
       {...layoutProps}
+      wrapperProps={layoutWrapperProps}
       styles={styles}
       showFooter={reloadingLayout ? false : showFooter}
     >

package/src/components/List/types.ts

@@ -12,6 +12,7 @@ export type ListLayoutProps = Omit<ListProps, 'renderItem'> & UseInfiniteScrollR
   styles: StylesOf<ListComposition>
   children?: React.ReactNode
   showFooter?: boolean
+  wrapperProps?: Partial<ViewProps>
 }
 
 export type ListRefreshControlComponent = Partial<ListLayoutProps> & {
@@ -64,4 +65,5 @@ export type ListProps<T extends ListItem = ListItem> =
     masonryProps?: Partial<ListMasonryProps<T>>
     reloadTimeout?: number
     showFooter?: boolean
+    layoutWrapperProps?: Partial<ViewProps>
   }

package/src/components/Select/index.tsx

@@ -29,7 +29,9 @@ const DefaultOption = (props: TCustomOption & { component: (props: TCustomOption
     debugName,
   } = props
 
-  const styles = optionsStyles({ isSelected, isFocused, baseStyles: (itemProps?.style ?? {}) })
+  const optionProps = props?.data?.itemProps
+
+  const styles = optionsStyles({ isSelected, isFocused, baseStyles: (optionProps?.style ?? itemProps?.style ?? {}) })
 
   let _Component = null
 
@@ -41,6 +43,7 @@ const DefaultOption = (props: TCustomOption & { component: (props: TCustomOption
         rightIcon={isSelected && selectedIcon}
         debugName={debugName}
         {...itemProps}
+        {...optionProps}
         style={styles}
       />
     )
@@ -162,7 +165,7 @@ const defaultFormatPlaceholderNoItems = (props: PlaceholderProps & { text: strin
 }
 
 export const Select = forwardRef<HTMLInputElement, SelectProps>(
- <T extends string | number = string, Multi extends boolean = false>
+  <T extends string | number = string, Multi extends boolean = false>
   (props: SelectProps<T, Multi>, inputRef: React.ForwardedRef<HTMLInputElement>) => {
 
     type Option = FormTypes.Option<T>
@@ -221,7 +224,7 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
 
     const _innerInputRef = useRef<any>(null)
     const innerInputRef = selectRef || _innerInputRef
-    const innerWrapperRef = useRef(null)
+    const innerWrapperRef = useRef<HTMLDivElement>(null)
 
     const hasSelectedOptionState = !TypeGuards.isNil(_selectedOption) && TypeGuards.isFunction(_setSelectedOption)
 
@@ -259,11 +262,12 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
       loadingStyles,
       inputMultiValueStyles,
       menuWrapperStyles,
-      // @ts-expect-error @verify
+      // @ts-expect-error
     } = useSelectStyles({ ...props, styleRegistryName: Select.styleRegistryName }, {
       error: !!hasError,
       focused: isFocused,
       disabled: isDisabled,
+      parentWidth: innerWrapperRef?.current?.clientWidth,
     })
 
     useImperativeHandle(inputRef, () => {
@@ -410,6 +414,7 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
           tabSelectsValue={false}
           tabIndex={0}
           backspaceRemovesValue={true}
+          menuPortalTarget={typeof document === 'undefined' ? undefined : document.body}
           {...otherProps}
           {..._props}
           onKeyDown={isFocused ? handleKeyDown : null}
@@ -424,7 +429,6 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
           defaultOptions={loadOptionsOnMount}
           ref={innerInputRef}
           closeMenuOnSelect={closeOnSelect}
-          menuPortalTarget={innerWrapperRef.current}
           placeholder={(loadOptionsOnMount && !loadedOptions) ? loadingMessage : placeholder}
           isDisabled={isDisabled}
           isClearable={clearable}
@@ -467,7 +471,7 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
         />
       </InputBase>
     )
- }) as StyledComponentWithProps<SelectProps>
+  }) as StyledComponentWithProps<SelectProps>
 
 Select.styleRegistryName = 'Select'
 

package/src/components/Select/styles.ts

@@ -49,6 +49,7 @@ export type ComponentState = {
   error?: boolean
   focused?: boolean
   disabled?: boolean
+  parentWidth?: number
 }
 
 export type OptionState = {
@@ -60,7 +61,7 @@ export type OptionState = {
 export function useSelectStyles<T, Multi extends boolean>(props: UseSelectStylesProps, state: ComponentState) {
   const { style } = props
 
-  const { error, focused, disabled } = state
+  const { error, focused, disabled, parentWidth } = state
 
   const styles = useStylesFor(props?.styleRegistryName, style)
 
@@ -121,10 +122,18 @@ export function useSelectStyles<T, Multi extends boolean>(props: UseSelectStyles
     wrapper: stylesKey('itemsWrapper'),
   }
 
+  const parseMenuPortalStyles = (baseStyles: CSSObjectWithLabel) => {
+    return {
+      ...baseStyles,
+      width: parentWidth,
+      left: `calc(${baseStyles.left}px - ((${parentWidth}px - ${baseStyles.width}px) / 2))`
+    }
+  }
+
   const reactSelectStyles: StylesConfig<FormTypes.Option<T>, Multi, GroupBase<FormTypes.Option<T>>> = {
     container: (baseStyles) => stylesKey('inputContainer', baseStyles),
     control: () => stylesKey('inputContainer'),
-    menuPortal: (baseStyles) => stylesKey('listPortal', baseStyles),
+    menuPortal: (baseStyles) => stylesKey('listPortal', parseMenuPortalStyles(baseStyles)),
     menu: (baseStyles) => stylesKey('listWrapper', baseStyles),
     menuList: (baseStyles) => stylesKey('list', baseStyles),
     group: () => ({}),

package/src/components/Select/types.ts

@@ -27,7 +27,7 @@ type DynamicSelectProps<T, Multi extends boolean> =
   >)
 
 export type ReactSelectProps<T, Multi extends boolean = false> = Omit<InputBaseProps, 'style'> & {
-  options: FormTypes.Options<T>
+  options: FormTypes.Options<T> & { itemProps?: ButtonProps }
   value: SelectValue<T, Multi>
   onValueChange?: (value: SelectValue<T, Multi>) => void
   multiple?: Multi
@@ -45,6 +45,7 @@ export type ComponentPartProps = {
 export type TCustomOption = OptionProps & ComponentPartProps & ComponentCommonProps & {
   optionsStyles: (state: OptionState) => OptionState['baseStyles']
   selectedIcon?: string
+  data: OptionProps['data'] & { itemProps?: ButtonProps}
   itemProps?: ButtonProps
   styles?: OptionState['baseStyles']
 }

package/src/lib/hooks/useCropPicker.ts

@@ -16,6 +16,8 @@ export type UseCropPickerProps = Partial<ReactCropProps> & {
   ref: React.MutableRefObject<FileInputRef> | React.Ref<FileInputRef>
 }
 
+type ImageType = 'png' | 'jpeg' | 'webp'
+
 export function readImage(file: File | Blob): Promise<ImageReading> {
   const reader = new FileReader()
   return new Promise<ImageReading>((resolve) => {
@@ -28,7 +30,7 @@ export function readImage(file: File | Blob): Promise<ImageReading> {
   })
 }
 
-export function cropImage(image: ImageReading, crop: Crop): Promise<[string, Blob]> {
+export function cropImage(image: ImageReading, crop: Crop, type: ImageType): Promise<[string, Blob]> {
   const canvas = document.createElement('canvas')
   const ctx = canvas.getContext('2d', { alpha: true })
 
@@ -61,7 +63,7 @@ export function cropImage(image: ImageReading, crop: Crop): Promise<[string, Blo
       readImage(blob).then(cropped => {
         resolve([cropped.src, blob])
       }).catch(reject)
-    }, 'image/png')
+    }, `image/${type}`)
   })
 }
 
@@ -93,9 +95,9 @@ export function useCropPicker({
     setTimeout(() => setImage(null), 500)
   }
 
-  const onConfirmCrop = async () => {
+  const onConfirmCrop = async (imageType: ImageType = 'jpeg') => {
     setIsLoading(true)
-    const [preview, croppedFile] = await cropImage(image, relativeCrop)
+    const [preview, croppedFile] = await cropImage(image, relativeCrop, imageType)
     onResolved([
       {
         file: new File([croppedFile], 'cropped.jpg'),

package/src/lib/tools/navigation/{index.ts → index.tsx}

@@ -5,7 +5,7 @@ const IS_SSR = typeof window === 'undefined' || typeof history === 'undefined'
 
 const defaultConfig: Partial<Config> = {
   historyEnabled: false,
-  getMetadata: () => {}
+  getMetadata: () => {},
 }
 
 export type {
@@ -13,7 +13,7 @@ export type {
   Routes,
 }
 
-export class Navigation<O extends object, R extends object = {}> {
+export class Navigation<O extends object, R extends object = {}, C extends Record<string, any> = {}> {
   private _history: History = {}
 
   private config: Config = defaultConfig
@@ -22,6 +22,8 @@ export class Navigation<O extends object, R extends object = {}> {
     return this._history
   }
 
+  public context: C = {} as C
+
   private putHistory(path: RoutePath, info: any = {}) {
     const idx = Object.keys(this._history).length + 1
 
@@ -34,7 +36,7 @@ export class Navigation<O extends object, R extends object = {}> {
         path,
         metadata: this.config?.getMetadata?.(),
         info,
-      }
+      },
     }
 
     this._history = this.merge(this._history, value)
@@ -53,7 +55,7 @@ export class Navigation<O extends object, R extends object = {}> {
 
   constructor(
     routes: R,
-    navigator: Navigator<O>,
+    navigator: Navigator<O, C>,
     config: Config = {},
   ) {
     this.navigator = navigator
@@ -69,15 +71,15 @@ export class Navigation<O extends object, R extends object = {}> {
    * @returns Is on the route - boolean
    */
   public isCurrentRoute<T extends keyof Routes<R>>(
-    route: T, 
+    route: T,
     // @ts-expect-error
     routeParams: Record<Routes<R>[T], string|number> = {} as any,
-    exact: boolean = false,
+    exact = false,
   ) {
     if (IS_SSR) return false
-  
+
     let path = window?.location?.pathname
-    
+
     // @ts-ignore
     const routePath = this.getPathWithParams(route, routeParams)
 
@@ -99,7 +101,7 @@ export class Navigation<O extends object, R extends object = {}> {
     if (path?.includes(routePath)) {
       return true
     }
-  
+
     return false
   }
 
@@ -134,9 +136,9 @@ export class Navigation<O extends object, R extends object = {}> {
    * @returns Path - string
    */
   public getPathWithParams<T extends keyof Routes<R>>(
-    route: T, 
+    route: T,
     // @ts-expect-error
-    routeParams: Record<Routes<R>[T], string|number> = {} as any
+    routeParams: Record<Routes<R>[T], string|number> = {} as any,
   ) {
     let path = this.getPath(route)
 
@@ -162,7 +164,7 @@ export class Navigation<O extends object, R extends object = {}> {
   }
 
   /**
-   * Function to navigate to the previous page, if history is enabled, the penultimate record will be used, 
+   * Function to navigate to the previous page, if history is enabled, the penultimate record will be used,
    * otherwise the browser's own api with "history.back()"
    */
   public goBack() {
@@ -182,7 +184,7 @@ export class Navigation<O extends object, R extends object = {}> {
     }
 
     const info = this.merge(historyData?.info, {
-      'action': 'goBack'
+      'action': 'goBack',
     })
 
     this.to(historyData?.path, historyData?.info?.options ?? {}, info)
@@ -194,9 +196,9 @@ export class Navigation<O extends object, R extends object = {}> {
    * @param options Route parameters (marked by {{}}), which will be automatically shown if they exist, and navigator options and route queryParams can also be passed through the "params" property
    */
   public navigate<T extends keyof Routes<R>>(
-    route: T, 
+    route: T,
     // @ts-expect-error
-    options: Record<Routes<R>[T], string|number> & O & { params?: RouteParams } = {} as any
+    options: Record<Routes<R>[T], string|number> & O & { params?: RouteParams } = {} as any,
   ) {
     // @ts-ignore
     let path = this.getPath(route)
@@ -229,15 +231,15 @@ export class Navigation<O extends object, R extends object = {}> {
 
     if (typeof params === 'object') {
       let searchParams = null
-  
+
       for (const paramKey in (params ?? {})) {
         const value = params?.[paramKey]
         const param = `${paramKey}=${encodeURIComponent(value)}`
         const separator = searchParams == null ? '' : '&'
-  
+
         searchParams = `${searchParams ?? ''}${separator}${param}`
       }
-  
+
       if (typeof searchParams === 'string') {
         if (path?.endsWith('/')) {
           path = path.slice(0, -1)
@@ -268,7 +270,7 @@ export class Navigation<O extends object, R extends object = {}> {
       this.putHistory(path, this.merge(options, info))
     }
 
-    this.navigator(path, options)
+    this.navigator(path, options, this.context)
   }
 
   /**

package/src/lib/tools/navigation/types.ts

@@ -1,7 +1,6 @@
-
 export type ExtractParams<T extends string> =
-  T extends `${infer _Start}{{${infer Param}}}${infer Rest}` 
-    ? Param | ExtractParams<Rest> 
+  T extends `${infer _Start}{{${infer Param}}}${infer Rest}`
+    ? Param | ExtractParams<Rest>
     : never
 
 type Params<T> = {
@@ -10,8 +9,8 @@ type Params<T> = {
 
 // @ts-ignore
 type ExtractRoutes<T, PM, Prefix extends string = ''> = {
-  [K in keyof T & string]: 
-    T[K] extends string 
+  [K in keyof T & string]:
+    T[K] extends string
       ? {
         // @ts-ignore
         [P in `${Prefix}${Prefix extends '' ? '' : '.'}${K}`]: PM[K]
@@ -19,7 +18,7 @@ type ExtractRoutes<T, PM, Prefix extends string = ''> = {
       : ExtractRoutes<T[K], PM[K], `${Prefix}${Prefix extends '' ? '' : '.'}${K}`>
 }[keyof T]
 
-type UnionToIntersection<U> = 
+type UnionToIntersection<U> =
   (U extends any ? (x: U)=> void : never) extends ((x: infer I)=>void) ? I : never
 
 export type Routes<T> = UnionToIntersection<ExtractRoutes<T, Params<T>>>
@@ -32,7 +31,7 @@ export type RouteParams = {
   [x: string]: string
 }
 
-export type Navigator<O extends object = {}> = (path: RoutePath, options: O) => void
+export type Navigator<O extends object = {}, C extends Record<string, any> = {}> = (path: RoutePath, options: O, context?: C) => void
 
 export type AnyValue = {
   [key: string]: any
@@ -40,8 +39,8 @@ export type AnyValue = {
 
 export type HistoryData = {
   origin: string
-  date: Date,
-  path: RoutePath,
+  date: Date
+  path: RoutePath
   metadata: any
   info: any
 }

package/src/types/utility.ts

@@ -22,6 +22,11 @@ export type ElementMap = {
   'section': WithChildren<JSX.IntrinsicElements['section']>
   'header': WithChildren<JSX.IntrinsicElements['header']>
   'footer': WithChildren<JSX.IntrinsicElements['footer']>
+  'nav': WithChildren<JSX.IntrinsicElements['nav']>
+  'article': WithChildren<JSX.IntrinsicElements['article']>
+  'ul': WithChildren<JSX.IntrinsicElements['ul']>
+  'ol': WithChildren<JSX.IntrinsicElements['ol']>
+  'aside': WithChildren<JSX.IntrinsicElements['aside']>
 }
 
 export type NativeHTMLElement = keyof ElementMap