Oinc Design System Components

Requirements

• Node.js minimum version: Up to 20.11.0;
• Yarn as package manager;

Responsibility

As the Developer of the project, try to keep it organized, make any adjustments or technical debts you deem necessary in a careful and responsible way.

Communicate these changes to the project manager and document this so that other developers can be aware of the changes.

Development Flow

To develop a new feature or make a fix to the project, create the branch from main.

Types of branches:

For new features:

• feat/feature-name

For bugFix:

• fix/bugFix-name

For HotFix:

• hotFix/hotFix-name

Install

yarn install

Commands

• yarn g: Generate Atomic components
• yarn storybook: Storybook emulate components with react native web.
• yarn ios: Storybook in iOS.
• yarn android: Storybook in Android.
• yarn test: Run test in all components
• yarn checker: Format with prettier src files
• yarn lint: Check rules patterns in files
• yarn lint:fix: ESLint will make changes to the files as necessary to fix identified issues. This may include automatically correcting whitespace, incorrect formatting, or even correcting some code errors.

Managing GitHub Tokens for Development

When working with repositories that require authentication for actions such as publishing packages to GitHub Packages or accessing private repositories, it's essential to use GitHub tokens. This guide will walk you through creating a GitHub token and setting it up on different environments (Linux, macOS, and Windows) by creating an .npmrc file in your home directory.

1. Create a Github Token to Auth in GitHub Packages:
2. Access Github Tokens
3. Generate a new token with these scope permissions:

• Add a note (What`s this token for?)

• Expiration: (Select the time that you need to use this token)

• Select scopes:

• [x] repo

  • [x] repo:status
  • [x] repo_deployment
  • [x] public_repo
  • [x] repo:invite
  • [x] security_events
  • [x] read:packages

• [x] write:packages

  • [x] read:packages

• [x] project

  • [x] read:project

Note: Copy the Token: Make sure to copy the token to your clipboard. GitHub won't show the token again for security reasons.

Configuring Your Environment

After generating your GitHub token, you need to configure your machine to use this token when interacting with GitHub via npm or yarn.

Add Your GitHub Token

Open the .npmrc file in a text editor and add:

//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN
@oincdev:registry=https://npm.pkg.github.com

Replace YOUR_GITHUB_TOKEN with the token you've copied and

• Windows Open Command Prompt or PowerShell. Navigate to Your Home Directory: You can usually do this by typing cd %USERPROFILE% in Command Prompt or PowerShell.

Create or Edit .npmrc

If the .npmrc file doesn't exist, you can create it using notepad .npmrc. If it exists, this command will open it for editing.

Add Your GitHub Token

In the .npmrc file, add the following lines:

//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN
@oincdev:registry=https://npm.pkg.github.com

Make sure to replace YOUR_GITHUB_TOKEN with your actual GitHub token.

Final Steps

After creating and configuring your .npmrc file, your development environment will be authenticated to interact with GitHub for operations like package publishing or installing private packages.

Note: Keep your GitHub token secure. Do not share it or commit the .npmrc file with your token to any repositories.

By following these steps, you'll ensure seamless authentication with GitHub for your development workflows across Linux, macOS, and Windows environments.

Use this another way if you can't access or publish a new version of this project:

Auth in NPM with your personal Github Account:

npm login --scope=@oincdev --registry=https://npm.pkg.github.com

> Username: USERNAME
> Password: TOKEN *

* TOKEN: Paste the previously created token;

How to implement

In Oinc Mobile Applications:

1. Install this package:

yarn install @oincdev/oinc-mobile-design-system

2. Add ThemeProvider to top of your application:

import { ThemeProvider } from "@oincdev/oinc-mobile-design-system";

export const App: React.FC<IThemeProps> = ({ children }) => {
  return <ThemeProvider>{children}</ThemeProvider>;
};

Requirements to deploy

Ensure that your commit is compliant with conventional-commits and follows the rules defined in the release.config.js file in the project folder. The commit must adhere to the rules to trigger the semantic-release bot in the pipeline and generate the correct semantic version.

When submitting the branch to the repository, check if it is ready to be merged with the project's main branch.

Create a Pull Request to main and wait for the Pull Request Development pipeline to finish the scheduled checks and only perform the merge when the button is enabled (in green).

Upon merging, the publish pipeline will be triggered, which is responsible for packaging the project and publishing it to GitHub Packages.

Deploy of Package

"During the execution of the publish pipeline, the semantic-release bot validates the repository credentials, creates the semantic version tag, and publishes the package automatically."

This version maintains the original meaning and instructions but enhances the clarity of the list of actions performed by the semantic-release bot.

Contributing

Contributions are always welcome!

Keep the code clean and organized, collaborate so that the project remains growing and free from future bugs.

Please adhere to the code of conduct and professional ethics, whether you are responsible for processing sensitive data or not.

Optimizations

What optimizations did you make in your code? E.g. refactors, performance improvements, accessibility?

If you have made considerable changes to the code, it is essential that you document these changes so that the entire team of developers and future members can follow the development of the project.