kahuna-base-react-components 1.0.7 → 1.1.1

package/dist/types.d.ts

@@ -1,18 +1,252 @@
-import React from 'react';
+import React, { CSSProperties, KeyboardEvent } from 'react';
+import { MultiValue } from 'react-select';
 
 interface KButtonProps {
-    testIdPrefix: string;
-    label?: string;
-    theme: "primary" | "secondary";
+    onClick: () => void;
+    text?: string;
+    icon?: string;
+    rightIcon?: string;
+    leftIcon?: string;
+    background?: string;
+    borderRadius?: number;
+    width?: string;
+    height?: string;
     disabled?: boolean;
+    textColor?: string;
+    padding?: string;
+    shadowDisabled?: boolean;
+    hoverBackground?: string;
+    fontWeight?: number;
+    textDecoration?: string;
+    gap?: string;
 }
 declare const KButton: React.FC<KButtonProps>;
 
 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;
 }
 declare const KSpan: React.FC<KSpanProps>;
 
-export { KButton, KSpan };
+interface KTitleSpanProps {
+    text: string;
+    fontSize?: number;
+    color?: string;
+    fontWeight?: number;
+    lineHeight?: string;
+    fontStyle?: string;
+    letterSpacing?: string;
+    bold?: boolean;
+}
+declare const KTitleSpan: React.FC<KTitleSpanProps>;
+
+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;
+}
+declare const KLogo: React.FC<KLogoProps>;
+
+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;
+}
+declare const KInput$1: React.FC<KInputProps>;
+
+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;
+    maxHeight?: number;
+}
+declare const KTextArea: React.FC<KTextAreaProps>;
+
+interface KSelectOption {
+    label: string;
+    value: number;
+    type?: string;
+    label2?: string;
+    value2?: string;
+    icon?: string;
+}
+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;
+    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;
+    isClearable?: boolean;
+    isEllipsis?: boolean;
+}
+declare const KDropdown: React.FC<KDropdownProps>;
+
+interface SliderOption {
+    label: string;
+    value: number;
+}
+interface KSliderProps {
+    options: SliderOption[];
+    onChange: (option: SliderOption) => void;
+    value?: number;
+    disabled?: boolean;
+    width?: string;
+}
+declare const KSlider: React.FC<KSliderProps>;
+
+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>;
+
+interface SliderLabelOption {
+    label: string;
+    value: number;
+}
+interface SliderLabelProps {
+    options: SliderLabelOption[];
+    onChange: (option: SliderLabelOption) => void;
+    value?: number;
+    disabled?: boolean;
+    width?: string;
+    titleText?: string;
+    valueText?: string;
+    fontSize?: number;
+    color?: string;
+}
+declare const KSliderLabel: React.FC<SliderLabelProps>;
+
+interface KCodeInputProps {
+    onChange: (value: string) => void;
+    length?: number;
+    borderRadius?: number;
+    disabled?: boolean;
+    padding?: string;
+    gap?: number;
+    fontSize?: string;
+    fontWeight?: string;
+    color?: string;
+    lineHeight?: string;
+    allowedCharacters?: "numeric" | "alphaNumeric" | "alpha";
+    width?: number;
+    height?: number;
+    autoFocus?: boolean;
+    isPassword?: boolean;
+    background?: string;
+    hoverBackground?: string;
+    focusedBackground?: string;
+    filledBackground?: string;
+    border?: string;
+    hoverBorder?: string;
+    focusedBorder?: string;
+    filledBorder?: string;
+    boxShadow?: string;
+    hoverBoxShadow?: string;
+    focusedBoxShadow?: string;
+    filledBoxShadow?: string;
+    fitInContainer?: boolean;
+    isCodeCorrect?: boolean;
+    autoBlur?: boolean;
+}
+declare const KInput: React.FC<KCodeInputProps>;
+
+export { KButton, KInput as KCodeInput, KDropdown, KInput$1 as KInput, KLogo, KSelectDate, KSlider, KSliderLabel, KSpan, KTextArea, KTitleSpan, KTooltip };

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "kahuna-base-react-components",
-  "version": "1.0.7",
+  "version": "1.1.1",
   "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",
-    "build": "rollup -c --bundleConfigAsCjs",
+    "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",
     "build-storybook": "storybook build"
   },
@@ -31,6 +33,7 @@
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
     "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-image": "^3.0.3",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
@@ -45,16 +48,24 @@
     "@testing-library/react": "^14.2.1",
     "@types/jest": "^29.5.12",
     "@types/react": "^18.2.64",
+    "autoprefixer": "^10.4.18",
     "babel-jest": "^29.7.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "postcss": "^8.4.35",
     "rollup": "^4.12.1",
+    "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "storybook": "^7.6.17",
+    "tailwindcss": "^3.4.1",
     "tslib": "^2.6.2",
     "typescript": "^5.4.2"
+  },
+  "dependencies": {
+    "react-date-picker": "^11.0.0",
+    "react-select": "^5.8.0"
   }
-}
+}

package/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  }
+}

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

@@ -6,6 +6,7 @@ import dts from "rollup-plugin-dts";
 import terser from "@rollup/plugin-terser";
 import peerDepsExternal from "rollup-plugin-peer-deps-external";
 import postcss from "rollup-plugin-postcss";
+import image from '@rollup/plugin-image';
 
 
 const packageJson = require("./package.json");
@@ -29,15 +30,20 @@ export default [
       peerDepsExternal(),
       resolve(),
       commonjs(),
-      typescript({ tsconfig: "./tsconfig.json" }),
+      image(),
+      typescript({tsconfig: "./tsconfig.json"}),
       terser(),
-      postcss(),
+      postcss({
+        extensions: [".css"]
+      })
     ],
+    context: 'window',
+    moduleContext: id => 'window',
     external: ["react", "react-dom"],
   },
   {
     input: "src/index.ts",
-    output: [{ file: "dist/types.d.ts", format: "es" }],
+    output: [{file: "dist/types.d.ts", format: "es"}],
     plugins: [dts.default()],
     external: [/\.css$/],
   },

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/check.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0199 6.01961L6.66638 11.3732L3.97949 8.68627L4.6866 7.97917L6.66638 9.95895L11.3128 5.3125L12.0199 6.01961Z" fill="#111111"/>
+</svg>

package/src/assets/chevron-left.svg

@@ -0,0 +1,7 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="chevron-left">
+        <path id="Vector" fill-rule="evenodd" clip-rule="evenodd"
+              d="M10.8072 5.80811L11.6911 6.69199L8.383 10L11.6911 13.3081L10.8072 14.192L6.61523 10L10.8072 5.80811Z"
+              fill="#111111"/>
+    </g>
+</svg>

package/src/assets/chevron-right.svg

@@ -0,0 +1,7 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="chevron-right">
+        <path id="Vector" fill-rule="evenodd" clip-rule="evenodd"
+              d="M9.19282 5.80762L8.30894 6.6915L11.617 9.99956L8.30894 13.3076L9.19282 14.1915L13.3848 9.99956L9.19282 5.80762Z"
+              fill="#111111"/>
+    </g>
+</svg>