feat: rework app structure (#258)

* feat: handle pages and base navigation differently

* feat: rename shared components with ui

* feat: update the page generator

* chore: remove other generators for now

_templates/generators/page/componentFile.ejs.t

@@ -1,33 +1,20 @@
 ---
-to: src/components/<%= h.changeCase.pascalCase(componentName) %>/components/<%= h.changeCase.pascalCase(componentName) %>.tsx
+to: src/pages/<%= h.changeCase.pascalCase(componentName) %>.tsx
 ---
-import { Component } from 'react';
+import { Box, Text } from '$components/ui/primitives';
+import SafeView from '$components/ui/SafeView';
+import { <%= h.changeCase.pascalCase(componentName) %>ScreenNavigationProp } from '$navigation/navigation.types';
 
-import { Flex, Title } from '$shared/primitives';
-import SafeView from '$shared/SafeView';
-
-type Props = {
- someProps?: string;
-};
-
-const initialState = {
- someState: 'Some state',
+type <%= h.changeCase.pascalCase(componentName) %>Props = {
+ navigation: <%= h.changeCase.pascalCase(componentName) %>ScreenNavigationProp;
 };
 
-type State = typeof initialState;
-
-class <%= h.changeCase.pascalCase(componentName) %> extends Component<Props, State> {
- state = initialState;
-
- render() {
- return (
- <SafeView>
- <Flex justifyContent="center" alignItems="center">
- <Title><%= h.changeCase.pascalCase(componentName) %> page</Title>
- </Flex>
- </SafeView>
- );
- }
-}
+const <%= h.changeCase.pascalCase(componentName) %> = ({ navigation }: <%= h.changeCase.pascalCase(componentName) %>Props) => (
+ <SafeView edges={['bottom']}>
+ <Box flex={1}>
+ <Text variant="large"><%= h.changeCase.pascalCase(componentName) %> page</Text>
+ </Box>
+ </SafeView>
+);
 
 export default <%= h.changeCase.pascalCase(componentName) %>;

_templates/generators/page/componentTest.ejs.t

@@ -1,22 +1,24 @@
 ---
-to: src/components/<%= h.changeCase.pascalCase(componentName) %>/components/__tests__/<%= h.changeCase.pascalCase(componentName) %>.test.tsx
+to: src/pages/__tests__/<%= h.changeCase.pascalCase(componentName) %>.test.tsx
 ---
+/* eslint-disable react/jsx-props-no-spreading */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-// import { fireEvent } from '@testing-library/react-native';
-
-import render from '$tests/utils';
+import { render } from '$tests/utils';
 
 import <%= h.changeCase.pascalCase(componentName) %> from '../<%= h.changeCase.pascalCase(componentName) %>';
 
-describe('<%= h.changeCase.pascalCase(componentName) %> page component', () => {
- // given
+describe('<%= h.changeCase.pascalCase(componentName) %> page', () => {
+ // Given
+ const props = { navigation: { navigate: jest.fn() } as any };
 
  it('should render correctly', () => {
- // When
- const wrapper = render(<<%= h.changeCase.pascalCase(componentName) %> />);
+ // Given
+ const { getByText } = render(<<%= h.changeCase.pascalCase(componentName) %> {...props} />);
 
  // Then
- expect(wrapper).toMatchSnapshot();
+ expect(getByText('<%= h.changeCase.pascalCase(componentName) %> page')).toBeDefined();
  });
 });

_templates/generators/page/navigationInjection.ejs.t

@@ -0,0 +1,9 @@
+---
+inject: true
+before: inject screens before this
+to: src/navigation/navigation.tsx
+---
+ <Stack.Screen
+ name="<%= h.changeCase.pascalCase(componentName) %>"
+ component={Pages.<%= h.changeCase.pascalCase(componentName) %>}
+ />

_templates/generators/page/routesTypesScreenInjection.ejs.t → _templates/generators/page/navigationTypesScreenInjection.ejs.t

@@ -1,7 +1,7 @@
 ---
 inject: true
 before: // inject page types before this
-to: src/routes/routes.types.ts
+to: src/navigation/navigation.types.ts
 ---
 export type <%= h.changeCase.pascalCase(componentName) %>ScreenNavigationProp = StackNavigationProp<
  RootStackParamList,

_templates/generators/page/navigationTypesStackInjection.ejs.t

@@ -0,0 +1,6 @@
+---
+inject: true
+before: // inject stack types before this
+to: src/navigation/navigation.types.ts
+---
+ <%= h.changeCase.pascalCase(componentName) %>: undefined;

_templates/generators/page/pagesExportInjection.ejs.t

@@ -1,6 +1,6 @@
 ---
 inject: true
 before: // inject exports before this
-to: src/routes/pages.ts
+to: src/navigation/pages.ts
 ---
-<%= h.changeCase.pascalCase(componentName) %>,
+ <%= h.changeCase.pascalCase(componentName) %>,

_templates/generators/page/pagesInjection.ejs.t

@@ -1,6 +1,6 @@
 ---
 inject: true
 before: inject pages before this
-to: src/routes/pages.ts
+to: src/navigation/pages.ts
 ---
-const <%= h.changeCase.pascalCase(componentName) %> = lazy(() => import('components/<%= h.changeCase.pascalCase(componentName) %>'));
+import <%= h.changeCase.pascalCase(componentName) %> from '$pages/<%= h.changeCase.pascalCase(componentName) %>';

_templates/generators/page/prompt.js

@@ -1,12 +1,7 @@
 module.exports = [
- {
- type: 'input',
- name: 'name',
- message: "What's the route name ?",
- },
  {
  type: 'input',
  name: 'componentName',
- message: "What's the component name ?",
+ message: "What's the component name?",
  },
 ];

package.json

@@ -48,8 +48,6 @@
  "//// UTILITIES ////": "",
  "image:add": "node scripts/images.js",
  "generate:page": "npx hygen generators page",
- "generate:fc": "npx hygen generators fc",
- "generate:class": "npx hygen generators class",
  "generate:icons": "svgr --native --typescript --ignore-existing --svgo-config src/components/icons/svgs/config/svgo.json --index-template src/components/icons/svgs/config/index-template.js --template src/components/icons/svgs/config/icon-template.js --out-dir src/components/icons/components src/components/icons/svgs",
  "//// VERSIONNING ////": "",
  "version:bump": "standard-version --skip.commit --skip.changelog --skip.tag",
@@ -132,7 +130,8 @@
  "*.{js,ts,tsx}": [
  "bash -c tsc --noEmit",
  "bash -c yarn lint",
- "bash -c yarn prettify"
+ "bash -c yarn prettify",
+ "bash -c yarn test"
  ]
  },
  "jest": {

src/App.tsx

@@ -13,7 +13,7 @@ import { theme } from '$styles/theme';
 import ErrorBoundary from './components/errorBoundary';
 import { config, getDimensionRatio } from './core/constants';
 import { initI18n } from './i18n/config';
-import AppContainer from './routes/routes';
+import RootStack from './navigation/navigation';
 
 import Sandbox from '$sandbox';
 
@@ -36,7 +36,7 @@ const Root = () => (
  <ErrorBoundary>
  <SafeAreaProvider initialMetrics={initialWindowMetrics}>
  <Sandbox>
- <AppContainer />
+ <RootStack />
  </Sandbox>
  </SafeAreaProvider>
  </ErrorBoundary>

src/components/errorBoundary/ErrorBoundary.tsx

@@ -1,7 +1,7 @@
 import { Component, ErrorInfo, ReactElement } from 'react';
 
-import { Box, Button, Text } from '$components/shared/primitives';
-import SafeView from '$components/shared/SafeView';
+import { Box, Button, Text } from '$components/ui/primitives';
+import SafeView from '$components/ui/SafeView';
 import i18n from '$i18n/config';
 
 type ErrorBoundaryProps = {

src/components/home/components/Header.tsx → src/components/home/Header.tsx

@@ -1,6 +1,6 @@
 import { ImageBackground } from 'react-native';
 
-import { Box, Text } from '$components/shared/primitives';
+import { Box, Text } from '$components/ui/primitives';
 import { makeAppStyles } from '$styles/theme';
 
 const uri = { uri: 'header' };

src/components/home/components/Informations.tsx → src/components/home/Informations.tsx

@@ -1,6 +1,6 @@
 import { Platform } from 'react-native';
 
-import { Text } from '$components/shared/primitives';
+import { Text } from '$components/ui/primitives';
 import i18n from '$i18n/config';
 
 const Informations = () => (

src/components/home/index.ts

@@ -1 +1,2 @@
-export { default } from './components/Home';
+export { default as Header } from './Header';
+export { default as Informations } from './Informations';

src/components/shared/FallbackLoader.tsx → src/components/ui/FallbackLoader.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 
-import { Text } from '$components/shared/primitives';
+import { Text } from '$components/ui/primitives';
 
 type Props = {
  delay?: number;

src/components/shared/primitives/button/Button.tsx → src/components/ui/primitives/button/Button.tsx

@@ -20,7 +20,7 @@ import {
 } from '@shopify/restyle';
 import { Pressable } from 'react-native';
 
-import { Box, Text } from '$components/shared/primitives';
+import { Box, Text } from '$components/ui/primitives';
 import { Theme } from '$styles/theme';
 
 const restyleFunctions = [

src/components/shared/primitives/input/Input.tsx → src/components/ui/primitives/input/Input.tsx

@@ -3,7 +3,7 @@
 import { forwardRef } from 'react';
 import { TextInput, TextInputProps } from 'react-native';
 
-import { Box, Text } from '$components/shared/primitives';
+import { Box, Text } from '$components/ui/primitives';
 import { fontSizes } from '$styles/fonts';
 import { makeAppStyles, theme } from '$styles/theme';
 

src/routes/routes.tsx → src/navigation/navigation.tsx

@@ -3,8 +3,8 @@ import { createStackNavigator } from '@react-navigation/stack';
 
 import i18n from '$i18n/config';
 
+import { RootStackParamList } from './navigation.types';
 import * as Pages from './pages';
-import { RootStackParamList } from './routes.types';
 
 const Stack = createStackNavigator<RootStackParamList>();