photoplant.component-library v0.1.0

Atoms -> Elements

Atoms are basically the smallest indivisible bits of UI. Think of buttons, links, inputs, etc. Going forward in this tutorial, we’ll call them “elements.” Remember we created the Button component and put it in the /elements directory? 💡

We’ll start our library by creating elements first. Once we have a enough, we’ll add a molecule. I like starting with elements because it keeps us from making our components overly complicated. Each element should be able to stand on its own. And we should be able to combine these elements to create molecules. Similar to legos, they should fit together out of the box. No power tools necessary. When we start building molecules, if something doesn’t fit properly, then we need to go back to our elements and reexamine their design.

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.

Okay, but what’s not a component then?

Good question. Thanks for asking. A navigation bar would not be considered a component by our definition. A navigation bar is more like an organism. It can have a lot of various components built into it, and it can vary pretty drastically depending on what it contains. A login form would be another example of an organism. It would probably contain a header, the actual labels, inputs, and button for the form, a reset password link, and the div wrapping all those elements.

Why not add organisms to the library?

Another great question. 🏆 There’s nothing wrong with adding organisms. But we should let those bubble up as they appear. The goal of this library is to create components that are easily extensible and reusable. If we start by building a lot of organisms, we’ll be constraining our users to only follow our particular patterns. We’re adding components so users can have quick access to consistent UI. But if they need something different, or don’t like our particular component, they can fall back to the elements and build their own easily.

Keep in mind there might be some occasions where it makes sense to add organisms. For example, let’s say you have three main applications for your business, and you would like a consistent login form for all of those apps. Great! Throw it in the lib!

Okay. now that we’ve covered a lot of the theory behind our library, we can get to the fun part and start building! 🛠

Title of the project
Brief description
How to get the project running locally
Running the linter
Running the test suite
How to contribute
Steps to submit a PR
How to raise issues
A link to the Code of Conduct
A changelog