[MISC][RL] Update props documentation

src/time-range-picker/time-range-picker.tsx

@@ -8,7 +8,7 @@ import {
     TimeContainer,
     Wrapper,
 } from "./time-range-picker.styles";
-import { TimeRangeInputValue, TimeRangePickerProps } from "./types";
+import { TimeRangePickerProps, TimeRangePickerValue } from "./types";
 
 export const TimeRangePicker = ({
     id,
@@ -28,21 +28,21 @@ export const TimeRangePicker = ({
         useState<boolean>(false);
     const [showEndTimeSelector, setShowEndTimeSelector] =
         useState<boolean>(false);
-    const [startTimeVal, setStartTimeVal] = useState("");
-    const [endTimeVal, setEndTimeVal] = useState("");
+    const [startTimeVal, setStartTimeVal] = useState<string>("");
+    const [endTimeVal, setEndTimeVal] = useState<string>("");
 
     const nodeRef = useRef<HTMLDivElement>();
 
     // =============================================================================
     // EFFECTS
     // =============================================================================
-
     useEffect(() => {
         if (value) {
-            setStartTimeVal(value.startTime);
-            setEndTimeVal(value.endTime);
+            setStartTimeVal(value.start);
+            setEndTimeVal(value.end);
         }
     }, []);
+
     useEffect(() => {
         document.addEventListener("mousedown", handleMouseDownEvent);
         document.addEventListener("keyup", handleKeyUpEvent);
@@ -96,9 +96,9 @@ export const TimeRangePicker = ({
         setShowEndTimeSelector(true);
         setStartTimeVal(value);
 
-        const timeValue: TimeRangeInputValue = {
-            startTime: value,
-            endTime: endTimeVal,
+        const timeValue: TimeRangePickerValue = {
+            start: value,
+            end: endTimeVal,
         };
 
         onChange && onChange(timeValue);
@@ -112,9 +112,9 @@ export const TimeRangePicker = ({
             setShowStartTimeSelector(true);
         }
 
-        const timeValue: TimeRangeInputValue = {
-            startTime: startTimeVal,
-            endTime: value,
+        const timeValue: TimeRangePickerValue = {
+            start: startTimeVal,
+            end: value,
         };
 
         onChange && onChange(timeValue);

src/time-range-picker/types.ts

@@ -1,24 +1,38 @@
 export type TimeRangePickerFormat = "12hr" | "24hr";
 
-export interface TimeRangeInputValue {
-    startTime: string;
-    endTime: string;
+export interface TimeRangePickerValue {
+    start: string;
+    end: string;
 }
 
 export interface TimeRangePickerProps {
     // Standard HTML Attributes
     className?: string | undefined;
     id?: string | undefined;
     style?: React.CSSProperties | undefined;
-    readOnly?: boolean | undefined;
-    "data-testid"?: string | undefined;
 
     // Input-specific attributes
-
-    value?: TimeRangeInputValue | undefined;
+    "data-testid"?: string | undefined;
+    /**
+     * An object with `start` and `end` values. Can be an empty string or a
+     * string based format. 24 hour uses "hh:mm", while 12 hour uses "hh:mma"
+     */
+    value?: TimeRangePickerValue | undefined;
+    /**
+     * The time input format in `12hr` or `24hr`. Defaults to `24hr`
+     */
     format?: TimeRangePickerFormat | undefined;
     disabled?: boolean | undefined;
+    readOnly?: boolean | undefined;
     error?: boolean | undefined;
-    onChange?: ((value: TimeRangeInputValue) => void) | undefined;
+    /**
+     * Called when a selection is made. Returns an object with `start` and
+     * `end` values. Can be an empty string or a string based format.
+     * 24 hour uses "hh:mm", while 12 hour uses "hh:mma"
+     */
+    onChange?: ((value: TimeRangePickerValue) => void) | undefined;
+    /**
+     * Called when a defocus is made on the field
+     */
     onBlur?: (() => void) | undefined;
 }

src/timepicker/timepicker.tsx

@@ -11,7 +11,6 @@ export const Timepicker = ({
     readOnly = false,
     error,
     value,
-    defaultValue,
     placeholder,
     format = "24hr",
     onChange,
@@ -105,10 +104,9 @@ export const Timepicker = ({
         <InputSelectorElement
             onFocus={handleInputFocus}
             focused={showSelector}
-            readOnly={true}
+            readOnly
             placeholder={placeholder || getPlaceholderValue()}
             value={TimeHelper.formatValue(value, format)}
-            defaultValue={defaultValue}
             disabled={disabled}
             data-testid={
                 id ? `${id}-timepicker-selector` : "timepicker-selector"
@@ -129,7 +127,7 @@ export const Timepicker = ({
             <TimepickerDropdown
                 id={id}
                 show={showSelector}
-                value={value || defaultValue}
+                value={value}
                 format={format}
                 onCancel={handleSelectionDropdownCancel}
                 onChange={handleChange}

src/timepicker/types.ts

@@ -1,23 +1,34 @@
 export type TimepickerFormat = "12hr" | "24hr";
 
-export interface TimepickerProps extends React.AriaAttributes {
+export interface TimepickerProps {
     // Standard HTML Attributes
     className?: string | undefined;
     id?: string | undefined;
-    name?: string | undefined;
     style?: React.CSSProperties | undefined;
-    tabIndex?: number | undefined;
-    "data-testid"?: string | undefined;
 
     // Input-specific attributes
+    "data-testid"?: string | undefined;
     value?: string | undefined;
     placeholder?: string | undefined;
-    defaultValue?: string | undefined;
+    /**
+     * The time input format in `12hr` or `24hr`. Defaults to `24hr`
+     */
     format?: TimepickerFormat | undefined;
     disabled?: boolean | undefined;
     readOnly?: boolean | undefined;
     error?: boolean | undefined;
+    /**
+     * Called when the user makes a selection and clicks on the "Confirm" button
+     * in the time selection box. Returns a string based format.
+     * 24 hour uses "hh:mm", while 12 hour uses "hh:mma"
+     */
     onChange?: ((value: string) => void) | undefined;
+    /**
+     * Called when a defocus is made on the field
+     */
     onBlur?: (() => void) | undefined;
+    /**
+     * Called when the "Cancel" button is clicked
+     */
     onSelectionCancel?: (() => void) | undefined;
 }

stories/form/form-time-range-picker/form-time-range-picker.stories.mdx

@@ -28,16 +28,16 @@ import { Form } from "@lifesg/react-design-system/form";
     <Story name="TimeRangePicker">
         {() => {
             const [time1, setTime1] = useState({
-                startTime: "",
-                endTime: "",
+                start: "",
+                end: "",
             });
             const [time2, setTime2] = useState({
-                startTime: "",
-                endTime: "",
+                start: "",
+                end: "",
             });
             const [time3] = useState({
-                startTime: "12:00am",
-                endTime: "12:30am",
+                start: "12:00am",
+                end: "12:30am",
             });
             return (
                 <StoryContainer>
@@ -69,6 +69,31 @@ import { Form } from "@lifesg/react-design-system/form";
     </Story>
 </Canvas>
 
+<Heading3>12 hour format</Heading3>
+
+<Canvas>
+    <Story name="12 hour format">
+        {() => {
+            const [time, setTime] = useState({
+                start: "12:00am",
+                end: "",
+            });
+            return (
+                <StoryContainer>
+                    <Container>
+                        <Form.TimeRangePicker
+                            label="This is a time range picker"
+                            format="12hr"
+                            value={time}
+                            onChange={(value) => setTime(value)}
+                        />
+                    </Container>
+                </StoryContainer>
+            );
+        }}
+    </Story>
+</Canvas>
+
 <Heading3>Using the field as a standalone</Heading3>
 
 In the case that you require the timepicker field as a standalone, you can do this.

stories/form/form-time-range-picker/props-table.tsx

@@ -9,20 +9,14 @@ const DATA: ApiTableSectionProps[] = [
         attributes: [
             {
                 name: "value",
-                description: (
-                    <>
-                        The value of the time in string based format. 24 hour
-                        will be <code>hh:mm</code>, while 12 hour will be{" "}
-                        <code>hh:mma</code>
-                    </>
-                ),
-                propTypes: ["string"],
+                description: "The time range values in the format specified",
+                propTypes: ["TimeRangePickerValue"],
             },
             {
                 name: "format",
                 description: "The time input format",
-                propTypes: [`"12hr"`],
-                defaultValue: `"12hr"`,
+                propTypes: [`"12hr"`, `"24hr"`],
+                defaultValue: `"24hr"`,
             },
             {
                 name: "disabled",
@@ -69,30 +63,39 @@ const DATA: ApiTableSectionProps[] = [
             {
                 name: "onChange",
                 description:
-                    "Called when the user clicks on the 'Done' button in the time selection box. Returns the time value in the format specified",
-                propTypes: ["(value: TimeRangeInputValue) => void"],
+                    "Called when the user clicks on the 'Done' button in the time selection box. Returns the time range values in the format specified",
+                propTypes: ["(value: TimeRangePickerValue) => void"],
             },
             {
                 name: "onBlur",
-                description:
-                    "Called when a defocus happens. Any changes in the time selection box will not be applied",
+                description: "Called when a defocus happens",
                 propTypes: ["() => void"],
             },
         ],
     },
     {
-        name: "TimeRangeInputValue",
+        name: "TimeRangePickerValue",
         attributes: [
             {
-                name: "startTime",
-                description:
-                    "The selected start time value in the format specified",
+                name: "start",
+                description: (
+                    <>
+                        The selected start time value as an empty string or a
+                        string-based format. 24 hour uses <code>hh:mm</code>,
+                        while 12 hour uses <code>hh:mma</code>
+                    </>
+                ),
                 propTypes: ["string"],
             },
             {
-                name: "endTime",
-                description:
-                    "The selected end time value in the format specified",
+                name: "end",
+                description: (
+                    <>
+                        The selected start time value as an empty string or a
+                        string-based format. 24 hour uses <code>hh:mm</code>,
+                        while 12 hour uses <code>hh:mma</code>
+                    </>
+                ),
                 propTypes: ["string"],
             },
         ],

stories/form/form-timepicker/props-table.tsx

@@ -18,17 +18,6 @@ const DATA: ApiTableSectionProps[] = [
                 ),
                 propTypes: ["string"],
             },
-            {
-                name: "defaultValue",
-                description: (
-                    <>
-                        The default value of the time in string based format. 24
-                        hour will be <code>hh:mm</code>, while 12 hour will be{" "}
-                        <code>hh:mma</code>
-                    </>
-                ),
-                propTypes: ["string"],
-            },
             {
                 name: "placeholder",
                 description: (
@@ -71,21 +60,11 @@ const DATA: ApiTableSectionProps[] = [
                 description: "The unique identifier of the component",
                 propTypes: ["string"],
             },
-            {
-                name: "name",
-                description: "The name of the component",
-                propTypes: ["string"],
-            },
             {
                 name: "style",
                 description: "Allows for inline styling of the component",
                 propTypes: ["React.CSSProperties"],
             },
-            {
-                name: "tabIndex",
-                description: "Specifies the tab order of the component",
-                propTypes: ["number"],
-            },
             {
                 name: "data-testid",
                 description: "The test identifier of the component",