kahuna-base-react-components 0.1.8

package/dist/types.d.ts

@@ -0,0 +1,112 @@
+import React from 'react';
+import { MultiValue } from 'react-select';
+
+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>;
+
+interface KSpanProps {
+    text: string;
+    fontSize?: number;
+    color?: string;
+    fontWeight?: number;
+    lineHeight?: string;
+    fontStyle?: string;
+    letterSpacing?: string;
+}
+declare const KSpan: React.FC<KSpanProps>;
+
+interface KTitleSpanProps {
+    text: string;
+    fontSize?: number;
+    color?: string;
+    fontWeight?: number;
+    lineHeight?: string;
+    fontStyle?: string;
+    letterSpacing?: string;
+}
+declare const KTitleSpan: React.FC<KTitleSpanProps>;
+
+interface KLogoProps {
+    width?: number;
+    height?: number;
+    borderRadius?: number;
+    primaryText?: string;
+    secondaryText?: string;
+}
+declare const KLogo: React.FC<KLogoProps>;
+
+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>;
+
+interface KSelectOption {
+    label: string;
+    value: number;
+    type?: string;
+    label2?: string;
+    value2?: 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;
+}
+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;
+    height?: string;
+}
+declare const KSlider: React.FC<KSliderProps>;
+
+export { KButton, KDropdown, KInput, KLogo, KSlider, KSpan, KTitleSpan };

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "kahuna-base-react-components",
+  "version": "0.1.8",
+  "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 && npm run remove-stories",
+    "remove-stories": "find dist/ -name '*.stories.*' -type f -delete",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Kahuna-Music/kahuna-base-react-components.git"
+  },
+  "author": "barin",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Kahuna-Music/kahuna-base-react-components/issues"
+  },
+  "homepage": "https://github.com/Kahuna-Music/kahuna-base-react-components#readme",
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.0",
+    "@babel/preset-env": "^7.24.0",
+    "@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",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
+    "@storybook/addon-onboarding": "^1.0.11",
+    "@storybook/blocks": "^7.6.17",
+    "@storybook/react": "^7.6.17",
+    "@storybook/react-vite": "^7.6.17",
+    "@storybook/test": "^7.6.17",
+    "@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-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-select": "^5.8.0"
+  }
+}

package/postcss.config.js

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

package/rollup.config.js

@@ -0,0 +1,48 @@
+// rollup.config.js
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import typescript from "@rollup/plugin-typescript";
+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");
+
+export default [
+  {
+    input: "src/index.ts",
+    output: [
+      {
+        file: packageJson.main,
+        format: "cjs",
+        sourcemap: true,
+      },
+      {
+        file: packageJson.module,
+        format: "esm",
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      peerDepsExternal(),
+      resolve(),
+      commonjs(),
+      image(),
+      typescript({tsconfig: "./tsconfig.json"}),
+      terser(),
+      postcss({
+        extensions: [".css"]
+      })
+    ],
+    external: ["react", "react-dom"],
+  },
+  {
+    input: "src/index.ts",
+    output: [{file: "dist/types.d.ts", format: "es"}],
+    plugins: [dts.default()],
+    external: [/\.css$/],
+  },
+];

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>

package/src/assets/logo.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="88" height="88" viewBox="0 0 88 88" fill="none">
+    <g clip-path="url(#clip0_186_2030)">
+        <path d="M0 13.75C0 6.15609 6.15609 0 13.75 0H74.25C81.8439 0 88 6.15609 88 13.75V74.25C88 81.8439 81.8439 88 74.25 88H13.75C6.15609 88 0 81.8439 0 74.25V13.75Z"
+              fill="#111111"/>
+        <path fill-rule="evenodd" clip-rule="evenodd"
+              d="M32.2133 28.2489V23.7515L36.1429 21.4987L40.0726 19.25V23.7515V28.2489V32.7504V37.2519L36.1429 39.5006L32.2139 41.7489L32.2144 41.7492L36.144 44.002L40.0736 46.2507V50.7522V55.2496V59.7511V64.2526L36.144 66.5013L32.2144 68.75V64.2526V59.7511V55.2496V50.7522L28.2847 53.0009L24.3593 55.2496V59.7511V64.2526L20.4296 66.5013L16.5 68.75V64.2526V59.7511V55.2496V50.7522L20.4296 48.4994L24.3593 46.2507L20.4296 44.002L16.5 41.7492V37.2518V32.7503L20.4296 30.5016L24.3593 28.2488V32.7503V37.2518L28.2847 39.5005L32.2133 41.7486V37.2519V32.7504V28.2489ZM55.7856 32.7504V28.2489V23.7515L51.8601 21.4987L47.9305 19.25V23.7515V28.2489V32.7504V37.2519L51.8601 39.5006L55.7856 41.7493L51.8601 44.002L47.9305 46.2507V50.7522V55.2496V59.7511V64.2526L51.8601 66.5013L55.7856 68.75V64.2526V59.7511V56.7515V55.2496V50.7522L59.7153 53.0009L63.6449 55.2496V59.7511V64.2526L67.5745 66.5013L71.5 68.75V64.2526V59.7511V55.2496V50.7522L67.5745 48.4994L63.6449 46.2507L67.5745 44.002L71.5 41.7492V37.2518V32.7503L67.5745 30.5016L63.6449 28.2488V32.7503V37.2518L59.7153 39.5005L55.7856 41.7492V37.2519V32.7504ZM40.3712 40.265C41.2017 38.2759 43.5004 37.3314 45.5055 38.1553C47.5106 38.9792 48.4627 41.2595 47.6322 43.2486C46.8017 45.2377 44.503 46.1823 42.4979 45.3584C40.4928 44.5345 39.5407 42.2541 40.3712 40.265Z"
+              fill="white"/>
+    </g>
+    <defs>
+        <clipPath id="clip0_186_2030">
+            <rect width="88" height="88" fill="white"/>
+        </clipPath>
+    </defs>
+</svg>

package/src/assets/slider-dots.svg

@@ -0,0 +1,7 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="dots, grid, slide">
+        <path id="Vector" fill-rule="evenodd" clip-rule="evenodd"
+              d="M4 5C4.55228 5 5 4.55228 5 4C5 3.44772 4.55228 3 4 3C3.44772 3 3 3.44772 3 4C3 4.55228 3.44772 5 4 5ZM4 9C4.55228 9 5 8.55229 5 8C5 7.44772 4.55228 7 4 7C3.44772 7 3 7.44772 3 8C3 8.55229 3.44772 9 4 9ZM9 8C9 8.55229 8.55229 9 8 9C7.44772 9 7 8.55229 7 8C7 7.44772 7.44772 7 8 7C8.55229 7 9 7.44772 9 8ZM8 5C8.55229 5 9 4.55228 9 4C9 3.44772 8.55229 3 8 3C7.44772 3 7 3.44772 7 4C7 4.55228 7.44772 5 8 5Z"
+              fill="#111111"/>
+    </g>
+</svg>

package/src/assets/tracks.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="tracks">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M4.58398 9.99984C4.58398 8.15889 6.07637 6.6665 7.91732 6.6665C8.22791 6.6665 8.52857 6.70898 8.81383 6.78845C8.00161 7.61543 7.50065 8.74913 7.50065 9.99984C7.50065 11.2505 8.00161 12.3842 8.81383 13.2112C8.52857 13.2907 8.22791 13.3332 7.91732 13.3332C6.07637 13.3332 4.58398 11.8408 4.58398 9.99984ZM10.0007 14.0834C9.3756 14.4029 8.6675 14.5832 7.91732 14.5832C5.38601 14.5832 3.33398 12.5311 3.33398 9.99984C3.33398 7.46853 5.38601 5.4165 7.91732 5.4165C8.6675 5.4165 9.3756 5.59674 10.0007 5.91626C10.6257 5.59674 11.3338 5.4165 12.084 5.4165C14.6153 5.4165 16.6673 7.46853 16.6673 9.99984C16.6673 12.5311 14.6153 14.5832 12.084 14.5832C11.3338 14.5832 10.6257 14.4029 10.0007 14.0834ZM11.1875 6.78845C11.4727 6.70898 11.7734 6.6665 12.084 6.6665C13.9249 6.6665 15.4173 8.15889 15.4173 9.99984C15.4173 11.8408 13.9249 13.3332 12.084 13.3332C11.7734 13.3332 11.4727 13.2907 11.1875 13.2112C11.9997 12.3842 12.5007 11.2505 12.5007 9.99984C12.5007 8.74913 11.9997 7.61543 11.1875 6.78845ZM10.0007 7.3976C10.7627 8.00848 11.2507 8.94718 11.2507 9.99984C11.2507 11.0525 10.7627 11.9912 10.0007 12.6021C9.2386 11.9912 8.75065 11.0525 8.75065 9.99984C8.75065 8.94718 9.2386 8.00848 10.0007 7.3976Z" fill="#111111"/>
+</g>
+</svg>

package/src/components/KButton/KButton.stories.tsx

@@ -0,0 +1,78 @@
+import {Meta, StoryFn} from "@storybook/react";
+import KButton from "./KButton";
+// @ts-ignore
+import ChevronRightIcon from "../../assets/chevron-right.svg"
+// @ts-ignore
+import ChevronLeftIcon from "../../assets/chevron-left.svg"
+// @ts-ignore
+import TracksIcon from "../../assets/tracks.svg"
+
+export default {
+  title: "ReactComponentLibrary/KButton",
+  component: KButton,
+} as Meta<typeof KButton>;
+
+const Template: StoryFn<typeof KButton> = (args) => <KButton {...args} />;
+
+export const KButtonText = Template.bind({});
+KButtonText.args = {
+  onClick: () => {
+    alert("clicked")
+  },
+  text: "Hello World",
+  background: "#F2FE67",
+  borderRadius: 10,
+  width: "160px",
+  height: "44px"
+};
+
+export const KButtonIcon = Template.bind({});
+KButtonIcon.args = {
+  onClick: () => {
+    alert("clicked")
+  },
+  icon: TracksIcon,
+  width: "50px"
+};
+
+export const KButtonLeftIconText = Template.bind({});
+KButtonLeftIconText.args = {
+  onClick: () => {
+    alert("clicked")
+  },
+  leftIcon: ChevronLeftIcon,
+  text: "Hello World",
+  width: "160px"
+};
+
+export const KButtonRightIconText = Template.bind({});
+KButtonRightIconText.args = {
+  onClick: () => {
+    alert("clicked")
+  },
+  rightIcon: ChevronRightIcon,
+  text: "Hello World",
+  width: "160px"
+};
+
+export const KButtonLeftRightIconText = Template.bind({});
+KButtonLeftRightIconText.args = {
+  onClick: () => {
+    alert("clicked")
+  },
+  leftIcon: ChevronLeftIcon,
+  rightIcon: ChevronRightIcon,
+  text: "Hello World",
+  width: "160px"
+};
+
+export const KButtonLeftRightMiddleIcon = Template.bind({});
+KButtonLeftRightMiddleIcon.args = {
+  onClick: () => {
+    alert("clicked")
+  },
+  leftIcon: ChevronLeftIcon,
+  rightIcon: ChevronRightIcon,
+  icon: TracksIcon,
+  width: "160px"
+};

package/src/components/KButton/KButton.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import "../../main.css"
+import KSpan from "../KSpan";
+
+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
+}
+
+const KButton: React.FC<KButtonProps> = (props) => {
+  const disabled = props.disabled || false
+  const background = disabled ? "#F0F0F0" : props.background || "#F2FE67"
+  const borderRadius = props.borderRadius || 10
+  const width = props.width || "100%"
+  const height = props.height || "44px"
+  const textColor = disabled ? "#D6D6D6" : props.textColor || "#111"
+  const padding = props.padding || "12px 16px"
+  const boxShadow = props.shadowDisabled ? "" : "0 0 0 1px rgba(17, 17, 17, 0.04), 0 1px 1px 0 rgba(17, 17, 17, 0.04)"
+
+  return (
+    <button className={"k-button"} disabled={disabled} onClick={props.onClick}
+            style={{background, borderRadius, width, height, padding, boxShadow}}>
+      <div className={"flex"}>
+        {props.leftIcon && <img src={props.leftIcon} alt={"button-left-icon"}/>}
+        {props.text && <KSpan text={props.text} color={textColor}/>}
+        {props.icon && <img src={props.icon} alt={"button-icon"}/>}
+        {props.rightIcon && <img src={props.rightIcon} alt={"button-right-icon"}/>}
+      </div>
+    </button>
+  );
+};
+
+export default KButton;

package/src/components/KButton/index.ts

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

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

@@ -0,0 +1,62 @@
+import {Meta, StoryFn} from "@storybook/react";
+import KDropdown, {KSelectOption} from "./KDropdown";
+// @ts-ignore
+import TracksIcon from "../../assets/tracks.svg";
+import {MultiValue} from "react-select";
+
+export default {
+  title: "ReactComponentLibrary/KDropdown",
+  component: KDropdown,
+  parameters: {
+    layout: 'centered',
+  },
+} as Meta<typeof KDropdown>;
+
+const Template: StoryFn<typeof KDropdown> = (args) => <KDropdown {...args} />;
+
+export const KDropdownSingle = Template.bind({});
+KDropdownSingle.args = {
+  onSelect: (value: KSelectOption | MultiValue<KSelectOption>) => {
+
+  },
+  placeholder: "Placeholder...",
+  options: [{label: "Label 1", value: 1}, {label: "Label 2", value: 2}, {label: "Label 3", value: 3}]
+};
+
+export const KDropdownMulti = Template.bind({});
+KDropdownMulti.args = {
+  onSelect: (value: KSelectOption | MultiValue<KSelectOption>) => {
+
+  },
+  placeholder: "Multi...",
+  options: [{label: "Label 1", value: 1}, {label: "Label 2", value: 2}, {label: "Label 3", value: 3}],
+  isMulti: true
+};
+
+export const KDropdownLeftIcon = Template.bind({});
+KDropdownLeftIcon.args = {
+  onSelect: (value: KSelectOption | MultiValue<KSelectOption>) => {
+
+  },
+  placeholder: "Placeholder...",
+  leftIcon: TracksIcon,
+};
+
+export const KDropdownRightIcon = Template.bind({});
+KDropdownRightIcon.args = {
+  onSelect: (value: KSelectOption | MultiValue<KSelectOption>) => {
+
+  },
+  placeholder: "Placeholder...",
+  rightIcon: TracksIcon,
+};
+
+export const KDropdownLeftRightIcon = Template.bind({});
+KDropdownLeftRightIcon.args = {
+  onSelect: (value: KSelectOption | MultiValue<KSelectOption>) => {
+
+  },
+  placeholder: "Placeholder...",
+  leftIcon: TracksIcon,
+  rightIcon: TracksIcon,
+};

package/src/components/KDropdown/KDropdown.tsx

@@ -0,0 +1,93 @@
+import React, {useEffect, useState} from "react";
+import "../../main.css"
+import Select, {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
+}
+
+const KDropdown: React.FC<KDropdownProps> = (props) => {
+  const [background, setBackground] = useState("#F5F5F5")
+
+  useEffect(() => {
+    const emptyBackground = props.background || "#F5F5F5"
+    const activeBackground = props.activeBackground || "#FFF"
+
+    const background = props.selected ? activeBackground : emptyBackground
+    setBackground(background)
+  }, [props.selected])
+
+  const width = props.width || "100%"
+  const height = props.height || "auto"
+  const borderRadius = props.borderRadius || 10
+  const isMulti = props.isMulti || false
+  const textColor = props.textColor || "#111"
+  const boxShadow = props.shadowDisabled ? "" : "0 0 0 1px rgba(17, 17, 17, 0.04), 0 1px 1px 0 rgba(17, 17, 17, 0.04)"
+
+  return (
+    <div className={"k-dropdown-container"} style={{background, borderRadius, width, height, boxShadow}}>
+      {props.leftIcon && <img src={props.leftIcon} width={24} className={"ml-2"} alt={"l-icon"}/>}
+
+      <Select
+        defaultValue={props.defaultValue}
+        isMulti={isMulti}
+        name={props.label || ""}
+        placeholder={props.placeholder || ""}
+        options={props.options}
+        className={"k-dropdown"}
+        styles={{
+          control: (baseStyles, state) => ({
+            ...baseStyles,
+            background: "transparent !important",
+            border: 0,
+            boxShadow: "none",
+            fontSize: 16,
+            cursor: "pointer"
+          }),
+          singleValue: provided => ({
+            ...provided,
+            color: textColor
+          })
+        }}
+        components={{
+          IndicatorSeparator: () => null,
+          DropdownIndicator: () => null
+        }}
+        onChange={(event) => {
+          if (!event) {
+            return
+          }
+          props.onSelect(event)
+        }}
+      />
+
+      {props.rightIcon && <img src={props.rightIcon} width={24} className={"mr-2"} alt={"r-icon"}/>}
+    </div>
+  );
+};
+
+export default KDropdown;

package/src/components/KDropdown/index.ts

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

package/src/components/KInput/KInput.stories.tsx

@@ -0,0 +1,54 @@
+import {Meta, StoryFn} from "@storybook/react";
+import KInput from "./KInput";
+// @ts-ignore
+import TracksIcon from "../../assets/tracks.svg";
+
+export default {
+  title: "ReactComponentLibrary/KInput",
+  component: KInput,
+  parameters: {
+    layout: 'centered',
+  },
+} as Meta<typeof KInput>;
+
+const Template: StoryFn<typeof KInput> = (args) => <KInput {...args} />;
+
+export const KInputPrimary = Template.bind({});
+KInputPrimary.args = {
+  onChange: (value: string) => {
+
+  },
+  placeholder: "Placeholder..."
+};
+
+export const KInputLeftIcon = Template.bind({});
+KInputLeftIcon.args = {
+  onChange: (value: string) => {
+
+  },
+  placeholder: "Placeholder...",
+  leftIcon: TracksIcon,
+  leftIconClick: () => {alert("left icon clicked")}
+};
+
+export const KInputRightIcon = Template.bind({});
+KInputRightIcon.args = {
+  onChange: (value: string) => {
+
+  },
+  placeholder: "Placeholder...",
+  rightIcon: TracksIcon,
+  rightIconClick: () => {alert("right icon clicked")}
+};
+
+export const KInputLeftRightIcon = Template.bind({});
+KInputLeftRightIcon.args = {
+  onChange: (value: string) => {
+
+  },
+  placeholder: "Placeholder...",
+  leftIcon: TracksIcon,
+  rightIcon: TracksIcon,
+  leftIconClick: () => {alert("left icon clicked")},
+  rightIconClick: () => {alert("right icon clicked")}
+};