From 5a2f5ead78afa0e3e1e5ec5d122236550f299b7e Mon Sep 17 00:00:00 2001 From: Arthi-chaud Date: Mon, 11 Jul 2022 10:44:07 +0200 Subject: [PATCH 1/5] Front: Add React Native Paper dependency --- front/package.json | 1 + front/yarn.lock | 63 +++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 61 insertions(+), 3 deletions(-) diff --git a/front/package.json b/front/package.json index e80338a..c98ed7d 100644 --- a/front/package.json +++ b/front/package.json @@ -23,6 +23,7 @@ "react": "17.0.2", "react-dom": "17.0.2", "react-native": "0.68.2", + "react-native-paper": "^4.12.2", "react-native-web": "0.17.7" }, "devDependencies": { diff --git a/front/yarn.lock b/front/yarn.lock index eacd497..d599bbc 100644 --- a/front/yarn.lock +++ b/front/yarn.lock @@ -1075,6 +1075,14 @@ resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39" integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw== +"@callstack/react-theme-provider@^3.0.7": + version "3.0.7" + resolved "https://registry.yarnpkg.com/@callstack/react-theme-provider/-/react-theme-provider-3.0.7.tgz#b7ce1a53d63ad5e83574b831ae0af6b7c6cc40e7" + integrity sha512-Ab6rbD2w4u9W3yf7LQQ8evx9m8fZNsoWxt+MFm3AyZnyKQNCJf4K7ip9tHHZgSs+HTdoj38lEqPehvFOVQKvAg== + dependencies: + deepmerge "^3.2.0" + hoist-non-react-statics "^3.3.0" + "@cnakazawa/watch@^1.0.3": version "1.0.4" resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a" @@ -2962,7 +2970,7 @@ collection-visit@^1.0.0: map-visit "^1.0.0" object-visit "^1.0.0" -color-convert@^1.9.0: +color-convert@^1.9.0, color-convert@^1.9.3: version "1.9.3" resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8" integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg== @@ -2981,11 +2989,27 @@ color-name@1.1.3: resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25" integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw== -color-name@~1.1.4: +color-name@^1.0.0, color-name@~1.1.4: version "1.1.4" resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== +color-string@^1.6.0: + version "1.9.1" + resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4" + integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg== + dependencies: + color-name "^1.0.0" + simple-swizzle "^0.2.2" + +color@^3.1.2: + version "3.2.1" + resolved "https://registry.yarnpkg.com/color/-/color-3.2.1.tgz#3544dc198caf4490c3ecc9a790b54fe9ff45e164" + integrity sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA== + dependencies: + color-convert "^1.9.3" + color-string "^1.6.0" + colorette@^1.0.7: version "1.4.0" resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.4.0.tgz#5190fbb87276259a86ad700bff2c6d6faa3fca40" @@ -4254,6 +4278,13 @@ hermes-profile-transformer@^0.0.6: dependencies: source-map "^0.7.3" +hoist-non-react-statics@^3.3.0: + version "3.3.2" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" + integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== + dependencies: + react-is "^16.7.0" + hosted-git-info@^2.1.4: version "2.8.9" resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9" @@ -4459,6 +4490,11 @@ is-arrayish@^0.2.1: resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d" integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg== +is-arrayish@^0.3.1: + version "0.3.2" + resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03" + integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ== + is-buffer@^1.1.5, is-buffer@~1.1.1, is-buffer@~1.1.6: version "1.1.6" resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be" @@ -6775,7 +6811,7 @@ react-dom@17.0.2: resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b" integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== -react-is@^16.13.1: +react-is@^16.13.1, react-is@^16.7.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== @@ -6795,6 +6831,20 @@ react-native-gradle-plugin@^0.0.6: resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.0.6.tgz#b61a9234ad2f61430937911003cddd7e15c72b45" integrity sha512-eIlgtsmDp1jLC24dRn43hB3kEcZVqx6DUQbR0N1ABXGnMEafm9I3V3dUUeD1vh+Dy5WqijSoEwLNUPLgu5zDMg== +react-native-iphone-x-helper@^1.3.1: + version "1.3.1" + resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz#20c603e9a0e765fd6f97396638bdeb0e5a60b010" + integrity sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg== + +react-native-paper@^4.12.2: + version "4.12.2" + resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-4.12.2.tgz#31ed8011afd994d54dd403ed0099295fc1616d26" + integrity sha512-DDqds8E6IMbOFW7PwUgB0pP6qhFcwn/s0N+SOpqB1XYtGm0r9WMrmA8q026Mn7OCkWeMTjgnrILGJxJ7b2CRHw== + dependencies: + "@callstack/react-theme-provider" "^3.0.7" + color "^3.1.2" + react-native-iphone-x-helper "^1.3.1" + react-native-web@0.17.7: version "0.17.7" resolved "https://registry.yarnpkg.com/react-native-web/-/react-native-web-0.17.7.tgz#038899dbc94467a0ca0be214b88a30e0c117b176" @@ -7385,6 +7435,13 @@ simple-plist@^1.1.0: bplist-parser "0.3.1" plist "^3.0.5" +simple-swizzle@^0.2.2: + version "0.2.2" + resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a" + integrity sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg== + dependencies: + is-arrayish "^0.3.1" + sisteransi@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed" From b2d409eb56caee4861ac4356b597c2dcf62b90a0 Mon Sep 17 00:00:00 2001 From: Arthi-chaud Date: Mon, 11 Jul 2022 10:44:35 +0200 Subject: [PATCH 2/5] Front: Add React Native Paper options to Configuration File --- front/babel.config.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/front/babel.config.js b/front/babel.config.js index 2900afe..5a71250 100644 --- a/front/babel.config.js +++ b/front/babel.config.js @@ -2,5 +2,10 @@ module.exports = function(api) { api.cache(true); return { presets: ['babel-preset-expo'], + env: { + production: { + plugins: ['react-native-paper/babel'], + }, + }, }; }; From 2308ac47f65dbe5da1c8fd68c9ee89c21e4910fc Mon Sep 17 00:00:00 2001 From: Arthi-chaud Date: Mon, 11 Jul 2022 10:51:01 +0200 Subject: [PATCH 3/5] Front: Wrap App w/ React Native Paper's Provider --- front/App.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/front/App.tsx b/front/App.tsx index 1bbcd7d..a1f2aee 100644 --- a/front/App.tsx +++ b/front/App.tsx @@ -1,6 +1,7 @@ import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View, ColorValue } from 'react-native'; import ColorTheme from './Theme'; +import { Provider as PaperProvider } from 'react-native-paper'; const ExampleBox = (props: { textColor: ColorValue, backgroundColor: ColorValue }) => ( @@ -10,6 +11,7 @@ const ExampleBox = (props: { textColor: ColorValue, backgroundColor: ColorValue export default function App() { return ( + @@ -29,13 +31,14 @@ export default function App() { /> + ); } const styles = StyleSheet.create({ container: { flex: 1, - backgroundColor: ColorTheme.backgroundDark, + backgroundColor: ColorTheme.backgroundLight, justifyContent: 'center', }, }); From db056975aa6a54c2b3b893b7f78f88eddf4ee1b4 Mon Sep 17 00:00:00 2001 From: Arthi-chaud Date: Mon, 11 Jul 2022 11:10:00 +0200 Subject: [PATCH 4/5] Front: Fix unit test w/ React Paper integration --- front/App.test.tsx | 6 +++--- front/App.tsx | 10 ++++++++-- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/front/App.test.tsx b/front/App.test.tsx index 5fadc03..7a7e434 100644 --- a/front/App.test.tsx +++ b/front/App.test.tsx @@ -1,11 +1,11 @@ import React from 'react'; import TestRenderer from 'react-test-renderer'; -import App from './App'; +import { AppContent } from './App'; -describe('', () => { +describe('', () => { it('has 1 child', () => { - const tree = TestRenderer.create().toJSON(); + const tree = TestRenderer.create().toJSON(); expect(tree.children.length).toBe(10); }); }); diff --git a/front/App.tsx b/front/App.tsx index a1f2aee..7c36f58 100644 --- a/front/App.tsx +++ b/front/App.tsx @@ -9,9 +9,8 @@ const ExampleBox = (props: { textColor: ColorValue, backgroundColor: ColorValue ) -export default function App() { +export function AppContent() { return ( - @@ -31,6 +30,13 @@ export default function App() { /> + ); +} + +export default function App() { + return ( + + ); } From 6ae40c3117701f530937e8816d777ceaeb33d98f Mon Sep 17 00:00:00 2001 From: Arthi-chaud Date: Mon, 11 Jul 2022 11:35:46 +0200 Subject: [PATCH 5/5] Front: Setup Color Theme w/ React Native Paper --- front/App.test.tsx | 2 +- front/App.tsx | 41 ++++++++++++----------------------------- front/Theme.tsx | 40 +++++++++++++++++----------------------- 3 files changed, 30 insertions(+), 53 deletions(-) diff --git a/front/App.test.tsx b/front/App.test.tsx index 7a7e434..fbbf906 100644 --- a/front/App.test.tsx +++ b/front/App.test.tsx @@ -6,6 +6,6 @@ import { AppContent } from './App'; describe('', () => { it('has 1 child', () => { const tree = TestRenderer.create().toJSON(); - expect(tree.children.length).toBe(10); + expect(tree.children.length).toBe(6); }); }); diff --git a/front/App.tsx b/front/App.tsx index 7c36f58..353a73a 100644 --- a/front/App.tsx +++ b/front/App.tsx @@ -1,7 +1,7 @@ import { StatusBar } from 'expo-status-bar'; -import { StyleSheet, Text, View, ColorValue } from 'react-native'; -import ColorTheme from './Theme'; -import { Provider as PaperProvider } from 'react-native-paper'; +import { Text, View, ColorValue } from 'react-native'; +import { Provider as PaperProvider, useTheme } from 'react-native-paper'; +import Theme from './Theme'; const ExampleBox = (props: { textColor: ColorValue, backgroundColor: ColorValue }) => ( @@ -10,24 +10,15 @@ const ExampleBox = (props: { textColor: ColorValue, backgroundColor: ColorValue ) export function AppContent() { + const { colors } = useTheme(); return ( - - - - - - - - - - - + + + + + + + ); @@ -35,16 +26,8 @@ export function AppContent() { export default function App() { return ( - + ); } - -const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: ColorTheme.backgroundLight, - justifyContent: 'center', - }, -}); diff --git a/front/Theme.tsx b/front/Theme.tsx index 010fd76..65188b4 100644 --- a/front/Theme.tsx +++ b/front/Theme.tsx @@ -1,31 +1,25 @@ /** * Color theme to use thoughout the application * Using the Material Color guidelines - * TODO: integrate with the to-be-determined design framework */ -const ColorTheme = { - primary: '#5db075', - primaryVariant: '#008000', - onPrimary: '#ffffff', - secondary: '#00bdbd', - secondaryVariant: '#008b8c', - onSecondary: '#ffffff', +import { DefaultTheme } from 'react-native-paper'; - backgroundLight: '#F0F0F0', - onBackgroundLight: '#000000', - backgroundDark: '#292929', - onBackgroundDark: '#FFFFFF', - - surface: '#F6F6F6', - onSurface: '#000000', - - placeholder: '#C9C9C9', - - error: '#B00020', - onError: '#FFFFFF', - - divider: "#DDDDDD", +const Theme = { + ...DefaultTheme, + roundness: 10, + colors: { + ...DefaultTheme.colors, + primary: '#5db075', + background: '#F0F0F0', + surface: '#F6F6F6', + accent: '#00bdbd', + error: '#B00020', + text: '#ffffff', + onSurface: '#000000', + placeholder: '#C9C9C9', + notification: '#FF0000' + } }; -export default ColorTheme; \ No newline at end of file +export default Theme; \ No newline at end of file