diff --git a/__snapshots__/header/showcase/chromium-highContrast/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png b/__snapshots__/header/showcase/chromium-highContrast/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png index 165e13d5bfbc..e66198dfea99 100644 Binary files a/__snapshots__/header/showcase/chromium-highContrast/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png and b/__snapshots__/header/showcase/chromium-highContrast/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png differ diff --git a/__snapshots__/input/showcase/chromium-highContrast/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/chromium-highContrast/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png index e9106b1e8a99..0f9ffd0298b6 100644 Binary files a/__snapshots__/input/showcase/chromium-highContrast/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png and b/__snapshots__/input/showcase/chromium-highContrast/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png differ diff --git a/__snapshots__/input/showcase/chromium/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/chromium/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png index a389a4065c88..1c1bcf25f337 100644 Binary files a/__snapshots__/input/showcase/chromium/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png and b/__snapshots__/input/showcase/chromium/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png differ diff --git a/__snapshots__/input/showcase/firefox/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/firefox/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png index 70f4ea11f3c0..0fd3ddacf1c5 100644 Binary files a/__snapshots__/input/showcase/firefox/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png and b/__snapshots__/input/showcase/firefox/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png differ diff --git a/__snapshots__/select/showcase/chromium-highContrast/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png b/__snapshots__/select/showcase/chromium-highContrast/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png index 458c3fa96138..7ab0fcab7549 100644 Binary files a/__snapshots__/select/showcase/chromium-highContrast/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png and b/__snapshots__/select/showcase/chromium-highContrast/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png differ diff --git a/__snapshots__/select/showcase/chromium/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png b/__snapshots__/select/showcase/chromium/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png index 2628101830c3..2527dc5ec41e 100644 Binary files a/__snapshots__/select/showcase/chromium/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png and b/__snapshots__/select/showcase/chromium/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png differ diff --git a/__snapshots__/select/showcase/firefox/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png b/__snapshots__/select/showcase/firefox/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png index 47dff8fe05df..ea20a618189c 100644 Binary files a/__snapshots__/select/showcase/firefox/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png and b/__snapshots__/select/showcase/firefox/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png differ diff --git a/__snapshots__/stack/showcase/chromium-highContrast/DBStack-should-match-screenshot-1/DBStack-should-match-screenshot.png b/__snapshots__/stack/showcase/chromium-highContrast/DBStack-should-match-screenshot-1/DBStack-should-match-screenshot.png index b9712befb257..36bf0b0c795f 100644 Binary files a/__snapshots__/stack/showcase/chromium-highContrast/DBStack-should-match-screenshot-1/DBStack-should-match-screenshot.png and b/__snapshots__/stack/showcase/chromium-highContrast/DBStack-should-match-screenshot-1/DBStack-should-match-screenshot.png differ diff --git a/__snapshots__/stack/showcase/chromium/DBStack-should-match-screenshot-1/DBStack-should-match-screenshot.png b/__snapshots__/stack/showcase/chromium/DBStack-should-match-screenshot-1/DBStack-should-match-screenshot.png index ee2a5316f08b..ccdebeb8d37c 100644 Binary files a/__snapshots__/stack/showcase/chromium/DBStack-should-match-screenshot-1/DBStack-should-match-screenshot.png and b/__snapshots__/stack/showcase/chromium/DBStack-should-match-screenshot-1/DBStack-should-match-screenshot.png differ diff --git a/__snapshots__/stack/showcase/firefox/DBStack-should-match-screenshot-1/DBStack-should-match-screenshot.png b/__snapshots__/stack/showcase/firefox/DBStack-should-match-screenshot-1/DBStack-should-match-screenshot.png index 2a725b00dc8a..60d3f5d07638 100644 Binary files a/__snapshots__/stack/showcase/firefox/DBStack-should-match-screenshot-1/DBStack-should-match-screenshot.png and b/__snapshots__/stack/showcase/firefox/DBStack-should-match-screenshot-1/DBStack-should-match-screenshot.png differ diff --git a/__snapshots__/textarea/showcase/chromium-highContrast/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png b/__snapshots__/textarea/showcase/chromium-highContrast/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png index fd097e0df90b..ff7644cc3bcf 100644 Binary files a/__snapshots__/textarea/showcase/chromium-highContrast/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png and b/__snapshots__/textarea/showcase/chromium-highContrast/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png differ diff --git a/__snapshots__/textarea/showcase/chromium/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png b/__snapshots__/textarea/showcase/chromium/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png index fe209f481008..aee6034a47b3 100644 Binary files a/__snapshots__/textarea/showcase/chromium/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png and b/__snapshots__/textarea/showcase/chromium/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png differ diff --git a/__snapshots__/textarea/showcase/firefox/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png b/__snapshots__/textarea/showcase/firefox/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png index 7856e5f48cae..5ccc307c36df 100644 Binary files a/__snapshots__/textarea/showcase/firefox/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png and b/__snapshots__/textarea/showcase/firefox/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png differ diff --git a/output/react/tsconfig.json b/output/react/tsconfig.json index 31eb4e6c0e3b..166159b6b842 100644 --- a/output/react/tsconfig.json +++ b/output/react/tsconfig.json @@ -21,7 +21,7 @@ "target": "es2015" }, "include": ["src/**/*.ts", "src/**/*.tsx"], - "exclude": ["node_modules", "src/**/*.spec.tsx"], + "exclude": ["node_modules", "src/**/*.spec.tsx", "src/**/*.example.tsx", "src/**/*.showcase.tsx"], "compileOnSave": false, "buildOnSave": false } diff --git a/output/vue/tsconfig.json b/output/vue/tsconfig.json index f99126fc56c6..d5484c7f72da 100644 --- a/output/vue/tsconfig.json +++ b/output/vue/tsconfig.json @@ -25,7 +25,7 @@ "skipLibCheck": true }, "include": ["src/**/*.ts", "src/**/*.vue"], - "exclude": ["node_modules", "src/**/*.scss", "src/**/*.spec.tsx"], + "exclude": ["node_modules", "src/**/*.scss", "src/**/*.spec.tsx", "src/**/*.example.vue", "src/**/*.showcase.vue"], "compileOnSave": false, "buildOnSave": false } diff --git a/packages/components/configs/mitosis.showcase.config.cjs b/packages/components/configs/mitosis.showcase.config.cjs new file mode 100644 index 000000000000..36462a5a3ebd --- /dev/null +++ b/packages/components/configs/mitosis.showcase.config.cjs @@ -0,0 +1,19 @@ +/** + * @type {import('@builder.io/mitosis').MitosisConfig} + */ +module.exports = { + files: ['src/**/*.showcase.lite.tsx', 'src/**/*.example.lite.tsx'], + targets: ['angular', 'vue', 'react', 'stencil'], + dest: '../../output', + options: { + angular: { + api: 'signals' + }, + vue: { + api: 'composition' + } + }, + commonOptions: { + typescript: true + } +}; diff --git a/packages/components/package.json b/packages/components/package.json index 6d0f0eccb2fc..7cc61cdf83ff 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -41,6 +41,7 @@ "dev:stencil": "nodemon --watch src --watch scripts --ext tsx,ts --exec \"npm run compile:stencil\"", "dev:vue": "nodemon --watch src --watch scripts --ext tsx,ts --exec \"npm run compile:vue\"", "generate:agent": "mitosis build --config=configs/mitosis.agent.config.cjs", + "generate:showcase": "mitosis build --config=configs/mitosis.showcase.config.cjs", "generate:component": "hygen mitosis new", "generate:docs": "hygen update-docs new", "prepack": "npm run copy-assets", diff --git a/packages/components/src/components/button/examples/density.example.lite.tsx b/packages/components/src/components/button/examples/density.example.lite.tsx new file mode 100644 index 000000000000..cab854d3f2c9 --- /dev/null +++ b/packages/components/src/components/button/examples/density.example.lite.tsx @@ -0,0 +1,12 @@ +import { Fragment } from '@builder.io/mitosis'; +import DBButton from '../button.lite'; + +export default function ButtonDensity() { + return ( + + Functional + (Default) Regular + Expressive + + ); +} diff --git a/packages/components/src/components/button/examples/disabled.example.lite.tsx b/packages/components/src/components/button/examples/disabled.example.lite.tsx new file mode 100644 index 000000000000..f64eeacf0852 --- /dev/null +++ b/packages/components/src/components/button/examples/disabled.example.lite.tsx @@ -0,0 +1,11 @@ +import { Fragment } from '@builder.io/mitosis'; +import DBButton from '../button.lite'; + +export default function ButtonDisabled() { + return ( + + (Default) False + True + + ); +} diff --git a/packages/components/src/components/button/examples/multi-line-text.example.lite.tsx b/packages/components/src/components/button/examples/multi-line-text.example.lite.tsx new file mode 100644 index 000000000000..78134b15ef2f --- /dev/null +++ b/packages/components/src/components/button/examples/multi-line-text.example.lite.tsx @@ -0,0 +1,24 @@ +import { Fragment } from '@builder.io/mitosis'; +import DBButton from '../button.lite'; + +export default function ButtonMultiLineText() { + return ( + +
+ + Multi-line Text With Automatic Line Breaks + +
+
+ + Multi-line Text With Automatic Line Breaks and Icon + +
+
+ + Button Small Multi-line Text With Automatic Line Breaks + +
+ + ); +} diff --git a/packages/components/src/components/button/examples/no-text.example.lite.tsx b/packages/components/src/components/button/examples/no-text.example.lite.tsx new file mode 100644 index 000000000000..68de01e5e4b0 --- /dev/null +++ b/packages/components/src/components/button/examples/no-text.example.lite.tsx @@ -0,0 +1,11 @@ +import { Fragment } from '@builder.io/mitosis'; +import DBButton from '../button.lite'; + +export default function ButtonNoText() { + return ( + + (Default) False + True + + ); +} diff --git a/packages/components/src/components/button/examples/show-icon-leading.example.lite.tsx b/packages/components/src/components/button/examples/show-icon-leading.example.lite.tsx new file mode 100644 index 000000000000..c1d35265d96f --- /dev/null +++ b/packages/components/src/components/button/examples/show-icon-leading.example.lite.tsx @@ -0,0 +1,11 @@ +import { Fragment } from '@builder.io/mitosis'; +import DBButton from '../button.lite'; + +export default function ButtonShowIconLeading() { + return ( + + (Default) False + True + + ); +} diff --git a/packages/components/src/components/button/examples/show-icon-trailing.example.lite.tsx b/packages/components/src/components/button/examples/show-icon-trailing.example.lite.tsx new file mode 100644 index 000000000000..e12e479ed78a --- /dev/null +++ b/packages/components/src/components/button/examples/show-icon-trailing.example.lite.tsx @@ -0,0 +1,11 @@ +import { Fragment } from '@builder.io/mitosis'; +import DBButton from '../button.lite'; + +export default function ButtonShowIconTrailing() { + return ( + + (Default) False + True + + ); +} diff --git a/packages/components/src/components/button/examples/size.example.lite.tsx b/packages/components/src/components/button/examples/size.example.lite.tsx new file mode 100644 index 000000000000..f9f5767614f5 --- /dev/null +++ b/packages/components/src/components/button/examples/size.example.lite.tsx @@ -0,0 +1,11 @@ +import { Fragment } from '@builder.io/mitosis'; +import DBButton from '../button.lite'; + +export default function ButtonSize() { + return ( + + (Default) Medium + Small + + ); +} diff --git a/packages/components/src/components/button/examples/variant.example.lite.tsx b/packages/components/src/components/button/examples/variant.example.lite.tsx new file mode 100644 index 000000000000..5b7ca819a754 --- /dev/null +++ b/packages/components/src/components/button/examples/variant.example.lite.tsx @@ -0,0 +1,19 @@ +import { Fragment, useMetadata } from '@builder.io/mitosis'; +import DBButton from '../button.lite'; + +useMetadata({ + storybookNames: ['Outlined', 'Filled', 'Ghost', 'Brand'] +}); + +export default function ButtonVariant() { + return ( + + + (Default) Outlined - Adaptive + + Filled - Adaptive + Ghost - Adaptive + Brand + + ); +} diff --git a/packages/components/src/components/button/examples/width.example.lite.tsx b/packages/components/src/components/button/examples/width.example.lite.tsx new file mode 100644 index 000000000000..f58628cf9ca9 --- /dev/null +++ b/packages/components/src/components/button/examples/width.example.lite.tsx @@ -0,0 +1,13 @@ +import { Fragment } from '@builder.io/mitosis'; +import DBButton from '../button.lite'; + +export default function ButtonWidth() { + return ( + + (Default) Auto +
+ Width +
+ + ); +} diff --git a/packages/components/src/components/button/showcase/button.showcase.lite.tsx b/packages/components/src/components/button/showcase/button.showcase.lite.tsx new file mode 100644 index 000000000000..aadb82373f82 --- /dev/null +++ b/packages/components/src/components/button/showcase/button.showcase.lite.tsx @@ -0,0 +1,67 @@ +import { PatternhubProps } from '../../../shared/model'; +import CardWrapperShowcase from '../../../shared/showcase/card-wrapper.showcase.lite'; +import ContainerWrapperShowcase from '../../../shared/showcase/container-wrapper.showcase.lite'; +import LinkWrapperShowcase from '../../../shared/showcase/link-wrapper.showcase.lite'; +import ButtonDensity from '../examples/density.example.lite'; +import ButtonDisabled from '../examples/disabled.example.lite'; +import ButtonMultiLineText from '../examples/multi-line-text.example.lite'; +import ButtonNoText from '../examples/no-text.example.lite'; +import ButtonShowIconLeading from '../examples/show-icon-leading.example.lite'; +import ButtonShowIconTrailing from '../examples/show-icon-trailing.example.lite'; +import ButtonSize from '../examples/size.example.lite'; +import ButtonVariant from '../examples/variant.example.lite'; +import ButtonWidth from '../examples/width.example.lite'; + +export default function ButtonShowcase(props: PatternhubProps) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/packages/components/src/shared/model.ts b/packages/components/src/shared/model.ts index 56aeedfda0a7..f3afc6ff17da 100644 --- a/packages/components/src/shared/model.ts +++ b/packages/components/src/shared/model.ts @@ -723,3 +723,11 @@ export type PopoverState = { handleEnter: (parent?: HTMLElement) => void; handleLeave: (event?: any) => void; } & DocumentScrollState; + +// TODO: Remove this after we migrate to one-platform +export interface PatternhubProps { + /** + * Used for Patternhub + */ + isPatternhub?: boolean; +} diff --git a/packages/components/src/shared/showcase/card-wrapper.showcase.lite.tsx b/packages/components/src/shared/showcase/card-wrapper.showcase.lite.tsx new file mode 100644 index 000000000000..467ac121b944 --- /dev/null +++ b/packages/components/src/shared/showcase/card-wrapper.showcase.lite.tsx @@ -0,0 +1,53 @@ +import { Fragment, onMount, Show, Slot, useState } from '@builder.io/mitosis'; +import DBCard from '../../components/card/card.lite'; +import DBLink from '../../components/link/link.lite'; + +type Props = { + role?: string; + label?: string; + children?: any; +}; + +export default function CardWrapperShowcase(props: Props) { + const [href, setHref] = useState(undefined); + + function updateHref() { + const framework = localStorage.getItem('db-ux-framework') || 'react'; + const currentUrl = window.location.href; + const componentsIndex = currentUrl.indexOf('components'); + if (componentsIndex !== -1) { + const baseUrl = currentUrl.substring(0, componentsIndex); + setHref(`${baseUrl}${framework}-storybook`); + } + } + + onMount(() => { + if (typeof window !== 'undefined' && localStorage) { + updateHref(); + } + }); + + return ( + + +
+ +
+ + + + Show Code + + + + ); +} diff --git a/packages/components/src/shared/showcase/container-wrapper.showcase.lite.tsx b/packages/components/src/shared/showcase/container-wrapper.showcase.lite.tsx new file mode 100644 index 000000000000..ff32a57671c1 --- /dev/null +++ b/packages/components/src/shared/showcase/container-wrapper.showcase.lite.tsx @@ -0,0 +1,91 @@ +import { Fragment, onMount, Show, Slot, useState } from '@builder.io/mitosis'; +import DBLink from '../../components/link/link.lite'; +import { PatternhubProps } from '../model'; + +type Props = { + title?: string; + /** + * Slot for subcomponents - used for Patternhub + */ + subComponent?: any; + /** + * Changes header level - used for Patternhub + */ + isSubComponent?: boolean; + + children?: any; +} & PatternhubProps; + +export default function ContainerWrapperShowcase(props: Props) { + const [hidden, setHidden] = useState(false); + + onMount(() => { + if (typeof window !== 'undefined') { + const hash = window.location.hash; + const queryString = hash.includes('?') ? hash.split('?')[1] : ''; + const params = new URLSearchParams( + window.location.search || queryString + ); + + setHidden(Boolean(params.get('page'))); + } + }); + + function getSourceFilePath(): string | undefined { + if (!props.title) return; + + const componentName = props.title + ?.replace(/^DB/, '') + .replaceAll(/([A-Z])/g, (match, letter, index) => + index > 0 ? `-${letter.toLowerCase()}` : letter.toLowerCase() + ); + + if (componentName && /^[a-z]+(-[a-z]+)*$/.test(componentName)) { + return `packages/components/src/components/${componentName}/${componentName}.lite.tsx`; + } + + return; + } + + function getGitHubSourceUrl(): string | undefined { + const filePath = getSourceFilePath(); + if (!filePath) return; + + const targetBranch = + process.env['GITHUB_BRANCH'] ?? + process.env['BRANCH_NAME'] ?? + 'main'; + + return `https://github.com/db-ux-design-system/core-web/blob/${targetBranch}/${filePath}`; + } + + return ( + +
+ +
+ {props.title}}> +

{props.title}

+ + + + + View Source + + +
+ + +
+ + + + + ); +} diff --git a/packages/components/src/shared/showcase/link-wrapper.showcase.lite.tsx b/packages/components/src/shared/showcase/link-wrapper.showcase.lite.tsx new file mode 100644 index 000000000000..ce6251674f6f --- /dev/null +++ b/packages/components/src/shared/showcase/link-wrapper.showcase.lite.tsx @@ -0,0 +1,55 @@ +import { onMount, Show, Slot, useState } from '@builder.io/mitosis'; +import DBDivider from '../../components/divider/divider.lite'; +import DBLink from '../../components/link/link.lite'; + +interface Props { + exampleName?: string; + children?: any; +} + +export default function LinkWrapperShowcase(props: Props) { + function getPage(): string | undefined { + return props.exampleName?.replaceAll(' ', '+').toLowerCase(); + } + + function getHref(): string { + if (typeof window !== 'undefined') { + const hash = window.location.hash; + const basePath = hash.includes('?') ? hash.split('?')[0] : hash; + return `${basePath}?page=${getPage()}`; + } + + return ''; + } + + const [pageParam, setPageParam] = useState(null); + + onMount(() => { + if (typeof window !== 'undefined') { + const hash = window.location.hash; + const queryString = hash.includes('?') ? hash.split('?')[1] : ''; + const params = new URLSearchParams( + window.location.search || queryString + ); + setPageParam(params.get('page')); + } + }); + + return ( + +
+ + + + {props.exampleName} + + + +
+ + ); +} diff --git a/showcases/angular-showcase/src/app/components/button.component.ts b/showcases/angular-showcase/src/app/components/button.component.ts new file mode 100644 index 000000000000..aa08cd49717f --- /dev/null +++ b/showcases/angular-showcase/src/app/components/button.component.ts @@ -0,0 +1,12 @@ +import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { ButtonShowcase } from '@components/components/button/showcase/button.showcase'; +import { environment } from '../../environments/environment'; + +@Component({ + selector: 'app-button', + template: '', + imports: environment.webComponents ? [] : [ButtonShowcase], + standalone: true, + schemas: environment.webComponents ? [CUSTOM_ELEMENTS_SCHEMA] : [] +}) +export class ButtonComponent {} diff --git a/showcases/angular-showcase/src/app/components/button/button.component.html b/showcases/angular-showcase/src/app/components/button/button.component.html deleted file mode 100644 index 670a05709cf5..000000000000 --- a/showcases/angular-showcase/src/app/components/button/button.component.html +++ /dev/null @@ -1,27 +0,0 @@ - - - {{ exampleName }} - - diff --git a/showcases/angular-showcase/src/app/components/button/button.component.ts b/showcases/angular-showcase/src/app/components/button/button.component.ts deleted file mode 100644 index ef7be25f25d1..000000000000 --- a/showcases/angular-showcase/src/app/components/button/button.component.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; -import { DBButton } from '../../../../../../output/angular/src'; -import defaultComponentVariants from '../../../../../shared/button.json'; -import { environment } from '../../../environments/environment'; -import { DefaultComponent } from '../default.component'; - -@Component({ - selector: 'app-button', - templateUrl: './button.component.html', - imports: environment.webComponents - ? [DefaultComponent] - : [DefaultComponent, DBButton], - standalone: true, - schemas: environment.webComponents ? [CUSTOM_ELEMENTS_SCHEMA] : [] -}) -export class ButtonComponent { - variants = defaultComponentVariants; - - showAlert = (exampleName: string) => { - // eslint-disable-next-line no-alert - alert(exampleName); - }; -} diff --git a/showcases/angular-showcase/src/app/utils/navigation-item.ts b/showcases/angular-showcase/src/app/utils/navigation-item.ts index b7b06efdd447..418f78ed4e0b 100644 --- a/showcases/angular-showcase/src/app/utils/navigation-item.ts +++ b/showcases/angular-showcase/src/app/utils/navigation-item.ts @@ -3,7 +3,7 @@ import { AccordionItemComponent } from '../components/accordion-item/accordion-i import { AccordionComponent } from '../components/accordion/accordion.component'; import { BadgeComponent } from '../components/badge/badge.component'; import { BrandComponent } from '../components/brand/brand.component'; -import { ButtonComponent } from '../components/button/button.component'; +import { ButtonComponent } from '../components/button.component'; import { CardComponent } from '../components/card/card.component'; import { CheckboxComponent } from '../components/checkbox/checkbox.component'; import { CustomSelectComponent } from '../components/custom-select/custom-select.component'; diff --git a/showcases/angular-showcase/tsconfig.json b/showcases/angular-showcase/tsconfig.json index 088c0b9aba54..b63868d649d2 100644 --- a/showcases/angular-showcase/tsconfig.json +++ b/showcases/angular-showcase/tsconfig.json @@ -20,7 +20,14 @@ "target": "ES2022", "module": "ES2022", "useDefineForClassFields": false, - "lib": ["ES2022", "dom"] + "lib": ["ES2022", "dom"], + "paths": { + "@components": ["../../output/angular/src"], + "@components/src/*": ["../../output/angular/src/*"], + "@components/components/*": [ + "../../output/angular/src/components/*" + ] + } }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, diff --git a/showcases/angular-ssr-showcase/tsconfig.json b/showcases/angular-ssr-showcase/tsconfig.json index 1083f8fd1c1c..5b0e512dcba5 100644 --- a/showcases/angular-ssr-showcase/tsconfig.json +++ b/showcases/angular-ssr-showcase/tsconfig.json @@ -20,7 +20,12 @@ "module": "ES2022", "useDefineForClassFields": false, "resolveJsonModule": true, - "lib": ["ES2022", "dom"] + "lib": ["ES2022", "dom"], + "paths": { + "@components": ["../../output/angular/src"], + "@components/src/*": ["../../output/angular/src/*"], + "@components/components/*": ["../../output/angular/src/components/*"] + } }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, diff --git a/showcases/next-showcase/tsconfig.json b/showcases/next-showcase/tsconfig.json index 2e8cd0fc7f52..3a901a24a173 100644 --- a/showcases/next-showcase/tsconfig.json +++ b/showcases/next-showcase/tsconfig.json @@ -14,7 +14,12 @@ "jsx": "preserve", "strictNullChecks": true, "downlevelIteration": true, - "target": "ES2017" + "target": "ES2017", + "paths": { + "@components": ["../../output/react/src"], + "@components/src/*": ["../../output/react/src/*"], + "@components/components/*": ["../../output/react/src/components/*"] + } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], "exclude": ["node_modules"] diff --git a/showcases/nuxt-showcase/nuxt.config.ts b/showcases/nuxt-showcase/nuxt.config.ts index 38a1dc415ab4..8f7983b4e16f 100644 --- a/showcases/nuxt-showcase/nuxt.config.ts +++ b/showcases/nuxt-showcase/nuxt.config.ts @@ -1,3 +1,8 @@ +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = path.dirname(fileURLToPath(import.meta.url)); + export default defineNuxtConfig({ telemetry: false, devtools: { enabled: true }, @@ -25,5 +30,8 @@ export default defineNuxtConfig({ dir: '../../build-showcases/nuxt-showcase', publicDir: '../../build-showcases/nuxt-showcase' } + }, + alias: { + '@components': path.resolve(__dirname, '../../output/vue/src') } }); diff --git a/showcases/nuxt-showcase/tsconfig.json b/showcases/nuxt-showcase/tsconfig.json index 947f6b690488..725ae5629962 100644 --- a/showcases/nuxt-showcase/tsconfig.json +++ b/showcases/nuxt-showcase/tsconfig.json @@ -1,4 +1,11 @@ { // https://nuxt.com/docs/guide/concepts/typescript - "extends": "./.nuxt/tsconfig.json" + "extends": "./.nuxt/tsconfig.json", + "compilerOptions": { + "paths": { + "@components": ["../../output/vue/src"], + "@components/src/*": ["../../output/vue/src/*"], + "@components/components/*": ["../../output/vue/src/components/*"] + } + } } diff --git a/showcases/patternhub/components/version-switcher/version-switcher.tsx b/showcases/patternhub/components/version-switcher/version-switcher.tsx index 5127ac922b75..4e198ad9f262 100644 --- a/showcases/patternhub/components/version-switcher/version-switcher.tsx +++ b/showcases/patternhub/components/version-switcher/version-switcher.tsx @@ -73,28 +73,33 @@ const VersionSwitcher = () => { useEffect(() => { const runAsync = async () => { - const branchesResponse = await fetchFromGitHubApi( - `https://api.github.com/repos/${owner}/${repo}/branches` - ); - const tagsResponse = await fetchFromGitHubApi( - `https://api.github.com/repos/${owner}/${repo}/tags` - ); - const tags: string[] = tagsResponse.map( - (tag: GithubResponse) => tag.name - ); - const branches: string[] = branchesResponse - .map((branch: GithubResponse) => branch.name) - .filter( - (branch) => - branch !== 'gh-pages' && !branch.includes('dependabot') + try { + const branchesResponse = await fetchFromGitHubApi( + `https://api.github.com/repos/${owner}/${repo}/branches` ); - - // `latest` isn't a branch, but only existing within gh-pages - tags.unshift('latest'); - - setCurrentBranch(branches); - setCurrentBranch(tags); - setGroupByTagsBranches(tags, branches); + const tagsResponse = await fetchFromGitHubApi( + `https://api.github.com/repos/${owner}/${repo}/tags` + ); + const tags: string[] = tagsResponse.map( + (tag: GithubResponse) => tag.name + ); + const branches: string[] = branchesResponse + .map((branch: GithubResponse) => branch.name) + .filter( + (branch) => + branch !== 'gh-pages' && + !branch.includes('dependabot') + ); + + // `latest` isn't a branch, but only existing within gh-pages + tags.unshift('latest'); + + setCurrentBranch(branches); + setCurrentBranch(tags); + setGroupByTagsBranches(tags, branches); + } catch (error: any) { + console.error(error); + } }; void runAsync(); diff --git a/showcases/patternhub/data/routes.tsx b/showcases/patternhub/data/routes.tsx index 622cd18fc440..fc75e9f3d5ec 100644 --- a/showcases/patternhub/data/routes.tsx +++ b/showcases/patternhub/data/routes.tsx @@ -1,64 +1,32 @@ +import ButtonShowcase from '@components/components/button/showcase/button.showcase'; import { type ReactElement } from 'react'; import AccordionComponent from '../../react-showcase/src/components/accordion'; import AccordionItemComponent from '../../react-showcase/src/components/accordion-item'; -import BrandComponent from '../../react-showcase/src/components/brand'; -import ButtonComponent from '../../react-showcase/src/components/button'; -import LinkComponent from '../../react-showcase/src/components/link'; -// Import IconComponent from '../../react-showcase/src/components/icon'; import BadgeComponent from '../../react-showcase/src/components/badge'; +import BrandComponent from '../../react-showcase/src/components/brand'; import CardComponent from '../../react-showcase/src/components/card'; import CheckboxComponent from '../../react-showcase/src/components/checkbox'; +import MutliSelectComponent from '../../react-showcase/src/components/custom-select'; import DividerComponent from '../../react-showcase/src/components/divider'; import DrawerComponent from '../../react-showcase/src/components/drawer'; import HeaderComponent from '../../react-showcase/src/components/header'; import InfotextComponent from '../../react-showcase/src/components/infotext'; import InputComponent from '../../react-showcase/src/components/input'; +import LinkComponent from '../../react-showcase/src/components/link'; +import NavigationComponent from '../../react-showcase/src/components/navigation'; +import NavigationItemComponent from '../../react-showcase/src/components/navigation-item'; import NotificationComponent from '../../react-showcase/src/components/notification'; +import PopoverComponent from '../../react-showcase/src/components/popover'; import RadioComponent from '../../react-showcase/src/components/radio'; +import SectionComponent from '../../react-showcase/src/components/section'; import SelectComponent from '../../react-showcase/src/components/select'; +import StackComponent from '../../react-showcase/src/components/stack'; import SwitchComponent from '../../react-showcase/src/components/switch'; import TabItemComponent from '../../react-showcase/src/components/tab-item'; import TabsComponent from '../../react-showcase/src/components/tabs'; import TagComponent from '../../react-showcase/src/components/tag'; import TextareaComponent from '../../react-showcase/src/components/textarea'; import TooltipComponent from '../../react-showcase/src/components/tooltip'; -// Import PageComponent from '../../react-showcase/src/components/page'; -import NavigationComponent from '../../react-showcase/src/components/navigation'; -import NavigationItemComponent from '../../react-showcase/src/components/navigation-item'; -import PopoverComponent from '../../react-showcase/src/components/popover'; -import SectionComponent from '../../react-showcase/src/components/section'; -import * as accordionCode from '../components/code-docs/accordion'; -import * as accordionItemCode from '../components/code-docs/accordion-item'; -import * as brandCode from '../components/code-docs/brand'; -import * as buttonCode from '../components/code-docs/button'; -import * as linkCode from '../components/code-docs/link'; -// Import * as iconCode from '../components/code-docs/icon'; -import * as badgeCode from '../components/code-docs/badge'; -import * as cardCode from '../components/code-docs/card'; -import * as checkboxCode from '../components/code-docs/checkbox'; -import * as dividerCode from '../components/code-docs/divider'; -import * as drawerCode from '../components/code-docs/drawer'; -import * as headerCode from '../components/code-docs/header'; -import * as infotextCode from '../components/code-docs/infotext'; -import * as inputCode from '../components/code-docs/input'; -import * as notificationCode from '../components/code-docs/notification'; -import * as radioCode from '../components/code-docs/radio'; -import * as selectCode from '../components/code-docs/select'; -import * as switchCode from '../components/code-docs/switch'; -import * as tabItemCode from '../components/code-docs/tab-item'; -import * as tabsCode from '../components/code-docs/tabs'; -import * as tagCode from '../components/code-docs/tag'; -import * as textareaCode from '../components/code-docs/textarea'; -import * as tooltipCode from '../components/code-docs/tooltip'; -// Import * as pageCode from '../components/code-docs/page'; -import MutliSelectComponent from '../../react-showcase/src/components/custom-select'; -import StackComponent from '../../react-showcase/src/components/stack'; -import * as CustomSelectCode from '../components/code-docs/custom-select'; -import * as navigationCode from '../components/code-docs/navigation'; -import * as navigationItemCode from '../components/code-docs/navigation-item'; -import * as popoverCode from '../components/code-docs/popover'; -import * as sectionCode from '../components/code-docs/section'; -import * as StackCode from '../components/code-docs/stack'; import Components from './components.json'; export type NavigationItem = { @@ -71,71 +39,63 @@ export type NavigationItem = { }; const nameComponentMap = { - 'custom-select': , - stack: , - button: , - link: , - brand: , - // Icon: , - tooltip: , - infotext: , - tag: , + 'custom-select': , + stack: , + button: , + link: , + brand: , + // Icon: , + tooltip: , + infotext: , + tag: , accordion: ( } /> ), - 'accordion-item': , + 'accordion-item': , tabs: ( } /> ), - 'tab-item': , - checkbox: , - input: , - radio: , - select: , - switch: , - textarea: , - notification: , - badge: , - card: , - divider: , - drawer: , - header: , - // Page: , - section: , + 'tab-item': , + checkbox: , + input: , + radio: , + select: , + switch: , + textarea: , + notification: , + badge: , + card: , + divider: , + drawer: , + header: , + // Page: , + section: , navigation: ( } /> ), - 'navigation-item': ( - - ), - popover: + 'navigation-item': , + popover: }; const addComponentsToNavigationItems = ( diff --git a/showcases/patternhub/package.json b/showcases/patternhub/package.json index 45622ed8250b..a8b8f87bdbbc 100644 --- a/showcases/patternhub/package.json +++ b/showcases/patternhub/package.json @@ -8,7 +8,6 @@ "build:app": "next build --webpack", "build:copy": "cpr out ../../build-showcases/patternhub -o", "compile": "npm-run-all compile:*", - "compile:01_jsx": "node scripts/generate-example-jsx.js", "compile:02_copy-docs": "cpr ../../docs ./public/docs -o", "compile:03_components": "node scripts/esbuild-generate.mjs", "compile:04_run": "node generated.js", diff --git a/showcases/patternhub/playwright.patternhub-config.ts b/showcases/patternhub/playwright.patternhub-config.ts index 5a2be3d8cac2..34b40d06ed86 100644 --- a/showcases/patternhub/playwright.patternhub-config.ts +++ b/showcases/patternhub/playwright.patternhub-config.ts @@ -23,7 +23,7 @@ const patternHubConfig: PlaywrightTestConfig = { }, use: { /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */ - actionTimeout: 0, + actionTimeout: 30_000, /* Base URL to use in actions like `await page.goto('/')`. */ baseURL: `http://localhost:8080${process.env.NEXT_PUBLIC_BASE_PATH ?? ''}/`, diff --git a/showcases/patternhub/scripts/generate-docs-mdx.js b/showcases/patternhub/scripts/generate-docs-mdx.js index 0a4153178e9c..29decdef321c 100644 --- a/showcases/patternhub/scripts/generate-docs-mdx.js +++ b/showcases/patternhub/scripts/generate-docs-mdx.js @@ -1,7 +1,6 @@ /* eslint-disable unicorn/prefer-top-level-await, no-await-in-loop */ import FS from 'node:fs'; -import writeCodeFiles from './get-code-files.js'; import getHowToFile from './get-how-to-file.js'; import getMigrationFile from './get-migration-file.js'; import getPropertiesFile from './get-properties-file.js'; @@ -83,11 +82,6 @@ const generateDocsMdx = async () => { FS.mkdirSync('./components/code-docs'); } - await writeCodeFiles( - `./components/code-docs/${componentName}`, - componentName - ); - // Write old files for Marketingportal if (!FS.existsSync(componentOldPath)) { diff --git a/showcases/patternhub/scripts/generate-example-jsx.js b/showcases/patternhub/scripts/generate-example-jsx.js deleted file mode 100644 index ea6da5d86f65..000000000000 --- a/showcases/patternhub/scripts/generate-example-jsx.js +++ /dev/null @@ -1,64 +0,0 @@ -import FS from 'node:fs'; -import { - generateExampleKey, - getCodeByFramework, - getComponentName, - transformToUpperComponentName -} from './utils.js'; - -const sharedPath = '../shared'; -const webTypesPath = './../../output/stencil/dist/web-types.json'; - -const generateExampleJSX = () => { - let elements = []; - if (FS.existsSync(webTypesPath)) { - const webTypes = JSON.parse( - FS.readFileSync(webTypesPath, 'utf8').toString() - ); - elements = webTypes?.contributions?.html?.elements; - } - - const imports = []; - const examples = []; - for (const { name } of elements) { - const componentName = getComponentName(name); - imports.push(`DB${transformToUpperComponentName(componentName)}`); - const path = `${sharedPath}/${componentName}.json`; - if (FS.existsSync(path)) { - const variants = JSON.parse(FS.readFileSync(path, 'utf8')); - - for (const variant of variants) { - for (const example of variant.examples) { - const code = getCodeByFramework( - componentName, - 'react', - example, - true, - variant.children - ); - - const exampleKey = generateExampleKey( - componentName, - variant.name, - example.name - ); - examples.push(`"${exampleKey}":renderToString(${[code]})`); - } - } - } - } - - if (!FS.existsSync('./scripts/generated')) { - FS.mkdirSync('./scripts/generated'); - } - - FS.writeFileSync( - `./scripts/generated/index.jsx`, - "import { renderToString } from 'react-dom/server';\n" + - "import React from 'react';\n" + - `import {${imports.join(',')}} from '../../../../output/react/src';\n\n` + - `export const allExamples = {${examples.join(',\n')}}` - ); -}; - -generateExampleJSX(); diff --git a/showcases/patternhub/scripts/get-code-files.js b/showcases/patternhub/scripts/get-code-files.js deleted file mode 100644 index 1de023bfa6f4..000000000000 --- a/showcases/patternhub/scripts/get-code-files.js +++ /dev/null @@ -1,196 +0,0 @@ -/* eslint-disable no-await-in-loop */ -import FS from 'node:fs'; -import prettier from 'prettier'; -import { allExamples } from './generated/index.jsx'; -import { generateExampleKey, getCodeByFramework } from './utils.js'; - -const sharedPath = '../shared'; -const reactPath = '../react-showcase/src/components'; - -const codeFrameworks = ['angular', 'html', 'react', 'vue']; - -const getFileTypeByFramework = (framework) => { - if (framework === 'react') { - return 'tsx'; - } - - if (framework === 'vue') { - return 'tsx'; - } - - return 'html'; -}; - -const getCustomCodeCommentByFramework = (componentName, framework) => { - return `How to use this in ${framework}`; -}; - -const getExamplesAsMDX = async (componentName, variant) => { - const { examples, children } = variant; - - let result = - "import { useEffect, useState } from 'react';\n" + - 'import {\n' + - 'DBButton,\n' + - 'DBCard,\n' + - 'DBLink,\n' + - 'DBTabItem,\n' + - 'DBTabList,\n' + - 'DBTabPanel,\n' + - 'DBTabs\n' + - "} from '../../../../../output/react/src';\n" + - "import { useFramework } from '../../framework-context';\n" + - `const ${variant.name} = () => { - const [copied, setCopied] = useState(); - const { getFrameworkIndex } = useFramework(); - - useEffect(() => { - if (copied) { - setTimeout(() => setCopied(""), 1500); - } - }, [copied]); - return ( - <>`; - - for (const example of examples) { - result += ` - - - - Angular - HTML - React - Vue - `; - for (const framework of codeFrameworks) { - let exampleCode; - - if (example.code && example.code[framework]) { - exampleCode = example.code[framework]; - } else if (framework === 'html') { - const exampleKey = generateExampleKey( - componentName, - variant.name, - example.name - ); - exampleCode = allExamples[exampleKey]; - } else { - exampleCode = getCodeByFramework( - componentName, - framework, - example, - false, - children - ); - } - - try { - exampleCode = await prettier.format(exampleCode, { - parser: framework === 'react' ? 'babel' : framework - }); - } catch { - // We do not care about errors here - // console.error(e); - } - - exampleCode = exampleCode?.replace(/;/g, '').trim(); - - result += ` - - ${getCustomCodeCommentByFramework(componentName, framework)} - - 
-				{\`${exampleCode}\`}
-
- - { - setCopied(\`${exampleCode}\`); - navigator.clipboard.writeText(\`${exampleCode}\`); - }}> - Copy code - - `; - } - - result += ` - - `; - } - - result += ` -); -}; - -export default ${variant.name};`; - - return result; -}; - -/** - * @param componentPath {string} - * @param componentName {string} - * @returns {Promise} - */ -const writeCodeFiles = async (componentPath, componentName) => { - const codePath = componentPath; - const path = `${sharedPath}/${componentName}.json`; - let variants; - if (FS.existsSync(path)) { - variants = JSON.parse(FS.readFileSync(path, 'utf8')).map((variant) => ({ - ...variant, - name: variant.name.replaceAll(/\s/g, '').replaceAll(/\W/g, '') - })); - - let indexFile = ''; - - for (const variant of variants) { - if (!FS.existsSync(codePath)) { - FS.mkdirSync(codePath); - } - - indexFile += `export { default as ${variant.name} } from './${variant.name}';\n`; - - FS.writeFileSync( - `${codePath}/${variant.name}.tsx`, - await getExamplesAsMDX(componentName, variant) - ); - } - - FS.writeFileSync(`${codePath}/index.tsx`, indexFile); - } - - const reactComponentPath = `${reactPath}/${componentName}/index.tsx`; - if (FS.existsSync(reactComponentPath)) { - let pre = ''; - let tags = ''; - if (variants) { - pre = variants - .map( - (variant) => - `import ${variant.name} from './code/${variant.name}'` - ) - .join('\n'); - tags = variants.map((variant) => `<${variant.name}/>`).join(','); - } - - const readFile = FS.readFileSync(reactComponentPath, 'utf8') - .replace('../index', './../../../components') - .replace('../data', '../../../components/data') - .replace( - ')}>', - `,[${tags}])}>` - ) - .replaceAll('// Patternhub:', ''); - - return `${pre}\n${readFile}`; - } - - return undefined; -}; - -export default writeCodeFiles; diff --git a/showcases/patternhub/styles/globals.scss b/showcases/patternhub/styles/globals.scss index 1e0a058e693f..f2574f25f3c4 100644 --- a/showcases/patternhub/styles/globals.scss +++ b/showcases/patternhub/styles/globals.scss @@ -417,85 +417,17 @@ h6 { } } +.show-code-link:is(.db-link):not([hidden]) { + display: flex; + margin-inline-start: auto; +} + .db-code-docs { min-block-size: max(#{variables.$db-sizing-3xl}, 50vh); 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 { - @include display.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-sm; - background-color: colors.$db-adaptive-on-bg-basic-emphasis-100-default; - opacity: 0.64; - position: absolute; - inset: 0; - } - - .code { - overflow: auto; - position: absolute; - z-index: 20; - inset: 0; - margin: variables.$db-spacing-fixed-md; - @include display.display(flex); - flex-direction: column; - gap: variables.$db-spacing-fixed-sm; - - code { - @include display.display(block); - white-space: pre-wrap; - } - - .tab-container { - position: relative; - - .copy-button { - position: absolute; - z-index: 20; - inset-inline-end: variables.$db-spacing-fixed-sm; - inset-block-end: variables.$db-spacing-fixed-sm; - - @include screen-sizes.screen("md") { - inset-block: variables.$db-spacing-fixed-sm auto; - } - } - } - } - } + margin-block-end: variables.$db-spacing-fixed-md; } .validity-container { diff --git a/showcases/patternhub/tsconfig.json b/showcases/patternhub/tsconfig.json index 06a7060f15b7..acd125cd3aa6 100644 --- a/showcases/patternhub/tsconfig.json +++ b/showcases/patternhub/tsconfig.json @@ -17,7 +17,12 @@ "noUnusedLocals": false, "noUnusedParameters": false, "jsx": "react-jsx", - "incremental": true + "incremental": true, + "paths": { + "@components": ["../../output/react/src"], + "@components/src/*": ["../../output/react/src/*"], + "@components/components/*": ["../../output/react/src/components/*"] + } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], "exclude": ["node_modules"] diff --git a/showcases/playwright.showcase.ts b/showcases/playwright.showcase.ts index 8db46b41e40f..d891d404165a 100644 --- a/showcases/playwright.showcase.ts +++ b/showcases/playwright.showcase.ts @@ -5,7 +5,7 @@ const showcaseConfig: PlaywrightTestConfig = { retries: process.env.CI ? 1 : 0, use: { /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */ - actionTimeout: 0, + actionTimeout: 30_000, /* Base URL to use in actions like `await page.goto('/')`. */ baseURL: `http://localhost:8080/${process.env.showcase}/`, diff --git a/showcases/react-showcase/src/components/accordion-item/index.tsx b/showcases/react-showcase/src/components/accordion-item/index.tsx index d0650d1020d5..c5e5dda72ccf 100644 --- a/showcases/react-showcase/src/components/accordion-item/index.tsx +++ b/showcases/react-showcase/src/components/accordion-item/index.tsx @@ -1,5 +1,5 @@ -import { DBAccordionItem } from '../../../../../output/react/src'; -import type { DBAccordionItemProps } from '../../../../../output/react/src/components/accordion-item/model'; +import { DBAccordionItem } from '@components'; +import type { DBAccordionItemProps } from '@components/src/components/accordion-item/model'; import defaultComponentVariants from '../../../../shared/accordion-item.json'; import { type BaseComponentProps } from '../base-component-data'; import { getVariants } from '../data'; diff --git a/showcases/react-showcase/src/components/accordion/index.tsx b/showcases/react-showcase/src/components/accordion/index.tsx index 17c9aa816e2e..cff7b9339082 100644 --- a/showcases/react-showcase/src/components/accordion/index.tsx +++ b/showcases/react-showcase/src/components/accordion/index.tsx @@ -1,9 +1,5 @@ -import { - DBAccordion, - DBAccordionItem, - DBInfotext -} from '../../../../../output/react/src'; -import type { DBAccordionProps } from '../../../../../output/react/src/components/accordion/model'; +import { DBAccordion, DBAccordionItem, DBInfotext } from '@components'; +import type { DBAccordionProps } from '@components/src/components/accordion/model'; import defaultComponentVariants from '../../../../shared/accordion.json'; import { type BaseComponentProps } from '../base-component-data'; import { getVariants } from '../data'; diff --git a/showcases/react-showcase/src/components/badge/index.tsx b/showcases/react-showcase/src/components/badge/index.tsx index 2110baec4749..9c98323f37e8 100644 --- a/showcases/react-showcase/src/components/badge/index.tsx +++ b/showcases/react-showcase/src/components/badge/index.tsx @@ -1,10 +1,5 @@ -import { - DBBadge, - DBButton, - DBIcon, - DBInfotext -} from '../../../../../output/react/src'; -import type { DBBadgeProps } from '../../../../../output/react/src/components/badge/model'; +import { DBBadge, DBButton, DBIcon, DBInfotext } from '@components'; +import type { DBBadgeProps } from '@components/src/components/badge/model'; import defaultComponentVariants from '../../../../shared/badge.json'; import { type BaseComponentProps } from '../base-component-data'; import { getVariants } from '../data'; diff --git a/showcases/react-showcase/src/components/brand/index.tsx b/showcases/react-showcase/src/components/brand/index.tsx index f03ed384a062..5d4a088e80de 100644 --- a/showcases/react-showcase/src/components/brand/index.tsx +++ b/showcases/react-showcase/src/components/brand/index.tsx @@ -1,7 +1,7 @@ /* eslint-disable @typescript-eslint/no-deprecated */ -import { DBBrand } from '../../../../../output/react/src'; -import { type DBBrandProps } from '../../../../../output/react/src/components/brand/model'; +import { DBBrand } from '@components'; +import { type DBBrandProps } from '@components/src/components/brand/model'; import defaultComponentVariants from '../../../../shared/brand.json'; import { type BaseComponentProps } from '../base-component-data'; import { getVariants } from '../data'; diff --git a/showcases/react-showcase/src/components/button/index.tsx b/showcases/react-showcase/src/components/button/index.tsx deleted file mode 100644 index e68410c1b575..000000000000 --- a/showcases/react-showcase/src/components/button/index.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { DBButton } from '../../../../../output/react/src'; -import { type DBButtonProps } from '../../../../../output/react/src/components/button/model'; -import defaultComponentVariants from '../../../../shared/button.json'; -import { type BaseComponentProps } from '../base-component-data'; -import { getVariants } from '../data'; -import DefaultComponent from '../default-component'; - -const getButton = ({ - variant, - size, - noText, - icon, - width, - disabled, - children, - type, - showIcon, - showIconTrailing, - iconTrailing -}: DBButtonProps) => ( - { - // eslint-disable-next-line no-alert - alert(children.toString()); - }} - type={type}> - {children} - -); - -const ButtonComponent = (props: BaseComponentProps) => { - return ( - - ); -}; - -export default ButtonComponent; diff --git a/showcases/react-showcase/src/components/card/index.tsx b/showcases/react-showcase/src/components/card/index.tsx index 104a8225eb43..892bf568a7d0 100644 --- a/showcases/react-showcase/src/components/card/index.tsx +++ b/showcases/react-showcase/src/components/card/index.tsx @@ -1,5 +1,5 @@ -import { DBCard } from '../../../../../output/react/src'; -import type { DBCardProps } from '../../../../../output/react/src/components/card/model'; +import { DBCard } from '@components'; +import type { DBCardProps } from '@components/src/components/card/model'; import defaultComponentVariants from '../../../../shared/card.json'; import { type BaseComponentProps } from '../base-component-data'; import { getVariants } from '../data'; diff --git a/showcases/react-showcase/src/components/checkbox/index.tsx b/showcases/react-showcase/src/components/checkbox/index.tsx index 6d8e82ab6242..7dae93801aa4 100644 --- a/showcases/react-showcase/src/components/checkbox/index.tsx +++ b/showcases/react-showcase/src/components/checkbox/index.tsx @@ -1,9 +1,5 @@ -import { - DBCheckbox, - DBInfotext, - getBoolean -} from '../../../../../output/react/src'; -import { type DBCheckboxProps } from '../../../../../output/react/src/components/checkbox/model'; +import { DBCheckbox, DBInfotext, getBoolean } from '@components'; +import { type DBCheckboxProps } from '@components/src/components/checkbox/model'; import defaultComponentVariants from '../../../../shared/checkbox.json'; import { type BaseComponentProps } from '../base-component-data'; import { getVariants } from '../data'; diff --git a/showcases/react-showcase/src/components/custom-select/index.tsx b/showcases/react-showcase/src/components/custom-select/index.tsx index ea57769fca2a..1305e2ac3266 100644 --- a/showcases/react-showcase/src/components/custom-select/index.tsx +++ b/showcases/react-showcase/src/components/custom-select/index.tsx @@ -1,7 +1,7 @@ +import { DBCustomSelect, DBInfotext } from '@components'; +import type { DBCustomSelectProps } from '@components/src/components/custom-select/model'; import { type CustomSelectOptionType } from '@db-ux/core-components/src/components/custom-select/model'; import { useState } from 'react'; -import { DBCustomSelect, DBInfotext } from '../../../../../output/react/src'; -import type { DBCustomSelectProps } from '../../../../../output/react/src/components/custom-select/model'; import defaultComponentVariants from '../../../../shared/custom-select.json'; import type { BaseComponentProps } from '../base-component-data'; import { getVariants } from '../data'; diff --git a/showcases/react-showcase/src/components/divider/index.tsx b/showcases/react-showcase/src/components/divider/index.tsx index 5af690fc84dd..51c1f425c6b0 100644 --- a/showcases/react-showcase/src/components/divider/index.tsx +++ b/showcases/react-showcase/src/components/divider/index.tsx @@ -1,5 +1,5 @@ -import { DBDivider, DBInfotext } from '../../../../../output/react/src'; -import { type DBDividerProps } from '../../../../../output/react/src/components/divider/model'; +import { DBDivider, DBInfotext } from '@components'; +import { type DBDividerProps } from '@components/src/components/divider/model'; import defaultComponentVariants from '../../../../shared/divider.json'; import { type BaseComponentProps } from '../base-component-data'; import { getVariants } from '../data'; diff --git a/showcases/react-showcase/src/components/drawer/index.tsx b/showcases/react-showcase/src/components/drawer/index.tsx index f30132cb4c4d..967b676a7c18 100644 --- a/showcases/react-showcase/src/components/drawer/index.tsx +++ b/showcases/react-showcase/src/components/drawer/index.tsx @@ -1,6 +1,6 @@ +import { DBButton, DBDrawer } from '@components'; +import type { DBDrawerProps } from '@components/src/components/drawer/model'; import { useState } from 'react'; -import { DBButton, DBDrawer } from '../../../../../output/react/src'; -import type { DBDrawerProps } from '../../../../../output/react/src/components/drawer/model'; import defaultComponentVariants from '../../../../shared/drawer.json'; import { type BaseComponentProps } from '../base-component-data'; import { getVariants } from '../data'; diff --git a/showcases/react-showcase/src/components/form/index.tsx b/showcases/react-showcase/src/components/form/index.tsx index b3ac7152da32..2a18260aad8d 100644 --- a/showcases/react-showcase/src/components/form/index.tsx +++ b/showcases/react-showcase/src/components/form/index.tsx @@ -1,4 +1,3 @@ -import { useEffect, useState } from 'react'; import { DBAccordion, DBAccordionItem, @@ -18,11 +17,9 @@ import { DBTag, DBTextarea, DBTooltip -} from '../../../../../output/react/src'; -import type { - ChangeEvent, - ValueLabelType -} from '../../../../../output/react/src/shared/model'; +} from '@components'; +import type { ChangeEvent, ValueLabelType } from '@components/src/shared/model'; +import { useEffect, useState } from 'react'; const FormComponent = () => { const [input, setInput] = useState(''); diff --git a/showcases/react-showcase/src/components/header/index.tsx b/showcases/react-showcase/src/components/header/index.tsx index de04b0320d8d..1816f1723d9b 100644 --- a/showcases/react-showcase/src/components/header/index.tsx +++ b/showcases/react-showcase/src/components/header/index.tsx @@ -5,8 +5,8 @@ import { DBLink, DBNavigation, DBNavigationItem -} from '../../../../../output/react/src'; -import { type DBHeaderProps } from '../../../../../output/react/src/components/header/model'; +} from '@components'; +import { type DBHeaderProps } from '@components/src/components/header/model'; import defaultComponentVariants from '../../../../shared/header.json'; import { type BaseComponentProps } from '../base-component-data'; import { getVariants } from '../data'; diff --git a/showcases/react-showcase/src/components/icon/index.tsx b/showcases/react-showcase/src/components/icon/index.tsx index a441aa732f22..1d9f06ecc051 100644 --- a/showcases/react-showcase/src/components/icon/index.tsx +++ b/showcases/react-showcase/src/components/icon/index.tsx @@ -1,5 +1,5 @@ -import { DBIcon, DBInfotext } from '../../../../../output/react/src'; -import { type DBIconProps } from '../../../../../output/react/src/components/icon/model'; +import { DBIcon, DBInfotext } from '@components'; +import { type DBIconProps } from '@components/src/components/icon/model'; import defaultComponentVariants from '../../../../shared/icon.json'; import { type BaseComponentProps } from '../base-component-data'; import { getVariants } from '../data'; diff --git a/showcases/react-showcase/src/components/infotext/index.tsx b/showcases/react-showcase/src/components/infotext/index.tsx index 262d51b5789f..c8d605e8d477 100644 --- a/showcases/react-showcase/src/components/infotext/index.tsx +++ b/showcases/react-showcase/src/components/infotext/index.tsx @@ -1,5 +1,5 @@ -import { DBInfotext } from '../../../../../output/react/src'; -import { type DBInfotextProps } from '../../../../../output/react/src/components/infotext/model'; +import { DBInfotext } from '@components'; +import { type DBInfotextProps } from '@components/src/components/infotext/model'; import defaultComponentVariants from '../../../../shared/infotext.json'; import { type BaseComponentProps } from '../base-component-data'; import { getVariants } from '../data'; diff --git a/showcases/react-showcase/src/components/input/index.tsx b/showcases/react-showcase/src/components/input/index.tsx index 83409a9b428a..f8660e359fb7 100644 --- a/showcases/react-showcase/src/components/input/index.tsx +++ b/showcases/react-showcase/src/components/input/index.tsx @@ -2,8 +2,8 @@ import { DBInput, type LabelVariantType, type ValueLabelType -} from '../../../../../output/react/src'; -import { type DBInputProps } from '../../../../../output/react/src/components/input/model'; +} from '@components'; +import { type DBInputProps } from '@components/src/components/input/model'; import defaultComponentVariants from '../../../../shared/input.json'; import { type BaseComponentProps } from '../base-component-data'; import { getVariants } from '../data'; diff --git a/showcases/react-showcase/src/components/link/index.tsx b/showcases/react-showcase/src/components/link/index.tsx index 3e02e11ba99a..6868215820eb 100644 --- a/showcases/react-showcase/src/components/link/index.tsx +++ b/showcases/react-showcase/src/components/link/index.tsx @@ -1,5 +1,5 @@ -import { DBLink } from '../../../../../output/react/src'; -import { type DBLinkProps } from '../../../../../output/react/src/components/link/model'; +import { DBLink } from '@components'; +import { type DBLinkProps } from '@components/src/components/link/model'; import defaultComponentVariants from '../../../../shared/link.json'; import { type BaseComponentProps } from '../base-component-data'; import { getVariants } from '../data'; diff --git a/showcases/react-showcase/src/components/navigation-item/index.tsx b/showcases/react-showcase/src/components/navigation-item/index.tsx index ff3a979314e6..b5305dd5b615 100644 --- a/showcases/react-showcase/src/components/navigation-item/index.tsx +++ b/showcases/react-showcase/src/components/navigation-item/index.tsx @@ -1,5 +1,5 @@ -import { DBNavigationItem } from '../../../../../output/react/src'; -import type { DBNavigationItemProps } from '../../../../../output/react/src/components/navigation-item/model'; +import { DBNavigationItem } from '@components'; +import type { DBNavigationItemProps } from '@components/src/components/navigation-item/model'; import defaultComponentVariants from '../../../../shared/navigation-item.json'; import { type BaseComponentProps } from '../base-component-data'; import { getVariants } from '../data'; diff --git a/showcases/react-showcase/src/components/navigation/index.tsx b/showcases/react-showcase/src/components/navigation/index.tsx index cda765c200da..3e0bd1deaa00 100644 --- a/showcases/react-showcase/src/components/navigation/index.tsx +++ b/showcases/react-showcase/src/components/navigation/index.tsx @@ -1,9 +1,5 @@ -import { - DBInfotext, - DBNavigation, - DBNavigationItem -} from '../../../../../output/react/src'; -import type { DBNavigationProps } from '../../../../../output/react/src/components/navigation/model'; +import { DBInfotext, DBNavigation, DBNavigationItem } from '@components'; +import type { DBNavigationProps } from '@components/src/components/navigation/model'; import defaultComponentVariants from '../../../../shared/navigation.json'; import { type BaseComponentProps } from '../base-component-data'; import { getVariants } from '../data'; diff --git a/showcases/react-showcase/src/components/notification/index.tsx b/showcases/react-showcase/src/components/notification/index.tsx index 84e97c723685..483ef993dbeb 100644 --- a/showcases/react-showcase/src/components/notification/index.tsx +++ b/showcases/react-showcase/src/components/notification/index.tsx @@ -1,5 +1,5 @@ -import { DBLink, DBNotification } from '../../../../../output/react/src'; -import { type DBNotificationProps } from '../../../../../output/react/src/components/notification/model'; +import { DBLink, DBNotification } from '@components'; +import { type DBNotificationProps } from '@components/src/components/notification/model'; import defaultComponentVariants from '../../../../shared/notification.json'; import { getBasePath } from '../../utils/base-path'; import { type BaseComponentProps } from '../base-component-data'; diff --git a/showcases/react-showcase/src/components/page/index.tsx b/showcases/react-showcase/src/components/page/index.tsx index cea2c91bde4b..dd8d3117b600 100644 --- a/showcases/react-showcase/src/components/page/index.tsx +++ b/showcases/react-showcase/src/components/page/index.tsx @@ -6,8 +6,8 @@ import { DBNavigation, DBNavigationItem, DBPage -} from '../../../../../output/react/src'; -import { type DBPageProps } from '../../../../../output/react/src/components/page/model'; +} from '@components'; +import { type DBPageProps } from '@components/src/components/page/model'; import defaultComponentVariants from '../../../../shared/page.json'; import { type BaseComponentProps } from '../base-component-data'; import { getVariants } from '../data'; diff --git a/showcases/react-showcase/src/components/popover/index.tsx b/showcases/react-showcase/src/components/popover/index.tsx index 4b917a5bc55b..54e939c505cd 100644 --- a/showcases/react-showcase/src/components/popover/index.tsx +++ b/showcases/react-showcase/src/components/popover/index.tsx @@ -1,5 +1,5 @@ -import { DBButton, DBPopover } from '../../../../../output/react/src'; -import type { DBPopoverProps } from '../../../../../output/react/src/components/popover/model'; +import { DBButton, DBPopover } from '@components'; +import type { DBPopoverProps } from '@components/src/components/popover/model'; import defaultComponentVariants from '../../../../shared/popover.json'; import { type BaseComponentProps } from '../base-component-data'; import { getVariants } from '../data'; diff --git a/showcases/react-showcase/src/components/radio/index.tsx b/showcases/react-showcase/src/components/radio/index.tsx index ae2d84326642..968602cdd3df 100644 --- a/showcases/react-showcase/src/components/radio/index.tsx +++ b/showcases/react-showcase/src/components/radio/index.tsx @@ -1,9 +1,5 @@ -import { - DBInfotext, - DBRadio, - getBoolean -} from '../../../../../output/react/src'; -import { type DBRadioProps } from '../../../../../output/react/src/components/radio/model'; +import { DBInfotext, DBRadio, getBoolean } from '@components'; +import { type DBRadioProps } from '@components/src/components/radio/model'; import defaultComponentVariants from '../../../../shared/radio.json'; import { type BaseComponentProps } from '../base-component-data'; import { getVariants } from '../data'; diff --git a/showcases/react-showcase/src/components/section/index.tsx b/showcases/react-showcase/src/components/section/index.tsx index 9177656d67b4..a6d8fb935db3 100644 --- a/showcases/react-showcase/src/components/section/index.tsx +++ b/showcases/react-showcase/src/components/section/index.tsx @@ -1,5 +1,5 @@ -import { DBCard, DBSection } from '../../../../../output/react/src'; -import { type DBSectionProps } from '../../../../../output/react/src/components/section/model'; +import { DBCard, DBSection } from '@components'; +import { type DBSectionProps } from '@components/src/components/section/model'; import defaultComponentVariants from '../../../../shared/section.json'; import { type BaseComponentProps } from '../base-component-data'; import { getVariants } from '../data'; diff --git a/showcases/react-showcase/src/components/select/index.tsx b/showcases/react-showcase/src/components/select/index.tsx index 8551ef736a3b..57d6864c1147 100644 --- a/showcases/react-showcase/src/components/select/index.tsx +++ b/showcases/react-showcase/src/components/select/index.tsx @@ -1,6 +1,6 @@ +import { DBSelect } from '@components'; +import type { DBSelectProps } from '@components/src/components/select/model'; import { useState } from 'react'; -import { DBSelect } from '../../../../../output/react/src'; -import type { DBSelectProps } from '../../../../../output/react/src/components/select/model'; import defaultComponentVariants from '../../../../shared/select.json'; import { type BaseComponentProps } from '../base-component-data'; import { getVariants } from '../data'; diff --git a/showcases/react-showcase/src/components/stack/index.tsx b/showcases/react-showcase/src/components/stack/index.tsx index 7872be6eb779..bb4d84a49cff 100644 --- a/showcases/react-showcase/src/components/stack/index.tsx +++ b/showcases/react-showcase/src/components/stack/index.tsx @@ -1,9 +1,5 @@ -import { - DBDivider, - DBInfotext, - DBStack -} from '../../../../../output/react/src'; -import type { DBStackProps } from '../../../../../output/react/src/components/stack/model'; +import { DBDivider, DBInfotext, DBStack } from '@components'; +import type { DBStackProps } from '@components/src/components/stack/model'; import defaultComponentVariants from '../../../../shared/stack.json'; import type { BaseComponentProps } from '../base-component-data'; import { getVariants } from '../data'; diff --git a/showcases/react-showcase/src/components/switch/index.tsx b/showcases/react-showcase/src/components/switch/index.tsx index 4f20f49b068d..a377a653b123 100644 --- a/showcases/react-showcase/src/components/switch/index.tsx +++ b/showcases/react-showcase/src/components/switch/index.tsx @@ -1,9 +1,5 @@ +import { DBInfotext, DBSwitch, getBoolean } from '@components'; import type { DBSwitchProps } from '@db-ux/react-core-components/src'; -import { - DBInfotext, - DBSwitch, - getBoolean -} from '../../../../../output/react/src'; import defaultComponentVariants from '../../../../shared/switch.json'; import { type BaseComponentProps } from '../base-component-data'; import { getVariants } from '../data'; diff --git a/showcases/react-showcase/src/components/tab-item/index.tsx b/showcases/react-showcase/src/components/tab-item/index.tsx index 3c396be2631a..e9d488be45a9 100644 --- a/showcases/react-showcase/src/components/tab-item/index.tsx +++ b/showcases/react-showcase/src/components/tab-item/index.tsx @@ -1,5 +1,5 @@ -import { DBTabItem, DBTabList } from '../../../../../output/react/src'; -import type { DBTabItemProps } from '../../../../../output/react/src/components/tab-item/model'; +import { DBTabItem, DBTabList } from '@components'; +import type { DBTabItemProps } from '@components/src/components/tab-item/model'; import defaultComponentVariants from '../../../../shared/tab-item.json'; import { type BaseComponentProps } from '../base-component-data'; import { getVariants } from '../data'; diff --git a/showcases/react-showcase/src/components/tabs/index.tsx b/showcases/react-showcase/src/components/tabs/index.tsx index b5caf050b5d7..66a0b693db7e 100644 --- a/showcases/react-showcase/src/components/tabs/index.tsx +++ b/showcases/react-showcase/src/components/tabs/index.tsx @@ -4,8 +4,8 @@ import { DBTabList, DBTabPanel, DBTabs -} from '../../../../../output/react/src'; -import type { DBTabsProps } from '../../../../../output/react/src/components/tabs/model'; +} from '@components'; +import type { DBTabsProps } from '@components/src/components/tabs/model'; import defaultComponentVariants from '../../../../shared/tabs.json'; import { type BaseComponentProps } from '../base-component-data'; import { getVariants } from '../data'; diff --git a/showcases/react-showcase/src/components/tag/index.tsx b/showcases/react-showcase/src/components/tag/index.tsx index 6e921e23cd27..c999b2c1c2c8 100644 --- a/showcases/react-showcase/src/components/tag/index.tsx +++ b/showcases/react-showcase/src/components/tag/index.tsx @@ -1,6 +1,6 @@ +import { DBTag, getBoolean } from '@components'; +import { type DBTagProps } from '@components/src/components/tag/model'; import { useState } from 'react'; -import { DBTag, getBoolean } from '../../../../../output/react/src'; -import { type DBTagProps } from '../../../../../output/react/src/components/tag/model'; import defaultComponentVariants from '../../../../shared/tag.json'; import { type BaseComponentProps } from '../base-component-data'; import { getVariants } from '../data'; diff --git a/showcases/react-showcase/src/components/textarea/index.tsx b/showcases/react-showcase/src/components/textarea/index.tsx index e822cd939da0..3fc08539d016 100644 --- a/showcases/react-showcase/src/components/textarea/index.tsx +++ b/showcases/react-showcase/src/components/textarea/index.tsx @@ -1,6 +1,6 @@ +import { DBTextarea } from '@components'; +import type { DBTextareaProps } from '@components/src/components/textarea/model'; import { useState } from 'react'; -import { DBTextarea } from '../../../../../output/react/src'; -import type { DBTextareaProps } from '../../../../../output/react/src/components/textarea/model'; import defaultComponentVariants from '../../../../shared/textarea.json'; import { type BaseComponentProps } from '../base-component-data'; import { getVariants } from '../data'; diff --git a/showcases/react-showcase/src/components/tooltip/index.tsx b/showcases/react-showcase/src/components/tooltip/index.tsx index 427bd6c95754..bd865fc16dcb 100644 --- a/showcases/react-showcase/src/components/tooltip/index.tsx +++ b/showcases/react-showcase/src/components/tooltip/index.tsx @@ -1,5 +1,5 @@ -import { DBButton, DBTooltip } from '../../../../../output/react/src'; -import type { DBTooltipProps } from '../../../../../output/react/src/components/tooltip/model'; +import { DBButton, DBTooltip } from '@components'; +import type { DBTooltipProps } from '@components/src/components/tooltip/model'; import defaultComponentVariants from '../../../../shared/tooltip.json'; import { type BaseComponentProps } from '../base-component-data'; import { getVariants } from '../data'; diff --git a/showcases/react-showcase/src/utils/navigation-item.tsx b/showcases/react-showcase/src/utils/navigation-item.tsx index 1f5f0774bb6e..b5cc426ed527 100644 --- a/showcases/react-showcase/src/utils/navigation-item.tsx +++ b/showcases/react-showcase/src/utils/navigation-item.tsx @@ -2,7 +2,6 @@ import AccordionComponent from '../components/accordion'; import AccordionItemComponent from '../components/accordion-item'; import BadgeComponent from '../components/badge'; import BrandComponent from '../components/brand'; -import ButtonComponent from '../components/button'; import CardComponent from '../components/card'; import CheckboxComponent from '../components/checkbox'; import CustomSelectComponent from '../components/custom-select'; @@ -29,6 +28,8 @@ import TagComponent from '../components/tag'; import TextareaComponent from '../components/textarea'; import TooltipComponent from '../components/tooltip'; +import ButtonShowcase from '@components/components/button/showcase/button.showcase'; + export type NavigationItem = { path: string; label: string; @@ -146,7 +147,7 @@ export const NAVIGATION_ITEMS: NavigationItem[] = [ label: '02 Action', subNavigation: getSortedNavigationItems([ { path: 'link', label: 'Link', component: }, - { path: 'button', label: 'Button', component: } + { path: 'button', label: 'Button', component: } ]) }, { diff --git a/showcases/react-showcase/tsconfig.json b/showcases/react-showcase/tsconfig.json index 99102dd1bbaa..fb16d41adb8a 100644 --- a/showcases/react-showcase/tsconfig.json +++ b/showcases/react-showcase/tsconfig.json @@ -19,7 +19,12 @@ "noUnusedParameters": false, "noEmit": true, "jsx": "react-jsx", - "types": ["vite/client"] + "types": ["vite/client"], + "paths": { + "@components": ["../../output/react/src"], + "@components/src/*": ["../../output/react/src/*"], + "@components/components/*": ["../../output/react/src/components/*"] + } }, "include": ["src"], "references": [{ "path": "./tsconfig.node.json" }] diff --git a/showcases/react-showcase/vite.config.ts b/showcases/react-showcase/vite.config.ts index 2fe383f20670..5e2c563ae8b0 100644 --- a/showcases/react-showcase/vite.config.ts +++ b/showcases/react-showcase/vite.config.ts @@ -1,7 +1,11 @@ import react from '@vitejs/plugin-react'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; import { defineConfig } from 'vite'; import devtoolsJson from 'vite-plugin-devtools-json'; +const __dirname = path.dirname(fileURLToPath(import.meta.url)); + // https://vitejs.dev/config/ export default defineConfig({ base: `/react-showcase/`, @@ -28,6 +32,11 @@ export default defineConfig({ } } }, + resolve: { + alias: { + '@components': path.resolve(__dirname, '../../output/react/src') + } + }, css: { devSourcemap: true // Enables source maps in dev mode for CSS } diff --git a/showcases/shared/button.json b/showcases/shared/button.json deleted file mode 100644 index 15e4098dcec2..000000000000 --- a/showcases/shared/button.json +++ /dev/null @@ -1,181 +0,0 @@ -[ - { - "name": "Density", - "examples": [ - { - "name": "Functional", - "density": "functional", - "props": {} - }, - { - "name": "(Default) Regular", - "density": "regular", - "props": {} - }, - { - "name": "Expressive", - "density": "expressive", - "props": {} - } - ] - }, - - { - "name": "Variant", - "examples": [ - { - "name": "(Default) Outlined - Adaptive" - }, - { - "name": "Filled - Adaptive", - "props": { - "variant": "filled" - } - }, - { - "name": "Ghost - Adaptive", - "props": { - "variant": "ghost" - } - }, - { - "name": "Brand", - "props": { - "variant": "brand" - } - } - ] - }, - { - "name": "Disabled", - "examples": [ - { - "name": "(Default) False", - "props": { - "disabled": false - } - }, - { - "name": "True", - "props": { - "disabled": true - } - } - ] - }, - { - "name": "Size", - "examples": [ - { - "name": "(Default) Medium" - }, - { - "name": "Small", - "props": { - "size": "small" - } - } - ] - }, - { - "name": "Show Icon Leading", - "examples": [ - { - "name": "(Default) False", - "props": { - "icon": "x_placeholder", - "showIcon": false - } - }, - { - "name": "True", - "props": { - "icon": "x_placeholder", - "showIcon": true - } - } - ] - }, - { - "name": "Show Icon Trailing", - "examples": [ - { - "name": "(Default) False", - "props": { - "iconTrailing": "x_placeholder", - "showIconTrailing": false - } - }, - { - "name": "True", - "props": { - "iconTrailing": "x_placeholder", - "showIconTrailing": true - } - } - ] - }, - { - "name": "No Text", - "examples": [ - { - "name": "(Default) False", - "props": { - "icon": "x_placeholder" - } - }, - { - "name": "True", - "props": { - "icon": "x_placeholder", - "noText": true - } - } - ] - }, - { - "name": "Width", - "examples": [ - { - "name": "(Default) Auto", - "props": { - "width": "auto" - } - }, - { - "name": "Width", - "style": { "width": "500px" }, - "props": { - "width": "full" - } - } - ] - }, - { - "name": "Multi-line Text With Line Breaks", - "examples": [ - { - "name": "Multi-line Text With Automatic Line Breaks", - "style": { "width": "300px" }, - "props": { - "width": "full" - } - }, - { - "name": "Multi-line Text With Automatic Line Breaks and Icon", - "style": { "width": "300px" }, - "props": { - "width": "full", - "icon": "x_placeholder" - } - }, - { - "name": "Button Small Multi-line Text With Automatic Line Breaks", - "style": { "width": "300px" }, - "props": { - "size": "small" - } - } - ] - } -] diff --git a/showcases/showcase-styles.css b/showcases/showcase-styles.css index 8fd14f2329a5..b166340c9e4e 100644 --- a/showcases/showcase-styles.css +++ b/showcases/showcase-styles.css @@ -8,7 +8,14 @@ display: flex; flex-direction: column; gap: var(--db-spacing-fixed-md); - padding: var(--db-spacing-fixed-md); + + &:has(.component-header) { + padding: var(--db-spacing-fixed-md); + } +} + +.show-code-link { + display: none; } .component-header { @@ -42,6 +49,7 @@ db-card:is(.variants-card) > .db-card { inline-size: 100%; justify-content: center; gap: var(--db-spacing-fixed-md); + align-items: center; } .variants-list > div { diff --git a/showcases/stencil-showcase/src/styles.css b/showcases/stencil-showcase/src/styles.css index e7ec5e3770d9..136ebfb7bc48 100644 --- a/showcases/stencil-showcase/src/styles.css +++ b/showcases/stencil-showcase/src/styles.css @@ -1,3 +1,7 @@ @import "@db-ux/core-components/build/styles/rollup.css"; @import "../../showcase-styles.css"; @import "@db-ux/db-theme/build/styles/rollup.css"; + +.hydrated { + display: contents; +} diff --git a/showcases/stencil-showcase/tsconfig.json b/showcases/stencil-showcase/tsconfig.json index cadda2628ccd..f7cf9f7a5c46 100644 --- a/showcases/stencil-showcase/tsconfig.json +++ b/showcases/stencil-showcase/tsconfig.json @@ -20,7 +20,14 @@ "target": "ES2022", "module": "ES2022", "useDefineForClassFields": false, - "lib": ["ES2022", "dom"] + "lib": ["ES2022", "dom"], + "paths": { + "@components": ["../../output/angular/src"], + "@components/src/*": ["../../output/angular/src/*"], + "@components/components/*": [ + "../../output/angular/src/components/*" + ] + } }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, diff --git a/showcases/vue-showcase/src/components/button/Button.vue b/showcases/vue-showcase/src/components/button/Button.vue deleted file mode 100644 index de745686d330..000000000000 --- a/showcases/vue-showcase/src/components/button/Button.vue +++ /dev/null @@ -1,33 +0,0 @@ - - - diff --git a/showcases/vue-showcase/src/utils/navigation-items.ts b/showcases/vue-showcase/src/utils/navigation-items.ts index beee8433a446..d363a6d498eb 100644 --- a/showcases/vue-showcase/src/utils/navigation-items.ts +++ b/showcases/vue-showcase/src/utils/navigation-items.ts @@ -4,7 +4,6 @@ import AccordionItem from '../components/accordion-item/AccordionItem.vue'; import Accordion from '../components/accordion/Accordion.vue'; import Badge from '../components/badge/Badge.vue'; import Brand from '../components/brand/Brand.vue'; -import Button from '../components/button/Button.vue'; import Card from '../components/card/Card.vue'; import Checkbox from '../components/checkbox/Checkbox.vue'; import CustomSelect from '../components/custom-select/CustomSelect.vue'; @@ -31,6 +30,8 @@ import Tag from '../components/tag/Tag.vue'; import Textarea from '../components/textarea/Textarea.vue'; import Tooltip from '../components/tooltip/Tooltip.vue'; +import ButtonShowcase from '@components/components/button/showcase/button.showcase.vue'; + export type NavItem = { path: string; label: string; @@ -148,7 +149,11 @@ export const navigationItems: NavItem[] = [ label: '02 Action', subNavigation: getSortedNavigationItems([ { path: '/02/link', label: 'Link', component: markRaw(Link) }, - { path: '/02/button', label: 'Button', component: markRaw(Button) } + { + path: '/02/button', + label: 'Button', + component: markRaw(ButtonShowcase) + } ]) }, { diff --git a/showcases/vue-showcase/tsconfig.json b/showcases/vue-showcase/tsconfig.json index 47c099642a94..bbc26e2aa88c 100644 --- a/showcases/vue-showcase/tsconfig.json +++ b/showcases/vue-showcase/tsconfig.json @@ -15,7 +15,12 @@ "noUnusedParameters": false, "lib": ["ESNext", "DOM"], "skipLibCheck": true, - "noEmit": true + "noEmit": true, + "paths": { + "@components": ["../../output/vue/src"], + "@components/src/*": ["../../output/vue/src/*"], + "@components/components/*": ["../../output/vue/src/components/*"] + } }, "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], "references": [{ "path": "./tsconfig.node.json" }] diff --git a/showcases/vue-showcase/vite.config.ts b/showcases/vue-showcase/vite.config.ts index aced092d5815..01d9e828b20b 100644 --- a/showcases/vue-showcase/vite.config.ts +++ b/showcases/vue-showcase/vite.config.ts @@ -1,7 +1,11 @@ import vue from '@vitejs/plugin-vue'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; import { defineConfig } from 'vite'; import devtoolsJson from 'vite-plugin-devtools-json'; +const __dirname = path.dirname(fileURLToPath(import.meta.url)); + // https://vitejs.dev/config/ export default defineConfig({ base: `/vue-showcase/`, @@ -13,6 +17,11 @@ export default defineConfig({ outDir: '../../build-showcases/vue-showcase', emptyOutDir: true }, + resolve: { + alias: { + '@components': path.resolve(__dirname, '../../output/vue/src') + } + }, css: { devSourcemap: true // Enables source maps in dev mode for CSS } diff --git a/storybooks/react-storybook/src/stories/Button.tsx b/storybooks/react-storybook/src/stories/Button.tsx deleted file mode 100644 index 334d6b9b9316..000000000000 --- a/storybooks/react-storybook/src/stories/Button.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import './button.css'; - -export type ButtonProps = { - /** Is this the principal call to action on the page? */ - primary?: boolean; - /** What background color to use */ - backgroundColor?: string; - /** How large should the button be? */ - size?: 'small' | 'medium' | 'large'; - /** Button contents */ - label: string; - /** Optional click handler */ - onClick?: () => void; -}; - -/** Primary UI component for user interaction */ -export const Button = ({ - primary = false, - size = 'medium', - backgroundColor, - label, - ...props -}: ButtonProps) => { - const mode = primary - ? 'storybook-button--primary' - : 'storybook-button--secondary'; - return ( - - ); -}; diff --git a/storybooks/react-storybook/src/stories/Docs.mdx b/storybooks/react-storybook/src/stories/Docs.mdx new file mode 100644 index 000000000000..23b54fabb2db --- /dev/null +++ b/storybooks/react-storybook/src/stories/Docs.mdx @@ -0,0 +1,13 @@ +import { Canvas, Markdown, Meta } from '@storybook/addon-docs/blocks'; +import { Ghost, Outlined, Filled, Brand } from './Variant.stories'; + + + + + + + + + + + diff --git a/storybooks/react-storybook/src/stories/Button.stories.ts b/storybooks/react-storybook/src/stories/Variant.stories.tsx similarity index 64% rename from storybooks/react-storybook/src/stories/Button.stories.ts rename to storybooks/react-storybook/src/stories/Variant.stories.tsx index 275b07ef6976..9a1138b5652e 100644 --- a/storybooks/react-storybook/src/stories/Button.stories.ts +++ b/storybooks/react-storybook/src/stories/Variant.stories.tsx @@ -1,13 +1,14 @@ import type { Meta, StoryObj } from '@storybook/react-vite'; +import { DBButton } from '@components'; import { fn } from 'storybook/test'; -import { Button } from './Button'; - // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta = { - title: 'Example/Button', - component: Button, + title: 'Components/Button/Variant', + render: (properties) => ( + {properties.children} + ), parameters: { // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout layout: 'centered' @@ -16,39 +17,40 @@ const meta = { tags: ['autodocs'], // More on argTypes: https://storybook.js.org/docs/api/argtypes argTypes: { - backgroundColor: { control: 'color' } + variant: { control: 'select', options: ['outlined', 'brand'] } }, // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args args: { onClick: fn() } -} satisfies Meta; +} satisfies Meta; export default meta; type Story = StoryObj; // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args -export const Primary: Story = { +export const Outlined: Story = { args: { - primary: true, - label: 'Button' + variant: 'outlined', + text: 'Outlined' } }; -export const Secondary: Story = { +export const Brand: Story = { args: { - label: 'Button' + variant: 'brand', + text: 'Outlined' } }; -export const Large: Story = { +export const Ghost: Story = { args: { - size: 'large', - label: 'Button' + variant: 'ghost', + text: 'Outlined' } }; -export const Small: Story = { +export const Filled: Story = { args: { - size: 'small', - label: 'Button' + variant: 'filled', + text: 'Outlined' } }; diff --git a/storybooks/react-storybook/src/stories/button.css b/storybooks/react-storybook/src/stories/button.css deleted file mode 100644 index 4e3620b0dcbf..000000000000 --- a/storybooks/react-storybook/src/stories/button.css +++ /dev/null @@ -1,30 +0,0 @@ -.storybook-button { - display: inline-block; - cursor: pointer; - border: 0; - border-radius: 3em; - font-weight: 700; - line-height: 1; - font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; -} -.storybook-button--primary { - background-color: #555ab9; - color: white; -} -.storybook-button--secondary { - box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; - background-color: transparent; - color: #333; -} -.storybook-button--small { - padding: 10px 16px; - font-size: 12px; -} -.storybook-button--medium { - padding: 11px 20px; - font-size: 14px; -} -.storybook-button--large { - padding: 12px 24px; - font-size: 16px; -} diff --git a/storybooks/react-storybook/tsconfig.app.json b/storybooks/react-storybook/tsconfig.app.json index a9b5a59ca647..861351fd49f3 100644 --- a/storybooks/react-storybook/tsconfig.app.json +++ b/storybooks/react-storybook/tsconfig.app.json @@ -1,28 +1,32 @@ { - "compilerOptions": { - "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", - "target": "ES2022", - "useDefineForClassFields": true, - "lib": ["ES2022", "DOM", "DOM.Iterable"], - "module": "ESNext", - "types": ["vite/client"], - "skipLibCheck": true, + "compilerOptions": { + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", + "target": "ES2022", + "useDefineForClassFields": true, + "lib": ["ES2022", "DOM", "DOM.Iterable"], + "module": "ESNext", + "types": ["vite/client"], + "skipLibCheck": true, - /* Bundler mode */ - "moduleResolution": "bundler", - "allowImportingTsExtensions": true, - "verbatimModuleSyntax": true, - "moduleDetection": "force", - "noEmit": true, - "jsx": "react-jsx", + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "verbatimModuleSyntax": true, + "moduleDetection": "force", + "noEmit": true, + "jsx": "react-jsx", - /* Linting */ - "strict": true, - "noUnusedLocals": true, - "noUnusedParameters": true, - "erasableSyntaxOnly": true, - "noFallthroughCasesInSwitch": true, - "noUncheckedSideEffectImports": true - }, - "include": ["src"] + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "erasableSyntaxOnly": true, + "noFallthroughCasesInSwitch": true, + "noUncheckedSideEffectImports": true, + "paths": { + "@components": ["../../output/react/src"], + "@components/src/*": ["../../output/react/src/*"] + } + }, + "include": ["src"] } diff --git a/storybooks/react-storybook/vite.config.ts b/storybooks/react-storybook/vite.config.ts index c90dba5be94c..4618b32a6d37 100644 --- a/storybooks/react-storybook/vite.config.ts +++ b/storybooks/react-storybook/vite.config.ts @@ -12,7 +12,9 @@ export default defineConfig({ resolve: { alias: { // Wired issue with storybook vite-builder inside monorepo - vue: path.resolve(__dirname, '../../node_modules/vue') + vue: path.resolve(__dirname, '../../node_modules/vue'), + // eslint-disable-next-line @typescript-eslint/naming-convention + '@components': path.resolve(__dirname, '../../output/react/src') } } });