kahuna-base-react-components 1.0.7 → 1.1.0

package/src/components/KSpan/KSpan.tsx

@@ -1,15 +1,71 @@
-import React from "react";
+import React, { CSSProperties, useState } from "react"
+import "../../main.css"
 
 export interface KSpanProps {
-  testIdPrefix: string;
-  text?: string;
-  theme: "primary" | "secondary";
+  text: string
+  fontSize?: number
+  color?: string
+  fontWeight?: number
+  lineHeight?: string
+  fontStyle?: string
+  letterSpacing?: string
+  hoverText?: string
+  hoverTextColor?: string
+  hoverStyle?: CSSProperties,
+  textDecoration?: string,
+  ellipsis?: boolean
 }
 
 const KSpan: React.FC<KSpanProps> = (props) => {
-  return (
-    <span>{props.text}</span>
-  );
-};
+  const [onHover, setOnHover] = useState(false)
 
-export default KSpan;
+  const fontSize = props.fontSize || 14
+  const color = props.color || "#737373"
+  const fontWeight = props.fontWeight || 400
+  const lineHeight = props.lineHeight || "20px"
+  const fontStyle = props.fontStyle || "normal"
+  const letterSpacing = props.letterSpacing || "-0.084px"
+  const hoverTextColor = props.hoverTextColor || "#737373"
+  const hoverStyle = props.hoverStyle || {}
+  const textDecoration = props.textDecoration || "none"
+  const ellipsis = props.ellipsis || false
+
+  const ellipsisStyle = {overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap"}
+
+  const renderBaseSpan = () => {
+    const baseSpanStyle = { fontSize, color, fontWeight, lineHeight, fontStyle, letterSpacing, textDecoration, ...(ellipsis && ellipsisStyle) }
+    return (
+      <span
+        className={"k-span"}
+        onMouseEnter={() => setOnHover(true)}
+        onMouseLeave={() => setOnHover(false)}
+        style={onHover ? { ...baseSpanStyle, ...hoverStyle } : { ...baseSpanStyle }}
+      >
+        {props.text}
+      </span>
+    )
+  }
+
+  return props.hoverText ? (
+    <div className="grid justify-items-center">
+      {renderBaseSpan()}
+      {onHover && (
+        <span
+          className={"k-span"}
+          style={{
+            fontSize: fontSize - 2,
+            color: hoverTextColor,
+            fontWeight,
+            lineHeight,
+            fontStyle,
+            letterSpacing
+          }}
+        >
+          {props.hoverText}
+        </span>
+      )}
+    </div>
+  ) : renderBaseSpan()
+}
+
+export default KSpan

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

@@ -0,0 +1,23 @@
+import {Meta, StoryFn} from "@storybook/react";
+import KTitleSpan from "./KTitleSpan";
+
+export default {
+  title: "ReactComponentLibrary/KTitleSpan",
+  component: KTitleSpan,
+  parameters: {
+    layout: 'centered',
+  },
+} as Meta<typeof KTitleSpan>;
+
+const Template: StoryFn<typeof KTitleSpan> = (args) => <KTitleSpan {...args} />;
+
+export const KTitleSpanPrimary = Template.bind({});
+KTitleSpanPrimary.args = {
+  text: "Hello World",
+  fontSize: 48,
+  color: "#111",
+  lineHeight: "56px",
+  fontStyle: "normal",
+  letterSpacing: "-0.48px",
+  bold: false
+};

package/src/components/KTitleSpan/KTitleSpan.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import "../../main.css"
+
+export interface KTitleSpanProps {
+  text: string
+  fontSize?: number
+  color?: string
+  fontWeight?: number
+  lineHeight?: string
+  fontStyle?: string
+  letterSpacing?: string,
+  bold?: boolean
+}
+
+const KTitleSpan: React.FC<KTitleSpanProps> = (props) => {
+  const fontSize = props.fontSize || 48
+  const color = props.color || "#111111"
+  const lineHeight = props.lineHeight || "56px"
+  const fontStyle = props.fontStyle || "normal"
+  const letterSpacing = props.letterSpacing || "-0.48px"
+  const bold = props.bold || false
+  const titleClassName = bold ? "k-title-span-bold" : "k-title-span"
+  const fontWeight = props.fontWeight ? props.fontWeight : (bold ? 700 : 500)
+
+  
+  return (
+    <span className={`${titleClassName} flex items-center`} style={{fontSize, color, fontWeight, lineHeight, fontStyle, letterSpacing}}>
+      {props.text}
+    </span>
+  );
+};
+
+export default KTitleSpan;

package/src/components/KTitleSpan/index.ts

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

package/src/components/KTooltip/KTooltip.stories.tsx

@@ -0,0 +1,94 @@
+import { Meta, StoryFn } from "@storybook/react"
+import KTooltip, { KTooltipProps } from "./KTooltip"
+import KSpan from "../KSpan"
+
+export default {
+  title: "ReactComponentLibrary/KTooltip",
+  component: KTooltip,
+  parameters: {
+    layout: "centered"
+  }
+} as Meta<typeof KTooltip>
+
+const Template: StoryFn<KTooltipProps> = (args) => (
+  <KTooltip {...args}>
+    <div className="bg-red-200 w-[200px] aspect-square rounded-full flex items-center justify-center">
+      Tooltip Children
+    </div>{" "}
+    {/* Here we place the children directly */}
+  </KTooltip>
+)
+
+export const KTooltipPrimary = Template.bind({})
+KTooltipPrimary.args = {
+  content: (
+    <div className="bg-red-100 flex justify-center items-center">
+      <div className="bg-green-300 font-extrabold ">BURADA</div>
+    </div>
+  ),
+  position: "top",
+  zIndex: 1000,
+  arrowColor: "green",
+  showArrow: true,
+  padding: "10px",
+  border: "1px solid red"
+  //boxShadow: "3px 3px 10px #000",
+  //borderRadius: "100px",
+}
+
+export const KTooltipSecondary = Template.bind({})
+KTooltipPrimary.args = {
+  content: (
+    <div className="flex flex-col gap-2 justify-center items-start px-4 py-2">
+      <div
+        className="flex flex-row gap-1 whitespace-nowrap items-center"
+        style={{
+          opacity: true ? "1" : "0.3"
+        }}
+      >
+        <span className="bg-[#21A494] px-0.5 py-1 flex items-center justify-center w-9 rounded-[3px]">
+          <KSpan text="16-Bit" fontSize={10} lineHeight="10px" fontWeight={600} color="#FFF" />
+        </span>
+        {true ? (
+          <KSpan text="Added" fontSize={12} lineHeight="12px" color="#1F1F1F" fontWeight={600} />
+        ) : (
+          <KSpan text="No File" fontSize={12} lineHeight="12px" color="#1F1F1F" fontWeight={600}></KSpan>
+        )}
+      </div>
+      <div
+        className="flex flex-row gap-1 whitespace-nowrap items-center"
+        style={{
+          opacity: true ? "1" : "0.3"
+        }}
+      >
+        <span className="bg-[#BBCC13] px-0.5 py-1 flex items-center justify-center w-9 rounded-[3px]">
+          <KSpan text="24-Bit" fontSize={10} lineHeight="10px" fontWeight={600} color="#FFF" />
+        </span>
+        {true ? (
+          <KSpan text="Added" fontSize={12} lineHeight="12px" color="#1F1F1F" fontWeight={600} />
+        ) : (
+          <KSpan text="No File" fontSize={12} lineHeight="12px" color="#1F1F1F" fontWeight={600}></KSpan>
+        )}
+      </div>
+      <div
+        className="flex flex-row gap-1 whitespace-nowrap items-center"
+        style={{
+          opacity: true ? "1" : "0.3"
+        }}
+      >
+        <span className="bg-[#30272C] px-0.5 py-1 flex items-center justify-center w-9 rounded-[3px]">
+          <KSpan text="Dolby" fontSize={10} lineHeight="10px" fontWeight={600} color="#FFF" />
+        </span>
+        {true ? (
+          <KSpan text="Added" fontSize={12} lineHeight="12px" color="#1F1F1F" fontWeight={600}></KSpan>
+        ) : (
+          <KSpan text="No File" fontSize={12} lineHeight="12px" color="#1F1F1F" fontWeight={600}></KSpan>
+        )}
+      </div>
+    </div>
+  ),
+  arrowColor: "red",
+  padding: "0px"
+  //boxShadow: "3px 3px 10px #000",
+  //borderRadius: "100px",
+}

package/src/components/KTooltip/KTooltip.tsx

@@ -0,0 +1,67 @@
+import React, { useState } from "react"
+import "../../main.css"
+
+export interface KTooltipProps {
+  children: React.ReactNode
+  content: React.ReactNode
+  position?: string
+  backgroundColor?: string
+  width?: string
+  height?: string
+  zIndex?: number
+  border?: string
+  borderRadius?: string
+  boxShadow?: string
+  showArrow?: boolean
+  arrowColor?: string
+  padding?: string
+}
+
+const KTooltip: React.FC<KTooltipProps> = (props) => {
+  const [isVisible, setIsVisible] = useState(false)
+
+  const showTooltip = () => setIsVisible(true)
+  const hideTooltip = () => setIsVisible(false)
+
+  const position = props.position || "top"
+  const width = props.width || "auto"
+  const height = props.height || "auto"
+  const background = props.backgroundColor || "#FFF"
+  const zIndex = props.zIndex || 999999
+  const boxShadow = props.boxShadow || "none"
+  const border = props.border || "1px solid #E5E7EB"
+  const borderRadius = props.borderRadius || "5px"
+  const arrowColor =
+    props.arrowColor !== undefined
+      ? props.arrowColor
+      : props.backgroundColor !== undefined
+      ? props.backgroundColor
+      : "#F7F7F7"
+  const showArrow = props.showArrow || false
+  const padding = props.padding || "5px"
+
+  const baseStyles = { width, height, background, zIndex, border, borderRadius, boxShadow }
+  return (
+    <div className="relative box-border" onMouseEnter={showTooltip} onMouseLeave={hideTooltip}>
+      {props.children}
+
+      <div
+        className={`k-tooltip-${position} absolute ${isVisible ? "k-tooltip-enter" : "k-tooltip-exit"}`}
+        style={baseStyles}
+      >
+        <div
+          style={{
+            padding: padding,
+            borderRadius,
+            background
+          }}
+        >
+          {props.content}
+        </div>
+        {showArrow && <div className={`arrow-${position}`} style={{ backgroundColor: arrowColor, zIndex: -200 }}></div>}
+      </div>
+    </div>
+  )
+}
+
+export default KTooltip

package/src/components/KTooltip/index.ts

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

package/src/index.ts

@@ -1,6 +1,17 @@
 import KButton from "./components/KButton"
 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"
+import KTooltip from "./components/KTooltip"
+import KSliderLabel from "./components/KSliderLabel"
+import KCodeInput from "./components/KCodeInput"
+
 
 export {
-  KButton, KSpan
+  KButton, KSpan, KLogo, KTitleSpan, KInput, KTextArea, KDropdown, KSlider, KSelectDate, KTooltip, KSliderLabel, KCodeInput
 }