state.toggleCode()}>
-
- - {state.getShowButtonLabel()} -
-
-
- Header
+
+
+
+
+
+ 
DBHeader
+
+ DBHeader
+
+
+
+
+
@for (
example of variantRef.examples;
@@ -26,7 +23,7 @@
}
- {{ title }}
> {{ variant.name }} -
@for (
example of variant.examples;
@@ -72,7 +66,7 @@
}
- {{ title }}
- {examples.map((example, exampleIndex) => (
- ();
+
+ useEffect(() => {
+ if (copied) {
+ setTimeout(() => setCopied(false), 1500);
+ }
+ }, [copied]);
+ return (
+ <>`;
for (const example of examples) {
- result += '\n\n';
+ result += `
+
+
+
+ Angular
+ HTML
+ React
+ Vue
+ `;
for (const framework of codeFrameworks) {
let exampleCode;
@@ -57,16 +84,39 @@ const getExamplesAsMDX = async (componentName, variant) => {
// We do not care about errors here
}
- result += `\`\`\`${getFileTypeByFramework(
- framework
- )} ${framework}\n`;
- result += `${exampleCode?.replace(/;/g, '')}\n`;
- result += '```\n\n';
+ exampleCode = exampleCode?.replace(/;/g, '').trim();
+
+ result += `
+
+ {
+ setCopied(true);
+ navigator.clipboard.writeText(\`${exampleCode}\`);
+ }}>
+ Copy
+
+ `;
}
- result += ' \n\n';
+ result += `
+
+ `;
}
+ result += `
+);
+};
+
+export default ${variant.name};`;
+
return result;
};
@@ -90,7 +140,7 @@ const writeCodeFiles = async (componentPath, componentName) => {
}
FS.writeFileSync(
- `${codePath}/${variant.name}.mdx`,
+ `${codePath}/${variant.name}.tsx`,
await getExamplesAsMDX(componentName, variant)
);
}
@@ -104,7 +154,7 @@ const writeCodeFiles = async (componentPath, componentName) => {
pre = variants
.map(
(variant) =>
- `import ${variant.name} from './code/${variant.name}.mdx'`
+ `import ${variant.name} from './code/${variant.name}'`
)
.join('\n');
tags = variants.map((variant) => `<${variant.name}/>`).join(',');
diff --git a/showcases/patternhub/styles/globals.scss b/showcases/patternhub/styles/globals.scss
index b41cb6e414f..e0ce94d6984 100644
--- a/showcases/patternhub/styles/globals.scss
+++ b/showcases/patternhub/styles/globals.scss
@@ -3,6 +3,8 @@
@use "@db-ui/foundations/build/scss/screen-sizes";
@use "@db-ui/foundations/build/scss/tonality";
+@use "@db-ui/components/build/styles/_dialog-init";
+
@forward "@db-ui/components/build/styles/db-ui-42-webpack";
@forward "@db-ui/foundations/build/css/colors/classes/all";
@forward "@db-ui/foundations/build/css/fonts/classes/all";
@@ -114,7 +116,7 @@ div[class^="ch-"] {
div,
span {
@extend %db-overwrite-font-size-sm;
- color: colors.$db-base-on-bg;
+ color: white;
}
}
@@ -345,3 +347,69 @@ h6 {
}
}
}
+
+.db-code-docs {
+ min-block-size: variables.$db-sizing-3xl;
+ align-items: center;
+ justify-content: center;
+ padding: variables.$db-spacing-fixed-xl;
+ margin-block-end: calc(
+ #{variables.$db-spacing-fixed-xl} + #{variables.$db-sizing-sm}
+ );
+ position: relative;
+
+ .code-details {
+ display: flex;
+
+ &[open] {
+ inset-inline-start: 0;
+ inset-block-start: 0;
+ }
+
+ .code-button {
+ position: absolute;
+ inset-block-end: calc(
+ -1 * (#{variables.$db-spacing-fixed-sm} + #{variables.$db-sizing-sm})
+ );
+ inset-inline-end: variables.$db-spacing-fixed-sm;
+ z-index: 1;
+ cursor: pointer;
+
+ &::-webkit-details-marker {
+ display: none;
+ }
+ }
+
+ .no-code {
+ margin: auto;
+ }
+
+ .backdrop {
+ border-radius: variables.$db-border-radius-lg;
+ @extend %backdrop;
+ position: absolute;
+ inset: 0;
+ }
+
+ .code {
+ overflow: auto;
+ position: absolute;
+ inset: 0;
+ z-index: 1;
+ margin: variables.$db-spacing-fixed-md;
+ display: flex;
+ flex-direction: column;
+ gap: variables.$db-spacing-fixed-sm;
+
+ .tab-container {
+ position: relative;
+
+ .copy-button {
+ position: absolute;
+ inset-inline-end: variables.$db-spacing-fixed-sm;
+ inset-block-start: variables.$db-spacing-fixed-sm;
+ }
+ }
+ }
+ }
+}
diff --git a/showcases/patternhub/styles/highlight.scss b/showcases/patternhub/styles/highlight.scss
new file mode 100644
index 00000000000..eca0c113263
--- /dev/null
+++ b/showcases/patternhub/styles/highlight.scss
@@ -0,0 +1,113 @@
+@use "@db-ui/foundations/build/scss/variables";
+@use "@db-ui/foundations/build/scss/colors";
+
+pre:has(.hljs):not(:has(.language-shell)) {
+ @extend %db-bg-neutral-transparent-full;
+
+ .hljs {
+ @extend %db-bg-neutral-transparent-full;
+ }
+}
+
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+ /* prettylights-syntax-keyword */
+ color: colors.$db-successful-text;
+}
+
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+ /* prettylights-syntax-entity */
+ color: colors.$db-successful-text;
+}
+.hljs-attribute,
+.hljs-literal,
+.hljs-number,
+.hljs-operator,
+.hljs-variable,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id {
+ /* prettylights-syntax-constant */
+ color: colors.$db-successful-text;
+}
+.hljs-regexp,
+.hljs-string,
+.hljs-meta .hljs-string {
+ /* prettylights-syntax-string */
+ color: colors.$db-successful-text;
+}
+.hljs-built_in,
+.hljs-symbol {
+ /* prettylights-syntax-variable */
+ color: colors.$db-warning-text;
+}
+.hljs-attr {
+ color: colors.$db-informational-text;
+}
+.hljs-meta,
+.hljs-comment,
+.hljs-code,
+.hljs-formula {
+ /* prettylights-syntax-comment */
+ color: colors.$db-current-color;
+}
+
+.hljs-tag,
+.hljs-name {
+ color: colors.$db-warning-text;
+}
+
+.hljs-quote,
+.hljs-selector-tag,
+.hljs-selector-pseudo {
+ /* prettylights-syntax-entity-tag */
+ color: colors.$db-successful-text;
+}
+.hljs-subst {
+ /* prettylights-syntax-storage-modifier-import */
+ color: colors.$db-neutral-bg;
+}
+.hljs-section {
+ /* prettylights-syntax-markup-heading */
+ color: colors.$db-informational-text;
+ font-weight: bold;
+}
+.hljs-bullet {
+ /* prettylights-syntax-markup-list */
+ color: colors.$db-warning-text;
+}
+.hljs-emphasis {
+ /* prettylights-syntax-markup-italic */
+ color: colors.$db-current-color;
+ font-style: italic;
+}
+.hljs-strong {
+ /* prettylights-syntax-markup-bold */
+ color: colors.$db-current-color;
+ font-weight: bold;
+}
+.hljs-addition {
+ /* prettylights-syntax-markup-inserted */
+ color: colors.$db-successful-text;
+ background-color: colors.$db-neutral-text;
+}
+.hljs-deletion {
+ /* prettylights-syntax-markup-deleted */
+ color: colors.$db-critical-text;
+ background-color: colors.$db-neutral-text;
+}
+.hljs-char.escape_,
+.hljs-link,
+.hljs-params,
+.hljs-property,
+.hljs-punctuation {
+ /* purposely ignored */
+}
diff --git a/showcases/react-showcase/src/components/index.tsx b/showcases/react-showcase/src/components/index.tsx
index 5c500ecb485..4dcc67d8b5a 100644
--- a/showcases/react-showcase/src/components/index.tsx
+++ b/showcases/react-showcase/src/components/index.tsx
@@ -1,4 +1,4 @@
-import { DBCodeDocs, DBDivider, DBLink } from '../../../../output/react/src';
+import { DBCard, DBDivider, DBLink } from '../../../../output/react/src';
import useQuery from '../hooks/use-query';
import type {
DefaultComponentProps,
@@ -6,7 +6,7 @@ import type {
} from '../../../shared/default-component-data';
const VariantList = ({ examples }: DefaultComponentVariants) => (
-
+
+
);
const DefaultComponent = ({ title, variants }: DefaultComponentProps) => {
diff --git a/showcases/shared/drawer.json b/showcases/shared/drawer.json
index 96875ea117a..38cacd520ed 100644
--- a/showcases/shared/drawer.json
+++ b/showcases/shared/drawer.json
@@ -5,17 +5,35 @@
{
"name": "functional",
"className": "db-ui-functional",
- "props": {}
+ "props": {},
+ "code": {
+ "html": "",
+ "angular": "\n\tfunctional\n ",
+ "react": " {\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tfunctional\n\t\t\t",
+ "vue": "\n\t\tfunctional\n\t "
+ }
},
{
"name": "regular (Default)",
"className": "db-ui-regular",
- "props": {}
+ "props": {},
+ "code": {
+ "html": "",
+ "angular": "\n\tregular (Default)\n ",
+ "react": " {\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tregular (Default)\n\t\t\t",
+ "vue": "\n\t\tregular (Default)\n\t "
+ }
},
{
"name": "expressive",
"className": "db-ui-expressive",
- "props": {}
+ "props": {},
+ "code": {
+ "html": "",
+ "angular": "\n\texpressive\n ",
+ "react": " {\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\texpressive\n\t\t\t",
+ "vue": "\n\t\texpressive\n\t "
+ }
}
]
},
@@ -23,9 +41,15 @@
"name": "Size",
"examples": [
{
- "name": "With padding (Default)",
+ "name": "Medium (Default)",
"props": {
"withCloseButton": true
+ },
+ "code": {
+ "html": "",
+ "angular": "\n\tWith padding (Default)\n ",
+ "react": " {\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tWith padding (Default)\n\t\t\t",
+ "vue": "With padding (Default) "
}
},
{
@@ -33,6 +57,12 @@
"props": {
"withCloseButton": true,
"width": "full"
+ },
+ "code": {
+ "html": "",
+ "angular": "\n\tFull\n ",
+ "react": "\t\t\t {\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tFull\n\t\t\t",
+ "vue": "\t\n\t\tFull\n\t "
}
}
]
@@ -44,6 +74,12 @@
"name": "No rounding (Default)",
"props": {
"withCloseButton": true
+ },
+ "code": {
+ "html": "",
+ "angular": "\n\tNo rounding (Default)\n ",
+ "react": " {\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tNo rounding (Default)\n\t\t\t",
+ "vue": "No rounding (Default) "
}
},
{
@@ -51,6 +87,12 @@
"props": {
"withCloseButton": true,
"rounded": true
+ },
+ "code": {
+ "html": "",
+ "angular": "\n\tRounded\n ",
+ "react": " {\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tRounded\n\t\t\t",
+ "vue": "Rounded "
}
}
]
@@ -62,6 +104,12 @@
"name": "Medium (Default)",
"props": {
"withCloseButton": true
+ },
+ "code": {
+ "html": "",
+ "angular": "\n\tMedium (Default)\n ",
+ "react": " {\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tMedium (Default)\n\t\t\t",
+ "vue": "Medium (Default) "
}
},
{
@@ -69,6 +117,12 @@
"props": {
"withCloseButton": true,
"spacing": "small"
+ },
+ "code": {
+ "html": "",
+ "angular": "\n\tSmall\n ",
+ "react": " {\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tSmall\n\t\t\t",
+ "vue": "Small "
}
},
{
@@ -76,6 +130,12 @@
"props": {
"withCloseButton": true,
"spacing": "large"
+ },
+ "code": {
+ "html": "",
+ "angular": "\n\tLarge\n ",
+ "react": " {\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tLarge\n\t\t\t",
+ "vue": "Large "
}
},
{
@@ -83,6 +143,12 @@
"props": {
"withCloseButton": true,
"spacing": "none"
+ },
+ "code": {
+ "html": "",
+ "angular": "\n\tNone\n ",
+ "react": " {\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tNone\n\t\t\t",
+ "vue": "None "
}
}
]
@@ -94,6 +160,12 @@
"name": "With Backdrop (Default)",
"props": {
"withCloseButton": true
+ },
+ "code": {
+ "html": "",
+ "angular": "\n\tWith Backdrop (Default)\n ",
+ "react": " {\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tWith Backdrop (Default)\n\t\t\t",
+ "vue": "With Backdrop (Default) "
}
},
{
@@ -101,6 +173,12 @@
"props": {
"withCloseButton": true,
"backdrop": "weak"
+ },
+ "code": {
+ "html": "",
+ "angular": "\n\tBackdrop-weak\n ",
+ "react": " {\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tBackdrop-weak\n\t\t\t",
+ "vue": "Backdrop-weak "
}
},
{
@@ -108,6 +186,12 @@
"props": {
"withCloseButton": true,
"backdrop": "none"
+ },
+ "code": {
+ "html": "",
+ "angular": "\n\tNo Backdrop\n ",
+ "react": " {\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tNo Backdrop\n\t\t\t",
+ "vue": "No Backdrop "
}
}
]
@@ -119,6 +203,12 @@
"name": "Right (Default)",
"props": {
"withCloseButton": true
+ },
+ "code": {
+ "html": "",
+ "angular": "\n\tRight (Default)\n ",
+ "react": " {\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tRight (Default)\n\t\t\t",
+ "vue": "Right (Default) "
}
},
{
@@ -126,6 +216,12 @@
"props": {
"withCloseButton": true,
"direction": "left"
+ },
+ "code": {
+ "html": "",
+ "angular": "\n\tLeft\n ",
+ "react": " {\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tLeft\n\t\t\t",
+ "vue": "Left "
}
},
{
@@ -133,6 +229,12 @@
"props": {
"withCloseButton": true,
"direction": "up"
+ },
+ "code": {
+ "html": "",
+ "angular": "\n\tUp\n ",
+ "react": " {\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tUp\n\t\t\t",
+ "vue": "Up "
}
},
{
@@ -140,6 +242,12 @@
"props": {
"withCloseButton": true,
"direction": "down"
+ },
+ "code": {
+ "html": "",
+ "angular": "\n\tDown\n ",
+ "react": " {\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tDown\n\t\t\t",
+ "vue": "Down "
}
}
]
diff --git a/showcases/shared/header.json b/showcases/shared/header.json
index 251156fbf82..8da31800e6d 100644
--- a/showcases/shared/header.json
+++ b/showcases/shared/header.json
@@ -5,17 +5,35 @@
{
"name": "functional",
"className": "db-ui-functional",
- "props": {}
+ "props": {},
+ "code": {
+ "html": "\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tClose Button\n\t\t\t\t\t\n\t\t\t\t \n\t\t\t\t
\n\t
- {example.example}
+const VariantList = ({ examples, slotCode }: DefaultComponentVariants) => {
+ const [open, setOpen] = useState();
+ return (
+
+
-
-);
+
+
+ );
+};
const DefaultComponent = ({ title, variants }: DefaultComponentProps) => {
const [foundVariant, setFoundVariant] =
diff --git a/showcases/patternhub/next.config.js b/showcases/patternhub/next.config.js
index f3bfcd8a919..fbc95039f09 100644
--- a/showcases/patternhub/next.config.js
+++ b/showcases/patternhub/next.config.js
@@ -1,23 +1,11 @@
-import { remarkCodeHike } from '@code-hike/mdx';
import remarkGfm from 'remark-gfm';
import generated from '@next/mdx';
import rehypeSlug from 'rehype-slug';
-import { getTheme } from './code-theme.js';
const withMDX = generated({
extension: /\.mdx?$/,
options: {
- remarkPlugins: [
- remarkGfm,
- [
- remarkCodeHike,
- {
- theme: getTheme(),
- showCopyButton: true,
- showExpandButton: true
- }
- ]
- ],
+ remarkPlugins: [remarkGfm],
rehypePlugins: [rehypeSlug],
providerImportSource: '@mdx-js/react'
}
diff --git a/showcases/patternhub/package.json b/showcases/patternhub/package.json
index 35f6bd45fc2..381c13eb9ad 100644
--- a/showcases/patternhub/package.json
+++ b/showcases/patternhub/package.json
@@ -19,11 +19,11 @@
"next:start": "next start",
"open": "open-cli http://localhost:3000/mono/sub",
"prebuild:app": "cpr ../../node_modules/iframe-resizer/js/ public/iframe-resizer -o",
- "start": "cross-env NEXT_PUBLIC_BASE_PATH=/mono/sub npm-run-all compile next:start"
+ "start": "cross-env NEXT_PUBLIC_BASE_PATH=/mono/sub npm-run-all compile next:dev"
},
"dependencies": {
- "@code-hike/mdx": "^0.9.0",
- "dompurify": "3.0.10",
+ "dompurify": "3.0.11",
+ "highlight.js": "^11.9.0",
"next": "14.1.4",
"react": "18.2.0",
"react-dom": "18.2.0",
diff --git a/showcases/patternhub/pages/_app.tsx b/showcases/patternhub/pages/_app.tsx
index ca7c2429ac8..079694bce1e 100644
--- a/showcases/patternhub/pages/_app.tsx
+++ b/showcases/patternhub/pages/_app.tsx
@@ -1,8 +1,8 @@
import { MDXProvider } from '@mdx-js/react';
import Script from 'next/script';
import type { AppProps } from 'next/app';
-import '@code-hike/mdx/dist/index.css';
import '../styles/globals.scss';
+import '../styles/highlight.scss';
import '../../showcase-styles.css';
import LinkHeader from '../components/link-header';
diff --git a/showcases/patternhub/scripts/get-code-files.js b/showcases/patternhub/scripts/get-code-files.js
index a5eae9209c6..fbf9cfac603 100644
--- a/showcases/patternhub/scripts/get-code-files.js
+++ b/showcases/patternhub/scripts/get-code-files.js
@@ -8,7 +8,7 @@ import { getCodeByFramework } from './utils.js';
const sharedPath = '../shared';
const reactPath = '../react-showcase/src/components';
-const codeFrameworks = ['angular', 'react', 'vue', 'html'];
+const codeFrameworks = ['angular', 'html', 'react', 'vue'];
const plugins = [prettier0];
const getFileTypeByFramework = (framework) => {
@@ -26,10 +26,37 @@ const getFileTypeByFramework = (framework) => {
const getExamplesAsMDX = async (componentName, variant) => {
const examples = variant.examples;
- let result = '';
+ let result =
+ "import { useEffect, useState } from 'react';\n" +
+ 'import {\n' +
+ 'DBButton,\n' +
+ 'DBCard,\n' +
+ 'DBTab,\n' +
+ 'DBTabList,\n' +
+ 'DBTabPanel,\n' +
+ 'DBTabs\n' +
+ "} from '../../../../../../output/react/src';\n" +
+ `const ${variant.name} = () => {
+ const [copied, setCopied] = useState
+ {examples.map((example, exampleIndex) => (
+
+
+
+ {example.example}
+
+ ))}
+ {
+ setOpen(!open);
+ }}>
+
+ {open ? 'Hide code' : 'Show code'} +
+
+
+
+ {slotCode}
+
- ))}
-
+ {\`${exampleCode}\`}
+
+
+
{examples.map((example, exampleIndex) => (
- (
))}
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\n\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\n\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\n\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\n\t {
>
{{ title }}
@@ -117,10 +107,7 @@ const getCodeSnippets = (examples: DefaultExample[]) => {
>
{{ variant.name }}
-
+
-
+
{
>