Eskolare UI-Dashboard

Eskolare User Interface Package

This package was created to be used with Eskolare applications in order to mantain 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-dashboard.git.
2. Enter into the package folder after clonned 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 clonned and run npm install and after npm link eskolare-ui-dashboard.
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-dashboard' to use in your code.
6. Remeber to use in your local package folder the command npm run build:watch to recompile after changes when working with components, and use npm run sass:watch in a different terminal to watch changes into .scss files. You can also split your terminal and run npm run eslint:watch to know if we have any syntax errors right away.

How to Publish

After a new version is ready, commited at GitHub, it is time to publish to npm and make the package available to npm install eskolare-ui-dashboard 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.