From 3227033237d774602c7219a994a191b1aeec0e6c Mon Sep 17 00:00:00 2001
From: william garrity <wgarrity@mieweb.com>
Date: Fri, 30 Jan 2026 21:42:27 -0500
Subject: [PATCH 1/5] fix(BusinessHoursEditor): add default args for boolean
 controls

- Add meta.args with defaults for disabled, showDescription, use24Hour, weekStartsOn, addHoursLabel
- Remove hardcoded showDescription from wrapper
- Clean up redundant args in individual stories
---
 .../BusinessHoursEditor.stories.tsx           | 22 +++++++------------
 1 file changed, 8 insertions(+), 14 deletions(-)

diff --git a/src/components/BusinessHoursEditor/BusinessHoursEditor.stories.tsx b/src/components/BusinessHoursEditor/BusinessHoursEditor.stories.tsx
index ecf717af..56aa16ed 100644
--- a/src/components/BusinessHoursEditor/BusinessHoursEditor.stories.tsx
+++ b/src/components/BusinessHoursEditor/BusinessHoursEditor.stories.tsx
@@ -44,6 +44,13 @@ const meta: Meta<typeof BusinessHoursEditor> = {
       description: 'Label for add hours button',
     },
   },
+  args: {
+    disabled: false,
+    showDescription: true,
+    use24Hour: false,
+    weekStartsOn: 0,
+    addHoursLabel: 'Add Hours',
+  },
 };
 
 export default meta;
@@ -59,12 +66,7 @@ function BusinessHoursEditorWrapper(
 
   return (
     <div className="max-w-2xl">
-      <BusinessHoursEditor
-        value={schedule}
-        onChange={setSchedule}
-        showDescription={true}
-        {...props}
-      />
+      <BusinessHoursEditor value={schedule} onChange={setSchedule} {...props} />
 
       <div className="mt-6 rounded-lg bg-gray-100 p-4 dark:bg-gray-800">
         <h4 className="mb-2 text-sm font-medium">Current Schedule:</h4>
@@ -78,18 +80,12 @@ function BusinessHoursEditorWrapper(
 
 export const Default: Story = {
   render: (args) => <BusinessHoursEditorWrapper {...args} />,
-  args: {
-    showDescription: true,
-    weekStartsOn: 0,
-    addHoursLabel: 'Add Hours',
-  },
 };
 
 export const Empty: Story = {
   render: (args) => <BusinessHoursEditorWrapper {...args} />,
   args: {
     value: [],
-    showDescription: true,
   },
 };
 
@@ -97,7 +93,6 @@ export const WeekdaysOnly: Story = {
   render: (args) => <BusinessHoursEditorWrapper {...args} />,
   args: {
     value: createWeekdaySchedule('08:00', '18:00'),
-    showDescription: true,
   },
 };
 
@@ -114,7 +109,6 @@ export const MondayStart: Story = {
   args: {
     value: createDefaultSchedule(),
     weekStartsOn: 1,
-    showDescription: true,
   },
 };
 

From faaeb2d495dbf026cd9c50309e63619990881b25 Mon Sep 17 00:00:00 2001
From: william garrity <wgarrity@mieweb.com>
Date: Fri, 30 Jan 2026 21:58:09 -0500
Subject: [PATCH 2/5] fix(BusinessHoursEditor): fix Storybook controls and hide
 non-functional props

- Hide 'value', 'onChange', 'className' controls from Storybook docs
  - Clicking 'Set object' on value control caused 'schedule.find is not a function'
    error because Storybook defaults to {} (object) instead of [] (array)
  - These props are managed by the interactive wrapper component

- Hide 'use24Hour' control - prop exists in interface but is not implemented
  - Component uses native <input type='time'> which uses browser locale
  - Prop is destructured as _use24Hour (intentionally unused)
  - Can be implemented in future if 24-hour format support is needed

- Add default args for remaining controls (disabled, showDescription, weekStartsOn, addHoursLabel)
  - Ensures boolean controls start with actual values instead of undefined

- Add useEffect to sync schedule state when props.value changes from Storybook controls
---
 .../BusinessHoursEditor.stories.tsx           | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/components/BusinessHoursEditor/BusinessHoursEditor.stories.tsx b/src/components/BusinessHoursEditor/BusinessHoursEditor.stories.tsx
index 56aa16ed..02fa5a71 100644
--- a/src/components/BusinessHoursEditor/BusinessHoursEditor.stories.tsx
+++ b/src/components/BusinessHoursEditor/BusinessHoursEditor.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import {
   BusinessHoursEditor,
   DaySchedule,
@@ -22,6 +22,13 @@ const meta: Meta<typeof BusinessHoursEditor> = {
     },
   },
   argTypes: {
+    // Hide props that are managed by the demo wrapper
+    value: { table: { disable: true } },
+    onChange: { table: { disable: true } },
+    className: { table: { disable: true } },
+    // use24Hour is not implemented in the component (native time inputs use browser locale)
+    use24Hour: { table: { disable: true } },
+
     disabled: {
       control: 'boolean',
       description: 'Whether the editor is disabled',
@@ -30,10 +37,6 @@ const meta: Meta<typeof BusinessHoursEditor> = {
       control: 'boolean',
       description: 'Whether to show description field for each time slot',
     },
-    use24Hour: {
-      control: 'boolean',
-      description: 'Use 24-hour format',
-    },
     weekStartsOn: {
       control: 'radio',
       options: [0, 1],
@@ -47,7 +50,6 @@ const meta: Meta<typeof BusinessHoursEditor> = {
   args: {
     disabled: false,
     showDescription: true,
-    use24Hour: false,
     weekStartsOn: 0,
     addHoursLabel: 'Add Hours',
   },
@@ -64,6 +66,13 @@ function BusinessHoursEditorWrapper(
     props.value || createDefaultSchedule()
   );
 
+  // Sync schedule state when props.value changes (e.g., from Storybook controls)
+  useEffect(() => {
+    if (props.value !== undefined) {
+      setSchedule(props.value);
+    }
+  }, [props.value]);
+
   return (
     <div className="max-w-2xl">
       <BusinessHoursEditor value={schedule} onChange={setSchedule} {...props} />

From 2c7093104b55c664a5eec718bb26289ad5239b83 Mon Sep 17 00:00:00 2001
From: william garrity <wgarrity@mieweb.com>
Date: Fri, 30 Jan 2026 22:07:59 -0500
Subject: [PATCH 3/5] fix: destructure value/onChange to prevent props override

Address Copilot review feedback: spread props was overriding controlled state.
Now destructure value and onChange from props before spreading restProps,
ensuring the wrapper's controlled state is always used.
---
 .../BusinessHoursEditor.stories.tsx               | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/BusinessHoursEditor/BusinessHoursEditor.stories.tsx b/src/components/BusinessHoursEditor/BusinessHoursEditor.stories.tsx
index 02fa5a71..9b269a30 100644
--- a/src/components/BusinessHoursEditor/BusinessHoursEditor.stories.tsx
+++ b/src/components/BusinessHoursEditor/BusinessHoursEditor.stories.tsx
@@ -62,20 +62,23 @@ type Story = StoryObj<typeof BusinessHoursEditor>;
 function BusinessHoursEditorWrapper(
   props: Partial<React.ComponentProps<typeof BusinessHoursEditor>>
 ) {
+  // Destructure value and onChange to prevent them from overriding controlled state
+  const { value: initialValue, onChange: _onChange, ...restProps } = props;
+
   const [schedule, setSchedule] = useState<DaySchedule[]>(
-    props.value || createDefaultSchedule()
+    initialValue || createDefaultSchedule()
   );
 
-  // Sync schedule state when props.value changes (e.g., from Storybook controls)
+  // Sync schedule state when initialValue changes (e.g., from Storybook controls)
   useEffect(() => {
-    if (props.value !== undefined) {
-      setSchedule(props.value);
+    if (initialValue !== undefined) {
+      setSchedule(initialValue);
     }
-  }, [props.value]);
+  }, [initialValue]);
 
   return (
     <div className="max-w-2xl">
-      <BusinessHoursEditor value={schedule} onChange={setSchedule} {...props} />
+      <BusinessHoursEditor {...restProps} value={schedule} onChange={setSchedule} />
 
       <div className="mt-6 rounded-lg bg-gray-100 p-4 dark:bg-gray-800">
         <h4 className="mb-2 text-sm font-medium">Current Schedule:</h4>

From 38231248816f504e69e785fddd8c54568ad37d39 Mon Sep 17 00:00:00 2001
From: william garrity <wgarrity@mieweb.com>
Date: Fri, 30 Jan 2026 22:13:34 -0500
Subject: [PATCH 4/5] fix: use underscore to satisfy no-unused-vars lint rule

---
 .../BusinessHoursEditor.stories.tsx                    | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/BusinessHoursEditor/BusinessHoursEditor.stories.tsx b/src/components/BusinessHoursEditor/BusinessHoursEditor.stories.tsx
index 9b269a30..d3580615 100644
--- a/src/components/BusinessHoursEditor/BusinessHoursEditor.stories.tsx
+++ b/src/components/BusinessHoursEditor/BusinessHoursEditor.stories.tsx
@@ -59,11 +59,11 @@ export default meta;
 type Story = StoryObj<typeof BusinessHoursEditor>;
 
 // Interactive wrapper
-function BusinessHoursEditorWrapper(
-  props: Partial<React.ComponentProps<typeof BusinessHoursEditor>>
-) {
-  // Destructure value and onChange to prevent them from overriding controlled state
-  const { value: initialValue, onChange: _onChange, ...restProps } = props;
+function BusinessHoursEditorWrapper({
+  value: initialValue,
+  onChange: _,
+  ...restProps
+}: Partial<React.ComponentProps<typeof BusinessHoursEditor>>) {
 
   const [schedule, setSchedule] = useState<DaySchedule[]>(
     initialValue || createDefaultSchedule()

From 81cf7501717ae2b27e16e99270ec1f961ef3a420 Mon Sep 17 00:00:00 2001
From: william garrity <wgarrity@mieweb.com>
Date: Fri, 30 Jan 2026 22:18:57 -0500
Subject: [PATCH 5/5] style: apply Prettier formatting

---
 .../BusinessHoursEditor/BusinessHoursEditor.stories.tsx    | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/BusinessHoursEditor/BusinessHoursEditor.stories.tsx b/src/components/BusinessHoursEditor/BusinessHoursEditor.stories.tsx
index d3580615..cfffb420 100644
--- a/src/components/BusinessHoursEditor/BusinessHoursEditor.stories.tsx
+++ b/src/components/BusinessHoursEditor/BusinessHoursEditor.stories.tsx
@@ -64,7 +64,6 @@ function BusinessHoursEditorWrapper({
   onChange: _,
   ...restProps
 }: Partial<React.ComponentProps<typeof BusinessHoursEditor>>) {
-
   const [schedule, setSchedule] = useState<DaySchedule[]>(
     initialValue || createDefaultSchedule()
   );
@@ -78,7 +77,11 @@ function BusinessHoursEditorWrapper({
 
   return (
     <div className="max-w-2xl">
-      <BusinessHoursEditor {...restProps} value={schedule} onChange={setSchedule} />
+      <BusinessHoursEditor
+        {...restProps}
+        value={schedule}
+        onChange={setSchedule}
+      />
 
       <div className="mt-6 rounded-lg bg-gray-100 p-4 dark:bg-gray-800">
         <h4 className="mb-2 text-sm font-medium">Current Schedule:</h4>