@storybook/react-native 6.5.0-rc.1 → 6.5.0-rc.3

package/dist/preview/components/OnDeviceUI/navigation/Navigation.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import GestureRecognizer from 'react-native-swipe-gestures';
-import Bar from './Bar';
+import { NavigationBar } from './NavigationBar';
 import VisibilityButton from './VisibilityButton';
 const SWIPE_CONFIG = {
     velocityThreshold: 0.2,
@@ -14,7 +14,7 @@ const navStyle = {
     right: 0,
     bottom: 0,
 };
-const Navigation = ({ tabOpen, onChangeTab, isUIVisible, setIsUIVisible }) => {
+const Navigation = ({ tabOpen, onChangeTab, isUIVisible, setIsUIVisible, onLayout }) => {
     const insets = useSafeAreaInsets();
     const handleToggleUI = () => {
         setIsUIVisible((oldIsUIVisible) => !oldIsUIVisible);
@@ -29,9 +29,9 @@ const Navigation = ({ tabOpen, onChangeTab, isUIVisible, setIsUIVisible }) => {
             onChangeTab(tabOpen - 1);
         }
     };
-    return (React.createElement(View, { style: navStyle },
+    return (React.createElement(View, { style: navStyle, onLayout: onLayout },
         isUIVisible && (React.createElement(GestureRecognizer, { onSwipeLeft: handleSwipeLeft, onSwipeRight: handleSwipeRight, config: SWIPE_CONFIG },
-            React.createElement(Bar, { index: tabOpen, onPress: onChangeTab, style: { paddingBottom: insets.bottom } }))),
-        React.createElement(VisibilityButton, { onPress: handleToggleUI, style: { marginBottom: insets.bottom } })));
+            React.createElement(NavigationBar, { index: tabOpen, onPress: onChangeTab, style: { paddingBottom: insets.bottom } }))),
+        React.createElement(VisibilityButton, { onPress: handleToggleUI, style: { paddingBottom: insets.bottom } })));
 };
 export default React.memo(Navigation);

package/dist/preview/components/OnDeviceUI/navigation/NavigationBar.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface NavigationBarProps {
+    index: number;
+    onPress: (id: number) => void;
+    style?: StyleProp<ViewStyle>;
+}
+export declare const NavigationBar: React.MemoExoticComponent<({ index, onPress, style }: NavigationBarProps) => JSX.Element>;

package/dist/preview/components/OnDeviceUI/navigation/NavigationBar.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import styled from '@emotion/native';
+import { NAVIGATOR, PREVIEW, ADDONS } from './constants';
+import { TabBar, TabButton } from '../../Shared/tabs';
+const NavigationTabBar = styled(TabBar)(({ theme }) => ({
+    paddingHorizontal: theme.tokens.spacing2,
+    backgroundColor: theme.navigation.backgroundColor,
+    borderColor: theme.navigation.borderColor,
+    borderTopWidth: theme.navigation.borderWidth,
+}));
+export const NavigationBar = React.memo(({ index, onPress, style }) => (React.createElement(NavigationTabBar, { style: style },
+    React.createElement(TabButton, { onPress: onPress, testID: "BottomMenu.Navigator", id: NAVIGATOR, active: index === NAVIGATOR }, "NAVIGATOR"),
+    React.createElement(TabButton, { onPress: onPress, testID: "BottomMenu.Preview", id: PREVIEW, active: index === PREVIEW }, "PREVIEW"),
+    React.createElement(TabButton, { onPress: onPress, testID: "BottomMenu.Addons", id: ADDONS, active: index === ADDONS }, "ADDONS"))));

package/dist/preview/components/OnDeviceUI/navigation/VisibilityButton.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import styled from '@emotion/native';
 import { View } from 'react-native';
-const Touchable = styled.TouchableOpacity({
+const Touchable = styled.TouchableOpacity(({ theme }) => ({
     backgroundColor: 'transparent',
     position: 'absolute',
-    right: 8,
-    bottom: 12,
+    right: theme.tokens.spacing2,
+    bottom: theme.tokens.spacing4,
     zIndex: 100,
-});
+}));
 const HIDE_ICON_SIZE = 14;
 const HIDE_ICON_BORDER_WIDTH = 1;
 const Inner = styled.View(({ theme }) => ({
@@ -16,22 +16,22 @@ const Inner = styled.View(({ theme }) => ({
     left: 0,
     width: HIDE_ICON_SIZE,
     height: HIDE_ICON_SIZE,
-    borderRadius: HIDE_ICON_BORDER_WIDTH,
+    borderRadius: theme.navigation.visibilityBorderRadius,
     overflow: 'hidden',
-    borderColor: theme.buttonTextColor || '#999999',
+    borderColor: theme.navigation.visibilityInnerBorderColor,
     borderWidth: HIDE_ICON_BORDER_WIDTH * 2,
 }));
-const Outer = styled.View({
+const Outer = styled.View(({ theme }) => ({
     position: 'absolute',
     top: 0,
     left: 0,
     width: HIDE_ICON_SIZE,
     height: HIDE_ICON_SIZE,
-    borderRadius: HIDE_ICON_BORDER_WIDTH,
+    borderRadius: theme.navigation.visibilityBorderRadius,
     overflow: 'hidden',
-    borderColor: 'white',
+    borderColor: theme.navigation.visibilityOuterBorderColor,
     borderWidth: HIDE_ICON_BORDER_WIDTH,
-});
+}));
 const hideIconStyles = {
     width: HIDE_ICON_SIZE,
     height: HIDE_ICON_SIZE,

package/dist/preview/components/Shared/layout.d.ts

@@ -0,0 +1,12 @@
+/**
+ * A general (flex)box layout component that accepts props for flexbox layout
+ * styles, such as `flex`, `alignItems`, `marginVertical`, etc.
+ *
+ * @example
+ * ```tsx
+ * <Box flex flexDirection='row' alignItems='center' marginVertical={42}>
+ *   <MyContent />
+ * </Box>
+ * ```
+ */
+export declare const Box: any;

package/dist/preview/components/Shared/layout.js

@@ -0,0 +1,27 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import styled from '@emotion/native';
+/**
+ * A general (flex)box layout component that accepts props for flexbox layout
+ * styles, such as `flex`, `alignItems`, `marginVertical`, etc.
+ *
+ * @example
+ * ```tsx
+ * <Box flex flexDirection='row' alignItems='center' marginVertical={42}>
+ *   <MyContent />
+ * </Box>
+ * ```
+ */
+export const Box = styled.View((_a) => {
+    var { flex } = _a, layoutProps = __rest(_a, ["flex"]);
+    return (Object.assign({ flex: flex === true ? 1 : flex === false ? 0 : flex }, layoutProps));
+});

package/dist/preview/components/Shared/tabs.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+interface TabButtonProps {
+    id: number | string;
+    active: boolean;
+    onPress: (id: number | string) => void;
+    testID?: string;
+    children: React.ReactNode;
+}
+export declare const TabButton: React.MemoExoticComponent<({ onPress, id, active, children, testID }: TabButtonProps) => JSX.Element>;
+interface TabBarProps {
+    /**
+     * Should the tab bar contents scroll horizontally?
+     */
+    scrollable?: boolean;
+    style?: StyleProp<ViewStyle>;
+    children: React.ReactNode;
+}
+export declare const TabBar: React.MemoExoticComponent<({ scrollable, style, children }: TabBarProps) => JSX.Element>;
+export {};

package/dist/preview/components/Shared/tabs.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { ScrollView, View } from 'react-native';
+import styled from '@emotion/native';
+import { useTheme } from '../../../hooks';
+const TabButtonText = styled.Text(({ theme, active }) => ({
+    color: active ? theme.tabs.activeTextColor : theme.tabs.inactiveTextColor,
+    paddingVertical: theme.tabs.paddingVertical,
+    paddingHorizontal: theme.tabs.paddingHorizontal,
+    fontSize: theme.tabs.fontSize,
+    fontWeight: theme.tabs.fontWeight,
+}));
+const hitSlop = { top: 8, left: 0, right: 0, bottom: 20 };
+const TabButtonTouchable = styled.TouchableOpacity(({ theme, active }) => ({
+    borderWidth: theme.tabs.borderWidth,
+    borderColor: active ? theme.tabs.activeBorderColor : theme.tabs.inactiveBorderColor,
+    borderRadius: theme.tabs.borderRadius,
+    backgroundColor: active ? theme.tabs.activeBackgroundColor : theme.tabs.inactiveBackgroundColor,
+}));
+export const TabButton = React.memo(({ onPress, id, active, children, testID }) => {
+    return (React.createElement(TabButtonTouchable, { active: active, testID: testID, onPress: () => onPress(id), activeOpacity: 0.8, hitSlop: hitSlop },
+        React.createElement(TabButtonText, { active: active }, children)));
+});
+export const TabBar = React.memo(({ scrollable = false, style, children }) => {
+    const theme = useTheme();
+    if (scrollable) {
+        children = (React.createElement(ScrollView, { showsHorizontalScrollIndicator: false, horizontal: true, contentContainerStyle: { paddingHorizontal: theme.tokens.spacing2 } }, children));
+    }
+    return (React.createElement(View, { style: style },
+        React.createElement(TabBarContainer, null, children)));
+});
+const TabBarContainer = styled.View({
+    flexDirection: 'row',
+    paddingVertical: 6,
+    justifyItems: 'center',
+});

package/dist/preview/components/Shared/theme.d.ts

@@ -1,15 +1,185 @@
-export declare const theme: {
+import { ShadowStyleIOS, ViewStyle, TextStyle } from 'react-native';
+type ShadowStyle = ShadowStyleIOS | Pick<ViewStyle, 'elevation'>;
+type FontWeight = TextStyle['fontWeight'];
+/**
+ * Primitive tokens used to build the theme.
+ *
+ * Ideally components should not use these values directly, and should prefer
+ * to use more semantic values from the theme.
+ */
+interface ThemeTokens {
+    spacing1: number;
+    spacing2: number;
+    spacing3: number;
+    spacing4: number;
+    spacing5: number;
+    spacing6: number;
+    fontSize: {
+        small: number;
+        smaller: number;
+        normal: number;
+    };
+    color: {
+        black: string;
+        white: string;
+        grey200: string;
+        grey700: string;
+        red500: string;
+        blue100: string;
+        blue200: string;
+        blue250: string;
+        blue300: string;
+        blue400: string;
+        blue600: string;
+        green500: string;
+    };
+    borderRadius: {
+        small: number;
+        medium: number;
+        large: number;
+        round: number;
+    };
+    borderWidthNormal: number;
+    /** Elevation shadows */
+    elevation: {
+        floating: ShadowStyle;
+    };
+}
+interface ThemeButton {
+    textColor: string;
     backgroundColor: string;
-    storyListBackgroundColor: string;
-    listItemTextColor: string;
-    listItemActiveColor: string;
-    listItemActiveTextColor: string;
-    sectionActiveColor: string;
-    headerTextColor: string;
-    labelColor: string;
     borderColor: string;
-    previewBorderColor: string;
-    buttonTextColor: string;
-    buttonActiveTextColor: string;
-    secondaryLabelColor: string;
-};
+    borderWidth: number;
+    borderRadius: number;
+}
+export interface Theme {
+    tokens: ThemeTokens;
+    backgroundColor: string;
+    text: {
+        primaryColor: string;
+        secondaryColor: string;
+        linkColor: string;
+    };
+    preview: {
+        containerBackgroundColor: string;
+        backgroundColor: string;
+    };
+    /** Navigation bar and related area */
+    navigation: {
+        backgroundColor: string;
+        borderColor: string;
+        borderWidth: number;
+        visibilityBorderRadius: number;
+        visibilityInnerBorderColor: string;
+        visibilityOuterBorderColor: string;
+    };
+    /** Side panels (Story list, addons) */
+    panel: {
+        backgroundColor: string;
+        borderWidth: number;
+        borderColor: string;
+        paddingVertical: number;
+        paddingHorizontal: number;
+    };
+    /** Story list and list items */
+    storyList: {
+        fontSize: number;
+        headerPaddingHorizontal: number;
+        headerPaddingVertical: number;
+        headerTextColor: string;
+        headerFontWeight: FontWeight;
+        storyPaddingHorizontal: number;
+        storyPaddingVertical: number;
+        storyIndent: number;
+        storyTextColor: string;
+        storyFontWeight: FontWeight;
+        storySelectedBackgroundColor: string;
+        storySelectedTextColor: string;
+        storySelectedFontWeight: FontWeight;
+        sectionSpacing: number;
+        sectionActiveBackgroundColor: string;
+        sectionBorderRadius: number;
+        search: {
+            fontSize: number;
+            textColor: string;
+            placeholderTextColor: string;
+            borderRadius: number;
+            borderColor: string;
+            borderWidth: number;
+            backgroundColor: string;
+            paddingVertical: number;
+            paddingHorizontal: number;
+        };
+    };
+    /** Buttons */
+    button: {
+        fontSize: number;
+        fontWeight: FontWeight;
+        paddingVertical: number;
+        paddingHorizontal: number;
+        primary: ThemeButton;
+        secondary: ThemeButton;
+    };
+    /** Tabs (navigation and addons) */
+    tabs: {
+        fontSize: number;
+        fontWeight: FontWeight;
+        paddingVertical: number;
+        paddingHorizontal: number;
+        borderWidth: number;
+        borderRadius: number;
+        activeBorderColor: string;
+        activeBackgroundColor: string;
+        activeTextColor: string;
+        inactiveBorderColor: string;
+        inactiveBackgroundColor: string;
+        inactiveTextColor: string;
+    };
+    /** Inputs (text, radio, slider, etc.) */
+    inputs: {
+        errorTextColor: string;
+        labelFontSize: number;
+        labelTextColor: string;
+        text: {
+            fontSize: number;
+            textColor: string;
+            borderWidth: number;
+            borderColor: string;
+            backgroundColor: string;
+            borderRadius: number;
+            paddingVertical: number;
+            paddingHorizontal: number;
+        };
+        radio: {
+            fontSize: number;
+            height: number;
+            borderWidth: number;
+            borderColor: string;
+            backgroundColor: string;
+            paddingVertical: number;
+            paddingHorizontal: number;
+            activeBackgroundColor: string;
+            itemSpacing: number;
+            labelSpacing: number;
+        };
+        swatch: {
+            fontSize: number;
+            height: number;
+            borderWidth: number;
+            borderColor: string;
+            backgroundColor: string;
+            outerBorderRadius: number;
+            innerBorderRadius: number;
+            paddingVertical: number;
+            paddingHorizontal: number;
+            nameTextWeight: FontWeight;
+        };
+        slider: {
+            fontSize: number;
+            labelTextColor: string;
+            valueTextColor: string;
+        };
+    };
+}
+export declare const theme: Theme;
+export {};

package/dist/preview/components/Shared/theme.js

@@ -1,15 +1,179 @@
+const tokens = {
+    spacing1: 4,
+    spacing2: 8,
+    spacing3: 12,
+    spacing4: 16,
+    spacing5: 20,
+    spacing6: 24,
+    fontSize: {
+        small: 12,
+        smaller: 14,
+        normal: 16,
+    },
+    color: {
+        black: '#001a23',
+        white: '#ffffff',
+        grey200: '#dee2e3',
+        grey700: '#859499',
+        red500: '#ff4400',
+        blue100: '#f6f9fc',
+        blue200: '#e0eaf5',
+        blue250: '#dcebf9',
+        blue300: '#b2cbe6',
+        blue400: '#a3c1e0',
+        blue600: '#1ea7fd',
+        green500: '#66bf3c',
+    },
+    borderRadius: {
+        small: 4,
+        medium: 6,
+        large: 8,
+        round: 100,
+    },
+    borderWidthNormal: 1,
+    elevation: {
+        floating: {
+            shadowColor: '#000000',
+            shadowOpacity: 0.2,
+            shadowOffset: { width: 0, height: 0 },
+            shadowRadius: 16,
+            elevation: 10,
+        },
+    },
+};
+const text = {
+    primaryColor: tokens.color.black,
+    secondaryColor: tokens.color.grey700,
+    linkColor: '#0000ff',
+};
 export const theme = {
-    backgroundColor: 'white',
-    storyListBackgroundColor: '#f6f9fc',
-    listItemTextColor: '#444444',
-    listItemActiveColor: '#1ea7fd',
-    listItemActiveTextColor: 'white',
-    sectionActiveColor: '#e0ebf5',
-    headerTextColor: 'black',
-    labelColor: 'black',
-    borderColor: '#e6e6e6',
-    previewBorderColor: '#b3b3b3',
-    buttonTextColor: '#999999',
-    buttonActiveTextColor: '#444444',
-    secondaryLabelColor: '#999999',
+    tokens,
+    text,
+    backgroundColor: tokens.color.white,
+    preview: {
+        containerBackgroundColor: tokens.color.white,
+        backgroundColor: tokens.color.white,
+    },
+    navigation: {
+        backgroundColor: tokens.color.white,
+        borderColor: tokens.color.grey200,
+        borderWidth: tokens.borderWidthNormal,
+        visibilityBorderRadius: tokens.borderRadius.small,
+        visibilityInnerBorderColor: tokens.color.grey700,
+        visibilityOuterBorderColor: tokens.color.white,
+    },
+    panel: {
+        backgroundColor: tokens.color.blue100,
+        borderWidth: tokens.borderWidthNormal,
+        borderColor: tokens.color.blue200,
+        paddingVertical: 0,
+        paddingHorizontal: tokens.spacing2,
+    },
+    storyList: {
+        fontSize: tokens.fontSize.normal,
+        headerPaddingHorizontal: tokens.spacing2,
+        headerPaddingVertical: tokens.spacing2,
+        headerTextColor: text.primaryColor,
+        headerFontWeight: '500',
+        storyPaddingHorizontal: tokens.spacing2,
+        storyPaddingVertical: tokens.spacing1 * 1.5,
+        storyIndent: tokens.spacing6,
+        storyTextColor: text.primaryColor,
+        storyFontWeight: '400',
+        storySelectedBackgroundColor: tokens.color.blue600,
+        storySelectedTextColor: tokens.color.white,
+        storySelectedFontWeight: '700',
+        sectionSpacing: tokens.spacing2,
+        sectionActiveBackgroundColor: tokens.color.blue200,
+        sectionBorderRadius: tokens.borderRadius.medium,
+        search: {
+            fontSize: tokens.fontSize.normal,
+            textColor: text.primaryColor,
+            placeholderTextColor: text.secondaryColor,
+            borderRadius: tokens.borderRadius.round,
+            borderColor: tokens.color.blue400,
+            borderWidth: tokens.borderWidthNormal,
+            backgroundColor: tokens.color.white,
+            paddingVertical: tokens.spacing2,
+            paddingHorizontal: tokens.spacing3,
+        },
+    },
+    button: {
+        fontSize: tokens.fontSize.smaller,
+        fontWeight: '600',
+        paddingVertical: tokens.spacing2,
+        paddingHorizontal: tokens.spacing5,
+        primary: {
+            textColor: text.primaryColor,
+            backgroundColor: tokens.color.blue250,
+            borderColor: tokens.color.blue300,
+            borderWidth: tokens.borderWidthNormal,
+            borderRadius: tokens.borderRadius.medium,
+        },
+        secondary: {
+            textColor: text.primaryColor,
+            backgroundColor: 'transparent',
+            borderColor: tokens.color.blue300,
+            borderWidth: tokens.borderWidthNormal,
+            borderRadius: tokens.borderRadius.medium,
+        },
+    },
+    tabs: {
+        fontSize: tokens.fontSize.small,
+        fontWeight: '500',
+        paddingVertical: tokens.spacing2,
+        paddingHorizontal: tokens.spacing2 * 1.25,
+        borderWidth: tokens.borderWidthNormal,
+        borderRadius: tokens.borderRadius.round,
+        activeBorderColor: tokens.color.blue300,
+        activeBackgroundColor: tokens.color.blue250,
+        activeTextColor: text.primaryColor,
+        inactiveBorderColor: 'transparent',
+        inactiveBackgroundColor: 'transparent',
+        inactiveTextColor: text.secondaryColor,
+    },
+    inputs: {
+        errorTextColor: tokens.color.red500,
+        labelFontSize: tokens.fontSize.smaller,
+        labelTextColor: text.primaryColor,
+        text: {
+            fontSize: tokens.fontSize.smaller,
+            textColor: text.primaryColor,
+            borderWidth: tokens.borderWidthNormal,
+            borderColor: tokens.color.blue400,
+            backgroundColor: tokens.color.white,
+            borderRadius: tokens.borderRadius.medium,
+            paddingVertical: tokens.spacing1 * 1.5,
+            paddingHorizontal: tokens.spacing1 * 1.5,
+        },
+        radio: {
+            fontSize: tokens.fontSize.smaller,
+            height: 20,
+            borderWidth: tokens.borderWidthNormal,
+            borderColor: tokens.color.blue400,
+            backgroundColor: tokens.color.white,
+            paddingVertical: 3,
+            paddingHorizontal: 3,
+            activeBackgroundColor: tokens.color.green500,
+            itemSpacing: tokens.spacing1,
+            labelSpacing: tokens.spacing2,
+        },
+        swatch: {
+            fontSize: tokens.fontSize.smaller,
+            height: 40,
+            borderWidth: tokens.borderWidthNormal,
+            borderColor: tokens.color.blue400,
+            backgroundColor: tokens.color.white,
+            outerBorderRadius: tokens.borderRadius.medium,
+            innerBorderRadius: tokens.borderRadius.small,
+            paddingVertical: tokens.spacing1,
+            paddingHorizontal: tokens.spacing1,
+            nameTextWeight: '600',
+        },
+        slider: {
+            fontSize: tokens.fontSize.smaller,
+            labelTextColor: text.secondaryColor,
+            valueTextColor: text.primaryColor,
+        },
+    },
 };