@storybook/react-native 6.5.4 → 6.5.5-alpha.1

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

@@ -0,0 +1,237 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var getNestedStories_1 = require("./getNestedStories");
+var storyIndex = {
+    stories: {
+        'chat-message--message-first': {
+            id: 'chat-message--message-first',
+            importPath: './components/NestingExample/ChatMessage.stories.tsx',
+            name: 'Message First',
+            title: 'Chat/Message',
+        },
+        'chat-message--message-second': {
+            id: 'chat-message--message-second',
+            importPath: './components/NestingExample/ChatMessage.stories.tsx',
+            name: 'Message Second',
+            title: 'Chat/Message',
+        },
+        'chat-message-bubble--first': {
+            id: 'chat-message-bubble--first',
+            importPath: './components/NestingExample/ChatMessageBubble.stories.tsx',
+            name: 'First',
+            title: 'Chat/Message/bubble',
+        },
+        'chat-message-bubble--second': {
+            id: 'chat-message-bubble--second',
+            importPath: './components/NestingExample/ChatMessageBubble.stories.tsx',
+            name: 'Second Story',
+            title: 'Chat/Message/bubble',
+        },
+        'chat-message-reactions--message-one': {
+            id: 'chat-message-reactions--message-one',
+            importPath: './components/NestingExample/ChatMessageReactions.stories.tsx',
+            name: 'Message One',
+            title: 'Chat/Message/Reactions',
+        },
+        'chat-message-reactions--message-two': {
+            id: 'chat-message-reactions--message-two',
+            importPath: './components/NestingExample/ChatMessageReactions.stories.tsx',
+            name: 'Message Two',
+            title: 'Chat/Message/Reactions',
+        },
+        'chat-messageinput--basic': {
+            id: 'chat-messageinput--basic',
+            importPath: './components/NestingExample/ChatMessageMessageInput.stories.tsx',
+            name: 'Basic',
+            title: 'Chat/MessageInput',
+        },
+        'storylistview--basic': {
+            id: 'storylistview--basic',
+            importPath: './components/NestingExample/StoryList.stories.tsx',
+            name: 'Basic',
+            title: 'StoryListView',
+        },
+        'text-control--basic': {
+            id: 'text-control--basic',
+            importPath: './components/ControlExamples/Text/Text.stories.tsx',
+            name: 'Basic',
+            title: 'Text control',
+        },
+    },
+    v: 3,
+};
+var output = [
+    {
+        name: 'Chat',
+        title: 'Chat/Message',
+        stories: [],
+        children: [
+            {
+                name: 'Message',
+                title: 'Chat/Message',
+                stories: [
+                    {
+                        name: 'Message First',
+                        title: 'Chat/Message',
+                        id: 'chat-message--message-first',
+                        importPath: './components/NestingExample/ChatMessage.stories.tsx',
+                    },
+                    {
+                        name: 'Message Second',
+                        title: 'Chat/Message',
+                        id: 'chat-message--message-second',
+                        importPath: './components/NestingExample/ChatMessage.stories.tsx',
+                    },
+                ],
+                children: [
+                    {
+                        name: 'bubble',
+                        children: [],
+                        title: 'Chat/Message/bubble',
+                        stories: [
+                            {
+                                name: 'First',
+                                title: 'Chat/Message/bubble',
+                                id: 'chat-message-bubble--first',
+                                importPath: './components/NestingExample/ChatMessageBubble.stories.tsx',
+                            },
+                            {
+                                name: 'Second Story',
+                                title: 'Chat/Message/bubble',
+                                id: 'chat-message-bubble--second',
+                                importPath: './components/NestingExample/ChatMessageBubble.stories.tsx',
+                            },
+                        ],
+                    },
+                    {
+                        name: 'Reactions',
+                        title: 'Chat/Message/Reactions',
+                        children: [],
+                        stories: [
+                            {
+                                name: 'Message One',
+                                title: 'Chat/Message/Reactions',
+                                id: 'chat-message-reactions--message-one',
+                                importPath: './components/NestingExample/ChatMessageReactions.stories.tsx',
+                            },
+                            {
+                                name: 'Message Two',
+                                title: 'Chat/Message/Reactions',
+                                id: 'chat-message-reactions--message-two',
+                                importPath: './components/NestingExample/ChatMessageReactions.stories.tsx',
+                            },
+                        ],
+                    },
+                ],
+            },
+            {
+                name: 'MessageInput',
+                title: 'Chat/MessageInput',
+                children: [],
+                stories: [
+                    {
+                        name: 'Basic',
+                        title: 'Chat/MessageInput',
+                        id: 'chat-messageinput--basic',
+                        importPath: './components/NestingExample/ChatMessageMessageInput.stories.tsx',
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        name: 'StoryListView',
+        title: 'StoryListView',
+        stories: [
+            {
+                name: 'Basic',
+                title: 'StoryListView',
+                id: 'storylistview--basic',
+                importPath: './components/NestingExample/StoryList.stories.tsx',
+            },
+        ],
+        children: [],
+    },
+    {
+        title: 'Text control',
+        name: 'Text control',
+        stories: [
+            {
+                name: 'Basic',
+                title: 'Text control',
+                id: 'text-control--basic',
+                importPath: './components/ControlExamples/Text/Text.stories.tsx',
+            },
+        ],
+        children: [],
+    },
+];
+test('story index to grouped list', function () {
+    expect((0, getNestedStories_1.getNestedStories)(storyIndex)).toEqual(output);
+});
+test('filter nested stories', function () {
+    expect((0, getNestedStories_1.filterNestedStories)(output, 'bubble')).toEqual([
+        {
+            title: 'Chat/Message',
+            name: 'Chat',
+            stories: [],
+            children: [
+                {
+                    title: 'Chat/Message',
+                    name: 'Message',
+                    stories: [],
+                    children: [
+                        {
+                            title: 'Chat/Message/bubble',
+                            name: 'bubble',
+                            children: [],
+                            stories: [
+                                {
+                                    name: 'First',
+                                    title: 'Chat/Message/bubble',
+                                    id: 'chat-message-bubble--first',
+                                    importPath: './components/NestingExample/ChatMessageBubble.stories.tsx',
+                                },
+                                {
+                                    name: 'Second Story',
+                                    title: 'Chat/Message/bubble',
+                                    id: 'chat-message-bubble--second',
+                                    importPath: './components/NestingExample/ChatMessageBubble.stories.tsx',
+                                },
+                            ],
+                        },
+                    ],
+                },
+            ],
+        },
+    ]);
+    expect((0, getNestedStories_1.filterNestedStories)(output, 'one')).toEqual([
+        {
+            name: 'Chat',
+            title: 'Chat/Message',
+            stories: [],
+            children: [
+                {
+                    title: 'Chat/Message',
+                    name: 'Message',
+                    stories: [],
+                    children: [
+                        {
+                            name: 'Reactions',
+                            title: 'Chat/Message/Reactions',
+                            children: [],
+                            stories: [
+                                {
+                                    name: 'Message One',
+                                    title: 'Chat/Message/Reactions',
+                                    id: 'chat-message-reactions--message-one',
+                                    importPath: './components/NestingExample/ChatMessageReactions.stories.tsx',
+                                },
+                            ],
+                        },
+                    ],
+                },
+            ],
+        },
+    ]);
+});

package/dist/preview/components/StoryView/StoryView.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-declare const _default: React.MemoExoticComponent<() => JSX.Element>;
+declare const _default: React.MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
 export default _default;

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

@@ -14,6 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = __importDefault(require("react"));
 var react_native_1 = require("react-native");
 var hooks_1 = require("../../../hooks");
@@ -39,9 +40,8 @@ var StoryView = function () {
     var backgroundColor = (0, hooks_1.useTheme)().backgroundColor;
     if (context && context.unboundStoryFn) {
         var StoryComponent = context.unboundStoryFn;
-        return (react_1.default.createElement(layout_1.Box, { flex: true, key: id, testID: id, onStartShouldSetResponder: dismissOnStartResponder, backgroundColor: backgroundColor }, StoryComponent && react_1.default.createElement(StoryComponent, __assign({}, context))));
+        return ((0, jsx_runtime_1.jsx)(layout_1.Box, { flex: true, testID: id, onStartShouldSetResponder: dismissOnStartResponder, backgroundColor: backgroundColor, children: StoryComponent && (0, jsx_runtime_1.jsx)(StoryComponent, __assign({}, context)) }, id));
     }
-    return (react_1.default.createElement(layout_1.Box, { flex: true, padding: 16, alignItems: "center", justifyContent: "center" },
-        react_1.default.createElement(react_native_1.Text, null, "Please open the sidebar and select a story to preview.")));
+    return ((0, jsx_runtime_1.jsx)(layout_1.Box, { flex: true, padding: 16, alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { children: "Please open the sidebar and select a story to preview." }) }));
 };
 exports.default = react_1.default.memo(StoryView);

package/dist/preview/start.js

@@ -15,12 +15,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.start = exports.render = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
 var addons_1 = require("@storybook/addons");
 var channels_1 = __importDefault(require("@storybook/channels"));
 var client_api_1 = require("@storybook/client-api");
 var core_events_1 = __importDefault(require("@storybook/core-events"));
 var preview_web_1 = require("@storybook/preview-web");
-var react_1 = __importDefault(require("react"));
 var executeLoadable_1 = require("./executeLoadable");
 var View_1 = require("./View");
 var render = function (args, context) {
@@ -28,7 +28,7 @@ var render = function (args, context) {
     if (!Component) {
         throw new Error("Unable to render story ".concat(id, " as the component annotation is missing from the default export"));
     }
-    return react_1.default.createElement(Component, __assign({}, args));
+    return (0, jsx_runtime_1.jsx)(Component, __assign({}, args));
 };
 exports.render = render;
 function start() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "6.5.4",
+  "version": "6.5.5-alpha.1",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -38,6 +38,9 @@
     "test": "jest"
   },
   "jest": {
+    "modulePathIgnorePatterns": [
+      "dist/"
+    ],
     "moduleFileExtensions": [
       "ts",
       "tsx",
@@ -49,8 +52,8 @@
     "preset": "react-native"
   },
   "dependencies": {
-    "@emotion/core": "^10.0.20",
-    "@emotion/native": "^10.0.14",
+    "@emotion/native": "^11.11.0",
+    "@emotion/react": "^11.11.1",
     "@storybook/addons": "^6.5.14",
     "@storybook/channel-websocket": "^6.5.14",
     "@storybook/channels": "^6.5.14",
@@ -60,10 +63,10 @@
     "@storybook/core-events": "^6.5.14",
     "@storybook/csf": "0.0.2--canary.4566f4d.1",
     "@storybook/preview-web": "^6.5.14",
+    "@storybook/react-native-theming": "^6.5.5-alpha.1",
     "chokidar": "^3.5.1",
     "commander": "^8.2.0",
     "deepmerge": "^4.3.0",
-    "emotion-theming": "^10.0.19",
     "glob": "^7.1.7",
     "jotai": "^2.0.2",
     "prettier": "^2.4.1",
@@ -71,7 +74,8 @@
     "util": "^0.12.4"
   },
   "devDependencies": {
-    "@types/react": "~18.0.27",
+    "@types/jest": "^29.4.3",
+    "@types/react": "~18.2.14",
     "babel-jest": "^29.4.3",
     "jest": "^29.4.3",
     "react-test-renderer": "18.2.0"
@@ -88,5 +92,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e0c6fd72976b228d0f97aceb69967cd707fad8ff"
+  "gitHead": "3a03b09c728691717dee406e91439227d3483a7b"
 }

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

@@ -1,189 +0,0 @@
-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: {
-        navy: string;
-        offBlack: string;
-        black: string;
-        white: string;
-        grey200: string;
-        grey700: string;
-        grey800: 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;
-    borderColor: 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 declare const darkTheme: Theme;
-export {};