storybook: streamline writing stories (#92035)

We want to streamline how we write stories, and a big part of that is
focusing on removing the boilerplate that it takes to write them.

This PR moves the common storybook primitives and creates separation
from the inner workings of storybook that lives in views/storybook, and
the public components that can be used to write actual stories

Following items that remain:

- [ ] ~drop `export default Storybook.story` requirement in favor of
simply exporting a function. The benefit here is that this is handled
for us by mdx loader, meaning anyone writing mdx can omit the export
entirely~

This cannot be done as CJS and ESM exports have to be sorted as per the
spec def, which means that we cannot preserve the order of stories. The
best solution here is to just migrate these components to MDX

```jsx
import story from 'sentry/stories'
export default function story((story) => {
	story('title', () => (){
		... content ...
	})
})

```
will just become markdown like

```mdx
## Story

### Title

content
```

- [ ] Consolidate components defined in colors.mdx and
typography.stories.tsx to components/stories and reuse them
- [ ]  Enable type checking for MDX components
- [ ]  Document how to write MDX for stories

---------

Co-authored-by: TkDodo <dominik.dorfmeister@sentry.io>

Author: JonasBa

knip.config.ts

@@ -33,7 +33,7 @@ const storyBookEntryPoints = [
   // our storybook implementation is here
   'static/app/stories/storyBook.tsx',
   // custom webpack loaders for stories
-  'static/app/**/stories/*loader.ts',
+  'static/app/stories/*loader.ts',
 ];
 
 const config: KnipConfig = {

rspack.config.ts

@@ -380,8 +380,8 @@ const appConfig: Configuration = {
   resolveLoader: {
     alias: {
       'type-loader': STORYBOOK_TYPES
-        ? path.resolve(__dirname, 'static/app/views/stories/type-loader.ts')
-        : path.resolve(__dirname, 'static/app/views/stories/noop-type-loader.ts'),
+        ? path.resolve(__dirname, 'static/app/stories/type-loader.ts')
+        : path.resolve(__dirname, 'static/app/stories/noop-type-loader.ts'),
     },
   },
 

static/app/components/acl/featureDisabled.stories.tsx

@@ -1,9 +1,9 @@
 import {Fragment} from 'react';
 
 import FeatureDisabled from 'sentry/components/acl/featureDisabled';
-import storyBook from 'sentry/stories/storyBook';
+import * as Storybook from 'sentry/stories';
 
-export default storyBook('FeatureDisabled', story => {
+export default Storybook.story('FeatureDisabled', story => {
   story('Default', () => {
     return (
       <Fragment>

static/app/components/alerts/pageBanner.stories.tsx

@@ -7,11 +7,10 @@ import PageBanner from 'sentry/components/alerts/pageBanner';
 import {Button} from 'sentry/components/core/button';
 import {LinkButton} from 'sentry/components/core/button/linkButton';
 import ExternalLink from 'sentry/components/links/externalLink';
-import SizingWindow from 'sentry/components/stories/sizingWindow';
 import {IconBroadcast} from 'sentry/icons';
-import storyBook from 'sentry/stories/storyBook';
+import * as Storybook from 'sentry/stories';
 
-export default storyBook('PageBanner', story => {
+export default Storybook.story('PageBanner', story => {
   const storiesButton = (
     <LinkButton
       external
@@ -80,7 +79,7 @@ export default storyBook('PageBanner', story => {
             flexGrow: <var>{flexGrow ? 1 : 0}</var>
           </Button>
         </p>
-        <SizingWindow>
+        <Storybook.SizingWindow>
           <PageBanner
             style={{flexGrow: flexGrow ? 1 : 0}}
             button={storiesButton}
@@ -90,7 +89,7 @@ export default storyBook('PageBanner', story => {
             image={replaysDeadRageBackground}
             title="UI Library Available"
           />
-        </SizingWindow>
+        </Storybook.SizingWindow>
       </Fragment>
     );
   });

static/app/components/assigneeBadge.stories.tsx

@@ -2,13 +2,13 @@ import {Fragment, useState} from 'react';
 import {uuid4} from '@sentry/core';
 
 import {AssigneeBadge} from 'sentry/components/assigneeBadge';
-import storyBook from 'sentry/stories/storyBook';
+import * as Storybook from 'sentry/stories';
 import type {Actor} from 'sentry/types/core';
 import type {Team} from 'sentry/types/organization';
 import {useUser} from 'sentry/utils/useUser';
 import {useUserTeams} from 'sentry/utils/useUserTeams';
 
-export default storyBook('AssigneeBadge', story => {
+export default Storybook.story('AssigneeBadge', story => {
   story('User Assignee', () => {
     const user = useUser();
     const [chevron1Toggle, setChevron1Toggle] = useState<'up' | 'down'>('down');

static/app/components/badge/groupPriority.stories.tsx

@@ -4,23 +4,22 @@ import {
   GroupPriorityBadge,
   GroupPriorityDropdown,
 } from 'sentry/components/badge/groupPriority';
-import SideBySide from 'sentry/components/stories/sideBySide';
-import storyBook from 'sentry/stories/storyBook';
+import * as Storybook from 'sentry/stories';
 import {PriorityLevel} from 'sentry/types/group';
 
 const PRIORITIES = [PriorityLevel.HIGH, PriorityLevel.MEDIUM, PriorityLevel.LOW];
 
-export const Badge = storyBook('GroupPriorityBadge', story => {
+export const Badge = Storybook.story('GroupPriorityBadge', story => {
   story('Default', () => (
-    <SideBySide>
+    <Storybook.SideBySide>
       {PRIORITIES.map(priority => (
         <GroupPriorityBadge key={priority} priority={priority} />
       ))}
-    </SideBySide>
+    </Storybook.SideBySide>
   ));
 });
 
-export const Dropdown = storyBook('GroupPriorityDropdown', story => {
+export const Dropdown = Storybook.story('GroupPriorityDropdown', story => {
   story('Default', () => {
     const [value, setValue] = useState(PriorityLevel.MEDIUM);
 

static/app/components/calendar/calendar.stories.tsx

@@ -3,18 +3,17 @@ import type {Range} from 'react-date-range';
 
 import {DatePicker, DateRangePicker} from 'sentry/components/calendar';
 import ExternalLink from 'sentry/components/links/externalLink';
-import JSXNode from 'sentry/components/stories/jsxNode';
-import JSXProperty from 'sentry/components/stories/jsxProperty';
-import storyBook from 'sentry/stories/storyBook';
+import * as Storybook from 'sentry/stories';
 
-export default storyBook('Calendar', story => {
+export default Storybook.story('Calendar', story => {
   story('DatePicker', () => {
     const [selected, setSelected] = useState<Date | undefined>(undefined);
     return (
       <Fragment>
         <p>
-          The most common props to set are <JSXProperty name="date" value={Date} /> with{' '}
-          <JSXProperty name="onChange" value={Function} />.
+          The most common props to set are{' '}
+          <Storybook.JSXProperty name="date" value={Date} /> with{' '}
+          <Storybook.JSXProperty name="onChange" value={Function} />.
         </p>
         <p>
           Under the hook we're using{' '}
@@ -34,10 +33,10 @@ export default storyBook('Calendar', story => {
     return (
       <Fragment>
         <p>
-          <JSXNode name="DateRangePicker" /> accepts{' '}
-          <JSXProperty name="startDate" value={Date} />,{' '}
-          <JSXProperty name="endDate" value={Date} /> along with{' '}
-          <JSXProperty name="onChange" value={Function} /> which accepts a{' '}
+          <Storybook.JSXNode name="DateRangePicker" /> accepts{' '}
+          <Storybook.JSXProperty name="startDate" value={Date} />,{' '}
+          <Storybook.JSXProperty name="endDate" value={Date} /> along with{' '}
+          <Storybook.JSXProperty name="onChange" value={Function} /> which accepts a{' '}
           <code>Range</code>.
         </p>
         <p>

static/app/components/charts/chartWidgetLoader.stories.tsx

@@ -1,25 +1,24 @@
 import {Fragment} from 'react';
 
 import {CodeSnippet} from 'sentry/components/codeSnippet';
-import JSXNode from 'sentry/components/stories/jsxNode';
-import storyBook from 'sentry/stories/storyBook';
+import * as Storybook from 'sentry/stories';
 
 // eslint-disable-next-line import/no-webpack-loader-syntax
 import types from '!!type-loader!sentry/components/charts/chartWidgetLoader';
 
-export default storyBook('ChartWidgetLoader', (story, APIReference) => {
+export default Storybook.story('ChartWidgetLoader', (story, APIReference) => {
   APIReference(types.ChartWidgetLoader);
 
   story('Getting Started', () => {
     return (
       <Fragment>
         <p>
-          <JSXNode name="ChartWidgetLoader" /> is a helper component that dynamically
-          imports and renders a chart. It currently only supports charts used in Insights,
-          specifically all chart widgets that are defined in
+          <Storybook.JSXNode name="ChartWidgetLoader" /> is a helper component that
+          dynamically imports and renders a chart. It currently only supports charts used
+          in Insights, specifically all chart widgets that are defined in
           <code>sentry/views/insights/common/components/widgets</code>. However, it will
           be expanded to support at least one other chart type (
-          <JSXNode name="EventGraph" />) in the future.
+          <Storybook.JSXNode name="EventGraph" />) in the future.
         </p>
 
         <p>

static/app/components/checkInTimeline/checkInTimeline.stories.tsx

@@ -6,9 +6,7 @@ import {ButtonBar} from 'sentry/components/core/button/buttonBar';
 import {CompactSelect} from 'sentry/components/core/compactSelect';
 import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
 import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
-import JSXNode from 'sentry/components/stories/jsxNode';
-import JSXProperty from 'sentry/components/stories/jsxProperty';
-import storyBook from 'sentry/stories/storyBook';
+import * as Storybook from 'sentry/stories';
 import {space} from 'sentry/styles/space';
 import {useDimensions} from 'sentry/utils/useDimensions';
 
@@ -79,7 +77,7 @@ function generateMockTickData(
     .filter(([ts, _]) => ts <= timeWindowConfig.end.getTime() / 1000);
 }
 
-export default storyBook('CheckInTimeline', story => {
+export default Storybook.story('CheckInTimeline', story => {
   story('Simple', () => {
     const elementRef = useRef<HTMLDivElement>(null);
     const {width: timelineWidth} = useDimensions<HTMLDivElement>({elementRef});
@@ -94,8 +92,8 @@ export default storyBook('CheckInTimeline', story => {
     return (
       <PageFiltersContainer>
         <p>
-          The <JSXNode name="CheckInTimeline" /> component may be used to render a
-          timeline of 'check-ins'.
+          The <Storybook.JSXNode name="CheckInTimeline" /> component may be used to render
+          a timeline of 'check-ins'.
         </p>
         <p>
           The timeline is given a list of "Buckets" where each bucket contains a time
@@ -133,7 +131,8 @@ export default storyBook('CheckInTimeline', story => {
         <p>
           You may compose various components exposed in the <code>checkInTimeline</code>{' '}
           module together to create a more visually useful timeline. See:{' '}
-          <JSXNode name="GridLineOverlay" /> and <JSXNode name="GridLineLabels" />
+          <Storybook.JSXNode name="GridLineOverlay" /> and{' '}
+          <Storybook.JSXNode name="GridLineLabels" />
         </p>
 
         <ExampleContainer>
@@ -151,9 +150,10 @@ export default storyBook('CheckInTimeline', story => {
         </ExampleContainer>
 
         <p>
-          Enabling the <JSXProperty name="allowZoom" value /> and{' '}
-          <JSXProperty name="showCursor" value /> attributes of the{' '}
-          <JSXNode name="GridLineOverlay" /> will make the timeline more interactive.
+          Enabling the <Storybook.JSXProperty name="allowZoom" value /> and{' '}
+          <Storybook.JSXProperty name="showCursor" value /> attributes of the{' '}
+          <Storybook.JSXNode name="GridLineOverlay" /> will make the timeline more
+          interactive.
         </p>
 
         <ExampleContainer>

static/app/components/clippedBox.stories.tsx

@@ -4,33 +4,28 @@ import styled from '@emotion/styled';
 import onboardingFrameworkSelectionJavascript from 'sentry-images/spot/replay-dead-rage-changelog.svg';
 
 import ClippedBox from 'sentry/components/clippedBox';
-import JSXNode from 'sentry/components/stories/jsxNode';
-import JSXProperty from 'sentry/components/stories/jsxProperty';
-import Matrix from 'sentry/components/stories/matrix';
-import SideBySide from 'sentry/components/stories/sideBySide';
-import SizingWindow from 'sentry/components/stories/sizingWindow';
-import storyBook from 'sentry/stories/storyBook';
+import * as Storybook from 'sentry/stories';
 import {space} from 'sentry/styles/space';
 
-export default storyBook('ClippedBox', story => {
+export default Storybook.story('ClippedBox', story => {
   story('Default', () => (
     <Fragment>
       <p>
-        By default <JSXNode name="ClippedBox" /> is just a container. Add{' '}
-        <JSXProperty name="defaultClipped" value /> to occlude the bottom part of the
-        content if the content height is larger than{' '}
-        <JSXProperty name="clipHeight" value={Number} />. You should also set{' '}
-        <JSXProperty name="clipHeight" value={Number} /> (default: 300) to be something
-        reasonable for the situation.
+        By default <Storybook.JSXNode name="ClippedBox" /> is just a container. Add{' '}
+        <Storybook.JSXProperty name="defaultClipped" value /> to occlude the bottom part
+        of the content if the content height is larger than{' '}
+        <Storybook.JSXProperty name="clipHeight" value={Number} />. You should also set{' '}
+        <Storybook.JSXProperty name="clipHeight" value={Number} /> (default: 300) to be
+        something reasonable for the situation.
       </p>
       <p>
-        Once expanded, <JSXNode name="ClippedBox" /> cannot be collapsed again.
+        Once expanded, <Storybook.JSXNode name="ClippedBox" /> cannot be collapsed again.
       </p>
-      <SizingWindow>
+      <Storybook.SizingWindow>
         <ClippedBox>
           <img src={onboardingFrameworkSelectionJavascript} height={300} />
         </ClippedBox>
-      </SizingWindow>
+      </Storybook.SizingWindow>
     </Fragment>
   ));
 
@@ -46,15 +41,15 @@ export default storyBook('ClippedBox', story => {
   `;
 
   story('Title', () => (
-    <SizingWindow>
+    <Storybook.SizingWindow>
       <ClippedBox title="This is the title">
         <img src={onboardingFrameworkSelectionJavascript} height={300} />
       </ClippedBox>
-    </SizingWindow>
+    </Storybook.SizingWindow>
   ));
 
   story('Custom Button & Fade', () => (
-    <Matrix
+    <Storybook.PropMatrix
       render={ClippedBox}
       propMatrix={{
         btnText: ['Custom Label'],
@@ -77,10 +72,10 @@ export default storyBook('ClippedBox', story => {
       <Fragment>
         <p>
           Some callbacks are available:{' '}
-          <JSXProperty name="onSetRenderedHeight" value={Function} />&{' '}
-          <JSXProperty name="onReveal" value={Function} />.
+          <Storybook.JSXProperty name="onSetRenderedHeight" value={Function} />&{' '}
+          <Storybook.JSXProperty name="onReveal" value={Function} />.
         </p>
-        <SideBySide>
+        <Storybook.SideBySide>
           {[50, 100, 150].map(imgHeight => {
             const [isRevealed, setIsRevealed] = useState(false);
             const [renderedHeight, setRenderedHeight] = useState<number | undefined>(
@@ -89,13 +84,13 @@ export default storyBook('ClippedBox', story => {
             return (
               <div key={imgHeight}>
                 <p>
-                  <JSXNode name="ClippedBox" props={{clipHeight: 100}}>
-                    <JSXNode name="img" props={{height: imgHeight}} />
-                  </JSXNode>
+                  <Storybook.JSXNode name="ClippedBox" props={{clipHeight: 100}}>
+                    <Storybook.JSXNode name="img" props={{height: imgHeight}} />
+                  </Storybook.JSXNode>
                 </p>
                 <p>isRevealed = {String(isRevealed)}</p>
                 <p>renderedHeight = {renderedHeight}</p>
-                <SizingWindow>
+                <Storybook.SizingWindow>
                   <ClippedBox
                     clipHeight={100}
                     onReveal={() => setIsRevealed(true)}
@@ -106,11 +101,11 @@ export default storyBook('ClippedBox', story => {
                       height={imgHeight}
                     />
                   </ClippedBox>
-                </SizingWindow>
+                </Storybook.SizingWindow>
               </div>
             );
           })}
-        </SideBySide>
+        </Storybook.SideBySide>
       </Fragment>
     );
   });