kahuna-base-react-components 0.2.10 → 0.2.12

package/src/components/KSelectDate/KSelectDate.tsx

@@ -0,0 +1,314 @@
+import React, { CSSProperties, useEffect, useState } from "react"
+import Calendar from "react-calendar"
+import "./CalendarCustom.css"
+//@ts-ignore
+import LeftIcon from "../../assets/chevron-left.svg"
+//@ts-ignore
+import SeparatorIcon from "../../assets/separator.svg"
+//@ts-ignore
+import CalendarIcon from "../../assets/calendar.svg"
+//@ts-ignore
+import RightIcon from "../../assets/chevron-right.svg"
+import "../../main.css"
+import KButton from "../KButton"
+import KSpan from "../KSpan"
+
+export interface KSelectDateProps {
+  value: Date | undefined
+  onChange: (date: Date | undefined) => void
+}
+interface MonthSelectorType {
+  monthName: string
+  year: string
+  date: Date
+}
+interface DaySelectorType {
+  dayName: string
+  dayOrderInMonth: number
+  date: Date
+}
+interface MonthTextType {
+  [key: string]: string
+}
+
+const KSelectDate: React.FC<KSelectDateProps> = (props) => {
+  const [value, setValue] = useState<Date | undefined>(props.value)
+  const [calendarDate, setCalendarDate] = useState<Date | undefined>(props.value)
+  const [dummyDate, setDummyDate] = useState<Date | undefined>(props.value)
+  const [nextMonths, setNextMonths] = useState<MonthSelectorType[]>([])
+  const [weekDays, setWeekDays] = useState<DaySelectorType[]>([])
+  const [openCalendar, setOpenCalendar] = useState<boolean>(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
+  }
+
+  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 onClickDay = (date: Date) => {
+    if (date.getTime() === calendarDate?.getTime()) {
+      setCalendarDate(undefined)
+    } else {
+      setCalendarDate(date)
+    }
+  }
+
+  const getNextMonths = (date: Date | undefined) => {
+    if (date) {
+      const updatedMonths = Array.from({ length: 4 }, (_, i) => {
+        const newDate = new Date(date.getFullYear(), date.getMonth() + (i - 1), 1)
+        return {
+          monthName: newDate.toLocaleString("en-US", { month: "long" }),
+          year: newDate.getFullYear().toString(),
+          date: newDate
+        }
+      })
+      setNextMonths(updatedMonths)
+    }
+  }
+
+  const getWeekDays = (date: Date | undefined) => {
+    if (date) {
+      const startOfWeek = new Date(date)
+      const dayOfWeek = startOfWeek.getDay()
+      const diffToMonday = dayOfWeek === 0 ? -6 : 1 - dayOfWeek // If Sunday (0), move back 6 days; otherwise move back (1 - dayOfWeek) days
+      startOfWeek.setDate(startOfWeek.getDate() + diffToMonday)
+
+      const updatedDays = Array.from({ length: 7 }, (_, i) => {
+        const day = new Date(startOfWeek)
+        day.setDate(startOfWeek.getDate() + i)
+        return {
+          dayName: day.toLocaleDateString("en-US", { weekday: "short" }),
+          dayOrderInMonth: day.getDate(),
+          date: day
+        }
+      })
+
+      setWeekDays(updatedDays)
+    }
+  }
+
+  const renderPopUpCalendar = () => {
+    return (
+      <div className="flex flex-col gap-0">
+        <Calendar
+          onClickDay={onClickDay}
+          locale="en-US"
+          value={calendarDate || null}
+          defaultValue={null}
+          next2Label={null}
+          prev2Label={null}
+          prevLabel={<img src={LeftIcon} />}
+          nextLabel={<img src={RightIcon} />}
+          formatShortWeekday={formatShortWeekday}
+          formatMonthYear={formatMonthYear}
+        />
+        <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
+            text="Cancel"
+            height="44px"
+            width="160px"
+            background="#FFF"
+            textColor="#111"
+            onClick={() => {
+              setOpenCalendar(false)
+            }}
+          />
+          <KButton
+            text="Apply"
+            height="44px"
+            width="160px"
+            background="#F2FE67"
+            textColor="#111"
+            onClick={() => {
+              setValue(calendarDate)
+              setOpenCalendar(false)
+            }}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  const monthSelector = (month: string, year: string, date: Date) => {
+    const monthText: MonthTextType = {
+      January: "Jan",
+      February: "Feb",
+      March: "March",
+      April: "April",
+      May: "May",
+      June: "June",
+      July: "July",
+      August: "August",
+      September: "Sept",
+      October: "Oct",
+      November: "Nov",
+      December: "Dec"
+    }
+
+    const text = `${monthText[month]}, ${year}`
+
+    const inMonth = dummyDate ? dummyDate?.getMonth() === date.getMonth() : new Date().getMonth() === date.getMonth()
+
+    return (
+      <div
+        key={`${text}-${date}`}
+        className={`w-[135px] h-9 box-sizing`}
+        style={{
+          borderRadius: 999,
+          border: inMonth ? "1px solid #111" : "1px solid #E7E7E7"
+        }}
+      >
+        <KButton
+          text={text}
+          shadowDisabled={true}
+          onClick={() => {
+            if (date.getTime()) {
+              setDummyDate(date)
+            }
+          }}
+          background={inMonth ? "#111" : "#FFF"}
+          textColor={inMonth? "#FFF" : "#111"}
+          borderRadius={999}
+          padding="8px 16px"
+          height="34px"
+        />
+      </div>
+    )
+  }
+
+  const daySelector = (text: string, date: Date) => {
+    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`}
+        onClick={() => {
+          if (date.getTime() === value?.getTime()) {
+            setValue(undefined)
+          } else {
+            setValue(date)
+          }
+        }}
+      >
+        <div>
+          <img src={CalendarIcon} alt="calendar" />
+        </div>
+        <KSpan text={text} fontWeight={500} color="#111" />
+      </div>
+    )
+  }
+
+  const changeWeeks = (date: Date | undefined, isNextWeek: boolean) => {
+    if (date) {
+      const newDate = new Date(date)
+      if (isNextWeek) {
+        newDate.setDate(newDate.getDate() + 7)
+      } else {
+        newDate.setDate(newDate.getDate() - 7)
+      }
+      setDummyDate(newDate)
+    } else {
+      const newDate = new Date()
+      if (isNextWeek) {
+        newDate.setDate(newDate.getDate() + 7)
+      } else {
+        newDate.setDate(newDate.getDate() - 7)
+      }
+      setDummyDate(newDate)
+    }
+  }
+
+  useEffect(() => {
+    if (value) {
+      setDummyDate(value)
+    }
+    props.onChange(value)
+  }, [value])
+
+  useEffect(() => {
+    const today = new Date()
+    if (!props.value) {
+      getNextMonths(today)
+      getWeekDays(today)
+    }
+  }, [])
+  
+  useEffect(() => {
+    getNextMonths(dummyDate)
+    getWeekDays(dummyDate)
+  }, [dummyDate])
+
+  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-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 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>
+    </React.Fragment>
+  )
+}
+
+export default KSelectDate

package/src/components/KSelectDate/index.ts

@@ -0,0 +1 @@
+export {default} from './KSelectDate';

package/src/components/KSpan/KSpan.tsx

@@ -12,7 +12,8 @@ export interface KSpanProps {
   hoverText?: string
   hoverTextColor?: string
   hoverStyle?: CSSProperties,
-  textDecoration?: string
+  textDecoration?: string,
+  ellipsis?: boolean
 }
 
 const KSpan: React.FC<KSpanProps> = (props) => {
@@ -27,9 +28,12 @@ const KSpan: React.FC<KSpanProps> = (props) => {
   const hoverTextColor = props.hoverTextColor || "#737373"
   const hoverStyle = props.hoverStyle || {}
   const textDecoration = props.textDecoration || "none"
+  const ellipsis = props.ellipsis || false
+
+  const ellipsisStyle = {overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap"}
 
   const renderBaseSpan = () => {
-    const baseSpanStyle = { fontSize, color, fontWeight, lineHeight, fontStyle, letterSpacing, textDecoration }
+    const baseSpanStyle = { fontSize, color, fontWeight, lineHeight, fontStyle, letterSpacing, textDecoration, ...(ellipsis && ellipsisStyle) }
     return (
       <span
         className={"k-span"}

package/src/index.ts

@@ -5,8 +5,8 @@ import KLogo from "./components/KLogo"
 import KInput from "./components/KInput"
 import KDropdown from "./components/KDropdown"
 import KSlider from "./components/KSlider"
-import KDropdownToggle from "./components/KDropdownToggle"
+import KSelectDate from "./components/KSelectDate"
 
 export {
-  KButton, KSpan, KLogo, KTitleSpan, KInput, KDropdown, KSlider, KDropdownToggle
+  KButton, KSpan, KLogo, KTitleSpan, KInput, KDropdown, KSlider, KSelectDate
 }

package/src/components/KDropdownToggle/KDropdownToggle.stories.tsx

@@ -1,70 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react"
-import KDropdownToggle, { KSelectOption } from "./KDropdownToggle"
-// @ts-ignore
-import TracksIcon from "../../assets/tracks.svg"
-import { MultiValue } from "react-select"
-import { useEffect, useState } from "react"
-
-export default {
-  title: "ReactComponentLibrary/KDropdownToggle",
-  component: KDropdownToggle,
-  parameters: {
-    layout: "centered"
-  }
-} as Meta<typeof KDropdownToggle>
-
-const Template: StoryFn<typeof KDropdownToggle> = (args) => <KDropdownToggle {...args} />
-
-export const KDropdownToggleSingle = Template.bind({})
-KDropdownToggleSingle.args = {
-  onSelect: (value: KSelectOption | MultiValue<KSelectOption> | null) => {},
-  width: 250,
-  placeholder: "Select single...",
-  options: [
-    { label: "Label 1", value: 1, icon: TracksIcon },
-    { label: "Label 2", value: 2, icon: TracksIcon },
-    { label: "Label 3", value: 3 },
-    { label: "TANIK", value: 4 }
-  ]
-}
-
-export const KDropdownToggleMulti = Template.bind({})
-KDropdownToggleMulti.args = {
-  onSelect: (value: KSelectOption | MultiValue<KSelectOption>) => {},
-  width: 250,
-  placeholder: "Multi...",
-  options: [
-    { label: "Label 1", value: 1, icon: TracksIcon },
-    { label: "Label 2", value: 2, icon: TracksIcon },
-    { label: "Label 3", value: 3 }
-  ],
-  isMulti: true
-}
-
-export const KDropdownToggleLeftIcon = Template.bind({})
-KDropdownToggleLeftIcon.args = {
-  onSelect: (value: KSelectOption | MultiValue<KSelectOption>) => {},
-  placeholder: "Placeholder...",
-  leftIcon: TracksIcon
-}
-
-export const KDropdownToggleRightIcon = Template.bind({})
-KDropdownToggleRightIcon.args = {
-  onSelect: (value: KSelectOption | MultiValue<KSelectOption>) => {},
-  placeholder: "Placeholder...",
-  rightIcon: TracksIcon,
-  width: 250,
-  options: [
-    { label: "Label 1", value: 1, icon: TracksIcon },
-    { label: "Label 2", value: 2, icon: TracksIcon },
-    { label: "Label 3", value: 3 }
-  ]
-}
-
-export const KDropdownToggleLeftRightIcon = Template.bind({})
-KDropdownToggleLeftRightIcon.args = {
-  onSelect: (value: KSelectOption | MultiValue<KSelectOption>) => {},
-  placeholder: "Placeholder...",
-  leftIcon: TracksIcon,
-  rightIcon: TracksIcon
-}

package/src/components/KDropdownToggle/KDropdownToggle.tsx

@@ -1,186 +0,0 @@
-import React, { useEffect, useState } from "react"
-import "../../main.css"
-import Select, { MultiValue } from "react-select"
-// @ts-ignore
-import CheckIcon from "../../assets/check.svg"
-import KSpan from "../KSpan"
-import { FilterOptionOption } from "react-select/dist/declarations/src/filters"
-
-export interface KSelectOption {
-  label: string
-  value: number
-  type?: string
-  label2?: string
-  value2?: string
-  icon?: string
-}
-
-export interface KDropdownProps {
-  defaultValue?: KSelectOption | MultiValue<KSelectOption>
-  selected?: KSelectOption | MultiValue<KSelectOption>
-  onSelect: (selected: KSelectOption | MultiValue<KSelectOption>) => void
-  options: KSelectOption[]
-  width?: number
-  height?: number
-  leftIcon?: string
-  rightIcon?: string
-  background?: string
-  activeBackground?: string
-  borderRadius?: number
-  placeholder?: string
-  isMulti?: boolean
-  label?: string
-  textColor?: string
-  shadowDisabled?: boolean
-  menuBackground?: string
-  padding?: string
-  gap?: string
-  hideChosenOptionIcon?: boolean
-}
-
-const KDropdownToggle: React.FC<KDropdownProps> = (props) => {
-  const [selectedOption, setSelectedOption] = useState<KSelectOption | MultiValue<KSelectOption>>()
-  const [background, setBackground] = useState("#F5F5F5")
-
-  useEffect(() => {
-    const emptyBackground = props.background || "#F5F5F5"
-    const activeBackground = props.activeBackground || "#FFF"
-
-    const background = props.selected ? activeBackground : emptyBackground
-    setBackground(background)
-  }, [props.selected])
-
-  const width = props.width || "100%"
-  const height = props.height || "auto"
-  const borderRadius = props.borderRadius || 10
-  const isMulti = props.isMulti || false
-  const textColor = props.textColor || "#111"
-  const boxShadow = props.shadowDisabled ? "" : "0 0 0 1px rgba(17, 17, 17, 0.04), 0 1px 1px 0 rgba(17, 17, 17, 0.04)"
-  const menuBackground = props.menuBackground || "rgb(249, 249, 249)"
-  const padding = props.padding || "8px"
-  const gap = props.gap || "4px"
-  const hideIcon = props.hideChosenOptionIcon || false
-
-  const customFilterOption = (option: FilterOptionOption<KSelectOption>, inputValue: string) => {
-    return option.data.label.toLocaleLowerCase("en").includes(inputValue.toLocaleLowerCase("en"))
-  }
-
-  const getOptionLabels = (option: KSelectOption) => {
-    return (
-      <div className="flex justify-between" style={{ width: "100%" }}>
-        <div className="flex">
-          {option.icon && <img src={option.icon} className="mr-2" width={20} alt={"option-icon"} />}
-          <KSpan text={option.label} color="#111" />
-        </div>
-        {
-          //@ts-ignore
-          !isMulti && selectedOption?.value === option.value && <img src={CheckIcon} width={24} alt={"check-icon"} />
-        }
-      </div>
-    )
-  }
-  return (
-    <div
-      className={"k-dropdown-container"}
-      style={{ background, borderRadius, width, height, boxShadow, padding, gap }}
-    >
-      {props.leftIcon && <img src={props.leftIcon} width={20} alt={"l-icon"} />}
-
-      <Select
-        defaultValue={props.defaultValue}
-        isMulti={isMulti}
-        name={props.label || ""}
-        placeholder={props.placeholder || ""}
-        options={props.options}
-        className={"k-dropdown"}
-        filterOption={customFilterOption}
-        isClearable
-        styles={{
-          control: (baseStyles, state) => ({
-            ...baseStyles,
-            background: "transparent !important",
-            padding: "0px !important",
-            boxShadow: "none",
-            fontSize: 14,
-            lineHeight: "20px",
-            cursor: "pointer",
-            minHeight: "20px",
-            border: "none"
-          }),
-          menu: (base) => ({
-            ...base,
-            borderRadius: 10,
-            background: menuBackground,
-            boxShadow:
-              "0px 3px 3px 0px rgba(17, 17, 17, 0.03), 0px 1px 1px 0px rgba(17, 17, 17, 0.04), 0px 0px 0px 1px rgba(17, 17, 17, 0.04)",
-            backdropFilter: "blur(2px)",
-            paddingRight: 3,
-            paddingLeft: 3
-          }),
-          menuList: (base) => ({
-            ...base,
-            paddingTop: 0,
-            paddingBottom: 0
-          }),
-          singleValue: (provided) => ({
-            ...provided,
-            color: textColor
-          }),
-          option: (provided, state) => ({
-            ...provided,
-            display: "flex",
-            alignItems: "center",
-            background: "white",
-            marginBottom: 4,
-            marginTop: 4,
-            borderRadius: 10,
-            color: "#111"
-          }),
-          valueContainer: (base) => ({
-            ...base,
-            padding: 0
-          }),
-          input: (base) => ({
-            ...base,
-            padding: 0,
-            margin: 0,
-            height: "20px"
-          }),
-          placeholder: (base) => ({
-            ...base,
-            margin: 0
-          }),
-          clearIndicator: (base) => ({
-            ...base,
-            padding: 0
-          })
-        }}
-        components={{
-          IndicatorSeparator: () => null,
-          DropdownIndicator: () => null,
-          SingleValue: ({ data, ...props }) => (
-            <div className="flex" style={{ position: "absolute" }}>
-              {data.icon && !hideIcon && <img src={data.icon} className="mr-2" width={20} alt={"data-icon"} />}
-              <KSpan text={data.label} color="#111" />
-            </div>
-          )
-        }}
-        onChange={(event) => {
-          if (!event) {
-            setSelectedOption(undefined)
-            return
-          } else {
-            setSelectedOption(event)
-          }
-          props.onSelect(event)
-        }}
-        //@ts-ignore
-        getOptionLabel={(option: KSelectOption) => getOptionLabels(option)}
-      />
-
-      {props.rightIcon && <img src={props.rightIcon} width={20} alt={"r-icon"} />}
-    </div>
-  )
-}
-
-export default KDropdownToggle

package/src/components/KDropdownToggle/index.ts

@@ -1 +0,0 @@
-export {default} from './KDropdownToggle';