@storybook/react-native-ui-lite 9.0.0-beta.11

package/src/Layout.tsx

@@ -0,0 +1,310 @@
+import { SET_CURRENT_STORY } from 'storybook/internal/core-events';
+import { addons } from 'storybook/internal/manager-api';
+import { type API_IndexHash, type Args, type StoryContext } from 'storybook/internal/types';
+import type { ReactRenderer } from '@storybook/react';
+import { styled, ThemeProvider, useTheme, Theme } from '@storybook/react-native-theming';
+import { ReactNode, useState, useCallback, useRef } from 'react';
+import { SafeAreaView, ScrollView, Text, TouchableOpacity, View, ViewStyle } from 'react-native';
+import { IconButton } from './IconButton';
+import { LayoutProvider, useLayout } from './LayoutProvider';
+import { AddonsTabs, MobileAddonsPanel, MobileAddonsPanelRef } from './MobileAddonsPanel';
+import { MobileMenuDrawer, MobileMenuDrawerRef } from './MobileMenuDrawer';
+import { Sidebar } from './Sidebar';
+import { StorybookLogo } from './StorybookLogo';
+import { DEFAULT_REF_ID } from './constants';
+import { useStoreBooleanState } from './hooks/useStoreState';
+import { useStyle } from './util/useStyle';
+import { Storage, StorageProvider } from './StorageProvider';
+import { SelectedNodeProvider } from './SelectedNodeProvider';
+import {
+  BottomBarToggleIcon,
+  CloseFullscreenIcon,
+  FullscreenIcon,
+  MenuIcon,
+} from './icon/iconDataUris';
+
+const desktopLogoContainer = {
+  flexDirection: 'row',
+  alignItems: 'center',
+  paddingTop: 10,
+  paddingLeft: 16,
+  paddingBottom: 4,
+  paddingRight: 10,
+  justifyContent: 'space-between',
+} satisfies ViewStyle;
+
+const contentContainerStyle = { flex: 1, overflow: 'hidden' } satisfies ViewStyle;
+
+const mobileContentStyle = { flex: 1, overflow: 'hidden' } satisfies ViewStyle;
+
+const placeholderObject = {};
+
+const iconFloatRightStyle = { marginLeft: 'auto' } satisfies ViewStyle;
+
+const navButtonStyle = { flexShrink: 1 } satisfies ViewStyle;
+
+const navButtonHitSlop = { bottom: 10, left: 10, right: 10, top: 10 };
+
+const mobileMenuDrawerContentStyle = {
+  paddingLeft: 16,
+  paddingTop: 4,
+  paddingBottom: 4,
+} satisfies ViewStyle;
+
+export const LiteUI = ({
+  storage,
+  theme,
+  storyHash,
+  story,
+  children,
+}: {
+  storage: Storage;
+  theme: Theme;
+  storyHash: API_IndexHash | undefined;
+  story?: StoryContext<ReactRenderer, Args>;
+  children: ReactNode | ReactNode[];
+}) => (
+  <>
+    <ThemeProvider theme={theme}>
+      {/* @ts-ignore something weird with story type */}
+      <StorageProvider storage={storage}>
+        <LayoutProvider>
+          <Layout storyHash={storyHash} story={story}>
+            {children}
+          </Layout>
+        </LayoutProvider>
+      </StorageProvider>
+    </ThemeProvider>
+  </>
+);
+
+export const Layout = ({
+  storyHash,
+  story,
+  children,
+}: {
+  storyHash: API_IndexHash | undefined;
+  story?: StoryContext<ReactRenderer, Args>;
+  children: ReactNode | ReactNode[];
+}) => {
+  const theme = useTheme();
+
+  const { isDesktop } = useLayout();
+
+  const [desktopSidebarOpen, setDesktopSidebarOpen] = useStoreBooleanState(
+    'desktopSidebarState',
+    true
+  );
+
+  const [desktopAddonsPanelOpen, setDesktopAddonsPanelOpen] = useStoreBooleanState(
+    'desktopPanelState',
+    true
+  );
+
+  const [uiHidden, setUiHidden] = useState(false);
+
+  const desktopSidebarStyle = useStyle(
+    () => ({
+      width: desktopSidebarOpen ? 240 : undefined,
+      padding: desktopSidebarOpen ? 0 : 10,
+      borderColor: theme.appBorderColor,
+      borderRightWidth: 1,
+    }),
+    [desktopSidebarOpen, theme.appBorderColor]
+  );
+
+  const desktopAddonsPanelStyle = useStyle(
+    () => ({
+      height: desktopAddonsPanelOpen ? 300 : undefined,
+      borderTopWidth: 1,
+      borderColor: theme.appBorderColor,
+      paddingTop: desktopAddonsPanelOpen ? 4 : 0,
+      padding: desktopAddonsPanelOpen ? 0 : 10,
+    }),
+    [desktopAddonsPanelOpen, theme.appBorderColor]
+  );
+
+  const containerStyle = useStyle(() => {
+    if (isDesktop) {
+      return {
+        flex: 1,
+        backgroundColor: theme.background.content,
+        flexDirection: 'row',
+      };
+    }
+
+    return {
+      flex: 1,
+      backgroundColor: theme.background.content,
+    };
+  }, [theme.background.content, story?.parameters?.noSafeArea, isDesktop]);
+
+  const fullScreenButtonStyle = useStyle(
+    () => ({
+      position: 'absolute',
+      bottom: uiHidden ? 56 : 16,
+      right: 16,
+      backgroundColor: theme.background.content,
+      padding: 4,
+      borderRadius: 4,
+      borderWidth: 1,
+      borderColor: theme.appBorderColor,
+    }),
+    [uiHidden, theme.background.content, theme.appBorderColor]
+  );
+
+  const navButtonTextStyle = useStyle(
+    () => ({
+      flexShrink: 1,
+      color: theme.barTextColor,
+    }),
+    [theme.barTextColor]
+  );
+
+  const mobileMenuDrawerRef = useRef<MobileMenuDrawerRef>(null);
+  const addonPanelRef = useRef<MobileAddonsPanelRef>(null);
+
+  const setSelection = useCallback(({ storyId: newStoryId }: { storyId: string }) => {
+    const channel = addons.getChannel();
+
+    channel.emit(SET_CURRENT_STORY, { storyId: newStoryId });
+  }, []);
+
+  return (
+    <SafeAreaView style={containerStyle}>
+      {isDesktop ? (
+        <View style={desktopSidebarStyle}>
+          {desktopSidebarOpen ? (
+            <ScrollView keyboardShouldPersistTaps="handled">
+              <View style={desktopLogoContainer}>
+                <StorybookLogo theme={theme} />
+
+                <IconButton onPress={() => setDesktopSidebarOpen(false)} Icon={MenuIcon} />
+              </View>
+
+              <Sidebar
+                previewInitialized
+                indexError={undefined}
+                refs={placeholderObject}
+                setSelection={setSelection}
+                status={placeholderObject}
+                index={storyHash}
+                storyId={story?.id}
+                refId={DEFAULT_REF_ID}
+              />
+            </ScrollView>
+          ) : (
+            <IconButton onPress={() => setDesktopSidebarOpen(true)} Icon={MenuIcon} />
+          )}
+        </View>
+      ) : null}
+
+      <View style={mobileContentStyle}>
+        <View style={contentContainerStyle}>{children}</View>
+
+        {story?.parameters?.hideFullScreenButton || isDesktop ? null : (
+          <TouchableOpacity
+            style={fullScreenButtonStyle}
+            onPress={() => setUiHidden((prev) => !prev)}
+          >
+            {uiHidden ? (
+              <CloseFullscreenIcon color={theme.color.mediumdark} />
+            ) : (
+              <FullscreenIcon color={theme.color.mediumdark} />
+            )}
+          </TouchableOpacity>
+        )}
+
+        {isDesktop ? (
+          <View style={desktopAddonsPanelStyle}>
+            {desktopAddonsPanelOpen ? (
+              <AddonsTabs storyId={story?.id} onClose={() => setDesktopAddonsPanelOpen(false)} />
+            ) : (
+              <IconButton
+                style={iconFloatRightStyle}
+                onPress={() => setDesktopAddonsPanelOpen(true)}
+                Icon={BottomBarToggleIcon}
+              />
+            )}
+          </View>
+        ) : null}
+      </View>
+
+      {!uiHidden && !isDesktop ? (
+        <Container>
+          <Nav>
+            <Button
+              testID="mobile-menu-button"
+              style={navButtonStyle}
+              hitSlop={navButtonHitSlop}
+              onPress={() => mobileMenuDrawerRef.current?.setMobileMenuOpen(true)}
+            >
+              <MenuIcon color={theme.color.mediumdark} />
+              <Text style={navButtonTextStyle} numberOfLines={1}>
+                {story?.title}/{story?.name}
+              </Text>
+            </Button>
+
+            <IconButton
+              testID="mobile-addons-button"
+              onPress={() => addonPanelRef.current.setAddonsPanelOpen(true)}
+              Icon={BottomBarToggleIcon}
+            />
+          </Nav>
+        </Container>
+      ) : null}
+
+      {isDesktop ? null : (
+        <SelectedNodeProvider>
+          <MobileMenuDrawer ref={mobileMenuDrawerRef}>
+            <View style={mobileMenuDrawerContentStyle}>
+              <StorybookLogo theme={theme} />
+            </View>
+
+            <Sidebar
+              previewInitialized
+              indexError={undefined}
+              refs={placeholderObject}
+              setSelection={setSelection}
+              status={placeholderObject}
+              index={storyHash}
+              storyId={story?.id}
+              refId={DEFAULT_REF_ID}
+            />
+          </MobileMenuDrawer>
+        </SelectedNodeProvider>
+      )}
+
+      {isDesktop ? null : <MobileAddonsPanel ref={addonPanelRef} storyId={story?.id} />}
+    </SafeAreaView>
+  );
+};
+
+const Nav = styled.View({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  width: '100%',
+  height: 40,
+  paddingHorizontal: 6,
+});
+
+const Container = styled.View(({ theme }) => ({
+  alignSelf: 'flex-end',
+  width: '100%',
+  backgroundColor: 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,32 @@
+import type { FC, PropsWithChildren } from 'react';
+import { createContext, useContext, useMemo } from 'react';
+import { useWindowDimensions } from 'react-native';
+import { BREAKPOINT } from './constants';
+
+type LayoutContextType = {
+  isDesktop: boolean;
+  isMobile: boolean;
+};
+
+const LayoutContext = createContext<LayoutContextType>({
+  isDesktop: false,
+  isMobile: true,
+});
+
+export const LayoutProvider: FC<PropsWithChildren> = ({ children }) => {
+  const { width } = useWindowDimensions();
+  const isDesktop = width >= BREAKPOINT;
+  const isMobile = !isDesktop;
+
+  const contextValue = useMemo(
+    () => ({
+      isDesktop,
+      isMobile,
+    }),
+    [isDesktop, isMobile]
+  );
+
+  return <LayoutContext.Provider value={contextValue}>{children}</LayoutContext.Provider>;
+};
+
+export const useLayout = () => useContext(LayoutContext);

package/src/MobileAddonsPanel.tsx

@@ -0,0 +1,195 @@
+import { styled, useTheme } from '@storybook/react-native-theming';
+import { forwardRef, useImperativeHandle, useMemo, useState } from 'react';
+import {
+  KeyboardAvoidingView,
+  Modal,
+  Pressable,
+  SafeAreaView,
+  ScrollView,
+  StyleProp,
+  Text,
+  View,
+  ViewStyle,
+} from 'react-native';
+import { addons } from 'storybook/internal/manager-api';
+import { Addon_TypesEnum } from 'storybook/internal/types';
+import { IconButton } from './IconButton';
+import { CloseIcon } from './icon/iconDataUris';
+
+export interface MobileAddonsPanelRef {
+  setAddonsPanelOpen: (isOpen: boolean) => void;
+}
+
+export const MobileAddonsPanel = forwardRef<MobileAddonsPanelRef, { storyId?: string }>(
+  ({ storyId }, ref) => {
+    const theme = useTheme();
+    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+    useImperativeHandle(ref, () => ({
+      setAddonsPanelOpen: (open: boolean) => {
+        if (open) {
+          setMobileMenuOpen(true);
+        } else {
+          setMobileMenuOpen(false);
+        }
+      },
+    }));
+
+    return (
+      <Modal
+        visible={mobileMenuOpen}
+        onRequestClose={() => setMobileMenuOpen(false)}
+        transparent
+        animationType="slide"
+      >
+        <KeyboardAvoidingView behavior="height" style={{ flex: 1 }}>
+          <SafeAreaView style={{ justifyContent: 'flex-end', flex: 1 }}>
+            <View
+              style={{ flex: 1, borderBottomColor: theme.appBorderColor, borderBottomWidth: 1 }}
+            >
+              <Pressable style={{ flex: 1 }} onPress={() => setMobileMenuOpen(false)}></Pressable>
+            </View>
+
+            <View
+              style={{ height: '50%', backgroundColor: theme.background.content, paddingTop: 10 }}
+            >
+              <AddonsTabs
+                onClose={() => {
+                  setMobileMenuOpen(false);
+                }}
+                storyId={storyId}
+              />
+            </View>
+          </SafeAreaView>
+        </KeyboardAvoidingView>
+      </Modal>
+    );
+  }
+);
+
+MobileAddonsPanel.displayName = 'MobileAddonsPanel';
+
+const addonsTabsContainerStyle = {
+  flex: 1,
+} satisfies StyleProp<ViewStyle>;
+
+const addonsTabsStyle = {
+  flexDirection: 'row',
+  borderBottomWidth: 1,
+  borderBottomColor: 'lightgrey',
+} satisfies StyleProp<ViewStyle>;
+
+const addonsTabsContentContainerStyle = {
+  justifyContent: 'center',
+} satisfies StyleProp<ViewStyle>;
+
+const closeIconStyle = {
+  marginRight: 4,
+  marginBottom: 4,
+  alignItems: 'center',
+  justifyContent: 'center',
+} satisfies StyleProp<ViewStyle>;
+
+const addonsScrollStyle = {
+  flex: 1,
+} satisfies StyleProp<ViewStyle>;
+
+const centeredStyle = {
+  alignItems: 'center',
+  justifyContent: 'center',
+} satisfies StyleProp<ViewStyle>;
+
+const scrollContentContainerStyle = {
+  paddingBottom: 16,
+} satisfies StyleProp<ViewStyle>;
+const hitSlop = { top: 10, right: 10, bottom: 10, left: 10 };
+
+export const AddonsTabs = ({ onClose, storyId }: { onClose?: () => void; storyId?: string }) => {
+  const panels = addons.getElements(Addon_TypesEnum.PANEL);
+
+  const [addonSelected, setAddonSelected] = useState(Object.keys(panels)[0]);
+
+  const panel = useMemo(() => {
+    if (!storyId) {
+      return (
+        <View style={centeredStyle}>
+          <Text>No Story Selected</Text>
+        </View>
+      );
+    }
+
+    if (Object.keys(panels).length === 0) {
+      return (
+        <View style={centeredStyle}>
+          <Text>No addons loaded.</Text>
+        </View>
+      );
+    }
+
+    return panels[addonSelected].render({ active: true });
+  }, [addonSelected, panels, storyId]);
+
+  return (
+    <View style={addonsTabsContainerStyle}>
+      <View style={addonsTabsStyle}>
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={addonsTabsContentContainerStyle}
+        >
+          {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={closeIconStyle}
+          hitSlop={hitSlop}
+          Icon={CloseIcon}
+          onPress={() => onClose?.()}
+        />
+      </View>
+      <ScrollView
+        style={addonsScrollStyle}
+        // keyboardShouldPersistTaps="handled"
+        contentContainerStyle={scrollContentContainerStyle}
+      >
+        {panel}
+      </ScrollView>
+    </View>
+  );
+};
+
+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: 12,
+  lineHeight: 12,
+}));

package/src/MobileMenuDrawer.tsx

@@ -0,0 +1,90 @@
+import { useTheme } from '@storybook/react-native-theming';
+import { forwardRef, memo, ReactNode, useImperativeHandle, useMemo, useState } from 'react';
+import {
+  Keyboard,
+  KeyboardAvoidingView,
+  Modal,
+  Pressable,
+  SafeAreaView,
+  ScrollView,
+  StyleProp,
+  useWindowDimensions,
+  View,
+  ViewStyle,
+} from 'react-native';
+
+import { useSelectedNode } from './SelectedNodeProvider';
+
+interface MobileMenuDrawerProps {
+  children: ReactNode | ReactNode[];
+}
+
+export interface MobileMenuDrawerRef {
+  setMobileMenuOpen: (isOpen: boolean) => void;
+}
+
+export const MobileMenuDrawer = memo(
+  forwardRef<MobileMenuDrawerRef, MobileMenuDrawerProps>(({ children }, ref) => {
+    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+    const { scrollToSelectedNode, scrollRef } = useSelectedNode();
+    const { height } = useWindowDimensions();
+    useImperativeHandle(ref, () => ({
+      setMobileMenuOpen: (open: boolean) => {
+        if (open) {
+          scrollToSelectedNode();
+          setMobileMenuOpen(true);
+        } else {
+          Keyboard.dismiss();
+          setMobileMenuOpen(false);
+        }
+      },
+    }));
+    const theme = useTheme();
+    const bgColorStyle = useMemo(() => {
+      return {
+        marginTop: 'auto',
+        backgroundColor: theme.background.content,
+        height: height,
+        width: '100%',
+        overflow: 'hidden',
+      } satisfies StyleProp<ViewStyle>;
+    }, [height, theme.background.content]);
+
+    return (
+      <Modal
+        visible={mobileMenuOpen}
+        style={bgColorStyle}
+        animationType="slide"
+        transparent
+        onRequestClose={() => setMobileMenuOpen(false)}
+      >
+        <KeyboardAvoidingView behavior="height" style={{ flex: 1 }}>
+          <SafeAreaView style={{ justifyContent: 'flex-end', flex: 1 }}>
+            <View
+              style={{ flex: 1, borderBottomColor: theme.appBorderColor, borderBottomWidth: 1 }}
+            >
+              <Pressable style={{ flex: 1 }} onPress={() => setMobileMenuOpen(false)}></Pressable>
+            </View>
+
+            <View style={{ height: '65%' }}>
+              <ScrollView
+                ref={scrollRef}
+                keyboardShouldPersistTaps="handled"
+                style={{
+                  flex: 1,
+                  paddingBottom: 150,
+                  paddingTop: 24,
+                  alignSelf: 'flex-end',
+                  width: '100%',
+                  backgroundColor: theme.background.content,
+                }}
+              >
+                {children}
+              </ScrollView>
+            </View>
+          </SafeAreaView>
+        </KeyboardAvoidingView>
+      </Modal>
+    );
+  })
+);

package/src/Refs.tsx

@@ -0,0 +1,82 @@
+import type { FC } from 'react';
+import React, { useMemo, useCallback, useEffect, useState } from 'react';
+import type { State } from 'storybook/internal/manager-api';
+import { styled } from '@storybook/react-native-theming';
+import { Tree } from './Tree';
+import type { RefType } from './types';
+import { getStateType } from './util/tree';
+
+export interface RefProps {
+  isLoading: boolean;
+  isBrowsing: boolean;
+  selectedStoryId: string | null;
+  setSelection: (selection: { refId: string; storyId: string }) => void;
+}
+
+const Wrapper = styled.View<{ isMain: boolean }>(() => ({
+  position: 'relative',
+}));
+
+export const Ref: FC<RefType & RefProps & { status?: State['status'] }> = React.memo(
+  function Ref(props) {
+    const {
+      index,
+      id: refId,
+      title = refId,
+      isLoading: isLoadingMain,
+      isBrowsing,
+      selectedStoryId,
+      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 });
+      },
+      [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={false}
+                selectedStoryId={selectedStoryId}
+                onSelectStoryId={onSelectStoryId}
+              />
+            )}
+          </Wrapper>
+        )}
+      </>
+    );
+  }
+);