kahuna-base-react-components 0.2.10 → 0.2.12

package/dist/types.d.ts

@@ -33,6 +33,7 @@ interface KSpanProps {
     hoverTextColor?: string;
     hoverStyle?: CSSProperties;
     textDecoration?: string;
+    ellipsis?: boolean;
 }
 declare const KSpan: React.FC<KSpanProps>;
 
@@ -86,7 +87,7 @@ interface KInputProps {
 }
 declare const KInput: React.FC<KInputProps>;
 
-interface KSelectOption$1 {
+interface KSelectOption {
     label: string;
     value: number;
     type?: string;
@@ -94,11 +95,12 @@ interface KSelectOption$1 {
     value2?: string;
     icon?: string;
 }
-interface KDropdownProps$1 {
-    defaultValue?: KSelectOption$1 | MultiValue<KSelectOption$1>;
-    selected?: KSelectOption$1 | MultiValue<KSelectOption$1>;
-    onSelect: (selected: KSelectOption$1 | MultiValue<KSelectOption$1>) => void;
-    options: KSelectOption$1[];
+interface KDropdownProps {
+    defaultValue?: KSelectOption | MultiValue<KSelectOption>;
+    defaultValuePrimitive?: string | number;
+    selected?: KSelectOption | MultiValue<KSelectOption>;
+    onSelect: (selected: KSelectOption | MultiValue<KSelectOption> | undefined) => void;
+    options: KSelectOption[];
     width?: number;
     height?: number;
     leftIcon?: string;
@@ -115,8 +117,10 @@ interface KDropdownProps$1 {
     padding?: string;
     gap?: string;
     hideChosenOptionIcon?: boolean;
+    isClearable?: boolean;
+    isEllipsis?: boolean;
 }
-declare const KDropdown: React.FC<KDropdownProps$1>;
+declare const KDropdown: React.FC<KDropdownProps>;
 
 interface SliderOption {
     label: string;
@@ -131,36 +135,10 @@ interface KSliderProps {
 }
 declare const KSlider: React.FC<KSliderProps>;
 
-interface KSelectOption {
-    label: string;
-    value: number;
-    type?: string;
-    label2?: string;
-    value2?: string;
-    icon?: string;
-}
-interface KDropdownProps {
-    defaultValue?: KSelectOption | MultiValue<KSelectOption>;
-    selected?: KSelectOption | MultiValue<KSelectOption>;
-    onSelect: (selected: KSelectOption | MultiValue<KSelectOption>) => void;
-    options: KSelectOption[];
-    width?: number;
-    height?: number;
-    leftIcon?: string;
-    rightIcon?: string;
-    background?: string;
-    activeBackground?: string;
-    borderRadius?: number;
-    placeholder?: string;
-    isMulti?: boolean;
-    label?: string;
-    textColor?: string;
-    shadowDisabled?: boolean;
-    menuBackground?: string;
-    padding?: string;
-    gap?: string;
-    hideChosenOptionIcon?: boolean;
+interface KSelectDateProps {
+    value: Date | undefined;
+    onChange: (date: Date | undefined) => void;
 }
-declare const KDropdownToggle: React.FC<KDropdownProps>;
+declare const KSelectDate: React.FC<KSelectDateProps>;
 
-export { KButton, KDropdown, KDropdownToggle, KInput, KLogo, KSlider, KSpan, KTitleSpan };
+export { KButton, KDropdown, KInput, KLogo, KSelectDate, KSlider, KSpan, KTitleSpan };

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "kahuna-base-react-components",
-  "version": "0.2.10",
+  "version": "0.2.12",
   "description": "Kahuna Base React Components",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
+    "prebuild": "node removeUseClient.js",
     "build": "rollup -c --bundleConfigAsCjs && npm run remove-stories",
     "remove-stories": "find dist/ -name '*.stories.*' -type f -delete",
     "storybook": "storybook dev -p 6006",
@@ -64,6 +65,7 @@
     "typescript": "^5.4.2"
   },
   "dependencies": {
+    "react-date-picker": "^11.0.0",
     "react-select": "^5.8.0"
   }
-}
+}

package/removeUseClient.js

@@ -0,0 +1,22 @@
+const fs = require('fs')
+const path = require('path')
+
+// Function to remove "use client" directive from a file
+const removeUseClientDirective = (filePath) => {
+  const content = fs.readFileSync(filePath, 'utf8')
+  const updatedContent = content.replace(/^['"]use client['"];/, '')
+  fs.writeFileSync(filePath, updatedContent, 'utf8')
+};
+
+// Specify the paths to the files that contain "use client"
+const reactCalendarPath = path.resolve(__dirname, 'node_modules', 'react-calendar', 'dist', 'esm')
+const filesToUpdate = [
+  path.join(reactCalendarPath, 'Calendar.js'),
+  path.join(reactCalendarPath, 'Calendar', 'Navigation.js'),
+  // Add any other necessary files
+];
+
+// Remove the directive from each file
+filesToUpdate.forEach(removeUseClientDirective)
+
+console.log('Removed "use client" directives from react-calendar.')

package/rollup.config.js

@@ -37,6 +37,8 @@ export default [
         extensions: [".css"]
       })
     ],
+    context: 'window',
+    moduleContext: id => 'window',
     external: ["react", "react-dom"],
   },
   {

package/src/assets/calendar-hovered.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <path d="M13.75 3.25H16.75C16.9489 3.25 17.1397 3.32902 17.2803 3.46967C17.421 3.61032 17.5 3.80109 17.5 4V16C17.5 16.1989 17.421 16.3897 17.2803 16.5303C17.1397 16.671 16.9489 16.75 16.75 16.75H3.25C3.05109 16.75 2.86032 16.671 2.71967 16.5303C2.57902 16.3897 2.5 16.1989 2.5 16V4C2.5 3.80109 2.57902 3.61032 2.71967 3.46967C2.86032 3.32902 3.05109 3.25 3.25 3.25H6.25V1.75H7.75V3.25H12.25V1.75H13.75V3.25ZM12.25 4.75H7.75V6.25H6.25V4.75H4V7.75H16V4.75H13.75V6.25H12.25V4.75ZM16 9.25H4V15.25H16V9.25Z" fill="#434345"/>
+</svg>

package/src/assets/calendar.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <path d="M13.75 3.25H16.75C16.9489 3.25 17.1397 3.32902 17.2803 3.46967C17.421 3.61032 17.5 3.80109 17.5 4V16C17.5 16.1989 17.421 16.3897 17.2803 16.5303C17.1397 16.671 16.9489 16.75 16.75 16.75H3.25C3.05109 16.75 2.86032 16.671 2.71967 16.5303C2.57902 16.3897 2.5 16.1989 2.5 16V4C2.5 3.80109 2.57902 3.61032 2.71967 3.46967C2.86032 3.32902 3.05109 3.25 3.25 3.25H6.25V1.75H7.75V3.25H12.25V1.75H13.75V3.25ZM12.25 4.75H7.75V6.25H6.25V4.75H4V7.75H16V4.75H13.75V6.25H12.25V4.75ZM16 9.25H4V15.25H16V9.25Z" fill="#111111"/>
+</svg>

package/src/assets/separator.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="2" height="14" viewBox="0 0 2 14" fill="none">
+  <path d="M1 1V13" stroke="#E7E7E7" stroke-linecap="round"/>
+</svg>

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

@@ -16,9 +16,19 @@ const Template: StoryFn<typeof KDropdown> = (args) => <KDropdown {...args} />
 
 export const KDropdownSingle = Template.bind({})
 KDropdownSingle.args = {
-  onSelect: (value: KSelectOption | MultiValue<KSelectOption>) => {},
+  onSelect: (value: KSelectOption | MultiValue<KSelectOption> | undefined) => {
+    if (value === undefined) {
+      console.log("our value is undefined, deleting process can be performed")
+    } else {
+      console.log("update process can be performed")
+    }
+  },
   width: 250,
   placeholder: "Select single...",
+  isClearable: true,
+  isEllipsis: true,
+  // defaultValue: { label: "Label 1", value: 1, icon: TracksIcon },
+  defaultValuePrimitive: 7,
   options: [
     { label: "Label 1", value: 1, icon: TracksIcon },
     { label: "Label 4", value: 2, icon: TracksIcon },
@@ -27,13 +37,15 @@ KDropdownSingle.args = {
     { label: "R&B", value: 5 },
     { label: "Çınar", value: 6 },
     { label: "ELEKTRONIC ", value: 7 },
-    { label: "TANIK", value: 8 }
+    { label: "TANIK", value: 8 },
+    { label: "Very very very very very long content.", value: 9 },
+    { label: "TANIK", value: 10 }
   ]
 }
 
 export const KDropdownMulti = Template.bind({})
 KDropdownMulti.args = {
-  onSelect: (value: KSelectOption | MultiValue<KSelectOption>) => {},
+  onSelect: (value: KSelectOption | MultiValue<KSelectOption> | undefined) => {},
   width: 250,
   placeholder: "Multi...",
   options: [
@@ -46,14 +58,14 @@ KDropdownMulti.args = {
 
 export const KDropdownLeftIcon = Template.bind({})
 KDropdownLeftIcon.args = {
-  onSelect: (value: KSelectOption | MultiValue<KSelectOption>) => {},
+  onSelect: (value: KSelectOption | MultiValue<KSelectOption> | undefined) => {},
   placeholder: "Placeholder...",
   leftIcon: TracksIcon
 }
 
 export const KDropdownRightIcon = Template.bind({})
 KDropdownRightIcon.args = {
-  onSelect: (value: KSelectOption | MultiValue<KSelectOption>) => {},
+  onSelect: (value: KSelectOption | MultiValue<KSelectOption> | undefined) => {},
   placeholder: "Placeholder...",
   rightIcon: TracksIcon,
   width: 250,
@@ -71,7 +83,7 @@ KDropdownRightIcon.args = {
 
 export const KDropdownLeftRightIcon = Template.bind({})
 KDropdownLeftRightIcon.args = {
-  onSelect: (value: KSelectOption | MultiValue<KSelectOption>) => {},
+  onSelect: (value: KSelectOption | MultiValue<KSelectOption> | undefined) => {},
   placeholder: "Placeholder...",
   leftIcon: TracksIcon,
   rightIcon: TracksIcon

package/src/components/KDropdown/KDropdown.tsx

@@ -17,8 +17,9 @@ export interface KSelectOption {
 
 export interface KDropdownProps {
   defaultValue?: KSelectOption | MultiValue<KSelectOption>
+  defaultValuePrimitive?: string | number
   selected?: KSelectOption | MultiValue<KSelectOption>
-  onSelect: (selected: KSelectOption | MultiValue<KSelectOption>) => void
+  onSelect: (selected: KSelectOption | MultiValue<KSelectOption> | undefined) => void
   options: KSelectOption[]
   width?: number
   height?: number
@@ -36,6 +37,8 @@ export interface KDropdownProps {
   padding?: string
   gap?: string
   hideChosenOptionIcon?: boolean
+  isClearable?: boolean
+  isEllipsis?: boolean
 }
 
 const KDropdown: React.FC<KDropdownProps> = (props) => {
@@ -60,6 +63,15 @@ const KDropdown: React.FC<KDropdownProps> = (props) => {
   const padding = props.padding || "8px"
   const gap = props.gap || "4px"
   const hideIcon = props.hideChosenOptionIcon || false
+  const isClearable = props.isClearable || false
+  const isEllipsis = props.isEllipsis || false
+
+  let defaultValue = props.defaultValue
+  if (!defaultValue && props.defaultValuePrimitive) {
+    defaultValue = props.options.find(
+      (option) => option.value === props.defaultValuePrimitive || option.value2 === props.defaultValuePrimitive
+    )
+  }
 
   const customFilterOption = (option: FilterOptionOption<KSelectOption>, inputValue: string) => {
     return option.data.label.toLocaleLowerCase("en").includes(inputValue.toLocaleLowerCase("en"))
@@ -87,13 +99,14 @@ const KDropdown: React.FC<KDropdownProps> = (props) => {
       {props.leftIcon && <img src={props.leftIcon} width={20} alt={"l-icon"} />}
 
       <Select
-        defaultValue={props.defaultValue}
+        defaultValue={defaultValue}
         isMulti={isMulti}
         name={props.label || ""}
         placeholder={props.placeholder || ""}
         options={props.options}
         className={"k-dropdown"}
         filterOption={customFilterOption}
+        isClearable={isClearable}
         styles={{
           control: (baseStyles, state) => ({
             ...baseStyles,
@@ -149,20 +162,28 @@ const KDropdown: React.FC<KDropdownProps> = (props) => {
           placeholder: (base) => ({
             ...base,
             margin: 0
+          }),
+          clearIndicator: (base) => ({
+            ...base,
+            padding: 0
           })
         }}
         components={{
           IndicatorSeparator: () => null,
           DropdownIndicator: () => null,
           SingleValue: ({ data, ...props }) => (
-            <div className="flex" style={{ position: "absolute" }}>
+            <div className={`flex ${isEllipsis ? "w-full" : ""}`} style={{ position: "absolute" }}>
               {data.icon && !hideIcon && <img src={data.icon} className="mr-2" width={20} alt={"data-icon"} />}
-              <KSpan text={data.label} color="#111" />
+              <KSpan text={data.label} color="#111" ellipsis={isEllipsis} />
             </div>
           )
         }}
         onChange={(event) => {
           if (!event) {
+            if (props.isClearable) {
+              setSelectedOption(undefined)
+              props.onSelect(undefined)
+            }
             return
           }
           setSelectedOption(event)

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 = {}