@vonaffenfels/slate-editor 1.1.34 → 1.1.37

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/slate-editor",
-    "version": "1.1.34",
+    "version": "1.1.37",
     "description": "",
     "main": "dist/index.js",
     "scripts": {
@@ -72,7 +72,7 @@
         "cssnano": "^5.0.1",
         "escape-html": "^1.0.3"
     },
-    "gitHead": "1e3ea5ff0c721c70b372b3507f1c2ee1f4ff270c",
+    "gitHead": "23bd1926bceee0ce73a5d25f021c544ead009f77",
     "publishConfig": {
         "access": "public"
     }

package/scss/sidebarEditor.scss

@@ -28,6 +28,7 @@
 
     input[type="text"],
     input[type="time"],
+    input[type="date"],
     input[type="number"],
     input[type="color"],
     input[type="datetime-local"],

package/src/Nodes/Storybook.js

@@ -144,6 +144,9 @@ const StorybookNodeComponent = ({
                     title="Klicken, um das Element zu konfigurieren"
                     onClick={onEditClick}>
                     <div className="absolute right-0 top-0 m-2">
+                        <span className="mr-2">
+                            {[element?.attributes?.visibleFromDate, element?.attributes?.visibleToDate].filter(Boolean).map((date) => new Date(date).toLocaleString?.()).join(" - ")}
+                        </span>
                         <FontAwesomeIcon
                             icon={faDesktop}
                             color={element?.attributes?.hideOnDesktop ? "lightgray" : "black"}

package/src/Nodes/StorybookDisplay.js

@@ -36,6 +36,16 @@ export const StorybookDisplay = (props) => {
         };
     }, [elRef.current]);
 
+    let currentDate = new Date();
+
+    if (!isEditor && element?.attributes?.visibleFromDate && new Date(element?.attributes?.visibleFromDate) > currentDate) {
+        return;
+    }
+
+    if (!isEditor && element?.attributes?.visibleToDate && new Date(element?.attributes?.visibleToDate) < currentDate) {
+        return;
+    }
+
     if (element.isEmpty || !element.block) {
         return <EmptyBlock {...element.attributes} />;
     }

package/src/SidebarEditor/Fields/DateTime.js

@@ -0,0 +1,55 @@
+import classNames from "classnames";
+
+export const DateTime = ({
+    value,
+    onChange,
+    className,
+    inline,
+    ...props
+}) => {
+    // Separate date and time values
+    const dateValue = value ? value.split("T")[0] : "";
+    const timeValue = value ? value.split("T")[1] : "";
+
+    // Handle changes for date and time inputs
+    const handleDateChange = (e) => {
+        const newDate = e.target.value;
+        const newDateTime = `${newDate}T${timeValue || "00:00"}`;
+        onChange(newDateTime);
+    };
+
+    const handleTimeChange = (e) => {
+        const newTime = e.target.value;
+        const newDateTime = `${dateValue || "1970-01-01"}T${newTime}`;
+        onChange(newDateTime);
+    };
+
+    return (
+        <div className={classNames(className, "grid gap-2", {
+            "grid-cols-2": inline,
+            "grid-cols-1": !inline,
+        })}>
+            {/* Date input */}
+            <input
+                type="date"
+                className="w-full"
+                value={dateValue}
+                onChange={handleDateChange}
+                {...props}
+            />
+
+            {/* Time input */}
+            <input
+                type="time"
+                className="w-full"
+                value={timeValue}
+                onChange={handleTimeChange}
+                {...props}
+            />
+
+            {!!value && (
+                <button className="button button--tertiary" onClick={() => onChange(undefined)}>Zurücksetzen</button>
+            )}
+        </div>
+    );
+};

package/src/SidebarEditor.js

@@ -9,6 +9,7 @@ import {
     CollapsableMenu, CollapsableMenuItem,
 } from "./CollapsableMenu/CollapsableMenu";
 import {Switch} from "./SidebarEditor/Fields/Switch";
+import {DateTime} from "./SidebarEditor/Fields/DateTime";
 
 const SidebarEditor = ({
     sdk,
@@ -270,6 +271,56 @@ const SidebarEditor = ({
         );
     };
 
+    const handleInfoClick = () => {
+        let message = "";
+
+        if (!story?.argTypes || !storybookElement) {
+            return;
+        }
+
+        Object.keys(story.argTypes).forEach((key, index) => {
+            const argType = story.argTypes[key];
+            const attribute = storybookElement.attributes?.[key];
+
+            if (!argType || attribute === undefined || attribute === "") {
+                return;
+            }
+
+            if (index !== 0) {
+                message += " | ";
+            }
+
+            if (Array.isArray(attribute)) {
+                message += `${argType.name}: ${attribute.length} Elemente`;
+                return;
+            }
+
+            switch (typeof attribute) {
+                case "boolean":
+                    message += `${argType.name}: ${attribute ? "Ja" : "Nein"}`;
+                    break;
+                case "number":
+                    message += `${argType.name}: ${attribute}`;
+                    break;
+                case "object":
+                    message += `${argType.name}: ${JSON.stringify(attribute, null, 2)}`;
+                    break;
+                default:
+                    message += `${argType.name}: "${attribute}"`;
+            }
+        });
+
+        sdk.dialogs
+            .openAlert({
+                title: 'Info',
+                message: message || 'Keine Informationen verfügbar',
+                confirmLabel: "Schließen",
+            })
+            .then((result) => {
+                // `result` is always `true`, can be skipped
+            });
+    };
+
     return (
         <div id="sidebar-editor-wrapper">
             <div id="sidebar-editor">
@@ -327,8 +378,9 @@ const SidebarEditor = ({
                                                     hinzufügen</CollapsableMenuItem>
                                                 <CollapsableMenuItem onClick={() => onInsert("below")}>Danach
                                                     hinzufügen</CollapsableMenuItem>
+                                                <CollapsableMenuItem onClick={handleInfoClick}>Info</CollapsableMenuItem>
                                                 <div className="px-4 pb-2 pt-1">
-                                                    <b className="mb-1 block text-sm">Sichtbar auf:</b>
+                                                    <b className="mb-1 block text-sm">Sichtbarkeit</b>
                                                     <Switch
                                                         value={!storybookElement.attributes.hideOnDesktop}
                                                         label="Desktop"
@@ -344,6 +396,10 @@ const SidebarEditor = ({
                                                         label="Smartphone"
                                                         className="mb-2"
                                                         onClick={() => handleFieldValueChange("hideOnSmartphone", !storybookElement.attributes.hideOnSmartphone)}/>
+                                                    <label className="mb-1 block">Sichtbar von</label>
+                                                    <DateTime className="mb-2" value={storybookElement.attributes.visibleFromDate} onChange={v => handleFieldValueChange("visibleFromDate", v)} />
+                                                    <label className="mb-1 block">Sichtbar bis</label>
+                                                    <DateTime className="mb-2" value={storybookElement.attributes.visibleToDate} onChange={v => handleFieldValueChange("visibleToDate", v)} />
                                                 </div>
                                             </CollapsableMenu>
                                         </div>