chore: update hygen templates for new component generation (#3229)

db-ui · Oct 1, 2024 · 898e54c · 898e54c
1 parent 2700279
commit 898e54c
Show file tree

Hide file tree

Showing 9 changed files with 26 additions and 12 deletions.
diff --git a/packages/components/_templates/mitosis/new/component/components.ejs.t b/packages/components/_templates/mitosis/new/component/components.ejs.t
@@ -1,6 +1,6 @@
 ---
 inject: true
-to: scripts/post-build/components.js
+to: scripts/post-build/components.ts
 after: getComponents
 ---
   {

diff --git a/packages/components/_templates/mitosis/new/component/db-ui-components-angular.ejs.t b/packages/components/_templates/mitosis/new/component/db-ui-components-angular.ejs.t
@@ -1,7 +1,6 @@
 ---
 inject: true
-to: src/styles/db-ui-components.scss
+to: src/styles/_custom-elements.scss
 after: angular-workaround
 ---
-db<%= name %>,
 db-<%= name %>,
diff --git a/packages/components/_templates/mitosis/new/component/tsx.ejs.t b/packages/components/_templates/mitosis/new/component/tsx.ejs.t
@@ -1,7 +1,7 @@
 ---
 to: src/components/<%= name %>/<%= name %>.lite.tsx
 ---
-import { Show, useMetadata, useStore } from "@builder.io/mitosis";
+import { Show, useMetadata, useStore, useRef } from "@builder.io/mitosis";
 import { DB<%= h.changeCase.pascal(name) %>State, DB<%= h.changeCase.pascal(name) %>Props } from "./model";
 import { cls } from "../../utils";
 <% if(formValue!=="no"){   -%>

diff --git a/packages/components/_templates/mitosis/new/readmes/readme-angular.ejs.t b/packages/components/_templates/mitosis/new/readmes/readme-angular.ejs.t
@@ -9,11 +9,12 @@ For general installation and configuration take a look at the [ngx-components](h
 
 ```ts app.component.ts
 // app.component.ts
-import { DB<%= h.changeCase.pascal(name) %>Module } from '@db-ui/ngx-components';
+import { DB<%= h.changeCase.pascal(name) %> } from '@db-ui/ngx-components';
 
 @Component({
   // ...
-  imports: [..., DB<%= h.changeCase.pascal(name) %>Module],
+  imports: [..., DB<%= h.changeCase.pascal(name) %>],
+  standalone: true
   // ...
 })
 ```

diff --git a/packages/components/_templates/mitosis/new/showcases/patternhub-comp-parser-import.ejs.t b/packages/components/_templates/mitosis/new/showcases/patternhub-comp-parser-import.ejs.t
@@ -1,6 +1,6 @@
 ---
 inject: true
 to: "<%= showcases ? `../../showcases/patternhub/components/component-parser/index.tsx` : null %>"
-after: from 'react'
+before: } from '../../../../output/react/src/index';
 ---
-import DB<%= h.changeCase.pascal(name) %> from '../src/components/<%= name %>/<%= name %>';
+,DB<%= h.changeCase.pascal(name) %>
diff --git a/...osis/new/showcases/patternhub-route.ejs.t → ...new/showcases/patternhub-components.ejs.t b/...osis/new/showcases/patternhub-route.ejs.t → ...new/showcases/patternhub-components.ejs.t
@@ -4,6 +4,6 @@ to: "<%= showcases ? `../../showcases/patternhub/data/components.json` : null %>
 before: \[
 ---
 			{
-				label: 'TODO: Add to specific category; DB<%= h.changeCase.pascal(name) %>',
-				name: '<%= name %>',
+				"label": "TODO: Add to specific category; DB<%= h.changeCase.pascal(name) %>",
+				"name": "<%= name %>",
 			},
diff --git a/packages/components/_templates/mitosis/new/showcases/patternhub-routes-imports.ejs.t b/packages/components/_templates/mitosis/new/showcases/patternhub-routes-imports.ejs.t
@@ -0,0 +1,7 @@
+---
+inject: true
+to: "<%= showcases ? `../../showcases/patternhub/data/routes.tsx` : null %>"
+before: import Components from './components.json';
+---
+import * as <%= h.changeCase.pascal(name) %>Code from '../components/code-docs/<%= name %>';
+import <%= h.changeCase.pascal(name) %>Component from '../../react-showcase/src/components/<%= name %>';
diff --git a/packages/components/_templates/mitosis/new/showcases/patternhub-routes.ejs.t b/packages/components/_templates/mitosis/new/showcases/patternhub-routes.ejs.t
@@ -0,0 +1,6 @@
+---
+inject: true
+to: "<%= showcases ? `../../showcases/patternhub/data/routes.tsx` : null %>"
+after: const nameComponentMap = {
+---
+	'<%= name %>': <<%= h.changeCase.pascal(name) %>Component slotCode={<%= h.changeCase.pascal(name) %>Code} />,
diff --git a/packages/components/_templates/mitosis/new/showcases/react-showcase-component.ejs.t b/packages/components/_templates/mitosis/new/showcases/react-showcase-component.ejs.t
@@ -2,18 +2,19 @@
 to: "<%= showcases ? `../../showcases/react-showcase/src/components/${name}/index.tsx` : null %>"
 ---
 import { DB<%= h.changeCase.pascal(name) %> } from '../../../../../output/react/src';
-import DefaultComponent from '../index';
+import DefaultComponent from '../default-component';
 import defaultComponentVariants from '../../../../shared/<%= name %>.json';
 import type { DB<%= h.changeCase.pascal(name) %>Props } from '../../../../../output/react/src/components/<%= name %>/model';
 import { getVariants } from '../data';
+import type { BaseComponentProps } from "../base-component-data";
 
 const get<%= h.changeCase.pascal(name) %> = ({ children }: DB<%= h.changeCase.pascal(name) %>Props) => (
 	<DB<%= h.changeCase.pascal(name) %>>
 		{children}
 	</DB<%= h.changeCase.pascal(name) %>>
 );
 
-const <%= h.changeCase.pascal(name) %>Component = () => {
+const <%= h.changeCase.pascal(name) %>Component = (props: BaseComponentProps) => {
 	return (
 		<DefaultComponent
 			title="DB<%= h.changeCase.pascal(name) %>"