@licklist/design 0.78.5-dev.19 → 0.78.5-dev.2

package/dist/CustomDatePicker/CustomDatePicker.d.ts

@@ -1,10 +0,0 @@
-type CustomDatePickerProps = {
-    name: string;
-    error?: string;
-    label?: string;
-    showAge?: boolean;
-    required?: boolean;
-};
-export declare function CustomDatePicker({ name, error, showAge, required }: CustomDatePickerProps): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=CustomDatePicker.d.ts.map

package/dist/CustomDatePicker/CustomDatePicker.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CustomDatePicker.d.ts","sourceRoot":"","sources":["../../src/CustomDatePicker/CustomDatePicker.tsx"],"names":[],"mappings":"AAMA,KAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,KAAK,EACL,OAAc,EACd,QAAe,EAChB,EAAE,qBAAqB,2CAwOvB"}

package/src/CustomDatePicker/CustomDatePicker.tsx

@@ -1,252 +0,0 @@
-import { TextInput } from '@mantine/core'
-import { useEffect, useState } from 'react'
-import { Controller, useFormContext } from 'react-hook-form'
-import { DateTime } from 'luxon'
-import { useTranslation } from 'react-i18next'
-
-type CustomDatePickerProps = {
-  name: string
-  error?: string
-  label?: string
-  showAge?: boolean
-  required?: boolean
-}
-
-export function CustomDatePicker({
-  name, 
-  error, 
-  showAge = true,
-  required = true 
-}: CustomDatePickerProps) {
-  const { t } = useTranslation()
-  const { control, setValue, watch, getValues, trigger, formState } = useFormContext()
-  const [age, setAge] = useState<number | null>(null)
-  const [localError, setLocalError] = useState<string | null>(null)
-  
-  // Get current field values
-  const day = watch(`${name}_day`) || ''
-  const month = watch(`${name}_month`) || ''
-  const year = watch(`${name}_year`) || ''
-  
-  // Initialize values from existing date
-  useEffect(() => {
-    const existingDate = getValues(name)
-    
-    if (existingDate instanceof Date && !day && !month && !year) {
-      const dateTime = DateTime.fromJSDate(existingDate)
-      if (dateTime.isValid) {
-        setValue(`${name}_day`, dateTime.day.toString().padStart(2, '0'))
-        setValue(`${name}_month`, dateTime.month.toString().padStart(2, '0'))
-        setValue(`${name}_year`, dateTime.year.toString())
-      }
-    }
-  }, [name, setValue, getValues, day, month, year])
-  
-  // Check for empty fields after submit attempt
-  useEffect(() => {
-    if (formState.isSubmitted && required) {
-      const hasEmptyFields = !day || !month || !year
-      
-      if (hasEmptyFields) {
-        setLocalError(t('Validation:fieldRequired', { attribute: t('App:dateOfBirth') }))
-        // Set the main field to null to trigger form validation
-        setValue(name, null, { shouldValidate: true })
-      } else {
-        setLocalError(null)
-      }
-    }
-  }, [formState.isSubmitted, day, month, year, required, name, setValue, t])
-  
-  // Calculate age and validate date when all fields are filled
-  useEffect(() => {
-    if (day && month && year) {
-      try {
-        // Create a date object
-        const dateObj = DateTime.fromObject({ 
-          day: parseInt(day, 10), 
-          month: parseInt(month, 10), 
-          year: parseInt(year, 10) 
-        })
-        
-        // Only proceed if date is valid
-        if (dateObj.isValid) {
-          // Set the main field value
-          setValue(name, dateObj.toJSDate(), { shouldValidate: true })
-          setLocalError(null)
-          
-          // Calculate age
-          if (showAge) {
-            const now = DateTime.now()
-            const diff = now.diff(dateObj, 'years')
-            setAge(Math.floor(diff.years))
-          }
-        } else {
-          setLocalError(t('Validation:fieldInvalid', { attribute: t('App:dateOfBirth') }))
-          setValue(name, null, { shouldValidate: true })
-          setAge(null)
-        }
-      } catch (err) {
-        // If any parsing fails, just reset the age display
-        setLocalError(t('Validation:fieldInvalid', { attribute: t('App:dateOfBirth') }))
-        setValue(name, null, { shouldValidate: true })
-        setAge(null)
-      }
-    } else if (formState.isSubmitted && required) {
-      // If form was submitted and fields are required but not all filled
-      setLocalError(t('Validation:fieldRequired', { attribute: t('App:dateOfBirth') }))
-      setValue(name, null, { shouldValidate: true })
-      setAge(null)
-    } else {
-      // Reset if not all fields are filled but not submitted yet
-      setValue(name, null, { shouldValidate: false })
-      setAge(null)
-    }
-  }, [day, month, year, name, setValue, showAge, formState.isSubmitted, required, t])
-
-  // After user completes all fields, validate the form
-  useEffect(() => {
-    if (day && month && year) {
-      trigger(name)
-    }
-  }, [day, month, year, name, trigger])
-
-  // Display either the form error or our local error
-  const displayError = error || localError
-
-  return (
-    <div className="tw-w-full">
-      <div className="tw-flex tw-flex-col">
-        <div className="tw-mb-2 tw-flex tw-items-center tw-justify-between">
-          <label className="tw-font-semibold">
-            {t('App:dateOfBirth')}
-            {required && <span className="tw-ml-1 tw-text-red-500"></span>}
-          </label>
-          {age !== null && (
-            <span className="tw-text-sm tw-text-gray-600">
-              {t('App:Age')}: {age}
-            </span>
-          )}
-        </div>
-        
-        <div className="tw-flex tw-flex-row tw-gap-4">
-          <div className="tw-w-1/3">
-            <label className="tw-mb-1 tw-block tw-text-sm">{t('App:Day')}</label>
-            <Controller
-              control={control}
-              name={`${name}_day`}
-              defaultValue=""
-              render={({ field }) => (
-                <TextInput
-                  {...field}
-                  value={field.value || ''}
-                  placeholder="DD"
-                  maxLength={2}
-                  error={!!displayError}
-                  onChange={(e) => {
-                    const value = e.target.value.replace(/[^0-9]/g, '')
-                    field.onChange(value)
-                  }}
-                  onBlur={(e) => {
-                    // Validate and format on blur
-                    let value = e.target.value.replace(/[^0-9]/g, '')
-                    if (value) {
-                      const num = parseInt(value, 10)
-                      if (num < 1) value = '01'
-                      else if (num > 31) value = '31'
-                      else value = num.toString().padStart(2, '0')
-                    }
-                    field.onChange(value)
-                  }}
-                />
-              )}
-            />
-          </div>
-          
-          <div className="tw-w-1/3">
-            <label className="tw-mb-1 tw-block tw-text-sm">{t('App:Month')}</label>
-            <Controller
-              control={control}
-              name={`${name}_month`}
-              defaultValue=""
-              render={({ field }) => (
-                <TextInput
-                  {...field}
-                  value={field.value || ''}
-                  placeholder="MM"
-                  maxLength={2}
-                  error={!!displayError}
-                  onChange={(e) => {
-                    const value = e.target.value.replace(/[^0-9]/g, '')
-                    field.onChange(value)
-                  }}
-                  onBlur={(e) => {
-                    // Validate and format on blur
-                    let value = e.target.value.replace(/[^0-9]/g, '')
-                    if (value) {
-                      const num = parseInt(value, 10)
-                      if (num < 1) value = '01'
-                      else if (num > 12) value = '12'
-                      else value = num.toString().padStart(2, '0')
-                    }
-                    field.onChange(value)
-                  }}
-                />
-              )}
-            />
-          </div>
-          
-          <div className="tw-w-1/3">
-            <label className="tw-mb-1 tw-block tw-text-sm">{t('App:Year')}</label>
-            <Controller
-              control={control}
-              name={`${name}_year`}
-              defaultValue=""
-              render={({ field }) => (
-                <TextInput
-                  {...field}
-                  value={field.value || ''}
-                  placeholder="YYYY"
-                  maxLength={4}
-                  error={!!displayError}
-                  onChange={(e) => {
-                    const value = e.target.value.replace(/[^0-9]/g, '')
-                    field.onChange(value)
-                  }}
-                  onBlur={(e) => {
-                    // Validate on blur
-                    const value = e.target.value.replace(/[^0-9]/g, '')
-                    if (value) {
-                      const num = parseInt(value, 10)
-                      const currentYear = new Date().getFullYear()
-                      if (num > currentYear) {
-                        field.onChange(currentYear.toString())
-                      } else if (num < 1900) {
-                        field.onChange('1900')
-                      }
-                    }
-                  }}
-                />
-              )}
-            />
-          </div>
-        </div>
-      </div>
-      
-      {/* Hidden field to store the actual date value */}
-      <Controller
-        control={control}
-        name={name}
-        defaultValue={null}
-        rules={{
-          validate: value => {
-            if (required && !value) {
-              return t('Validation:fieldRequired', { attribute: t('App:dateOfBirth') })
-            }
-            return true
-          }
-        }}
-        render={() => <input type="hidden" />}
-      />
-    </div>
-  )
-}