Last active
October 17, 2022 14:55
-
-
Save julrich/0afaa5a300bcb08d583501bca23fdce9 to your computer and use it in GitHub Desktop.
Usage of `kickstartDS` in `Next.js`
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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}`; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { createElement } from "react"; | |
| export const compose = | |
| (...components) => | |
| ({ children }) => | |
| components.reduceRight((acc, cur) => createElement(cur, {}, acc), children); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const withTM = require("next-transpile-modules")([ | |
| "@kickstartds/core", | |
| "@kickstartds/base", | |
| "@kickstartds/content", | |
| ]); | |
| module.exports = (config = {}) => | |
| withTM({ | |
| reactStrictMode: true, | |
| swcMinify: true, | |
| generateBuildId: () => "build", | |
| ...config, | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> | |
| ); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment