@storybook/react-native 6.5.0-rc.9 → 6.5.0

package/dist/index.d.ts

@@ -18,3 +18,4 @@ export declare const raw: C['raw'];
 export declare const storiesOf: (kind: string, _module: NodeModule) => StoryApi<ReactNode>;
 export declare const getStorybookUI: (params?: Partial<import("./preview/View").Params>) => () => JSX.Element;
 export * from './types/types-6.0';
+export { theme, darkTheme } from './preview/components/Shared/theme';

package/dist/index.js

@@ -20,3 +20,4 @@ export * from './types/types-6.0';
 global.__STORYBOOK_STORY_STORE__ = {
     initializationPromise: (_a = clientApi.storyStore) === null || _a === void 0 ? void 0 : _a.initializationPromise,
 };
+export { theme, darkTheme } from './preview/components/Shared/theme';

package/dist/preview/View.js

@@ -15,11 +15,12 @@ import { ThemeProvider } from 'emotion-theming';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { useSetStoryContext, syncExternalUI } from '../hooks';
 import OnDeviceUI from './components/OnDeviceUI';
-import { theme } from './components/Shared/theme';
+import { darkTheme, theme } from './components/Shared/theme';
 import StoryView from './components/StoryView';
 import createChannel from '@storybook/channel-websocket';
 import getHost from './rn-host-detect';
 import events from '@storybook/core-events';
+import { Appearance } from 'react-native';
 import deepmerge from 'deepmerge';
 const STORAGE_KEY = 'lastOpenedStory';
 export class View {
@@ -89,7 +90,7 @@ export class View {
             });
             // eslint-disable-next-line consistent-this
             const self = this;
-            const appliedTheme = deepmerge(theme, (_a = params.theme) !== null && _a !== void 0 ? _a : {});
+            const appliedTheme = deepmerge(Appearance.getColorScheme() === 'dark' ? darkTheme : theme, (_a = params.theme) !== null && _a !== void 0 ? _a : {});
             // Sync the Storybook parameters (external) with app UI state (internal), to initialise them.
             syncExternalUI({
                 isUIVisible: params.isUIHidden !== undefined ? !params.isUIHidden : undefined,

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

@@ -20,10 +20,13 @@ interface ThemeTokens {
         normal: number;
     };
     color: {
+        navy: string;
+        offBlack: string;
         black: string;
         white: string;
         grey200: string;
         grey700: string;
+        grey800: string;
         red500: string;
         blue100: string;
         blue200: string;
@@ -182,4 +185,5 @@ export interface Theme {
     };
 }
 export declare const theme: Theme;
+export declare const darkTheme: Theme;
 export {};

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

@@ -11,10 +11,13 @@ const tokens = {
         normal: 16,
     },
     color: {
-        black: '#001a23',
+        navy: '#001a23',
+        black: '#000',
+        offBlack: '#222',
         white: '#ffffff',
         grey200: '#dee2e3',
         grey700: '#859499',
+        grey800: '#575757',
         red500: '#ff4400',
         blue100: '#f6f9fc',
         blue200: '#e0eaf5',
@@ -42,10 +45,15 @@ const tokens = {
     },
 };
 const text = {
-    primaryColor: tokens.color.black,
+    primaryColor: tokens.color.navy,
     secondaryColor: tokens.color.grey700,
     linkColor: '#0000ff',
 };
+const textOnDark = {
+    primaryColor: tokens.color.white,
+    secondaryColor: tokens.color.grey200,
+    linkColor: tokens.color.blue600,
+};
 export const theme = {
     tokens,
     text,
@@ -177,3 +185,134 @@ export const theme = {
         },
     },
 };
+export const darkTheme = {
+    tokens,
+    text: textOnDark,
+    backgroundColor: tokens.color.offBlack,
+    preview: {
+        containerBackgroundColor: tokens.color.black,
+        backgroundColor: tokens.color.offBlack,
+    },
+    navigation: {
+        backgroundColor: tokens.color.offBlack,
+        borderColor: tokens.color.grey800,
+        borderWidth: tokens.borderWidthNormal,
+        visibilityBorderRadius: tokens.borderRadius.small,
+        visibilityInnerBorderColor: tokens.color.navy,
+        visibilityOuterBorderColor: tokens.color.navy,
+    },
+    panel: {
+        backgroundColor: tokens.color.offBlack,
+        borderWidth: tokens.borderWidthNormal,
+        borderColor: tokens.color.grey800,
+        paddingVertical: 0,
+        paddingHorizontal: tokens.spacing2,
+    },
+    storyList: {
+        fontSize: tokens.fontSize.normal,
+        headerPaddingHorizontal: tokens.spacing2,
+        headerPaddingVertical: tokens.spacing2,
+        headerTextColor: textOnDark.primaryColor,
+        headerFontWeight: '500',
+        storyPaddingHorizontal: tokens.spacing2,
+        storyPaddingVertical: tokens.spacing1 * 1.5,
+        storyIndent: tokens.spacing6,
+        storyTextColor: textOnDark.primaryColor,
+        storyFontWeight: '400',
+        storySelectedBackgroundColor: tokens.color.navy,
+        storySelectedTextColor: tokens.color.white,
+        storySelectedFontWeight: '700',
+        sectionSpacing: tokens.spacing2,
+        sectionActiveBackgroundColor: tokens.color.grey800,
+        sectionBorderRadius: tokens.borderRadius.medium,
+        search: {
+            fontSize: tokens.fontSize.normal,
+            textColor: textOnDark.primaryColor,
+            placeholderTextColor: textOnDark.secondaryColor,
+            borderRadius: tokens.borderRadius.round,
+            borderColor: tokens.color.grey800,
+            borderWidth: tokens.borderWidthNormal,
+            backgroundColor: tokens.color.grey800,
+            paddingVertical: tokens.spacing2,
+            paddingHorizontal: tokens.spacing3,
+        },
+    },
+    button: {
+        fontSize: tokens.fontSize.smaller,
+        fontWeight: '600',
+        paddingVertical: tokens.spacing2,
+        paddingHorizontal: tokens.spacing5,
+        primary: {
+            textColor: textOnDark.primaryColor,
+            backgroundColor: tokens.color.black,
+            borderColor: tokens.color.blue300,
+            borderWidth: tokens.borderWidthNormal,
+            borderRadius: tokens.borderRadius.medium,
+        },
+        secondary: {
+            textColor: textOnDark.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.navy,
+        activeTextColor: textOnDark.primaryColor,
+        inactiveBorderColor: 'transparent',
+        inactiveBackgroundColor: 'transparent',
+        inactiveTextColor: textOnDark.secondaryColor,
+    },
+    inputs: {
+        errorTextColor: tokens.color.red500,
+        labelFontSize: tokens.fontSize.smaller,
+        labelTextColor: textOnDark.primaryColor,
+        text: {
+            fontSize: tokens.fontSize.smaller,
+            textColor: textOnDark.primaryColor,
+            borderWidth: tokens.borderWidthNormal,
+            borderColor: tokens.color.blue400,
+            backgroundColor: tokens.color.black,
+            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.black,
+            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.navy,
+            outerBorderRadius: tokens.borderRadius.medium,
+            innerBorderRadius: tokens.borderRadius.small,
+            paddingVertical: tokens.spacing1,
+            paddingHorizontal: tokens.spacing1,
+            nameTextWeight: '600',
+        },
+        slider: {
+            fontSize: tokens.fontSize.smaller,
+            labelTextColor: textOnDark.secondaryColor,
+            valueTextColor: textOnDark.primaryColor,
+        },
+    },
+};

package/dist/preview/components/StoryListView/StoryListView.js

@@ -36,7 +36,7 @@ const SearchContainer = styled.View(({ theme }) => ({
 const SearchBar = (props) => {
     const theme = useTheme();
     return (React.createElement(SearchContainer, null,
-        React.createElement(Icon, { name: "search", opacity: 0.5 }),
+        React.createElement(Icon, { name: "search", opacity: 0.5, color: 'white' }),
         React.createElement(SearchInput, Object.assign({}, props, { autoCapitalize: "none", autoComplete: "off", autoCorrect: false, spellCheck: false, clearButtonMode: "while-editing", disableFullscreenUI: true, placeholderTextColor: theme.storyList.search.placeholderTextColor, returnKeyType: "search" }))));
 };
 const HeaderContainer = styled.TouchableOpacity({
@@ -53,7 +53,7 @@ const HeaderContainer = styled.TouchableOpacity({
 const SectionHeader = React.memo(({ title, onPress }) => {
     const selected = useIsStorySectionSelected(title);
     return (React.createElement(HeaderContainer, { key: title, selected: selected, onPress: onPress, activeOpacity: 0.8 },
-        React.createElement(Icon, { name: "grid", width: 10, height: 10, marginRight: 6 }),
+        React.createElement(Icon, { name: "grid", width: 12, height: 12, marginRight: 6 }),
         React.createElement(SectionHeaderText, { selected: selected }, title)));
 });
 const ItemTouchable = styled.TouchableOpacity({
@@ -74,7 +74,7 @@ const ListItem = React.memo(({ storyId, kind, title, isLastItem, onPress }) => {
     const selected = useIsStorySelected(storyId);
     const sectionSelected = useIsStorySectionSelected(kind);
     return (React.createElement(ItemTouchable, { key: title, onPress: onPress, activeOpacity: 0.8, testID: `Storybook.ListItem.${kind}.${title}`, accessibilityLabel: `Storybook.ListItem.${title}`, selected: selected, sectionSelected: sectionSelected, isLastItem: isLastItem },
-        React.createElement(Icon, { name: selected ? 'story-white' : 'story-blue', marginRight: 6 }),
+        React.createElement(Icon, { width: 14, height: 14, name: selected ? 'story-white' : 'story-blue', marginRight: 6 }),
         React.createElement(StoryNameText, { selected: selected }, title)));
 }, (prevProps, nextProps) => prevProps.storyId === nextProps.storyId);
 const getStories = (storyIndex) => {

package/dist/preview/components/StoryView/StoryView.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Text, Keyboard } from 'react-native';
-import { useStoryContext } from '../../../hooks';
+import { useStoryContext, useTheme } from '../../../hooks';
 import { Box } from '../Shared/layout';
 /**
  * This is a handler for `onStartShouldSetResponder`, which dismisses the
@@ -20,9 +20,10 @@ function dismissOnStartResponder() {
 const StoryView = () => {
     const context = useStoryContext();
     const id = context === null || context === void 0 ? void 0 : context.id;
+    const { backgroundColor } = useTheme();
     if (context && context.unboundStoryFn) {
         const { unboundStoryFn: StoryComponent } = context;
-        return (React.createElement(Box, { flex: true, key: id, testID: id, onStartShouldSetResponder: dismissOnStartResponder }, StoryComponent && React.createElement(StoryComponent, Object.assign({}, context))));
+        return (React.createElement(Box, { flex: true, key: id, testID: id, onStartShouldSetResponder: dismissOnStartResponder, backgroundColor: backgroundColor }, StoryComponent && React.createElement(StoryComponent, Object.assign({}, context))));
     }
     return (React.createElement(Box, { flex: true, padding: 16, alignItems: "center", justifyContent: "center" },
         React.createElement(Text, null, "Please open the sidebar and select a story to preview.")));

package/dist/preview/start.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="webpack-env" />
 /// <reference types="node" />
+import { ClientApi } from '@storybook/client-api';
 import { Loadable } from '@storybook/core-client';
+import type { ArgsStoryFn } from '@storybook/csf';
 import { PreviewWeb } from '@storybook/preview-web';
-import { ClientApi } from '@storybook/client-api';
 import type { ReactNativeFramework } from '../types/types-6.0';
 import { View } from './View';
-import type { ArgsStoryFn } from '@storybook/csf';
 export declare const render: ArgsStoryFn<ReactNativeFramework>;
 export declare function start(): {
     view: View;

package/dist/preview/start.js

@@ -1,11 +1,11 @@
-import React from 'react';
-import Channel from '@storybook/channels';
 import { addons } from '@storybook/addons';
+import Channel from '@storybook/channels';
+import { ClientApi, setGlobalRender } from '@storybook/client-api';
 import Events from '@storybook/core-events';
 import { PreviewWeb } from '@storybook/preview-web';
-import { ClientApi, setGlobalRender } from '@storybook/client-api';
-import { View } from './View';
+import React from 'react';
 import { executeLoadableForChanges } from './executeLoadable';
+import { View } from './View';
 export const render = (args, context) => {
     const { id, component: Component } = context;
     if (!Component) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "6.5.0-rc.9",
+  "version": "6.5.0",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -87,5 +87,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "17d380c54711d3b2f2a27853aa4bc1f731b6d6ff"
+  "gitHead": "35d882320519d7130219eb060f3aee86caeacd3a"
 }