kahuna-base-react-components 1.0.6 → 1.1.0

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/KSlider/KSlider.stories.tsx

@@ -0,0 +1,19 @@
+import {Meta, StoryFn} from "@storybook/react";
+import KSlider, {SliderOption} from "./KSlider";
+
+export default {
+  title: "ReactComponentLibrary/KSlider",
+  component: KSlider,
+} as Meta<typeof KSlider>;
+
+const Template: StoryFn<typeof KSlider> = (args) => <KSlider {...args} />;
+
+export const KSliderPrimary = Template.bind({});
+KSliderPrimary.args = {
+  options: [{label: "0%", value: 0}, {label: "25%", value: 1}, {label: "50%", value: 2}, {label: "75%", value: 3}],
+  onChange: (option: SliderOption) => {
+    // Do Nothing
+  },
+  width: "200px",
+  value: 3
+};

package/src/components/KSlider/KSlider.tsx

@@ -0,0 +1,67 @@
+import React from "react"
+import "../../main.css"
+// @ts-ignore
+import StepIcon from "../../assets/slider-step.svg"
+
+export interface SliderOption {
+  label: string
+  value: number
+}
+
+export interface KSliderProps {
+  options: SliderOption[]
+  onChange: (option: SliderOption) => void
+  value?: number
+  disabled?: boolean
+  width?: string
+}
+
+const KSlider: React.FC<KSliderProps> = (props) => {
+  const disabled = props.disabled || false
+  const width = props.width || "100%"
+  const height = "8px"
+  
+  const calculateSpanWidth = ():number => {
+    const min = props.options[0].value
+    const max = props.options[props.options.length - 1].value
+    const spanWidth = (props.value! - min) / (max - min) * 100 
+    if (spanWidth >= 100 ) {
+      return 99
+    }
+    return spanWidth
+  }
+
+  return (
+    <div className="inline-block bg-[#E7E7E7] rounded-full relative z-0" style={{ width, height }}>
+      <span className="w-full flex justify-between absolute top-0  z-0 items-center px-0.5" style={{ height }}>
+        {props.options.map((option, index) => {
+          return <img key={`step-icon-${index}`} src={StepIcon} className="w-1 h-1 !z-0 " />
+        })}
+      </span>
+      <span
+        className="block z-50 absolute top-0"
+        style={{
+          height,
+          width: `${calculateSpanWidth()}%`,
+          borderRadius: "10px",
+          backgroundColor: "black"
+        }}
+      />
+      <input
+        disabled={disabled}
+        style={{ width, height }}
+        className={"k-slider-input absolute top-0 !z-50"}
+        onChange={(e) => {
+          const option = props.options.find((option) => option.value.toString() === e.target.value)
+          if (option) return props.onChange(option)
+        }}
+        value={props.value}
+        type="range"
+        min={props.options[0].value}
+        max={props.options[props.options.length - 1].value}
+      />
+    </div>
+  )
+};
+
+export default KSlider;

package/src/components/KSlider/index.ts

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

package/src/components/KSliderLabel/KSliderLabel.stories.tsx

@@ -0,0 +1,61 @@
+import React, { useEffect, useState } from "react";
+import { Meta, StoryFn } from "@storybook/react";
+import KSliderLabel, { SliderLabelProps, SliderLabelOption } from "./KSliderLabel";
+
+export default {
+  title: "ReactComponentLibrary/KSliderLabel",
+  component: KSliderLabel,
+  parameters: {
+    layout: "centered",
+  },
+} as Meta<typeof KSliderLabel>;
+
+const KSliderLabelWrapper: React.FC<SliderLabelProps> = (args) => {
+  const [selectedValue, setSelectedValue] = useState<number | undefined>(0);
+
+  useEffect(() => {
+    console.log("selectedValue: ", selectedValue);
+  }, [selectedValue]);
+
+  return (
+    <KSliderLabel
+      {...args}
+      value={selectedValue}
+      onChange={(option) => {
+        console.log("option: ", option);
+        setSelectedValue(option.value);
+        console.log("Value updated to: ", option.value);
+      }}
+    />
+  );
+};
+
+const Template: StoryFn<typeof KSliderLabelWrapper> = (args) => <KSliderLabelWrapper {...args} />;
+
+const options: SliderLabelOption[] = [
+  { label: "Low", value: 0 },
+  { label: "Medium", value: 1 },
+  { label: "Medium", value: 3 },
+  { label: "Medium", value: 4 },
+  { label: "Medium", value: 5 },
+];
+
+export const KSliderLabelPrimary = Template.bind({});
+KSliderLabelPrimary.args = {
+  options,
+  disabled: false,
+  width: "440px",
+  titleText: "Slider Title",
+  valueText: "50",
+  fontSize: 14,
+  color: "#000",
+};
+
+export const KSliderLabelHoverText = Template.bind({});
+KSliderLabelHoverText.args = {
+  options,
+  titleText: "Hover to see me!",
+  valueText: "50",
+  fontSize: 14,
+  color: "#000",
+};

package/src/components/KSliderLabel/KSliderLabel.tsx

@@ -0,0 +1,137 @@
+import React, { useEffect, useRef, useState } from "react"
+import "../../main.css"
+//@ts-ignore
+import ThumbIcon from "../../assets/slider-thumb.svg"
+import KSpan from "../KSpan"
+
+export interface SliderLabelOption {
+  label: string
+  value: number
+}
+
+export interface SliderLabelProps {
+  options: SliderLabelOption[]
+  onChange: (option: SliderLabelOption) => void
+  value?: number
+  disabled?: boolean
+  width?: string
+  titleText?: string
+  valueText?: string,
+  fontSize?: number,
+  color?: string
+}
+
+const KSliderLabel: React.FC<SliderLabelProps> = (props) => {
+  const disabled = props.disabled || false
+  const width = props.width || "100%"
+  const height = "48px"
+  const fontSize = props.fontSize || 14
+  const color = props.color || "#000"
+
+  const [titleFits, setTitleFits] = useState<boolean>(false)
+  const [valueFits, setValueFits] = useState<boolean>(false)
+
+  const titleTextRef = useRef<HTMLDivElement>(null)
+  const valueTextRef = useRef<HTMLDivElement>(null)
+  const progressRef = useRef<HTMLDivElement>(null)
+  const mainDivRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+
+    if (!titleTextRef.current || !progressRef.current || !valueTextRef.current || !mainDivRef.current) return
+
+    const titleWidth = titleTextRef.current.getBoundingClientRect().width
+    const progressWidth = progressRef.current.getBoundingClientRect().width
+
+    setTitleFits(titleWidth < progressWidth - 30)
+
+    const valueWidth = valueTextRef.current.getBoundingClientRect().width
+    const restWidth = mainDivRef.current.getBoundingClientRect().width - progressWidth
+
+    setValueFits(valueWidth < restWidth)
+
+  }, [props.value])
+
+  const calculateSpanWidth = (): string => {
+    if (!props.value) return "32px"
+    const min = props.options[0].value
+    const max = props.options[props.options.length - 1].value
+    const spanWidth = `calc((((${props.value! - min}) / (${max - min})) * (100% - 32px)) + 32px)`
+    return spanWidth
+  }
+
+  return (
+    <div className="flex flex-col gap-1 w-full">
+      <div className={"flex flex-row items-center justify-between z-[200]"}>
+        <div
+          ref={titleTextRef}
+          className="relative pl-4"
+          style={{
+            top: titleFits ? "40px" : "0px",
+            transitionDuration: "0.3s"
+          }}
+        >
+          <KSpan
+            text={props.titleText || ""}
+            color={color}
+            fontSize={fontSize}
+            lineHeight="20px"
+            letterSpacing="-0.084px"
+            fontWeight={500}
+          />
+        </div>
+        <div
+          ref={valueTextRef}
+          className="relative pr-4"
+          style={{
+            top: valueFits ? "40px" : "0px",
+            transitionDuration: "0.3s"
+
+          }}
+        >
+          <KSpan
+            text={props.valueText || ""}
+            color={color}
+            fontSize={fontSize}
+            lineHeight="20px"
+            letterSpacing="-0.084px"
+            fontWeight={500}
+          />
+        </div>
+      </div>
+
+      <div ref={mainDivRef} className="inline-block bg-[#f7f7f7] rounded-[8px] relative z-0" style={{ width, height }}>
+        <span className="w-full flex justify-between absolute top-0  z-0 items-center" style={{ height }} />
+        <span
+          ref={progressRef}
+          className="block items-center z-50 top-0 relative"
+          style={{
+            height,
+            width: calculateSpanWidth(),
+            borderRadius: "8px",
+            backgroundColor: "rgba(102, 102, 102, 0.05)"
+          }}
+        >
+          <span className="flex justify-center h-4 w-4 absolute right-2 top-4 z-[1000]">
+            <img src={ThumbIcon} alt="thumb" className="" />
+          </span>
+        </span>
+        <input
+          disabled={disabled}
+          style={{ width, height }}
+          className={"k-slider-label-input absolute top-0 !z-50"}
+          onChange={(e) => {
+            const option = props.options.find((option) => option.value.toString() === e.target.value)
+            if (option) return props.onChange(option)
+          }}
+          value={props.value}
+          type="range"
+          min={props.options[0].value}
+          max={props.options[props.options.length - 1].value}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default KSliderLabel

package/src/components/KSliderLabel/index.ts

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

package/src/components/KSpan/KSpan.stories.tsx

@@ -1,17 +1,37 @@
-import {Meta, StoryFn} from "@storybook/react";
-import KButton from "./KSpan";
-import KSpan from "./KSpan";
+import { Meta, StoryFn } from "@storybook/react"
+import KSpan from "./KSpan"
 
 export default {
   title: "ReactComponentLibrary/KSpan",
   component: KSpan,
-} as Meta<typeof KSpan>;
+  parameters: {
+    layout: "centered"
+  }
+} as Meta<typeof KSpan>
 
-const Template: StoryFn<typeof KButton> = (args) => <KButton {...args} />;
+const Template: StoryFn<typeof KSpan> = (args) => <KSpan {...args} />
 
-export const SpanTest = Template.bind({});
-SpanTest.args = {
-  text: "Spanning :))!",
-  theme: "primary",
-  testIdPrefix: "rating",
-};
+export const KSpanPrimary = Template.bind({})
+KSpanPrimary.args = {
+  text: "Hello World",
+  fontSize: 14,
+  color: "#737373",
+  fontWeight: 400,
+  lineHeight: "20px",
+  fontStyle: "normal",
+  letterSpacing: "-0.084px",
+  textDecoration: "underline"
+}
+
+
+export const KSpanHoverText = Template.bind({})
+KSpanHoverText.args = {
+  text: "Hello World",
+  fontSize: 14,
+  fontWeight: 400,
+  lineHeight: "20px",
+  color: "#111",
+  fontStyle: "normal",
+  letterSpacing: "-0.084px",
+  hoverText: "Hover"
+}