salicru-frontend-react v0.0.2

📚 salicru/frontend-library

In order to make best practices for this library project, you should read the following steps to understand the functionality and learn how to create new components.

💻 Installation

Use the npm package manager to install this library into your project.

npm install --save-dev salicru-frontend-library

🏃‍♂️ Running the project

To run the project you need to know that this is not a standard React app development project, read the following steps to run the storybook instead.

Required commands to run

• Run npm run dev to compile your code into the dist folder.
• Run npm run storybook to open the storybook page in your navigator.

Development and Useful Commands

• Run npm run test to run Jest tests.
• Run npm run lint to trigger Eslint and check for code conflicts.
• Run npm run lint:fix to fix detected code conflicts.
• Run npm run build-storybook to compile Storybook files folder.

🎁 Create a new component

Choose a folder

If you want to create a new component, make sure your componenet folder is in one of these folders

• atoms
• molecules
• organisms

These folders follow the Atomic Design method of creating web pages. Please read it before selecting any of them to make sure you select the right folder.

Files inside component

Inside the component folder we should have some different files for creating, testing and styling our componenets to make them usable and maintainable.

These files are

• index.ts: Export all usable content of the component.
• component.stories.tsx: Props for Storybook
• component.test.tsx: Testing renders of Jest
• component.tsx: Your react component code here
• styled.ts: Your style in .ts file format
• types.ts: Your component types here

👨‍🔧 Commiting changes

If you want to commit changes on the project, you'll need to pass certain checks before app let's you commit properly. First of all this pre-commit script will trigger:

# Run tests before commit
npm test

# Run link before commit
npm run lint

# Run build before commit
npm run build

• npm test trigger Jest to ensure your code run without errors.
• npm run lint trigger Eslint to make sure that your code meets the requirements
• npm run build to build your code and check problems

Once it passes, pre-commit script will let you commit the code to the repository. If pre-commit does not pass, pre-commit prevent the action.

🔝 Pushing changes

After pushing changes there are some checks that need to be passed in order to publish on npm. We manage the uploading status with CircleCI tool.

🔥 Finally

Once we pass all the jobs after push, our library will be published at NPM

¡Enjoy! :)