massalabs/ui-kit

This repository contains all the frontend components available in all Massalabs products

Massa React TS ui-kit

Tech:

• React typescript
• tailwind

How to use it?

• npm install @massalabs/react-ui-kit -D
• update your tailwind configuration file tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@massalabs/react-ui-kit/src/**/*.{js,ts,jsx,tsx}",
  ],
  presets: [require("@massalabs/react-ui-kit/presets/massa-station-preset.js")],
};

• update your vite.config.ts file:

export default ({ mode }) => {
  ...
  return defineConfig({
    ...
    optimizeDeps: {
      include: ['react-dom', 'dot-object', 'copy-to-clipboard'],
    },

• import the global css in you main tsx file (main.tsx or App.tsx):

import "@massalabs/react-ui-kit/src/global.css";

• use the components:

import { Amount } from "@massalabs/react-ui-kit";

Contribute

You can add global CSS in src/global.css.

How to clean code

• use tailwind alias to avoid long className string
• create react function component: export function PrimaryButton(props: PrimaryButtonProps) {}
  • or export const PrimaryButton = (props: PrimaryButtonProps) => {}
• create one folder per component with
  • component
  • unit tests
  • storybook stories

Theme

To apply a theme, use the class theme-light or theme-dark. All nested elements will apply the theme.

See https://github.com/L-Blondy/tw-colors#nested-themes for details.

Massa's design system color palette in implemented in presets/massa-station-preset.js thanks to tw-colors plugin.

You can now use our custom colors thanks to className:

• <p className="bg-primary"></p>
• <p className="text-neutral"></p>

Create your own theme

You can create your own theme by creating a new file in the presets directory.

Copy this file https://github.com/massalabs/ui-kit/blob/main/presets/massa-station-preset.js.

Update the tailwind.config.js file to use your new theme to change preset:

  presets: [require('./src/themes/preset.js')],

Typography

All typographies are defined in the tailwind preset.

To use them, simple add the name of the typography in the className prefixed by mas-:

<h1 className="mas-banner">My title</h1>

Icons

Icons are imported via the react-icons library See https://react-icons.github.io/react-icons/ for details & https://github.com/react-icons/react-icons for specific use cases

ui-kit's Issues

Implementation of "spread props" in the PrimaryButton component

Context
For some components like the button, Frontend team want to avoid redefining some properties it receives.
For example, the click function does not need to be redefined inside the component to be applied.

To answer this problem, I will implement the concept of "spread props".

User flow
The user can click on a button to do an action like :

• go to a page
• valid operation on your wallet
• etc...

How to

1. Open the folder Buttons/primary/
2. Open file PrimaryButton.tsx and PrimaryButton.stories.tsx
   1. Code the button logic with implementation of spreading props (see technical details)
   2. Create the associate stories

Technical details

• Read the documentation for "spread props" (go at the end of page to see an example) : https://mortenbarklund.com/blog/react-typescript-props-spread/
• "Spread props" is represented by {...props} in the PrimaryButton.tsx file

wrong URL on the readme

Describe the bug
There is a URL error in the readme. In part "Icons". At the end of the readme.

Set Layout to Fixed position

Context
Set layout to fixed position on scroll

Create Plugin Store Card

Context
In order to display plugins available on the plugin store, we must have a plugin store card component

Technical details
We can either create a variation on the existing plugin component or create a dedicated component

Add new font color for disabled

Context

The white color for font disabled is missing.
So we can add it in theme.

How to

• open file presets/massa-station-preset.js
• add new theme entitled f-disabled-2 with color white in fonts category
• rename theme entitled f-disabled to f-disabled-1

Radio Button

Incorporate rounded in MassaToken

          I don't think we need the class. Just the size is enough. No!?

Originally posted by @mazmassa in massalabs/station-massa-wallet#277 (comment)

Buttons

Context
Create the Button component for the ui-kit.

• it can be in 2 forms :
  • #27
  • #28

How to

• Create component in the ui-kit
• Create Tests
• Create Stories

Technical details

• it can contain an icon on the left, on the right or even both
• it can contain text
• it can change color according to the theme
• it has different states :
  • default
  • hover
  • pressed
  • disabled

SwitchIconButton

Switch Icon

• is an Icon on left

• is a text on right

• You give to the component two icons , two text and a state

• Once click you change state , text and icon

add description component

dropdownListSelector

Drop Down List Selector:

• Is a Drop down Icon
• Is a Text aligned with the Icon
• Is a modal on click click of the Text or Icon
• The Modal contains a list of datas separated by a divider
  

Spinner

Context
Create Spinner component following the design.

User flow
User go on page but content from API is not load.
So a spinner is display to inform user about loading data.

Technical details
Follow those steps :

• create folder Spinner
• create Spinner.tsx file
• create Spinner.stories.tsx file
• create Spinner.test.tsx file
• create index.ts file to export Spinner component

Add selector

Context
In order to finish the wallet integration, adding the "Choose Acccount" component is a priority.

I will be implementing the account Selector as seen above. I will not be implementing the add account button as that is already being implemented.

User flow
The user clicks on the account they wish to access. On click, the user is directed the the wallet home page.

Technical details

• Export assets needed (arrow + massa token) & add them to svg folder
• Create button of the follwoing format : custom img | txt | img | text
• Implement the different state variations based on the currently selected theme
  

Important : the first img is a picto (profile picture) generated by the user, as default I will set it to a generic profile picto :

Add testing-library/jest-dom

Context
We can implement test to find a className in the ClasstList of a component.

How to

• Open test file (ex: PrimaryButton.test.tsx)
• Create a test following the same pattern as the others
  • Implement function "toHaveClass" to see if a class is present on the classList
  • Add the associate import (see technical details)

Technical details
Add this import at the top of the test file : import '@testing-library/jest-dom';

fix transaction component

Fix UI-Kit Layout with correct padding

Context

The layout in the current Ui-Kit has padding that is not conform to the design layout, we also need to think about the padding needed when there is the side panel, that willl take 48px

Note : there is currently a custom class, but I don't know if it will just add padding over current padding or if it is good practice

Design padding :

Current padding is 0

Note : tailwind does not have a 72px equivalent, closest is 64px or 80px so we will have to make a choice on that

Technical details
We can either :
/ set the padding to be 72 px horizontal and 48px vertical inside the components
/ Use the custom class and create a story for the use
/ set no padding and manually set the padding the our main tsx file

add Night mode component

Update the colors in the storybook

Context
the colors are not up to date in the storybook
User flow

list all the colors in the colors folder of the storybook
How to
update colors.tsx with the states, icols, and fonts
Technical details
N/A
QA testing
check the result in the colors section of the storybook

menuLinkWithIcon

Menu Link with Icon is this :

• It's a Link to switch to a page
• It's an icon placed on the left of the Link

IconNavigator

Context
We will implement IconNavigator :

User flow
You want to switch between pages with a navigator. Each page correspond to an icon in the navigator.

Ex:

Add Account Selector

Context
In order to finish the wallet integration, adding the "Choose Acccount" component is a priority.

I will be implementing the account Selector as seen above. I will not be implementing the add account button as that is already being implemented.

User flow
The user clicks on the account they wish to access. On click, the user is directed the the wallet home page.

Technical details

• Export assets needed (arrow + massa token) & add them to svg folder
• Create button of the follwoing format : custom img | txt | img | text
• Implement the different state variations based on the currently selected theme
  

Important : the first img is a picto (profile picture) generated by the user, as default I will set it to a generic profile picto :

SecondaryButton

-it can contain an icon on the left, on the right or even both
-it can contain text
-it can change color according to the theme
-it has different states :

• default
• hover
• pressed
• disabled

Add icons to ui-kit

Context
Add icons from design system to Ui-Kit so devs can start implementing components using icons

How to

• Create icons directory in /assets/svg
• Export each icon to to TSX
• Save TSX file in assets/svg dir
• Create Icons dir in /components
• Create and icon component, story & test

Technical details

The Icon component will take an imported tsx component as prop. this has to be done because the current version of react does not support svg import and dynamic modifications.

This is needed because we want to be able to switch the icon color easily without any need for duplicate imports.

If you have any question or need precisions on this choice please ping me.

Add alt theme colors

Context
Add colors for Bridge theme.

Technical details

• Add colors in preset folder
• Add new class in preset folder

fix for Dashboard

corresponding to this pr: massalabs/station#822

add PluginWallet component

add Dashboard component

This Dashboard receives component parameters and displays them. It fills the void with subdued images.

add component Transaction

similare to this component called "Selector":

SideBarContainer

Create the SideBar container component for the Wallet

Maybe we can swap this to the wallet project

add pagination component

fix description component

rework pluginWallet

TextArea

Context
Create a component enabling the user to enter text (e.g. a description) in a given zone.

User flow

• go on MassaStation
• go to the "Search" page to access deployed sites
• click on sidebar for upload a website
• enter a text in the "description"

Time
Predicted : 2H
Final : 3H

theme variant for AccountSelector

          Ohh I see! That's not good because we are changing the whole css template just for a button. We must fix that in ui-kit (with variants like in buttons) and then use it here.

I'll take care of that!

Originally posted by @mazmassa in massalabs/station-massa-wallet#277 (comment)

Add colors to the storybook

• Add the error & warning colors to the tailwing config
• Display the colors used for both light and dark themes on the storybook

add all components in index.ts

Describe the bug
imports of components are not detected by my frontend.

We must declare all components in the file:

Add Night Mode Button

Context
Frontend team needs to have a button to activate the Night Mode theme.

How To

1. Export Design System SVG's & store them in /assets
2. Create nightmodebutton folder in /buttons
3. Create nightmodebutton.tsx and corresponding .stories.tsx file
   4)Code the button UI & logic (see technical details)
   4)Export them to the Storybook

User flow
There are two themes :

• The user presses the moon icon to enable dark mode
• The user presses the sun icon to enable light mode

Technical details
Logic behind the switch between the two themes :

• Browsers local storage will store the current theme
• the component will use local storage theme variable to render itself

Create Tabs Component

Context
Create tabs component so we can implement the send coins page

User flow
When the user interacts with corresponding states : default, hover, actif

How to

• Create component folder
• Code Component
• Send to review

Technical details
Simple div with border that changes color with a corresponding state default, hover, actif

Wallet Send Screen Meta Issue

Context
The objective is to identify and develop all the components that need to be added to the ui-kit.

How to

• Create a global (send & receive compatible component) that will contain all of of the information that will be passed as a parameter in the Tabs component (this is a proposition what do you think @mazmassa @maxime-carabina @Thykof )

• Create Account Balance Component (To be defined)
  

• Verify if the input and dropdown can be combined for this component
  

• Define the percentage components and how it works ( @SlnPons @LucasF243 @mazmassa )
  

• Verify if the input component can take in a icon which opens the contact list modal
  

• Verify that the popup modal component is compatible (take components as param) with contact list and account list components

Toggle Light Mode

Describe the bug
When clicking on the light mode/dark mode toggle button, on the logo changes colors.

To Reproduce

1. web/massastation
2. npm run dev
3. open localhost link
4. click multiple time on the toggle

Expected behavior

It should toggle on the light and dark mode correctly

Screenshots

Enregistrement_de_lecran_2023-06-15_a_15.46.18.mov

Add Account Balance Component

Context
In order to develop the send/receive massa wallet we need to add the account balance component

User flow
Describe the user flow using user stories so the end result is super clear - PM

How to
List the step-by-step to get it do if needed - PM

Technical details
Give the technical insights so anyone in the team can tackle the tasks - Dev

QA testing
Does this task require some QA tests?
If yes, explain how to validate it

add typescript in jest config

fix DashboardStation

Add cypress

Context
Describe / explain why we should do this: motivations, context or other info. Keep it brief and simple - PM

User flow
Describe the user flow using user stories so the end result is super clear - PM

How to
List the step-by-step to get it do if needed - PM

Technical details
Give the technical insights so anyone in the team can tackle the tasks - Dev

QA testing
Does this task require some QA tests?
If yes, explain how to validate it

Add shareable tailwind preset and dark mode

Context
Describe / explain why we should do this: motivations, context or other info. Keep it brief and simple - PM

This repository is a ui kit for massa react frontend applications.

We need to add a way to share the tailwind config including them and dark mode.

User flow
Describe the user flow using user stories so the end result is super clear - PM

there will be 2 themes: dark and light. The user will be able to switch from one to the other. The default theme is dark.

The designed UI/UX might mix theme for component, meaning you can have a dark page with a light button in it. So we need a way to choose the theme per component.

How to
List the step-by-step to get it do if needed - PM

• create the preset
• populate the theme
• add documentation for how to use that in an application

Technical details
Give the technical insights so anyone in the team can tackle the tasks - Dev

preset will includes:

• fonts
• color themes (dark and light) with https://www.npmjs.com/package/tw-colors

Doc for the preset: https://tailwindcss.com/docs/presets

QA testing
Does this task require some QA tests?
If yes, explain how to validate it

• the doc is clear
• an application use the preset

fix icon button size

Context
The size of the icons for the primary and secondary buttons are not good.

How to
Set size of icon in Button.tsx file to 24px.

Add SVG Component

Context
This will be a component for the following specific uses cases :

&

How to

• Create add SVG folder in /Icons
• Create Svg component
• Write stories & test

Technical Details

The idea is to have a component with a div that will be the circle background. This background will change according to theme.
In this div a svg image will be passed as props and rendered as child. This SVG will has a static color.

Add Sidemenu

Context

• Create SideBar in the ui-kit
  Divide this into smaller components and smaller pr
• #19
• #22

For all of them :

• Create Tests for Sidebar components
• Create Stories for Sidebar components

How to
Create components in the ui-kit
Create Tests
Create Stories

Technical details
Responsive and Sharp

QA testing
Use Cypress if it's implemented
or
Ask for a dev to create a component "Test" to test it in another project outside of the ui-kit

Estimation
5-6 days with tests and stuffs like that

PrimaryButton

-it can contain an icon on the left, on the right or even both
-it can contain text
-it can change color according to the theme
-it has different states :

• default
• hover
• pressed
• disabled

server crashes if the store can't be fetched

Describe the bug
If the user doesn't have any connection, the server crashes because the store can't be fetched

to solve : replace the logger.fatal to logger.error if the store can't be fetched
To Reproduce

Steps to reproduce the behavior:
launch massastation without internet access

Expected behavior
launch normally

Screenshots

Version
0.2.4-dev
Additional context
Add any other context about the problem here.