@kloudlite/design-system
Version:
A design system for building ambitious products.
623 lines (616 loc) • 24.8 kB
JavaScript
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// components/molecule/pagination.tsx
var pagination_exports = {};
__export(pagination_exports, {
default: () => pagination_default,
usePagination: () => usePagination
});
module.exports = __toCommonJS(pagination_exports);
var RovingFocusGroup = __toESM(require("@radix-ui/react-roving-focus"), 1);
var import_react4 = require("react");
// components/icons.tsx
var import_react = require("@jengaicons/react");
var import_jsx_runtime = require("react/jsx-runtime");
// components/atoms/button.tsx
var import_framer_motion = require("framer-motion");
var import_react3 = __toESM(require("react"), 1);
// components/utils.tsx
var import_classnames = __toESM(require("classnames"), 1);
var import_react2 = require("react");
var import_uuid = require("uuid");
var cn = (...props) => {
return (0, import_classnames.default)(...props);
};
// components/atoms/button.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var ButtonBase = import_react3.default.forwardRef((props, ref) => {
const {
onClick = () => {
},
to = "",
linkComponent = import_framer_motion.motion.button,
disabled = false,
suffix,
prefix,
block = false,
type = "button",
variant = "primary",
// noRing,
noRounded = false,
noBorder = false,
sharpLeft = false,
sharpRight = false,
selected = false,
iconOnly = false,
className = "",
content,
size = "md",
loading = false,
tabIndex,
toLabel = "to",
target,
iconSize,
...mprops
} = props;
let Component = linkComponent;
let tempToLabel = toLabel;
let extraProps = {};
if (to) {
if (linkComponent === import_framer_motion.motion.button) {
Component = import_framer_motion.motion.a;
tempToLabel = "href";
} else {
Component = linkComponent;
}
}
if (Component === import_framer_motion.motion.button || Component === import_framer_motion.motion.a) {
extraProps = {
initial: { scale: 1 },
whileTap: { scale: 0.99 }
};
}
const noRing = false;
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
Component,
{
...mprops,
...{ [tempToLabel]: to },
disabled,
onClick,
...extraProps,
ref,
type,
tabIndex,
target,
className: cn(
"pulsable kl-flex-nowrap",
{
"kl-w-full": !!block,
"kl-w-fit": !block,
selected
},
{
"kl-pointer-events-none": loading
},
{
"kl-bodyMd-medium": !variant?.includes("plain"),
"kl-bodyMd": variant?.includes("plain")
},
{
"kl-pointer-events-none !kl-text-text-disabled kl-bg-surface-basic-disabled": disabled,
"!kl-border-border-disabled": disabled && ![
"plain",
"primary-plain",
"critical-plain",
"secondary-plain"
].includes(variant)
},
"kl-relative kl-ring-offset-1",
"kl-outline-none",
"kl-flex kl-flex-row kl-gap-lg kl-items-center kl-justify-center",
"disabled:kl-text-text-disabled disabled:kl-bg-surface-basic-disabled",
{
// noRing
"focus-visible:kl-ring-2 focus:kl-ring-border-focus focus:kl-z-10": !noRing
},
{
...!noRounded && {
"kl-rounded-none": sharpLeft && sharpRight,
"kl-rounded-r": sharpLeft && !sharpRight,
"kl-rounded-l": !sharpLeft && sharpRight,
"kl-rounded": !sharpLeft && !sharpRight
}
},
"disabled:kl-pointer-events-none",
{
"kl-border-none": noBorder,
...!noBorder && {
"kl-border-border-default disabled:kl-border-border-disabled": variant === "basic" || variant === "outline" || variant === "secondary-outline",
"kl-border-border-primary disabled:kl-border-border-disabled": variant === "primary" || variant === "primary-outline",
"kl-border-border-secondary disabled:kl-border-border-disabled": variant === "secondary",
"kl-border-border-critical disabled:kl-border-border-disabled": variant === "critical-outline" || variant === "critical",
"kl-border-border-purple": variant === "purple",
"kl-border-border-warning": variant === "warning",
"kl-border-border-tertiary": variant === "tertiary",
"kl-border-none": variant === "plain" || variant === "primary-plain" || variant === "critical-plain" || variant === "secondary-plain",
"kl-border": !(variant === "plain" || variant === "primary-plain" || variant === "critical-plain" || variant === "secondary-plain")
}
},
!disabled ? {
"kl-bg-surface-basic-default hover:kl-bg-surface-basic-hovered active:kl-bg-surface-basic-pressed disabled:kl-bg-surface-basic-default": variant === "basic" && !selected,
"kl-bg-surface-basic-pressed hover:kl-bg-surface-basic-pressed active:kl-bg-surface-basic-pressed disabled:kl-bg-surface-basic-default": variant === "basic" && selected,
"kl-bg-surface-primary-default hover:kl-bg-surface-primary-hovered active:kl-bg-surface-primary-pressed disabled:kl-bg-surface-basic-default": variant === "primary",
"kl-bg-surface-secondary-default hover:kl-bg-surface-secondary-hovered active:kl-bg-surface-secondary-pressed disabled:kl-bg-surface-basic-default": variant === "secondary",
"kl-bg-surface-critical-default hover:kl-bg-surface-critical-hovered active:kl-bg-surface-critical-pressed disabled:kl-bg-surface-basic-default": variant === "critical",
"kl-bg-none hover:kl-bg-surface-critical-subdued active:kl-bg-surface-critical-subdued": variant === "critical-outline",
"kl-bg-none hover:kl-bg-surface-primary-subdued active:kl-bg-surface-primary-subdued": variant === "primary-outline",
"kl-bg-none hover:kl-bg-surface-secondary-subdued active:kl-bg-surface-secondary-subdued": variant === "secondary-outline",
"kl-bg-none hover:kl-bg-surface-basic-hovered active:kl-bg-surface-basic-pressed": variant === "outline",
"kl-bg-surface-basic-pressed kl-shadow-none hover:kl-bg-surface-basic-hovered active:kl-bg-surface-basic-pressed hover:kl-shadow-button": variant === "outline" && selected,
"kl-bg-none kl-shadow-none": (variant === "plain" || variant === "primary-plain" || variant === "secondary-plain" || variant === "critical-plain") && !iconOnly,
"kl-shadow-none active:kl-shadow-button kl-bg-surface-basic-pressed": variant === "plain" && !iconOnly && selected,
"kl-bg-none kl-shadow-none hover:kl-bg-surface-basic-hovered active:kl-bg-surface-basic-pressed active:kl-shadow-button active:kl-shadow-button": variant === "plain" && iconOnly,
"kl-bg-surface-basic-pressed kl-shadow-none hover:kl-bg-surface-basic-hovered active:kl-bg-surface-basic-pressed active:kl-shadow-button": variant === "plain" && iconOnly && selected,
"kl-bg-surface-purple-default hover:kl-bg-surface-purple-hovered active:kl-bg-surface-purple-pressed": variant === "purple",
"kl-bg-surface-tertiary-default hover:kl-bg-surface-tertiary-hovered active:kl-bg-surface-tertiary-pressed": variant === "tertiary",
"kl-bg-surface-warning-default hover:kl-bg-surface-warning-hovered active:kl-bg-surface-warning-pressed": variant === "warning"
} : {},
{
"kl-text-text-default": variant === "basic" || variant === "plain" || variant === "outline",
"kl-text-text-on-primary": variant === "primary" || variant === "critical" || variant === "secondary" || variant === "secondary-outline" || variant === "purple" || variant === "warning",
"kl-text-text-critical": variant === "critical-outline" || variant === "critical-plain",
"kl-text-text-primary": variant === "primary-outline" || variant === "primary-plain",
"kl-text-text-secondary": variant === "secondary-plain",
"kl-text-text-on-secondary": variant === "tertiary"
},
{
"focus:kl-underline": noRing
},
{
"hover:kl-underline": variant === "plain" || variant === "primary-plain" || variant === "critical-plain" || variant === "secondary-plain"
},
{
// icon
...!iconOnly && !(variant === "plain" || variant === "primary-plain" || variant === "critical-plain" || variant === "secondary-plain") && {
"kl-py-md kl-px-lg": size === "sm",
"kl-py-lg kl-px-2xl": size === "md",
"kl-py-xl kl-px-4xl": size === "lg",
"kl-py-2xl kl-px-6xl": size === "xl",
"kl-py-2xl kl-px-9xl": size === "2xl"
}
},
{
...!iconOnly && (variant === "plain" || variant === "primary-plain" || variant === "critical-plain" || variant === "secondary-plain") && {
"kl-px-md kl-py-sm": size === "sm",
"kl-py-sm kl-px-md": size === "md",
"kl-py-md kl-px-lg": size === "lg"
}
},
{
"kl-p-lg !kl-h-[36px] !kl-w-[36px]": iconOnly && (size === "md" || size === "lg"),
"kl-p-md": iconOnly && size === "sm",
"kl-p-sm": iconOnly && size === "xs"
},
className
),
children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_framer_motion.AnimatePresence, { children: loading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_framer_motion.motion.span,
{
initial: { width: 0 },
animate: { width: "auto", paddingRight: 0 },
exit: { width: 0 },
className: cn(
"kl-flex kl-items-center kl-justify-center kl-aspect-square kl-overflow-hidden"
),
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: cn("kl-animate-spin"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react.Spinner, { color: "currentColor", weight: 2, size: 18 }) })
}
) }),
!!prefix && import_react3.default.cloneElement(prefix, {
size: iconSize || (iconOnly && size === "lg" ? 20 : 16),
color: "currentColor"
}),
!iconOnly && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: cn("kl-block kl-truncate"), children: content }),
!!suffix && import_react3.default.cloneElement(suffix, {
size: iconSize || 16,
color: "currentColor"
})
]
}
);
});
var IconButton = import_react3.default.forwardRef(
(props, ref) => {
const { icon, block } = props;
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
ButtonBase,
{
...props,
ref,
iconOnly: true,
content: null,
prefix: icon,
block: !!block
}
);
}
);
var Button = import_react3.default.forwardRef(
(props, ref) => {
const { block } = props;
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ButtonBase, { ...props, iconOnly: false, ref, block: !!block });
}
);
// components/molecule/pagination.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
var usePagination = ({
items,
itemsPerPage
}) => {
const [listItems, setListItems] = (0, import_react4.useState)(items);
const [page, setPage] = (0, import_react4.useState)();
const [pageNumber, setPageNumber] = (0, import_react4.useState)(1);
const [hasNext, setHasNext] = (0, import_react4.useState)(false);
const [hasPrevious, setHasPrevious] = (0, import_react4.useState)(false);
(0, import_react4.useEffect)(() => {
if (listItems.length > 0) {
let tempItems = listItems.slice(
(pageNumber - 1) * itemsPerPage,
pageNumber * itemsPerPage
);
if (tempItems.length === 0) {
tempItems = listItems.slice(
(Math.ceil(listItems.length / itemsPerPage) - 1) * itemsPerPage,
listItems.length
);
setPageNumber((prev) => prev - 1);
}
setPage(tempItems);
} else {
setPageNumber(1);
}
}, [listItems]);
(0, import_react4.useEffect)(() => {
if (pageNumber * itemsPerPage >= listItems.length) {
setHasNext(false);
} else {
setHasNext(true);
}
if (pageNumber * itemsPerPage > itemsPerPage) {
setHasPrevious(true);
} else {
setHasPrevious(false);
}
}, [page]);
const onNext = () => {
if (pageNumber < Math.ceil(listItems.length / itemsPerPage)) {
setPage(
listItems.slice(
pageNumber * itemsPerPage,
(pageNumber + 1) * itemsPerPage
)
);
setPageNumber((prev) => prev + 1);
}
};
const onPrev = () => {
if (pageNumber > 1) {
setPage(
listItems.slice(
(pageNumber - 1 - 1) * itemsPerPage,
(pageNumber - 1) * itemsPerPage
)
);
setPageNumber((prev) => prev - 1);
}
};
const onPageChange = () => {
};
const setPageNumberExt = (extpage) => {
if (extpage <= Math.ceil(listItems.length / itemsPerPage)) {
setPage(
listItems.slice(
(extpage - 1) * itemsPerPage,
extpage * itemsPerPage
)
);
setPageNumber(extpage);
}
};
return {
page: page || [],
pageNumber,
hasNext,
hasPrevious,
onNext,
onPrev,
onPageChange,
setPageNumber: setPageNumberExt,
setItems: setListItems,
items: listItems,
itemsPerPage
};
};
var ITEMS_PER_PAGE = [
1,
5,
10,
15,
20,
25,
30,
35,
40,
45,
50,
55,
60,
65,
70,
75,
80,
85,
90,
95,
100
];
var Pagination = ({
currentPage = 3,
totalItems = 90,
itemsPerPage = 15,
onPageChanged = () => {
},
onItemsPerPageChanged = () => {
},
disabled = false,
itemPerPageDisabled = false,
onClickNext = () => {
},
onClickPrev = () => {
},
isNextDisabled = false,
isPrevDisabled = false,
showNumbers = true,
showItemsPerPage = true
}) => {
const [focusItem, setFocusItem] = (0, import_react4.useState)(null);
const [focusCallback, setFocusCallback] = (0, import_react4.useState)(false);
const [itemsPerPageValue, setItemsPerPageValue] = (0, import_react4.useState)(itemsPerPage);
const [startPages, setStartPages] = (0, import_react4.useState)([]);
const [middlePages, setMiddlePages] = (0, import_react4.useState)([]);
const [endPages, setEndPages] = (0, import_react4.useState)([]);
const totalPages = Math.ceil(totalItems / itemsPerPage);
const itemsPerPageId = (0, import_react4.useId)();
const ref = (0, import_react4.useRef)(null);
(0, import_react4.useEffect)(() => {
if (onItemsPerPageChanged)
onItemsPerPageChanged(itemsPerPageValue);
}, [itemsPerPageValue]);
(0, import_react4.useEffect)(() => {
if (currentPage > totalPages) {
onPageChanged(totalPages);
}
if (totalPages < 7) {
setStartPages(
new Array(totalPages).fill(0).map((value, index) => index + 1)
);
setMiddlePages([]);
setEndPages([]);
return;
}
if (currentPage <= 3) {
setStartPages([1, 2, 3, 4]);
setMiddlePages([]);
setEndPages([totalPages]);
} else if (currentPage > 3 && currentPage <= totalPages - 3) {
setStartPages([1]);
setMiddlePages([currentPage - 1, currentPage, currentPage + 1]);
setEndPages([totalPages]);
} else {
setStartPages([1]);
setMiddlePages([]);
setEndPages([totalPages - 3, totalPages - 2, totalPages - 1, totalPages]);
}
setFocusCallback(true);
}, [currentPage, itemsPerPage, totalItems]);
(0, import_react4.useEffect)(() => {
if (focusCallback) {
if (focusItem && ref?.current?.children) {
const itemsArray = Array.from(
ref.current?.children
);
if (itemsArray.find((e) => e.value === `${focusItem}`)) {
itemsArray?.find((e) => e.value === `${focusItem}`)?.focus();
} else {
const divElement = itemsArray?.find(
(e) => e.tagName.toLowerCase() === "div"
);
if (divElement) {
const divElementArray = Array.from(
divElement.children
);
if (divElementArray) {
divElementArray.find((e) => e.value === `${focusItem}`)?.focus();
}
}
}
}
}
setFocusItem(null);
setFocusCallback(false);
}, [focusCallback]);
const restoreFocus = (index) => {
setFocusItem(index);
};
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
"div",
{
className: cn(
"kl-flex kl-flex-row kl-items-center kl-gap-3xl kl-w-full",
{
"kl-justify-end": !showItemsPerPage
}
),
children: [
showItemsPerPage && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "kl-flex kl-flex-row kl-items-center kl-flex-1 kl-gap-lg kl-text-icon-default kl-bodyMd", children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { htmlFor: itemsPerPageId, children: "Item per page" }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"select",
{
name: "itemperpage",
id: itemsPerPageId,
disabled: itemPerPageDisabled,
value: itemsPerPageValue,
onChange: (e) => {
setItemsPerPageValue(Number(e.target.value));
},
className: cn(
"kl-py-md kl-pl-lg kl-pr-5xl kl-text-text-default kl-border-border-default kl-bg-surface-basic-input kl-transition-all kl-rounded kl-border kl-flex kl-flex-row kl-items-center kl-relative kl-outline-none disabled:kl-bg-surface-basic-input disabled:kl-text-text-disabled kl-ring-offset-1 focus-within:kl-ring-2 focus-within:kl-ring-border-focus kl-appearance-none",
{
"kl-text-text-disabled kl-border-border-disabled kl-bg-surface-basic-input": disabled
}
),
children: ITEMS_PER_PAGE.map((ipp) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: ipp, children: ipp }, ipp))
}
),
showNumbers ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { children: [
currentPage * itemsPerPage - itemsPerPage + 1,
" -",
" ",
currentPage * itemsPerPage,
" of ",
totalItems,
" items"
] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { children: [
" total ",
totalItems,
" items"
] })
] }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RovingFocusGroup.Root, { loop: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "kl-flex kl-flex-row kl-items-center kl-gap-xl", children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RovingFocusGroup.Item, { asChild: true, focusable: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
Button,
{
content: "Previous",
prefix: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react.ChevronLeft, {}),
variant: "plain",
onClick: () => {
if (onPageChanged) {
onPageChanged(currentPage - 1);
}
onClickPrev();
},
disabled: showNumbers && currentPage < 2 || disabled || isPrevDisabled
}
) }),
showNumbers && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
"div",
{
className: "kl-flex kl-flex-row kl-items-center kl-gap-lg",
ref,
children: [
startPages.map((sP) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RovingFocusGroup.Item, { asChild: true, focusable: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
Button,
{
content: sP.toString().padStart(2, "0"),
variant: "plain",
selected: sP === currentPage,
onClick: () => onPageChanged && onPageChanged(sP),
disabled,
value: sP,
onKeyDown: (e) => {
if (e.key === " " || e.key === "Enter") {
restoreFocus(sP);
}
}
}
) }, sP)),
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "kl-flex kl-flex-row kl-items-center kl-gap-lg", children: [
middlePages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "kl-bodyMd kl-text-text-default", children: "....." }),
middlePages.map((mP) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RovingFocusGroup.Item, { asChild: true, focusable: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
Button,
{
content: mP.toString().padStart(2, "0"),
variant: "plain",
selected: mP === currentPage,
onClick: () => onPageChanged && onPageChanged(mP),
disabled,
value: mP,
onKeyDown: (e) => {
if (e.key === " " || e.key === "Enter") {
restoreFocus(mP);
}
}
},
mP
) }, mP)),
totalPages >= 7 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "kl-bodyMd kl-text-text-default", children: "....." })
] }),
endPages.map((eP) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RovingFocusGroup.Item, { asChild: true, focusable: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
Button,
{
content: eP.toString().padStart(2, "0"),
variant: "plain",
selected: eP === currentPage,
onClick: () => onPageChanged && onPageChanged(eP),
disabled,
value: eP,
onKeyDown: (e) => {
if (e.key === " " || e.key === "Enter") {
restoreFocus(eP);
}
}
},
eP
) }, eP))
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RovingFocusGroup.Item, { asChild: true, focusable: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
Button,
{
content: "Next",
suffix: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react.ChevronRight, {}),
variant: "plain",
onClick: () => {
if (onPageChanged) {
onPageChanged(currentPage + 1);
}
onClickNext();
},
disabled: showNumbers && currentPage >= totalPages || disabled || isNextDisabled
}
) })
] }) })
]
}
);
};
var pagination_default = Pagination;