@storybook/addon-ondevice-controls 6.5.3 → 6.5.4

package/dist/ControlsPanel.js

@@ -1,60 +1,108 @@
-import styled from '@emotion/native';
-import React, { useCallback, useState } from 'react';
-import { useArgs } from './hooks';
-import NoControlsWarning from './NoControlsWarning';
-import PropForm from './PropForm';
-const ButtonTouchable = styled.TouchableOpacity(({ theme }) => ({
-    backgroundColor: theme.button.secondary.backgroundColor,
-    borderRadius: theme.button.secondary.borderRadius,
-    borderWidth: theme.button.secondary.borderWidth,
-    borderColor: theme.button.secondary.borderColor,
-    paddingVertical: theme.button.paddingVertical,
-    paddingHorizontal: theme.button.paddingHorizontal,
-    justifyContent: 'center',
-    alignItems: 'center',
-}));
-const ButtonText = styled.Text(({ theme }) => ({
-    color: theme.button.secondary.textColor,
-    fontSize: theme.button.fontSize,
-    fontWeight: theme.button.fontWeight,
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
 }));
-const ControlsPanel = ({ api }) => {
-    var _a;
-    const store = api.store();
-    const storyId = (_a = store.getSelection()) === null || _a === void 0 ? void 0 : _a.storyId;
-    const [isPristine, setIsPristine] = useState(true);
-    const [argsFromHook, updateArgs, resetArgs] = useArgs(storyId, store);
-    const { argsObject, argTypes, parameters } = React.useMemo(() => {
-        const { argTypes: storyArgTypes, parameters: storyParameters } = store.fromId(storyId);
-        const storyArgsObject = Object.entries(storyArgTypes).reduce((prev, [key, argType]) => {
-            var _a;
-            const isControl = Boolean(argType === null || argType === void 0 ? void 0 : argType.control);
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var native_1 = __importDefault(require("@emotion/native"));
+var react_1 = __importStar(require("react"));
+var hooks_1 = require("./hooks");
+var NoControlsWarning_1 = __importDefault(require("./NoControlsWarning"));
+var PropForm_1 = __importDefault(require("./PropForm"));
+var ButtonTouchable = native_1.default.TouchableOpacity(function (_a) {
+    var theme = _a.theme;
+    return ({
+        backgroundColor: theme.button.secondary.backgroundColor,
+        borderRadius: theme.button.secondary.borderRadius,
+        borderWidth: theme.button.secondary.borderWidth,
+        borderColor: theme.button.secondary.borderColor,
+        paddingVertical: theme.button.paddingVertical,
+        paddingHorizontal: theme.button.paddingHorizontal,
+        justifyContent: 'center',
+        alignItems: 'center',
+    });
+});
+var ButtonText = native_1.default.Text(function (_a) {
+    var theme = _a.theme;
+    return ({
+        color: theme.button.secondary.textColor,
+        fontSize: theme.button.fontSize,
+        fontWeight: theme.button.fontWeight,
+    });
+});
+var ControlsPanel = function (_a) {
+    var _b;
+    var api = _a.api;
+    var store = api.store();
+    var storyId = (_b = store.getSelection()) === null || _b === void 0 ? void 0 : _b.storyId;
+    var _c = (0, react_1.useState)(true), isPristine = _c[0], setIsPristine = _c[1];
+    var _d = (0, hooks_1.useArgs)(storyId, store), argsFromHook = _d[0], updateArgs = _d[1], resetArgs = _d[2];
+    var _e = react_1.default.useMemo(function () {
+        var _a = store.fromId(storyId), storyArgTypes = _a.argTypes, storyParameters = _a.parameters;
+        var storyArgsObject = Object.entries(storyArgTypes).reduce(function (prev, _a) {
+            var _b;
+            var _c;
+            var key = _a[0], argType = _a[1];
+            var isControl = Boolean(argType === null || argType === void 0 ? void 0 : argType.control);
             return isControl
-                ? Object.assign(Object.assign({}, prev), { [key]: Object.assign(Object.assign({}, argType), { name: key, type: (_a = argType === null || argType === void 0 ? void 0 : argType.control) === null || _a === void 0 ? void 0 : _a.type, value: argsFromHook[key] }) }) : prev;
+                ? __assign(__assign({}, prev), (_b = {}, _b[key] = __assign(__assign({}, argType), { name: key, type: (_c = argType === null || argType === void 0 ? void 0 : argType.control) === null || _c === void 0 ? void 0 : _c.type, value: argsFromHook[key] }), _b)) : prev;
         }, {});
         return {
             argTypes: storyArgTypes,
             parameters: storyParameters,
             argsObject: storyArgsObject,
         };
-    }, [store, storyId, argsFromHook]);
-    const hasControls = Object.keys(argTypes).length > 0;
-    const isArgsStory = parameters.__isArgsStory;
-    const showWarning = !(hasControls && isArgsStory);
-    const updateArgsOnFieldChange = useCallback((args) => {
+    }, [store, storyId, argsFromHook]), argsObject = _e.argsObject, argTypes = _e.argTypes, parameters = _e.parameters;
+    var hasControls = Object.keys(argTypes).length > 0;
+    var isArgsStory = parameters.__isArgsStory;
+    var showWarning = !(hasControls && isArgsStory);
+    var updateArgsOnFieldChange = (0, react_1.useCallback)(function (args) {
         updateArgs(args);
         setIsPristine(false);
     }, [updateArgs]);
-    const handleReset = useCallback(() => {
+    var handleReset = (0, react_1.useCallback)(function () {
         resetArgs();
         setIsPristine(true);
     }, [resetArgs]);
     if (showWarning) {
-        return React.createElement(NoControlsWarning, null);
+        return react_1.default.createElement(NoControlsWarning_1.default, null);
     }
-    return (React.createElement(React.Fragment, null,
-        React.createElement(PropForm, { args: argsObject, isPristine: isPristine, onFieldChange: updateArgsOnFieldChange }),
-        React.createElement(ButtonTouchable, { onPress: handleReset },
-            React.createElement(ButtonText, null, "RESET"))));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(PropForm_1.default, { args: argsObject, isPristine: isPristine, onFieldChange: updateArgsOnFieldChange }),
+        react_1.default.createElement(ButtonTouchable, { onPress: handleReset },
+            react_1.default.createElement(ButtonText, null, "RESET"))));
 };
-export default ControlsPanel;
+exports.default = ControlsPanel;

package/dist/NoControlsWarning.js

@@ -1,21 +1,34 @@
-import styled from '@emotion/native';
-import React from 'react';
-import { Linking } from 'react-native';
-const Paragraph = styled.Text(({ theme }) => ({
-    marginBottom: theme.tokens.spacing3,
-    color: theme.text.primaryColor,
-}));
-const LinkText = styled.Text(({ theme }) => ({
-    color: theme.text.linkColor,
-}));
-const NoControlsWarning = () => {
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Paragraph, null, "This story is not configured to handle controls."),
-        React.createElement(Paragraph, null,
-            React.createElement(LinkText, { onPress: () => Linking.openURL('https://storybook.js.org/docs/react/essentials/controls') }, "Learn how to add controls"),
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var native_1 = __importDefault(require("@emotion/native"));
+var react_1 = __importDefault(require("react"));
+var react_native_1 = require("react-native");
+var Paragraph = native_1.default.Text(function (_a) {
+    var theme = _a.theme;
+    return ({
+        marginBottom: theme.tokens.spacing3,
+        color: theme.text.primaryColor,
+    });
+});
+var LinkText = native_1.default.Text(function (_a) {
+    var theme = _a.theme;
+    return ({
+        color: theme.text.linkColor,
+    });
+});
+var NoControlsWarning = function () {
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Paragraph, null, "This story is not configured to handle controls."),
+        react_1.default.createElement(Paragraph, null,
+            react_1.default.createElement(LinkText, { onPress: function () { return react_native_1.Linking.openURL('https://storybook.js.org/docs/react/essentials/controls'); } }, "Learn how to add controls"),
             ' ',
             "and see",
             ' ',
-            React.createElement(LinkText, { onPress: () => Linking.openURL('https://github.com/storybookjs/react-native/tree/next-6.0/examples/expo-example/components/ControlExamples') }, "examples in the Storybook React Native repository."))));
+            react_1.default.createElement(LinkText, { onPress: function () {
+                    return react_native_1.Linking.openURL('https://github.com/storybookjs/react-native/tree/next-6.0/examples/expo-example/components/ControlExamples');
+                } }, "examples in the Storybook React Native repository."))));
 };
-export default NoControlsWarning;
+exports.default = NoControlsWarning;

package/dist/Panel.js

@@ -1,8 +1,16 @@
-import React from 'react';
-export const AddonPanel = ({ active, children }) => {
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AddonPanel = void 0;
+var react_1 = __importDefault(require("react"));
+var AddonPanel = function (_a) {
+    var active = _a.active, children = _a.children;
     if (!active) {
         return null;
     }
-    return React.createElement(React.Fragment, null, children);
+    return react_1.default.createElement(react_1.default.Fragment, null, children);
 };
-AddonPanel.displayName = 'AddonPanel';
+exports.AddonPanel = AddonPanel;
+exports.AddonPanel.displayName = 'AddonPanel';

package/dist/PropField.js

@@ -1,26 +1,44 @@
-import React from 'react';
-import styled from '@emotion/native';
-import TypeMap from './types';
-const InvalidTypeText = styled.Text(({ theme }) => ({
-    color: theme.inputs.errorTextColor,
-}));
-const InvalidType = ({ arg }) => (React.createElement(InvalidTypeText, null,
-    "Invalid type: ",
-    arg.type));
-const Label = styled.Text(({ theme }) => ({
-    paddingBottom: theme.tokens.spacing1,
-    fontSize: theme.inputs.labelFontSize,
-    color: theme.inputs.labelTextColor,
-    fontWeight: '500',
-}));
-const Container = styled.View(({ theme }) => ({
-    paddingBottom: theme.tokens.spacing4,
-}));
-const InputContainer = styled.View();
-const PropField = ({ onChange, arg, isPristine }) => {
-    const InputType = TypeMap[arg.type];
-    return (React.createElement(Container, null,
-        !arg.hideLabel ? React.createElement(Label, null, `${arg.label || arg.name}`) : null,
-        React.createElement(InputContainer, null, InputType ? (React.createElement(InputType, { arg: arg, isPristine: isPristine, onChange: onChange })) : (React.createElement(InvalidType, { arg: arg })))));
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-export default PropField;
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var native_1 = __importDefault(require("@emotion/native"));
+var types_1 = __importDefault(require("./types"));
+var InvalidTypeText = native_1.default.Text(function (_a) {
+    var theme = _a.theme;
+    return ({
+        color: theme.inputs.errorTextColor,
+    });
+});
+var InvalidType = function (_a) {
+    var arg = _a.arg;
+    return (react_1.default.createElement(InvalidTypeText, null,
+        "Invalid type: ",
+        arg.type));
+};
+var Label = native_1.default.Text(function (_a) {
+    var theme = _a.theme;
+    return ({
+        paddingBottom: theme.tokens.spacing1,
+        fontSize: theme.inputs.labelFontSize,
+        color: theme.inputs.labelTextColor,
+        fontWeight: '500',
+    });
+});
+var Container = native_1.default.View(function (_a) {
+    var theme = _a.theme;
+    return ({
+        paddingBottom: theme.tokens.spacing4,
+    });
+});
+var InputContainer = native_1.default.View();
+var PropField = function (_a) {
+    var onChange = _a.onChange, arg = _a.arg, isPristine = _a.isPristine;
+    var InputType = types_1.default[arg.type];
+    return (react_1.default.createElement(Container, null,
+        !arg.hideLabel ? react_1.default.createElement(Label, null, "".concat(arg.label || arg.name)) : null,
+        react_1.default.createElement(InputContainer, null, InputType ? (react_1.default.createElement(InputType, { arg: arg, isPristine: isPristine, onChange: onChange })) : (react_1.default.createElement(InvalidType, { arg: arg })))));
+};
+exports.default = PropField;

package/dist/PropForm.js

@@ -1,16 +1,23 @@
-import styled from '@emotion/native';
-import React from 'react';
-import PropField from './PropField';
-const Container = styled.View(() => ({ paddingTop: 0 }));
-const PropForm = ({ args, isPristine, onFieldChange }) => {
-    const makeChangeHandler = (name) => {
-        return (value) => {
-            onFieldChange({ [name]: value });
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var native_1 = __importDefault(require("@emotion/native"));
+var react_1 = __importDefault(require("react"));
+var PropField_1 = __importDefault(require("./PropField"));
+var Container = native_1.default.View(function () { return ({ paddingTop: 0 }); });
+var PropForm = function (_a) {
+    var args = _a.args, isPristine = _a.isPristine, onFieldChange = _a.onFieldChange;
+    var makeChangeHandler = function (name) {
+        return function (value) {
+            var _a;
+            onFieldChange((_a = {}, _a[name] = value, _a));
         };
     };
-    return (React.createElement(Container, null, Object.values(args).map((arg) => {
-        const changeHandler = makeChangeHandler(arg.name);
-        return (React.createElement(PropField, { key: arg.name, arg: arg, isPristine: isPristine, onChange: changeHandler }));
+    return (react_1.default.createElement(Container, null, Object.values(args).map(function (arg) {
+        var changeHandler = makeChangeHandler(arg.name);
+        return (react_1.default.createElement(PropField_1.default, { key: arg.name, arg: arg, isPristine: isPristine, onChange: changeHandler }));
     })));
 };
-export default PropForm;
+exports.default = PropForm;

package/dist/components/RadioSelect.js

@@ -1,44 +1,65 @@
-import styled from '@emotion/native';
-import React from 'react';
-const RadioContainer = styled.View(({ isInline }) => ({
-    flexDirection: isInline ? 'row' : 'column',
-    alignItems: isInline ? 'center' : 'flex-start',
-    flexWrap: 'wrap',
-}));
-const RadioTouchable = styled.TouchableOpacity(({ theme }) => ({
-    alignItems: 'center',
-    flexDirection: 'row',
-    paddingVertical: theme.inputs.radio.itemSpacing,
-}));
-const RadioCircle = styled.View(({ theme }) => ({
-    width: theme.inputs.radio.height,
-    height: theme.inputs.radio.height,
-    borderWidth: theme.inputs.radio.borderWidth,
-    borderColor: theme.inputs.radio.borderColor,
-    borderRadius: theme.tokens.borderRadius.round,
-    backgroundColor: theme.inputs.radio.backgroundColor,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: theme.inputs.radio.paddingVertical,
-    paddingHorizontal: theme.inputs.radio.paddingHorizontal,
-}));
-const RadioInnerCircle = styled.View(({ theme, selected }) => ({
-    height: '100%',
-    width: '100%',
-    borderRadius: theme.tokens.borderRadius.round,
-    backgroundColor: selected ? theme.inputs.radio.activeBackgroundColor : 'transparent',
-}));
-const RadioLabel = styled.Text(({ theme }) => ({
-    fontSize: theme.inputs.radio.fontSize,
-    paddingStart: theme.inputs.radio.labelSpacing,
-    color: theme.inputs.labelTextColor,
-}));
-const RadioSelect = ({ data = [], value = '', onChange, isInline }) => {
-    return (React.createElement(RadioContainer, { isInline: isInline }, data.map((item) => (React.createElement(RadioTouchable, { key: item.label, activeOpacity: 0.7, onPress: () => {
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var native_1 = __importDefault(require("@emotion/native"));
+var react_1 = __importDefault(require("react"));
+var RadioContainer = native_1.default.View(function (_a) {
+    var isInline = _a.isInline;
+    return ({
+        flexDirection: isInline ? 'row' : 'column',
+        alignItems: isInline ? 'center' : 'flex-start',
+        flexWrap: 'wrap',
+    });
+});
+var RadioTouchable = native_1.default.TouchableOpacity(function (_a) {
+    var theme = _a.theme;
+    return ({
+        alignItems: 'center',
+        flexDirection: 'row',
+        paddingVertical: theme.inputs.radio.itemSpacing,
+    });
+});
+var RadioCircle = native_1.default.View(function (_a) {
+    var theme = _a.theme;
+    return ({
+        width: theme.inputs.radio.height,
+        height: theme.inputs.radio.height,
+        borderWidth: theme.inputs.radio.borderWidth,
+        borderColor: theme.inputs.radio.borderColor,
+        borderRadius: theme.tokens.borderRadius.round,
+        backgroundColor: theme.inputs.radio.backgroundColor,
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: theme.inputs.radio.paddingVertical,
+        paddingHorizontal: theme.inputs.radio.paddingHorizontal,
+    });
+});
+var RadioInnerCircle = native_1.default.View(function (_a) {
+    var theme = _a.theme, selected = _a.selected;
+    return ({
+        height: '100%',
+        width: '100%',
+        borderRadius: theme.tokens.borderRadius.round,
+        backgroundColor: selected ? theme.inputs.radio.activeBackgroundColor : 'transparent',
+    });
+});
+var RadioLabel = native_1.default.Text(function (_a) {
+    var theme = _a.theme;
+    return ({
+        fontSize: theme.inputs.radio.fontSize,
+        paddingStart: theme.inputs.radio.labelSpacing,
+        color: theme.inputs.labelTextColor,
+    });
+});
+var RadioSelect = function (_a) {
+    var _b = _a.data, data = _b === void 0 ? [] : _b, _c = _a.value, value = _c === void 0 ? '' : _c, onChange = _a.onChange, isInline = _a.isInline;
+    return (react_1.default.createElement(RadioContainer, { isInline: isInline }, data.map(function (item) { return (react_1.default.createElement(RadioTouchable, { key: item.label, activeOpacity: 0.7, onPress: function () {
             onChange(item);
         } },
-        React.createElement(RadioCircle, null,
-            React.createElement(RadioInnerCircle, { selected: value === item.key })),
-        React.createElement(RadioLabel, null, item.label))))));
+        react_1.default.createElement(RadioCircle, null,
+            react_1.default.createElement(RadioInnerCircle, { selected: value === item.key })),
+        react_1.default.createElement(RadioLabel, null, item.label))); })));
 };
-export default RadioSelect;
+exports.default = RadioSelect;