[SDC] Validate and improve developer experience and helpfulness of error messages

Adding #3365480: [SDC] Improve error handling during prop validation errors.

I posted a call for help to create a survey for the DX in Slack: https://drupal.slack.com/archives/C4EDNHFGS/p1686815822589999

Here's a screenshot of the initial thoughts in there.

I'll be the first guinea pig.

Rate your excitement about SDC in core: 1 ... 10 | N/A

10

Rate your excitement about potential contrib extending SDC: 1 ... 10 | N/A

10

Rate our documentation: 1 ... 10 | N/A

10

Did you 1️⃣ refactor existing template into a component, or did you 2️⃣ write a component from scratch? 1 | 2

1 and 2.

Rate the helpfulness of error messages encountered: 1 ... 10 | N/A

10

Have you tried the Storybook integration? Yes | No

Yes

Any thoughts you would like to share? The sky is the limit

Not sure what to say here that I haven't said countless times. You are probably tired of me saying the same things over and over again.

This is also a good place to mention related projects you think are worth mentioning, or that you maintain.

Rate your excitement about SDC in core: 1 ... 10 | N/A

10

Rate your excitement about potential contrib extending SDC: 1 ... 10 | N/A

10

Did you 1️⃣ refactor existing template into a component, or did you 2️⃣ write a component from scratch? 1 | 2

2️⃣

Rate the helpfulness of error messages encountered: 1 ... 10 | N/A

9.99

Have you tried the Storybook integration? Yes | No

No

Any thoughts you would like to share? The sky is the limit

Looking forward to this being stable in core, so we can refactor the status page into components and reuse those blocks in dashboards!

Rate your excitement about SDC in core: 1 ... 10 | N/A

10

Rate your excitement about potential contrib extending SDC: 1 ... 10 | N/A

10

Did you 1️⃣ refactor existing template into a component, or did you 2️⃣ write a component from scratch? 1 | 2

1 & 2

Rate the helpfulness of error messages encountered: 1 ... 10 | N/A

10

Have you tried the Storybook integration? Yes | No

No(Soon)

Any thoughts you would like to share? The sky is the limit

I think it's brilliant and love that it encapsulates style and behavior with the markup it affects. I love the reusability aspect of it and I could see a future with library systems(i.e. Material, Polymer, etc) but for twig/drupal that can be shared and reused across open source. I think it's a big step in the right direction toward moving Drupal theming toward many modern frameworks and web components.

We've started developing a theme that is primarily SDC focused(https://www.drupal.org/project/kinetic) and hope to bring ideas back to SDC to push it further.

(I was not paid for this endorsement :) )

Rate your excitement about SDC in core: 1 ... 10 | N/A

10

Rate your excitement about potential contrib extending SDC: 1 ... 10 | N/A

10

Rate our documentation: 1 ... 10 | N/A

8

Did you 1️⃣ refactor existing template into a component, or did you 2️⃣ write a component from scratch? 1 | 2

1 & 2

Rate the helpfulness of error messages encountered: 1 ... 10 | N/A

9

Have you tried the Storybook integration? Yes | No

No

Any thoughts you would like to share? The sky is the limit

I think this is one of the best additions to Drupal core in recent times. It makes working on the frontend much more inline with how major JS frameworks work. Not only is it an easier mental model but the reusability from project to project is great. All in all I think its great that Drupal is trying to keep up with more modern ways of working

Rate your excitement about SDC in core: 1 ... 10 | N/A

10

Rate your excitement about potential contrib extending SDC: 1 ... 10 | N/A

10

Rate our documentation: 1 ... 10 | N/A

9

Did you 1️⃣ refactor existing template into a component, or did you 2️⃣ write a component from scratch? 1 | 2

2

Rate the helpfulness of error messages encountered: 1 ... 10 | N/A

9

Have you tried the Storybook integration? Yes | No

No

Rate your excitement about SDC in core: 1 ... 10 | N/A

10

Rate your excitement about potential contrib extending SDC: 1 ... 10 | N/A

10

Rate our documentation: 1 ... 10 | N/A

9

Did you 1️⃣ refactor existing template into a component, or did you 2️⃣ write a component from scratch? 1 | 2

1 and 2

Rate the helpfulness of error messages encountered: 1 ... 10 | N/A

10

Have you tried the Storybook integration? Yes | No

Yes, I tried it eventually and I remember making it work with the 6 version and thanks to the the package.json config e0ipso shared at some github comment, I will definitely try it again soon.

Any thoughts you would like to share? The sky is the limit

Thanks for this initiative. I like to dream thinking with Drupal Core having an integration with SDC, being able to use components through the display configuration and by the rest of the modules improving the theming experience and make the front-end work more versatile and scalable.

Rate your excitement about SDC in core: 1 ... 10 | N/A

10

Rate your excitement about potential contrib extending SDC: 1 ... 10 | N/A

10

Rate our documentation: 1 ... 10 | N/A

7

Did you 1️⃣ refactor existing template into a component, or did you 2️⃣ write a component from scratch? 1 | 2

1 and 2.

Rate the helpfulness of error messages encountered: 1 ... 10 | N/A

10

Have you tried the Storybook integration? Yes | No

Yes (couldn't make it work yet, I will try later)

Any thoughts you would like to share? The sky is the limit

Thank you, for this great initiative and all your hard work.

Rate your excitement about SDC in core: 1 ... 10 | N/A

10

Rate your excitement about potential contrib extending SDC: 1 ... 10 | N/A

10

Rate our documentation: 1 ... 10 | N/A

8 - I think more examples are need and the examples to be more close to production cases rather then samples.

Did you 1️⃣ refactor existing template into a component, or did you 2️⃣ write a component from scratch? 1 | 2

2

Rate the helpfulness of error messages encountered: 1 ... 10 | N/A

9

Have you tried the Storybook integration? Yes | No

Yes, it is very good! Not hard to set up. I will try to use it in my upcoming project. For now the hard part is working with fields that are entity reference, where we need to use slots and pass HTML in story book json file. We are just getting use to it.

Any thoughts you would like to share? The sky is the limit

Thanks for the great work! This is really promising and opens brings the FE development in Drupal into another level.

Rate your excitement about SDC in core: 1 ... 10 | N/A

10

Rate your excitement about potential contrib extending SDC: 1 ... 10 | N/A

10

Rate our documentation: 1 ... 10 | N/A

9

Did you 1️⃣ refactor existing template into a component, or did you 2️⃣ write a component from scratch? 1 | 2

1 and 2

Rate the helpfulness of error messages encountered: 1 ... 10 | N/A

10

Have you tried the Storybook integration? Yes | No

Yes

Any thoughts you would like to share? The sky is the limit

Nice to have features:
- Add new sc_server render pages for each Component like the "*.component.yml, twig, js, css" raw source so we can use them in Storybook directly
- More documentation about overriding, extending, defining sdc Components
- A drush command to generate sdc Component (in its folder) from existing Twig (Drupal) template
- An online sdc Components repository where we can share and reuse our sdc Components like https://bit.dev
- A simpler way to ovverride an sdc Component without the need of adding the same props on the *component.yml file
- Add "Open on IDE" contextual link on each sdc Component (using the ComponentMatadata path) on the sdc render or the Twig debug HTML comments
- Create an official package.json demo that generates CSS/JS inside Components folders
- Extend the default sdc schema to allow (recognize) the Drupal specific Prop "Attribute":

attributes:
      type: Drupal\Core\Template\Attribute

Rate your excitement about SDC in core: 1 ... 10 | N/A

10

Rate your excitement about potential contrib extending SDC: 1 ... 10 | N/A

10

Rate our documentation: 1 ... 10 | N/A

8 - The lower score should not reflect poorly on the person/persons who created and maintain(s) the documentation. I can only imagine the pace with which the whole SDC ecosystem has been evolving, and to keep up with all the developments, one must be very responsive and willing/able to contribute a lot of resources. I'm anticipating a very dynamic future with many upcoming changes, therefore, we should pay more attention to this initiative. I'd say HELP NEEDED!

Did you 1️⃣ refactor existing template into a component, or did you 2️⃣ write a component from scratch? 1 | 2

1 & 2

Rate the helpfulness of error messages encountered: 1 ... 10 | N/A

8 - There were moments when I had to dig into the inspector and try figuring out the issues on my own or reach out to the community members, mostly related to the Storybook integration, I'd say. But overall, the error messages were quite descriptive and helpful.

Have you tried the Storybook integration? Yes | No

Yes.

Any thoughts you would like to share? The sky is the limit

...More to come

Rate your excitement about SDC in core: 1 ... 10 | N/A

7, not too powerful yet :)

Rate your excitement about potential contrib extending SDC: 1 ... 10 | N/A

10. When mixed with UI Patterns world.

Rate our documentation: 1 ... 10 | N/A

8

Did you 1️⃣ refactor existing template into a component, or did you 2️⃣ write a component from scratch? 1 | 2

2

Rate the helpfulness of error messages encountered: 1 ... 10 | N/A

N/A

Have you tried the Storybook integration? Yes | No

Yes with own twig.js approach. Drupal based scares me :)

Any thoughts you would like to share? The sky is the limit

Not yet.

Rate your excitement about SDC in core: 1 ... 10 | N/A

10. It is finally a viable option for atomic design building in the Drupal way. The fact that SDC discovers alone JS & CSS files allows front end devs to directly develop without too much in mind.

Rate your excitement about potential contrib extending SDC: 1 ... 10 | N/A

10. I contributed a module based on SDC, I could possibly not good under 10 :D

Rate our documentation: 1 ... 10 | N/A

8. It is solid ! But I think the recent development have not been integrated in it (still metadata.json in the first line of doc ...)

Did you 1️⃣ refactor existing template into a component, or did you 2️⃣ write a component from scratch? 1 | 2

For now I only make my own components from scratch, but I am at this moment preparing a migration from older custom components to SDC components.

Rate the helpfulness of error messages encountered: 1 ... 10 | N/A

10. They are very clear to me.

Have you tried the Storybook integration? Yes | No

No but I will in a short future. You can test DAB for a Drupal tool for integrators 😬

Any thoughts you would like to share? The sky is the limit

This project is a very good addition in the Drupal world in my opinion, thank you for the work put it it <3

Rate your excitement about SDC in core: 1 ... 10 | N/A

10

Rate your excitement about potential contrib extending SDC: 1 ... 10 | N/A

10

Rate our documentation: 1 ... 10 | N/A

8

Did you 1️⃣ refactor existing template into a component, or did you 2️⃣ write a component from scratch? 1 | 2

1 & 2

Rate the helpfulness of error messages encountered: 1 ... 10 | N/A

8

Have you tried the Storybook integration? Yes | No

Yes

Any thoughts you would like to share? The sky is the limit

It would be amazing if the same yml was the source for storybook, so that no more files have to be generated, which is, although small, an extra effort.

(sorry, I messed up when adding the comment and i edited the post. I reverted it back to the previous version)

Rate your excitement about SDC in core: 1 ... 10 | N/A

10

Rate your excitement about potential contrib extending SDC: 1 ... 10 | N/A

9

Rate our documentation: 1 ... 10 | N/A

7

Did you 1️⃣ refactor existing template into a component, or did you 2️⃣ write a component from scratch? 1 | 2

1+2

Rate the helpfulness of error messages encountered: 1 ... 10 | N/A

5

Have you tried the Storybook integration? Yes | No

Yes

Any thoughts you would like to share? The sky is the limit

• Have a list of available for components in core / contrib.
• Have an demo storybook instance for stories in (for instance) Umami.
• Clearly outline the differences between components and storybook stories.
• Provide a list arguments to convince teams / management to switch to a component based design over traditional Drupal theming.
• Integrate with all the headless initiatives on D.O.

Rate your excitement about SDC in core: 1 ... 10 | N/A

10

Rate your excitement about potential contrib extending SDC: 1 ... 10 | N/A

10

Rate our documentation: 1 ... 10 | N/A

7 (I always believe we can adjust and improve what is out there based on experiences, feel free to let me know if you want docs for SDC reviewed!)

Did you 1️⃣ refactor existing template into a component, or did you 2️⃣ write a component from scratch? 1 | 2

1+2

Rate the helpfulness of error messages encountered: 1 ... 10 | N/A

3

Have you tried the Storybook integration? Yes | No

Yes

Any thoughts you would like to share? The sky is the limit

This has been such an awesome project to contribute to and I can't wait to see where it grows next. I actively maintain Prototype which is a Drupal STARTERKIT theme that has switching over to utilize SDC and provides development build tools as well. It would be great to get feedback on the work we have been doing over the past few months.

Rate your excitement about SDC in core: 1 ... 10 | N/A

10

Rate your excitement about potential contrib extending SDC: 1 ... 10 | N/A

10

Rate our documentation: 1 ... 10 | N/A

8

Did you 1️⃣ refactor existing template into a component, or did you 2️⃣ write a component from scratch? 1 | 2

1 & 2

Rate the helpfulness of error messages encountered: 1 ... 10 | N/A

8

Have you tried the Storybook integration? Yes | No

Yes

Any thoughts you would like to share? The sky is the limit

While creating SDC components, I've found that only Drupal\Core\Template\Attribute class might be set as a property type in the *.component.yml file. It will be good to use other Drupal classes too.

Thank you to everyone who submitted their responses or helped move this forward in any way. If you know of more people with SDC experience who could participate, please link them to this issue.

In the mean time, I am marking this as fixed. That should not be taken as no more feedback is needeed. Please continue reporting. I am closing this to allow for progress in making SDC stable.

Rate your excitement about SDC in core: 1 ... 10 | N/A

10

Rate your excitement about potential contrib extending SDC: 1 ... 10 | N/A

10

Rate our documentation: 1 ... 10 | N/A

9 - still some room for improvement..

Did you 1️⃣ refactor existing template into a component, or did you 2️⃣ write a component from scratch? 1 | 2

1 & 2

Rate the helpfulness of error messages encountered: 1 ... 10 | N/A

7 - some of the errors were vague.

Have you tried the Storybook integration? Yes | No

Yes - using the Storybook module is way better than cl_server

Any thoughts you would like to share? The sky is the limit

the ability to publish storybook would be helpful.

Rate your excitement about SDC in core: 1 ... 10 | N/A

10
Components have become a common industry practise with Laravel & Symfony already implemented them. Components are also the basis of many javascript frameworks.

Rate your excitement about potential contrib extending SDC: 1 ... 10 | N/A

10
The creativeness of the community never fails to impress.

Rate our documentation: 1 ... 10 | N/A

7

Did you 1️⃣ refactor existing template into a component, or did you 2️⃣ write a component from scratch? 1 | 2

1️⃣ & 2️⃣
I refactored a "scroll-to-top" component which allowed me to drop it into other projects. I have also created some components from scratch.

Rate the helpfulness of error messages encountered: 1 ... 10 | N/A

6 - seem vague but maybe my lack of understanding.

Have you tried the Storybook integration? Yes | No

Yes, I have tried Storybook integrated with mixed results. "Storybook" module feels more polished and better exp. than previous cl_server version.

Any thoughts you would like to share? The sky is the limit

Thank you to everyone that helps keep the #components slack channel active and lively.

Rate your excitement about SDC in core: 1 ... 10 | N/A

10

Rate your excitement about potential contrib extending SDC: 1 ... 10 | N/A

10
I'm thinking of https://www.drupal.org/project/ui_patterns 2.x here

Rate our documentation: 1 ... 10 | N/A

N/A Didn't read enough, yet.

Did you 1️⃣ refactor existing template into a component, or did you 2️⃣ write a component from scratch? 1 | 2

2
I chose a theme (Radix 6.x) because of that

Rate the helpfulness of error messages encountered: 1 ... 10 | N/A

6
I have a limited experience here - the error message helped me fix the issue quickly, but then it turned out that there's probably a better way to do that fix.

Have you tried the Storybook integration? Yes | No

No
It still looks like a non-straightforward procedure for the time being.

Any thoughts you would like to share? The sky is the limit

Thanks you. I really hope that SDCs can help us find front-end developers willing to work with Drupal even in non-decoupled manner.