@helpwave/hightide
Version:
helpwave's component and theming library
467 lines (455 loc) • 16.6 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);
// src/components/date/YearMonthPicker.tsx
var YearMonthPicker_exports = {};
__export(YearMonthPicker_exports, {
YearMonthPicker: () => YearMonthPicker,
YearMonthPickerUncontrolled: () => YearMonthPickerUncontrolled
});
module.exports = __toCommonJS(YearMonthPicker_exports);
var import_react5 = require("react");
var import_react_custom_scrollbars_2 = require("react-custom-scrollbars-2");
// src/util/noop.ts
var noop = () => void 0;
// src/util/array.ts
var equalSizeGroups = (array, groupSize) => {
if (groupSize <= 0) {
console.warn(`group size should be greater than 0: groupSize = ${groupSize}`);
return [[...array]];
}
const groups = [];
for (let i = 0; i < array.length; i += groupSize) {
groups.push(array.slice(i, Math.min(i + groupSize, array.length)));
}
return groups;
};
var defaultRangeOptions = {
allowEmptyRange: false,
stepSize: 1,
exclusiveStart: false,
exclusiveEnd: true
};
var range = (endOrRange, options) => {
const { allowEmptyRange, stepSize, exclusiveStart, exclusiveEnd } = { ...defaultRangeOptions, ...options };
let start = 0;
let end;
if (typeof endOrRange === "number") {
end = endOrRange;
} else {
start = endOrRange[0];
end = endOrRange[1];
}
if (!exclusiveEnd) {
end -= 1;
}
if (exclusiveStart) {
start += 1;
}
if (end - 1 < start) {
if (!allowEmptyRange) {
console.warn(`range: end (${end}) < start (${start}) should be allowed explicitly, set options.allowEmptyRange to true`);
}
return [];
}
return Array.from({ length: end - start }, (_, index) => index * stepSize + start);
};
// src/components/date/YearMonthPicker.tsx
var import_clsx3 = __toESM(require("clsx"));
// src/components/layout-and-navigation/Expandable.tsx
var import_react = require("react");
var import_lucide_react = require("lucide-react");
var import_clsx = __toESM(require("clsx"));
var import_jsx_runtime = require("react/jsx-runtime");
var ExpansionIcon = ({ isExpanded, className }) => {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_lucide_react.ChevronDown,
{
className: (0, import_clsx.default)(
"min-w-6 w-6 min-h-6 h-6 transition-transform duration-200 ease-in-out",
{ "rotate-180": isExpanded },
className
)
}
);
};
var Expandable = (0, import_react.forwardRef)(function Expandable2({
children,
label,
icon,
isExpanded = false,
onChange = noop,
clickOnlyOnHeader = true,
disabled = false,
className,
headerClassName,
contentClassName,
contentExpandedClassName
}, ref) {
const defaultIcon = (0, import_react.useCallback)((expanded) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ExpansionIcon, { isExpanded: expanded }), []);
icon ??= defaultIcon;
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
"div",
{
ref,
className: (0, import_clsx.default)("flex-col-0 bg-surface text-on-surface group rounded-lg shadow-sm", { "cursor-pointer": !clickOnlyOnHeader && !disabled }, className),
onClick: () => !clickOnlyOnHeader && !disabled && onChange(!isExpanded),
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
"div",
{
className: (0, import_clsx.default)(
"flex-row-2 py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none",
{
"group-hover:brightness-97": !isExpanded,
"hover:brightness-97": isExpanded && !disabled,
"cursor-pointer": clickOnlyOnHeader && !disabled
},
headerClassName
),
onClick: () => clickOnlyOnHeader && !disabled && onChange(!isExpanded),
children: [
label,
icon(isExpanded)
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"div",
{
className: (0, import_clsx.default)(
"flex-col-2 px-4 transition-all duration-300 ease-in-out",
{
[(0, import_clsx.default)("max-h-96 opacity-100 pb-2 overflow-y-auto", contentExpandedClassName)]: isExpanded,
"max-h-0 opacity-0 overflow-hidden": !isExpanded
},
contentClassName
),
children
}
)
]
}
);
});
var ExpandableUncontrolled = (0, import_react.forwardRef)(function ExpandableUncontrolled2({
isExpanded,
onChange = noop,
...props
}, ref) {
const [usedIsExpanded, setUsedIsExpanded] = (0, import_react.useState)(isExpanded);
(0, import_react.useEffect)(() => {
setUsedIsExpanded(isExpanded);
}, [isExpanded]);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
Expandable,
{
...props,
ref,
isExpanded: usedIsExpanded,
onChange: (value) => {
onChange(value);
setUsedIsExpanded(value);
}
}
);
});
// src/util/date.ts
var monthsList = ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"];
var changeDuration = (date, duration, isAdding) => {
const {
years = 0,
months = 0,
days = 0,
hours = 0,
minutes = 0,
seconds = 0,
milliseconds = 0
} = duration;
if (years < 0) {
console.error(`Range error years must be greater than 0: received ${years}`);
return new Date(date);
}
if (months < 0 || months > 11) {
console.error(`Range error month must be 0 <= month <= 11: received ${months}`);
return new Date(date);
}
if (days < 0) {
console.error(`Range error days must be greater than 0: received ${days}`);
return new Date(date);
}
if (hours < 0 || hours > 23) {
console.error(`Range error hours must be 0 <= hours <= 23: received ${hours}`);
return new Date(date);
}
if (minutes < 0 || minutes > 59) {
console.error(`Range error minutes must be 0 <= minutes <= 59: received ${minutes}`);
return new Date(date);
}
if (seconds < 0 || seconds > 59) {
console.error(`Range error seconds must be 0 <= seconds <= 59: received ${seconds}`);
return new Date(date);
}
if (milliseconds < 0) {
console.error(`Range error seconds must be greater than 0: received ${milliseconds}`);
return new Date(date);
}
const multiplier = isAdding ? 1 : -1;
const newDate = new Date(date);
newDate.setFullYear(newDate.getFullYear() + multiplier * years);
newDate.setMonth(newDate.getMonth() + multiplier * months);
newDate.setDate(newDate.getDate() + multiplier * days);
newDate.setHours(newDate.getHours() + multiplier * hours);
newDate.setMinutes(newDate.getMinutes() + multiplier * minutes);
newDate.setSeconds(newDate.getSeconds() + multiplier * seconds);
newDate.setMilliseconds(newDate.getMilliseconds() + multiplier * milliseconds);
return newDate;
};
var addDuration = (date, duration) => {
return changeDuration(date, duration, true);
};
var subtractDuration = (date, duration) => {
return changeDuration(date, duration, false);
};
// src/localization/LanguageProvider.tsx
var import_react3 = require("react");
// src/hooks/useLocalStorage.ts
var import_react2 = require("react");
// src/localization/util.ts
var languages = ["en", "de"];
var languagesLocalNames = {
en: "English",
de: "Deutsch"
};
var DEFAULT_LANGUAGE = "en";
var LanguageUtil = {
languages,
DEFAULT_LANGUAGE,
languagesLocalNames
};
// src/localization/LanguageProvider.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var LanguageContext = (0, import_react3.createContext)({
language: LanguageUtil.DEFAULT_LANGUAGE,
setLanguage: (v) => v
});
var useLanguage = () => (0, import_react3.useContext)(LanguageContext);
var useLocale = (overWriteLanguage) => {
const { language } = useLanguage();
const mapping = {
en: "en-US",
de: "de-DE"
};
return mapping[overWriteLanguage ?? language];
};
// src/components/user-action/Button.tsx
var import_react4 = require("react");
var import_clsx2 = __toESM(require("clsx"));
var import_jsx_runtime3 = require("react/jsx-runtime");
var ButtonColorUtil = {
solid: ["primary", "secondary", "tertiary", "positive", "warning", "negative", "neutral"],
text: ["primary", "negative", "neutral"],
outline: ["primary"]
};
var IconButtonUtil = {
icon: [...ButtonColorUtil.solid, "transparent"]
};
var paddingMapping = {
small: "btn-sm",
medium: "btn-md",
large: "btn-lg"
};
var iconPaddingMapping = {
tiny: "icon-btn-xs",
small: "icon-btn-sm",
medium: "icon-btn-md",
large: "icon-btn-lg"
};
var ButtonUtil = {
paddingMapping,
iconPaddingMapping
};
var SolidButton = (0, import_react4.forwardRef)(function SolidButton2({
children,
color = "primary",
size = "medium",
startIcon,
endIcon,
onClick,
className,
...restProps
}, ref) {
const colorClasses = {
primary: "not-disabled:bg-button-solid-primary-background not-disabled:text-button-solid-primary-text",
secondary: "not-disabled:bg-button-solid-secondary-background not-disabled:text-button-solid-secondary-text",
tertiary: "not-disabled:bg-button-solid-tertiary-background not-disabled:text-button-solid-tertiary-text",
positive: "not-disabled:bg-button-solid-positive-background not-disabled:text-button-solid-positive-text",
warning: "not-disabled:bg-button-solid-warning-background not-disabled:text-button-solid-warning-text",
negative: "not-disabled:bg-button-solid-negative-background not-disabled:text-button-solid-negative-text",
neutral: "not-disabled:bg-button-solid-neutral-background not-disabled:text-button-solid-neutral-text"
}[color];
const iconColorClasses = {
primary: "not-group-disabled:text-button-solid-primary-icon",
secondary: "not-group-disabled:text-button-solid-secondary-icon",
tertiary: "not-group-disabled:text-button-solid-tertiary-icon",
positive: "not-group-disabled:text-button-solid-positive-icon",
warning: "not-group-disabled:text-button-solid-warning-icon",
negative: "not-group-disabled:text-button-solid-negative-icon",
neutral: "not-group-disabled:text-button-solid-neutral-icon"
}[color];
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
"button",
{
ref,
onClick,
className: (0, import_clsx2.default)(
"group font-semibold",
colorClasses,
"not-disabled:hover:brightness-90",
"disabled:text-disabled-text disabled:bg-disabled-background",
ButtonUtil.paddingMapping[size],
className
),
...restProps,
children: [
startIcon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"span",
{
className: (0, import_clsx2.default)(
iconColorClasses,
"group-disabled:text-disabled-icon"
),
children: startIcon
}
),
children,
endIcon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"span",
{
className: (0, import_clsx2.default)(
iconColorClasses,
"group-disabled:text-disabled-icon"
),
children: endIcon
}
)
]
}
);
});
// src/components/date/YearMonthPicker.tsx
var import_jsx_runtime4 = require("react/jsx-runtime");
var YearMonthPicker = ({
displayedYearMonth = /* @__PURE__ */ new Date(),
start = subtractDuration(/* @__PURE__ */ new Date(), { years: 50 }),
end = addDuration(/* @__PURE__ */ new Date(), { years: 50 }),
onChange = noop,
className = "",
maxHeight = 300,
showValueOpen = true
}) => {
const locale = useLocale();
const ref = (0, import_react5.useRef)(null);
(0, import_react5.useEffect)(() => {
const scrollToItem = () => {
if (ref.current) {
ref.current.scrollIntoView({
behavior: "instant",
block: "center"
});
}
};
scrollToItem();
}, [ref]);
if (end < start) {
console.error(`startYear: (${start}) less than endYear: (${end})`);
return null;
}
const years = range([start.getFullYear(), end.getFullYear()], { exclusiveEnd: false });
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: (0, import_clsx3.default)("flex-col-0 select-none", className), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_custom_scrollbars_2.Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex-col-1 mr-3", children: years.map((year) => {
const selectedYear = displayedYearMonth.getFullYear() === year;
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
ExpandableUncontrolled,
{
ref: (displayedYearMonth.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear()) === year ? ref : void 0,
label: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: (0, import_clsx3.default)({ "text-primary font-bold": selectedYear }), children: year }),
isExpanded: showValueOpen && selectedYear,
contentClassName: "gap-y-1",
children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex-row-1", children: monthList.map((month) => {
const monthIndex = monthsList.indexOf(month);
const newDate = new Date(year, monthIndex);
const selectedMonth = selectedYear && monthIndex === displayedYearMonth.getMonth();
const firstOfMonth = new Date(year, monthIndex, 1);
const lastOfMonth = new Date(year, monthIndex, 1);
const isAfterStart = start === void 0 || start <= addDuration(subtractDuration(lastOfMonth, { days: 1 }), { months: 1 });
const isBeforeEnd = end === void 0 || firstOfMonth <= end;
const isValid = isAfterStart && isBeforeEnd;
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
SolidButton,
{
disabled: !isValid,
color: selectedMonth && isValid ? "primary" : "neutral",
className: "flex-1",
size: "small",
onClick: () => {
onChange(newDate);
},
children: new Intl.DateTimeFormat(locale, { month: "short" }).format(newDate)
},
month
);
}) }, index))
},
year
);
}) }) }) });
};
var YearMonthPickerUncontrolled = ({
displayedYearMonth,
onChange = noop,
...props
}) => {
const [yearMonth, setYearMonth] = (0, import_react5.useState)(displayedYearMonth ?? /* @__PURE__ */ new Date());
(0, import_react5.useEffect)(() => setYearMonth(displayedYearMonth), [displayedYearMonth]);
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
YearMonthPicker,
{
displayedYearMonth: yearMonth,
onChange: (date) => {
setYearMonth(date);
onChange(date);
},
...props
}
);
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
YearMonthPicker,
YearMonthPickerUncontrolled
});
//# sourceMappingURL=YearMonthPicker.js.map