kahuna-base-react-components 1.1.2 → 1.1.4

package/src/components/KSelectDate/KSelectDate.tsx

@@ -8,6 +8,8 @@ import SeparatorIcon from "../../assets/separator.svg"
 //@ts-ignore
 import CalendarIcon from "../../assets/calendar.svg"
 //@ts-ignore
+import CalendarNewIcon from "../../assets/calendar-new.svg"
+//@ts-ignore
 import RightIcon from "../../assets/chevron-right.svg"
 import "../../main.css"
 import KButton from "../KButton"
@@ -16,6 +18,9 @@ import KSpan from "../KSpan"
 export interface KSelectDateProps {
   value: Date | undefined
   onChange: (date: Date | undefined) => void
+  minimumDate?: Date
+  onlyMonthSelection?: boolean
+  hideBody?: boolean
 }
 interface MonthSelectorType {
   monthName: string
@@ -39,6 +44,9 @@ const KSelectDate: React.FC<KSelectDateProps> = (props) => {
   const [weekDays, setWeekDays] = useState<DaySelectorType[]>([])
   const [openCalendar, setOpenCalendar] = useState<boolean>(false)
 
+  const onlyMonthSelection = props.onlyMonthSelection || false
+  const hideBody = props.hideBody || false
+
   const formatShortWeekday = (locale: string | undefined, date: Date): string => {
     return date.toLocaleDateString(locale, { weekday: "short" }).charAt(0) // Return only the first letter of the weekday
   }
@@ -57,6 +65,13 @@ const KSelectDate: React.FC<KSelectDateProps> = (props) => {
       setCalendarDate(date)
     }
   }
+  const onClickMonth = (date: Date) => {
+    if (date.getTime() === calendarDate?.getTime()) {
+      setCalendarDate(undefined)
+    } else {
+      setCalendarDate(date)
+    }
+  }
 
   const getNextMonths = (date: Date | undefined) => {
     if (date) {
@@ -98,6 +113,8 @@ const KSelectDate: React.FC<KSelectDateProps> = (props) => {
       <div className="flex flex-col gap-0">
         <Calendar
           onClickDay={onClickDay}
+          {...(onlyMonthSelection && { onClickMonth: onClickMonth })}
+          {...(onlyMonthSelection && { maxDetail: "year" })}
           locale="en-US"
           value={calendarDate || null}
           defaultValue={null}
@@ -107,6 +124,7 @@ const KSelectDate: React.FC<KSelectDateProps> = (props) => {
           nextLabel={<img src={RightIcon} />}
           formatShortWeekday={formatShortWeekday}
           formatMonthYear={formatMonthYear}
+          minDate={props.minimumDate || undefined}
         />
         <div className="h-19 w-[350px] bg-[#FFF] flex flex-row gap-4 py-4 justify-center border-[1px] border-[#E7E7E7] border-t-0 rounded-b-[10px]">
           <KButton
@@ -173,7 +191,7 @@ const KSelectDate: React.FC<KSelectDateProps> = (props) => {
             }
           }}
           background={inMonth ? "#111" : "#FFF"}
-          textColor={inMonth? "#FFF" : "#111"}
+          textColor={inMonth ? "#FFF" : "#111"}
           borderRadius={999}
           padding="8px 16px"
           height="34px"
@@ -183,13 +201,23 @@ const KSelectDate: React.FC<KSelectDateProps> = (props) => {
   }
 
   const daySelector = (text: string, date: Date) => {
+    const dateNotAllowed = props.minimumDate && date < props.minimumDate
     return (
       <div
         key={`${text}-${date}`}
-        className={`w-[85px] h-[104px] flex flex-col justify-between py-3 px-2.5 rounded-[10px] ${
-          date.getTime() === value?.getTime() ? "bg-[#F8FEA3]" : "bg-[#F5F5F5]"
-        } cursor-pointer`}
+        className={`w-[85px] h-[104px] flex flex-col justify-between py-3 px-2.5 rounded-[10px] cursor-pointer`}
+        style={{
+          background: dateNotAllowed
+            ? "rgb(170, 170, 170, 0.7)"
+            : date.getTime() === value?.getTime()
+            ? "#F8FEA3"
+            : "#F5F5F5"
+        }}
         onClick={() => {
+          if (dateNotAllowed) {
+            return
+          }
+
           if (date.getTime() === value?.getTime()) {
             setValue(undefined)
           } else {
@@ -228,6 +256,8 @@ const KSelectDate: React.FC<KSelectDateProps> = (props) => {
   useEffect(() => {
     if (value) {
       setDummyDate(value)
+    } else if (props.minimumDate) {
+      setDummyDate(props.minimumDate)
     }
     props.onChange(value)
   }, [value])
@@ -235,14 +265,19 @@ const KSelectDate: React.FC<KSelectDateProps> = (props) => {
   useEffect(() => {
     const today = new Date()
     if (!props.value) {
-      getNextMonths(today)
-      getWeekDays(today)
+      getNextMonths(props.minimumDate || today)
+      getWeekDays(props.minimumDate || today)
     }
   }, [])
-  
+
   useEffect(() => {
-    getNextMonths(dummyDate)
-    getWeekDays(dummyDate)
+    if (dummyDate && props.minimumDate && dummyDate < props.minimumDate) {
+      getNextMonths(props.minimumDate)
+      getWeekDays(props.minimumDate)
+    } else {
+      getNextMonths(dummyDate)
+      getWeekDays(dummyDate)
+    }
   }, [dummyDate])
 
   return (
@@ -252,61 +287,78 @@ const KSelectDate: React.FC<KSelectDateProps> = (props) => {
           <div>{renderPopUpCalendar()}</div>
         </div>
       )}
-      <div>
-        <div className={`flex flex-col gap-4 ${openCalendar && "blur-2xl"}`}>
-          <div className="flex flex-row justify-between gap-2 items-center">
-            <div className="flex flex-row gap-2">
-              {nextMonths.map((month, i) => {
-                return monthSelector(month.monthName, month.year, month.date)
-              })}
+      {!hideBody ? (
+        <div>
+          <div className={`flex flex-col gap-4 ${openCalendar && "blur-2xl"}`}>
+            <div className="flex flex-row justify-between gap-2 items-center">
+              <div className="flex flex-row gap-2">
+                {nextMonths.map((month, i) => {
+                  return monthSelector(month.monthName, month.year, month.date)
+                })}
+              </div>
+              <div>
+                <img src={SeparatorIcon} />
+              </div>
+              <div>
+                <KButton
+                  icon={CalendarIcon}
+                  onClick={() => {
+                    setOpenCalendar(true)
+                    setCalendarDate(value)
+                  }}
+                  padding="8px"
+                  height="36px"
+                  background="#FFF"
+                />
+              </div>
             </div>
-            <div>
-              <img src={SeparatorIcon} />
+            <div className="flex flex-row justify-between gap-1 items-center">
+              {weekDays.map((day, i) => {
+                return daySelector(`${day.dayOrderInMonth}, ${day.dayName}`, day.date)
+              })}
             </div>
-            <div>
+            <div className="flex flex-row justify-between items-center">
+              <KButton
+                text="Previous Week"
+                padding="6px"
+                leftIcon={LeftIcon}
+                onClick={() => {
+                  changeWeeks(dummyDate, false)
+                }}
+                width="130px"
+                height="32px"
+                background="#FFF"
+              />
               <KButton
-                icon={CalendarIcon}
+                text="Next Week"
+                padding="6px"
+                rightIcon={RightIcon}
                 onClick={() => {
-                  setOpenCalendar(true)
-                  setCalendarDate(value)
+                  changeWeeks(dummyDate, true)
                 }}
-                padding="8px"
-                height="36px"
+                width="130px"
+                height="32px"
                 background="#FFF"
               />
             </div>
           </div>
-          <div className="flex flex-row justify-between gap-1 items-center">
-            {weekDays.map((day, i) => {
-              return daySelector(`${day.dayOrderInMonth}, ${day.dayName}`, day.date)
-            })}
-          </div>
-          <div className="flex flex-row justify-between items-center">
-            <KButton
-              text="Previous Week"
-              padding="6px"
-              leftIcon={LeftIcon}
-              onClick={() => {
-                changeWeeks(dummyDate, false)
-              }}
-              width="130px"
-              height="32px"
-              background="#FFF"
-            />
-            <KButton
-              text="Next Week"
-              padding="6px"
-              rightIcon={RightIcon}
-              onClick={() => {
-                changeWeeks(dummyDate, true)
-              }}
-              width="130px"
-              height="32px"
-              background="#FFF"
-            />
-          </div>
         </div>
+      ) : (
+        <div>
+        <KButton
+          icon={CalendarNewIcon}
+          onClick={() => {
+            setOpenCalendar(true)
+            setCalendarDate(value)
+          }}
+          padding="14px"
+          width="48px"
+          height="48px"
+          background="#F7F7F7"
+          hoverBackground="#F3F3F3"
+        />
       </div>
+      )}
     </React.Fragment>
   )
 }

package/src/components/KSelectRange/KSelectRange.stories.tsx

@@ -0,0 +1,55 @@
+import { Meta, StoryFn } from "@storybook/react"
+import KSelectRange, { KSelectRangeProps, DateRangeType } from "./KSelectRange"
+import { useEffect, useState } from "react"
+
+export default {
+  title: "ReactComponentLibrary/KSelectRange",
+  component: KSelectRange,
+  parameters: {
+    layout: "centered"
+  }
+} as Meta<typeof KSelectRange>
+
+const KSelectRangeWrapper: React.FC<KSelectRangeProps> = (args) => {
+  const [selectedDate, setSelectedDate] = useState<DateRangeType>([
+    new Date(new Date().setMonth(new Date().getMonth() - 10)), // Start date: 3 months ago
+    new Date() // End date: today
+  ])
+  useEffect(() => {
+    // console.log("selectedDate: ", selectedDate)
+  }, [selectedDate])
+
+  return (
+    <div><KSelectRange
+      {...args}
+      value={selectedDate}
+      onChange={(date: DateRangeType) => {
+        // console.log("date: ", date)
+        if (date) {
+          setSelectedDate(date)
+          console.log("updating is completed: ", date)
+          // console.log("updating is completed date.toISOString(): ", date?.toISOString())
+        } else {
+          setSelectedDate(null)
+          // console.log("Deleting is completed")
+        }
+      }}
+    /></div>
+  )
+}
+
+const Template: StoryFn<typeof KSelectRangeWrapper> = (args) => <KSelectRangeWrapper {...args} />
+
+export const KSelectRangePrimary = Template.bind({})
+KSelectRangePrimary.args = {
+  onChange: (value) => {
+    if (value) {
+      console.log("value is updated using this value:", value)
+    } else {
+      console.log("value is deleted, because it is: ", value)
+    }
+  }
+}
+
+export const KSelectRangeHoverText = Template.bind({})
+KSelectRangeHoverText.args = {}

package/src/components/KSelectRange/KSelectRange.tsx

@@ -0,0 +1,242 @@
+import React, { CSSProperties, useEffect, useState } from "react"
+import Calendar from "react-calendar"
+import "./KSelectRangeCustom.css"
+//@ts-ignore
+import LeftIcon from "../../assets/chevron-left.svg"
+//@ts-ignore
+import CalendarNewIcon from "../../assets/calendar-new.svg"
+//@ts-ignore
+import RightIcon from "../../assets/chevron-right.svg"
+import "../../main.css"
+import KButton from "../KButton"
+
+export interface KSelectRangeProps {
+  value: DateRangeType
+  onChange: (date: DateRangeType) => void
+}
+
+export type DateRangeType = Date | null | [Date | null, Date | null]
+
+const KSelectRange: React.FC<KSelectRangeProps> = (props) => {
+  const [value, setValue] = useState<DateRangeType>(props.value)
+  const [range, setRange] = useState<DateRangeType>(props.value)
+  const [loading, setLoading] = useState(false)
+
+  const [openCalendar, setOpenCalendar] = useState<boolean>(false)
+  const [shorthandIndex, setShorthandIndex] = useState<{ current: number; approved: number }>({
+    current: -1,
+    approved: -1
+  })
+
+  const formatShortWeekday = (locale: string | undefined, date: Date): string => {
+    return date.toLocaleDateString(locale, { weekday: "short" }).charAt(0) // Return only the first letter of the weekday
+  }
+
+  const formatMonthYear = (locale: string | undefined, date: Date): string => {
+    const formattedDate = date.toLocaleDateString(locale, { month: "short", year: "numeric" })
+    const [month, year] = formattedDate.split(" ")
+    const capitalizedMonth = month.charAt(0).toUpperCase() + month.slice(1).toLowerCase()
+    return `${capitalizedMonth}, ${year}`
+  }
+
+  const shorthandDateSelection = (isMonth: boolean, range: number) => {
+    const theDate = new Date()
+    // if isMonth is false, then it is year
+    const year = theDate.getFullYear()
+    const month = theDate.getMonth()
+    if (isMonth) {
+      const endDate = new Date(year, month)
+      const startDate = new Date(year, month - (range - 1))
+      setRange([startDate, endDate])
+    } else {
+      const endDate = new Date(year + range, 11)
+      const startDate = new Date(year + range, 0)
+      setRange([startDate, endDate])
+    }
+
+    setOpenCalendar(false)
+    setTimeout(() => {
+      setOpenCalendar(true)
+    }, 10)
+  }
+
+  useEffect(() => {
+    props.onChange(value)
+  }, [value])
+
+  const renderPopUpCalendar = () => {
+    return (
+      <div className="flex flex-row">
+        <div className="flex flex-col gap-0">
+          <Calendar
+            className="kselect-range"
+            locale="en-US"
+            value={range}
+            onChange={(dates) => {
+              setRange(dates)
+              setTimeout(() => {
+                setLoading(false)
+              }, 200)
+            }}
+            onClickMonth={() => {
+              setLoading(true)
+              setShorthandIndex({ ...shorthandIndex, current: -1 })
+            }}
+            defaultValue={null}
+            next2Label={null}
+            prev2Label={null}
+            prevLabel={<img src={LeftIcon} />}
+            nextLabel={<img src={RightIcon} />}
+            formatShortWeekday={formatShortWeekday}
+            formatMonthYear={formatMonthYear}
+            selectRange
+            maxDetail="year"
+          />
+          <div
+            className="h-19 w-[350px] bg-[#FFF] flex flex-row gap-4 py-4 justify-center border-[1px] border-[#E7E7E7] border-t-0 rounded-b-[10px]"
+            style={{
+              borderBottomRightRadius: "0px"
+            }}
+          >
+            <KButton
+              text="Cancel"
+              height="44px"
+              width="160px"
+              background="#FFF"
+              textColor="#111"
+              onClick={() => {
+                setRange(value)
+                setOpenCalendar(false)
+                const approvedIndex = shorthandIndex.approved
+                setShorthandIndex({ ...shorthandIndex, current: approvedIndex })
+              }}
+            />
+            <KButton
+              text="Apply"
+              height="44px"
+              width="160px"
+              background="#F2FE67"
+              textColor="#111"
+              disabled={loading}
+              onClick={() => {
+                setValue(range)
+                setOpenCalendar(false)
+                const currentIndex = shorthandIndex.current
+                setShorthandIndex({ ...shorthandIndex, approved: currentIndex })
+              }}
+            />
+          </div>
+        </div>
+        <div
+          className="w-[160px] bg-[#FFF] flex flex-col items-center justify-between px-2.5 pt-5 pb-4"
+          style={{
+            border: "1px solid #E7E7E7",
+            borderLeft: "0px",
+            borderTopRightRadius: "16px",
+            borderBottomRightRadius: "16px"
+          }}
+        >
+          <KButton
+            onClick={() => {
+              shorthandDateSelection(true, 3)
+              setShorthandIndex({ ...shorthandIndex, current: 0 })
+            }}
+            width="140px"
+            background={shorthandIndex.current === 0 ? "#000" : "#FFF"}
+            textColor={shorthandIndex.current === 0 ? "#FFF" : "#000"}
+            text="Last 3 months"
+            borderRadius={1}
+            shadowDisabled
+            hoverBackground="#F0F0F0"
+            height="40px"
+          />
+          <KButton
+            onClick={() => {
+              shorthandDateSelection(true, 6)
+              setShorthandIndex({ ...shorthandIndex, current: 1 })
+            }}
+            width="140px"
+            background={shorthandIndex.current === 1 ? "#000" : "#FFF"}
+            textColor={shorthandIndex.current === 1 ? "#FFF" : "#000"}
+            text="Last 6 months"
+            borderRadius={1}
+            shadowDisabled
+            hoverBackground="#F0F0F0"
+            height="40px"
+          />
+          <KButton
+            onClick={() => {
+              shorthandDateSelection(true, 12)
+              setShorthandIndex({ ...shorthandIndex, current: 2 })
+            }}
+            width="140px"
+            background={shorthandIndex.current === 2 ? "#000" : "#FFF"}
+            textColor={shorthandIndex.current === 2 ? "#FFF" : "#000"}
+            text="Last 12 months"
+            borderRadius={1}
+            shadowDisabled
+            hoverBackground="#F0F0F0"
+            height="40px"
+          />
+          <KButton
+            onClick={() => {
+              shorthandDateSelection(false, 0)
+              setShorthandIndex({ ...shorthandIndex, current: 3 })
+            }}
+            width="140px"
+            background={shorthandIndex.current === 3 ? "#000" : "#FFF"}
+            textColor={shorthandIndex.current === 3 ? "#FFF" : "#000"}
+            text="This year"
+            borderRadius={1}
+            shadowDisabled
+            hoverBackground="#F0F0F0"
+            height="40px"
+          />
+          <KButton
+            onClick={() => {
+              shorthandDateSelection(false, -1)
+              setShorthandIndex({ ...shorthandIndex, current: 4 })
+            }}
+            width="140px"
+            background={shorthandIndex.current === 4 ? "#000" : "#FFF"}
+            textColor={shorthandIndex.current === 4 ? "#FFF" : "#000"}
+            text="Last year"
+            borderRadius={1}
+            shadowDisabled
+            hoverBackground="#F0F0F0"
+            height="40px"
+          />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <React.Fragment>
+      {openCalendar && (
+        <div className="w-[100vw] h-[100vh] fixed left-0 top-0 flex items-center justify-center z-50">
+          <div>{renderPopUpCalendar()}</div>
+        </div>
+      )}
+      <div>
+        <div className="flex flex-row justify-between gap-2 items-center">
+          <div>
+            <KButton
+              icon={CalendarNewIcon}
+              onClick={() => {
+                setOpenCalendar(true)
+              }}
+              padding="14px"
+              width="48px"
+              height="48px"
+              background="#F7F7F7"
+              hoverBackground="#F3F3F3"
+            />
+          </div>
+        </div>
+      </div>
+    </React.Fragment>
+  )
+}
+
+export default KSelectRange