Components
Components library for the Blockchain.com ecosystem :ring: :fire:
Overview
The Components UI library, designed for the Blockchain.com ecosystem, provides a set of React-based components that simplify the development of web applications. Utilizing styled-components, this library includes both basic "atoms" and more intricate "molecules," offering developers flexible building blocks to create visually appealing and functional interfaces. Although it has been deprecated in favor of the Constellation library, it remains a robust choice for projects that still utilize it.
Getting started is a breeze with a simple npm installation, and its architecture is guided by Atomic Design principles. With a focus on code quality and cross-browser compatibility, this library is suitable for a wide array of projects.
Features
- Easy Installation: Quickly install the library using npm with a simple command:
npm i @blockchain-com/components. - Icon Support: Easily integrate FontAwesome, crypto, and custom icons using straightforward component syntax like
<Fas />or<Crypto... />. - Cross-Browser Compatibility: The components are designed to work smoothly across major web browsers and are responsive on any screen size, ensuring a great user experience.
- Atomic Design Architecture: Components are structured based on the Atomic Design methodology, making it easy to manage and scale your UI.
- Code Quality Tools: The library uses Prettier and Eslint for coding standards, alongside Jest and Enzyme for unit testing, ensuring high-quality and maintainable code.
- Development Tooling: Supports both npm and yarn for package management, making it flexible and adaptable to various development environments.
- Live Development Environment: Start the application in development mode using Storybook for easy access to the component library and live previews of changes.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Styled Components
Styled Components is a popular library for styling React components using CSS syntax. It allows you to write CSS in your JavaScript code, making it easier to create dynamic styles that are specific to each component.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Stylelint
Stylelint is a modern linter for CSS that helps you avoid errors and enforce consistent styling conventions. It provides rules for detecting errors and warnings, and can be configured to match your specific project's requirements.