Skip to content

Commit fcba4f7

Browse files
JeremyDolleJeremyDolle
authored
feat: add component doc + add eslint flat config (#447)
* refactor: Update TypeScript version to 5.6.3 and improve build process * refactor: Rename onErrorReportCrashlytics to onErrorReport in ErrorBoundary component and remove useless component * refactor: Rename navigations to navigation in file paths * refactor: Update imports in Example and Startup screens * feat: use eslint flat config * feat: Add components section * refactor: Remove unused ErrorBoundary component and update imports in Example and Startup screens * refactor: Update eslint command in boilerplate-checks.yml
1 parent c794a04 commit fcba4f7

39 files changed

+728
-524
lines changed

‎.github/workflows/boilerplate-checks.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ jobs:
2424
with:
2525
working_directory: ./template
2626
- name: Run Eslint
27-
run: yarn lint:coventions
27+
run: yarn lint:rules
2828
working-directory: ./template
2929
- name: Run Prettier
3030
run: yarn lint:code-format

‎documentation/docs/03-Project Structure.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ To achieve this, the project structure is thoughtfully organized into distinct s
1616
|--------------------|-------------------------------------------------------------------------------------------------------------------|
1717
| `src/components` | Home to application components, following the atomic design methodology for organizing presentational components. |
1818
| `src/hooks` | Custom hooks used throughout the application. |
19-
| `src/navigations` | Navigator components responsible for handling navigation. |
19+
| `src/navigation` | Navigator components responsible for handling navigation. |
2020
| `src/screens` | Screen components representing various app screens. |
2121
| `src/services` ️ | Houses data fetching and related services. |
2222
| `src/theme` | Holds theme configuration for the application. |

‎documentation/docs/04-Guides/01-Navigate.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ any new features and improvements.
1313

1414
## Navigation structure
1515

16-
All navigation-related configurations and navigators are neatly organized within the `src/navigations` folder. Here's a brief overview:
16+
All navigation-related configurations and navigators are neatly organized within the `src/navigation` folder. Here's a brief overview:
1717

1818
### Root file (`Application.{js, tsx}`)
1919

@@ -34,7 +34,7 @@ You can either add your own navigators or, if you prefer, replace the existing s
3434
## Using typescript
3535

3636
It's crucial not to overlook the creation of types for your navigation parameters. This practice helps prevent errors and enhances autocompletion.
37-
You can define these types in the `@/navigations/types.ts` file.
37+
You can define these types in the `@/navigation/types.ts` file.
3838

3939
For more in-depth information on this topic, please refer to the [React Navigation documentation](https://reactnavigation.org/docs/typescript/).
4040

‎documentation/docs/04-Guides/08 - Components/01 - AssetByVariant.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
slug: /components/asset-by-variant
3+
sidebar_label: AssetByVariant
4+
title: AssetByVariant
5+
id: asset-by-variant
6+
keywords: [asset, variant, assetbyvariant, asset-by-variant, component]
7+
---
8+
9+
The atomic `AssetByVariant` component is a helper component that allows you to render different assets based on the current [variant](/docs/theming/configuration#variants) of your app. This component is particularly useful when you need to display different images or assets based on the variant of your app. If the asset is not found for the current variant, the component will render the default asset.
10+
11+
### Usage
12+
13+
You will need to store your assets in the `theme/assets/images` folder. The `AssetByVariant` component will try to find the asset in the `theme/assets/images/<variant>` folder, falling back to the default asset located in the `theme/assets/images` folder.
14+
So if you have an asset named `tom` in the `theme/assets/images/premiums` folder, the component will try to find the asset in the `theme/assets/images/premiums` folder, falling back to the default asset located in the `theme/assets/images` folder.
15+
16+
```jsx
17+
import { AssetByVariant } from '@/components/atoms';
18+
19+
function Example() {
20+
return (
21+
<AssetByVariant
22+
path={'tom'}
23+
resizeMode={'contain'}
24+
style={{ height: 300, width: 300 }}
25+
/>
26+
);
27+
}
28+
```
29+
30+
:::info
31+
the `path` prop can handle a path with sub folders, for example, `folder1/folder2/assetName`. The component will try to find the asset in the `theme/assets/images/<variant>/folder1/folder2` folder, falling back to the default asset located in the `theme/assets/images/folder1/folder2` folder.
32+
:::
33+
34+
35+
### Props
36+
37+
| Name | Type | Default | Description |
38+
|------------|----------------------------|---------|-----------------------------------------------------------------------------------------------|
39+
| path | string | | The required path of the asset to be displayed. The component will try to find the asset in the `theme/assets/images/<variant>` folder, falling back to the default asset located in the `theme/assets/images` folder. |
40+
| extension | string | 'png' | The extension of the asset to be displayed. |
41+
| ...props | Omit\<ImageProps, 'source'\> | | all props from `Image` component are supported except `source` prop. |

‎documentation/docs/04-Guides/08 - Components/02 - IconByVariant.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
slug: /components/icon-by-variant
3+
sidebar_label: IconByVariant
4+
title: IconByVariant
5+
id: icon-by-variant
6+
keywords: [icon, variant, iconbyvariant, icon-by-variant, component]
7+
---
8+
9+
The atomic `IconByVariant` component is a helper component that allows you to render different icons based on the current [variant](/docs/theming/configuration#variants) of your app. This component is particularly useful when you need to display different icon based on the variant of your app. If the icon is not found for the current variant, the component will render the default icon.
10+
11+
### Usage
12+
You will need to store your icons in the `theme/assets/icons` folder. The `IconByVariant` component will try to find the icon in the `theme/assets/icons/<variant>` folder, falling back to the default icon located in the `theme/assets/icons` folder.
13+
So if you have an icon named `language` in the `theme/assets/icons/premiums` folder, the component will try to find the icon in the `theme/assets/icons/premiums` folder, falling back to the default icon located in the `theme/assets/icons` folder.
14+
15+
```jsx
16+
import { IconByVariant } from '@/components/atoms';
17+
18+
function Example() {
19+
return (
20+
<IconByVariant
21+
path={'language'} // try to find an icon named `language` for the current variant in the `theme/assets/icons/<variant>` folder, fallback to the default asset located in `theme/assets/icons` folder
22+
/>
23+
);
24+
}
25+
26+
```
27+
28+
:::info
29+
the `path` prop can handle a path with sub folders, for example, `folder1/folder2/iconName`. The component will try to find the asset in the `theme/assets/icons/<variant>/folder1/folder2` folder, falling back to the default asset located in the `theme/assets/icons/folder1/folder2` folder.
30+
:::
31+
32+
### Props
33+
34+
| Name | Type | Default | Description |
35+
|------------|--------|---------|-----------------------------------------------------------------------------------------------|
36+
| path | string | | The required name of the asset to be displayed. The component will try to find the asset in the `theme/assets/icons/<variant>` folder, falling back to the default asset located in the `theme/assets/icons` folder. |
37+
| ...props | SvgProps | | all props from `Svg` component are supported except `source` prop. |
38+
39+
:::info
40+
The `IconByVariant` component use the `Svg` component from [`react-native-svg` library](https://github.com/software-mansion/react-native-svg) to render the icon. You can find more information about the `Svg` component in the react-native-svg documentation.
41+
:::

‎documentation/docs/04-Guides/08 - Components/03 - Skeleton.md

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
slug: /components/skeleton
3+
sidebar_label: Skeleton
4+
title: Skeleton
5+
id: skeleton
6+
keywords: [skeleton, loading, animation]
7+
---
8+
9+
The atomic `Skeleton` component is a helper component that allows you to display a loading animation while the content is loading. This component is particularly useful when you need to display a loading animation while the content is loading by presenting a placeholder UI of all the components to the user.
10+
11+
### Usage
12+
13+
```jsx
14+
import { AssetByVariant, IconByVariant, Skeleton } from '@/components/atoms';
15+
16+
function Example() {
17+
const fetchOneUserQuery = useFetchOneQuery(currentId); // fetchOneUserQuery is a react-query query
18+
19+
return (
20+
<Skeleton
21+
loading={fetchOneUserQuery.isLoading}
22+
>
23+
<Text>{user.name}</Text>
24+
</Skeleton>
25+
);
26+
}
27+
28+
export default Example;
29+
30+
```
31+
32+
So the user name will be displayed when the `fetchOneUserQuery` is not loading, otherwise, the `Skeleton` component will display a loading animation.
33+
34+
### Props
35+
36+
| Name | Type | Default | Description |
37+
|------------|--------|---------|-----------------------------------------------------------------------------------------------|
38+
| loading | boolean | | The required boolean value to determine whether the content is loading or not. |
39+
| children | ReactNode | | The required children to be displayed. |
40+
| height | DimensionValue | 24 | The duration of the loading animation in milliseconds. |
41+
| width | DimensionValue | '100%' | The duration of the loading animation in milliseconds. |
42+
| ...props | ViewProps | | all props from `View` component are supported. |

‎documentation/docs/04-Guides/08 - Components/04 - DefaultError.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
slug: /components/default-error
3+
sidebar_label: DefaultError
4+
title: DefaultError
5+
id: default-error
6+
keywords: [DefaultError, Error, boundary]
7+
---
8+
9+
The molecule `DefaultError` component is used into the [`ErrorBoundary` component](/docs/components/error-boundary) as the default error UI.
10+
This component is composed of `Text` components and a `Button` to reset the error (for re-executing the query for example).
11+
12+
### Props
13+
14+
| Name | Type | Default | Description |
15+
|------------|--------|---------|-----------------------------------------------------------------------------------------------|
16+
| onReset | function | | The required function to reset the error. |

‎documentation/docs/04-Guides/08 - Components/05 - ErrorBoundary.md

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
---
2+
slug: /components/error-boundary
3+
sidebar_label: ErrorBoundary
4+
title: ErrorBoundary
5+
id: error-boundary
6+
keywords: [ErrorBoundary, Error, boundary]
7+
---
8+
9+
The organism `ErrorBoundary` component is a helper component that allows you to catch JavaScript errors anywhere in the component tree and log those errors. This component is particularly useful when you need to catch errors in your app and display a fallback UI to the user.
10+
11+
### Usage
12+
13+
```jsx
14+
import { ErrorBoundary } from "@/components/atoms";
15+
16+
<ErrorBoundary fallback={<div>Something went wrong</div>}>
17+
<ExampleApplication />
18+
</ErrorBoundary>
19+
```
20+
21+
### Log errors
22+
In the `ErrorBoundary` component, you will find a `onErrorReport` function that allows you to log the error in your application. You can use any logging library to log the error like `sentry`, `logrocket`, `crashlytics`, etc.
23+
24+
```jsx
25+
const onErrorReport = (error: Error, info: ErrorInfo) => {
26+
// use any crash reporting tool here
27+
return onError?.(error, info);
28+
};
29+
```
30+
31+
### Props
32+
33+
As the `ErrorBoundary` component is a wrapper component, it accepts all the props from the [`react-error-boundary`](https://github.com/bvaughn/react-error-boundary) library with fallback props except that the `fallback` prop is empty by default.
34+
35+
| Name | Type | Default | Description |
36+
|------------|--------|---------|-----------------------------------------------------------------------------------------------|
37+
| fallback | ReactNode | | The required fallback UI to be displayed when an error occurs. |
38+
| onReset | function | | The optional function to reset the error state |
39+
| ...props | any | | all props from `ErrorBoundary` component are supported. |
40+
41+
42+
:::info
43+
This component is used in the `SafeScreen` component to catch JavaScript errors and display a fallback UI to the user.

‎documentation/docs/04-Guides/08 - Components/06 - SafeScreen.md

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
slug: /components/safe-screen
3+
sidebar_label: SafeScreen
4+
title: SafeScreen
5+
id: safe-screen
6+
keywords: [SafeScreen, StatusBar, SafeAreaView, ErrorBoundary, DefaultError]
7+
---
8+
9+
The template `SafeScreen` component is a helper component that allows you to display a screen with a safe area view, a status bar, and a fallback UI when an error occurs in the application. This component is particularly useful when you need to display a screen with all necessary tools to handle errors in your app.
10+
11+
### Usage
12+
13+
```jsx
14+
import { useI18n, useUser } from '@/hooks';
15+
16+
import { SafeScreen } from '@/components/templates';
17+
18+
function Example() {
19+
const { useFetchOneQuery } = useUser();
20+
21+
const fetchOneUserQuery = useFetchOneQuery(1);
22+
23+
return (
24+
<SafeScreen
25+
isError={fetchOneUserQuery.isError} // boolean value to determine whether an error occurred or not if true the fallback UI will be displayed
26+
onResetError={fetchOneUserQuery.refetch} // function to reset the error state and re-execute the query
27+
>
28+
// your content here
29+
</SafeScreen>
30+
);
31+
}
32+
```
33+
34+
So if an error occurs in the `fetchOneUserQuery`, the `SafeScreen` component will display the [`DefaultError` component](/docs/components/default-error) with a button to reset the error. It also display the same error for any other error in the screen thanks to the [error boundary system](/docs/components/error-boundary).
35+
36+
### Props
37+
38+
| Name | Type | Default | Description |
39+
|--------------|----------|---------|-----------------------------------------------------------------------------------------------|
40+
| isError | boolean | | boolean value to determine whether an error occurred or not. |
41+
| onResetError | function | | function called on default error button press |
42+
| ...props | Omit\<SafeAreaViewProps, 'mode'\> | | all props from `View` component are supported. |

0 commit comments

Comments
 (0)