@scbt-ecom/ui 0.4.2 → 0.4.4

package/lib/shared/constants/designSystem/colors.ts

@@ -1,121 +0,0 @@
-const rootStyles = {
-  transparent: 'transparent',
-  current: 'currentColor',
-  inherit: 'inherit',
-  initial: 'initial'
-}
-
-const allowedBackgroundColors = {
-  'blue-grey-100': '#f3f4f7',
-  'blue-grey-200': '#eaedf1',
-  'blue-grey-300': '#d4dbe2',
-  'blue-grey-500': '#a9b6c5',
-  footer: '#40465a',
-  negative: '#f42500',
-  'negative-light': '#ffd2ca',
-  positive: '#76bc21',
-  'positive-light': '#e4f6ce',
-  'primary-default': '#003790',
-  'primary-focus': '#2477ff',
-  'primary-hover': '#042e73',
-  'primary-light-default': '#f0f4f9',
-  'primary-tr-focus': '#0037901f',
-  'primary-tr-hover': '#00379014',
-  'primary-tr-pressed': '#00379033',
-  'secondary-default': '#fc5055',
-  'secondary-hover': '#f12f34',
-  warning: '#f49f00',
-  'warning-light': '#ffeecc',
-  white: '#ffffff',
-  'primary-disabled': '#809bc7',
-  'secondary-disabled': '#FFB7BF',
-  dark: '#000000',
-  purple: '#5f40bd',
-  'purple-hover': '#52399d',
-  overlay: '#0000004d',
-  ...rootStyles
-} as const
-
-const allowedTextColors = {
-  dark: '#292929',
-  disabled: '#a9b6c5',
-  footer: '#c3c3c3',
-  negative: '#f42500',
-  positive: '#76bc21',
-  'primary-default': '#003790',
-  'primary-hover': '#042e73',
-  secondary: '#40465a',
-  tetriary: '#5a6e85',
-  warning: '#f49f00',
-  white: '#ffffff',
-  'primary-disabled': '#809bc7',
-  'blue-grey-600': '#94a4b7',
-  ...rootStyles
-} as const
-
-const allowedBannersBackgroundColors = {
-  'barvcray-200': '#ebeef4',
-  'barvcray-300': '#dde1e8',
-  'greymint-200': '#deecee',
-  'lavender-100': '#f7f7ff',
-  'lavender-200': '#ecedfa',
-  'lavender-300': '#d0d3f1',
-  'lightblue-300': '#bed3ec',
-  'mint-200': '#e4f5ed',
-  'salmon-200': '#faecec',
-  'skyblue-100': '#f4f8fe',
-  'skyblue-200': '#e7f3ff',
-  'skyblue-300': '#d9edff',
-  ...rootStyles
-} as const
-
-const allowedIconsColors = {
-  'accent-default': '#2477ff',
-  'accent-hover': '#0053da',
-  'blue-grey-100': '#f3f4f7',
-  'blue-grey-600': '#94a4b7',
-  'blue-grey-700': '#69809a',
-  'blue-grey-800': '#5a6e85',
-  'dark-default': '#292929',
-  'dark-hover': '#535353',
-  disabled: '#a9b6c5',
-  'negative-default': '#f42500',
-  'negative-hover': '#c31e00',
-  'positive-default': '#76bc21',
-  'positive-hover': '#598d19',
-  'primary-default': '#003790',
-  'primary-hover': '#042e73',
-  'secondary-dark-default': '#f12f34',
-  'secondary-dark-hover': '#c40309',
-  'secondary-default': '#fc5055',
-  'secondary-hover': '#f12f34',
-  'warning-default': '#f49f00',
-  'warning-hover': '#d68b00',
-  white: '#ffffff',
-  'primary-disabled': '#809bc7',
-  footer: '#C3C3C3',
-  ...rootStyles
-} as const
-
-const allowedStrokeColors = {
-  'blue-grey-500': '#a9b6c5',
-  'blue-grey-700': '#69809a',
-  'blue-grey-800': '#5a6e85',
-  dark: '#292929',
-  negative: '#f42500',
-  positive: '#76bc21',
-  'primary-default': '#003790',
-  'primary-focus': '#2477ff',
-  'primary-hover': '#042e73',
-  'primary-light': '#f0f4f9',
-  'secondary-default': '#fc5055',
-  'secondary-hover': '#f12f34',
-  'warm-grey-200': '#e4e4e4',
-  'warm-grey-300': '#c3c3c3',
-  warning: '#f49f00',
-  white: '#ffffff',
-  'primary-disabled': '#809bc7',
-  ...rootStyles
-} as const
-
-export { allowedStrokeColors, allowedBannersBackgroundColors, allowedIconsColors, allowedTextColors, allowedBackgroundColors }

package/lib/shared/constants/designSystem/index.ts

@@ -1,3 +0,0 @@
-export * from './colors'
-export * from './others'
-export * from './typography'

package/lib/shared/constants/designSystem/others.ts

@@ -1,30 +0,0 @@
-const allowedBorderRadius = {
-  none: '0',
-  sm: '4px',
-  md: '8px',
-  lg: '16px',
-  full: '9999px'
-}
-
-const allowedBackgroundDeg = {
-  30: '30deg',
-  45: '45deg',
-  80: '80deg',
-  90: '90deg',
-  110: '110deg',
-  180: '180deg'
-}
-
-const allowedZIndex = {
-  0: '0',
-  1: '1',
-  10: '10',
-  30: '30',
-  50: '50',
-  100: '100',
-  250: '250',
-  500: '500',
-  1000: '1000'
-}
-
-export { allowedBorderRadius, allowedBackgroundDeg, allowedZIndex }

package/lib/shared/constants/designSystem/typography.ts

@@ -1,88 +0,0 @@
-const allowedFontSize = {
-  12: '12px',
-  14: '14px',
-  16: '16px',
-  18: '18px',
-  20: '20px',
-  24: '24px',
-  28: '28px',
-  32: '32px',
-  40: '40px'
-}
-
-const allowedLineHeight = {
-  16: '16px',
-  20: '20px',
-  22: '22px',
-  24: '24px',
-  30: '30px',
-  32: '32px',
-  40: '40px',
-  48: '48px'
-}
-
-const allowedTextStyles = {
-  /* # Headline */
-  '.mob-headline-bold-m': {
-    '@apply font-bold text-28 leading-32': ''
-  },
-  '.mob-headline-bold-s': {
-    '@apply font-bold text-24 leading-30': ''
-  },
-  /* # Title */
-  '.mob-title-bold-l': {
-    '@apply font-bold text-20 leading-24': ''
-  },
-  '.mob-title-bold-m': {
-    '@apply font-bold text-18 leading-22': ''
-  },
-  /* # Body */
-  '.mob-body-medium-l': {
-    '@apply font-medium text-16 leading-22': ''
-  },
-  '.mob-body-regular-l': {
-    '@apply font-normal text-16 leading-22': ''
-  },
-  '.mob-body-medium-m': {
-    '@apply font-medium text-14 leading-20': ''
-  },
-  '.mob-body-regular-m': {
-    '@apply font-normal text-14 leading-20': ''
-  },
-  '.mob-body-regular-s': {
-    '@apply font-normal text-12 leading-20': ''
-  },
-
-  /* -------- Desktop Typography -------- */
-  /* # Headline */
-  '.desk-headline-bold-l': {
-    '@apply font-bold text-40 leading-48': ''
-  },
-  '.desk-headline-bold-m': {
-    '@apply font-bold text-32 leading-40': ''
-  },
-
-  /* # Title */
-  '.desk-title-bold-l': {
-    '@apply font-bold text-24 leading-30': ''
-  },
-  '.desk-title-bold-s': {
-    '@apply font-bold text-18 leading-22': ''
-  },
-
-  /* # Body */
-  '.desk-body-medium-l': {
-    '@apply font-medium text-16 leading-22': ''
-  },
-  '.desk-body-regular-l': {
-    '@apply font-normal text-16 leading-22': ''
-  },
-  '.desk-body-regular-m': {
-    '@apply font-normal text-14 leading-20': ''
-  },
-  '.desk-body-regular-s': {
-    '@apply font-normal text-12 leading-16': ''
-  }
-}
-
-export { allowedLineHeight, allowedFontSize, allowedTextStyles }

package/lib/shared/constants/index.ts

@@ -1,2 +0,0 @@
-export * from './designSystem'
-export * from './api'

package/lib/shared/hooks/index.ts

@@ -1,5 +0,0 @@
-export { useBoolean } from './useBoolean'
-export { useClickOutside } from './useClickOutside'
-export { useControlledForm } from './useControlledForm'
-export { useDebounceValue, debounce, useDebounceCallback } from './useDebounce'
-export { useCombineRef } from './useCombineRef'

package/lib/shared/hooks/useBoolean.ts

@@ -1,12 +0,0 @@
-'use client'
-
-import * as React from 'react'
-
-type UseBooleanReturn = [value: boolean, action: (val?: boolean) => void]
-
-export const useBoolean = (initialValue = false): UseBooleanReturn => {
-  const [value, setValue] = React.useState(initialValue)
-  const action = (val?: boolean) => setValue((prevValue) => val ?? !prevValue)
-
-  return [value, action]
-}

package/lib/shared/hooks/useClickOutside.ts

@@ -1,22 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { isClient } from '../utils'
-
-export const useClickOutside = (ref: React.RefObject<HTMLElement>, callback: () => void) => {
-  const handleClickOutside = (event: MouseEvent) => {
-    if (ref.current && !ref.current.contains(event.target as Node)) {
-      callback()
-    }
-  }
-
-  React.useEffect(() => {
-    if (isClient) {
-      globalThis?.document?.addEventListener('mousedown', handleClickOutside)
-      return () => {
-        globalThis?.document.removeEventListener('mousedown', handleClickOutside)
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ref, callback])
-}

package/lib/shared/hooks/useCombineRef.ts

@@ -1,23 +0,0 @@
-import { type Ref, useCallback } from 'react'
-import { type RefCallBack } from 'react-hook-form'
-
-type TCombineRef<HTML> = (element: HTML) => void
-
-export const useCombineRef = <HTML extends HTMLElement>(...refs: Array<Ref<HTML> | RefCallBack>) => {
-  const combinedRef: TCombineRef<HTML> = useCallback(
-    (element) => {
-      refs.forEach((ref) => {
-        if (!ref) return
-        if (typeof ref === 'function') {
-          ref(element)
-        } else {
-          // @ts-expect-error Mutable ref?
-          ref.current = element
-        }
-      })
-    },
-    [refs]
-  )
-
-  return combinedRef
-}

package/lib/shared/hooks/useControlledForm.ts

@@ -1,16 +0,0 @@
-'use client'
-
-import { useForm, type UseFormProps } from 'react-hook-form'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { type TypeOf, type ZodTypeAny } from 'zod'
-
-interface UseControlledForm<T extends ZodTypeAny> extends UseFormProps<TypeOf<T>> {
-  schema: T
-}
-
-export const useControlledForm = <T extends ZodTypeAny>({ schema, ...formConfig }: UseControlledForm<T>) => {
-  return useForm({
-    ...formConfig,
-    resolver: zodResolver(schema)
-  })
-}

package/lib/shared/hooks/useDebounce.ts

@@ -1,38 +0,0 @@
-'use client'
-
-import * as React from 'react'
-
-export const debounce = <Params extends unknown[]>(
-  callback: (...args: Params) => void,
-  delay: number
-): ((...args: Params) => void) => {
-  let timer: ReturnType<typeof setTimeout>
-
-  return function (...args: Params) {
-    clearTimeout(timer)
-    timer = setTimeout(() => callback(...args), delay)
-  }
-}
-
-export const useDebounceCallback = <Params extends unknown[], Return>(callback: (...args: Params) => Return, delay: number) => {
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const debounced = React.useMemo(() => debounce(callback, delay), [delay])
-
-  return debounced
-}
-
-export const useDebounceValue = <Value>(value: Value, delay: number) => {
-  const previousValueRef = React.useRef(value)
-  const [debouncedValue, setDebounceValue] = React.useState(value)
-
-  const debouncedSetState = useDebounceCallback(setDebounceValue, delay)
-
-  React.useEffect(() => {
-    if (previousValueRef.current === value) return
-    debouncedSetState(value)
-    previousValueRef.current = value
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value])
-
-  return debouncedValue
-}

package/lib/shared/hooks/useMediaQuery.tsx

@@ -1,42 +0,0 @@
-import { useCallback, useSyncExternalStore } from 'react'
-/**
- * @name useMediaQuery
- * @description - Hook that manages a media query
- * @category Browser
- *
- * @returns {{ isMobile: boolean; isDesktop: boolean }} An object with isMobile and isDesktop properties
- *
- * @example
- * const { isMobile, isDesktop } = useMediaQuery();
- */
-const getServerSnapshot = () => false
-export const useDevice = () => {
-  const isMobileQuery = '(max-width: 1187px)'
-  const isDesktopQuery = '(min-width: 1188px)'
-  const subscribeMobile = useCallback(
-    (callback: () => void) => {
-      const matchMedia = globalThis.matchMedia(isMobileQuery)
-      matchMedia.addEventListener('change', callback)
-      return () => {
-        matchMedia.removeEventListener('change', callback)
-      }
-    },
-    [isMobileQuery]
-  )
-  const subscribeDesktop = useCallback(
-    (callback: () => void) => {
-      const matchMedia = globalThis.matchMedia(isDesktopQuery)
-      matchMedia.addEventListener('change', callback)
-      return () => {
-        matchMedia.removeEventListener('change', callback)
-      }
-    },
-    [isDesktopQuery]
-  )
-  const getSnapshotMobile = () => globalThis.matchMedia(isMobileQuery).matches
-  const getSnapshotDesktop = () => globalThis.matchMedia(isDesktopQuery).matches
-  return {
-    isMobile: useSyncExternalStore(subscribeMobile, getSnapshotMobile, getServerSnapshot),
-    isDesktop: useSyncExternalStore(subscribeDesktop, getSnapshotDesktop, getServerSnapshot)
-  }
-}

package/lib/shared/style.css

@@ -1,118 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-}
-
-:root {
-  --ff-roboto: 'Roboto', sans-serif;
-}
-
-@layer components {
-  /* # Custom scroll */
-  .customScrollbar-y::-webkit-scrollbar {
-    width: 4px;
-    height: 4px;
-  }
-  .customScrollbar-y::-webkit-scrollbar-track {
-    border-radius: 8px;
-    background: #d4dbe2;
-  }
-  .customScrollbar-y::-webkit-scrollbar-thumb {
-    background: #a9b6c5;
-    border-radius: 8px;
-  }
-  .scrollHidden::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-  }
-
-  .progressBar-apply {
-    background-image: repeating-linear-gradient(-33deg, #d4dbe2, #d4dbe2 5px, #f3f4f7 0, #f3f4f7 14px);
-    background-size: 2000% 2000%;
-  }
-
-  .skeleton-apply {
-    background: linear-gradient(80deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
-    background-size: 200% 100%;
-    animation: 1.5s shine linear infinite;
-  }
-
-  .rdp-vhidden {
-    @apply hidden;
-  }
-
-  .grid-desk-apply {
-    grid-template-areas:
-      'text image'
-      'buttons image'
-      '. image';
-  }
-
-  .grid-mob-apply {
-    grid-template-areas:
-      'text'
-      'image'
-      'buttons';
-  }
-
-  .grid-desk-full-img-apply {
-    grid-template-areas:
-      'text .'
-      'buttons .'
-      '. .';
-  }
-
-  .grid-mob-full-img-apply {
-    grid-template-areas:
-      'text'
-      '.'
-      'buttons';
-  }
-
-  .grid-text-apply {
-    grid-area: text;
-  }
-
-  .grid-buttons-apply {
-    grid-area: buttons;
-  }
-
-  .grid-image-apply {
-    grid-area: image;
-  }
-
-  .gradient-apply {
-    background: linear-gradient(97.94deg, #dae4f2 -14.21%, #afcffc 47.44%, #79aef8 107.86%);
-  }
-}
-
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-body,
-html {
-  font-family: var(--ff-roboto);
-}
-
-input:-webkit-autofill,
-input:-webkit-autofill:hover,
-input:-webkit-autofill:focus,
-input:-webkit-autofill:active {
-  transition: background-color 5000s ease-in-out 0s;
-}
-
-@keyframes shine {
-  to {
-    background-position-x: -200%;
-  }
-}

package/lib/shared/ui/Badge.tsx

@@ -1,20 +0,0 @@
-import type { ReactElement } from 'react'
-import { cn } from '$/shared/utils'
-
-export interface IBadgeProps {
-  children: ReactElement | string
-  className?: string
-}
-
-export const Badge = ({ children, className }: IBadgeProps) => {
-  return (
-    <span
-      className={cn(
-        'desk-body-regular-s flex min-h-6 min-w-6 items-center justify-center text-nowrap rounded-full bg-color-primary-default px-2 py-1 text-color-white',
-        className
-      )}
-    >
-      {children}
-    </span>
-  )
-}

package/lib/shared/ui/Breadcrumbs.tsx

@@ -1,57 +0,0 @@
-import { cn } from '../utils'
-import { Icon } from './icon/Icon'
-
-export interface IBreadcrumbLink {
-  label: string
-  path: string
-  isDisabled?: boolean
-}
-interface IBreadcrumbLinkWithoutPath {
-  label: string
-  isDisabled?: boolean
-}
-
-export type TLinksList = [...IBreadcrumbLink[], IBreadcrumbLinkWithoutPath]
-
-export interface IBreadcrumbsProps {
-  linksList: TLinksList
-}
-
-export const Breadcrumbs = ({ linksList }: IBreadcrumbsProps) => {
-  return (
-    <div aria-label='Breadcrumb' className='flex max-w-[840px] items-center gap-2'>
-      {linksList.map((link) => (
-        <>
-          {'path' in link ? (
-            <div
-              className={cn(
-                'flex items-center gap-1 rounded-sm border-2 border-solid border-transparent px-1 focus-within:border-primary-focus',
-                { 'pointer-events-none !border-transparent': link?.isDisabled }
-              )}
-            >
-              <a
-                href={link.path}
-                target='_blank'
-                rel='noreferrer'
-                className={cn(
-                  'desk-body-regular-m text-color-primary-default outline-none hover:text-color-primary-hover focus:text-color-primary-default',
-                  { '!text-color-disabled': link?.isDisabled }
-                )}
-              >
-                {link.label}
-              </a>
-              <Icon
-                name='arrows/arrowRight'
-                className={cn('size-4 text-icon-primary-default', { '!text-icon-disabled': link?.isDisabled })}
-              />
-            </div>
-          ) : (
-            <div aria-current='page' className='desk-body-regular-m text-color-blue-grey-600'>
-              {link.label}
-            </div>
-          )}
-        </>
-      ))}
-    </div>
-  )
-}

package/lib/shared/ui/ButtonIcon.tsx

@@ -1,50 +0,0 @@
-import { type ComponentProps, forwardRef, type ReactElement } from 'react'
-import { cva, type VariantProps } from 'class-variance-authority'
-import { cn } from '$/shared/utils'
-
-type TButtonClasses = {
-  button: string
-  icon: string
-}
-
-const buttonConfig = cva(
-  'group flex items-center justify-center cursor-pointer rounded-full outline-offset-[3px] outline-transparent outline-2 transition duration-12 active:scale-[0.97] disabled:pointer-events-none',
-  {
-    variants: {
-      intent: {
-        primary:
-          'text-icon-white bg-color-primary-default hover:bg-color-primary-hover active:bg-color-primary-hover focus:bg-color-primary-hover focus:outline-primary-focus disabled:bg-color-primary-disabled',
-        secondary:
-          'text-icon-primary-default bg-color-transparent border border-solid outline-offset-4 border-primary-default hover:bg-color-primary-tr-hover hover:text-icon-primary-default hover:border-primary-hover  active:bg-color-primary-tr-pressed active:border-primary-hover active:text-icon-primary-hover focus:bg-color-primary-tr-focus focus:outline-primary-focus disabled:bg-color-blue-grey-200 disabled:border-transparent disabled:text-icon-primary-disabled',
-        ghost:
-          'text-icon-primary-default bg-color-transparent hover:bg-color-primary-tr-hover focus:bg-color-primary-tr-focus focus:outline-primary-focus active:text-icon-primary-hover active:bg-color-primary-tr-pressed disabled:bg-color-transparent disabled:text-icon-primary-disabled'
-      },
-      size: {
-        sm: 'size-8',
-        md: 'size-10',
-        lg: 'size-12'
-      }
-    },
-    defaultVariants: {
-      intent: 'primary',
-      size: 'lg'
-    }
-  }
-)
-
-type TButtonProps = VariantProps<typeof buttonConfig>
-
-export interface IButtonIconProps extends Omit<ComponentProps<'button'>, 'className'>, TButtonProps {
-  children: ReactElement
-  classes?: Partial<TButtonClasses>
-}
-
-export const ButtonIcon = forwardRef<HTMLButtonElement, IButtonIconProps>(
-  ({ size, intent, children, classes, type = 'button', ...props }, ref) => {
-    return (
-      <button ref={ref} type={type} className={cn(buttonConfig({ intent, size }), classes?.button)} {...props}>
-        <span className={cn(classes?.icon)}>{children}</span>
-      </button>
-    )
-  }
-)