{currentPage?.component}
;
+}
diff --git a/showcases/next-showcase/pages/_app.tsx b/showcases/next-showcase/pages/_app.tsx
new file mode 100644
index 00000000000..9e01fee7fe0
--- /dev/null
+++ b/showcases/next-showcase/pages/_app.tsx
@@ -0,0 +1,74 @@
+import { useState } from 'react';
+import type { AppProps } from 'next/app';
+import { DBBrand, DBButton, DBHeader, DBPage } from '../../../output/react/src';
+import useQuery from '../../react-showcase/src/hooks/use-query';
+import MetaNavigation from '../../react-showcase/src/meta-navigation';
+import Navigation from '../../react-showcase/src/navigation';
+import '../styles/global.scss';
+import '../../showcase-styles.css';
+
+const App = ({ Component, pageProps }: AppProps) => {
+ const [density, setDensity, color, setColor, pageName, fullscreen] =
+ useQuery();
+
+ const [drawerOpen, setDrawerOpen] = useState
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+
+ Showcase
+
+
+ {{ page }}
+
+
+
+
+ Search
+
+
+
+
+ Profile
+
+
+ Notification
+
+
+ Help
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/showcases/nuxt-showcase/nuxt.config.ts b/showcases/nuxt-showcase/nuxt.config.ts
new file mode 100644
index 00000000000..38a1dc415ab
--- /dev/null
+++ b/showcases/nuxt-showcase/nuxt.config.ts
@@ -0,0 +1,29 @@
+export default defineNuxtConfig({
+ telemetry: false,
+ devtools: { enabled: true },
+ generate: {
+ routes: ['/']
+ },
+ app: {
+ baseURL: '/nuxt-showcase/'
+ },
+ imports: {
+ autoImport: false
+ },
+ devServer: {
+ port: 4000
+ },
+ vite: {
+ base: `/nuxt-showcase/`,
+ build: {
+ outDir: '../../build-showcases/nuxt-showcase',
+ emptyOutDir: true
+ }
+ },
+ nitro: {
+ output: {
+ dir: '../../build-showcases/nuxt-showcase',
+ publicDir: '../../build-showcases/nuxt-showcase'
+ }
+ }
+});
diff --git a/showcases/nuxt-showcase/package.json b/showcases/nuxt-showcase/package.json
new file mode 100644
index 00000000000..995d68a70f9
--- /dev/null
+++ b/showcases/nuxt-showcase/package.json
@@ -0,0 +1,18 @@
+{
+ "name": "nuxt-showcase",
+ "version": "0.0.0",
+ "type": "module",
+ "private": true,
+ "scripts": {
+ "build": "nuxt build",
+ "dev": "nuxt dev --open",
+ "generate": "nuxt generate",
+ "postinstall": "nuxt prepare",
+ "preview": "nuxt preview"
+ },
+ "dependencies": {
+ "nuxt": "^3.11.2",
+ "vue": "^3.4.30",
+ "vue-router": "^4.4.0"
+ }
+}
diff --git a/showcases/nuxt-showcase/pages/[...uri].vue b/showcases/nuxt-showcase/pages/[...uri].vue
new file mode 100644
index 00000000000..6c239f5abdd
--- /dev/null
+++ b/showcases/nuxt-showcase/pages/[...uri].vue
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/showcases/nuxt-showcase/public/favicon.ico b/showcases/nuxt-showcase/public/favicon.ico
new file mode 100644
index 00000000000..fb9f04061d9
Binary files /dev/null and b/showcases/nuxt-showcase/public/favicon.ico differ
diff --git a/showcases/nuxt-showcase/server/tsconfig.json b/showcases/nuxt-showcase/server/tsconfig.json
new file mode 100644
index 00000000000..d1dabedfade
--- /dev/null
+++ b/showcases/nuxt-showcase/server/tsconfig.json
@@ -0,0 +1,3 @@
+{
+ "extends": "../.nuxt/tsconfig.server.json"
+}
diff --git a/showcases/nuxt-showcase/tsconfig.json b/showcases/nuxt-showcase/tsconfig.json
new file mode 100644
index 00000000000..947f6b69048
--- /dev/null
+++ b/showcases/nuxt-showcase/tsconfig.json
@@ -0,0 +1,4 @@
+{
+ // https://nuxt.com/docs/guide/concepts/typescript
+ "extends": "./.nuxt/tsconfig.json"
+}
diff --git a/showcases/patternhub/.gitignore b/showcases/patternhub/.gitignore
index 712ffacf647..deb147b945b 100644
--- a/showcases/patternhub/.gitignore
+++ b/showcases/patternhub/.gitignore
@@ -38,15 +38,13 @@ public/docs
styles/db-ui-components.scss
scripts/generated
+pages/components/
components/src
-pages/components/**/code
-pages/components/**/docs
-pages/components/**/how-to-use.mdx
-pages/components/**/migration.mdx
-pages/components/**/properties.mdx
-pages/components/**/properties.tsx
-pages/components/**/overview.tsx
-pages/components/**/index.tsx
+components/code-docs/
+!pages/components/readme.mdx
+!pages/components/validation.mdx
+!pages/components/router-usage.mdx
+!pages/components/[[...slug]].tsx
!components/src/tsconfig.json
!components/component-parser
!components/default-page.tsx
diff --git a/showcases/patternhub/README.md b/showcases/patternhub/README.md
index 2a48696f71c..0e46f6934b0 100644
--- a/showcases/patternhub/README.md
+++ b/showcases/patternhub/README.md
@@ -12,7 +12,7 @@ You can use `.tsx` or `.mdx` files to write your documents (see the examples).
As root file for a subfolder you should name it `index.[mdx|tsx]`.
-After you add a new subfolder or page you need to update the routes for the navigation under `/data/routes.ts`.
+After you add a new subfolder or page you need to update the routes for the navigation under `/data/routes.tsx`.
### Github-Version-Switcher
diff --git a/showcases/patternhub/components/card-navigation/card-navigation.tsx b/showcases/patternhub/components/card-navigation/card-navigation.tsx
index 626996ac9f1..be8f9f831f3 100644
--- a/showcases/patternhub/components/card-navigation/card-navigation.tsx
+++ b/showcases/patternhub/components/card-navigation/card-navigation.tsx
@@ -2,14 +2,13 @@ import { useRouter } from 'next/router';
import Link from 'next/link';
import DefaultPage from '../default-page';
import { getAllNavigationItems, getBreadcrumb } from '../../data/routes';
-import { DBCard, DBIcon } from '../src';
+import { DBCard, DBIcon } from '../../../../output/react/src';
const CardNavigation = () => {
const router = useRouter();
const navigationItemParent = getAllNavigationItems().find(
- (navItem) =>
- navItem.path === router.pathname.replace('/[[...slug]]', '')
+ (navItem) => navItem.path === router.asPath
);
return (
diff --git a/showcases/patternhub/components/component-parser/index.tsx b/showcases/patternhub/components/component-parser/index.tsx
index 0753ed4f3c5..b52a878690a 100644
--- a/showcases/patternhub/components/component-parser/index.tsx
+++ b/showcases/patternhub/components/component-parser/index.tsx
@@ -1,12 +1,12 @@
import { useEffect, useState } from 'react';
-import DBSwitch from '../src/components/switch/switch';
-import DBTabPanel from '../src/components/tab-panel/tab-panel';
-import DBTabs from '../src/components/tabs/tabs';
-import DBTabList from '../src/components/tab-list/tab-list';
-import DBTabItem from '../src/components/tab-item/tab-item';
-import DBTooltip from '../src/components/tooltip/tooltip';
-import DBPopover from '../src/components/popover/popover';
import {
+ DBSwitch,
+ DBTabPanel,
+ DBTabs,
+ DBTabList,
+ DBTabItem,
+ DBTooltip,
+ DBPopover,
DBNotification,
DBBrand,
DBButton,
@@ -28,7 +28,7 @@ import {
DBAccordion,
DBAccordionItem,
DBTextarea
-} from '../src';
+} from '../../../../output/react/src/index';
import type { ComponentParserType, ComponentType } from './data';
const validHosts = new Set(['marketingportal.extranet.deutschebahn.com']);
diff --git a/showcases/patternhub/components/data.ts b/showcases/patternhub/components/data.ts
index f2a41f162aa..ef4f22a6b71 100644
--- a/showcases/patternhub/components/data.ts
+++ b/showcases/patternhub/components/data.ts
@@ -1,14 +1,12 @@
import type { ReactElement } from 'react';
-import type {
- DefaultComponentExample,
- DefaultComponentVariants
-} from '../../shared/default-component-data';
+import type { DefaultComponentExample } from '../../shared/default-component-data';
+import type { ReactDefaultComponentVariants } from '../../shared/react-default-component-data';
export const getVariants = (
- defaultComponentVariants: DefaultComponentVariants[],
+ defaultComponentVariants: ReactDefaultComponentVariants[],
getExample: (properties: any) => ReactElement,
codeSlots: any[]
-): DefaultComponentVariants[] => {
+): ReactDefaultComponentVariants[] => {
return defaultComponentVariants.map((variant, index) => ({
...variant,
slotCode: codeSlots?.at(index) ?? 'No code available',
diff --git a/showcases/patternhub/components/default-page.tsx b/showcases/patternhub/components/default-page.tsx
index bcec14ea39a..3c6f84113a3 100644
--- a/showcases/patternhub/components/default-page.tsx
+++ b/showcases/patternhub/components/default-page.tsx
@@ -8,7 +8,9 @@ import {
DBButton,
DBHeader,
DBPage,
- DBSection
+ DBSection,
+ DBCard,
+ DBIcon
} from '../../../output/react/src';
import {
getBreadcrumb,
@@ -17,7 +19,6 @@ import {
} from '../data/routes';
import Navigation from './navigation';
import VersionSwitcher from './version-switcher';
-import { DBCard, DBIcon } from './src';
const DefaultPage = ({
children,
@@ -59,6 +60,10 @@ const DefaultPage = ({
setFullscreen(router.query.fullscreen === 'true');
}
+ if (router.query.page) {
+ setFullscreen(true);
+ }
+
if (router.query.noh1) {
setNoH1(router.query.noh1 === 'true');
}
@@ -80,10 +85,13 @@ const DefaultPage = ({
}
}
- const { previous, next } = getNavigationList(router.pathname);
+ const pathWithoutQuery = router.asPath.split('?')[0];
+
+ const { previous, next } = getNavigationList(pathWithoutQuery);
+
setPreviousNavigationItem(previous);
setNextNavigationItem(next);
- setBreadcrumb(getBreadcrumb(router.pathname));
+ setBreadcrumb(getBreadcrumb(pathWithoutQuery));
}, [router]);
return (
diff --git a/showcases/patternhub/components/index.tsx b/showcases/patternhub/components/index.tsx
deleted file mode 100644
index 8cca4b42209..00000000000
--- a/showcases/patternhub/components/index.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-import { useRouter } from 'next/router';
-import React, { useEffect, useState } from 'react';
-import {
- type DefaultComponentProps,
- type DefaultComponentVariants,
- type PatternhubComponentProps
-} from '../../shared/default-component-data';
-import DefaultPage from './default-page';
-import { DBCard, DBDivider, DBLink } from './src';
-
-const VariantList = ({ examples, slotCode }: DefaultComponentVariants) => {
- const [open, setOpen] = useState404
+
- {examples.map((example, exampleIndex) => (
-
-
-
- {example.example}
-
- ))}
- {
- setOpen(!open);
- }}>
-
- - {open ? 'Hide code' : 'Show code'} -
-
-
-
- {slotCode}
-
-
-
-
-
-
- ))}
-
- );
-};
-
-const DefaultComponent = ({
- title,
- variants,
- subComponent,
- isSubComponent,
- componentName
-}: DefaultComponentProps & PatternhubComponentProps) => {
- const [foundVariant, setFoundVariant] =
- useState
-
- {variant.name}
-
-
-
-
- )}
- {!foundVariant && !isSubComponent && (
-
-
- {subComponent}
- {title}
-
-
- )}
-
- );
-};
-
-export default DefaultComponent;
diff --git a/showcases/patternhub/components/link-header/index.tsx b/showcases/patternhub/components/link-header/index.tsx
index 04d0102c8e4..143bd9df0f6 100644
--- a/showcases/patternhub/components/link-header/index.tsx
+++ b/showcases/patternhub/components/link-header/index.tsx
@@ -1,5 +1,5 @@
import Link from 'next/link';
-import { DBIcon } from '../src';
+import { DBIcon } from '../../../../output/react/src';
const LinkHeader = ({ id }) => {
if (id) {
diff --git a/showcases/patternhub/components/navigation/nav-item.tsx b/showcases/patternhub/components/navigation/nav-item.tsx
index 8859b9e4559..f97ea834fc2 100644
--- a/showcases/patternhub/components/navigation/nav-item.tsx
+++ b/showcases/patternhub/components/navigation/nav-item.tsx
@@ -26,13 +26,15 @@ const NavItem = ({ navItem }: { navItem: NavigationItem }) => {
subNavigation={
navItem.subNavigation && (
<>
- {navItem?.subNavigation.map(
- (subItem: NavigationItem) => (
+ {navItem?.subNavigation
+ .filter(
+ ({ isHiddenInMenu }) => isHiddenInMenu !== true
+ )
+ .map((subItem: NavigationItem) => (
{title}
-
+ {examples.map((example, exampleIndex) => (
+
+
+ {SlotCode && (
+
+ {example.example}
+
+ ))}
+ {
+ setOpen(!open);
+ }}>
+
+ )}
+ + {open ? 'Hide code' : 'Show code'} +
+
+
+
+
+
+
+ {title}
+ {variants?.map((variant, index) => (
+
+ {subComponent}
+
+ );
+};
+
+export default DefaultComponent;
diff --git a/showcases/react-showcase/src/components/divider/index.tsx b/showcases/react-showcase/src/components/divider/index.tsx
index ffc0e2a7b0e..6a16b753050 100644
--- a/showcases/react-showcase/src/components/divider/index.tsx
+++ b/showcases/react-showcase/src/components/divider/index.tsx
@@ -1,8 +1,9 @@
import { DBDivider, DBInfotext } from '../../../../../output/react/src';
-import DefaultComponent from '../index';
+import DefaultComponent from '../default-component';
import defaultComponentVariants from '../../../../shared/divider.json';
import { type DBDividerProps } from '../../../../../output/react/src/components/divider/model';
import { getVariants } from '../data';
+import { type BaseComponentProps } from '../base-component-data';
const getDivider = ({ variant, emphasis, children }: DBDividerProps) => (
<>
@@ -13,13 +14,14 @@ const getDivider = ({ variant, emphasis, children }: DBDividerProps) => (
);
-const DividerComponent = () => {
+const DividerComponent = (props: BaseComponentProps) => {
return (
+ {
+ openVariantInNewWindow(event, variant.name);
+ }}
+ href={getHref(variant.name)}>
+ {variant.name}
+
+
+ ))}
+
- {examples.map((example, exampleIndex) => (
-
-
- {example.example}
-
- ))}
-
-
- );
-};
-
-export default DefaultComponent;
diff --git a/showcases/react-showcase/src/components/infotext/index.tsx b/showcases/react-showcase/src/components/infotext/index.tsx
index 66fa1c78eb5..1132b1680b5 100644
--- a/showcases/react-showcase/src/components/infotext/index.tsx
+++ b/showcases/react-showcase/src/components/infotext/index.tsx
@@ -1,8 +1,9 @@
import { DBInfotext } from '../../../../../output/react/src';
-import DefaultComponent from '../index';
+import DefaultComponent from '../default-component';
import defaultComponentVariants from '../../../../shared/infotext.json';
import { type DBInfotextProps } from '../../../../../output/react/src/components/infotext/model';
import { getVariants } from '../data';
+import { type BaseComponentProps } from '../base-component-data';
const getInfotext = ({ semantic, size, icon, children }: DBInfotextProps) => (
{title}
- {variants?.map((variant, index) => ( -
-
- {variant.name}
-
-
- ))}
-