Mermando 
The reason behind this project is the necessity to standarize the use of components inside GRVTY. Notice that this is a work in progress and will receive multiple changes, but don't worry, we will try to maintain the breaking-changes as minimized as possible.
What's in the box?! 🎁
⚡ Input-Atoms
These fellas have an internal standard to gather the values without any kind of external logic, meaning that you only pass a value and will receive a value, no more event.target.value, file async reading nor checked === 'on'. In-and-out, like it should have been since the first HTML standard was designed. Future: Validations for required and patterns, so you don't have to rely on the browser*.
What will you find in the Inputs folder?
- Input (for textareas, text, number, tags, colors, datetime-pickers, etc)
- InputsWrap
- FileInput
- CheckboxInput
- SelectInput
- RadioInput
- RadioGroup
* I am looking at you, Safari...
🔆 Lightboxes
- Lightbox
- TabbedLightbox (work in progress)
📌 Pages
🎫 Navbars
📜 Sections
Will have some breaking changes, consider this as the leprosy.
🔖 Sidebars
🌗 Progress bars
Hang in there cowboy. Coming soon.
🎉 Toastrs
Coming soon to the nearest theater in town.
Javascript
Mermando requires a configuration file to be importable for it to run*, the way it is being imported is like this: import Config from 'Config';. All the configurations are required and do not have fallbacks**
You need to be able to import a json file as "Config". In a webpack.config.js we do this by declaring the file inside the externals key. The configuration file is mere json from which the names of the icons will be pulled. The icons are used just like FontAwesome uses them***, you just need the prefix and the classNames to be used for each case.
Mermando has been tested with FontAwesome and with custom icon fonts created with IcoMoon.
* See the config-example.json in the project-root so you can create your own.
** Someday a fix will come our way, but this is not a priority.
*** Mermando displays the icons inside <span/> tags, while FontAwesome uses <i/> tags in their examples.
React
We try to use as much as possible the PureComponents to minimize the impact in memory and rendering. If something is not re-rendering, you might need to tweak the props you are passing to the components* or write your own components.
* This is an ugly quickfix for some cases: Replace prop={value} for prop={value || ''} or prop={value || null}. Not that this can impact severily in your memory, so be careful.
PostCSS
PostCSS is just so wonderful, we would marry the guy who is developing it*. Mermando is almost fully-configurable, you just need to declare a set of variables** and import the files you need. All the current variables are required (if you import its related file) and do not have fallbacks***.
Values are important
| Value | Description |
|---|---|
| EMs | This is the default unit type. THis will allow to be able to scale every component by just changing the font-size of its surrounding parent |
| Pixels | Can only be used for borders, box-shadows, outlines, navbars, sidebars, lines and ribbons |
| REMs | Used only for elements with position: fixed, these are modals, pages, lightboxes, toastrs, etc. |
* if @ai was a woman, this would be a true statement.
** See the settings-example.pcss in the project-root so you can create your own.
*** The fallbacks will never be included, because it creates duplicate css rules, which can make a really heavy file.
The future looks quite bright ... ☀️
These are some pending changes for Mermando:
- Avatar-input atom
- Image preview in file input, add name under the image
- Image preview in file input, add zoom when clicked
- Find a simple and fast way to validate multiple inputs when a form is submitted to display errors
- Remove "autocomplete" from forms.
- Make the top title, tabs and line fixed to the browser (as an option).
- Breadcrumbs design for pages
- Loading progress bars
- Fork the datetime-picker open-source project to fix the flickering, improve memory usage and minimize the rendering time.
- Merge the input atoms in a single component, so you can import that component without knowing the differences between all input components.
Hurt me plenty 
These are some issues in Mermando:
- Pages atom does not respect the position in Safari for iPad
- CSS Grid, minmax is not supported for Safari
- The 'required' icon for inputs is broken in Safari and Edge
- Topbar is misplaced for Edge
- The contextual and dropdown menus do not work as expected in Safari for iPad
Why is it taking so long?! 🕦
Here in GRVTY we aim for excellence, we are not a workshop. Right now we are developing this project by integrating it with other current projects, meaning that we cannot have breaking changes, everything must be optimized and be maintainable.
This might seem a simple package right now, but we are aiming to make an entire toolkit, if there is something you don't like or you need, please let us know or make a pull-request to this project. We love open-source and we love when quality goes up so, if you are reading this far, we love you too.
Made for you, with ❤️ from
