Introduction

It's good to share when you can

We all know this phrase “Standing on the shoulders of giants” (Latin: nanos gigantum humeris insidentes) expresses the meaning of "discovering truth by building on previous discoveries") and we constantly rely on someone else’s work when we build our own projects. Often times we do not really think about it, but every time we build something even if it is something small like a “hello world” project, we use someone else’s work. Probably only when you make a switch and turn a lamp on, you rely on your own … but even then, you rely on the discovery of the electricity.

Often times we do not really think about it, but every time we build something ... we use someone else’s work.

-- almost every developer

So, in the understanding of the whole open source world, we consume packages, libraries, modules written by someone else and given to all of us without any cost to build awesome stuff.

I had it stuck in my mind that eventually I have to start giving away and help someone else like I get help from someone else. “Give, and it will be given to you”. I am a strong believer that sharing knowledge or helping others gives an enormous feeling of satisfaction to the one.

“Give, and it will be given to you”

-- every positive thinker

So, let’s stop with the philosophical thesis and start talking about the thing that I did.

Something hidden in the drawer?

A well forgoten repository hositng stuff others can use

I had developed a simple nice looking admin system for my side projects using AngularJS, Node and MongoDB and for quite some time I had it in one private repository sitting and waiting for the next project it can be used.

On the back of my head I had this idea of publishing something to the world and naturally I came to the idea to break down this administration system into a library of React user interface (UI) components and the Admin System itself using these components. And of course both of them to be published to the world. It was work I’ve done sitting and waiting in a repository somewhere almost hidden as a gold treasure which deserves to be given away in a form of a NPM package for the others to use.

What I did and how I did it?

Short information about building the NPM package

I used a the React component library CLI tool npx create-react-library to create an empty library and started building component after component. Most of the components are pretty presentational meaning that they are just HTML elements styled nicely giving the control back to the developers using them. I was able to separate a Button, a Popup, a List, a Card and so on … and then I made a Wrapper component that will just style all the elements it is closing with the proper styling to give them the look I wanted.

But that was the quickest part as many of you know. Then comes the kind-of-boring part of writing the documentation. The editor I use (Visual Studio Code) has a built-in preview function of the current file that you edit, so it was easy to see the markdown file for the package (README.md) in the way people will be reading it. You know how it is, prop after prop, type after type you try to describe everything with the best set of words so it’s not that tedious to read and at the same time to list every possible usage case.

So after writing the documentation I had to make a simple demo page so that people can see how all the components work. The project was setup very nicely having an example folder where you can place a simple React app. You can import your components and setup something nice and present your components to the users.

Of course you have everything well connected ...
in your head ...
... for now

-- amost every developer

Of course you have everything well connected in your head .. for now. You know every single loop, every single variable or method. But it will not be like that few weeks from now. Your mind will be winded up to some other projects and if you get back to the code you have to spend quite some time to remember what you did here, there and also .. why you did it this way?

So comments in the code are as important as the code itself. And I still have to write them, but I’m more keen to write about this new NPM package first. However I will write the comments this weekend since I still have them in my mind.

I named the library "Simple Admin UI" since this is really a simple UI library comparing it to Bootstrap, Ant.Design or Material UI. It’s just a bunch of simple components to be used in a standard admin system.

So, after filling the right information to the package.json file and simple npm publish I had it all uploaded and published for the world to see as well as the demo page published to the GiHub pages of the repository.

So, without further due I want to present you the simplest admin UI components library “Simple Admin UI”.

OK, OK, but where is it?

Where you can find the NPM package

You can find the NPM package here:
https://www.npmjs.com/package/smpladminui

And the demo page here:
https://mardonchev.github.io/smpladminui/

Conclusion

Any final thoughts on this article?

I plan to start working on a React version of my simple admin system on Monday (hopefully). Will make it using this NPM package and Firebase for a backend .. will post here when it is ready.

Of course, all the comments, constructive critique and questions are welcome as always.

If you want to publish your own NPM react components, you can follow this nicely written article on the topic:
https://itnext.io/create-and-publish-a-react-component-library-the-easy-way-6d1798974bc6

Note to self

Write down the comments and keep the work on this thing.