kahuna-base-react-components 0.2.21 → 0.3.1

package/dist/types.d.ts

@@ -96,6 +96,36 @@ interface KInputProps {
 }
 declare const KInput$1: React.FC<KInputProps>;
 
+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;
+}
+declare const KTextArea: React.FC<KTextAreaProps>;
+
 interface KSelectOption {
     label: string;
     value: number;
@@ -218,4 +248,4 @@ interface KCodeInputProps {
 }
 declare const KInput: React.FC<KCodeInputProps>;
 
-export { KButton, KInput as KCodeInput, KDropdown, KInput$1 as KInput, KLogo, KSelectDate, KSlider, KSliderLabel, KSpan, KTitleSpan, KTooltip };
+export { KButton, KInput as KCodeInput, KDropdown, KInput$1 as KInput, KLogo, KSelectDate, KSlider, KSliderLabel, KSpan, KTextArea, KTitleSpan, KTooltip };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kahuna-base-react-components",
-  "version": "0.2.21",
+  "version": "0.3.1",
   "description": "Kahuna Base React Components",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -24,8 +24,8 @@
   },
   "homepage": "https://github.com/Kahuna-Music/kahuna-base-react-components#readme",
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
@@ -45,7 +45,7 @@
     "@storybook/react": "^7.6.17",
     "@storybook/react-vite": "^7.6.17",
     "@storybook/test": "^7.6.17",
-    "@testing-library/react": "^14.2.1",
+    "@testing-library/react": "^12.1.5",
     "@types/jest": "^29.5.12",
     "@types/react": "^18.2.64",
     "autoprefixer": "^10.4.18",
@@ -66,6 +66,6 @@
   },
   "dependencies": {
     "react-date-picker": "^11.0.0",
-    "react-select": "^5.8.0"
+    "react-select": "^4.3.1"
   }
 }

package/src/components/KDropdown/KDropdown.tsx

@@ -1,9 +1,11 @@
 import React, { useEffect, useState } from "react"
 import "../../main.css"
+// @ts-ignore
 import Select, { MultiValue } from "react-select"
 // @ts-ignore
 import CheckIcon from "../../assets/check.svg"
 import KSpan from "../KSpan"
+// @ts-ignore
 import { FilterOptionOption } from "react-select/dist/declarations/src/filters"
 
 export interface KSelectOption {
@@ -108,7 +110,7 @@ const KDropdown: React.FC<KDropdownProps> = (props) => {
         filterOption={customFilterOption}
         isClearable={isClearable}
         styles={{
-          control: (baseStyles, state) => ({
+          control: (baseStyles: any, state: any) => ({
             ...baseStyles,
             background: "transparent !important",
             padding: "0px !important",
@@ -119,7 +121,7 @@ const KDropdown: React.FC<KDropdownProps> = (props) => {
             minHeight: "20px",
             border: "none"
           }),
-          menu: (base) => ({
+          menu: (base: any) => ({
             ...base,
             borderRadius: 10,
             background: menuBackground,
@@ -129,16 +131,16 @@ const KDropdown: React.FC<KDropdownProps> = (props) => {
             paddingRight: 3,
             paddingLeft: 3
           }),
-          menuList: (base) => ({
+          menuList: (base: any) => ({
             ...base,
             paddingTop: 0,
             paddingBottom: 0
           }),
-          singleValue: (provided) => ({
+          singleValue: (provided: any) => ({
             ...provided,
             color: textColor
           }),
-          option: (provided, state) => ({
+          option: (provided: any, state: any) => ({
             ...provided,
             display: "flex",
             alignItems: "center",
@@ -148,22 +150,22 @@ const KDropdown: React.FC<KDropdownProps> = (props) => {
             borderRadius: 10,
             color: "#111"
           }),
-          valueContainer: (base) => ({
+          valueContainer: (base: any) => ({
             ...base,
             padding: 0
           }),
 
-          input: (base) => ({
+          input: (base: any) => ({
             ...base,
             padding: 0,
             margin: 0,
             height: "20px"
           }),
-          placeholder: (base) => ({
+          placeholder: (base: any) => ({
             ...base,
             margin: 0
           }),
-          clearIndicator: (base) => ({
+          clearIndicator: (base: any) => ({
             ...base,
             padding: 0
           })
@@ -171,6 +173,7 @@ const KDropdown: React.FC<KDropdownProps> = (props) => {
         components={{
           IndicatorSeparator: () => null,
           DropdownIndicator: () => null,
+          //@ts-ignore
           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"} />}
@@ -178,7 +181,7 @@ const KDropdown: React.FC<KDropdownProps> = (props) => {
             </div>
           )
         }}
-        onChange={(event) => {
+        onChange={(event: any) => {
           if (!event) {
             if (props.isClearable) {
               setSelectedOption(undefined)

package/src/index.ts

@@ -3,6 +3,7 @@ import KSpan from "./components/KSpan"
 import KTitleSpan from "./components/KTitleSpan"
 import KLogo from "./components/KLogo"
 import KInput from "./components/KInput"
+import KTextArea from "./components/KTextArea"
 import KDropdown from "./components/KDropdown"
 import KSlider from "./components/KSlider"
 import KSelectDate from "./components/KSelectDate"
@@ -12,5 +13,5 @@ import KCodeInput from "./components/KCodeInput"
 
 
 export {
-  KButton, KSpan, KLogo, KTitleSpan, KInput, KDropdown, KSlider, KSelectDate, KTooltip, KSliderLabel, KCodeInput
+  KButton, KSpan, KLogo, KTitleSpan, KInput, KTextArea, KDropdown, KSlider, KSelectDate, KTooltip, KSliderLabel, KCodeInput
 }