Skip to content

Commit

Permalink
Documentation (#15)
Browse files Browse the repository at this point in the history
* feat(documentation): initialize project for documentation

* feat(documentation): set header for documentation and working on intoduction page

* feat(docs): created installation docs page

* feat(docs): removed unused code and files

* feat(docs): created feature page

* feat(directory hierarchy): created page for directory hierarchy and blueprints

* feat(directory hierarchy): working on scrips page

* feat(directory hierarchy): created scripts page

* feat(directory hierarchy): created src page

* feat(modules diagram): created doc page

* feat(configuration): created configuration page

* feat(configuration): created environment setup page

* feat(configuration): created service handling and responsive helper docs

* feat(config): removed blog route from config

* feat(doc): dreated some new docs

* feat(them): changed theme color and iocn

* feat(favicon): changed favicon

* feat(theme): removed unused colors

* feat(home page): changed home page design

* feat(home page): make responsive ui

* feat(home page): created button for footer

* feat(home page): added linkedin in footer

* feat(home page): changed logo and favicon

* feat(assets): added intro banner and features banner

* feat(home page): set header content

* feat(footer): added organizations info in footer

* feat(home page): fixed ui responsive issue

* feat(home page): set font size for small devices

* feat(home page): make responsive for landscape mode

* feat(footer): removed 300mind from Organization

* feat(config): added some changes

* feat(packge): changed initial version

* Feat/docs home page (#14)

* feat(home page): changed home page design

* feat(home page): make responsive ui

* feat(home page): created button for footer

* feat(home page): added linkedin in footer

* feat(home page): changed logo and favicon

* feat(assets): added intro banner and features banner

* feat(home page): set header content

* feat(footer): added organizations info in footer

* feat(home page): fixed ui responsive issue

* feat(home page): set font size for small devices

* feat(home page): make responsive for landscape mode

* feat(footer): removed 300mind from Organization

* feat(config): added some changes

* feat(deployment): added github action
  • Loading branch information
ankitpmi authored Jun 18, 2024
1 parent 2b1289c commit 3863b6a
Show file tree
Hide file tree
Showing 39 changed files with 1,605 additions and 2 deletions.
57 changes: 57 additions & 0 deletions .github/workflows/deploy.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
name: Deploy to GitHub Pages

on:
push:
branches:
- docs-deployment
# Review gh actions docs if you want to further define triggers, paths, etc
# https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#on

jobs:
build:
name: Build documentation
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 0
- uses: actions/setup-node@v4
with:
node-version: 18

- name: Install dependencies
run: npm install
working-directory: ./documentation

- name: Clear old build
run: npm run clear
working-directory: ./documentation

- name: Build website
run: npm run build
working-directory: ./documentation

- name: Upload Build Artifact
uses: actions/upload-pages-artifact@v3
with:
path: documentation/build

deploy:
name: Deploy to GitHub Pages
needs: build

# Grant GITHUB_TOKEN the permissions required to make a Pages deployment
permissions:
pages: write # to deploy to Pages
id-token: write # to verify the deployment originates from an appropriate source

# Deploy to the github-pages environment
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}

runs-on: ubuntu-latest
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4
5 changes: 4 additions & 1 deletion .vscode/settings.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,8 @@
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"cSpell.words": ["dtos", "Formik", "gradlew", "MMKV", "persistor"],
"conventionalCommits.scopes": ["contents"]
"conventionalCommits.scopes": ["contents"],
"[markdown]": {
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
}
}
20 changes: 20 additions & 0 deletions documentation/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
# Dependencies
/node_modules

# Production
/build

# Generated files
.docusaurus
.cache-loader

# Misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*
41 changes: 41 additions & 0 deletions documentation/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
# Website

This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.

### Installation

```
$ yarn
```

### Local Development

```
$ yarn start
```

This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.

### Build

```
$ yarn build
```

This command generates static content into the `build` directory and can be served using any static contents hosting service.

### Deployment

Using SSH:

```
$ USE_SSH=true yarn deploy
```

Not using SSH:

```
$ GIT_USER=<Your GitHub username> yarn deploy
```

If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
3 changes: 3 additions & 0 deletions documentation/babel.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
module.exports = {
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
};
45 changes: 45 additions & 0 deletions documentation/docs/configuration/code-linting.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
---
sidebar_position: 4
---

# Code linting

This React Native boilerplate utilizes ESLint, a popular linting tool, to enforce consistent and high-quality code across your project. ESLint helps identify and fix common code issues, ensuring your codebase adheres to best practices and coding standards.

### The ESLint configuration in this boilerplate includes the following features and plugins:

- `@commitlint/cli`: Enforces conventional commit messages.
- `@commitlint/config-conventional`: Provides commit message linting rules following conventional commit format.
- `eslint-plugin-import`: Provides rules for linting ES6 import/export syntax.
- `eslint-plugin-import-order-autofix`: Sorts import statements automatically.
- `eslint-plugin-no-inline-styles`: Detects and discourages the use of inline styles in React Native.
- `eslint-plugin-prettier`: Integrates Prettier code formatting rules into ESLint.
- `eslint-plugin-react-hooks`: Enforces rules for React Hooks.
- `eslint-plugin-react-native`: Provides rules specific to React Native development.
- `eslint-plugin-sort-keys-fix`: Sorts object keys in alphabetical order.

configuration of this lint is added in `.eslintrc.js` file.

The provided ESLint configuration offers a solid foundation for your React Native project. However, you might want to fine-tune it to fit your specific coding style and project requirements. Here's how you can customize the configuration in the `.eslintrc.js` file:

### Modifying Rules:

The configuration file uses a JSON format to define rules and their severity levels. You can adjust these severity levels to your preference:

- `"error"`: Triggers a linting error, halting the build process.
- `"warn"`: Issues a warning message during linting.
- `"off"`: Disables the rule completely.

### Adding New Rules:

Explore the documentation of the included plugins (and potentially new ones) to discover relevant rules you might want to enable. Remember to install any additional plugins required for the new rules.

Here's an example of customizing a rule:

```tsx
// In your .eslintrc.js file

"rules": {
"no-inline-styles": "warn" // Changed from "error" to allow inline styles with warnings
}
```
48 changes: 48 additions & 0 deletions documentation/docs/configuration/configuration.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
---
sidebar_position: 6
---

# Configuration

The boilerplate comes with a few configuration files that you can customize to fit your project's needs:

This project utilizes several configuration files to streamline development and enforce code quality. These files allow you to customize the project's behavior and ensure consistent coding practices across your team.

### Boilerplate Configuration Files:

- `.env`: Environment-specific configuration (e.g., API URLs, keys).
- `.husky`: Husky improves your commits and more.
- `.prettierrc`: Configuration for Prettier code formatting.
- `.eslintrc`: Configuration for ESLint code linting.
- `tsconfig.json`: TypeScript compiler configuration.

Here's a breakdown of each configuration file and its purpose:

#### .env:

This file stores environment-specific configurations, such as API URLs, secret keys, and other sensitive information. It's recommended to keep this file excluded from version control systems to avoid exposing sensitive data.

#### .husky:

Husky is a tool that helps enforce Git hooks. These hooks can be used to perform various tasks before or after Git events, such as running tests or formatting code before committing changes.

#### .prettierrc:

This file configures Prettier, a code formatter that automatically enforces consistent code style. Prettier helps maintain a clean and readable codebase by ensuring consistent indentation, spacing, and formatting.

#### .eslintrc:

This file configures ESLint, a static code analysis tool. ESLint helps identify potential errors, stylistic issues, and coding best practices violations in your codebase. By adhering to ESLint's rules, you can improve code quality and maintainability.

#### tsconfig.json (if applicable):

For projects using TypeScript, this file configures the TypeScript compiler. It specifies compiler options like target language version, module system, and strictness settings.

### Customizing the Configuration

These configuration files serve as a starting point, and you can customize them to fit your project's specific needs. Refer to the official documentation for each tool (Husky, Prettier, ESLint, and TypeScript) for detailed information on available options and configuration possibilities.

### Remember:

- Always keep `.env` files excluded from version control.
- Update configuration files as your project evolves to maintain optimal development practices.
49 changes: 49 additions & 0 deletions documentation/docs/configuration/environment-setup.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
---
sidebar_position: 1
---

# Environment Setup

### Environment Variable Setup with react-native-config

This boilerplate leverages the `react-native-config` library for managing environment variables. This approach enables you to define environment-specific variables and access them seamlessly within your React Native code.

1. ### Creating Environment Files

The boilerplate utilizes separate `.env` files to store environment variables for different environments:

- `.env.development`: Stores variables specific to your development environment.
- `.env.staging`: Stores variables specific to your staging environment.
- `.env.production`: Stores variables specific to your production environment.

**Note:** You can create additional `.env` files for other environments as your project demands. Remember to exclude all `.env` files from version control to safeguard sensitive information.

2. ### Defining Environment Variables

Within each `.env` file, define environment variables relevant to your project. Here's an illustrative example:

```
API_BASE_URL=https://api.example.com
API_KEY=your-api-key
```
Replace these placeholders with your actual API base URL and API key. Make sure to customize the variables according to your project's specific requirements.
3. ### Accessing Environment Variables in Code
To access environment variables within your React Native code, follow these steps:
- #### Declare Environment Keys:
Create a dedicated file, typically named `constants/config.js` or similar, to declare environment keys. This file serves as a central location to define the names of your environment variables for better maintainability.
```tsx title="JavaScript"
export type ConfigTypes = {
ENV: string;
API_URL: string;
};
```
In this example, `ConfigTypes` is an interface that defines two keys: `ENV` (to identify the current environment) and `API_URL` (to store the API base URL).
This approach promotes clean and maintainable code by separating environment variable configuration from your core application logic. You can reference the `ConfigTypes` interface throughout your project to ensure consistent access to environment variables.
78 changes: 78 additions & 0 deletions documentation/docs/configuration/responsive-helpers.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
---
sidebar_position: 3
---

# Responsive UI Helpers

This section delves into the world of responsive UI helpers, a set of functions that empower you to craft user interfaces that gracefully adapt to various screen sizes and orientations in your React Native projects. These helpers provide a convenient way to ensure your app delivers a seamless experience across a diverse range of devices, from smartphones to tablets.

This set of helper functions provides a convenient way to create responsive user interfaces in your React Native applications. It helps in scaling and sizing UI elements based on the device's screen dimensions.

### Functions:

Here's a breakdown of the functions included in this helper module:

- #### `scaleWidth(val: number): number`:
- Takes a numerical value as input (e.g., font size, margin).
- Calculates a scaled value based on the device's screen width relative to a predefined design width.
- This ensures consistent element sizing in relation to the overall screen width.

- #### `scaleHeight(val: number): number`:
- Similar to `scaleWidth`, but scales the value proportionally to the device's screen height and a predefined design height.
- Use this function to scale elements that should adapt to the screen's vertical space.

- #### `moderateScale(size: number, factor = 1): number`:
- Scales a size value (e.g., font size) while applying an optional `factor` for a more moderate scaling effect.
- This function helps prevent elements from becoming excessively large or small on very small or large screens, respectively.
- #### `scaledSize(size: number): number`:
- Scales a size value based on the overall screen scale, considering both width and height.
- Use this function for elements that should scale proportionally in all directions.
- #### `screenWidth: number`:
- Provides the actual width of the device's screen in pixels.
- #### `screenHeight: number`:
- Provides the actual height of the device's screen in pixels.

### Usage:

To utilize these functions for creating a responsive UI, follow these steps:
1. Import the required functions and variables from the helper module:

```tsx
import {
scaleWidth,
scaleHeight,
moderateScale,
scaledSize,
screenWidth,
screenHeight,
} from "@src/utils";
```
2. Use the functions in your styles or component logic to achieve responsive sizing:

```tsx
const styles = StyleSheet.create({
container: {
width: scaleWidth(300),
height: scaleHeight(200),
marginVertical: moderateScale(10),
fontSize: scaledSize(16),
},
});
```

In this example, the width and height of the container will be scaled proportionally based on the device's screen width and height. The moderateScale function is used to provide a moderate scaling effect to the margin, and the scaledSize function is used to scale the font size.
3. Adjust the predefined design width and height if needed:

```tsx
export const designWidth = 375;
export const designHeight = 812;
```
Modify these values according to your design specifications to ensure accurate scaling.

### Notes:

- The `scaleWidth` and `scaleHeight` functions are useful for scaling dimensions, such as width, height, padding, or margin values.
- The `moderateScale` function can be used to achieve a more subtle scaling effect by providing a factor that controls the degree of scaling.
- The `scaledSize` function is handy for scaling font sizes or any other numerical values that need to adapt to different screen sizes.

Feel free to customize and extend these functions as per your project requirements to achieve the desired responsive behavior.
Loading

0 comments on commit 3863b6a

Please sign in to comment.