@helpwave/hightide 0.0.18 → 0.1.0

package/README.md

@@ -1,8 +1,27 @@
 # helpwave hightide
+
 This repository contains all components and themes employed by helpwave's web application
 
 ## Theming
-Theming is achieved through an extensive [tailwindcss](https://tailwindcss.com) config in the [globals.css](src/css/globals.css)
+
+Theming is achieved through an extensive [tailwindcss](https://tailwindcss.com) config in
+the [globals.css](src/css/globals.css)
 
 ## Storybook
-We use [storybook](https://storybook.js.org/) for easily testing and showcasing our component library
+
+We use [storybook](https://storybook.js.org/) for easily testing and showcasing our component library
+
+```bash
+npm run storybook
+```
+
+### Publishing a new version
+
+- Run the barreling script
+
+```bash
+npm run generate-barrels
+```
+
+- Increase the version number in the [package.json](package.json)
+- Update the [CHANGELOG.md](CHANGELOG.md)

package/dist/coloring/shading.cjs

@@ -0,0 +1,556 @@
+"use strict";
+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/coloring/shading.ts
+var shading_exports = {};
+__export(shading_exports, {
+  generateShadingColors: () => generateShadingColors
+});
+module.exports = __toCommonJS(shading_exports);
+var import_tinycolor2 = __toESM(require("tinycolor2"), 1);
+
+// src/coloring/types.ts
+var shadingColorValues = [0, 50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1e3];
+
+// src/components/branding/HelpwaveBadge.tsx
+var import_clsx3 = __toESM(require("clsx"), 1);
+
+// src/components/layout-and-navigation/Tile.tsx
+var import_image = __toESM(require("next/image"), 1);
+var import_clsx = __toESM(require("clsx"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+
+// src/components/icons-and-geometry/Helpwave.tsx
+var import_clsx2 = require("clsx");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+
+// src/components/branding/HelpwaveBadge.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+
+// src/components/date/DatePicker.tsx
+var import_react6 = require("react");
+var import_lucide_react2 = require("lucide-react");
+
+// src/localization/LanguageProvider.tsx
+var import_react2 = require("react");
+
+// src/hooks/useLocalStorage.ts
+var import_react = 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_runtime4 = require("react/jsx-runtime");
+var LanguageContext = (0, import_react2.createContext)({
+  language: LanguageUtil.DEFAULT_LANGUAGE,
+  setLanguage: (v) => v
+});
+
+// src/util/noop.ts
+var noop = () => void 0;
+
+// src/components/date/DatePicker.tsx
+var import_clsx8 = __toESM(require("clsx"), 1);
+
+// src/components/user-action/Button.tsx
+var import_clsx4 = __toESM(require("clsx"), 1);
+var import_jsx_runtime5 = require("react/jsx-runtime");
+
+// src/components/date/YearMonthPicker.tsx
+var import_react4 = require("react");
+var import_react_custom_scrollbars_2 = require("react-custom-scrollbars-2");
+var import_clsx6 = __toESM(require("clsx"), 1);
+
+// src/components/layout-and-navigation/Expandable.tsx
+var import_react3 = require("react");
+var import_lucide_react = require("lucide-react");
+var import_clsx5 = __toESM(require("clsx"), 1);
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var DefaultIcon = (expanded) => expanded ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.ChevronUp, { size: 16, className: "min-w-[16px]" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.ChevronDown, { size: 16, className: "min-w-[16px]" });
+var Expandable = (0, import_react3.forwardRef)(({
+  children,
+  label,
+  icon,
+  initialExpansion = false,
+  clickOnlyOnHeader = true,
+  className = "",
+  headerClassName = ""
+}, ref) => {
+  const [isExpanded, setIsExpanded] = (0, import_react3.useState)(initialExpansion);
+  icon ??= DefaultIcon;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      ref,
+      className: (0, import_clsx5.default)("col bg-surface text-on-surface group rounded-lg shadow-sm", { "cursor-pointer": !clickOnlyOnHeader }, className),
+      onClick: () => !clickOnlyOnHeader && setIsExpanded(!isExpanded),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          "button",
+          {
+            className: (0, import_clsx5.default)("btn-md rounded-lg justify-between items-center bg-surface text-on-surface", { "group-hover:brightness-95": !isExpanded }, headerClassName),
+            onClick: () => clickOnlyOnHeader && setIsExpanded(!isExpanded),
+            children: [
+              label,
+              icon(isExpanded)
+            ]
+          }
+        ),
+        isExpanded && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "col", children })
+      ]
+    }
+  );
+});
+Expandable.displayName = "Expandable";
+
+// src/components/date/YearMonthPicker.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+
+// src/components/date/DayPicker.tsx
+var import_clsx7 = __toESM(require("clsx"), 1);
+var import_react5 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+
+// src/components/date/DatePicker.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+
+// src/components/date/TimeDisplay.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+
+// src/components/date/TimePicker.tsx
+var import_react7 = require("react");
+var import_react_custom_scrollbars_22 = require("react-custom-scrollbars-2");
+var import_clsx9 = __toESM(require("clsx"), 1);
+var import_jsx_runtime11 = require("react/jsx-runtime");
+
+// src/components/icons-and-geometry/Avatar.tsx
+var import_image2 = __toESM(require("next/image"), 1);
+var import_clsx10 = __toESM(require("clsx"), 1);
+var import_jsx_runtime12 = require("react/jsx-runtime");
+
+// src/components/icons-and-geometry/Circle.tsx
+var import_clsx11 = __toESM(require("clsx"), 1);
+var import_jsx_runtime13 = require("react/jsx-runtime");
+
+// src/components/icons-and-geometry/Ring.tsx
+var import_react8 = require("react");
+var import_clsx12 = __toESM(require("clsx"), 1);
+var import_jsx_runtime14 = require("react/jsx-runtime");
+
+// src/components/icons-and-geometry/Tag.tsx
+var import_image3 = __toESM(require("next/image"), 1);
+var import_jsx_runtime15 = require("react/jsx-runtime");
+
+// src/components/layout-and-navigation/BreadCrumb.tsx
+var import_link = __toESM(require("next/link"), 1);
+var import_clsx13 = __toESM(require("clsx"), 1);
+var import_jsx_runtime16 = require("react/jsx-runtime");
+
+// src/components/layout-and-navigation/Carousel.tsx
+var import_react9 = require("react");
+var import_clsx14 = __toESM(require("clsx"), 1);
+var import_lucide_react3 = require("lucide-react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+
+// src/components/layout-and-navigation/Chip.tsx
+var import_clsx15 = __toESM(require("clsx"), 1);
+var import_jsx_runtime18 = require("react/jsx-runtime");
+
+// src/components/layout-and-navigation/DividerInserter.tsx
+var import_clsx16 = __toESM(require("clsx"), 1);
+var import_jsx_runtime19 = require("react/jsx-runtime");
+
+// src/components/layout-and-navigation/FAQSection.tsx
+var import_clsx17 = __toESM(require("clsx"), 1);
+var import_lucide_react4 = require("lucide-react");
+
+// src/components/layout-and-navigation/MarkdownInterpreter.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+
+// src/components/layout-and-navigation/FAQSection.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+
+// src/components/layout-and-navigation/Overlay.tsx
+var import_react11 = require("react");
+var import_react_dom = __toESM(require("react-dom"), 1);
+var import_clsx19 = __toESM(require("clsx"), 1);
+
+// src/hooks/useHoverState.ts
+var import_react10 = require("react");
+
+// src/components/user-action/Tooltip.tsx
+var import_clsx18 = require("clsx");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+
+// src/components/layout-and-navigation/Overlay.tsx
+var import_lucide_react5 = require("lucide-react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+
+// src/components/layout-and-navigation/Pagination.tsx
+var import_lucide_react6 = require("lucide-react");
+var import_clsx20 = __toESM(require("clsx"), 1);
+var import_jsx_runtime24 = require("react/jsx-runtime");
+
+// src/components/layout-and-navigation/SearchableList.tsx
+var import_react14 = require("react");
+var import_lucide_react7 = require("lucide-react");
+var import_clsx23 = __toESM(require("clsx"), 1);
+
+// src/components/user-action/Input.tsx
+var import_react13 = require("react");
+var import_clsx22 = __toESM(require("clsx"), 1);
+
+// src/hooks/useSaveDelay.ts
+var import_react12 = require("react");
+
+// src/components/user-action/Label.tsx
+var import_clsx21 = __toESM(require("clsx"), 1);
+var import_jsx_runtime25 = require("react/jsx-runtime");
+
+// src/components/user-action/Input.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var FormInput = (0, import_react13.forwardRef)(function FormInput2({
+  id,
+  labelText,
+  errorText,
+  className,
+  labelClassName,
+  errorClassName,
+  containerClassName,
+  required,
+  ...restProps
+}, ref) {
+  const input = /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    "input",
+    {
+      ref,
+      id,
+      ...restProps,
+      className: (0, import_clsx22.default)(
+        {
+          "focus:border-primary focus:ring-primary": !errorText,
+          "focus:border-negative focus:ring-negative text-negative": !!errorText
+        },
+        className
+      )
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: (0, import_clsx22.default)("flex flex-col gap-y-1", containerClassName), children: [
+    labelText && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("label", { htmlFor: id, className: (0, import_clsx22.default)("textstyle-label-md", labelClassName), children: [
+      labelText,
+      required && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-primary font-bold", children: "*" })
+    ] }),
+    input,
+    errorText && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("label", { htmlFor: id, className: (0, import_clsx22.default)("text-negative", errorClassName), children: errorText })
+  ] });
+});
+
+// src/components/layout-and-navigation/SearchableList.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+
+// src/components/layout-and-navigation/StepperBar.tsx
+var import_lucide_react8 = require("lucide-react");
+var import_clsx24 = __toESM(require("clsx"), 1);
+var import_jsx_runtime28 = require("react/jsx-runtime");
+
+// src/components/layout-and-navigation/Table.tsx
+var import_react16 = require("react");
+var import_react_custom_scrollbars_23 = require("react-custom-scrollbars-2");
+
+// src/components/user-action/Checkbox.tsx
+var import_react15 = require("react");
+var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"), 1);
+var import_lucide_react9 = require("lucide-react");
+var import_clsx25 = __toESM(require("clsx"), 1);
+var import_jsx_runtime29 = require("react/jsx-runtime");
+
+// src/components/layout-and-navigation/Table.tsx
+var import_clsx26 = __toESM(require("clsx"), 1);
+var import_lucide_react10 = require("lucide-react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+
+// src/components/layout-and-navigation/TextImage.tsx
+var import_clsx27 = __toESM(require("clsx"), 1);
+var import_jsx_runtime31 = require("react/jsx-runtime");
+
+// src/components/layout-and-navigation/VerticalDivider.tsx
+var import_jsx_runtime32 = require("react/jsx-runtime");
+
+// src/components/loading-states/ErrorComponent.tsx
+var import_lucide_react11 = require("lucide-react");
+var import_clsx28 = __toESM(require("clsx"), 1);
+var import_jsx_runtime33 = require("react/jsx-runtime");
+
+// src/components/loading-states/LoadingAndErrorComponent.tsx
+var import_react17 = require("react");
+
+// src/components/loading-states/LoadingAnimation.tsx
+var import_clsx29 = __toESM(require("clsx"), 1);
+var import_jsx_runtime34 = require("react/jsx-runtime");
+
+// src/components/loading-states/LoadingAndErrorComponent.tsx
+var import_jsx_runtime35 = require("react/jsx-runtime");
+
+// src/components/loading-states/LoadingButton.tsx
+var import_clsx30 = __toESM(require("clsx"), 1);
+var import_jsx_runtime36 = require("react/jsx-runtime");
+
+// src/components/loading-states/ProgressIndicator.tsx
+var import_jsx_runtime37 = require("react/jsx-runtime");
+
+// src/components/modals/ConfirmDialog.tsx
+var import_clsx31 = __toESM(require("clsx"), 1);
+var import_jsx_runtime38 = require("react/jsx-runtime");
+
+// src/components/modals/DiscardChangesModal.tsx
+var import_jsx_runtime39 = require("react/jsx-runtime");
+
+// src/components/modals/InputModal.tsx
+var import_jsx_runtime40 = require("react/jsx-runtime");
+
+// src/components/user-action/Select.tsx
+var import_react18 = require("@headlessui/react");
+var import_lucide_react12 = require("lucide-react");
+var import_react19 = require("react");
+var import_clsx32 = __toESM(require("clsx"), 1);
+var import_jsx_runtime41 = require("react/jsx-runtime");
+
+// src/components/modals/LanguageModal.tsx
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var defaultLanguageModalTranslation = {
+  en: {
+    title: "Language",
+    message: "Choose your language",
+    done: "Done",
+    ...LanguageUtil.languagesLocalNames
+  },
+  de: {
+    title: "Sprache",
+    message: "W\xE4hle deine bevorzugte Sprache",
+    done: "Fertig",
+    ...LanguageUtil.languagesLocalNames
+  }
+};
+
+// src/theming/useTheme.tsx
+var import_react20 = require("react");
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var themes = ["light", "dark"];
+var defaultThemeTypeTranslation = {
+  en: {
+    dark: "Dark",
+    light: "Light"
+  },
+  de: {
+    dark: "Dunkel",
+    light: "Hell"
+  }
+};
+var ThemeUtil = {
+  themes,
+  translation: defaultThemeTypeTranslation
+};
+var ThemeContext = (0, import_react20.createContext)({
+  theme: "light",
+  setTheme: noop
+});
+
+// src/components/modals/ThemeModal.tsx
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var defaultConfirmDialogTranslation = {
+  en: {
+    title: "Theme",
+    message: "Choose your preferred theme",
+    done: "Done",
+    ...ThemeUtil.translation.en
+  },
+  de: {
+    title: "Farbschema",
+    message: "W\xE4hle dein bevorzugtes Farbschema",
+    done: "Fertig",
+    ...ThemeUtil.translation.en
+  }
+};
+
+// src/components/properties/CheckboxProperty.tsx
+var import_lucide_react14 = require("lucide-react");
+
+// src/components/properties/PropertyBase.tsx
+var import_lucide_react13 = require("lucide-react");
+var import_clsx33 = __toESM(require("clsx"), 1);
+var import_jsx_runtime45 = require("react/jsx-runtime");
+
+// src/components/properties/CheckboxProperty.tsx
+var import_jsx_runtime46 = require("react/jsx-runtime");
+
+// src/components/properties/DateProperty.tsx
+var import_lucide_react15 = require("lucide-react");
+var import_clsx34 = __toESM(require("clsx"), 1);
+var import_jsx_runtime47 = require("react/jsx-runtime");
+
+// src/components/properties/MultiSelectProperty.tsx
+var import_lucide_react17 = require("lucide-react");
+var import_clsx37 = __toESM(require("clsx"), 1);
+
+// src/components/user-action/MultiSelect.tsx
+var import_react23 = require("react");
+var import_lucide_react16 = require("lucide-react");
+var import_clsx36 = __toESM(require("clsx"), 1);
+
+// src/components/user-action/Menu.tsx
+var import_react22 = require("react");
+var import_clsx35 = __toESM(require("clsx"), 1);
+
+// src/hooks/useOutsideClick.ts
+var import_react21 = require("react");
+
+// src/components/user-action/Menu.tsx
+var import_jsx_runtime48 = require("react/jsx-runtime");
+
+// src/components/user-action/MultiSelect.tsx
+var import_jsx_runtime49 = require("react/jsx-runtime");
+
+// src/components/properties/MultiSelectProperty.tsx
+var import_jsx_runtime50 = require("react/jsx-runtime");
+
+// src/components/properties/NumberProperty.tsx
+var import_lucide_react18 = require("lucide-react");
+var import_clsx38 = __toESM(require("clsx"), 1);
+var import_jsx_runtime51 = require("react/jsx-runtime");
+
+// src/components/properties/SelectProperty.tsx
+var import_lucide_react19 = require("lucide-react");
+var import_clsx39 = __toESM(require("clsx"), 1);
+var import_jsx_runtime52 = require("react/jsx-runtime");
+
+// src/components/properties/TextProperty.tsx
+var import_lucide_react20 = require("lucide-react");
+var import_clsx41 = __toESM(require("clsx"), 1);
+
+// src/components/user-action/Textarea.tsx
+var import_react24 = require("react");
+var import_clsx40 = __toESM(require("clsx"), 1);
+var import_jsx_runtime53 = require("react/jsx-runtime");
+
+// src/components/properties/TextProperty.tsx
+var import_jsx_runtime54 = require("react/jsx-runtime");
+
+// src/components/user-action/DateAndTimePicker.tsx
+var import_clsx42 = __toESM(require("clsx"), 1);
+var import_jsx_runtime55 = require("react/jsx-runtime");
+
+// src/components/user-action/ScrollPicker.tsx
+var import_react25 = require("react");
+var import_clsx43 = __toESM(require("clsx"), 1);
+var import_jsx_runtime56 = require("react/jsx-runtime");
+
+// src/components/user-action/ToggleableInput.tsx
+var import_react26 = require("react");
+var import_lucide_react21 = require("lucide-react");
+var import_clsx44 = __toESM(require("clsx"), 1);
+var import_jsx_runtime57 = require("react/jsx-runtime");
+
+// src/util/news.ts
+var import_zod = require("zod");
+var newsSchema = import_zod.z.object({
+  title: import_zod.z.string(),
+  description: import_zod.z.string(),
+  date: import_zod.z.string(),
+  image: import_zod.z.string().url().optional(),
+  externalResource: import_zod.z.string().url().optional(),
+  keys: import_zod.z.array(import_zod.z.string())
+}).transform((obj) => {
+  let description = [obj.description];
+  if (obj.image) {
+    description = [new URL(obj.image), ...description];
+  }
+  return {
+    title: obj.title,
+    date: new Date(obj.date),
+    description,
+    externalResource: obj.externalResource ? new URL(obj.externalResource) : void 0,
+    keys: obj.keys
+  };
+});
+var newsListSchema = import_zod.z.array(newsSchema);
+var localizedNewsSchema = import_zod.z.record(import_zod.z.enum(LanguageUtil.languages), newsListSchema);
+
+// src/coloring/shading.ts
+var generateShadingColors = (partialShading) => {
+  const shading = {
+    0: "#FFFFFF",
+    1e3: "#000000"
+  };
+  let index = 1;
+  while (index < shadingColorValues.length - 1) {
+    const previous = shadingColorValues[index - 1];
+    const current = shadingColorValues[index];
+    if (partialShading[current] !== void 0) {
+      shading[current] = partialShading[current];
+      index++;
+      continue;
+    }
+    let j = index + 1;
+    while (j < shadingColorValues.length) {
+      if (partialShading[shadingColorValues[j]] !== void 0) {
+        break;
+      }
+      j++;
+    }
+    if (j === shadingColorValues.length) {
+      j = shadingColorValues.length - 1;
+    }
+    const nextFound = shadingColorValues[j];
+    const interval = nextFound - previous;
+    for (let k = index; k < j; k++) {
+      const current2 = shadingColorValues[k];
+      const previousValue = partialShading[previous] ?? shading[previous];
+      const nextValue = partialShading[nextFound] ?? shading[nextFound];
+      shading[current2] = import_tinycolor2.default.mix((0, import_tinycolor2.default)(previousValue), (0, import_tinycolor2.default)(nextValue), (current2 - previous) / interval * 100).toHexString();
+    }
+    index = j;
+  }
+  return shading;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  generateShadingColors
+});
+//# sourceMappingURL=shading.cjs.map