@homefile/components-v2 2.14.16 → 2.14.18

package/dist/components/forms/dynamicForm/fields/GroupField.js

@@ -3,5 +3,5 @@ import { Stack } from '@chakra-ui/react';
 import { FieldWithDelete } from '../../..';
 import { SingleFields } from './SingleFields';
 export const GroupField = ({ id, fields, onRemove, canBeHidden, }) => {
-    return (_jsx(FieldWithDelete, { id: id, onRemove: onRemove, canBeHidden: canBeHidden, children: _jsx(Stack, { spacing: "1", flex: "1", children: _jsx(SingleFields, { fields: fields }) }) }));
+    return (_jsx(FieldWithDelete, { id: id, onRemove: onRemove, canBeHidden: canBeHidden, children: _jsx(Stack, { spacing: "base", flex: "1", children: _jsx(SingleFields, { fields: fields }) }) }));
 };

package/dist/components/forms/dynamicForm/fields/NumberField.js

@@ -4,7 +4,8 @@ import { Flex, Input } from '@chakra-ui/react';
 import { FieldDescription, LabeledField } from '../../..';
 export const NumberField = ({ description, icon, id, label, placeholder, value, }) => {
     const { control } = useFormContext();
-    return (_jsxs(Flex, { align: "center", gap: "base", flex: "auto", children: [_jsx(FieldDescription, { description: description, icon: icon }), _jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { value, onChange } }) => {
+    const hasDescriptionAndIcon = Boolean(description) && Boolean(icon);
+    return (_jsxs(Flex, { align: "center", gap: "base", flex: "auto", children: [hasDescriptionAndIcon && (_jsx(FieldDescription, { description: description, icon: icon })), _jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { value, onChange } }) => {
                     return (_jsx(LabeledField, { label: label, children: _jsx(Input, { onChange: (e) => {
                                 const value = e.target.valueAsNumber;
                                 const isNumber = !isNaN(value);

package/dist/helpers/propertyTiles/MortgageInfo.helper.js

@@ -1,4 +1,5 @@
 import { t } from 'i18next';
+import { formatISODate } from '../../utils';
 export const mortgageInfoForm = ({ amount = 0, documentDate = '', maturityDate = '', interestRate = 0, interestRateType = '', estimatedMortgageBalance = 0, estimatedMortgagePayment = 0, lenderName = '', purchasePrice = 0, }) => {
     return [
         {
@@ -9,11 +10,10 @@ export const mortgageInfoForm = ({ amount = 0, documentDate = '', maturityDate =
             visible: true,
         },
         {
-            icon: 'price',
             id: 'purchase-price',
             name: t('propertyTiles.placeholders.purchasePrice'),
             value: purchasePrice,
-            type: 'number',
+            type: 'currency',
             visible: true,
         },
         {
@@ -27,9 +27,8 @@ export const mortgageInfoForm = ({ amount = 0, documentDate = '', maturityDate =
                     id: 'group-1-loan',
                     name: t('propertyTiles.placeholders.loan'),
                     value: amount,
-                    type: 'number',
+                    type: 'currency',
                     visible: true,
-                    icon: 'billing',
                 },
                 {
                     id: 'group-1-grid',
@@ -38,7 +37,7 @@ export const mortgageInfoForm = ({ amount = 0, documentDate = '', maturityDate =
                     children: [
                         {
                             id: 'group-1-grid-origination',
-                            value: documentDate,
+                            value: formatISODate(documentDate),
                             description: t('propertyTiles.placeholders.origination'),
                             type: 'date',
                             visible: true,
@@ -79,7 +78,7 @@ export const mortgageInfoForm = ({ amount = 0, documentDate = '', maturityDate =
                 {
                     id: 'payment-grid-maturity-date',
                     description: t('propertyTiles.placeholders.maturityDate'),
-                    value: maturityDate,
+                    value: formatISODate(maturityDate),
                     type: 'date',
                     visible: true,
                 },

package/dist/stories/propertyTiles/MortgageInfo.stories.js

@@ -9,8 +9,8 @@ export default {
         onCheckChange: action('onCheckChange'),
         form: {
             amount: 0,
-            maturityDate: '',
-            documentDate: '',
+            maturityDate: '2025-04-17T00:00:00.000Z',
+            documentDate: '2017-04-17T00:00:00.000Z',
             estimatedMortgageBalance: 0,
             estimatedMortgagePayment: 0,
             interestRate: 0,

package/dist/utils/Formaters.utils.d.ts

@@ -24,6 +24,7 @@ interface FormatCurrencyI {
     currrency?: string;
     value: string | number;
 }
+export declare const formatISODate: (value: string) => string;
 export declare const formatCurrency: ({ country, currrency, value, }: FormatCurrencyI) => string;
 export declare const formatCurrencyWithoutDigits: ({ country, currrency, value, }: FormatCurrencyI) => string;
 export declare const formatNumber: (value: string | number) => string | 0;

package/dist/utils/Formaters.utils.js

@@ -1,3 +1,4 @@
+import { format, isValid, parseISO } from 'date-fns';
 export const formatDate = ({ date, locale = 'en-US' }) => {
     const timeFormat = new Intl.DateTimeFormat(locale, {
         timeStyle: 'short',
@@ -90,6 +91,12 @@ export const joinDayMonthYear = (value) => {
         year: 'numeric',
     });
 };
+export const formatISODate = (value) => {
+    const displayValue = isValid(parseISO(value))
+        ? format(value, 'MM/dd/yyyy')
+        : '';
+    return displayValue;
+};
 export const formatCurrency = ({ country = 'en-US', currrency = 'USD', value, }) => {
     if (!value) {
         return Number(0).toLocaleString(country, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "2.14.16",
+  "version": "2.14.18",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",

package/src/components/forms/dynamicForm/fields/GroupField.tsx

@@ -11,7 +11,7 @@ export const GroupField = ({
 }: GroupFieldI) => {
   return (
     <FieldWithDelete id={id} onRemove={onRemove} canBeHidden={canBeHidden}>
-      <Stack spacing="1" flex="1">
+      <Stack spacing="base" flex="1">
         <SingleFields fields={fields} />
       </Stack>
     </FieldWithDelete>

package/src/components/forms/dynamicForm/fields/NumberField.tsx

@@ -12,9 +12,12 @@ export const NumberField = ({
   value,
 }: TextFieldI) => {
   const { control } = useFormContext()
+  const hasDescriptionAndIcon = Boolean(description) && Boolean(icon)
   return (
     <Flex align="center" gap="base" flex="auto">
-      <FieldDescription description={description} icon={icon} />
+      {hasDescriptionAndIcon && (
+        <FieldDescription description={description} icon={icon} />
+      )}
       <Controller
         control={control}
         name={id}

package/src/helpers/propertyTiles/MortgageInfo.helper.ts

@@ -1,5 +1,6 @@
 import { t } from 'i18next'
 import { MortgageInfoI, ReportI } from '@/interfaces'
+import { formatISODate } from '@/utils'
 
 export const mortgageInfoForm = ({
   amount = 0,
@@ -21,11 +22,10 @@ export const mortgageInfoForm = ({
       visible: true,
     },
     {
-      icon: 'price',
       id: 'purchase-price',
       name: t('propertyTiles.placeholders.purchasePrice'),
       value: purchasePrice,
-      type: 'number',
+      type: 'currency',
       visible: true,
     },
     {
@@ -39,9 +39,8 @@ export const mortgageInfoForm = ({
           id: 'group-1-loan',
           name: t('propertyTiles.placeholders.loan'),
           value: amount,
-          type: 'number',
+          type: 'currency',
           visible: true,
-          icon: 'billing',
         },
         {
           id: 'group-1-grid',
@@ -50,7 +49,7 @@ export const mortgageInfoForm = ({
           children: [
             {
               id: 'group-1-grid-origination',
-              value: documentDate,
+              value: formatISODate(documentDate),
               description: t('propertyTiles.placeholders.origination'),
               type: 'date',
               visible: true,
@@ -91,7 +90,7 @@ export const mortgageInfoForm = ({
         {
           id: 'payment-grid-maturity-date',
           description: t('propertyTiles.placeholders.maturityDate'),
-          value: maturityDate,
+          value: formatISODate(maturityDate),
           type: 'date',
           visible: true,
         },

package/src/stories/propertyTiles/MortgageInfo.stories.tsx

@@ -11,8 +11,8 @@ export default {
     onCheckChange: action('onCheckChange'),
     form: {
       amount: 0,
-      maturityDate: '',
-      documentDate: '',
+      maturityDate: '2025-04-17T00:00:00.000Z',
+      documentDate: '2017-04-17T00:00:00.000Z',
       estimatedMortgageBalance: 0,
       estimatedMortgagePayment: 0,
       interestRate: 0,

package/src/utils/Formaters.utils.ts

@@ -1,4 +1,5 @@
 import type { DayValue } from 'react-modern-calendar-datepicker'
+import { format, isValid, parseISO } from 'date-fns'
 
 interface FormatDateI {
   date: Date | string
@@ -134,6 +135,14 @@ interface FormatCurrencyI {
   value: string | number
 }
 
+export const formatISODate = (value: string) => {
+  const displayValue = isValid(parseISO(value))
+    ? format(value, 'MM/dd/yyyy')
+    : ''
+
+  return displayValue
+}
+
 export const formatCurrency = ({
   country = 'en-US',
   currrency = 'USD',