New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details → →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

fhf-react

Package Overview
Dependencies
Maintainers
1
Versions
62
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

fhf-react - npm Package Compare versions

Comparing version
2.0.5
 to
2.1.0
+51
-53
index.jsx
import {
TypingAnimationElement,
ClippedText,
ClearFix,
Container,
FlexContainer,
FlexItem,
DivV,
RespImg,
RespVideo,
RespGridFill,
RespGridFit,
UnstyledList,
NavUl,
RespHeading,
RespP,
Circle,
RespBackgImg,
TypingAnimationElement,
ClippedText,
ClearFix,
Container,
FlexContainer,
FlexItem,
DivV,
RespImg,
RespVideo,
RespGrid,
UnstyledList,
NavUl,
RespHeading,
RespP,
Circle,
RespBackgImg,
} from "./parts/custom-comp.jsx";
import styles from "./parts/styles.js";
import {
useActive,
useHover,
useMediaQuery,
useMediaStyle,
useMousePosition,
useActive,
useHover,
useMediaQuery,
useMediaStyle,
useMousePosition,
} from "./parts/custom-hooks.jsx";
import {
mergeStyles,
mergeRefs,
activeStyle,
hoverStyle,
mergeStyles,
mergeRefs,
activeStyle,
hoverStyle,
} from "./parts/custom-func.jsx";
export {
ClearFix,
Container,
FlexContainer,
FlexItem,
DivV,
RespImg,
RespVideo,
RespGridFill,
RespGridFit,
UnstyledList,
NavUl,
RespHeading,
RespP,
Circle,
RespBackgImg,
useActive,
useHover,
useMediaQuery,
useMediaStyle,
mergeRefs,
styles,
hoverStyle,
activeStyle,
useMousePosition,
TypingAnimationElement,
ClippedText,
mergeStyles,
ClearFix,
Container,
FlexContainer,
FlexItem,
DivV,
RespImg,
RespVideo,
RespGrid,
UnstyledList,
NavUl,
RespHeading,
RespP,
Circle,
RespBackgImg,
useActive,
useHover,
useMediaQuery,
useMediaStyle,
mergeRefs,
styles,
hoverStyle,
activeStyle,
useMousePosition,
TypingAnimationElement,
ClippedText,
mergeStyles,
};
+49
-49
package.json
{
"name": "fhf-react",
"version": "2.0.5",
"description": "this react framework has React components and styles designed to facilitate the creation of responsive and flexible web layouts. Tailored for ease of use and versatility, the framework includes components for containers, flexible layouts, responsive images and videos, grid systems, navigation, and more. By incorporating predefined styles, the framework simplifies common layout tasks such as centering content, text alignment, floats, and flexbox arrangements. With a focus on responsiveness, the framework adapts to different screen sizes and provides a set of utility functions for managing visibility based on screen dimensions. Whether you're building a simple webpage or a complex web application, this framework aims to streamline the development process by offering a cohesive set of components and styles for creating modern and responsive user interfaces.",
"main": "index.jsx",
"files": [
"./parts/custom-comp.jsx",
"./parts/custom-func.jsx",
"./parts/custom-hooks.jsx",
"./parts/styles.js",
"./index.d.ts",
"./tools"
],
"type": "module",
"types": "index.d.ts",
"dependencies": {
"fhf": "^2.0.2",
"js-tokens": "^4.0.0",
"loose-envify": "^1.4.0",
"object-assign": "^4.1.1",
"react": "^18.2.0",
"react-is": "^16.13.1"
},
"scripts": {
"res": "npm uninstall fhf | npm i fhf"
},
"repository": {
"type": "git",
"url": "git+https://github.com/80mahd08/fhf-react.git"
},
"keywords": [
"responsive",
"display",
"framework",
"react",
"web",
"layout",
"responsive",
"flexbox",
"grid",
"layout",
"js",
"css"
],
"author": "Mahdi Amari",
"license": "MIT",
"bugs": {
"url": "https://github.com/80mahd08/fhf-react/issues"
},
"homepage": "https://github.com/80mahd08/fhf-react#readme"
"name": "fhf-react",
"version": "2.1.0",
"description": "this react framework has React components and styles designed to facilitate the creation of responsive and flexible web layouts. Tailored for ease of use and versatility, the framework includes components for containers, flexible layouts, responsive images and videos, grid systems, navigation, and more. By incorporating predefined styles, the framework simplifies common layout tasks such as centering content, text alignment, floats, and flexbox arrangements. With a focus on responsiveness, the framework adapts to different screen sizes and provides a set of utility functions for managing visibility based on screen dimensions. Whether you're building a simple webpage or a complex web application, this framework aims to streamline the development process by offering a cohesive set of components and styles for creating modern and responsive user interfaces.",
"main": "index.jsx",
"files": [
"index.jsx",
"index.d.ts",
"./parts",
"./tools"
],
"type": "module",
"types": "index.d.ts",
"dependencies": {
"fhf": "2.0.2",
"js-tokens": "4.0.0",
"lodash.merge": "^4.6.2",
"loose-envify": "1.4.0",
"object-assign": "4.1.1",
"react": "18.2.0",
"react-is": "16.13.1",
"tinycolor2": "^1.6.0"
},
"scripts": {
"res": "npm uninstall fhf | npm i fhf"
},
"repository": {
"type": "git",
"url": "git+https://github.com/80mahd08/fhf-react.git"
},
"keywords": [
"responsive",
"display",
"framework",
"react",
"web",
"layout",
"responsive",
"flexbox",
"grid",
"layout",
"js",
"css"
],
"author": "Mahdi Amari",
"license": "MIT",
"bugs": {
"url": "https://github.com/80mahd08/fhf-react/issues"
},
"homepage": "https://github.com/80mahd08/fhf-react#readme"
}
+352
-374
parts/custom-comp.jsx

@@ -13,445 +13,423 @@ import "fhf/dist/layout.css";

function ClearFix() {
return <div className="clear-fix"></div>;
return <div className="clear-fix"></div>;
}
function Container({ children, style = {}, className = "", ...otherProps }) {
return (
<div style={style} className={`container ${className}`} {...otherProps}>
{children}
</div>
);
return (
<div style={style} className={`container ${className}`} {...otherProps}>
{children}
</div>
);
}
function FlexContainer({
children,
style = {},
className = "",
...otherProps
children,
style = {},
className = "",
...otherProps
}) {
return (
<div
className={`flex-container ${className}`}
style={style}
{...otherProps}>
{children}
</div>
);
return (
<div
className={`flex-container ${className}`}
style={style}
{...otherProps}
>
{children}
</div>
);
}
function FlexItem({ children, style = {}, className = "", ...otherProps }) {
return (
<div className={`flex-item ${className}`} style={style} {...otherProps}>
{children}
</div>
);
return (
<div className={`flex-item ${className}`} style={style} {...otherProps}>
{children}
</div>
);
}
function DivV({
children,
className = "",
style = {},
visibleIn = "",
hiddenIn = "",
...otherProps
children,
className = "",
style = {},
visibleIn = "",
hiddenIn = "",
...otherProps
}) {
if (style) {
}
if (visibleIn === "" && hiddenIn === "") {
console.warn(
"visibleIn and hiddenIn cannot be empty at the same time (use div instead of DivV)"
);
return (
<div style={style} className={className} {...otherProps}>
{children}
</div>
);
}
if (visibleIn === "" && hiddenIn === "") {
console.warn(
"visibleIn and hiddenIn cannot be empty at the same time (use div instead of DivV)"
);
}
const visibilityClasses = {
xs: "visible-xs",
sm: "visible-sm",
md: "visible-md",
lg: "visible-lg",
};
const visibilityClasses = {
xs: "visible-xs",
sm: "visible-sm",
md: "visible-md",
lg: "visible-lg",
};
const hiddenClasses = {
xs: "hidden-xs",
sm: "hidden-sm",
md: "hidden-md",
lg: "hidden-lg",
};
const hiddenClasses = {
xs: "hidden-xs",
sm: "hidden-sm",
md: "hidden-md",
lg: "hidden-lg",
};
const getVisibilityClass = (visibility, classes) =>
(visibility && classes[visibility]) || "";
const getVisibilityClass = (visibility, classes) =>
(visibility && classes[visibility]) || "";
const combinedClasses = `${getVisibilityClass(
visibleIn,
visibilityClasses
)} ${getVisibilityClass(hiddenIn, hiddenClasses)} ${className}`;
const combinedClasses = `${getVisibilityClass(
visibleIn,
visibilityClasses
)} ${getVisibilityClass(hiddenIn, hiddenClasses)} ${className}`.trim();
return (
<div style={style} className={combinedClasses} {...otherProps}>
{children}
</div>
);
return (
<div style={style} className={combinedClasses} {...otherProps}>
{children}
</div>
);
}
function RespImg({ src, alt, style = {}, className = "", ...otherProps }) {
if (src === undefined || src === "") {
throw new Error("src cannot be undefined or empty");
}
const respImg = {
maxWidth: "99%",
height: "auto",
};
if (src === undefined || src === "") {
throw new Error("src cannot be undefined or empty");
}
const respImg = {
maxWidth: "99%",
height: "auto",
};
const combinedStyles = {
...respImg,
...style,
};
const combinedStyles = {
...respImg,
...style,
};
return (
<img
src={src}
alt={alt}
style={combinedStyles}
className={className}
{...otherProps}
/>
);
return (
<img
src={src}
alt={alt}
style={combinedStyles}
className={className}
{...otherProps}
/>
);
}
function RespVideo({ src = "", style = {}, className = "", ...otherProps }) {
if (src === undefined || src === "") {
throw new Error("src cannot be undefined or empty");
}
const respVideo = {
maxWidth: "99%",
height: "auto",
};
if (src === undefined || src === "") {
throw new Error("src cannot be undefined or empty");
}
const respVideo = {
maxWidth: "99%",
height: "auto",
};
const combinedStyles = {
...respVideo,
...style,
};
return (
<video
src={src}
style={combinedStyles}
className={className}
{...otherProps}
/>
);
const combinedStyles = {
...respVideo,
...style,
};
return (
<video
src={src}
style={combinedStyles}
className={className}
{...otherProps}
/>
);
}
function ClippedText({
children,
url,
element: Element = "p",
style = {},
className = "",
...otherProps
children,
url,
element: Element = "p",
style = {},
className = "",
...otherProps
}) {
// Merge the background image style with additional styles
const mergedStyle = mergeStyles(
{
backgroundImage: `url(${url})`,
// Add any other background-related styles here
},
style
);
if (!url) {
console.warn("url is required for ClippedText. Using fallback background.");
return (
<Element
style={style}
className={`clipped-text ${className}`}
{...otherProps}
>
{children}
</Element>
);
}
return (
<Element
style={mergedStyle}
className={`clipped-text ${className}`}
{...otherProps}>
{children}
</Element>
);
const mergedStyle = {
...style,
backgroundImage: `url(${url})`,
backgroundSize: "cover",
backgroundClip: "text",
WebkitBackgroundClip: "text",
color: "transparent",
};
return (
<Element
style={mergedStyle}
className={`clipped-text ${className}`}
{...otherProps}
>
{children}
</Element>
);
}
function RespGridFill({
children,
size = -1,
style = {},
gap = -1,
className = "",
...otherProps
function RespGrid({
children,
size = 1,
style = {},
gap = 0,
className = "",
type = "fill",
...otherProps
}) {
if (size === null || size === undefined || size === -1) {
throw new Error("size cannot be null or undefined or -1");
}
const withOutGap = {
...style,
display: "grid",
gridTemplateColumns: `repeat(auto-fill, minmax(${size}px, 0fr))`,
};
const withGap = {
...style,
display: "grid",
gridTemplateColumns: `repeat(auto-fill, minmax(${size}px, 0fr))`,
gap: `${gap}px`,
};
if (size <= 0 || !Number.isInteger(size)) {
console.warn("Invalid size. Using default value (1).");
size = 1;
}
if (gap === "") {
return (
<div style={withOutGap} className={`${className}`} {...otherProps}>
{children}
</div>
);
} else {
return (
<div style={withGap} className={`${className}`} {...otherProps}>
{children}
</div>
);
}
}
if (gap < 0 || typeof gap !== "number") {
console.warn("Invalid gap. Using default value (0).");
gap = 0;
}
function RespGridFit({
children,
size = -1,
style = {},
gap = -1,
className = "",
...otherProps
}) {
if (size === null || size === undefined || size === -1) {
throw new Error("size cannot be null or undefined or -1");
}
const withOutGap = {
...style,
display: "grid",
gridTemplateColumns: `repeat(auto-fit, minmax(${size}px, 0fr))`,
};
const withGap = {
...style,
display: "grid",
gridTemplateColumns: `repeat(auto-fit, minmax(${size}px, 0fr))`,
gap: `${gap}px`,
};
const gridStyle = {
...style,
display: "grid",
gridTemplateColumns: `repeat(auto-${type}, minmax(${size}px, 1fr))`,
gap: `${gap}px`,
};
if (gap === "") {
return (
<div style={withOutGap} className={`${className}`} {...otherProps}>
{children}
</div>
);
} else {
return (
<div style={withGap} className={`${className}`} {...otherProps}>
{children}
</div>
);
}
return (
<div style={gridStyle} className={className} {...otherProps}>
{children}
</div>
);
}
function UnstyledList({ children, className = "", style = {}, ...otherProps }) {
const listStyle = {
listStyleType: "none",
padding: -1,
margin: -1,
};
const combinedStyles = {
...listStyle,
...style,
};
return (
<ul style={combinedStyles} className={`${className}`} {...otherProps}>
{children}
</ul>
);
const listStyle = {
listStyleType: "none",
padding: -1,
margin: -1,
};
const combinedStyles = {
...listStyle,
...style,
};
return (
<ul style={combinedStyles} className={`${className}`} {...otherProps}>
{children}
</ul>
);
}
function NavUl({ children, style = {}, className = "", ...otherProps }) {
const listStyle = {
listStyleType: "none",
padding: -1,
margin: -1,
display: "flex",
justifyContent: "space-between",
};
const combinedStyles = {
...listStyle,
...style,
};
const listStyle = {
listStyleType: "none",
padding: -1,
margin: -1,
display: "flex",
justifyContent: "space-between",
};
const combinedStyles = {
...listStyle,
...style,
};
return (
<ul style={combinedStyles} className={`${className}`} {...otherProps}>
{children}
</ul>
);
return (
<ul style={combinedStyles} className={`${className}`} {...otherProps}>
{children}
</ul>
);
}
function RespHeading({
level = 0,
style = {},
className = "",
children,
...otherProps
level = 0,
style = {},
className = "",
children,
...otherProps
}) {
if (level < 0 || level > 6) {
throw new Error(
"Incorrect element value in RespHeading; it should be level between 0 and 6"
);
} else {
const responsiveTypography = {
h0: {
fontSize: "clamp(31px, 4vw, 48px)",
},
h1: {
fontSize: "clamp(23px, 3vw, 36px)",
},
h2: {
fontSize: "clamp(19px, 2.5vw, 30px)",
},
h3: {
fontSize: "clamp(19px, 2.5vw, 30px)",
},
h4: {
fontSize: "clamp(15px, 2vw, 20px)",
},
h5: {
fontSize: "clamp(13px, 1.5vw, 18px)",
},
};
const element = `h${level}`;
const combinedStyles = {
...responsiveTypography[element],
...style,
};
if (level < 0 || level > 6) {
throw new Error(
"Incorrect element value in RespHeading; it should be level between 0 and 6"
);
} else {
const responsiveTypography = {
h0: {
fontSize: "clamp(31px, 4vw, 48px)",
},
h1: {
fontSize: "clamp(23px, 3vw, 36px)",
},
h2: {
fontSize: "clamp(19px, 2.5vw, 30px)",
},
h3: {
fontSize: "clamp(19px, 2.5vw, 30px)",
},
h4: {
fontSize: "clamp(15px, 2vw, 20px)",
},
h5: {
fontSize: "clamp(13px, 1.5vw, 18px)",
},
};
const element = `h${level}`;
const combinedStyles = {
...responsiveTypography[element],
...style,
};
return React.createElement(
element,
{
style: combinedStyles,
className: `${className}`,
...otherProps,
},
children
);
}
return React.createElement(
element,
{
style: combinedStyles,
className: `${className}`,
...otherProps,
},
children
);
}
}
function RespP({ style = {}, className = "", children, ...otherProps }) {
const combinedStyles = {
fontSize: "clamp(15px, 1.2vw, 20px)",
...style,
};
const combinedStyles = {
fontSize: "clamp(15px, 1.2vw, 20px)",
...style,
};
return (
<p style={combinedStyles} className={`${className}`} {...otherProps}>
{children}
</p>
);
return (
<p style={combinedStyles} className={`${className}`} {...otherProps}>
{children}
</p>
);
}
function Circle({ children, style = {}, className = "", ...otherProps }) {
const circleStyle = {
borderRadius: "49%",
};
const combinedStyles = {
...circleStyle,
...style,
};
return (
<div style={combinedStyles} className={`${className}`} {...otherProps}>
{children}
</div>
);
const circleStyle = {
borderRadius: "49%",
};
const combinedStyles = {
...circleStyle,
...style,
};
return (
<div style={combinedStyles} className={`${className}`} {...otherProps}>
{children}
</div>
);
}
function RespBackgImg({
element = "div",
url = "",
children,
style = {},
className = "",
...otherProps
element = "div",
url = "",
children,
style = {},
className = "",
...otherProps
}) {
if (url === "") {
throw new Error(" url cannot be empty in ResBackgImg");
}
if (
element !== "div" &&
element !== "section" &&
element != "header" &&
element != "footer"
) {
throw new Error(
" incorrect element value in ResBackgImg it should be one of those (div,section,header,footer)"
);
} else {
const respBackgImg = {
backgroundSize: "cover",
backgroundPosition: "center",
backgroundRepeat: "no-repeat",
};
const combinedStyles = {
backgroundImage: `url(${url})`,
...respBackgImg,
...style,
};
return React.createElement(
element,
{
style: combinedStyles,
className: `${className}`,
...otherProps,
},
children
);
}
if (url === "") {
throw new Error(" url cannot be empty in ResBackgImg");
}
if (
element !== "div" &&
element !== "section" &&
element != "header" &&
element != "footer"
) {
throw new Error(
" incorrect element value in ResBackgImg it should be one of those (div,section,header,footer)"
);
} else {
const respBackgImg = {
backgroundSize: "cover",
backgroundPosition: "center",
backgroundRepeat: "no-repeat",
};
const combinedStyles = {
backgroundImage: `url(${url})`,
...respBackgImg,
...style,
};
return React.createElement(
element,
{
style: combinedStyles,
className: `${className}`,
...otherProps,
},
children
);
}
}
function TypingAnimationElement({
text,
cursorColor,
element = "span", // Default element type
style = {},
className = "",
speed = -1.5,
...otherProps
text,
cursorColor = "black", // Default cursor color
element: Element = "span",
style = {},
className = "",
speed = 100, // Default speed in milliseconds
...otherProps
}) {
const [finalText, setFinalText] = useState("");
const [finalText, setFinalText] = useState("");
useEffect(() => {
const interval = setInterval(() => {
setFinalText((prevText) => {
if (prevText.length === text.length) {
return "";
}
return prevText + text[finalText.length];
});
}, speed * 99);
return () => {
clearInterval(interval);
};
});
useEffect(() => {
if (speed <= 0) {
console.warn(
"Speed must be a positive number. Using default speed (100ms)."
);
speed = 100;
}
return React.createElement(
element,
{
style: mergeStyles(style, { "--typing-color": cursorColor }),
className: `typing ${className}`,
...otherProps,
},
finalText
);
const interval = setInterval(() => {
setFinalText((prevText) => {
if (prevText.length === text.length) {
return "";
}
return prevText + text[finalText.length];
});
}, speed);
return () => clearInterval(interval);
}, [text, speed, finalText.length]);
return (
<Element
style={{ ...style, "--typing-color": cursorColor }}
className={`typing ${className}`}
{...otherProps}
>
{finalText}
</Element>
);
}
export {
TypingAnimationElement,
ClippedText,
ClearFix,
Container,
FlexContainer,
FlexItem,
DivV,
RespImg,
RespVideo,
RespGridFill,
RespGridFit,
UnstyledList,
NavUl,
RespHeading,
RespP,
Circle,
RespBackgImg,
TypingAnimationElement,
ClippedText,
ClearFix,
Container,
FlexContainer,
FlexItem,
DivV,
RespImg,
RespVideo,
RespGrid,
UnstyledList,
NavUl,
RespHeading,
RespP,
Circle,
RespBackgImg,
};
+31
-29
parts/custom-func.jsx

@@ -0,48 +1,50 @@

import merge from "lodash.merge";
import { useActive, useHover } from "./custom-hooks";
function mergeRefs(...refs) {
// Define a memoized function to set the value of each ref in the array based on the order of the refs.
const mergeFunction = (val) => {
setRef(val, ...refs);
};
// Define a memoized function to set the value of each ref in the array based on the order of the refs.
const mergeFunction = (val) => {
setRef(val, ...refs);
};
// Return the memoized merge function.
return mergeFunction;
// Return the memoized merge function.
return mergeFunction;
}
function setRef(val, ...refs) {
// Loop through each ref in the array.
for (let i = 0; i < refs.length; i++) {
// If the ref is a function, call the ref with the value.
if (typeof refs[i] === "function") {
refs[i](val);
}
// Otherwise, set the ref.current property to the value.
else if (refs[i] != null) {
refs[i].current = val;
}
}
// Loop through each ref in the array.
for (let i = 0; i < refs.length; i++) {
// If the ref is a function, call the ref with the value.
if (typeof refs[i] === "function") {
refs[i](val);
}
// Otherwise, set the ref.current property to the value.
else if (refs[i] != null) {
refs[i].current = val;
}
}
}
const hoverStyle = (...styles) => {
const { ref, isHovered } = useHover();
const { ref, isHovered } = useHover();
return {
hoverRef: ref,
hoverStyle: isHovered ? mergeStyles(...styles) : {},
};
return {
hoverRef: ref,
hoverStyle: isHovered ? mergeStyles(...styles) : {},
};
};
const activeStyle = (...styles) => {
const { ref, isActive } = useActive();
const { ref, isActive } = useActive();
return {
activeRef: ref,
activeStyle: isActive ? mergeStyles(...styles) : {},
};
return {
activeRef: ref,
activeStyle: isActive ? mergeStyles(...styles) : {},
};
};
const mergeStyles = (...styles) =>
Object.assign({}, ...styles.map((style) => style));
function mergeStyles(...styles) {
return merge({}, ...styles); // Deep merge styles
}
export { mergeStyles, mergeRefs, activeStyle, hoverStyle };
+85
-89
parts/custom-hooks.jsx
import { useRef, useCallback, useState, useEffect } from "react";
function useMediaQuery(query) {
// Initialize the state variable 'matches' with the initial match status of the media query.
const [matches, setMatches] = useState(window.matchMedia(query).matches);
const [matches, setMatches] = useState(
() => window.matchMedia(query).matches
);
// Define a memoized function to handle changes in the media query status.
const handleChange = useCallback((event) => {
// Update the 'matches' state based on the new match status.
setMatches(event.matches);
}, []);
useEffect(() => {
const mediaQueryList = window.matchMedia(query);
// useEffect is used to set up the subscription to the media query changes.
useEffect(() => {
// Create a media query list object based on the provided query.
const mediaQueryList = window.matchMedia(query);
const handleChange = (event) => {
setMatches(event.matches);
};
// Add the 'handleChange' function as a listener to the media query changes.
mediaQueryList.addListener(handleChange);
mediaQueryList.addEventListener("change", handleChange);
// Clean up by removing the listener when the component unmounts or when the query changes.
return () => {
mediaQueryList.removeListener(handleChange);
};
}, [query, handleChange]);
// Cleanup
return () => {
mediaQueryList.removeEventListener("change", handleChange);
};
}, [query]);
// Return the current match status of the media query.
return matches;
return matches;
}
const useMediaStyle = (query, style) => {
// Use the useMediaQuery hook to check if the media query matches.
const matches = useMediaQuery(query);
// Return the style object if the media query matches, otherwise an empty object.
return matches ? style : {};
// Use the useMediaQuery hook to check if the media query matches.
const matches = useMediaQuery(query);
// Return the style object if the media query matches, otherwise an empty object.
return matches ? style : {};
};
function useHover() {
// Initialize the state variable 'useHoverIsHovered' with the initial hover state.
const [useHoverIsHovered, setUseHoverIsHovered] = useState(false);
// Initialize the state variable 'useHoverIsHovered' with the initial hover state.
const [useHoverIsHovered, setUseHoverIsHovered] = useState(false);
// Create a refOfUseHover to store the reference to the DOM element.
const refOfUseHover = useRef(null);
// Create a refOfUseHover to store the reference to the DOM element.
const refOfUseHover = useRef(null);
// Define memoized functions to handle mouse enter and mouse leave events.
const handleMouseEnter = useCallback(() => {
setUseHoverIsHovered(true);
}, []);
// Define memoized functions to handle mouse enter and mouse leave events.
const handleMouseEnter = useCallback(() => {
setUseHoverIsHovered(true);
}, []);
const handleMouseLeave = useCallback(() => {
setUseHoverIsHovered(false);
}, []);
const handleMouseLeave = useCallback(() => {
setUseHoverIsHovered(false);
}, []);
// useEffect is used to set up the subscription to the mouse enter and mouse leave events.
useEffect(() => {
const element = refOfUseHover.current;
// useEffect is used to set up the subscription to the mouse enter and mouse leave events.
useEffect(() => {
const element = refOfUseHover.current;
if (element) {
element.addEventListener("mouseenter", handleMouseEnter);
element.addEventListener("mouseleave", handleMouseLeave);
if (element) {
element.addEventListener("mouseenter", handleMouseEnter);
element.addEventListener("mouseleave", handleMouseLeave);
// Clean up by removing the event listeners when the component unmounts.
return () => {
element.removeEventListener("mouseenter", handleMouseEnter);
element.removeEventListener("mouseleave", handleMouseLeave);
};
}
}, [handleMouseEnter, handleMouseLeave]);
// Clean up by removing the event listeners when the component unmounts.
return () => {
element.removeEventListener("mouseenter", handleMouseEnter);
element.removeEventListener("mouseleave", handleMouseLeave);
};
}
}, [handleMouseEnter, handleMouseLeave]);
// Return an object containing a reference to the DOM element and the current hover state.
return { refOfUseHover, useHoverIsHovered };
// Return an object containing a reference to the DOM element and the current hover state.
return { refOfUseHover, useHoverIsHovered };
}
function useActive() {
// Initialize the state variable 'useActiveIsActive' with the initial active state.
const [useActiveIsActive, setUseActiveIsActive] = useState(false);
// Initialize the state variable 'useActiveIsActive' with the initial active state.
const [useActiveIsActive, setUseActiveIsActive] = useState(false);
// Create a refOfUseActive to store the reference to the DOM element.
const refOfUseActive = useRef(null);
// Create a refOfUseActive to store the reference to the DOM element.
const refOfUseActive = useRef(null);
// Define memoized functions to handle mouse down and mouse up events.
const handleMouseDown = useCallback(() => {
setUseActiveIsActive(true);
}, []);
// Define memoized functions to handle mouse down and mouse up events.
const handleMouseDown = useCallback(() => {
setUseActiveIsActive(true);
}, []);
const handleMouseUp = useCallback(() => {
setUseActiveIsActive(false);
}, []);
const handleMouseUp = useCallback(() => {
setUseActiveIsActive(false);
}, []);
// useEffect is used to set up the subscription to the mouse down and mouse up events.
useEffect(() => {
const element = refOfUseActive.current;
// useEffect is used to set up the subscription to the mouse down and mouse up events.
useEffect(() => {
const element = refOfUseActive.current;
if (element) {
element.addEventListener("mousedown", handleMouseDown);
element.addEventListener("mouseup", handleMouseUp);
if (element) {
element.addEventListener("mousedown", handleMouseDown);
element.addEventListener("mouseup", handleMouseUp);
// Clean up by removing the event listeners when the component unmounts.
return () => {
element.removeEventListener("mousedown", handleMouseDown);
element.removeEventListener("mouseup", handleMouseUp);
};
}
}, [handleMouseDown, handleMouseUp]);
// Clean up by removing the event listeners when the component unmounts.
return () => {
element.removeEventListener("mousedown", handleMouseDown);
element.removeEventListener("mouseup", handleMouseUp);
};
}
}, [handleMouseDown, handleMouseUp]);
// Return an object containing a mutable reference to the DOM element and the current active state.
return { refOfUseActive, useActiveIsActive };
// Return an object containing a mutable reference to the DOM element and the current active state.
return { refOfUseActive, useActiveIsActive };
}
const useMousePosition = () => {
const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
function useMousePosition() {
const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
const handleMouseMove = (event) => {
setMousePosition({ x: event.clientX, y: event.clientY });
};
useEffect(() => {
const handleMouseMove = (event) => {
setMousePosition({ x: event.clientX, y: event.clientY });
};
useEffect(() => {
document.addEventListener("mousemove", handleMouseMove);
window.addEventListener("mousemove", handleMouseMove);
return () => {
document.removeEventListener("mousemove", handleMouseMove);
};
}, []);
// Cleanup
return () => {
window.removeEventListener("mousemove", handleMouseMove);
};
}, []);
return mousePosition;
};
return mousePosition;
}
export { useActive, useHover, useMediaQuery, useMediaStyle, useMousePosition };
+1067
-1070
parts/styles.js
import {
isValidColor,
isValidSize,
isValidBorderStyle,
isValidTextDecoration,
isValidTextTransform,
isValidJContent,
isValidAContent,
isValidColor,
isValidSize,
isValidBorderStyle,
isValidTextDecoration,
isValidTextTransform,
isValidJContent,
isValidAContent,
} from "../tools/validation";

@@ -13,1150 +13,1147 @@ import GridSystemOop from "../tools/GridSystemOop";

const styles = {
centerPosition: {
position: "absolute",
left: "50%",
top: "50%",
transform: "translate(-50%, -50%)",
},
centerPosition: {
position: "absolute",
left: "50%",
top: "50%",
transform: "translate(-50%, -50%)",
},
textCenter: {
textAlign: "center",
},
textLeft: {
textAlign: "left",
},
textRight: {
textAlign: "right",
},
textCenter: {
textAlign: "center",
},
textLeft: {
textAlign: "left",
},
textRight: {
textAlign: "right",
},
floatLeft: {
float: "left",
},
floatRight: {
float: "right",
},
centerContentFlex: {
display: "flex",
justifyContent: "center",
alignItems: "center",
},
dispFlex: {
display: "flex",
},
dispInlineFlex: {
display: "inline-flex",
},
floatLeft: {
float: "left",
},
floatRight: {
float: "right",
},
centerContentFlex: {
display: "flex",
justifyContent: "center",
alignItems: "center",
},
dispFlex: {
display: "flex",
},
dispInlineFlex: {
display: "inline-flex",
},
dispNone: {
display: "none",
},
dispBlock: {
display: "block",
},
dispInline: {
display: "inline",
},
dispInlineBlock: {
display: "inline-block",
},
dispTable: {
display: "table",
},
dispTableRow: {
display: "table-row",
},
dispTableCell: {
display: "table-cell",
},
dispNone: {
display: "none",
},
dispBlock: {
display: "block",
},
dispInline: {
display: "inline",
},
dispInlineBlock: {
display: "inline-block",
},
dispTable: {
display: "table",
},
dispTableRow: {
display: "table-row",
},
dispTableCell: {
display: "table-cell",
},
dispGrid: {
display: "grid",
},
dispInlineGrid: {
display: "inline-grid",
},
dispGrid: {
display: "grid",
},
dispInlineGrid: {
display: "inline-grid",
},
fontColor: (color) => {
if (isValidColor(color)) {
return {
color: color,
};
} else {
throw new Error("Invalid color value in fontColor");
}
},
bg: (color) => {
if (isValidColor(color)) {
return {
backgroundColor: color,
};
} else {
throw new Error("Invalid color value in bg");
}
},
border: (size, type, color) => {
if (
!isValidSize(size) ||
!isValidBorderStyle(type) ||
!isValidColor(color)
) {
throw new Error("Invalid size, type, or color value in border");
}
return {
border: `${size}px ${type} ${color}`,
};
},
fontColor: (color) => {
if (isValidColor(color)) {
return {
color: color,
};
} else {
throw new Error("Invalid color value in fontColor");
}
},
bg: (color) => {
if (isValidColor(color)) {
return {
backgroundColor: color,
};
} else {
throw new Error("Invalid color value in bg");
}
},
border: (size, type, color) => {
if (
!isValidSize(size) ||
!isValidBorderStyle(type) ||
!isValidColor(color)
) {
throw new Error("Invalid size, type, or color value in border");
}
return {
border: `${size}px ${type} ${color}`,
};
},
margin: (size) => {
if (!isValidSize(size)) {
throw new Error("Invalid size value in margin");
}
return {
margin: `${size}px`,
};
},
marginTop: (size) => {
if (!isValidSize(size)) {
throw new Error("Invalid size value in marginTop");
}
return {
marginTop: `${size}px`,
};
},
marginBottom: (size) => {
if (!isValidSize(size)) {
throw new Error("Invalid size value in marginBottom");
}
return {
marginBottom: `${size}px`,
};
},
marginLeft: (size) => {
if (!isValidSize(size)) {
throw new Error("Invalid size value in marginLeft");
}
return {
marginLeft: `${size}px`,
};
},
marginRight: (size) => {
if (!isValidSize(size)) {
throw new Error("Invalid size value in marginRight");
}
return {
marginRight: `${size}px`,
};
},
padding: (size) => {
if (!isValidSize(size)) {
throw new Error("Invalid size value in padding");
}
return {
padding: `${size}px`,
};
},
paddingTop: (size) => {
if (!isValidSize(size)) {
throw new Error("Invalid size value in paddingTop");
}
return {
paddingTop: `${size}px`,
};
},
paddingBottom: (size) => {
if (!isValidSize(size)) {
throw new Error("Invalid size value in paddingBottom");
}
return {
paddingBottom: `${size}px`,
};
},
paddingLeft: (size) => {
if (!isValidSize(size)) {
throw new Error("Invalid size value in paddingLeft");
}
return {
paddingLeft: `${size}px`,
};
},
paddingRight: (size) => {
if (!isValidSize(size)) {
throw new Error("Invalid size value in paddingRight");
}
return {
paddingRight: `${size}px`,
};
},
respMargin: (min, max) => {
if (!isValidSize(min) || !isValidSize(max)) {
throw new Error("Invalid size value in respMargin");
}
return {
margin: `clamp(${min}px, 5vw, ${max}px)`,
};
},
respMarginTop: (min, max) => {
if (!isValidSize(min) || !isValidSize(max)) {
throw new Error("Invalid size value in respMarginTop");
}
return {
marginTop: `clamp(${min}px, 5vw, ${max}px)`,
};
},
respMarginLeft: (min, max) => {
if (!isValidSize(min) || !isValidSize(max)) {
throw new Error("Invalid size value in respMarginLeft");
}
return {
marginLeft: `clamp(${min}px, 5vw, ${max}px)`,
};
},
respMarginRight: (min, max) => {
if (!isValidSize(min) || !isValidSize(max)) {
throw new Error("Invalid size value in respMarginRight");
}
return {
marginRight: `clamp(${min}px, 5vw, ${max}px)`,
};
},
respMarginBottom: (min, max) => {
if (!isValidSize(min) || !isValidSize(max)) {
throw new Error("Invalid size value in respMarginBottom");
}
return {
marginBottom: `clamp(${min}px, 5vw, ${max}px)`,
};
},
respPadding: (min, max) => {
if (!isValidSize(min) || !isValidSize(max)) {
throw new Error("Invalid size value in respPadding");
}
return {
padding: `clamp(${min}px, 5vw, ${max}px)`,
};
},
respPaddingTop: (min, max) => {
if (!isValidSize(min) || !isValidSize(max)) {
throw new Error("Invalid size value in respPaddingTop");
}
return {
paddingTop: `clamp(${min}px, 5vw, ${max}px)`,
};
},
respPaddingLeft: (min, max) => {
if (!isValidSize(min) || !isValidSize(max)) {
throw new Error("Invalid size value in respPaddingLeft");
}
return {
paddingLeft: `clamp(${min}px, 5vw, ${max}px)`,
};
},
respPaddingRight: (min, max) => {
if (!isValidSize(min) || !isValidSize(max)) {
throw new Error("Invalid size value in respPaddingRight");
}
return {
paddingRight: `clamp(${min}px, 5vw, ${max}px)`,
};
},
respPaddingBottom: (min, max) => {
if (!isValidSize(min) || !isValidSize(max)) {
throw new Error("Invalid size value in respPaddingBottom");
}
return {
paddingBottom: `clamp(${min}px, 5vw, ${max}px)`,
};
},
marginNone: {
margin: 0,
},
paddingNone: {
padding: 0,
},
borderNone: {
border: 0,
},
borderRadiusNone: {
borderRadius: 0,
},
boxShadowNone: {
boxShadow: "none",
},
textShadowNone: {
textShadow: "none",
},
margin: (size) => {
if (!isValidSize(size)) {
throw new Error("Invalid size value in margin");
}
return {
margin: `${size}px`,
};
},
marginTop: (size) => {
if (!isValidSize(size)) {
throw new Error("Invalid size value in marginTop");
}
return {
marginTop: `${size}px`,
};
},
marginBottom: (size) => {
if (!isValidSize(size)) {
throw new Error("Invalid size value in marginBottom");
}
return {
marginBottom: `${size}px`,
};
},
marginLeft: (size) => {
if (!isValidSize(size)) {
throw new Error("Invalid size value in marginLeft");
}
return {
marginLeft: `${size}px`,
};
},
marginRight: (size) => {
if (!isValidSize(size)) {
throw new Error("Invalid size value in marginRight");
}
return {
marginRight: `${size}px`,
};
},
padding: (size) => {
if (!isValidSize(size)) {
throw new Error("Invalid size value in padding");
}
return {
padding: `${size}px`,
};
},
paddingTop: (size) => {
if (!isValidSize(size)) {
throw new Error("Invalid size value in paddingTop");
}
return {
paddingTop: `${size}px`,
};
},
paddingBottom: (size) => {
if (!isValidSize(size)) {
throw new Error("Invalid size value in paddingBottom");
}
return {
paddingBottom: `${size}px`,
};
},
paddingLeft: (size) => {
if (!isValidSize(size)) {
throw new Error("Invalid size value in paddingLeft");
}
return {
paddingLeft: `${size}px`,
};
},
paddingRight: (size) => {
if (!isValidSize(size)) {
throw new Error("Invalid size value in paddingRight");
}
return {
paddingRight: `${size}px`,
};
},
respMargin: (min, max) => {
if (!isValidSize(min) || !isValidSize(max)) {
throw new Error("Invalid size value in respMargin");
}
return {
margin: `clamp(${min}px, 5vw, ${max}px)`,
};
},
respMarginTop: (min, max) => {
if (!isValidSize(min) || !isValidSize(max)) {
throw new Error("Invalid size value in respMarginTop");
}
return {
marginTop: `clamp(${min}px, 5vw, ${max}px)`,
};
},
respMarginLeft: (min, max) => {
if (!isValidSize(min) || !isValidSize(max)) {
throw new Error("Invalid size value in respMarginLeft");
}
return {
marginLeft: `clamp(${min}px, 5vw, ${max}px)`,
};
},
respMarginRight: (min, max) => {
if (!isValidSize(min) || !isValidSize(max)) {
throw new Error("Invalid size value in respMarginRight");
}
return {
marginRight: `clamp(${min}px, 5vw, ${max}px)`,
};
},
respMarginBottom: (min, max) => {
if (!isValidSize(min) || !isValidSize(max)) {
throw new Error("Invalid size value in respMarginBottom");
}
return {
marginBottom: `clamp(${min}px, 5vw, ${max}px)`,
};
},
respPadding: (min, max) => {
if (!isValidSize(min) || !isValidSize(max)) {
throw new Error("Invalid size value in respPadding");
}
return {
padding: `clamp(${min}px, 5vw, ${max}px)`,
};
},
respPaddingTop: (min, max) => {
if (!isValidSize(min) || !isValidSize(max)) {
throw new Error("Invalid size value in respPaddingTop");
}
return {
paddingTop: `clamp(${min}px, 5vw, ${max}px)`,
};
},
respPaddingLeft: (min, max) => {
if (!isValidSize(min) || !isValidSize(max)) {
throw new Error("Invalid size value in respPaddingLeft");
}
return {
paddingLeft: `clamp(${min}px, 5vw, ${max}px)`,
};
},
respPaddingRight: (min, max) => {
if (!isValidSize(min) || !isValidSize(max)) {
throw new Error("Invalid size value in respPaddingRight");
}
return {
paddingRight: `clamp(${min}px, 5vw, ${max}px)`,
};
},
respPaddingBottom: (min, max) => {
if (!isValidSize(min) || !isValidSize(max)) {
throw new Error("Invalid size value in respPaddingBottom");
}
return {
paddingBottom: `clamp(${min}px, 5vw, ${max}px)`,
};
},
marginNone: {
margin: 0,
},
paddingNone: {
padding: 0,
},
borderNone: {
border: 0,
},
borderRadiusNone: {
borderRadius: 0,
},
boxShadowNone: {
boxShadow: "none",
},
textShadowNone: {
textShadow: "none",
},
zIndex: (value) => {
if (!isValidSize(value)) {
throw new Error("Invalid value in zIndex");
}
return {
zIndex: value,
};
},
textDeco: (value) => {
if (!isValidTextDecoration(value)) {
throw new Error("Invalid value in textDeco");
}
return {
textDecoration: value,
};
},
textTrans: (value) => {
if (!isValidTextTransform(value)) {
throw new Error("Invalid value in textTrans");
}
return {
textTransform: value,
};
},
zIndex: (value) => {
if (!isValidSize(value)) {
throw new Error("Invalid value in zIndex");
}
return {
zIndex: value,
};
},
textDeco: (value) => {
if (!isValidTextDecoration(value)) {
throw new Error("Invalid value in textDeco");
}
return {
textDecoration: value,
};
},
textTrans: (value) => {
if (!isValidTextTransform(value)) {
throw new Error("Invalid value in textTrans");
}
return {
textTransform: value,
};
},
transBg: {
backgroundColor: "transparent",
},
rounded: {
borderRadius: "5px",
},
extraRounded: {
borderRadius: "25px",
},
megaRounded: {
borderRadius: "45px",
},
superRounded: {
borderRadius: "65px",
},
ultraRounded: {
borderRadius: "85px",
},
extremeRounded: {
borderRadius: "105px",
},
radicalRounded: {
borderRadius: "125px",
},
hyperRounded: {
borderRadius: "145px",
},
ultimateRounded: {
borderRadius: "165px",
},
maxRounded: {
borderRadius: "185px",
},
beyondRounded: {
borderRadius: "205px",
},
transBg: {
backgroundColor: "transparent",
},
rounded: {
borderRadius: "5px",
},
extraRounded: {
borderRadius: "25px",
},
megaRounded: {
borderRadius: "45px",
},
superRounded: {
borderRadius: "65px",
},
ultraRounded: {
borderRadius: "85px",
},
extremeRounded: {
borderRadius: "105px",
},
radicalRounded: {
borderRadius: "125px",
},
hyperRounded: {
borderRadius: "145px",
},
ultimateRounded: {
borderRadius: "165px",
},
maxRounded: {
borderRadius: "185px",
},
beyondRounded: {
borderRadius: "205px",
},
flexJContent: (type) => {
if (!isValidJContent(type)) {
throw new Error("Invalid value in flexJContent");
}
return {
justifyContent: type,
};
},
flexJContent: (type) => {
if (!isValidJContent(type)) {
throw new Error("Invalid value in flexJContent");
}
return {
justifyContent: type,
};
},
flexAContent: (type) => {
if (!isValidAContent(type)) {
throw new Error("Invalid value in flexAContent");
}
return {
alignItems: type,
};
},
flexAContent: (type) => {
if (!isValidAContent(type)) {
throw new Error("Invalid value in flexAContent");
}
return {
alignItems: type,
};
},
RespFontSize: (min, max) => ({
fontSize: `clamp(${min}px, 4vw, ${max}px)`,
}),
RespLineHeight: (min, max) => ({
lineHeight: `clamp(${min}px, 4vw, ${max}px)`,
}),
respFontWeight: (min, max) => ({
fontWeight: `clamp(${min}, 4vw, ${max})`,
}),
boxShadowLight: {
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
},
RespFontSize: (min, max) => ({
fontSize: `clamp(${min}px, 4vw, ${max}px)`,
}),
RespLineHeight: (min, max) => ({
lineHeight: `clamp(${min}px, 4vw, ${max}px)`,
}),
respFontWeight: (min, max) => ({
fontWeight: `clamp(${min}, 4vw, ${max})`,
}),
boxShadowLight: {
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
},
textPrimary: {
color: "#007bff",
},
textPrimary: {
color: "#007bff",
},
textSecondary: {
color: "#6c757d",
},
textSecondary: {
color: "#6c757d",
},
bgLight: {
backgroundColor: "#f8f9fa",
},
bgLight: {
backgroundColor: "#f8f9fa",
},
roundedCircle: {
borderRadius: "50%",
},
bgPrimary: {
backgroundColor: "#007bff",
color: "#fff",
},
roundedCircle: {
borderRadius: "50%",
},
bgPrimary: {
backgroundColor: "#007bff",
color: "#fff",
},
bgSuccess: {
backgroundColor: "#28a745",
color: "#fff",
},
bgSuccess: {
backgroundColor: "#28a745",
color: "#fff",
},
bgDanger: {
backgroundColor: "#dc3545",
color: "#fff",
},
bgDanger: {
backgroundColor: "#dc3545",
color: "#fff",
},
textUppercase: {
textTransform: "uppercase",
},
textUppercase: {
textTransform: "uppercase",
},
textBold: {
fontWeight: "bold",
},
positionFixed: {
position: "fixed",
},
textBold: {
fontWeight: "bold",
},
positionFixed: {
position: "fixed",
},
fullWidth: {
width: "100%",
},
fullHeight: {
height: "100%",
},
fullWidthHeight: {
width: "100%",
height: "100%",
},
overflowHidden: {
overflow: "hidden",
},
positionAbsolute: {
position: "absolute",
},
positionRelative: {
position: "relative",
},
positionSticky: {
position: "sticky",
},
positionStatic: {
position: "static",
},
transition: (property, duration, timingFunction, delay) => {
return {
transition: `${property} ${duration}s ${timingFunction}s ${delay}s`,
};
},
fullWidth: {
width: "100%",
},
fullHeight: {
height: "100%",
},
fullWidthHeight: {
width: "100%",
height: "100%",
},
overflowHidden: {
overflow: "hidden",
},
positionAbsolute: {
position: "absolute",
},
positionRelative: {
position: "relative",
},
positionSticky: {
position: "sticky",
},
positionStatic: {
position: "static",
},
transition: (property, duration, timingFunction, delay) => {
return {
transition: `${property} ${duration}s ${timingFunction}s ${delay}s`,
};
},
rotate: (degree) => {
return {
transform: `rotate(${degree}deg)`,
};
},
rotate: (degree) => {
return {
transform: `rotate(${degree}deg)`,
};
},
scale: (factor) => {
return {
transform: `scale(${factor})`,
};
},
boxShadowDark: {
boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)",
},
scale: (factor) => {
return {
transform: `scale(${factor})`,
};
},
boxShadowDark: {
boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)",
},
outlineNone: {
outline: "none",
},
outlineNone: {
outline: "none",
},
pointer: {
cursor: "pointer",
},
pointer: {
cursor: "pointer",
},
noPointerEvents: {
pointerEvents: "none",
},
noPointerEvents: {
pointerEvents: "none",
},
overflowAuto: {
overflow: "auto",
},
overflowAuto: {
overflow: "auto",
},
overflowScroll: {
overflow: "scroll",
},
overflowScroll: {
overflow: "scroll",
},
overflowVisible: {
overflow: "visible",
},
overflowVisible: {
overflow: "visible",
},
overflowXHidden: {
overflowX: "hidden",
},
overflowXHidden: {
overflowX: "hidden",
},
overflowYHidden: {
overflowY: "hidden",
},
overflowYHidden: {
overflowY: "hidden",
},
gradientBg: (startColor, endColor) => {
return {
background: `linear-gradient(${startColor}, ${endColor})`,
};
},
gradientBg: (startColor, endColor) => {
return {
background: `linear-gradient(${startColor}, ${endColor})`,
};
},
bgImage: (url, size, position, repeat) => {
const { x, y } = position;
return {
background: `url(${url}) ${size}px ${x}px ${y}px ${
repeat ? "repeat" : "no-repeat"
}`,
};
},
bgImage: (url, size, position, repeat) => {
const { x, y } = position;
return {
background: `url(${url}) ${size}px ${x}px ${y}px ${
repeat ? "repeat" : "no-repeat"
}`,
};
},
flexColumn: {
display: "flex",
flexDirection: "column",
},
flexColumn: {
display: "flex",
flexDirection: "column",
},
flexRow: {
display: "flex",
flexDirection: "row",
},
flexRow: {
display: "flex",
flexDirection: "row",
},
flexWrap: {
flexWrap: "wrap",
},
flexWrap: {
flexWrap: "wrap",
},
flexNoWrap: {
flexWrap: "nowrap",
},
flexNoWrap: {
flexWrap: "nowrap",
},
flexGrow: (value) => {
return {
flexGrow: value,
};
},
flexGrow: (value) => {
return {
flexGrow: value,
};
},
flexShrink: (value) => {
return {
flexShrink: value,
};
},
flexShrink: (value) => {
return {
flexShrink: value,
};
},
flexBasisEm: (value) => {
return {
flexBasis: `${value}em`,
};
},
flexBasisPerc: (value) => {
return {
flexBasis: `${value}%`,
};
},
flexBasisPx: (value) => {
return {
flexBasis: `${value}px`,
};
},
flexBasisAuto: {
flexBasis: "auto",
},
flexBasisMaxC: {
flexBasis: "max-content",
},
flexBasisMinC: {
flexBasis: "min-content",
},
flexBasisFitC: {
flexBasis: "fit-content",
},
flexBasisC: {
flexBasis: "content",
},
flexCenter: {
display: "flex",
justifyContent: "center",
alignItems: "center",
},
flexBasisEm: (value) => {
return {
flexBasis: `${value}em`,
};
},
flexBasisPerc: (value) => {
return {
flexBasis: `${value}%`,
};
},
flexBasisPx: (value) => {
return {
flexBasis: `${value}px`,
};
},
flexBasisAuto: {
flexBasis: "auto",
},
flexBasisMaxC: {
flexBasis: "max-content",
},
flexBasisMinC: {
flexBasis: "min-content",
},
flexBasisFitC: {
flexBasis: "fit-content",
},
flexBasisC: {
flexBasis: "content",
},
flexCenter: {
display: "flex",
justifyContent: "center",
alignItems: "center",
},
letterSpacing: (value) => {
return {
letterSpacing: `${value}px`,
};
},
letterSpacing: (value) => {
return {
letterSpacing: `${value}px`,
};
},
wordSpacing: (value) => {
return {
wordSpacing: `${value}px`,
};
},
wordSpacing: (value) => {
return {
wordSpacing: `${value}px`,
};
},
textAlignJustify: {
textAlign: "justify",
},
textAlignJustify: {
textAlign: "justify",
},
overflowEllipsis: {
overflow: "hidden",
whiteSpace: "nowrap",
textOverflow: "ellipsis",
},
overflowEllipsis: {
overflow: "hidden",
whiteSpace: "nowrap",
textOverflow: "ellipsis",
},
cursorNotAllowed: {
cursor: "not-allowed",
},
cursorNotAllowed: {
cursor: "not-allowed",
},
cursorGrab: {
cursor: "grab",
},
cursorGrab: {
cursor: "grab",
},
cursorGrabbing: {
cursor: "grabbing",
},
cursorGrabbing: {
cursor: "grabbing",
},
opacity: (value) => {
return {
opacity: value,
};
},
opacity: (value) => {
return {
opacity: value,
};
},
filterBlur: (value) => {
return {
filter: `blur(${value}px)`,
};
},
filterBlur: (value) => {
return {
filter: `blur(${value}px)`,
};
},
filterBrightness: (value) => {
return {
filter: `brightness(${value}%)`,
};
},
filterBrightness: (value) => {
return {
filter: `brightness(${value}%)`,
};
},
filterContrast: (value) => {
return {
filter: `contrast(${value}%)`,
};
},
filterContrast: (value) => {
return {
filter: `contrast(${value}%)`,
};
},
filterGrayscale: (value) => {
return {
filter: `grayscale(${value}%)`,
};
},
filterGrayscale: (value) => {
return {
filter: `grayscale(${value}%)`,
};
},
filterHueRotate: (value) => {
return {
filter: `hue-rotate(${value}deg)`,
};
},
filterHueRotate: (value) => {
return {
filter: `hue-rotate(${value}deg)`,
};
},
filterInvert: (value) => {
return {
filter: `invert(${value}%)`,
};
},
filterInvert: (value) => {
return {
filter: `invert(${value}%)`,
};
},
filterOpacity: (value) => {
return {
filter: `opacity(${value}%)`,
};
},
filterOpacity: (value) => {
return {
filter: `opacity(${value}%)`,
};
},
filterSaturate: (value) => {
return {
filter: `saturate(${value}%)`,
};
},
filterSaturate: (value) => {
return {
filter: `saturate(${value}%)`,
};
},
filterSepia: (value) => {
return {
filter: `sepia(${value}%)`,
};
},
bgPrimaryHover: () => {
const { ref, isHovered } = useHover();
filterSepia: (value) => {
return {
filter: `sepia(${value}%)`,
};
},
bgPrimaryHover: () => {
const { ref, isHovered } = useHover();
return {
stylePrimaryHover: isHovered
? {
backgroundColor: "#0056b3",
color: "#fff",
}
: {},
refPrimaryHover: ref,
};
},
return {
stylePrimaryHover: isHovered
? {
backgroundColor: "#0056b3",
color: "#fff",
}
: {},
refPrimaryHover: ref,
};
},
bgSuccessHover: () => {
const { ref, isHovered } = useHover();
bgSuccessHover: () => {
const { ref, isHovered } = useHover();
return {
styleSuccessHover: isHovered
? {
backgroundColor: "#218838",
color: "#fff",
}
: {},
refSuccessHover: ref,
};
},
bgDangerHover: () => {
const { ref, isHovered } = useHover();
return {
styleSuccessHover: isHovered
? {
backgroundColor: "#218838",
color: "#fff",
}
: {},
refSuccessHover: ref,
};
},
bgDangerHover: () => {
const { ref, isHovered } = useHover();
return {
styleDangerHover: isHovered
? {
backgroundColor: "#d32f2f",
color: "#fff",
}
: {},
refDangerHover: ref,
};
},
bgWarningHover: () => {
const { ref, isHovered } = useHover();
return {
styleDangerHover: isHovered
? {
backgroundColor: "#d32f2f",
color: "#fff",
}
: {},
refDangerHover: ref,
};
},
bgWarningHover: () => {
const { ref, isHovered } = useHover();
return {
styleWarningHover: isHovered
? {
backgroundColor: "#f0ad4e",
color: "#fff",
}
: {},
refWarningHover: ref,
};
},
bgInfoHover: () => {
const { ref, isHovered } = useHover();
return {
styleWarningHover: isHovered
? {
backgroundColor: "#f0ad4e",
color: "#fff",
}
: {},
refWarningHover: ref,
};
},
bgInfoHover: () => {
const { ref, isHovered } = useHover();
return {
styleInfoHover: isHovered
? {
backgroundColor: "#17a2b8",
color: "#fff",
}
: {},
refInfoHover: ref,
};
},
bgSecondaryHover: () => {
const { ref, isHovered } = useHover();
return {
styleInfoHover: isHovered
? {
backgroundColor: "#17a2b8",
color: "#fff",
}
: {},
refInfoHover: ref,
};
},
bgSecondaryHover: () => {
const { ref, isHovered } = useHover();
return {
styleSecondaryHover: isHovered
? {
backgroundColor: "#6c757d",
color: "#fff",
}
: {},
refSecondaryHover: ref,
};
},
bgLightHover: () => {
const { ref, isHovered } = useHover();
return {
styleSecondaryHover: isHovered
? {
backgroundColor: "#6c757d",
color: "#fff",
}
: {},
refSecondaryHover: ref,
};
},
bgLightHover: () => {
const { ref, isHovered } = useHover();
return {
styleLightHover: isHovered
? {
backgroundColor: "#f8f9fa",
color: "#fff",
}
: {},
refLightHover: ref,
};
},
bgDarkHover: () => {
const { ref, isHovered } = useHover();
return {
styleLightHover: isHovered
? {
backgroundColor: "#f8f9fa",
color: "#fff",
}
: {},
refLightHover: ref,
};
},
bgDarkHover: () => {
const { ref, isHovered } = useHover();
return {
styleDarkHover: isHovered
? {
backgroundColor: "#343a40",
color: "#fff",
}
: {},
refDarkHover: ref,
};
},
bgWhiteHover: () => {
const { ref, isHovered } = useHover();
return {
styleDarkHover: isHovered
? {
backgroundColor: "#343a40",
color: "#fff",
}
: {},
refDarkHover: ref,
};
},
bgWhiteHover: () => {
const { ref, isHovered } = useHover();
return {
styleWhiteHover: isHovered
? {
backgroundColor: "#fff",
color: "#000",
}
: {},
refWhiteHover: ref,
};
},
bgTransparentHover: () => {
const { ref, isHovered } = useHover();
return {
styleWhiteHover: isHovered
? {
backgroundColor: "#fff",
color: "#000",
}
: {},
refWhiteHover: ref,
};
},
bgTransparentHover: () => {
const { ref, isHovered } = useHover();
return {
styleTransparentHover: isHovered
? {
backgroundColor: "transparent",
color: "#000",
}
: {},
refTransparentHover: ref,
};
},
bgPrimaryActive: () => {
const { ref, isActive } = useActive();
return {
styleTransparentHover: isHovered
? {
backgroundColor: "transparent",
color: "#000",
}
: {},
refTransparentHover: ref,
};
},
bgPrimaryActive: () => {
const { ref, isActive } = useActive();
return {
stylePrimaryActive: isActive
? {
backgroundColor: "#0056b3",
color: "#fff",
}
: {},
refPrimaryActive: ref,
};
},
bgSuccessActive: () => {
const { ref, isActive } = useActive();
return {
stylePrimaryActive: isActive
? {
backgroundColor: "#0056b3",
color: "#fff",
}
: {},
refPrimaryActive: ref,
};
},
bgSuccessActive: () => {
const { ref, isActive } = useActive();
return {
styleSuccessActive: isActive
? {
backgroundColor: "#218838",
color: "#fff",
}
: {},
refSuccessActive: ref,
};
},
bgDangerActive: () => {
const { ref, isActive } = useActive();
return {
styleSuccessActive: isActive
? {
backgroundColor: "#218838",
color: "#fff",
}
: {},
refSuccessActive: ref,
};
},
bgDangerActive: () => {
const { ref, isActive } = useActive();
return {
styleDangerActive: isActive
? {
backgroundColor: "#d32f2f",
color: "#fff",
}
: {},
refDangerActive: ref,
};
},
bgWarningActive: () => {
const { ref, isActive } = useActive();
return {
styleDangerActive: isActive
? {
backgroundColor: "#d32f2f",
color: "#fff",
}
: {},
refDangerActive: ref,
};
},
bgWarningActive: () => {
const { ref, isActive } = useActive();
return {
styleWarningActive: isActive
? {
backgroundColor: "#f0ad4e",
color: "#fff",
}
: {},
refWarningActive: ref,
};
},
bgInfoActive: () => {
const { ref, isActive } = useActive();
return {
styleWarningActive: isActive
? {
backgroundColor: "#f0ad4e",
color: "#fff",
}
: {},
refWarningActive: ref,
};
},
bgInfoActive: () => {
const { ref, isActive } = useActive();
return {
styleInfoActive: isActive
? {
backgroundColor: "#17a2b8",
color: "#fff",
}
: {},
refInfoActive: ref,
};
},
return {
styleInfoActive: isActive
? {
backgroundColor: "#17a2b8",
color: "#fff",
}
: {},
refInfoActive: ref,
};
},
bgSecondaryActive: () => {
const { ref, isActive } = useActive();
bgSecondaryActive: () => {
const { ref, isActive } = useActive();
return {
styleSecondaryActive: isActive
? {
backgroundColor: "#6c757d",
color: "#fff",
}
: {},
refSecondaryActive: ref,
};
},
bgLightActive: () => {
const { ref, isActive } = useActive();
return {
styleSecondaryActive: isActive
? {
backgroundColor: "#6c757d",
color: "#fff",
}
: {},
refSecondaryActive: ref,
};
},
bgLightActive: () => {
const { ref, isActive } = useActive();
return {
styleLightActive: isActive
? {
backgroundColor: "#f8f9fa",
color: "#fff",
}
: {},
refLightActive: ref,
};
},
return {
styleLightActive: isActive
? {
backgroundColor: "#f8f9fa",
color: "#fff",
}
: {},
refLightActive: ref,
};
},
bgDarkActive: () => {
const { ref, isActive } = useActive();
return {
styleDarkActive: isActive
? {
backgroundColor: "#343a40",
color: "#fff",
}
: {},
refDarkActive: ref,
};
},
persWidth: (value) => {
return {
width: `${value}%`,
};
},
persWH: (value) => {
return {
width: `${value}%`,
height: `${value}%`,
};
},
persHeight: (value) => {
return {
height: `${value}%`,
};
},
pxWidth: (value) => {
return {
width: `${value}px`,
};
},
pxHeight: (value) => {
return {
height: `${value}px`,
};
},
pxWH: (value) => {
return {
width: `${value}px`,
height: `${value}px`,
};
},
dvhHeight: (value) => {
return {
height: `${value}dvh`,
};
},
dvwWidth: (value) => {
return {
width: `${value}dvw`,
};
},
dvWH: (value) => {
return {
width: `${value}dvw`,
height: `${value}dvh`,
};
},
fitContentW: {
width: "fit-content",
},
fitContentH: {
height: "fit-content",
},
fitContentHW: {
width: "fit-content",
height: "fit-content",
},
maxWidthPx: (value) => {
return {
width: "100%",
maxWidth: `${value}px`,
};
},
maxHeightPx: (value) => {
return {
width: "100%",
maxHeight: `${value}px`,
};
},
maxWHPx: (value) => {
return {
width: "100%",
maxWidth: `${value}px`,
maxHeight: `${value}px`,
};
},
minWidthPx: (value) => {
return {
width: "100%",
minWidth: `${value}px`,
};
},
minHeightPx: (value) => {
return {
width: "100%",
minHeight: `${value}px`,
};
},
minWHPx: (value) => {
return {
width: "100%",
minWidth: `${value}px`,
minHeight: `${value}px`,
};
},
minHeightPers: (value) => {
return {
width: "100%",
minWidth: `${value}%`,
};
},
minWidthPers: (value) => {
return {
width: "100%",
minHeight: `${value}%`,
};
},
minWHPers: (value) => {
return {
width: "100%",
minWidth: `${value}%`,
minHeight: `${value}%`,
};
},
maxWidthPers: (value) => {
return {
width: "100%",
maxWidth: `${value}%`,
};
},
maxHeightPers: (value) => {
return {
width: "100%",
maxHeight: `${value}%`,
};
},
maxWHPers: (value) => {
return {
width: "100%",
maxWidth: `${value}%`,
maxHeight: `${value}%`,
};
},
gridSystem: (numColumns = 1, gapValue) =>
new GridSystemOop(numColumns, gapValue),
bgDarkActive: () => {
const { ref, isActive } = useActive();
return {
styleDarkActive: isActive
? {
backgroundColor: "#343a40",
color: "#fff",
}
: {},
refDarkActive: ref,
};
},
persWidth: (value) => {
return {
width: `${value}%`,
};
},
persWH: (value) => {
return {
width: `${value}%`,
height: `${value}%`,
};
},
persHeight: (value) => {
return {
height: `${value}%`,
};
},
pxWidth: (value) => {
return {
width: `${value}px`,
};
},
pxHeight: (value) => {
return {
height: `${value}px`,
};
},
pxWH: (value) => {
return {
width: `${value}px`,
height: `${value}px`,
};
},
dvhHeight: (value) => {
return {
height: `${value}dvh`,
};
},
dvwWidth: (value) => {
return {
width: `${value}dvw`,
};
},
dvWH: (value) => {
return {
width: `${value}dvw`,
height: `${value}dvh`,
};
},
fitContentW: {
width: "fit-content",
},
fitContentH: {
height: "fit-content",
},
fitContentHW: {
width: "fit-content",
height: "fit-content",
},
maxWidthPx: (value) => {
return {
width: "100%",
maxWidth: `${value}px`,
};
},
maxHeightPx: (value) => {
return {
width: "100%",
maxHeight: `${value}px`,
};
},
maxWHPx: (value) => {
return {
width: "100%",
maxWidth: `${value}px`,
maxHeight: `${value}px`,
};
},
minWidthPx: (value) => {
return {
width: "100%",
minWidth: `${value}px`,
};
},
minHeightPx: (value) => {
return {
width: "100%",
minHeight: `${value}px`,
};
},
minWHPx: (value) => {
return {
width: "100%",
minWidth: `${value}px`,
minHeight: `${value}px`,
};
},
minHeightPers: (value) => {
return {
width: "100%",
minWidth: `${value}%`,
};
},
minWidthPers: (value) => {
return {
width: "100%",
minHeight: `${value}%`,
};
},
minWHPers: (value) => {
return {
width: "100%",
minWidth: `${value}%`,
minHeight: `${value}%`,
};
},
maxWidthPers: (value) => {
return {
width: "100%",
maxWidth: `${value}%`,
};
},
maxHeightPers: (value) => {
return {
width: "100%",
maxHeight: `${value}%`,
};
},
maxWHPers: (value) => {
return {
width: "100%",
maxWidth: `${value}%`,
maxHeight: `${value}%`,
};
},
gradientText: (angle, colors) => ({
backgroundImage: `linear-gradient(${angle}, ${colors})`,
WebkitBackgroundClip: "text",
color: "transparent",
}),
flexibleGap: (minSpacing, maxSpacing) => ({
gap: `clamp(${minSpacing}px, 2vw, ${maxSpacing}px)`,
}),
neonText: (color) => ({
textShadow: `0 0 10px ${color}, 0 0 20px ${color}, 0 0 30px ${color}`,
}),
roundedCard: (bgColor, borderRadius) => ({
backgroundColor: bgColor,
borderRadius,
padding: "20px",
boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
}),
stickyHeader: (scrollThreshold) => {
const stickyHeaderRef = useRef();
useEffect(() => {
const handleScroll = () => {
const isSticky = window.scrollY > scrollThreshold;
stickyHeaderRef.current.style.position = isSticky ? "fixed" : "static";
};
gradientText: (angle, colors) => ({
backgroundImage: `linear-gradient(${angle}, ${colors})`,
WebkitBackgroundClip: "text",
color: "transparent",
}),
flexibleGap: (minSpacing, maxSpacing) => ({
gap: `clamp(${minSpacing}px, 2vw, ${maxSpacing}px)`,
}),
neonText: (color) => ({
textShadow: `0 0 10px ${color}, 0 0 20px ${color}, 0 0 30px ${color}`,
}),
roundedCard: (bgColor, borderRadius) => ({
backgroundColor: bgColor,
borderRadius,
padding: "20px",
boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
}),
stickyHeader: (scrollThreshold) => {
const stickyHeaderRef = useRef();
useEffect(() => {
const handleScroll = () => {
const isSticky = window.scrollY > scrollThreshold;
stickyHeaderRef.current.style.position = isSticky ? "fixed" : "static";
};
window.addEventListener("scroll", handleScroll);
return () => {
window.removeEventListener("scroll", handleScroll);
};
}, [scrollThreshold]);
return stickyHeaderRef;
},
gridTemplateAreas: (areas) => ({
gridTemplateAreas: areas.map((areas) => `"${areas}"`).join(" "),
}),
animation: (
name, // Required for the animation name
options = {} // Optional object for overriding defaults
) => {
// Define default values for animation properties:
const defaults = {
duration: "1s",
timingFunction: "ease",
delay: 0,
iterationCount: 1,
direction: "normal",
fillMode: "none",
playState: "running",
};
const validatedOptions = { ...defaults, ...options };
window.addEventListener("scroll", handleScroll);
return () => {
window.removeEventListener("scroll", handleScroll);
};
}, [scrollThreshold]);
return stickyHeaderRef;
},
gridTemplateAreas: (areas) => ({
gridTemplateAreas: areas.map((areas) => `"${areas}"`).join(" "),
}),
animation: (
name, // Required for the animation name
options = {} // Optional object for overriding defaults
) => {
// Define default values for animation properties:
const defaults = {
duration: "1s",
timingFunction: "ease",
delay: 0,
iterationCount: 1,
direction: "normal",
fillMode: "none",
playState: "running",
};
const validatedOptions = { ...defaults, ...options };
// Validate numeric properties
const validateNumber = (prop, value) => {
if (
typeof value !== "number" ||
isNaN(value) ||
(prop === "delay" && (value < 0 || value > 60))
) {
console.warn(
`Invalid ${prop} value: "${value}". Using default "${defaults[prop]}".`
);
return defaults[prop];
}
return value;
};
// Validate numeric properties
const validateNumber = (prop, value) => {
if (
typeof value !== "number" ||
isNaN(value) ||
(prop === "delay" && (value < 0 || value > 60))
) {
console.warn(
`Invalid ${prop} value: "${value}". Using default "${defaults[prop]}".`
);
return defaults[prop];
}
return value;
};
validatedOptions.duration = validateNumber(
"duration",
validatedOptions.duration
);
validatedOptions.delay = validateNumber("delay", validatedOptions.delay);
validatedOptions.iterationCount = validateNumber(
"iterationCount",
Math.max(1, validatedOptions.iterationCount)
); // Ensure iterationCount is at least 1
validatedOptions.duration = validateNumber(
"duration",
validatedOptions.duration
);
validatedOptions.delay = validateNumber("delay", validatedOptions.delay);
validatedOptions.iterationCount = validateNumber(
"iterationCount",
Math.max(1, validatedOptions.iterationCount)
); // Ensure iterationCount is at least 1
// Validate string properties with allowed values
const validateString = (prop, value, allowedValues) => {
if (typeof value !== "string" || !allowedValues.includes(value.trim())) {
console.warn(
`Invalid ${prop}: "${value}". Using default "${defaults[prop]}".`
);
return defaults[prop];
}
return value.trim();
};
// Validate string properties with allowed values
const validateString = (prop, value, allowedValues) => {
if (typeof value !== "string" || !allowedValues.includes(value.trim())) {
console.warn(
`Invalid ${prop}: "${value}". Using default "${defaults[prop]}".`
);
return defaults[prop];
}
return value.trim();
};
validatedOptions.timingFunction = validateString(
"timingFunction",
validatedOptions.timingFunction,
["linear", "ease", "ease-in", "ease-out", "ease-in-out"]
);
validatedOptions.direction = validateString(
"direction",
validatedOptions.direction,
["normal", "reverse", "alternate", "alternate-reverse"]
);
validatedOptions.fillMode = validateString(
"fillMode",
validatedOptions.fillMode,
["none", "forwards", "backwards", "both"]
);
validatedOptions.playState = validateString(
"playState",
validatedOptions.playState,
["running", "paused"]
);
validatedOptions.timingFunction = validateString(
"timingFunction",
validatedOptions.timingFunction,
["linear", "ease", "ease-in", "ease-out", "ease-in-out"]
);
validatedOptions.direction = validateString(
"direction",
validatedOptions.direction,
["normal", "reverse", "alternate", "alternate-reverse"]
);
validatedOptions.fillMode = validateString(
"fillMode",
validatedOptions.fillMode,
["none", "forwards", "backwards", "both"]
);
validatedOptions.playState = validateString(
"playState",
validatedOptions.playState,
["running", "paused"]
);
// Build the animation string
const animation = `${name} ${validatedOptions.duration} ${validatedOptions.timingFunction} ${validatedOptions.delay}s ${validatedOptions.iterationCount} ${validatedOptions.direction} ${validatedOptions.fillMode} ${validatedOptions.playState}`;
// Build the animation string
const animation = `${name} ${validatedOptions.duration} ${validatedOptions.timingFunction} ${validatedOptions.delay}s ${validatedOptions.iterationCount} ${validatedOptions.direction} ${validatedOptions.fillMode} ${validatedOptions.playState}`;
return { animation };
},
return { animation };
},
};
export default styles;
+0
-0
README.md

@@ -0,0 +0,0 @@ <h1 align="center">FHF-REACT</h1>

+24
-12
tools/cssTools.css

@@ -1,20 +0,32 @@

::root {
--typing-color: black;
:root {
--typing-color: black;
--typing-cursor-color: black;
--typing-blink-speed: 1.2s;
}
.typing::after {
content: "|";
animation: blink 1.2s infinite;
color: var(--typing-color);
content: "|";
animation: blink var(--typing-blink-speed) infinite;
color: var(--typing-cursor-color);
}
@keyframes blink {
50% {
opacity: 0;
}
50% {
opacity: 0;
}
}
.clipped-text {
background-size: cover;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
background-size: cover;
background-clip: text;
-webkit-background-clip: text;
-moz-background-clip: text;
-ms-background-clip: text;
color: transparent;
/* Fallback for unsupported browsers */
@supports not (background-clip: text) {
color: inherit;
background: none;
}
}
+68
-19
tools/GridSystemOop.js

@@ -0,27 +1,76 @@

/**
* Represents a simple grid system with configurable columns and gaps.
*/
class GridSystemOop {
constructor(numColumns = 1, gapValue) {
this.container = {
display: "grid",
gridTemplateColumns: `repeat(${numColumns}, 1fr)`,
gap: gapValue ? `${gapValue}px` : "0px",
};
/**
* @param {number} [numColumns=1] - The number of columns in the grid.
* @param {number} [gapValue=0] - The gap size between columns in pixels.
*/
constructor(numColumns = 1, gapValue = 0) {
if (numColumns <= 0 || !Number.isInteger(numColumns)) {
console.warn("Invalid numColumns. Using default value (1).");
numColumns = 1;
}
this.column = this.column.bind(this);
}
if (gapValue < 0 || typeof gapValue !== "number") {
console.warn("Invalid gapValue. Using default value (0).");
gapValue = 0;
}
column(span, offset = 0) {
if (span < 1 || span > 12 || offset < 0 || offset > 11) {
throw Error("Invalid column span or offset values");
}
/**
* @type {Object}
* @property {string} display - The display type (always "grid").
* @property {string} gridTemplateColumns - The grid column template.
* @property {string} gap - The gap between columns in pixels.
*/
this.container = {
display: "grid",
gridTemplateColumns: `repeat(${numColumns}, 1fr)`,
gap: `${gapValue}px`,
};
this.container.column = {
gridColumn: `span ${span} / span ${span}`,
marginLeft:
offset > 0 ? `calc(${offset} * 1fr + ${offset * 16}px)` : undefined,
};
this.column = this.column.bind(this);
}
return this;
}
/**
* Generates styles for a column within the grid.
* @param {number} [span=1] - The number of columns the element should span.
* @param {number} [offset=0] - The number of columns to offset.
* @returns {Object} The styles for the column.
*/
column(span = 1, offset = 0) {
if (span < 1 || span > 12 || !Number.isInteger(span)) {
console.warn("Invalid span. Using default value (1).");
span = 1;
}
if (offset < 0 || offset > 11 || !Number.isInteger(offset)) {
console.warn("Invalid offset. Using default value (0).");
offset = 0;
}
const columnStyles = {
gridColumn: `span ${span} / span ${span}`,
};
if (offset > 0) {
columnStyles.marginLeft = `calc(${offset} * 1fr + ${offset * 16}px)`;
}
return columnStyles;
}
/**
* Updates the grid template columns.
* @param {string} template - The new grid template configuration.
*/
setGridTemplate(template) {
if (typeof template !== "string") {
console.warn("Invalid grid template. Using default configuration.");
return;
}
this.container.gridTemplateColumns = template;
}
}
export default GridSystemOop;
+5
-13
tools/validation.js

@@ -0,1 +1,3 @@

import tinycolor from "tinycolor2";
/**

@@ -6,12 +8,3 @@ * Checks if a given color string is a valid color.

*/
const isValidColor = (color) => {
// Regular expression to check for a valid color in various formats
if (color === "" || color === undefined) {
return false;
}
const colorRegex =
/^(#([0-9a-fA-F]{3}){1,2}|[a-zA-Z]+|rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)|rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*(0(\.\d+)?|1(\.0+)?)\)|hsl\(\s*\d+\s*,\s*\d+%?\s*,\s*\d+%?\s*\)|hsla\(\s*\d+\s*,\s*\d+%?\s*,\s*\d+%?\s*,\s*(0(\.\d+)?|1(\.0+)?)\))$/;
return colorRegex.test(color);
};
const isValidColor = (color) => tinycolor(color).isValid();
/**

@@ -22,5 +15,4 @@ * Checks if a given size is a valid size.

*/
const isValidSize = (size) => {
return typeof size === "number" && size >= 0;
};
const isValidSize = (size) =>
typeof size === "number" && size >= 0 && isFinite(size) && !isNaN(size);

@@ -27,0 +19,0 @@ /**

index.d.ts

Sorry, the diff of this file is too big to display