[epic] CSS Improvement and storybook v1

[kfarr]

Timebox 1 hour: Next step - more detail for first 4 tickets -- time estimation and exactly which files will be modified for first ~4 fickets (330-333) for example. Please update via the tickets created below.

@ViktoriaShurhot

---

CSS Project goal

• as a developer I want best practices for css templating so that I don't have to struggle with different tools and unorganized css files
• as a designer I want confidence that components were implemented per my specification
• as a contributor / user I want to see that the 3dstreet application is robust and extensible (aka well maintained)

Therefore 2 goals:

• improve css code quality
• create one page that a user can see (publicly, on the internet, not just hosted) that shows all the components that the application can use, similar to storybook (or even use storybook)

Proposal:

• interweave delivery of adding new storybook components in parallel to other css refactoring work

Example steps:

• [x] 3DStreet/3dstreet-editor#338
• [x] 3DStreet/3dstreet-editor#330
• [x] 3DStreet/3dstreet-editor#331
• [x] 3DStreet/3dstreet-editor#332
• [x] 3DStreet/3dstreet-editor#333
• [x] 3DStreet/3dstreet-editor#334
• [ ] 3DStreet/3dstreet#579
• [ ] 3DStreet/3dstreet#580
• [ ] 3DStreet/3dstreet#581
• [ ] 3DStreet/3dstreet#582
• [ ] 3DStreet/3dstreet#583
• [ ] 3DStreet/3dstreet#584

original source proposal: https://docs.google.com/document/d/1-LuznYMrMYrTMhXIA8uigDAhyzhqaYFfjavWaxaTyRE/edit

[rostyslavvnahornyi]

Hi! @kfarr, as you asked, estimation and plan of implementation for the first 5 tasks + including estimation for new 3DStreet/3dstreet-editor#338 in this epic:

Estimation: 3DStreet/3dstreet-editor#338 – 4 hours

1) 3DStreet/3dstreet-editor#330 – 1 hour 2) 3DStreet/3dstreet-editor#331 – 1 hour 3) 3DStreet/3dstreet-editor#332 – 4 hours 4) 3DStreet/3dstreet-editor#333 – 8 - 12 hours 5) 3DStreet/3dstreet-editor#334 – 4 hours

Plan of implementation:

1) 3DStreet/3dstreet-editor#330 - Add normalize.css to the root of the style directory.

2) 3DStreet/3dstreet-editor#331 - Add reset.css to the root of the styles directory, ensuring it resets all project styles and that the markup works as intended.

3) 3DStreet/3dstreet-editor#332 Install storybook. Add to the root directory .storybook with files preview.js, configuration of storybook (file main.js). Add stories to button component.

4) 3DStreet/3dstreet-editor#333 Refactore files: components.styl -> components.scss entity.styl -> entity.scss index.styl -> index.scss lib.styl -> lib.scss select.styl -> select.scss textureModal.styl -> textureModal.scss viewport.styl -> viewport.scss widgets.styl -> widgets.scss CameraToolbar.styl -> CameraToolbar.scss / CameraToolbar.module.scss Hint.styl -> Hint.module.scss ModalHelp.styles.styl -> ModalHelp.module.scss Shortcuts.styles.styl -> Shortcuts.modules.scss EssentialActions.styles.styl -> EssentialActions.module.scss DocumentationButton.style.styl -> DocumentationButton.module.scss SavingModal.styles.styl -> SavingModal.module.scss Modal.styles.styl -> Modal.module.scss Refactore directory ModalHelpComponent: Refactore directory components: HelpButton.styles.styl -> to HelpButton.module.scss ProfileButton.styles.styl -> to ProfileButton.module.scss ScreenshotButton.styles.styl -> to ScreenshotButton.module.scss Separate imports of global styles. index.styl needs refactoring as all our styles are global due to importing this file globally, which is the reason for markup conflicts.

4) 3DStreet/3dstreet-editor#334 Check out all isolation in .scss files for the full project