From 6fb9a77a87f789c2a2d9a1663f38b60299cfebfc Mon Sep 17 00:00:00 2001 From: Nicolas Merget Date: Thu, 15 May 2025 10:38:22 +0200 Subject: [PATCH 01/54] feat: shell, control-panel, navigation --- package-lock.json | 188 ++++++++++++++++++++++-------------- package.json | 4 + scripts/rename-component.ts | 95 ++++++++++++++++++ 3 files changed, 214 insertions(+), 73 deletions(-) create mode 100644 scripts/rename-component.ts diff --git a/package-lock.json b/package-lock.json index 1e10bcd58bd1..d00a6080fe5a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -40,6 +40,7 @@ "@guidepup/playwright": "^0.14.2", "@guidepup/record": "^0.1.0", "@playwright/test": "1.51.1", + "@types/fs-extra": "^11.0.4", "accessibility-checker": "^4.0.4", "adm-zip": "0.5.16", "commander": "^13.1.0", @@ -49,9 +50,11 @@ "eslint": "8.57.1", "eslint-plugin-prettier": "^5.4.0", "find-versions": "^6.0.0", + "fs-extra": "^11.3.0", "glob": "^11.0.2", "http-server": "14.1.1", "husky": "9.1.7", + "ignore": "^7.0.3", "jscpd": "^4.0.5", "lint-staged": "^16.0.0", "markdownlint-cli": "^0.44.0", @@ -3098,6 +3101,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@custom-elements-manifest/analyzer/node_modules/ignore": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", + "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==", + "dev": true, + "engines": { + "node": ">= 4" + } + }, "node_modules/@custom-elements-manifest/analyzer/node_modules/picomatch": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", @@ -4259,6 +4271,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@eslint/eslintrc/node_modules/ignore": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", + "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==", + "devOptional": true, + "engines": { + "node": ">= 4" + } + }, "node_modules/@eslint/eslintrc/node_modules/json-schema-traverse": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", @@ -7662,14 +7683,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/@nuxt/kit/node_modules/ignore": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.3.tgz", - "integrity": "sha512-bAH5jbK/F3T3Jls4I0SO1hmPR0dKU0a7+SY6n1yzRtG54FLO8d6w/nxLFX2Nb7dBu6cCWXPaAME6cYqFUMmuCA==", - "engines": { - "node": ">= 4" - } - }, "node_modules/@nuxt/kit/node_modules/path-type": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/path-type/-/path-type-6.0.0.tgz", @@ -9900,6 +9913,16 @@ "@types/send": "*" } }, + "node_modules/@types/fs-extra": { + "version": "11.0.4", + "resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-11.0.4.tgz", + "integrity": "sha512-yTbItCNreRooED33qjunPthRcSjERP1r4MqCZc7wv0u2sUkzTFp45tgUfS5+r7FrZPdmCCNflLhVSP/o+SemsQ==", + "dev": true, + "dependencies": { + "@types/jsonfile": "*", + "@types/node": "*" + } + }, "node_modules/@types/hast": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz", @@ -9936,6 +9959,15 @@ "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==", "dev": true }, + "node_modules/@types/jsonfile": { + "version": "6.1.4", + "resolved": "https://registry.npmjs.org/@types/jsonfile/-/jsonfile-6.1.4.tgz", + "integrity": "sha512-D5qGUYwjvnNNextdU59/+fI+spnwtTFmyQP0h+PfIOSkNfpU6AOICUOkm4i0OnSk+NyjdPJrxCDro0sJsWlRpQ==", + "dev": true, + "dependencies": { + "@types/node": "*" + } + }, "node_modules/@types/katex": { "version": "0.16.7", "resolved": "https://registry.npmjs.org/@types/katex/-/katex-0.16.7.tgz", @@ -10237,16 +10269,6 @@ "url": "https://opencollective.com/eslint" } }, - "node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": { - "version": "7.0.4", - "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.4.tgz", - "integrity": "sha512-gJzzk+PQNznz8ysRrC0aOkBNVRBDtE1n53IqyqEf3PXrYwomFs5q4pGMizBMJF+ykh03insJ27hB8gSrD2Hn8A==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 4" - } - }, "node_modules/@typescript-eslint/parser": { "version": "8.29.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.29.0.tgz", @@ -14707,15 +14729,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/copy-webpack-plugin/node_modules/ignore": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.3.tgz", - "integrity": "sha512-bAH5jbK/F3T3Jls4I0SO1hmPR0dKU0a7+SY6n1yzRtG54FLO8d6w/nxLFX2Nb7dBu6cCWXPaAME6cYqFUMmuCA==", - "dev": true, - "engines": { - "node": ">= 4" - } - }, "node_modules/copy-webpack-plugin/node_modules/path-type": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/path-type/-/path-type-6.0.0.tgz", @@ -16921,6 +16934,15 @@ "node": ">=0.8.0" } }, + "node_modules/eslint-plugin-eslint-comments/node_modules/ignore": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", + "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==", + "dev": true, + "engines": { + "node": ">= 4" + } + }, "node_modules/eslint-plugin-import": { "version": "2.31.0", "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.31.0.tgz", @@ -17072,6 +17094,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/eslint-plugin-n/node_modules/ignore": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", + "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==", + "dev": true, + "engines": { + "node": ">= 4" + } + }, "node_modules/eslint-plugin-n/node_modules/minimatch": { "version": "9.0.5", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", @@ -17432,6 +17463,15 @@ "node": ">=8" } }, + "node_modules/eslint/node_modules/ignore": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", + "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==", + "devOptional": true, + "engines": { + "node": ">= 4" + } + }, "node_modules/eslint/node_modules/json-schema-traverse": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", @@ -19222,6 +19262,14 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/globby/node_modules/ignore": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", + "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==", + "engines": { + "node": ">= 4" + } + }, "node_modules/globby/node_modules/slash": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", @@ -20410,9 +20458,9 @@ } }, "node_modules/ignore": { - "version": "5.3.2", - "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", - "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==", + "version": "7.0.4", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.4.tgz", + "integrity": "sha512-gJzzk+PQNznz8ysRrC0aOkBNVRBDtE1n53IqyqEf3PXrYwomFs5q4pGMizBMJF+ykh03insJ27hB8gSrD2Hn8A==", "engines": { "node": ">= 4" } @@ -23474,15 +23522,6 @@ "url": "https://github.com/sponsors/isaacs" } }, - "node_modules/markdownlint-cli/node_modules/ignore": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.3.tgz", - "integrity": "sha512-bAH5jbK/F3T3Jls4I0SO1hmPR0dKU0a7+SY6n1yzRtG54FLO8d6w/nxLFX2Nb7dBu6cCWXPaAME6cYqFUMmuCA==", - "dev": true, - "engines": { - "node": ">= 4" - } - }, "node_modules/markdownlint-cli/node_modules/jackspeak": { "version": "3.4.3", "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz", @@ -25909,14 +25948,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/nitropack/node_modules/ignore": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.3.tgz", - "integrity": "sha512-bAH5jbK/F3T3Jls4I0SO1hmPR0dKU0a7+SY6n1yzRtG54FLO8d6w/nxLFX2Nb7dBu6cCWXPaAME6cYqFUMmuCA==", - "engines": { - "node": ">= 4" - } - }, "node_modules/nitropack/node_modules/jackspeak": { "version": "3.4.3", "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz", @@ -26888,14 +26919,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/nuxt/node_modules/ignore": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.3.tgz", - "integrity": "sha512-bAH5jbK/F3T3Jls4I0SO1hmPR0dKU0a7+SY6n1yzRtG54FLO8d6w/nxLFX2Nb7dBu6cCWXPaAME6cYqFUMmuCA==", - "engines": { - "node": ">= 4" - } - }, "node_modules/nuxt/node_modules/lru-cache": { "version": "10.4.3", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz", @@ -33177,14 +33200,6 @@ "hookified": "^1.8.1" } }, - "node_modules/stylelint/node_modules/ignore": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.3.tgz", - "integrity": "sha512-bAH5jbK/F3T3Jls4I0SO1hmPR0dKU0a7+SY6n1yzRtG54FLO8d6w/nxLFX2Nb7dBu6cCWXPaAME6cYqFUMmuCA==", - "engines": { - "node": ">= 4" - } - }, "node_modules/stylelint/node_modules/is-fullwidth-code-point": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", @@ -38441,6 +38456,15 @@ "url": "https://opencollective.com/eslint" } }, + "node_modules/xo/node_modules/@eslint/eslintrc/node_modules/ignore": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", + "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==", + "dev": true, + "engines": { + "node": ">= 4" + } + }, "node_modules/xo/node_modules/@sindresorhus/merge-streams": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-2.3.0.tgz", @@ -38486,6 +38510,15 @@ } } }, + "node_modules/xo/node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", + "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==", + "dev": true, + "engines": { + "node": ">= 4" + } + }, "node_modules/xo/node_modules/@typescript-eslint/parser": { "version": "7.18.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.18.0.tgz", @@ -38619,6 +38652,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/xo/node_modules/@typescript-eslint/typescript-estree/node_modules/ignore": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", + "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==", + "dev": true, + "engines": { + "node": ">= 4" + } + }, "node_modules/xo/node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": { "version": "9.0.5", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", @@ -38800,15 +38842,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/xo/node_modules/globby/node_modules/ignore": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.3.tgz", - "integrity": "sha512-bAH5jbK/F3T3Jls4I0SO1hmPR0dKU0a7+SY6n1yzRtG54FLO8d6w/nxLFX2Nb7dBu6cCWXPaAME6cYqFUMmuCA==", - "dev": true, - "engines": { - "node": ">= 4" - } - }, "node_modules/xo/node_modules/json-schema-traverse": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", @@ -39622,6 +39655,15 @@ "node": ">=10" } }, + "packages/components/node_modules/ignore": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", + "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==", + "dev": true, + "engines": { + "node": ">= 4" + } + }, "packages/components/node_modules/minimatch": { "version": "9.0.5", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", @@ -39830,7 +39872,7 @@ }, "showcases/next-showcase": { "dependencies": { - "next": "*", + "next": "latest", "react": "18.3.1", "react-dom": "18.3.1" }, diff --git a/package.json b/package.json index a0bec0f24266..86648918fdf4 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "prepare": "husky", "regenerate:screenshots": "npm run build && npm run build --workspace=react-showcase && docker-compose -f ./e2e/docker-compose.regenerate.yml up", "regenerate:screenshots:rebuild": "npm run rm:builds && node scripts/rebuild-e2e.js", + "rename-component": "tsx scripts/rename-component.ts", "rm:builds": "npm run rm:builds --workspace=scripts", "start": "npm run start --workspace=patternhub", "test": "npm run test --workspace=scripts", @@ -70,6 +71,7 @@ "@guidepup/playwright": "^0.14.2", "@guidepup/record": "^0.1.0", "@playwright/test": "1.51.1", + "@types/fs-extra": "^11.0.4", "accessibility-checker": "^4.0.4", "adm-zip": "0.5.16", "commander": "^13.1.0", @@ -79,9 +81,11 @@ "eslint": "8.57.1", "eslint-plugin-prettier": "^5.4.0", "find-versions": "^6.0.0", + "fs-extra": "^11.3.0", "glob": "^11.0.2", "http-server": "14.1.1", "husky": "9.1.7", + "ignore": "^7.0.3", "jscpd": "^4.0.5", "lint-staged": "^16.0.0", "markdownlint-cli": "^0.44.0", diff --git a/scripts/rename-component.ts b/scripts/rename-component.ts new file mode 100644 index 000000000000..f36bd5e8636d --- /dev/null +++ b/scripts/rename-component.ts @@ -0,0 +1,95 @@ +import { dirname, join, relative } from 'node:path'; +import { existsSync, lstatSync, readFileSync, writeFileSync } from 'node:fs'; +import { execSync } from 'node:child_process'; +import { glob } from 'glob'; +import ignore from 'ignore'; +import { move } from 'fs-extra'; + +const from = 'page'; +const to = 'shell'; + +// Get the current directory +const __dirname = dirname('.'); + +// Read .gitignore file +const gitignorePath = join(__dirname, '.gitignore'); +const gitignoreContent = readFileSync(gitignorePath, 'utf8'); +const ig = ignore().add(gitignoreContent); + +const toPascalCase = (string_: string, seperator = ''): string => { + return string_ + .replaceAll(/[_-]+/g, ' ') + .replaceAll(/[^\s\w]/g, '') + .split(' ') + .map( + (word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase() + ) + .join(seperator); +}; + +const replace = (content: string): string => { + return content + .replaceAll(from, to) + .replaceAll(from.replaceAll('-', ''), to.replaceAll('-', '')) + .replaceAll(toPascalCase(from), toPascalCase(to)) + .replaceAll(toPascalCase(from, ' '), toPascalCase(to, ' ')); +}; + +// Function to rename directories and files +const renamePaths = async (oldPath: string, newPath: string) => { + console.log(execSync(`git status "${oldPath}"`).toString()); + + if (existsSync(oldPath)) { + await move(oldPath, newPath, { overwrite: true }); + + execSync(`git add "${newPath}"`); + execSync(`git rm --cached "${oldPath}"`); + } +}; + +// Function to replace content in files +const replaceContent = (filePath: string) => { + const content = readFileSync(filePath, 'utf8'); + const updatedContent = replace(content); + writeFileSync(filePath, updatedContent, 'utf8'); +}; + +// Get all files and directories +const filesAndDirectories = glob.sync('**/*', { + nodir: false, + dot: true, + ignore: [ + '__snapshots__/**', + '.git/**', + 'node_modules/**', + 'scripts/**', + 'docs/**', + 'build-*/**', + 'output/**', + '.*/**' + ] +}); + +// Filter out ignored files and directories +const filteredPaths = filesAndDirectories.filter( + (filePath: string) => !ig.ignores(filePath) +); + +// Process each file and directory +for (const filePath of filteredPaths) { + const oldPath = join(__dirname, filePath); + const newPath = replace(oldPath); + + // Replace content in files + if (existsSync(oldPath) && lstatSync(oldPath).isFile()) { + replaceContent(oldPath); + // Rename files + if (oldPath !== newPath) { + console.log('renamePaths', oldPath, newPath); + // eslint-disable-next-line no-await-in-loop + await renamePaths(oldPath, newPath); + } + } +} + +console.log('Renaming and content replacement completed.'); From 0ba1ee736f3734b20dc4184937c55efce1090064 Mon Sep 17 00:00:00 2001 From: Nicolas Merget Date: Thu, 15 May 2025 11:25:42 +0200 Subject: [PATCH 02/54] test: rename page to shell --- .../components/scripts/post-build/components.ts | 2 +- packages/components/src/components/page/index.ts | 1 - .../components/{page => shell}/docs/Angular.md | 10 +++++----- .../src/components/{page => shell}/docs/HTML.md | 4 ++-- .../components/{page => shell}/docs/Migration.md | 6 +++--- .../src/components/{page => shell}/docs/React.md | 8 ++++---- .../src/components/{page => shell}/docs/Vue.md | 8 ++++---- .../components/src/components/shell/index.ts | 1 + packages/components/src/index.ts | 2 +- packages/components/src/styles/index.scss | 2 +- .../src/styles/internal/_custom-elements.scss | 2 +- scripts/rename-component.ts | 1 + .../angular-showcase/src/app/app.component.html | 4 ++-- .../angular-showcase/src/app/app.component.ts | 6 +++--- showcases/e2e/default.ts | 16 ++++++++-------- showcases/e2e/home/showcase-home.spec.ts | 4 ++-- showcases/next-showcase/pages/[[...slug]].tsx | 8 ++++---- showcases/next-showcase/pages/_app.tsx | 11 ++++++++--- showcases/nuxt-showcase/layouts/default.vue | 6 +++--- showcases/patternhub/components/default-page.tsx | 6 +++--- .../patternhub/pages/components/[[...slug]].tsx | 4 ++-- showcases/patternhub/styles/globals.scss | 6 +++--- showcases/react-showcase/src/app.tsx | 13 +++++++++---- .../react-showcase/src/components/form/index.tsx | 4 +--- .../react-showcase/src/components/page/index.tsx | 12 ++++++------ showcases/showcase-styles.css | 15 +-------------- showcases/stencil-showcase/src/main.ts | 2 +- showcases/vue-showcase/src/App.vue | 6 +++--- 28 files changed, 83 insertions(+), 87 deletions(-) delete mode 100644 packages/components/src/components/page/index.ts rename packages/components/src/components/{page => shell}/docs/Angular.md (73%) rename packages/components/src/components/{page => shell}/docs/HTML.md (80%) rename packages/components/src/components/{page => shell}/docs/Migration.md (58%) rename packages/components/src/components/{page => shell}/docs/React.md (60%) rename packages/components/src/components/{page => shell}/docs/Vue.md (69%) create mode 100644 packages/components/src/components/shell/index.ts diff --git a/packages/components/scripts/post-build/components.ts b/packages/components/scripts/post-build/components.ts index 363245f891a2..dbe7be68883a 100644 --- a/packages/components/scripts/post-build/components.ts +++ b/packages/components/scripts/post-build/components.ts @@ -341,7 +341,7 @@ export const getComponents = (): Component[] => [ }, { - name: 'page' + name: 'shell' }, { name: 'header', diff --git a/packages/components/src/components/page/index.ts b/packages/components/src/components/page/index.ts deleted file mode 100644 index 0dd45fb6e00f..000000000000 --- a/packages/components/src/components/page/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as DBPage } from './page'; diff --git a/packages/components/src/components/page/docs/Angular.md b/packages/components/src/components/shell/docs/Angular.md similarity index 73% rename from packages/components/src/components/page/docs/Angular.md rename to packages/components/src/components/shell/docs/Angular.md index 5c0eacdfa437..486f2cc1bbe7 100644 --- a/packages/components/src/components/page/docs/Angular.md +++ b/packages/components/src/components/shell/docs/Angular.md @@ -6,13 +6,13 @@ For general installation and configuration take a look at the [ngx-core-componen ```ts app.component.ts //app.component.ts -import { DBPage, DBHeader } from '@db-ux/ngx-core-components'; +import { DBShell, DBHeader } from '@db-ux/ngx-core-components'; @Component({ // ... imports: [ // ..., - DBPage, DBHeader + DBShell, DBHeader ], // ... }) @@ -22,8 +22,8 @@ import { DBPage, DBHeader } from '@db-ux/ngx-core-components'; ```html app.component.html - + ... -
Main Page
- +
Main Shell
+ ``` diff --git a/packages/components/src/components/page/docs/HTML.md b/packages/components/src/components/shell/docs/HTML.md similarity index 80% rename from packages/components/src/components/page/docs/HTML.md rename to packages/components/src/components/shell/docs/HTML.md index f436daacc714..a2e449614ed5 100644 --- a/packages/components/src/components/page/docs/HTML.md +++ b/packages/components/src/components/shell/docs/HTML.md @@ -8,9 +8,9 @@ For general installation and configuration take a look at the [components](https ... -
+
...
-
Main Page
+
Main Shell
``` diff --git a/packages/components/src/components/page/docs/Migration.md b/packages/components/src/components/shell/docs/Migration.md similarity index 58% rename from packages/components/src/components/page/docs/Migration.md rename to packages/components/src/components/shell/docs/Migration.md index 8a18168f4d3b..7fd693aec310 100644 --- a/packages/components/src/components/page/docs/Migration.md +++ b/packages/components/src/components/shell/docs/Migration.md @@ -7,6 +7,6 @@ ### class -| Before | Status | After | Description | -| ---------- | :----: | --------- | ----------- | -| `rea-page` | 🔁 | `db-page` | | +| Before | Status | After | Description | +| ----------- | :----: | ---------- | ----------- | +| `rea-shell` | 🔁 | `db-shell` | | diff --git a/packages/components/src/components/page/docs/React.md b/packages/components/src/components/shell/docs/React.md similarity index 60% rename from packages/components/src/components/page/docs/React.md rename to packages/components/src/components/shell/docs/React.md index 21784a307e48..138554d68a6c 100644 --- a/packages/components/src/components/page/docs/React.md +++ b/packages/components/src/components/shell/docs/React.md @@ -6,12 +6,12 @@ For general installation and configuration take a look at the [react-core-compon ```tsx App.tsx // App.tsx -import { DBPage, DBHeader } from "@db-ux/react-core-components"; +import { DBShell, DBHeader } from "@db-ux/react-core-components"; const App = () => ( - ...}> -
Main Page
- + ...}> +
Main Shell
+ ); export default App; diff --git a/packages/components/src/components/page/docs/Vue.md b/packages/components/src/components/shell/docs/Vue.md similarity index 69% rename from packages/components/src/components/page/docs/Vue.md rename to packages/components/src/components/shell/docs/Vue.md index 6ade8c89aefa..b36193b6ffa5 100644 --- a/packages/components/src/components/page/docs/Vue.md +++ b/packages/components/src/components/shell/docs/Vue.md @@ -7,13 +7,13 @@ For general installation and configuration take a look at the [v-core-components ```vue App.vue ``` diff --git a/packages/components/src/components/shell/index.ts b/packages/components/src/components/shell/index.ts new file mode 100644 index 000000000000..bd2bdd2b164c --- /dev/null +++ b/packages/components/src/components/shell/index.ts @@ -0,0 +1 @@ +export { default as DBShell } from './shell'; diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index c37692c33320..a7fd58c321f3 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -11,7 +11,7 @@ export * from './components/icon'; export * from './components/infotext'; export * from './components/input'; export * from './components/link'; -export * from './components/page'; +export * from './components/shell'; export * from './components/radio'; export * from './components/section'; export * from './components/select'; diff --git a/packages/components/src/styles/index.scss b/packages/components/src/styles/index.scss index 0830302f8b04..413b0dc447f2 100644 --- a/packages/components/src/styles/index.scss +++ b/packages/components/src/styles/index.scss @@ -6,7 +6,7 @@ @forward "../components/input/input"; @forward "../components/brand/brand"; @forward "../components/header/header"; -@forward "../components/page/page"; +@forward "../components/shell/shell"; @forward "../components/link/link"; @forward "../components/section/section"; @forward "../components/infotext/infotext"; diff --git a/packages/components/src/styles/internal/_custom-elements.scss b/packages/components/src/styles/internal/_custom-elements.scss index 1ba5d7835646..dfaa6683494d 100644 --- a/packages/components/src/styles/internal/_custom-elements.scss +++ b/packages/components/src/styles/internal/_custom-elements.scss @@ -7,4 +7,4 @@ $custom-elements: //hygen-insert db-accordion-item, db-accordion, db-badge, db-navigation-item, db-tag, db-radio, db-select, db-notification, db-brand, db-button, db-card, db-checkbox, db-divider, db-drawer, db-header, db-icon, db-infotext, - db-input, db-link, db-page, db-section, db-tab; + db-input, db-link, db-shell, db-section, db-tab; diff --git a/scripts/rename-component.ts b/scripts/rename-component.ts index f36bd5e8636d..11436c31cd2a 100644 --- a/scripts/rename-component.ts +++ b/scripts/rename-component.ts @@ -59,6 +59,7 @@ const filesAndDirectories = glob.sync('**/*', { nodir: false, dot: true, ignore: [ + 'showcases/**', '__snapshots__/**', '.git/**', 'node_modules/**', diff --git a/showcases/angular-showcase/src/app/app.component.html b/showcases/angular-showcase/src/app/app.component.html index 6ebdeb5358f3..d61c38bf3255 100644 --- a/showcases/angular-showcase/src/app/app.component.html +++ b/showcases/angular-showcase/src/app/app.component.html @@ -4,7 +4,7 @@
} @if (!page) { - + - + } diff --git a/showcases/angular-showcase/src/app/app.component.ts b/showcases/angular-showcase/src/app/app.component.ts index 62746f5da598..e57fdb01364b 100644 --- a/showcases/angular-showcase/src/app/app.component.ts +++ b/showcases/angular-showcase/src/app/app.component.ts @@ -10,7 +10,7 @@ import { DBButton, DBHeader, DBNavigation, - DBPage, + DBShell, DBSelect, COLOR, COLOR_CONST, @@ -36,7 +36,7 @@ import { FormsModule, RouterOutlet, NavItemComponent, - DBPage, + DBShell, DBHeader, DBNavigation, SecondaryActionDirective, @@ -47,7 +47,7 @@ import { FormsModule, RouterOutlet, NavItemComponent, - DBPage, + DBShell, DBHeader, DBBrand, DBNavigation, diff --git a/showcases/e2e/default.ts b/showcases/e2e/default.ts index 381eb5f6030c..8a6baaf58e13 100644 --- a/showcases/e2e/default.ts +++ b/showcases/e2e/default.ts @@ -3,7 +3,7 @@ import { AxeBuilder } from '@axe-core/playwright'; import { close, getCompliance } from 'accessibility-checker'; import { type ICheckerError } from 'accessibility-checker/lib/api/IChecker'; import { type FullProject } from 'playwright/types/test'; -import { COLORS, lvl1 } from './fixtures/variants'; +import { lvl1 } from './fixtures/variants'; import { setScrollViewport } from './fixtures/viewport'; const density = 'regular'; @@ -45,14 +45,14 @@ export const hasWebComponentSyntax = (showcase: string): boolean => { return isAngular(showcase) || isStencil(showcase); }; -export const waitForDBPage = async (page: Page) => { - const dbPage = page.locator('.db-page'); - // We wait till db-page fully loaded - await dbPage.evaluate((element) => { +export const waitForDBShell = async (page: Page) => { + const dbShell = page.locator('.db-shell'); + // We wait till db-shell fully loaded + await dbShell.evaluate((element) => { element.style.transition = 'none'; }); - await expect(dbPage).not.toHaveAttribute('data-fonts-loaded', 'false'); - await expect(dbPage).toHaveCSS('opacity', '1'); + await expect(dbShell).not.toHaveAttribute('data-fonts-loaded', 'false'); + await expect(dbShell).toHaveCSS('opacity', '1'); await expect(page.locator('html')).toHaveCSS('overflow', 'hidden'); }; @@ -70,7 +70,7 @@ const gotoPage = async ( } ); - await waitForDBPage(page); + await waitForDBShell(page); await setScrollViewport(page, fixedHeight)(); }; diff --git a/showcases/e2e/home/showcase-home.spec.ts b/showcases/e2e/home/showcase-home.spec.ts index 931eec7dfbbd..53d9e6ee82eb 100644 --- a/showcases/e2e/home/showcase-home.spec.ts +++ b/showcases/e2e/home/showcase-home.spec.ts @@ -1,6 +1,6 @@ import { expect, test, type Page } from '@playwright/test'; import { AxeBuilder } from '@axe-core/playwright'; -import { hasWebComponentSyntax, isStencil, waitForDBPage } from '../default'; +import { hasWebComponentSyntax, isStencil, waitForDBShell } from '../default'; const testFormComponents = async ( page: Page, @@ -73,7 +73,7 @@ test.describe('Home', () => { waitUntil: 'domcontentloaded' }); - await waitForDBPage(page); + await waitForDBShell(page); const accessibilityScanResults = await new AxeBuilder({ page }) diff --git a/showcases/next-showcase/pages/[[...slug]].tsx b/showcases/next-showcase/pages/[[...slug]].tsx index a651d234e504..44a06c456693 100644 --- a/showcases/next-showcase/pages/[[...slug]].tsx +++ b/showcases/next-showcase/pages/[[...slug]].tsx @@ -7,12 +7,12 @@ import { type NavigationItem } from '../../react-showcase/src/utils/navigation-item'; -export type DBPage = { +export type DBShell = { path: string; component: any; }; -export type DBPagePath = { +export type DBShellPath = { params: { slug: string[]; }; @@ -58,7 +58,7 @@ export const getStaticPaths = (async () => { NAVIGATION_ITEMS ) as NavigationItem[]; - const paths = getCustomElementsFromNavigationItems( + const paths = getCustomElementsFromNavigationItems( sortedNavigationItems, (accumulator, pathSegments) => { return [...accumulator, { params: { slug: pathSegments } }]; @@ -82,7 +82,7 @@ export default function Home() { NAVIGATION_ITEMS ) as NavigationItem[]; - const routes = getCustomElementsFromNavigationItems( + const routes = getCustomElementsFromNavigationItems( sortedNavigationItems, (accumulator, pathSegments, component) => { return [ diff --git a/showcases/next-showcase/pages/_app.tsx b/showcases/next-showcase/pages/_app.tsx index d0bdf26749b3..2604a054d602 100644 --- a/showcases/next-showcase/pages/_app.tsx +++ b/showcases/next-showcase/pages/_app.tsx @@ -1,6 +1,11 @@ import { useState } from 'react'; import type { AppProps } from 'next/app'; -import { DBBrand, DBButton, DBHeader, DBPage } from '../../../output/react/src'; +import { + DBBrand, + DBButton, + DBHeader, + DBShell +} 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'; @@ -22,7 +27,7 @@ const App = ({ Component, pageProps }: AppProps) => { } return ( - {
- + ); }; diff --git a/showcases/nuxt-showcase/layouts/default.vue b/showcases/nuxt-showcase/layouts/default.vue index 3ddc023cab4d..0680c915c9ab 100644 --- a/showcases/nuxt-showcase/layouts/default.vue +++ b/showcases/nuxt-showcase/layouts/default.vue @@ -1,6 +1,6 @@ ``` diff --git a/packages/components/src/components/header/index.html b/packages/components/src/components/control-panel-brand/index.html similarity index 65% rename from packages/components/src/components/header/index.html rename to packages/components/src/components/control-panel-brand/index.html index 9520bd064942..a361d0c07b1b 100644 --- a/packages/components/src/components/header/index.html +++ b/packages/components/src/components/control-panel-brand/index.html @@ -2,12 +2,11 @@ - DBHeader + DBControlPanelBrand -
-
Header
-
+
+
diff --git a/packages/components/src/components/control-panel-brand/index.ts b/packages/components/src/components/control-panel-brand/index.ts new file mode 100644 index 000000000000..ac47d56f9590 --- /dev/null +++ b/packages/components/src/components/control-panel-brand/index.ts @@ -0,0 +1 @@ +export { default as DBControlPanelBrand } from './control-panel-brand'; diff --git a/packages/components/src/components/control-panel-brand/model.ts b/packages/components/src/components/control-panel-brand/model.ts new file mode 100644 index 000000000000..38d73536f8e0 --- /dev/null +++ b/packages/components/src/components/control-panel-brand/model.ts @@ -0,0 +1,20 @@ +import { + GlobalProps, + GlobalState, + IconProps, + ShowIconProps, + TextProps +} from '../../shared/model'; + +export type DBControlPanelBrandDefaultProps = { +}; + +export type DBControlPanelBrandProps = DBControlPanelBrandDefaultProps & + GlobalProps & + IconProps & + ShowIconProps & + TextProps; + +export type DBControlPanelBrandDefaultState = {}; + +export type DBControlPanelBrandState = DBControlPanelBrandDefaultState & GlobalState; diff --git a/packages/components/src/components/control-panel-desktop/control-panel-desktop.lite.tsx b/packages/components/src/components/control-panel-desktop/control-panel-desktop.lite.tsx new file mode 100644 index 000000000000..0e8699a47ee1 --- /dev/null +++ b/packages/components/src/components/control-panel-desktop/control-panel-desktop.lite.tsx @@ -0,0 +1,47 @@ +import { + onMount, + onUpdate, + Slot, + useDefaultProps, + useMetadata, + useRef, + useStore +} from '@builder.io/mitosis'; +import { + DBControlPanelDesktopProps, + DBControlPanelDesktopState +} from './model'; +import { addAttributeToChildren, cls, getBoolean, uuid } from '../../utils'; +import DBButton from '../button/button.lite'; +import DBDrawer from '../drawer/drawer.lite'; +import { DEFAULT_BURGER_MENU, DEFAULT_ID } from '../../shared/constants'; +import { isEventTargetNavigationItem } from '../../utils/navigation'; + +useMetadata({}); + +useDefaultProps({}); + +export default function DBControlPanelDesktop( + props: DBControlPanelDesktopProps +) { + const _ref = useRef(null); + // jscpd:ignore-start + const state = useStore({}); + + // jscpd:ignore-end + + return ( +
+ + + {props.children} + + +
+ ); +} diff --git a/packages/components/src/components/control-panel-desktop/control-panel-desktop.scss b/packages/components/src/components/control-panel-desktop/control-panel-desktop.scss new file mode 100644 index 000000000000..ec451c7ccd37 --- /dev/null +++ b/packages/components/src/components/control-panel-desktop/control-panel-desktop.scss @@ -0,0 +1,138 @@ +@use "@db-ux/core-foundations/build/styles/variables"; +@use "@db-ux/core-foundations/build/styles/screen-sizes"; +@use "@db-ux/core-foundations/build/styles/helpers"; +@use "@db-ux/core-foundations/build/styles/density"; +@use "@db-ux/core-foundations/build/styles/colors"; +@use "../../styles/internal/component"; + +%horizontal-orientation { + &:is(:not([data-orientation]), [data-orientation="horizontal"]) { + border-block-end: variables.$db-border-width-3xs solid + colors.$db-adaptive-on-bg-basic-emphasis-60-default; + grid-template-areas: + "meta meta meta meta meta meta" + ". . . . . ." + ". brand navigation primary secondary ." + ". . . . . ."; + grid-template-rows: min-content #{variables.$db-spacing-fixed-md} min-content #{variables.$db-spacing-fixed-md}; + grid-template-columns: #{variables.$db-spacing-fixed-lg} max-content 1fr max-content max-content #{variables.$db-spacing-fixed-lg}; + + > .db-control-panel-brand { + margin-inline-end: variables.$db-spacing-fixed-lg; + } + + > .db-control-panel-primary-actions { + margin-inline-start: variables.$db-spacing-fixed-sm; + } + + &:has(.db-control-panel-primary-actions, .db-navigation) { + > .db-control-panel-secondary-actions { + padding-inline-start: variables.$db-spacing-fixed-sm; + @include helpers.divider("left"); + } + } + + &:has(.db-control-panel-brand) { + > .db-navigation { + padding-inline-start: variables.$db-spacing-fixed-lg; + + @include helpers.divider("left"); + } + } + + &:has(.db-control-panel-secondary-actions) { + > .db-control-panel-primary-actions { + margin-inline-end: variables.$db-spacing-fixed-sm; + } + } + } +} + +%vertical-orientation { + &[data-orientation="vertical"] { + border-inline-end: variables.$db-border-width-3xs solid + colors.$db-adaptive-on-bg-basic-emphasis-60-default; + block-size: 100%; + grid-template-areas: + ". . ." + ". brand ." + ". navigation ." + ". primary ." + ". secondary ." + ". . ." + "meta meta meta"; + grid-template-rows: #{variables.$db-spacing-fixed-md} min-content 1fr min-content min-content #{variables.$db-spacing-fixed-md} min-content; + grid-template-columns: #{variables.$db-spacing-fixed-lg} 1fr #{variables.$db-spacing-fixed-lg}; + + > .db-navigation { + > menu { + display: flex; + flex-direction: column; + } + } + + > .db-control-panel-brand { + margin-block-end: variables.$db-spacing-fixed-md; + } + + > .db-control-panel-primary-actions { + margin-block-start: variables.$db-spacing-fixed-sm; + } + + &:has(.db-control-panel-primary-actions, .db-navigation) { + > .db-control-panel-secondary-actions { + padding-block-start: variables.$db-spacing-fixed-sm; + @include helpers.divider("top"); + } + } + + &:has(.db-control-panel-brand) { + > .db-navigation { + padding-block-start: variables.$db-spacing-fixed-md; + + @include helpers.divider("top"); + } + } + + &:has(.db-control-panel-secondary-actions) { + > .db-control-panel-primary-actions { + margin-block-end: variables.$db-spacing-fixed-sm; + } + } + } +} + +%width-handler { + &[data-width="small"] { + margin-inline: auto; + max-inline-size: screen-sizes.$db-breakpoint-sm; + } + + &[data-width="medium"] { + margin-inline: auto; + max-inline-size: screen-sizes.$db-breakpoint-md; + } + + &[data-width="large"] { + margin-inline: auto; + max-inline-size: screen-sizes.$db-breakpoint-lg; + } +} + +.db-control-panel-desktop { + @extend %horizontal-orientation; + @extend %vertical-orientation; + @extend %width-handler; + background-color: colors.$db-adaptive-bg-basic-level-1-default; + display: grid; + position: relative; + min-block-size: component.$min-mobile-header-height; + + .db-link { + display: inline-block; + } + + > .db-navigation { + grid-area: navigation; + } +} diff --git a/packages/components/src/components/header/docs/Angular.md b/packages/components/src/components/control-panel-desktop/docs/Angular.md similarity index 82% rename from packages/components/src/components/header/docs/Angular.md rename to packages/components/src/components/control-panel-desktop/docs/Angular.md index 85e1c78ce8c5..8e11db831e69 100644 --- a/packages/components/src/components/header/docs/Angular.md +++ b/packages/components/src/components/control-panel-desktop/docs/Angular.md @@ -7,7 +7,7 @@ For general installation and configuration take a look at the [ngx-core-componen ```ts app.component.ts //app.component.ts import { - DBHeader, + DBControlPanelDesktop, NavigationDirective, ActionBarDirective, MetaNavigationDirective @@ -17,7 +17,7 @@ import { // ... imports: [ // ..., - DBHeader, + DBControlPanelDesktop, NavigationDirective, // Optional: If you want to use a Navigation SecondaryActionDirective, // Optional: If you want to use ActionBar MetaNavigationDirective, // Optional: If you want to use MetaNavigation @@ -32,9 +32,9 @@ import { ```html app.component.html - - Header - + + ControlPanelDesktop + ``` #### Full @@ -59,8 +59,8 @@ export class AppComponent { ```html app.component.html - - My Awesome App + + My Awesome App @@ -82,5 +82,5 @@ export class AppComponent { Help - + ``` diff --git a/packages/components/src/components/header/docs/HTML.md b/packages/components/src/components/control-panel-desktop/docs/HTML.md similarity index 73% rename from packages/components/src/components/header/docs/HTML.md rename to packages/components/src/components/control-panel-desktop/docs/HTML.md index baf8cc17dd68..ec6c78999d4f 100644 --- a/packages/components/src/components/header/docs/HTML.md +++ b/packages/components/src/components/control-panel-desktop/docs/HTML.md @@ -8,15 +8,15 @@ For general installation and configuration take a look at the [components](https ... -
+
-
-
+ +
-
+
-
-
+
+
-
+
-
+
-
+
ImprintHelp
-
-
-
+
+
+
DBHeader + >DBControlPanelDesktop
-
-
+
+
-
+
-
-
+
+
-
+
-
+ ``` diff --git a/packages/components/src/components/header/docs/Migration.md b/packages/components/src/components/control-panel-desktop/docs/Migration.md similarity index 86% rename from packages/components/src/components/header/docs/Migration.md rename to packages/components/src/components/control-panel-desktop/docs/Migration.md index e09a47128fc2..7e58be103e18 100644 --- a/packages/components/src/components/header/docs/Migration.md +++ b/packages/components/src/components/control-panel-desktop/docs/Migration.md @@ -9,7 +9,7 @@ | Before | Status | After | Description | | ------------ | :----: | ----------- | ----------- | -| `rea-header` | 🔁 | `db-header` | | +| `rea-control-panel-desktop` | 🔁 | `db-control-panel-desktop` | | ### mobile diff --git a/packages/components/src/components/header/docs/React.md b/packages/components/src/components/control-panel-desktop/docs/React.md similarity index 72% rename from packages/components/src/components/header/docs/React.md rename to packages/components/src/components/control-panel-desktop/docs/React.md index bd3874e9e60c..34953527e9b6 100644 --- a/packages/components/src/components/header/docs/React.md +++ b/packages/components/src/components/control-panel-desktop/docs/React.md @@ -8,9 +8,9 @@ For general installation and configuration take a look at the [react-core-compon ```tsx App.tsx // App.tsx -import { DBHeader, DBBrand } from "@db-ux/react-core-components"; +import { DBControlPanelDesktop, DBControlPanelBrand } from "@db-ux/react-core-components"; -const App = () => Header} />; +const App = () => ControlPanelDesktop} />; export default App; ``` @@ -20,15 +20,15 @@ export default App; ```tsx App.tsx // App.tsx import { useState } from "react"; -import { DBHeader, DBBrand, DBLink } from "@db-ux/react-core-components"; +import { DBControlPanelDesktop, DBControlPanelBrand, DBLink } from "@db-ux/react-core-components"; const [drawerOpen, setDrawerOpen] = useState(false); const App = () => ( - My Awesome App} + control-panel-brand={My Awesome App} metaNavigation={ <> Imprint @@ -58,7 +58,7 @@ const App = () => ( // https://github.com/db-ux-design-system/core-web/blob/main/packages/components/src/components/navigation/docs/React.md - + ); export default App; diff --git a/packages/components/src/components/header/docs/Vue.md b/packages/components/src/components/control-panel-desktop/docs/Vue.md similarity index 69% rename from packages/components/src/components/header/docs/Vue.md rename to packages/components/src/components/control-panel-desktop/docs/Vue.md index c642932f6a97..780aa932a817 100644 --- a/packages/components/src/components/header/docs/Vue.md +++ b/packages/components/src/components/control-panel-desktop/docs/Vue.md @@ -9,13 +9,13 @@ For general installation and configuration take a look at the [v-core-components ```vue App.vue ``` @@ -25,7 +25,7 @@ import { DBHeader, DBBrand } from "@db-ux/v-core-components";