centrifuge / axis Goto Github PK

Create OptionalSection Component.

• it should be a Box wraper
• has 2 props title-> value of the title, optional->Object = {text:"name of the label",collapsed:true}

<Section title="Testing Section title" optional={{text:"toggle section",collapsed:true}}>

• Axis theme should allow configuration :
  • Title(What type of heading is used, color, size)
  • Box(Size, bgColor, etc. See box options)

section: {
 // heading has props for the heading of the section
   heading: {
     level: 3,
     gap: "medium"
   },
  // border for section
   border: {
     side: "bottom",
     size: "xsmall",
     color: "gray"
   }
 }

I gave this a shot in: https://github.com/centrifuge/tinlake-ui/blob/7b66e9464664d9057abc28bdbccfe0eddcf74106/components/NumberInput/index.tsx

Enable to copy other content than the content displayed, when clicking on copy, e.g. copy the CF ID when user name is displayed

Axis should have a Modal component that abstract Grommets Layer Api to
https://gallery.io/projects/MCHbtQVoQ2HCZZBD5y0MRWss/files/MCHtA7U1iMGr6xdNBJ3f4-jW9nTynWkNYjg

1. The Modal component should have it's own package
2. Axis theme should have the ability to override the modal theme. The theme object should have a modal prop which contains all the theming options and support the extend option.

modal: {
  icons: {
    close: 
  },
 title: {
  level:1,
  size:"medium",
  color
 },
 [layer options it can override]
 extend:
}

Axis theme should override the grommet table styles to look like https://gallery.io/projects/MCHbtQVoQ2HCZZBD5y0MRWss/files/MCEJu8Y2hyDScRuo7jMxBagbNPzuiX-jMBA.

currently v5 is in RC6

https://github.com/storybooks/storybook

We need a set common widgets to use in our UIs that represent ERC20 balances and amount both to modify and read values. It's important that they don't round any inputs and have arbitrary precision (that goes beyond javascript's standard 64bit numbers). You should be able to specify a number of digits to display with a property on the react component.

It might be worthwhile to look into how gnosis safe implemented some of their widgets: https://github.com/gnosis/safe-react

The bold text is the widget description and not part of the wireframe of the widget:

erc20_amount_widget.pdf

I think we should open source this soon. Things to do before:

• README should have a list to the deployed version.
• Add Code of Conduct
• Add MIT License
• Add a description to README of the goals of axis

This needs to be broken up in multiple items
https://gallery.io/projects/MCHbtQVoQ2HCZZBD5y0MRWss/files/MCEJu8Y2hyDScdgmKtK2ky6aXWMIf-FuG8E

Define all sizing for all level -> size Headings in Axis Theme

https://storybook.grommet.io/?selectedKind=Heading&selectedStory=All&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Fstories%2Fstories-panel

See https://github.com/philipstanislaus/tinlake-ui/blob/377599020f91211f6a6cfdaa2b76f34b7274f0b5/components/StyledApp/index.tsx for a workaround that can be copied here to fix this.

Axis should have a FormField section in the story book similar to the one in grommet where we showcase all the form controls inside the FormField

Mockups:
https://gallery.io/projects/MCHbtQVoQ2HCZZBD5y0MRWss/files/MCHtA7U1iMGr6-AgNeF29StCvG1QRxMEPsw

• Checkboxes
• Radio buttons

We need a set common widgets to use in our UIs that represent ERC20 and ERC721 assets, balances and amount both to modify and read values.

Decimal Widgets:

• It's important that they don't round any inputs and have arbitrary precision (that goes beyond javascript's standard 64bit numbers)
• You should be able to specify a number of digits to display with a property

The bold text is the widget description and not part of the wireframe of the widget

It might be worthwhile to look into how gnosis safe implemented some of their widgets: https://github.com/gnosis/safe-react

The DatePicker should compose the following grommet components:

1. TextInput
2. Drop
3. Calendar

The component should follow the Architecture from grommet's Select Component
https://github.com/grommet/grommet/tree/master/src/js/components/Select