goobs-frontend 0.7.53

package/src/components/ConfirmationCodeInput/index.tsx

@@ -0,0 +1,108 @@
+'use client'
+import React, { ChangeEvent, KeyboardEvent } from 'react'
+import { Input, Box } from '@mui/material'
+import { useCodeConfirmation } from './utils/useCodeConfirmation'
+import { columnconfig } from '../../components/Grid'
+import { red, green } from '../../styles/palette'
+
+export interface ConfirmationCodeInputsProps {
+  identifier?: string
+  columnconfig?: columnconfig
+  isValid: boolean
+  codeLength?: number
+}
+
+/**
+ * ConfirmationCodeInputs component renders a set of input fields for entering a confirmation code.
+ * It uses the useCodeConfirmation hook to handle code changes and key events.
+ * @param props The props for the ConfirmationCodeInputs component.
+ * @returns The rendered ConfirmationCodeInputs component.
+ */
+const ConfirmationCodeInputs: React.FC<ConfirmationCodeInputsProps> = ({
+  codeLength = 6,
+  isValid,
+  ...props
+}) => {
+  const { handleCodeChange, handleKeyDown } = useCodeConfirmation({
+    codeLength,
+    isValid,
+  })
+
+  /**
+   * handleChange function is called when the value of an input field changes.
+   * It updates the code state using the handleCodeChange function from the useCodeConfirmation hook.
+   * If the input field has a value, it focuses on the next input field.
+   * @param event The change event triggered by the input field.
+   * @param index The index of the input field.
+   */
+  const handleChange = (
+    event: ChangeEvent<HTMLInputElement>,
+    index: number
+  ) => {
+    handleCodeChange(event, index)
+    if (event.target.value) {
+      const nextInput = document.querySelector(
+        `input[name=code${index + 2}]`
+      ) as HTMLInputElement | null
+      if (nextInput) {
+        nextInput.focus()
+      }
+    }
+  }
+
+  /**
+   * handleKeyDownWrapper function is a wrapper for the handleKeyDown function from the useCodeConfirmation hook.
+   * It is called when a key is pressed while an input field is focused.
+   * @param event The keyboard event triggered by the input field.
+   * @param index The index of the input field.
+   */
+  const handleKeyDownWrapper = (
+    event: KeyboardEvent<HTMLInputElement>,
+    index: number
+  ) => {
+    handleKeyDown(event, index)
+  }
+
+  return (
+    <Box display="flex" flexDirection="row" alignItems="center">
+      <Box display="flex" gap={1}>
+        {Array.from({ length: codeLength }, (_, index) => (
+          <Input
+            key={index}
+            name={`code${index + 1}`}
+            inputProps={{
+              maxLength: 1,
+            }}
+            sx={{
+              border: '1px solid',
+              borderColor: 'black',
+              borderRadius: 1,
+              width: 50,
+              height: 50,
+              input: {
+                textAlign: 'center',
+                color: 'black',
+              },
+            }}
+            onChange={(event: ChangeEvent<HTMLInputElement>) =>
+              handleChange(event, index)
+            }
+            onKeyDown={(event: KeyboardEvent<HTMLInputElement>) =>
+              handleKeyDownWrapper(event, index)
+            }
+            {...props}
+          />
+        ))}
+      </Box>
+      <Box
+        width={20}
+        height={20}
+        borderRadius="50%"
+        bgcolor={isValid ? green.main : red.main}
+        ml={2}
+      />
+    </Box>
+  )
+}
+
+export default ConfirmationCodeInputs

package/src/components/ConfirmationCodeInput/utils/useCodeConfirmation.tsx

@@ -0,0 +1,129 @@
+'use client'
+import React, { useCallback, useState, useEffect } from 'react'
+import { ConfirmationCodeInputsProps } from '..'
+
+interface CodeState {
+  code1: string
+  code2: string
+  code3: string
+  code4: string
+  code5: string
+  code6: string
+}
+
+interface UseCodeConfirmationProps extends ConfirmationCodeInputsProps {
+  codeLength: number
+}
+
+/**
+ * useCodeConfirmation hook handles the state and logic for a confirmation code input.
+ * @param codeLength The length of the confirmation code.
+ * @param isValid A boolean indicating whether the entered code is valid.
+ * @returns An object containing the necessary handlers and state for the confirmation code input.
+ */
+export const useCodeConfirmation = ({
+  codeLength,
+  isValid,
+}: UseCodeConfirmationProps) => {
+  const [code, setCode] = useState<CodeState>({
+    code1: '',
+    code2: '',
+    code3: '',
+    code4: '',
+    code5: '',
+    code6: '',
+  })
+  const [iconColor, setIconColor] = useState<string>('red')
+
+  useEffect(() => {
+    if (isValid) {
+      setIconColor('green')
+    } else {
+      setIconColor('red')
+    }
+  }, [isValid])
+
+  /**
+   * handleCodeChange updates the code state when an input value changes.
+   * @param event The change event triggered by the input.
+   * @param index The index of the input field.
+   */
+  const handleCodeChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>, index: number) => {
+      const value = event.target.value.replace(/[^0-9]/g, '')
+      setCode(prevCode => ({
+        ...prevCode,
+        [`code${index + 1}`]: value,
+      }))
+    },
+    []
+  )
+
+  /**
+   * handleKeyDown handles the keydown event on the input fields.
+   * @param event The keydown event triggered by the input.
+   * @param index The index of the input field.
+   */
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement>, index: number) => {
+      if (
+        event.key === 'Backspace' &&
+        !code[`code${index + 1}` as keyof CodeState] &&
+        index > 0
+      ) {
+        setCode(prevCode => ({
+          ...prevCode,
+          [`code${index}`]: '',
+        }))
+      } else if (event.key === 'ArrowLeft') {
+        if (index > 0) {
+          const prevInput = document.querySelector(
+            `input[identifier=code${index}]`
+          ) as HTMLInputElement | null
+          if (prevInput) {
+            prevInput.focus()
+            setTimeout(() => {
+              if (code[`code${index}` as keyof CodeState]) {
+                prevInput.setSelectionRange(
+                  prevInput.value.length,
+                  prevInput.value.length
+                )
+              } else {
+                prevInput.setSelectionRange(0, 0)
+              }
+            }, 0)
+          }
+        }
+      } else if (event.key === 'ArrowRight') {
+        if (index < codeLength - 1) {
+          const nextInput = document.querySelector(
+            `input[identifier=code${index + 2}]`
+          ) as HTMLInputElement | null
+          if (nextInput) {
+            nextInput.focus()
+            setTimeout(() => {
+              if (code[`code${index + 2}` as keyof CodeState]) {
+                nextInput.setSelectionRange(
+                  nextInput.value.length,
+                  nextInput.value.length
+                )
+              } else {
+                nextInput.setSelectionRange(0, 0)
+              }
+            }, 0)
+          }
+        }
+      }
+    },
+    [code, codeLength]
+  )
+
+  const combinedCode = Object.values(code).join('')
+
+  return {
+    handleCodeChange,
+    handleKeyDown,
+    combinedCode,
+    iconColor,
+  }
+}

package/src/components/Content/Structure/animations.tsx

@@ -0,0 +1,106 @@
+'use client'
+import { Box, styled, keyframes } from '@mui/material'
+import React, { useEffect } from 'react'
+
+export type Animation =
+  | 'none'
+  | 'slideIn'
+  | 'slideInUp'
+  | 'slideInDown'
+  | 'slideInLeft'
+  | 'slideInRight'
+  | 'stuckOnScroll'
+  | 'fadeOut'
+  | 'fadeIn'
+
+export const slideIn = keyframes`
+  0% { opacity: 0; transform: translateX(-20px); }
+  100% { opacity: 1; transform: translateX(0); }
+`
+
+export const slideInUp = keyframes`
+  0% { opacity: 0; transform: translateY(20px); }
+  100% { opacity: 1; transform: translateY(0); }
+`
+
+export const slideInDown = keyframes`
+  0% { opacity: 0; transform: translateY(-20px); }
+  100% { opacity: 1; transform: translateY(0); }
+`
+
+export const slideInLeft = keyframes`
+  0% { opacity: 0; transform: translateX(-20px); }
+  100% { opacity: 1; transform: translateX(0); }
+`
+
+export const slideInRight = keyframes`
+  0% { opacity: 0; transform: translateX(20px); }
+  100% { opacity: 1; transform: translateX(0); }
+`
+
+export const fadeOut = keyframes`
+  0% { opacity: 1; }
+  100% { opacity: 0; }
+`
+
+export const fadeIn = keyframes`
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+`
+
+interface AnimationProps {
+  animationtype?: Animation
+}
+
+const animationStyles: Record<Animation, string> = {
+  none: 'none',
+  slideIn: `${slideIn} 1s ease-in-out forwards`,
+  slideInUp: `${slideInUp} 1s ease-in-out forwards`,
+  slideInDown: `${slideInDown} 1s ease-in-out forwards`,
+  slideInLeft: `${slideInLeft} 1s ease-in-out forwards`,
+  slideInRight: `${slideInRight} 1s ease-in-out forwards`,
+  fadeOut: `${fadeOut} 0.5s ease-out forwards`,
+  fadeIn: `${fadeIn} 0.5s ease-in forwards`,
+  stuckOnScroll: 'none', // Assuming no animation for 'stuckOnScroll' as it's likely a CSS position behavior.
+}
+
+export const AnimatedElement = styled(Box)<AnimationProps>(
+  ({ animationtype }) => ({
+    opacity: animationtype === 'none' ? 1 : 0,
+    animation: animationtype ? animationStyles[animationtype] : 'none',
+  })
+)
+
+export const StuckElement = styled(Box)`
+  position: sticky;
+  top: 0;
+  z-index: 1;
+`
+
+export function useAnimation(ref: React.RefObject<HTMLDivElement>) {
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      entries => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            entry.target.classList.add('animate')
+          } else {
+            entry.target.classList.remove('animate')
+          }
+        })
+      },
+      { threshold: 0.2 }
+    )
+
+    const currentRef = ref.current
+    if (currentRef) {
+      observer.observe(currentRef)
+    }
+
+    return () => {
+      if (currentRef) {
+        observer.unobserve(currentRef)
+      }
+    }
+  }, [ref])
+}

package/src/components/Content/Structure/button/useButton.tsx

@@ -0,0 +1,80 @@
+'use client'
+import React from 'react'
+import CustomButton, { CustomButtonProps } from './../../../Button'
+import { columnconfig, cellconfig } from '../../../Grid'
+import { TypographyPropsVariantOverrides } from '@mui/material'
+
+export interface ExtendedButtonProps extends CustomButtonProps {
+  columnconfig?: columnconfig
+  cellconfig?: cellconfig
+}
+
+const useButton = (grid: {
+  button?: ExtendedButtonProps | ExtendedButtonProps[]
+}) => {
+  if (!grid.button) return null
+
+  const renderButton = (
+    buttonItem: ExtendedButtonProps,
+    index: number
+  ): columnconfig => {
+    const {
+      text,
+      name,
+      backgroundcolor,
+      outlinecolor,
+      fontcolor,
+      width,
+      fontlocation,
+      fontvariant,
+      icon,
+      iconcolor,
+      iconsize,
+      iconlocation,
+      variant,
+      onClick,
+      helperfooter,
+      columnconfig: itemColumnConfig,
+      cellconfig,
+      ...restProps
+    } = buttonItem
+
+    const mergedConfig: columnconfig = {
+      ...itemColumnConfig,
+      cellconfig: {
+        ...cellconfig,
+      },
+      component: (
+        <CustomButton
+          key={`button-${index}`}
+          text={text}
+          name={name}
+          backgroundcolor={backgroundcolor}
+          outlinecolor={outlinecolor}
+          fontcolor={fontcolor}
+          width={width}
+          fontlocation={fontlocation}
+          fontvariant={fontvariant as keyof TypographyPropsVariantOverrides}
+          icon={icon}
+          iconcolor={iconcolor}
+          iconsize={iconsize}
+          iconlocation={iconlocation}
+          variant={variant}
+          onClick={onClick}
+          helperfooter={helperfooter}
+          {...restProps}
+        />
+      ),
+    }
+
+    return mergedConfig
+  }
+
+  if (Array.isArray(grid.button)) {
+    return grid.button.map(renderButton)
+  } else {
+    return [renderButton(grid.button, 0)]
+  }
+}
+
+export default useButton

package/src/components/Content/Structure/confirmationinput/useConfirmationInput.tsx

@@ -0,0 +1,56 @@
+'use client'
+import React from 'react'
+import ConfirmationCodeInputs, {
+  ConfirmationCodeInputsProps,
+} from '../../../ConfirmationCodeInput'
+import { columnconfig, cellconfig } from '../../../Grid'
+
+export interface ExtendedConfirmationCodeInputsProps
+  extends ConfirmationCodeInputsProps {
+  columnconfig?: columnconfig
+  cellconfig?: cellconfig
+}
+
+const useConfirmationInput = (grid: {
+  confirmationcodeinput?:
+    | ExtendedConfirmationCodeInputsProps
+    | ExtendedConfirmationCodeInputsProps[]
+}): columnconfig | columnconfig[] | null => {
+  if (!grid.confirmationcodeinput) return null
+
+  const renderConfirmationInput = (
+    confirmationCodeInputProps: ExtendedConfirmationCodeInputsProps,
+    index: number
+  ): columnconfig => {
+    const {
+      identifier,
+      isValid,
+      columnconfig: itemColumnConfig,
+      cellconfig,
+      ...restProps
+    } = confirmationCodeInputProps
+
+    return {
+      ...itemColumnConfig,
+      cellconfig: {
+        ...cellconfig,
+      },
+      component: (
+        <ConfirmationCodeInputs
+          key={`confirmationcodeinput-${index}`}
+          identifier={identifier}
+          isValid={isValid}
+          {...restProps}
+        />
+      ),
+    }
+  }
+
+  if (Array.isArray(grid.confirmationcodeinput)) {
+    return grid.confirmationcodeinput.map(renderConfirmationInput)
+  } else {
+    return renderConfirmationInput(grid.confirmationcodeinput, 0)
+  }
+}
+
+export default useConfirmationInput

package/src/components/Content/Structure/image/useImage.tsx

@@ -0,0 +1,62 @@
+'use client'
+import React from 'react'
+import Image from 'next/image'
+import { columnconfig, cellconfig } from '../../../Grid'
+
+type ImageProps = {
+  url: string
+  alt?: string
+  width?: number
+  height?: number
+}
+
+export interface ExtendedImageProps extends Omit<ImageProps, 'columnconfig'> {
+  columnconfig?: columnconfig
+  cellconfig?: cellconfig
+}
+
+const useImage = (grid: {
+  image?: ExtendedImageProps | ExtendedImageProps[]
+}) => {
+  if (!grid.image) return null
+
+  const renderImage = (
+    imageItem: ExtendedImageProps,
+    index: number
+  ): columnconfig => {
+    const {
+      url,
+      alt = '',
+      columnconfig: itemColumnConfig,
+      cellconfig,
+      ...restProps
+    } = imageItem
+
+    if (!url) return itemColumnConfig || {}
+
+    return {
+      ...itemColumnConfig,
+      cellconfig: {
+        ...cellconfig,
+      },
+      component: (
+        <Image
+          key={`image-${index}`}
+          src={url}
+          alt={alt || 'image'}
+          style={{ width: '100%', height: 'auto' }}
+          fill
+          {...restProps}
+        />
+      ),
+    }
+  }
+
+  if (Array.isArray(grid.image)) {
+    return grid.image.map(renderImage)
+  } else {
+    return [renderImage(grid.image, 0)]
+  }
+}
+
+export default useImage

package/src/components/Content/Structure/link/useLink.tsx

@@ -0,0 +1,60 @@
+'use client'
+import React from 'react'
+import Link from 'next/link'
+import { Typography, TypographyProps } from '../../../Typography'
+import { columnconfig, cellconfig } from '../../../Grid'
+
+export interface ExtendedTypographyProps extends TypographyProps {
+  columnconfig?: columnconfig
+  cellconfig?: cellconfig
+  link?: string
+}
+
+const useLink = (grid: {
+  link?: ExtendedTypographyProps | ExtendedTypographyProps[]
+}) => {
+  if (!grid.link) return null
+
+  const renderLink = (
+    linkItem: ExtendedTypographyProps,
+    index: number
+  ): columnconfig => {
+    const {
+      link,
+      text,
+      fontcolor,
+      fontvariant,
+      columnconfig: itemColumnConfig,
+      cellconfig,
+      ...restProps
+    } = linkItem
+
+    if (!link) {
+      throw new Error('Link property is required in ExtendedTypographyProps')
+    }
+
+    return {
+      ...itemColumnConfig,
+      cellconfig: {
+        ...cellconfig,
+      },
+      component: (
+        <Link key={`link-${index}`} href={link} passHref {...restProps}>
+          <Typography
+            text={text}
+            fontvariant={fontvariant}
+            fontcolor={fontcolor}
+          />
+        </Link>
+      ),
+    }
+  }
+
+  if (Array.isArray(grid.link)) {
+    return grid.link.map(renderLink)
+  } else {
+    return [renderLink(grid.link, 0)]
+  }
+}
+
+export default useLink

package/src/components/Content/Structure/radiogroup/useGridRadioGroup.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import RadioGroup from '../../../RadioGroup'
+import { columnconfig, cellconfig } from '../../../Grid'
+import { RadioGroupProps as BaseRadioGroupProps } from '../../../../components/RadioGroup'
+
+export interface ExtendedRadioGroupProps
+  extends Omit<BaseRadioGroupProps, 'columnconfig'> {
+  columnconfig?: columnconfig
+  cellconfig?: cellconfig
+}
+
+const useGridRadioGroup = (grid: {
+  radiogroup?: ExtendedRadioGroupProps | ExtendedRadioGroupProps[]
+}) => {
+  if (!grid.radiogroup) return null
+
+  const renderRadioGroup = (
+    radiogroup: ExtendedRadioGroupProps,
+    index: number
+  ): columnconfig => {
+    const {
+      label,
+      options,
+      defaultValue,
+      name,
+      labelFontVariant,
+      labelFontColor,
+      labelText,
+      columnconfig: itemColumnConfig,
+      cellconfig,
+      ...restProps
+    } = radiogroup
+
+    return {
+      ...itemColumnConfig,
+      cellconfig: {
+        ...cellconfig,
+      },
+      component: (
+        <RadioGroup
+          key={`radiogroup-${index}`}
+          label={label}
+          options={options}
+          defaultValue={defaultValue}
+          name={name}
+          labelFontVariant={labelFontVariant}
+          labelFontColor={labelFontColor}
+          labelText={labelText}
+          {...restProps}
+        />
+      ),
+    }
+  }
+
+  if (Array.isArray(grid.radiogroup)) {
+    return grid.radiogroup.map(renderRadioGroup)
+  } else {
+    return [renderRadioGroup(grid.radiogroup, 0)]
+  }
+}
+
+export default useGridRadioGroup