eskolare-ui

Eskolare User Interface Package

This package was created to be used with Eskolare applications in order to keep standards regarding user interface.

It uses the concept of Atomic Design principles to our library structure.

• Atoms -> Elements: Atoms are basically the smallest indivisible bits of UI. Think of buttons, links, inputs, etc.
• Molecules -> Components: As I alluded to above, molecules are simple and distinct combinations of atoms. Going forward we’ll call these, you guessed it, “components”. The word “component” is very natural for the React world, but we’ll be using it in a specific way. An example would be a search field, which is a combination of a label, an input, and a button. Another example would be a dropdown list, which consists of a button (to toggle the dropdown) a list, and list items.
• Organisms -> Containers: Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface. Organisms can consist of similar and/or different molecule types. For example, a masthead organism might consist of diverse components like a logo, primary navigation, search form, and list of social media channels.
• Templates: Templates consist mostly of groups of organisms stitched together to form pages. It’s here where we start to see the design coming together and start seeing things like layout in action.

How to Develop With It

Follow the steps to have this package available during your development in other projects:

1. Clone this package to your development folder git clone https://github.com/eskolare/eskolare-ui.git.
2. Enter into the package folder after cloned and run npm install and after npm link.
3. Clone your development project, for example, the landing page using git clone https://github.com/eskolare/landing-frontend.git.
4. Enter into the project development folder after cloned and run npm install and after npm link eskolare-ui.
5. Well done! Your development project is now linked to your local library and ready for development. You only have to use import [Something] from 'eskolare-ui' to use in your code.

How to Publish

After a new version is ready, committed at GitHub, it is time to publish to npm and make the package available to npm install eskolare-ui in your project development.

1. Use the command npm version patch to update your version
2. Publish using npm publish

Remember that the user that is publishing need to have permission to do it.