From 09592d48ce69b43720a1c7915e2fdad5db574a39 Mon Sep 17 00:00:00 2001 From: passbyval <40154944+passbyval@users.noreply.github.com> Date: Wed, 16 Mar 2022 00:11:24 -0500 Subject: [PATCH 01/11] Update Sidebar.tsx Fix nesting issue for refs in sidebar component --- lib/ui/src/components/sidebar/Sidebar.tsx | 28 +++++++++++------------ 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/lib/ui/src/components/sidebar/Sidebar.tsx b/lib/ui/src/components/sidebar/Sidebar.tsx index 53f2b2adcdf..386ab345717 100644 --- a/lib/ui/src/components/sidebar/Sidebar.tsx +++ b/lib/ui/src/components/sidebar/Sidebar.tsx @@ -105,23 +105,21 @@ export const Sidebar: FunctionComponent = React.memo( () => (DOCS_MODE ? collapseAllStories : collapseDocsOnlyStories)(storiesHash), [DOCS_MODE, storiesHash] ); + const adaptedRefs = useMemo(() => { - if (DOCS_MODE) { - return Object.keys(refs).reduce((acc: Refs, cur) => { - const ref = refs[cur]; - if (ref.stories) { - acc[cur] = { - ...ref, - stories: collapseDocsOnlyStories(ref.stories), - }; - } else { - acc[cur] = ref; - } - return acc; - }, {}); - } - return refs; + return Object.entries(refs).reduce((acc: Refs, [id, ref]: [string, ComposedRef]) => { + if (ref.stories) { + acc[id] = { + ...ref, + stories: collapseFn(ref.stories), + }; + } else { + acc[id] = ref; + } + return acc; + }, {}); }, [DOCS_MODE, refs]); + const dataset = useCombination(stories, storiesConfigured, storiesFailed, adaptedRefs); const isLoading = !dataset.hash[DEFAULT_REF_ID].ready; const lastViewedProps = useLastViewed(selected); From 64716db6984a1e0bef601d30a20ca975eed6967f Mon Sep 17 00:00:00 2001 From: Valerie Rutsch Date: Wed, 16 Mar 2022 00:30:55 -0500 Subject: [PATCH 02/11] ...more --- lib/api/src/index.tsx | 3 ++- lib/ui/src/components/sidebar/Sidebar.tsx | 8 +++----- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/lib/api/src/index.tsx b/lib/api/src/index.tsx index 41acc3cbace..f1dad9e3b90 100644 --- a/lib/api/src/index.tsx +++ b/lib/api/src/index.tsx @@ -25,6 +25,7 @@ import { createContext } from './context'; import Store, { Options } from './store'; import getInitialState from './initial-state'; import type { StoriesHash, Story, Root, Group } from './lib/stories'; +import type { ComposedRef } from './modules/refs'; import { isGroup, isRoot, isStory } from './lib/stories'; import * as provider from './modules/provider'; @@ -328,7 +329,7 @@ export function useStorybookApi(): API { return api; } -export type { StoriesHash, Story, Root, Group }; +export type { StoriesHash, Story, Root, Group, ComposedRef }; export { ManagerConsumer as Consumer, ManagerProvider as Provider, isGroup, isRoot, isStory }; export interface EventMap { diff --git a/lib/ui/src/components/sidebar/Sidebar.tsx b/lib/ui/src/components/sidebar/Sidebar.tsx index 386ab345717..554fef817b5 100644 --- a/lib/ui/src/components/sidebar/Sidebar.tsx +++ b/lib/ui/src/components/sidebar/Sidebar.tsx @@ -3,7 +3,7 @@ import React, { FunctionComponent, useMemo } from 'react'; import { styled } from '@storybook/theming'; import { ScrollArea, Spaced } from '@storybook/components'; -import type { StoriesHash, State } from '@storybook/api'; +import type { StoriesHash, State, ComposedRef } from '@storybook/api'; import { Heading } from './Heading'; @@ -100,11 +100,9 @@ export const Sidebar: FunctionComponent = React.memo( enableShortcuts = true, refs = {}, }) => { + const collapseFn = DOCS_MODE ? collapseAllStories : collapseDocsOnlyStories; const selected: Selection = useMemo(() => storyId && { storyId, refId }, [storyId, refId]); - const stories = useMemo( - () => (DOCS_MODE ? collapseAllStories : collapseDocsOnlyStories)(storiesHash), - [DOCS_MODE, storiesHash] - ); + const stories = useMemo(() => collapseFn(storiesHash), [DOCS_MODE, storiesHash]); const adaptedRefs = useMemo(() => { return Object.entries(refs).reduce((acc: Refs, [id, ref]: [string, ComposedRef]) => { From 097ad6fae510db6ac97bac685b396060917e5189 Mon Sep 17 00:00:00 2001 From: Valerie Rutsch Date: Wed, 16 Mar 2022 21:20:51 -0500 Subject: [PATCH 03/11] Add specs --- .../src/__tests__/{index.js => index.test.ts} | 0 lib/ui/src/components/sidebar/Sidebar.tsx | 146 +++++++++--------- .../sidebar/__tests__/Sidebar.test.tsx | 107 +++++++++++++ .../sidebar/{ => __tests__}/data.test.ts | 2 +- 4 files changed, 181 insertions(+), 74 deletions(-) rename lib/ui/src/__tests__/{index.js => index.test.ts} (100%) create mode 100644 lib/ui/src/components/sidebar/__tests__/Sidebar.test.tsx rename lib/ui/src/components/sidebar/{ => __tests__}/data.test.ts (98%) diff --git a/lib/ui/src/__tests__/index.js b/lib/ui/src/__tests__/index.test.ts similarity index 100% rename from lib/ui/src/__tests__/index.js rename to lib/ui/src/__tests__/index.test.ts diff --git a/lib/ui/src/components/sidebar/Sidebar.tsx b/lib/ui/src/components/sidebar/Sidebar.tsx index 554fef817b5..7c6e5e52d52 100644 --- a/lib/ui/src/components/sidebar/Sidebar.tsx +++ b/lib/ui/src/components/sidebar/Sidebar.tsx @@ -88,8 +88,8 @@ export interface SidebarProps { enableShortcuts?: boolean; } -export const Sidebar: FunctionComponent = React.memo( - ({ +export const Sidebar: FunctionComponent = React.memo((props) => { + const { storyId = null, refId = DEFAULT_REF_ID, stories: storiesHash, @@ -99,78 +99,78 @@ export const Sidebar: FunctionComponent = React.memo( menuHighlighted = false, enableShortcuts = true, refs = {}, - }) => { - const collapseFn = DOCS_MODE ? collapseAllStories : collapseDocsOnlyStories; - const selected: Selection = useMemo(() => storyId && { storyId, refId }, [storyId, refId]); - const stories = useMemo(() => collapseFn(storiesHash), [DOCS_MODE, storiesHash]); + } = props; - const adaptedRefs = useMemo(() => { - return Object.entries(refs).reduce((acc: Refs, [id, ref]: [string, ComposedRef]) => { - if (ref.stories) { - acc[id] = { - ...ref, - stories: collapseFn(ref.stories), - }; - } else { - acc[id] = ref; - } - return acc; - }, {}); - }, [DOCS_MODE, refs]); + const collapseFn = DOCS_MODE ? collapseAllStories : collapseDocsOnlyStories; + const selected: Selection = useMemo(() => storyId && { storyId, refId }, [storyId, refId]); + const stories = useMemo(() => collapseFn(storiesHash), [DOCS_MODE, storiesHash]); - const dataset = useCombination(stories, storiesConfigured, storiesFailed, adaptedRefs); - const isLoading = !dataset.hash[DEFAULT_REF_ID].ready; - const lastViewedProps = useLastViewed(selected); + const adaptedRefs = useMemo(() => { + return Object.entries(refs).reduce((acc: Refs, [id, ref]: [string, ComposedRef]) => { + if (ref.stories) { + acc[id] = { + ...ref, + stories: collapseFn(ref.stories), + }; + } else { + acc[id] = ref; + } + return acc; + }, {}); + }, [DOCS_MODE, refs]); - return ( - - - - + const dataset = useCombination(stories, storiesConfigured, storiesFailed, adaptedRefs); + const isLoading = !dataset.hash[DEFAULT_REF_ID].ready; + const lastViewedProps = useLastViewed(selected); - - {({ - query, - results, - isBrowsing, - closeMenu, - getMenuProps, - getItemProps, - highlightedIndex, - }) => ( - - - - - )} - - - - - ); - } -); + return ( + + + + + + + {({ + query, + results, + isBrowsing, + closeMenu, + getMenuProps, + getItemProps, + highlightedIndex, + }) => ( + + + + + )} + + + + + ); +}); diff --git a/lib/ui/src/components/sidebar/__tests__/Sidebar.test.tsx b/lib/ui/src/components/sidebar/__tests__/Sidebar.test.tsx new file mode 100644 index 00000000000..84e21d0bebe --- /dev/null +++ b/lib/ui/src/components/sidebar/__tests__/Sidebar.test.tsx @@ -0,0 +1,107 @@ +import React from 'react'; +import { render, screen, fireEvent } from '@testing-library/react'; +import { ThemeProvider, ensure, themes } from '@storybook/theming'; + +import type { Story, StoriesHash } from '@storybook/api'; +import type { Theme } from '@storybook/theming'; +import { Sidebar } from '../Sidebar'; + +global.DOCS_MODE = false; + +const factory = (props) => { + const theme: Theme = ensure(themes.light); + + return render( + + + + ); +}; + +const generateStories: StoriesHash = ({ kind, refId }) => { + const [root, storyName] = kind.split('/'); + const rootId = root.toLowerCase().replace(/\s+/g, '-'); + const hypenatedstoryName = storyName.toLowerCase().replace(/\s+/g, '-'); + const storyId = `${rootId}-${hypenatedstoryName}`; + const pageId = `${rootId}-${hypenatedstoryName}--page`; + + const storyBase = [ + { + id: rootId, + name: root, + children: [storyId], + startCollapsed: false, + }, + { + id: storyId, + name: storyName, + children: [pageId], + isComponent: true, + parent: rootId, + }, + { + id: pageId, + name: 'Page', + story: 'Page', + kind, + componentId: storyId, + parent: storyId, + title: kind, + }, + ]; + + return storyBase.reduce((accumulator: StoriesHash, current: any, index: number) => { + const { id, name } = current; + const isRoot = index === 0; + + const story: Story = { + ...current, + depth: index, + isRoot, + isLeaf: name === 'Page', + refId, + }; + + if (!isRoot) { + story.parameters = {}; + story.parameters.docsOnly = true; + } + + accumulator[id] = story; + + return accumulator; + }, {}); +}; + +describe('Sidebar', () => { + test("should not render an extra nested 'Page'", async () => { + const refId = 'next'; + const kind = 'Getting Started/Install'; + const refStories = generateStories({ refId, kind }); + const internalStories = generateStories({ kind: 'Welcome/Example' }); + const lastStoryId = Object.keys(refStories)[Object.keys(refStories).length - 1]; + + const refs = { + [refId]: { + stories: refStories, + id: refId, + ready: true, + title: refId, + }, + }; + + factory({ + refs, + lastStoryId, + refId, + stories: internalStories, + }); + + fireEvent.click(screen.getByText('Install')); + fireEvent.click(screen.getByText('Example')); + + const pageItems = await screen.queryAllByText('Page'); + + expect(pageItems).toHaveLength(0); + }); +}); diff --git a/lib/ui/src/components/sidebar/data.test.ts b/lib/ui/src/components/sidebar/__tests__/data.test.ts similarity index 98% rename from lib/ui/src/components/sidebar/data.test.ts rename to lib/ui/src/components/sidebar/__tests__/data.test.ts index 366338d251d..918542cff32 100644 --- a/lib/ui/src/components/sidebar/data.test.ts +++ b/lib/ui/src/components/sidebar/__tests__/data.test.ts @@ -1,5 +1,5 @@ import type { StoriesHash } from '@storybook/api'; -import { collapseDocsOnlyStories, collapseAllStories } from './data'; +import { collapseDocsOnlyStories, collapseAllStories } from '../data'; type Item = StoriesHash[keyof StoriesHash]; From 2570bc14043804d8973c7019dec68132398b1f60 Mon Sep 17 00:00:00 2001 From: Valerie Rutsch Date: Wed, 16 Mar 2022 21:22:13 -0500 Subject: [PATCH 04/11] Revert --- lib/ui/src/components/sidebar/Sidebar.tsx | 146 +++++++++++----------- 1 file changed, 73 insertions(+), 73 deletions(-) diff --git a/lib/ui/src/components/sidebar/Sidebar.tsx b/lib/ui/src/components/sidebar/Sidebar.tsx index 7c6e5e52d52..554fef817b5 100644 --- a/lib/ui/src/components/sidebar/Sidebar.tsx +++ b/lib/ui/src/components/sidebar/Sidebar.tsx @@ -88,8 +88,8 @@ export interface SidebarProps { enableShortcuts?: boolean; } -export const Sidebar: FunctionComponent = React.memo((props) => { - const { +export const Sidebar: FunctionComponent = React.memo( + ({ storyId = null, refId = DEFAULT_REF_ID, stories: storiesHash, @@ -99,78 +99,78 @@ export const Sidebar: FunctionComponent = React.memo((props) => { menuHighlighted = false, enableShortcuts = true, refs = {}, - } = props; + }) => { + const collapseFn = DOCS_MODE ? collapseAllStories : collapseDocsOnlyStories; + const selected: Selection = useMemo(() => storyId && { storyId, refId }, [storyId, refId]); + const stories = useMemo(() => collapseFn(storiesHash), [DOCS_MODE, storiesHash]); - const collapseFn = DOCS_MODE ? collapseAllStories : collapseDocsOnlyStories; - const selected: Selection = useMemo(() => storyId && { storyId, refId }, [storyId, refId]); - const stories = useMemo(() => collapseFn(storiesHash), [DOCS_MODE, storiesHash]); + const adaptedRefs = useMemo(() => { + return Object.entries(refs).reduce((acc: Refs, [id, ref]: [string, ComposedRef]) => { + if (ref.stories) { + acc[id] = { + ...ref, + stories: collapseFn(ref.stories), + }; + } else { + acc[id] = ref; + } + return acc; + }, {}); + }, [DOCS_MODE, refs]); - const adaptedRefs = useMemo(() => { - return Object.entries(refs).reduce((acc: Refs, [id, ref]: [string, ComposedRef]) => { - if (ref.stories) { - acc[id] = { - ...ref, - stories: collapseFn(ref.stories), - }; - } else { - acc[id] = ref; - } - return acc; - }, {}); - }, [DOCS_MODE, refs]); + const dataset = useCombination(stories, storiesConfigured, storiesFailed, adaptedRefs); + const isLoading = !dataset.hash[DEFAULT_REF_ID].ready; + const lastViewedProps = useLastViewed(selected); - const dataset = useCombination(stories, storiesConfigured, storiesFailed, adaptedRefs); - const isLoading = !dataset.hash[DEFAULT_REF_ID].ready; - const lastViewedProps = useLastViewed(selected); + return ( + + + + - return ( - - - - - - - {({ - query, - results, - isBrowsing, - closeMenu, - getMenuProps, - getItemProps, - highlightedIndex, - }) => ( - - - - - )} - - - - - ); -}); + + {({ + query, + results, + isBrowsing, + closeMenu, + getMenuProps, + getItemProps, + highlightedIndex, + }) => ( + + + + + )} + + + + + ); + } +); From 0e89c8e29f5574a539faf254f794eac0d245845a Mon Sep 17 00:00:00 2001 From: Valerie Rutsch Date: Wed, 16 Mar 2022 21:36:31 -0500 Subject: [PATCH 05/11] Add missing type info --- lib/ui/src/components/sidebar/data.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/lib/ui/src/components/sidebar/data.ts b/lib/ui/src/components/sidebar/data.ts index 4a3d529f469..e2bf9fdabf8 100644 --- a/lib/ui/src/components/sidebar/data.ts +++ b/lib/ui/src/components/sidebar/data.ts @@ -9,11 +9,11 @@ export const collapseAllStories = (stories: StoriesHash) => { // 1) remove all leaves const leavesRemoved = Object.values(stories).filter( - (item) => !(item.isLeaf && stories[item.parent].isComponent) + (item: Story) => !(item.isLeaf && stories[item.parent].isComponent) ); // 2) make all components leaves and rewrite their ID's to the first leaf child - const componentsFlattened = leavesRemoved.map((item) => { + const componentsFlattened = leavesRemoved.map((item: Story) => { const { id, isComponent, children, ...rest } = item; // this is a folder, so just leave it alone @@ -23,7 +23,7 @@ export const collapseAllStories = (stories: StoriesHash) => { const nonLeafChildren: string[] = []; const leafChildren: string[] = []; - children.forEach((child) => + children.forEach((child: Story) => (stories[child].isLeaf ? leafChildren : nonLeafChildren).push(child) ); @@ -61,7 +61,7 @@ export const collapseAllStories = (stories: StoriesHash) => { } const { children, ...rest } = item; - const rewritten = children.map((child) => componentIdToLeafId[child] || child); + const rewritten = children.map((child: string) => componentIdToLeafId[child] || child); return { children: rewritten, ...rest }; }); @@ -76,7 +76,7 @@ export const collapseAllStories = (stories: StoriesHash) => { export const collapseDocsOnlyStories = (storiesHash: StoriesHash) => { // keep track of component IDs that have been rewritten to the ID of their first leaf child const componentIdToLeafId: Record = {}; - const docsOnlyStoriesRemoved = Object.values(storiesHash).filter((item) => { + const docsOnlyStoriesRemoved = Object.values(storiesHash).filter((item: Story) => { if (item.isLeaf && item.parameters && item.parameters.docsOnly) { componentIdToLeafId[item.parent] = item.id; return false; // filter it out @@ -84,7 +84,7 @@ export const collapseDocsOnlyStories = (storiesHash: StoriesHash) => { return true; }); - const docsOnlyComponentsCollapsed = docsOnlyStoriesRemoved.map((item) => { + const docsOnlyComponentsCollapsed = docsOnlyStoriesRemoved.map((item: Story) => { // collapse docs-only components const { isComponent, children, id } = item; if (isComponent && children.length === 1) { @@ -103,7 +103,7 @@ export const collapseDocsOnlyStories = (storiesHash: StoriesHash) => { // update groups if (children) { - const rewritten = children.map((child) => componentIdToLeafId[child] || child); + const rewritten = children.map((child: string) => componentIdToLeafId[child] || child); return { ...item, children: rewritten }; } From 4744d55c7eb0698aa98fab3cd71d7299e7d86421 Mon Sep 17 00:00:00 2001 From: Valerie Rutsch Date: Wed, 16 Mar 2022 21:40:00 -0500 Subject: [PATCH 06/11] Fix wrong type --- lib/ui/src/components/sidebar/data.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/ui/src/components/sidebar/data.ts b/lib/ui/src/components/sidebar/data.ts index e2bf9fdabf8..372fd53211c 100644 --- a/lib/ui/src/components/sidebar/data.ts +++ b/lib/ui/src/components/sidebar/data.ts @@ -23,7 +23,7 @@ export const collapseAllStories = (stories: StoriesHash) => { const nonLeafChildren: string[] = []; const leafChildren: string[] = []; - children.forEach((child: Story) => + children.forEach((child: string) => (stories[child].isLeaf ? leafChildren : nonLeafChildren).push(child) ); From c5413f30f4b5ee99f69c335a65f268b6eb7a4307 Mon Sep 17 00:00:00 2001 From: Valerie Rutsch Date: Thu, 17 Mar 2022 00:24:08 -0500 Subject: [PATCH 07/11] Better types --- lib/api/src/index.tsx | 4 +- .../sidebar/__tests__/Sidebar.test.tsx | 40 ++++++++++--------- 2 files changed, 23 insertions(+), 21 deletions(-) diff --git a/lib/api/src/index.tsx b/lib/api/src/index.tsx index f1dad9e3b90..671119a9b09 100644 --- a/lib/api/src/index.tsx +++ b/lib/api/src/index.tsx @@ -25,7 +25,7 @@ import { createContext } from './context'; import Store, { Options } from './store'; import getInitialState from './initial-state'; import type { StoriesHash, Story, Root, Group } from './lib/stories'; -import type { ComposedRef } from './modules/refs'; +import type { ComposedRef, Refs } from './modules/refs'; import { isGroup, isRoot, isStory } from './lib/stories'; import * as provider from './modules/provider'; @@ -329,7 +329,7 @@ export function useStorybookApi(): API { return api; } -export type { StoriesHash, Story, Root, Group, ComposedRef }; +export type { StoriesHash, Story, Root, Group, ComposedRef, Refs }; export { ManagerConsumer as Consumer, ManagerProvider as Provider, isGroup, isRoot, isStory }; export interface EventMap { diff --git a/lib/ui/src/components/sidebar/__tests__/Sidebar.test.tsx b/lib/ui/src/components/sidebar/__tests__/Sidebar.test.tsx index 84e21d0bebe..482a66b4d78 100644 --- a/lib/ui/src/components/sidebar/__tests__/Sidebar.test.tsx +++ b/lib/ui/src/components/sidebar/__tests__/Sidebar.test.tsx @@ -2,30 +2,34 @@ import React from 'react'; import { render, screen, fireEvent } from '@testing-library/react'; import { ThemeProvider, ensure, themes } from '@storybook/theming'; -import type { Story, StoriesHash } from '@storybook/api'; +import type { Story, StoriesHash, Refs } from '@storybook/api'; import type { Theme } from '@storybook/theming'; +import type { RenderResult } from '@testing-library/react'; +import type { SidebarProps } from '../Sidebar'; import { Sidebar } from '../Sidebar'; global.DOCS_MODE = false; -const factory = (props) => { +const PAGE_NAME = 'Page'; + +const factory = (props: Partial): RenderResult => { const theme: Theme = ensure(themes.light); return render( - + ); }; -const generateStories: StoriesHash = ({ kind, refId }) => { - const [root, storyName] = kind.split('/'); - const rootId = root.toLowerCase().replace(/\s+/g, '-'); - const hypenatedstoryName = storyName.toLowerCase().replace(/\s+/g, '-'); +const generateStories = ({ kind, refId }: { kind: string; refId?: string }): StoriesHash => { + const [root, storyName]: [string, string] = kind.split('/') as any; + const rootId: string = root.toLowerCase().replace(/\s+/g, '-'); + const hypenatedstoryName: string = storyName.toLowerCase().replace(/\s+/g, '-'); const storyId = `${rootId}-${hypenatedstoryName}`; const pageId = `${rootId}-${hypenatedstoryName}--page`; - const storyBase = [ + const storyBase: Partial = [ { id: rootId, name: root, @@ -41,8 +45,8 @@ const generateStories: StoriesHash = ({ kind, refId }) => { }, { id: pageId, - name: 'Page', - story: 'Page', + name: PAGE_NAME, + story: PAGE_NAME, kind, componentId: storyId, parent: storyId, @@ -50,15 +54,15 @@ const generateStories: StoriesHash = ({ kind, refId }) => { }, ]; - return storyBase.reduce((accumulator: StoriesHash, current: any, index: number) => { + return storyBase.reduce((accumulator: StoriesHash, current: Partial, index: number) => { const { id, name } = current; - const isRoot = index === 0; + const isRoot: boolean = index === 0; const story: Story = { ...current, depth: index, isRoot, - isLeaf: name === 'Page', + isLeaf: name === PAGE_NAME, refId, }; @@ -77,11 +81,10 @@ describe('Sidebar', () => { test("should not render an extra nested 'Page'", async () => { const refId = 'next'; const kind = 'Getting Started/Install'; - const refStories = generateStories({ refId, kind }); - const internalStories = generateStories({ kind: 'Welcome/Example' }); - const lastStoryId = Object.keys(refStories)[Object.keys(refStories).length - 1]; + const refStories: StoriesHash = generateStories({ refId, kind }); + const internalStories: StoriesHash = generateStories({ kind: 'Welcome/Example' }); - const refs = { + const refs: Refs = { [refId]: { stories: refStories, id: refId, @@ -92,7 +95,6 @@ describe('Sidebar', () => { factory({ refs, - lastStoryId, refId, stories: internalStories, }); @@ -100,7 +102,7 @@ describe('Sidebar', () => { fireEvent.click(screen.getByText('Install')); fireEvent.click(screen.getByText('Example')); - const pageItems = await screen.queryAllByText('Page'); + const pageItems: HTMLElement[] = await screen.queryAllByText('Page'); expect(pageItems).toHaveLength(0); }); From 0cc425ebc6ab76847c5a60e4a4701694dc9e0b3d Mon Sep 17 00:00:00 2001 From: Valerie Rutsch Date: Thu, 17 Mar 2022 00:26:46 -0500 Subject: [PATCH 08/11] ...more --- lib/ui/src/components/sidebar/__tests__/Sidebar.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/ui/src/components/sidebar/__tests__/Sidebar.test.tsx b/lib/ui/src/components/sidebar/__tests__/Sidebar.test.tsx index 482a66b4d78..a8f728f59bf 100644 --- a/lib/ui/src/components/sidebar/__tests__/Sidebar.test.tsx +++ b/lib/ui/src/components/sidebar/__tests__/Sidebar.test.tsx @@ -5,8 +5,8 @@ import { ThemeProvider, ensure, themes } from '@storybook/theming'; import type { Story, StoriesHash, Refs } from '@storybook/api'; import type { Theme } from '@storybook/theming'; import type { RenderResult } from '@testing-library/react'; -import type { SidebarProps } from '../Sidebar'; import { Sidebar } from '../Sidebar'; +import type { SidebarProps } from '../Sidebar'; global.DOCS_MODE = false; From 89dbd1440ea204cfcfa271a4e625578a9e277d35 Mon Sep 17 00:00:00 2001 From: Valerie Rutsch Date: Thu, 17 Mar 2022 00:45:17 -0500 Subject: [PATCH 09/11] All the types --- .../sidebar/__tests__/Sidebar.test.tsx | 37 ++++++++++--------- 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/lib/ui/src/components/sidebar/__tests__/Sidebar.test.tsx b/lib/ui/src/components/sidebar/__tests__/Sidebar.test.tsx index a8f728f59bf..4e163403469 100644 --- a/lib/ui/src/components/sidebar/__tests__/Sidebar.test.tsx +++ b/lib/ui/src/components/sidebar/__tests__/Sidebar.test.tsx @@ -54,27 +54,30 @@ const generateStories = ({ kind, refId }: { kind: string; refId?: string }): Sto }, ]; - return storyBase.reduce((accumulator: StoriesHash, current: Partial, index: number) => { - const { id, name } = current; - const isRoot: boolean = index === 0; + return storyBase.reduce( + (accumulator: StoriesHash, current: Partial, index: number): StoriesHash => { + const { id, name } = current; + const isRoot: boolean = index === 0; - const story: Story = { - ...current, - depth: index, - isRoot, - isLeaf: name === PAGE_NAME, - refId, - }; + const story: Story = { + ...current, + depth: index, + isRoot, + isLeaf: name === PAGE_NAME, + refId, + }; - if (!isRoot) { - story.parameters = {}; - story.parameters.docsOnly = true; - } + if (!isRoot) { + story.parameters = {}; + story.parameters.docsOnly = true; + } - accumulator[id] = story; + accumulator[id] = story; - return accumulator; - }, {}); + return accumulator; + }, + {} + ); }; describe('Sidebar', () => { From 71fa4daac5a278e43abba0801c18e5dffea781bf Mon Sep 17 00:00:00 2001 From: passbyval <40154944+passbyval@users.noreply.github.com> Date: Thu, 17 Mar 2022 17:51:32 -0500 Subject: [PATCH 10/11] Update Sidebar.test.tsx --- lib/ui/src/components/sidebar/__tests__/Sidebar.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/ui/src/components/sidebar/__tests__/Sidebar.test.tsx b/lib/ui/src/components/sidebar/__tests__/Sidebar.test.tsx index 4e163403469..7497237cfba 100644 --- a/lib/ui/src/components/sidebar/__tests__/Sidebar.test.tsx +++ b/lib/ui/src/components/sidebar/__tests__/Sidebar.test.tsx @@ -29,7 +29,7 @@ const generateStories = ({ kind, refId }: { kind: string; refId?: string }): Sto const storyId = `${rootId}-${hypenatedstoryName}`; const pageId = `${rootId}-${hypenatedstoryName}--page`; - const storyBase: Partial = [ + const storyBase: Partial[] = [ { id: rootId, name: root, From 573ed310579b6a3950a8cda437afab19c5cd7fec Mon Sep 17 00:00:00 2001 From: passbyval <40154944+passbyval@users.noreply.github.com> Date: Thu, 17 Mar 2022 19:36:36 -0500 Subject: [PATCH 11/11] Update Sidebar.test.tsx --- lib/ui/src/components/sidebar/__tests__/Sidebar.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/ui/src/components/sidebar/__tests__/Sidebar.test.tsx b/lib/ui/src/components/sidebar/__tests__/Sidebar.test.tsx index 7497237cfba..dc32f372edb 100644 --- a/lib/ui/src/components/sidebar/__tests__/Sidebar.test.tsx +++ b/lib/ui/src/components/sidebar/__tests__/Sidebar.test.tsx @@ -29,7 +29,7 @@ const generateStories = ({ kind, refId }: { kind: string; refId?: string }): Sto const storyId = `${rootId}-${hypenatedstoryName}`; const pageId = `${rootId}-${hypenatedstoryName}--page`; - const storyBase: Partial[] = [ + const storyBase: Partial[] = [ { id: rootId, name: root,