kahuna-base-react-components 1.0.7 → 1.1.0

package/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "semi": false,
+  "tabWidth": 2,
+  "printWidth": 120,
+  "singleQuote": false,
+  "trailingComma": "none",
+  "bracketSameLine": false
+}

package/README.md

@@ -0,0 +1,23 @@
+# Introduction 
+React library for base components shared across various projects, encompassing custom, wrappers, or straightforward components.
+The objective of this initiative is to establish generic and uncomplicated logic that can be readily reused and distributed as required.
+This endeavor aims to streamline and enhance Kahuna's software development process.
+
+# Getting Started
+Please run the following to get started with the repo
+1.	npm Install
+2.	npm run build-storybook
+3.	npm run storybook
+
+# Build and Test
+1. npm run build - this will create a dist folder with all the new declaration types and js files needed
+2. npm run storybook - run this if you need to check your custom component before deployment
+
+# Import Library
+1. npm install git+https://github.com/Kahuna-Music/kahuna-base-react-components.git#{tag}
+2. e.g. 'npm install git+https://github.com/Kahuna-Music/kahuna-base-react-components.git#1.0.1'
+
+# Useful links
+- [Storybook](https://storybook.js.org/)
+- [RollupJS](https://rollupjs.org/guide/en/)
+- [Rollup Plugins](https://github.com/rollup/plugins)

package/dist/components/KButton/KButton.d.ts

@@ -1,9 +1,23 @@
 import React from "react";
+import "../../main.css";
 export 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>;
 export default KButton;

package/dist/components/KCodeInput/KCodeInput.d.ts

@@ -0,0 +1,36 @@
+import React from "react";
+import "../../main.css";
+export 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 default KInput;

package/dist/components/KCodeInput/index.d.ts

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

package/dist/components/KDropdown/KDropdown.d.ts

@@ -0,0 +1,38 @@
+import React from "react";
+import "../../main.css";
+import { MultiValue } from "react-select";
+export interface KSelectOption {
+    label: string;
+    value: number;
+    type?: string;
+    label2?: string;
+    value2?: string;
+    icon?: string;
+}
+export 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>;
+export default KDropdown;

package/dist/components/KDropdown/index.d.ts

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

package/dist/components/KDropdownToggle/KDropdownToggle.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+import "../../main.css";
+import { MultiValue } from "react-select";
+export interface KSelectOption {
+    label: string;
+    value: number;
+    type?: string;
+    label2?: string;
+    value2?: string;
+    icon?: string;
+}
+export 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;
+}
+declare const KDropdownToggle: React.FC<KDropdownProps>;
+export default KDropdownToggle;

package/dist/components/KDropdownToggle/index.d.ts

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

package/dist/components/KInput/KInput.d.ts

@@ -0,0 +1,32 @@
+import React, { 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;
+}
+declare const KInput: React.FC<KInputProps>;
+export default KInput;

package/dist/components/KInput/index.d.ts

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

package/dist/components/KLogo/KLogo.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import "../../main.css";
+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;
+}
+declare const KLogo: React.FC<KLogoProps>;
+export default KLogo;

package/dist/components/KLogo/index.d.ts

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

package/dist/components/KSelectDate/KSelectDate.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import "./CalendarCustom.css";
+import "../../main.css";
+export interface KSelectDateProps {
+    value: Date | undefined;
+    onChange: (date: Date | undefined) => void;
+}
+declare const KSelectDate: React.FC<KSelectDateProps>;
+export default KSelectDate;

package/dist/components/KSelectDate/index.d.ts

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

package/dist/components/KSlider/KSlider.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import "../../main.css";
+export interface SliderOption {
+    label: string;
+    value: number;
+}
+export interface KSliderProps {
+    options: SliderOption[];
+    onChange: (option: SliderOption) => void;
+    value?: number;
+    disabled?: boolean;
+    width?: string;
+}
+declare const KSlider: React.FC<KSliderProps>;
+export default KSlider;

package/dist/components/KSlider/index.d.ts

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

package/dist/components/KSliderLabel/KSliderLabel.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import "../../main.css";
+export interface SliderLabelOption {
+    label: string;
+    value: number;
+}
+export 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>;
+export default KSliderLabel;

package/dist/components/KSliderLabel/index.d.ts

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

package/dist/components/KSpan/KSpan.d.ts

@@ -1,8 +1,18 @@
-import React from "react";
+import React, { CSSProperties } from "react";
+import "../../main.css";
 export 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 default KSpan;

package/dist/components/KTextArea/KTextArea.d.ts

@@ -0,0 +1,32 @@
+import React, { KeyboardEvent } from "react";
+import "../../main.css";
+export 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;
+}
+declare const KTextArea: React.FC<KTextAreaProps>;
+export default KTextArea;

package/dist/components/KTextArea/index.d.ts

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

package/dist/components/KTitleSpan/KTitleSpan.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import "../../main.css";
+export interface KTitleSpanProps {
+    text: string;
+    fontSize?: number;
+    color?: string;
+    fontWeight?: number;
+    lineHeight?: string;
+    fontStyle?: string;
+    letterSpacing?: string;
+    bold?: boolean;
+}
+declare const KTitleSpan: React.FC<KTitleSpanProps>;
+export default KTitleSpan;

package/dist/components/KTitleSpan/index.d.ts

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

package/dist/components/KTooltip/KTooltip.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import "../../main.css";
+export 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 default KTooltip;

package/dist/components/KTooltip/index.d.ts

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