02 / Component Block Library

Component Library

made with
  • JavaScript
  • Gulp
when
  • December - 2021
role
  • Designer
  • Developer
Logo of the component library

Introduction

With constant development and expansion of both The Valley their websites and respective components, a mismatch can occur in functionality between these components. This component library is to provide a proof-of-concept that: prevents/minimize functionality mismatches, by creating a centralized component registry. It describes how these components should be setup and has a demo environment with documentation and demonstration for these components.

Disclaimer: Due to the fact I made this project for a company I am not comfortable by making the GitHub repository public. I did however add a few code snippets on this page.

Dashboard homepage showing the documentation and list of components in the library

The Component Library

With the library I wanted to make sure that the development cycle and the usage of Git is the same as that of the websites, while also be able to have a centralized development platform where these components can be made. After researching different repository-structures, a decision had been made to use a “Poly-as-Mono” repository structure. This allows all components to be in a separated Git repository and have a separate node_modules folder, but still be able to be loaded into the same development platform. By using this we do not need multiple copies of Webpack, Gulp, and NPM development packages per component, which reduces the amount of data on your hard drive.

Code files overview of the component packageCode files overview of the entire project

Component Structure / Documentation

JSDoc, SCSS Doc, and, for the HTML, inline markdown syntax in combination with a separate Gulp task are used to document the code and make sure it can be written in the files itself. This kind of documentation will also be converted to HTML and put into the demo page. This way developers can check how the code work in the demo environment, without the need to navigate to the separate files. Also, the comments get converted to Markdown and saved in a separate file, so it can be easily read in the DevOps environment or GitHub repository.

Code in the component file that creates the documentationDashboard of the showing a specific component its documentation and demo

Demo Environment

The demo environment shows three parts. A demo showing the functionality of the code, the documentation of the code, and the documentation of the README.md file. The demo environment has been designed to look (almost) identical to The Valley their component documentation of the websites.

The documentation shown on the page is taken form inline comments in the component their JavaScript, SCSS, HTML files, and the ReadMe which is then formatted with gulp tasks.

Dashboard of the showing a specific component its documentation and demo

Next project

Previous project