Merge pull request #66 from Chroma-Case/front-ui-lib-integration

Front: Add UI Library
2022-07-19 08:43:11 +02:00
parent e61968f08a 6ae40c3117
commit 6b1765063f
6 changed files with 106 additions and 57 deletions
--- 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('<App />', () => {
+describe('<AppContent />', () => {
  it('has 1 child', () => {
-    const tree = TestRenderer.create(<App />).toJSON();
-    expect(tree.children.length).toBe(10);
+    const tree = TestRenderer.create(<AppContent />).toJSON();
+    expect(tree.children.length).toBe(6);
  });
 });
--- 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 { 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 }) => (
  <View style={{ backgroundColor: props.backgroundColor }}>
@@ -8,34 +9,25 @@ const ExampleBox = (props: { textColor: ColorValue, backgroundColor: ColorValue
  </View>
 )

-export default function App() {
+export function AppContent() {
+  const { colors } = useTheme();
  return (
-    <View style={styles.container}>
-      <ExampleBox backgroundColor={ColorTheme.primary} textColor={ColorTheme.onPrimary}/>
-      <ExampleBox backgroundColor={ColorTheme.primaryVariant} textColor={ColorTheme.onPrimary}/>
-      <ExampleBox backgroundColor={ColorTheme.secondary} textColor={ColorTheme.onSecondary}/>
-      <ExampleBox backgroundColor={ColorTheme.secondaryVariant} textColor={ColorTheme.onPrimary}/>
-      <ExampleBox backgroundColor={ColorTheme.error} textColor={ColorTheme.onError}/>
-      <ExampleBox backgroundColor={ColorTheme.surface} textColor={ColorTheme.onSurface}/>
-      <ExampleBox backgroundColor={ColorTheme.surface} textColor={ColorTheme.placeholder}/>
-      <ExampleBox backgroundColor={ColorTheme.backgroundLight} textColor={ColorTheme.onBackgroundLight}/>
-      <ExampleBox backgroundColor={ColorTheme.backgroundDark} textColor={ColorTheme.onBackgroundDark}/>
-      <View
-        style={{
-          paddingVertical: 20,
-          borderBottomColor: ColorTheme.divider,
-          borderBottomWidth: StyleSheet.hairlineWidth,
-        }}
-      />
+    <View style={{flex: 1, justifyContent: 'center' }}>
+      <ExampleBox backgroundColor={colors.primary} textColor={colors.text}/>
+      <ExampleBox backgroundColor={colors.accent} textColor={colors.text}/>
+      <ExampleBox backgroundColor={colors.error} textColor={colors.text}/>
+      <ExampleBox backgroundColor={colors.surface} textColor={colors.onSurface}/>
+      <ExampleBox backgroundColor={colors.surface} textColor={colors.placeholder}/>
+      <ExampleBox backgroundColor={colors.notification} textColor={colors.text}/>
      <StatusBar style="auto" />
    </View>
  );
 }

-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: ColorTheme.backgroundDark,
-    justifyContent: 'center',
-  },
-});
+export default function App() {
+  return (
+    <PaperProvider theme={Theme}>
+      <AppContent/>
+    </PaperProvider>
+  );
+}
--- 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;
+export default Theme;
--- 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'],
+      },
+    },
  };
 };
--- 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": {
--- 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"