kahuna-base-react-components 0.2.18 → 0.2.20

package/dist/types.d.ts

@@ -18,6 +18,7 @@ interface KButtonProps {
     hoverBackground?: string;
     fontWeight?: number;
     textDecoration?: string;
+    gap?: string;
 }
 declare const KButton: React.FC<KButtonProps>;
 
@@ -93,7 +94,7 @@ interface KInputProps {
     iconSize?: string;
     checked?: boolean;
 }
-declare const KInput: React.FC<KInputProps>;
+declare const KInput$1: React.FC<KInputProps>;
 
 interface KSelectOption {
     label: string;
@@ -183,4 +184,38 @@ interface SliderLabelProps {
 }
 declare const KSliderLabel: React.FC<SliderLabelProps>;
 
-export { KButton, KDropdown, KInput, KLogo, KSelectDate, KSlider, KSliderLabel, KSpan, KTitleSpan, KTooltip };
+interface KCodeInputProps {
+    onChange: (value: string) => void;
+    length?: number;
+    borderRadius?: number;
+    disabled?: boolean;
+    padding?: string;
+    gap?: number;
+    fontSize?: string;
+    fontWeight?: string;
+    color?: string;
+    lineHeight?: string;
+    allowedCharacters?: "numeric" | "alphaNumeric" | "alpha";
+    width?: number;
+    height?: number;
+    autoFocus?: boolean;
+    isPassword?: boolean;
+    background?: string;
+    hoverBackground?: string;
+    focusedBackground?: string;
+    filledBackground?: string;
+    border?: string;
+    hoverBorder?: string;
+    focusedBorder?: string;
+    filledBorder?: string;
+    boxShadow?: string;
+    hoverBoxShadow?: string;
+    focusedBoxShadow?: string;
+    filledBoxShadow?: string;
+    fitInContainer?: boolean;
+    isCodeCorrect?: boolean;
+    autoBlur?: boolean;
+}
+declare const KInput: React.FC<KCodeInputProps>;
+
+export { KButton, KInput as KCodeInput, KDropdown, KInput$1 as KInput, KLogo, KSelectDate, KSlider, KSliderLabel, KSpan, KTitleSpan, KTooltip };

package/package.json

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

package/src/components/KButton/KButton.tsx

@@ -19,6 +19,7 @@ export interface KButtonProps {
   hoverBackground?: string
   fontWeight?: number
   textDecoration?: string
+  gap?: string
 }
 
 const KButton: React.FC<KButtonProps> = (props) => {
@@ -35,7 +36,7 @@ const KButton: React.FC<KButtonProps> = (props) => {
   const hoverBackground = props.hoverBackground || background
   const fontWeight = props.fontWeight || 500
   const textDecoration = props.textDecoration || "none"
-
+  const gap = props.gap || "0px"
   return (
     <button
       onMouseEnter={() => setHover(true)}
@@ -45,7 +46,7 @@ const KButton: React.FC<KButtonProps> = (props) => {
       onClick={props.onClick}
       style={{ background: hover ? hoverBackground : background, borderRadius, width, height, padding, boxShadow }}
     >
-      <div className={"flex"}>
+      <div className={"flex items-center"} style={{gap}}>
         {props.leftIcon && <img src={props.leftIcon} alt={"button-left-icon"} />}
         {props.text && (
           <KSpan text={props.text} color={textColor} fontWeight={fontWeight} textDecoration={textDecoration} />

package/src/components/KCodeInput/KCodeInput.stories.tsx

@@ -0,0 +1,84 @@
+import { Meta, StoryFn } from "@storybook/react"
+import KCodeInput, { KCodeInputProps } from "./KCodeInput"
+// @ts-ignore
+import { useEffect, useState } from "react"
+
+export default {
+  title: "ReactComponentLibrary/KCodeInput",
+  component: KCodeInput,
+  parameters: {
+    layout: "centered"
+  }
+} as Meta<typeof KCodeInput>
+
+const KCodeInputWrapper: React.FC<KCodeInputProps> = (args) => {
+  const [code, setCode] = useState<string>("");
+
+  useEffect(() => {
+    console.log("code: ", code);
+  }, [code]);
+
+  return (
+    <div className="w-[300px] p-4">
+    <KCodeInput
+      {...args}
+      onChange={(value:string) => {
+        //console.log("value: ", value);
+        setCode(value);
+        //console.log("Value updated to: ", option.value);
+      }}
+    />
+    </div>
+  );
+};
+
+
+const Template: StoryFn<typeof KCodeInput> = (args) => <KCodeInputWrapper {...args} />
+
+export const KCodeInputPrimary = Template.bind({})
+KCodeInputPrimary.args = {
+  length: 6,
+  allowedCharacters: 'alpha',
+  isPassword: false,
+  disabled: false,
+  autoFocus:true,
+  gap:2,
+  width: 150,
+  background: "red",
+  hoverBackground: "green",
+  focusedBackground: "blue",
+  filledBackground: "black",
+  fitInContainer: true,
+  border: "1px solid black",
+  hoverBorder: "1px solid yellow",
+  focusedBorder: "1px solid white",
+  filledBorder: "1px solid gray",
+  fontSize: "15px",
+  padding: "10px",
+  color: "white", 
+}
+
+export const KCodeInputSecondary = Template.bind({})
+KCodeInputSecondary.args = {
+  isCodeCorrect: true,
+  boxShadow: "1px 2px 10px black",
+  hoverBoxShadow: "1px 2px 10px red",
+  focusedBoxShadow: "1px 2px 10px yellow",
+  filledBoxShadow: "1px 2px 10px purple",
+  fontSize: "30px",
+  padding: "10px",
+  color: "orange", 
+  autoBlur: true,
+  autoFocus: true,
+  width: 50,
+  height: 90,
+  fitInContainer: true,
+  gap: 12
+}
+
+export const KCodeInputDefault = Template.bind({})
+KCodeInputDefault.args = {
+  isCodeCorrect: false,
+  allowedCharacters:"numeric",
+  autoBlur:true
+}

package/src/components/KCodeInput/KCodeInput.tsx

@@ -0,0 +1,260 @@
+import React, { useEffect, useState, KeyboardEvent, useRef } from "react"
+import "../../main.css"
+
+export interface KCodeInputProps {
+  onChange: (value: string) => void
+  length?: number
+  borderRadius?: number
+  disabled?: boolean
+  padding?: string
+  gap?: number
+  fontSize?: string
+  fontWeight?: string
+  color?: string
+  lineHeight?: string
+  allowedCharacters?: "numeric" | "alphaNumeric" | "alpha"
+  width?: number
+  height?: number
+  autoFocus?: boolean
+  isPassword?: boolean
+  background?: string
+  hoverBackground?: string
+  focusedBackground?: string
+  filledBackground?: string
+  border?: string
+  hoverBorder?: string
+  focusedBorder?: string
+  filledBorder?: string
+  boxShadow?: string
+  hoverBoxShadow?: string
+  focusedBoxShadow?: string
+  filledBoxShadow?: string
+  fitInContainer?: boolean
+  isCodeCorrect?: boolean
+  autoBlur?: boolean
+}
+
+const KInput: React.FC<KCodeInputProps> = (props) => {
+  const autoFocus = props.autoFocus || false
+  const autoBlur = props.autoBlur || false
+  const borderRadius = props.borderRadius || 10
+  const disabled = props.disabled || false
+  const length = props.length || 6
+  const padding = props.padding || "6px"
+  const gap = props.gap || 6
+  const allowedCharacters = props.allowedCharacters || "numeric"
+  const password = props.isPassword || false
+  const fitInContainer = props.fitInContainer || false
+  const width = props.width || "60px"
+  const height = props.height || "60px"
+  const fontSize = props.fontSize || "24px"
+  const fontWeight = props.fontWeight || 500
+  const lineHeight = props.lineHeight || "32px"
+  const defaultBorder = props.border || ""
+  const hoverBorder = props.hoverBorder || "1px solid #F3F3F3"
+  const focusedBorder = props.focusedBorder || "1px solid #F3F3F3"
+  const filledBorder = props.filledBorder || "1px solid  #B7B7B7"
+  const defaultBoxShadow = props.boxShadow || ""
+  const hoverBoxShadow = props.hoverBoxShadow || ""
+  const focusedBoxShadow = props.focusedBoxShadow || " 0px 1px 2px 0px rgba(228, 229, 231, 0.24)"
+  const filledBoxShadow = props.filledBoxShadow || " 0px 1px 2px 0px rgba(228, 229, 231, 0.24)"
+  const defaultBackground = props.background || "#F5F5F5"
+  const hoverBackground = props.hoverBackground || defaultBackground
+  const focusedBackground = props.focusedBackground || "#FFF"
+  const filledBackground = props.filledBackground || "#FFF"
+  const color = props.color || "#000"
+  const isCodeCorrect = props.isCodeCorrect !== undefined ? props.isCodeCorrect : true
+
+  const [focusedIndex, setFocusedIndex] = useState<number>(autoFocus ? 0 : -1)
+  const inputRefs = useRef<HTMLInputElement[]>([])
+
+  const [allCharactersWritten, setAllCharactersWritten] = useState<boolean>(false)
+
+  const [values, setValues] = useState<string[]>(Array(length).fill(""))
+  const [hoveredIndexes, setHoveredIndexes] = useState<boolean[]>(Array(length).fill(false))
+  const [focusedIndexes, setFocusedIndexes] = useState<boolean[]>(Array(length).fill(false))
+
+  const handleMouseEnter = (index: number) => {
+    setHoveredIndexes((prev) => prev.map((hovered, i) => (i === index ? true : hovered)))
+  }
+
+  const handleMouseLeave = (index: number) => {
+    setHoveredIndexes((prev) => prev.map((hovered, i) => (i === index ? false : hovered)))
+  }
+
+  const handleFocus = (index: number) => {
+    setFocusedIndexes((prev) => prev.map((focused, i) => (i === index ? true : focused)))
+  }
+  const handleBlur = (index: number) => {
+    setFocusedIndexes((prev) => prev.map((focused, i) => (i === index ? false : focused)))
+  }
+
+  useEffect(() => {
+    if (inputRefs.current[focusedIndex]) {
+      inputRefs.current[focusedIndex].focus()
+    }
+  }, [focusedIndex])
+
+  useEffect(() => {
+    if (disabled) {
+      setFocusedIndexes((prev) => prev.map((focused, i) => false))
+      setHoveredIndexes((prev) => prev.map((hovered, i) => false))
+      setValues(Array(length).fill(""))
+      setAllCharactersWritten(false)
+    }
+  }, [disabled])
+
+  const handleClick = (index: number) => {
+    if (values[index]) {
+      setFocusedIndex(index)
+    } else if (!values[index]) {
+      const firstEmptyInputIndex = values.findIndex((value) => value === "")
+      setFocusedIndex(firstEmptyInputIndex)
+      if (inputRefs.current[focusedIndex]) {
+        inputRefs.current[focusedIndex].focus()
+      }
+    }
+  }
+
+  const handleChange = (text: string, index: number) => {
+    const patterns: Record<string, RegExp> = {
+      numeric: /^\d*$/,
+      alpha: /^[a-zA-Z]*$/,
+      alphaNumeric: /^[a-zA-Z0-9]*$/
+    }
+
+    if (patterns[allowedCharacters]?.test(text)) {
+      const newValues = [...values]
+      if (text.length === 1) {
+        newValues[index] = text
+      } else if (text.length === 2) {
+        newValues[index] = newValues[index] === text[0] ? text[1] : text[0]
+      }
+      setValues(newValues)
+      if (text && index < length - 1) {
+        setFocusedIndex(index + 1)
+      }
+    }
+  }
+
+  const handleDelete = (event: React.KeyboardEvent<HTMLInputElement>, index: number) => {
+    if (event?.key === "Backspace") {
+      const newValues = [...values]
+      newValues[index] = ""
+      if (index > 0) {
+        setFocusedIndex(index - 1)
+      }
+      setValues(newValues)
+    }
+  }
+
+  const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {
+    event.preventDefault()
+    const pastedText = event.clipboardData.getData("text").replace(/\s+/g, "")
+    const patterns: Record<string, RegExp> = {
+      numeric: /^\d*$/,
+      alpha: /^[a-zA-Z]*$/,
+      alphaNumeric: /^[a-zA-Z0-9]*$/
+    }
+    if (patterns[allowedCharacters]?.test(pastedText) && pastedText.length > 0) {
+      const newValues = [...values]
+      const currentIndex = focusedIndex
+      const pastedCharacters = pastedText.includes(" ") ? pastedText.split(" ") : pastedText.split("")
+      pastedCharacters.forEach((character, index) => {
+        const i = currentIndex + index
+        if (i < length) {
+          newValues[i] = character
+        }
+      })
+      setValues(newValues)
+      setFocusedIndex(
+        pastedCharacters.length + currentIndex >= length ? length - 1 : pastedCharacters.length + currentIndex
+      )
+    }
+  }
+
+  useEffect(() => {
+    const allDone = values.every((value) => value.length > 0)
+    setAllCharactersWritten(allDone)
+    props.onChange(values.join(""))
+  }, [values])
+
+  useEffect(() => {
+    if (allCharactersWritten && autoBlur) {
+      inputRefs.current[focusedIndex].blur()
+    }
+  }, [allCharactersWritten])
+
+  const renderCharacterComponent = (index: number) => {
+    const isHovered = hoveredIndexes[index]
+    const isFocused = focusedIndexes[index]
+    const isFilled = values[index]
+
+    const background = isFilled
+      ? filledBackground
+      : isFocused
+      ? focusedBackground
+      : isHovered
+      ? hoverBackground
+      : defaultBackground
+
+    const boxShadow = isFilled
+      ? filledBoxShadow
+      : isFocused
+      ? focusedBoxShadow
+      : isHovered
+      ? hoverBoxShadow
+      : defaultBoxShadow
+
+    const border = isFilled ? filledBorder : isFocused ? focusedBorder : isHovered ? hoverBorder : defaultBorder
+
+    return (
+      <input
+        key={`k-code-input-${index}`}
+        value={values[index]}
+        className={`k-code-input-character-container`}
+        style={{
+          padding,
+          background,
+          borderRadius,
+          height,
+          border: allCharactersWritten && !isCodeCorrect ? "1px solid #FF5865" : border,
+          boxShadow,
+          fontSize,
+          fontWeight,
+          lineHeight,
+          color,
+          width: !fitInContainer ? width : `calc((100% - ${(length - 1) * gap}px) / ${length})`
+        }}
+        required
+        type={password ? "password" : "text"}
+        onChange={(event) => {
+          handleChange(event.target.value, index)
+        }}
+        onClick={(event) => {
+          handleClick(index)
+        }}
+        onKeyDown={(event) => {
+          handleDelete(event, index)
+        }}
+        onPaste={(event) => {
+          handlePaste(event)
+        }}
+        ref={(el: HTMLInputElement) => (inputRefs.current[index] = el)}
+        disabled={disabled}
+        onMouseEnter={() => handleMouseEnter(index)}
+        onMouseLeave={() => handleMouseLeave(index)}
+        onFocus={() => handleFocus(index)}
+        onBlur={() => handleBlur(index)}
+      />
+    )
+  }
+
+  return (
+    <div className="flex flex-row items-center justify-between" style={{ width: "100%", gap }}>
+      {Array.from({ length }, (_, index) => renderCharacterComponent(index))}
+    </div>
+  )
+}
+
+export default KInput

package/src/components/KCodeInput/index.ts

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

package/src/components/KLogo/KLogo.tsx

@@ -35,7 +35,7 @@ export interface KLogoProps {
 const KLogo: React.FC<KLogoProps> = (props) => {
   const width = props.width || 88
   const height = props.height || 88
-  const borderRadius = props.borderRadius || 10
+  const borderRadius = props.borderRadius !== undefined ? props.borderRadius : 10
   const logoColor = props.logoColor || "black"
 
   const logoIcon = logoColor === "black" ? Logo : logoColor === "white" ? LogoWhite : LogoGray

package/src/components/KSliderLabel/KSliderLabel.stories.tsx

@@ -1,57 +1,61 @@
-import { Meta, StoryFn } from "@storybook/react"
-import KSliderLabel, { SliderLabelOption, SliderLabelProps } from "./KSliderLabel"
-import { useState } from "react"
+import React, { useEffect, useState } from "react";
+import { Meta, StoryFn } from "@storybook/react";
+import KSliderLabel, { SliderLabelProps, SliderLabelOption } from "./KSliderLabel";
 
 export default {
   title: "ReactComponentLibrary/KSliderLabel",
   component: KSliderLabel,
   parameters: {
-    layout: "centered"
-  }
-} as Meta<typeof KSliderLabel>
+    layout: "centered",
+  },
+} as Meta<typeof KSliderLabel>;
 
 const KSliderLabelWrapper: React.FC<SliderLabelProps> = (args) => {
-  const [lengthOfContract, setLengthOfContract] = useState<number>(args.value || 1)
-  const lengthOfContractOptions: SliderLabelOption[] = [
-    { value: 1, label: "6 months" },
-    { value: 2, label: "1 year" },
-    { value: 3, label: "2 years" },
-    { value: 4, label: "3 years" },
-    { value: 5, label: "5 years" }
-  ]
+  const [selectedValue, setSelectedValue] = useState<number | undefined>(0);
+
+  useEffect(() => {
+    console.log("selectedValue: ", selectedValue);
+  }, [selectedValue]);
 
   return (
-    <div className="w-[616px]">
-      <KSliderLabel
-        options={lengthOfContractOptions}
-        value={lengthOfContract}
-        onChange={(sliderOption: SliderLabelOption) => {
-          console.log("DENEME")
-          setLengthOfContract(sliderOption.value)
-        }}
-        titleText={"Contract Duration"}
-        valueText={lengthOfContractOptions.find((option) => option.value === lengthOfContract)?.label || ""}
-      />
-    </div>
-  )
-}
-
-const Template: StoryFn<typeof KSliderLabelWrapper> = (args) => <KSliderLabelWrapper {...args} />
-
-export const KSliderLabelPrimary = Template.bind({})
+    <KSliderLabel
+      {...args}
+      value={selectedValue}
+      onChange={(option) => {
+        console.log("option: ", option);
+        setSelectedValue(option.value);
+        console.log("Value updated to: ", option.value);
+      }}
+    />
+  );
+};
+
+const Template: StoryFn<typeof KSliderLabelWrapper> = (args) => <KSliderLabelWrapper {...args} />;
+
+const options: SliderLabelOption[] = [
+  { label: "Low", value: 0 },
+  { label: "Medium", value: 1 },
+  { label: "Medium", value: 3 },
+  { label: "Medium", value: 4 },
+  { label: "Medium", value: 5 },
+];
+
+export const KSliderLabelPrimary = Template.bind({});
 KSliderLabelPrimary.args = {
-  value: 1,
-  options: [
-    { value: 1, label: "6 months" },
-    { value: 2, label: "1 year" },
-    { value: 3, label: "2 years" },
-    { value: 4, label: "3 years" },
-    { value: 5, label: "5 years" }
-  ],
-  titleText: "Contract Duration",
-  onChange: (option: SliderLabelOption) => {
-    // Do 
-    console.log("0")
-  },
-  fontSize: 10
-}
+  options,
+  disabled: false,
+  width: "440px",
+  titleText: "Slider Title",
+  valueText: "50",
+  fontSize: 14,
+  color: "#000",
+};
+
+export const KSliderLabelHoverText = Template.bind({});
+KSliderLabelHoverText.args = {
+  options,
+  titleText: "Hover to see me!",
+  valueText: "50",
+  fontSize: 14,
+  color: "#000",
+};

package/src/components/KSliderLabel/KSliderLabel.tsx

@@ -67,7 +67,8 @@ const KSliderLabel: React.FC<SliderLabelProps> = (props) => {
           ref={titleTextRef}
           className="relative pl-4"
           style={{
-            top: titleFits ? "40px" : "0px"
+            top: titleFits ? "40px" : "0px",
+            transitionDuration: "0.3s"
           }}
         >
           <KSpan
@@ -83,7 +84,9 @@ const KSliderLabel: React.FC<SliderLabelProps> = (props) => {
           ref={valueTextRef}
           className="relative pr-4"
           style={{
-            top: valueFits ? "40px" : "0px"
+            top: valueFits ? "40px" : "0px",
+            transitionDuration: "0.3s"
+
           }}
         >
           <KSpan

package/src/index.ts

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

package/src/main.css

@@ -224,7 +224,6 @@
 }
 
 .k-slider-label-input::-webkit-slider-thumb {
-    -webkit-appearance: none;
     margin-top: -4px;
     /* Align the thumb vertically with the track */
     /* Width of the thumb */
@@ -234,9 +233,19 @@
     margin-top: 16px ;
     background-position: center;
     position: relative;
-    opacity: 0;
     cursor: grab;
+    opacity: 0;
 }
 .k-slider-label-input::-webkit-slider-thumb:active {
     cursor: grabbing;
+}
+.k-code-input-character-container {
+    outline: none !important;
+    text-align: center;
+    font-family: "Inter";
+    caret-color: #B7B7B7;  
+}
+.k-code-input-character-container:disabled {
+    background: #F7F7F7 !important;
+    border: none !important;
 }