#6975 lib/ui TS migration - 1 (#7413)

#6975 lib/ui TS migration - 1

Co-authored-by: Leo Y. Li <leo.li@imagia.com>
Co-authored-by: Norbert de Langen <ndelangen@me.com>

lib/cli/bin/generate.js

@@ -75,9 +75,9 @@ if (process.argv[1].includes('getstorybook')) {
   });
 
   program
-  .usage('<command> [options]')
-  .version(pkg.version)
-  .parse(process.argv);
+    .usage('<command> [options]')
+    .version(pkg.version)
+    .parse(process.argv);
 
   if (!program.args.length) {
     program.help();

lib/components/src/ActionBar/ActionBar.stories.tsx

@@ -8,7 +8,7 @@ const action2 = action('action2');
 const action3 = action('action3');
 
 export default {
-  Component: ActionBar,
+  component: ActionBar,
   title: 'Basics|ActionBar',
   decorators: [
     (storyFn: () => ReactNode) => (

lib/components/src/blocks/ColorPalette.stories.tsx

@@ -5,7 +5,7 @@ import { DocsPageWrapper } from './DocsPage';
 
 export default {
   title: 'Docs|ColorPalette',
-  Component: ColorPalette,
+  component: ColorPalette,
   decorators: [getStory => <DocsPageWrapper>{getStory()}</DocsPageWrapper>],
 };
 

lib/components/src/blocks/Description.stories.tsx

@@ -6,7 +6,7 @@ import markdownCaption from './DocsPageExampleCaption.md';
 
 export default {
   title: 'Docs|Description',
-  Component: Description,
+  component: Description,
   decorators: [getStory => <DocsPageWrapper>{getStory()}</DocsPageWrapper>],
 };
 

lib/components/src/blocks/DocsPage.stories.tsx

@@ -8,7 +8,7 @@ import * as descriptionStories from './Description.stories';
 
 export default {
   title: 'Docs|DocsPage',
-  Component: DocsPage,
+  component: DocsPage,
   decorators: [
     storyFn => (
       <DocsWrapper>

lib/components/src/blocks/EmptyBlock.stories.tsx

@@ -5,7 +5,7 @@ import { DocsPageWrapper } from './DocsPage';
 
 export default {
   title: 'Docs|EmptyBlock',
-  Component: EmptyBlock,
+  component: EmptyBlock,
   decorators: [getStory => <DocsPageWrapper>{getStory()}</DocsPageWrapper>],
 };
 

lib/components/src/blocks/IconGallery.stories.tsx

@@ -6,7 +6,7 @@ import { Icons as ExampleIcon } from '../icon/icon';
 
 export default {
   title: 'Docs|IconGallery',
-  Component: IconGallery,
+  component: IconGallery,
   decorators: [getStory => <DocsPageWrapper>{getStory()}</DocsPageWrapper>],
 };
 

lib/components/src/blocks/Preview.stories.tsx

@@ -8,7 +8,7 @@ import * as sourceStories from './Source.stories';
 
 export default {
   title: 'Docs|Preview',
-  Component: Preview,
+  component: Preview,
   decorators: [getStory => <DocsPageWrapper>{getStory()}</DocsPageWrapper>],
 };
 

lib/components/src/blocks/PropsTable/PropRow.stories.tsx

@@ -5,7 +5,7 @@ import { Table } from './PropsTable';
 import { DocsPageWrapper } from '../DocsPage';
 
 export default {
-  Component: PropRow,
+  component: PropRow,
   title: 'Docs|PropRow',
   excludeStories: /.*Def$/,
   decorators: [

lib/components/src/blocks/PropsTable/PropsTable.stories.tsx

@@ -4,7 +4,7 @@ import { DocsPageWrapper } from '../DocsPage';
 import { stringDef, numberDef } from './PropRow.stories';
 
 export default {
-  Component: PropsTable,
+  component: PropsTable,
   title: 'Docs|PropTable',
   decorators: [storyFn => <DocsPageWrapper>{storyFn()}</DocsPageWrapper>],
 };

lib/components/src/blocks/Source.stories.tsx

@@ -4,7 +4,7 @@ import { DocsPageWrapper } from './DocsPage';
 
 export default {
   title: 'Docs|Source',
-  Component: Source,
+  component: Source,
   decorators: [getStory => <DocsPageWrapper>{getStory()}</DocsPageWrapper>],
 };
 

lib/components/src/blocks/Story.stories.tsx

@@ -5,7 +5,7 @@ import { Button } from '../Button/Button';
 
 export default {
   title: 'Docs|Story',
-  Component: Story,
+  component: Story,
   decorators: [getStory => <DocsPageWrapper>{getStory()}</DocsPageWrapper>],
 };
 

lib/components/src/blocks/Typeset.stories.tsx

@@ -5,7 +5,7 @@ import { DocsPageWrapper } from './DocsPage';
 
 export default {
   title: 'Docs|Typeset',
-  Component: Typeset,
+  component: Typeset,
   decorators: [getStory => <DocsPageWrapper>{getStory()}</DocsPageWrapper>],
 };
 

lib/components/src/brand/StorybookLogo.stories.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { StorybookLogo } from './StorybookLogo';
 
 export default {
-  Component: StorybookLogo,
+  component: StorybookLogo,
   title: 'Basics|Brand/StorybookLogo',
 };
 

lib/components/src/placeholder/placeholder.stories.tsx

@@ -4,7 +4,7 @@ import { Placeholder } from './placeholder';
 import { Link } from '../typography/link/link';
 
 export default {
-  Component: Placeholder,
+  component: Placeholder,
   title: 'Basics|Placeholder',
 };
 

lib/components/src/tooltip/TooltipLinkList.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent, Key, ReactNode } from 'react';
 import { styled } from '@storybook/theming';
 
-import ListItem, { LinkWrapperType } from './ListItem';
+import ListItem, { LinkWrapperType, ListItemProps } from './ListItem';
 
 const List = styled.div<{}>(
   {
@@ -13,12 +13,8 @@ const List = styled.div<{}>(
   })
 );
 
-export interface Link {
+export interface Link extends ListItemProps {
   id: string;
-  title?: ReactNode;
-  active?: boolean;
-  href?: string | object;
-  onClick?: () => void;
   isGatsby?: boolean;
 }
 

lib/components/src/typography/DocumentFormatting.stories.tsx

@@ -5,7 +5,7 @@ import { DocumentFormatting } from './DocumentFormatting';
 import markdownSample from './DocumentFormattingSample.md';
 
 export default {
-  Component: DocumentFormatting,
+  component: DocumentFormatting,
   title: 'Basics|DocumentFormatting',
   decorators: [
     (storyFn: any) => (

lib/ui/package.json

@@ -23,6 +23,8 @@
   },
   "dependencies": {
     "@storybook/addons": "5.2.0-beta.19",
+    "@storybook/addon-actions": "5.2.0-beta.19",
+    "@storybook/addon-knobs": "5.2.0-beta.19",
     "@storybook/api": "5.2.0-beta.19",
     "@storybook/channels": "5.2.0-beta.19",
     "@storybook/client-logger": "5.2.0-beta.19",

lib/ui/src/components/preview/iframe.stories.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { IFrame } from './iframe';
 
 export default {
-  Component: IFrame,
+  component: IFrame,
   title: 'UI|Preview/Iframe',
 };
 

lib/ui/src/components/sidebar/ListItemIcon.stories.tsx

@@ -11,9 +11,13 @@ export default {
 export const all = () => (
   <TooltipLinkList
     links={[
-      { title: 'has icon', left: <ListItemIcon icon="check" /> },
-      { title: 'has imgSrc', left: <ListItemIcon imgSrc="https://via.placeholder.com/20" /> },
-      { title: 'has neither', left: <ListItemIcon /> },
+      { title: 'has icon', left: <ListItemIcon icon="check" />, id: 'icon' },
+      {
+        title: 'has imgSrc',
+        left: <ListItemIcon imgSrc="https://via.placeholder.com/20" />,
+        id: 'img',
+      },
+      { title: 'has neither', left: <ListItemIcon />, id: 'non' },
     ]}
   />
 );

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

@@ -1,10 +1,5 @@
-// For use in tandem with TooltipLinkList
-// Refer to container/nav.js for usage
-
 import React from 'react';
-import PropTypes from 'prop-types';
 import { styled, css } from '@storybook/theming';
-
 import { Icons } from '@storybook/components';
 
 const sharedStyles = css`
@@ -28,7 +23,12 @@ const Placeholder = styled.div`
   ${sharedStyles};
 `;
 
-export default function ListItemIcon({ icon, imgSrc }) {
+export interface ListItemIconProps {
+  icon?: React.ComponentProps<typeof Icons>['icon'];
+  imgSrc?: string;
+}
+
+const ListItemIcon = ({ icon, imgSrc }: ListItemIconProps) => {
   if (icon) {
     return <Icon icon={icon} />;
   }
@@ -36,14 +36,6 @@ export default function ListItemIcon({ icon, imgSrc }) {
     return <Img src={imgSrc} alt="image" />;
   }
   return <Placeholder />;
-}
-
-ListItemIcon.propTypes = {
-  icon: PropTypes.string,
-  imgSrc: PropTypes.string,
 };
 
-ListItemIcon.defaultProps = {
-  icon: null,
-  imgSrc: null,
-};
+export default ListItemIcon;

lib/ui/src/components/sidebar/Sidebar.stories.tsx

@@ -5,7 +5,7 @@ import { standardData as standardHeaderData } from './SidebarHeading.stories';
 import { withRootData } from './SidebarStories.stories';
 
 export default {
-  Component: Sidebar,
+  component: Sidebar,
   title: 'UI|Sidebar/Sidebar',
   excludeStories: /.*Data$/,
 };

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

@@ -1,17 +1,19 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+
 import { styled } from '@storybook/theming';
-
 import { ScrollArea } from '@storybook/components';
+import { State } from '@storybook/api';
 
-import SidebarHeading from './SidebarHeading';
+import SidebarHeading, { SidebarHeadingProps } from './SidebarHeading';
 import SidebarStories from './SidebarStories';
 
-const Heading = styled(SidebarHeading)({
+const Heading = styled(SidebarHeading)<SidebarHeadingProps>({
   padding: '20px 20px 12px',
 });
 
-const Stories = styled(SidebarStories)(({ loading }) => (loading ? { marginTop: 8 } : {}));
+const Stories = styled(({ className, ...rest }) => (
+  <SidebarStories className={className} {...rest} />
+))(({ loading }) => (loading ? { marginTop: 8 } : {}));
 
 const Container = styled.nav({
   position: 'absolute',
@@ -30,7 +32,21 @@ const CustomScrollArea = styled(ScrollArea)({
   },
 });
 
-const Sidebar = ({ storyId, stories, menu, menuHighlighted, loading }) => (
+export interface SidebarProps {
+  stories: State['StoriesHash'];
+  menu: any[];
+  storyId?: string;
+  menuHighlighted?: boolean;
+  loading?: boolean;
+}
+
+const Sidebar = ({
+  storyId,
+  stories,
+  menu,
+  menuHighlighted = false,
+  loading = false,
+}: SidebarProps) => (
   <Container className="container sidebar-container">
     <CustomScrollArea vertical>
       <Heading className="sidebar-header" menuHighlighted={menuHighlighted} menu={menu} />
@@ -39,18 +55,4 @@ const Sidebar = ({ storyId, stories, menu, menuHighlighted, loading }) => (
   </Container>
 );
 
-Sidebar.propTypes = {
-  stories: PropTypes.shape({}).isRequired,
-  storyId: PropTypes.string,
-  menu: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
-  menuHighlighted: PropTypes.bool,
-  loading: PropTypes.bool,
-};
-Sidebar.defaultProps = {
-  storyId: undefined,
-  menuHighlighted: false,
-  loading: false,
-};
-Sidebar.displayName = 'Sidebar';
-
 export default Sidebar;

lib/ui/src/components/sidebar/SidebarHeading.stories.tsx

@@ -11,7 +11,7 @@ export default {
   component: SidebarHeading,
   title: 'UI|Sidebar/SidebarHeading',
   decorators: [
-    storyFn => (
+    (storyFn: any) => (
       <div
         style={{
           width: '240px',
@@ -26,9 +26,9 @@ export default {
 };
 
 const menuItems = [
-  { title: 'Menu Item 1', onClick: action('onActivateMenuItem') },
-  { title: 'Menu Item 2', onClick: action('onActivateMenuItem') },
-  { title: 'Menu Item 3', onClick: action('onActivateMenuItem') },
+  { title: 'Menu Item 1', onClick: action('onActivateMenuItem'), id: '1' },
+  { title: 'Menu Item 2', onClick: action('onActivateMenuItem'), id: '2' },
+  { title: 'Menu Item 3', onClick: action('onActivateMenuItem'), id: '3' },
 ];
 
 export const menuHighlighted = () => <SidebarHeading menuHighlighted menu={menuItems} />;

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

@@ -1,10 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-
 import { styled, withTheme } from '@storybook/theming';
 import { StorybookLogo, WithTooltip, TooltipLinkList, Button, Icons } from '@storybook/components';
 
-const BrandArea = styled.div(({ theme }) => ({
+export type BrandAreaProps = React.ComponentProps<'div'>;
+
+const BrandArea = styled.div<BrandAreaProps>(({ theme }) => ({
   fontSize: theme.typography.size.s2,
   fontWeight: theme.typography.weight.bold,
   marginRight: theme.layoutMargin,
@@ -43,7 +43,13 @@ const LogoLink = styled.a({
   textDecoration: 'none',
 });
 
-const MenuButton = styled(Button)(props => ({
+export type MenuButtonProps = React.ComponentProps<typeof Button> &
+  // FIXME: Button should extends from the native <button>
+  React.ComponentProps<'button'> & {
+    highlighted: boolean;
+  };
+
+const MenuButton = styled(Button)<MenuButtonProps>(props => ({
   position: 'relative',
   overflow: 'visible',
   padding: 7,
@@ -99,43 +105,44 @@ const Brand = withTheme(({ theme: { brand: { title = 'Storybook', url = './', im
   return null;
 });
 
-const SidebarHeading = ({ menuHighlighted, menu, ...props }) => {
-  return (
-    <Head {...props}>
-      <BrandArea>
-        <Brand />
-      </BrandArea>
+export interface SidebarHeadingProps {
+  menuHighlighted?: boolean;
+  menu: React.ComponentProps<typeof TooltipLinkList>['links'];
+  className?: string;
+}
 
-      <WithTooltip
-        placement="top"
-        trigger="click"
-        tooltip={({ onHide }) => (
-          <TooltipLinkList
-            links={menu.map(i => ({
-              ...i,
-              onClick: (...args) => {
-                i.onClick(...args);
-                onHide();
-              },
-            }))}
-          />
-        )}
-        closeOnClick
-      >
-        <MenuButton outline small containsIcon highlighted={menuHighlighted} title="Shortcuts">
-          <Icons icon="ellipsis" />
-        </MenuButton>
-      </WithTooltip>
-    </Head>
-  );
-};
-SidebarHeading.propTypes = {
-  menuHighlighted: PropTypes.bool,
-  menu: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
-};
+const SidebarHeading = ({ menuHighlighted = false, menu, ...props }: SidebarHeadingProps) => (
+  <Head {...props}>
+    <BrandArea>
+      <Brand />
+    </BrandArea>
 
-SidebarHeading.defaultProps = {
-  menuHighlighted: false,
-};
+    <WithTooltip
+      placement="top"
+      trigger="click"
+      tooltip={({ onHide }) => (
+        <TooltipLinkList
+          // @ts-ignore // FIXME: onCLick/onHide should pass React synthetic event down to avoid surprise
+          links={menu.map(({ onClick, ...rest }) => ({
+            ...rest,
+            onClick: (e: React.MouseEvent) => {
+              if (onClick) {
+                // @ts-ignore
+                onClick(e);
+              }
+              // @ts-ignore
+              onHide(e);
+            },
+          }))}
+        />
+      )}
+      closeOnClick
+    >
+      <MenuButton outline small containsIcon highlighted={menuHighlighted} title="Shortcuts">
+        <Icons icon="ellipsis" />
+      </MenuButton>
+    </WithTooltip>
+  </Head>
+);
 
-export { SidebarHeading as default };
+export default SidebarHeading;

lib/ui/src/components/sidebar/SidebarItem.stories.tsx

@@ -3,10 +3,10 @@ import React from 'react';
 import SidebarItem from './SidebarItem';
 
 export default {
-  Component: SidebarItem,
+  component: SidebarItem,
   title: 'UI|Sidebar/SidebarItem',
   decorators: [
-    storyFn => (
+    (storyFn: any) => (
       <div style={{ width: '240px', margin: '1rem', border: '1px dotted #ccc' }}>{storyFn()}</div>
     ),
   ],

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

@@ -1,11 +1,14 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { styled } from '@storybook/theming';
 import { opacify, transparentize } from 'polished';
-
 import { Icons } from '@storybook/components';
 
-const Expander = styled.span(
+export type ExpanderProps = React.ComponentProps<'span'> & {
+  isExpanded?: boolean;
+  isExpandable?: boolean;
+};
+
+const Expander = styled.span<ExpanderProps>(
   ({ theme }) => ({
     display: 'block',
     width: 0,
@@ -17,17 +20,23 @@ const Expander = styled.span(
     transition: 'transform .1s ease-out',
   }),
 
-  ({ isExpandable }) => (!isExpandable ? { borderLeftColor: 'transparent' } : {}),
+  ({ isExpandable = false }) => (!isExpandable ? { borderLeftColor: 'transparent' } : {}),
 
-  ({ isExpanded = false }) =>
-    isExpanded
+  ({ isExpanded = false }) => {
+    return isExpanded
       ? {
           transform: 'rotateZ(90deg)',
         }
-      : {}
+      : {};
+  }
 );
 
-const Icon = styled(Icons)(
+export type IconProps = React.ComponentProps<typeof Icons> & {
+  className: string; // FIXME: Icons should extended its typing from the native <svg>
+  isSelected?: boolean;
+};
+
+const Icon = styled(Icons)<IconProps>(
   {
     flex: 'none',
     width: 10,
@@ -46,7 +55,7 @@ const Icon = styled(Icons)(
     }
     return {};
   },
-  ({ isSelected }) => (isSelected ? { color: 'inherit' } : {})
+  ({ isSelected = false }) => (isSelected ? { color: 'inherit' } : {})
 );
 
 export const Item = styled(({ className, children, id }) => (
@@ -96,15 +105,22 @@ export const Item = styled(({ className, children, id }) => (
     }
 );
 
-export default function SidebarItem({
-  name,
-  isComponent,
-  isLeaf,
-  isExpanded,
-  isSelected,
+type SidebarItemProps = React.ComponentProps<typeof Item> & {
+  isComponent?: boolean;
+  isLeaf?: boolean;
+  isExpanded?: boolean;
+  isSelected?: boolean;
+};
+
+const SidebarItem = ({
+  name = 'loading story',
+  isComponent = false,
+  isLeaf = false,
+  isExpanded = false,
+  isSelected = false,
   ...props
-}) {
-  let iconName;
+}: SidebarItemProps) => {
+  let iconName: React.ComponentProps<typeof Icons>['icon'];
   if (isLeaf) {
     iconName = 'bookmarkhollow';
   } else if (isComponent) {
@@ -119,33 +135,11 @@ export default function SidebarItem({
       {...props}
       className={isSelected ? 'sidebar-item selected' : 'sidebar-item'}
     >
-      <Expander
-        className="sidebar-expander"
-        isExpandable={!isLeaf}
-        isExpanded={isExpanded ? true : undefined}
-      />
+      <Expander className="sidebar-expander" isExpandable={!isLeaf} isExpanded={isExpanded} />
       <Icon className="sidebar-svg-icon" icon={iconName} isSelected={isSelected} />
       <span>{name}</span>
     </Item>
   );
-}
-
-SidebarItem.propTypes = {
-  name: PropTypes.node,
-  depth: PropTypes.number,
-  isComponent: PropTypes.bool,
-  isLeaf: PropTypes.bool,
-  isExpanded: PropTypes.bool,
-  isSelected: PropTypes.bool,
-  loading: PropTypes.bool,
 };
 
-SidebarItem.defaultProps = {
-  name: 'loading story',
-  depth: 0,
-  isComponent: false,
-  isLeaf: false,
-  isExpanded: false,
-  isSelected: false,
-  loading: false,
-};
+export default SidebarItem;

lib/ui/src/components/sidebar/SidebarSearch.stories.tsx

@@ -4,10 +4,10 @@ import { actions as makeActions } from '@storybook/addon-actions';
 import SidebarSearch, { PureSidebarSearch } from './SidebarSearch';
 
 export default {
-  Component: SidebarSearch,
+  component: SidebarSearch,
   title: 'UI|Sidebar/SidebarSearch',
   decorators: [
-    storyFn => (
+    (storyFn: any) => (
       <div style={{ width: '240px', margin: '1rem', padding: '1rem', background: '#999' }}>
         {storyFn()}
       </div>
@@ -20,8 +20,6 @@ const pureActions = { ...actions, ...makeActions('onSetFocussed') };
 
 export const simple = () => <SidebarSearch {...actions} />;
 
-export const focussed = () => <PureSidebarSearch focussed {...pureActions} />;
+export const focussed = () => <PureSidebarSearch {...pureActions} />;
 
-export const filledIn = () => (
-  <PureSidebarSearch focussed defaultValue="Searchstring" {...pureActions} />
-);
+export const filledIn = () => <PureSidebarSearch defaultValue="Searchstring" {...pureActions} />;

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

@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
-import PropTypes from 'prop-types';
 import { styled } from '@storybook/theming';
 import { opacify } from 'polished';
-
 import { Icons } from '@storybook/components';
 
-const FilterField = styled.input(({ theme }) => ({
+export type FilterFieldProps = React.ComponentProps<'input'>;
+
+const FilterField = styled.input<FilterFieldProps>(({ theme }) => ({
   // resets
   appearance: 'none',
   border: 'none',
@@ -30,7 +30,9 @@ const FilterField = styled.input(({ theme }) => ({
   },
 }));
 
-const CancelButton = styled.button(({ theme }) => ({
+export type CancelButtonProps = React.ComponentProps<'button'>;
+
+const CancelButton = styled.button<CancelButtonProps>(({ theme }) => ({
   border: 0,
   margin: 0,
   padding: 4,
@@ -60,44 +62,55 @@ const CancelButton = styled.button(({ theme }) => ({
   },
 }));
 
-const FilterForm = styled.form(({ theme, focussed }) => ({
-  transition: 'all 150ms ease-out',
-  borderBottom: '1px solid transparent',
-  borderBottomColor: focussed
-    ? opacify(0.3, theme.appBorderColor)
-    : opacify(0.1, theme.appBorderColor),
-  outline: 0,
-  position: 'relative',
+export type FilterFormProps = React.ComponentProps<'form'> & {
+  focussed: boolean;
+};
 
-  input: {
-    color: theme.input.color,
-    fontSize: theme.typography.size.s2 - 1,
-    lineHeight: '20px',
-    paddingTop: '2px',
-    paddingBottom: '2px',
-    paddingLeft: '20px',
-  },
-
-  '> svg': {
-    transition: 'all 150ms ease-out',
-    position: 'absolute',
-    top: '50%',
-    height: '12px',
-    width: '12px',
-    transform: 'translateY(-50%)',
-    zIndex: '1',
-
-    background: 'transparent',
-
-    path: {
+const FilterForm = styled.form<FilterFormProps>(
+  ({ theme, focussed }) =>
+    ({
       transition: 'all 150ms ease-out',
-      fill: 'currentColor',
-      opacity: focussed ? 1 : 0.3,
-    },
-  },
-}));
+      borderBottom: '1px solid transparent',
+      borderBottomColor: focussed
+        ? opacify(0.3, theme.appBorderColor)
+        : opacify(0.1, theme.appBorderColor),
+      outline: 0,
+      position: 'relative',
 
-export const PureSidebarSearch = ({ className, onChange, ...props }) => {
+      input: {
+        color: theme.input.color,
+        fontSize: theme.typography.size.s2 - 1,
+        lineHeight: '20px',
+        paddingTop: '2px',
+        paddingBottom: '2px',
+        paddingLeft: '20px',
+      },
+
+      '> svg': {
+        transition: 'all 150ms ease-out',
+        position: 'absolute',
+        top: '50%',
+        height: '12px',
+        width: '12px',
+        transform: 'translateY(-50%)',
+        zIndex: '1',
+
+        background: 'transparent',
+
+        path: {
+          transition: 'all 150ms ease-out',
+          fill: 'currentColor',
+          opacity: focussed ? 1 : 0.3,
+        },
+      },
+    } as any) // FIXME: emotion have hard time to provide '> svg' typing
+);
+
+export type PureSidebarSearchProps = FilterFieldProps & {
+  onChange: (arg: string) => void;
+};
+
+export const PureSidebarSearch = ({ className, onChange, ...props }: PureSidebarSearchProps) => {
   const [focussed, onSetFocussed] = useState(false);
   return (
     <FilterForm
@@ -108,7 +121,6 @@ export const PureSidebarSearch = ({ className, onChange, ...props }) => {
     >
       <FilterField
         type="text"
-        autocomplete="off"
         id="storybook-explorer-searchfield"
         onFocus={() => onSetFocussed(true)}
         onBlur={() => onSetFocussed(false)}
@@ -125,13 +137,4 @@ export const PureSidebarSearch = ({ className, onChange, ...props }) => {
   );
 };
 
-PureSidebarSearch.propTypes = {
-  className: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-};
-
-PureSidebarSearch.defaultProps = {
-  className: null,
-};
-
 export default PureSidebarSearch;

lib/ui/src/components/sidebar/SidebarStories.js

@@ -1,164 +0,0 @@
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
-
-import { styled } from '@storybook/theming';
-import { Placeholder, Link as StyledLink } from '@storybook/components';
-import { Location, Link as RouterLink } from '@storybook/router';
-import { TreeState } from './treeview/treeview';
-
-import SidebarItem from './SidebarItem';
-import SidebarSearch from './SidebarSearch';
-import SidebarSubheading from './SidebarSubheading';
-
-const Search = styled(SidebarSearch)({
-  margin: '0 20px 1rem',
-});
-
-const Subheading = styled(SidebarSubheading)({
-  margin: '0 20px',
-});
-
-Subheading.propTypes = {
-  className: PropTypes.string,
-};
-
-Subheading.defaultProps = {
-  className: 'sidebar-subheading',
-};
-
-const Section = styled.section({
-  '& + section': {
-    marginTop: 20,
-  },
-  '&:last-of-type': {
-    marginBottom: 40,
-  },
-});
-
-const List = styled.div();
-List.displayName = 'List';
-
-const plain = {
-  color: 'inherit',
-  display: 'block',
-  textDecoration: 'none',
-  userSelect: 'none',
-};
-const PlainRouterLink = styled(RouterLink)(plain);
-const PlainLink = styled.a(plain);
-
-const Wrapper = styled.div({});
-
-const refinedViewMode = (viewMode: string) => {
-  return viewMode === 'settings' ? 'story' : viewMode;
-};
-
-export const Link = ({ id, prefix, name, children, isLeaf, onClick, onKeyUp }) =>
-  isLeaf ? (
-    <Location>
-      {({ viewMode }) => (
-        <PlainRouterLink
-          title={name}
-          id={prefix + id}
-          to={`/${refinedViewMode(viewMode) || 'story'}/${id}`}
-          onKeyUp={onKeyUp}
-          onClick={onClick}
-        >
-          {children}
-        </PlainRouterLink>
-      )}
-    </Location>
-  ) : (
-    <PlainLink title={name} id={prefix + id} onKeyUp={onKeyUp} onClick={onClick}>
-      {children}
-    </PlainLink>
-  );
-Link.displayName = 'Link';
-Link.propTypes = {
-  children: PropTypes.node.isRequired,
-  id: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  isLeaf: PropTypes.bool.isRequired,
-  prefix: PropTypes.string.isRequired,
-  onKeyUp: PropTypes.func.isRequired,
-  onClick: PropTypes.func.isRequired,
-};
-
-const SidebarStories = React.memo(({ stories, storyId, loading, className, ...rest }) => {
-  const list = Object.entries(stories);
-
-  if (loading) {
-    return (
-      <Wrapper className={className}>
-        <SidebarItem loading />
-        <SidebarItem loading />
-        <SidebarItem depth={1} loading />
-        <SidebarItem depth={1} loading />
-        <SidebarItem depth={2} loading />
-        <SidebarItem depth={3} loading />
-        <SidebarItem depth={3} loading />
-        <SidebarItem depth={3} loading />
-        <SidebarItem depth={1} loading />
-        <SidebarItem depth={1} loading />
-        <SidebarItem depth={1} loading />
-        <SidebarItem depth={2} loading />
-        <SidebarItem depth={2} loading />
-        <SidebarItem depth={2} loading />
-        <SidebarItem depth={3} loading />
-        <SidebarItem loading />
-        <SidebarItem loading />
-      </Wrapper>
-    );
-  }
-
-  if (list.length < 1) {
-    return (
-      <Wrapper className={className}>
-        <Placeholder key="empty">
-          <Fragment key="title">No stories found</Fragment>
-          <Fragment>
-            Learn how to{' '}
-            <StyledLink href="https://storybook.js.org/basics/writing-stories/" target="_blank">
-              write stories
-            </StyledLink>
-          </Fragment>
-        </Placeholder>
-      </Wrapper>
-    );
-  }
-
-  return (
-    <Wrapper className={className}>
-      <TreeState
-        key="treestate"
-        dataset={stories}
-        prefix="explorer"
-        selectedId={storyId}
-        filter=""
-        List={List}
-        Head={SidebarItem}
-        Link={Link}
-        Leaf={SidebarItem}
-        Title={Subheading}
-        Section={Section}
-        Message={Placeholder}
-        // eslint-disable-next-line react/jsx-no-duplicate-props
-        Filter={Search}
-        {...rest}
-      />
-    </Wrapper>
-  );
-});
-SidebarStories.propTypes = {
-  loading: PropTypes.bool,
-  stories: PropTypes.shape({}).isRequired,
-  storyId: PropTypes.string,
-  className: PropTypes.string,
-};
-SidebarStories.defaultProps = {
-  storyId: undefined,
-  loading: false,
-  className: null,
-};
-
-export default SidebarStories;

lib/ui/src/components/sidebar/SidebarStories.stories.tsx

@@ -5,7 +5,7 @@ import SidebarStories from './SidebarStories';
 import { mockDataset } from './treeview/treeview.mockdata';
 
 export default {
-  Component: SidebarStories,
+  component: SidebarStories,
   title: 'UI|Sidebar/SidebarStories',
   decorators: [s => <Spaced>{s()}</Spaced>],
   excludeStories: /.*Data$/,
@@ -16,19 +16,23 @@ export const withRootData = {
   storyId: '1-12-121',
 };
 
-export const withRoot = () => <SidebarStories stories={mockDataset.withRoot} storyId="1-12-121" />;
+export const withRoot = () => (
+  <SidebarStories stories={mockDataset.withRoot} storyId="1-12-121" loading={false} />
+);
 
 export const noRootData = {
   stories: mockDataset.noRoot,
   storyId: '1-12-121',
 };
 
-export const noRoot = () => <SidebarStories stories={mockDataset.noRoot} storyId="1-12-121" />;
+export const noRoot = () => (
+  <SidebarStories stories={mockDataset.noRoot} storyId="1-12-121" loading={false} />
+);
 
 export const emptyData = {
   stories: {},
 };
 
-export const empty = () => <SidebarStories stories={{}} />;
+export const empty = () => <SidebarStories stories={{}} loading={false} />;
 
 export const loading = () => <SidebarStories loading stories={{}} />;

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

@@ -0,0 +1,165 @@
+import React, { Fragment, FunctionComponent } from 'react';
+import PropTypes from 'prop-types';
+
+import { styled } from '@storybook/theming';
+import { Placeholder, Link as StyledLink } from '@storybook/components';
+import { State } from '@storybook/api';
+import { Location, Link as RouterLink } from '@storybook/router';
+import { TreeState } from './treeview/treeview';
+
+import SidebarItem from './SidebarItem';
+import SidebarSearch from './SidebarSearch';
+import SidebarSubheading from './SidebarSubheading';
+
+const Search = styled(SidebarSearch)({
+  margin: '0 20px 1rem',
+});
+
+const Subheading = styled(SidebarSubheading)({
+  margin: '0 20px',
+});
+
+Subheading.propTypes = {
+  className: PropTypes.string,
+};
+
+Subheading.defaultProps = {
+  className: 'sidebar-subheading',
+};
+
+const Section = styled.section({
+  '& + section': {
+    marginTop: 20,
+  },
+  '&:last-of-type': {
+    marginBottom: 40,
+  },
+});
+
+const List = styled.div();
+List.displayName = 'List';
+
+const plain = {
+  color: 'inherit',
+  display: 'block',
+  textDecoration: 'none',
+  userSelect: 'none',
+};
+// @ts-ignore
+const PlainRouterLink = styled(RouterLink)(plain);
+// @ts-ignore
+const PlainLink = styled.a(plain);
+
+const Wrapper = styled.div({});
+
+const refinedViewMode = (viewMode: string) => {
+  return viewMode === 'settings' ? 'story' : viewMode;
+};
+
+export const Link = ({ id, prefix, name, children, isLeaf, onClick, onKeyUp }) =>
+  isLeaf ? (
+    <Location>
+      {({ viewMode }) => (
+        <PlainRouterLink
+          title={name}
+          id={prefix + id}
+          to={`/${viewMode ? refinedViewMode(viewMode) : 'story'}/${id}`}
+          onKeyUp={onKeyUp}
+          onClick={onClick}
+        >
+          {children}
+        </PlainRouterLink>
+      )}
+    </Location>
+  ) : (
+    <PlainLink title={name} id={prefix + id} onKeyUp={onKeyUp} onClick={onClick}>
+      {children}
+    </PlainLink>
+  );
+Link.displayName = 'Link';
+Link.propTypes = {
+  children: PropTypes.node.isRequired,
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  isLeaf: PropTypes.bool.isRequired,
+  prefix: PropTypes.string.isRequired,
+  onKeyUp: PropTypes.func.isRequired,
+  onClick: PropTypes.func.isRequired,
+};
+
+export interface StoriesProps {
+  loading: boolean;
+  stories: State['StoriesHash'];
+  storyId?: undefined | string;
+  className?: undefined | string;
+}
+
+const SidebarStories: FunctionComponent<StoriesProps> = React.memo(
+  ({ stories, storyId, loading, className, ...rest }) => {
+    const list = Object.entries(stories);
+
+    if (loading) {
+      return (
+        <Wrapper className={className}>
+          <SidebarItem loading />
+          <SidebarItem loading />
+          <SidebarItem depth={1} loading />
+          <SidebarItem depth={1} loading />
+          <SidebarItem depth={2} loading />
+          <SidebarItem depth={3} loading />
+          <SidebarItem depth={3} loading />
+          <SidebarItem depth={3} loading />
+          <SidebarItem depth={1} loading />
+          <SidebarItem depth={1} loading />
+          <SidebarItem depth={1} loading />
+          <SidebarItem depth={2} loading />
+          <SidebarItem depth={2} loading />
+          <SidebarItem depth={2} loading />
+          <SidebarItem depth={3} loading />
+          <SidebarItem loading />
+          <SidebarItem loading />
+        </Wrapper>
+      );
+    }
+
+    if (list.length < 1) {
+      return (
+        <Wrapper className={className}>
+          <Placeholder key="empty">
+            <Fragment key="title">No stories found</Fragment>
+            <Fragment>
+              Learn how to{' '}
+              <StyledLink href="https://storybook.js.org/basics/writing-stories/" target="_blank">
+                write stories
+              </StyledLink>
+            </Fragment>
+          </Placeholder>
+        </Wrapper>
+      );
+    }
+
+    return (
+      <Wrapper className={className}>
+        <TreeState
+          key="treestate"
+          dataset={stories}
+          prefix="explorer"
+          selectedId={storyId}
+          filter=""
+          List={List}
+          Head={SidebarItem}
+          Link={Link}
+          Leaf={SidebarItem}
+          Title={Subheading}
+          Section={Section}
+          Message={Placeholder}
+          // eslint-disable-next-line react/jsx-no-duplicate-props
+          Filter={Search}
+          {...rest}
+        />
+      </Wrapper>
+    );
+  }
+);
+
+export default SidebarStories;

lib/ui/src/components/sidebar/SidebarSubheading.stories.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-
-import SidebarSubheading from './SidebarSubheading';
-
-storiesOf('UI|Sidebar/SidebarSubheading', module)
-  .addParameters({
-    component: SidebarSubheading,
-  })
-  .add('default', () => <SidebarSubheading>Subheading</SidebarSubheading>);

lib/ui/src/components/sidebar/SidebarSubheading.stories.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import SidebarSubheading from './SidebarSubheading';
+
+export default {
+  component: SidebarSubheading,
+  title: 'UI|Sidebar/SidebarSubheading',
+};
+
+export const simple = () => <SidebarSubheading>Subheading</SidebarSubheading>;

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

@@ -2,7 +2,9 @@ import React from 'react';
 import { transparentize } from 'polished';
 import { styled } from '@storybook/theming';
 
-const Heading = styled.div(({ theme }) => ({
+export type SubheadingProps = React.ComponentProps<'div'>;
+
+const Subheading = styled.div<SubheadingProps>(({ theme }) => ({
   letterSpacing: '0.35em',
   textTransform: 'uppercase',
   fontWeight: theme.typography.weight.black,
@@ -11,6 +13,9 @@ const Heading = styled.div(({ theme }) => ({
   color: transparentize(0.5, theme.color.defaultText),
 }));
 
-const Subheading = props => <Heading {...props} />;
+// issue #6098
+Subheading.defaultProps = {
+  className: 'sidebar-subheading',
+};
 
 export default Subheading;

lib/ui/src/settings/SettingsFooter.stories.js

@@ -3,7 +3,7 @@ import React from 'react';
 import SettingsFooter from './SettingsFooter';
 
 export default {
-  Component: SettingsFooter,
+  component: SettingsFooter,
   title: 'UI|Settings/SettingsFooter',
   decorators: [storyFn => <div style={{ width: '600px', margin: '2rem auto' }}>{storyFn()}</div>],
 };

lib/ui/tsconfig.json

@@ -1,10 +1,10 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "rootDir": "./src"
+    "rootDir": "./src",
+    "noImplicitAny": false,
+    "strictNullChecks": true
   },
   "include": ["src/**/*"],
-  "exclude": [
-    "src/__tests__/**/*"
-  ]
+  "exclude": ["src/__tests__/**/*"]
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/root",
-  "version": "5.2.0-beta.18",
+  "version": "5.2.0-beta.19",
   "private": true,
   "description": "Storybook is an open source tool for developing UI components in isolation for React, Vue and Angular. It makes building stunning UIs organized and efficient.",
   "keywords": [