diff --git a/demo/src/screens/DemoScreen.js b/demo/src/screens/DemoScreen.js deleted file mode 100644 index 0b501336d2..0000000000 --- a/demo/src/screens/DemoScreen.js +++ /dev/null @@ -1,96 +0,0 @@ -import React, {Component} from 'react'; -import PropTypes from 'prop-types'; -import _ from 'lodash'; -import {ScrollView, Switch} from 'react-native'; -import {View, TextField, Text, Badge, Colors} from 'react-native-ui-lib';//eslint-disable-line - -export default class DemoScreen extends Component { - - constructor(props) { - super(props); - - this.state = { - backgroundColor: Colors.red50, - label: '12', - }; - - this.updatePropValue = this.updatePropValue.bind(this); - } - - componentDidMount() { - this.getComponentProps(); - } - - getComponentProps() { - const DemoComponent = this.getComponent(); - return DemoComponent.propTypes; - } - - shouldRenderProp(propId) { - let shouldRender = true; - shouldRender = shouldRender && propId !== 'testID'; - if (this.propsToRender) { - shouldRender = shouldRender && _.includes(this.propsToRender, propId); - } - return shouldRender; - } - - updatePropValue(value, propId, prop) { - let validValue = value; - - if (prop === PropTypes.number) { - validValue = isNaN(value) ? undefined : Number(value); - } - - this.setState({ - [propId]: validValue, - }); - } - - - renderProp(prop, propId) { - if (!this.shouldRenderProp(propId)) return; - - if (PropTypes.bool === prop) { - return ( - - - {propId} - - this.updatePropValue(value, propId, prop)} - /> - - ); - } - - // if (_.includes([PropTypes.string, PropTypes.number], prop)) { - return ( - - this.updatePropValue(text, propId, prop)} - autoCapitalize='none' - /> - - ); - // } - } - - renderComponentSettings() { - const props = this.getComponentProps(); - return ( - - - {_.map(props, (prop, propId) => { - return this.renderProp(prop, propId); - })} - - - ); - } -} diff --git a/demo/src/screens/MainScreen.js b/demo/src/screens/MainScreen.js index e739c1db10..3f49f23529 100644 --- a/demo/src/screens/MainScreen.js +++ b/demo/src/screens/MainScreen.js @@ -1,8 +1,6 @@ import _ from 'lodash'; import React, {Component} from 'react'; -import PropTypes from 'prop-types'; import {StyleSheet, FlatList, SectionList, ScrollView} from 'react-native'; -import {ViewPropTypes} from 'deprecated-react-native-prop-types'; import {Navigation} from 'react-native-navigation'; import { Assets, @@ -27,12 +25,6 @@ const chevronIcon = require('../assets/icons/chevronRight.png'); const FADER_SIZE = 50; class MainScreen extends Component { - static propTypes = { - containerStyle: ViewPropTypes.style, - renderItem: PropTypes.func, - pageStyle: ViewPropTypes.style - }; - settingsScreenName = 'unicorn.Settings'; static options() { diff --git a/demo/src/screens/componentScreens/ChipScreen.tsx b/demo/src/screens/componentScreens/ChipScreen.tsx index d417c99e5c..e191755c5f 100644 --- a/demo/src/screens/componentScreens/ChipScreen.tsx +++ b/demo/src/screens/componentScreens/ChipScreen.tsx @@ -1,4 +1,4 @@ -import React, {Component} from 'react'; +import React, {Component, type JSX} from 'react'; import {Alert} from 'react-native'; import {Chip, Colors, Spacings, Text, Typography, View, Image} from 'react-native-ui-lib'; diff --git a/demo/src/screens/componentScreens/ConversationListScreen.js b/demo/src/screens/componentScreens/ConversationListScreen.js index 02ccf9be33..1c25659a16 100644 --- a/demo/src/screens/componentScreens/ConversationListScreen.js +++ b/demo/src/screens/componentScreens/ConversationListScreen.js @@ -1,5 +1,4 @@ import _ from 'lodash'; -import PropTypes from 'prop-types'; import React, {Component, PureComponent} from 'react'; import {StyleSheet, Alert, FlatList} from 'react-native'; import {Colors, ListItem, Text, Avatar, AvatarHelper, Drawer, Button} from 'react-native-ui-lib'; //eslint-disable-line @@ -121,13 +120,6 @@ class ConversationListScreen extends Component { } class ContactItem extends PureComponent { - static propTypes = { - item: PropTypes.object, - index: PropTypes.number, - addRef: PropTypes.func, - onSwipeableWillOpen: PropTypes.func - }; - render() { const {item, index, addRef, onSwipeableWillOpen} = this.props; diff --git a/demo/src/screens/componentScreens/FeatureHighlightScreen.tsx b/demo/src/screens/componentScreens/FeatureHighlightScreen.tsx index e7cfbebec7..31642d7681 100644 --- a/demo/src/screens/componentScreens/FeatureHighlightScreen.tsx +++ b/demo/src/screens/componentScreens/FeatureHighlightScreen.tsx @@ -165,7 +165,11 @@ class FeatureHighlightScreen extends Component<{}, State> { - (this.viewRef = r)}> + { + this.viewRef = r; + }} + > Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type diff --git a/demo/src/screens/componentScreens/NumberInputScreen.tsx b/demo/src/screens/componentScreens/NumberInputScreen.tsx index f7976ac30b..d172b3340d 100644 --- a/demo/src/screens/componentScreens/NumberInputScreen.tsx +++ b/demo/src/screens/componentScreens/NumberInputScreen.tsx @@ -28,7 +28,7 @@ const DISCOUNT_PERCENTAGE = {min: 1, max: 80}; const DISCOUNT_PERCENTAGE_VALIDATION_MESSAGE = `Make sure your number is between ${DISCOUNT_PERCENTAGE.min} and ${DISCOUNT_PERCENTAGE.max}`; const NumberInputScreen = () => { - const currentData = useRef(); + const currentData = useRef(undefined); const [text, setText] = useState(''); const [showLabel, setShowLabel] = useState(true); const [exampleType, setExampleType] = useState('price'); diff --git a/demo/src/screens/componentScreens/OverlaysScreen.tsx b/demo/src/screens/componentScreens/OverlaysScreen.tsx index cb456083e1..d1947b4ab3 100644 --- a/demo/src/screens/componentScreens/OverlaysScreen.tsx +++ b/demo/src/screens/componentScreens/OverlaysScreen.tsx @@ -1,4 +1,4 @@ -import React, {Component} from 'react'; +import React, {Component, type JSX} from 'react'; import {StyleSheet, ScrollView} from 'react-native'; import {View, Text, Image, Card, Constants, Colors} from 'react-native-ui-lib'; // eslint-disable-line diff --git a/demo/src/screens/componentScreens/SearchInputScreen.tsx b/demo/src/screens/componentScreens/SearchInputScreen.tsx index cdb07fce19..1a8b4cddf6 100644 --- a/demo/src/screens/componentScreens/SearchInputScreen.tsx +++ b/demo/src/screens/componentScreens/SearchInputScreen.tsx @@ -6,7 +6,7 @@ const SearchInputScreen = () => { const [showCancelBtn, setShowCancelBtn] = useState(false); const [showLoader, setShowLoader] = useState(false); const [showCustomRightElement, setShowCustomRightElement] = useState(false); - const searchInput = useRef(); + const searchInput = useRef(undefined); const onChangeText = (text: string) => { console.log('UILIB text: ', text); diff --git a/demo/src/screens/componentScreens/TimelineScreen.tsx b/demo/src/screens/componentScreens/TimelineScreen.tsx index 97db0bb232..4b16198d04 100644 --- a/demo/src/screens/componentScreens/TimelineScreen.tsx +++ b/demo/src/screens/componentScreens/TimelineScreen.tsx @@ -15,7 +15,7 @@ const contents = [ const TimelineScreen = () => { const [anchorIndex, setAnchorIndex] = useState(0); const [expand, setExpand] = useState(false); - const anchor = useRef(); + const anchor = useRef(undefined); const onPress = useCallback(() => { setAnchorIndex(anchorIndex === 0 ? 1 : 0); diff --git a/demo/src/screens/foundationScreens/TypographyScreen.js b/demo/src/screens/foundationScreens/TypographyScreen.js index bda6316dbd..67adfa7c4a 100644 --- a/demo/src/screens/foundationScreens/TypographyScreen.js +++ b/demo/src/screens/foundationScreens/TypographyScreen.js @@ -1,5 +1,4 @@ import _ from 'lodash'; -import PropTypes from 'prop-types'; import React, {Component} from 'react'; import {ScrollView} from 'react-native'; import {TabController, Colors, Typography, View, Text} from 'react-native-ui-lib'; @@ -7,10 +6,6 @@ import {TabController, Colors, Typography, View, Text} from 'react-native-ui-lib const WEIGHTS = ['Thin', 'Light', 'Default', 'Regular', 'Medium', 'Bold', 'Heavy', 'Black']; export default class TypographyScreen extends Component { - static propTypes = { - color: PropTypes.string - }; - static defaultProps = { color: Colors.grey10 }; diff --git a/demo/src/screens/realExamples/ListActions/ActionsList.js b/demo/src/screens/realExamples/ListActions/ActionsList.js index 720ce21a36..0a9737cb62 100644 --- a/demo/src/screens/realExamples/ListActions/ActionsList.js +++ b/demo/src/screens/realExamples/ListActions/ActionsList.js @@ -1,4 +1,3 @@ -import PropTypes from 'prop-types'; import React, {Component} from 'react'; import {Animated, LayoutAnimation, PanResponder, I18nManager} from 'react-native'; import {Constants, Assets, Colors, View, TouchableOpacity, Button, Text} from 'react-native-ui-lib'; //eslint-disable-line @@ -17,11 +16,6 @@ const DIRECTIONS = { export default class ActionsList extends Component { static displayName = 'ActionsList'; - - static propTypes = { - item: PropTypes.object, - index: PropTypes.number - } constructor(props) { super(props); diff --git a/docs/getting-started/v8.md b/docs/getting-started/v8.md index 1a29754cd7..820d60455f 100644 --- a/docs/getting-started/v8.md +++ b/docs/getting-started/v8.md @@ -1,5 +1,5 @@ --- -sidebar_position: 5 +sidebar_position: 6 sidebar_label: Migrating v7 -> v8 title: "Migrating v7 -> v8" # path: "/getting-started/v8" @@ -7,6 +7,7 @@ title: "Migrating v7 -> v8" ## `react-native-ui-lib@8.x.x` ## General +Now supports react-native 0.77 `uilib-native` (our native library) has been moved from `dependencies` to `peerDependencies`. Make sure to `pod install` after updating. We do plan on making this optional in the future. diff --git a/docs/getting-started/v9.md b/docs/getting-started/v9.md new file mode 100644 index 0000000000..31dcbda645 --- /dev/null +++ b/docs/getting-started/v9.md @@ -0,0 +1,21 @@ +--- +sidebar_position: 7 +sidebar_label: Migrating v8 -> v9 +title: "Migrating v8 -> v9" +# path: "/getting-started/v9" +--- +## `react-native-ui-lib@9.x.x` + +## General +Now supports react-native 0.78 and React 19 + +## Components + +### MaskedInput +Only the newer version is now available (the `migrate` prop is removed) + +## Utils + +### modifiers +extractOwnProps - removed +extractComponentProps - removed diff --git a/docuilib/src/components/HomepageFeatures.tsx b/docuilib/src/components/HomepageFeatures.tsx index 3897078da1..eb09e991b0 100644 --- a/docuilib/src/components/HomepageFeatures.tsx +++ b/docuilib/src/components/HomepageFeatures.tsx @@ -4,7 +4,7 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ -import React from 'react'; +import React, {type JSX} from 'react'; import clsx from 'clsx'; import styles from './HomepageFeatures.module.css'; diff --git a/docuilib/src/pages/index.tsx b/docuilib/src/pages/index.tsx index 6ab0cc3e14..949c8c4b97 100644 --- a/docuilib/src/pages/index.tsx +++ b/docuilib/src/pages/index.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {type JSX} from 'react'; import Layout from '@theme/Layout'; import BrowserOnly from '@docusaurus/BrowserOnly'; // import clsx from 'clsx'; diff --git a/docuilib/src/theme/DocCard/index.tsx b/docuilib/src/theme/DocCard/index.tsx index 18ed8956fe..20d3c2cb57 100644 --- a/docuilib/src/theme/DocCard/index.tsx +++ b/docuilib/src/theme/DocCard/index.tsx @@ -1,4 +1,4 @@ -import React, {type ReactNode} from 'react'; +import React, {type ReactNode, type JSX} from 'react'; import clsx from 'clsx'; import Link from '@docusaurus/Link'; import {findFirstSidebarItemLink} from '@docusaurus/plugin-content-docs/client'; diff --git a/expoDemo/package.json b/expoDemo/package.json index 549f9f6169..d4ad8dd4c8 100644 --- a/expoDemo/package.json +++ b/expoDemo/package.json @@ -36,7 +36,7 @@ "@react-native-community/cli": "15.0.1", "@react-native-community/cli-platform-android": "15.0.1", "@react-native-community/cli-platform-ios": "15.0.1", - "@types/react": "~18.3.24", + "@types/react": "19.0.0", "typescript": "^4.9.5" }, "private": true diff --git a/lib/components/HighlighterOverlayView/index.tsx b/lib/components/HighlighterOverlayView/index.tsx index b656fd9be4..9df1414c35 100644 --- a/lib/components/HighlighterOverlayView/index.tsx +++ b/lib/components/HighlighterOverlayView/index.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {type JSX} from 'react'; import {processColor, StyleSheet, Modal, ViewStyle} from 'react-native'; // Import the Codegen specification for New Architecture import HighlighterViewNativeComponent, { diff --git a/lib/components/HighlighterOverlayView/index.web.tsx b/lib/components/HighlighterOverlayView/index.web.tsx index fbcdffb2a4..dcfb190076 100644 --- a/lib/components/HighlighterOverlayView/index.web.tsx +++ b/lib/components/HighlighterOverlayView/index.web.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {type JSX} from 'react'; import {Modal, ViewStyle} from 'react-native'; type HighlightFrameType = { diff --git a/lib/components/Keyboard/KeyboardAccessoryView/CustomKeyboardView/CustomKeyboardViewBase.tsx b/lib/components/Keyboard/KeyboardAccessoryView/CustomKeyboardView/CustomKeyboardViewBase.tsx index 0622ac48e3..cf25056a68 100644 --- a/lib/components/Keyboard/KeyboardAccessoryView/CustomKeyboardView/CustomKeyboardViewBase.tsx +++ b/lib/components/Keyboard/KeyboardAccessoryView/CustomKeyboardView/CustomKeyboardViewBase.tsx @@ -11,7 +11,7 @@ export type CustomKeyboardViewBaseProps = { component?: string; onItemSelected?: (component?: string, args?: any) => void; onRequestShowKeyboard?: (keyboardId: string) => void; - children?: React.ReactChild | React.ReactChild[]; + children?: React.ReactNode; }; export default class CustomKeyboardViewBase extends Component { diff --git a/lib/components/Keyboard/KeyboardAccessoryView/index.tsx b/lib/components/Keyboard/KeyboardAccessoryView/index.tsx index c65d796f2b..30f48b4404 100644 --- a/lib/components/Keyboard/KeyboardAccessoryView/index.tsx +++ b/lib/components/Keyboard/KeyboardAccessoryView/index.tsx @@ -22,7 +22,7 @@ export type KeyboardAccessoryViewProps = kbTrackingViewProps & { /** * Content to be rendered above the keyboard */ - renderContent?: () => React.ReactElement; + renderContent?: () => React.ReactElement; /** * iOS only. * The reference to the actual text input (or the keyboard may not reset when instructed to, etc.). @@ -53,7 +53,7 @@ export type KeyboardAccessoryViewProps = kbTrackingViewProps & { * Callback that will be called once the keyboard has been closed */ onKeyboardResigned?: () => void; - children?: React.ReactChild; + children?: React.ReactNode; }; /** @@ -204,7 +204,9 @@ class KeyboardAccessoryView extends Component { (this.trackingViewRef = r)} + ref={(r: any) => { + (this.trackingViewRef = r); + }} style={styles.trackingToolbarContainer} onLayout={this.onContainerComponentHeightChanged} > diff --git a/lib/components/Keyboard/KeyboardTrackingView/KeyboardTrackingView.ios.tsx b/lib/components/Keyboard/KeyboardTrackingView/KeyboardTrackingView.ios.tsx index e58c520505..f6fe839fc4 100644 --- a/lib/components/Keyboard/KeyboardTrackingView/KeyboardTrackingView.ios.tsx +++ b/lib/components/Keyboard/KeyboardTrackingView/KeyboardTrackingView.ios.tsx @@ -24,7 +24,14 @@ class KeyboardTrackingView extends PureComponent { ref?: any; render() { - return (this.ref = r)}/>; + return ( + { + this.ref = r; + }} + /> + ); } async getNativeProps() { diff --git a/lib/components/Keyboard/KeyboardTrackingView/index.tsx b/lib/components/Keyboard/KeyboardTrackingView/index.tsx index 8dcfa85715..5f6799c15d 100644 --- a/lib/components/Keyboard/KeyboardTrackingView/index.tsx +++ b/lib/components/Keyboard/KeyboardTrackingView/index.tsx @@ -79,7 +79,7 @@ export type KeyboardTrackingViewProps = ViewProps & { usesBottomTabs?: boolean; ref?: any; style?: StyleProp; - children?: React.ReactChild | React.ReactChild[]; + children?: React.ReactNode; }; const KeyboardTrackingView = forwardRef(({children, ...others}: KeyboardTrackingViewProps, ref: any) => { diff --git a/lib/package.json b/lib/package.json index c16d58f453..0c61b6a28d 100644 --- a/lib/package.json +++ b/lib/package.json @@ -10,8 +10,7 @@ "author": "Ethan Sharabi ", "license": "MIT", "dependencies": { - "lodash": "^4.17.21", - "prop-types": "^15.5.10" + "lodash": "^4.17.21" }, "devDependencies": { "shell-utils": "^1.0.10" diff --git a/package.json b/package.json index e8d7aeaac7..afa75f8de9 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,8 @@ "ios": "yarn workspace react-native-ui-lib ios", "android": "yarn workspace react-native-ui-lib android", "iPad": "yarn workspace react-native-ui-lib iPad", - "test": "yarn lint && yarn workspace react-native-ui-lib test", + "test": "yarn workspace react-native-ui-lib test", + "pretest": "yarn lint", "lint": "eslint packages -c .eslintrc.js --ext .tsx,.ts,.js", "lint:fix": "eslint packages -c .eslintrc.js --fix", "build:dev": "tsc --p tsconfig.dev.json", @@ -40,11 +41,10 @@ "@react-native/metro-config": "0.78.3", "@react-native/typescript-config": "0.78.3", "@shopify/flash-list": "1.7.6", - "@testing-library/react-native": "^11.5.1", - "@types/hoist-non-react-statics": "^3.3.1", + "@testing-library/react-native": "^13.3.3", + "@types/hoist-non-react-statics": "^3.3.7", "@types/jest": "^29.5.13", "@types/lodash": "^4.0.0", - "@types/prop-types": "^15.5.3", "@types/react": "19.0.0", "@types/react-test-renderer": "^19.0.0", "@types/tinycolor2": "^1.4.2", diff --git a/packages/react-native-ui-lib/jestSetup/GestureDetectorMock.tsx b/packages/react-native-ui-lib/jestSetup/GestureDetectorMock.tsx index 4581c45066..9184e42bfa 100644 --- a/packages/react-native-ui-lib/jestSetup/GestureDetectorMock.tsx +++ b/packages/react-native-ui-lib/jestSetup/GestureDetectorMock.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {type JSX} from 'react'; import {TouchableOpacity} from 'react-native'; type Props = { diff --git a/packages/react-native-ui-lib/package.json b/packages/react-native-ui-lib/package.json index f78eaa5d91..462e5cb44c 100644 --- a/packages/react-native-ui-lib/package.json +++ b/packages/react-native-ui-lib/package.json @@ -32,11 +32,9 @@ "color": "^3.1.0", "commons-validator-js": "^1.0.237", "date-fns": "^2.29.3", - "deprecated-react-native-prop-types": "^2.3.0", "hoist-non-react-statics": "^3.0.0", "lodash": "^4.17.21", "memoize-one": "^5.0.5", - "prop-types": "^15.5.10", "react-freeze": "^1.0.0", "react-native-redash": "^12.0.3", "semver": "^5.5.0", @@ -66,11 +64,10 @@ "@react-native/metro-config": "0.78.3", "@react-native/typescript-config": "0.78.3", "@shopify/flash-list": "1.7.6", - "@testing-library/react-native": "^11.5.1", - "@types/hoist-non-react-statics": "^3.3.1", + "@testing-library/react-native": "^13.3.3", + "@types/hoist-non-react-statics": "^3.3.7", "@types/jest": "^29.5.13", "@types/lodash": "^4.0.0", - "@types/prop-types": "^15.5.3", "@types/react": "19.0.0", "@types/react-test-renderer": "19.0.0", "@types/tinycolor2": "^1.4.2", diff --git a/packages/react-native-ui-lib/src/commons/__tests__/modifiers.spec.js b/packages/react-native-ui-lib/src/commons/__tests__/modifiers.spec.js index e527c514f2..310a601b27 100644 --- a/packages/react-native-ui-lib/src/commons/__tests__/modifiers.spec.js +++ b/packages/react-native-ui-lib/src/commons/__tests__/modifiers.spec.js @@ -1,14 +1,9 @@ -import PropTypes from 'prop-types'; import {ThemeManager, Colors, Typography, BorderRadiuses, Spacings} from '../../style'; import * as uut from '../modifiers'; describe('Modifiers', () => { const SampleComponent = () => {}; SampleComponent.displayName = 'SampleComponent'; - SampleComponent.propTypes = { - prop1: PropTypes.string, - prop2: PropTypes.number - }; describe('extractColorValue', () => { it('should return color value according to modifier', () => { @@ -287,24 +282,6 @@ describe('Modifiers', () => { }); }); - // describe('extractOwnProps', () => { - // it('should extract the component props from a props object', () => { - // const props = {color: 'red', topShadow: 1, bottomShadow: 2}; - // expect(MultipleShadow.extractOwnProps(props)).toEqual({ - // topShadow: 1, - // bottomShadow: 2, - // }); - // }); - - // it('should omit props that were required to ignore', () => { - // const props = {color: 'red', topShadow: 1, bottomShadow: 2}; - // expect(MultipleShadow.extractOwnProps(props, 'topShadow')).toEqual({ - // bottomShadow: 2, - // }); - // expect(MultipleShadow.extractOwnProps(props, ['topShadow', 'bottomShadow'])).toEqual({}); - // }); - // }); - describe('extractModifiersProps', () => { it('should return all modifiers props', () => { expect(uut.extractModifierProps({ @@ -348,24 +325,6 @@ describe('Modifiers', () => { }); }); - describe('extractOwnProps', () => { - it('should extract the component props from a props object', () => { - const props = {color: 'red', prop1: 'text', prop2: 2}; - expect(uut.extractOwnProps.bind(SampleComponent)(props)).toEqual({ - prop1: 'text', - prop2: 2 - }); - }); - - it('should omit props that were required to ignore', () => { - const props = {color: 'red', prop1: 'text', prop2: 2}; - expect(uut.extractOwnProps.bind(SampleComponent)(props, 'prop1')).toEqual({ - prop2: 2 - }); - expect(uut.extractOwnProps.bind(SampleComponent)(props, ['prop1', 'prop2'])).toEqual({}); - }); - }); - describe('getThemeProps', () => { beforeEach(() => { ThemeManager.setComponentTheme('SampleComponent', undefined); diff --git a/packages/react-native-ui-lib/src/commons/asBaseComponent.tsx b/packages/react-native-ui-lib/src/commons/asBaseComponent.tsx index 26c1704a89..bcdb696f42 100644 --- a/packages/react-native-ui-lib/src/commons/asBaseComponent.tsx +++ b/packages/react-native-ui-lib/src/commons/asBaseComponent.tsx @@ -55,7 +55,7 @@ function asBaseComponent(WrappedCompone }; static getDerivedStateFromError(error: any) { - UIComponent.defaultProps?.onError?.(error, WrappedComponent.defaultProps); + UIComponent.defaultProps?.onError?.(error); return {error: true}; } @@ -80,6 +80,7 @@ function asBaseComponent(WrappedCompone hoistStatics(BaseComponent, WrappedComponent); BaseComponent.displayName = WrappedComponent.displayName; BaseComponent.propTypes = WrappedComponent.propTypes; + // @ts-expect-error class component have defaultProps and functions do not and so should not be affected by this BaseComponent.defaultProps = WrappedComponent.defaultProps; const ThemeContext = ThemeManager.getThemeContext(); if (ThemeContext) { diff --git a/packages/react-native-ui-lib/src/commons/baseComponent.tsx b/packages/react-native-ui-lib/src/commons/baseComponent.tsx index 180129297c..73bdad4672 100644 --- a/packages/react-native-ui-lib/src/commons/baseComponent.tsx +++ b/packages/react-native-ui-lib/src/commons/baseComponent.tsx @@ -1,5 +1,4 @@ import React, {ComponentType} from 'react'; -// import PropTypes from 'prop-types'; import {StyleSheet} from 'react-native'; import _ from 'lodash'; import {Colors} from '../style'; @@ -8,17 +7,9 @@ import * as Modifiers from './modifiers'; export default function baseComponent(usePure: boolean): ComponentType { const parent = usePure ? React.PureComponent : React.Component; class BaseComponent extends parent { - // static propTypes = { - // ..._.mapValues(Typography, () => PropTypes.bool), - // ..._.mapValues(Colors, () => PropTypes.bool), - // useNativeDriver: PropTypes.bool, - // }; - styles: any; view: any; - static extractOwnProps = Modifiers.extractOwnProps; - constructor(props: any) { super(props); if (!this.styles) { diff --git a/packages/react-native-ui-lib/src/commons/forwardRef.tsx b/packages/react-native-ui-lib/src/commons/forwardRef.tsx index f300e1a712..526b7469c8 100644 --- a/packages/react-native-ui-lib/src/commons/forwardRef.tsx +++ b/packages/react-native-ui-lib/src/commons/forwardRef.tsx @@ -17,12 +17,7 @@ export default function forwardRef(WrappedC const ForwardedComponent = React.forwardRef(forwardRef); hoistStatics(ForwardedComponent, WrappedComponent); - //@ts-ignore ForwardedComponent.displayName = WrappedComponent.displayName; - //@ts-ignore - ForwardedComponent.propTypes = WrappedComponent.propTypes; - //@ts-ignore - ForwardedComponent.defaultProps = WrappedComponent.defaultProps; return ForwardedComponent as typeof ForwardedComponent & STATICS; } diff --git a/packages/react-native-ui-lib/src/commons/modifiers.ts b/packages/react-native-ui-lib/src/commons/modifiers.ts index 1815b21305..7117654191 100644 --- a/packages/react-native-ui-lib/src/commons/modifiers.ts +++ b/packages/react-native-ui-lib/src/commons/modifiers.ts @@ -338,27 +338,6 @@ export function extractModifierProps(props: Dictionary) { return modifierProps; } -/** - * TODO: - * @deprecated switch to Modifiers#extractComponentProps - */ -export function extractOwnProps(props: Dictionary, ignoreProps: string[]) { - //@ts-ignore - const ownPropTypes = this.propTypes; - const ownProps = _.flow((props: Dictionary) => _.pickBy(props, (_value, key) => _.includes(Object.keys(ownPropTypes), key)), - props => _.omit(props, ignoreProps))(props); - - return ownProps; -} - -export function extractComponentProps(component: any, props: Dictionary, ignoreProps: string[] = []) { - const componentPropTypes = component.propTypes; - const componentProps = _.flow((props: Dictionary) => _.pickBy(props, (_value, key) => _.includes(Object.keys(componentPropTypes), key)), - props => _.omit(props, ignoreProps))(props); - - return componentProps; -} - export function getComponentName(componentDisplayName: string) { //@ts-ignore return componentDisplayName || this.displayName || this.constructor.displayName || this.constructor.name; diff --git a/packages/react-native-ui-lib/src/commons/withScrollEnabler.tsx b/packages/react-native-ui-lib/src/commons/withScrollEnabler.tsx index 251f6adbb9..8cd4e34fbb 100644 --- a/packages/react-native-ui-lib/src/commons/withScrollEnabler.tsx +++ b/packages/react-native-ui-lib/src/commons/withScrollEnabler.tsx @@ -69,10 +69,6 @@ function withScrollEnabler(WrappedComponent: React.Componen hoistStatics(ScrollEnabler, WrappedComponent); ScrollEnabler.displayName = WrappedComponent.displayName; - //@ts-ignore - ScrollEnabler.propTypes = WrappedComponent.propTypes; - //@ts-ignore - ScrollEnabler.defaultProps = WrappedComponent.defaultProps; return forwardRef(ScrollEnabler) as any; } diff --git a/packages/react-native-ui-lib/src/commons/withScrollReached.tsx b/packages/react-native-ui-lib/src/commons/withScrollReached.tsx index 393e67d638..56fde6f8ef 100644 --- a/packages/react-native-ui-lib/src/commons/withScrollReached.tsx +++ b/packages/react-native-ui-lib/src/commons/withScrollReached.tsx @@ -92,10 +92,6 @@ function withScrollReached(WrappedComponent: React.Componen hoistStatics(ScrollReachedDetector, WrappedComponent); ScrollReachedDetector.displayName = WrappedComponent.displayName; - //@ts-ignore - ScrollReachedDetector.propTypes = WrappedComponent.propTypes; - //@ts-ignore - ScrollReachedDetector.defaultProps = WrappedComponent.defaultProps; return forwardRef(ScrollReachedDetector) as any; } diff --git a/packages/react-native-ui-lib/src/components/KeyboardAwareScrollView/KeyboardAwareBase.js b/packages/react-native-ui-lib/src/components/KeyboardAwareScrollView/KeyboardAwareBase.js index 0a456af5d1..5ecdb2e7d4 100644 --- a/packages/react-native-ui-lib/src/components/KeyboardAwareScrollView/KeyboardAwareBase.js +++ b/packages/react-native-ui-lib/src/components/KeyboardAwareScrollView/KeyboardAwareBase.js @@ -1,6 +1,5 @@ import _ from 'lodash'; import {Component} from 'react'; -import PropTypes from 'prop-types'; import ReactNative, {DeviceEventEmitter, Keyboard} from 'react-native'; export default class KeyboardAwareBase extends Component { @@ -22,12 +21,6 @@ export default class KeyboardAwareBase extends Component { this._addKeyboardEventListeners(); } - static propTypes = { - startScrolledToBottom: PropTypes.bool, - scrollToBottomOnKBShow: PropTypes.bool, - scrollToInputAdditionalOffset: PropTypes.number - }; - static defaultProps = { startScrolledToBottom: false, scrollToBottomOnKBShow: false, diff --git a/packages/react-native-ui-lib/src/components/KeyboardAwareScrollView/KeyboardAwareFlatList.js b/packages/react-native-ui-lib/src/components/KeyboardAwareScrollView/KeyboardAwareFlatList.js index 55b4bb6ed3..ca59e294c3 100644 --- a/packages/react-native-ui-lib/src/components/KeyboardAwareScrollView/KeyboardAwareFlatList.js +++ b/packages/react-native-ui-lib/src/components/KeyboardAwareScrollView/KeyboardAwareFlatList.js @@ -1,5 +1,4 @@ import React from 'react'; -import PropTypes from 'prop-types'; import {FlatList} from 'react-native'; import KeyboardAwareBase from './KeyboardAwareBase'; @@ -10,11 +9,6 @@ import KeyboardAwareBase from './KeyboardAwareBase'; export default class KeyboardAwareFlatList extends KeyboardAwareBase { static displayName = 'KeyboardAwareFlatList'; - static PropTypes = { - getTextInputRefs: PropTypes.func, - onScroll: PropTypes.func - }; - static defaultProps = { ...KeyboardAwareBase.defaultProps, getTextInputRefs: () => { diff --git a/packages/react-native-ui-lib/src/components/KeyboardAwareScrollView/KeyboardAwareScrollView.js b/packages/react-native-ui-lib/src/components/KeyboardAwareScrollView/KeyboardAwareScrollView.js index 5bfa0518b6..9dd8dbba1b 100644 --- a/packages/react-native-ui-lib/src/components/KeyboardAwareScrollView/KeyboardAwareScrollView.js +++ b/packages/react-native-ui-lib/src/components/KeyboardAwareScrollView/KeyboardAwareScrollView.js @@ -1,5 +1,4 @@ import React from 'react'; -import PropTypes from 'prop-types'; import {ScrollView} from 'react-native'; import KeyboardAwareBase from './KeyboardAwareBase'; @@ -10,11 +9,6 @@ import KeyboardAwareBase from './KeyboardAwareBase'; export default class KeyboardAwareScrollView extends KeyboardAwareBase { static displayName = 'KeyboardAwareScrollView'; - static PropTypes = { - getTextInputRefs: PropTypes.func, - onScroll: PropTypes.func - }; - static defaultProps = { ...KeyboardAwareBase.defaultProps, getTextInputRefs: () => { diff --git a/packages/react-native-ui-lib/src/components/WheelPicker/index.tsx b/packages/react-native-ui-lib/src/components/WheelPicker/index.tsx index 6f59f607c2..17828cf33f 100644 --- a/packages/react-native-ui-lib/src/components/WheelPicker/index.tsx +++ b/packages/react-native-ui-lib/src/components/WheelPicker/index.tsx @@ -1,6 +1,6 @@ // TODO: Support style customization import {isFunction, isUndefined} from 'lodash'; -import React, {useCallback, useRef, useMemo, useEffect, useState} from 'react'; +import React, {useCallback, useRef, useMemo, useEffect, useState, type JSX} from 'react'; import { TextStyle, ViewStyle, @@ -126,7 +126,7 @@ const WheelPicker = (props: WheelPickerProps) faderProps, flatListProps } = themeProps; - const scrollView = useRef(); + const scrollView = useRef(undefined); const offset = useSharedValue(0); const scrollHandler = useAnimatedScrollHandler(e => { offset.value = e.contentOffset.y; diff --git a/packages/react-native-ui-lib/src/components/WheelPicker/usePresenter.ts b/packages/react-native-ui-lib/src/components/WheelPicker/usePresenter.ts index ad520b0947..65449ee558 100644 --- a/packages/react-native-ui-lib/src/components/WheelPicker/usePresenter.ts +++ b/packages/react-native-ui-lib/src/components/WheelPicker/usePresenter.ts @@ -1,5 +1,5 @@ import _ from 'lodash'; -import React from 'react'; +import React, {type JSX} from 'react'; import {LogService} from '../../services'; import useMiddleIndex from './helpers/useListMiddleIndex'; import {WheelPickerItemValue} from './types'; diff --git a/packages/react-native-ui-lib/src/components/actionSheet/index.tsx b/packages/react-native-ui-lib/src/components/actionSheet/index.tsx index 283d0779e0..98d5d3bdf3 100644 --- a/packages/react-native-ui-lib/src/components/actionSheet/index.tsx +++ b/packages/react-native-ui-lib/src/components/actionSheet/index.tsx @@ -1,5 +1,5 @@ import _ from 'lodash'; -import React, {Component} from 'react'; +import React, {Component, type JSX} from 'react'; import {ActionSheetIOS, StyleSheet, StyleProp, ViewStyle, ImageProps, ImageSourcePropType} from 'react-native'; import {Colors} from '../../style'; import {asBaseComponent, Constants} from '../../commons/new'; diff --git a/packages/react-native-ui-lib/src/components/animatedImage/index.tsx b/packages/react-native-ui-lib/src/components/animatedImage/index.tsx index 6e9a4f7bf1..e452739903 100644 --- a/packages/react-native-ui-lib/src/components/animatedImage/index.tsx +++ b/packages/react-native-ui-lib/src/components/animatedImage/index.tsx @@ -21,7 +21,7 @@ export interface AnimatedImageProps extends ImageProps { /** * A component to render while the image is loading */ - loader?: React.ReactElement; + loader?: React.ReactElement; } /** diff --git a/packages/react-native-ui-lib/src/components/animatedScanner/index.js b/packages/react-native-ui-lib/src/components/animatedScanner/index.js index 3fc6291f7c..bf480c76ae 100644 --- a/packages/react-native-ui-lib/src/components/animatedScanner/index.js +++ b/packages/react-native-ui-lib/src/components/animatedScanner/index.js @@ -1,8 +1,6 @@ import _ from 'lodash'; -import PropTypes from 'prop-types'; import React from 'react'; import {StyleSheet, Animated} from 'react-native'; -import {ViewPropTypes} from 'deprecated-react-native-prop-types'; import {Colors} from '../../style'; import {BaseComponent} from '../../commons'; import View from '../../components/view'; @@ -16,41 +14,6 @@ import View from '../../components/view'; */ export default class AnimatedScanner extends BaseComponent { static displayName = 'AnimatedScanner'; - static propTypes = { - /** - * animated value between 0 and 100 - */ - // progress: PropTypes.object, - progress: PropTypes.number, - /** - * Duration of current break (can be change between breaks) - */ - duration: PropTypes.number, - /** - * scanner opacity - */ - opacity: PropTypes.number, - /** - * scanner background color - */ - backgroundColor: PropTypes.string, - /** - * breakpoint callback - ({progress, isDone}) => {} - */ - onBreakpoint: PropTypes.func, - /** - * should hide the scanner line - */ - hideScannerLine: PropTypes.bool, - /** - * the container style - */ - containerStyle: ViewPropTypes.style, - /** - * Used as a testing identifier - */ - testID: PropTypes.string - }; static defaultProps = { progress: 0, diff --git a/packages/react-native-ui-lib/src/components/avatar/index.tsx b/packages/react-native-ui-lib/src/components/avatar/index.tsx index e29924f03c..f222ff43a2 100644 --- a/packages/react-native-ui-lib/src/components/avatar/index.tsx +++ b/packages/react-native-ui-lib/src/components/avatar/index.tsx @@ -1,5 +1,5 @@ import _ from 'lodash'; -import React, {PropsWithChildren, useMemo, forwardRef} from 'react'; +import React, {PropsWithChildren, useMemo, forwardRef, type JSX} from 'react'; import { StyleSheet, StyleProp, diff --git a/packages/react-native-ui-lib/src/components/badge/index.tsx b/packages/react-native-ui-lib/src/components/badge/index.tsx index 74ece732ed..2ac691592f 100644 --- a/packages/react-native-ui-lib/src/components/badge/index.tsx +++ b/packages/react-native-ui-lib/src/components/badge/index.tsx @@ -1,5 +1,5 @@ import _ from 'lodash'; -import React, {PureComponent} from 'react'; +import React, {PureComponent, type JSX} from 'react'; import { ImageSourcePropType, ImageStyle, diff --git a/packages/react-native-ui-lib/src/components/baseInput/index.tsx b/packages/react-native-ui-lib/src/components/baseInput/index.tsx index 166a1e0bbe..7c99815bb2 100644 --- a/packages/react-native-ui-lib/src/components/baseInput/index.tsx +++ b/packages/react-native-ui-lib/src/components/baseInput/index.tsx @@ -1,8 +1,6 @@ // @ts-nocheck import _ from 'lodash'; -import PropTypes from 'prop-types'; import 'react'; -import {ViewPropTypes, TextInputPropTypes} from 'deprecated-react-native-prop-types'; import {Colors, Typography} from '../../style'; import {BaseComponent} from '../../commons'; import Validators from './Validators'; @@ -18,51 +16,6 @@ const VALIDATORS = { export default class BaseInput extends BaseComponent { static displayName = 'BaseInput'; - static propTypes = { - ...TextInputPropTypes, - // ...BaseComponent.propTypes, - /** - * text color - */ - color: PropTypes.string, - /** - * text input container style - */ - containerStyle: ViewPropTypes.style, - /** - * validator type or custom validator function - */ - validate: PropTypes.oneOfType([ - PropTypes.oneOf(_.values(VALIDATORS)), // enum - PropTypes.func, // custom - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(_.values(VALIDATORS)), PropTypes.func])) // array of validators - ]), - /** - * Whether to mark required field with an asterisk - */ - markRequired: PropTypes.bool, - /** - * the message to be displayed when the validation fails - */ - errorMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]), - /** - * whether to run the validation on mount - */ - validateOnStart: PropTypes.bool, - /** - * whether to run the validation on text changed - */ - validateOnChange: PropTypes.bool, - /** - * whether to run the validation on blur - */ - validateOnBlur: PropTypes.bool, - /** - * callback for validity change - */ - onChangeValidity: PropTypes.func - }; - static defaultProps = { validateOnBlur: true }; diff --git a/packages/react-native-ui-lib/src/components/button/__tests__/index.spec.js b/packages/react-native-ui-lib/src/components/button/__tests__/index.spec.js index 722978bfa2..61b6820f48 100644 --- a/packages/react-native-ui-lib/src/components/button/__tests__/index.spec.js +++ b/packages/react-native-ui-lib/src/components/button/__tests__/index.spec.js @@ -1,5 +1,5 @@ import React from 'react'; -import renderer from 'react-test-renderer'; +import {render} from '@testing-library/react-native'; import Button from '../index'; import View from '../../view'; import {Colors, ThemeManager} from '../../../style'; @@ -12,54 +12,54 @@ describe('Button', () => { }); it('should render default button', () => { - const tree = renderer.create(