@prokodo/ui 0.0.55 → 0.1.0

package/README.md

@@ -8,17 +8,32 @@
 
 **Modern, customizable UI components built with React and TypeScript — developed by [prokodo](https://www.prokodo.com) for high-performance web interfaces.**
 
-> 🇺🇸 Need help shipping a production **Next.js + Headless CMS** in 4–6 weeks?  
-> **prokodo — Next.js CMS agency** → [click here](https://www.prokodo.com/en/solution/next-js-cms?utm_source=github&utm_medium=readme_top)
+> 🇺🇸 Need help shipping production **Next.js (App Router)** fast?  
+> **prokodo — Next.js Agency** → [click here](https://www.prokodo.com/en/next-js-agency/?utm_source=github&utm_medium=readme_top&utm_campaign=ui)
 >
-> 🇩🇪 Sie suchen eine **Next.js Agentur** (Strapi/Contentful/WP)?  
-> **prokodo — Next.js CMS Agentur** → [hier klicken](https://www.prokodo.com/de/loesung/next-js-cms?utm_source=github&utm_medium=readme_top)
+> 🇩🇪 Sie suchen eine **Next.js Agentur** (App Router, SEO, Performance)?  
+> **prokodo — Next.js Agentur** → [hier klicken](https://www.prokodo.com/de/next-js-agentur/?utm_source=github&utm_medium=readme_top&utm_campaign=ui)
+
+<details>
+  <summary><b>Further reading: Next.js guides</b> (SEO · Performance · Migration)</summary>
+
+- SEO (Metadata API, hreflang):  
+  https://www.prokodo.com/en/guide/next-js/next-js-seo/?utm_source=github&utm_medium=readme_examples&utm_campaign=ui&utm_content=seo_en
+
+- Performance (LCP/INP/CLS, Streaming SSR):  
+  https://www.prokodo.com/en/guide/next-js/next-js-performance/?utm_source=github&utm_medium=readme_examples&utm_campaign=ui&utm_content=perf_en
+
+- Migration Playbook (RACI, Canary, Rollback):  
+ https://www.prokodo.com/en/guide/next-js/next-js-migration/?utm_source=github&utm_medium=readme_examples&utm_campaign=ui&utm_content=migration_en
+</details>
 
 [![npm](https://img.shields.io/npm/v/@prokodo/ui?style=flat&color=3178c6&label=npm)](https://www.npmjs.com/package/@prokodo/ui)
 [![CI](https://github.com/prokodo-agency/ui/actions/workflows/release.yml/badge.svg)](https://github.com/prokodo-agency/ui/actions/workflows/release.yml)
 [![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)](#)
 
 ---
 
@@ -31,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
 
@@ -160,7 +177,7 @@ export default function GalleryPage() {
 | Grid/GridRow        |               ✅               |                 –                  |
 | Headline            |               ✅               |                 -                  |
 | Icon                |               ✅               |                 –                  |
-| Image               |               ✅               |                 –                  |
+| Image               |               ✅               |                 ✅                 |
 | ImageText           |               ✅               |                 -                  |
 | Input               |               ✅               |                 ✅                 |
 | Label               |               ✅               |                 –                  |
@@ -186,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):
@@ -243,11 +334,29 @@ export default createLazyWrapper<NavbarProps>({
 
 ## Examples (Next.js + Headless CMS)
 
+Real-world setups we ship:
+
 - Next.js + **Strapi** content models
 - Next.js + **Contentful** entries & preview
 - Migration from **Headless WordPress** to Next.js
 
-Compare CMS options → [Strapi vs Contentful vs Headless WP](https://www.prokodo.com/de/loesung/next-js-cms?utm_source=github&utm_medium=readme_examples)
+**Need help or a quick scoping?**
+
+- 🇺🇸 **Next.js Agency (EN)** → https://www.prokodo.com/en/next-js-agency/?utm_source=github&utm_medium=readme_examples&utm_campaign=ui&utm_content=examples_cta_en
+- 🇩🇪 **Next.js Agentur (DE)** → https://www.prokodo.com/de/next-js-agentur/?utm_source=github&utm_medium=readme_examples&utm_campaign=ui&utm_content=examples_cta_de
+
+<details>
+  <summary><b>Further reading: Next.js guides</b> (SEO · Performance · Migration)</summary>
+
+- SEO (Metadata API, hreflang):  
+  https://www.prokodo.com/en/guide/next-js/next-js-seo/?utm_source=github&utm_medium=readme_examples&utm_campaign=ui&utm_content=seo_en
+
+- Performance (LCP/INP/CLS, Streaming SSR):  
+  https://www.prokodo.com/en/guide/next-js/next-js-performance/?utm_source=github&utm_medium=readme_examples&utm_campaign=ui&utm_content=perf_en
+
+- Migration Playbook (RACI, Canary, Rollback):  
+ https://www.prokodo.com/en/guide/next-js/next-js-migration/?utm_source=github&utm_medium=readme_examples&utm_campaign=ui&utm_content=migration_en
+</details>
 
 ## 📘 Documentation
 

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

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

package/dist/helpers/createIsland.js

@@ -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

@@ -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

@@ -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
 };