@prokodo/ui 0.1.1 → 0.1.3

package/README.md

@@ -192,6 +192,7 @@ export default function GalleryPage() {
 | PostWidgetCarousel  |               ✅               |                 ✅                 |
 | ProgressBar         |               ✅               |                 ✅                 |
 | Quote               |               ✅               |                 –                  |
+| Rating              |               ✅               |                 ✅                 |
 | RichText            |               ✅               |                 ✅                 |
 | Select              |               ✅               |                 ✅                 |
 | SideNav             |               ✅               |                 ✅                 |

package/dist/components/accordion/Accordion.base.module.scss.js

@@ -4,8 +4,13 @@ const styles = {
   "prokodo-Accordion__item": "prokodo-Accordion__item",
   "prokodo-Accordion__item--is-expanded": "prokodo-Accordion__item--is-expanded",
   "prokodo-Accordion__header": "prokodo-Accordion__header",
+  "prokodo-Accordion__header__toggle": "prokodo-Accordion__header__toggle",
+  "prokodo-Accordion__header__actions": "prokodo-Accordion__header__actions",
+  "prokodo-Accordion__header__actions__wrapper": "prokodo-Accordion__header__actions__wrapper",
+  "prokodo-Accordion__header__icons": "prokodo-Accordion__header__icons",
+  "prokodo-Accordion__header__wrapper": "prokodo-Accordion__header__wrapper",
   accordionBorderShift,
-  "prokodo-Accordion__header--is-expanded": "prokodo-Accordion__header--is-expanded",
+  "prokodo-Accordion__header__wrapper--is-expanded": "prokodo-Accordion__header__wrapper--is-expanded",
   "prokodo-Accordion__title": "prokodo-Accordion__title",
   "prokodo-Accordion__icon": "prokodo-Accordion__icon",
   "prokodo-Accordion__icon--is-hidden": "prokodo-Accordion__icon--is-hidden",

package/dist/components/accordion/Accordion.view.js

@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { jsxs, jsx } from "react/jsx-runtime";
 import { create } from "../../helpers/bem.js";
-import { isNull } from "../../helpers/validations.js";
+import { isNull, isArray } from "../../helpers/validations.js";
 import styles from "./Accordion.base.module.scss.js";
 import { AccordionEffectsLoader } from "./Accordion.effects.client.js";
 import { Headline } from "../headline/Headline.js";
@@ -32,65 +32,90 @@ function AccordionView({
           const {
             title,
             renderHeader,
+            renderHeaderActions,
             renderContent,
             actions,
             className: itemCls
           } = item;
           const accId = `${id}-${title}`;
           const isExpanded = expandedIndex === index;
+          const accHeaderProps = {
+            "aria-controls": `${accId}-content`,
+            "aria-expanded": isExpanded,
+            role: "button",
+            tabIndex: 0,
+            onClick: onToggle ? (e) => onToggle(index, e) : void 0,
+            onKeyDown: onToggle ? (e) => {
+              if (e.key === "Enter" || e.key === " ") onToggle(index, e);
+            } : void 0
+          };
           return /* @__PURE__ */ jsxs(
             "div",
             {
               className: bem("item", { "is-expanded": isExpanded }, itemCls),
               children: [
-                /* @__PURE__ */ jsxs(
+                /* @__PURE__ */ jsx(
                   "div",
                   {
-                    "aria-controls": `${accId}-content`,
-                    "aria-expanded": isExpanded,
-                    className: bem("header", { "is-expanded": isExpanded }),
-                    id: `${accId}-header`,
-                    role: "button",
-                    tabIndex: 0,
-                    onClick: onToggle ? (e) => onToggle(index, e) : void 0,
-                    onKeyDown: onToggle ? (e) => {
-                      if (e.key === "Enter" || e.key === " ") onToggle(index, e);
-                    } : void 0,
-                    children: [
-                      !isNull(renderHeader) ? renderHeader : /* @__PURE__ */ jsx(
-                        Headline,
-                        {
-                          animated: true,
-                          className: bem("title"),
-                          highlight: isExpanded,
-                          size: "xs",
-                          type: "h3",
-                          variant: isExpanded ? "primary" : "inherit",
-                          ...item.titleOptions ?? titleOptions,
-                          children: title
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        Icon,
-                        {
-                          className: bem("icon", { "is-hidden": isExpanded }),
-                          color: "inherit",
-                          name: "PlusSignIcon",
-                          size: "sm",
-                          ...iconProps
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        Icon,
-                        {
-                          className: bem("icon", { "is-hidden": !isExpanded }),
-                          color: "inherit",
-                          name: "MinusSignIcon",
-                          size: "sm",
-                          ...iconProps
-                        }
-                      )
-                    ]
+                    className: bem("header__wrapper", { "is-expanded": isExpanded }),
+                    children: /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        ...accHeaderProps,
+                        className: bem("header__toggle", { "is-expanded": isExpanded }),
+                        id: `${accId}-header`,
+                        children: [
+                          !isNull(renderHeader) ? renderHeader : /* @__PURE__ */ jsx(
+                            Headline,
+                            {
+                              animated: true,
+                              className: bem("title"),
+                              highlight: isExpanded,
+                              size: "xs",
+                              type: "h3",
+                              variant: isExpanded ? "primary" : "inherit",
+                              ...item.titleOptions ?? titleOptions,
+                              children: title
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs("div", { className: bem("header__actions__wrapper"), children: [
+                            !isNull(renderHeaderActions) && // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+                            /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                className: bem("header__actions"),
+                                onClick: /* @__PURE__ */ __name((e) => e.stopPropagation(), "onClick"),
+                                onMouseDown: /* @__PURE__ */ __name((e) => e.stopPropagation(), "onMouseDown"),
+                                onKeyDown: /* @__PURE__ */ __name((e) => e.key === "Enter" ? e.stopPropagation() : void 0, "onKeyDown"),
+                                children: renderHeaderActions
+                              }
+                            ),
+                            /* @__PURE__ */ jsxs("div", { className: bem("header__icons"), children: [
+                              /* @__PURE__ */ jsx(
+                                Icon,
+                                {
+                                  className: bem("icon", { "is-hidden": isExpanded }),
+                                  color: "inherit",
+                                  name: "PlusSignIcon",
+                                  size: "sm",
+                                  ...iconProps
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                Icon,
+                                {
+                                  className: bem("icon", { "is-hidden": !isExpanded }),
+                                  color: "inherit",
+                                  name: "MinusSignIcon",
+                                  size: "sm",
+                                  ...iconProps
+                                }
+                              )
+                            ] })
+                          ] })
+                        ]
+                      }
+                    )
                   }
                 ),
                 /* @__PURE__ */ jsxs(
@@ -103,7 +128,7 @@ function AccordionView({
                     role: "region",
                     children: [
                       !isNull(renderContent) && /* @__PURE__ */ jsx(Animated, { children: renderContent }),
-                      actions !== void 0 && (actions == null ? void 0 : actions.length) ? /* @__PURE__ */ jsx("div", { className: bem("actions"), children: actions.map((action) => /* @__PURE__ */ jsx(
+                      isArray(actions) ? /* @__PURE__ */ jsx("div", { className: bem("actions"), children: actions.map((action) => /* @__PURE__ */ jsx(
                         Button,
                         {
                           ...action

package/dist/components/card/Card.view.js

@@ -101,7 +101,6 @@ function CardView({
             {
               alt: "card background",
               className: bem("background", void 0, backgroundProps == null ? void 0 : backgroundProps.className),
-              imageComponent: (backgroundProps == null ? void 0 : backgroundProps.imageComponent) ?? "img",
               src: background,
               ...backgroundProps
             }

package/dist/components/dialog/Dialog.view.js

@@ -2,6 +2,7 @@ var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { jsxs, jsx } from "react/jsx-runtime";
 import { create } from "../../helpers/bem.js";
+import { isNumber } from "../../helpers/validations.js";
 import styles from "./Dialog.module.scss.js";
 import { Button } from "../button/Button.js";
 import { Headline } from "../headline/Headline.js";
@@ -21,6 +22,7 @@ function DialogView({
   containerChildren,
   className,
   classNameHeader,
+  height,
   scroll = "paper",
   fullScreen = false,
   titleProps = {},
@@ -41,6 +43,9 @@ function DialogView({
     fullScreen,
     "is-visible": Boolean(open)
   };
+  const styleModifier = isNumber(height) ? {
+    maxHeight: `${height}px`
+  } : void 0;
   const renderDialog = /* @__PURE__ */ __name(() => {
     var _a;
     return /* @__PURE__ */ jsxs(
@@ -52,74 +57,83 @@ function DialogView({
         role: "dialog",
         ...rest,
         className: bem(void 0, wrapperMods, className),
+        style: styleModifier,
         children: [
-          /* @__PURE__ */ jsxs("div", { ref: containerRef, className: bem("container", containerMods), children: [
-            /* @__PURE__ */ jsxs("div", { className: bem("header", void 0, classNameHeader), children: [
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx(
-                  Headline,
-                  {
-                    ...titleProps,
-                    className: bem("title", { "is-hidden": hideTitle }),
-                    id: "dialog-title",
-                    children: title
-                  }
-                ),
-                renderHeader == null ? void 0 : renderHeader()
-              ] }),
-              !Boolean(hideCloseButton) && /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  ...closeButtonProps,
-                  ref: closeButtonRef,
-                  "aria-label": (closeButtonProps == null ? void 0 : closeButtonProps["aria-label"]) ?? (translations == null ? void 0 : translations.close),
-                  className: bem(
-                    "header__button",
-                    void 0,
-                    closeButtonProps == null ? void 0 : closeButtonProps.className
-                  ),
-                  onClick: onClose,
-                  onKeyDown: onCloseKeyDown,
-                  children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: containerRef,
+              className: bem("container", containerMods),
+              style: styleModifier,
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: bem("header", void 0, classNameHeader), children: [
+                  /* @__PURE__ */ jsxs("div", { children: [
                     /* @__PURE__ */ jsx(
-                      Icon,
+                      Headline,
                       {
-                        name: "Cancel01Icon",
-                        size: "xs",
-                        ...closeButtonProps == null ? void 0 : closeButtonProps.iconProps,
-                        className: bem(
-                          "header__button__icon",
-                          void 0,
-                          (_a = closeButtonProps == null ? void 0 : closeButtonProps.iconProps) == null ? void 0 : _a.className
-                        )
+                        ...titleProps,
+                        className: bem("title", { "is-hidden": hideTitle }),
+                        id: "dialog-title",
+                        children: title
                       }
                     ),
-                    (closeButtonProps == null ? void 0 : closeButtonProps.title) ?? (translations == null ? void 0 : translations.close) ?? "Close"
-                  ]
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx("div", { "aria-hidden": "true", tabIndex: 0 }),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                ...contentProps,
-                ref: contentRef,
-                id: "dialog-content",
-                className: bem(
-                  "content",
-                  { [`scroll-${scroll}`]: true },
-                  contentProps.className
+                    renderHeader == null ? void 0 : renderHeader()
+                  ] }),
+                  !Boolean(hideCloseButton) && /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      ...closeButtonProps,
+                      ref: closeButtonRef,
+                      "aria-label": (closeButtonProps == null ? void 0 : closeButtonProps["aria-label"]) ?? (translations == null ? void 0 : translations.close),
+                      className: bem(
+                        "header__button",
+                        void 0,
+                        closeButtonProps == null ? void 0 : closeButtonProps.className
+                      ),
+                      onClick: onClose,
+                      onKeyDown: onCloseKeyDown,
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          Icon,
+                          {
+                            name: "Cancel01Icon",
+                            size: "xs",
+                            ...closeButtonProps == null ? void 0 : closeButtonProps.iconProps,
+                            className: bem(
+                              "header__button__icon",
+                              void 0,
+                              (_a = closeButtonProps == null ? void 0 : closeButtonProps.iconProps) == null ? void 0 : _a.className
+                            )
+                          }
+                        ),
+                        (closeButtonProps == null ? void 0 : closeButtonProps.title) ?? (translations == null ? void 0 : translations.close) ?? "Close"
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("div", { "aria-hidden": "true", tabIndex: 0 }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    ...contentProps,
+                    ref: contentRef,
+                    id: "dialog-content",
+                    className: bem(
+                      "content",
+                      { [`scroll-${scroll}`]: true },
+                      contentProps.className
+                    ),
+                    children
+                  }
                 ),
-                children
-              }
-            ),
-            actions.length > 0 && /* @__PURE__ */ jsxs("div", { className: bem("actions"), children: [
-              /* @__PURE__ */ jsx("div", { "aria-hidden": "true", tabIndex: 0 }),
-              actions.map((action) => /* @__PURE__ */ jsx(Button, { ...action, title: (action == null ? void 0 : action.title) ?? "" }, action.id)),
-              /* @__PURE__ */ jsx("div", { "aria-hidden": "true", tabIndex: 0 })
-            ] })
-          ] }),
+                actions.length > 0 && /* @__PURE__ */ jsxs("div", { className: bem("actions"), children: [
+                  /* @__PURE__ */ jsx("div", { "aria-hidden": "true", tabIndex: 0 }),
+                  actions.map((action) => /* @__PURE__ */ jsx(Button, { ...action, title: (action == null ? void 0 : action.title) ?? "" }, action.id)),
+                  /* @__PURE__ */ jsx("div", { "aria-hidden": "true", tabIndex: 0 })
+                ] })
+              ]
+            }
+          ),
           containerChildren
         ]
       }

package/dist/components/form/Form.view.js

@@ -36,76 +36,87 @@ const FormView = /* @__PURE__ */ __name(({
   defaultFields: _defaultFields,
   messages: _messages,
   ...htmlProps
-}) => /* @__PURE__ */ jsxs(
-  "form",
-  {
-    ...htmlProps,
-    noValidate: true,
-    action,
-    "aria-labelledby": `${id}-heading`,
-    className: bem(void 0, void 0, className),
-    id,
-    onSubmit: typeof action === "function" || typeof action === "string" ? void 0 : onFormSubmit,
-    children: [
-      /* @__PURE__ */ jsx(
-        Headline,
-        {
-          type: "h2",
-          ...headlineProps,
-          id: `${id}-heading`,
-          className: bem(
-            "label",
-            {
-              "is-hidden": Boolean(hideHeadline)
-            },
-            headlineProps == null ? void 0 : headlineProps.className
-          ),
-          children: label
-        }
-      ),
-      /* @__PURE__ */ jsxs(Grid, { className: bem("grid"), spacing: 2, children: [
-        isArray(formState) && formState.map((field) => /* @__PURE__ */ createElement(
-          FormField,
-          {
-            ...field,
-            key: field.name,
-            disabled: disabled !== void 0 ? disabled : field == null ? void 0 : field.disabled,
-            messagesFields,
-            variant,
-            ...fieldProps
-          }
-        )),
-        children,
+}) => {
+  const {
+    value: hpValue,
+    onChange: hpOnChange,
+    readOnly: hpReadOnly,
+    ...honeypotRest
+  } = honeypot;
+  const honeypotReadOnly = hpReadOnly !== void 0 ? hpReadOnly : hpValue !== void 0 && hpOnChange == null;
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      ...htmlProps,
+      noValidate: true,
+      action,
+      "aria-labelledby": `${id}-heading`,
+      className: bem(void 0, void 0, className),
+      id,
+      onSubmit: typeof action === "function" || typeof action === "string" ? void 0 : onFormSubmit,
+      children: [
         /* @__PURE__ */ jsx(
-          "input",
-          {
-            "aria-hidden": "true",
-            className: bem("hp"),
-            id: "hp",
-            name: "hp",
-            type: "text",
-            ...honeypot
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: bem("footer"), children: [
-        (hideResponse === false || hideResponse === void 0) && /* @__PURE__ */ jsx(FormResponse, { messages: formMessages }),
-        !isNull(button) && Boolean(isHoneypotEmpty) && /* @__PURE__ */ jsx(
-          Button,
+          Headline,
           {
-            "aria-label": "Submit form",
-            title: "Submit",
-            type: "submit",
-            ...button,
-            className: bem("footer__submit", void 0, button == null ? void 0 : button.className),
-            color: (button == null ? void 0 : button.color) ?? variant,
-            disabled: Boolean(formMessages == null ? void 0 : formMessages.errors) || !isFormValid
+            type: "h2",
+            ...headlineProps,
+            id: `${id}-heading`,
+            className: bem(
+              "label",
+              {
+                "is-hidden": Boolean(hideHeadline)
+              },
+              headlineProps == null ? void 0 : headlineProps.className
+            ),
+            children: label
           }
-        )
-      ] })
-    ]
-  }
-), "FormView");
+        ),
+        /* @__PURE__ */ jsxs(Grid, { className: bem("grid"), spacing: 2, children: [
+          isArray(formState) && formState.map((field) => /* @__PURE__ */ createElement(
+            FormField,
+            {
+              ...field,
+              key: field.name,
+              disabled: disabled !== void 0 ? disabled : field == null ? void 0 : field.disabled,
+              messagesFields,
+              variant,
+              ...fieldProps
+            }
+          )),
+          children,
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              "aria-hidden": "true",
+              className: bem("hp"),
+              id: "hp",
+              name: "hp",
+              type: "text",
+              ...honeypotRest,
+              readOnly: honeypotReadOnly,
+              value: hpValue
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: bem("footer"), children: [
+          (hideResponse === false || hideResponse === void 0) && /* @__PURE__ */ jsx(FormResponse, { messages: formMessages }),
+          !isNull(button) && Boolean(isHoneypotEmpty) && /* @__PURE__ */ jsx(
+            Button,
+            {
+              "aria-label": "Submit form",
+              title: "Submit",
+              type: "submit",
+              ...button,
+              className: bem("footer__submit", void 0, button == null ? void 0 : button.className),
+              color: (button == null ? void 0 : button.color) ?? variant,
+              disabled: Boolean(formMessages == null ? void 0 : formMessages.errors) || !isFormValid
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}, "FormView");
 export {
   FormView
 };

package/dist/components/form/FormField.client.js

@@ -5,6 +5,7 @@ import { jsx } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { create } from "../../helpers/bem.js";
 import styles from "./FormField.module.scss.js";
+import { Rating } from "../rating/Rating.js";
 import { DynamicList } from "../dynamic-list/DynamicList.js";
 import { GridRow } from "../grid/GridRow.js";
 import { DatePicker } from "../datePicker/DatePicker.js";
@@ -22,7 +23,7 @@ function FormFieldClient({
   onValidate,
   ...props
 }) {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const renderFieldContainer = useCallback(
     (children) => /* @__PURE__ */ jsx(GridRow, { className: bem(), xs: 12, children }),
     []
@@ -110,6 +111,22 @@ function FormFieldClient({
           }
         )
       );
+    case "rating":
+      return renderFieldContainer(
+        /* @__PURE__ */ jsx(
+          Rating,
+          {
+            priority: true,
+            ...props,
+            errorTranslations: (_d = messagesFields == null ? void 0 : messagesFields.errors) == null ? void 0 : _d.input,
+            onValidate: /* @__PURE__ */ __name((_, err) => onValidate == null ? void 0 : onValidate(props, err), "onValidate"),
+            onChange: /* @__PURE__ */ __name((e) => {
+              var _a2;
+              return onChange == null ? void 0 : onChange(props, (_a2 = e == null ? void 0 : e.value) == null ? void 0 : _a2.toString());
+            }, "onChange")
+          }
+        )
+      );
     default:
       return null;
   }

package/dist/components/image/Image.client.js

@@ -13,11 +13,11 @@ const ImageClient = /* @__PURE__ */ __name(({
   containerClassName,
   captionClassName,
   className,
-  imageComponent,
   ...props
 }) => {
+  console.log(props);
   const { imageComponent: ctxImage } = useUIRuntime();
-  const CustomImage = imageComponent ?? ctxImage ?? "img";
+  const CustomImage = ctxImage ?? "img";
   const renderImage = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsx(
     CustomImage,
     {

package/dist/components/image/Image.js

@@ -6,7 +6,7 @@ const Image = createIsland({
   name: "Image",
   Server: ImageServer,
   loadLazy: /* @__PURE__ */ __name(() => import("./Image.lazy.js"), "loadLazy"),
-  isInteractive: /* @__PURE__ */ __name((p) => typeof p.imageComponent === "function", "isInteractive")
+  isInteractive: /* @__PURE__ */ __name(() => true, "isInteractive")
 });
 export {
   Image

package/dist/components/image/Image.lazy.js

@@ -9,7 +9,7 @@ const Image_lazy = createLazyWrapper({
   Client: ImageClient,
   Server: ImageServer,
   // treat as interactive if a custom image component is a function (e.g. NextImage)
-  isInteractive: /* @__PURE__ */ __name((p) => typeof p.imageComponent === "function", "isInteractive")
+  isInteractive: /* @__PURE__ */ __name(() => true, "isInteractive")
 });
 export {
   Image_lazy as default

package/dist/components/image/Image.server.js

@@ -14,11 +14,12 @@ function toImgOnlyProps(p) {
     _placeholder,
     _blurDataURL,
     _priority,
+    // internal next/image flag – ignorieren
+    // unsere öffentliche API: <Image priority /> → auf <img> mappen
+    priority,
     _quality,
     // Note: sizes *is* valid on <img> when it's a string, so we won't strip it
     _onLoadingComplete,
-    // our runtime wiring we never want on <img>
-    _imageComponent,
     ...rest
   } = p;
   let src;
@@ -42,6 +43,10 @@ function toImgOnlyProps(p) {
     width,
     height
   };
+  if (Boolean(priority)) {
+    imgProps.loading = "eager";
+    imgProps.fetchPriority = "high";
+  }
   return imgProps;
 }
 __name(toImgOnlyProps, "toImgOnlyProps");
@@ -53,14 +58,7 @@ const ImageServer = /* @__PURE__ */ __name(({
   className,
   ...rawProps
 }) => {
-  if (process.env.NODE_ENV !== "production" && typeof rawProps.imageComponent === "function") {
-    console.error(
-      "[UI] Do not pass function props (imageComponent) to <Image> on the server. Use UIRuntimeProvider in the parent app instead.",
-      rawProps
-    );
-  }
   const {
-    imageComponent: _dropImageComponent,
     onClick: _dropClick,
     onKeyDown: _dropKey,
     ...rest