kahuna-base-react-components 0.2.20 → 0.2.21

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

@@ -0,0 +1,32 @@
+import React, { 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;
+}
+declare const KTextArea: React.FC<KTextAreaProps>;
+export default KTextArea;

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

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

package/package.json

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

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';