Merge pull request #50 from Kyutech-C3/chore/components-template

Chore/components template

_templates/generator/model/component.ejs.t

@@ -1,19 +1,22 @@
 ---
 to: "<%=  `src/components/model/${name}/index.tsx` %>"
 ---
-<% if (have_hooks) { %>import { use<%= name %> } from './hooks';<% } %>
-<% gen_files.forEach(file=>{%>import { <%= name %><%= file %>Presentation  } from './presentations/<%= file.toLowerCase() %>';
+import type { FC } from 'react';
+import { Suspense } from 'react';
+
+import { <%= name %>Presentation } from './presentations';
+<% gen_files.filter((file)=>file!="Empty").forEach(file=>{%>import { <%= name %><%= file %>Presentation } from './presentations/<%= file.toLowerCase() %>';
 <%})%>
+import { ErrorBoundary } from '@/libs/ErrorBoundary';
+
 <% if (have_props) { %>type Props = {};<% } %>
 
-export const <%= name %>:React.FC<% if (have_props) { %><Props><% } %> = (<% if (have_props) { %>{}<% } %>) => {
-  <% if (have_hooks) { %>const {} = use<%= name %>();<% } %>
-  return (
-    <>
-      this is <%= name %> component
-      <% gen_files.forEach(file=>{%><<%= name %><%= file %>Presentation />
-    <%})%></>
-  );
-};
+export const <%= name %>: FC<% if (have_props) { %><Props><% } %> = (<% if (have_props) { %>{}<% } %>) => (
+  <% if (gen_files.includes("Error")) { %><ErrorBoundary fallback={<<%= name %>ErrorPresentation />}><% } %>
+    <% if (gen_files.includes("Loading")) { %><Suspense fallback={<<%= name %>LoadingPresentation />}><% } %>
+      <<%= name %>Presentation />
+    <% if (gen_files.includes("Loading")) { %></Suspense><% } %>
+  <% if (gen_files.includes("Error")) { %></ErrorBoundary><% } %>
+);
 
 

_templates/generator/model/empty.ejs.t

@@ -1,6 +1,8 @@
 ---
 to: "<%= gen_files.includes('Empty') ? `src/components/model/${name}/presentations/empty.tsx` : null %>"
 ---
-export const <%= name %>EmptyPresentation:React.FC = () => {
+import type { FC } from 'react';
+
+export const <%= name %>EmptyPresentation:FC = () => {
   return <>this is <%= name %> empty presentation</>;
 };

_templates/generator/model/error.ejs.t

@@ -1,6 +1,8 @@
 ---
 to: "<%= gen_files.includes('Error') ? `src/components/model/${name}/presentations/error.tsx` : null %>"
 ---
-export const <%= name %>ErrorPresentation:React.FC = () => {
+import type { FC } from 'react';
+
+export const <%= name %>ErrorPresentation:FC = () => {
   return <>this is <%= name %> error presentation</>;
 };

_templates/generator/model/hooks.ejs.t

@@ -7,9 +7,11 @@ import { useState } from 'react';
 type IUse<%= name %> = {
   state: string;
   setState: Dispatch<SetStateAction<string>>;
+  <% if (have_hooks) { %>isEmpty: boolean;<%} %>
 }
 
 export const use<%= name %> = ():IUse<%= name %> => {
   const [state, setState] = useState("");
-  return {state,setState}
+  <% if(gen_files.includes("Empty")){ %>const isEmpty = true;<% }%>
+  return {state,setState<% if(gen_files.includes("Empty")){ %>, isEmpty <% }%>}
 };

_templates/generator/model/index.ejs.t

@@ -1,6 +1,14 @@
 ---
 to: "<%= `src/components/model/${name}/presentations/index.tsx` %>"
 ---
-export const <%= name %>Presentation:React.FC = () => {
+import type { FC } from 'react';
+
+<% if (have_hooks) { %>import { use<%= name %> } from '../hooks';<% } %>
+
+export const <%= name %>Presentation: FC = () => {
+  <% if (have_hooks) { %>const {<% if(gen_files.includes("Empty")){ %> isEmpty <% }%>} = use<%= name %>();<% } %>
+  <% if (have_hooks && gen_files.includes("Empty")) { %>if (isEmpty){
+    return <<%= name %>Presentation />;
+  }<%} %>
   return <div>this is <%= name %> presentation</div>;
 };

_templates/generator/model/loading.ejs.t

@@ -1,6 +1,8 @@
 ---
 to: "<%= gen_files.includes('Loading') ? `src/components/model/${name}/presentations/loading.tsx` : null %>"
 ---
-export const <%= name %>LoadingPresentation:React.FC = () => {
+import type { FC } from 'react';
+
+export const <%= name %>LoadingPresentation:FC = () => {
   return <>this is <%= name %> component</>;
 };

_templates/generator/model/test.ejs.t

@@ -6,7 +6,7 @@ import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import { <%= name %> } from ".";
 
-describe("model/<%= name %>のテスト", () => {
+describe("model/<%= name %>", () => {
   it("title is exist", () => {
     render(<<%= name %> />);
 

_templates/generator/page/index.ejs.t

@@ -1,8 +1,10 @@
 ---
 to: "<%= `src/components/page/${name}/index.tsx` %>"
 ---
+import type { FC } from 'react';
+
 <% used_models.forEach(use_model=>{%>import { <%= use_model %> } from '@/components/model/<%= use_model %>';
 <%})%>
-export const Screen:React.FC = () => {
+export const Screen:FC = () => {
   return <>this is page of <%= name %> </>;
 };

_templates/generator/page/page.ejs.t

@@ -1,8 +1,10 @@
 ---
 to: "<%= `src/app/${url}/page.tsx` %>"
 ---
+import type { FC } from 'react';
+
 import { Screen } from '@/components/page/<%= name %>'
 
-const <%= name %>:React.FC = () => <Screen />;
+const <%= name %>:FC = () => <Screen />;
 
 export default <%= name %>;

_templates/generator/ui/index.ejs.t

@@ -1,8 +1,10 @@
 ---
 to: "<%= `src/components/ui/${name}/index.tsx` %>"
 ---
+import type { FC } from 'react';
+
 type Props = {};
 
-export const <%= name %>:React.FC<Props> = ({}) => {
+export const <%= name %>:FC<Props> = ({}) => {
   return <>this is ui of <%= name %> </>;
 };

_templates/generator/ui/index.test.t

@@ -0,0 +1,17 @@
+---
+to: src/components/ui/<%= name %>/index.test.tsx
+---
+import { render, screen } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+import { <%= name %> } from ".";
+
+describe("ui/<%= name %>", () => {
+  it("title is exist", () => {
+    render(<<%= name %> />);
+
+    const title = screen.getByText(/this is <%= name %> component/);
+
+    expect(title).toBeInTheDocument();
+  });
+});

src/libs/ErrorBoundary/index.tsx

@@ -0,0 +1 @@
+export { ErrorBoundary } from 'react-error-boundary';