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

eslint.config.js

@@ -7,5 +7,16 @@ import ignoreFolders from './.config/ignores.js';
 export default defineConfig([
 	xoConfig,
 	eslintConfigPrettier,
-	globalIgnores([...ignoreFolders])
+	globalIgnores([...ignoreFolders]),
+	{
+		files: ['**/*.ts', '**/*.tsx'],
+		parser: '@typescript-eslint/parser',
+		parserOptions: {
+			ecmaVersion: 'latest',
+			sourceType: 'module',
+			ecmaFeatures: { jsx: true }
+		},
+		plugins: ['@typescript-eslint'],
+		extends: ['plugin:@typescript-eslint/recommended']
+	}
 ]);

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,22 @@
+/**
+ * @type {import('@builder.io/mitosis').MitosisConfig}
+ */
+module.exports = {
+	files: [
+		'src/components/**/*.showcase.lite.tsx',
+		'src/components/**/*.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/button.examples.meta.ts

@@ -0,0 +1,93 @@
+export type ButtonExampleIdentifier =
+	| 'density'
+	| 'variant'
+	| 'disabled'
+	| 'size'
+	| 'show-icon-leading'
+	| 'show-icon-trailing'
+	| 'no-text'
+	| 'width'
+	| 'multi-line-text';
+
+export type ButtonExampleGroup =
+	| 'Content'
+	| 'Density'
+	| 'Icons'
+	| 'Layout'
+	| 'Size'
+	| 'State'
+	| 'Variants';
+
+export type ButtonExampleMeta = {
+	/** Technical identifier */
+	id: ButtonExampleIdentifier;
+
+	/** Readable name */
+	exampleName: string;
+
+	/** Group to which the example belongs */
+	group?: ButtonExampleGroup;
+
+	/** Names of the Storybook stories that are created from this example. */
+	storybookNames?: string[];
+};
+
+/**
+ * All button examples, defined centrally.
+ */
+export const buttonExamplesMeta: ButtonExampleMeta[] = [
+	{
+		id: 'density',
+		exampleName: 'Density',
+		group: 'Density',
+		storybookNames: ['Density']
+	},
+	{
+		id: 'variant',
+		exampleName: 'Variant',
+		group: 'Variants',
+		storybookNames: ['Outlined', 'Filled', 'Ghost', 'Brand']
+	},
+	{
+		id: 'disabled',
+		exampleName: 'Disabled',
+		group: 'State',
+		storybookNames: ['Disabled']
+	},
+	{
+		id: 'size',
+		exampleName: 'Size',
+		group: 'Size',
+		storybookNames: ['Size']
+	},
+	{
+		id: 'show-icon-leading',
+		exampleName: 'Show Icon Leading',
+		group: 'Icons',
+		storybookNames: ['Show Icon Leading']
+	},
+	{
+		id: 'show-icon-trailing',
+		exampleName: 'Show Icon Trailing',
+		group: 'Icons',
+		storybookNames: ['Show Icon Trailing']
+	},
+	{
+		id: 'no-text',
+		exampleName: 'No Text',
+		group: 'Content',
+		storybookNames: ['Icon Only']
+	},
+	{
+		id: 'width',
+		exampleName: 'Width',
+		group: 'Layout',
+		storybookNames: ['Width']
+	},
+	{
+		id: 'multi-line-text',
+		exampleName: 'Multi-line Text With Line Breaks',
+		group: 'Content',
+		storybookNames: ['Multi-line Text']
+	}
+];

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,80 @@
+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';
+
+import {
+	buttonExamplesMeta,
+	type ButtonExampleIdentifier
+} from '../examples/button.examples.meta';
+
+const getExampleName = (id: ButtonExampleIdentifier): string =>
+	(buttonExamplesMeta.find((example) => example.id === id)?.exampleName ??
+		id) as string;
+
+export default function ButtonShowcase(props: PatternhubProps) {
+	return (
+		<ContainerWrapperShowcase
+			title="DBButton"
+			isPatternhub={props.isPatternhub}>
+			<LinkWrapperShowcase exampleName={getExampleName('density')}>
+				<CardWrapperShowcase>
+					<ButtonDensity />
+				</CardWrapperShowcase>
+			</LinkWrapperShowcase>
+			<LinkWrapperShowcase exampleName={getExampleName('variant')}>
+				<CardWrapperShowcase>
+					<ButtonVariant />
+				</CardWrapperShowcase>
+			</LinkWrapperShowcase>
+			<LinkWrapperShowcase exampleName={getExampleName('disabled')}>
+				<CardWrapperShowcase>
+					<ButtonDisabled />
+				</CardWrapperShowcase>
+			</LinkWrapperShowcase>
+			<LinkWrapperShowcase exampleName={getExampleName('size')}>
+				<CardWrapperShowcase>
+					<ButtonSize />
+				</CardWrapperShowcase>
+			</LinkWrapperShowcase>
+			<LinkWrapperShowcase
+				exampleName={getExampleName('show-icon-leading')}>
+				<CardWrapperShowcase>
+					<ButtonShowIconLeading />
+				</CardWrapperShowcase>
+			</LinkWrapperShowcase>
+			<LinkWrapperShowcase
+				exampleName={getExampleName('show-icon-trailing')}>
+				<CardWrapperShowcase>
+					<ButtonShowIconTrailing />
+				</CardWrapperShowcase>
+			</LinkWrapperShowcase>
+			<LinkWrapperShowcase exampleName={getExampleName('no-text')}>
+				<CardWrapperShowcase>
+					<ButtonNoText />
+				</CardWrapperShowcase>
+			</LinkWrapperShowcase>
+			<LinkWrapperShowcase exampleName={getExampleName('width')}>
+				<CardWrapperShowcase>
+					<ButtonWidth />
+				</CardWrapperShowcase>
+			</LinkWrapperShowcase>
+			<LinkWrapperShowcase
+				exampleName={getExampleName('multi-line-text')}>
+				<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;
+}