@helpwave/hightide 0.1.8 → 0.1.9

package/dist/components/user-action/DateAndTimePicker.d.mts

@@ -2,30 +2,14 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { PropsForTranslation } from '../../localization/useTranslation.mjs';
 import { TimePickerProps } from '../date/TimePicker.mjs';
 import { DatePickerProps } from '../date/DatePicker.mjs';
+import { FormTranslationType } from '../../localization/defaults/form.mjs';
+import { TimeTranslationType } from '../../localization/defaults/time.mjs';
 import '../../localization/util.mjs';
 import '../date/YearMonthPicker.mjs';
 import '../date/DayPicker.mjs';
 import '../../util/date.mjs';
 
-type TimeTranslation = {
-    clear: string;
-    change: string;
-    year: string;
-    month: string;
-    day: string;
-    january: string;
-    february: string;
-    march: string;
-    april: string;
-    may: string;
-    june: string;
-    july: string;
-    august: string;
-    september: string;
-    october: string;
-    november: string;
-    december: string;
-};
+type DateAndTimePickerTranslationType = FormTranslationType & TimeTranslationType;
 type DateTimePickerMode = 'date' | 'time' | 'dateTime';
 type DateTimePickerProps = {
     mode?: DateTimePickerMode;
@@ -41,6 +25,6 @@ type DateTimePickerProps = {
 /**
  * A Component for picking a Date and Time
  */
-declare const DateTimePicker: ({ overwriteTranslation, value, start, end, mode, onFinish, onChange, onRemove, timePickerProps, datePickerProps, }: PropsForTranslation<TimeTranslation, DateTimePickerProps>) => react_jsx_runtime.JSX.Element;
+declare const DateTimePicker: ({ overwriteTranslation, value, start, end, mode, onFinish, onChange, onRemove, timePickerProps, datePickerProps, }: PropsForTranslation<DateAndTimePickerTranslationType, DateTimePickerProps>) => react_jsx_runtime.JSX.Element;
 
 export { DateTimePicker, type DateTimePickerMode, type DateTimePickerProps };

package/dist/components/user-action/DateAndTimePicker.d.ts

@@ -2,30 +2,14 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { PropsForTranslation } from '../../localization/useTranslation.js';
 import { TimePickerProps } from '../date/TimePicker.js';
 import { DatePickerProps } from '../date/DatePicker.js';
+import { FormTranslationType } from '../../localization/defaults/form.js';
+import { TimeTranslationType } from '../../localization/defaults/time.js';
 import '../../localization/util.js';
 import '../date/YearMonthPicker.js';
 import '../date/DayPicker.js';
 import '../../util/date.js';
 
-type TimeTranslation = {
-    clear: string;
-    change: string;
-    year: string;
-    month: string;
-    day: string;
-    january: string;
-    february: string;
-    march: string;
-    april: string;
-    may: string;
-    june: string;
-    july: string;
-    august: string;
-    september: string;
-    october: string;
-    november: string;
-    december: string;
-};
+type DateAndTimePickerTranslationType = FormTranslationType & TimeTranslationType;
 type DateTimePickerMode = 'date' | 'time' | 'dateTime';
 type DateTimePickerProps = {
     mode?: DateTimePickerMode;
@@ -41,6 +25,6 @@ type DateTimePickerProps = {
 /**
  * A Component for picking a Date and Time
  */
-declare const DateTimePicker: ({ overwriteTranslation, value, start, end, mode, onFinish, onChange, onRemove, timePickerProps, datePickerProps, }: PropsForTranslation<TimeTranslation, DateTimePickerProps>) => react_jsx_runtime.JSX.Element;
+declare const DateTimePicker: ({ overwriteTranslation, value, start, end, mode, onFinish, onChange, onRemove, timePickerProps, datePickerProps, }: PropsForTranslation<DateAndTimePickerTranslationType, DateTimePickerProps>) => react_jsx_runtime.JSX.Element;
 
 export { DateTimePicker, type DateTimePickerMode, type DateTimePickerProps };

package/dist/components/user-action/DateAndTimePicker.js

@@ -70,15 +70,55 @@ var useLocale = (overWriteLanguage) => {
 };
 
 // src/localization/useTranslation.ts
-var useTranslation = (defaults, translationOverwrite = {}) => {
-  const { language: languageProp, translation: overwrite } = translationOverwrite;
+var useTranslation = (translations, overwriteTranslation = {}) => {
+  const { language: languageProp, translation: overwrite } = overwriteTranslation;
   const { language: inferredLanguage } = useLanguage();
   const usedLanguage = languageProp ?? inferredLanguage;
-  let defaultValues = defaults[usedLanguage];
-  if (overwrite && overwrite[usedLanguage]) {
-    defaultValues = { ...defaultValues, ...overwrite[usedLanguage] };
+  const usedTranslations = [...translations];
+  if (overwrite) {
+    usedTranslations.push(overwrite);
   }
-  return defaultValues;
+  return (key, options) => {
+    const { count, replacements } = { ...{ count: 0, replacements: {} }, ...options };
+    try {
+      for (let i = translations.length - 1; i >= 0; i--) {
+        const translation = translations[i];
+        const localizedTranslation = translation[usedLanguage];
+        if (!localizedTranslation) {
+          continue;
+        }
+        const value = localizedTranslation[key];
+        if (!value) {
+          continue;
+        }
+        let forProcessing;
+        if (typeof value !== "string") {
+          if (count <= 0 && value?.zero) {
+            forProcessing = value.zero;
+          } else if (count === 1 && value?.one) {
+            forProcessing = value.one;
+          } else if (count === 2 && value?.two) {
+            forProcessing = value.two;
+          } else if (count <= 10 && value?.few) {
+            forProcessing = value.few;
+          } else if (count > 10 && value?.many) {
+            forProcessing = value.many;
+          } else {
+            forProcessing = value.other;
+          }
+        } else {
+          forProcessing = value;
+        }
+        forProcessing = forProcessing.replace(/\{\{(\w+)}}/g, (_, placeholder) => {
+          return replacements[placeholder] ?? `{{${placeholder}}}`;
+        });
+        return forProcessing;
+      }
+    } catch (e) {
+      console.error(e);
+    }
+    return `{{${usedLanguage}:${key}}}`;
+  };
 };
 
 // src/util/noop.ts
@@ -670,16 +710,80 @@ var DayPicker = ({
   ] });
 };
 
-// src/components/date/DatePicker.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var defaultDatePickerTranslation = {
+// src/localization/defaults/time.ts
+var monthTranslation = {
   en: {
-    today: "Today"
+    january: "January",
+    february: "Febuary",
+    march: "March",
+    april: "April",
+    may: "May",
+    june: "June",
+    july: "July",
+    august: "August",
+    september: "September",
+    october: "October",
+    november: "November",
+    december: "December"
   },
   de: {
-    today: "Heute"
+    january: "Januar",
+    february: "Febuar",
+    march: "M\xE4rz",
+    april: "April",
+    may: "Mai",
+    june: "Juni",
+    july: "Juli",
+    august: "August",
+    september: "September",
+    october: "October",
+    november: "November",
+    december: "December"
   }
 };
+var timeTranslation = {
+  en: {
+    ...monthTranslation.en,
+    century: { one: "Century", other: "Centuries" },
+    decade: { one: "Decade", other: "Decades" },
+    year: { one: "Year", other: "Years" },
+    month: { one: "Month", other: "Months" },
+    day: { one: "Day", other: "Days" },
+    hour: { one: "Hour", other: "Hours" },
+    minute: { one: "Minute", other: "Minutes" },
+    second: { one: "Second", other: "Seconds" },
+    millisecond: { one: "Millisecond", other: "Milliseconds" },
+    microsecond: { one: "Microsecond", other: "Microseconds" },
+    nanosecond: { one: "Nanosecond", other: "Nanoseconds" },
+    yesterday: "Yesterday",
+    today: "Today",
+    tomorrow: "Tomorrow",
+    in: "in",
+    ago: "ago"
+  },
+  de: {
+    ...monthTranslation.de,
+    century: { one: "Jahrhundert", other: "Jahrhunderte" },
+    decade: { one: "Jahrzehnt", other: "Jahrzehnte" },
+    year: { one: "Jahr", other: "Jahre" },
+    month: { one: "Monat", other: "Monate" },
+    day: { one: "Tag", other: "Tage" },
+    hour: { one: "Stunde", other: "Stunden" },
+    minute: { one: "Minute", other: "Minuten" },
+    second: { one: "Sekunde", other: "Sekunden" },
+    millisecond: { one: "Millisekunde", other: "Millisekunden" },
+    microsecond: { one: "Mikrosekunde", other: "Mikrosekunden" },
+    nanosecond: { one: "Nanosekunde", other: "Nanosekunden" },
+    yesterday: "Gestern",
+    today: "Heute",
+    tomorrow: "Morgen",
+    in: "in",
+    ago: "vor"
+  }
+};
+
+// src/components/date/DatePicker.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var DatePicker = ({
   overwriteTranslation,
   value = /* @__PURE__ */ new Date(),
@@ -692,7 +796,7 @@ var DatePicker = ({
   className = ""
 }) => {
   const locale = useLocale();
-  const translation = useTranslation(defaultDatePickerTranslation, overwriteTranslation);
+  const translation = useTranslation([timeTranslation], overwriteTranslation);
   const [displayedMonth, setDisplayedMonth] = (0, import_react7.useState)(value);
   const [displayMode, setDisplayMode] = (0, import_react7.useState)(initialDisplay);
   (0, import_react7.useEffect)(() => {
@@ -775,55 +879,115 @@ var DatePicker = ({
             newDate.setHours(value.getHours(), value.getMinutes());
             onChange(newDate);
           },
-          children: translation.today
+          children: translation("today")
         }
       ) })
     ] })
   ] });
 };
 
-// src/components/user-action/DateAndTimePicker.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var defaultTimeTranslation = {
+// src/localization/defaults/form.ts
+var formTranslation = {
   en: {
-    clear: "Clear",
+    all: "All",
+    back: "Back",
+    cancel: "Cancel",
     change: "Change",
-    year: "Year",
-    month: "Month",
-    day: "Day",
-    january: "January",
-    february: "Febuary",
-    march: "March",
-    april: "April",
-    may: "May",
-    june: "June",
-    july: "July",
-    august: "August",
-    september: "September",
-    october: "October",
-    november: "November",
-    december: "December"
+    clear: "Clear",
+    close: "Close",
+    confirm: "Confirm",
+    decline: "Decline",
+    delete: "Delete",
+    discard: "Discard",
+    discardChanges: "Discard Changes",
+    done: "Done",
+    edit: "Edit",
+    enterText: "Enter text here",
+    error: "Error",
+    exit: "Exit",
+    fieldRequiredError: "This field is required.",
+    invalidEmailError: "Please enter a valid email address.",
+    less: "Less",
+    loading: "Loading",
+    maxLengthError: "Maximum length exceeded.",
+    minLengthError: "Minimum length not met.",
+    more: "More",
+    next: "Next",
+    no: "No",
+    none: "None",
+    of: "of",
+    optional: "Optional",
+    pleaseWait: "Please wait...",
+    previous: "Previous",
+    remove: "Remove",
+    required: "Required",
+    reset: "Reset",
+    save: "Save",
+    search: "Search",
+    select: "Select",
+    selectOption: "Select an option",
+    show: "Show",
+    showMore: "Show more",
+    showLess: "Show less",
+    submit: "Submit",
+    success: "Success",
+    update: "Update",
+    unsavedChanges: "Unsaved Changes",
+    unsavedChangesSaveQuestion: "Do you want to save your changes?",
+    yes: "Yes"
   },
   de: {
-    clear: "Entfernen",
+    all: "Alle",
+    back: "Zur\xFCck",
+    cancel: "Abbrechen",
     change: "\xC4ndern",
-    year: "Jahr",
-    month: "Monat",
-    day: "Tag",
-    january: "Januar",
-    february: "Febuar",
-    march: "M\xE4rz",
-    april: "April",
-    may: "Mai",
-    june: "Juni",
-    july: "Juli",
-    august: "August",
-    september: "September",
-    october: "October",
-    november: "November",
-    december: "December"
+    clear: "L\xF6schen",
+    close: "Schlie\xDFen",
+    confirm: "Best\xE4tigen",
+    decline: "Ablehnen",
+    delete: "L\xF6schen",
+    discard: "Verwerfen",
+    discardChanges: "\xC4nderungen Verwerfen",
+    done: "Fertig",
+    edit: "Bearbeiten",
+    enterText: "Text hier eingeben",
+    error: "Fehler",
+    exit: "Beenden",
+    fieldRequiredError: "Dieses Feld ist erforderlich.",
+    invalidEmailError: "Bitte geben Sie eine g\xFCltige E-Mail-Adresse ein.",
+    less: "Weniger",
+    loading: "L\xE4dt",
+    maxLengthError: "Maximale L\xE4nge \xFCberschritten.",
+    minLengthError: "Mindestl\xE4nge nicht erreicht.",
+    more: "Mehr",
+    next: "Weiter",
+    no: "Nein",
+    none: "Nichts",
+    of: "von",
+    optional: "Optional",
+    pleaseWait: "Bitte warten...",
+    previous: "Vorherige",
+    remove: "Entfernen",
+    required: "Erforderlich",
+    reset: "Zur\xFCcksetzen",
+    save: "Speichern",
+    search: "Suche",
+    select: "Select",
+    selectOption: "Option ausw\xE4hlen",
+    show: "Anzeigen",
+    showMore: "Mehr anzeigen",
+    showLess: "Weniger anzeigen",
+    submit: "Abschicken",
+    success: "Erfolg",
+    update: "Update",
+    unsavedChanges: "Ungespeicherte \xC4nderungen",
+    unsavedChangesSaveQuestion: "M\xF6chtest du die \xC4nderungen speichern?",
+    yes: "Ja"
   }
 };
+
+// src/components/user-action/DateAndTimePicker.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var DateTimePicker = ({
   overwriteTranslation,
   value = /* @__PURE__ */ new Date(),
@@ -836,7 +1000,7 @@ var DateTimePicker = ({
   timePickerProps,
   datePickerProps
 }) => {
-  const translation = useTranslation(defaultTimeTranslation, overwriteTranslation);
+  const translation = useTranslation([formTranslation, timeTranslation], overwriteTranslation);
   const useDate = mode === "dateTime" || mode === "date";
   const useTime = mode === "dateTime" || mode === "time";
   let dateDisplay;
@@ -873,13 +1037,13 @@ var DateTimePicker = ({
       timeDisplay
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "row justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "row gap-x-2 mt-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SolidButton, { size: "medium", color: "negative", onClick: onRemove, children: translation.clear }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SolidButton, { size: "medium", color: "negative", onClick: onRemove, children: translation("clear") }),
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         SolidButton,
         {
           size: "medium",
           onClick: () => onFinish(value),
-          children: translation.change
+          children: translation("change")
         }
       )
     ] }) })