A preview of the component would be a nice functionality #921
Replies: 3 comments 2 replies
-
|
Hi @AhmedSeraje are you thinking of something like a Storybook, meaning that you could see the designed components, and maybe switch between various states like color / error / pressed / etc? I spoke with author of django-viewcomponent (@michael-yin) maybe half a year ago (?) when he mentioned he was planning on making the preview feature into a standalone package. I think that's now https://github.com/rails-inspire-django/django-lookbook. Don't know, however, if it'll work with django-components. @AhmedSeraje if you give django-lookbook a try, do let me know if it works with django-components! 👀 If so, we could add this info to the documentation, to show people how to use the lookbook to preview their components. |
Beta Was this translation helpful? Give feedback.
-
|
I had done a PoC study about this https://github.com/burakyilmaz321/django-components-storybook. I haven't developed it for a long time, but it's possible to integrate Storybook with a Django component. |
Beta Was this translation helpful? Give feedback.
-
|
l@burakyilmaz321 Oh now this slaps! 🔥 Do you have an example of how it's used in the wild? IMO we could develop this into a full package that could live under the django-components org and make it the recommended way for previewing our components. @burakyilmaz321 would you be interested in championing this? As you can see below, currently I have too little practical experience with Storybook to be able to tell what the abstractions should look like. 1. Passing Storybook params to componentsIn the demo, I saw that components had defined I think this would make more sense to be a static function (maybe called just The default implementation could look like this (assuming that the the Storybook server uses GET requests): class Button(Component):
@staticmethod
def storybook(cls, request):
return cls.render(kwargs=requests.GET)But since it would be a function, then you could do something like this, where in the UI you would choose an option as a plain string, but in the Python code it'd be "hydrated" to more: STORYBOOK_PRESETS = {
"primary": { ... },
"secondary": { ... },
}
class Button(Component):
...
@staticmethod
def storybook(cls, request):
preset_name = requests.GET.get("preset", "primary")
kwargs = STORYBOOK_PRESETS[preset_name]
return cls.render(kwargs=kwargs)2. ❌ Automatically generate inputs?Looking at the PoC, I'm missing how things would be set up in Storybook (I haven't used it personally yet). Where and how do you declare which components you have and what parameters they accept? Do you define them manually? If manually, do you define them next to the component definition (so inside the Django codebase), or separately? If I remember right, Storybook allows you to pass in components arguments from within the UI (they call it parameters). Our Components can have their input types declared for type hints. We could make use of this and have a CLI command that would:
3. ❓ Automatically generate Storybook component bindings for django components?Instead, what makes more sense is following: In the Storybook docs, I see that they refer to the components like so: // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { Meta } from '@storybook/your-framework';
import { Button } from './Button';
const meta: Meta<typeof Button> = {
component: Button,
//👇 Creates specific parameters at the component level
parameters: {
backgrounds: {
default: 'dark',
},
},
};
export default meta;I haven't checked, but I assume that the What we could do to make the integration with Storybook easier is to generate these functions. E.g. on the inside, our implementation of Looking at the implementation, it is a bit outdated - in views.py, it should be now sufficient to just call def component_render_view(request, component_id: str):
component_cls: Type[Component] = component_registry.all().get(component_id)
component: Component = component_cls()
try:
storybook_parameters = {
param: request.GET.get(param) for param in component.storybook_parameters
}
except AttributeError:
storybook_parameters = {}
rendered_component = component.render(
kwargs=storybook_parameters,
)
return HttpResponse(
rendered_component,
headers={"Access-Control-Allow-Origin": "*"},
) |
Beta Was this translation helpful? Give feedback.
-
|
I've created #967 for this |
Beta Was this translation helpful? Give feedback.
-
|
Apologies for not getting back to this! yes @JuroOravec that is exactly what I was thinking :) |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
A functionality such as the preview component in django-viewcomponent (https://testdriven.io/blog/django-reusable-components/#previewing-components) would be very welcomed :) Will easily help in speeding up the development
Beta Was this translation helpful? Give feedback.
All reactions