kahuna-base-react-components 1.0.7 → 1.1.0

package/src/components/KInput/KInput.tsx

@@ -0,0 +1,128 @@
+import React, { useEffect, useState, KeyboardEvent } from "react"
+import "../../main.css"
+
+export interface KInputProps {
+  value: string
+  onChange: (value: string) => void
+  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
+  type?: string
+  leftIconClick?: () => void
+  rightIconClick?: () => void
+  accentColor?: string
+  hoverBackground?: string
+  padding?: string
+  gap?: string
+  border?: string
+  boxShadow?: string
+  fontSize?: string
+  iconSize?: string
+  checked?: boolean
+}
+
+const KInput: React.FC<KInputProps> = (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 || 20
+  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 type = props.type || "text"
+  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"
+
+  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()
+          }}
+        />
+      )}
+
+      <input
+        type={type}
+        className={"k-input"}
+        style={{
+          background: hover ? hoverBackground : background,
+          width,
+          height,
+          accentColor,
+          fontSize
+        }}
+        {...(props.checked && (type === "checkbox" || type === "radio") && { checked: props.checked })}
+        value={props.value}
+        placeholder={props.placeholder || ""}
+        disabled={disabled}
+        onBlur={(event) => {
+          if (props.onBlur) props.onBlur(event.target.value)
+        }}
+        onChange={(event) => {
+          props.onChange(event.target.value)
+        }}
+        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 KInput

package/src/components/KInput/index.ts

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

package/src/components/KLogo/KLogo.stories.tsx

@@ -0,0 +1,24 @@
+import {Meta, StoryFn} from "@storybook/react";
+import KLogo from "./KLogo";
+
+export default {
+  title: "ReactComponentLibrary/KLogo",
+  component: KLogo,
+  parameters: {
+    layout: 'centered',
+  },
+} as Meta<typeof KLogo>;
+
+const Template: StoryFn<typeof KLogo> = (args) => <KLogo {...args} />;
+
+export const KLogoText = Template.bind({});
+KLogoText.args = {
+  logoColor: "white",
+  width: 77,
+  height: 77
+};
+
+export const KLogoHover = Template.bind({});
+KLogoHover.args = {
+  hoverEnabled: true,logoColor:"gray"
+};

package/src/components/KLogo/KLogo.tsx

@@ -0,0 +1,79 @@
+import React, { useState } from "react"
+import "../../main.css"
+//@ts-ignore
+import Logo from "../../assets/logo.svg"
+//@ts-ignore
+import KahunaIcon from "../../assets/kahuna-text.svg"
+//@ts-ignore
+import VectorIcon from "../../assets/vector.svg"
+//@ts-ignore
+import LogoWhite from "../../assets/logo-small.svg"
+//@ts-ignore
+import LogoWhiteHovered from "../../assets/logo-small-hovered.svg"
+//@ts-ignore
+import UnionSvg from "../../assets/union.svg"
+//@ts-ignore
+import LogoGray from "../../assets/logo-gray.svg"
+import KTitleSpan from "../KTitleSpan"
+import KSpan from "../KSpan"
+
+export interface KLogoProps {
+  width?: number
+  height?: number
+  borderRadius?: number
+  primaryTextVisible?: boolean
+  secondaryText?: string
+  logoColor?: string
+  hoverEnabled?: boolean
+  secondaryTextColor?: string
+  secondaryTextFontSize?: number
+  hideIcon?: boolean
+  primaryTextWidth?: number
+  primaryTextHeight?: number
+}
+
+const KLogo: React.FC<KLogoProps> = (props) => {
+  const width = props.width || 88
+  const height = props.height || 88
+  const borderRadius = props.borderRadius !== undefined ? props.borderRadius : 10
+  const logoColor = props.logoColor || "black"
+
+  const logoIcon = logoColor === "black" ? Logo : logoColor === "white" ? LogoWhite : LogoGray
+  const hoverEnabled = props.hoverEnabled || false
+  const hideIcon = props.hideIcon || false
+
+  const primaryTextVisible = props.primaryTextVisible || false
+  const primaryTextWidth = props.primaryTextWidth || 76
+  const primaryTextHeight = props.primaryTextHeight || 16
+  const secondaryTextColor = props.secondaryTextColor || "#000"
+  const secondaryTextFontSize = props.secondaryTextFontSize || 14
+
+  const [onHover, setOnHover] = useState(false)
+
+  return (
+    <div className={"flex items-center"}>
+      {!hideIcon && (
+        <img
+          src={onHover && hoverEnabled ? LogoWhiteHovered : logoIcon}
+          alt={"kahuna-logo"}
+          style={{ borderRadius, width, height }}
+          onMouseEnter={() => setOnHover(true)}
+          onMouseLeave={() => setOnHover(false)}
+        />
+      )}
+      {primaryTextVisible && (
+        <div className={"mr-2 flex items-center"}>
+          <img src={UnionSvg} alt={"kahuna-union"} style={{ width: primaryTextWidth, height: primaryTextHeight }} />
+        </div>
+      )}
+      {primaryTextVisible && props.secondaryText && <img src={VectorIcon} alt="vector" />}
+      {props.secondaryText && (
+        <div className={"pl-2 flex items-center"}>
+          <KSpan fontSize={secondaryTextFontSize} text={props.secondaryText} color={secondaryTextColor} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default KLogo

package/src/components/KLogo/index.ts

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

package/src/components/KSelectDate/CalendarCustom.css

@@ -0,0 +1,235 @@
+.react-calendar {
+    width: 350px;
+    max-width: 100%;
+    background: white;
+    border: 1px solid #E7E7E7;
+    font-family: Inter;
+    line-height: 1.125em;
+    border-top-left-radius: 16px;
+    border-top-right-radius: 16px;
+    padding: 20px;
+    font-size: 14px;
+    color: #1F1F1F;
+    font-weight: 500;
+}
+
+.react-calendar--doubleView {
+    width: 700px;
+}
+
+.react-calendar--doubleView .react-calendar__viewContainer {
+    display: flex;
+    margin: -0.5em;
+    border-radius: 16px;
+}
+
+.react-calendar--doubleView .react-calendar__viewContainer>* {
+    width: 50%;
+    margin: 0.5em;
+}
+
+.react-calendar,
+.react-calendar *,
+.react-calendar *:before,
+.react-calendar *:after {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.react-calendar button {
+    margin: 0;
+    border: 0;
+    outline: none;
+}
+
+.react-calendar button:enabled:hover {
+    cursor: pointer;
+}
+
+.react-calendar__navigation {
+    display: flex;
+    height: 36px;
+    align-items: center;
+}
+
+.react-calendar__navigation button {
+    width: 44px;
+    color: #111;
+    font-weight: 500;
+    line-height: 24px;
+    letter-spacing: -0.176px;
+    background: none;
+}
+
+
+.react-calendar__navigation button:disabled {
+    background-color: #f0f0f0;
+}
+
+.react-calendar__navigation button:enabled:hover,
+.react-calendar__navigation button:enabled:focus {
+    background-color: #F0F0F0;
+}
+
+.react-calendar__month-view__weekdays {
+    text-align: center;
+    text-transform: uppercase;
+    font: inherit;
+    font-size: 0.75em;
+    font-weight: bold;
+}
+
+.react-calendar__month-view__weekdays__weekday {
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+    letter-spacing: -0.084px;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.react-calendar__month-view__weekNumbers .react-calendar__tile {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font: inherit;
+    font-size: 0.75em;
+    font-weight: bold;
+}
+
+.react-calendar__month-view__days {
+    justify-content: space-between;
+
+}
+
+.react-calendar__month-view__days__day {
+    flex-basis: auto !important;
+    border-radius: 20px;
+}
+
+.react-calendar__month-view__days__day--weekend {
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+    /* 142.857% */
+    letter-spacing: -0.084px;
+    color: #1F1F1F;
+}
+
+.react-calendar__month-view__days__day--neighboringMonth,
+.react-calendar__decade-view__years__year--neighboringDecade,
+.react-calendar__century-view__decades__decade--neighboringCentury {
+    color: #D6D6D6;
+}
+
+.react-calendar__year-view .react-calendar__tile,
+.react-calendar__decade-view .react-calendar__tile,
+.react-calendar__century-view .react-calendar__tile {
+    padding: 0;
+    /*old value : 2em 0.5em*/
+}
+
+.react-calendar__navigation__arrow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px !important;
+    height: 24px;
+    border-radius: 12px;
+    ;
+}
+
+.react-calendar__tile {
+    height: 40px;
+    width: 40px !important;
+    background: none;
+    text-align: center;
+    font: inherit;
+}
+
+.react-calendar__tile:disabled {
+    background-color: #f0f0f0;
+    color: #ababab;
+}
+
+.react-calendar__month-view__days__day--neighboringMonth:disabled,
+.react-calendar__decade-view__years__year--neighboringDecade:disabled,
+.react-calendar__century-view__decades__decade--neighboringCentury:disabled {
+    color: #cdcdcd;
+}
+
+.react-calendar__tile:enabled:hover,
+.react-calendar__tile:enabled:focus {
+    background-color: #F0F0F0;
+}
+
+.react-calendar__tile--now {
+    background: #F2FE67
+}
+
+.react-calendar__tile--now:enabled:hover,
+.react-calendar__tile--now:enabled:focus {
+    background: #ffffa9;
+}
+
+.react-calendar__tile--hasActive {
+    background: #111111;
+    /*76baff*/
+    color: #FFFFFF;
+}
+
+.react-calendar__tile--hasActive:enabled:hover,
+.react-calendar__tile--hasActive:enabled:focus {
+    background: #111111;
+    /*old value: #a9d4ff*/
+}
+
+.react-calendar__tile--active {
+    background: #111;
+    color: white;
+    border-radius: 999px;
+    height: 40px;
+    width: 40px !important;
+}
+
+.react-calendar__tile--active:enabled:hover,
+.react-calendar__tile--active:enabled:focus {
+    background: #111111;
+    /*old value: 1087ff*/
+}
+
+.react-calendar--selectRange .react-calendar__tile--hover {
+    background-color: #F0F0F0;
+}
+
+.react-calendar__month-view__weekdays__weekday {
+    text-decoration: none !important;
+}
+
+.react-calendar__month-view__weekdays__weekday--weekend {
+    text-decoration: none;
+}
+
+abbr:where([title]) {
+    text-decoration: none !important;
+    color: #3D3D3D;
+}
+
+.react-calendar__navigation__label__labelText {
+    color: #111;
+    font-size: 16px;
+    font-weight: 500 !important;
+    line-height: 24px;
+    letter-spacing: -0.176px;
+}
+
+.react-calendar__year-view__months__month {
+    padding: 0 !important;
+}

package/src/components/KSelectDate/KSelectDate.stories.tsx

@@ -0,0 +1,54 @@
+import { Meta, StoryFn } from "@storybook/react"
+import KSelectDate, { KSelectDateProps } from "./KSelectDate"
+import { useEffect, useState } from "react"
+
+export default {
+  title: "ReactComponentLibrary/KSelectDate",
+  component: KSelectDate,
+  parameters: {
+    layout: "centered"
+  }
+} as Meta<typeof KSelectDate>
+
+const KSelectDateWrapper: React.FC<KSelectDateProps> = (args) => {
+
+  const [selectedDate, setSelectedDate] = useState<Date | undefined>(undefined)
+  useEffect(() => {
+    console.log("selectedDate: ", selectedDate)
+  }, [selectedDate])
+
+  return (
+    <KSelectDate
+      {...args}
+      value={selectedDate}
+      onChange={(date) => {
+        console.log("date: ", date)
+        if (date) {
+          setSelectedDate(date)
+          console.log("updating is completed: ", date)
+          console.log("updating is completed date.toISOString(): ", date?.toISOString())
+        } else {
+          setSelectedDate(undefined)
+          console.log("Deleting is completed")
+        }
+      }}
+    />
+  )
+}
+
+const Template: StoryFn<typeof KSelectDateWrapper> = (args) => <KSelectDateWrapper {...args} />
+
+export const KSelectDatePrimary = Template.bind({})
+KSelectDatePrimary.args = {
+  value: undefined,
+  onChange: (value) => {
+    if (value) {
+      console.log("value is updated using this value:", value)
+    } else {
+      console.log("value is deleted, because it is: ", value)
+    }
+  }
+}
+
+export const KSelectDateHoverText = Template.bind({})
+KSelectDateHoverText.args = {}