React Color Scheme Library
Written by: Andrea Young & Nila Singh
A component library can be a very convenient thing to have for UI development. Most companies use component libraries because it is easy to customize, scale, and reuse components. It’s like a shortcut. What makes our component library special is the ability to choose different color schemes for the components that developers choose to use. The goal was to make component libraries even more efficient by taking all the thinking that goes into color coordination off the back of developers. Not everyone has an eye for design, but with our component library, we make it easy.
What is a component?
The general description of a component is an element that makes up a larger whole. For example, the components of a cake would be the individual ingredients used to create it. When thinking of web development, components can be seen as each element combined to create a web page. Compiling multiple components and storing them in a single location is known as a component library. Web developers use component libraries because it alleviates the repetition of previous code, speeds up web development with ready-to-use templates, and ensures that each instance of a component will be the same as its core.
Our library focuses on delivering ready-made component templates that are available in multiple color schemes to developers. When developing this library, we aimed to alleviate the amount of time it takes for developers to create webpages. We also had a secondary goal of providing prebuilt themes so that it would be simpler to visualize the result of a webpage. By utilizing our component library, developers can create quick and easy pages without the hassle of manually creating specific web page features. Additionally, it saves a considerable amount of time styling each component since they are already available in a variety of colors and sizes. We were also able to provide developers with the option to customize all components if there is an aspect they wished to alter.
Color Schemes
- Frozen 2
- Sunflower 1
- SanJuan 1
- Periwinkles 1
- Seafoam 1
- Spring 1
- Coral 1
Breadcrumbs
Our color scheme component library encompasses several colors as well as components that were initially created using Storybook UI. The navigational components included are breadcrumbs and a header. These components allow the user to traverse a webpage and locate specific sections. Developers have the option of customizing the number of breadcrumbs and header tabs needed, corresponding page links, text color, and tab color.
Button
Other interactional components include a button, dropdown menu, and modal. In addition to stylistic customization, these components can be assigned specific click functionality as well.
Input
A basic input component and search bar are also provided. However, unlike the input component which is available in all input types ranging from text to radio buttons, the search bar is strictly for text input.
Non-interactive Components
Nonresponsive components that were created for stylistic purposes include an icon, page, spinner, and border.
Wrappers
Lastly, a form and webpage wrapper component was added to provide additional customization and organization when combining components. For example, if a developer wanted to create a form, they could do so by utilizing the dropdown and input components.
- These components can then be passed to the form component which allows the developer to further specify options such as assigning a form id while keeping all the sub-components together in their own container. Each component is available in seven distinct color schemes.
Although our library focuses on providing prebuilt templates, developers are still given the option to customize specific details for each component such as their size, color, borders, and more.
File Structure
Our first step in developing this component library was to create a React application that would utilize Storybook UI. Our file structure consisted of two folders labeled components and stories. The components folder was responsible for holding the initial JavaScript “template” of each component that we created. Meanwhile, the stories folder consisted of .stories.js files that would correspond to each component within the components folder. These story files were responsible for specifying all the themes and how they would be applied to their respective .js files in the components folder.
Passing Props
To create our component files, we made sure to pass all relevant data in the form of props that would contain the customization details for any aspect of a component we wanted to allow a user to change. These aspects ranged from allowing the user to change specific section colors, sizing, and more. We then inserted these props into the main portion of our functions to style each component.
Storybook UI
Next, we created the stories for each component. Every story file contained the default settings for that component for each theme. Upon running our React application using Storybook commands we were able to see how each component with its individual themes looked. We used this method of viewing to fine-tune any styling and customization settings.
Transition to NPM Package
When styling was complete, we began transitioning our application from Storybook to a usable npm package. The main purpose of our library was being able to have a color theme. The best way we found to do so is by creating a context API, the first step in this process was creating another folder labeled context. Within this folder, we added ThemeContext.ts, ThemeProvider.tsx, and config.json files. In our ThemeContext.ts file, we created a context object, and in our case, we set it to null.
Because we are using typescript in our interface, for context, we had to specify all the properties that are being used by our ‘theme’. Which explains the importance of ThemeProvider.tsx. The provider component accepts a value that is able to consume all of the components that are children of the provider. In our case, the value would be the theme that a user decides to use. We have many themes that can be passed into a provider, so we created an object inside our provider that holds all themes and their proper color for all components. To make things easier and less repetitive, we created a config.json file which is also an object that holds all themes and their proper color for all components. We import our config file and use it in our provider and our component stories.
Roll Up
Since our component library is a library instead of an app, we had to take into consideration the proper tools to use for building our project into an npm package. At first, webpack was our initial choice but after conducting more research we quickly found rollup is best suited for the structure of our library. Here’s why. The most important advantage rollup had over webpack was the ability to build multiple modules into one file. Our component library has more than 8 components and if we used webpack it would individually wrap each module into a function causing a slower load up.
Building with rollup was pretty simple. Roll up takes in an entry file that will export all the components made up of our library. So, the first thing we did was create an index.ts file inside of our src folder, and imported and exported all of our components. After installing rollup, we needed to make a config file. Our library is written in typescript so it’s important that our config can support ESM and common.js modules for the use of end applications. We also had to specify the entry point for both ESM and common.js modules in our package.json.
After we added our build script to package.json and ran yarn build, roll up created a lib folder which generated the proper bundles for esm and common.js.
Publishing Library
The last thing we did was publish our library to npm. Using the command npm login we logged into our npm account and followed the prompts for our username and password. After logging in through the terminal we ran the command npm publish and our package was now ready to be imported and used in another application.
Below you can find the link to the NPM package and our project's repository!
Challenges
Component libraries can become large very quickly since there are many ways a design can be altered. Due to this it is important to recall that many component libraries do not include every single type of component or customization. This idea also applies to our color scheme library.
Although the library currently only includes seven color schemes, we alleviated this issue by giving the developer the option to customize component sizes, colors and more. By giving this freedom it increases the usability of our library while maintaining its purpose through default settings.
However, for developers in need of a component that is not included within the current library, we suggest using each component as a building block to create these more complex features. For example, to create a form you would utilize the input, button, dropdown menu and form wrapper. This allows you to have a form component without one being specifically included within the library.
Additionally, not every component gives the developer the option to resize to specific measurements. To alleviate this issue, we suggest placing elements within a div when custom resizing is necessary.
Future Features
With more time, we would include more components and color schemes to our library. Additional components that could be added include a fully built out form, a side navigation bar and effects such as element fading. Additional color schemes would include an array of more reds and neutrals.
