kahuna-base-react-components 0.2.11 → 0.2.13

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>;
 
@@ -98,7 +99,7 @@ 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;
@@ -117,6 +118,7 @@ interface KDropdownProps {
     gap?: string;
     hideChosenOptionIcon?: boolean;
     isClearable?: boolean;
+    isEllipsis?: boolean;
 }
 declare const KDropdown: React.FC<KDropdownProps>;
 
@@ -133,4 +135,27 @@ interface KSliderProps {
 }
 declare const KSlider: React.FC<KSliderProps>;
 
-export { KButton, KDropdown, KInput, KLogo, KSlider, KSpan, KTitleSpan };
+interface KSelectDateProps {
+    value: Date | undefined;
+    onChange: (date: Date | undefined) => void;
+}
+declare const KSelectDate: React.FC<KSelectDateProps>;
+
+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;
+}
+declare const KTooltip: React.FC<KTooltipProps>;
+
+export { KButton, KDropdown, KInput, KLogo, KSelectDate, KSlider, KSpan, KTitleSpan, KTooltip };

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "kahuna-base-react-components",
-  "version": "0.2.11",
+  "version": "0.2.13",
   "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,11 +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: 1,
+  defaultValuePrimitive: 7,
   options: [
     { label: "Label 1", value: 1, icon: TracksIcon },
     { label: "Label 4", value: 2, icon: TracksIcon },
@@ -29,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: [
@@ -48,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,
@@ -73,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

@@ -19,7 +19,7 @@ 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
@@ -38,6 +38,7 @@ export interface KDropdownProps {
   gap?: string
   hideChosenOptionIcon?: boolean
   isClearable?: boolean
+  isEllipsis?: boolean
 }
 
 const KDropdown: React.FC<KDropdownProps> = (props) => {
@@ -63,6 +64,7 @@ const KDropdown: React.FC<KDropdownProps> = (props) => {
   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) {
@@ -170,9 +172,9 @@ const KDropdown: React.FC<KDropdownProps> = (props) => {
           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>
           )
         }}
@@ -180,6 +182,7 @@ const KDropdown: React.FC<KDropdownProps> = (props) => {
           if (!event) {
             if (props.isClearable) {
               setSelectedOption(undefined)
+              props.onSelect(undefined)
             }
             return
           }

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