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

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.1",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -87,5 +87,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "17d380c54711d3b2f2a27853aa4bc1f731b6d6ff"
+  "gitHead": "577b2d9b1f4c7f9813f5c5a18b7a837250e6b4be"
 }

package/readme.md

@@ -2,13 +2,13 @@
 
 With Storybook for React Native you can design and develop individual React Native components without running your app.
 
-This readme is for the 6.5 release candidate, [find the 5.3 readme here](https://github.com/storybookjs/react-native/tree/v5.3.25#readme)
+This readme is for the 6.5 version [find the 5.3 readme here](https://github.com/storybookjs/react-native/tree/v5.3.25#readme)
 
 For more information about storybook visit: [storybook.js.org](https://storybook.js.org)
 
 > NOTE: `@storybook/react-native` requires atleast 6.5.14, please set other storybook packages (like @storybook/addons) to `^6.5.14` or newer
 
-Version v6.5 should be coming out soon and the release candidate is ready for you to test. If you want to help out or are just curious then check out the [project board](https://github.com/orgs/storybookjs/projects/12) to see the open issues related to v6+.
+If you want to help out or are just curious then check out the [project board](https://github.com/orgs/storybookjs/projects/12).
 
 ![picture of storybook](https://user-images.githubusercontent.com/3481514/145904252-92e3dc1e-591f-410f-88a1-b4250f4ba6f2.png)