kahuna-base-react-components 0.2.11 → 0.2.13

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

@@ -0,0 +1,94 @@
+import { Meta, StoryFn } from "@storybook/react"
+import KTooltip, { KTooltipProps } from "./KTooltip"
+import KSpan from "../KSpan"
+
+export default {
+  title: "ReactComponentLibrary/KTooltip",
+  component: KTooltip,
+  parameters: {
+    layout: "centered"
+  }
+} as Meta<typeof KTooltip>
+
+const Template: StoryFn<KTooltipProps> = (args) => (
+  <KTooltip {...args}>
+    <div className="bg-red-200 w-[200px] aspect-square rounded-full flex items-center justify-center">
+      Tooltip Children
+    </div>{" "}
+    {/* Here we place the children directly */}
+  </KTooltip>
+)
+
+export const KTooltipPrimary = Template.bind({})
+KTooltipPrimary.args = {
+  content: (
+    <div className="bg-red-100 flex justify-center items-center">
+      <div className="bg-green-300 font-extrabold ">BURADA</div>
+    </div>
+  ),
+  position: "top",
+  zIndex: 1000,
+  arrowColor: "green",
+  showArrow: true,
+  padding: "10px",
+  border: "1px solid red"
+  //boxShadow: "3px 3px 10px #000",
+  //borderRadius: "100px",
+}
+
+export const KTooltipSecondary = Template.bind({})
+KTooltipPrimary.args = {
+  content: (
+    <div className="flex flex-col gap-2 justify-center items-start px-4 py-2">
+      <div
+        className="flex flex-row gap-1 whitespace-nowrap items-center"
+        style={{
+          opacity: true ? "1" : "0.3"
+        }}
+      >
+        <span className="bg-[#21A494] px-0.5 py-1 flex items-center justify-center w-9 rounded-[3px]">
+          <KSpan text="16-Bit" fontSize={10} lineHeight="10px" fontWeight={600} color="#FFF" />
+        </span>
+        {true ? (
+          <KSpan text="Added" fontSize={12} lineHeight="12px" color="#1F1F1F" fontWeight={600} />
+        ) : (
+          <KSpan text="No File" fontSize={12} lineHeight="12px" color="#1F1F1F" fontWeight={600}></KSpan>
+        )}
+      </div>
+      <div
+        className="flex flex-row gap-1 whitespace-nowrap items-center"
+        style={{
+          opacity: true ? "1" : "0.3"
+        }}
+      >
+        <span className="bg-[#BBCC13] px-0.5 py-1 flex items-center justify-center w-9 rounded-[3px]">
+          <KSpan text="24-Bit" fontSize={10} lineHeight="10px" fontWeight={600} color="#FFF" />
+        </span>
+        {true ? (
+          <KSpan text="Added" fontSize={12} lineHeight="12px" color="#1F1F1F" fontWeight={600} />
+        ) : (
+          <KSpan text="No File" fontSize={12} lineHeight="12px" color="#1F1F1F" fontWeight={600}></KSpan>
+        )}
+      </div>
+      <div
+        className="flex flex-row gap-1 whitespace-nowrap items-center"
+        style={{
+          opacity: true ? "1" : "0.3"
+        }}
+      >
+        <span className="bg-[#30272C] px-0.5 py-1 flex items-center justify-center w-9 rounded-[3px]">
+          <KSpan text="Dolby" fontSize={10} lineHeight="10px" fontWeight={600} color="#FFF" />
+        </span>
+        {true ? (
+          <KSpan text="Added" fontSize={12} lineHeight="12px" color="#1F1F1F" fontWeight={600}></KSpan>
+        ) : (
+          <KSpan text="No File" fontSize={12} lineHeight="12px" color="#1F1F1F" fontWeight={600}></KSpan>
+        )}
+      </div>
+    </div>
+  ),
+  arrowColor: "red",
+  padding: "0px"
+  //boxShadow: "3px 3px 10px #000",
+  //borderRadius: "100px",
+}

package/src/components/KTooltip/KTooltip.tsx

@@ -0,0 +1,67 @@
+import React, { useState } from "react"
+import "../../main.css"
+
+export interface KTooltipProps {
+  children: React.ReactNode
+  content: React.ReactNode
+  position?: string
+  backgroundColor?: string
+  width?: string
+  height?: string
+  zIndex?: number
+  border?: string
+  borderRadius?: string
+  boxShadow?: string
+  showArrow?: boolean
+  arrowColor?: string
+  padding?: string
+}
+
+const KTooltip: React.FC<KTooltipProps> = (props) => {
+  const [isVisible, setIsVisible] = useState(false)
+
+  const showTooltip = () => setIsVisible(true)
+  const hideTooltip = () => setIsVisible(false)
+
+  const position = props.position || "top"
+  const width = props.width || "auto"
+  const height = props.height || "auto"
+  const background = props.backgroundColor || "#FFF"
+  const zIndex = props.zIndex || 999999
+  const boxShadow = props.boxShadow || "none"
+  const border = props.border || "1px solid #E5E7EB"
+  const borderRadius = props.borderRadius || "5px"
+  const arrowColor =
+    props.arrowColor !== undefined
+      ? props.arrowColor
+      : props.backgroundColor !== undefined
+      ? props.backgroundColor
+      : "#F7F7F7"
+  const showArrow = props.showArrow || false
+  const padding = props.padding || "5px"
+
+  const baseStyles = { width, height, background, zIndex, border, borderRadius, boxShadow }
+  return (
+    <div className="relative box-border" onMouseEnter={showTooltip} onMouseLeave={hideTooltip}>
+      {props.children}
+
+      <div
+        className={`k-tooltip-${position} absolute ${isVisible ? "k-tooltip-enter" : "k-tooltip-exit"}`}
+        style={baseStyles}
+      >
+        <div
+          style={{
+            padding: padding,
+            borderRadius,
+            background
+          }}
+        >
+          {props.content}
+        </div>
+        {showArrow && <div className={`arrow-${position}`} style={{ backgroundColor: arrowColor, zIndex: -200 }}></div>}
+      </div>
+    </div>
+  )
+}
+
+export default KTooltip

package/src/components/KTooltip/index.ts

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

package/src/index.ts

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

package/src/main.css

@@ -46,7 +46,8 @@
     font-family: Inter;
     font-style: normal;
     font-weight: 400;
-    line-height: 20px; /* 142.857% */
+    line-height: 20px;
+    /* 142.857% */
     letter-spacing: -0.084px;
 }
 
@@ -100,11 +101,100 @@
 .k-slider-input::-webkit-slider-thumb {
     -webkit-appearance: none;
     cursor: pointer;
-    margin-top: -4px; /* Align the thumb vertically with the track */
-    width: 16px; /* Width of the thumb */
-    height: 16px; /* Height of the thumb */
+    margin-top: -4px;
+    /* Align the thumb vertically with the track */
+    width: 16px;
+    /* Width of the thumb */
+    height: 16px;
+    /* Height of the thumb */
     border-radius: 50px;
     background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'%3E%3Cg filter='url(%23filter0_di_252_33228)'%3E%3Crect x='6' y='6' width='16' height='16' rx='8' fill='white'/%3E%3Crect x='6.5' y='6.5' width='15' height='15' rx='7.5' stroke='white'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d_252_33228)'%3E%3Cpath d='M11 14C11 12.3431 12.3431 11 14 11C15.6569 11 17 12.3431 17 14C17 15.6569 15.6569 17 14 17C12.3431 17 11 15.6569 11 14Z' fill='%23B5B5B5'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_di_252_33228' x='0' y='0' width='28' height='28' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.105882 0 0 0 0 0.109804 0 0 0 0 0.113725 0 0 0 0.06 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_252_33228'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_252_33228' result='shape'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='-3'/%3E%3CfeGaussianBlur stdDeviation='1.5'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.894118 0 0 0 0 0.898039 0 0 0 0 0.905882 0 0 0 1 0'/%3E%3CfeBlend mode='normal' in2='shape' result='effect2_innerShadow_252_33228'/%3E%3C/filter%3E%3Cfilter id='filter1_d_252_33228' x='7' y='9' width='14' height='14' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='2'/%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.105882 0 0 0 0 0.109804 0 0 0 0 0.113725 0 0 0 0.04 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_252_33228'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_252_33228' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E") center / cover;
     background-size: auto;
     background-position: center;
+}
+
+.k-tooltip-top {
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-bottom: 10px;
+}
+
+.k-tooltip-right {
+    top: 50%;
+    left: 100%;
+    transform: translateY(-50%);
+    margin-left: 10px;
+}
+
+.k-tooltip-bottom {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-top: 10px;
+}
+
+.k-tooltip-left {
+    top: 50%;
+    right: 100%;
+    transform: translateY(-50%);
+    margin-right: 10px;
+}
+
+.k-tooltip-enter {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
+}
+
+.k-tooltip-exit {
+    opacity: 0;
+    pointer-events: none;
+    visibility: hidden;
+    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
+}
+
+.arrow-left {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    top: 50%;
+    left: calc(100% - 5px);
+    transform-origin: center;
+    transform: translateY(-50%) rotateZ(45deg);
+    z-index: -100;
+}
+
+.arrow-right {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    top: 50%;
+    right: calc(100% - 5px);
+    transform-origin: center;
+    transform: translateY(-50%) rotateZ(45deg);
+    z-index: -100;
+}
+
+.arrow-top {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    top: calc(100% - 5px);
+    left: 50%;
+    transform-origin: center;
+    transform: translateX(-50%) rotateZ(45deg);
+    z-index: -100;
+}
+
+.arrow-bottom {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    bottom: calc(100% - 5px);
+    left: 50%;
+    transform-origin: center;
+    transform: translateX(-50%) rotateZ(45deg);
+    z-index: -100;
 }