feat: add plugin for button showcase

Author: michaelmkraus

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']
+	}
 ]);

packages/components/configs/mitosis.showcase.config.cjs

@@ -14,7 +14,7 @@ module.exports = {
 			api: 'signals'
 		},
 		vue: {
-			api: 'composition'
+			api: 'options'
 		}
 	},
 	commonOptions: {

showcases/next-showcase/tsconfig.json

@@ -11,7 +11,7 @@
 		"moduleResolution": "node",
 		"resolveJsonModule": true,
 		"isolatedModules": true,
-		"jsx": "preserve",
+		"jsx": "react-jsx",
 		"strictNullChecks": true,
 		"downlevelIteration": true,
 		"target": "ES2017",

showcases/patternhub/data/routes.tsx

@@ -1,5 +1,4 @@
-import ButtonShowcase from '@components/components/button/showcase/button.showcase';
-import { type ReactElement } from 'react';
+import type { ReactElement } from 'react';
 import AccordionComponent from '../../react-showcase/src/components/accordion';
 import AccordionItemComponent from '../../react-showcase/src/components/accordion-item';
 import BadgeComponent from '../../react-showcase/src/components/badge';
@@ -27,6 +26,7 @@ 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 { getShowcasePlugin } from '../../shared/showcase-plugins';
 import Components from './components.json';
 
 export type NavigationItem = {
@@ -41,7 +41,9 @@ export type NavigationItem = {
 const nameComponentMap = {
 	'custom-select': <MutliSelectComponent />,
 	stack: <StackComponent />,
-	button: <ButtonShowcase isPatternhub />,
+	button: getShowcasePlugin('button')!.getShowcaseComponent({
+		host: 'patternhub'
+	}),
 	link: <LinkComponent />,
 	brand: <BrandComponent />,
 	// Icon: <IconComponent />,

showcases/patternhub/tsconfig.json

@@ -18,6 +18,7 @@
 		"noUnusedParameters": false,
 		"jsx": "react-jsx",
 		"incremental": true,
+		"baseUrl": ".",
 		"paths": {
 			"@components": ["../../output/react/src"],
 			"@components/src/*": ["../../output/react/src/*"],

showcases/shared/showcase-plugins.tsx

@@ -0,0 +1,49 @@
+import ButtonShowcase from '@components/components/button/showcase/button.showcase';
+import { type ReactElement } from 'react';
+
+export type ShowcaseId = 'button'; // Add later 'button' | 'link' | 'input' | ...
+
+export type ShowcaseHost = 'patternhub' | 'react-showcase' | 'storybook';
+
+export type ShowcasePluginContext = {
+	host: ShowcaseHost;
+};
+
+/**
+ * Basic interface for a showcase plugin.
+ */
+export type ShowcasePlugin = {
+	id: ShowcaseId;
+	label: string;
+	getShowcaseComponent: (
+		context: ShowcasePluginContext
+	) => ReactElement | undefined;
+};
+
+/**
+ * Showcase plugin for the Button component.
+ */
+export const buttonShowcasePlugin: ShowcasePlugin = {
+	id: 'button',
+	label: 'Button',
+	getShowcaseComponent({ host }) {
+		if (host === 'patternhub') {
+			return <ButtonShowcase isPatternhub />;
+		}
+
+		return <ButtonShowcase />;
+	}
+};
+
+/**
+ * Central registry of all showcase plugins.
+ */
+export const showcasePlugins: ShowcasePlugin[] = [buttonShowcasePlugin]; // Add more plugins here later
+
+/**
+ * Get a showcase plugin by its ID.
+ * @param id - The ID of the showcase plugin.
+ * @returns The showcase plugin if found, otherwise undefined.
+ */
+export const getShowcasePlugin = (id: ShowcaseId): ShowcasePlugin | undefined =>
+	showcasePlugins.find((plugin) => plugin.id === id);