@julseb-lib/react 0.0.63 → 0.0.65

package/dist/lib/index.ts

@@ -0,0 +1,159 @@
+"use client"
+
+/*=============================================== Exports ===============================================*/
+
+export { ThemeProvider } from "styled-components"
+import {} from "styled-components/cssprop"
+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,
+    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 "./Variables"
+export * from "./Mixins"
+
+export {
+    optionsMarkdown,
+    markdownEditorOptions,
+} from "./utils/options-markdown"
+
+export * from "./hooks"
+
+export { Themes as LibThemeColors } from "./types/theme"
+
+export * from "./context/Theme.context"
+export * from "./context/Toaster"
+
+export * from "./components/Fallback"
+
+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/Icon"
+export * from "./components/Link"
+export * from "./components/Key"
+export * from "./components/TextIcon"
+export * from "./components/Highlight"
+export * from "./components/Linkify"
+export * from "./components/Tooltip"
+export * from "./components/Hr"
+export * from "./components/Skeleton"
+export * from "./components/Image"
+export * from "./components/Masonry"
+export * from "./components/FullBleed"
+export * from "./components/Video"
+export * from "./components/Youtube"
+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/Truncate"
+export * from "./components/Card"
+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/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/Pagination"
+export * from "./components/Paginator"
+export * from "./components/Stepper"
+export * from "./components/ProgressBar"
+export * from "./components/ProgressCircle"
+export * from "./components/SrOnly"
+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/Messaging"
+export * from "./components/MarkdownEditor"
+export * from "./components/MarkdownContainer"
+export * from "./components/CodeContainer"
+export * from "./components/Fade"
+export * from "./components/BackToTop"
+export * from "./components/Header"
+export * from "./components/IconMenu"
+export * from "./components/Footer"
+export * from "./components/Helmet"
+export * from "./components/ResetScroll"
+export * from "./components/Drawer"
+export * from "./components/PageLayout"
+export * from "./components/DragList"
+export * from "./components/Fieldset"
+export * from "./components/Datepicker"
+export * from "./components/Timepicker"
+// prependHere

package/dist/lib/lib-utils/append-styles.ts

@@ -0,0 +1,9 @@
+/*=============================================== Append styles ===============================================*/
+
+// Append styles to HTML head
+
+export const appendStyles = (styles: string) => {
+    const $style = document.createElement("style")
+    document.head.appendChild($style)
+    $style.textContent = styles
+}

package/dist/lib/lib-utils/colors-maps.ts

@@ -0,0 +1,176 @@
+/*=============================================== Colors maps ===============================================*/
+
+import { COLORS_LIGHT, COLORS_DARK, OVERLAYS } from "../Variables"
+import type { LibAllColors, LibColorsShort, LibOverlays } from "../types"
+
+type Color = COLORS_LIGHT | COLORS_DARK
+
+export const colorsLightShortMap = new Map<LibColorsShort, Color>([
+    ["primary", COLORS_LIGHT.PRIMARY_500],
+    ["secondary", COLORS_LIGHT.SECONDARY_500],
+    ["success", COLORS_LIGHT.SUCCESS_500],
+    ["danger", COLORS_LIGHT.DANGER_500],
+    ["warning", COLORS_LIGHT.WARNING_500],
+    ["gray", COLORS_LIGHT.GRAY_500],
+    ["black", COLORS_LIGHT.BLACK],
+    ["white", COLORS_LIGHT.WHITE],
+])
+
+export const allColorsLightMap = new Map<LibAllColors, Color>([
+    ...colorsLightShortMap,
+    ["gray-50", COLORS_LIGHT.GRAY_50],
+    ["gray-100", COLORS_LIGHT.GRAY_100],
+    ["gray-200", COLORS_LIGHT.GRAY_200],
+    ["gray-300", COLORS_LIGHT.GRAY_300],
+    ["gray-400", COLORS_LIGHT.GRAY_400],
+    ["gray-500", COLORS_LIGHT.GRAY_500],
+    ["gray-600", COLORS_LIGHT.GRAY_600],
+    ["gray-700", COLORS_LIGHT.GRAY_700],
+    ["gray-800", COLORS_LIGHT.GRAY_800],
+    ["gray-900", COLORS_LIGHT.GRAY_900],
+    ["primary-50", COLORS_LIGHT.PRIMARY_50],
+    ["primary-100", COLORS_LIGHT.PRIMARY_100],
+    ["primary-200", COLORS_LIGHT.PRIMARY_200],
+    ["primary-300", COLORS_LIGHT.PRIMARY_300],
+    ["primary-400", COLORS_LIGHT.PRIMARY_400],
+    ["primary-500", COLORS_LIGHT.PRIMARY_500],
+    ["primary-600", COLORS_LIGHT.PRIMARY_600],
+    ["primary-700", COLORS_LIGHT.PRIMARY_700],
+    ["primary-800", COLORS_LIGHT.PRIMARY_800],
+    ["primary-900", COLORS_LIGHT.PRIMARY_900],
+    ["secondary-50", COLORS_LIGHT.SECONDARY_50],
+    ["secondary-100", COLORS_LIGHT.SECONDARY_100],
+    ["secondary-200", COLORS_LIGHT.SECONDARY_200],
+    ["secondary-300", COLORS_LIGHT.SECONDARY_300],
+    ["secondary-400", COLORS_LIGHT.SECONDARY_400],
+    ["secondary-500", COLORS_LIGHT.SECONDARY_500],
+    ["secondary-600", COLORS_LIGHT.SECONDARY_600],
+    ["secondary-700", COLORS_LIGHT.SECONDARY_700],
+    ["secondary-800", COLORS_LIGHT.SECONDARY_800],
+    ["secondary-900", COLORS_LIGHT.SECONDARY_900],
+    ["success-50", COLORS_LIGHT.SUCCESS_50],
+    ["success-100", COLORS_LIGHT.SUCCESS_100],
+    ["success-200", COLORS_LIGHT.SUCCESS_200],
+    ["success-300", COLORS_LIGHT.SUCCESS_300],
+    ["success-400", COLORS_LIGHT.SUCCESS_400],
+    ["success-500", COLORS_LIGHT.SUCCESS_500],
+    ["success-600", COLORS_LIGHT.SUCCESS_600],
+    ["success-700", COLORS_LIGHT.SUCCESS_700],
+    ["success-800", COLORS_LIGHT.SUCCESS_800],
+    ["success-900", COLORS_LIGHT.SUCCESS_900],
+    ["danger-50", COLORS_LIGHT.DANGER_50],
+    ["danger-100", COLORS_LIGHT.DANGER_100],
+    ["danger-200", COLORS_LIGHT.DANGER_200],
+    ["danger-300", COLORS_LIGHT.DANGER_300],
+    ["danger-400", COLORS_LIGHT.DANGER_400],
+    ["danger-500", COLORS_LIGHT.DANGER_500],
+    ["danger-600", COLORS_LIGHT.DANGER_600],
+    ["danger-700", COLORS_LIGHT.DANGER_700],
+    ["danger-800", COLORS_LIGHT.DANGER_800],
+    ["danger-900", COLORS_LIGHT.DANGER_900],
+    ["warning-50", COLORS_LIGHT.WARNING_50],
+    ["warning-100", COLORS_LIGHT.WARNING_100],
+    ["warning-200", COLORS_LIGHT.WARNING_200],
+    ["warning-300", COLORS_LIGHT.WARNING_300],
+    ["warning-400", COLORS_LIGHT.WARNING_400],
+    ["warning-500", COLORS_LIGHT.WARNING_500],
+    ["warning-600", COLORS_LIGHT.WARNING_600],
+    ["warning-700", COLORS_LIGHT.WARNING_700],
+    ["warning-800", COLORS_LIGHT.WARNING_800],
+    ["warning-900", COLORS_LIGHT.WARNING_900],
+    ["background", COLORS_LIGHT.BACKGROUND],
+    ["font", COLORS_LIGHT.FONT],
+    ["currentColor", COLORS_LIGHT.CURRENT_COLOR],
+    ["transparent", COLORS_LIGHT.TRANSPARENT],
+])
+
+export const colorsDarkShortMap = new Map<LibColorsShort, COLORS_DARK>([
+    ["primary", COLORS_DARK.PRIMARY_500],
+    ["secondary", COLORS_DARK.SECONDARY_500],
+    ["success", COLORS_DARK.SUCCESS_500],
+    ["danger", COLORS_DARK.DANGER_500],
+    ["warning", COLORS_DARK.WARNING_500],
+    ["gray", COLORS_DARK.GRAY_500],
+    ["black", COLORS_DARK.BLACK],
+    ["white", COLORS_DARK.WHITE],
+])
+
+export const allColorsDarkMap = new Map<
+    LibAllColors,
+    COLORS_DARK | "currentColor" | "transparent"
+>([
+    ...colorsDarkShortMap,
+    ["gray-50", COLORS_DARK.GRAY_50],
+    ["gray-100", COLORS_DARK.GRAY_100],
+    ["gray-200", COLORS_DARK.GRAY_200],
+    ["gray-300", COLORS_DARK.GRAY_300],
+    ["gray-400", COLORS_DARK.GRAY_400],
+    ["gray-500", COLORS_DARK.GRAY_500],
+    ["gray-600", COLORS_DARK.GRAY_600],
+    ["gray-700", COLORS_DARK.GRAY_700],
+    ["gray-800", COLORS_DARK.GRAY_800],
+    ["gray-900", COLORS_DARK.GRAY_900],
+    ["primary-50", COLORS_DARK.PRIMARY_50],
+    ["primary-100", COLORS_DARK.PRIMARY_100],
+    ["primary-200", COLORS_DARK.PRIMARY_200],
+    ["primary-300", COLORS_DARK.PRIMARY_300],
+    ["primary-400", COLORS_DARK.PRIMARY_400],
+    ["primary-500", COLORS_DARK.PRIMARY_500],
+    ["primary-600", COLORS_DARK.PRIMARY_600],
+    ["primary-700", COLORS_DARK.PRIMARY_700],
+    ["primary-800", COLORS_DARK.PRIMARY_800],
+    ["primary-900", COLORS_DARK.PRIMARY_900],
+    ["secondary-50", COLORS_DARK.SECONDARY_50],
+    ["secondary-100", COLORS_DARK.SECONDARY_100],
+    ["secondary-200", COLORS_DARK.SECONDARY_200],
+    ["secondary-300", COLORS_DARK.SECONDARY_300],
+    ["secondary-400", COLORS_DARK.SECONDARY_400],
+    ["secondary-500", COLORS_DARK.SECONDARY_500],
+    ["secondary-600", COLORS_DARK.SECONDARY_600],
+    ["secondary-700", COLORS_DARK.SECONDARY_700],
+    ["secondary-800", COLORS_DARK.SECONDARY_800],
+    ["secondary-900", COLORS_DARK.SECONDARY_900],
+    ["success-50", COLORS_DARK.SUCCESS_50],
+    ["success-100", COLORS_DARK.SUCCESS_100],
+    ["success-200", COLORS_DARK.SUCCESS_200],
+    ["success-300", COLORS_DARK.SUCCESS_300],
+    ["success-400", COLORS_DARK.SUCCESS_400],
+    ["success-500", COLORS_DARK.SUCCESS_500],
+    ["success-600", COLORS_DARK.SUCCESS_600],
+    ["success-700", COLORS_DARK.SUCCESS_700],
+    ["success-800", COLORS_DARK.SUCCESS_800],
+    ["success-900", COLORS_DARK.SUCCESS_900],
+    ["danger-50", COLORS_DARK.DANGER_50],
+    ["danger-100", COLORS_DARK.DANGER_100],
+    ["danger-200", COLORS_DARK.DANGER_200],
+    ["danger-300", COLORS_DARK.DANGER_300],
+    ["danger-400", COLORS_DARK.DANGER_400],
+    ["danger-500", COLORS_DARK.DANGER_500],
+    ["danger-600", COLORS_DARK.DANGER_600],
+    ["danger-700", COLORS_DARK.DANGER_700],
+    ["danger-800", COLORS_DARK.DANGER_800],
+    ["danger-900", COLORS_DARK.DANGER_900],
+    ["warning-50", COLORS_DARK.WARNING_50],
+    ["warning-100", COLORS_DARK.WARNING_100],
+    ["warning-200", COLORS_DARK.WARNING_200],
+    ["warning-300", COLORS_DARK.WARNING_300],
+    ["warning-400", COLORS_DARK.WARNING_400],
+    ["warning-500", COLORS_DARK.WARNING_500],
+    ["warning-600", COLORS_DARK.WARNING_600],
+    ["warning-700", COLORS_DARK.WARNING_700],
+    ["warning-800", COLORS_DARK.WARNING_800],
+    ["warning-900", COLORS_DARK.WARNING_900],
+    ["background", COLORS_DARK.BACKGROUND],
+    ["font", COLORS_DARK.FONT],
+    ["currentColor", "currentColor"],
+    ["transparent", "transparent"],
+])
+
+export const overlaysMap = new Map<LibOverlays, OVERLAYS>([
+    ["black-50", OVERLAYS.BLACK_50],
+    ["black-80", OVERLAYS.BLACK_80],
+    ["white-50", OVERLAYS.WHITE_50],
+    ["white-80", OVERLAYS.WHITE_80],
+    ["gradient-black", OVERLAYS.GRADIENT_BLACK],
+    ["gradient-white", OVERLAYS.GRADIENT_WHITE],
+])

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

@@ -0,0 +1,31 @@
+/*=============================================== GetHighlightedText ===============================================*/
+
+import { Fragment, type CSSProperties } from "react"
+import { uuid, slugify } from "@julseb-lib/utils"
+import { Text } from ".."
+import type { ReactChildren } from "../types"
+
+export const getHighlightedText = (
+    text: ReactChildren,
+    value: string,
+    className?: string,
+    styles?: CSSProperties
+) => {
+    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={className && "HighlightedText"}
+                    style={styles}
+                >
+                    {part}
+                </Text>
+            ) : (
+                part
+            )}
+        </Fragment>
+    ))
+}

package/dist/lib/lib-utils/get-icon-size-from-font.ts

@@ -0,0 +1,27 @@
+/*=============================================== Get icon size from font-size ===============================================*/
+
+import { LIB_TOKENS } from ".."
+import type { LibFontSizes } from "../types"
+
+export const getIconSizeFromFont = (fontSize: LibFontSizes = "body") => {
+    const getSize = (size: LibFontSizes) =>
+        Number(LIB_TOKENS["font-sizes"][size].px.replace("px", ""))
+
+    const sizesMap = new Map<LibFontSizes, number>([
+        ["display-h1", getSize("display-h1")],
+        ["display-h2", getSize("display-h2")],
+        ["display-h3", getSize("display-h3")],
+        ["display-h4", getSize("display-h4")],
+        ["display-h5", getSize("display-h5")],
+        ["h1", getSize("h1")],
+        ["h2", getSize("h2")],
+        ["h3", getSize("h3")],
+        ["h4", getSize("h4")],
+        ["h5", getSize("h5")],
+        ["h6", getSize("h6")],
+        ["body", getSize("body")],
+        ["small", getSize("small")],
+    ])
+
+    return sizesMap.get(fontSize)
+}

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

@@ -0,0 +1,11 @@
+/*=============================================== LibUtils ===============================================*/
+
+// ! Those utils will not be exported in the library, they're here only for building components
+
+export * from "./get-highlighted-text"
+export * from "./colors-maps"
+export * from "./get-highlighted-text"
+export * from "./round-icon-size"
+export * from "./get-icon-size-from-font"
+export * from "./transfom-search-keys"
+export * from "./append-styles"

package/dist/lib/lib-utils/round-icon-size.ts

@@ -0,0 +1,7 @@
+/*=============================================== Round icon size ===============================================*/
+
+import { ICON_MULTIPLIER } from "../Variables"
+
+export const roundIconSize = (size: number) => {
+    return Number((size * ICON_MULTIPLIER).toFixed(2))
+}

package/dist/lib/lib-utils/transfom-search-keys.ts

@@ -0,0 +1,15 @@
+/*=============================================== Transform search keys ===============================================*/
+
+export const transformSearchKeys = (keys: Array<string>) => {
+    return keys.map(key =>
+        key.includes("Key")
+            ? key.replace("Key", "")
+            : key === "Command"
+            ? "⌘"
+            : key === "Enter"
+            ? "↵"
+            : key === "Control"
+            ? "Ctrl"
+            : key
+    )
+}

package/dist/lib/modules-declare.d.ts

@@ -0,0 +1,18 @@
+import type { FunctionComponent, SVGAttributes } from "react"
+import "styled-components"
+import type { COLORS_LIGHT, COLORS_DARK } from "./Variables"
+
+declare module "*.svg" {
+    const content: FunctionComponent<SVGAttributes<SVGElement>>
+    // eslint-disable-next-line
+    export default content
+}
+
+declare module "./utils/type-values"
+
+declare module "styled-components" {
+    type ThemeLight = typeof COLORS_LIGHT
+    type ThemeDark = typeof COLORS_DARK
+
+    export interface DefaultTheme extends ThemeLight, ThemeDark {}
+}

package/dist/lib/utils/StyleSheetManager.tsx

@@ -0,0 +1,32 @@
+/*=============================================== StyleSheetManager ===============================================*/
+
+import type { FC } from "react"
+import {
+    StyleSheetManager as Manager,
+    type IStyleSheetManager,
+    type WebTarget,
+} from "styled-components"
+import isPropValid from "@emotion/is-prop-valid"
+
+export const shouldForwardProp = (propName: string, target: WebTarget) => {
+    if (typeof target === "string") {
+        // For HTML elements, forward the prop if it is a valid HTML attribute
+        return isPropValid(propName)
+    }
+    // For other elements, forward all props
+    return true
+}
+
+export const StyleSheetManager: FC<IStyleSheetManager> = ({
+    shouldForwardProp: shouldForwardPropFn = shouldForwardProp,
+    enableVendorPrefixes = true,
+    ...rest
+}) => {
+    return (
+        <Manager
+            shouldForwardProp={shouldForwardPropFn}
+            enableVendorPrefixes={enableVendorPrefixes}
+            {...rest}
+        />
+    )
+}

package/dist/lib/utils/index.ts

@@ -0,0 +1,6 @@
+/*=============================================== Exports ===============================================*/
+
+export * from "./set-default-theme"
+export { default as LIB_TOKENS } from "./lib-tokens.json"
+export * from "./StyleSheetManager"
+export * from "./linkify-text"