/ CryptoFi Component Library v1.2.0

Welcome to the CryptoFi Component Library! This library contains a set of reusable React components designed for various applications within CryptoFi.

Getting Started

To run the CryptoFi Component Library locally and explore its components using Storybook, follow the steps below:

Clone the Repository

You can clone the repository from GitHub using the following command:

git clone https://github.com/CryptoFi-LLC/cryptofi-component-library.git

Install Dependencies

Navigate to the project directory in your terminal (use cd cryptofi-component-library) and install all required dependencies using the following command:

yarn install

Run Storybook to test components

After installing the dependencies, start the Storybook UI by running the following command:

yarn storybook

This will open the Storybook UI in your default browser, accessible at http://localhost:6006. The Storybook UI serves as documentation for the various components in the CryptoFi Component Library. It allows you to interact with and test the components, while also providing details about the available options for each component.

Test components within other projects (local)

If you wish to test the components locally within your repo without having to install the npm package and depend on the latest package upload, you can do so by running the next two commands:

yarn build && yarn pack

This will create a package file containing the entire library, to then be placed within the project's root folder and be called for on the project's package.json like this:

"cryptofi-component-library": "file:./cryptofi-component-library-vX.X.X.tgz",

Make sure that you're calling the correct path for the file. Once you've done that, you can yarn install on the project, which will trigger the library to install on the project, therefore making any component callable within any project file like this:

import { AnyComponent } from 'cryptofi-component-library'

Test components within other projects

To test the library or directly use it, add the library package to the project's repository by running this command:

yarn add cryptofi-component-library@latest

And then importing any component from the library:

import { AnyComponent } from 'cryptofi-component-library'

Components

The CryptoFi Component Library currently includes the following components:

Atoms

• Button: A group of customizable button components that can be used throughout your React applications. (PrimaryButton, SecondaryButton, TertiaryButton, AlertButton & PlainButton)
• Typography: A set of two typography elements to maintain consistent text styling. (Content small/default, Title small/default/large)
• Icon: An icon library for adding visual elements to your UI.

Molecules

• Accordion: A versatile accordion component for organizing content and reducing clutter.
• Navigation: The Navigation component is a versatile sidebar navigation that can adapt to different screen sizes.
• Notification / Banner: The Banner component is used to display various types of banners with optional actions.

Layout

• Topbar: The Topbar component is a simple user interface element that is typically placed at the top of a web or mobile application.
• Bottombar: These are meant to be used in full page layouts, smaller items, modals, etc.
• Empty State: This component is meant to be used within any error page, empty page or congratulations sections.
• Wrapper: These are meant to be used in full page layouts and smaller items to keep content consistently housed within containers.

Form

These are meant to be used in form groups as well as individually, depending the case scenario.

• Textfield
• Select
• Checkbox
• Toggle

Helpers

• Pills: The Pill component is a versatile UI element for displaying content in a pill-shaped container.
• Tooltip: The Navigation component is a versatile sidebar navigation that can adapt to different screen sizes.

Note: The current version of the CryptoFi Component Library is focused on providing a limited number of components. We are currently focused on the testing of the library.