kahuna-base-react-components 1.2.8 → 1.2.10

package/dist/types.d.ts

@@ -1,5 +1,6 @@
 import React, { CSSProperties, KeyboardEvent } from 'react';
 import { MultiValue } from 'react-select';
+import { TileDisabledFunc } from 'react-calendar';
 
 interface KButtonProps {
     onClick: () => void;
@@ -212,13 +213,17 @@ interface KSelectDateProps {
     position?: "top" | "bottom" | "left" | "right";
     align?: "top" | "bottom" | "left" | "right" | "center";
     hideBackdrop?: boolean;
+    isTileDisabled?: TileDisabledFunc;
+    applyUndefinedValue?: boolean;
+    buttonText?: string;
 }
 declare const KSelectDate: React.FC<KSelectDateProps>;
 
 interface KTooltipProps {
     children: React.ReactNode;
     content: React.ReactNode;
-    position?: string;
+    position?: "top" | "bottom" | "left" | "right";
+    align?: "top" | "bottom" | "left" | "right" | "center";
     backgroundColor?: string;
     width?: string;
     height?: string;
@@ -229,6 +234,8 @@ interface KTooltipProps {
     showArrow?: boolean;
     arrowColor?: string;
     padding?: string;
+    marginTop?: string;
+    marginLeft?: string;
 }
 declare const KTooltip: React.FC<KTooltipProps>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kahuna-base-react-components",
-  "version": "1.2.8",
+  "version": "1.2.10",
   "description": "Kahuna Base React Components",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/src/components/KDropdown/KDropdown.stories.tsx

@@ -79,6 +79,7 @@ KDropdownSingle.args = {
   placeholder: "Select single...",
   isClearable: true,
   isEllipsis: true,
+  selected: {label: "1", value: 1},
   allowContainerShrink: true,
   hideChosenOptionIcon: true,
   onBlur: (value: any) => {

package/src/components/KDropdown/KDropdown.tsx

@@ -73,6 +73,7 @@ const KDropdown: React.FC<KDropdownProps> = (props) => {
 
     setBackground(background)
     setBorder(border)
+    setSelectedOption(props.selected)
   }, [props.selected])
 
   const width = props.width || "100%"
@@ -242,6 +243,7 @@ const KDropdown: React.FC<KDropdownProps> = (props) => {
         }}
         filterOption={customFilterOption}
         isClearable={isClearable}
+        value={selectedOption}
         hideSelectedOptions={!isMulti ? false : showOnlyIconsInMulti ? false : true}
         styles={{
           control: (baseStyles, state) => ({

package/src/components/KSelectDate/KSelectDate.stories.tsx

@@ -18,6 +18,20 @@ const KSelectDateWrapper: React.FC<KSelectDateProps> = (args) => {
   useEffect(() => {
     // console.log("selectedDate: ", selectedDate)
   }, [selectedDate])
+  const periods = [
+    { value: "202401", label: "202401" },
+    { value: "202402", label: "202402" },
+    { value: "202403", label: "202403" },
+    { value: "202404", label: "202404" },
+    { value: "202405", label: "202405"}]
+  const isTileDisabled = ({ date }: { date: Date }) => {
+    const year = date.getFullYear()
+    const month = (date.getMonth() + 1).toString().padStart(2, "0")
+    const formattedDate = `${year}${month}` // Format as YYYYMM
+    const includedPeriods = periods.map((period) => String(period.value))
+
+    return !includedPeriods.includes(formattedDate) // Disable if not in the array
+  }
 
   return (
     <div className=" flex flex-row gap-4 items-center">
@@ -28,6 +42,7 @@ const KSelectDateWrapper: React.FC<KSelectDateProps> = (args) => {
           <KSelectDate
             {...args}
             value={selectedDate}
+            isTileDisabled={isTileDisabled}
             onChange={(date) => {
               // console.log("date: ", date)
               if (date) {
@@ -40,6 +55,7 @@ const KSelectDateWrapper: React.FC<KSelectDateProps> = (args) => {
               }
             }}
             anchorToButton
+            
           />
           <KSelectDate
             {...args}
@@ -87,5 +103,6 @@ KSelectDateHoverText.args = {
   boxShadow: "none",
   borderRadius: 22,
   icon: CalendarNewIcon,
-  hideBody: true
+  hideBody: true,
+  onlyMonthSelection: true
 }

package/src/components/KSelectDate/KSelectDate.tsx

@@ -1,5 +1,5 @@
-import React, { CSSProperties, useEffect, useState } from "react"
-import Calendar from "react-calendar"
+import React, { useEffect, useState } from "react"
+import Calendar, { TileDisabledFunc } from "react-calendar"
 import "./CalendarCustom.css"
 //@ts-ignore
 import LeftIcon from "../../assets/chevron-left.svg"
@@ -8,8 +8,6 @@ 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"
@@ -35,6 +33,9 @@ export interface KSelectDateProps {
   position?: "top" | "bottom" | "left" | "right" // position of the calendar relative to the button's position, has effect as long as anchorButton is true
   align?: "top" | "bottom" | "left" | "right" | "center" // lets to align the calendar, has effect as long as anchorButton is true
   hideBackdrop?: boolean
+  isTileDisabled?: TileDisabledFunc
+  applyUndefinedValue?: boolean // if this prop's value is false, makes the Apply button disabled when chosen date is undefined
+  buttonText?: string
 }
 interface MonthSelectorType {
   monthName: string
@@ -77,6 +78,7 @@ const KSelectDate: React.FC<KSelectDateProps> = (props) => {
   const align = props.align || "center"
 
   const hideBackdrop = props.hideBackdrop || false
+  const applyUndefinedValue = props.applyUndefinedValue !== undefined ? props.applyUndefinedValue : true
 
   const formatShortWeekday = (locale: string | undefined, date: Date): string => {
     return date.toLocaleDateString(locale, { weekday: "short" }).charAt(0) // Return only the first letter of the weekday
@@ -157,6 +159,7 @@ const KSelectDate: React.FC<KSelectDateProps> = (props) => {
           formatShortWeekday={formatShortWeekday}
           formatMonthYear={formatMonthYear}
           minDate={props.minimumDate || undefined}
+          {...(props.isTileDisabled && { tileDisabled: props.isTileDisabled })}
         />
         <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
@@ -174,6 +177,7 @@ const KSelectDate: React.FC<KSelectDateProps> = (props) => {
             height="44px"
             width="160px"
             background="#000"
+            disabled={!applyUndefinedValue && !calendarDate}
             textColor="#FFF"
             onClick={() => {
               setValue(calendarDate)
@@ -313,7 +317,7 @@ const KSelectDate: React.FC<KSelectDateProps> = (props) => {
   return (
     <React.Fragment>
       {openCalendar && !hideBackdrop && (
-        <div className="w-[100vw] h-[100vh] fixed left-0 top-0 z-[49] bg-[#0000004d]"/>
+        <div className="w-[100vw] h-[100vh] fixed left-0 top-0 z-[49] bg-[#0000004d]" />
       )}
       {openCalendar && (!hideBody || !anchorToButton) && (
         <div className="w-[100vw] h-[100vh] fixed left-0 top-0 flex items-center justify-center z-50">
@@ -391,7 +395,8 @@ const KSelectDate: React.FC<KSelectDateProps> = (props) => {
             }}
           >
             <KButton
-              icon={icon}
+              {...(props.buttonText ? { leftIcon: icon } : { icon })}
+              {...(props.buttonText && { text: props.buttonText })}
               onClick={() => {
                 if (openCalendar) {
                   setOpenCalendar(false)

package/src/components/KTooltip/KTooltip.stories.tsx

@@ -27,6 +27,7 @@ KTooltipPrimary.args = {
     </div>
   ),
   position: "top",
+  align: "right",
   zIndex: 1000,
   arrowColor: "green",
   showArrow: true,

package/src/components/KTooltip/KTooltip.tsx

@@ -4,7 +4,8 @@ import "../../main.css"
 export interface KTooltipProps {
   children: React.ReactNode
   content: React.ReactNode
-  position?: string
+  position?: "top" | "bottom" | "left" | "right"
+  align?: "top" | "bottom" | "left" | "right" | "center"
   backgroundColor?: string
   width?: string
   height?: string
@@ -15,6 +16,8 @@ export interface KTooltipProps {
   showArrow?: boolean
   arrowColor?: string
   padding?: string
+  marginTop?: string // position and align is used to position the tooltip. for additional changes in vertical positioning use this prop
+  marginLeft?: string // position and align is used to position the tooltip. for minor changes in horizontal positioning use this prop
 }
 
 const KTooltip: React.FC<KTooltipProps> = (props) => {
@@ -24,6 +27,7 @@ const KTooltip: React.FC<KTooltipProps> = (props) => {
   const hideTooltip = () => setIsVisible(false)
 
   const position = props.position || "top"
+  const align = props.align || "center"
   const width = props.width || "auto"
   const height = props.height || "auto"
   const background = props.backgroundColor || "#FFF"
@@ -41,17 +45,35 @@ const KTooltip: React.FC<KTooltipProps> = (props) => {
   const padding = props.padding || "5px"
 
   const baseStyles = { width, height, background, zIndex, border, borderRadius, boxShadow }
+
+  const absolutePositionClassName = (position: string, align: string) => {
+    const finalPosition = position
+    let finalAlign = align
+    if (finalPosition === "top" || finalPosition === "bottom") {
+      finalAlign = align === "top" || align === "bottom" ? "center" : align
+    } else if (finalPosition === "left" || finalPosition === "right") {
+      finalAlign = align === "left" || align === "right" ? "center" : align
+    }
+    return `k-tooltip-position-${finalPosition}-${finalAlign}`
+  }
+
   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}
+        className={`${absolutePositionClassName(position, align)} absolute ${
+          isVisible ? "k-tooltip-enter" : "k-tooltip-exit"
+        }`}
+        style={{
+          ...baseStyles,
+          ...(props.marginTop && { marginTop: `${props.marginTop}` }),
+          ...(props.marginLeft && { marginLeft: `${props.marginLeft}` })
+        }}
       >
         <div
           style={{
-            padding: padding,
+            padding,
             borderRadius,
             background
           }}

package/src/main.css

@@ -124,35 +124,6 @@
     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;
@@ -254,3 +225,71 @@
     background: #F7F7F7 !important;
     border: none !important;
 }
+.k-tooltip-position-bottom-center {
+    top: 100%;
+    margin-top: 10px;
+    left:50%;
+    transform: translateX(-50%);
+}
+.k-tooltip-position-bottom-left {
+    top: 100%;
+    margin-top: 10px;
+    left:0%;
+    transform: translateX(-100%);
+}
+.k-tooltip-position-bottom-right {
+    top: 100%;
+    margin-top: 10px;
+    left:100%;
+}
+.k-tooltip-position-top-center {
+    bottom: 100%;
+    margin-bottom: 10px;
+    left:50%;
+    transform: translateX(-50%);
+}
+.k-tooltip-position-top-left {
+    bottom: 100%;
+    margin-bottom: 10px;
+    left:0%;
+    transform: translateX(-100%);
+}
+.k-tooltip-position-top-right {
+    bottom: 100%;
+    margin-bottom: 10px;
+    left:100%;
+}
+.k-tooltip-position-left-center {
+    top: 50%;
+    right: 100%;
+    transform: translateY(-50%);
+    margin-right: 10px;
+}
+.k-tooltip-position-left-top {
+    top: 0%;
+    right: 100%;
+    transform: translateY(-100%);
+    margin-right: 10px;
+}
+.k-tooltip-position-left-bottom {
+    top: 100%;
+    right: 100%;
+    margin-right: 10px;
+}
+.k-tooltip-position-right-center {
+    top: 50%;
+    left: 100%;
+    transform: translateY(-50%);
+    margin-left: 10px;
+}
+.k-tooltip-position-right-top {
+    top: 0%;
+    left: 100%;
+    transform: translateY(-100%);
+    margin-left: 10px;
+}
+.k-tooltip-position-right-bottom {
+    top: 100%;
+    left: 100%;
+    margin-left: 10px;
+}