Skip to content

Commit

Permalink
feat: add component doc + add eslint flat config (#447)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
JeremyDolle authored Oct 11, 2024
1 parent c794a04 commit fcba4f7
Show file tree
Hide file tree
Showing 39 changed files with 728 additions and 524 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/boilerplate-checks.yml
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ jobs:
with:
working_directory: ./template
- name: Run Eslint
run: yarn lint:coventions
run: yarn lint:rules
working-directory: ./template
- name: Run Prettier
run: yarn lint:code-format
Expand Down
2 changes: 1 addition & 1 deletion documentation/docs/03-Project Structure.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ To achieve this, the project structure is thoughtfully organized into distinct s
|--------------------|-------------------------------------------------------------------------------------------------------------------|
| `src/components` | Home to application components, following the atomic design methodology for organizing presentational components. |
| `src/hooks` | Custom hooks used throughout the application. |
| `src/navigations` | Navigator components responsible for handling navigation. |
| `src/navigation` | Navigator components responsible for handling navigation. |
| `src/screens` | Screen components representing various app screens. |
| `src/services`| Houses data fetching and related services. |
| `src/theme` | Holds theme configuration for the application. |
Expand Down
4 changes: 2 additions & 2 deletions documentation/docs/04-Guides/01-Navigate.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ any new features and improvements.

## Navigation structure

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

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

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

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

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

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
---
slug: /components/asset-by-variant
sidebar_label: AssetByVariant
title: AssetByVariant
id: asset-by-variant
keywords: [asset, variant, assetbyvariant, asset-by-variant, component]
---

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.

### Usage

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.
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.

```jsx
import { AssetByVariant } from '@/components/atoms';

function Example() {
return (
<AssetByVariant
path={'tom'}
resizeMode={'contain'}
style={{ height: 300, width: 300 }}
/>
);
}
```

:::info
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.
:::


### Props

| Name | Type | Default | Description |
|------------|----------------------------|---------|-----------------------------------------------------------------------------------------------|
| 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. |
| extension | string | 'png' | The extension of the asset to be displayed. |
| ...props | Omit\<ImageProps, 'source'\> | | all props from `Image` component are supported except `source` prop. |
41 changes: 41 additions & 0 deletions documentation/docs/04-Guides/08 - Components/02 - IconByVariant.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
---
slug: /components/icon-by-variant
sidebar_label: IconByVariant
title: IconByVariant
id: icon-by-variant
keywords: [icon, variant, iconbyvariant, icon-by-variant, component]
---

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.

### Usage
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.
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.

```jsx
import { IconByVariant } from '@/components/atoms';

function Example() {
return (
<IconByVariant
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
/>
);
}

```

:::info
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.
:::

### Props

| Name | Type | Default | Description |
|------------|--------|---------|-----------------------------------------------------------------------------------------------|
| 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. |
| ...props | SvgProps | | all props from `Svg` component are supported except `source` prop. |

:::info
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.
:::
42 changes: 42 additions & 0 deletions documentation/docs/04-Guides/08 - Components/03 - Skeleton.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
---
slug: /components/skeleton
sidebar_label: Skeleton
title: Skeleton
id: skeleton
keywords: [skeleton, loading, animation]
---

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.

### Usage

```jsx
import { AssetByVariant, IconByVariant, Skeleton } from '@/components/atoms';

function Example() {
const fetchOneUserQuery = useFetchOneQuery(currentId); // fetchOneUserQuery is a react-query query

return (
<Skeleton
loading={fetchOneUserQuery.isLoading}
>
<Text>{user.name}</Text>
</Skeleton>
);
}

export default Example;

```

So the user name will be displayed when the `fetchOneUserQuery` is not loading, otherwise, the `Skeleton` component will display a loading animation.

### Props

| Name | Type | Default | Description |
|------------|--------|---------|-----------------------------------------------------------------------------------------------|
| loading | boolean | | The required boolean value to determine whether the content is loading or not. |
| children | ReactNode | | The required children to be displayed. |
| height | DimensionValue | 24 | The duration of the loading animation in milliseconds. |
| width | DimensionValue | '100%' | The duration of the loading animation in milliseconds. |
| ...props | ViewProps | | all props from `View` component are supported. |
16 changes: 16 additions & 0 deletions documentation/docs/04-Guides/08 - Components/04 - DefaultError.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
---
slug: /components/default-error
sidebar_label: DefaultError
title: DefaultError
id: default-error
keywords: [DefaultError, Error, boundary]
---

The molecule `DefaultError` component is used into the [`ErrorBoundary` component](/docs/components/error-boundary) as the default error UI.
This component is composed of `Text` components and a `Button` to reset the error (for re-executing the query for example).

### Props

| Name | Type | Default | Description |
|------------|--------|---------|-----------------------------------------------------------------------------------------------|
| onReset | function | | The required function to reset the error. |
43 changes: 43 additions & 0 deletions documentation/docs/04-Guides/08 - Components/05 - ErrorBoundary.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
---
slug: /components/error-boundary
sidebar_label: ErrorBoundary
title: ErrorBoundary
id: error-boundary
keywords: [ErrorBoundary, Error, boundary]
---

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.

### Usage

```jsx
import { ErrorBoundary } from "@/components/atoms";

<ErrorBoundary fallback={<div>Something went wrong</div>}>
<ExampleApplication />
</ErrorBoundary>
```

### Log errors
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.

```jsx
const onErrorReport = (error: Error, info: ErrorInfo) => {
// use any crash reporting tool here
return onError?.(error, info);
};
```
### Props
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.
| Name | Type | Default | Description |
|------------|--------|---------|-----------------------------------------------------------------------------------------------|
| fallback | ReactNode | | The required fallback UI to be displayed when an error occurs. |
| onReset | function | | The optional function to reset the error state |
| ...props | any | | all props from `ErrorBoundary` component are supported. |
:::info
This component is used in the `SafeScreen` component to catch JavaScript errors and display a fallback UI to the user.
42 changes: 42 additions & 0 deletions documentation/docs/04-Guides/08 - Components/06 - SafeScreen.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
---
slug: /components/safe-screen
sidebar_label: SafeScreen
title: SafeScreen
id: safe-screen
keywords: [SafeScreen, StatusBar, SafeAreaView, ErrorBoundary, DefaultError]
---

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.

### Usage

```jsx
import { useI18n, useUser } from '@/hooks';

import { SafeScreen } from '@/components/templates';

function Example() {
const { useFetchOneQuery } = useUser();

const fetchOneUserQuery = useFetchOneQuery(1);

return (
<SafeScreen
isError={fetchOneUserQuery.isError} // boolean value to determine whether an error occurred or not if true the fallback UI will be displayed
onResetError={fetchOneUserQuery.refetch} // function to reset the error state and re-execute the query
>
// your content here
</SafeScreen>
);
}
```

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).

### Props

| Name | Type | Default | Description |
|--------------|----------|---------|-----------------------------------------------------------------------------------------------|
| isError | boolean | | boolean value to determine whether an error occurred or not. |
| onResetError | function | | function called on default error button press |
| ...props | Omit\<SafeAreaViewProps, 'mode'\> | | all props from `View` component are supported. |
Loading

0 comments on commit fcba4f7

Please sign in to comment.