decred/pi-ui

Politeia UI library

pi-ui

Politeia UI library documentation

Install

Make sure you have nodejs 8+ and yarn or npm installed.

yarn

yarn add pi-ui

npm

npm install --save pi-ui

Usage

In the index file of your app make sure to import the styles for the lib:

• index.js:

import "pi-ui/dist/index.css";

• Component.js:

import React, { Component } from "react";

import { Button } from "pi-ui";

class Example extends Component {
  render() {
    return <Button />;
  }
}

Breakpoints

Pi-ui's custom breakpoints make use of the postcss-preset-env plugin. In order to use the breakpoints you have to add the plugin to your environment. For this, see the postcss install page.

In your postcss.config.js, you will have to importFrom pi-ui's export.css file. If you are developing with a linked pi-ui, import from your local pi-ui. Example:

const { resolveOwn } = require("../../utils");

module.exports = {
  plugins: [
    [
      "postcss-preset-env",
      {
        // When developing with a linked `pi-ui`
        // Point the importFrom to the path of the linked package in your env
        importFrom: resolveOwn("../../../../pi-ui/dist/exports.css")
      }
    ]
  ]
};

If you are developing with a npm/yarn installed pi-ui package, import from your node-modules. Example:

module.exports = {
  plugins: [
    [
      "postcss-preset-env",
      {
        // When developing with an installed `pi-ui`
        // Point the importFrom to the path of the package in your node_modules
        importFrom: "./node_modules/pi-ui/dist/exports.css"
      }
    ]
  ]
};

Developing

• Clone this repository

• Install all deps by running: yarn

• If you're developing only on pi-ui, serving the live documentation should be enough: yarn storybook

• If you want to see your changes reflected in a project consuming pi-ui, you can use yarn link:

  • Go to the pi-ui directory on your machine and run: yarn link
  • Go to the project using pi-ui and run: yarn link pi-ui

Troubleshooting: If you find some kind of incompatibility between react versions, link the react package from the main repository into pi-ui:

• Go to the main repository which is using the pi-ui lib, access the react folder inside its node_modules:
  • cd /some/project/node_modules/react && yarn link
  • cd /pi-ui && yarn link react

pi-ui's Issues

Replace status bar tooltip

Now we can replace it with our designed tooltip instead of the browser native one.

Improve Button component

• Create a small sized button
• Create an icon button with smaller paddings

Tab alternative view for mobile screens

We need an alternative view for tabs which looks more like a dropdown for screens which cannot fit all tabs.
Depends on #89

Buttons needs a loading state

The Button with a loading state displaying a spinner is vastly used on politeiagui. We need that option in the buttons component.

Add pre-set values for the card padding

Would be good to have a few pre-sets for card padding to use in the props API accordingly to the design specs.
Something like `paddingSize="small"|"medium"|"big".

Remove typography warnings for children

The typography components (H, P, etc) should not care what kind of children we are passing to it as a regular HTML tag wouldn't care.

Add fullWidth prop to Button

Would be great to have a boolean fullWidth prop to make Button fill all its parent's width.

Do not reduce button width while loading

The button should keep the width while displaying the 'Spinner'.

Granular layout components

We need some granular layout components to build custom "on-demand" layouts in the consumer repository. Those parts need to be based in the grid system to be responsive when composed. Something Like:

<Col width={3}>one third length col</Col>
<Col width={3}>one third length col</Col>
<Col width={6}>half length col</Col>

Info message is not displaying the icon

Add transition to Tabs component

The border transition on Tabs should be smoother

Add Link truncate example to the docs

Use name as a "identifier" property for text inputs instead of id

To ease the integration in the politeiagui repository would be better to have the name as a mandatory identifier property and then generate an internal ID for the field adding some random suffix. This wanted in order to avoid duplicated IDs in the DOM which can lead to bugs and dev alerts in the console.

Message: align left icon and the first line of text

Currently, the icon is positioned a bit higher than the first line. They should be vertically-center aligned.

Include h5 and h6 headings

Our headings currently only go from h1 to h4

Text input error should not increase the parent size

The space where the text input error will be displayed needs to be "reserved" even when it is hidden. That way it doesn't push other components down as it increases the parent div height.

Create number input

Compile warnings

Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade`
{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.

Authentication Pages layout

We're missing the layout for authentication context pages such as Login, Signup and Reset Password.

[Form] Add Vertical Spacing prop to control spaces between form elements

This Vertical Spacing prop was a suggestion from @fernandoabolafio on decred/politeiagui#1317:

What I thought of doing is to expose a prop in the LoginForm such as verticalSpacing which we can set a value to propagate the mentioned paddings accordingly.

As discussed with Fernando, we found out that the best way to coordinate those spaces between form elements is by having a prop that controls it.

For example, the following image describes a Vertical Spacing of 30px:

src/componentsv2/ModalLogin.jsx

Different layout template for authentication views

The authentication views (Login, Signup, etc) need a different layout than the one used for the other pages.

Correctly handle font assets

Right now we are bundling the font assets into javascript bundle and this isn't working for clients of this lib to have the font loaded. After spending a good amount of time on this problem I think we have two solutions available:

• Export the static assets and delegate to the consumer to import it as it, please. In that case, we copy the static assets we want the client to import into the dist folder.
• Add an option in the useTheme function to specify the font assets. That way, the consumer can import whatever font he wants and then pass the paths into the useTheme function which will then correctly link then with the library. Something along the lines:

const useTheme = (theme, fontSources) => {
    ...
}

Where the fontSources something like:

{
 regular: "fontSourcePathRegular",
 semiBold: "fontSourcePathString"
 light: "fontSourcePathLight"
}

Then from this fontSources object, the lib can generate the font-faces accordingly.

Update RadioButton style accordingly to design specs

The RadioButton needs to be modified accordingly to the design specs:
https://xd.adobe.com/spec/4e7eb732-a445-46b0-4f7e-4152097a10c8-384f/screen/c878836b-546e-40f1-89c2-57911c2c3161/Proposals-admin-search-1

Clicking in the input label doesn't activate the input

[Table] Minor Improvements

Textinput: error state

Need the option to display an error for the text input

Layout container needs a better API

A few things we should be able to accomplish passing props to the 'Container' component:

• Set header height
• Set the top banner height
• Set the spacing between main and top banner

Unable to use Modal

I cannot use Modals in another project. I get the following error:

Floating message box component

The lib needs a floating message box like the image linked below. I don't know if it is described anywhere else in the new design, but it will be a handy component to have on the lib.

Would be nice to have some default positioning options and a dismiss function callback.

It needs to hover on top of other components and layouts, so I'm not sure how complex this will be to do with the current implementation.

It is described by Maria in here.

Display Modal Properties Documentation

The documentation page is not currently showing displaying the 'Properties' of the Modal component. This is a bug and needs to be addressed

Modal wrapper props are not being forwarded to div tag

Yes/No in the Status Bar should be semi-bold

Dropdown component

Examples:

https://xd.adobe.com/spec/25f9f648-8d13-446f-75aa-242b21116f87-53c8/screen/b3b495bf-1d90-4a5d-bdd7-6161c74b8b6d/Proposal-details-logged-in-user-Opened-menu-Mobile

https://xd.adobe.com/spec/25f9f648-8d13-446f-75aa-242b21116f87-53c8/screen/0bca9b12-ad49-4bf7-b380-72172aac9d1a/Public-proposal-logged-in-user-Mobile-2

Status bar: colored bar needs to be relative to the amount of votes received

The status bar needs to be filled relatively to the total amount of votes it has received. Right now it always fills all the bar space.

Modal not responsive for smaller screens

The modal is not responsive for screens with less than 450px (approximately):

Page behind the modal has the scrollbar acessible

The scrollbar from the page behind the modal shouldn't be accessible when the modal is open.

Statusbar needs better rounding of percentage numbers

There is too many decimal digits:

[Button] Reduce size of small button to 13px

Coordination: components and general requirements

This issue compiles a list of the required components and other general requirements for the pi-ui library. This library should comply with this design specs.

This guide is separated by components. Each component in the list has a WCBF which stands for "Where can be found" in the design specs. The other bullets specify other minimal functional requirements of the component.

Atomic UI Components

• Tooltip
  WCBF: hovering the voting progress bar

• Mardkown text editor
  WCBF: submit proposal page / comments area
  Done on politeiagui

• Comment & Comments tree
  WCBF: proposal detail
  Done on politeiagui

• Select box
  WCBF: Sort comments
  Done on politeiagui

• Dropdown
  WCBF: Under username in the header (missing design spec)

• Text input
  WCBF: Inputs from login and signup forms

  • Errored/Valid state

• Search input box
  WCBF: search vote tickets

  • Errored state

• Button
  WCBF: submit button for login/signup forms

  • Handy primary and secondary options accordingly to the theme provided

• Card
  WCBF: proposal cards

• Tab selector
  WCBF: public proposal tabs

• Table
  WCBF: Account history

• Status tags
  WCBF: proposals cards status (approved, rejected, pending, etc)

• Link
  WCBF: bottom of login/signup forms

• Icon
  WCBF: proposal cards: comments link and github link

  • A JSX tag with ease specification of the available icons.

• Message
  WCBF: submit page error / cannot submit comments message

  • Error/Info/Warning

• Modal
  WCBF: welcome modal / purchase credits modal

• Progress bar
  WCBF: proposal cards voting results

Integration Components

• useTheme
  • A react hook that updates CSS properties according to the theme passed.

Layout components

• Grid
  • A functional grid system to create responsive views easily.
• Header
  • A simple and customisable header.
• Sidebar
  • A simple and customisable sidebar.
• Main Section
  • A wrapper for the app main section.
• Top Banner
  • A wrapper for the top banner section.

Resources

• Design specs: https://xd.adobe.com/spec/bc1e9ea4-9d6c-475a-741d-11f6a7e5d0eb-ca2f/
• Politeia redesign master issue: decred/dcrdesign#77

Dropdown: make custom trigger anchor clickable.

Currently dropwdown anchor for custom trigger isn't toggling the dropdown menu

Use correct error icon for text input

Textinput component is not using the correct error icon:

• Current:
  

• Expected:
  

Link hover effect should not affect size

The current effect on hover makes the link increase in size.

Add prop to make modal unclosable

We need a prop to control if the modal can be closed or not. This is especially useful when performing requests inside the modal.

Show tooltip with a feedback on CopyableText component

Missing status tag for abandoned

Icons request

• Error (times)
• Search
• Pending
• Waiting
• Copy to clipboard

Add "icon" option for modals

Many modals have an Icon on the left side of the title. We need a prop to set the icon used in the modal.

Examples:
https://xd.adobe.com/spec/25f9f648-8d13-446f-75aa-242b21116f87-53c8/screen/1be8cfed-81aa-4545-9866-74b6b961741b/Actions-history

https://xd.adobe.com/spec/25f9f648-8d13-446f-75aa-242b21116f87-53c8/screen/c80a8708-a0b6-4241-8cb8-7c83fa86be98/My-account-credits-purchase-more-credits-1-Desc

https://xd.adobe.com/spec/25f9f648-8d13-446f-75aa-242b21116f87-53c8/screen/414f7318-0a97-4b66-9014-7ecca9ddcc94/Registration-verification-1

Floating badge component

This component needs to expose an API for the consumer to select one of the following icons:

Example in the specs:

https://xd.adobe.com/spec/25f9f648-8d13-446f-75aa-242b21116f87-53c8/screen/573ae56d-a921-4fd7-a684-71c65bc60089/Create-proposal-file-attached-invalid-mime-type

https://xd.adobe.com/spec/25f9f648-8d13-446f-75aa-242b21116f87-53c8/screen/ad844292-79f7-470d-807b-8eb38324e9ca/Notification-example-1

https://xd.adobe.com/spec/25f9f648-8d13-446f-75aa-242b21116f87-53c8/screen/05b86566-f6c6-442f-9dc5-189ffa4b1ac2/Notification-example-2

https://xd.adobe.com/spec/25f9f648-8d13-446f-75aa-242b21116f87-53c8/screen/86f7490b-41dc-4cd7-8afe-b051e88ee1a1/Notification-example-3

Wrong font rendered on firefox

If you inspect the text it says the font is indeed "Source Sans Pro" however it is not what is rendered.

Default Paddings for Cards

Need at least 2 default padding for cards based on the design specs