CHANGE usage of State.storiesHash to StoriesHash & import other types * utils directly

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

@@ -2,7 +2,7 @@ import React, { FunctionComponent } from 'react';
 
 import { styled } from '@storybook/theming';
 import { ScrollArea } from '@storybook/components';
-import { State } from '@storybook/api';
+import { StoriesHash } from '@storybook/api';
 
 import SidebarHeading, { SidebarHeadingProps } from './SidebarHeading';
 import SidebarStories from './SidebarStories';
@@ -33,7 +33,7 @@ const CustomScrollArea = styled(ScrollArea)({
 });
 
 export interface SidebarProps {
-  stories: State['storiesHash'];
+  stories: StoriesHash;
   menu: any[];
   storyId?: string;
   menuHighlighted?: boolean;

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import { styled } from '@storybook/theming';
 import { Placeholder, Link as StyledLink } from '@storybook/components';
-import { State } from '@storybook/api';
+import { StoriesHash } from '@storybook/api';
 import { Location, Link as RouterLink } from '@storybook/router';
 import { TreeState } from './treeview/treeview';
 
@@ -123,7 +123,7 @@ Link.displayName = 'Link';
 
 export interface StoriesProps {
   loading: boolean;
-  stories: State['storiesHash'];
+  stories: StoriesHash;
   storyId?: undefined | string;
   className?: undefined | string;
 }

lib/ui/src/components/sidebar/treeview/treeview.mockdata.ts

@@ -1,6 +1,6 @@
-import { State } from '@storybook/api';
+import { StoriesHash } from '@storybook/api';
 
-type MockDataSet = Record<string, State['storiesHash']>;
+type MockDataSet = Record<string, StoriesHash>;
 
 export const mockDataset: MockDataSet = {
   withRoot: {

lib/ui/src/components/sidebar/treeview/utils.ts

@@ -2,8 +2,7 @@ import memoize from 'memoizerific';
 import Fuse from 'fuse.js';
 import { DOCS_MODE } from 'global';
 import { SyntheticEvent } from 'react';
-import { State } from '@storybook/api';
-import { Root, Group, Story } from '@storybook/api/dist/lib/stories';
+import { State, StoriesHash, isRoot, isGroup, isStory, Root, Group, Story } from '@storybook/api';
 
 const FUZZY_SEARCH_THRESHOLD = 0.4;
 
@@ -14,8 +13,6 @@ export const prevent = (e: SyntheticEvent) => {
 
 const toList = memoize(1)((dataset: Dataset) => Object.values(dataset));
 
-type StoriesHash = State['storiesHash'];
-
 export type Item = StoriesHash[keyof StoriesHash];
 
 export type Dataset = Record<string, Item>;
@@ -59,25 +56,6 @@ export const keyEventToAction = ({
 
 export const createId = (id: string, prefix: string) => `${prefix}_${id}`;
 
-export function isRoot(item: Item): item is Root {
-  if (item as Root) {
-    return item.isRoot;
-  }
-  return false;
-}
-export function isGroup(item: Item): item is Group {
-  if (item as Group) {
-    return !item.isRoot && !item.isLeaf;
-  }
-  return false;
-}
-export function isStory(item: Item): item is Story {
-  if (item as Story) {
-    return item.isLeaf;
-  }
-  return false;
-}
-
 export const get = memoize(1000)((id: string, dataset: Dataset) => dataset[id]);
 export const getParent = memoize(1000)((id: string, dataset: Dataset) => {
   const item = get(id, dataset);

lib/ui/src/containers/preview.tsx

@@ -1,13 +1,11 @@
 import { PREVIEW_URL } from 'global';
 import React from 'react';
 
-import { State, Consumer, Combo } from '@storybook/api';
+import { State, Consumer, Combo, StoriesHash } from '@storybook/api';
 
 import { Preview } from '../components/preview/preview';
 import { PreviewProps } from '../components/preview/PreviewProps';
 
-type StoriesHash = State['storiesHash'];
-
 const nonAlphanumSpace = /[^a-z0-9 ]/gi;
 const doubleSpace = /\s\s/gi;
 const replacer = (match: string) => ` ${match} `;

lib/ui/src/containers/sidebar.test.ts

@@ -1,7 +1,6 @@
-import { State } from '@storybook/api';
+import { StoriesHash } from '@storybook/api';
 import { collapseDocsOnlyStories, collapseAllStories } from './sidebar';
 
-type StoriesHash = State['storiesHash'];
 type Item = StoriesHash[keyof StoriesHash];
 
 const docsOnly = { parameters: { docsOnly: true } };

lib/ui/src/containers/sidebar.tsx

@@ -3,16 +3,13 @@ import React, { FunctionComponent } from 'react';
 import memoize from 'memoizerific';
 
 import { Badge } from '@storybook/components';
-import { Consumer, Combo, State } from '@storybook/api';
+import { Consumer, Combo, StoriesHash, Story } from '@storybook/api';
 
-import { Group, Story } from '@storybook/api/dist/lib/stories';
 import { shortcutToHumanString } from '../libs/shortcut';
 
 import ListItemIcon from '../components/sidebar/ListItemIcon';
 import SidebarComponent from '../components/sidebar/Sidebar';
-import { isStory } from '../components/sidebar/treeview/utils';
 
-type StoriesHash = State['storiesHash'];
 type Item = StoriesHash[keyof StoriesHash];
 
 const focusableUIElements = {