kahuna-base-react-components 0.1.8

package/.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

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/babel.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  presets: [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript",
+  ],
+};

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

@@ -0,0 +1,19 @@
+import React from "react";
+import "../../main.css";
+export interface KButtonProps {
+    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;
+}
+declare const KButton: React.FC<KButtonProps>;
+export default KButton;

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

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

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

@@ -0,0 +1,30 @@
+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;
+}
+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;
+}
+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/KInput/KInput.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import "../../main.css";
+export interface KInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    width?: number;
+    height?: number;
+    leftIcon?: string;
+    rightIcon?: string;
+    background?: string;
+    activeBackground?: string;
+    borderRadius?: number;
+    placeholder?: string;
+    shadowDisabled?: boolean;
+    type?: string;
+    leftIconClick?: () => void;
+    rightIconClick?: () => void;
+    accentColor?: string;
+}
+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,11 @@
+import React from "react";
+import "../../main.css";
+export interface KLogoProps {
+    width?: number;
+    height?: number;
+    borderRadius?: number;
+    primaryText?: string;
+    secondaryText?: string;
+}
+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/KSlider/KSlider.d.ts

@@ -0,0 +1,16 @@
+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;
+    height?: 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/KSpan/KSpan.d.ts

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

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

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

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

@@ -0,0 +1,13 @@
+import React from "react";
+import "../../main.css";
+export interface KTitleSpanProps {
+    text: string;
+    fontSize?: number;
+    color?: string;
+    fontWeight?: number;
+    lineHeight?: string;
+    fontStyle?: string;
+    letterSpacing?: string;
+}
+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/index.d.ts

@@ -0,0 +1,8 @@
+import KButton from "./components/KButton";
+import KSpan from "./components/KSpan";
+import KTitleSpan from "./components/KTitleSpan";
+import KLogo from "./components/KLogo";
+import KInput from "./components/KInput";
+import KDropdown from "./components/KDropdown";
+import KSlider from "./components/KSlider";
+export { KButton, KSpan, KLogo, KTitleSpan, KInput, KDropdown, KSlider };