kahuna-base-react-components 1.2.0 → 1.2.2

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-import React, { CSSProperties, KeyboardEvent } from 'react';
+import React, { KeyboardEvent } from 'react';
 import { MultiValue } from 'react-select';
 
 interface KButtonProps {
@@ -19,6 +19,10 @@ interface KButtonProps {
     fontWeight?: number;
     textDecoration?: string;
     gap?: string;
+    activeBackground?: string;
+    border?: string;
+    hoverBorder?: string;
+    activeBorder?: string;
 }
 declare const KButton: React.FC<KButtonProps>;
 
@@ -30,9 +34,6 @@ interface KSpanProps {
     lineHeight?: string;
     fontStyle?: string;
     letterSpacing?: string;
-    hoverText?: string;
-    hoverTextColor?: string;
-    hoverStyle?: CSSProperties;
     textDecoration?: string;
     ellipsis?: boolean;
 }
@@ -47,6 +48,7 @@ interface KTitleSpanProps {
     fontStyle?: string;
     letterSpacing?: string;
     bold?: boolean;
+    ellipsis?: boolean;
 }
 declare const KTitleSpan: React.FC<KTitleSpanProps>;
 
@@ -93,6 +95,8 @@ interface KInputProps {
     fontSize?: string;
     iconSize?: string;
     checked?: boolean;
+    hoverBorder?: string;
+    activeBorder?: string;
 }
 declare const KInput$1: React.FC<KInputProps>;
 
@@ -158,6 +162,7 @@ interface KDropdownProps {
     menuBackground?: string;
     padding?: string;
     gap?: string;
+    onBlur?: (value: KSelectOption | MultiValue<KSelectOption> | undefined) => void;
     hideChosenOptionIcon?: boolean;
     isClearable?: boolean;
     isEllipsis?: boolean;
@@ -167,6 +172,8 @@ interface KDropdownProps {
     placeholderColor?: string;
     enableIndicator?: boolean;
     allowContainerShrink?: boolean;
+    border?: string;
+    activeBorder?: string;
 }
 declare const KDropdown: React.FC<KDropdownProps>;
 

package/package.json

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

package/src/components/KButton/KButton.stories.tsx

@@ -17,7 +17,7 @@ const Template: StoryFn<typeof KButton> = (args) => <KButton {...args} />;
 export const KButtonText = Template.bind({});
 KButtonText.args = {
   onClick: () => {
-    alert("clicked")
+    //alert("clicked")
   },
   text: "Hello World",
   background: "#F2FE67",
@@ -25,7 +25,11 @@ KButtonText.args = {
   width: "160px",
   height: "44px",
   hoverBackground: "#A2FE67",
-  textDecoration: "underline"
+  textDecoration: "underline",
+  activeBackground: "#F00",
+  border: "1px solid black",
+  hoverBorder: "1px solid red",
+  activeBorder: "1px solid transparent",
 };
 
 export const KButtonIcon = Template.bind({});

package/src/components/KButton/KButton.tsx

@@ -20,10 +20,15 @@ export interface KButtonProps {
   fontWeight?: number
   textDecoration?: string
   gap?: string
+  activeBackground?: string
+  border?: string
+  hoverBorder?: string 
+  activeBorder?: string 
 }
 
 const KButton: React.FC<KButtonProps> = (props) => {
   const [hover, setHover] = useState(false)
+  const [active, setActive] = useState(false)
 
   const disabled = props.disabled || false
   const background = disabled ? "#F0F0F0" : props.background || "#F2FE67"
@@ -37,16 +42,31 @@ const KButton: React.FC<KButtonProps> = (props) => {
   const fontWeight = props.fontWeight || 500
   const textDecoration = props.textDecoration || "none"
   const gap = props.gap || "0px"
+  const activeBackground = props.activeBackground || background
+  const border = props.border || "none"
+  const hoverBorder = props.hoverBorder || border
+  const activeBorder = props.activeBorder || border
+
   return (
     <button
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
-      className={"k-button"}
+      onMouseDown={() => setActive(true)}
+      onMouseUp={() => setActive(false)}
+      className={`k-button`}
       disabled={disabled}
       onClick={props.onClick}
-      style={{ background: hover ? hoverBackground : background, borderRadius, width, height, padding, boxShadow }}
+      style={{
+        background: active ? activeBackground : hover ? hoverBackground : background,
+        border: active ? activeBorder : hover ? hoverBorder : border,
+        borderRadius,
+        width,
+        height,
+        padding,
+        boxShadow
+      }}
     >
-      <div className={"flex items-center"} style={{gap}}>
+      <div className={"flex items-center"} style={{ gap }}>
         {props.leftIcon && <img src={props.leftIcon} alt={"button-left-icon"} />}
         {props.text && (
           <KSpan text={props.text} color={textColor} fontWeight={fontWeight} textDecoration={textDecoration} />

package/src/components/KDropdown/KDropdown.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryFn } from "@storybook/react"
-import KDropdown, { KSelectOption } from "./KDropdown"
+import KDropdown, { KDropdownProps, KSelectOption } from "./KDropdown"
 // @ts-ignore
 import TracksIcon from "../../assets/tracks.svg"
 // @ts-ignore
@@ -20,6 +20,7 @@ import SpotifyLogo from "../../assets/platforms/SpotifyLogo.png"
 import SpotifyIcon from "../../assets/platforms/SpotifyIcon.png"
 
 import { MultiValue } from "react-select"
+import { useState } from "react"
 
 export default {
   title: "ReactComponentLibrary/KDropdown",
@@ -29,7 +30,40 @@ export default {
   }
 } as Meta<typeof KDropdown>
 
-const Template: StoryFn<typeof KDropdown> = (args) => <KDropdown {...args} />
+const KDropdownWrapper: React.FC<KDropdownProps> = (args) => {
+  const [selectedOption, setSelectedOption] = useState<KSelectOption | undefined>(undefined)
+
+  const 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: "EVREN TANIK EVREN TANIK", value: 10 },
+    { label: "TANIK", value: 11 },
+    { label: "Spotify", value: 12, value2: "spo-spotify", icon: SpotifyIcon, iconLabel: SpotifyLogo },
+    { label: "All", value: 12, value2: "spo-spotify", icon: SpotifyIcon }
+  ]
+
+  return (
+    <div className="w-24">
+      <KDropdown
+        {...args}
+        options={options}
+        onSelect={(selected: KSelectOption | MultiValue<KSelectOption> | undefined) => {
+          setSelectedOption(selected as KSelectOption)
+        }}
+        selected={selectedOption}
+      />
+    </div>
+  )
+}
+
+const Template: StoryFn<typeof KDropdownWrapper> = (args) => <KDropdownWrapper {...args} />
 
 export const KDropdownSingle = Template.bind({})
 KDropdownSingle.args = {
@@ -46,9 +80,10 @@ KDropdownSingle.args = {
   isClearable: true,
   isEllipsis: true,
   allowContainerShrink: true,
-  defaultValuePrimitive: 7,
   hideChosenOptionIcon: true,
-  // defaultValue: { label: "Label 1", value: 1, icon: TracksIcon },
+  onBlur: (value: any) => {
+    console.log(value)
+  },
   options: [
     { label: "Label 1", value: 1, icon: TracksIcon },
     { label: "Label 4", value: 2, icon: TracksIcon },
@@ -62,8 +97,9 @@ KDropdownSingle.args = {
     { label: "EVREN TANIK EVREN TANIK", value: 10 },
     { label: "TANIK", value: 11 },
     { label: "Spotify", value: 12, value2: "spo-spotify", icon: SpotifyIcon, iconLabel: SpotifyLogo },
-    { label: "All", value: 12, value2: "spo-spotify", icon: SpotifyIcon}
+    { label: "All", value: 12, value2: "spo-spotify", icon: SpotifyIcon }
   ]
+  //selected: { label: "Label 1", value: 1, icon: TracksIcon }
 }
 
 export const KDropdownMulti = Template.bind({})
@@ -74,7 +110,7 @@ const options = [
   { label: "Label 2", value: 4, icon: AppleIcon },
   { label: "Label 2", value: 5, icon: MetaIcon },
   { label: "Spotify", value: 6, value2: "spo-spotify", icon: SpotifyIcon, iconLabel: SpotifyLogo },
-  { label: "Label 7", value: 7 },
+  { label: "Label 7", value: 7 }
 ]
 KDropdownMulti.args = {
   onSelect: (value: KSelectOption | MultiValue<KSelectOption> | undefined) => {},
@@ -86,7 +122,10 @@ KDropdownMulti.args = {
   placeholderColor: "#000",
   enableIndicator: true,
   showOnlyIconsInMulti: true,
-  rightIcon: CaretDownIcon
+  rightIcon: CaretDownIcon,
+  onBlur: (value: any) => {
+    console.log(value)
+  }
 }
 
 export const KDropdownLeftIcon = Template.bind({})
@@ -103,7 +142,7 @@ KDropdownRightIcon.args = {
   placeholder: "Placeholder...",
   rightIcon: TracksIcon,
   placeholderColor: "#F00",
-  allowContainerShrink: true, 
+  allowContainerShrink: true,
   width: 250,
   menuWidth: 200,
   options: [
@@ -124,6 +163,6 @@ KDropdownLeftRightIcon.args = {
   placeholder: "Placeholder...",
   leftIcon: TracksIcon,
   rightIcon: TracksIcon,
-  enableIndicator:true,
+  enableIndicator: true,
   gap: "15px"
 }

package/src/components/KDropdown/KDropdown.tsx

@@ -39,28 +39,39 @@ export interface KDropdownProps {
   menuBackground?: string
   padding?: string
   gap?: string
+  onBlur?: (value: KSelectOption | MultiValue<KSelectOption> | undefined) => void
   hideChosenOptionIcon?: boolean // hides the selected option's icon in the container, not menu
   isClearable?: boolean // makes possible to clear the selected option
   isEllipsis?: boolean // adds ellipsis to the container if label overflows, width should be fixed value
   showOnlyIconsInMulti?: boolean // adds only icons of selected options to the container, not labels
-  menuWidth?: string | number 
+  menuWidth?: string | number
   menuLeftMargin?: number // lets to change menu's position horizontally
   placeholderColor?: string
   enableIndicator?: boolean // if rightIcon is provided, lets it to open-close menu
   allowContainerShrink?: boolean // allows container to shrink if label is smaller than width, width should be fixed value
+  border?: string
+  activeBorder?: string
 }
 
 const KDropdown: React.FC<KDropdownProps> = (props) => {
   const [selectedOption, setSelectedOption] = useState<KSelectOption | MultiValue<KSelectOption>>()
   const [iconCount, setIconCount] = useState<number>(0)
   const [background, setBackground] = useState("#F5F5F5")
+  const [border, setBorder] = useState("none")
 
   useEffect(() => {
     const emptyBackground = props.background || "#F5F5F5"
     const activeBackground = props.activeBackground || "#FFF"
 
+    const emptyBorder = props.border || "none"
+    const activeBorder = props.activeBorder || emptyBorder
+
     const background = props.selected ? activeBackground : emptyBackground
+    const border = props.selected ? activeBorder : emptyBorder
+
     setBackground(background)
+    setBorder(border)
+  
   }, [props.selected])
 
   const width = props.width || "100%"
@@ -204,7 +215,8 @@ const KDropdown: React.FC<KDropdownProps> = (props) => {
         height,
         boxShadow,
         padding,
-        gap
+        gap,
+        border
       }}
     >
       {props.leftIcon && <img src={props.leftIcon} width={20} alt={"l-icon"} />}
@@ -216,6 +228,9 @@ const KDropdown: React.FC<KDropdownProps> = (props) => {
         placeholder={props.placeholder || ""}
         options={props.options}
         className={"k-dropdown"}
+        onBlur={() => {
+          if (props.onBlur) props.onBlur(selectedOption)
+        }}
         filterOption={customFilterOption}
         isClearable={isClearable}
         hideSelectedOptions={!isMulti ? false : showOnlyIconsInMulti ? false : true}
@@ -261,8 +276,12 @@ const KDropdown: React.FC<KDropdownProps> = (props) => {
             marginTop: 4,
             borderRadius: 10,
             color: "#111",
+            transition: "all 0.3s",
             "&:hover": {
               background: "#F7F7F7"
+            },
+            "&:active": {
+              background: "white"
             }
           }),
           valueContainer: (base) => ({

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

@@ -1,8 +1,8 @@
 import { Meta, StoryFn } from "@storybook/react"
-import KInput from "./KInput"
+import KInput, { KInputProps } from "./KInput"
 // @ts-ignore
 import TracksIcon from "../../assets/tracks.svg"
-import { KeyboardEvent } from "react"
+import { KeyboardEvent, useState } from "react"
 
 export default {
   title: "ReactComponentLibrary/KInput",
@@ -12,7 +12,41 @@ export default {
   }
 } as Meta<typeof KInput>
 
-const Template: StoryFn<typeof KInput> = (args) => <KInput {...args} />
+
+const KInputWrapper: React.FC<KInputProps> = (args) => {
+
+ const [textValue, setTextValue] = useState<string>("")
+
+  return (
+    <KInput
+      {...args}
+      value={textValue}
+      onChange={(text) => {
+        setTextValue(text)
+
+      }}
+    />
+  )
+}
+
+const Template: StoryFn<typeof KInputWrapper> = (args) => <KInputWrapper {...args} />
+
+export const KInputPrimary = Template.bind({})
+KInputPrimary.args = {
+
+  onKeyDown: (event: KeyboardEvent) => {
+    if (event.key === "Enter") {
+      console.log("Enter is clicked and our value is:", event.currentTarget)
+    }
+  },
+  placeholder: "Placeholder...",
+  hoverBackground: "white",
+  activeBackground: "red",
+  border: "1px solid black",
+  hoverBorder: "1px solid red",
+  activeBorder: "1px solid transparent",
+}
+
 
 export const KInputRange = Template.bind({})
 KInputRange.args = {
@@ -35,20 +69,6 @@ KInputCheckbox.args = {
   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) => {},
@@ -56,7 +76,13 @@ KInputLeftIcon.args = {
   leftIcon: TracksIcon,
   leftIconClick: () => {
     alert("left icon clicked")
-  }
+  },
+  activeBackground: "red",
+  hoverBackground: "white",
+  border: "1px solid black",
+  activeBorder: "1px solid blue",
+  hoverBorder: "1px solid yellow"
+
 }
 
 export const KInputRightIcon = Template.bind({})

package/src/components/KInput/KInput.tsx

@@ -28,18 +28,25 @@ export interface KInputProps {
   fontSize?: string
   iconSize?: string
   checked?: boolean
+  hoverBorder?: string
+  activeBorder?: string
 }
 
 const KInput: React.FC<KInputProps> = (props) => {
   const [background, setBackground] = useState("#F5F5F5")
+  const [border, setBorder] = useState("none")
   const [hover, setHover] = useState(false)
 
   useEffect(() => {
     const emptyBackground = props.background || "#F5F5F5"
     const activeBackground = props.activeBackground || "#FFF"
+    const emptyBorder = props.border || "none"
+    const activeBorder = props.activeBorder || emptyBorder
 
     const background = props.value ? activeBackground : emptyBackground
+    const border = props.value ? activeBorder : emptyBorder
     setBackground(background)
+    setBorder(border)
   }, [props.value])
 
   const width = props.width || "100%"
@@ -56,16 +63,23 @@ const KInput: React.FC<KInputProps> = (props) => {
   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 hoverBorder = props.hoverBorder || border
 
   return (
     <div
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
       className={"k-input-container"}
-      style={{ background: hover ? hoverBackground : background, borderRadius, boxShadow, padding, gap, border }}
+      style={{
+        background: hover ? hoverBackground : background,
+        borderRadius,
+        boxShadow,
+        padding,
+        gap,
+        border: hover ? hoverBorder : border
+      }}
     >
       {props.leftIcon && (
         <img

package/src/components/KSpan/KSpan.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryFn } from "@storybook/react"
-import KSpan from "./KSpan"
+import KSpan, { KSpanProps } from "./KSpan"
 
 export default {
   title: "ReactComponentLibrary/KSpan",
@@ -9,29 +9,28 @@ export default {
   }
 } as Meta<typeof KSpan>
 
-const Template: StoryFn<typeof KSpan> = (args) => <KSpan {...args} />
+const KSpanWrapper: React.FC<KSpanProps> = (args) => {
 
-export const KSpanPrimary = Template.bind({})
-KSpanPrimary.args = {
-  text: "Hello World",
-  fontSize: 14,
-  color: "#737373",
-  fontWeight: 400,
-  lineHeight: "20px",
-  fontStyle: "normal",
-  letterSpacing: "-0.084px",
-  textDecoration: "underline"
+  return (
+    <div className="min-[1000px]:w-[400px] min-[800px]:w-[300px] min-[700px]:w-[150px] w-28">
+      <div className="w-[100%] flex ">
+        <KSpan {...args} />
+      </div>
+    </div>
+  )
 }
 
+const Template: StoryFn<typeof KSpanWrapper> = (args) => <KSpanWrapper {...args} />
 
-export const KSpanHoverText = Template.bind({})
-KSpanHoverText.args = {
-  text: "Hello World",
+export const KSpanPrimary = Template.bind({})
+KSpanPrimary.args = {
+  text: "Hello World, how are you? Is everything alright?",
   fontSize: 14,
+  color: "#737373",
   fontWeight: 400,
   lineHeight: "20px",
-  color: "#111",
   fontStyle: "normal",
   letterSpacing: "-0.084px",
-  hoverText: "Hover"
+  textDecoration: "underline",
+  ellipsis: true
 }

package/src/components/KSpan/KSpan.tsx

@@ -9,15 +9,11 @@ export interface KSpanProps {
   lineHeight?: string
   fontStyle?: string
   letterSpacing?: string
-  hoverText?: string
-  hoverTextColor?: string
-  hoverStyle?: CSSProperties,
   textDecoration?: string,
   ellipsis?: boolean
 }
 
 const KSpan: React.FC<KSpanProps> = (props) => {
-  const [onHover, setOnHover] = useState(false)
 
   const fontSize = props.fontSize || 14
   const color = props.color || "#737373"
@@ -25,47 +21,19 @@ const KSpan: React.FC<KSpanProps> = (props) => {
   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()
+  return (
+    <span
+    className={"k-span"}
+    style={{ fontSize, color, fontWeight, lineHeight, fontStyle, letterSpacing, textDecoration, ...(ellipsis && ellipsisStyle)}}
+  >
+    {props.text}
+  </span>
+  )
 }
 
-export default KSpan
+export default KSpan

package/src/components/KTitleSpan/KTitleSpan.stories.tsx

@@ -1,5 +1,5 @@
 import {Meta, StoryFn} from "@storybook/react";
-import KTitleSpan from "./KTitleSpan";
+import KTitleSpan, { KTitleSpanProps } from "./KTitleSpan";
 
 export default {
   title: "ReactComponentLibrary/KTitleSpan",
@@ -9,10 +9,33 @@ export default {
   },
 } as Meta<typeof KTitleSpan>;
 
-const Template: StoryFn<typeof KTitleSpan> = (args) => <KTitleSpan {...args} />;
+const KTitleSpanWrapper: React.FC<KTitleSpanProps> = (args) => {
+
+  return (
+    <div className="min-[1000px]:w-[300px] min-[800px]:w-[200px] min-[700px]:w-[150px] w-[100px]">
+      <div className="w-[100%]">
+        <KTitleSpan {...args} />
+      </div>
+    </div>
+  )
+}
+
+const Template: StoryFn<typeof KTitleSpanWrapper> = (args) => <KTitleSpanWrapper {...args} />;
 
 export const KTitleSpanPrimary = Template.bind({});
 KTitleSpanPrimary.args = {
+  text: "Hello how?",
+  fontSize: 48,
+  color: "#111",
+  lineHeight: "56px",
+  fontStyle: "normal",
+  letterSpacing: "-0.48px",
+  bold: false,
+  ellipsis: true
+};
+
+export const KTitleSpanSecondary = Template.bind({});
+KTitleSpanSecondary.args = {
   text: "Hello World",
   fontSize: 48,
   color: "#111",