From ac71a49affa700ae2a8fbc0b7b00b4ca3677f224 Mon Sep 17 00:00:00 2001
From: scottrepreneur <me@stwoh.com>
Date: Tue, 2 Jan 2024 10:35:17 -0600
Subject: [PATCH] datepicker placeholder, tabs default

---
 package.json                                           |  2 +-
 .../forms/DatePicker/CustomDatePickerButton.tsx        |  8 ++++++--
 src/components/forms/DatePicker/DatePicker.tsx         | 10 +++++++++-
 src/stories/forms/DatePicker.stories.tsx               |  1 +
 src/theme/components/Tabs.ts                           |  3 +++
 5 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 856ff19..a3a619d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@raidguild/design-system",
-  "version": "0.5.7",
+  "version": "0.5.8",
   "license": "MIT",
   "author": "Raid Guild",
   "main": "./dist/src/index.js",
diff --git a/src/components/forms/DatePicker/CustomDatePickerButton.tsx b/src/components/forms/DatePicker/CustomDatePickerButton.tsx
index 7eb294d..28f0e66 100644
--- a/src/components/forms/DatePicker/CustomDatePickerButton.tsx
+++ b/src/components/forms/DatePicker/CustomDatePickerButton.tsx
@@ -5,6 +5,7 @@ export type CustomDatePickerButtonProps = ChakraButtonProps & {
   value?: React.ReactNode;
   onClick?: () => void;
   ref?: HTMLInputElement;
+  placeholder?: string;
 };
 
 export type CustomDatePickerButton = CustomDatePickerButtonProps & {
@@ -13,9 +14,12 @@ export type CustomDatePickerButton = CustomDatePickerButtonProps & {
 
 export const CustomDatePickerButton: React.FC<CustomDatePickerButtonProps> =
   forwardRef<CustomDatePickerButtonProps, 'button'>(
-    ({ value, onClick, variant = 'outline' }, ref) => (
+    (
+      { value, onClick, placeholder = 'Select Date', variant = 'outline' },
+      ref
+    ) => (
       <Button onClick={onClick} ref={ref} variant={variant}>
-        {value}
+        {value || placeholder}
       </Button>
     )
   );
diff --git a/src/components/forms/DatePicker/DatePicker.tsx b/src/components/forms/DatePicker/DatePicker.tsx
index 0321bd1..b0b0b4d 100644
--- a/src/components/forms/DatePicker/DatePicker.tsx
+++ b/src/components/forms/DatePicker/DatePicker.tsx
@@ -26,6 +26,7 @@ export type DatePickerProps = {
   localForm: Pick<UseFormReturn, 'control' | 'formState' | 'watch'>;
   registerOptions?: RegisterOptions;
   tooltip?: string;
+  placeholder?: string;
   variant?: string;
   spacing?: number | string;
 } & Omit<ReactDatePickerProps, 'onChange'>;
@@ -36,6 +37,8 @@ const DatePicker: React.FC<DatePickerProps> = ({
   localForm,
   registerOptions,
   tooltip,
+  placeholderText, // default prop from react-datepicker
+  placeholder, // match rest of inputs for consistency, takes priority
   variant = 'ghost',
   spacing,
   ...props
@@ -89,7 +92,12 @@ const DatePicker: React.FC<DatePickerProps> = ({
               {...props}
               {...field}
               selected={watch?.(name)}
-              customInput={<CustomDatePickerButton variant={variant} />}
+              customInput={
+                <CustomDatePickerButton
+                  variant={variant}
+                  placeholder={placeholder || placeholderText}
+                />
+              }
               ref={(ref) => {
                 field.ref({
                   focus: ref?.setFocus,
diff --git a/src/stories/forms/DatePicker.stories.tsx b/src/stories/forms/DatePicker.stories.tsx
index 642ecc8..65f8798 100644
--- a/src/stories/forms/DatePicker.stories.tsx
+++ b/src/stories/forms/DatePicker.stories.tsx
@@ -24,6 +24,7 @@ const DatePicker: StoryFn<typeof DatePickerComponent> = () => {
         <DatePickerComponent
           name='raidStartDate'
           localForm={localForm}
+          placeholder='Select a date'
           label='Raid Start Date'
           tooltip='The date the raid is expected to start'
         />
diff --git a/src/theme/components/Tabs.ts b/src/theme/components/Tabs.ts
index 953d4c1..d808250 100644
--- a/src/theme/components/Tabs.ts
+++ b/src/theme/components/Tabs.ts
@@ -25,5 +25,8 @@ const Tabs = {
       },
     },
   },
+  defaultProps: {
+    variant: 'default',
+  },
 };
 export default Tabs;