kahuna-base-react-components 0.2.19 → 0.2.21

package/dist/types.d.ts

@@ -94,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;
@@ -184,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.19",
+  "version": "0.2.21",
   "description": "Kahuna Base React Components",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

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/KTextArea/KTextArea.stories.tsx

@@ -0,0 +1,65 @@
+import { Meta, StoryFn } from "@storybook/react"
+import KTextArea from "./KTextArea"
+// @ts-ignore
+import TracksIcon from "../../assets/tracks.svg"
+import { KeyboardEvent } from "react"
+
+export default {
+  title: "ReactComponentLibrary/KTextArea",
+  component: KTextArea,
+  parameters: {
+    layout: "centered"
+  }
+} as Meta<typeof KTextArea>
+
+const Template: StoryFn<typeof KTextArea> = (args) => <KTextArea {...args} />
+
+
+export const KTextAreaPrimary = Template.bind({})
+KTextAreaPrimary.args = {
+  onChange: (value: string) => {
+    console.log("value:", value)
+  },
+  onKeyDown: (event: KeyboardEvent) => {
+    if (event.key === "Enter") {
+      console.log("Enter is clicked and our value is:", event.currentTarget)
+    }
+  },
+  rows: 4,
+  placeholder: "Placeholder...",
+  hoverBackground: "white"
+}
+
+export const KTextAreaLeftIcon = Template.bind({})
+KTextAreaLeftIcon.args = {
+  onChange: (value: string) => {},
+  placeholder: "Placeholder...",
+  leftIcon: TracksIcon,
+  leftIconClick: () => {
+    alert("left icon clicked")
+  }
+}
+
+export const KTextAreaRightIcon = Template.bind({})
+KTextAreaRightIcon.args = {
+  onChange: (value: string) => {},
+  placeholder: "Placeholder...",
+  rightIcon: TracksIcon,
+  rightIconClick: () => {
+    alert("right icon clicked")
+  }
+}
+
+export const KTextAreaLeftRightIcon = Template.bind({})
+KTextAreaLeftRightIcon.args = {
+  onChange: (value: string) => {},
+  placeholder: "Placeholder...",
+  leftIcon: TracksIcon,
+  rightIcon: TracksIcon,
+  leftIconClick: () => {
+    alert("left icon clicked")
+  },
+  rightIconClick: () => {
+    alert("right icon clicked")
+  }
+}

package/src/components/KTextArea/KTextArea.tsx

@@ -0,0 +1,130 @@
+import React, { useEffect, useState, KeyboardEvent } from "react"
+import "../../main.css"
+
+export interface KTextAreaProps {
+  value: string
+  onChange: (value: string) => void
+  rows?: number
+  onBlur?: (value: string) => void
+  onKeyDown?: (event: KeyboardEvent) => void
+  width?: number
+  height?: number
+  leftIcon?: string
+  rightIcon?: string
+  background?: string
+  activeBackground?: string
+  borderRadius?: number
+  disabled?: boolean
+  placeholder?: string
+  shadowDisabled?: boolean
+  leftIconClick?: () => void
+  rightIconClick?: () => void
+  accentColor?: string
+  hoverBackground?: string
+  padding?: string
+  gap?: string
+  border?: string
+  boxShadow?: string
+  fontSize?: string
+  iconSize?: string
+  checked?: boolean
+}
+
+const KTextArea: React.FC<KTextAreaProps> = (props) => {
+  const [background, setBackground] = useState("#F5F5F5")
+  const [hover, setHover] = useState(false)
+
+  useEffect(() => {
+    const emptyBackground = props.background || "#F5F5F5"
+    const activeBackground = props.activeBackground || "#FFF"
+
+    const background = props.value ? activeBackground : emptyBackground
+    setBackground(background)
+  }, [props.value])
+
+  const width = props.width || "100%"
+  const height = props.height || 60
+  const borderRadius = props.borderRadius || 10
+  const boxShadow = props.shadowDisabled
+    ? ""
+    : props.boxShadow
+    ? props.boxShadow
+    : "0 0 0 1px rgba(17, 17, 17, 0.04), 0 1px 1px 0 rgba(17, 17, 17, 0.04)"
+  const accentColor = props.accentColor || ""
+  const disabled = props.disabled || false
+  const hoverBackground = props.hoverBackground || background
+  const padding = props.padding || "8px"
+  const gap = props.gap || "12px"
+  const border = props.border || "none"
+  const fontSize = props.fontSize || "14px"
+  const iconSize = props.iconSize || "20px"
+  const rows = props.rows || 2
+
+  return (
+    <div
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      className={"k-input-container"}
+      style={{ background: hover ? hoverBackground : background, borderRadius, boxShadow, padding, gap, border }}
+    >
+      {props.leftIcon && (
+        <img
+          src={props.leftIcon}
+          style={{
+            width: iconSize,
+            height: iconSize
+          }}
+          alt={"l-icon"}
+          className={props.leftIconClick && "cursor-pointer"}
+          onClick={() => {
+            if (props.leftIconClick) props.leftIconClick()
+          }}
+        />
+      )}
+
+      <textarea
+        className={"k-input"}
+        style={{
+          background: hover ? hoverBackground : background,
+          width,
+          height,
+          accentColor,
+          fontSize
+        }}
+        rows={rows}
+        value={props.value}
+        placeholder={props.placeholder || ""}
+        disabled={disabled}
+        onBlur={(event) => {
+          console.log("onBulur", event.target.value)
+          if (props.onBlur) props.onBlur(event.target.value)
+        }}
+        onChange={(event) => {
+          console.log("OnChange", event.target.value)
+          props.onChange(event.target.value)
+        }}
+        onKeyDown={(event) => {
+          console.log("OnKeyDown", event)
+          if (props.onKeyDown) props.onKeyDown(event)
+        }}
+      />
+
+      {props.rightIcon && (
+        <img
+          src={props.rightIcon}
+          style={{
+            width: iconSize,
+            height: iconSize
+          }}
+          alt={"r-icon"}
+          className={props.rightIconClick && "cursor-pointer"}
+          onClick={() => {
+            if (props.rightIconClick) props.rightIconClick()
+          }}
+        />
+      )}
+    </div>
+  )
+}
+
+export default KTextArea

package/src/components/KTextArea/index.ts

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

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

@@ -238,4 +238,14 @@
 }
 .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;
 }