-
Notifications
You must be signed in to change notification settings - Fork 21
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* 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
Showing
39 changed files
with
1,605 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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* |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
module.exports = { | ||
presets: [require.resolve('@docusaurus/core/lib/babel/preset')], | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | ||
} | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
Oops, something went wrong.