search

FriendsOfTYPO3 / frontend_editing

TYPO3 CMS Frontend Editing
https://friendsoftypo3.github.io/frontend_editing/
102 stars 38 forks source link

Use storybook #467

Closed Messj1 closed 3 years ago

Messj1 commented 3 years ago

Hi I would like to introduce storybook to this project. It see following use cases:

This would help a lot in #432 and #433 so we able to prevent accidental errors.

https://storybook.js.org/

Build bulletproof UI components faster

Storybook is an open source tool for developing UI components in isolation for React, Vue, Angular, and more. It makes building stunning UIs organized and efficient.

Storybook is based on webpack and react, so there are plenty ways to integrate the project:

  1. import AMD modules directly with webpack (without transpilering)
  2. import static HTML file
  3. load HTML file from server

I would recommend to start with simple integration of independent utililities modules and the basic designs.

Messj1 commented 3 years ago

After a little testing I was able to build some stories. An functional story for the Scroller and a design story for the DropZone.

I build some static version as a showroom: https://messj1.github.io/frontend_editing/storybook-static/

And yes, there are 2 errors to fix in Scroller. :-(

Storybook-State: There is a problem with versions, cause of supporting 2-3 versions of typo3. So there should be an non static dependency list. instead it should be a dynamic generated list triggered by the composer. I guess this is in PHP site of this extension a problem too, or do you test the behaviour of PHP versions combined with typo3 versions?

https://github.com/Messj1/frontend_editing/blob/467-use-storybook/storybook/.storybook/main.js#L14

Object.assign(config.resolve.alias, { // "jquery": path.resolve(dirname, '../../.Build/Web/typo3/sysext/core/Resources/Public/JavaScript/Contrib/jquery/jquery-3.2.1.js'), // "TYPO3/CMS/Core": path.resolve(dirname, '../../.Build/Web/typo3/sysext/core/Resources/Public/JavaScript'), // "TYPO3/CMS/Backend": path.resolve(dirname, '../../.Build/Web/typo3/sysext/backend/Resources/Public/JavaScript'), "TYPO3/CMS/FrontendEditing": path.resolve(dirname, '../../Resources/Public/JavaScript'), });

MattiasNilsson commented 3 years ago

@Messj1 That is great news and Storybook is a great descriptive testing tool!

Regarding is we test versions that is correct, but not on the JS side. There is always an option that we can add to test the correct JS paths.