migrate to yarn v2; expose testID props

Author: testshallpass

.eslintignore

@@ -7,4 +7,5 @@ coverage/
 yarn.lock
 LICENSE
 .gitignore
-.npmignore
+.npmignore
+yarnrc.yml

.github/workflows/ci.yml

@@ -1,23 +1,28 @@
 name: CI
 
 on:
-
   push:
-    branches: [ $default-branch ]
+    branches: [ main ]
   pull_request:
-    branches: [ $default-branch ]
-  
-  workflow_dispatch:
+    branches: [ main ]
 
 jobs:
   test:
     runs-on: macos-latest
+
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v4
+      
+      - name: Use Node.js
+        uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: '20.x'
+
+      - name: Enable corepack
+        run: corepack enable
+
       - name: Install dependencies
         run: yarn
-      - name: yarn test
-        run: yarn test
+
+      - name: Run tests
+        run: yarn run test

.gitignore

@@ -59,4 +59,12 @@ jsconfig.json
 example/jsconfig.json
 example/src
 coverage
-RELEASE_NOTES.md
+RELEASE_NOTES.md
+
+# Yarn
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.npmignore

@@ -17,6 +17,7 @@ npm-debug.log
 .eslintignore
 .eslintrc.js
 babel.config.js
-jest.config.ts
+jest.config.js
 tsconfig.json
-RELEASE_NOTES.md
+RELEASE_NOTES.md
+.yarnrc.yml

.prettierignore

@@ -8,4 +8,6 @@ yarn.lock
 LICENSE
 .gitignore
 .npmignore
-.eslintignore
+.eslintignore
+tsconfig.json
+.yarnrc.yml

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

README.md

@@ -28,13 +28,12 @@ A parity version of the iOS [UIStepper](https://developer.apple.com/reference/ui
 ## Usage
 
 ```javascript
+import React from 'react';
 import SimpleStepper from 'react-native-simple-stepper';
 
-function Example() {
+export default function Example(): React.JSX.Element {
   return <SimpleStepper valueChanged={value => console.log(value)} />;
 }
-
-export default Example;
 ```
 
 ## Text Position
@@ -44,11 +43,10 @@ export default Example;
 | ![screenshot](./screenshots/left.png) | ![screenshot](./screenshots/center.png) | ![screenshot](./screenshots/right.png) |
 
 ```javascript
+import React from 'react';
 import SimpleStepper from 'react-native-simple-stepper';
 
-function TextPositionExample() {
+export default function TextPositionExample(): React.JSX.Element {
   return <SimpleStepper showText={true} textPosition={'right'} />;
 }
-
-export default TextPositionExample;
 ```

SimpleStepper.tsx

@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React from 'react';
 import {
   StyleSheet,
   Text,
@@ -12,6 +12,11 @@ import {
   ColorValue,
 } from 'react-native';
 
+type HasReachedMaxMin = {
+  hasReachedMax: boolean;
+  hasReachedMin: boolean;
+};
+
 export type SimpleStepperProps = {
   initialValue?: number;
   minimumValue?: number;
@@ -47,9 +52,15 @@ export type SimpleStepperProps = {
   useColor?: boolean;
   color?: ColorValue;
   textDecimalPlaces?: number;
+  containerTestID?: string;
+  separatorTestID?: string;
+  incrementImageTestID?: string;
+  decrementImageTestID?: string;
+  incrementButtonTestID?: string;
+  decrementButtonTestID?: string;
 };
 
-const SimpleStepper: React.FC<SimpleStepperProps> = ({
+const SimpleStepper: React.FunctionComponent<SimpleStepperProps> = ({
   initialValue = 0,
   minimumValue = 0,
   maximumValue = 10,
@@ -107,26 +118,32 @@ const SimpleStepper: React.FC<SimpleStepperProps> = ({
   useColor = false,
   color = 'blue',
   textDecimalPlaces = 2,
+  containerTestID = 'container',
+  separatorTestID = 'separator',
+  incrementImageTestID = 'incrementImage',
+  decrementImageTestID = 'decrementImage',
+  incrementButtonTestID = 'incrementButton',
+  decrementButtonTestID = 'decrementButton',
 }) => {
-  const [value, setValue] = useState(initialValue);
+  const [value, setValue] = React.useState(initialValue);
 
-  const _decrementAction = () => {
+  function _decrementAction(): void {
     const nextValue = value - stepValue;
     const actualValue = _processValue(nextValue);
     onDecrement(actualValue);
     setValue(actualValue);
     valueChanged(actualValue);
-  };
+  }
 
-  const _incrementAction = () => {
+  function _incrementAction(): void {
     const nextValue = value + stepValue;
     const actualValue = _processValue(nextValue);
     onIncrement(actualValue);
     setValue(actualValue);
     valueChanged(actualValue);
-  };
+  }
 
-  const _processValue = (actualValue: number) => {
+  function _processValue(actualValue: number): number {
     if (actualValue > maximumValue) {
       return wraps ? minimumValue : maximumValue;
     } else if (actualValue === maximumValue) {
@@ -137,9 +154,9 @@ const SimpleStepper: React.FC<SimpleStepperProps> = ({
       return minimumValue;
     }
     return actualValue;
-  };
+  }
 
-  const _getHasMinMax = () => {
+  function _getHasMinMax(): HasReachedMaxMin {
     let hasReachedMax = true;
     let hasReachedMin = true;
     switch (true) {
@@ -160,9 +177,9 @@ const SimpleStepper: React.FC<SimpleStepperProps> = ({
       hasReachedMax,
       hasReachedMin,
     };
-  };
+  }
 
-  const _renderText = () => {
+  function _renderText(): React.JSX.Element {
     if (renderText) {
       return renderText(value);
     }
@@ -175,9 +192,9 @@ const SimpleStepper: React.FC<SimpleStepperProps> = ({
       displayValue = Number(value.toFixed(textDecimalPlaces));
     }
     return <Text style={textStyle}>{displayValue}</Text>;
-  };
+  }
 
-  const _renderIncrementImage = (opacity: number) => {
+  function _renderIncrementImage(opacity: number): React.JSX.Element {
     if (renderIncrementImage) {
       return renderIncrementImage(opacity);
     }
@@ -190,14 +207,14 @@ const SimpleStepper: React.FC<SimpleStepperProps> = ({
     }
     return (
       <Image
-        testID={'incrementImage'}
+        testID={incrementImageTestID}
         style={[_incrementImageStyle, {opacity}]}
         source={incrementImage}
       />
     );
-  };
+  }
 
-  const _renderDecrementImage = (opacity: number) => {
+  function _renderDecrementImage(opacity: number): React.JSX.Element {
     if (renderDecrementImage) {
       return renderDecrementImage(opacity);
     }
@@ -210,12 +227,12 @@ const SimpleStepper: React.FC<SimpleStepperProps> = ({
     }
     return (
       <Image
-        testID={'decrementImage'}
+        testID={decrementImageTestID}
         style={[_decrementImageStyle, {opacity}]}
         source={decrementImage}
       />
     );
-  };
+  }
 
   const {hasReachedMin, hasReachedMax} = _getHasMinMax();
   const decrementOpacity = hasReachedMin || disabled ? disabledOpacity : 1;
@@ -240,37 +257,37 @@ const SimpleStepper: React.FC<SimpleStepperProps> = ({
 
   return (
     <View>
-      <View testID={'container'} style={_containerStyle}>
+      <View testID={containerTestID} style={_containerStyle}>
         {isLeft && _renderText()}
-        {isLeft && <View testID={'separator'} style={_separatorStyle} />}
+        {isLeft && <View testID={separatorTestID} style={_separatorStyle} />}
         {renderDecrementStep ? (
           renderDecrementStep(value, _decrementAction)
         ) : (
           <TouchableOpacity
-            testID={'decrementButton'}
+            testID={decrementButtonTestID}
             style={decrementStepStyle}
             activeOpacity={activeOpacity}
             onPress={_decrementAction}
             disabled={hasReachedMin || disabled}>
             {_renderDecrementImage(decrementOpacity)}
           </TouchableOpacity>
         )}
-        {isCenter && <View testID={'separator'} style={_separatorStyle} />}
+        {isCenter && <View testID={separatorTestID} style={_separatorStyle} />}
         {isCenter && _renderText()}
         <View style={_separatorStyle} />
         {renderIncrementStep ? (
           renderIncrementStep(value, _incrementAction)
         ) : (
           <TouchableOpacity
-            testID={'incrementButton'}
+            testID={incrementButtonTestID}
             style={incrementStepStyle}
             activeOpacity={activeOpacity}
             onPress={_incrementAction}
             disabled={hasReachedMax || disabled}>
             {_renderIncrementImage(incrementOpacity)}
           </TouchableOpacity>
         )}
-        {isRight && <View testID={'separator'} style={_separatorStyle} />}
+        {isRight && <View testID={separatorTestID} style={_separatorStyle} />}
         {isRight && _renderText()}
       </View>
     </View>

__tests__/__snapshots__/SimpleStepper.test.tsx.snap

@@ -34,7 +34,7 @@ exports[`it renders 1`] = `
       }
       accessible={true}
       collapsable={false}
-      focusable={true}
+      focusable={false}
       onClick={[Function]}
       onResponderGrant={[Function]}
       onResponderMove={[Function]}
@@ -173,7 +173,7 @@ exports[`render increment and decrement 1`] = `
       }
       accessible={true}
       collapsable={false}
-      focusable={true}
+      focusable={false}
       onClick={[Function]}
       onResponderGrant={[Function]}
       onResponderMove={[Function]}
@@ -403,7 +403,7 @@ exports[`render text 1`] = `
       }
       accessible={true}
       collapsable={false}
-      focusable={true}
+      focusable={false}
       onClick={[Function]}
       onResponderGrant={[Function]}
       onResponderMove={[Function]}
@@ -555,7 +555,7 @@ exports[`show center text 1`] = `
       }
       accessible={true}
       collapsable={false}
-      focusable={true}
+      focusable={false}
       onClick={[Function]}
       onResponderGrant={[Function]}
       onResponderMove={[Function]}
@@ -734,7 +734,7 @@ exports[`show left text 1`] = `
       }
       accessible={true}
       collapsable={false}
-      focusable={true}
+      focusable={false}
       onClick={[Function]}
       onResponderGrant={[Function]}
       onResponderMove={[Function]}
@@ -873,7 +873,7 @@ exports[`show right text 1`] = `
       }
       accessible={true}
       collapsable={false}
-      focusable={true}
+      focusable={false}
       onClick={[Function]}
       onResponderGrant={[Function]}
       onResponderMove={[Function]}