denwa-web-shared
Version:
A shared library for Next.js App Router projects containing reusable components, hooks, schemas, and utilities.
213 lines (212 loc) • 6.08 kB
JavaScript
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
let react = require("react");
let react_use = require("react-use");
let motion_react = require("motion/react");
let clsx = require("clsx");
let tailwind_merge = require("tailwind-merge");
let react_jsx_runtime = require("react/jsx-runtime");
//#region src/client/hooks/use-disable-scroll.ts
var useDisableScroll = (isDisableScroll) => {
(0, react.useEffect)(() => {
if (!isDisableScroll) return;
const scrollPosition = window.scrollY;
return () => {
window.scrollTo(0, scrollPosition);
};
}, []);
};
//#endregion
//#region src/client/hooks/use-is-client.ts
var useIsClient = () => {
const [isClient, setIsClient] = (0, react.useState)(false);
(0, react.useEffect)(() => {
setIsClient(true);
}, []);
return isClient;
};
//#endregion
//#region src/server/constants/index.ts
var THEME = {
VIEW_PORT: {
EXTRA_SMALL: 280,
SMALL: 320,
SMALL_MOBILE: 380,
MOBILE: 450,
MEDIUM: 500,
EXTRA_MEDIUM: 600,
TABLET: 768,
LAPTOP: 1024,
LAPTOP_BIG: 1200,
BIG: 1440,
VERY_BIG: 1920
},
OFFSET: {
1: 8,
2: 16,
3: 24,
4: 32,
5: 40,
6: 48,
7: 56,
8: 64
}
};
//#endregion
//#region src/client/hooks/use-view-port.ts
var useLaptopBigViewPort = () => {
return {
isLaptopBigMinWidth: (0, react_use.useMedia)(`(min-width: ${THEME.VIEW_PORT.LAPTOP_BIG}px)`),
isLaptopBigMaxWidth: (0, react_use.useMedia)(`(max-width: ${THEME.VIEW_PORT.LAPTOP_BIG}px)`)
};
};
var useLaptopViewPort = () => {
return {
isLaptopMinWidth: (0, react_use.useMedia)(`(min-width: ${THEME.VIEW_PORT.LAPTOP}px)`),
isLaptopMaxWidth: (0, react_use.useMedia)(`(max-width: ${THEME.VIEW_PORT.LAPTOP}px)`)
};
};
var useTabletViewPort = () => {
return {
isTabletMinWidth: (0, react_use.useMedia)(`(min-width: ${THEME.VIEW_PORT.TABLET}px)`),
isTabletMaxWidth: (0, react_use.useMedia)(`(max-width: ${THEME.VIEW_PORT.TABLET}px)`)
};
};
var useExtraMediumViewPort = () => {
return {
isExtraMediumMinWidth: (0, react_use.useMedia)(`(min-width: ${THEME.VIEW_PORT.EXTRA_MEDIUM}px)`),
isExtraMediumMaxWidth: (0, react_use.useMedia)(`(max-width: ${THEME.VIEW_PORT.EXTRA_MEDIUM}px)`)
};
};
var useMobileViewPort = () => {
return {
isMobileMinWidth: (0, react_use.useMedia)(`(min-width: ${THEME.VIEW_PORT.MOBILE}px)`),
isMobileMaxWidth: (0, react_use.useMedia)(`(max-width: ${THEME.VIEW_PORT.MOBILE}px)`)
};
};
var useSmallViewPort = () => {
return {
isSmallMinWidth: (0, react_use.useMedia)(`(min-width: ${THEME.VIEW_PORT.SMALL}px)`),
isSmallMaxWidth: (0, react_use.useMedia)(`(max-width: ${THEME.VIEW_PORT.SMALL}px)`)
};
};
//#endregion
//#region src/client/hooks/use-appear-animation.ts
var useAppearAnimation = ({ once = true, margin = "-100px", delay = .1, direction = "up", animationDistance = 50, duration = .8, ease = "easeOut" } = {}) => {
const ref = (0, react.useRef)(null);
const isInView = (0, motion_react.useInView)(ref, {
once,
margin
});
const getInitialState = () => {
switch (direction) {
case "up": return {
opacity: 0,
y: animationDistance
};
case "down": return {
opacity: 0,
y: -animationDistance
};
case "left": return {
opacity: 0,
x: animationDistance
};
case "right": return {
opacity: 0,
x: -animationDistance
};
case "scale": return {
opacity: 0,
scale: .8
};
case "fade": return { opacity: 0 };
default: return {
opacity: 0,
y: animationDistance
};
}
};
const getAnimateState = () => {
switch (direction) {
case "up":
case "down": return {
opacity: 1,
y: 0
};
case "left":
case "right": return {
opacity: 1,
x: 0
};
case "scale": return {
opacity: 1,
scale: 1
};
case "fade": return { opacity: 1 };
default: return {
opacity: 1,
y: 0
};
}
};
return {
ref,
isInView,
motionProps: {
initial: getInitialState(),
animate: isInView ? getAnimateState() : void 0,
transition: {
duration,
ease,
delay
}
}
};
};
//#endregion
//#region src/server/lib/css.ts
function cn(...inputs) {
return (0, tailwind_merge.twMerge)((0, clsx.clsx)(inputs));
}
//#endregion
//#region src/client/ui/header-wrapper.tsx
var HeaderWrapper = ({ children, className, hideClassName, scrollPosition = 100, hideBackgroundOnScroll = true }) => {
const { y } = (0, react_use.useWindowScroll)();
const isClient = useIsClient();
const isHiddenBackground = hideBackgroundOnScroll && y > scrollPosition && isClient;
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
className: cn("fixed z-30 w-full transition bg-background", className, { "bg-transparent": isHiddenBackground }, { hideClassName: isHiddenBackground && hideClassName }),
children
});
};
//#endregion
//#region src/client/ui/infinity-list.tsx
var InfinityList = ({ children, intersectionElementClassName, isNext, intersectionElement, onIntersection }) => {
const intersectionRef = (0, react.useRef)({});
const intersection = (0, react_use.useIntersection)(intersectionRef, {
root: null,
rootMargin: "0px",
threshold: 1
});
(0, react.useEffect)(() => {
if (!intersection?.isIntersecting) return;
onIntersection();
}, [intersection?.isIntersecting]);
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: cn(intersectionElementClassName, { hidden: !isNext }),
ref: intersectionRef,
children: intersectionElement()
})] });
};
//#endregion
exports.HeaderWrapper = HeaderWrapper;
exports.InfinityList = InfinityList;
exports.useAppearAnimation = useAppearAnimation;
exports.useDisableScroll = useDisableScroll;
exports.useExtraMediumViewPort = useExtraMediumViewPort;
exports.useIsClient = useIsClient;
exports.useLaptopBigViewPort = useLaptopBigViewPort;
exports.useLaptopViewPort = useLaptopViewPort;
exports.useMobileViewPort = useMobileViewPort;
exports.useSmallViewPort = useSmallViewPort;
exports.useTabletViewPort = useTabletViewPort;