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
thecodingmachine · Oct 11, 2024 · fcba4f7 · fcba4f7
1 parent c794a04
commit fcba4f7
Show file tree

Hide file tree

Showing 39 changed files with 728 additions and 524 deletions.
diff --git a/.github/workflows/boilerplate-checks.yml b/.github/workflows/boilerplate-checks.yml
@@ -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

diff --git a/documentation/docs/03-Project Structure.md b/documentation/docs/03-Project Structure.md
@@ -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.                                                                    |

diff --git a/documentation/docs/04-Guides/01-Navigate.md b/documentation/docs/04-Guides/01-Navigate.md
@@ -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}`)
 
@@ -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/).
 

diff --git a/documentation/docs/04-Guides/08 - Components/01 - AssetByVariant.md b/documentation/docs/04-Guides/08 - Components/01 - AssetByVariant.md
@@ -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.                          |
diff --git a/documentation/docs/04-Guides/08 - Components/02 - IconByVariant.md b/documentation/docs/04-Guides/08 - Components/02 - IconByVariant.md
@@ -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.
+:::
diff --git a/documentation/docs/04-Guides/08 - Components/03 - Skeleton.md b/documentation/docs/04-Guides/08 - Components/03 - Skeleton.md
@@ -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.                                                    |
diff --git a/documentation/docs/04-Guides/08 - Components/04 - DefaultError.md b/documentation/docs/04-Guides/08 - Components/04 - DefaultError.md
@@ -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.               |
diff --git a/documentation/docs/04-Guides/08 - Components/05 - ErrorBoundary.md b/documentation/docs/04-Guides/08 - Components/05 - ErrorBoundary.md
@@ -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.
diff --git a/documentation/docs/04-Guides/08 - Components/06 - SafeScreen.md b/documentation/docs/04-Guides/08 - Components/06 - SafeScreen.md
@@ -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.                                               |