(#58) Fix DatePicker Calendar text color

thebbodek · Dec 7, 2023 · 2334526 · 2334526
1 parent ce5ab7e
commit 2334526
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 36 deletions.
diff --git a/src/core/components/Calendar/DatePickerCalendar/DatePickerCalendar.stories.tsx b/src/core/components/Calendar/DatePickerCalendar/DatePickerCalendar.stories.tsx
@@ -23,7 +23,6 @@ export const Default = () => {
     setPeriodDates(periodDates!);
   };
 
-  console.log(periodDates);
   return (
     <div className = {"w-[500px] border rounded-3xl py-6"}>
       <DatePickerCalendar

diff --git a/src/core/components/Calendar/ScheduleCalendar/ScheduleCalendar.stories.tsx b/src/core/components/Calendar/ScheduleCalendar/ScheduleCalendar.stories.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Meta } from "@storybook/react";
 
 import ScheduleCalendar from "@/core/components/Calendar/ScheduleCalendar";
@@ -17,12 +17,11 @@ export const Default = () => {
   const onDateClick = (date: string, value: MarkedDatesItemsProps[]) => {
     setSelectedDate(date);
     setMarkedDatesValue(value);
-    console.log(date);
-    console.log(value);
   };
 
-  console.log(selectedDate);
-  console.log(markedDateValus);
+  useEffect(() => {
+    console.log(selectedDate, markedDateValus);
+  }, [ selectedDate, markedDateValus ]);
 
   return (
     <div className = {"w-screen"}>

diff --git a/...ponents/DatePicker/DatePicker.stories.tsx → ...putDatePicker/InputDatePicker.stories.tsx b/...ponents/DatePicker/DatePicker.stories.tsx → ...putDatePicker/InputDatePicker.stories.tsx
@@ -3,10 +3,9 @@ import { Meta } from "@storybook/react";
 
 import { PeriodDates } from "@/core/components/Calendar/DatePickerCalendar/types/CalendarComponentProps";
 import InputDatePicker from "./index";
-import Button from "../Button";
 
 const meta = {
-  title: "core/InputDatePicker",
+  title: "core/Input/InputDatePicker",
   component: InputDatePicker,
 } satisfies Meta<typeof InputDatePicker>;
 
@@ -15,7 +14,6 @@ export default meta;
 export const Default = () => {
   const [ isOpen, setIsOpen ] = useState<boolean>(false);
   const [ selectedDate, setSelectedDate ] = useState<string>("");
-  const [ isDisabled, setIsDisabled ] = useState<boolean>(false);
   const [ periodDates, setPeriodDates ] = useState<PeriodDates>({
     startDate: "",
     endDate: "",
@@ -24,8 +22,6 @@ export const Default = () => {
   const onDateClick = (date: string, periodDates: PeriodDates) => {
     setSelectedDate(date);
     setPeriodDates(periodDates!);
-    console.log(date);
-    console.log(periodDates);
   };
 
   const onCalendarToggle = () => {
@@ -36,25 +32,8 @@ export const Default = () => {
     setIsOpen(false);
   };
 
-  const onDisabledClick = () => {
-    setIsDisabled(prev => !prev);
-    setPeriodDates({
-      startDate: "",
-      endDate: "",
-    });
-    setSelectedDate("");
-  };
-
   return (
     <div className = "flex gap-2">
-      <Button
-        content = "Disabled"
-        size = "h-60"
-        backgroundColor = {isDisabled ? "gray-03" : "primary-03"}
-        color = "white"
-        className = "px-6"
-        onClick = {onDisabledClick}
-      />
       <div className = "w-[500px]">
         <InputDatePicker
           isOpen = {isOpen}
@@ -64,7 +43,6 @@ export const Default = () => {
           onDateClick = {onDateClick}
           onClose = {onCalendarClose}
           useTab = {true}
-          disabled = {isDisabled}
         />
       </div>
     </div>

diff --git a/src/core/components/DatePicker/index.tsx → ...omponents/Input/InputDatePicker/index.tsx b/src/core/components/DatePicker/index.tsx → ...omponents/Input/InputDatePicker/index.tsx
@@ -3,11 +3,11 @@ import dayjs from "dayjs";
 import clsx from "clsx";
 import { CalendarBlank } from "@phosphor-icons/react";
 
-import DatePickerCalendar from "../Calendar/DatePickerCalendar";
-import Typography from "../Typography";
-import Divider from "../Divider";
-import Button from "../Button";
-import GeneralTab from "../Tab/GeneralTab/GeneralTab";
+import DatePickerCalendar from "../../Calendar/DatePickerCalendar";
+import Typography from "../../Typography";
+import Divider from "../../Divider";
+import Button from "../../Button";
+import GeneralTab from "../../Tab/GeneralTab/GeneralTab";
 import { InputDatePickerProps } from "./types";
 import useClickOutside from "@/hooks/useClickOutSide";
 

diff --git a/...core/components/DatePicker/types/index.ts → ...ents/Input/InputDatePicker/types/index.ts b/...core/components/DatePicker/types/index.ts → ...ents/Input/InputDatePicker/types/index.ts
diff --git a/src/core/components/Input/InputSelect/InputSelect.stories.tsx b/src/core/components/Input/InputSelect/InputSelect.stories.tsx
@@ -30,7 +30,6 @@ export const Default = (props: InputSelectProps) => {
   const options = data.map(food => <option key = {food} value = {food}>{food}</option>);
   const onChangeHandler = (e: React.ChangeEvent<HTMLSelectElement>) => {
     setCurrentValue(e.target.value);
-    console.log(currentValue);
   };
 
   return (

diff --git a/src/index.ts b/src/index.ts
@@ -2,7 +2,7 @@ export { default as Button } from "@/core/components/Button";
 export { default as BasicCalendar } from "@/core/components/Calendar/BasicCalendar";
 export { default as DatePickerCalendar } from "@/core/components/Calendar/DatePickerCalendar";
 export { default as ScheduleCalendar } from "@/core/components/Calendar/ScheduleCalendar";
-export { default as InputDatePicker } from "@/core/components/DatePicker";
+export { default as InputDatePicker } from "@/core/components/Input/InputDatePicker";
 export { default as Checkbox } from "@/core/components/Checkbox";
 export { default as Demo } from "@/core/components/Demo";
 export { default as Divider } from "@/core/components/Divider";