abastece-ui

Awesome React UI Kit

| Statements | Branches | Functions | Lines | | -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------- | | | | | |

Installation

Clone the repository, and install the dependencies by running the following commands:

  $ git clone https://gitlab.eai.com.br/project-grups/sites/ui-kit-front-web.git

Access the project on ui-kit-front-web directory:

  $ cd ui-kit-front-web

Access the develop branch:

 $ git checkout develop

pull all develop changes:

 $ git pull origin develop

then install all dependencies :

 $ yarn # npm install

Running and testing the application

Access the project folder and run the following command:

Run Storybook

$ yarn start # npm run storybook

Run tests

$ yarn test # npm run test

Building the application

Build Storybook

$ yarn storybook:export # npm run storybook:export

Build Project

yarn prepublishOnly # npm run prepublishOnly

Coding Conventions

• Interfaces for React Components have to be named (ComponentName)Props
  • e.g - Component const App = ({text}) => <div>{text}</div>
  • e.g - Interface interface AppProps { text: string }
• All other Interfaces should be CamelCase version of the name of the function or object
• Only add the prefix I if there is no other Choice
  • e.g - Function addStyles() => {}
  • e.g - Interface interface AddStyles {}
• Do not use the type any, opt for unknown.
• Limit the use of classes but instead opt for pure single purpose functions.
• Rely on composability to deal with complexity
• Prefer Async/Await syntax over .chain with then.catch
• Separation of concerns in React
  • Defer logic to hooks and HOCs
  • Page state should be stored in a context API
  • Local state should be stored in component
  • Keep components as simple as possible so they can be more modular

How to make a Commit

To make a commit must be used a following rule:

git commit -m "*type*: commit-message"

• Where type is: [ Feature, Fix, Improvement ]

How to Contribute

• Fetch/Pull the Development Branch
• Create a Branch based on your type and issue name
  • e.g - Branch name is Feature-readme
  • e.g - Branch name is Fix-styleButton
• Once done push your branch to origin and submit a MR to the Development branch for code review
  • e.g - git push origin Feature-readme

How to test it before publishing

• Run the command yarn lint in abastece-ui's root folder
• Run yarn lint "abastece-ui" on the target project, e.g. a Next.js project
• With the target project running, you may update abastece-ui's code by running yarn build:link and wait for the target's project hot reloading/fast refreshing.

License

MIT © Abastece-aí

Abastece-ui