@codeleap/web 3.21.9 → 3.22.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/web",
-  "version": "3.21.9",
+  "version": "3.22.1",
   "main": "src/index.ts",
   "repository": {
     "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",
@@ -44,7 +44,8 @@
     "slick-carousel": "^1.8.1",
     "url-parse": "^1.5.10",
     "uuid": "^8.3.2",
-    "zustand": "^4.4.1"
+    "zustand": "^4.4.1",
+    "@fastify/deepmerge": "1.3.0"
   },
   "peerDependencies": {
     "@codeleap/common": "*",

package/src/components/Slider/index.tsx

@@ -21,7 +21,6 @@ import {
 export * from './styles'
 
 export type SliderProps = Partial<Omit<PrimitiveSliderProps, 'value' | 'onValueChange'>> & Pick<InputBaseProps, 'disabled' | 'debugName' | 'description' | 'label'> & {
-  debounce?: number | null
   indicatorLabel?: {
     order?: number[]
     separator?: string
@@ -44,7 +43,7 @@ export type TrackMarkProps = {
 }
 
 const DefaultSliderTrackMark = (props: TrackMarkProps) => {
-  const { index, content, style } = props
+  const { style } = props
 
   if (!TypeGuards.isString(props.content)) {
     return <React.Fragment>
@@ -65,8 +64,8 @@ export const Slider = (props: SliderProps) => {
   } = selectInputBaseProps(props)
 
   const {
-    debounce = null,
     onValueChange,
+    onValueCommit,
     value: _value,
     label,
     debugName,
@@ -82,7 +81,7 @@ export const Slider = (props: SliderProps) => {
     min = 0,
     indicatorLabel = null,
     description = null,
-    minStepsBetweenThumbs = 8,
+    minStepsBetweenThumbs = 0,
     step = 1,
     onPressThumbSetValue = false,
     onPressThumb = null,
@@ -91,6 +90,7 @@ export const Slider = (props: SliderProps) => {
 
   const isUniqueValue = !TypeGuards.isArray(_value)
   const value = isUniqueValue ? [_value] : _value
+
   const _defaultValue = TypeGuards.isArray(defaultSliderValue) ? defaultSliderValue : [defaultSliderValue]
 
   const defaultValueRef = useRef<PrimitiveSliderProps['defaultValue']>(_defaultValue)
@@ -104,34 +104,12 @@ export const Slider = (props: SliderProps) => {
 
   const SliderTrackMark = trackMarkComponent
 
-  const currentThumbRef = useRef(null)
-
   const handleChange: SliderProps['onValueChange'] = (newValue: Array<number>) => {
-    if (isUniqueValue) {
-      onValueChange(newValue?.[0])
-      return
-    }
-
-    const copyValue = [...value]
-
-    const i = currentThumbRef.current
-    const _newValue = newValue[currentThumbRef.current]
-
-    const hasLeftThumb = i !== 0
-    const hasRightThumb = i + 1 < newValue.length
-
-    const previousThumbValue = hasLeftThumb ? (copyValue[i - 1] + minStepsBetweenThumbs) : null
-    const nextThumbValue = hasRightThumb ? (copyValue[i + 1] - minStepsBetweenThumbs) : null
-
-    if (previousThumbValue && _newValue <= previousThumbValue) {
-      copyValue[i] = previousThumbValue
-    } else if (nextThumbValue && _newValue >= nextThumbValue) {
-      copyValue[i] = nextThumbValue
-    } else {
-      copyValue[i] = _newValue
-    }
+    onValueChange(isUniqueValue ? newValue?.[0] : newValue)
+  }
 
-    onValueChange(copyValue)
+  const handleValueCommit = (newValue: Array<number>) => {
+    onValueCommit?.(newValue)
   }
 
   const variantStyles = useDefaultComponentStyle<'u:Slider', typeof SliderPresets>('u:Slider', {
@@ -234,15 +212,15 @@ export const Slider = (props: SliderProps) => {
       <SliderContainer
         {...sliderProps}
         step={step}
-        minStepsBetweenThumbs={minStepsBetweenThumbs}
-        style={containerStyle}
-        defaultValue={defaultValue}
-        value={value}
-        onValueCommit={() => null}
-        onValueChange={handleChange}
         min={min}
         max={max}
         disabled={disabled}
+        defaultValue={defaultValue}
+        onValueCommit={handleValueCommit}
+        onValueChange={handleChange}
+        style={containerStyle}
+        value={value}
+        minStepsBetweenThumbs={minStepsBetweenThumbs}
       >
         <SliderTrack style={trackStyle}>
           <SliderRange style={selectedTrackStyle} />
@@ -256,10 +234,7 @@ export const Slider = (props: SliderProps) => {
             onClick={() => {
               if (onPressThumbSetValue) onValueChange?.(value)
               if (TypeGuards.isFunction(onPressThumb)) onPressThumb?.(value, i)
-
-              currentThumbRef.current = i
             }}
-            onMouseEnter={() => currentThumbRef.current = i}
           />
         ))}
       </SliderContainer>

package/src/index.ts

@@ -1,12 +1,5 @@
 export * from './components/components'
-export * from './lib/hooks'
-export * from './lib/utils'
 export * from './types/utility'
-export * from './lib/useSearchParams'
-export * from './lib/useBreakpointMatch'
-export * from './lib/usePopState'
-export * from './lib/useAnimatedStyle'
+export * from './lib'
+
 export { default as Toast } from './lib/Toast'
-export * from './lib/keyboard'
-export * from './lib/localStorage'
-export * from './lib/modal'

package/src/lib/index.ts

@@ -7,3 +7,6 @@ export * from './useClick'
 export * from './ListMasonry'
 export * from './localStorage'
 export * from './useAnimatedStyle'
+export * from './navigation'
+export * from './modal'
+export * from './keyboard'

package/src/lib/navigation/index.ts

@@ -0,0 +1,280 @@
+import { AnyValue, Config, History, Navigator, RouteParams, RoutePath, Routes } from './types'
+import deepmerge from '@fastify/deepmerge'
+
+const IS_SSR = typeof window === 'undefined' || typeof history === 'undefined'
+
+const defaultConfig: Partial<Config> = {
+  historyEnabled: false,
+  getMetadata: () => {}
+}
+
+export type {
+  Navigator,
+  Routes,
+}
+
+export class Navigation<O extends object, R extends object = {}> {
+  private _history: History = {}
+
+  private config: Config = defaultConfig
+
+  get history() {
+    return this._history
+  }
+
+  private putHistory(path: RoutePath, info: any = {}) {
+    const idx = Object.keys(this._history).length + 1
+
+    const origin = IS_SSR ? null : window?.location?.origin
+
+    const value: History = {
+      [idx]: {
+        origin,
+        date: new Date(),
+        path,
+        metadata: this.config?.getMetadata?.(),
+        info,
+      }
+    }
+
+    this._history = this.merge(this._history, value)
+  }
+
+  private merge(obj: object, addObj: AnyValue) {
+    return deepmerge({ all: true })(
+      obj ?? {},
+      addObj ?? {},
+    )
+  }
+
+  private navigator: Navigator<O> = null
+
+  private routes: R = {} as R
+
+  constructor(
+    routes: R,
+    navigator: Navigator<O>,
+    config: Config = {},
+  ) {
+    this.navigator = navigator
+    this.routes = routes
+    this.config = this.merge(this.config, config)
+  }
+
+  /**
+   * Checks if the user is on a certain route based on the parameters passed
+   * @param route Route that will be used to direct
+   * @param routeParams Parameters that will be applied to the route
+   * @param exact Accurate path checking - default false
+   * @returns Is on the route - boolean
+   */
+  public isCurrentRoute<T extends keyof Routes<R>>(
+    route: T, 
+    // @ts-expect-error
+    routeParams: Record<Routes<R>[T], string|number> = {} as any,
+    exact: boolean = false,
+  ) {
+    if (IS_SSR) return false
+  
+    let path = window?.location?.pathname
+    
+    // @ts-ignore
+    const routePath = this.getPathWithParams(route, routeParams)
+
+    const isRootPath = routePath === '/'
+
+    if (isRootPath) {
+      const { pathname, origin, href } = window.location || {}
+
+      path = href?.replace(path, '')
+      path = path?.replace(origin, '')
+
+      return !path || pathname == routePath
+    }
+
+    if (exact) {
+      return path?.endsWith(routePath)
+    }
+
+    if (path?.includes(routePath)) {
+      return true
+    }
+  
+    return false
+  }
+
+  /**
+   * Get the path from the route
+   * @param route Route that will be used to direct
+   * @returns Path - string
+   */
+  public getPath(route: keyof Routes<R>): string {
+    let path = this.routes
+
+    // @ts-ignore
+    if (route?.includes('.')) {
+      // @ts-ignore
+      const indexesAccess = route?.split('.')
+
+      for (const index of indexesAccess) {
+        path = path?.[index]
+      }
+    } else {
+      // @ts-ignore
+      path = path?.[route]
+    }
+
+    return String(path)?.trim?.()
+  }
+
+  /**
+   * Get the path from the route and route params
+   * @param route Route that will be used to direct
+   * @param routeParams Parameters that will be applied to the route
+   * @returns Path - string
+   */
+  public getPathWithParams<T extends keyof Routes<R>>(
+    route: T, 
+    // @ts-expect-error
+    routeParams: Record<Routes<R>[T], string|number> = {} as any
+  ) {
+    let path = this.getPath(route)
+
+    for (const key in routeParams) {
+      const value = String(routeParams?.[key])
+
+      const searchPartial = `{{${key}}}`
+
+      if (path?.includes(searchPartial)) {
+        path = path?.replace(searchPartial, encodeURIComponent(value))
+      }
+    }
+
+    if (!path?.startsWith('/')) {
+      path = '/' + path
+    }
+
+    if (!path?.endsWith('/')) {
+      path = path + '/'
+    }
+
+    return path?.trim()
+  }
+
+  /**
+   * 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() {
+    if (IS_SSR) return
+
+    if (!this.config.historyEnabled) {
+      history?.back?.()
+      return
+    }
+
+    const lastIdx = Object.keys(this.history)?.length
+
+    const historyData = this.history[lastIdx - 1]
+
+    if (!historyData) {
+      throw new Error('Not find back route')
+    }
+
+    const info = this.merge(historyData?.info, {
+      'action': 'goBack'
+    })
+
+    this.to(historyData?.path, historyData?.info?.options ?? {}, info)
+  }
+
+  /**
+   * Main function to navigate between the app using the route system with dynamic parameters
+   * @param route Route that will be used to direct
+   * @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, 
+    // @ts-expect-error
+    options: Record<Routes<R>[T], string|number> & O & { params?: RouteParams } = {} as any
+  ) {
+    // @ts-ignore
+    let path = this.getPath(route)
+
+    let _options = {}
+    let params = null
+    let routeParams = {}
+
+    const queryParamsKey = 'params'
+
+    for (const key in options) {
+      const value = options?.[key]
+
+      const searchPartial = `{{${key}}}`
+
+      if (path?.includes(searchPartial)) {
+        path = path?.replace(searchPartial, encodeURIComponent(String(value)))
+
+        routeParams = this.merge(routeParams, { [key]: String(value) })
+      } else if (key == queryParamsKey) {
+        params = value
+      } else {
+        _options = this.merge(_options, { [key]: value })
+      }
+    }
+
+    if (!path?.startsWith('/')) {
+      path = '/' + path
+    }
+
+    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)
+        }
+
+        path = `${path}?${searchParams}`
+      }
+    }
+
+    if (!path?.endsWith('/') && !params) {
+      path = path + '/'
+    }
+
+    this.to(path?.trim(), _options as O, {
+      params,
+      routeParams,
+    })
+  }
+
+  /**
+   * Calls the navigator to direct the user to a page
+   * @param path Path to which the user will be taken
+   * @param options Options that will be passed to the navigator
+   * @param info Information that will be added to the history
+   */
+  public to(path: RoutePath, options: O = null as O, info = {}) {
+    if (this.config.historyEnabled) {
+      this.putHistory(path, this.merge(options, info))
+    }
+
+    this.navigator(path, options)
+  }
+
+  /**
+   * Clear history data
+   */
+  public wipeHistory() {
+    this._history = {}
+  }
+}

package/src/lib/navigation/types.ts

@@ -0,0 +1,54 @@
+
+export type ExtractParams<T extends string> =
+  T extends `${infer _Start}{{${infer Param}}}${infer Rest}` 
+    ? Param | ExtractParams<Rest> 
+    : never
+
+type Params<T> = {
+  [K in keyof T]: T[K] extends string ? ExtractParams<T[K]> : Params<T[K]>;
+}
+
+// @ts-ignore
+type ExtractRoutes<T, PM, Prefix extends string = ''> = {
+  [K in keyof T & string]: 
+    T[K] extends string 
+      ? {
+        // @ts-ignore
+        [P in `${Prefix}${Prefix extends '' ? '' : '.'}${K}`]: PM[K]
+      } // @ts-ignore
+      : ExtractRoutes<T[K], PM[K], `${Prefix}${Prefix extends '' ? '' : '.'}${K}`>
+}[keyof T]
+
+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>>>
+
+// Navigation types
+
+export type RoutePath = string
+
+export type RouteParams = {
+  [x: string]: string
+}
+
+export type Navigator<O extends object = {}> = (path: RoutePath, options: O) => void
+
+export type AnyValue = {
+  [key: string]: any
+}
+
+export type HistoryData = {
+  origin: string
+  date: Date,
+  path: RoutePath,
+  metadata: any
+  info: any
+}
+
+export type History = Record<number, HistoryData>
+
+export type Config = {
+  historyEnabled?: boolean
+  getMetadata?: () => any
+}