npm - @prokodo/ui - Versions diffs - 0.0.56 → 0.1.0 - Mend

@prokodo/ui 0.0.56 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/README.md +80 -2
package/dist/components/image/Image.client.js +39 -0
package/dist/components/image/Image.js +8 -30
package/dist/components/image/Image.lazy.js +16 -0
package/dist/components/image/Image.server.js +88 -0
package/dist/components/link/Link.client.js +4 -1
package/dist/components/link/Link.server.js +14 -2
package/dist/constants/project.js +1 -1
package/dist/helpers/createIsland.js +11 -20
package/dist/helpers/runtime.client.js +15 -0
package/dist/index.js +4 -1
package/dist/tsconfig.build.tsbuildinfo +1 -1
package/dist/types/components/image/Image.client.d.ts +4 -0
package/dist/types/components/image/Image.d.ts +3 -2
package/dist/types/components/image/Image.lazy.d.ts +5 -0
package/dist/types/components/image/Image.server.d.ts +4 -0
package/dist/types/components/link/Link.server.d.ts +1 -1
package/dist/types/helpers/runtime.client.d.ts +15 -0
package/dist/types/index.d.ts +1 -0
package/dist/ui.css +49 -129
package/package.json +10 -5

package/README.md CHANGED Viewed

@@ -32,6 +32,8 @@
 [![License: BUSL-1.1](https://img.shields.io/badge/license-BUSL--1.1-blue.svg)](LICENSE)
 [![Storybook](https://img.shields.io/badge/storybook-ui.prokodo.com-ff4785?logo=storybook&logoColor=white)](https://ui.prokodo.com)
 [![bundlephobia](https://img.shields.io/bundlephobia/minzip/@prokodo/ui?label=bundle%20size&style=flat&color=blue)](https://bundlephobia.com/result?p=@prokodo/ui)
+[![Next.js](https://img.shields.io/badge/Next.js-13–16-black)](#)
+[![Turbopack](https://img.shields.io/badge/Works%20with-Turbopack-000)](#)
 ---
@@ -44,7 +46,9 @@
 - 🧪 **Reliable**: Fully tested with Jest and Testing Library
 - 📚 **Storybook**: Explore the components at [ui.prokodo.com](https://ui.prokodo.com)
 - 📦 **Ready-to-install**: Distributed via npm for non-production use under the BUSL-1.1 license
-- 🧱 **Optimized for SSR**: Works great with Next.js and React Server Components
+- 🚀 **Optimized for Next.js 13–16 out of the box** (App Router, React Server Components)
+- ⚡ **Turbopack compatible** (no config required)
+- 🔗 **Framework adapters** via `UIRuntimeProvider` for `next/link` & `next/image`
 ## ⚡ Lightweight by Design
@@ -173,7 +177,7 @@ export default function GalleryPage() {
 | Grid/GridRow        |               ✅               |                 –                  |
 | Headline            |               ✅               |                 -                  |
 | Icon                |               ✅               |                 –                  |
-| Image               |               ✅               |                 –                  |
+| Image               |               ✅               |                 ✅                 |
 | ImageText           |               ✅               |                 -                  |
 | Input               |               ✅               |                 ✅                 |
 | Label               |               ✅               |                 –                  |
@@ -199,6 +203,80 @@ export default function GalleryPage() {
 | Table               |               ✅               |                 –                  |
 | Teaser              |               ✅               |                 -                  |
+## Since Next.js 16
+- Link/Image runtime provider (required for <Link>/<Image> adapters)
+- For Next.js apps, provide your framework components (next/link, next/image) via a small client provider.
+- Do not pass linkComponent / imageComponent props from pages—use the provider instead.
+### 1. Create a client provider
+```tsx
+// app/providers/ProkodoUiNextProvider.tsx
+"use client"
+import NextLink from "next/link"
+import NextImage from "next/image"
+import { UIRuntimeProvider } from "@prokodo/ui/runtime"
+export function ProkodoUiNextProvider({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <UIRuntimeProvider
+      value={{ linkComponent: NextLink, imageComponent: NextImage }}
+    >
+      {children}
+    </UIRuntimeProvider>
+  )
+}
+```
+### 2. Wrap your root layout
+```tsx
+// app/layout.tsx (server component)
+import { ProkodoUiNextProvider } from "./providers/ProkodoUiNextProvider"
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <ProkodoUiNextProvider>{children}</ProkodoUiNextProvider>
+      </body>
+    </html>
+  )
+}
+```
+### 3. Use components normally (no extra props needed)
+```tsx
+import { Link } from "@prokodo/ui/link"
+import { Image } from "@prokodo/ui/image"
+export default function Page() {
+  return (
+    <>
+      <Link href="/about">About</Link>
+      <Image src="/hero.jpg" alt="Hero" />
+    </>
+  )
+}
+```
+**Notes**:
+- The provider file must be a "use client" module.
+- Remove any linkComponent / imageComponent props you previously passed from server code.
+- Plain React (non-Next) apps don’t need this; just use <a> / <img> or pass your own adapters inside client components.
 ## How to create my own Island Component?
 ### 1. Create your island component (Navbar.tsx):

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

@@ -0,0 +1,39 @@
+"use client";
+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 { useUIRuntime } from "../../helpers/runtime.client.js";
+import { isString } from "../../helpers/validations.js";
+import styles from "./Image.module.scss.js";
+const bem = create(styles, "Image");
+const ImageClient = /* @__PURE__ */ __name(({
+  alt,
+  caption,
+  containerClassName,
+  captionClassName,
+  className,
+  imageComponent,
+  ...props
+}) => {
+  const { imageComponent: ctxImage } = useUIRuntime();
+  const CustomImage = imageComponent ?? ctxImage ?? "img";
+  const renderImage = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsx(
+    CustomImage,
+    {
+      alt: alt ?? "",
+      className: bem("image", void 0, className),
+      ...props
+    }
+  ), "renderImage");
+  if (isString(caption)) {
+    return /* @__PURE__ */ jsxs("figure", { className: bem(void 0, void 0, containerClassName), children: [
+      renderImage(),
+      /* @__PURE__ */ jsx("figcaption", { className: bem("caption", void 0, captionClassName), children: caption })
+    ] });
+  }
+  return renderImage();
+}, "ImageClient");
+export {
+  ImageClient as default
+};

package/dist/components/image/Image.js CHANGED Viewed

@@ -1,35 +1,13 @@
 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 { isString } from "../../helpers/validations.js";
-import styles from "./Image.module.scss.js";
-const bem = create(styles, "Image");
-const Image = /* @__PURE__ */ __name(({
-  alt,
-  caption,
-  containerClassName,
-  captionClassName,
-  className,
-  imageComponent: CustomImage = "img",
-  ...props
-}) => {
-  const renderImage = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsx(
-    CustomImage,
-    {
-      alt: alt ?? "",
-      className: bem("image", void 0, className),
-      ...props
-    }
-  ), "renderImage");
-  if (isString(caption)) {
-    return /* @__PURE__ */ jsxs("figure", { className: bem(void 0, void 0, containerClassName), children: [
-      renderImage(),
-      /* @__PURE__ */ jsx("figcaption", { className: bem("caption", void 0, captionClassName), children: caption })
-    ] });
-  }
-  return renderImage();
-}, "Image");
+import { createIsland } from "../../helpers/createIsland.js";
+import ImageServer from "./Image.server.js";
+const Image = createIsland({
+  name: "Image",
+  Server: ImageServer,
+  loadLazy: /* @__PURE__ */ __name(() => import("./Image.lazy.js"), "loadLazy"),
+  isInteractive: /* @__PURE__ */ __name((p) => typeof p.imageComponent === "function", "isInteractive")
+});
 export {
   Image
 };

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

@@ -0,0 +1,16 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { createLazyWrapper } from "../../helpers/createLazyWrapper.js";
+import ImageClient from "./Image.client.js";
+import ImageServer from "./Image.server.js";
+const Image_lazy = createLazyWrapper({
+  name: "Image",
+  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")
+});
+export {
+  Image_lazy as default
+};

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

@@ -0,0 +1,88 @@
+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 { isString } from "../../helpers/validations.js";
+import styles from "./Image.module.scss.js";
+const bem = create(styles, "Image");
+function toImgOnlyProps(p) {
+  const {
+    // Strip next/image-only props so they don't leak onto <img>
+    _fill,
+    // intentionally unused (name the same to show intent)
+    _loader,
+    _placeholder,
+    _blurDataURL,
+    _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;
+  const rawSrc = rest == null ? void 0 : rest.src;
+  if (typeof rawSrc === "string") {
+    src = rawSrc;
+  } else if (typeof rawSrc === "object" && rawSrc !== null && // explicit property check to satisfy strict-boolean-expressions
+  Object.prototype.hasOwnProperty.call(
+    rawSrc,
+    "src"
+  ) && typeof rawSrc.src === "string") {
+    const rs = rawSrc;
+    ({ src } = rs);
+  } else {
+    src = void 0;
+  }
+  const { width, height } = rest;
+  const imgProps = {
+    ...rest,
+    src,
+    width,
+    height
+  };
+  return imgProps;
+}
+__name(toImgOnlyProps, "toImgOnlyProps");
+const ImageServer = /* @__PURE__ */ __name(({
+  alt,
+  caption,
+  containerClassName,
+  captionClassName,
+  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
+  } = rawProps;
+  const CustomImage = "img";
+  const imgProps = toImgOnlyProps(rest);
+  const renderImage = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsx(
+    CustomImage,
+    {
+      alt: alt ?? "",
+      className: bem("image", void 0, className),
+      ...imgProps
+    }
+  ), "renderImage");
+  if (isString(caption)) {
+    return /* @__PURE__ */ jsxs("figure", { className: bem(void 0, void 0, containerClassName), children: [
+      renderImage(),
+      /* @__PURE__ */ jsx("figcaption", { className: bem("caption", void 0, captionClassName), children: caption })
+    ] });
+  }
+  return renderImage();
+}, "ImageServer");
+export {
+  ImageServer as default
+};

package/dist/components/link/Link.client.js CHANGED Viewed

@@ -1,10 +1,12 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { memo } from "react";
+import { useUIRuntime } from "../../helpers/runtime.client.js";
 import BaseLinkServer from "../base-link/BaseLink.server.js";
 import { LinkView } from "./Link.view.js";
 const LinkClient = memo((props) => {
   const { href, onClick } = props;
+  const { linkComponent: ctxLink } = useUIRuntime();
   const linkTag = onClick && !href ? "span" : "a";
   const hasHandlers = Boolean(onClick) || Boolean(props.onKeyDown);
   return /* @__PURE__ */ jsx(
@@ -13,7 +15,8 @@ const LinkClient = memo((props) => {
       ...props,
       BaseLinkComponent: BaseLinkServer,
       hasHandlers,
-      LinkTag: linkTag
+      LinkTag: linkTag,
+      ...ctxLink ? { linkComponent: ctxLink } : null
     }
   );
 });

package/dist/components/link/Link.server.js CHANGED Viewed

@@ -3,9 +3,21 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
 import { jsx } from "react/jsx-runtime";
 import BaseLinkServer from "../base-link/BaseLink.server.js";
 import { LinkView } from "./Link.view.js";
-function LinkServer(props) {
+function LinkServer(rawProps) {
+  if (process.env.NODE_ENV !== "production" && typeof (rawProps == null ? void 0 : rawProps.linkComponent) === "function") {
+    console.error(
+      "[UI] Do not pass function props (linkComponent) to <Link> on the server. Use the UIRuntimeProvider in the parent app instead.",
+      rawProps
+    );
+  }
+  const {
+    onClick,
+    onKeyDown: _onKeyDown,
+    linkComponent: _drop,
+    ...props
+  } = rawProps;
   const hasHandlers = false;
-  const linkTag = props.onClick && !props.href ? "span" : "a";
+  const linkTag = onClick && !(props == null ? void 0 : props.href) ? "span" : "a";
   return /* @__PURE__ */ jsx(
     LinkView,
     {

package/dist/constants/project.js CHANGED Viewed

@@ -1,4 +1,4 @@
-const PROKODO_UI_VERSION = "0.0.56";
+const PROKODO_UI_VERSION = "0.1.0";
 export {
   PROKODO_UI_VERSION
 };

package/dist/helpers/createIsland.js CHANGED Viewed

@@ -2,6 +2,12 @@ var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { jsx } from "react/jsx-runtime";
 import { lazy, Suspense, cloneElement } from "react";
+function stripFnProps(p) {
+  return Object.fromEntries(
+    Object.entries(p).filter(([, v]) => typeof v !== "function")
+  );
+}
+__name(stripFnProps, "stripFnProps");
 function createIsland({
   name,
   Server,
@@ -13,40 +19,25 @@ function createIsland({
     void loadLazy();
   }
   function withIslandAttr(el, priority) {
-    var _a;
     const islandName = name.toLowerCase();
-    if (typeof process !== "undefined" && typeof ((_a = process == null ? void 0 : process.env) == null ? void 0 : _a.PK_ENABLE_DEBUG_LOGS) === "string") {
-      console.debug(
-        `[hydrate] createIsland “${name}” rendering as interactive=${Boolean(
-          priority
-        )}`
-      );
-    }
     const extra = {
       "data-island": islandName
     };
-    if (Boolean(priority)) {
-      extra.priority = priority;
-    }
+    if (Boolean(priority)) extra.priority = true;
     return cloneElement(el, extra);
   }
   __name(withIslandAttr, "withIslandAttr");
-  const Island = /* @__PURE__ */ __name(({
-    priority = false,
-    ...raw
-  }) => {
+  const Island = /* @__PURE__ */ __name(({ ...raw }) => {
     const props = raw;
     const autoInteractive = Object.entries(props).some(
       ([k, v]) => k.startsWith("on") && typeof v === "function"
     ) || props.redirect !== void 0;
     const interactive = customInteractive ? customInteractive(props) || autoInteractive : autoInteractive;
-    if (interactive && priority) {
-      return withIslandAttr(/* @__PURE__ */ jsx(LazyComp, { ...props }));
-    }
+    const serverSafe = stripFnProps(props);
     if (!interactive) {
-      return withIslandAttr(/* @__PURE__ */ jsx(Server, { ...props }));
+      return withIslandAttr(/* @__PURE__ */ jsx(Server, { ...serverSafe }));
     }
-    const fallback = withIslandAttr(/* @__PURE__ */ jsx(Server, { ...props }));
+    const fallback = withIslandAttr(/* @__PURE__ */ jsx(Server, { ...serverSafe }));
     return /* @__PURE__ */ jsx(Suspense, { fallback, children: withIslandAttr(/* @__PURE__ */ jsx(LazyComp, { ...props })) });
   }, "Island");
   Island.displayName = `${name}Island`;

package/dist/helpers/runtime.client.js ADDED Viewed

@@ -0,0 +1,15 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { useContext, createContext } from "react";
+const UIRuntimeContext = createContext({});
+const UIRuntimeProvider = /* @__PURE__ */ __name(({
+  value,
+  children
+}) => /* @__PURE__ */ jsx(UIRuntimeContext.Provider, { value, children }), "UIRuntimeProvider");
+const useUIRuntime = /* @__PURE__ */ __name(() => useContext(UIRuntimeContext), "useUIRuntime");
+export {
+  UIRuntimeProvider,
+  useUIRuntime
+};

package/dist/index.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import { UIRuntimeProvider, useUIRuntime } from "./helpers/runtime.client.js";
 import { Accordion } from "./components/accordion/Accordion.js";
 import { Animated } from "./components/animated/Animated.js";
 import { AnimatedText } from "./components/animatedText/AnimatedText.js";
@@ -90,5 +91,7 @@ export {
   Stepper,
   Switch,
   Table,
-  Teaser
+  Teaser,
+  UIRuntimeProvider,
+  useUIRuntime
 };