254: Enhance LabelValue

src/App.css

@@ -1,3 +1,19 @@
+.playground-section {
+    background-color: lightgrey;
+    margin: 10px;
+    padding: 20px;
+}
+
+.playground-section > h1,
+.playground-section > h2 {
+    text-align: left;
+    justify-self: unset;
+}
+
+.playground-section .label-value-container {
+    border: 1px solid black;
+    padding: 10px;
+}
 .App {
     text-align: center;
 }

src/__tests__/labelValue.test.tsx

@@ -0,0 +1,116 @@
+//to run this test: npm test -- src/__tests__/labelValue.test.tsx
+
+import { render, screen } from '@testing-library/react'
+import { StoreContext } from '../components/store'
+import LabelValue, { LabelValueProps } from '../components/label_value'
+
+// Mock StoreContext data
+const mockStoreContext = {
+    docId: 'TestDocID123',
+    attachments: {},
+    data: { location: { state: 'WA', zip_code: '99354' } },
+    metadata: {},
+}
+
+describe('LabelValue Component', () => {
+    // Helper function to render the component with StoreContext provider
+    const renderWithContext = ({
+        label,
+        value,
+        required = false,
+        prefix = '',
+        suffix = '',
+        decimalPlaces = 1,
+        type = 'string',
+    }: LabelValueProps) => {
+        return render(
+            <StoreContext.Provider value={mockStoreContext as any}>
+                <LabelValue
+                    label={label}
+                    value={value}
+                    required={required}
+                    prefix={prefix}
+                    suffix={suffix}
+                    decimalPlaces={decimalPlaces}
+                    type={type}
+                />
+            </StoreContext.Provider>,
+        )
+    }
+
+    test('Label is rendered when label param is present', () => {
+        renderWithContext({
+            label: 'Label Text',
+            type: 'string',
+            value: 'test this value',
+        })
+        expect(screen.getByText(/label text/i)).toBeInTheDocument()
+    })
+
+    test('Value is rendered when value param is present', () => {
+        renderWithContext({
+            label: 'Label Text',
+            type: 'string',
+            value: 'test this value',
+        })
+        expect(screen.getByText(/test this value/i)).toBeInTheDocument()
+    })
+
+    test('Number value is rendered correctly with decimal places', () => {
+        renderWithContext({
+            label: 'Label Numeric',
+            type: 'number',
+            value: 123.456,
+            decimalPlaces: 2,
+        })
+        expect(screen.getByText(/123.46/i)).toBeInTheDocument()
+    })
+
+    test('Value with prefix and suffix is rendered correctly', () => {
+        renderWithContext({
+            label: 'Label with Prefix and Suffix',
+            type: 'string',
+            value: '50',
+            prefix: '$',
+            suffix: ' USD',
+        })
+        expect(screen.getByText(/\$50 USD/i)).toBeInTheDocument()
+    })
+
+    test('Should render date value correctly', () => {
+        renderWithContext({
+            label: 'Label Date',
+            type: 'date',
+            value: '2025-02-14',
+        })
+        expect(screen.getByText(/february 14, 2025/i)).toBeInTheDocument()
+    })
+
+    test('Should not render when required is false and value is empty', () => {
+        const { container } = renderWithContext({
+            label: 'Label Text',
+            type: 'string',
+            value: '',
+            required: false,
+        })
+        expect(container.firstChild).toBeNull()
+    })
+
+    test('Should not render when value is empty', () => {
+        const { container } = renderWithContext({
+            label: 'Label Text',
+            type: 'string',
+        })
+        expect(container.firstChild).toBeNull()
+    })
+
+    test('Should render when required is true and value is empty', () => {
+        renderWithContext({
+            label: 'Label Text',
+            type: 'string',
+            value: '',
+            required: true,
+        })
+        expect(screen.getByText(/label text/i)).toBeInTheDocument()
+    })
+})

src/components/label_value.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import DateStr from './date_str'
 
 /**
  * LabelValueProps defines the props for the LabelValue component.
@@ -8,12 +9,15 @@ import React from 'react'
  * @property {string} value - The value to display.
  * @property {boolean} [required=false] - A flag to determine if the label-value pair should be rendered.
  */
-interface LabelValueProps {
+export interface LabelValueProps {
     label?: string
-    value: string
+    value?: string | number | boolean
     required?: boolean
     prefix?: string
     suffix?: string
+    type: 'string' | 'number' | 'date'
+    decimalPlaces?: number
+    dateOptions?: Intl.DateTimeFormatOptions
 }
 
 /**
@@ -36,17 +40,55 @@ const LabelValue: React.FC<LabelValueProps> = ({
     required = false,
     prefix = '',
     suffix = '',
+    decimalPlaces = 1,
+    type = 'string',
+    dateOptions,
 }: LabelValueProps): JSX.Element | null => {
+    //If type is "number" and decimalPlaces, round the value
+    if (type === 'number' && typeof value === 'number') {
+        //check that value is actually a number
+        //Need to do this because TS not currently configured for MDX files and there's a chance that
+        //someone could try to .toFixed("some string") and cause an error
+        if (
+            typeof value === 'number' &&
+            !isNaN(value) &&
+            typeof decimalPlaces === 'number' &&
+            !isNaN(decimalPlaces)
+        ) {
+            value = value.toFixed(decimalPlaces)
+        } else {
+            console.log(
+                'Make sure that your value and decimalPlaces params are actually numbers.',
+            )
+        }
+    } else if (type === 'number' && typeof value !== 'number') {
+        console.log(
+            `You are trying to set the type of a non-number value to 'number'. Value is : ${value} and typeof value is: ${typeof value}`,
+        )
+    }
+
     return required || value ? (
         label ? (
             <div className="top-bottom-padding">
                 <span>{label}: </span>
-                <strong>{value}</strong>
+                <strong>
+                    {prefix}
+                    {type === 'date' && typeof value === 'string' ? (
+                        <DateStr date={value} options={dateOptions} />
+                    ) : (
+                        value
+                    )}
+                    {suffix}
+                </strong>
             </div>
         ) : (
             <>
                 {prefix}
-                {value}
+                {type === 'date' && typeof value === 'string' ? (
+                    <DateStr date={value} options={dateOptions} />
+                ) : (
+                    value
+                )}
                 {suffix}
             </>
         )

src/components/label_value_wrapper.tsx

@@ -4,12 +4,16 @@ import { get } from 'lodash'
 import LabelValue from './label_value'
 
 interface LabelValueWrapperProps {
-    label: string
-    path: string
+    label?: string
+    path?: string
     prefix?: string
     suffix?: string
     required?: boolean
     parent?: any
+    value?: string | number | boolean
+    type?: 'string' | 'number' | 'date'
+    decimalPlaces?: number
+    dateOptions?: Intl.DateTimeFormatOptions
 }
 
 /**
@@ -40,6 +44,9 @@ const LabelValueWrapper: React.FC<LabelValueWrapperProps> = ({
     suffix,
     parent = null,
     required = false,
+    decimalPlaces,
+    type = 'string',
+    dateOptions,
 }: LabelValueWrapperProps): JSX.Element | null => {
     const [parentData, _] = useState<any>(parent?.data_)
     return (
@@ -55,6 +62,9 @@ const LabelValueWrapper: React.FC<LabelValueWrapperProps> = ({
                         required={required}
                         prefix={prefix}
                         suffix={suffix}
+                        decimalPlaces={decimalPlaces}
+                        type={type}
+                        dateOptions={dateOptions}
                     />
                 )
             }}

src/templates/LabelValueExamples/DateLabelValues.mdx

@@ -0,0 +1,29 @@
+import DateInput from '../../components/date_input_wrapper'
+import LabelValue from '../../components/label_value_wrapper'
+
+<div className="playground-section">
+        <h1>Date Value Examples</h1>
+        <p> Enter a date value to be retrieved by the LabelValues below</p>
+
+        <DateInput label="Date Input" path="label-value-test-date-input" />
+
+        <h2>Date LabelValue with date type prop:</h2>
+        <code>
+            `<LabelValue label="Date Value" path="label-value-test-date-input" type="date" />`
+        </code>
+        <div className="label-value-container">
+            <LabelValue label="Date Value" path="label-value-test-date-input" type="date" />
+        </div>
+
+        <h2>Date LabelValue without date type:</h2>
+        <code>
+            `<LabelValue label="Date Value" path="label-value-test-date-input" />`
+        </code>
+        <div className="label-value-container">
+            <LabelValue
+                label="Date Value"
+                path="label-value-test-date-input"
+            />
+        </div>
+</div>
+

src/templates/LabelValueExamples/LabelValueExamplesStyles.css

@@ -0,0 +1,16 @@
+.label-value-section {
+    position: relative;
+}
+
+.label-value-section nav {
+    position: sticky;
+    top: 0;
+    background-color: rgba(231, 231, 231);
+    z-index: 1;
+    padding: 10px 0px;
+}
+
+.label-value-section ul {
+    display: flex;
+    flex-direction: column;
+}

src/templates/LabelValueExamples/NumberLabelValues.mdx

@@ -0,0 +1,32 @@
+import NumberInput from '../../components/number_input_wrapper';
+import LabelValue from '../../components/label_value_wrapper';
+
+<div className="playground-section">
+        <h1>Number Value Examples</h1>
+        <p> Enter a number value to be retrieved by the LabelValues below</p>
+        <NumberInput label="Number Value" path="label-value-test-number-input" />
+
+        <h2>LabelValue with number type prop:</h2>
+        <p>Default is to round to 1 decimal place.</p>
+        <code>
+            `<LabelValue label="Number Value" path="label-value-test-number-input" type="number" />`
+        </code>
+        <div className="label-value-container">
+            <LabelValue label="Number Value" path="label-value-test-number-input" type="number" />
+        </div>
+
+        <h2>LabelValue with number type prop + decimal places + prefix + suffix:</h2>
+        <code>
+            `<LabelValue label="Number Value with Decimals and Prefix and Suffix" path="label-value-test-number-input" type="number" decimalPlaces={2} prefix="$" suffix=" per day"/>`
+        </code>
+        <div className="label-value-container">
+            <LabelValue
+                label="Number Value with Prefix and Suffix"
+                path="label-value-test-number-input"
+                type="number"
+                decimalPlaces={2}
+                prefix="$"
+                suffix=" per day"
+            />
+        </div>
+</div>

src/templates/LabelValueExamples/OtherExamples.mdx

@@ -0,0 +1,56 @@
+import LabelValue from '../../components/label_value_wrapper';
+import NumberInput from '../../components/number_input_wrapper';
+import TextInput from '../../components/text_input_wrapper';
+
+<div className="playground-section">
+        <h1>Other Examples</h1>
+
+        <p> Enter a text value to be retrieved by the LabelValue components below</p>
+
+        <TextInput path="label-value-other-text-input" />
+
+        <h2>LabelValue with no props:</h2>
+        <code>
+            `<LabelValue />`
+        </code>
+        <div className="label-value-container">
+            <LabelValue />
+        </div>
+
+        <h2>
+            LabelValue with number type prop and string value (Will console.log an error
+            message)
+        </h2>
+        <code>
+            `<LabelValue label="String Value as Number" path="label-value-other-text-input" type="number" decimalPlaces={2}/>`
+        </code>
+        <div className="label-value-container">
+            <LabelValue
+                label="String Value as Number"
+                path="label-value-other-text-input"
+                type="number"
+                decimalPlaces={2}
+            />
+        </div>
+
+        <p style={{paddingTop: `10px`}}> 
+        Enter a number value to be retrieved by the LabelValues below
+        </p>
+
+        <NumberInput label="Other Number Value:" path="label-value-other-number-input" />
+
+        <h2>
+            LabelValue with string type prop and number value (Will show the string value of number with no rounding)
+        </h2>
+        <code>
+            `<LabelValue label="String Type" path="label-value-other-number-input" type="string" decimalPlaces={2}/>`
+        </code>
+        <div className="label-value-container">
+            <LabelValue
+                label="String Type"
+                path="label-value-other-number-input"
+                type="string"
+                decimalPlaces={2}
+            />
+        </div>
+</div>