cs-webshop-react-component-library
TypeScript icon, indicating that this package has built-in type declarations

1.0.7 • Public • Published

Webshop React Component Library

Table of Contents

  • Introduction: The purpose and scope of the Component Library, as well as the technologies used to build it.
  • Getting Started: A step-by-step guide on how to install and use the Component Library, as well as any prerequisites or dependencies.
  • Atomic Design: Atomic Design methodology and how it is used to organize the components in the library.
  • Storybook: How Storybook is used to develop and test the components in an isolated environment.
  • TypeScript: How TypeScript is used to improve code quality and maintainability, as well as how to use it in the Component Library.
  • Styled Components: How Styled Components is used to create reusable and composable UI elements, as well as how to use it in the Component Library.
  • Jest: How and why we use it to test the components inside the Component Library.
  • Component Library Architecture: The architecture of the Component Library, including the folder structure, naming conventions, and any design patterns or best practices used.
  • Component API: Each component in the library, including its name, props, description, usage examples, and any variations or customizations. Contributing: How to contribute to the Component Library, including how to report bugs, request features, and submit pull requests. Glossary: A glossary of any technical terms or concepts used in the documentation.

Introduction

Welcome to the Component Library documentation! This documentation provides a comprehensive guide
to using and contributing to the Component Library, which is a collection of reusable React components and styles designed to be used in the Webshop.

The Component Library is the single source of truth for all the components and styling in the Webshop. It is built using modern web technologies, including React, TypeScript, Storybook and Styled Components, and follows the Atomic Design methodology to organize the components into a hierarchy of reusable building blocks.

The Component Library is designed to be easy to use and customize, with a focus on consistency, scalability, and maintainability. It provides a standard set of UI components and styles that can be used across the entire Webshop project, as well as a framework for developing new components and customizing existing ones.

In this documentation, you will find detailed information on how to install and use the Component Library, as well as how to contribute to its development and maintenance.

Whether you are a new developer joining the project or an experienced developer looking to improve the quality and consistency of the UI, this documentation is a must-read for anyone working with the Component Library.

We hope you find this documentation useful, and welcome any feedback or contributions to help us improve it. Let's build better UI together!

Getting Started

To get started on your local machine with the Component Library follow this easy steps:

  1. clone this repo
  2. cd into your project and run the npm install command
  3. to start the project locally, use npm run storybook command (in case you need a .env file just ask one of the developers to provide it for you)

Atomic Design

The Atomic Design methodology is a design system approach that helps organize and structure UI components into a hierarchy of building blocks. This approach breaks down the design into smaller, more manageable parts, making it easier to create and maintain a consistent user interface.

In the Component Library, we use the Atomic Design methodology to organize the components into three (possible five) distinct levels, each with its own purpose and characteristics:

1. Atoms

Atoms are the smallest building blocks of the UI. They are the basic elements that cannot be broken down any further and are often used in other components. Examples of atoms include buttons, icons, inputs, and typography.

2. Molecules

Molecules are groups of atoms that work together to form a more complex component. They are simple, functional components that represent a single unit of UI. Examples of molecules include form fields, search bars, and navigation menus.

3. Organisms

Organisms are groups of molecules and atoms that work together to form a section of a user interface. They represent a more complex component and often contain several smaller components. Examples of organisms include product lists, carousels, and checkout forms.

4. Templates - not used yet

5. Pages - not used yet

By organizing the components into these levels, we can create a system that is both modular and scalable. The Atomic Design methodology allows us to reuse smaller components to create larger, more complex components, resulting in a more consistent and efficient UI design.

In the Component Library, each component is categorized into one of these levels, making it easy to find and use the components when building pages and templates. This approach also makes it easier to create new components and maintain consistency across the UI.

More on Atomic Design here.

Storybook

Storybook is a powerful tool that allows developers to develop, test, and showcase UI components in an isolated environment. It provides a dedicated UI development environment, which helps developers work on individual components without having to worry about the complexity of the entire application.

In the Component Library, we use Storybook to develop and test components in an isolated environment. This approach helps ensure that each component is fully functional and visually consistent before it is integrated into the e-commerce project.

How Storybook Works

Storybook is essentially a component explorer, where developers can view, test, and showcase UI components. It provides a web-based user interface that displays components in various states and configurations, making it easy to test and fine-tune components.

To use Storybook, developers write stories, which are essentially unit tests for UI components. Each story represents a single state or variation of a component, and can include various props and data that the component expects.

Developers can create multiple stories for each component, allowing them to test and showcase the component in various scenarios. This helps ensure that the component is flexible, robust, and fully functional.

In the Component Library, we use Storybook as an integral part of the development process, helping ensure that each component is fully tested and visually consistent before it is integrated into the Webshop.

TypeScript

TypeScript is a superset of JavaScript that adds optional static typing and other features to improve code quality and maintainability. By providing compile-time checks for type safety and other errors, TypeScript can help catch bugs and improve the reliability of your code.

In the Component Library, we use TypeScript to write type-safe code that is easier to maintain and debug. This allows us to catch errors early in the development process and reduce the risk of introducing bugs or inconsistencies into the Webshop project.

To use TypeScript in the Component Library, we simply write TypeScript code in our React components and compile it using the TypeScript compiler. The TypeScript compiler checks our code for syntax errors, type errors, and other issues, and provides helpful error messages to help us debug our code.

In addition to type safety, TypeScript also supports other features that can help improve code quality and maintainability, such as interfaces, generics, and more. These features can help reduce the amount of boilerplate code we need to write, as well as provide better documentation and readability.

Styled Components

Styled Components is a popular CSS-in-JS library that allows us to create reusable and composable UI elements with ease. By combining the power of JavaScript with CSS, Styled Components can help us write more maintainable, responsive, and dynamic styles for our React components.

In the Component Library, we use Styled Components to write reusable, composable, and easy-to-maintain UI elements that can be used across the entire Webshop project. This allows us to create a consistent visual language and design system, while also reducing the amount of CSS we need to write and maintain.

By adopting Styled Components, we can reduce the complexity and maintenance burden of managing separate CSS files, while also creating a consistent visual language and design system for our project.

Jest

Jest is a popular JavaScript testing framework that is widely used for testing React applications and components, including those in the Component Library.

In the Component Library, we use Jest to test our React components in an isolated and predictable environment. Jest provides a range of features that make it easy to write tests for our components, including:

  • Snapshot testing: Jest supports snapshot testing, which allows us to take a snapshot of a component's rendered output and compare it against a previously saved snapshot. This can help us quickly identify visual changes or regressions in our components.
  • Mocking and stubbing: Jest allows us to mock or stub out parts of our components or dependencies, making it easy to isolate and test specific parts of our code.
  • Test coverage: Jest provides built-in support for generating code coverage reports, which can help us identify areas of our code that are not being tested and ensure that our tests are comprehensive.

By using Jest to test our React components in the Component Library, we can ensure that our components are reliable, maintainable, and bug-free. This can help us identify issues early in the development process, reduce the amount of time required to fix bugs, and ensure that our Webshop project is of high quality and meets the needs of our users.

Package Sidebar

Install

npm i cs-webshop-react-component-library

Weekly Downloads

2

Version

1.0.7

License

MIT

Unpacked Size

835 kB

Total Files

188

Last publish

Collaborators

  • goonca