Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Upgrade storybook to v7.x #3620

Closed
24 tasks done
sergei-maertens opened this issue Nov 17, 2023 · 0 comments · Fixed by #3621
Closed
24 tasks done

Upgrade storybook to v7.x #3620

sergei-maertens opened this issue Nov 17, 2023 · 0 comments · Fixed by #3621
Assignees
@sergei-maertens
Labels
owner: utrecht
Milestone
Release 2.5.0

Comments

@sergei-maertens
Copy link
Member

sergei-maertens commented Nov 17, 2023 •
edited

We should tackle this before we prepare to upgrade to React 18 and for consistency in all other projects.

MDX files to update:

  • src/openforms/js/components/admin/form_design/logic/actions/Action.stories.mdx
  • src/openforms/js/components/admin/form_design/LanguageTabs.stories.mdx
  • src/openforms/js/components/admin/form_design/Warnings/Warnings.stories.mdx
  • src/openforms/js/components/admin/form_design/variables/ServiceFetchConfigurationForm.stories.mdx
  • src/openforms/js/components/admin/form_design/variables/ServiceFetchConfigurationPicker.stories.mdx
  • src/openforms/js/components/admin/form_design/FormLogic.stories.mdx
  • src/openforms/js/components/admin/tables/Tables.stories.mdx
  • src/openforms/js/components/admin/forms/RadioList.stories.mdx
  • src/openforms/js/components/admin/forms/Inputs.stories.mdx
  • src/openforms/js/components/admin/forms/Fieldset.stories.mdx
  • src/openforms/js/components/admin/forms/ErrorList.stories.mdx
  • src/openforms/js/components/admin/forms/JsonWidget.stories.mdx
  • src/openforms/js/components/admin/forms/ActionButton.stories.mdx
  • src/openforms/js/components/admin/forms/MappingArrayInput.stories.mdx
  • src/openforms/js/components/admin/forms/FormRow.stories.mdx
  • src/openforms/js/components/admin/forms/Select.stories.mdx
  • src/openforms/js/components/admin/forms/SubmitRow.stories.mdx
  • src/openforms/js/components/admin/forms/ComponentSelection.stories.mdx
  • src/openforms/js/components/admin/forms/ArrayInput.stories.mdx
  • src/openforms/js/components/admin/forms/VariableSelection.stories.mdx
  • src/openforms/js/components/admin/forms/ButtonContainer.stories.mdx
  • src/openforms/js/components/admin/forms/Field.stories.mdx
  • src/openforms/js/components/admin/modals/Modal.stories.mdx
  • src/openforms/js/components/admin/modals/FormModal.stories.mdx
@sergei-maertens sergei-maertens self-assigned this Nov 17, 2023
@sergei-maertens sergei-maertens added this to the Release 2.5.0 milestone Nov 17, 2023
sergei-maertens added a commit that referenced this issue Nov 17, 2023
@sergei-maertens
👽 [#3620] Update storybook configuration after update
fc7bd22 
* Updated the reactIntl configuration
* Updated the MSW configuration
sergei-maertens added a commit that referenced this issue Nov 17, 2023
@sergei-maertens
➕ [#3620] Ran the *.stories.mdx -> *.stories.js automigration
64475a7
sergei-maertens added a commit that referenced this issue Nov 17, 2023
@sergei-maertens
👽 [#3620] Convert mdx stories to mdx + stories.js
755a9e4
sergei-maertens added a commit that referenced this issue Nov 18, 2023
@sergei-maertens
👽 [#3620] Convert mdx stories to mdx + stories.js
20d917c
sergei-maertens added a commit that referenced this issue Nov 18, 2023
@sergei-maertens
➕ [#3620] Add missing style-loader dependency
fcd5fd9 
This is because we manually tweak the storybook webpack config for
our own SCSS processing pipeline.

TODO: investigate if https://storybook.js.org/recipes/sass could
be a suitable replacement.
sergei-maertens added a commit that referenced this issue Nov 18, 2023
@sergei-maertens
👽 [#3620] Fix stories broken due to v7 upgrade
0bb0dbe
sergei-maertens added a commit that referenced this issue Nov 18, 2023
@sergei-maertens
🎨 [#3620] Apply deprecations
6427b01 
* Story nesting inside Canvas is deprecated
* ArgsTable is deprecated, use ArgTypes or Control instead.
@sergei-maertens sergei-maertens mentioned this issue Nov 18, 2023
Merged
sergei-maertens added a commit that referenced this issue Nov 20, 2023
@sergei-maertens
👽 [#3620] Update storybook configuration after update
c05ce58 
* Updated the reactIntl configuration
* Updated the MSW configuration
sergei-maertens added a commit that referenced this issue Nov 20, 2023
@sergei-maertens
➕ [#3620] Ran the *.stories.mdx -> *.stories.js automigration
3ceed24
sergei-maertens added a commit that referenced this issue Nov 20, 2023
@sergei-maertens
👽 [#3620] Convert mdx stories to mdx + stories.js
1401c36
sergei-maertens added a commit that referenced this issue Nov 20, 2023
@sergei-maertens
➕ [#3620] Add missing style-loader dependency
fc160cc 
This is because we manually tweak the storybook webpack config for
our own SCSS processing pipeline.

TODO: investigate if https://storybook.js.org/recipes/sass could
be a suitable replacement.
sergei-maertens added a commit that referenced this issue Nov 20, 2023
@sergei-maertens
👽 [#3620] Fix stories broken due to v7 upgrade
4822373
sergei-maertens added a commit that referenced this issue Nov 20, 2023
@sergei-maertens
🎨 [#3620] Apply deprecations
83bcae4 
* Story nesting inside Canvas is deprecated
* ArgsTable is deprecated, use ArgTypes or Control instead.
sergei-maertens added a commit that referenced this issue Nov 20, 2023
@sergei-maertens
👌 [#3620] PR feedback
c69c8ae
sergei-maertens added a commit that referenced this issue Nov 21, 2023
@sergei-maertens
🔧 [#3620] Launch storybook with version popup disabled
0731f0b
sergei-maertens added a commit that referenced this issue Nov 21, 2023
@sergei-maertens
💚 [#3620] Update test translations for file e2e tests with new builder
014a42a
sergei-maertens added a commit that referenced this issue Nov 21, 2023
@sergei-maertens
♻️ [#3620] Provide file component context
12c6cbb 
The form builder requires additional context for available file types,
confidentiality levels and callbacks to retrieve the available
document types for registration. All the configuration is readily
available in the DOM already, and the custom options for the formio
component implementation is broken out into a function shared
between the new and old form builder. It's also been refactored
to use async/await as much as possible and type information is
added via JSDoc annotations for improved readability.

Note that the Django templates are updated to ensure the
configuration script tags are emitted *before* the Javascript
modules are loaded/executed, so that the configuration is picked
up and we don't need an additional callable indirection to query
the DOM at runtime - which is best avoided inside React components
anyway.
sergei-maertens added a commit that referenced this issue Nov 21, 2023
@sergei-maertens
🌐 [#3620] Include updated translations in compiled bundle
403c019 
The formio builder ships its own translation files, which we
included when compiling the ICU message AST.
sergei-maertens added a commit that referenced this issue Nov 21, 2023
@sergei-maertens
💚 [#3620] Update test translations for file e2e tests with new builder
566d7a8
sergei-maertens added a commit that referenced this issue Nov 21, 2023
@sergei-maertens
♻️ [#3620] Provide file component context
3164673 
The form builder requires additional context for available file types,
confidentiality levels and callbacks to retrieve the available
document types for registration. All the configuration is readily
available in the DOM already, and the custom options for the formio
component implementation is broken out into a function shared
between the new and old form builder. It's also been refactored
to use async/await as much as possible and type information is
added via JSDoc annotations for improved readability.

Note that the Django templates are updated to ensure the
configuration script tags are emitted *before* the Javascript
modules are loaded/executed, so that the configuration is picked
up and we don't need an additional callable indirection to query
the DOM at runtime - which is best avoided inside React components
anyway.
sergei-maertens added a commit that referenced this issue Nov 21, 2023
@sergei-maertens
🌐 [#3620] Include updated translations in compiled bundle
0741820 
The formio builder ships its own translation files, which we
included when compiling the ICU message AST.
sergei-maertens added a commit that referenced this issue Nov 21, 2023
@sergei-maertens
🔧 [#3620] Launch storybook with version popup disabled
55d7546 
Found the config options via the TypeScript definitions :)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@sergei-maertens sergei-maertens

Labels
owner: utrecht
Projects
Development
Archived in project
Milestone
Release 2.5.0
Development

Successfully merging a pull request may close this issue.

Upgrade storybook to v7 open-formulieren/open-forms
2 participants
@joeribekker @sergei-maertens