Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix/design review #52

Merged
merged 11 commits into from
Apr 19, 2023
+597 −214
Merged

Fix/design review #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
cb7073a
:lipstick: Fix dialog screen after design review
Apr 18, 2023
0fca77f
:sparkles: Add missing button cases from design app
Apr 18, 2023
e8f114b
:sparkles: Add button examples for demo app
Apr 18, 2023
d4757d9
:lipstick: Make status bar transparent when modal or dialog are open
Apr 18, 2023
d3f4d5c
:lipstick: Add default background color for demo app
Apr 18, 2023
9db09ff
:lipstick: fix app bar line height
Apr 18, 2023
96043cf
:lipstick: Apply drop shadow to action card
Apr 19, 2023
6159716
:recycle: Apply pull request suggestions
Apr 19, 2023
3bdb6a4
:green_heart: Fix tsc errors
Apr 19, 2023
9ecdb4c
:test_tube: update failing test
Apr 19, 2023
195665c
:wrench: update jest config
Apr 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions example/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions example/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
7 changes: 6 additions & 1 deletion example/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,12 @@ const App = () => {
return (
<ThemeProvider>
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Navigator
screenOptions={{
contentStyle: { backgroundColor: '#FFF' },
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

neutral[50]

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think i tried to use theme there, but it returns an error as i try to use it outside ThemeProvider

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We definitely should use the ThemeProvider then !

}}
initialRouteName="Home"
>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Buttons" component={ButtonsPage} />
<Stack.Screen name="Dialog" component={DialogPage} />
Expand Down
83 changes: 80 additions & 3 deletions example/src/Buttons/ButtonsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
},
});
41 changes: 23 additions & 18 deletions example/src/Dialog/DialogPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
};
Expand Down
4 changes: 4 additions & 0 deletions jest.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
13 changes: 13 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 5 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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": {}
}
Loading