@julseb-lib/react 0.1.3 → 0.1.5

package/src/lib/index.css

@@ -0,0 +1,443 @@
+@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");
+@import "tailwindcss";
+/* @custom-variant dark (&:where(.dark, .dark *)); */
+
+@theme {
+	--color-primary-50: var(--color-blue-50);
+	--color-primary-100: var(--color-blue-100);
+	--color-primary-200: var(--color-blue-200);
+	--color-primary-300: var(--color-blue-300);
+	--color-primary-400: var(--color-blue-400);
+	--color-primary-500: var(--color-blue-500);
+	--color-primary-600: var(--color-blue-600);
+	--color-primary-700: var(--color-blue-700);
+	--color-primary-800: var(--color-blue-800);
+	--color-primary-900: var(--color-blue-900);
+	--color-primary-950: var(--color-blue-950);
+	--color-secondary-50: var(--color-cyan-50);
+	--color-secondary-100: var(--color-cyan-100);
+	--color-secondary-200: var(--color-cyan-200);
+	--color-secondary-300: var(--color-cyan-300);
+	--color-secondary-400: var(--color-cyan-400);
+	--color-secondary-500: var(--color-cyan-500);
+	--color-secondary-600: var(--color-cyan-600);
+	--color-secondary-700: var(--color-cyan-700);
+	--color-secondary-800: var(--color-cyan-800);
+	--color-secondary-900: var(--color-cyan-900);
+	--color-secondary-950: var(--color-cyan-950);
+	--color-success-50: var(--color-green-50);
+	--color-success-100: var(--color-green-100);
+	--color-success-200: var(--color-green-200);
+	--color-success-300: var(--color-green-300);
+	--color-success-400: var(--color-green-400);
+	--color-success-500: var(--color-green-500);
+	--color-success-600: var(--color-green-600);
+	--color-success-700: var(--color-green-700);
+	--color-success-800: var(--color-green-800);
+	--color-success-900: var(--color-green-900);
+	--color-success-950: var(--color-green-950);
+	--color-danger-50: var(--color-red-50);
+	--color-danger-100: var(--color-red-100);
+	--color-danger-200: var(--color-red-200);
+	--color-danger-300: var(--color-red-300);
+	--color-danger-400: var(--color-red-400);
+	--color-danger-500: var(--color-red-500);
+	--color-danger-600: var(--color-red-600);
+	--color-danger-700: var(--color-red-700);
+	--color-danger-800: var(--color-red-800);
+	--color-danger-900: var(--color-red-900);
+	--color-danger-950: var(--color-red-950);
+	--color-warning-50: var(--color-amber-50);
+	--color-warning-100: var(--color-amber-100);
+	--color-warning-200: var(--color-amber-200);
+	--color-warning-300: var(--color-amber-300);
+	--color-warning-400: var(--color-amber-400);
+	--color-warning-500: var(--color-amber-500);
+	--color-warning-600: var(--color-amber-600);
+	--color-warning-700: var(--color-amber-700);
+	--color-warning-800: var(--color-amber-800);
+	--color-warning-900: var(--color-amber-900);
+	--color-warning-950: var(--color-amber-950);
+	--color-gray-50: var(--color-neutral-50);
+	--color-gray-100: var(--color-neutral-100);
+	--color-gray-200: var(--color-neutral-200);
+	--color-gray-300: var(--color-neutral-300);
+	--color-gray-400: var(--color-neutral-400);
+	--color-gray-500: var(--color-neutral-500);
+	--color-gray-600: var(--color-neutral-600);
+	--color-gray-700: var(--color-neutral-700);
+	--color-gray-800: var(--color-neutral-800);
+	--color-gray-900: var(--color-neutral-900);
+	--color-gray-950: var(--color-neutral-950);
+
+	--color-background: var(--color-white);
+	--color-font: var(--color-black);
+
+	--font-lato: "Lato", sans-serif;
+	--font-family-body: var(--font-lato);
+	--font-family-code: monospace;
+
+	--font-weight-thin: 100;
+	--font-weight-light: 300;
+	--font-weight-normal: 400;
+	--font-weight-bold: 700;
+	--font-weight-black: 900;
+
+	--color-overlay-black-50: rgba(0, 0, 0, 0.5);
+	--color-overlay-black-80: rgba(0, 0, 0, 0.8);
+	--color-overlay-white-50: rgba(255, 255, 255, 0.5);
+	--color-overlay-white-80: rgba(255, 255, 255, 0.8);
+	--color-overlay-gradient-black: linear-gradient(
+		180deg,
+		rgba(255, 255, 255, 0) 0%,
+		rgba(0, 0, 0, 0.56) 100%
+	);
+	--color-overlay-gradient-white: linear-gradient(
+		180deg,
+		rgba(0, 0, 0, 0) 0%,
+		rgba(255, 255, 255, 0.35) 100%
+	);
+
+	--rounded-full: calc(infinity * 1px);
+
+	--main-default: 600px;
+	--main-large: 800px;
+	--main-form: 400px;
+	--main-full: 100%;
+	--aside-default: 250px;
+	--aside-small: 200px;
+
+	--shadow-2xl:
+		0px 10px 14px 8px rgba(0, 0, 0, 0.2), 0px 4px 4px rgba(0, 0, 0, 0.3);
+	--shadow-xl:
+		0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3);
+	--shadow-lg:
+		0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);
+	--shadow-md:
+		0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);
+	--shadow-sm:
+		0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
+	--shadow-xs:
+		0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
+	--shadow-2xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+	--shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.06);
+	--shadow-none: none;
+
+	--spacer-2xs: 4px;
+	--spacer-xs: 8px;
+	--spacer-sm: 12px;
+	--spacer-md: 16px;
+	--spacer-lg: 24px;
+	--spacer-xl: 32px;
+	--spacer-2xl: 48px;
+
+	--animate-cubic-bezier: cubic-bezier(0.5, 0, 0.5, 1);
+
+	--font-size-display-h1: 5rem;
+	--font-size-display-h2: 4rem;
+	--font-size-display-h3: 3.5rem;
+	--font-size-display-h4: 3rem;
+	--font-size-display-h5: 2.5rem;
+	--font-size-h1: 2.5rem;
+	--font-size-h2: 2rem;
+	--font-size-h3: 1.8rem;
+	--font-size-h4: 1.5rem;
+	--font-size-h5: 1.3rem;
+	--font-size-h6: 1.1rem;
+	--font-size-body: 1rem;
+	--font-size-small: 0.875rem;
+}
+
+/*====================== Common styles ======================*/
+
+html,
+body {
+	font-family: var(--font-family-body);
+	width: 100%;
+	min-height: 100vh;
+	background-color: var(--color-background);
+	color: var(--color-font);
+	max-width: 100dvw;
+
+	&.dark {
+		--color-background: var(--color-black);
+		--color-font: var(--color-white);
+	}
+}
+
+.smooth {
+	scroll-behavior: smooth;
+}
+
+a,
+button {
+	cursor: pointer;
+	transition: all 200ms ease;
+
+	&:disabled {
+		cursor: not-allowed;
+	}
+}
+
+@layer base {
+	img,
+	video,
+	iframe {
+		max-width: 100%;
+	}
+
+	.no-scrollbar::-webkit-scrollbar {
+		display: none;
+	}
+
+	.no-scrollbar {
+		-ms-overflow-style: none;
+		scrollbar-width: none;
+	}
+
+	/*====================== Fonts ======================*/
+
+	.lato-thin {
+		font-family: var(--font-family-body);
+		font-weight: var(--font-weight-thin);
+		font-style: normal;
+	}
+
+	.lato-light {
+		font-family: var(--font-family-body);
+		font-weight: var(--font-weight-light);
+		font-style: normal;
+	}
+
+	.lato-regular {
+		font-family: var(--font-family-body);
+		font-weight: var(--font-weight-normal);
+		font-style: normal;
+	}
+
+	.lato-bold {
+		font-family: var(--font-family-body);
+		font-weight: var(--font-weight-bold);
+		font-style: normal;
+	}
+
+	.lato-black {
+		font-family: var(--font-family-body);
+		font-weight: var(--font-weight-black);
+		font-style: normal;
+	}
+
+	.lato-thin-italic {
+		font-family: var(--font-family-body);
+		font-weight: var(--font-weight-thin);
+		font-style: italic;
+	}
+
+	.lato-light-italic {
+		font-family: var(--font-family-body);
+		font-weight: var(--font-weight-light);
+		font-style: italic;
+	}
+
+	.lato-regular-italic {
+		font-family: var(--font-family-body);
+		font-weight: var(--font-weight-normal);
+		font-style: italic;
+	}
+
+	.lato-bold-italic {
+		font-family: var(--font-family-body);
+		font-weight: var(--font-weight-bold);
+		font-style: italic;
+	}
+
+	.lato-black-italic {
+		font-family: var(--font-family-body);
+		font-weight: var(--font-weight-black);
+		font-style: italic;
+	}
+
+	/*====================== Colors ======================*/
+
+	.text-primary {
+		color: var(--color-primary-500);
+	}
+
+	.bg-primary {
+		background-color: var(--color-primary-500);
+	}
+
+	.text-secondary {
+		color: var(--color-secondary-500);
+	}
+
+	.bg-secondary {
+		background-color: var(--color-secondary-500);
+	}
+
+	.text-success {
+		color: var(--color-success-500);
+	}
+
+	.bg-success {
+		background-color: var(--color-success-500);
+	}
+
+	.text-danger {
+		color: var(--color-danger-500);
+	}
+
+	.bg-danger {
+		background-color: var(--color-danger-500);
+	}
+
+	.text-warning {
+		color: var(--color-warning-500);
+	}
+
+	.bg-warning {
+		background-color: var(--color-warning-500);
+	}
+
+	.text-gray {
+		color: var(--color-gray-500);
+	}
+
+	.bg-gray {
+		background-color: var(--color-gray-500);
+	}
+
+	.text-white {
+		color: var(--color-white);
+	}
+
+	.bg-white {
+		background-color: var(--color-white);
+	}
+
+	.overlay-black-50 {
+		background: var(--color-overlay-black-50);
+	}
+
+	.overlay-black-80 {
+		background: var(--color-overlay-black-80);
+	}
+
+	.overlay-white-50 {
+		background: var(--color-overlay-white-50);
+	}
+
+	.overlay-white-80 {
+		background: var(--color-overlay-white-80);
+	}
+
+	.overlay-gradient-black {
+		background: var(--color-overlay-gradient-black);
+	}
+
+	.overlay-gradient-white {
+		background: var(--color-overlay-gradient-white);
+	}
+
+	/*====================== Keyframes & animations ======================*/
+
+	@keyframes shine {
+		from {
+			left: -150px;
+		}
+
+		to {
+			left: 106%;
+		}
+	}
+
+	.animate-shine {
+		position: relative;
+		overflow: hidden;
+
+		&:before {
+			content: "";
+			position: absolute;
+			top: -200px;
+			bottom: -200px;
+			background-color: var(--color-white);
+			opacity: 0.7;
+			filter: blur(20px);
+			width: 100px;
+			transform: skew(-15deg);
+			animation: shine 2000ms ease-in-out infinite;
+		}
+	}
+
+	@keyframes spin {
+		from {
+			transform: rotate(0deg);
+		}
+
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	.animate-spin {
+		animation: spin 1200ms linear infinite;
+	}
+
+	.animate-bezier {
+		animation: spin 1200ms var(--animate-cubic-bezier) infinite;
+		animation-delay: var(--spinner-delay);
+	}
+
+	@keyframes loader-pulse {
+		0%,
+		100% {
+			transform: scale(0);
+		}
+
+		50% {
+			transform: scale(1);
+		}
+	}
+
+	.dot {
+		animation: loader-pulse 1200ms linear infinite;
+		animation-delay: var(--dot-delay);
+	}
+
+	input::-webkit-slider-thumb {
+		box-shadow: var(--shadow-lg);
+	}
+
+	@keyframes toast-timer-animation {
+		0% {
+			width: 100%;
+		}
+
+		100% {
+			width: 0;
+		}
+	}
+
+	.toast-timer {
+		animation: toast-timer-animation var(--toast-timer-duration) linear
+			forwards;
+	}
+
+	.Toastify__progress-bar--bg {
+		background-color: transparent !important;
+	}
+
+	@keyframes progress-bar {
+		0% {
+			width: 0;
+		}
+
+		100% {
+			width: var(--meter-value);
+		}
+	}
+
+	.progress-bar-animated:before {
+		animation: progress-bar calc(var(--progress-speed) * 50ms) ease forwards;
+	}
+}

package/src/lib/index.ts

@@ -0,0 +1,126 @@
+"use client"
+
+export * from "./utils"
+export {
+	addDay,
+	addMonth,
+	addYear,
+	calculateAverage,
+	calculateTotalSum,
+	capitalize,
+	convertDate,
+	convertDateShort,
+	convertPrice,
+	convertToEmail,
+	convertYoutube,
+	deleteDuplicates,
+	detectLanguage,
+	disableScroll,
+	enableScroll,
+	filterObject,
+	formatDate,
+	formatHour,
+	generateNumbers,
+	getFirstName,
+	getInitials,
+	getLastName,
+	getNextDay,
+	getPercentage,
+	getRandom,
+	getRandomAvatar,
+	getRandomDate,
+	getRandomNumber,
+	getRandomString,
+	getRandomTime,
+	getTimeNow,
+	getToday,
+	getTomorrow,
+	getYesterday,
+	hexToRgb,
+	emailRegex,
+	passwordRegex,
+	rgbToHex,
+	scrollToTop,
+	slugify,
+	sortByFrequency,
+	stringifyPx,
+	toCamelCase,
+	toConstantCase,
+	toDotCase,
+	toKebabCase,
+	toPascalCase,
+	toPathCase,
+	toSentenceCase,
+	toSnakeCase,
+	toTitleCase,
+	unslugify,
+	uuid,
+} from "@julseb-lib/utils"
+
+export * from "./hooks"
+export * from "./Variables"
+export * from "./context"
+
+export * from "./components/Text"
+export * from "./components/Wrapper"
+export * from "./components/Main"
+export * from "./components/Aside"
+export * from "./components/Section"
+export * from "./components/Grid"
+export * from "./components/Flexbox"
+export * from "./components/Key"
+export * from "./components/Highlight"
+export * from "./components/Linkify"
+export * from "./components/Hr"
+export * from "./components/Skeleton"
+export * from "./components/Tooltip"
+export * from "./components/Image"
+export * from "./components/Masonry"
+export * from "./components/Badge"
+export * from "./components/Avatar"
+export * from "./components/Loader"
+export * from "./components/Burger"
+export * from "./components/Button"
+export * from "./components/ButtonIcon"
+export * from "./components/ButtonGroup"
+export * from "./components/Tag"
+export * from "./components/InputContainer"
+export * from "./components/Input"
+export * from "./components/InputImage"
+export * from "./components/InputCheck"
+export * from "./components/InputPhone"
+export * from "./components/InputCounter"
+export * from "./components/InputSlider"
+export * from "./components/Select"
+export * from "./components/Autocomplete"
+export * from "./components/Rating"
+export * from "./components/InputPin"
+export * from "./components/Fieldset"
+export * from "./components/Form"
+export * from "./components/ListGroup"
+export * from "./components/Breadcrumbs"
+export * from "./components/Accordion"
+export * from "./components/Dropdown"
+export * from "./components/Toast"
+export * from "./components/Alert"
+export * from "./components/Modal"
+export * from "./components/DragList"
+export * from "./components/Pagination"
+export * from "./components/Paginator"
+export * from "./components/ProgressBar"
+export * from "./components/ProgressCircle"
+export * from "./components/Tabs"
+export * from "./components/Slideshow"
+export * from "./components/Cover"
+export * from "./components/Table"
+export * from "./components/PageLoading"
+export * from "./components/Sticky"
+export * from "./components/MarkdownEditor"
+export * from "./components/MarkdownContainer"
+export * from "./components/CodeContainer"
+export * from "./components/Fade"
+export * from "./components/BackToTop"
+export * from "./components/Drawer"
+export * from "./components/Header"
+export * from "./components/IconMenu"
+/* Prepend here - DO NOT REMOVE */

package/src/lib/lib-utils/get-highlighted-text.tsx

@@ -0,0 +1,30 @@
+import { Fragment, type CSSProperties } from "react"
+import { uuid, slugify } from "@julseb-lib/utils"
+import { clsx } from "../utils"
+import { Text } from ".."
+import type { ReactChildren } from "../types"
+
+export const getHighlightedText = (
+	text: ReactChildren,
+	value: string,
+	highlightStyle?: CSSProperties,
+	className?: string | Array<string>
+) => {
+	const parts = text?.toString().split(new RegExp(`(${value})`, "gi"))
+
+	return (parts as Array<string>).map(part => (
+		<Fragment key={uuid()}>
+			{slugify(part) === slugify(value) ? (
+				<Text
+					tag="strong"
+					className={clsx(className)}
+					style={highlightStyle}
+				>
+					{part}
+				</Text>
+			) : (
+				part
+			)}
+		</Fragment>
+	))
+}

package/src/lib/lib-utils/index.ts

@@ -0,0 +1,3 @@
+export * from "./get-highlighted-text"
+export * from "./transfom-search-keys"
+export * from "./use-keyboard-navigation"

package/src/lib/lib-utils/use-keyboard-navigation.tsx

@@ -0,0 +1,79 @@
+import { useState, useCallback, useRef, useEffect } from "react"
+import type { DispatchState } from "../types"
+
+interface ILibKeyboardNav<T> {
+	data: T
+	value: string
+	setValue: DispatchState<string>
+}
+
+export const useKeyboardNavigation = <T,>({
+	data,
+	value,
+	setValue,
+}: ILibKeyboardNav<T>) => {
+	const [isOpen, setIsOpen] = useState(false)
+	const [cursor, setCursor] = useState(0)
+	const listRef = useRef<HTMLDivElement>(null)
+
+	const handleKeyboardNavigation = useCallback(
+		(e: KeyboardEvent) => {
+			const { key } = e
+			const dataArr: Array<T> = data as Array<T>
+
+			if (isOpen) {
+				if (key === "ArrowDown") {
+					e.preventDefault()
+
+					if (dataArr.length) {
+						setCursor(prev =>
+							prev < dataArr.length ? prev + 1 : 0,
+						)
+
+						if (cursor === dataArr.length)
+							listRef?.current?.scrollTo({ top: 0 })
+						else listRef?.current?.scrollTo({ top: cursor * 40 })
+					}
+				}
+
+				if (key === "ArrowUp") {
+					e.preventDefault()
+
+					if (dataArr.length) {
+						setCursor(prev =>
+							prev > 0 ? prev - 1 : dataArr.length,
+						)
+
+						if (cursor === 0)
+							listRef?.current?.scrollTo({
+								top: listRef?.current?.scrollHeight,
+							})
+						else listRef?.current?.scrollTo({ top: cursor * 40 })
+					}
+				}
+
+				if (key === "Tab" || key === "Enter") {
+					e.preventDefault()
+
+					if (cursor === dataArr.length) {
+						setValue(value)
+						setIsOpen(false)
+					} else {
+						setValue((data as Array<any>)[cursor])
+						setIsOpen(false)
+					}
+				}
+			}
+		},
+		[isOpen, cursor, data, value, setValue],
+	)
+
+	useEffect(() => {
+		document.addEventListener("keydown", handleKeyboardNavigation)
+
+		return () =>
+			document.removeEventListener("keydown", handleKeyboardNavigation)
+	}, [handleKeyboardNavigation])
+
+	return { isOpen, setIsOpen, cursor, listRef, handleKeyboardNavigation }
+}