Merge pull request #5072 from storybooks/tech/overhaul-ui-new-storyId

Tech/overhaul ui new story

addons/links/src/manager.js

@@ -5,7 +5,7 @@ import EVENTS, { ADDON_ID } from './constants';
 export const register = () => {
   addons.register(ADDON_ID, api => {
     api.on(EVENTS.REQUEST, ({ kind, name }) => {
-      const id = api.legacy_convertToComponentId(kind, name);
+      const id = api.storyId(kind, name);
       api.emit(EVENTS.RECEIVE, id);
     });
   });

addons/notes/src/register.tsx

@@ -14,7 +14,7 @@ addons.register(ADDON_ID, (api: API) => {
   addons.add(PANEL_ID, {
     type: types.TAB,
     title,
-    route: ({ componentId }: { componentId: any }) => `/info/${componentId}`, // todo add type
+    route: ({ storyId }: { storyId: String }) => `/info/${storyId}`, // todo add type
     match: ({ viewMode }: { viewMode: any }) => viewMode === 'info', // todo add type
     render,
   });

addons/storyshots/storyshots-core/src/api/snapshotsTestsTemplate.js

@@ -1,4 +1,3 @@
-/* eslint-disable jest/valid-describe */
 import { describe, it } from 'global';
 import { addSerializer } from 'jest-specific-snapshot';
 

lib/components/src/explorer/explorer.js

@@ -23,9 +23,9 @@ const toExpanded = memoize(50)((selected, stories) => {
   );
 });
 
-const Explorer = React.memo(({ stories, componentId, ...rest }) => {
+const Explorer = React.memo(({ stories, storyId, ...rest }) => {
   const list = Object.entries(stories);
-  const selected = toSelected(componentId, stories);
+  const selected = toSelected(storyId, stories);
   const expanded = toExpanded(selected, stories);
 
   return list.length ? (
@@ -45,7 +45,7 @@ const Explorer = React.memo(({ stories, componentId, ...rest }) => {
 Explorer.displayName = 'Explorer';
 Explorer.propTypes = {
   stories: PropTypes.shape({}).isRequired,
-  componentId: PropTypes.string,
+  storyId: PropTypes.string,
 };
 
 export { Explorer };

lib/components/src/preview/preview.js

@@ -50,29 +50,29 @@ class Preview extends Component {
     grid: false,
   };
 
-  shouldComponentUpdate({ componentId, viewMode, options }, { zoom, grid }) {
+  shouldComponentUpdate({ storyId, viewMode, options }, { zoom, grid }) {
     const { props, state } = this;
 
     return (
       options.isFullscreen !== props.options.isFullscreen ||
       options.isToolshown !== props.options.isToolshown ||
       viewMode !== props.viewMode ||
-      componentId !== props.componentId ||
+      storyId !== props.storyId ||
       zoom !== state.zoom ||
       grid !== state.grid
     );
   }
 
   componentDidUpdate(prevProps) {
-    const { api, componentId } = this.props;
-    const { componentId: prevComponentId } = prevProps;
-    if (componentId && componentId !== prevComponentId) {
-      api.emit(Events.SET_CURRENT_STORY, { componentId });
+    const { api, storyId } = this.props;
+    const { path: prevStoryId } = prevProps;
+    if (storyId && storyId !== prevStoryId) {
+      api.emit(Events.SET_CURRENT_STORY, { storyId });
     }
   }
 
   render() {
-    const { id, path, location, viewMode, componentId, getElements, actions, options } = this.props;
+    const { id, path, location, viewMode, storyId, getElements, actions, options } = this.props;
 
     const { zoom, grid } = this.state;
     const tools = getElements(types.TOOL);
@@ -83,7 +83,7 @@ class Preview extends Component {
     const panelList = Object.values(panels);
     const tabsList = [
       {
-        route: () => `/components/${componentId}`,
+        route: () => `/components/${storyId}`,
         match: () => viewMode === 'components',
         title: 'Canvas',
         key: 'canvas',
@@ -98,8 +98,8 @@ class Preview extends Component {
           left={[
             <TabBar key="tabs" scroll={false}>
               {tabsList.map((t, index) => {
-                const to = t.route({ componentId, viewMode, path, location });
-                const isActive = t.match({ componentId, viewMode, path, location });
+                const to = t.route({ storyId, viewMode, path, location });
+                const isActive = t.match({ storyId, viewMode, path, location });
                 return (
                   <S.UnstyledLink key={t.id || `l${index}`} to={to}>
                     <TabButton active={isActive}>{t.title}</TabButton>
@@ -146,14 +146,14 @@ class Preview extends Component {
               <IFrame
                 id="storybook-preview-iframe"
                 title={id || 'preview'}
-                src={`iframe.html?id=${componentId}`}
+                src={`iframe.html?id=${storyId}`}
                 allowFullScreen
               />
             </S.Frame>
           </Route>
           {panelList.map(panel => (
             <Fragment key={panel.id}>
-              {panel.render({ active: panel.match({ componentId, viewMode, location, path }) })}
+              {panel.render({ active: panel.match({ storyId, viewMode, location, path }) })}
             </Fragment>
           ))}
         </S.FrameWrap>
@@ -168,7 +168,7 @@ Preview.propTypes = {
     off: PropTypes.func,
     emit: PropTypes.func,
   }).isRequired,
-  componentId: PropTypes.string,
+  storyId: PropTypes.string,
   path: PropTypes.string,
   viewMode: PropTypes.oneOf(['components', 'info']),
   location: PropTypes.shape({}).isRequired,
@@ -181,7 +181,7 @@ Preview.propTypes = {
 };
 Preview.defaultProps = {
   viewMode: undefined,
-  componentId: undefined,
+  storyId: undefined,
   path: undefined,
 };
 

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

@@ -10,7 +10,7 @@ const props = {
     emit: () => {},
     off: () => {},
   },
-  componentId: 'string',
+  storyId: 'string',
   path: 'string',
   viewMode: 'components',
   location: {},

lib/components/src/router/router.js

@@ -16,7 +16,7 @@ const componentParams = memoize(1000)(path => {
     if (p1 && p1.match(/(components|info)/)) {
       Object.assign(result, {
         viewMode: p1,
-        componentId: p2,
+        storyId: p2,
       });
     }
   }

lib/components/src/treeview/treeview.mockdata.js

@@ -17,18 +17,21 @@ export const mockDataset = {
     },
     '1-11': {
       id: '1-11',
+      parent: '1',
       depth: 1,
       name: 'Child A1',
       path: '1-11',
     },
     '1-12-121': {
       id: '1-12-121',
+      parent: '1-12',
       depth: 2,
       name: 'GrandChild A1.1',
       path: '1-12-121',
     },
     '1-12-122': {
       id: '1-12-122',
+      parent: '1-12',
       depth: 2,
       name: 'GrandChild A1.2',
       path: '1-12-122',
@@ -38,18 +41,21 @@ export const mockDataset = {
       name: 'Child A2',
       depth: 1,
       children: ['1-12-121', '1-12-122'],
+      parent: '1',
       path: '1-12',
     },
     '2-21': {
       id: '2-21',
       depth: 1,
       name: 'Child B1',
+      parent: '2',
       path: '2-21',
     },
     '2-22': {
       id: '2-22',
       depth: 1,
       name: 'Child B2',
+      parent: '2',
       path: '2-22',
     },
     '3': {
@@ -64,25 +70,29 @@ export const mockDataset = {
       id: '3-31',
       depth: 1,
       name: 'Child A1',
+      parent: '3',
       path: '3-31',
     },
     '3-32': {
       id: '12',
       name: 'Child A2',
       depth: 1,
       children: ['3-32-321', '3-32-322'],
+      parent: '3',
       path: '3-32',
     },
     '3-32-321': {
       id: '3-32-321',
       depth: 2,
       name: 'GrandChild A1.1',
+      parent: '3-32',
       path: '3-32-321',
     },
     '3-32-322': {
       id: '3-32-322',
       depth: 2,
       name: 'GrandChild A1.2',
+      parent: '3-32',
       path: '3-32-322',
     },
   },
@@ -105,37 +115,43 @@ export const mockDataset = {
       id: '1-11',
       depth: 1,
       name: 'Child A1',
+      parent: '1',
       path: '1-11',
     },
     '1-12-121': {
       id: '121',
       depth: 2,
       name: 'GrandChild A1.1',
+      parent: '1-12',
       path: '1-12-121',
     },
     '1-12-122': {
       id: '122',
       depth: 2,
       name: 'GrandChild A1.2',
+      parent: '1-12',
       path: '1-12-122',
     },
     '1-12': {
       id: '12',
       name: 'Child A2',
       depth: 1,
       children: ['1-12-121', '1-12-122'],
+      parent: '1',
       path: '1-12',
     },
     '2-21': {
       id: '21',
       depth: 1,
       name: 'Child B1',
+      parent: '2',
       path: '2-21',
     },
     '2-22': {
       id: '22',
       depth: 1,
       name: 'Child B2',
+      parent: '2',
       path: '2-22',
     },
   },

lib/components/src/treeview/utils.js

@@ -46,24 +46,15 @@ export const getParent = ({ path, dataset }) => {
   if (!item || item.isRoot) {
     return undefined;
   }
-  const pid = path
-    .split('-')
-    .slice(0, -1)
-    .join('-');
-  return get({ path: pid, dataset });
+  return get({ path: item.parent, dataset });
 };
 export const getParents = ({ path, dataset }) => {
-  const items = path.split('-').slice(0, -1);
-
-  return items
-    .map((item, index, list) =>
-      list
-        .slice(0, index)
-        .concat(item)
-        .join('-')
-    )
-    .map(p => get({ path: p, dataset }))
-    .reverse();
+  const parent = getParent({ path, dataset });
+
+  if (!parent) {
+    return [];
+  }
+  return [parent, ...getParents({ path: parent.path, dataset })];
 };
 
 export const getMains = memoize(1)(dataset =>
@@ -107,7 +98,7 @@ export const getPrevious = ({ path, dataset, expanded }) => {
 
   if (index === 0) {
     if (parent && parent.isRoot) {
-      return getPrevious({ path: parent.path, dataset });
+      return getPrevious({ path: parent.path, dataset, expanded });
     }
     if (!parent) {
       return undefined;
@@ -122,7 +113,7 @@ export const getPrevious = ({ path, dataset, expanded }) => {
   }
 
   if (item.isRoot) {
-    return getPrevious({ path: item.path, dataset });
+    return getPrevious({ path: item.path, dataset, expanded });
   }
 
   return item;
@@ -171,7 +162,7 @@ export const getNext = ({ path, dataset, expanded }) => {
   );
 
   if (next.result && next.result.isRoot) {
-    return getNext({ path: next.result.path, dataset });
+    return getNext({ path: next.result.path, dataset, expanded });
   }
   return next.result;
 };

lib/components/src/treeview/utils.test.js

@@ -229,11 +229,11 @@ describe('getNext', () => {
     expect(output).toBe(undefined);
   });
   test('to next sibling with root as parent', () => {
-    const output = utils.getNext({ path: '1-11', dataset: withRoot.dataset });
+    const output = utils.getNext({ path: '1-11', ...withRoot });
     expect(output).toBe(withRoot.dataset['1-12']);
   });
   test('to next parent with root as parent - skip root', () => {
-    const output = utils.getNext({ path: '1-12', dataset: withRoot.dataset });
+    const output = utils.getNext({ path: '1-12', ...withRoot });
     expect(output).toBe(withRoot.dataset['3-31']);
   });
 });