kahuna-base-react-components 1.2.4 → 1.2.6

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-import React, { KeyboardEvent } from 'react';
+import React, { CSSProperties, KeyboardEvent } from 'react';
 import { MultiValue } from 'react-select';
 
 interface KButtonProps {
@@ -34,6 +34,7 @@ interface KSpanProps {
     lineHeight?: string;
     fontStyle?: string;
     letterSpacing?: string;
+    hoverStyle?: CSSProperties;
     textDecoration?: string;
     ellipsis?: boolean;
 }
@@ -208,6 +209,7 @@ interface KSelectDateProps {
     anchorToButton?: boolean;
     position?: "top" | "bottom" | "left" | "right";
     align?: "top" | "bottom" | "left" | "right" | "center";
+    hideBackdrop?: boolean;
 }
 declare const KSelectDate: React.FC<KSelectDateProps>;
 
@@ -297,6 +299,7 @@ interface KSelectRangeProps {
     minimumDate?: Date;
     maximumDate?: Date;
     popupCalendarBackground?: string;
+    hideBackdrop?: boolean;
 }
 type DateRangeType = Date | null | [Date | null, Date | null];
 declare const KSelectRange: React.FC<KSelectRangeProps>;

package/package.json

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

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

@@ -3,6 +3,7 @@ import KSelectDate, { KSelectDateProps } from "./KSelectDate"
 import { useEffect, useState } from "react"
 //@ts-ignore
 import CalendarNewIcon from "../../assets/calendar-new.svg"
+import KSpan from "../KSpan"
 
 export default {
   title: "ReactComponentLibrary/KSelectDate",
@@ -13,28 +14,52 @@ export default {
 } as Meta<typeof KSelectDate>
 
 const KSelectDateWrapper: React.FC<KSelectDateProps> = (args) => {
-
   const [selectedDate, setSelectedDate] = useState<Date | undefined>(undefined)
   useEffect(() => {
     // console.log("selectedDate: ", selectedDate)
   }, [selectedDate])
 
   return (
-    <KSelectDate
-      {...args}
-      value={selectedDate}
-      onChange={(date) => {
-        // 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(undefined)
-          // console.log("Deleting is completed")
-        }
-      }}
-    />
+    <div className=" flex flex-row gap-4 items-center">
+      <div className="flex flex-row items-center justify-center w-auto h-40 z-10">
+        <KSpan text="Lorem Ipsum is simply dummy text of the printing and typesetting industry." />
+      </div>
+      <div className="flex flex-col relative">
+          <KSelectDate
+            {...args}
+            value={selectedDate}
+            onChange={(date) => {
+              // 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(undefined)
+                // console.log("Deleting is completed")
+              }
+            }}
+            anchorToButton
+          />
+          <KSelectDate
+            {...args}
+            value={selectedDate}
+            onChange={(date) => {
+              // 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(undefined)
+                // console.log("Deleting is completed")
+              }
+            }}
+            anchorToButton
+          />
+      </div>
+      <div></div>
+    </div>
   )
 }
 

package/src/components/KSelectDate/KSelectDate.tsx

@@ -34,11 +34,12 @@ export interface KSelectDateProps {
   anchorToButton?: boolean // opens the calendar relative to the button's position, does not have any effect if body is not hidden.
   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
 }
 interface MonthSelectorType {
   monthName: string
   year: string
-  date: Date,
+  date: Date
   monthIndex: string | number
 }
 interface DaySelectorType {
@@ -75,6 +76,8 @@ const KSelectDate: React.FC<KSelectDateProps> = (props) => {
   const position = props.position || "bottom"
   const align = props.align || "center"
 
+  const hideBackdrop = props.hideBackdrop || 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
   }
@@ -182,7 +185,7 @@ const KSelectDate: React.FC<KSelectDateProps> = (props) => {
     )
   }
 
-  const monthSelector = (month: string, year: string, date: Date, monthIndex:string | number) => {
+  const monthSelector = (month: string, year: string, date: Date, monthIndex: string | number) => {
     const monthText: MonthTextType = lang.common.months_short
 
     const text = `${monthText[monthIndex]}, ${year}`
@@ -309,6 +312,9 @@ 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]"/>
+      )}
       {openCalendar && (!hideBody || !anchorToButton) && (
         <div className="w-[100vw] h-[100vh] fixed left-0 top-0 flex items-center justify-center z-50">
           <div>{renderPopUpCalendar()}</div>
@@ -373,7 +379,7 @@ const KSelectDate: React.FC<KSelectDateProps> = (props) => {
       ) : (
         <div className="flex relative">
           {openCalendar && anchorToButton && (
-            <div className={`absolute ${absolutePositionClassName(position, align)}`}>
+            <div className={`absolute ${absolutePositionClassName(position, align)} z-[51]`}>
               <div>{renderPopUpCalendar()}</div>
             </div>
           )}

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

@@ -50,7 +50,25 @@ const KSelectRangeWrapper: React.FC<KSelectRangeProps> = (args) => {
           // console.log("Deleting is completed")
         }
       }}
-    /></div>
+    />
+        <div className="relative z-10">
+        <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>
+    </div>
   )
 }
 
@@ -63,10 +81,10 @@ KSelectRangePrimary.args = {
   backgroundColor: "#F7F7F7",
   hoverBackgroundColor: "#F3F3F3",
   borderRadius: 24,
-  anchorToButton:true,
   position: "top",
   align: "center",
-
+  hideBackdrop: true,
+  anchorToButton: true,
   onChange: (value) => {
     if (value) {
       console.log("value is updated using this value:", value)

package/src/components/KSelectRange/KSelectRange.tsx

@@ -30,6 +30,7 @@ export interface KSelectRangeProps {
   minimumDate?: Date
   maximumDate?: Date
   popupCalendarBackground?: string
+  hideBackdrop?: boolean
 }
 
 export type DateRangeType = Date | null | [Date | null, Date | null]
@@ -47,6 +48,7 @@ const KSelectRange: React.FC<KSelectRangeProps> = (props) => {
   const anchorToButton = props.anchorToButton || false
   const position = props.position || "bottom"
   const align = props.align || "center"
+  const hideBackdrop = props.hideBackdrop || false
 
   const [value, setValue] = useState<DateRangeType>(props.value)
   const [range, setRange] = useState<DateRangeType>(props.value)
@@ -59,6 +61,8 @@ const KSelectRange: React.FC<KSelectRangeProps> = (props) => {
     approved: -1
   })
 
+  const [openBackdrop, setOpenBackdrop] = useState<boolean>(false)
+
   const convertToMonthYear = (date: Date | null): string => {
     if (!date) return "?"
 
@@ -351,6 +355,7 @@ const KSelectRange: React.FC<KSelectRangeProps> = (props) => {
                 onClick={() => {
                   setRange(value)
                   setOpenCalendar(false)
+                  setOpenBackdrop(false)
                   const approvedIndex = shorthandIndex.approved
                   setShorthandIndex({ ...shorthandIndex, current: approvedIndex })
                   if (Array.isArray(value) && value[0] !== null) {
@@ -368,6 +373,7 @@ const KSelectRange: React.FC<KSelectRangeProps> = (props) => {
                 onClick={() => {
                   setValue(range)
                   setOpenCalendar(false)
+                  setOpenBackdrop(false)
                   const currentIndex = shorthandIndex.current
                   setShorthandIndex({ ...shorthandIndex, approved: currentIndex })
                   if (Array.isArray(range) && range[0] !== null) {
@@ -395,6 +401,9 @@ const KSelectRange: React.FC<KSelectRangeProps> = (props) => {
 
   return (
     <React.Fragment>
+      {openBackdrop && !hideBackdrop && (
+        <div className="w-[100vw] h-[100vh] fixed left-0 top-0 z-[49] bg-[#0000004d]"/>
+      )}
       {openCalendar && !anchorToButton && (
         <div
           className="w-[100vw] h-[100vh] fixed left-0 top-0 flex items-center justify-center z-50"
@@ -405,7 +414,7 @@ const KSelectRange: React.FC<KSelectRangeProps> = (props) => {
       )}
       <div className="flex relative">
         {openCalendar && anchorToButton && (
-          <div className={`absolute  ${absolutePositionClassName(position, align)}`}>
+          <div className={`absolute ${absolutePositionClassName(position, align)} z-[51]`}>
             <div>{renderPopUpCalendar()}</div>
           </div>
         )}
@@ -422,9 +431,11 @@ const KSelectRange: React.FC<KSelectRangeProps> = (props) => {
               onClick={() => {
                 if (!openCalendar) {
                   setOpenCalendar(true)
+                  setOpenBackdrop(true)
                 } else {
                   setRange(value)
                   setOpenCalendar(false)
+                  setOpenBackdrop(false)
                   const approvedIndex = shorthandIndex.approved
                   setShorthandIndex({ ...shorthandIndex, current: approvedIndex })
                   if (Array.isArray(value) && value[0] !== null) {

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

@@ -24,13 +24,20 @@ const Template: StoryFn<typeof KSpanWrapper> = (args) => <KSpanWrapper {...args}
 
 export const KSpanPrimary = Template.bind({})
 KSpanPrimary.args = {
-  text: "Hello World, how are you? Is everything alright?",
+  text: "Login",
   fontSize: 14,
-  color: "#737373",
+  color: "#1F1F1F",
   fontWeight: 400,
   lineHeight: "20px",
   fontStyle: "normal",
   letterSpacing: "-0.084px",
-  textDecoration: "underline",
-  ellipsis: true
+  textDecoration: "none",
+  ellipsis: true,
+  hoverStyle: {
+    textDecoration: "underline",
+    cursor: "pointer",
+    fontWeight: "500",
+    transitionDuration: "0.5s",
+    transitionTimingFunction: "linear"
+  }
 }

package/src/components/KSpan/KSpan.tsx

@@ -9,11 +9,13 @@ export interface KSpanProps {
   lineHeight?: string
   fontStyle?: string
   letterSpacing?: string
-  textDecoration?: string,
+  hoverStyle?: CSSProperties
+  textDecoration?: string
   ellipsis?: boolean
 }
 
 const KSpan: React.FC<KSpanProps> = (props) => {
+  const [onHover, setOnHover] = useState(false)
 
   const fontSize = props.fontSize || 14
   const color = props.color || "#737373"
@@ -21,19 +23,33 @@ const KSpan: React.FC<KSpanProps> = (props) => {
   const lineHeight = props.lineHeight || "20px"
   const fontStyle = props.fontStyle || "normal"
   const letterSpacing = props.letterSpacing || "-0.084px"
+  const hoverStyle = props.hoverStyle || {}
   const textDecoration = props.textDecoration || "none"
   const ellipsis = props.ellipsis || false
 
-  const ellipsisStyle = {overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap"}
+  const ellipsisStyle = { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }
+
+  const baseSpanStyle = {
+    fontSize,
+    color,
+    fontWeight,
+    lineHeight,
+    fontStyle,
+    letterSpacing,
+    textDecoration,
+    ...(ellipsis && ellipsisStyle)
+  }
 
   return (
     <span
-    className={"k-span"}
-    style={{ fontSize, color, fontWeight, lineHeight, fontStyle, letterSpacing, textDecoration, ...(ellipsis && ellipsisStyle)}}
-  >
-    {props.text}
-  </span>
+      className={"k-span"}
+      onMouseEnter={() => setOnHover(true)}
+      onMouseLeave={() => setOnHover(false)}
+      style={onHover ? { ...baseSpanStyle, ...hoverStyle } : { ...baseSpanStyle }}
+    >
+      {props.text}
+    </span>
   )
 }
 
-export default KSpan
+export default KSpan