Fix/design review (#52)

* 💄 Fix dialog screen after design review * ✨ Add missing button cases from design app * ✨ Add button examples for demo app * 💄 Make status bar transparent when modal or dialog are open * 💄 Add default background color for demo app * 💄 fix app bar line height * 💄 Apply drop shadow to action card * ♻️ Apply pull request suggestions * 💚 Fix tsc errors * 🧪 update failing test * 🔧 update jest config ---------
ZeroGachis · Apr 19, 2023 · 9b32945 · 9b32945
1 parent f6c8a4d
commit 9b32945
Show file tree

Hide file tree

Showing 19 changed files with 597 additions and 214 deletions.
diff --git a/example/package-lock.json b/example/package-lock.json
diff --git a/example/package.json b/example/package.json
@@ -15,6 +15,7 @@
     "@react-navigation/native-stack": "^6.9.10",
     "react": "18.1.0",
     "react-native": "0.70.6",
+    "react-native-drop-shadow": "^0.0.6",
     "react-native-gesture-handler": "^2.9.0",
     "react-native-icomoon": "^0.1.1",
     "react-native-paper": "^5.1.4",

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -48,7 +48,12 @@ const App = () => {
     return (
         <ThemeProvider>
             <NavigationContainer>
-                <Stack.Navigator initialRouteName="Home">
+                <Stack.Navigator
+                    screenOptions={{
+                        contentStyle: { backgroundColor: '#FFF' },
+                    }}
+                    initialRouteName="Home"
+                >
                     <Stack.Screen name="Home" component={HomeScreen} />
                     <Stack.Screen name="Buttons" component={ButtonsPage} />
                     <Stack.Screen name="Dialog" component={DialogPage} />

diff --git a/example/src/Buttons/ButtonsPage.tsx b/example/src/Buttons/ButtonsPage.tsx
@@ -1,18 +1,95 @@
 import React from 'react';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { Button, Screen } from 'smartway-react-native-ui';
 
 export const ButtonsPage = () => {
     return (
         <Screen style={styles.container}>
-            <Button mode="text">Text button</Button>
-            <Button mode="filled">Filled button</Button>
+            <View style={styles.buttonContainer}>
+                <Button style={styles.button} mode="filled">
+                    Filled
+                </Button>
+                <Button style={styles.button} status="primary" mode="filled">
+                    Filled
+                </Button>
+                <Button style={styles.button} status="information" mode="filled">
+                    Filled
+                </Button>
+                <Button style={styles.button} status="success" mode="filled">
+                    Filled
+                </Button>
+                <Button style={styles.button} status="warning" mode="filled">
+                    Filled
+                </Button>
+                <Button style={styles.button} status="error" mode="filled">
+                    Filled
+                </Button>
+                <Button style={styles.button} disabled mode="filled">
+                    Filled
+                </Button>
+            </View>
+            <View style={styles.buttonContainer}>
+                <Button style={styles.button} mode="text">
+                    Text
+                </Button>
+                <Button style={styles.button} status="primary" mode="text">
+                    Text
+                </Button>
+                <Button style={styles.button} status="information" mode="text">
+                    Text
+                </Button>
+                <Button style={styles.button} status="success" mode="text">
+                    Text
+                </Button>
+                <Button style={styles.button} status="warning" mode="text">
+                    Text
+                </Button>
+                <Button style={styles.button} status="error" mode="text">
+                    Text
+                </Button>
+                <Button style={styles.button} disabled mode="text">
+                    Text
+                </Button>
+            </View>
+            <View style={styles.buttonContainer}>
+                <Button style={styles.outlinedButton} mode="outlined">
+                    Outlined
+                </Button>
+                <Button style={styles.outlinedButton} status="primary" mode="outlined">
+                    Outlined
+                </Button>
+                <Button style={styles.outlinedButton} status="information" mode="outlined">
+                    Outlined
+                </Button>
+                <Button style={styles.outlinedButton} status="success" mode="outlined">
+                    Outlined
+                </Button>
+                <Button style={styles.outlinedButton} status="warning" mode="outlined">
+                    Outlined
+                </Button>
+                <Button style={styles.outlinedButton} status="error" mode="outlined">
+                    Outlined
+                </Button>
+                <Button style={styles.outlinedButton} disabled mode="outlined">
+                    Outlined
+                </Button>
+            </View>
         </Screen>
     );
 };
 
 const styles = StyleSheet.create({
     container: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+    },
+    buttonContainer: {
         alignItems: 'center',
     },
+    button: {
+        margin: 6,
+    },
+    outlinedButton: {
+        margin: 5,
+    },
 });
diff --git a/example/src/Dialog/DialogPage.tsx b/example/src/Dialog/DialogPage.tsx
@@ -1,32 +1,37 @@
 import React, { useState } from 'react';
-import { StyleSheet } from 'react-native';
+import { StatusBar, StyleSheet } from 'react-native';
 import { Button, Dialog, Screen } from 'smartway-react-native-ui';
 
 export const DialogPage = () => {
-    const [modalVisible, setModalVisible] = useState<boolean>(false);
-
-    const showModal = () => {
-        setModalVisible(true);
-    };
-
-    const hideModal = () => {
-        setModalVisible(false);
-    };
+    const [singleOptionDialog, setSingleOptionDialog] = useState<boolean>(false);
+    const [twoOptionsDialog, setTwoOptionsDialog] = useState<boolean>(false);
 
     return (
         <Screen style={styles.container}>
-            <Button mode="text" onClick={showModal}>
-                Click me
+            <StatusBar backgroundColor={'transparent'} />
+            <Button mode="text" onClick={() => setSingleOptionDialog(true)}>
+                single option
+            </Button>
+            <Button mode="text" onClick={() => setTwoOptionsDialog(true)}>
+                two options
             </Button>
             <Dialog
-                visible={modalVisible}
+                visible={singleOptionDialog}
+                title={'Titre du dialog'}
+                content={'Contenu texte du dialog pour expliquer l’action à faire '}
+                confirmButtonLabel={'Valider'}
+                onConfirm={() => setSingleOptionDialog(false)}
+                onDismiss={() => setSingleOptionDialog(false)}
+            />
+            <Dialog
+                visible={twoOptionsDialog}
                 title={'Titre du dialog'}
-                content={'Contenu texte'}
+                content={'Contenu texte du dialog pour expliquer l’action à faire '}
                 dismissButtonLabel={'Annuler'}
-                confirmButtonLabel={'Ok'}
-                onDismiss={hideModal}
-                onConfirm={hideModal}
-            ></Dialog>
+                confirmButtonLabel={'Valider'}
+                onDismiss={() => setTwoOptionsDialog(false)}
+                onConfirm={() => setTwoOptionsDialog(false)}
+            />
         </Screen>
     );
 };

diff --git a/jest.config.ts b/jest.config.ts
@@ -15,6 +15,10 @@ const jestConfig: JestConfigWithTsJest = {
     },
     testMatch: ['**/?(*.)test.(ts|tsx)'],
     moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+    transformIgnorePatterns: [
+        'node_modules/(?!(@react-native|react-native|react-native-drop-shadow)/)',
+    ],
+    moduleDirectories: ['node_modules', 'src'],
     setupFiles: [
         './node_modules/react-native-gesture-handler/jestSetup.js',
         './node_modules/react-native/jest/setup.js',

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -57,12 +57,12 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "jest": "^29.3.1",
     "jest-junit": "^15.0.0",
     "pod-install": "^0.1.0",
     "prettier": "2.8.4",
     "react": "18.1.0",
     "react-native": "0.70.6",
-    "jest": "^29.3.1",
     "ts-jest": "^29.1.0",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.5"
@@ -80,6 +80,8 @@
     "react-native-reanimated": "*",
     "react-native-safe-area-context": "*",
     "react-native-svg": "*",
-    "react-native-vector-icons": "*"
-  }
+    "react-native-vector-icons": "*",
+    "react-native-drop-shadow": "*"
+  },
+  "dependencies": {}
 }