Update: Allow also minutes and hours

CarbonPackages · Feb 18, 2025 · 04dfa4f · 04dfa4f
1 parent 30bbdad
commit 04dfa4f
Show file tree

Hide file tree

Showing 22 changed files with 892 additions and 1,890 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,12 @@
+{
+  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "sourceType": "module"
+  },
+  "env": {
+    "es6": true,
+    "browser": true,
+    "node": true
+  }
+}
diff --git a/.gitattributes b/.gitattributes
@@ -1,16 +1,16 @@
 /.github export-ignore
 /Resources/Private/Editor export-ignore
 /.editorconfig export-ignore
+/.eslintignore export-ignore
+/.eslintrc export-ignore
 /.gitattributes export-ignore
 /.gitignore export-ignore
+/.jshintrc export-ignore
 /.nvmrc export-ignore
 /.prettierignore export-ignore
 /.prettierrc export-ignore
 /build.mjs export-ignore
 /CODE_OF_CONDUCT export-ignore
-/eslint.config.js export-ignore
 /Makefile export-ignore
 /package.json export-ignore
 /pnpm-lock.yaml export-ignore
-/tsconfig.json export-ignore
-/types.d.ts export-ignore
diff --git a/.jshintrc b/.jshintrc
@@ -0,0 +1,4 @@
+{
+  "esversion": 6,
+  "asi": true
+}
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-20
+22
diff --git a/Configuration/Settings.Editor.yaml b/Configuration/Settings.Editor.yaml
@@ -3,5 +3,12 @@ Neos:
     Ui:
       frontendConfiguration:
         Carbon.Editor.RelativeDate:
+          timeSpans:
+            minute: false
+            hour: false
+            day: true
+            week: true
+            month: true
+            year: true
           allowFuture: true
           allowPast: true
diff --git a/Makefile b/Makefile
@@ -4,11 +4,11 @@
 
 ## Prettier files
 prettier:
-	@pnpm prettier --write --no-error-on-unmatched-pattern '**/*.{yaml,ts,tsx,mjs,js,md}'
+	@pnpm prettier --write --no-error-on-unmatched-pattern '**/*.{yaml,js,jsx,mjs,js,md}'
 
 ## Watch for changes in files and run prettier
 prettier-watch:
-	@pnpm onchange '**/*.{yaml,ts,tsx,mjs,js,md}' -- pnpm prettier --write --ignore-unknown {{changed}}
+	@pnpm onchange '**/*.{yaml,js,jsx,mjs,js,md}' -- pnpm prettier --write --ignore-unknown {{changed}}
 
 ## Install dependencies and build editor
 production: install prettier build

diff --git a/Resources/Private/Assets/getDate.js b/Resources/Private/Assets/getDate.js
@@ -1,29 +1,37 @@
-function formatDate(date) {
-    return date.toISOString().split("T")[0];
-}
-
-export default function getDate(options, formatDateFunction = formatDate) {
+export default function getDate(options, formatDateFunction) {
     if (!options) {
         return null;
     }
+
     const { unit, amount } = options;
     if (typeof amount != "number") {
         return null;
     }
 
+    if (!formatDateFunction) {
+        if (unit === "hour" || unit === "minute") {
+            formatDateFunction = (date) => date.toISOString();
+        } else {
+            formatDateFunction = (date) => date.toISOString().split("T")[0];
+        }
+    }
+
     const date = new Date();
     if (amount == 0) {
         return formatDateFunction(date);
     }
 
-    if (unit == "year") {
-        return formatDateFunction(new Date(date.setFullYear(date.getFullYear() + amount)));
-    }
-
-    if (unit == "month") {
-        return formatDateFunction(new Date(date.setMonth(date.getMonth() + amount)));
+    switch (unit) {
+        case "year":
+            return formatDateFunction(new Date(date.setFullYear(date.getFullYear() + amount)));
+        case "month":
+            return formatDateFunction(new Date(date.setMonth(date.getMonth() + amount)));
+        case "hour":
+            return formatDateFunction(new Date(date.setHours(date.getHours() + amount)));
+        case "minute":
+            return formatDateFunction(new Date(date.setMinutes(date.getMinutes() + amount)));
+        default:
+            const days = unit == "week" ? amount * 7 : amount;
+            return formatDateFunction(new Date(date.setDate(date.getDate() + days)));
     }
-
-    const days = unit == "week" ? amount * 7 : amount;
-    return formatDateFunction(new Date(date.setDate(date.getDate() + days)));
 }
diff --git a/...vate/Editor/RelativeDate/Tokens.stylex.ts → ...vate/Editor/RelativeDate/Tokens.stylex.js b/...vate/Editor/RelativeDate/Tokens.stylex.ts → ...vate/Editor/RelativeDate/Tokens.stylex.js
diff --git a/...ces/Private/Editor/RelativeDate/index.tsx → ...ces/Private/Editor/RelativeDate/index.jsx b/...ces/Private/Editor/RelativeDate/index.tsx → ...ces/Private/Editor/RelativeDate/index.jsx
@@ -15,6 +15,14 @@ const defaultOptions = {
     allowEmpty: true,
     allowFuture: true,
     allowPast: true,
+    timeSpans: {
+        minute: false,
+        hour: false,
+        day: true,
+        week: true,
+        month: true,
+        year: true,
+    },
 };
 
 const styles = stylex.create({
@@ -44,11 +52,15 @@ const styles = stylex.create({
 function Editor(props) {
     const options = { ...defaultOptions, ...props.config, ...props.options };
     const { value, commit, highlight, i18nRegistry, id } = props;
-    const { disabled, allowEmpty, allowFuture, allowPast } = options;
+    const { disabled, allowEmpty, allowFuture, allowPast, timeSpans } = options;
+    const units = Object.entries(timeSpans)
+        .map(([unit, enabled]) => (enabled ? unit : false))
+        .filter(Boolean);
+    const firstUnit = units[0];
 
     const hasAmount = typeof value?.amount == "number";
     const [amount, setAmount] = useState(hasAmount ? Math.abs(value.amount) : "");
-    const [unit, setUnit] = useState(value?.unit || "day");
+    const [unit, setUnit] = useState(value?.unit || firstUnit);
     const [tense, setTense] = useState(hasAmount ? (value.amount < 0 ? -1 : 1) : allowFuture ? 1 : -1);
     const plural = amount == 1 ? "" : "s";
 
@@ -63,22 +75,14 @@ function Editor(props) {
 
         const newValue = {
             amount: tense * amount,
-            unit,
+            unit: unit || firstUnit,
         };
 
         // Check equality
         if (value?.amount === newValue.amount && value?.unit === newValue.unit) {
             return;
         }
 
-        if (newValue.amount === 0) {
-            commit({
-                amount: 0,
-                unit: "day",
-            });
-            return;
-        }
-
         commit(newValue);
     }, [amount, unit, tense]);
 
@@ -87,21 +91,21 @@ function Editor(props) {
             ? {
                   value: -1,
                   label: i18nRegistry.translate(
-                      `Carbon.Editor.RelativeDate:Main:${amount ? "inThePast" : "currentDate"}`,
+                      `Carbon.Editor.RelativeDate:Main:${amount ? "inThePast" : amount === "" ? "currentDate" : `currentDate.${unit}`}`,
                   ),
               }
             : null,
         allowFuture
             ? {
                   value: 1,
                   label: i18nRegistry.translate(
-                      `Carbon.Editor.RelativeDate:Main:${amount ? "inTheFuture" : "currentDate"}`,
+                      `Carbon.Editor.RelativeDate:Main:${amount ? "inTheFuture" : amount === "" ? "currentDate" : `currentDate.${unit}`}`,
                   ),
               }
             : null,
     ].filter(Boolean);
 
-    const unitOptions = ["day", "week", "month", "year"].map((value) => ({
+    const unitOptions = units.map((value) => ({
         value,
         label: i18nRegistry.translate(`Carbon.Editor.RelativeDate:Main:${value}${plural}`),
     }));
@@ -113,7 +117,7 @@ function Editor(props) {
                     id={id}
                     type="text"
                     value={amount}
-                    onChange={(value: string) => {
+                    onChange={(value) => {
                         const number = parseInt(value);
                         if (isNaN(number)) {
                             setAmount(allowEmpty ? "" : 0);
@@ -122,10 +126,20 @@ function Editor(props) {
                         setAmount(Math.abs(number));
                     }}
                 />
-                <SelectBox options={unitOptions} value={unit} onValueChange={setUnit} disabled={!amount} />
+                <SelectBox
+                    options={unitOptions}
+                    value={unit}
+                    onValueChange={setUnit}
+                    disabled={!amount && amount !== 0}
+                />
             </div>
             <div {...stylex.props(styles.row)}>
-                <SelectBox options={tenseOptions} value={tense} onValueChange={setTense} disabled={!amount} />
+                <SelectBox
+                    options={tenseOptions}
+                    value={tense}
+                    onValueChange={setTense}
+                    disabled={!amount || !allowPast || !allowFuture}
+                />
                 {allowEmpty && (
                     <IconButton
                         style="light"

diff --git a/Resources/Private/Editor/manifest.ts → Resources/Private/Editor/manifest.js b/Resources/Private/Editor/manifest.ts → Resources/Private/Editor/manifest.js
diff --git a/Resources/Private/Translations/de/Main.xlf b/Resources/Private/Translations/de/Main.xlf
@@ -9,8 +9,32 @@
     >
         <body>
             <trans-unit id="currentDate" xml:pace="preserve">
-                <source>current date</source>
-                <target>aktuelles Datum</target>
+                <source>Current time</source>
+                <target>Aktueller Zeitpunkt</target>
+            </trans-unit>
+            <trans-unit id="currentDate.minute" xml:pace="preserve">
+                <source>current minute</source>
+                <target>aktuelle Minute</target>
+            </trans-unit>
+            <trans-unit id="currentDate.hour" xml:pace="preserve">
+                <source>current hour</source>
+                <target>aktuelle Stunde</target>
+            </trans-unit>
+            <trans-unit id="currentDate.day" xml:pace="preserve">
+                <source>current day</source>
+                <target>aktueller Tag</target>
+            </trans-unit>
+            <trans-unit id="currentDate.week" xml:pace="preserve">
+                <source>current week</source>
+                <target>aktuelle Woche</target>
+            </trans-unit>
+            <trans-unit id="currentDate.month" xml:pace="preserve">
+                <source>current month</source>
+                <target>aktueller Monat</target>
+            </trans-unit>
+            <trans-unit id="currentDate.year" xml:pace="preserve">
+                <source>current year</source>
+                <target>aktuelles Jahr</target>
             </trans-unit>
             <trans-unit id="inTheFuture" xml:pace="preserve">
                 <source>in the future</source>
@@ -52,6 +76,22 @@
                 <source>Days</source>
                 <target>Tage</target>
             </trans-unit>
+            <trans-unit id="hour" xml:pace="preserve">
+                <source>Hour</source>
+                <target>Stunde</target>
+            </trans-unit>
+            <trans-unit id="hours" xml:pace="preserve">
+                <source>Hours</source>
+                <target>Stunden</target>
+            </trans-unit>
+            <trans-unit id="minute" xml:pace="preserve">
+                <source>Minute</source>
+                <target>Minute</target>
+            </trans-unit>
+            <trans-unit id="minutes" xml:pace="preserve">
+                <source>Minutes</source>
+                <target>Minuten</target>
+            </trans-unit>
             <trans-unit id="reset" xml:space="preserve">
                 <source>Reset</source>
                 <target>Zurücksetzen</target>

diff --git a/Resources/Private/Translations/en/Main.xlf b/Resources/Private/Translations/en/Main.xlf
@@ -8,7 +8,25 @@
     >
         <body>
             <trans-unit id="currentDate" xml:pace="preserve">
-                <source>current date</source>
+                <source>No time period selected</source>
+            </trans-unit>
+            <trans-unit id="currentDate.minute" xml:pace="preserve">
+                <source>current minute</source>
+            </trans-unit>
+            <trans-unit id="currentDate.hour" xml:pace="preserve">
+                <source>current hour</source>
+            </trans-unit>
+            <trans-unit id="currentDate.day" xml:pace="preserve">
+                <source>current day</source>
+            </trans-unit>
+            <trans-unit id="currentDate.week" xml:pace="preserve">
+                <source>current week</source>
+            </trans-unit>
+            <trans-unit id="currentDate.month" xml:pace="preserve">
+                <source>current month</source>
+            </trans-unit>
+            <trans-unit id="currentDate.year" xml:pace="preserve">
+                <source>current year</source>
             </trans-unit>
             <trans-unit id="inTheFuture" xml:pace="preserve">
                 <source>in the future</source>
@@ -40,6 +58,18 @@
             <trans-unit id="days" xml:space="preserve">
                 <source>Days</source>
             </trans-unit>
+            <trans-unit id="hour" xml:pace="preserve">
+                <source>Hour</source>
+            </trans-unit>
+            <trans-unit id="hours" xml:pace="preserve">
+                <source>Hours</source>
+            </trans-unit>
+            <trans-unit id="minute" xml:pace="preserve">
+                <source>Minute</source>
+            </trans-unit>
+            <trans-unit id="minutes" xml:pace="preserve">
+                <source>Minutes</source>
+            </trans-unit>
             <trans-unit id="reset" xml:space="preserve">
                 <source>Reset</source>
             </trans-unit>

diff --git a/Resources/Public/Plugin.css b/Resources/Public/Plugin.css
@@ -1,10 +1,10 @@
-:root{--x7lk6cs:calc(var(--spacing-Full) + var(--spacing-Half));--x57jsby:var(--spacing-Full);--xuudaiz:var(--spacing-Half);--xgx6g7s:var(--spacing-Quarter);--xw3bz76:2px;--xpxh7pw:var(--spacing-GoldenUnit);}
-:root{--xlsgbtb:var(--colors-PrimaryBlue);--x1ycuuv6:var(--colors-PrimaryBlueHover);--x4ya1z1:var(--colors-ContrastNeutral);--x10qzjlw:var(--colors-Warn);--x1f4qrrq:var(--colors-Error);}
-.xiplo1c:not(#\#){border-radius:var(--xw3bz76)}
-.xnfjsdl:not(#\#){gap:var(--xuudaiz)}
-.xqu7kxq:not(#\#):not(#\#){box-shadow:0 0 0 2px var(--x10qzjlw)}
-.x1h6gzvc:not(#\#):not(#\#){cursor:not-allowed}
-.x78zum5:not(#\#):not(#\#){display:flex}
-.xdt5ytf:not(#\#):not(#\#){flex-direction:column}
-.x190dgpg:not(#\#):not(#\#){opacity:.65}
-.x1g8rrie:where(*) *:not(#\#):not(#\#){pointer-events:none}
+:root, .newsletter-9l29yl{--newsletter-nggdi0:var(--colors-PrimaryBlue);--newsletter-ntv7pa:var(--colors-PrimaryBlueHover);--newsletter-ebdxud:var(--colors-ContrastNeutral);--newsletter-1r28ar4:var(--colors-Warn);--newsletter-1e13dgl:var(--colors-Error);}
+:root, .newsletter-144dbq5{--newsletter-qvrapq:calc(var(--spacing-Full) + var(--spacing-Half));--newsletter-hccsrz:var(--spacing-Full);--newsletter-acnsx1:var(--spacing-Half);--newsletter-14xmwp5:var(--spacing-Quarter);--newsletter-dg5z33:2px;--newsletter-1x7d55:var(--spacing-GoldenUnit);}
+.newsletter-b1fjnu:not(#\#){border-radius:var(--newsletter-dg5z33)}
+.newsletter-2arzkr:not(#\#){gap:var(--newsletter-acnsx1)}
+.newsletter-ifc5da:not(#\#):not(#\#){box-shadow:0 0 0 2px var(--newsletter-1r28ar4)}
+.newsletter-1h6gzvc:not(#\#):not(#\#){cursor:not-allowed}
+.newsletter-78zum5:not(#\#):not(#\#){display:flex}
+.newsletter-dt5ytf:not(#\#):not(#\#){flex-direction:column}
+.newsletter-190dgpg:not(#\#):not(#\#){opacity:.65}
+.newsletter-1g8rrie:where(*) *:not(#\#):not(#\#){pointer-events:none}