Roadmap / Ideas

[romhml]

Here's some ideas and things I'd like to introduce next:

• Add an icon picker
• JSON Props Editor
• Allow displaying multiple variants of a component at once for enum props. All variants x sizes of a button for example.
• Add zoom controls
• Creating examples from the UI by saving the current state of a component.
• Generating visual tests based on examples and default properties for all components and visualizing changes in Compodium.
• Build and publish your playground
• Vue support

Feel free to share yours!

[brenodanyel]

Waiting for plain vue support! Great work!

[Norbiros]

I would love to see easy support for interacting with different <slot/>s inside components

[romhml]

@Norbiros do you mean something to specify component slots similar to the props tab?

[Norbiros]

Probably yeah

[RensBoeser]

I would love to see easy support for interacting with different <slot/>s inside components

I'd also like this feature, including a defaultSlots in the extendCompodiumMeta .
For example, my Button only accepts a default slot for text, so I want to be able to view my button with 'Hello World!' in the default slot when I open Compodium.

Thanks for the great work so far @romhml, love the multiple variants display!

[romhml]

@RensBoeser the current way of achieving this is to add an example for your button:

compodium/examples/MyButtonExample.vue

<template>
  <MyButton> Hello World! </MyButton>
</template>

It should be possible to do something with extendCompodiumMeta to pass string values for slots, but it'll be hard to support actual HTML / Vue template with it. I'll think about it!

[Norbiros]

Another idea is to add zoom in/out controls, allowing users to inspect smaller components more easily without scaling the entire UI...

[BayBreezy]

Can your implementation of vue meta component render the JSDocs for each prop in markdown?
Asking specifically for the links. When I use the link syntax --> here, it does not present a clickable link. It renders the text as is

This is what I have for the JSDoc over the prop

    /**
     * The icon to display inside the component.
     *
     * Can be a string from the [Icônes library](https://icones.js.org/) or a Vue component (VNode).
     *
     * @see [Icônes library](https://icones.js.org/)
     */
    icon: VNode | string;

[Ala-Hanoun]

Thanks for the amazing work on compodium @romhml ! do you have any rough timeline in mind for the “Build and publish your playground”? Being able to share the playground with non-developers on the team would be a huge win for us.

One small suggestion as well, it would be great if components could be grouped based on the Nuxt components directory structure instead of all living in a single flat list, that would really help with larger projects.

Thanks again for the awesome work!

[romhml]

Thanks! I'm struggling a bit to find time to focus on the project right now, so I can't really say when I'll be able to. My first goal is to wrap up the vitest integration and move on to the publish feature.

[xMrAfonso]

Hey, just wondering @romhml, how active in development is this? I was previously using histoire but I am ditching it due to lack of nuxt support and simply any activity as there are tons of issues/prs opened and unanswered and I fear compodium could go to that route.

I am merely concerned, and wondering if I should just use storybook or this.

PS: Having a discord for the project would be nice potentially.

[romhml]

Hey @xMrAfonso ! Like I said in the comment above I haven't been very active lately. If you are looking for stability you should definitely go with storybook.

I'll look into opening a discord server at some point, in the meantime, feel free to reach out to me directly on discord if you have any questions.