New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Styleguide #95

Merged
merged 44 commits into from Feb 4, 2019

Conversation

@nicolas-brousse
Copy link
Member

nicolas-brousse commented May 30, 2018

A really work in progress about adding style guide view.

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

Closes #94.

@nicolas-brousse

This comment has been minimized.

Copy link
Member Author

nicolas-brousse commented May 30, 2018

@florentferry, @Spone, Some questions:

@Spone

This comment has been minimized.

Copy link
Collaborator

Spone commented Jun 1, 2018

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 nicolas-brousse force-pushed the nicolas-brousse:add-style-guide-view branch from e798087 to 469f2ae Jun 3, 2018

@nicolas-brousse

This comment has been minimized.

Copy link
Member Author

nicolas-brousse commented Jun 3, 2018

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

This comment has been minimized.

Copy link
Member Author

nicolas-brousse commented Jun 8, 2018

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

This comment has been minimized.

Copy link
Collaborator

Spone commented Jun 9, 2018

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

screen shot 2018-06-09 at 16 19 03

We discussed the next steps with @nicolas-brousse.

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

  • 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.

  • 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)

  • 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

This comment has been minimized.

Copy link

coveralls commented Jun 9, 2018

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 Coverage Status
Change from base Build 699: 0.2%
Covered Lines: 180
Relevant Lines: 181

💛 - Coveralls

@florentferry florentferry removed this from the 2.2.0 milestone Jul 3, 2018

@Spone Spone added this to the 3.0 milestone Jul 14, 2018

nicolas-brousse and others added some commits May 30, 2018

wip
wip
Fix rescue when missing template
The previous implementation (with `render ... rescue`) prevented from debugging the example file.
Whenever an exception was raised, it displayed the fallback partial.

@Spone Spone changed the title Wip: Style guide view WIP: Style guide view Aug 13, 2018

@nicolas-brousse

This comment has been minimized.

Copy link
Member Author

nicolas-brousse commented Aug 13, 2018

About Railtie vs. Engine:

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

@Spone

This comment has been minimized.

Copy link
Collaborator

Spone commented Aug 21, 2018

Here are a few more tasks:

  • support for nested components in nav ➡️ #125
  • support for adding static pages: add routes in the engine, so you just have to create the views in app/views/komponent/static/ ➡️ #114
  • add documentation
@nicolas-brousse

This comment has been minimized.

Copy link
Member Author

nicolas-brousse commented Aug 21, 2018

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

Spone added some commits Aug 21, 2018

@Spone Spone self-requested a review Aug 21, 2018

Spone added some commits Aug 24, 2018

@Spone Spone requested a review from florentferry Feb 2, 2019

@Spone Spone changed the title WIP: Style guide view Style guide view Feb 2, 2019

@Spone Spone changed the title Style guide view Styleguide Feb 2, 2019

Spone added some commits Feb 2, 2019

@Spone

Spone approved these changes Feb 2, 2019

@florentferry florentferry merged commit 0f97be1 into komposable:master Feb 4, 2019

2 checks passed

codeclimate 1 fixed issue
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment