Merge branch 'next' into docs_remove_config

storybookjs · Jan 30, 2024 · 7eb3a00 · 7eb3a00
2 parents 311cc86 + b54e5eb
commit 7eb3a00
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 100 deletions.
diff --git a/code/lib/cli/src/generators/REACT_NATIVE/index.ts b/code/lib/cli/src/generators/REACT_NATIVE/index.ts
@@ -11,6 +11,7 @@ const generator = async (
 
   const missingReactDom =
     !packageJson.dependencies['react-dom'] && !packageJson.devDependencies['react-dom'];
+
   const reactVersion = packageJson.dependencies.react;
 
   const packagesToResolve = [
@@ -24,25 +25,26 @@ const generator = async (
     '@storybook/react-native',
   ];
 
-  // change these to latest version once v6 stable is released
-  const packagesWithFixedVersion = [
-    '@storybook/addon-actions@^6.5.16',
-    '@storybook/addon-controls@^6.5.16',
-  ];
+  const packagesWithFixedVersion: string[] = [];
 
   const versionedPackages = await packageManager.getVersionedPackages(packagesToResolve);
 
   const babelDependencies = await getBabelDependencies(packageManager, packageJson);
 
   const packages: string[] = [];
+
   packages.push(...babelDependencies);
+
   packages.push(...packagesWithFixedVersion);
+
   packages.push(...versionedPackages);
+
   if (missingReactDom && reactVersion) {
     packages.push(`react-dom@${reactVersion}`);
   }
 
   await packageManager.addDependencies({ ...npmOptions, packageJson }, packages);
+
   packageManager.addScripts({
     'storybook-generate': 'sb-rn-get-stories',
     'storybook-watch': 'sb-rn-watcher',
@@ -53,7 +55,7 @@ const generator = async (
   await copyTemplateFiles({
     packageManager,
     renderer: 'react-native',
-    language: SupportedLanguage.JAVASCRIPT,
+    language: SupportedLanguage.TYPESCRIPT_3_8,
     destination: storybookConfigFolder,
     includeCommonAssets: false,
   });

diff --git a/code/lib/cli/src/initiate.ts b/code/lib/cli/src/initiate.ts
@@ -9,7 +9,6 @@ import {
   HandledError,
   JsPackageManagerFactory,
   commandLog,
-  codeLog,
   paddedLog,
 } from '@storybook/core-common';
 import type { JsPackageManager } from '@storybook/core-common';
@@ -347,15 +346,25 @@ export async function doInitiate(
   }
 
   if (projectType === ProjectType.REACT_NATIVE) {
-    logger.log();
-    logger.log(chalk.yellow('NOTE: installation is not 100% automated.\n'));
-    logger.log(`To quickly run Storybook, replace contents of your app entry with:\n`);
-    codeLog(["export {default} from './.storybook';"]);
-    logger.log('\n Then to run your Storybook, type:\n');
-    codeLog([packageManager.getRunCommand('start')]);
-    logger.log('\n For more in information, see the github readme:\n');
-    logger.log(chalk.cyan('https://github.com/storybookjs/react-native'));
-    logger.log();
+    logger.log(dedent`
+      ${chalk.yellow('NOTE: installation is not 100% automated.')}
+
+      To run Storybook, you will need to:
+
+      1. Replace the contents of your app entry with the following
+      
+      ${chalk.inverse(' ' + "export {default} from './.storybook';" + ' ')}
+      
+      2. Enable transformer.unstable_allowRequireContext in your metro config
+      
+      For a more detailed guide go to:
+      ${chalk.cyan('https://github.com/storybookjs/react-native#existing-project')}
+      
+      Then to run your Storybook, type:
+
+      ${chalk.inverse(' ' + packageManager.getRunCommand('start') + ' ')}
+
+    `);
 
     return { shouldRunDev: false };
   }

diff --git a/code/lib/router/src/router.tsx b/code/lib/router/src/router.tsx
@@ -3,7 +3,6 @@ import React, { useCallback } from 'react';
 import type { ReactNode, ReactElement, ComponentProps } from 'react';
 
 import * as R from 'react-router-dom';
-import { ToggleVisibility } from './visibility';
 import { queryFromString, parsePath, getMatch } from './utils';
 import type { LinkProps, NavigateOptions, RenderData } from './types';
 
@@ -31,13 +30,11 @@ interface MatchPropsDefault {
 interface RoutePropsStartsWith {
   path: string;
   startsWith?: boolean;
-  hideOnly?: boolean;
   children: ReactNode;
 }
 interface RoutePropsDefault {
   path: RegExp;
   startsWith?: false;
-  hideOnly?: boolean;
   children: ReactNode;
 }
 
@@ -128,23 +125,14 @@ Match.displayName = 'QueryMatch';
 function Route(props: RoutePropsDefault): ReactElement;
 function Route(props: RoutePropsStartsWith): ReactElement;
 function Route(input: RoutePropsDefault | RoutePropsStartsWith) {
-  const { children, hideOnly, ...rest } = input;
+  const { children, ...rest } = input;
   if (rest.startsWith === undefined) {
     rest.startsWith = false;
   }
 
   const matchProps = rest as Omit<ComponentProps<typeof Match>, 'children'>;
 
-  return (
-    <Match {...matchProps}>
-      {({ match }) => {
-        if (hideOnly) {
-          return <ToggleVisibility hidden={!match}>{children}</ToggleVisibility>;
-        }
-        return match ? children : null;
-      }}
-    </Match>
-  );
+  return <Match {...matchProps}>{({ match }) => (match ? children : null)}</Match>;
 }
 Route.displayName = 'Route';
 

diff --git a/code/ui/manager/src/App.tsx b/code/ui/manager/src/App.tsx
@@ -1,8 +1,5 @@
 import type { ComponentProps } from 'react';
 import React from 'react';
-
-import { Route } from '@storybook/router';
-
 import { Global, createGlobal } from '@storybook/theming';
 import type { Addon_PageType } from '@storybook/types';
 import Sidebar from './container/Sidebar';
@@ -27,11 +24,7 @@ export const App = ({ managerLayoutState, setManagerLayoutState, pages }: Props)
       <Layout
         managerLayoutState={managerLayoutState}
         setManagerLayoutState={setManagerLayoutState}
-        slotMain={
-          <Route path={/(^\/story|docs|onboarding\/|^\/$)/} hideOnly>
-            <Preview id="main" withLoader />
-          </Route>
-        }
+        slotMain={<Preview id="main" withLoader />}
         slotSidebar={<Sidebar onMenuClick={() => setMobileAboutOpen((state) => !state)} />}
         slotPanel={<Panel />}
         slotPages={pages.map(({ id, render: Content }) => (

diff --git a/code/ui/manager/src/components/layout/Layout.stories.tsx b/code/ui/manager/src/components/layout/Layout.stories.tsx
@@ -7,6 +7,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 import { Layout } from './Layout';
 import { LayoutProvider } from './LayoutProvider';
+import { LocationProvider } from '@storybook/router';
 import MobileNavigationStoriesMeta from '../mobile/navigation/MobileNavigation.stories';
 
 const PlaceholderBlock = styled.div({
@@ -67,7 +68,11 @@ const meta = {
   },
   decorators: [
     MobileNavigationStoriesMeta.decorators[0] as any,
-    (storyFn) => <LayoutProvider>{storyFn()}</LayoutProvider>,
+    (storyFn) => (
+      <LocationProvider>
+        <LayoutProvider>{storyFn()}</LayoutProvider>
+      </LocationProvider>
+    ),
   ],
   render: (args) => {
     const [managerLayoutState, setManagerLayoutState] = useState(args.managerLayoutState);

diff --git a/code/ui/manager/src/components/layout/Layout.tsx b/code/ui/manager/src/components/layout/Layout.tsx
@@ -6,6 +6,7 @@ import { MobileNavigation } from '../mobile/navigation/MobileNavigation';
 import { MEDIA_DESKTOP_BREAKPOINT } from '../../constants';
 import { useLayout } from './LayoutProvider';
 import { Notifications } from '../../container/Notifications';
+import { Match } from '@storybook/router';
 
 interface InternalLayoutState {
   isDragging: boolean;
@@ -145,7 +146,9 @@ export const Layout = ({ managerLayoutState, setManagerLayoutState, ...slots }:
     >
       <Notifications />
       {showPages && <PagesContainer>{slots.slotPages}</PagesContainer>}
-      <ContentContainer>{slots.slotMain}</ContentContainer>
+      <Match path={/(^\/story|docs|onboarding\/|^\/$)/} startsWith={false}>
+        {({ match }) => <ContentContainer shown={!!match}>{slots.slotMain}</ContentContainer>}
+      </Match>
       {isDesktop && (
         <>
           <SidebarContainer>
@@ -210,11 +213,12 @@ const SidebarContainer = styled.div(({ theme }) => ({
   borderRight: `1px solid ${theme.color.border}`,
 }));
 
-const ContentContainer = styled.div(({ theme }) => ({
+const ContentContainer = styled.div<{ shown: boolean }>(({ theme, shown }) => ({
   flex: 1,
   position: 'relative',
   backgroundColor: theme.background.content,
-  display: 'grid', // This is needed to make the content container fill the available space
+  display: shown ? 'grid' : 'none', // This is needed to make the content container fill the available space
+  overflow: 'auto',
 
   [MEDIA_DESKTOP_BREAKPOINT]: {
     flex: 'auto',

diff --git a/code/ui/manager/src/components/mobile/navigation/MobileAddonsDrawer.tsx b/code/ui/manager/src/components/mobile/navigation/MobileAddonsDrawer.tsx
@@ -1,59 +1,21 @@
 import type { FC, ReactNode } from 'react';
-import React, { useRef } from 'react';
+import React from 'react';
 import { styled } from '@storybook/theming';
-import { Transition } from 'react-transition-group';
-import type { TransitionStatus } from 'react-transition-group/Transition';
-import { useLayout } from '../../layout/LayoutProvider';
 
 interface MobileAddonsDrawerProps {
   children: ReactNode;
 }
 
-const TRANSITION_DURATION = 200;
-
-const Container = styled.div<{ state: TransitionStatus }>(({ theme, state }) => ({
-  position: 'fixed',
+const Container = styled.div(({ theme }) => ({
+  position: 'relative',
   boxSizing: 'border-box',
   width: '100%',
   background: theme.background.content,
-  height: '50%',
-  bottom: 0,
-  left: 0,
+  height: '42vh',
   zIndex: 11,
-  transition: `all ${TRANSITION_DURATION}ms ease-in-out`,
   overflow: 'hidden',
-  borderTop: `1px solid ${theme.appBorderColor}`,
-  transform: `${(() => {
-    switch (state) {
-      case 'entering':
-      case 'entered':
-        return 'translateY(0)';
-      case 'exiting':
-      case 'exited':
-        return 'translateY(100%)';
-      default:
-        return 'translateY(0)';
-    }
-  })()}`,
 }));
 
 export const MobileAddonsDrawer: FC<MobileAddonsDrawerProps> = ({ children }) => {
-  const { isMobilePanelOpen } = useLayout();
-  const containerRef = useRef(null);
-
-  return (
-    <Transition
-      nodeRef={containerRef}
-      in={isMobilePanelOpen}
-      timeout={TRANSITION_DURATION}
-      mountOnEnter
-      unmountOnExit
-    >
-      {(state) => (
-        <Container ref={containerRef} state={state}>
-          {children}
-        </Container>
-      )}
-    </Transition>
-  );
+  return <Container>{children}</Container>;
 };
diff --git a/code/ui/manager/src/components/mobile/navigation/MobileNavigation.tsx b/code/ui/manager/src/components/mobile/navigation/MobileNavigation.tsx
@@ -35,40 +35,50 @@ const useFullStoryName = () => {
 };
 
 export const MobileNavigation: FC<MobileNavigationProps> = ({ menu, panel, showPanel }) => {
-  const { isMobileMenuOpen, setMobileMenuOpen, setMobilePanelOpen } = useLayout();
+  const { isMobileMenuOpen, isMobilePanelOpen, setMobileMenuOpen, setMobilePanelOpen } =
+    useLayout();
   const fullStoryName = useFullStoryName();
 
   return (
     <Container>
       <MobileMenuDrawer>{menu}</MobileMenuDrawer>
-      <MobileAddonsDrawer>{panel}</MobileAddonsDrawer>
-      <Button onClick={() => setMobileMenuOpen(!isMobileMenuOpen)} title="Open navigation menu">
-        <MenuIcon />
-        <Text>{fullStoryName}</Text>
-      </Button>
-      {showPanel && (
-        <IconButton onClick={() => setMobilePanelOpen(true)} title="Open addon panel">
-          <BottomBarToggleIcon />
-        </IconButton>
+      {isMobilePanelOpen ? (
+        <MobileAddonsDrawer>{panel}</MobileAddonsDrawer>
+      ) : (
+        <Nav>
+          <Button onClick={() => setMobileMenuOpen(!isMobileMenuOpen)} title="Open navigation menu">
+            <MenuIcon />
+            <Text>{fullStoryName}</Text>
+          </Button>
+          {showPanel && (
+            <IconButton onClick={() => setMobilePanelOpen(true)} title="Open addon panel">
+              <BottomBarToggleIcon />
+            </IconButton>
+          )}
+        </Nav>
       )}
     </Container>
   );
 };
 
 const Container = styled.div(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
   bottom: 0,
   left: 0,
   width: '100%',
-  height: 40,
   zIndex: 10,
   background: theme.barBg,
-  padding: '0 6px',
   borderTop: `1px solid ${theme.appBorderColor}`,
 }));
 
+const Nav = styled.div({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  width: '100%',
+  height: 40,
+  padding: '0 6px',
+});
+
 const Button = styled.button(({ theme }) => ({
   all: 'unset',
   display: 'flex',