Skip to content

Migrate all JavaScript stories to TypeScript #1035

@redfish4ktc

Description

@redfish4ktc

Is your technical request related to a problem? Please describe.

Some Storybook stories are still written in JavaScript.
This makes maintenance harder and prevents us from benefiting from TypeScript features like type checking and better IDE support.

Describe the solution you'd like

Migrate all remaining .stories.js files to TypeScript.

Goals:

  • Improve maintainability
  • Detect errors earlier
  • Provide better developer experience
  • Keep consistency with the rest of the codebase

Storybook: migrate JS stories to TypeScript

Scope in v0.23.0: 28 stories — 9 Low, 9 Medium, 10 High.

Low

  • DynamicStyle.stories.js — Low — simple style manipulation, minimal types needed
  • FixedIcons.stories.js — Low — simple LabelShape extension, straightforward config
  • Indicators.stories.js — Low — simple style configuration, basic vertex creation
  • LabelPosition.stories.js — Low — simple vertex positioning with style spreads
  • Layers.stories.js — Low — simple layer management, straightforward callbacks
  • LoD.stories.js — Low — simple level-of-detail with custom isVisible
  • Morph.stories.js — Low — simple morphing animation, minimal type issues
  • Shape.stories.js — Low — custom CylinderShape subclass, basic drawing
  • Visibility.stories.js — Low — simple visibility conditions, minimal typing

Medium

  • Drop.stories.js — Medium — FileReader API, untyped event handlers
  • Editing.stories.js — Medium — custom Graph subclass, HTML table creation, custom editor
  • EdgeTolerance.stories.js — Medium — custom Graph subclass with untyped method overrides
  • HoverIcons.stories.js — Medium — custom IconSet class, mouse listener state management
  • HoverStyle.stories.js — Medium — mouse listener object, clone utilities, style mutations
  • Labels.stories.js — Medium — multiple graph method overrides for label handling
  • OffPage.stories.js — Medium — function closures with mutual recursion, custom value objects
  • Permissions.stories.js — Medium — permission class, multiple graph method overrides
  • SecondLabel.stories.js — Medium — cellRenderer overrides, IIFE pattern, method reassignments

High

  • Boundary.stories.js — High — complex Graph subclass with multiple method overrides
  • Clipboard.stories.js — High — custom static methods, complex XML/model handling
  • ExtendCanvas.stories.js — High — large file, complex view customization, many overrides
  • Grid.stories.js — High — canvas rendering, IIFE pattern, complex prototype mods
  • Groups.stories.js — High — complex SelectionHandler/PopupMenuHandler overrides
  • HtmlLabel.stories.js — High — cached HTML rendering, custom data model, XML DOM
  • OrgChart.stories.js — High — complex layout customization, toolbar integration. fix: make the OrgChart story better work #532
  • PortRefs.stories.js — High — port constraint system, Shape prototype extensions
  • Scrollbars.stories.js — High — multiple custom handler classes, deep DOM manipulation
  • Tree.stories.js — High — custom Graph/View/Renderer subclasses, tree layout

Describe alternatives you've considered

Keep JavaScript stories as-is.
However, this increases maintenance cost and creates inconsistency in the codebase.

Additional context

Note

Migration MUST be done incrementally. Each story MUST be converted independently.

Tip

Starting with simpler stories can help validate the setup before migrating more complex ones.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions