chore: Adding date values to date component pages for comparison (#3274)

Author: dpitcock

pages/date-input/simple.page.tsx

@@ -1,24 +1,54 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 
-import { Box } from '~components';
-import DateInput from '~components/date-input';
+import { Box, Checkbox, SpaceBetween } from '~components';
+import DateInput, { DateInputProps } from '~components/date-input';
+
+import { AppContextType } from '../app/app-context';
+import AppContext from '../app/app-context';
+
+export type DateInputDemoContext = React.Context<
+  AppContextType<{
+    monthOnly?: boolean;
+    hasValue?: boolean;
+  }>
+>;
 
 export default function DateInputScenario() {
-  const [value, setValue] = useState('');
+  const { urlParams, setUrlParams } = useContext(AppContext as DateInputDemoContext);
+  const initValue = '2025-02-14';
+  const hasValue = urlParams.hasValue ?? false;
+  const [value, setValue] = useState<DateInputProps['value']>('');
+
+  useEffect(() => {
+    if (hasValue) {
+      setValue(initValue);
+    } else {
+      setValue('');
+    }
+  }, [hasValue]);
 
   return (
     <Box padding="l">
-      <h1>Date input</h1>
-      <DateInput
-        className="testing-date-input"
-        name="date"
-        ariaLabel="Enter the date in YYYY/MM/DD"
-        placeholder="YYYY/MM/DD"
-        onChange={event => setValue(event.detail.value)}
-        value={value}
-      />
+      <SpaceBetween direction="vertical" size="m">
+        <h1>Date input</h1>
+        <SpaceBetween direction="horizontal" size="s">
+          <Checkbox checked={hasValue} onChange={({ detail }) => setUrlParams({ hasValue: detail.checked })}>
+            Has initial value
+          </Checkbox>
+        </SpaceBetween>
+        <DateInput
+          className="testing-date-input"
+          name="date"
+          ariaLabel="Enter the date in YYYY/MM/DD"
+          placeholder="YYYY/MM/DD"
+          onChange={e => setValue(e.detail.value)}
+          value={value}
+        />
+        <b>Raw value</b>
+        <pre>{JSON.stringify(value, undefined, 2)}</pre>
+      </SpaceBetween>
     </Box>
   );
 }

pages/date-picker/simple.page.tsx

@@ -1,35 +1,75 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 
-import { Box, DatePicker, FormField, Link } from '~components';
+import { Box, Checkbox, DatePicker, DatePickerProps, FormField, Link, SpaceBetween } from '~components';
 
+import { AppContextType } from '../app/app-context';
+import AppContext from '../app/app-context';
 import i18nStrings from './i18n-strings';
 
-export default function DatePickerScenario() {
-  const [value, setValue] = useState('');
+export type DatePickerDemoContext = React.Context<
+  AppContextType<{
+    monthOnly?: boolean;
+    hasValue?: boolean;
+  }>
+>;
+
+export const dateRangePickerDemoDefaults = {
+  monthOnly: false,
+  hasValue: false,
+};
+
+export default function DateInputScenario() {
+  const { urlParams, setUrlParams } = useContext(AppContext as DatePickerDemoContext);
+  const monthOnly = urlParams.monthOnly ?? dateRangePickerDemoDefaults.monthOnly;
+  const hasValue = urlParams.hasValue ?? dateRangePickerDemoDefaults.hasValue;
+
+  const [value, setValue] = useState<DatePickerProps['value']>('');
+
+  useEffect(() => {
+    const initValue = monthOnly ? '2025-02' : '2025-02-00';
+    if (hasValue) {
+      setValue(initValue);
+    } else {
+      setValue('');
+    }
+  }, [hasValue, monthOnly]);
 
   return (
     <Box padding="s">
-      <h1>Date picker simple version</h1>
-      <Link id="focus-dismiss-helper">Focusable element before the date picker</Link>
-      <br />
-      <FormField label="Certificate expiry date" constraintText="Use YYYY/MM/DD format.">
-        <DatePicker
-          value={value}
-          name={'date-picker-name'}
-          locale="en-GB"
-          i18nStrings={i18nStrings}
-          openCalendarAriaLabel={selectedDate =>
-            'Choose certificate expiry date' + (selectedDate ? `, selected date is ${selectedDate}` : '')
-          }
-          placeholder={'YYYY/MM/DD'}
-          onChange={event => setValue(event.detail.value)}
-        />
-      </FormField>
-      <br />
-      <br />
-      <Link id="focusable-element-after-date-picker">Focusable element after the date picker</Link>
+      <SpaceBetween direction="vertical" size="m">
+        <h1>Date picker simple version</h1>
+        <SpaceBetween direction="horizontal" size="s">
+          <Checkbox checked={monthOnly} onChange={({ detail }) => setUrlParams({ monthOnly: detail.checked })}>
+            Month-only
+          </Checkbox>
+          <Checkbox checked={hasValue} onChange={({ detail }) => setUrlParams({ hasValue: detail.checked })}>
+            Has initial value
+          </Checkbox>
+        </SpaceBetween>
+        <Link id="focus-dismiss-helper">Focusable element before the date picker</Link>
+        <br />
+        <FormField label="Certificate expiry date" constraintText={`Use YYYY/MM${monthOnly ? '' : '/DD'} format.`}>
+          <DatePicker
+            value={value}
+            name={'date-picker-name'}
+            granularity={monthOnly ? 'month' : 'day'}
+            locale="en-GB"
+            i18nStrings={i18nStrings}
+            openCalendarAriaLabel={selectedDate =>
+              'Choose certificate expiry date' + (selectedDate ? `, selected date is ${selectedDate}` : '')
+            }
+            placeholder={monthOnly ? 'YYYY/MM' : 'YYYY/MM/DD'}
+            onChange={e => setValue(e.detail.value)}
+          />
+        </FormField>
+        <br />
+        <br />
+        <Link id="focusable-element-after-date-picker">Focusable element after the date picker</Link>
+        <b>Raw value</b>
+        <pre>{JSON.stringify(value, undefined, 2)}</pre>
+      </SpaceBetween>
     </Box>
   );
 }