Merge branch 'feature/ref-ui-updates' of github.com:storybookjs/storybook into feature/ref-ui-updates

# Conflicts:
#	lib/ui/src/components/sidebar/Loader.tsx
#	lib/ui/src/components/sidebar/RefBlocks.tsx

addons/docs/docs/recipes.md

@@ -251,13 +251,13 @@ Example.story = {
 };
 ```
 
-Alternatively, you can provide a function in the `docs.formatSource` parameter. For example, the following snippet in `.storybook/preview.js` globally removes the arrow at the beginning of a function that returns a string:
+Alternatively, you can provide a function in the `docs.transformSource` parameter. For example, the following snippet in `.storybook/preview.js` globally removes the arrow at the beginning of a function that returns a string:
 
 ```js
 const SOURCE_REGEX = /^\(\) => `(.*)`$/;
 export const parameters = {
   docs: {
-    formatSource: (src, storyId) => {
+    transformSource: (src, storyId) => {
       const match = SOURCE_REGEX.exec(src);
       return match ? match[1] : src;
     },

addons/docs/src/blocks/enhanceSource.test.ts

@@ -10,16 +10,16 @@ const emptyContext: StoryContext = {
   parameters: {},
 };
 
-const formatSource = (src?: string) => (src ? `formatted: ${src}` : 'no src');
+const transformSource = (src?: string) => (src ? `formatted: ${src}` : 'no src');
 
 describe('addon-docs enhanceSource', () => {
   describe('no source loaded', () => {
     const baseContext = emptyContext;
-    it('no formatSource', () => {
+    it('no transformSource', () => {
       expect(enhanceSource(baseContext)).toBeNull();
     });
-    it('formatSource', () => {
-      const parameters = { ...baseContext.parameters, docs: { formatSource } };
+    it('transformSource', () => {
+      const parameters = { ...baseContext.parameters, docs: { transformSource } };
       expect(enhanceSource({ ...baseContext, parameters })).toBeNull();
     });
   });
@@ -28,13 +28,13 @@ describe('addon-docs enhanceSource', () => {
       ...emptyContext,
       parameters: { storySource: { source: 'storySource.source' } },
     };
-    it('no formatSource', () => {
+    it('no transformSource', () => {
       expect(enhanceSource(baseContext)).toEqual({
         docs: { source: { code: 'storySource.source' } },
       });
     });
-    it('formatSource', () => {
-      const parameters = { ...baseContext.parameters, docs: { formatSource } };
+    it('transformSource', () => {
+      const parameters = { ...baseContext.parameters, docs: { transformSource } };
       expect(enhanceSource({ ...baseContext, parameters }).docs.source).toEqual({
         code: 'formatted: storySource.source',
       });
@@ -52,11 +52,11 @@ describe('addon-docs enhanceSource', () => {
         },
       },
     };
-    it('no formatSource', () => {
+    it('no transformSource', () => {
       expect(enhanceSource(baseContext)).toEqual({ docs: { source: { code: 'Source' } } });
     });
-    it('formatSource', () => {
-      const parameters = { ...baseContext.parameters, docs: { formatSource } };
+    it('transformSource', () => {
+      const parameters = { ...baseContext.parameters, docs: { transformSource } };
       expect(enhanceSource({ ...baseContext, parameters }).docs.source).toEqual({
         code: 'formatted: Source',
       });
@@ -70,12 +70,12 @@ describe('addon-docs enhanceSource', () => {
         docs: { source: { code: 'docs.source.code' } },
       },
     };
-    it('no formatSource', () => {
+    it('no transformSource', () => {
       expect(enhanceSource(baseContext)).toBeNull();
     });
-    it('formatSource', () => {
+    it('transformSource', () => {
       const { source } = baseContext.parameters.docs;
-      const parameters = { ...baseContext.parameters, docs: { source, formatSource } };
+      const parameters = { ...baseContext.parameters, docs: { source, transformSource } };
       expect(enhanceSource({ ...baseContext, parameters })).toBeNull();
     });
   });

addons/docs/src/blocks/enhanceSource.ts

@@ -40,7 +40,7 @@ const extract = (targetId: string, { source, locationsMap }: StorySource) => {
 export const enhanceSource = (context: StoryContext): Parameters => {
   const { id, parameters } = context;
   const { storySource, docs = {} } = parameters;
-  const { formatSource } = docs;
+  const { transformSource } = docs;
 
   // no input or user has manually overridden the output
   if (!storySource?.source || docs.source?.code) {
@@ -48,7 +48,7 @@ export const enhanceSource = (context: StoryContext): Parameters => {
   }
 
   const input = extract(id, storySource);
-  const code = formatSource ? formatSource(input, id) : input;
+  const code = transformSource ? transformSource(input, id) : input;
 
   return { docs: combineParameters(docs, { source: { code } }) };
 };

docs/src/pages/basics/exporting-storybook/index.md

@@ -37,11 +37,11 @@ Additionally, you can deploy Storybook directly into GitHub pages with our [stor
 
 Or, you can export your storybook into the docs directory and use it as the root for GitHub pages. Have a look at [this guide](https://github.com/blog/2233-publish-your-project-documentation-with-github-pages) for more information.
 
-## Deploying to ZEIT Now
+## Deploying to Vercel Now
 
-[ZEIT Now](https://zeit.co/home) is a cloud platform for websites and serverless APIs, that you can use to deploy your Storybook projects to your personal domain (or a free `.now.sh` suffixed URL).
+[Vercel Now](https://vercel.com/home) is a cloud platform for websites and serverless APIs, that you can use to deploy your Storybook projects to your personal domain (or a free `.now.sh` suffixed URL).
 
-- Install the [Now CLI](https://github.com/zeit/now):
+- Install the [Vercel Now CLI](https://github.com/zeit/now):
 
 ```sh
 npm i -g now

examples/html-kitchen-sink/.storybook/preview.js

@@ -15,7 +15,7 @@ addParameters({
   },
   docs: {
     iframeHeight: '200px',
-    formatSource: (src) => {
+    transformSource: (src) => {
       const match = SOURCE_REGEX.exec(src);
       return match ? match[1] : src;
     },

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,40 +32,24 @@ export const Contained = styled.div({
   paddingRight: 20,
 });
 
-const getRandomInt = (max: number) => Math.floor(Math.random() * Math.floor(max + 1));
+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<{ size: 'single' | 'multiple' | number }> = ({ size }) => {
-  if (typeof size === 'number') {
-    return (
-      <Fragment>
-        {Array.from(Array(size)).map((item, index) => (
-          // eslint-disable-next-line react/no-array-index-key
-          <Loadingitem depth={index > 0 ? getRandomInt(1) : 0} key={index} />
-        ))}
-      </Fragment>
-    );
-  }
-  return size === 'multiple' ? (
+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' : 5} />
+    <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__/**/*"]
 }