diff --git a/example/metro.config.js b/example/metro.config.js index 8c6ba0149..cee65a3b6 100644 --- a/example/metro.config.js +++ b/example/metro.config.js @@ -1,39 +1,39 @@ const path = require('path'); -const blacklist = require('metro-config/src/defaults/blacklist'); +const blacklist = require('metro-config/src/defaults/exclusionList'); const escape = require('escape-string-regexp'); const pak = require('../package.json'); const root = path.resolve(__dirname, '..'); const modules = Object.keys({ - ...pak.peerDependencies, + ...pak.peerDependencies, }); module.exports = { - projectRoot: __dirname, - watchFolders: [root], + projectRoot: __dirname, + watchFolders: [root], - // We need to make sure that only one version is loaded for peerDependencies - // So we blacklist them at the root, and alias them to the versions in example's node_modules - resolver: { - blacklistRE: blacklist( - modules.map( - (m) => - new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`) - ) - ), - extraNodeModules: modules.reduce((acc, name) => { - acc[name] = path.join(__dirname, 'node_modules', name); - return acc; - }, {}), - }, + // We need to make sure that only one version is loaded for peerDependencies + // So we blacklist them at the root, and alias them to the versions in example's node_modules + resolver: { + blacklistRE: blacklist( + modules.map( + (m) => + new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`) + ) + ), + extraNodeModules: modules.reduce((acc, name) => { + acc[name] = path.join(__dirname, 'node_modules', name); + return acc; + }, {}), + }, - transformer: { - getTransformOptions: async() => ({ - transform: { - experimentalImportSupport: false, - inlineRequires: false, - }, - }), - }, -}; \ No newline at end of file + transformer: { + getTransformOptions: async () => ({ + transform: { + experimentalImportSupport: false, + inlineRequires: false, + }, + }), + }, +}; diff --git a/example/package.json b/example/package.json index d78c16ad1..0a4209ef6 100644 --- a/example/package.json +++ b/example/package.json @@ -16,27 +16,28 @@ "update-test": "yarn test -u" }, "dependencies": { - "@expo/vector-icons": "^12.0.0", + "@expo/vector-icons": "^13.0.0", "@react-native-aria/overlays": "^0.2.9", - "@react-native-async-storage/async-storage": "^1.17.3", - "expo": "^44.0.0", - "expo-font": "~10.0.4", - "expo-linear-gradient": "~11.0.3", - "expo-splash-screen": "~0.14.1", - "expo-status-bar": "~1.2.0", + "@react-native-async-storage/async-storage": "~1.17.3", + "expo": "^46.0.0", + "expo-font": "~10.2.0", + "expo-linear-gradient": "~11.4.0", + "expo-splash-screen": "~0.16.2", + "expo-status-bar": "~1.4.0", "formik": "^2.2.6", - "react": "17.0.1", + "react": "18.0.0", "react-hook-form": "^6.14.0", - "react-native": "https://github.com/expo/react-native/archive/sdk-44.0.0.tar.gz", + "react-native": "0.69.6", "react-native-keyboard-aware-scroll-view": "^0.9.4", - "react-native-safe-area-context": "3.3.2", - "react-native-svg": "12.1.1", - "react-native-web": "0.17.1" + "react-native-safe-area-context": "4.3.1", + "react-native-svg": "12.3.0", + "react-native-web": "~0.18.7", + "webpack-dev-server": "3" }, "devDependencies": { - "@babel/core": "^7.12.9", + "@babel/core": "^7.18.6", "@babel/runtime": "^7.12.5", - "@expo/webpack-config": "~0.16.2", + "@expo/webpack-config": "^0.17.0", "@storybook/addon-actions": "^5.3", "@storybook/addon-knobs": "^5.3", "@storybook/addon-links": "^5.3", @@ -45,20 +46,20 @@ "@storybook/addon-storyshots": "6.3", "@storybook/react-native": "^5.3.23", "@storybook/react-native-server": "^5.3.23", - "@types/react": "~17.0.21", - "@types/react-dom": "~17.0.9", - "@types/react-native": "~0.64.12", + "@types/react": "~18.0.0", + "@types/react-dom": "~18.0.0", + "@types/react-native": "~0.69.1", "babel-loader": "^8.2.2", "babel-plugin-module-resolver": "^4.0.0", "core-js": "3.6.5", "jest": "^26.6.3", - "jest-expo": "^44.0.0", + "jest-expo": "^46.0.0", "metro-react-native-babel-preset": "^0.64.0", "patch-package": "^6.2.2", "postinstall-postinstall": "^2.1.0", - "react-dom": "17.0.1", + "react-dom": "18.0.0", "react-test-renderer": "17.0.1", - "typescript": "~4.3.5" + "typescript": "^4.6.3" }, "private": false } diff --git a/example/patches/@storybook+react-native+5.3.23.patch b/example/patches/@storybook+react-native+5.3.23.patch deleted file mode 100644 index 64082c6b6..000000000 --- a/example/patches/@storybook+react-native+5.3.23.patch +++ /dev/null @@ -1,13 +0,0 @@ -diff --git a/node_modules/@storybook/react-native/dist/preview/components/OnDeviceUI/index.js b/node_modules/@storybook/react-native/dist/preview/components/OnDeviceUI/index.js -index bb73f6a..8e07fe4 100644 ---- a/node_modules/@storybook/react-native/dist/preview/components/OnDeviceUI/index.js -+++ b/node_modules/@storybook/react-native/dist/preview/components/OnDeviceUI/index.js -@@ -99,7 +99,7 @@ var OnDeviceUI = /** @class */ (function (_super) { - animation_1.getPreviewPosition(this.animatedValue, previewWidth, previewHeight, slideBetweenAnimation), - ]; - var previewStyles = [flex, animation_1.getPreviewScale(this.animatedValue, slideBetweenAnimation)]; -- return (react_1.default.createElement(react_native_1.SafeAreaView, { style: flex }, -+ return (react_1.default.createElement(react_native_1.View, { style: flex }, - react_1.default.createElement(react_native_1.KeyboardAvoidingView, { enabled: !shouldDisableKeyboardAvoidingView || tabOpen !== constants_1.PREVIEW, behavior: IS_IOS ? 'padding' : null, keyboardVerticalOffset: keyboardAvoidingViewVerticalOffset, style: flex }, - react_1.default.createElement(absolute_positioned_keyboard_aware_view_1.default, { onLayout: this.onLayout, previewHeight: previewHeight, previewWidth: previewWidth }, - react_1.default.createElement(react_native_1.Animated.View, { style: previewWrapperStyles }, diff --git a/example/patches/react-native-modal-selector+2.0.3.patch b/example/patches/react-native-modal-selector+2.0.3.patch deleted file mode 100644 index 72673a0a9..000000000 --- a/example/patches/react-native-modal-selector+2.0.3.patch +++ /dev/null @@ -1,230 +0,0 @@ -diff --git a/node_modules/react-native-modal-selector/index.js b/node_modules/react-native-modal-selector/index.js -index 3982625..74ec667 100644 ---- a/node_modules/react-native-modal-selector/index.js -+++ b/node_modules/react-native-modal-selector/index.js -@@ -1,8 +1,6 @@ - 'use strict'; -- - import React from 'react'; - import PropTypes from 'prop-types'; -- - import { - View, - Modal, -@@ -12,13 +10,9 @@ import { - TouchableWithoutFeedback, - ViewPropTypes as RNViewPropTypes, - } from 'react-native'; -- - import styles from './style'; -- - const ViewPropTypes = RNViewPropTypes || View.propTypes; -- - let componentIndex = 0; -- - const propTypes = { - data: PropTypes.array, - onChange: PropTypes.func, -@@ -30,23 +24,23 @@ const propTypes = { - closeOnChange: PropTypes.bool, - initValue: PropTypes.string, - animationType: PropTypes.oneOf(['none', 'slide', 'fade']), -- style: ViewPropTypes.style, -- selectStyle: ViewPropTypes.style, -- selectTextStyle: Text.propTypes.style, -- optionStyle: ViewPropTypes.style, -- optionTextStyle: Text.propTypes.style, -- optionContainerStyle: ViewPropTypes.style, -- sectionStyle: ViewPropTypes.style, -- childrenContainerStyle: ViewPropTypes.style, -- touchableStyle: ViewPropTypes.style, -+ style: PropTypes.any, -+ selectStyle: PropTypes.any, -+ selectTextStyle: PropTypes.any, -+ optionStyle: PropTypes.any, -+ optionTextStyle: PropTypes.any, -+ optionContainerStyle: PropTypes.any, -+ sectionStyle: PropTypes.any, -+ childrenContainerStyle: PropTypes.any, -+ touchableStyle: PropTypes.any, - touchableActiveOpacity: PropTypes.number, -- sectionTextStyle: Text.propTypes.style, -- selectedItemTextStyle: Text.propTypes.style, -- cancelContainerStyle: ViewPropTypes.style, -- cancelStyle: ViewPropTypes.style, -- cancelTextStyle: Text.propTypes.style, -- overlayStyle: ViewPropTypes.style, -- initValueTextStyle: Text.propTypes.style, -+ sectionTextStyle: PropTypes.any, -+ selectedItemTextStyle: PropTypes.any, -+ cancelContainerStyle: PropTypes.any, -+ cancelStyle: PropTypes.any, -+ cancelTextStyle: PropTypes.any, -+ overlayStyle: PropTypes.any, -+ initValueTextStyle: PropTypes.any, - cancelText: PropTypes.string, - disabled: PropTypes.bool, - supportedOrientations: PropTypes.arrayOf( -@@ -78,7 +72,6 @@ const propTypes = { - enableLongPress: PropTypes.bool, - optionsTestIDPrefix: PropTypes.string, - }; -- - const defaultProps = { - data: [], - onChange: () => {}, -@@ -131,9 +124,7 @@ const defaultProps = { - enableLongPress: false, - optionsTestIDPrefix: 'default', - }; -- - export default class ModalSelector extends React.Component { -- - constructor(props) { - super(props); - let selectedItem = this.validateSelectedKey(props.selectedKey); -@@ -144,7 +135,6 @@ export default class ModalSelector extends React.Component { - changedItem: selectedItem.key, - }; - } -- - componentDidUpdate(prevProps, prevState) { - let newState = {}; - let doUpdate = false; -@@ -166,14 +156,12 @@ export default class ModalSelector extends React.Component { - this.setState(newState); - } - } -- - validateSelectedKey = (key) => { - let selectedItem = this.props.data.filter((item) => this.props.keyExtractor(item) === key); - let selectedLabel = selectedItem.length > 0 ? this.props.labelExtractor(selectedItem[0]) : this.props.initValue; - let selectedKey = selectedItem.length > 0 ? key : undefined; - return {label: selectedLabel, key: selectedKey} - } -- - onChange = (item) => { - this.props.onChange(item); - this.setState({ selected: this.props.labelExtractor(item), changedItem: item }, () => { -@@ -181,18 +169,15 @@ export default class ModalSelector extends React.Component { - this.close(item); - }); - } -- - getSelectedItem() { - return this.state.changedItem; - } -- - close = (item) => { - this.props.onModalClose(item); - this.setState({ - modalVisible: false, - }); - } -- - open = (params = {}) => { - if (!params.longPress && !this.props.enableShortPress) { - return; -@@ -206,31 +191,26 @@ export default class ModalSelector extends React.Component { - changedItem: undefined, - }); - } -- - renderSection = (section) => { - const optionComponent = this.props.componentExtractor(section); - let component = optionComponent || ( - {this.props.labelExtractor(section)} - ); -- - return ( - - {component} - - ); - } -- - renderOption = (option, isLastItem, isFirstItem) => { - const optionComponent = this.props.componentExtractor(option); - const optionLabel = this.props.labelExtractor(option); - const isSelectedItem = optionLabel === this.state.selected; -- - let component = optionComponent || ( - - {optionLabel} - - ); -- - return ( - - ); - } -- - renderOptionList = () => { - const { - data, -@@ -266,14 +245,12 @@ export default class ModalSelector extends React.Component { - cancelTextStyle, - cancelText, - } = this.props; -- - let options = data.map((item, index) => { - if (item.section) { - return this.renderSection(item); - } - return this.renderOption(item, index === data.length - 1, index === 0); - }); -- - let Overlay = View; - let overlayProps = { - style: {flex:1} -@@ -287,12 +264,10 @@ export default class ModalSelector extends React.Component { - onPress: this.close - }; - } -- - const optionsContainerStyle = {paddingHorizontal: 10}; - if (scrollViewPassThruProps && scrollViewPassThruProps.horizontal) { - optionsContainerStyle.flexDirection = 'row'; - } -- - return ( - - -@@ -318,9 +293,7 @@ export default class ModalSelector extends React.Component { - - ); - } -- - renderChildren = () => { -- - if(this.props.children) { - return this.props.children; - } -@@ -332,9 +305,7 @@ export default class ModalSelector extends React.Component { - - ); - } -- - render() { -- - const dp = ( - - ); -- - return ( - - {dp} -@@ -373,6 +343,5 @@ export default class ModalSelector extends React.Component { - ); - } - } -- - ModalSelector.propTypes = propTypes; - ModalSelector.defaultProps = defaultProps; diff --git a/example/storybook/stories/components/Wrapper.tsx b/example/storybook/stories/components/Wrapper.tsx index 0d0bbde48..6d89912da 100644 --- a/example/storybook/stories/components/Wrapper.tsx +++ b/example/storybook/stories/components/Wrapper.tsx @@ -123,7 +123,7 @@ function MyWrapper({ children }: any) { bg={bgColor} safeAreaY > - : } size="lg" /> - + */} {children} ); @@ -186,6 +186,7 @@ export default ({ children, theme }: any) => { frame: { x: 0, y: 0, width: 0, height: 0 }, insets: { top: 0, left: 0, right: 0, bottom: 0 }, }} + isSSR > {children} diff --git a/example/storybook/stories/components/primitives/Box/basic.tsx b/example/storybook/stories/components/primitives/Box/basic.tsx index 2ace47b28..15292f928 100644 --- a/example/storybook/stories/components/primitives/Box/basic.tsx +++ b/example/storybook/stories/components/primitives/Box/basic.tsx @@ -5,13 +5,14 @@ export const Example = () => { This is a Box diff --git a/example/tests/storybook.test.js.snap.android b/example/tests/storybook.test.js.snap.android index bd0a57447..c9054a52f 100644 --- a/example/tests/storybook.test.js.snap.android +++ b/example/tests/storybook.test.js.snap.android @@ -7570,6 +7570,7 @@ exports[`Storyshots Alert Variant 1`] = ` Object { "dataSet": Object {}, }, + Object {}, ] } dataSet={Object {}} @@ -18327,6 +18328,7 @@ exports[`Storyshots Button Loading 1`] = ` "dataSet": Object {}, "focusable": false, }, + Object {}, ], undefined, ] @@ -18399,6 +18401,7 @@ exports[`Storyshots Button Loading 1`] = ` "dataSet": Object {}, "focusable": false, }, + Object {}, ], undefined, ] @@ -18533,6 +18536,7 @@ exports[`Storyshots Button Loading 1`] = ` "dataSet": Object {}, "focusable": false, }, + Object {}, ], undefined, ] @@ -18605,6 +18609,7 @@ exports[`Storyshots Button Loading 1`] = ` "dataSet": Object {}, "focusable": false, }, + Object {}, ], undefined, ] @@ -18709,6 +18714,7 @@ exports[`Storyshots Button Loading 1`] = ` "dataSet": Object {}, "focusable": false, }, + Object {}, ], undefined, ] @@ -19306,6 +19312,7 @@ exports[`Storyshots Button Variants 1`] = ` Object { "dataSet": Object {}, }, + Object {}, ] } dataSet={Object {}} @@ -21946,6 +21953,7 @@ exports[`Storyshots ButtonGroup Variants 1`] = ` Object { "dataSet": Object {}, }, + Object {}, ] } dataSet={Object {}} @@ -23821,6 +23829,7 @@ exports[`Storyshots ButtonGroup isAttached 1`] = ` Object { "dataSet": Object {}, }, + Object {}, ] } dataSet={Object {}} @@ -25891,6 +25900,7 @@ exports[`Storyshots Checkbox Basic 1`] = ` } > `; + +exports[`Storyshots useSx Basic 1`] = ` + + + + + + + + + + + + + + New Feat useSx in NativeBase + + + + +`; diff --git a/example/tests/storybook.test.js.snap.ios b/example/tests/storybook.test.js.snap.ios index 4c3c59c3a..0587da341 100644 --- a/example/tests/storybook.test.js.snap.ios +++ b/example/tests/storybook.test.js.snap.ios @@ -4689,6 +4689,7 @@ exports[`Storyshots Alert Variant 1`] = ` Object { "dataSet": Object {}, }, + Object {}, ] } dataSet={Object {}} @@ -15335,6 +15336,7 @@ exports[`Storyshots Button Loading 1`] = ` "dataSet": Object {}, "focusable": false, }, + Object {}, ], undefined, ] @@ -15407,6 +15409,7 @@ exports[`Storyshots Button Loading 1`] = ` "dataSet": Object {}, "focusable": false, }, + Object {}, ], undefined, ] @@ -15541,6 +15544,7 @@ exports[`Storyshots Button Loading 1`] = ` "dataSet": Object {}, "focusable": false, }, + Object {}, ], undefined, ] @@ -15613,6 +15617,7 @@ exports[`Storyshots Button Loading 1`] = ` "dataSet": Object {}, "focusable": false, }, + Object {}, ], undefined, ] @@ -15717,6 +15722,7 @@ exports[`Storyshots Button Loading 1`] = ` "dataSet": Object {}, "focusable": false, }, + Object {}, ], undefined, ] @@ -16314,6 +16320,7 @@ exports[`Storyshots Button Variants 1`] = ` Object { "dataSet": Object {}, }, + Object {}, ] } dataSet={Object {}} @@ -18954,6 +18961,7 @@ exports[`Storyshots ButtonGroup Variants 1`] = ` Object { "dataSet": Object {}, }, + Object {}, ] } dataSet={Object {}} @@ -20829,6 +20837,7 @@ exports[`Storyshots ButtonGroup isAttached 1`] = ` Object { "dataSet": Object {}, }, + Object {}, ] } dataSet={Object {}} @@ -22899,6 +22908,7 @@ exports[`Storyshots Checkbox Basic 1`] = ` } > `; + +exports[`Storyshots useSx Basic 1`] = ` + + + + + + + + + + + + + + New Feat useSx in NativeBase + + + + +`; diff --git a/example/tests/storybook.test.js.snap.node b/example/tests/storybook.test.js.snap.node index ab1cc2167..c523f8b8a 100644 --- a/example/tests/storybook.test.js.snap.node +++ b/example/tests/storybook.test.js.snap.node @@ -33213,7 +33213,7 @@ exports[`Storyshots Examples Signin Screen 1`] = ` >