[UI] [BACKLOG] Prepare playground page with all new UI elements

[aniri]

We are starting migrating to a prettier UI for the app.

It would be great to have a demo page will all new input elements and all the setup for their behaviour (checkboxes, text areas, buttons, dropdowns, table, paginated table). This way we can easily re-use them when redesigning the app and keep a consistent style.

The styleguide is available here: https://www.figma.com/file/61NHR7fwmV1Dsv4Pb6F8T7/code4ro_mv_user-management_2018.04.21-(Copy)?node-id=816%3A217

[iamandrewluca]

@aniri how about a Storybook integration?

It should be as easy as npx sb init Already installing project dependencies.

[aniri]

@aniri how about a Storybook integration?

@iamandrewluca sounds good!

[iamandrewluca]

Encountered some problems. We need to move tsconfig.json file one level up in the project folder. I took a look at project history, and it seems this project was started with angular@2, and upgraded till angular@9 Folder structure may not be exactly as it is default now, and storybook cannot be initialized correctly.

I made the fix with moving tsconfig file, I'll make a PR. (Also no more warnings in console)

I would suggest in the future to create a brand new Angular app, and overlay it on top of current app. I did this once in a https://github.com/code4moldova/voluntar-web repository.

[idormenco]

@iamandrewluca hi , i managed to install storybook on this app (it took a little bit of handling but it works) please see this pr/ branch you can contribute there as well

[iamandrewluca]

Ok, then I'll close my PR's in favor of this

[idormenco]

@iamandrewluca we should discuss on code4ro slack on what we have to do further and sync our efforts.

[aniri]

hey @iamandrewluca @idormenco thanks for your help with this! We'll postpone this part for now and focus first on updating the UI and then on extracting reusable components :smiley: