Migrate stories format to JSON

Created on 3 June 2023, over 1 year ago
Updated 16 September 2024, 3 months ago

Problem/Motivation

Storybook 7 does not have support for YAML stories out-of-the-box anymore. They do, however, have JSON support for server components. Since we have YAML stories our components don't show in Storybook anymore.

Proposed resolution

Migrate stories to JSON format.

πŸ“Œ Task
Status

Fixed

Version

1.0

Component

Code

Created by

e0ipso Can Picafort

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

Comments & Activities

  • Issue created by @e0ipso
  • Status changed to Fixed over 1 year ago
  • Status changed to Needs work over 1 year ago
  • πŸ‡ΊπŸ‡ΈUnited States cosmicdreams Minneapolis/St. Paul

    With this change, I'm noticing that storybook reports errors in "id" conflicts. For example: We have the banner component conflicting with banner--tall because they both define themselves as a "CL Components/Examples/Banner" in the *.stories.json file

    (I think this might be a storybook 7 issue specifically)

  • πŸ‡ΊπŸ‡ΈUnited States dalemoore

    Is this why I'm getting these errors when running ddev yarn storybook? (total n00b at Storybook, DDEV, Docker, etc.)

    🚨 Unable to index files:
    WARN - ./web/modules/contrib/sdc_examples/components/my-banner--tall/my-banner--tall.stories.json,./web/modules/contrib/sdc_examples/components/my-banner--tall/my-banner--tall.stories.yml: Duplicate stories with id: cl-components-examples-banner--1-default
    WARN - ./web/modules/contrib/sdc_examples/components/my-banner--tall/my-banner--tall.stories.json,./web/modules/contrib/sdc_examples/components/my-banner--tall/my-banner--tall.stories.yml: Duplicate stories with id: cl-components-examples-banner--2-no-image
    WARN - ./web/modules/contrib/sdc_examples/components/my-banner--tall/my-banner--tall.stories.json,./web/modules/contrib/sdc_examples/components/my-banner--tall/my-banner--tall.stories.yml: Duplicate stories with id: cl-components-examples-banner--3-with-body
    WARN - ./web/modules/contrib/sdc_examples/components/my-banner--tall/my-banner--tall.stories.json,./web/modules/contrib/sdc_examples/components/my-banner--tall/my-banner--tall.stories.yml: Duplicate stories with id: cl-components-examples-banner--4-with-card
    WARN - ./web/modules/contrib/sdc_examples/components/my-banner--tall/my-banner--tall.stories.json,./web/modules/contrib/sdc_examples/components/my-banner/my-banner.stories.json: Duplicate stories with id: cl-components-examples-banner--1-default
    WARN - ./web/modules/contrib/sdc_examples/components/my-banner--tall/my-banner--tall.stories.json,./web/modules/contrib/sdc_examples/components/my-banner/my-banner.stories.json: Duplicate stories with id: cl-components-examples-banner--2-no-image
    WARN - ./web/modules/contrib/sdc_examples/components/my-banner--tall/my-banner--tall.stories.json,./web/modules/contrib/sdc_examples/components/my-banner/my-banner.stories.json: Duplicate stories with id: cl-components-examples-banner--3-with-body
    WARN - ./web/modules/contrib/sdc_examples/components/my-banner--tall/my-banner--tall.stories.json,./web/modules/contrib/sdc_examples/components/my-banner/my-banner.stories.yml: Duplicate stories with id: cl-components-examples-banner--1-default
    WARN - ./web/modules/contrib/sdc_examples/components/my-banner--tall/my-banner--tall.stories.json,./web/modules/contrib/sdc_examples/components/my-banner/my-banner.stories.yml: Duplicate stories with id: cl-components-examples-banner--2-no-image
    WARN - ./web/modules/contrib/sdc_examples/components/my-banner--tall/my-banner--tall.stories.json,./web/modules/contrib/sdc_examples/components/my-banner/my-banner.stories.yml: Duplicate stories with id: cl-components-examples-banner--3-with-body
    WARN - ./web/modules/contrib/sdc_examples/components/my-button--primary/my-button--primary.stories.json,./web/modules/contrib/sdc_examples/components/my-button--primary/my-button--primary.stories.yml: Duplicate stories with id: cl-components-examples-button--1-default
    WARN - ./web/modules/contrib/sdc_examples/components/my-button--primary/my-button--primary.stories.json,./web/modules/contrib/sdc_examples/components/my-button--primary/my-button--primary.stories.yml: Duplicate stories with id: cl-components-examples-button--2-like
    WARN - ./web/modules/contrib/sdc_examples/components/my-button--primary/my-button--primary.stories.json,./web/modules/contrib/sdc_examples/components/my-button/my-button.stories.json: Duplicate stories with id: cl-components-examples-button--1-default
    WARN - ./web/modules/contrib/sdc_examples/components/my-button--primary/my-button--primary.stories.json,./web/modules/contrib/sdc_examples/components/my-button/my-button.stories.json: Duplicate stories with id: cl-components-examples-button--2-like
    WARN - ./web/modules/contrib/sdc_examples/components/my-button--primary/my-button--primary.stories.json,./web/modules/contrib/sdc_examples/components/my-button/my-button.stories.yml: Duplicate stories with id: cl-components-examples-button--1-default
    WARN - ./web/modules/contrib/sdc_examples/components/my-button--primary/my-button--primary.stories.json,./web/modules/contrib/sdc_examples/components/my-button/my-button.stories.yml: Duplicate stories with id: cl-components-examples-button--2-like
    WARN - ./web/modules/contrib/sdc_examples/components/my-card--light/my-card--light.stories.json,./web/modules/contrib/sdc_examples/components/my-card--light/my-card--light.stories.yml: Duplicate stories with id: cl-components-examples-card-light--1-default
    WARN - ./web/modules/contrib/sdc_examples/components/my-card/my-card.stories.json,./web/modules/contrib/sdc_examples/components/my-card/my-card.stories.yml: Duplicate stories with id: cl-components-examples-card--1-default
    WARN - ./web/modules/contrib/sdc_examples/components/my-cta/my-cta.stories.json,./web/modules/contrib/sdc_examples/components/my-cta/my-cta.stories.yml: Duplicate stories with id: cl-components-examples-call-to-action--1-default
    WARN - ./web/modules/contrib/sdc_examples/components/my-button--primary/my-button--primary.stories.json,./web/modules/contrib/sdc_examples/sdc_examples_replacements/components/my-button--primary/my-button--primary.stories.json: Duplicate stories with id: cl-components-examples-button--1-default
    WARN - ./web/modules/contrib/sdc_examples/components/my-button--primary/my-button--primary.stories.json,./web/modules/contrib/sdc_examples/sdc_examples_replacements/components/my-button--primary/my-button--primary.stories.json: Duplicate stories with id: cl-components-examples-button--2-like
    WARN - ./web/modules/contrib/sdc_examples/components/my-button--primary/my-button--primary.stories.json,./web/modules/contrib/sdc_examples/sdc_examples_replacements/components/my-button--primary/my-button--primary.stories.yml: Duplicate stories with id: cl-components-examples-button--1-default
    WARN - ./web/modules/contrib/sdc_examples/components/my-button--primary/my-button--primary.stories.json,./web/modules/contrib/sdc_examples/sdc_examples_replacements/components/my-button--primary/my-button--primary.stories.yml: Duplicate stories with id: cl-components-examples-button--2-like
  • πŸ‡³πŸ‡±Netherlands basvredeling Amsterdam

    @dalemoore @cosmicdreams If you set up storybook to only monitor the .yml's, not the .json's that'll fix some of the warnings:

    stories: [
        "../web/modules/**/*.stories.mdx",
        "../web/modules/**/*.stories.@(yml)",
        "../web/themes/**/*.stories.mdx",
        "../web/themes/**/*.stories.@(yml)"
    ]
    

    I'll also post an MR in a minute, changing some of the IDs in the yamls to solve the duplicate ID warnings.

  • @basvredeling opened merge request.
  • @basvredeling opened merge request.
  • Status changed to Needs review over 1 year ago
  • πŸ‡ΊπŸ‡ΈUnited States cosmicdreams Minneapolis/St. Paul
  • Status changed to Fixed 3 months ago
  • πŸ‡ΊπŸ‡ΈUnited States lhridley
  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.71.5 2024