Skip to content

Commit 5edfa65

Browse files
29Hido29Hido
committed
feat: new version for react native generator
1 parent cb47c8b commit 5edfa65

21 files changed

+1753
-868
lines changed

‎src/generators.js

+3
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import NextGenerator from "./generators/NextGenerator.js";
33
import NuxtGenerator from "./generators/NuxtGenerator.js";
44
import ReactGenerator from "./generators/ReactGenerator.js";
55
import ReactNativeGenerator from "./generators/ReactNativeGenerator.js";
6+
import ReactNativeGeneratorV2 from "./generators/ReactNativeGeneratorV2.js";
67
import TypescriptInterfaceGenerator from "./generators/TypescriptInterfaceGenerator.js";
78
import VueGenerator from "./generators/VueGenerator.js";
89
import VuetifyGenerator from "./generators/VuetifyGenerator.js";
@@ -28,6 +29,8 @@ export default async function generators(generator = "react") {
2829
return wrap(ReactGenerator);
2930
case "react-native":
3031
return wrap(ReactNativeGenerator);
32+
case "react-native-v2":
33+
return wrap(ReactNativeGeneratorV2);
3134
case "typescript":
3235
return wrap(TypescriptInterfaceGenerator);
3336
case "vue":

‎src/generators/ReactNativeGeneratorV2.js

+188
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
import chalk from "chalk";
2+
import handlebars from "handlebars";
3+
import BaseGenerator from "./BaseGenerator.js";
4+
import hbhComparison from "handlebars-helpers/lib/comparison.js";
5+
6+
export default class extends BaseGenerator {
7+
constructor(params) {
8+
super(params);
9+
10+
handlebars.registerHelper("ifNotResource", function (item, options) {
11+
if (item === null) {
12+
return options.fn(this);
13+
}
14+
return options.inverse(this);
15+
});
16+
17+
this.registerTemplates(`react-native-v2/`, [
18+
"app/(tabs)/foos.tsx",
19+
"app/_layout.tsx.dist",
20+
"lib/hooks.ts",
21+
"lib/store.ts",
22+
"lib/types/ApiResource.ts",
23+
"lib/types/HydraView.ts",
24+
"lib/types/Logs.ts",
25+
"lib/types/foo.ts",
26+
"lib/factory/logFactory.ts",
27+
"lib/slices/fooSlice.ts",
28+
"lib/api/fooApi.ts",
29+
"components/Main.tsx",
30+
"components/Navigation.tsx",
31+
"components/StoreProvider.tsx",
32+
"components/foo/CreateEditModal.tsx",
33+
"components/foo/Form.tsx",
34+
"components/foo/LogsRenderer.tsx",
35+
]);
36+
37+
handlebars.registerHelper("compare", hbhComparison.compare);
38+
}
39+
40+
help(resource) {
41+
const titleLc = resource.title.toLowerCase();
42+
43+
console.log(
44+
'Code for the "%s" resource type has been generated!',
45+
resource.title
46+
);
47+
48+
console.log("You must now configure the lib/store.ts");
49+
console.log(
50+
chalk.green(`
51+
// imports for ${titleLc}
52+
import ${titleLc}Slice from './slices/${titleLc}Slice';
53+
import { ${titleLc}Api } from './api/${titleLc}Api';
54+
55+
// reducer for ${titleLc}
56+
reducer: {
57+
...
58+
${titleLc}: ${titleLc}Slice,
59+
[${titleLc}Api.reducerPath]: ${titleLc}Api.reducer,
60+
}
61+
62+
// middleware for ${titleLc}
63+
getDefaultMiddleware().concat(..., ${titleLc}Api.middleware)
64+
`)
65+
);
66+
67+
console.log(
68+
"You should replace app/_layout.tsx by the generated one and add the following route:"
69+
);
70+
console.log(
71+
chalk.green(`
72+
<Tabs.Screen
73+
name="(tabs)/${titleLc}s"
74+
options={options.tabs.${titleLc}}
75+
/>
76+
77+
tabs: {
78+
...
79+
${titleLc}: {
80+
title: '${titleLc}',
81+
headerShown: false,
82+
tabBarIcon: ({ color }) => <TabBarIcon name="home" color={color} />,
83+
},
84+
}
85+
`)
86+
);
87+
}
88+
89+
generate(api, resource, dir) {
90+
const lc = resource.title.toLowerCase();
91+
const titleUcFirst =
92+
resource.title.charAt(0).toUpperCase() + resource.title.slice(1);
93+
const fields = this.parseFields(resource);
94+
95+
const context = {
96+
title: resource.title,
97+
name: resource.name,
98+
lc,
99+
uc: resource.title.toUpperCase(),
100+
fields,
101+
formFields: this.buildFields(fields),
102+
hydraPrefix: this.hydraPrefix,
103+
ucf: titleUcFirst,
104+
};
105+
106+
// Create directories
107+
// These directories may already exist
108+
[
109+
`${dir}/app/(tabs)`,
110+
`${dir}/config`,
111+
`${dir}/components`,
112+
`${dir}/components/${lc}`,
113+
`${dir}/lib`,
114+
`${dir}/lib/api`,
115+
`${dir}/lib/factory`,
116+
`${dir}/lib/slices`,
117+
`${dir}/lib/types`,
118+
].forEach((dir) => this.createDir(dir, false));
119+
120+
// static files
121+
[
122+
"lib/hooks.ts",
123+
"lib/store.ts",
124+
"lib/types/ApiResource.ts",
125+
"lib/types/HydraView.ts",
126+
"lib/types/Logs.ts",
127+
"lib/factory/logFactory.ts",
128+
"components/Main.tsx",
129+
"components/Navigation.tsx",
130+
"components/StoreProvider.tsx",
131+
].forEach((file) => this.createFile(file, `${dir}/${file}`));
132+
133+
// templated files ucFirst
134+
["lib/types/%s.ts"].forEach((pattern) =>
135+
this.createFileFromPattern(pattern, dir, [titleUcFirst], context)
136+
);
137+
138+
// templated files lc
139+
[
140+
"app/(tabs)/%ss.tsx",
141+
"app/_layout.tsx.dist",
142+
"lib/slices/%sSlice.ts",
143+
"lib/api/%sApi.ts",
144+
"components/%s/CreateEditModal.tsx",
145+
"components/%s/Form.tsx",
146+
"components/%s/LogsRenderer.tsx",
147+
].forEach((pattern) =>
148+
this.createFileFromPattern(pattern, dir, [lc], context)
149+
);
150+
151+
this.createEntrypoint(api.entrypoint, `${dir}/config/entrypoint.js`);
152+
}
153+
154+
getDescription(field) {
155+
return field.description ? field.description.replace(/"/g, "'") : "";
156+
}
157+
158+
parseFields(resource) {
159+
const fields = [
160+
...resource.writableFields,
161+
...resource.readableFields,
162+
].reduce((list, field) => {
163+
if (list[field.name]) {
164+
return list;
165+
}
166+
167+
const isReferences = Boolean(
168+
field.reference && field.maxCardinality !== 1
169+
);
170+
const isEmbeddeds = Boolean(field.embedded && field.maxCardinality !== 1);
171+
172+
return {
173+
...list,
174+
[field.name]: {
175+
...field,
176+
type: this.getType(field),
177+
description: this.getDescription(field),
178+
readonly: false,
179+
isReferences,
180+
isEmbeddeds,
181+
isRelations: isEmbeddeds || isReferences,
182+
},
183+
};
184+
}, {});
185+
186+
return Object.values(fields);
187+
}
188+
}

‎src/generators/ReactNativeGeneratorV2.test.js

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { Api, Resource, Field } from "@api-platform/api-doc-parser";
2+
import path from "path";
3+
import { fileURLToPath } from "url";
4+
import fs from "fs";
5+
import tmp from "tmp";
6+
import ReactNativeGeneratorV2 from "./ReactNativeGeneratorV2.js";
7+
8+
const dirname = path.dirname(fileURLToPath(import.meta.url));
9+
10+
test("Generate a React Native V2 app", () => {
11+
const generator = new ReactNativeGeneratorV2({
12+
hydraPrefix: "hydra:",
13+
templateDirectory: `${dirname}/../../templates`,
14+
});
15+
const tmpobj = tmp.dirSync({ unsafeCleanup: true });
16+
17+
const fields = [
18+
new Field("bar", {
19+
id: "http://schema.org/url",
20+
range: "http://www.w3.org/2001/XMLSchema#string",
21+
reference: null,
22+
required: true,
23+
description: "An URL",
24+
}),
25+
];
26+
const resource = new Resource("abc", "http://example.com/foos", {
27+
id: "abc",
28+
title: "abc",
29+
readableFields: fields,
30+
writableFields: fields,
31+
});
32+
const api = new Api("http://example.com", {
33+
entrypoint: "http://example.com:8080",
34+
title: "My API",
35+
resources: [resource],
36+
});
37+
generator.generate(api, resource, tmpobj.name);
38+
39+
[
40+
"/lib/hooks.ts",
41+
"/lib/store.ts",
42+
"/lib/types/ApiResource.ts",
43+
"/lib/types/HydraView.ts",
44+
"/lib/types/Logs.ts",
45+
"/lib/factory/logFactory.ts",
46+
"/components/Main.tsx",
47+
"/components/Navigation.tsx",
48+
"/components/StoreProvider.tsx",
49+
"/app/_layout.tsx.dist",
50+
51+
"/app/(tabs)/abcs.tsx",
52+
"/lib/slices/abcSlice.ts",
53+
"/lib/api/abcApi.ts",
54+
"/components/abc/CreateEditModal.tsx",
55+
"/components/abc/Form.tsx",
56+
"/components/abc/LogsRenderer.tsx",
57+
].forEach((file) => expect(fs.existsSync(tmpobj.name + file)).toBe(true));
58+
59+
tmpobj.removeCallback();
60+
});

‎templates/react-native-v2/app/(tabs)/foos.tsx

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import Main from "@/components/Main";
2+
import Navigation from "@/components/Navigation";
3+
import CreateEditModal from "@/components/{{{lc}}}/CreateEditModal";
4+
import LogsRenderer from "@/components/{{{lc}}}/LogsRenderer";
5+
import { useLazyGetAllQuery } from "@/lib/api/{{{lc}}}Api";
6+
import { useAppDispatch, useAppSelector } from "@/lib/hooks";
7+
import { setCurrentData, setData, setModalIsEdit, setModalIsVisible, setPage, setView } from "@/lib/slices/{{{lc}}}Slice";
8+
import {{{ucf}}} from "@/lib/types/{{{ucf}}}";
9+
import { useLocalSearchParams } from "expo-router";
10+
import { useEffect } from "react";
11+
import { Pressable, ScrollView, Text, View } from "react-native";
12+
13+
export default function {{{ucf}}}s() {
14+
const datas = useAppSelector(state => state.{{lc}}.data);
15+
const view = useAppSelector(state => state.{{{lc}}}.view);
16+
const { page = '1' } = useLocalSearchParams<{ page: string }>();
17+
18+
const dispatch = useAppDispatch();
19+
const [getAll] = useLazyGetAllQuery();
20+
21+
const toggleEditModal = (data: {{{ucf}}}) => {
22+
dispatch(setCurrentData(data));
23+
dispatch(setModalIsVisible(true));
24+
dispatch(setModalIsEdit(true));
25+
};
26+
27+
const toggleCreateModal = () => {
28+
dispatch(setModalIsVisible(true));
29+
dispatch(setModalIsEdit(false));
30+
}
31+
32+
useEffect(() => {
33+
const intPage = parseInt(page);
34+
if (intPage < 0) return;
35+
dispatch(setPage(intPage));
36+
getAll(intPage)
37+
.unwrap()
38+
.then(fulfilled => {
39+
dispatch(setView(fulfilled["hydra:view"]));
40+
dispatch(setData(fulfilled["hydra:member"]));
41+
})
42+
}, [page]);
43+
44+
return (
45+
<Main>
46+
<View className="py-3 flex flex-row items-center justify-between">
47+
<Text className="text-3xl">{{{ucf}}}s List</Text>
48+
<Pressable onPress={() => toggleCreateModal()}>
49+
<Text className="bg-cyan-500 cursor-pointer text-white text-sm font-bold py-2 px-4 rounded">Create</Text>
50+
</Pressable>
51+
</View>
52+
<ScrollView>
53+
<LogsRenderer />
54+
<View>
55+
{
56+
datas.map(data => (
57+
<Pressable onPress={() => toggleEditModal(data)} key={data["@id"]}>
58+
<View className="flex flex-column my-2 block max-w p-6 bg-white border border-gray-300 rounded shadow">
59+
<Text>ID: {data['@id']}</Text>
60+
{{#each fields}}
61+
<Text>{{{name}}}: {data["{{{name}}}"]}</Text>
62+
{{/each}}
63+
</View>
64+
</Pressable>
65+
))
66+
}
67+
</View>
68+
<CreateEditModal />
69+
</ScrollView>
70+
<Navigation view={view} />
71+
</Main >
72+
);
73+
}

‎templates/react-native-v2/app/_layout.tsx.dist

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from 'react';
2+
import { FontAwesome } from "@expo/vector-icons";
3+
import "../global.css";
4+
import { Tabs } from "expo-router";
5+
import StoreProvider from '@/components/StoreProvider';
6+
7+
function TabBarIcon(props: {
8+
name: React.ComponentProps<typeof FontAwesome>['name'];
9+
color: string;
10+
}) {
11+
return <FontAwesome size={28} style={iconMargin} {...props} />;
12+
}
13+
const iconMargin = { marginBottom: -3 }
14+
15+
export default function Layout() {
16+
return (
17+
<StoreProvider>
18+
<Tabs screenOptions={options.tabsContainer}>
19+
<Tabs.Screen
20+
name="index"
21+
options={options.tabs.home}
22+
/>
23+
</Tabs>
24+
</StoreProvider>
25+
)
26+
}
27+
28+
const options = {
29+
tabsContainer: {
30+
headerShown: false,
31+
tabBarShowLabel: false,
32+
},
33+
tabs: {
34+
home: {
35+
title: 'Accueil',
36+
tabBarIcon: ({ color }) => <TabBarIcon name="home" color={color} />,
37+
},
38+
}
39+
};

‎templates/react-native-v2/components/Main.tsx

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { View } from "react-native";
2+
3+
export default function Main({ children }) {
4+
return (
5+
<View className="flex flex-1 py-16" style={styles.container}>
6+
{children}
7+
</View>
8+
)
9+
}
10+
11+
const styles = {
12+
container: {
13+
position: 'relative',
14+
marginHorizontal: '3%',
15+
}
16+
}

0 commit comments

Comments
 (0)