@scbt-ecom/ui 0.4.0 → 0.4.2

package/lib/hybrid.ts

@@ -0,0 +1,25 @@
+// Components
+export * from './shared/ui/Badge'
+export * from './shared/ui/Section'
+export * from './shared/ui/ResponsiveContainer'
+export * from './shared/ui/icon'
+export * from './shared/ui/table'
+export * from './shared/ui/Breadcrumbs'
+export * from './shared/ui/button'
+export * from './shared/ui/ButtonIcon'
+export * from './shared/ui/CustomLink'
+export * from './shared/ui/Document'
+export * from './shared/ui/Heading'
+export * from './shared/ui/PhoneView'
+export * from './shared/ui/Loader'
+export * from './shared/ui/ProgressBar'
+export * from './shared/ui/Skeleton'
+export * from './shared/ui/notification'
+
+// Utils
+export * from './shared/utils'
+// Validation
+export * from './shared/validation'
+// Constants
+export * from './shared/constants'
+export * from './configs'

package/lib/shared/constants/api.ts

@@ -0,0 +1,2 @@
+export const DADATA_BASE_CACHE_URL = import.meta.env.STORYBOOK_DADATA_API
+export const DADATA_BASE_CONSTANTS_URL = import.meta.env.STORYBOOK_DADATA_CONSTANTS_API

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

@@ -0,0 +1,121 @@
+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

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

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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,88 @@
+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

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

package/lib/shared/hooks/index.ts

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,12 @@
+'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

@@ -0,0 +1,22 @@
+'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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,16 @@
+'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

@@ -0,0 +1,38 @@
+'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

@@ -0,0 +1,42 @@
+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

@@ -0,0 +1,118 @@
+@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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,57 @@
+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>
+  )
+}