Styleguide

[nicolas-brousse]

A really work in progress about adding style guide view.

• [x] Add an example template file when generating component (by default or with an option)
• [x] Make a mountable engine with Komponent::StyleguideController handling responses
• [x] Add a way to list all components in a project as an helper ?
• [x] Add an index view listing all components
• [x] Add a component view for each component
• [x] Add tests
• [ ] Optimize Komponent::Component by using Komponent::ComponentPathResolver @nicolas-brousse
• [x] Add documentation @Spone
• [ ] Support for namespaced components in nav :arrow_right: #125

Closes #94.

[nicolas-brousse]

@florentferry, @Spone, Some questions:

• Do we add extra pages as mountain_view does? (https://github.com/devnacho/mountain_view#adding-extra-pages-to-the-styleguide)
• What do we use to render the assets (css and js) of the stylguide pages?

[Spone]

For now, let's not add extra pages. For the assets, can we have a dedicated pack?

We could also have components styleguide/header and styleguide/footer in the engine, that you can override in your project if you want to customize them.

[nicolas-brousse]

For the assets, can we have a dedicated pack?

Not sure this part is easy to do. For now I just put style inside a style tag.

Otherwise I:

• Added a helper to have the components list with komponent_components
• Started to update the README and CHANGELOG
• Created Komponent::Styleguide controller and index, show views
• Created 3 components komponent/styleguide/(header|container|footer)
• Started working on styleguide stylesheet and html structure
• Started updating the generator to add a _example.html.(engine) file on component generation
• Created a Komponent::Component class to easily list or find a component (may be it could improve by using the path resolver)
• Renamed Railtie as a Engine (not sure what is the better to do here)

I will continue this later, may be in the next week.

[nicolas-brousse]

I was thinking a bit about assets this last days and I notice two problems:

1. Not sure if we can easily create a pack, I have to read more about webpacker.
2. Not sure how could we process to load the css of the component. MountainView did it from sprockets, but we can't really do the same since Komponent use webpacker.

[Spone]

I worked on the default UI today. Here is what it looks like:

We discussed the next steps with @nicolas-brousse.

The idea to allow customization of the styleguide, and easy setup, is to:

• [x] add a generator rails g komponent:styleguide that will:
  • copy frontend/components/komponent to the main app folder (probably using Thor directory action)
  • add a pack frontend/packs/komponent.js that will contain:

    import 'components';
    import 'components/komponent';

  • mount the engine in routes.rb

This way, the user can customize the UI of the styleguide, by modifying components and reusing CSS variables from the main app. It's also possible to add JavaScript in those components, if needed. The assets are compiled using webpacker, with the same process as the main app existing pack.

• [x] when rendering the _example.html.slim file in the styleguide, we could override the component helper, to output the component, followed by the source code to copy-paste (and maybe the resulting HTML code as well) it's easier to create a separate helper, so that's what I did: component_with_doc (aliased as cdoc)

• [x] add a generator rails g komponent:examples that would generate an example file for each existing component (to help users setup a styleguide with an existing code base)

[coveralls]

Pull Request Test Coverage Report for Build 709

• 57 of 57 (100.0%) changed or added relevant lines in 6 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage increased (+0.2%) to 99.448%

---

Totals
Change from base Build 699:	0.2%
Covered Lines:	180
Relevant Lines:	181

---

💛 - Coveralls

[nicolas-brousse]

I made some changes:

• Move the frontendfolder into generators templates.
• Locally, I update the fixtures rails application to do some test. I'll push this a bit later.
• Create komponent:styleguide generator and regroup common generators methods in a Utils module.

What needs to be done:

• [ ] Optimize Komponent::Component by using Komponent::ComponentPathResolver
• [x] Add more tests (not sure what to test)
• [x] Decide to use Engine or Railtie or both

What I noticed:

• Design seems to be broken in Firefox, not sure if I broke something with my lasts commits.

[Spone]

Thanks for the progress!

Decide to use Engine or Railtie or both

Can you explain?

Design seems to be broken in Firefox, not sure if I broke something with my lasts commits.

Do you have a screenshot?

[Spone]

@nicolas-brousse I added more tests, we're now back over 98% coverage. What's left to test is:

• resolved_component_path
• path

---

About Railtie vs. Engine:.

Any Rails::Engine is also a Rails::Railtie

Source: https://api.rubyonrails.org/classes/Rails/Engine.html

So I don't see any issue in using an Engine :)

[nicolas-brousse]

About Railtie vs. Engine:

Okay. It was just to be sure with you and have your advice if needed.

[Spone]

Here are a few more tasks:

• [ ] support for nested components in nav :arrow_right: #125
• [ ] support for adding static pages: add routes in the engine, so you just have to create the views in app/views/komponent/static/ :arrow_right: #114
• [x] add documentation

[nicolas-brousse]

I created #114 to do "support for adding static pages: add routes in the engine, so you just have to create the views in app/views/komponent/static/" in a separate PR