kahuna-base-react-components 1.4.4 → 1.4.6

package/dist/languages/index.d.ts

@@ -28,6 +28,7 @@ export declare const getLanguageJson: () => {
         last_fourteen_days: string;
         last_twenty_eight_days: string;
         last_month: string;
+        last_two_months: string;
         last_three_months: string;
         last_six_months: string;
         last_twelve_months: string;
@@ -67,6 +68,7 @@ export declare const lang: {
         last_fourteen_days: string;
         last_twenty_eight_days: string;
         last_month: string;
+        last_two_months: string;
         last_three_months: string;
         last_six_months: string;
         last_twelve_months: string;

package/dist/types.d.ts

@@ -250,6 +250,9 @@ interface KSelectDateProps {
     isTileDisabled?: TileDisabledFunc;
     applyUndefinedValue?: boolean;
     buttonText?: string;
+    open?: boolean;
+    setOpen?: (open: boolean) => void;
+    onCancel?: () => void;
 }
 declare const KSelectDate: React.FC<KSelectDateProps>;
 
@@ -347,6 +350,7 @@ interface KSelectRangeDateProps {
     popupCalendarBackground?: string;
     hideBackdrop?: boolean;
     weeklyMode?: boolean;
+    includeLastYear?: boolean;
     shorthandEndDateOffsetDays?: number;
     weeklyModeStartDay?: number;
 }

package/package.json

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

package/src/components/KButton/KButton.stories.tsx

@@ -80,4 +80,4 @@ KButtonLeftRightMiddleIcon.args = {
   rightIcon: ChevronRightIcon,
   icon: TracksIcon,
   width: "160px"
-};
+};

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

@@ -15,9 +15,15 @@ export default {
 
 const KSelectDateWrapper: React.FC<KSelectDateProps> = (args) => {
   const [selectedDate, setSelectedDate] = useState<Date | undefined>(undefined)
+  const [open, setOpen] = useState<boolean>(false)
   useEffect(() => {
     // console.log("selectedDate: ", selectedDate)
   }, [selectedDate])
+
+  useEffect(() => {
+    console.log("open: ", open)
+  }, [open])
+
   const periods = [
     { value: "202401", label: "202401" },
     { value: "202402", label: "202402" },
@@ -59,7 +65,12 @@ const KSelectDateWrapper: React.FC<KSelectDateProps> = (args) => {
           />
           <KSelectDate
             {...args}
+            key={selectedDate?.toString()}
             value={selectedDate}
+            open={open}
+            setOpen={setOpen}
+            hideBody
+            hideBackdrop
             onChange={(date) => {
               // console.log("date: ", date)
               if (date) {
@@ -71,10 +82,15 @@ const KSelectDateWrapper: React.FC<KSelectDateProps> = (args) => {
                 // console.log("Deleting is completed")
               }
             }}
+            onCancel={() => {
+              console.log("close:::")
+            }}
             anchorToButton
           />
       </div>
-      <div></div>
+      <div className="cursor-pointer" onClick={() => {
+        setOpen(true)
+      }}>Deneme Butonu</div>
     </div>
   )
 }

package/src/components/KSelectDate/KSelectDate.tsx

@@ -36,6 +36,9 @@ export interface KSelectDateProps {
   isTileDisabled?: TileDisabledFunc
   applyUndefinedValue?: boolean // if this prop's value is false, makes the Apply button disabled when chosen date is undefined
   buttonText?: string
+  open?: boolean // Use open and setOpen props together. Opens the calendar without requiring a click on the calendar icon.
+  setOpen?: (open: boolean) => void // Use open and setOpen props together. 
+  onCancel?: () => void
 }
 interface MonthSelectorType {
   monthName: string
@@ -70,6 +73,13 @@ const KSelectDate: React.FC<KSelectDateProps> = (props) => {
   const [weekDays, setWeekDays] = useState<DaySelectorType[]>([])
   const [openCalendar, setOpenCalendar] = useState<boolean>(false)
 
+  useEffect(() => {
+    if (props.open) {
+      setOpenCalendar(true)  // Used only to open the calendar. The Cancel and Apply buttons handle closing it.
+      setCalendarDate(value)
+    }
+  }, [props.open])
+
   const onlyMonthSelection = props.onlyMonthSelection || false
   const hideBody = props.hideBody || false
 
@@ -170,6 +180,8 @@ const KSelectDate: React.FC<KSelectDateProps> = (props) => {
             textColor="#111"
             onClick={() => {
               setOpenCalendar(false)
+              if (props.setOpen) props.setOpen(false)
+              if (props.onCancel) props.onCancel()
             }}
           />
           <KButton
@@ -182,6 +194,7 @@ const KSelectDate: React.FC<KSelectDateProps> = (props) => {
             onClick={() => {
               setValue(calendarDate)
               setOpenCalendar(false)
+              if (props.setOpen) props.setOpen(false)
             }}
           />
         </div>
@@ -400,6 +413,7 @@ const KSelectDate: React.FC<KSelectDateProps> = (props) => {
               onClick={() => {
                 if (openCalendar) {
                   setOpenCalendar(false)
+                  if (props.setOpen) props.setOpen(false)
                 } else {
                   setOpenCalendar(true)
                   setCalendarDate(value)

package/src/components/KSelectRangeDate/KSelectRangeDate.tsx

@@ -32,6 +32,7 @@ export interface KSelectRangeDateProps {
   popupCalendarBackground?: string
   hideBackdrop?: boolean
   weeklyMode?: boolean
+  includeLastYear?: boolean
   shorthandEndDateOffsetDays?: number
   weeklyModeStartDay?: number // Day the weekly range should start from (0=Sun...6=Sat); defaults to a rolling 7-day range if unset.
 }
@@ -115,7 +116,6 @@ const KSelectRangeDate: React.FC<KSelectRangeDateProps> = (props) => {
 
     const delta = props.shorthandEndDateOffsetDays ?? 0
 
-
     const endDate = new Date(year, month, day - delta)
     const startDate = new Date(year, month, day - delta - (range - 1))
     setRange([startDate, endDate])
@@ -303,7 +303,7 @@ const KSelectRangeDate: React.FC<KSelectRangeDateProps> = (props) => {
       <div className="flex flex-row">
         {!props.weeklyMode && (
           <div
-            className="w-[160px] bg-[#FFF] flex flex-col items-center gap-2 justify-start px-2.5 pt-5 pb-4 border-r-0"
+            className="w-[160px] bg-[#FFF] flex flex-col items-center gap-2 justify-start px-2.5 pt-5 pb-4 border-r-0 overflow-y-auto"
             style={{
               border: "1px solid #F3F3F3",
               borderRightWidth: "0px",
@@ -311,34 +311,39 @@ const KSelectRangeDate: React.FC<KSelectRangeDateProps> = (props) => {
               borderBottomLeftRadius: "16px"
             }}
           >
-            <KButton
-              onClick={() => {
-                shorthandDateSelection(2)
-                setShorthandIndex({ ...shorthandIndex, current: 0 })
-              }}
-              width="140px"
-              background={shorthandIndex.current === 0 ? "#F7F7F7" : "#FFF"}
-              textColor={shorthandIndex.current === 0 ? "#000" : "#999"}
-              text={lang.button_text.yesterday}
-              borderRadius={8}
-              shadowDisabled
-              hoverBackground="#F0F0F0"
-              height="40px"
-            />
-            <KButton
-              onClick={() => {
-                shorthandDateSelection(3)
-                setShorthandIndex({ ...shorthandIndex, current: 1 })
-              }}
-              width="140px"
-              background={shorthandIndex.current === 1 ? "#F7F7F7" : "#FFF"}
-              textColor={shorthandIndex.current === 1 ? "#000" : "#999"}
-              text={lang.button_text.last_three_days}
-              borderRadius={8}
-              shadowDisabled
-              hoverBackground="#F0F0F0"
-              height="40px"
-            />
+            {!props.includeLastYear && (
+              <KButton
+                onClick={() => {
+                  shorthandDateSelection(2)
+                  setShorthandIndex({ ...shorthandIndex, current: 0 })
+                }}
+                width="140px"
+                background={shorthandIndex.current === 0 ? "#F7F7F7" : "#FFF"}
+                textColor={shorthandIndex.current === 0 ? "#000" : "#999"}
+                text={lang.button_text.yesterday}
+                borderRadius={8}
+                shadowDisabled
+                hoverBackground="#F0F0F0"
+                height="40px"
+              />
+            )}
+            {!props.includeLastYear && (
+              <KButton
+                onClick={() => {
+                  shorthandDateSelection(3)
+                  setShorthandIndex({ ...shorthandIndex, current: 1 })
+                }}
+                width="140px"
+                background={shorthandIndex.current === 1 ? "#F7F7F7" : "#FFF"}
+                textColor={shorthandIndex.current === 1 ? "#000" : "#999"}
+                text={lang.button_text.last_three_days}
+                borderRadius={8}
+                shadowDisabled
+                hoverBackground="#F0F0F0"
+                height="40px"
+              />
+            )}
+
             <KButton
               onClick={() => {
                 shorthandDateSelection(7)
@@ -381,6 +386,70 @@ const KSelectRangeDate: React.FC<KSelectRangeDateProps> = (props) => {
               hoverBackground="#F0F0F0"
               height="40px"
             />
+            {props.includeLastYear && (
+              <KButton
+                onClick={() => {
+                  shorthandDateSelection(60)
+                  setShorthandIndex({ ...shorthandIndex, current: 5 })
+                }}
+                width="140px"
+                background={shorthandIndex.current === 5 ? "#F7F7F7" : "#FFF"}
+                textColor={shorthandIndex.current === 5 ? "#000" : "#999"}
+                text={lang.button_text.last_two_months}
+                borderRadius={8}
+                shadowDisabled
+                hoverBackground="#F0F0F0"
+                height="40px"
+              />
+            )}
+            {props.includeLastYear && (
+              <KButton
+                onClick={() => {
+                  shorthandDateSelection(90)
+                  setShorthandIndex({ ...shorthandIndex, current: 6 })
+                }}
+                width="140px"
+                background={shorthandIndex.current === 6 ? "#F7F7F7" : "#FFF"}
+                textColor={shorthandIndex.current === 6 ? "#000" : "#999"}
+                text={lang.button_text.last_three_months}
+                borderRadius={8}
+                shadowDisabled
+                hoverBackground="#F0F0F0"
+                height="40px"
+              />
+            )}
+            {props.includeLastYear && (
+              <KButton
+                onClick={() => {
+                  shorthandDateSelection(180)
+                  setShorthandIndex({ ...shorthandIndex, current: 7 })
+                }}
+                width="140px"
+                background={shorthandIndex.current === 7 ? "#F7F7F7" : "#FFF"}
+                textColor={shorthandIndex.current === 7 ? "#000" : "#999"}
+                text={lang.button_text.last_six_months}
+                borderRadius={8}
+                shadowDisabled
+                hoverBackground="#F0F0F0"
+                height="40px"
+              />
+            )}
+            {props.includeLastYear && (
+              <KButton
+                onClick={() => {
+                  shorthandDateSelection(365)
+                  setShorthandIndex({ ...shorthandIndex, current: 8 })
+                }}
+                width="140px"
+                background={shorthandIndex.current === 8 ? "#F7F7F7" : "#FFF"}
+                textColor={shorthandIndex.current === 8 ? "#000" : "#999"}
+                text={lang.button_text.last_twelve_months}
+                borderRadius={8}
+                shadowDisabled
+                hoverBackground="#F0F0F0"
+                height="40px"
+              />
+            )}
           </div>
         )}
         <div

package/src/languages/en.json

@@ -26,6 +26,7 @@
         "last_fourteen_days": "Last 14 days",
         "last_twenty_eight_days": "Last 28 days",
         "last_month": "Last Month",
+        "last_two_months": "Last 2 months",
         "last_three_months": "Last 3 months",
         "last_six_months": "Last 6 months",
         "last_twelve_months": "Last 12 months",

package/src/languages/tr.json

@@ -26,6 +26,7 @@
         "last_fourteen_days": "Son 14 gün",
         "last_twenty_eight_days": "Son 28 gün",
         "last_month": "Son ay",
+        "last_two_months": "Son 2 ay",
         "last_three_months": "Son 3 ay",
         "last_six_months": "Son 6 ay",
         "last_twelve_months": "Son 12 ay",

package/dist/components/KButton/KButton.stories.d.ts

@@ -1,10 +0,0 @@
-import { Meta } from "@storybook/react";
-import KButton from "./KButton";
-declare const _default: Meta<typeof KButton>;
-export default _default;
-export declare const KButtonText: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./KButton").KButtonProps>;
-export declare const KButtonIcon: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./KButton").KButtonProps>;
-export declare const KButtonLeftIconText: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./KButton").KButtonProps>;
-export declare const KButtonRightIconText: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./KButton").KButtonProps>;
-export declare const KButtonLeftRightIconText: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./KButton").KButtonProps>;
-export declare const KButtonLeftRightMiddleIcon: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./KButton").KButtonProps>;

package/dist/components/KCodeInput/KCodeInput.stories.d.ts

@@ -1,7 +0,0 @@
-import { Meta } from "@storybook/react";
-import KCodeInput, { KCodeInputProps } from "./KCodeInput";
-declare const _default: Meta<typeof KCodeInput>;
-export default _default;
-export declare const KCodeInputPrimary: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, KCodeInputProps>;
-export declare const KCodeInputSecondary: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, KCodeInputProps>;
-export declare const KCodeInputDefault: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, KCodeInputProps>;

package/dist/components/KDropdown/KDropdown.stories.d.ts

@@ -1,9 +0,0 @@
-import { Meta } from "@storybook/react";
-import KDropdown, { KDropdownProps } from "./KDropdown";
-declare const _default: Meta<typeof KDropdown>;
-export default _default;
-export declare const KDropdownSingle: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, KDropdownProps>;
-export declare const KDropdownMulti: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, KDropdownProps>;
-export declare const KDropdownLeftIcon: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, KDropdownProps>;
-export declare const KDropdownRightIcon: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, KDropdownProps>;
-export declare const KDropdownLeftRightIcon: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, KDropdownProps>;

package/dist/components/KInput/KInput.stories.d.ts

@@ -1,10 +0,0 @@
-import { Meta } from "@storybook/react";
-import KInput, { KInputProps } from "./KInput";
-declare const _default: Meta<typeof KInput>;
-export default _default;
-export declare const KInputPrimary: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, KInputProps>;
-export declare const KInputRange: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, KInputProps>;
-export declare const KInputCheckbox: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, KInputProps>;
-export declare const KInputLeftIcon: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, KInputProps>;
-export declare const KInputRightIcon: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, KInputProps>;
-export declare const KInputLeftRightIcon: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, KInputProps>;

package/dist/components/KLogo/KLogo.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta } from "@storybook/react";
-import KLogo from "./KLogo";
-declare const _default: Meta<typeof KLogo>;
-export default _default;
-export declare const KLogoText: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./KLogo").KLogoProps>;
-export declare const KLogoHover: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./KLogo").KLogoProps>;

package/dist/components/KSelectDate/KSelectDate.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta } from "@storybook/react";
-import KSelectDate, { KSelectDateProps } from "./KSelectDate";
-declare const _default: Meta<typeof KSelectDate>;
-export default _default;
-export declare const KSelectDatePrimary: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, KSelectDateProps>;
-export declare const KSelectDateHoverText: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, KSelectDateProps>;

package/dist/components/KSelectRange/KSelectRange.stories.d.ts

@@ -1,7 +0,0 @@
-import { Meta } from "@storybook/react";
-import KSelectRange, { KSelectRangeProps } from "./KSelectRange";
-declare const _default: Meta<typeof KSelectRange>;
-export default _default;
-export declare const KSelectRangePrimary: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, KSelectRangeProps>;
-export declare const KSelectRangeMinimumDate: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, KSelectRangeProps>;
-export declare const KSelectRangeHoverText: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, KSelectRangeProps>;

package/dist/components/KSelectRangeDate/KSelectRangeDate.stories.d.ts

@@ -1,8 +0,0 @@
-import { Meta } from "@storybook/react";
-import KSelectRangeDate, { KSelectRangeDateProps } from "./KSelectRangeDate";
-declare const _default: Meta<typeof KSelectRangeDate>;
-export default _default;
-export declare const KSelectRangePrimary: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, KSelectRangeDateProps>;
-export declare const KSelectRangeWeekly: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, KSelectRangeDateProps>;
-export declare const KSelectRangeDateMinimumDate: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, KSelectRangeDateProps>;
-export declare const KSelectRangeHoverText: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, KSelectRangeDateProps>;

package/dist/components/KSlider/KSlider.stories.d.ts

@@ -1,5 +0,0 @@
-import { Meta } from "@storybook/react";
-import KSlider from "./KSlider";
-declare const _default: Meta<typeof KSlider>;
-export default _default;
-export declare const KSliderPrimary: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./KSlider").KSliderProps>;

package/dist/components/KSliderLabel/KSliderLabel.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta } from "@storybook/react";
-import KSliderLabel, { SliderLabelProps } from "./KSliderLabel";
-declare const _default: Meta<typeof KSliderLabel>;
-export default _default;
-export declare const KSliderLabelPrimary: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, SliderLabelProps>;
-export declare const KSliderLabelHoverText: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, SliderLabelProps>;

package/dist/components/KSpan/KSpan.stories.d.ts

@@ -1,5 +0,0 @@
-import { Meta } from "@storybook/react";
-import KSpan, { KSpanProps } from "./KSpan";
-declare const _default: Meta<typeof KSpan>;
-export default _default;
-export declare const KSpanPrimary: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, KSpanProps>;

package/dist/components/KTextArea/KTextArea.stories.d.ts

@@ -1,8 +0,0 @@
-import { Meta } from "@storybook/react";
-import KTextArea from "./KTextArea";
-declare const _default: Meta<typeof KTextArea>;
-export default _default;
-export declare const KTextAreaPrimary: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./KTextArea").KTextAreaProps>;
-export declare const KTextAreaLeftIcon: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./KTextArea").KTextAreaProps>;
-export declare const KTextAreaRightIcon: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./KTextArea").KTextAreaProps>;
-export declare const KTextAreaLeftRightIcon: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./KTextArea").KTextAreaProps>;

package/dist/components/KTitleSpan/KTitleSpan.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta } from "@storybook/react";
-import KTitleSpan, { KTitleSpanProps } from "./KTitleSpan";
-declare const _default: Meta<typeof KTitleSpan>;
-export default _default;
-export declare const KTitleSpanPrimary: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, KTitleSpanProps>;
-export declare const KTitleSpanSecondary: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, KTitleSpanProps>;

package/dist/components/KTooltip/KTooltip.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta } from "@storybook/react";
-import KTooltip, { KTooltipProps } from "./KTooltip";
-declare const _default: Meta<typeof KTooltip>;
-export default _default;
-export declare const KTooltipPrimary: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, KTooltipProps>;
-export declare const KTooltipSecondary: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, KTooltipProps>;