Description

A date picker needs to be added. The chosen package should allow for a custom layout preferably

The text entry part of the date picker should use the TextInput component

A Formik wrapped version needs to be generated

Figma

The current implementation of the Spinner component uses an import * from "react-spinner"

This is not optimal for bundle size and will cause trouble for Webpack/Rollup tree-shaking

Investigate ways to use dynamic imports to load the correct component dynamically.

Description

Theme provider for Styled Components needs to be generated.

• Theme object must have a type (#21 This describes the object)
• A template component must be created
• Template component must show how Theme object types are being used
• Investigate having mixin's/helper functions provided through Stylecomponents
• Dark/Light mode must be possible

The currently used MUI theme provider does not seem to be injecting the theme correctly to the create style function. This needs to be resolved.

Description

The upload component needs styling updates to match the theme, a Formik wrapper needs to be created

Figma

https://www.figma.com/file/wRMGqc11iQLVpDVmqXVXWK/ChainSafe-Files---Dev?node-id=0%3A1757

Description

A general text input which is compliant with Formik needs to be created, based on the designs, a label element should be the root component in order to capture the clicks, there will be several variants and will have an error state based on the Formik props

The variants are:

• Text
• Number
• Password
• Phone
• Email

The main export needs to be renamed

Enable a monorepo with the various UI's (imploy, files, notes/docs) as well a common package

Description

A generalised Switch needs to be created, a decision between toggling between to provided values or a simple boolean will need to be made.

CSS direction

The sizing of the switch dot should be set using
height: calc(${heightOfSwitch} - ${marginVariable * 2})
width: calc(${heightOfSwitch} - ${marginVariable * 2})

Shadows should be taken/updated from the Theme object, which was added with the Paper component PR

Pressed state should be mapped to the :hover state

Left & right labels should be hidden on small variant

Positioning of the dot should utilize transform based centering:

root: {
    position: "relative",
},
dot: {
   position: "absolute"
   transform: "translate(0, -50%)"
   left: marginVariable
   "&.on": {
      left: "50%"
   }
}

Figma

https://www.figma.com/file/wRMGqc11iQLVpDVmqXVXWK/ChainSafe-Files---Dev?node-id=0%3A1683

Description

Breadcrumb needs an option to have a dropdown of links as an ICrumb option

Description

Configured router components need to be generated, this would include types & interfaces for the routes, a protected/public route component.

• A route URL string management file needs to be created
• IRoute interface needs to be generated to define routes
• Configured router wrapper needs to be created to manage redirecting for Protected/public/404 pages
• Relevant navigation helpers should be added

@FSM1 Will be supporting for this task

Description

A Slider component needs to be implemented, its recommended to use a package if lightweight, however if a manual approach is prefered @RyRy79261 has suggestions for extracting drag positions from onDrag events and applying them to the slider elements

Figma

https://www.figma.com/file/wRMGqc11iQLVpDVmqXVXWK/ChainSafe-Files---Dev?node-id=0%3A1741

Description

A general drop down selector must be created, the change of the chevron arrow will rotate clockwise at a standard transform transition (200ms)

Interfaces

interface IOption {
   key: string
   value: any
}

Requirements

• Must have a onChange prop of type (option: IOption) => void
• Must have prop options of type IOption[]
• Must have optional prop of current of type IOption - This will default to { key: 'Please select', value: undefined }

Description

The config object needs to contain the following:

• Typography styles
• General spacing size
• General animations
• General margins
• Colors
• Constants
• Breakpoints

Additional

• Global styling object to be destructured & injected
• Mixins (Basically a map of helpers)

Reference code is avaliable

@RyRy79261 Is support for this ticket

Description

A Formik compatible checkbox needs to be created, a transition animation of 200ms should be used for the change of state

Description

A standardised expansion panel needs to be created, it will have a variant prop with 2 options: expansion & accordion, the former allows multiple to be open at once, and the latter only 1 section at a time.

This variation can be broken up into individual components if complexity becomes too large

This component will have 2 subcomponents:

A Title(A more contextual name should be used) component which is the heading of the section, this component will have the chevron and click events added, the children of this component will be the text in the design. The active state of this rotates the chevron

A Content(A more contextual name should be used) component which has an active state which expands the content, this should animate using the standard translate timing of 400ms

Requirements

• Root Expansion/Accordion component

• Root has variant prop of type 'expansion' | 'accordion'

• Root binds Title component click to expand Content component

• Root manages an active

• Title component

• Title component has active prop

• Title active state changes styling

• Content component

• Content component has active prop

• Content component active state expands component to display

• Content active state is animated by 400ms

@RyRy79261 to provide support

I recommend a pair session for this due to the wide scope and potential complexity

Description

A scroll area wrapper needs to be created, it will take a className prop.

This should implement simplebar-react for now, the api does not need to be exposed

Description

Mirroring CssBaseline, global styles should be injected

Description

A general implementation of an identicon wrapped component, considerations around sizing, positioning and general configuration needs to be addressed.

• Defaults should be explicit for identicons api
• className should be injected

Description

A generalised typography component needs to be implemented

Tasks:

• Props must allow HTML component selection
• Props must allow Style selection - variant
• Props must allow optional className to inject class names
• Props must allow optional onClick function to be injected
• Variants must pull directly from the theme object

Description

A simple input field with a search icon at the end, this should accept a onChange function of (input: string) => void

Requirements

• Required onChange prop
• Focused styling

Description

Emoji's need to be implemented, the can be taken as is from File's UI

@RyRy79261 Will be support on this task

Description

A toaster implementation needs to be created, it must be callable from any part of the app. There should be a default config stored within the module and this config should be exported.

• Toaster module created
• Default config created & exported
• Toaster is callable from any part of consuming codebase

@FSM1 Will provide support on this task

Description

A file input which works with Formik needs to be generated, there will be 2 variants, dropzone & filepicker, there should be an optional file extension filter (This would be validated in Yup which is out of scope of this componet but for filtering in the file picker)

This will need to have an error state as well as error message area

Props

• className: string
• variant: dropzone | filepicker
• Formik: FormikProps

Designs
Dropzone: https://www.figma.com/file/wRMGqc11iQLVpDVmqXVXWK/ChainSafe-Files?node-id=295%3A6498
Filepicker: (@tanmoytb to advise)

@FSM1 @tanmoytb I would suggest that because you both have indepth knowledge of either the designs & current implementation & Formik that this would be a good pair opportunity

Description

A spinner component should be generated to wrap (https://www.davidhu.io/react-spinners/)

• Spinner component should expose react-spinners api as optionals with general defaults
• Should allow for injection of className

Description

A custom number input variant needs to be generated, in order to achive the custom increment buttons, this will need to be created.

Systems when provided on an input element `type="number" generally provide built in UI, this will need to be hidden behind the design.

Figma

https://www.figma.com/file/wRMGqc11iQLVpDVmqXVXWK/ChainSafe-Files---Dev?node-id=0%3A1605

Description

A standard layout component should be generated, this component should utilize grid and allow for combinations of vertical column configurations.

The variants will set the grid settings which should use variable values rather than fixed
Fullsize will simply make the layout attempt to take up its parent container

Props

• className
• variant: single | two | three | 20-70 (@tanmoytb please advise options)
• spacing: none | regular | number
• fullsize: boolean

@RyRy79261 will provide support on this

Description

A rating component needs to be created, @RyRy79261 has a pure css approach for this

A Formik wrapped version needs to be generated as well

CSS direction

The visual states will be managed by CSS hover & sibling selectors, the right hand side of the star will be the first element in the star element, thus by hovering, styling can be applied to all subsequent sibling elements, the actual svg element within the star will be the last element.

The right hand side will apply full star styling during hover, whilst the left side will apply half.

Both elements will have onClick functions to set the values

Figma

https://www.figma.com/file/wRMGqc11iQLVpDVmqXVXWK/ChainSafe-Files---Dev?node-id=0%3A5129

Context should instantiate an API client. Any parameters needed for instantiation should be passed in via props.

The context value should be accessible using a useContext wrapper hook.

Description

SVG parsing needs to be wired into Webpack as well as creating an icon reference element

The file will be stored according to #7

• Icon component must import SVG
• Icon component must export to a shared export (@FSM1 to advise on this)

@RyRy79261 will be support on this task

Description

A generalised Table component needs to be generated, I am unsure of the best approach to use in defining a table components specifications, in this instance we should be follow Material-UI's implementation as well as our existing code

@RyRy79261 @FSM1 Are able to support on this

Storybook should use the same themeProvider as the apps, to enable visually testing the same component with multiple themes.

https://github.com/semoal/themeprovider-storybook looks like a potential solution

Update: https://www.npmjs.com/package/@storybook/addon-contexts seems like a more generalised and effective solution

Description

Tables component needs styling updates to match Figma

Description

Update variants to match the Figma designs

Description

A breadcrumb component should be implemented.
In order to be generalised, this will accept an array of type Crumb, if onClick is present, display as Link

type Crumb {
   text: string
   onClick?: () => void
}

• Breadcrumb allows for injecting className
• Breadcrumb has prop crumbs, crumbs accepts Crumbs[]

@RyRy79261 Will be support on this task

Description

To allow for increased ease of use, an optional maxWidth prop needs to be added which sets the inner element to have said prop as a style property

Description

A button element needs to be generate and stored as per #7

This button will take the following props

• Size: large regular small regular is default
• Variant: primary secondary tertiary standard is default
• onClick: () => void
• className
• active which sets a disabled styling/class
• loading this indicates if a spinner should be active or not

The children of this component will be the text, which will be wrapped in a Typography component

The variants should be mapped to the settings in the them

Code references exist

Description

A Generalised Paper/Card component needs to be generated which uses the theme's standard box shadow

@FSM1 & @RyRy79261 Can provide support on this ticket

Description

A generalised comment presentation component needs to be created, the reply editor requires the #112 & #113 to be completed

Figma

https://www.figma.com/file/wRMGqc11iQLVpDVmqXVXWK/ChainSafe-Files---Dev?node-id=0%3A1790

Implement an error logging system

Description

A generalised avatar component needs to be generated, the contents should be set using children and if an icon, take up a small space, if an image full space

Figma

https://www.figma.com/file/wRMGqc11iQLVpDVmqXVXWK/ChainSafe-Files---Dev?node-id=0%3A1765

Currently the Error Boundary fallback component is hard-coded and unstyled. This should be updated to use the styling solution we are using for the remainder of the app. See files-ui/src/app.tsx for the current implementation.

Description

Extraction of the theme variable constants needs to be pulled across into the default theme

We need a place to test and work with components, while these are in development at the common package level.

Storybook is an option, but we should investigate whether there are other options?

Description

A modal component needs to be created to allow the user to wrap any child elements in a full functioning modal.

• Modal should allow for optional external state control (Prop: active)
• Use a clickaway hook
• Modal should allow for injecting className
• Modal should allow for disabling click away with prop: clickaway which is set default to true
• Modal should allow configuration of Closing icon to be left, right or none defaulting to right
• Modal should use percentage positioning + relative transform centering pattern for inner
• Modal should have not default padding

Description

A text area component needs to be styled n wrapped, a Formik implementation needs to be created as well

Figma

https://www.figma.com/file/wRMGqc11iQLVpDVmqXVXWK/ChainSafe-Files---Dev?node-id=0%3A1592

Description

A Dialog component needs to be created to allow the user to wrap any child elements in a locked state dialog

Consider wrapping the modal component from #8

• Dialog should allow for optional external state control (Prop: active)
• Dialog should allow for injecting className
• Dialog should use percentage positioning + relative transform centering pattern for inner
• Dialog should have not default padding

Description

Link styling needs to be included in the global styling in #21

Description

WIP Notice: @tanmoytb @FSM1 Please comment on the structure proposed below

The folder structure needs to be set up to categorize & taxonomize components in an easy to navigate way

High level

• Components (Composable components, theme elements, form elements, icons, small scope elements)
• Providers (React Context API Wrappers, etc)
• Modules (Billing modules, Login modules, basically shared wide scope/opinionated components)
• Theme (Actual theme definitions)

Component sub folders

• Icons
• Emoji
• Layouts (General grids, general page layouts)
• *Elements (Buttons, links, typography etc)
• Form Elements (Form & Formik specific elements)
• Helpers (Scroll wrappers, Accordians, Tabbed views, etc)

Description

A radio button allowing for both HTML typical and toggle button appearances need to be created,

A formik wrapped version needs to be created as well

Figma

https://www.figma.com/file/wRMGqc11iQLVpDVmqXVXWK/ChainSafe-Files---Dev?node-id=0%3A1