kahuna-base-react-components 0.1.8

package/src/components/KInput/KInput.tsx

@@ -0,0 +1,67 @@
+import React, {useEffect, useState} 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
+}
+
+const KInput: React.FC<KInputProps> = (props) => {
+  const [background, setBackground] = useState("#F5F5F5")
+
+  useEffect(() => {
+    const emptyBackground = props.background || "#F5F5F5"
+    const activeBackground = props.activeBackground || "#FFF"
+
+    const background = props.value ? activeBackground : emptyBackground
+    setBackground(background)
+  }, [props.value])
+
+  const width = props.width || "100%"
+  const height = props.height || 24
+  const borderRadius = props.borderRadius || 10
+  const boxShadow = props.shadowDisabled ? "" : "0 0 0 1px rgba(17, 17, 17, 0.04), 0 1px 1px 0 rgba(17, 17, 17, 0.04)"
+  const type = props.type || "text"
+  const accentColor = props.accentColor || ""
+
+  return (
+    <div className={"k-input-container"} style={{background, borderRadius, boxShadow}}>
+      {props.leftIcon && (
+        <img src={props.leftIcon} alt={"l-icon"} className={props.leftIconClick && "cursor-pointer"} onClick={() => {
+          if (props.leftIconClick) props.leftIconClick()
+        }}/>
+      )}
+
+      <input
+        type={type}
+        className={"k-input"}
+        style={{background, width, height, accentColor}}
+        value={props.value}
+        placeholder={props.placeholder || ""}
+        onChange={(event) => {
+          props.onChange(event.target.value)
+        }}/>
+
+      {props.rightIcon && (
+        <img src={props.rightIcon} alt={"r-icon"} className={props.rightIconClick && "cursor-pointer"} onClick={() => {
+          if (props.rightIconClick) props.rightIconClick()
+        }}/>
+      )}
+    </div>
+  );
+};
+
+export default KInput;

package/src/components/KInput/index.ts

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

package/src/components/KLogo/KLogo.stories.tsx

@@ -0,0 +1,36 @@
+import {Meta, StoryFn} from "@storybook/react";
+import KLogo from "./KLogo";
+
+export default {
+  title: "ReactComponentLibrary/KLogo",
+  component: KLogo,
+  parameters: {
+    layout: 'centered',
+  },
+} as Meta<typeof KLogo>;
+
+const Template: StoryFn<typeof KLogo> = (args) => <KLogo {...args} />;
+
+export const KLogoPrimary = Template.bind({});
+KLogoPrimary.args = {
+  width: 88,
+  height: 88,
+  borderRadius: 10,
+};
+
+export const KLogoPrimaryText = Template.bind({});
+KLogoPrimaryText.args = {
+  width: 88,
+  height: 88,
+  borderRadius: 10,
+  primaryText: "Kahuna"
+};
+
+export const KLogoAllText = Template.bind({});
+KLogoAllText.args = {
+  width: 88,
+  height: 88,
+  borderRadius: 10,
+  primaryText: "Kahuna",
+  secondaryText: "for artists"
+};

package/src/components/KLogo/KLogo.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import "../../main.css"
+// @ts-ignore
+import Logo from "../../assets/logo.svg"
+import KTitleSpan from "../KTitleSpan";
+import KSpan from "../KSpan";
+
+export interface KLogoProps {
+  width?: number
+  height?: number
+  borderRadius?: number
+  primaryText?: string
+  secondaryText?: string
+}
+
+const KLogo: React.FC<KLogoProps> = (props) => {
+  const width = props.width || 88
+  const height = props.height || 88
+  const borderRadius = props.borderRadius || 10
+  return (
+    <div className={"flex items-center"}>
+      <img src={Logo} alt={"kahuna-logo"} style={{borderRadius, width, height}}/>
+      {props.primaryText && <div className={"ml-2 mr-2"}><KTitleSpan fontSize={20} text={props.primaryText}/></div>}
+      {props.secondaryText && <div className={"pl-2"} style={{borderLeft: "1px solid #E7E7E7"}}>
+        <KSpan fontSize={14} text={props.secondaryText}/>
+      </div>}
+    </div>
+  );
+};
+
+export default KLogo;

package/src/components/KLogo/index.ts

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

package/src/components/KSlider/KSlider.stories.tsx

@@ -0,0 +1,18 @@
+import {Meta, StoryFn} from "@storybook/react";
+import KSlider, {SliderOption} from "./KSlider";
+
+export default {
+  title: "ReactComponentLibrary/KSlider",
+  component: KSlider,
+} as Meta<typeof KSlider>;
+
+const Template: StoryFn<typeof KSlider> = (args) => <KSlider {...args} />;
+
+export const KSliderPrimary = Template.bind({});
+KSliderPrimary.args = {
+  options: [{label: "0%", value: 0}, {label: "25%", value: 1}, {label: "50%", value: 2}, {label: "75%", value: 3}],
+  onChange: (option: SliderOption) => {
+    // Do Nothing
+  },
+  width: "200px"
+};

package/src/components/KSlider/KSlider.tsx

@@ -0,0 +1,40 @@
+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
+}
+
+const KSlider: React.FC<KSliderProps> = (props) => {
+  const disabled = props.disabled || false
+  const width = props.width || "100%"
+  const height = props.height || "14px"
+
+  return (
+    <input
+      disabled={disabled}
+      style={{width, height}}
+      className={"k-slider-input"}
+      onChange={(e) => {
+        const option = props.options.find((option) => option.value.toString() === e.target.value)
+        if (option) return props.onChange(option)
+      }}
+      value={props.value}
+      type="range"
+      min={props.options[0].value}
+      max={props.options[props.options.length - 1].value}
+    />
+  );
+};
+
+export default KSlider;

package/src/components/KSlider/index.ts

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

package/src/components/KSpan/KSpan.stories.tsx

@@ -0,0 +1,23 @@
+import {Meta, StoryFn} from "@storybook/react";
+import KSpan from "./KSpan";
+
+export default {
+  title: "ReactComponentLibrary/KSpan",
+  component: KSpan,
+  parameters: {
+    layout: 'centered',
+  },
+} as Meta<typeof KSpan>;
+
+const Template: StoryFn<typeof KSpan> = (args) => <KSpan {...args} />;
+
+export const KSpanPrimary = Template.bind({});
+KSpanPrimary.args = {
+  text: "Hello World",
+  fontSize: 14,
+  color: "#737373",
+  fontWeight: 400,
+  lineHeight: "20px",
+  fontStyle: "normal",
+  letterSpacing: "-0.084px"
+};

package/src/components/KSpan/KSpan.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import "../../main.css"
+
+export interface KSpanProps {
+  text: string
+  fontSize?: number
+  color?: string
+  fontWeight?: number
+  lineHeight?: string
+  fontStyle?: string
+  letterSpacing?: string
+}
+
+const KSpan: React.FC<KSpanProps> = (props) => {
+  const fontSize = props.fontSize || 14
+  const color = props.color || "#737373"
+  const fontWeight = props.fontWeight || 400
+  const lineHeight = props.lineHeight || "20px"
+  const fontStyle = props.fontStyle || "normal"
+  const letterSpacing = props.letterSpacing || "-0.084px"
+
+  return (
+    <span className={"k-span"} style={{fontSize, color, fontWeight, lineHeight, fontStyle, letterSpacing}}>
+      {props.text}
+    </span>
+  );
+};
+
+export default KSpan;

package/src/components/KSpan/index.ts

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

package/src/components/KTitleSpan/KTitleSpan.stories.tsx

@@ -0,0 +1,23 @@
+import {Meta, StoryFn} from "@storybook/react";
+import KTitleSpan from "./KTitleSpan";
+
+export default {
+  title: "ReactComponentLibrary/KTitleSpan",
+  component: KTitleSpan,
+  parameters: {
+    layout: 'centered',
+  },
+} as Meta<typeof KTitleSpan>;
+
+const Template: StoryFn<typeof KTitleSpan> = (args) => <KTitleSpan {...args} />;
+
+export const KTitleSpanPrimary = Template.bind({});
+KTitleSpanPrimary.args = {
+  text: "Hello World",
+  fontSize: 48,
+  color: "#111",
+  fontWeight: 700,
+  lineHeight: "56px",
+  fontStyle: "normal",
+  letterSpacing: "-0.48px"
+};

package/src/components/KTitleSpan/KTitleSpan.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import "../../main.css"
+
+export interface KTitleSpanProps {
+  text: string
+  fontSize?: number
+  color?: string
+  fontWeight?: number
+  lineHeight?: string
+  fontStyle?: string
+  letterSpacing?: string
+}
+
+const KTitleSpan: React.FC<KTitleSpanProps> = (props) => {
+  const fontSize = props.fontSize || 48
+  const color = props.color || "#111111"
+  const fontWeight = props.fontWeight || 700
+  const lineHeight = props.lineHeight || "56px"
+  const fontStyle = props.fontStyle || "normal"
+  const letterSpacing = props.letterSpacing || "-0.48px"
+
+  return (
+    <span className={"k-title-span"} style={{fontSize, color, fontWeight, lineHeight, fontStyle, letterSpacing}}>
+      {props.text}
+    </span>
+  );
+};
+
+export default KTitleSpan;

package/src/components/KTitleSpan/index.ts

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

package/src/index.ts

@@ -0,0 +1,11 @@
+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
+}

package/src/main.css

@@ -0,0 +1,93 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+.k-title-span {
+    font-feature-settings: 'ss11' on, 'cv09' on, 'liga' off, 'calt' off;
+    font-family: "Aeonik Pro";
+}
+
+.k-span {
+    font-feature-settings: 'ss11' on, 'cv09' on, 'liga' off, 'calt' off;
+    font-family: "Inter";
+}
+
+.k-input-container {
+    display: flex;
+    padding: 8px;
+    align-items: center;
+    gap: 12px;
+    align-self: stretch;
+}
+
+.k-input {
+    color: #111;
+    font-feature-settings: 'ss11' on, 'cv09' on, 'liga' off, 'calt' off;
+    /* Paragraph/Small */
+    font-family: Inter;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px; /* 142.857% */
+    letter-spacing: -0.084px;
+}
+
+.k-input::placeholder {
+    color: #737373;
+}
+
+.k-input:focus {
+    outline: none !important;
+}
+
+.k-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+    align-self: stretch;
+}
+
+
+.k-dropdown-container {
+    display: flex;
+}
+
+.k-dropdown {
+    width: 100%;
+    font-family: Inter;
+}
+
+.k-dropdown:focus {
+    outline: none !important;
+}
+
+.k-slider-input {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 100%;
+    cursor: pointer;
+    outline: none;
+    border-radius: 16px;
+    overflow: hidden;
+}
+
+.k-slider-input::-webkit-slider-runnable-track {
+    height: 14px;
+    background: #E7E7E7;
+    border-radius: 20px;
+}
+
+.k-slider-input::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    cursor: pointer;
+    margin-top: -2px; /* Align the thumb vertically with the track */
+    width: 18px; /* Width of the thumb */
+    height: 18px; /* Height of the thumb */
+    border-radius: 50px;
+    box-shadow: -407px 0 0 400px #111111, 0 0 1px 1px rgba(228, 229, 231, 1), 0 1px 3px 0 rgba(228, 229, 231, 0.40);
+    background-color: white !important;
+    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"><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="%23111111"/></g></svg>');
+    background-size: cover;
+}

package/tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+

package/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "declaration": true,
+    "declarationDir": "dist",
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "exclude": [
+    "src/stories"
+  ]
+}