Merge branch 'next' of github.com:storybookjs/storybook into next

examples/dev-kits/main.js

@@ -4,9 +4,9 @@ module.exports = {
     ember: {
       id: 'ember',
       title: 'Ember',
-      url: 'https://deploy-preview-9210--storybookjs.netlify.com/ember-cli',
+      url: 'https://deploy-preview-9210--storybookjs.netlify.app/ember-cli',
     },
-    cra: 'https://deploy-preview-9210--storybookjs.netlify.com/cra-ts-kitchen-sink',
+    cra: 'https://deploy-preview-9210--storybookjs.netlify.app/cra-ts-kitchen-sink',
   },
   webpack: async (config) => ({
     ...config,

lib/api/src/modules/refs.ts

@@ -44,17 +44,23 @@ export type Refs = Record<string, ComposedRef>;
 export type RefId = string;
 export type RefUrl = string;
 
-export const getSourceType = (source: string) => {
-  const { origin, pathname } = location;
+// eslint-disable-next-line no-useless-escape
+const findFilename = /(\/((?:[^\/]+?)\.[^\/]+?)|\/)$/;
 
-  if (
-    source === origin ||
-    source === `${origin + pathname}iframe.html` ||
-    source === `${origin + pathname.replace(/(?!.*\/).*\.html$/, '')}iframe.html`
-  ) {
-    return 'local';
+export const getSourceType = (source: string) => {
+  const { origin: localOrigin, pathname: localPathname } = location;
+  const { origin: sourceOrigin, pathname: sourcePathname } = new URL(source);
+
+  const localFull = `${localOrigin + localPathname}`.replace(findFilename, '');
+  const sourceFull = `${sourceOrigin + sourcePathname}`.replace(findFilename, '');
+
+  if (localFull === sourceFull) {
+    return ['local', sourceFull];
   }
-  return 'external';
+  if (source) {
+    return ['external', sourceFull];
+  }
+  return [null, null];
 };
 
 export const defaultMapper: Mapper = (b, a) => {
@@ -82,7 +88,7 @@ export const init: ModuleFn = ({ store, provider }) => {
     findRef: (source) => {
       const refs = api.getRefs();
 
-      return Object.values(refs).find(({ url }) => `${url}/iframe.html`.match(source));
+      return Object.values(refs).find(({ url }) => url.match(source));
     },
     changeRefVersion: (id, url) => {
       const previous = api.getRefs()[id];
@@ -156,6 +162,7 @@ export const init: ModuleFn = ({ store, provider }) => {
   };
 
   const refs = provider.getConfig().refs || {};
+
   const initialState: SubState['refs'] = refs;
 
   Object.entries(refs).forEach(([k, v]) => {

lib/api/src/modules/stories.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-fallthrough */
 import { DOCS_MODE } from 'global';
 import { toId, sanitize } from '@storybook/csf';
 import {
@@ -288,7 +289,7 @@ export const init: ModuleFn = ({
   const initModule = () => {
     fullAPI.on(STORY_CHANGED, function handleStoryChange(storyId: string) {
       const { source }: { source: string } = this;
-      const sourceType = getSourceType(source);
+      const [sourceType] = getSourceType(source);
 
       if (sourceType === 'local') {
         const options = fullAPI.getCurrentParameter('options');
@@ -303,7 +304,7 @@ export const init: ModuleFn = ({
       // the event originates from an iframe, event.source is the iframe's location origin + pathname
       const { storyId } = store.getState();
       const { source }: { source: string } = this;
-      const sourceType = getSourceType(source);
+      const [sourceType, sourceLocation] = getSourceType(source);
 
       switch (sourceType) {
         // if it's a local source, we do nothing special
@@ -318,9 +319,13 @@ export const init: ModuleFn = ({
 
         // if it's a ref, we need to map the incoming stories to a prefixed version, so it cannot conflict with others
         case 'external': {
-          const ref = fullAPI.findRef(source);
-          fullAPI.setRef(ref.id, { ...ref, ...data }, true);
-          break;
+          const ref = fullAPI.findRef(sourceLocation);
+
+          if (ref) {
+            console.log('ref2', ref);
+            fullAPI.setRef(ref.id, { ...ref, ...data }, true);
+            break;
+          }
         }
 
         // if we couldn't find the source, something risky happened, we ignore the input, and log a warning
@@ -341,7 +346,7 @@ export const init: ModuleFn = ({
       [k: string]: any;
     }) {
       const { source }: { source: string } = this;
-      const sourceType = getSourceType(source);
+      const [sourceType, sourceLocation] = getSourceType(source);
 
       switch (sourceType) {
         case 'local': {
@@ -350,7 +355,7 @@ export const init: ModuleFn = ({
         }
 
         case 'external': {
-          const ref = fullAPI.findRef(source);
+          const ref = fullAPI.findRef(sourceLocation);
           fullAPI.selectStory(kind, story, { ...rest, ref: ref.id });
           break;
         }

lib/api/src/tests/refs.test.js

@@ -27,15 +27,30 @@ describe('refs', () => {
     describe('edge cases', () => {
       it('returns "local" when source matches location with /index.html in path', () => {
         // mockReturnValue(edgecaseLocations[0])
-        expect(getSourceType('https://storybook.js.org/storybook/iframe.html')).toBe('local');
+        expect(getSourceType('https://storybook.js.org/storybook/iframe.html')).toEqual([
+          'local',
+          'https://storybook.js.org/storybook',
+        ]);
+      });
+      it('returns "correct url" when source does not match location', () => {
+        expect(getSourceType('https://external.com/storybook/')).toEqual([
+          'external',
+          'https://external.com/storybook',
+        ]);
       });
     });
     // Other tests use "lastLocation" for the 'global' mock
     it('returns "local" when source matches location', () => {
-      expect(getSourceType('https://storybook.js.org/storybook/iframe.html')).toBe('local');
+      expect(getSourceType('https://storybook.js.org/storybook/iframe.html')).toEqual([
+        'local',
+        'https://storybook.js.org/storybook',
+      ]);
     });
     it('returns "external" when source does not match location', () => {
-      expect(getSourceType('https://external.com/storybook/iframe.html')).toBe('external');
+      expect(getSourceType('https://external.com/storybook/iframe.html')).toEqual([
+        'external',
+        'https://external.com/storybook',
+      ]);
     });
   });
 });

lib/channel-postmessage/src/index.ts

@@ -170,8 +170,13 @@ export class PostmsgTransport {
           ? `<span style="color: #FF4785">${event.type}</span>`
           : `<span style="color: #FFAE00">${event.type}</span>`;
 
-        event.source =
-          source || this.config.page === 'preview' ? rawEvent.origin : getEventSourceUrl(rawEvent);
+        if (source) {
+          const { origin, pathname } = new URL(source, document.location);
+          event.source = origin + pathname;
+        } else {
+          event.source =
+            this.config.page === 'preview' ? rawEvent.origin : getEventSourceUrl(rawEvent);
+        }
 
         if (!event.source) {
           pretty.error(

lib/core/src/server/manager/manager-webpack.config.js

@@ -55,8 +55,8 @@ export default ({
       refs
         ? new VirtualModulePlugin({
             [path.resolve(path.join(configDir, `generated-refs.js`))]: refsTemplate.replace(
-              '{{refs}}',
-              refs
+              `'{{refs}}'`,
+              JSON.stringify(refs)
             ),
           })
         : null,

lib/ui/src/components/sidebar/Loader.tsx

@@ -1,6 +1,8 @@
 import React, { FunctionComponent, Fragment } from 'react';
 import { styled } from '@storybook/theming';
 
+const LOADER_SEQUENCE = [0, 0, 1, 1, 2, 3, 3, 3, 1, 1, 1, 2, 2, 2, 3];
+
 const Loadingitem = styled.div<{
   depth?: number;
 }>(
@@ -30,30 +32,24 @@ export const Contained = styled.div({
   paddingRight: 20,
 });
 
-export const Loader: FunctionComponent<{
-  size: 'single' | 'multiple';
-}> = ({ size }) => {
-  return size === 'multiple' ? (
+interface LoaderProps {
+  /**
+   * The number of lines to display in the loader.
+   * These are indented according to a pre-defined sequence of depths.
+   */
+  size: number;
+}
+
+export const Loader: FunctionComponent<LoaderProps> = ({ size }) => {
+  const repeats = Math.ceil(size / LOADER_SEQUENCE.length);
+  // Creates an array that repeats LOADER_SEQUENCE depths in order, until the size is reached.
+  const sequence = Array.from(Array(repeats)).fill(LOADER_SEQUENCE).flat().slice(0, size);
+  return (
     <Fragment>
-      <Loadingitem />
-      <Loadingitem />
-      <Loadingitem depth={1} />
-      <Loadingitem depth={1} />
-      <Loadingitem depth={2} />
-      <Loadingitem depth={3} />
-      <Loadingitem depth={3} />
-      <Loadingitem depth={3} />
-      <Loadingitem depth={1} />
-      <Loadingitem depth={1} />
-      <Loadingitem depth={1} />
-      <Loadingitem depth={2} />
-      <Loadingitem depth={2} />
-      <Loadingitem depth={2} />
-      <Loadingitem depth={3} />
-      <Loadingitem />
-      <Loadingitem />
+      {sequence.map((depth, index) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <Loadingitem depth={depth} key={index} />
+      ))}
     </Fragment>
-  ) : (
-    <Loadingitem />
   );
 };

lib/ui/src/components/sidebar/RefBlocks.tsx

@@ -222,7 +222,7 @@ export const ErrorBlock: FunctionComponent<{ error: Error }> = ({ error }) => (
 
 export const LoaderBlock: FunctionComponent<{ isMain: boolean }> = ({ isMain }) => (
   <Contained>
-    <Loader size={isMain ? 'multiple' : 'single'} />
+    <Loader size={isMain ? 17 : 5} />
   </Contained>
 );
 

lib/ui/src/components/sidebar/RefIndicator.tsx

@@ -1,4 +1,11 @@
-import React, { FunctionComponent, useMemo, Fragment, ComponentProps, useCallback } from 'react';
+import React, {
+  FunctionComponent,
+  useMemo,
+  Fragment,
+  ComponentProps,
+  useCallback,
+  forwardRef,
+} from 'react';
 
 import { Icons, WithTooltip, Spaced, TooltipLinkList } from '@storybook/components';
 import { styled } from '@storybook/theming';
@@ -122,11 +129,12 @@ const CurrentVersion: FunctionComponent<CurrentVersionProps> = ({ url, versions
   );
 };
 
-export const RefIndicator: FunctionComponent<
+export const RefIndicator = forwardRef<
+  HTMLElement,
   RefType & {
     type: ReturnType<typeof getType>;
   }
-> = ({ type, ...ref }) => {
+>(({ type, ...ref }, forwardedRef) => {
   const api = useStorybookApi();
   const list = useMemo(() => Object.values(ref.stories || {}), [ref.stories]);
   const componentCount = useMemo(() => list.filter((v) => v.isComponent).length, [list]);
@@ -141,7 +149,7 @@ export const RefIndicator: FunctionComponent<
   );
 
   return (
-    <IndicatorPlacement>
+    <IndicatorPlacement ref={forwardedRef}>
       <WithTooltip
         placement="bottom-start"
         trigger="click"
@@ -195,7 +203,7 @@ export const RefIndicator: FunctionComponent<
       ) : null}
     </IndicatorPlacement>
   );
-};
+});
 
 const PerformanceDegradedMessage: FunctionComponent = () => (
   <Message href="https://storybook.js.org" target="_blank">

lib/ui/src/components/sidebar/Refs.tsx

@@ -1,7 +1,8 @@
-import React, { FunctionComponent, useMemo } from 'react';
+import React, { FunctionComponent, MouseEvent, useMemo, useState, useRef } from 'react';
 import { styled } from '@storybook/theming';
 
 import { ExpanderContext, useDataset } from './Tree/State';
+import { Expander } from './Tree/ListItem';
 import { RefIndicator } from './RefIndicator';
 import { AuthBlock, ErrorBlock, LoaderBlock, ContentBlock } from './RefBlocks';
 import { getType, RefType } from './RefHelpers';
@@ -12,15 +13,25 @@ export interface RefProps {
   isHidden: boolean;
 }
 
-const RefHead = styled.div({
+const RefHead = styled.button({
+  alignItems: 'center',
+  background: 'transparent',
+  border: 'none',
+  boxSizing: 'content-box',
+  cursor: 'pointer',
   display: 'flex',
+  marginLeft: -20,
+  padding: 0,
+  paddingLeft: 20,
+  position: 'relative',
+  textAlign: 'left',
+  width: '100%',
 });
 
 const RefTitle = styled.header(({ theme }) => ({
   fontWeight: theme.typography.weight.bold,
   fontSize: theme.typography.size.s2,
   color: theme.color.darkest,
-  textTransform: 'capitalize',
 
   flex: 1,
   height: 24,
@@ -32,13 +43,17 @@ const RefTitle = styled.header(({ theme }) => ({
   lineHeight: '24px',
 }));
 
-const Wrapper = styled.div({
+const Wrapper = styled.div<{ isMain: boolean }>(({ isMain }) => ({
   position: 'relative',
   marginLeft: -20,
   marginRight: -20,
-});
+  marginTop: isMain ? undefined : 4,
+}));
 
 export const Ref: FunctionComponent<RefType & RefProps> = (ref) => {
+  const [isExpanded, setIsExpanded] = useState(true);
+  const indicatorRef = useRef<HTMLElement>(null);
+
   const { stories, id: key, title = key, storyId, filter, isHidden = false, authUrl, error } = ref;
   const { dataSet, expandedSet, length, others, roots, setExpanded, selectedSet } = useDataset(
     stories,
@@ -46,6 +61,12 @@ export const Ref: FunctionComponent<RefType & RefProps> = (ref) => {
     storyId
   );
 
+  const handleClick = ({ target }: MouseEvent) => {
+    // Don't fire if the click is from the indicator.
+    if (target === indicatorRef.current || indicatorRef.current?.contains(target as Node)) return;
+    setIsExpanded(!isExpanded);
+  };
+
   const combo = useMemo(() => ({ setExpanded, expandedSet }), [setExpanded, expandedSet]);
 
   const isLoading = !length;
@@ -58,19 +79,27 @@ export const Ref: FunctionComponent<RefType & RefProps> = (ref) => {
   return isHidden ? null : (
     <ExpanderContext.Provider value={combo}>
       {isMain ? null : (
-        <RefHead>
+        <RefHead
+          aria-label={`${isExpanded ? 'Hide' : 'Show'} ${title} stories`}
+          aria-expanded={isExpanded}
+          type="button"
+          onClick={handleClick}
+        >
+          <Expander className="sidebar-ref-expander" depth={0} isExpanded={isExpanded} />
           <RefTitle title={title}>{title}</RefTitle>
-          <RefIndicator {...ref} type={type} />
+          <RefIndicator {...ref} type={type} ref={indicatorRef} />
         </RefHead>
       )}
-      <Wrapper data-title={title}>
-        {type === 'auth' && <AuthBlock id={ref.id} authUrl={authUrl} />}
-        {type === 'error' && <ErrorBlock error={error} />}
-        {type === 'loading' && <LoaderBlock isMain={isMain} />}
-        {type === 'ready' && (
-          <ContentBlock {...{ others, dataSet, selectedSet, expandedSet, roots }} />
-        )}
-      </Wrapper>
+      {isExpanded && (
+        <Wrapper data-title={title} isMain={isMain}>
+          {type === 'auth' && <AuthBlock id={ref.id} authUrl={authUrl} />}
+          {type === 'error' && <ErrorBlock error={error} />}
+          {type === 'loading' && <LoaderBlock isMain={isMain} />}
+          {type === 'ready' && (
+            <ContentBlock {...{ others, dataSet, selectedSet, expandedSet, roots }} />
+          )}
+        </Wrapper>
+      )}
     </ExpanderContext.Provider>
   );
 };

lib/ui/src/components/sidebar/Tree/ListItem.tsx

@@ -9,7 +9,7 @@ export type ExpanderProps = ComponentProps<'span'> & {
   depth: number;
 };
 
-const Expander = styled.span<ExpanderProps>(
+export const Expander = styled.span<ExpanderProps>(
   ({ theme, depth }) => ({
     position: 'absolute',
     display: 'block',

lib/ui/tsconfig.json

@@ -3,13 +3,9 @@
   "compilerOptions": {
     "rootDir": "./src",
     "types": ["webpack-env"],
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "lib": ["ESNext", "DOM", "DOM.Iterable"]
   },
-  "include": [
-    "src/**/*"
-  ],
-  "exclude": [
-    "src/**/*.test.*",
-    "src/__tests__/**/*"
-  ]
+  "include": ["src/**/*"],
+  "exclude": ["src/**/*.test.*", "src/__tests__/**/*"]
 }