Components not rendering

Created on 20 September 2023, about 1 year ago
Updated 3 June 2024, 6 months ago

Problem/Motivation

When I select a component in the explorer form, it just shows an ajax loader and no component.

I'm not sure if I'm running into a bug or just don't have my component defined correctly.

Steps to reproduce

I copied a button test component:

$schema: https://git.drupalcode.org/project/sdc/-/raw/1.x/src/metadata.schema.json
name: Button
description: JavaScript enhanced button that tracks the number of times a user clicked it.
libraryOverrides:
  dependencies:
    - core/once
props:
  type: object
  required:
    - text
  properties:
    text:
      type: string
      title: Title
      description: The title for the button
      minLength: 2
      examples:
        - Press
        - Submit now
    iconType:
      type: string
      title: Icon Type
      enum:
        - power
        - like
        - external

With this, I see a form with a Title field, but filling it out and submitting does not show the component.

πŸ’¬ Support request
Status

Fixed

Version

1.0

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States mortona2k Seattle

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @mortona2k
  • πŸ‡¨πŸ‡·Costa Rica alemadlei

    Hello, thanks for trying this module.

    After some feedback, some things regarding implementation have changed.

    I need to polish some stuff in the current code on the development branch, but maybe you could check that out in the meantime.

    I'm moving away from the form and instead trying to use a sidebar for component navigation, which would make it easier to refresh and debug while building demos.

  • πŸ‡ΊπŸ‡ΈUnited States mortona2k Seattle

    That's a great idea to make viewing components easier. I will check this out again soon. If you can describe your vision a bit further, I may be able to help with patches. What I really want is a native styleguide in Drupal that lets us see all the libraries, theme hooks, render elements, and components, and lets us create code samples or reusable patterns using twig or render arrays. I'm sure that's beyond the scope of this module, but the work here may be useful in making that happen.

    I am working on a Code Sample module that lets you write HTML/CSS/JS, and select a library to include. I was able to demo a dropbutton component by copying the rendered html into a code sample and selecting the core/drupal.dropbutton library. Next I'll look into how to parse a render array instead of html/css, which would let me compose complex patterns, with a form for setting token values. I liked how this module had a selectable list of components with a form for props. I would like to be able to save those as a variation or example to quickly rerender as a sample or use as a component variant.

    Thanks for your work.

  • Assigned to alemadlei
  • Status changed to Needs review 6 months ago
  • πŸ‡¨πŸ‡·Costa Rica alemadlei

    I have released 1.0.0-beta2 which now includes an explorer at `/styleguide/explorer`. It should render better compared to the form.

  • Status changed to RTBC 6 months ago
  • πŸ‡ΊπŸ‡ΈUnited States mortona2k Seattle

    Cool, I can see my components but wasn't able to click on them at first. I copied the card example and now I see links for the demo content.

    This is great. I'd love to see a Drupal native styleguide like pattern lab or storybook. There could be more integrated features, like showing where a component is used, or rendering live examples.

    My last comment is describing something that is supposed to be part of starshot. Do you know where that work is happening? I imagine a component browser is going to be part of that.

  • Status changed to Fixed 6 months ago
  • πŸ‡¨πŸ‡·Costa Rica alemadlei

    Thank you for the feedback.

    Next release I'm planning to have a form for the component (separate from the demos).

  • πŸ‡ΊπŸ‡ΈUnited States mortona2k Seattle

    SDC Block lets you place components directly into layouts as blocks, with an edit form corresponding to it's props/slots.

    I was thinking that an easy way to component documentation is to create a book and add component samples to pages by embedding in the layout.

  • πŸ‡¨πŸ‡·Costa Rica alemadlei

    Yes, that's what I'm trying to accomplish with the styleguide.

    Normally when you have your components system, you have to create content (which could be erased by mistake) but it also has to load everything in Drupal in order to view them.

    The idea with the demos and form is that you can have that separate from the database and have a single page where this can be reviewed and showcased to client.

  • Status changed to Fixed 6 months ago
  • πŸ‡¨πŸ‡·Costa Rica alemadlei
Production build 0.71.5 2024