@storybook/react-native-ui 8.0.0-alpha.3

package/src/Layout.tsx

@@ -0,0 +1,103 @@
+import { SET_CURRENT_STORY } from '@storybook/core-events';
+import { addons } from '@storybook/manager-api';
+import { styled, useTheme } from '@storybook/react-native-theming';
+import { type API_IndexHash, type Args, type StoryContext } from '@storybook/types';
+import { ReactNode, useRef } from 'react';
+import { Text, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { IconButton } from './IconButton';
+import { Sidebar } from './Sidebar';
+import { DEFAULT_REF_ID } from './constants';
+import { BottomBarToggleIcon } from './icon/BottomBarToggleIcon';
+import { MenuIcon } from './icon/MenuIcon';
+
+import { ReactRenderer } from '@storybook/react';
+import { MobileMenuDrawer, MobileMenuDrawerRef } from './MobileMenuDrawer';
+import { MobileAddonsPanel, MobileAddonsPanelRef } from './MobileAddonsPanel';
+
+export const Layout = ({
+  storyHash,
+  story,
+  children,
+}: {
+  storyHash: API_IndexHash | undefined;
+  story?: StoryContext<ReactRenderer, Args>;
+  children: ReactNode | ReactNode[];
+}) => {
+  const theme = useTheme();
+  const mobileMenuDrawerRef = useRef<MobileMenuDrawerRef>(null);
+  const addonPanelRef = useRef<MobileAddonsPanelRef>(null);
+  const insets = useSafeAreaInsets();
+
+  return (
+    <View style={{ flex: 1, paddingTop: insets.top }}>
+      <View style={{ flex: 1 }}>{children}</View>
+      <MobileMenuDrawer ref={mobileMenuDrawerRef}>
+        <Sidebar
+          extra={[]}
+          previewInitialized
+          indexError={undefined}
+          refs={{}}
+          setSelection={({ storyId: newStoryId }) => {
+            const channel = addons.getChannel();
+
+            channel.emit(SET_CURRENT_STORY, { storyId: newStoryId });
+          }}
+          status={{}}
+          index={storyHash}
+          storyId={story?.id}
+          refId={DEFAULT_REF_ID}
+        />
+      </MobileMenuDrawer>
+      <MobileAddonsPanel ref={addonPanelRef} storyId={story.id} />
+      <Container style={{ marginBottom: insets.bottom }}>
+        <Nav>
+          <Button
+            hitSlop={{ bottom: 10, left: 10, right: 10, top: 10 }}
+            onPress={() => mobileMenuDrawerRef.current.setMobileMenuOpen(true)}
+          >
+            <MenuIcon color={theme.color.mediumdark} />
+            <Text>
+              {story.title}/{story.name}
+            </Text>
+          </Button>
+
+          <IconButton
+            onPress={() => addonPanelRef.current.setAddonsPanelOpen(true)}
+            Icon={BottomBarToggleIcon}
+          />
+        </Nav>
+      </Container>
+    </View>
+  );
+};
+
+const Nav = styled.View({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  width: '100%',
+  height: 40,
+  paddingHorizontal: 12,
+});
+
+const Container = styled.View(({ theme }) => ({
+  alignSelf: 'flex-end',
+  width: '100%',
+  zIndex: 10,
+  background: theme.barBg,
+  borderTopColor: theme.appBorderColor,
+  borderTopWidth: 1,
+}));
+
+const Button = styled.TouchableOpacity(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  gap: 10,
+  color: theme.color.mediumdark,
+  fontSize: theme.typography.size?.s2 - 1,
+  paddingHorizontal: 7,
+  fontWeight: theme.typography.weight.bold,
+}));

package/src/LayoutProvider.tsx

@@ -0,0 +1,90 @@
+import type { FC, PropsWithChildren } from 'react';
+import React, { createContext, useCallback, useContext, useMemo, useRef } from 'react';
+import { BREAKPOINT } from './constants';
+import { useWindowDimensions } from 'react-native';
+// import {
+// BottomSheetModal,
+// BottomSheetModalProvider,
+// BottomSheetScrollView,
+// } from '@gorhom/bottom-sheet';
+
+type LayoutContextType = {
+  // isMobileMenuOpen: boolean;
+  openMobileMenu: () => void;
+  closeMobileMenu: () => void;
+  // isMobileAboutOpen: boolean;
+  // setMobileAboutOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  // isMobilePanelOpen: boolean;
+  // setMobilePanelOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  isDesktop: boolean;
+  isMobile: boolean;
+};
+
+const LayoutContext = createContext<LayoutContextType>({
+  // isMobileMenuOpen: false,
+
+  openMobileMenu: () => {},
+  closeMobileMenu: () => {},
+  // isMobileAboutOpen: false,
+  // setMobileAboutOpen: () => {},
+  // isMobilePanelOpen: false,
+  // setMobilePanelOpen: () => {},
+
+  isDesktop: false,
+  isMobile: false,
+});
+
+export const LayoutProvider: FC<PropsWithChildren> = ({ children }) => {
+  // const [isMobileMenuOpen, setMobileMenuOpen] = useState(false);
+  // const [isMobileAboutOpen, setMobileAboutOpen] = useState(false);
+  // const [isMobilePanelOpen, setMobilePanelOpen] = useState(false);
+  const { width } = useWindowDimensions();
+  const isDesktop = width >= BREAKPOINT;
+  const isMobile = !isDesktop;
+  // const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+
+  const openMobileMenu = useCallback(() => {
+    // bottomSheetModalRef.current?.present();
+  }, []);
+  const closeMobileMenu = useCallback(() => {
+    // bottomSheetModalRef.current?.dismiss();
+  }, []);
+
+  const contextValue = useMemo(
+    () => ({
+      // isMobileMenuOpen,
+      openMobileMenu,
+      closeMobileMenu,
+      // isMobileAboutOpen,
+      // setMobileAboutOpen,
+      // isMobilePanelOpen,
+      // setMobilePanelOpen,
+      isDesktop,
+      isMobile,
+    }),
+    [
+      // isMobileMenuOpen,
+      openMobileMenu,
+      closeMobileMenu,
+      // // isMobileAboutOpen,
+      // setMobileAboutOpen,
+      // isMobilePanelOpen,
+      // setMobilePanelOpen,
+      isDesktop,
+      isMobile,
+    ]
+  );
+
+  return (
+    // <BottomSheetModalProvider>
+    <>
+      <LayoutContext.Provider value={contextValue}>{children}</LayoutContext.Provider>
+      {/* <BottomSheetModal ref={bottomSheetModalRef} snapPoints={['70%', '50%']}>
+        <BottomSheetScrollView>bla</BottomSheetScrollView>
+      </BottomSheetModal> */}
+    </>
+    // </BottomSheetModalProvider>
+  );
+};
+
+export const useLayout = () => useContext(LayoutContext);

package/src/MobileAddonsPanel.tsx

@@ -0,0 +1,166 @@
+import { BottomSheetModal, BottomSheetScrollView } from '@gorhom/bottom-sheet';
+import { addons } from '@storybook/manager-api';
+import { styled } from '@storybook/react-native-theming';
+import { Addon_TypesEnum } from '@storybook/types';
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { Text, View } from 'react-native';
+import { ScrollView } from 'react-native-gesture-handler';
+import { useReducedMotion } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { IconButton } from './IconButton';
+import { CloseIcon } from './icon/CloseIcon';
+
+export interface MobileAddonsPanelRef {
+  isAddonsPanelOpen: boolean;
+  setAddonsPanelOpen: (isOpen: boolean) => void;
+}
+
+export const MobileAddonsPanel = forwardRef<MobileAddonsPanelRef, { storyId?: string }>(
+  ({ storyId }, ref) => {
+    const [isAddonsPanelOpen, setAddonsPanelOpen] = useState(false);
+    const reducedMotion = useReducedMotion();
+
+    const addonsPanelBottomSheetRef = useRef<BottomSheetModal>(null);
+    const insets = useSafeAreaInsets();
+
+    const panels = addons.getElements(Addon_TypesEnum.PANEL);
+    const [addonSelected, setAddonSelected] = useState(Object.keys(panels)[0]);
+
+    useImperativeHandle(ref, () => ({
+      isAddonsPanelOpen,
+      setAddonsPanelOpen: (open: boolean) => {
+        if (open) {
+          setAddonsPanelOpen(true);
+          addonsPanelBottomSheetRef.current?.present();
+        } else {
+          setAddonsPanelOpen(false);
+          addonsPanelBottomSheetRef.current?.dismiss();
+        }
+      },
+    }));
+
+    return (
+      <BottomSheetModal
+        ref={addonsPanelBottomSheetRef}
+        index={1}
+        animateOnMount={!reducedMotion}
+        onDismiss={() => {
+          setAddonsPanelOpen(false);
+        }}
+        snapPoints={['25%', '50%']}
+        style={{
+          paddingTop: 8,
+        }}
+        containerStyle={{}}
+        backgroundStyle={{
+          borderRadius: 0,
+          borderTopColor: 'lightgrey',
+          borderTopWidth: 1,
+        }}
+        keyboardBehavior="interactive"
+        keyboardBlurBehavior="restore"
+        enableDismissOnClose
+        enableHandlePanningGesture={true}
+        enableContentPanningGesture={true}
+        // enablePanDownToClose={false}
+        stackBehavior="replace"
+      >
+        <View style={{ flex: 1 }}>
+          <View style={{ flexDirection: 'row' }}>
+            <ScrollView
+              horizontal
+              showsHorizontalScrollIndicator={false}
+              contentContainerStyle={{
+                paddingHorizontal: 8,
+                // alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              {Object.values(panels).map(({ id, title }) => {
+                const resolvedTitle = typeof title === 'function' ? title({}) : title;
+
+                return (
+                  <Tab
+                    key={id}
+                    active={id === addonSelected}
+                    onPress={() => setAddonSelected(id)}
+                    text={resolvedTitle}
+                  />
+                );
+              })}
+            </ScrollView>
+            <IconButton
+              style={{
+                marginRight: 4,
+                marginBottom: 4,
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+              hitSlop={{ top: 10, right: 10, bottom: 10, left: 10 }}
+              Icon={CloseIcon}
+              onPress={() => {
+                setAddonsPanelOpen(false);
+                addonsPanelBottomSheetRef.current?.dismiss();
+              }}
+            />
+          </View>
+          <BottomSheetScrollView
+            keyboardShouldPersistTaps="handled"
+            contentContainerStyle={{
+              paddingBottom: insets.bottom + 16,
+              marginTop: 10,
+              paddingHorizontal: 16,
+            }}
+          >
+            {(() => {
+              if (!storyId) {
+                return (
+                  <View style={{ alignItems: 'center', justifyContent: 'center' }}>
+                    <Text>No Story Selected</Text>
+                  </View>
+                );
+              }
+
+              if (Object.keys(panels).length === 0) {
+                return (
+                  <View style={{ alignItems: 'center', justifyContent: 'center' }}>
+                    <Text>No addons loaded.</Text>
+                  </View>
+                );
+              }
+
+              return panels[addonSelected].render({ active: true });
+            })()}
+          </BottomSheetScrollView>
+        </View>
+      </BottomSheetModal>
+    );
+  }
+);
+
+const Tab = ({ active, onPress, text }: { active: boolean; onPress: () => void; text: string }) => {
+  return (
+    <TabButton active={active} onPress={onPress}>
+      <TabText active={active}>{text}</TabText>
+    </TabButton>
+  );
+};
+
+const TabButton = styled.TouchableOpacity<{ active: boolean }>(({ theme, active }) => ({
+  borderBottomWidth: active ? 2 : 0,
+  borderBottomColor: active ? theme.barSelectedColor : undefined,
+
+  overflow: 'hidden',
+  paddingHorizontal: 15,
+  justifyContent: 'center',
+  alignItems: 'center',
+}));
+
+const TabText = styled.Text<{ active: boolean }>(({ theme, active }) => ({
+  color: active ? theme.barSelectedColor : theme.color.mediumdark,
+  textAlign: 'center',
+  fontWeight: 'bold',
+  fontSize: 13,
+  lineHeight: 12,
+}));

package/src/MobileMenuDrawer.tsx

@@ -0,0 +1,75 @@
+import {
+  BottomSheetBackdropProps,
+  BottomSheetModal,
+  BottomSheetScrollView,
+  BottomSheetBackdrop,
+} from '@gorhom/bottom-sheet';
+import { ReactNode, forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { Keyboard } from 'react-native';
+import { useReducedMotion } from 'react-native-reanimated';
+
+interface MobileMenuDrawerProps {
+  children: ReactNode | ReactNode[];
+}
+
+export interface MobileMenuDrawerRef {
+  isMobileMenuOpen: boolean;
+  setMobileMenuOpen: (isOpen: boolean) => void;
+}
+
+export const BottomSheetBackdropComponent = (backdropComponentProps: BottomSheetBackdropProps) => (
+  <BottomSheetBackdrop
+    {...backdropComponentProps}
+    appearsOnIndex={0}
+    disappearsOnIndex={-1}
+    pressBehavior={'close'}
+    style={[backdropComponentProps.style, { backgroundColor: 'rgba(0,0,0,0.5)' }]}
+  />
+);
+
+export const MobileMenuDrawer = forwardRef<MobileMenuDrawerRef, MobileMenuDrawerProps>(
+  ({ children }, ref) => {
+    const [isMobileMenuOpen, setMobileMenuOpen] = useState(false);
+    const reducedMotion = useReducedMotion();
+
+    const menuBottomSheetRef = useRef<BottomSheetModal>(null);
+
+    useImperativeHandle(ref, () => ({
+      isMobileMenuOpen,
+      setMobileMenuOpen: (open: boolean) => {
+        if (open) {
+          setMobileMenuOpen(true);
+
+          menuBottomSheetRef.current?.present();
+        } else {
+          Keyboard.dismiss();
+          setMobileMenuOpen(false);
+          menuBottomSheetRef.current?.dismiss();
+        }
+      },
+    }));
+
+    return (
+      <BottomSheetModal
+        ref={menuBottomSheetRef}
+        index={1}
+        animateOnMount={!reducedMotion}
+        onDismiss={() => {
+          setMobileMenuOpen(false);
+        }}
+        snapPoints={['50%', '75%']}
+        enableDismissOnClose
+        enableHandlePanningGesture
+        enableContentPanningGesture
+        keyboardBehavior="extend"
+        keyboardBlurBehavior="restore"
+        stackBehavior="replace"
+        backdropComponent={BottomSheetBackdropComponent}
+      >
+        <BottomSheetScrollView keyboardShouldPersistTaps="handled">
+          {children}
+        </BottomSheetScrollView>
+      </BottomSheetModal>
+    );
+  }
+);

package/src/Refs.tsx

@@ -0,0 +1,142 @@
+import type { FC } from 'react';
+import React, { useMemo, useCallback, useEffect, useState } from 'react';
+import type { State } from '@storybook/manager-api';
+import { useStorybookApi, useStorybookState } from '@storybook/manager-api';
+import { styled } from '@storybook/react-native-theming';
+// import { transparentize } from 'polished';
+
+// import { AuthBlock, ErrorBlock, LoaderBlock, EmptyBlock } from './RefBlocks';
+
+// import { RefIndicator } from './RefIndicator';
+
+import { Tree } from './Tree';
+
+import type { RefType } from './types';
+import { getStateType } from './util/tree';
+import { DEFAULT_REF_ID } from './constants';
+
+// import { CollapseIcon } from './icon/CollapseIcon';
+
+// import { getStateType } from '../../utils/tree';
+// import { CollapseIcon } from './components/CollapseIcon';
+
+export interface RefProps {
+  isLoading: boolean;
+  isBrowsing: boolean;
+  selectedStoryId: string | null;
+  setSelection: (selection: { refId: string; storyId: string }) => void;
+  //   highlightedRef: MutableRefObject<Highlight>;
+  //   setHighlighted: (highlight: Highlight) => void;
+}
+
+const Wrapper = styled.View<{ isMain: boolean }>(({}) => ({
+  position: 'relative',
+}));
+
+// const RefHead = styled.View(({ theme }) => ({
+//   display: 'flex',
+//   alignItems: 'center',
+//   justifyContent: 'space-between',
+//   background: 'transparent',
+
+//   width: '100%',
+//   marginTop: 20,
+//   paddingTop: 16,
+//   paddingBottom: 12,
+//   borderTopColor: theme.appBorderColor,
+//   borderTopWidth: 1,
+// }));
+
+// const RefTitle = styled.Text(({ theme }) => ({
+//   //   textOverflow: 'ellipsis',
+//   //   whiteSpace: 'nowrap',
+//   flex: 1,
+//   flexDirection: 'row',
+//   overflow: 'hidden',
+//   marginLeft: 2,
+//   fontWeight: theme.typography.weight.bold,
+//   fontSize: theme.typography.size.s2,
+//   lineHeight: 16,
+//   color:
+//     theme.base === 'light' ? theme.color.defaultText : transparentize(0.2, theme.color.defaultText),
+// }));
+
+// const CollapseButton = styled.TouchableOpacity(({}) => ({
+//   display: 'flex',
+//   flexDirection: 'row',
+//   paddingVertical: 0,
+//   paddingHorizontal: 8,
+//   gap: 6,
+//   alignItems: 'center',
+//   cursor: 'pointer',
+//   overflow: 'hidden',
+// }));
+
+export const Ref: FC<RefType & RefProps & { status?: State['status'] }> = React.memo(function Ref(
+  props
+) {
+  const { docsOptions } = useStorybookState();
+  const api = useStorybookApi();
+  const {
+    index,
+    id: refId,
+    title = refId,
+    isLoading: isLoadingMain,
+    isBrowsing,
+    selectedStoryId,
+    // highlightedRef,
+    // setHighlighted,
+    loginUrl,
+    type,
+    expanded = true,
+    indexError,
+    previewInitialized,
+    setSelection,
+  } = props;
+  const length = useMemo(() => (index ? Object.keys(index).length : 0), [index]);
+
+  const isLoadingInjected =
+    (type === 'auto-inject' && !previewInitialized) || type === 'server-checked';
+  const isLoading = isLoadingMain || isLoadingInjected || type === 'unknown';
+  const isError = !!indexError;
+  const isEmpty = !isLoading && length === 0;
+  const isAuthRequired = !!loginUrl && length === 0;
+
+  const state = getStateType(isLoading, isAuthRequired, isError, isEmpty);
+  const [isExpanded, setExpanded] = useState<boolean>(expanded);
+
+  useEffect(() => {
+    if (index && selectedStoryId && index[selectedStoryId]) {
+      setExpanded(true);
+    }
+  }, [setExpanded, index, selectedStoryId]);
+
+  const onSelectStoryId = useCallback(
+    (storyId: string) => {
+      setSelection({ refId, storyId });
+      return api && api.selectStory(storyId, DEFAULT_REF_ID);
+    },
+    [api, refId, setSelection]
+  );
+
+  return (
+    <>
+      {isExpanded && (
+        <Wrapper data-title={title} isMain={true}>
+          {state === 'ready' && (
+            <Tree
+              status={props.status}
+              isBrowsing={isBrowsing}
+              isMain={true}
+              refId={refId}
+              data={index}
+              docsMode={docsOptions?.docsMode}
+              selectedStoryId={selectedStoryId}
+              onSelectStoryId={onSelectStoryId}
+            />
+          )}
+        </Wrapper>
+      )}
+    </>
+  );
+});