kahuna-base-react-components 1.0.7 → 1.1.0

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

@@ -0,0 +1,90 @@
+import { Meta, StoryFn } from "@storybook/react"
+import KDropdown, { KSelectOption } from "./KDropdown"
+// @ts-ignore
+import TracksIcon from "../../assets/tracks.svg"
+import { MultiValue } from "react-select"
+
+export default {
+  title: "ReactComponentLibrary/KDropdown",
+  component: KDropdown,
+  parameters: {
+    layout: "centered"
+  }
+} as Meta<typeof KDropdown>
+
+const Template: StoryFn<typeof KDropdown> = (args) => <KDropdown {...args} />
+
+export const KDropdownSingle = Template.bind({})
+KDropdownSingle.args = {
+  onSelect: (value: KSelectOption | MultiValue<KSelectOption> | undefined) => {
+    if (value === undefined) {
+      console.log("our value is undefined, deleting process can be performed")
+    } else {
+      console.log("update process can be performed")
+    }
+  },
+  width: 250,
+  placeholder: "Select single...",
+  isClearable: true,
+  isEllipsis: true,
+  // defaultValue: { label: "Label 1", value: 1, icon: TracksIcon },
+  defaultValuePrimitive: 7,
+  options: [
+    { label: "Label 1", value: 1, icon: TracksIcon },
+    { label: "Label 4", value: 2, icon: TracksIcon },
+    { label: "Label 3", value: 3 },
+    { label: "Label 2", value: 4 },
+    { label: "R&B", value: 5 },
+    { label: "Çınar", value: 6 },
+    { label: "ELEKTRONIC ", value: 7 },
+    { label: "TANIK", value: 8 },
+    { label: "Very very very very very long content.", value: 9 },
+    { label: "TANIK", value: 10 }
+  ]
+}
+
+export const KDropdownMulti = Template.bind({})
+KDropdownMulti.args = {
+  onSelect: (value: KSelectOption | MultiValue<KSelectOption> | undefined) => {},
+  width: 250,
+  placeholder: "Multi...",
+  options: [
+    { label: "Label 1", value: 1, icon: TracksIcon },
+    { label: "Label 2", value: 2, icon: TracksIcon },
+    { label: "Label 3", value: 3 }
+  ],
+  isMulti: true
+}
+
+export const KDropdownLeftIcon = Template.bind({})
+KDropdownLeftIcon.args = {
+  onSelect: (value: KSelectOption | MultiValue<KSelectOption> | undefined) => {},
+  placeholder: "Placeholder...",
+  leftIcon: TracksIcon
+}
+
+export const KDropdownRightIcon = Template.bind({})
+KDropdownRightIcon.args = {
+  onSelect: (value: KSelectOption | MultiValue<KSelectOption> | undefined) => {},
+  placeholder: "Placeholder...",
+  rightIcon: TracksIcon,
+  width: 250,
+  options: [
+    { label: "Label 1", value: 1, icon: TracksIcon },
+    { label: "Label 4", value: 2, icon: TracksIcon },
+    { label: "Label 3", value: 3 },
+    { label: "Label 2", value: 4 },
+    { label: "Sevinç", value: 5 },
+    { label: "Çınar", value: 6 },
+    { label: "Ümit", value: 7 },
+    { label: "TANIK", value: 8 }
+  ]
+}
+
+export const KDropdownLeftRightIcon = Template.bind({})
+KDropdownLeftRightIcon.args = {
+  onSelect: (value: KSelectOption | MultiValue<KSelectOption> | undefined) => {},
+  placeholder: "Placeholder...",
+  leftIcon: TracksIcon,
+  rightIcon: TracksIcon
+}

package/src/components/KDropdown/KDropdown.tsx

@@ -0,0 +1,201 @@
+import React, { useEffect, useState } from "react"
+import "../../main.css"
+import Select, { MultiValue } from "react-select"
+// @ts-ignore
+import CheckIcon from "../../assets/check.svg"
+import KSpan from "../KSpan"
+import { FilterOptionOption } from "react-select/dist/declarations/src/filters"
+
+export interface KSelectOption {
+  label: string
+  value: number
+  type?: string
+  label2?: string
+  value2?: string
+  icon?: string
+}
+
+export interface KDropdownProps {
+  defaultValue?: KSelectOption | MultiValue<KSelectOption>
+  defaultValuePrimitive?: string | number
+  selected?: KSelectOption | MultiValue<KSelectOption>
+  onSelect: (selected: KSelectOption | MultiValue<KSelectOption> | undefined) => void
+  options: KSelectOption[]
+  width?: number
+  height?: number
+  leftIcon?: string
+  rightIcon?: string
+  background?: string
+  activeBackground?: string
+  borderRadius?: number
+  placeholder?: string
+  isMulti?: boolean
+  label?: string
+  textColor?: string
+  shadowDisabled?: boolean
+  menuBackground?: string
+  padding?: string
+  gap?: string
+  hideChosenOptionIcon?: boolean
+  isClearable?: boolean
+  isEllipsis?: boolean
+}
+
+const KDropdown: React.FC<KDropdownProps> = (props) => {
+  const [selectedOption, setSelectedOption] = useState<KSelectOption | MultiValue<KSelectOption>>()
+  const [background, setBackground] = useState("#F5F5F5")
+
+  useEffect(() => {
+    const emptyBackground = props.background || "#F5F5F5"
+    const activeBackground = props.activeBackground || "#FFF"
+
+    const background = props.selected ? activeBackground : emptyBackground
+    setBackground(background)
+  }, [props.selected])
+
+  const width = props.width || "100%"
+  const height = props.height || "auto"
+  const borderRadius = props.borderRadius || 10
+  const isMulti = props.isMulti || false
+  const textColor = props.textColor || "#111"
+  const boxShadow = props.shadowDisabled ? "" : "0 0 0 1px rgba(17, 17, 17, 0.04), 0 1px 1px 0 rgba(17, 17, 17, 0.04)"
+  const menuBackground = props.menuBackground || "rgb(249, 249, 249)"
+  const padding = props.padding || "8px"
+  const gap = props.gap || "4px"
+  const hideIcon = props.hideChosenOptionIcon || false
+  const isClearable = props.isClearable || false
+  const isEllipsis = props.isEllipsis || false
+
+  let defaultValue = props.defaultValue
+  if (!defaultValue && props.defaultValuePrimitive) {
+    defaultValue = props.options.find(
+      (option) => option.value === props.defaultValuePrimitive || option.value2 === props.defaultValuePrimitive
+    )
+  }
+
+  const customFilterOption = (option: FilterOptionOption<KSelectOption>, inputValue: string) => {
+    return option.data.label.toLocaleLowerCase("en").includes(inputValue.toLocaleLowerCase("en"))
+  }
+
+  const getOptionLabels = (option: KSelectOption) => {
+    return (
+      <div className="flex justify-between" style={{ width: "100%" }}>
+        <div className="flex">
+          {option.icon && <img src={option.icon} className="mr-2" width={20} alt={"option-icon"} />}
+          <KSpan text={option.label} color="#111" />
+        </div>
+        {
+          //@ts-ignore
+          !isMulti && selectedOption?.value === option.value && <img src={CheckIcon} width={24} alt={"check-icon"} />
+        }
+      </div>
+    )
+  }
+  return (
+    <div
+      className={"k-dropdown-container"}
+      style={{ background, borderRadius, width, height, boxShadow, padding, gap }}
+    >
+      {props.leftIcon && <img src={props.leftIcon} width={20} alt={"l-icon"} />}
+
+      <Select
+        defaultValue={defaultValue}
+        isMulti={isMulti}
+        name={props.label || ""}
+        placeholder={props.placeholder || ""}
+        options={props.options}
+        className={"k-dropdown"}
+        filterOption={customFilterOption}
+        isClearable={isClearable}
+        styles={{
+          control: (baseStyles, state) => ({
+            ...baseStyles,
+            background: "transparent !important",
+            padding: "0px !important",
+            boxShadow: "none",
+            fontSize: 14,
+            lineHeight: "20px",
+            cursor: "pointer",
+            minHeight: "20px",
+            border: "none"
+          }),
+          menu: (base) => ({
+            ...base,
+            borderRadius: 10,
+            background: menuBackground,
+            boxShadow:
+              "0px 3px 3px 0px rgba(17, 17, 17, 0.03), 0px 1px 1px 0px rgba(17, 17, 17, 0.04), 0px 0px 0px 1px rgba(17, 17, 17, 0.04)",
+            backdropFilter: "blur(2px)",
+            paddingRight: 3,
+            paddingLeft: 3
+          }),
+          menuList: (base) => ({
+            ...base,
+            paddingTop: 0,
+            paddingBottom: 0
+          }),
+          singleValue: (provided) => ({
+            ...provided,
+            color: textColor
+          }),
+          option: (provided, state) => ({
+            ...provided,
+            display: "flex",
+            alignItems: "center",
+            background: "white",
+            marginBottom: 4,
+            marginTop: 4,
+            borderRadius: 10,
+            color: "#111"
+          }),
+          valueContainer: (base) => ({
+            ...base,
+            padding: 0
+          }),
+
+          input: (base) => ({
+            ...base,
+            padding: 0,
+            margin: 0,
+            height: "20px"
+          }),
+          placeholder: (base) => ({
+            ...base,
+            margin: 0
+          }),
+          clearIndicator: (base) => ({
+            ...base,
+            padding: 0
+          })
+        }}
+        components={{
+          IndicatorSeparator: () => null,
+          DropdownIndicator: () => null,
+          SingleValue: ({ data, ...props }) => (
+            <div className={`flex ${isEllipsis ? "w-full" : ""}`} style={{ position: "absolute" }}>
+              {data.icon && !hideIcon && <img src={data.icon} className="mr-2" width={20} alt={"data-icon"} />}
+              <KSpan text={data.label} color="#111" ellipsis={isEllipsis} />
+            </div>
+          )
+        }}
+        onChange={(event) => {
+          if (!event) {
+            if (props.isClearable) {
+              setSelectedOption(undefined)
+              props.onSelect(undefined)
+            }
+            return
+          }
+          setSelectedOption(event)
+          props.onSelect(event)
+        }}
+        //@ts-ignore
+        getOptionLabel={(option: KSelectOption) => getOptionLabels(option)}
+      />
+
+      {props.rightIcon && <img src={props.rightIcon} width={20} alt={"r-icon"} />}
+    </div>
+  )
+}
+
+export default KDropdown

package/src/components/KDropdown/index.ts

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

package/src/components/KInput/KInput.stories.tsx

@@ -0,0 +1,84 @@
+import { Meta, StoryFn } from "@storybook/react"
+import KInput from "./KInput"
+// @ts-ignore
+import TracksIcon from "../../assets/tracks.svg"
+import { KeyboardEvent } from "react"
+
+export default {
+  title: "ReactComponentLibrary/KInput",
+  component: KInput,
+  parameters: {
+    layout: "centered"
+  }
+} as Meta<typeof KInput>
+
+const Template: StoryFn<typeof KInput> = (args) => <KInput {...args} />
+
+export const KInputRange = Template.bind({})
+KInputRange.args = {
+  onChange: (value: string) => {},
+  placeholder: "Placeholder...",
+  hoverBackground: "white",
+  type: "range",
+  leftIcon: TracksIcon,
+  rightIcon: TracksIcon
+}
+
+export const KInputCheckbox = Template.bind({})
+KInputCheckbox.args = {
+  onChange: (value: string) => {},
+  placeholder: "Placeholder...",
+  hoverBackground: "white",
+  type: "checkbox",
+  leftIcon: TracksIcon,
+  rightIcon: TracksIcon,
+  checked: false
+}
+
+export const KInputPrimary = Template.bind({})
+KInputPrimary.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)
+    }
+  },
+  placeholder: "Placeholder...",
+  hoverBackground: "white"
+}
+
+export const KInputLeftIcon = Template.bind({})
+KInputLeftIcon.args = {
+  onChange: (value: string) => {},
+  placeholder: "Placeholder...",
+  leftIcon: TracksIcon,
+  leftIconClick: () => {
+    alert("left icon clicked")
+  }
+}
+
+export const KInputRightIcon = Template.bind({})
+KInputRightIcon.args = {
+  onChange: (value: string) => {},
+  placeholder: "Placeholder...",
+  rightIcon: TracksIcon,
+  rightIconClick: () => {
+    alert("right icon clicked")
+  }
+}
+
+export const KInputLeftRightIcon = Template.bind({})
+KInputLeftRightIcon.args = {
+  onChange: (value: string) => {},
+  placeholder: "Placeholder...",
+  leftIcon: TracksIcon,
+  rightIcon: TracksIcon,
+  leftIconClick: () => {
+    alert("left icon clicked")
+  },
+  rightIconClick: () => {
+    alert("right icon clicked")
+  }
+}