Folder structure to be set up

[RyRy79261]

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)

[FSM1]

This looks great @RyRy79261

The Providers will include contexts (similar to the web3-context) that act as wrappers for the various API's that we need. Not sure whether we will need a custom themeProvider as I think styledComponents already covers this...

I have added a parent folder for the actual Theme object that would need to be passed in to the theme provider, since this will be common for all implementations.

[FSM1]

In terms of usability, I think each of the top level folders should basically act as a separate package, ie.

import {Button} from '@chainsafe/common-ui/components'

This will mean that each top level folder will have an index.ts file, that imports and re-exports all the various sub-component, ie.

packages/common/components/index.ts will looks like:

import {Button} from './Button';
...
export {Button, ...};

The packages/common/index.ts file will then be as follows:

import * as Components from '/components';
import * as Providers from '/providers';
...

export {
  components: Components,
  providers: Providers,
  ...
}

[RyRy79261]

@FSM1 I agree with this approach as it uses common language for the separate components

[FSM1]

Change of plans w.r.t. the package structure. To enable the individual importing of components etc we will break the High Level items out into separate packages in the monorepo. These should all follow the naming convention of common- (eg. common-components, etc). Update the root npm script to build all common packages at once.