feat: add mitosis examples to generate storybook files next to showcase examples

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
 }

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
 }

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
+	}
+};

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",

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 (
+		<Fragment>
+			<DBButton data-density="functional">Functional</DBButton>
+			<DBButton data-density="regular">(Default) Regular</DBButton>
+			<DBButton data-density="expressive">Expressive</DBButton>
+		</Fragment>
+	);
+}

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 (
+		<Fragment>
+			<DBButton disabled={false}>(Default) False</DBButton>
+			<DBButton disabled={true}>True</DBButton>
+		</Fragment>
+	);
+}

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 (
+		<Fragment>
+			<div style={{ width: '300px' }}>
+				<DBButton width="full">
+					Multi-line Text With Automatic Line Breaks
+				</DBButton>
+			</div>
+			<div style={{ width: '300px' }}>
+				<DBButton width="full" icon="x_placeholder">
+					Multi-line Text With Automatic Line Breaks and Icon
+				</DBButton>
+			</div>
+			<div style={{ width: '300px' }}>
+				<DBButton size="small">
+					Button Small Multi-line Text With Automatic Line Breaks
+				</DBButton>
+			</div>
+		</Fragment>
+	);
+}

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 (
+		<Fragment>
+			<DBButton icon="x_placeholder">(Default) False</DBButton>
+			<DBButton icon="x_placeholder" noText={true}>True</DBButton>
+		</Fragment>
+	);
+}

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 (
+		<Fragment>
+			<DBButton icon="x_placeholder" showIcon={false}>(Default) False</DBButton>
+			<DBButton icon="x_placeholder" showIcon={true}>True</DBButton>
+		</Fragment>
+	);
+}

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 (
+		<Fragment>
+			<DBButton iconTrailing="x_placeholder" showIconTrailing={false}>(Default) False</DBButton>
+			<DBButton iconTrailing="x_placeholder" showIconTrailing={true}>True</DBButton>
+		</Fragment>
+	);
+}

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 (
+		<Fragment>
+			<DBButton size="medium">(Default) Medium</DBButton>
+			<DBButton size="small">Small</DBButton>
+		</Fragment>
+	);
+}

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 (
+		<Fragment>
+			<DBButton variant="outlined">
+				(Default) Outlined - Adaptive
+			</DBButton>
+			<DBButton variant="filled">Filled - Adaptive</DBButton>
+			<DBButton variant="ghost">Ghost - Adaptive</DBButton>
+			<DBButton variant="brand">Brand</DBButton>
+		</Fragment>
+	);
+}

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 (
+		<Fragment>
+			<DBButton width="auto">(Default) Auto</DBButton>
+			<div style={{ width: '500px' }}>
+				<DBButton width="full">Width</DBButton>
+			</div>
+		</Fragment>
+	);
+}

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 (
+		<ContainerWrapperShowcase
+			title="DBButton"
+			isPatternhub={props.isPatternhub}>
+			<LinkWrapperShowcase exampleName="Density">
+				<CardWrapperShowcase>
+					<ButtonDensity />
+				</CardWrapperShowcase>
+			</LinkWrapperShowcase>
+			<LinkWrapperShowcase exampleName="Variant">
+				<CardWrapperShowcase>
+					<ButtonVariant />
+				</CardWrapperShowcase>
+			</LinkWrapperShowcase>
+			<LinkWrapperShowcase exampleName="Disabled">
+				<CardWrapperShowcase>
+					<ButtonDisabled />
+				</CardWrapperShowcase>
+			</LinkWrapperShowcase>
+			<LinkWrapperShowcase exampleName="Size">
+				<CardWrapperShowcase>
+					<ButtonSize />
+				</CardWrapperShowcase>
+			</LinkWrapperShowcase>
+			<LinkWrapperShowcase exampleName="Show Icon Leading">
+				<CardWrapperShowcase>
+					<ButtonShowIconLeading />
+				</CardWrapperShowcase>
+			</LinkWrapperShowcase>
+			<LinkWrapperShowcase exampleName="Show Icon Trailing">
+				<CardWrapperShowcase>
+					<ButtonShowIconTrailing />
+				</CardWrapperShowcase>
+			</LinkWrapperShowcase>
+			<LinkWrapperShowcase exampleName="No Text">
+				<CardWrapperShowcase>
+					<ButtonNoText />
+				</CardWrapperShowcase>
+			</LinkWrapperShowcase>
+			<LinkWrapperShowcase exampleName="Width">
+				<CardWrapperShowcase>
+					<ButtonWidth />
+				</CardWrapperShowcase>
+			</LinkWrapperShowcase>
+			<LinkWrapperShowcase exampleName="Multi-line Text With Line Breaks">
+				<CardWrapperShowcase>
+					<ButtonMultiLineText />
+				</CardWrapperShowcase>
+			</LinkWrapperShowcase>
+		</ContainerWrapperShowcase>
+	);
+}

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;
+}

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<string | undefined>(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 (
+		<Fragment>
+			<DBCard class="variants-card db-code-docs">
+				<div
+					role={props.role}
+					aria-label={props.role ? props.label : undefined}
+					class="variants-list">
+					<Slot />
+				</div>
+			</DBCard>
+			<Show when={href}>
+				<DBLink
+					size="small"
+					content="external"
+					className="show-code-link"
+					target="_blank"
+					href={href}
+					referrerpolicy="no-referrer">
+					Show Code
+				</DBLink>
+			</Show>
+		</Fragment>
+	);
+}