kahuna-base-react-components 1.1.1 → 1.1.3

package/dist/types.d.ts

@@ -124,6 +124,7 @@ interface KTextAreaProps {
     iconSize?: string;
     checked?: boolean;
     maxHeight?: number;
+    clearTextOnPressedEnter?: boolean;
 }
 declare const KTextArea: React.FC<KTextAreaProps>;
 
@@ -178,6 +179,7 @@ declare const KSlider: React.FC<KSliderProps>;
 interface KSelectDateProps {
     value: Date | undefined;
     onChange: (date: Date | undefined) => void;
+    minimumDate?: Date;
 }
 declare const KSelectDate: React.FC<KSelectDateProps>;
 

package/package.json

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

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

@@ -14,7 +14,7 @@ const KSelectDateWrapper: React.FC<KSelectDateProps> = (args) => {
 
   const [selectedDate, setSelectedDate] = useState<Date | undefined>(undefined)
   useEffect(() => {
-    console.log("selectedDate: ", selectedDate)
+    // console.log("selectedDate: ", selectedDate)
   }, [selectedDate])
 
   return (
@@ -22,14 +22,14 @@ const KSelectDateWrapper: React.FC<KSelectDateProps> = (args) => {
       {...args}
       value={selectedDate}
       onChange={(date) => {
-        console.log("date: ", date)
+        // console.log("date: ", date)
         if (date) {
           setSelectedDate(date)
-          console.log("updating is completed: ", date)
-          console.log("updating is completed date.toISOString(): ", date?.toISOString())
+          // console.log("updating is completed: ", date)
+          // console.log("updating is completed date.toISOString(): ", date?.toISOString())
         } else {
           setSelectedDate(undefined)
-          console.log("Deleting is completed")
+          // console.log("Deleting is completed")
         }
       }}
     />
@@ -41,6 +41,7 @@ const Template: StoryFn<typeof KSelectDateWrapper> = (args) => <KSelectDateWrapp
 export const KSelectDatePrimary = Template.bind({})
 KSelectDatePrimary.args = {
   value: undefined,
+  minimumDate: new Date(new Date().getTime() + 14 * 24 * 60 * 60 * 1000),
   onChange: (value) => {
     if (value) {
       console.log("value is updated using this value:", value)

package/src/components/KSelectDate/KSelectDate.tsx

@@ -16,6 +16,7 @@ import KSpan from "../KSpan"
 export interface KSelectDateProps {
   value: Date | undefined
   onChange: (date: Date | undefined) => void
+  minimumDate?: Date
 }
 interface MonthSelectorType {
   monthName: string
@@ -107,6 +108,7 @@ const KSelectDate: React.FC<KSelectDateProps> = (props) => {
           nextLabel={<img src={RightIcon} />}
           formatShortWeekday={formatShortWeekday}
           formatMonthYear={formatMonthYear}
+          minDate={props.minimumDate || undefined}
         />
         <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
@@ -173,7 +175,7 @@ const KSelectDate: React.FC<KSelectDateProps> = (props) => {
             }
           }}
           background={inMonth ? "#111" : "#FFF"}
-          textColor={inMonth? "#FFF" : "#111"}
+          textColor={inMonth ? "#FFF" : "#111"}
           borderRadius={999}
           padding="8px 16px"
           height="34px"
@@ -183,13 +185,23 @@ const KSelectDate: React.FC<KSelectDateProps> = (props) => {
   }
 
   const daySelector = (text: string, date: Date) => {
+    const dateNotAllowed = props.minimumDate && date < props.minimumDate
     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`}
+        className={`w-[85px] h-[104px] flex flex-col justify-between py-3 px-2.5 rounded-[10px] cursor-pointer`}
+        style={{
+          background: dateNotAllowed
+            ? "rgb(170, 170, 170, 0.7)"
+            : date.getTime() === value?.getTime()
+            ? "#F8FEA3"
+            : "#F5F5F5"
+        }}
         onClick={() => {
+          if (dateNotAllowed) {
+            return
+          }
+
           if (date.getTime() === value?.getTime()) {
             setValue(undefined)
           } else {
@@ -228,6 +240,8 @@ const KSelectDate: React.FC<KSelectDateProps> = (props) => {
   useEffect(() => {
     if (value) {
       setDummyDate(value)
+    } else if (props.minimumDate) {
+      setDummyDate(props.minimumDate)
     }
     props.onChange(value)
   }, [value])
@@ -235,14 +249,19 @@ const KSelectDate: React.FC<KSelectDateProps> = (props) => {
   useEffect(() => {
     const today = new Date()
     if (!props.value) {
-      getNextMonths(today)
-      getWeekDays(today)
+      getNextMonths(props.minimumDate || today)
+      getWeekDays(props.minimumDate || today)
     }
   }, [])
-  
+
   useEffect(() => {
-    getNextMonths(dummyDate)
-    getWeekDays(dummyDate)
+    if (dummyDate && props.minimumDate && dummyDate < props.minimumDate) {
+      getNextMonths(props.minimumDate)
+      getWeekDays(props.minimumDate)
+    } else {
+      getNextMonths(dummyDate)
+      getWeekDays(dummyDate)
+    }
   }, [dummyDate])
 
   return (

package/src/components/KTextArea/KTextArea.stories.tsx

@@ -24,14 +24,18 @@ KTextAreaPrimary.args = {
     if (event.key === "Enter") {
       console.log("Enter is clicked and our value is:", event.currentTarget)
     }
+    if (event.key === "Enter" && event.shiftKey) {
+      console.log("Enter and shift is clicked ")
+    }
   },
   placeholder: "Placeholder...",
   hoverBackground: "white",
   width: 200,
   height: 20,
   leftIcon: TracksIcon,
-  activeBackground: "#FFF"
-
+  activeBackground: "#FFF",
+  maxHeight: 200,
+  clearTextOnPressedEnter: true
 }
 
 export const KTextAreaLeftIcon = Template.bind({})

package/src/components/KTextArea/KTextArea.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, KeyboardEvent } from "react"
+import React, { useEffect, useState, KeyboardEvent, useRef } from "react"
 import "../../main.css"
 
 export interface KTextAreaProps {
@@ -29,12 +29,15 @@ export interface KTextAreaProps {
   iconSize?: string
   checked?: boolean
   maxHeight?: number
+  clearTextOnPressedEnter?: boolean
 }
 
 const KTextArea: React.FC<KTextAreaProps> = (props) => {
   const [background, setBackground] = useState("#F5F5F5")
   const [hover, setHover] = useState(false)
 
+  const textAreaRef = useRef<HTMLTextAreaElement>(null)
+
   useEffect(() => {
     const emptyBackground = props.background || "#F5F5F5"
     const activeBackground = props.activeBackground || "#FFF"
@@ -63,11 +66,14 @@ const KTextArea: React.FC<KTextAreaProps> = (props) => {
 
   const autoResize = props.maxHeight && props.maxHeight !== props.height
   const maxHeight = props.maxHeight || 200
+  const clearTextOnPressedEnter = props.clearTextOnPressedEnter || false
 
   const handleInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const textarea = e.target
-    textarea.style.height = "auto"
-    textarea.style.height = `${textarea.scrollHeight}px` // Set the height to scrollHeight
+    if (textAreaRef.current) {
+      const textarea = textAreaRef.current
+      textarea.style.height = "auto"
+      textarea.style.height = `${textarea.scrollHeight}px` // Set the height to scrollHeight
+    }
   }
 
   return (
@@ -93,6 +99,7 @@ const KTextArea: React.FC<KTextAreaProps> = (props) => {
       )}
 
       <textarea
+        ref={textAreaRef}
         className={"k-input"}
         style={{
           background: hover ? hoverBackground : background,
@@ -121,6 +128,20 @@ const KTextArea: React.FC<KTextAreaProps> = (props) => {
         }}
         onKeyDown={(event) => {
           if (props.onKeyDown) props.onKeyDown(event)
+
+          if (event.key === "Enter") {
+            if (event.shiftKey) {
+              return
+            } else if (textAreaRef.current && clearTextOnPressedEnter) {
+              event.preventDefault()
+              const textAreaComponent = textAreaRef.current
+              textAreaComponent.style.height = "auto"
+              textAreaComponent.style.height = `${height}px`
+              textAreaComponent.value = ""
+            } else {
+              event.preventDefault()
+            }
+          }
         }}
       />