Skip to content
This repository has been archived by the owner on Jan 19, 2023. It is now read-only.

Overhaul of Octant storybook implementation #2386

Merged
merged 4 commits into from
May 4, 2021

Conversation

mklanjsek
Copy link
Contributor

The intention of this work was to provide better performance of our Storybook portal by using the newly released Storybook inline mode for angular components. However, it turned out that much more serious surgery was required to make everything working at that level, resulting in pretty much overhaul of internal Storybook organization.

  • Bumped Storybook to latest 6.3 build
  • Switched to inline story mode, so stories are now not displayed in iFrame, resulting in much better update performance. This required a few small fixes in our code base
  • Modified each story to stop using the old storiesOff model and use the hoisted annotations
  • Upgraded the component properties editing by replacing soon to be removed knobs addon (has issues with inline stories) with the new generation controls addon that supports editing in both Docs and Canvas mode
  • Added the Accessibility pane so we can start keeping an eye on component accessibility
  • Lots of small tweaks and improvements

@GuessWhoSamFoo
Copy link
Contributor

The deploy preview is failing because this needs a rebase to include the nelify.toml move from eb94d63

@@ -12,6 +10,11 @@ import {
Service,
ServiceAccount,
} from '../app/modules/shared/components/presentation/cytoscape2/shape';
import { Meta, Story } from '@storybook/angular/types-6-0';

export default {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point, Other/Resources was double entry, it's fixed now.

header: "current header",
title: 'Step 1',
description: 'this is a current step',
buttonGroup: buttonGroupView,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The button group will need to be updated as the schema for buttons have changed.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated button definition

component: AccordionComponent,
}}
<Story name="Accordion component"
component={AccordionComponent}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can another issue be opened to track removing component from each story? Probably will need to be done manually as it might be hard to script this.

https://github.com/storybookjs/storybook/blob/7064642e1aee7786c77fe735c064c0c29dbcee01/MIGRATION.md#deprecated-angular-story-component

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You are right, I missed that. All Component entries are now removed from MDX stories.

@mklanjsek
Copy link
Contributor Author

@GuessWhoSamFoo PTAL

Copy link
Contributor

@GuessWhoSamFoo GuessWhoSamFoo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are still seeing warnings for storyFn at 6.3: storybookjs/storybook#13074

Not a blocker, but something to watch when storybook 7 comes out.

@mklanjsek
Copy link
Contributor Author

Sounds good, I am not seeing these but will keep an eye on them.

@mklanjsek mklanjsek merged commit 936b255 into vmware-archive:master May 4, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants