qlu-20-ui-library 1.0.0

package/src/components/TextButton/style.scss

@@ -0,0 +1,91 @@
+@import '../../colors';
+@import '../../fonts';
+
+.textButtonGeneric{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    height: fit-content;
+
+    border: none;
+    border-radius: 8px;
+    transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
+
+    &:hover{
+        cursor: pointer;
+    }
+    &:active:not(:disabled) {
+        outline: 2px solid black;
+    }
+    &:disabled{
+        cursor: not-allowed;
+    }
+}
+
+.primaryOrange{
+    background-color: $orange-700;
+    color: $orange-900;
+    
+    &:hover{
+        cursor: pointer;
+        background-color: $orange-700;
+        color: white;
+    }
+    &:active:not(:disabled) {
+        outline: 2px solid $orange-300;
+    }
+}
+
+.primaryOrangeBorder{
+    background-color: transparent;
+    color: $orange-600;
+    border: 1px solid $orange-500;
+    
+    &:hover{
+        cursor: pointer;
+        background-color: $orange-500;
+        color: white;
+        // border-color: white;
+        border: 1px solid $orange-500;
+    }
+    &:active:not(:disabled) {
+        outline: 2px solid $orange-300;
+    }
+}
+
+.alternativeDarkBorder{
+    background-color: $gray-800;
+    color: $gray-100;
+    border: 1px solid $gray-500;
+    
+    &:hover{
+        cursor: pointer;
+        background-color: $gray-700;
+        color: white;
+    }
+    &:active:not(:disabled) {
+        outline: 2px solid $gray-300;
+    }
+}
+
+.xsSize{
+    @include text-size-xs();
+    padding: 4px 4px;
+}
+.smSize{
+    @include text-size-sm();
+    padding: 8px 8px;
+}
+.baseSize{
+    @include text-size-sm();
+    padding: 10px 10px;
+}
+.lSize{
+    @include text-size-base();
+    padding: 12px 12px;
+}
+.xlSize{
+    @include text-size-base();
+    padding: 14px 14px;
+}

package/src/components/TextPillNotClickable/TextPillNotClickable.tsx

@@ -0,0 +1,25 @@
+import './style.scss'
+
+interface TextPillNotClickableProps{
+    text: string
+    hasBorder?: boolean
+    // colorVariant: 'primaryGray'
+    sizeVariant: 'xs' | 'sm' | 'base'
+}
+
+const TextPillNotClickable = ({
+    text = 'Placeholder',
+    hasBorder = false,
+    sizeVariant = 'sm',
+
+}: TextPillNotClickableProps) => {
+  return (
+    <p
+        className={`textPillNotClickableGeneric ${hasBorder && 'textPillNotClickableBorder'} ${sizeVariant}Size`}
+    >
+        {text}
+    </p>
+  )
+}
+
+export default TextPillNotClickable

package/src/components/TextPillNotClickable/style.scss

@@ -0,0 +1,31 @@
+@import '../../colors';
+@import '../../fonts';
+@import '../../svg';
+
+
+.textPillNotClickableGeneric{
+    display: flex;
+    flex-direction: row;
+    text-align: center;
+    border-radius: 50vh;
+    height: fit-content;
+}
+
+.textPillNotClickableBorder{
+    border: 0.5px solid $gray-500;
+}
+
+.xsSize{
+    @include text-xs($bgColor: $gray-800 , $color : $gray-300);
+    padding: 6px 12px;
+}
+
+.smSize{
+    @include text-sm($bgColor: $gray-800 , $color : $gray-300);
+    padding: 6px 12px;
+}
+
+.baseSize{
+    @include text-base($bgColor: $gray-800 , $color : $gray-300);
+    padding: 6px 12px;
+}

package/src/components/TruncateText/TruncateText.tsx

@@ -0,0 +1,43 @@
+import { Tooltip } from "react-tooltip";
+import "react-tooltip/dist/react-tooltip.css";
+import {v4 as uuidv4} from 'uuid';
+
+type TruncateTextProps = {
+  text: string;
+  length: number;
+  toolTipClassName?: string;
+  toolTipPosition?: 'top' | 'bottom' | 'left' | 'right'; 
+};
+
+const TruncateText = ({
+    text = 'Placeholder text to be truncated is as follows', 
+    length = 20,
+    toolTipClassName = '',
+    toolTipPosition = 'top'
+}: TruncateTextProps) => {
+
+  const truncatedText = text.length > length ? `${text.slice(0, length)}...` : text;
+  const toolTipId = uuidv4()
+
+  if (text.length > length) {
+    return (
+      <>
+        <span
+          data-tooltip-id={toolTipId}
+          className={toolTipClassName}
+        >
+          {truncatedText}
+          <Tooltip
+            id={toolTipId}
+            content={text}
+            place={toolTipPosition}
+          />
+        </span>
+      </>
+    );
+  }
+
+  return <span>{truncatedText}</span>;
+};
+
+export default TruncateText;

package/src/index.css

@@ -0,0 +1,69 @@
+/* :root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+} */

package/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

package/src/svg/Clock.tsx

@@ -0,0 +1,25 @@
+interface ClockProps {
+    className?: string
+    clockWidth?: string;
+    clockHeight?: string;
+}
+
+const Clock = ({
+    className = '',
+    clockWidth= '12',
+    clockHeight= '12',
+} : ClockProps) => {
+  return (
+    <svg className={className} width={clockWidth} height={clockHeight} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path 
+            fillRule="evenodd" 
+            clipRule="evenodd" 
+            d="M8.0001 14.9001C9.69748 14.9001 11.3253 14.2258 12.5256 13.0256C13.7258 11.8253 14.4001 10.1975 14.4001 8.5001C14.4001 6.80271 13.7258 5.17485 12.5256 3.97461C11.3253 2.77438 9.69748 2.1001 8.0001 2.1001C6.30271 2.1001 4.67485 2.77438 3.47461 3.97461C2.27438 5.17485 1.6001 6.80271 1.6001 8.5001C1.6001 10.1975 2.27438 11.8253 3.47461 13.0256C4.67485 14.2258 6.30271 14.9001 8.0001 14.9001V14.9001ZM8.8001 5.3001C8.8001 5.08792 8.71581 4.88444 8.56578 4.73441C8.41575 4.58438 8.21227 4.5001 8.0001 4.5001C7.78792 4.5001 7.58444 4.58438 7.43441 4.73441C7.28438 4.88444 7.2001 5.08792 7.2001 5.3001V8.5001C7.20014 8.71225 7.28446 8.9157 7.4345 9.0657L9.6969 11.3289C9.77123 11.4032 9.85947 11.4622 9.95658 11.5024C10.0537 11.5426 10.1578 11.5633 10.2629 11.5633C10.368 11.5633 10.4721 11.5426 10.5692 11.5024C10.6663 11.4622 10.7546 11.4032 10.8289 11.3289C10.9032 11.2546 10.9622 11.1663 11.0024 11.0692C11.0426 10.9721 11.0633 10.868 11.0633 10.7629C11.0633 10.6578 11.0426 10.5537 11.0024 10.4566C10.9622 10.3595 10.9032 10.2712 10.8289 10.1969L8.8001 8.1689V5.3001Z" 
+            fill="#0F0F0F"
+        />
+    </svg>
+    
+  )
+}
+
+export default Clock

package/src/svg/Cross.tsx

@@ -0,0 +1,24 @@
+interface CrossProps {
+    className?: string
+    crossWidth?: string;
+    crossHeight?: string;
+}
+
+const Cross = ({
+    className = '',
+    crossWidth= '12',
+    crossHeight= '12',
+} : CrossProps) => {
+  return (
+    <svg className={className} width={crossWidth} height={crossHeight} viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path 
+            fillRule="evenodd" 
+            clipRule="evenodd" 
+            d="M2.57557 2.57575C2.68809 2.46327 2.84068 2.40008 2.99977 2.40008C3.15887 2.40008 3.31146 2.46327 3.42397 2.57575L5.99977 5.15155L8.57557 2.57575C8.63092 2.51845 8.69713 2.47274 8.77033 2.44129C8.84353 2.40984 8.92227 2.39329 9.00193 2.3926C9.0816 2.39191 9.16061 2.40709 9.23435 2.43726C9.30808 2.46743 9.37507 2.51198 9.43141 2.56831C9.48775 2.62465 9.5323 2.69164 9.56247 2.76538C9.59264 2.83912 9.60782 2.91812 9.60712 2.99779C9.60643 3.07746 9.58988 3.15619 9.55843 3.22939C9.52699 3.3026 9.48128 3.3688 9.42397 3.42415L6.84817 5.99995L9.42397 8.57575C9.53327 8.68891 9.59375 8.84047 9.59238 8.99779C9.59101 9.15511 9.52791 9.3056 9.41667 9.41684C9.30542 9.52809 9.15493 9.59119 8.99761 9.59256C8.8403 9.59392 8.68874 9.53345 8.57557 9.42415L5.99977 6.84835L3.42397 9.42415C3.31081 9.53345 3.15925 9.59392 3.00193 9.59256C2.84462 9.59119 2.69413 9.52809 2.58288 9.41684C2.47164 9.3056 2.40854 9.15511 2.40717 8.99779C2.4058 8.84047 2.46628 8.68891 2.57557 8.57575L5.15137 5.99995L2.57557 3.42415C2.46309 3.31163 2.3999 3.15905 2.3999 2.99995C2.3999 2.84085 2.46309 2.68827 2.57557 2.57575Z" 
+        />
+    </svg>
+    
+  )
+}
+
+export default Cross

package/src/svg/LinkedinLogo.tsx

@@ -0,0 +1,24 @@
+
+interface LinkedinLogoProps {
+    className?: string
+    linkedinLogoWidth?: string;
+    linkedinLogoHeight?: string;
+}
+
+const LinkedinLogo = ({
+    className = '',
+    linkedinLogoWidth= '12',
+    linkedinLogoHeight= '12',
+} : LinkedinLogoProps) => {
+  return (
+    <svg className={className} width={linkedinLogoWidth} height={linkedinLogoHeight} viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path 
+        d="M11.1117 0H0.885937C0.396094 0 0 0.386719 0 0.864844V11.1328C0 11.6109 0.396094 12 0.885937 12H11.1117C11.6016 12 12 11.6109 12 11.1352V0.864844C12 0.386719 11.6016 0 11.1117 0ZM3.56016 10.2258H1.77891V4.49766H3.56016V10.2258ZM2.66953 3.71719C2.09766 3.71719 1.63594 3.25547 1.63594 2.68594C1.63594 2.11641 2.09766 1.65469 2.66953 1.65469C3.23906 1.65469 3.70078 2.11641 3.70078 2.68594C3.70078 3.25312 3.23906 3.71719 2.66953 3.71719ZM10.2258 10.2258H8.44687V7.44141C8.44687 6.77812 8.43516 5.92266 7.52109 5.92266C6.59531 5.92266 6.45469 6.64687 6.45469 7.39453V10.2258H4.67813V4.49766H6.38437V5.28047H6.40781C6.64453 4.83047 7.22578 4.35469 8.09063 4.35469C9.89297 4.35469 10.2258 5.54063 10.2258 7.08281V10.2258Z" 
+        fill="#727272"
+      />
+    </svg>
+    
+  )
+}
+
+export default LinkedinLogo

package/src/svg/Plus.tsx

@@ -0,0 +1,20 @@
+interface PlusProps {
+    className?: string
+    plusWidth?: string;
+    plusHeight?: string;
+}
+
+const Plus = ({
+    className = '',
+    plusWidth= '24',
+    plusHeight= '24',
+} : PlusProps) => {
+  return (
+    <svg className={className} width={plusWidth} height={plusHeight} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M12 12H6H12Z"/>
+        <path d="M12 6V12M12 12V18M12 12H18M12 12H6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  )
+}
+
+export default Plus

package/src/svg/Thumb.tsx

@@ -0,0 +1,25 @@
+interface ThumbProps {
+    className?: string
+    thumbWidth?: string;
+    thumbHeight?: string;
+}
+
+const Thumb = ({
+    className = '',
+    thumbWidth= '12',
+    thumbHeight= '12',
+} : ThumbProps) => {
+  return (
+    <svg className={className} width={thumbWidth} height={thumbHeight} viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path 
+            d="M2.06099 6.96109L1.70744 6.60754L2.06099 6.96109C2.11207 6.91002 2.1727 6.86951 2.23943 6.84187C2.30615 6.81423 2.37767 6.8 2.4499 6.8C2.52213 6.8 2.59365 6.81423 2.66038 6.84187C2.72711 6.86951 2.78774 6.91002 2.83881 6.96109L3.18096 6.61894L2.83881 6.96109C2.88988 7.01217 2.9304 7.0728 2.95804 7.13953C2.98568 7.20625 2.9999 7.27777 2.9999 7.35V11.55C2.9999 11.6959 2.94196 11.8358 2.83881 11.9389C2.73567 12.0421 2.59577 12.1 2.4499 12.1C2.30403 12.1 2.16414 12.0421 2.06099 11.9389C1.95785 11.8358 1.8999 11.6959 1.8999 11.55V7.35C1.8999 7.27778 1.91413 7.20626 1.94177 7.13953L1.48118 6.94874L1.94177 7.13953C1.96941 7.0728 2.00992 7.01217 2.06099 6.96109ZM4.6999 11.0343V11.0341V7.2331C4.6999 6.73548 4.86129 6.25128 5.15985 5.85317C5.15987 5.85315 5.15989 5.85313 5.1599 5.8531L6.13985 4.54697L6.1399 4.5469C6.56832 3.97568 6.7999 3.28092 6.7999 2.5669V2.1C6.7999 2.04696 6.82097 1.99609 6.85848 1.95858C6.89599 1.92107 6.94686 1.9 6.9999 1.9C7.2386 1.9 7.46752 1.99482 7.6363 2.16361C7.80508 2.33239 7.8999 2.56131 7.8999 2.8V5.6V6.1H8.3999H10.8919C10.8919 6.1 10.8919 6.1 10.8919 6.1C11.025 6.10002 11.1565 6.12958 11.2768 6.18653C11.3971 6.24349 11.5034 6.32645 11.5878 6.42941C11.6722 6.53237 11.7327 6.65277 11.7649 6.78195C11.7972 6.91111 11.8004 7.04581 11.7743 7.17634C11.7743 7.17636 11.7743 7.17638 11.7743 7.1764L10.9343 11.3763L10.9343 11.3764C10.8935 11.5805 10.7832 11.7642 10.6223 11.8961C10.4613 12.028 10.2595 12.1001 10.0514 12.1H10.0512H6.26016C6.26011 12.1 6.26006 12.1 6.26 12.1C5.90337 12.0999 5.55165 12.0168 5.23264 11.8574L5.19771 11.8399L5.1976 11.8398C5.04799 11.7651 4.92217 11.6501 4.83426 11.5078C4.74635 11.3655 4.69982 11.2016 4.6999 11.0343Z" 
+            fill="#868686" 
+            stroke="#868686"
+        />
+    </svg>
+    
+    
+  )
+}
+
+export default Thumb

package/src/svg/Tick.tsx

@@ -0,0 +1,23 @@
+interface TickProps {
+    className?: string
+    tickWidth?: string;
+    tickHeight?: string;
+}
+
+const Tick = ({
+    className = '',
+    tickWidth= '12',
+    tickHeight= '12',
+} : TickProps) => {
+  return (
+    <svg className={className} width={tickWidth} height={tickHeight} viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path 
+            fillRule="evenodd" 
+            clipRule="evenodd" 
+            d="M11.6947 3.70507C11.8259 3.83634 11.8996 4.01436 11.8996 4.19997C11.8996 4.38559 11.8259 4.5636 11.6947 4.69487L6.0947 10.2949C5.96343 10.4261 5.78541 10.4998 5.5998 10.4998C5.41418 10.4998 5.23617 10.4261 5.1049 10.2949L2.3049 7.49487C2.17739 7.36285 2.10683 7.18603 2.10842 7.00249C2.11002 6.81895 2.18364 6.64339 2.31342 6.5136C2.44321 6.38381 2.61878 6.3102 2.80232 6.3086C2.98585 6.30701 3.16268 6.37756 3.2947 6.50507L5.5998 8.81017L10.7049 3.70507C10.8362 3.57384 11.0142 3.50012 11.1998 3.50012C11.3854 3.50012 11.5634 3.57384 11.6947 3.70507Z" 
+        />
+    </svg>    
+  )
+}
+
+export default Tick

package/src/utils.ts

@@ -0,0 +1,9 @@
+export const capitalizeFirstAlphabet = (string : string) => {
+    const stringToUse = string?.trim()
+    return stringToUse?.charAt(0)?.toUpperCase() + stringToUse?.slice(1)
+}
+
+
+export type IconType = 'plus' | 'cross' | 'thumb' | 'clock' | 'tick' | 'linkedinLogo';
+export type IconSize= '8' | '10' | '12' | '14' | '16'| '18' | '20' | '22' | '24' | '26' | '28' | '30' | '32' | '34' | '36' | '38' | '40' | '44' | '48' | '52' | '58' | '64' | '72';
+

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})