julrich/components_Component.js

## components_Component.js
import { createElement, createContext, useContext } from "react";

const ComponentContext = createContext({});

export function createComponentProvider(componentMap) {
  return function (props) {
    const prevComponentMap = useContext(ComponentContext);
    return createElement(ComponentContext.Provider, {
      ...props,
      value: { ...prevComponentMap, ...componentMap },
    });
  };
}

export function Component({ type, props = {}, children = [] }, key) {
  const componentMap = useContext(ComponentContext);
  if (key != null) props.key = key;
  const component = componentMap[type];
  if (component) {
    return createElement(component, props, children.map(Component));
  }

  return `unknown component: ${type}`;
}

## components_compose.js
import { createElement } from "react";

export const compose =
  (...components) =>
  ({ children }) =>
    components.reduceRight((acc, cur) => createElement(cur, {}, acc), children);

## components_HtmlRichTextProvider.js
import classnames from "classnames";
import { createElement } from "react";
import { createProvider } from "@kickstartds/core/lib/utils";
import { RichTextContext } from "@kickstartds/base/lib/rich-text";
import { HtmlContextDefault } from "@kickstartds/base/lib/html";

function RichText({ text, renderText, className, ...props }) {
  return createElement(HtmlContextDefault, {
    html: text,
    className: classnames("c-rich-text", className),
    ...props,
  });
}

export default createProvider(RichTextContext, RichText);

## components_LinkProvider.js
import { createElement } from "react";
import { createProvider } from "@kickstartds/core/lib/utils";
import { LinkContext } from "@kickstartds/base/lib/link";
import Link from "next/link";
import { useRouter } from "next/router";

const WrappedLink = ({
  href,
  as,
  prefetch,
  replace,
  scroll,
  shallow,
  locale,
  enabled,
  ...props
}) => {
  const router = useRouter();

  return createElement(
    Link,
    {
      href,
      as,
      prefetch,
      replace,
      scroll,
      shallow,
      locale,
    },
    createElement("a", props)
  );
};

export const LinkProvider = createProvider(LinkContext, WrappedLink);

## next.config.js
const withTM = require("next-transpile-modules")([
  "@kickstartds/core",
  "@kickstartds/base",
  "@kickstartds/content",
]);

module.exports = (config = {}) =>
  withTM({
    reactStrictMode: true,
    swcMinify: true,
    generateBuildId: () => "build",
    ...config,
  });

## pages__app.js
import dynamic from "next/dynamic";

import { createComponentProvider } from "../components/Component";
import { compose } from "../components/compose";

import { ButtonProvider } from "kickstartdspoc/dist/components/button/ButtonComponent";
import { SectionProvider } from "kickstartdspoc/dist/components/section/SectionComponent";
import { ContentBoxProvider } from "kickstartdspoc/dist/components/content-box/ContentBoxComponent";

import { LinkProvider } from "../components/LinkProvider";

import { Headline } from "@kickstartds/base/lib/headline";

import "kickstartdspoc/dist/index.css";
import "kickstartdspoc/dist/index.js";

const ComponentProvider = createComponentProvider({
  Headline,
  ContentBox: dynamic(() =>
    import("@kickstartds/base/lib/content-box").then((mod) => mod.ContentBox)
  ),
  Section: dynamic(() =>
    import("@kickstartds/base/lib/section").then((mod) => mod.TextMedia)
  ),
  Button: dynamic(() =>
    import("@kickstartds/base/lib/button").then((mod) => mod.TeaserBox)
  ),
});

const Providers = compose(
  ComponentProvider,
  LinkProvider,
  ButtonProvider,
  SectionProvider,
  ContentBoxProvider
);

function MyApp({ Component, pageProps }) {
  return (
    <Providers>
      <Component {...pageProps} />
    </Providers>
  );
}

export default MyApp;

## pages__document.js
import Document, { Html, Head, Main, NextScript } from "next/document";
import { IconSprite } from "kickstartds/dist/components/IconSprite";

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="de">
        <Head />
        <body>
          <IconSprite />
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
	import { createElement, createContext, useContext } from "react";

	const ComponentContext = createContext({});

	export function createComponentProvider(componentMap) {
	return function (props) {
	const prevComponentMap = useContext(ComponentContext);
	return createElement(ComponentContext.Provider, {
	...props,
	value: { ...prevComponentMap, ...componentMap },
	});
	};
	}

	export function Component({ type, props = {}, children = [] }, key) {
	const componentMap = useContext(ComponentContext);
	if (key != null) props.key = key;
	const component = componentMap[type];
	if (component) {
	return createElement(component, props, children.map(Component));
	}

	return `unknown component: ${type}`;
	}
	import { createElement } from "react";

	export const compose =
	(...components) =>
	({ children }) =>
	components.reduceRight((acc, cur) => createElement(cur, {}, acc), children);
	import classnames from "classnames";
	import { createElement } from "react";
	import { createProvider } from "@kickstartds/core/lib/utils";
	import { RichTextContext } from "@kickstartds/base/lib/rich-text";
	import { HtmlContextDefault } from "@kickstartds/base/lib/html";

	function RichText({ text, renderText, className, ...props }) {
	return createElement(HtmlContextDefault, {
	html: text,
	className: classnames("c-rich-text", className),
	...props,
	});
	}

	export default createProvider(RichTextContext, RichText);
	import { createElement } from "react";
	import { createProvider } from "@kickstartds/core/lib/utils";
	import { LinkContext } from "@kickstartds/base/lib/link";
	import Link from "next/link";
	import { useRouter } from "next/router";

	const WrappedLink = ({
	href,
	as,
	prefetch,
	replace,
	scroll,
	shallow,
	locale,
	enabled,
	...props
	}) => {
	const router = useRouter();

	return createElement(
	Link,
	{
	href,
	as,
	prefetch,
	replace,
	scroll,
	shallow,
	locale,
	},
	createElement("a", props)
	);
	};

	export const LinkProvider = createProvider(LinkContext, WrappedLink);
	const withTM = require("next-transpile-modules")([
	"@kickstartds/core",
	"@kickstartds/base",
	"@kickstartds/content",
	]);

	module.exports = (config = {}) =>
	withTM({
	reactStrictMode: true,
	swcMinify: true,
	generateBuildId: () => "build",
	...config,
	});
	import dynamic from "next/dynamic";

	import { createComponentProvider } from "../components/Component";
	import { compose } from "../components/compose";

	import { ButtonProvider } from "kickstartdspoc/dist/components/button/ButtonComponent";
	import { SectionProvider } from "kickstartdspoc/dist/components/section/SectionComponent";
	import { ContentBoxProvider } from "kickstartdspoc/dist/components/content-box/ContentBoxComponent";

	import { LinkProvider } from "../components/LinkProvider";

	import { Headline } from "@kickstartds/base/lib/headline";

	import "kickstartdspoc/dist/index.css";
	import "kickstartdspoc/dist/index.js";

	const ComponentProvider = createComponentProvider({
	Headline,
	ContentBox: dynamic(() =>
	import("@kickstartds/base/lib/content-box").then((mod) => mod.ContentBox)
	),
	Section: dynamic(() =>
	import("@kickstartds/base/lib/section").then((mod) => mod.TextMedia)
	),
	Button: dynamic(() =>
	import("@kickstartds/base/lib/button").then((mod) => mod.TeaserBox)
	),
	});

	const Providers = compose(
	ComponentProvider,
	LinkProvider,
	ButtonProvider,
	SectionProvider,
	ContentBoxProvider
	);

	function MyApp({ Component, pageProps }) {
	return (
	<Providers>
	<Component {...pageProps} />
	</Providers>
	);
	}

	export default MyApp;
	import Document, { Html, Head, Main, NextScript } from "next/document";
	import { IconSprite } from "kickstartds/dist/components/IconSprite";

	export default class MyDocument extends Document {
	render() {
	return (
	<Html lang="de">
	<Head />
	<body>
	<IconSprite />
	<Main />
	<NextScript />
	</body>
	</Html>
	);
	}
	}