refactor: generate examples for showcases via mitosis

.config/.jscpd.json

@@ -67,7 +67,11 @@
 		"**/showcases/shared/*.json",
 		"**/showcases/vue-showcase/src/components/form/Form.vue",
 		"**/CHANGELOG.md",
-		"**/packages/components/src/shared/showcase/*-wrapper.showcase.lite.tsx"
+		"**/packages/components/src/shared/showcase/*-wrapper.showcase.lite.tsx",
+		"**/showcases/react-showcase/src/app.tsx",
+		"**/showcases/react-showcase/src/utils/navigation-item.tsx",
+		"**/playwright-report/**/*",
+		"**/*.example.lite.tsx"
 	],
 	"ignorePattern": ["<option value=\"test5\">Test5</option>"],
 	"absolute": true

.config/cspell.config.ts

@@ -28,10 +28,14 @@ export default defineConfig({
 		'storybooks/_storybook/src/welcome.mdx',
 		'playwright-report/**',
 		'showcases/shared/*.json',
+		'**/*.example.lite.tsx',
+		'**/*.showcase.lite.tsx',
+		'**/*.example.stories.*',
 		'**/test/**',
 		'packages/migration/**',
 		'output/**',
 		'showcases/patternhub/**',
+		'storybooks/angular-storybook/src/components/documentation.json',
 		// Examples
 		'showcases/react-showcase/src/components/form/index.tsx',
 		'showcases/patternhub/pages/foundations/densities/examples.tsx',

.github/workflows/01-build-storybooks.yml

@@ -65,9 +65,3 @@ jobs:
         with:
           name: db-ux-${{ inputs.storybook }}
           path: build-storybooks/${{ inputs.storybook }}
-
-      - name: 💀 Killing me softly
-        uses: ./.github/actions/cancel-workflow
-        if: failure()
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}

__snapshots__/custom-select/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBCustomSelect-should-have-same-aria-snapshot.yaml

@@ -1421,9 +1421,6 @@
   - text: Custom Search Filter
   - group:
     - article:
-      - text: Search
-      - searchbox "Search"
-      - status
       - radiogroup "id-10aasds4-Custom Search Filter":
         - list:
           - listitem:

__snapshots__/custom-select/showcase/chromium/should-have-same-aria-snapshot/DBCustomSelect-should-have-same-aria-snapshot.yaml

@@ -1421,9 +1421,6 @@
   - text: Custom Search Filter
   - group:
     - article:
-      - text: Search
-      - searchbox "Search"
-      - status
       - radiogroup "id-10aasds4-Custom Search Filter":
         - list:
           - listitem:

__snapshots__/custom-select/showcase/firefox/should-have-same-aria-snapshot/DBCustomSelect-should-have-same-aria-snapshot.yaml

@@ -1421,9 +1421,6 @@
   - text: Custom Search Filter
   - group:
     - article:
-      - text: Search
-      - searchbox "Search"
-      - status
       - radiogroup "id-10aasds4-Custom Search Filter":
         - list:
           - listitem:

__snapshots__/custom-select/showcase/mobile-chrome/should-have-same-aria-snapshot/DBCustomSelect-should-have-same-aria-snapshot.yaml

@@ -1488,9 +1488,6 @@
   - text: Custom Search Filter
   - group:
     - article:
-      - text: Search
-      - searchbox "Search"
-      - status
       - radiogroup "id-10aasds4-Custom Search Filter":
         - list:
           - listitem:

__snapshots__/custom-select/showcase/mobile-safari/should-have-same-aria-snapshot/DBCustomSelect-should-have-same-aria-snapshot.yaml

@@ -1488,9 +1488,6 @@
   - text: Custom Search Filter
   - group:
     - article:
-      - text: Search
-      - searchbox "Search"
-      - status
       - radiogroup "id-10aasds4-Custom Search Filter":
         - list:
           - listitem:

__snapshots__/custom-select/showcase/webkit/should-have-same-aria-snapshot/DBCustomSelect-should-have-same-aria-snapshot.yaml

@@ -1421,9 +1421,6 @@
   - text: Custom Search Filter
   - group:
     - article:
-      - text: Search
-      - searchbox "Search"
-      - status
       - radiogroup "id-10aasds4-Custom Search Filter":
         - list:
           - listitem:

__snapshots__/navigation-item/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBNavigationItem-should-have-same-aria-snapshot.yaml

@@ -48,7 +48,7 @@
   - link "Wrap"
   - list:
     - listitem:
-      - button "No Wrap (Default)"
+      - link "No Wrap (Default)"
   - list:
     - listitem:
       - button "This is a very long text that is broken into multiple lines."

__snapshots__/navigation-item/showcase/chromium/should-have-same-aria-snapshot/DBNavigationItem-should-have-same-aria-snapshot.yaml

@@ -48,7 +48,7 @@
   - link "Wrap"
   - list:
     - listitem:
-      - button "No Wrap (Default)"
+      - link "No Wrap (Default)"
   - list:
     - listitem:
       - button "This is a very long text that is broken into multiple lines."

__snapshots__/navigation-item/showcase/firefox/should-have-same-aria-snapshot/DBNavigationItem-should-have-same-aria-snapshot.yaml

@@ -48,7 +48,7 @@
   - link "Wrap"
   - list:
     - listitem:
-      - button "No Wrap (Default)"
+      - link "No Wrap (Default)"
   - list:
     - listitem:
       - button "This is a very long text that is broken into multiple lines."

__snapshots__/navigation-item/showcase/mobile-chrome/should-have-same-aria-snapshot/DBNavigationItem-should-have-same-aria-snapshot.yaml

@@ -48,7 +48,7 @@
   - link "Wrap"
   - list:
     - listitem:
-      - button "No Wrap (Default)"
+      - link "No Wrap (Default)"
   - list:
     - listitem:
       - button "This is a very long text that is broken into multiple lines."

__snapshots__/navigation-item/showcase/mobile-safari/should-have-same-aria-snapshot/DBNavigationItem-should-have-same-aria-snapshot.yaml

@@ -48,7 +48,7 @@
   - link "Wrap"
   - list:
     - listitem:
-      - button "No Wrap (Default)"
+      - link "No Wrap (Default)"
   - list:
     - listitem:
       - button "This is a very long text that is broken into multiple lines."

__snapshots__/navigation-item/showcase/webkit/should-have-same-aria-snapshot/DBNavigationItem-should-have-same-aria-snapshot.yaml

@@ -48,7 +48,7 @@
   - link "Wrap"
   - list:
     - listitem:
-      - button "No Wrap (Default)"
+      - link "No Wrap (Default)"
   - list:
     - listitem:
       - button "This is a very long text that is broken into multiple lines."

__snapshots__/tag/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBTag-should-have-same-aria-snapshot.yaml

@@ -7,11 +7,11 @@
   - link "Semantic"
   - text: (Default) Adaptive Critical Informational Neutral Successful Warning Adaptive Strong Critical Strong Informational Strong Neutral Strong Successful Strong Warning Strong
   - link "Behavior"
+  - text: (Default) Static Removable
+  - button "Remove"
+  - button "Interactive (Button)"
+  - link "Interactive (Link)"
   - group "Behavior":
-    - text: (Default) Static Removable
-    - button "Remove"
-    - button "Interactive (Button)"
-    - link "Interactive (Link)"
     - checkbox "Interactive (Checkbox)"
     - text: Interactive (Checkbox)
     - radio "Interactive (Radio)"
@@ -44,9 +44,9 @@
   - link "Overflow"
   - text: (Default) False True - lorem ipsum dolor
   - link "Example Strong"
+  - button "Interactive Strong Button with Icon"
+  - link "Interactive Strong Link with Icon"
   - group "Example Strong":
-    - button "Interactive Strong Button with Icon"
-    - link "Interactive Strong Link with Icon"
     - checkbox "Interactive Strong Checkbox with Icon"
     - text: Interactive Strong Checkbox with Icon
     - radio "Interactive Strong Radio 1 with Icon"

__snapshots__/tag/showcase/chromium/should-have-same-aria-snapshot/DBTag-should-have-same-aria-snapshot.yaml

@@ -7,11 +7,11 @@
   - link "Semantic"
   - text: (Default) Adaptive Critical Informational Neutral Successful Warning Adaptive Strong Critical Strong Informational Strong Neutral Strong Successful Strong Warning Strong
   - link "Behavior"
+  - text: (Default) Static Removable
+  - button "Remove"
+  - button "Interactive (Button)"
+  - link "Interactive (Link)"
   - group "Behavior":
-    - text: (Default) Static Removable
-    - button "Remove"
-    - button "Interactive (Button)"
-    - link "Interactive (Link)"
     - checkbox "Interactive (Checkbox)"
     - text: Interactive (Checkbox)
     - radio "Interactive (Radio)"
@@ -44,9 +44,9 @@
   - link "Overflow"
   - text: (Default) False True - lorem ipsum dolor
   - link "Example Strong"
+  - button "Interactive Strong Button with Icon"
+  - link "Interactive Strong Link with Icon"
   - group "Example Strong":
-    - button "Interactive Strong Button with Icon"
-    - link "Interactive Strong Link with Icon"
     - checkbox "Interactive Strong Checkbox with Icon"
     - text: Interactive Strong Checkbox with Icon
     - radio "Interactive Strong Radio 1 with Icon"

__snapshots__/tag/showcase/firefox/should-have-same-aria-snapshot/DBTag-should-have-same-aria-snapshot.yaml

@@ -7,11 +7,11 @@
   - link "Semantic"
   - text: (Default) Adaptive Critical Informational Neutral Successful Warning Adaptive Strong Critical Strong Informational Strong Neutral Strong Successful Strong Warning Strong
   - link "Behavior"
+  - text: (Default) Static Removable
+  - button "Remove"
+  - button "Interactive (Button)"
+  - link "Interactive (Link)"
   - group "Behavior":
-    - text: (Default) Static Removable
-    - button "Remove"
-    - button "Interactive (Button)"
-    - link "Interactive (Link)"
     - checkbox "Interactive (Checkbox)"
     - text: Interactive (Checkbox)
     - radio "Interactive (Radio)"
@@ -44,9 +44,9 @@
   - link "Overflow"
   - text: (Default) False True - lorem ipsum dolor
   - link "Example Strong"
+  - button "Interactive Strong Button with Icon"
+  - link "Interactive Strong Link with Icon"
   - group "Example Strong":
-    - button "Interactive Strong Button with Icon"
-    - link "Interactive Strong Link with Icon"
     - checkbox "Interactive Strong Checkbox with Icon"
     - text: Interactive Strong Checkbox with Icon
     - radio "Interactive Strong Radio 1 with Icon"

__snapshots__/tag/showcase/mobile-chrome/should-have-same-aria-snapshot/DBTag-should-have-same-aria-snapshot.yaml

@@ -7,11 +7,11 @@
   - link "Semantic"
   - text: (Default) Adaptive Critical Informational Neutral Successful Warning Adaptive Strong Critical Strong Informational Strong Neutral Strong Successful Strong Warning Strong
   - link "Behavior"
+  - text: (Default) Static Removable
+  - button "Remove"
+  - button "Interactive (Button)"
+  - link "Interactive (Link)"
   - group "Behavior":
-    - text: (Default) Static Removable
-    - button "Remove"
-    - button "Interactive (Button)"
-    - link "Interactive (Link)"
     - checkbox "Interactive (Checkbox)"
     - text: Interactive (Checkbox)
     - radio "Interactive (Radio)"
@@ -44,9 +44,9 @@
   - link "Overflow"
   - text: (Default) False True - lorem ipsum dolor
   - link "Example Strong"
+  - button "Interactive Strong Button with Icon"
+  - link "Interactive Strong Link with Icon"
   - group "Example Strong":
-    - button "Interactive Strong Button with Icon"
-    - link "Interactive Strong Link with Icon"
     - checkbox "Interactive Strong Checkbox with Icon"
     - text: Interactive Strong Checkbox with Icon
     - radio "Interactive Strong Radio 1 with Icon"

__snapshots__/tag/showcase/mobile-safari/should-have-same-aria-snapshot/DBTag-should-have-same-aria-snapshot.yaml

@@ -7,11 +7,11 @@
   - link "Semantic"
   - text: (Default) Adaptive Critical Informational Neutral Successful Warning Adaptive Strong Critical Strong Informational Strong Neutral Strong Successful Strong Warning Strong
   - link "Behavior"
+  - text: (Default) Static Removable
+  - button "Remove"
+  - button "Interactive (Button)"
+  - link "Interactive (Link)"
   - group "Behavior":
-    - text: (Default) Static Removable
-    - button "Remove"
-    - button "Interactive (Button)"
-    - link "Interactive (Link)"
     - checkbox "Interactive (Checkbox)"
     - text: Interactive (Checkbox)
     - radio "Interactive (Radio)"
@@ -44,9 +44,9 @@
   - link "Overflow"
   - text: (Default) False True - lorem ipsum dolor
   - link "Example Strong"
+  - button "Interactive Strong Button with Icon"
+  - link "Interactive Strong Link with Icon"
   - group "Example Strong":
-    - button "Interactive Strong Button with Icon"
-    - link "Interactive Strong Link with Icon"
     - checkbox "Interactive Strong Checkbox with Icon"
     - text: Interactive Strong Checkbox with Icon
     - radio "Interactive Strong Radio 1 with Icon"

__snapshots__/tag/showcase/webkit/should-have-same-aria-snapshot/DBTag-should-have-same-aria-snapshot.yaml

@@ -7,11 +7,11 @@
   - link "Semantic"
   - text: (Default) Adaptive Critical Informational Neutral Successful Warning Adaptive Strong Critical Strong Informational Strong Neutral Strong Successful Strong Warning Strong
   - link "Behavior"
+  - text: (Default) Static Removable
+  - button "Remove"
+  - button "Interactive (Button)"
+  - link "Interactive (Link)"
   - group "Behavior":
-    - text: (Default) Static Removable
-    - button "Remove"
-    - button "Interactive (Button)"
-    - link "Interactive (Link)"
     - checkbox "Interactive (Checkbox)"
     - text: Interactive (Checkbox)
     - radio "Interactive (Radio)"
@@ -44,9 +44,9 @@
   - link "Overflow"
   - text: (Default) False True - lorem ipsum dolor
   - link "Example Strong"
+  - button "Interactive Strong Button with Icon"
+  - link "Interactive Strong Link with Icon"
   - group "Example Strong":
-    - button "Interactive Strong Button with Icon"
-    - link "Interactive Strong Link with Icon"
     - checkbox "Interactive Strong Checkbox with Icon"
     - text: Interactive Strong Checkbox with Icon
     - radio "Interactive Strong Radio 1 with Icon"

packages/components/configs/angular/index.cjs

@@ -1,4 +1,8 @@
 const onClickPlugin = require('../plugins/on-click.cjs');
+const angularPlugin = require('../plugins/angular/index.cjs');
+const angularSlotsPlugin = require('../plugins/angular/slots.cjs');
+const classNamePlugin = require('../plugins/angular/className.cjs');
+const attributePassingPlugin = require('../plugins/attribute-passing/index.cjs');
 
 /**
  * @type {import('@builder.io/mitosis').ToAngularOptions}
@@ -10,5 +14,11 @@ module.exports = {
 		customRef: '_ref'
 	},
 	api: 'signals',
-	plugins: [onClickPlugin]
+	plugins: [
+		attributePassingPlugin,
+		angularSlotsPlugin,
+		classNamePlugin,
+		onClickPlugin,
+		angularPlugin
+	]
 };

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

@@ -4,7 +4,38 @@ const storyBookPlugin = require('./plugins/storybook/storybook-plugin.cjs');
  * @type {import('@builder.io/mitosis').MitosisConfig}
  */
 module.exports = {
-	files: ['src/**/*.example.lite.tsx'],
+	// TODO: use all examples if we fix the storybook plugin
+	files: [
+		// 'src/components/accordion/examples/*.example.lite.tsx',
+		'src/components/accordion-item/examples/*.example.lite.tsx',
+		// 'src/components/badge/examples/*.example.lite.tsx',
+		// 'src/components/brand/examples/*.example.lite.tsx',
+		'src/components/button/examples/*.example.lite.tsx',
+		'src/components/card/examples/*.example.lite.tsx',
+		// 'src/components/checkbox/examples/*.example.lite.tsx',
+		// 'src/components/custom-select/examples/*.example.lite.tsx',
+		// 'src/components/divider/examples/*.example.lite.tsx',
+		// 'src/components/drawer/examples/*.example.lite.tsx',
+		// 'src/components/header/examples/*.example.lite.tsx',
+		// 'src/components/icon/examples/*.example.lite.tsx',
+		'src/components/infotext/examples/*.example.lite.tsx',
+		// 'src/components/input/examples/*.example.lite.tsx',
+		// 'src/components/link/examples/*.example.lite.tsx',
+		// 'src/components/navigation/examples/*.example.lite.tsx',
+		// 'src/components/navigation-item/examples/*.example.lite.tsx',
+		// 'src/components/notification/examples/*.example.lite.tsx',
+		// 'src/components/popover/examples/*.example.lite.tsx',
+		// 'src/components/radio/examples/*.example.lite.tsx',
+		// 'src/components/section/examples/*.example.lite.tsx',
+		'src/components/select/examples/*.example.lite.tsx',
+		// 'src/components/stack/examples/*.example.lite.tsx',
+		// 'src/components/switch/examples/*.example.lite.tsx',
+		'src/components/tab-item/examples/*.example.lite.tsx'
+		// 'src/components/tabs/examples/*.example.lite.tsx',
+		// 'src/components/tag/examples/*.example.lite.tsx',
+		// 'src/components/textarea/examples/*.example.lite.tsx',
+		// 'src/components/tooltip/examples/*.example.lite.tsx'
+	],
 	targets: ['angular', 'react', 'vue'],
 	dest: '../../storybooks',
 	getTargetPath: ({ target }) => {