Front: Define Color theme (#64)

2022-07-07 14:19:30 +02:00
parent c4bd0f5f79
commit e61968f08a
6 changed files with 134 additions and 10 deletions
@@ -10,5 +10,8 @@ npm-debug.*
 *.orig.*
 web-build/
 *.apk
+yarn.error*
 # macOS
 .DS_Store
+
+.idea/
@@ -1,11 +1,11 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import TestRenderer from 'react-test-renderer';

 import App from './App';

 describe('<App />', () => {
  it('has 1 child', () => {
-    const tree = renderer.create(<App />).toJSON();
-    expect(tree.children.length).toBe(1);
+    const tree = TestRenderer.create(<App />).toJSON();
+    expect(tree.children.length).toBe(10);
  });
 });
@@ -1,10 +1,32 @@
 import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Text, View, ColorValue } from 'react-native';
+import ColorTheme from './Theme';
+
+const ExampleBox = (props: { textColor: ColorValue, backgroundColor: ColorValue }) => (
+  <View style={{ backgroundColor: props.backgroundColor }}>
+    <Text style={{ fontSize: 20, textAlign: 'center', color: props.textColor }} >Hello</Text>
+  </View>
+)

 export default function App() {
  return (
    <View style={styles.container}>
-      <Text>Open up App.tsx to start working on your app!</Text>
+      <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,
+        }}
+      />
      <StatusBar style="auto" />
    </View>
  );
@@ -13,8 +35,7 @@ export default function App() {
 const styles = StyleSheet.create({
  container: {
    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
+    backgroundColor: ColorTheme.backgroundDark,
    justifyContent: 'center',
  },
 });
@@ -0,0 +1,31 @@
+/**
+ * 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',
+
+	backgroundLight: '#F0F0F0',
+	onBackgroundLight: '#000000',
+	backgroundDark: '#292929',
+	onBackgroundDark: '#FFFFFF',
+
+	surface: '#F6F6F6',
+	onSurface: '#000000',
+
+	placeholder: '#C9C9C9',
+
+	error: '#B00020',
+	onError: '#FFFFFF',
+
+	divider: "#DDDDDD",
+};
+
+export default ColorTheme;
@@ -13,6 +13,8 @@
    "test:watch": "jest -i --watch"
  },
  "dependencies": {
+    "@types/jest": "^28.1.4",
+    "@types/react-test-renderer": "^18.0.0",
    "expo": "~45.0.0",
    "expo-dev-client": "~1.0.0",
    "expo-status-bar": "~1.3.0",
@@ -27,7 +29,7 @@
    "@babel/core": "^7.12.9",
    "@types/react": "~17.0.21",
    "@types/react-native": "~0.66.13",
-    "react-test-renderer": "17",
+    "react-test-renderer": "17.0.2",
    "typescript": "~4.3.5"
  },
  "private": true,
@@ -1549,6 +1549,13 @@
  optionalDependencies:
    node-notifier "^8.0.0"

+"@jest/schemas@^28.0.2":
+  version "28.0.2"
+  resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-28.0.2.tgz#08c30df6a8d07eafea0aef9fb222c5e26d72e613"
+  integrity sha512-YVDJZjd4izeTDkij00vHHAymNXQ6WWsdChFRK86qck6Jpr3DCL5W3Is3vslviRlP+bLuMYRLbdp98amMvqudhA==
+  dependencies:
+    "@sinclair/typebox" "^0.23.3"
+
 "@jest/source-map@^26.6.2":
  version "26.6.2"
  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-26.6.2.tgz#29af5e1e2e324cafccc936f218309f54ab69d535"
@@ -1918,6 +1925,11 @@
  resolved "https://registry.yarnpkg.com/@sideway/pinpoint/-/pinpoint-2.0.0.tgz#cff8ffadc372ad29fd3f78277aeb29e632cc70df"
  integrity sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==

+"@sinclair/typebox@^0.23.3":
+  version "0.23.5"
+  resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.23.5.tgz#93f7b9f4e3285a7a9ade7557d9a8d36809cbc47d"
+  integrity sha512-AFBVi/iT4g20DHoujvMH1aEDn8fGJh4xsRGCP6d8RpLPMqsNPvW01Jcn0QysXTsg++/xj25NmJsGyH9xug/wKg==
+
 "@sinonjs/commons@^1.7.0":
  version "1.8.3"
  resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.3.tgz#3802ddd21a50a949b6721ddd72da36e67e7f1b2d"
@@ -1996,6 +2008,14 @@
  dependencies:
    "@types/istanbul-lib-report" "*"

+"@types/jest@^28.1.4":
+  version "28.1.4"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-28.1.4.tgz#a11ee6c8fd0b52c19c9c18138b78bbcc201dad5a"
+  integrity sha512-telv6G5N7zRJiLcI3Rs3o+ipZ28EnE+7EvF0pSrt2pZOMnAVI/f+6/LucDxOvcBcTeTL3JMF744BbVQAVBUQRA==
+  dependencies:
+    jest-matcher-utils "^28.0.0"
+    pretty-format "^28.0.0"
+
 "@types/node@*":
  version "18.0.0"
  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.0.0.tgz#67c7b724e1bcdd7a8821ce0d5ee184d3b4dd525a"
@@ -2023,6 +2043,13 @@
  dependencies:
    "@types/react" "*"

+"@types/react-test-renderer@^18.0.0":
+  version "18.0.0"
+  resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-18.0.0.tgz#7b7f69ca98821ea5501b21ba24ea7b6139da2243"
+  integrity sha512-C7/5FBJ3g3sqUahguGi03O79b8afNeSD6T8/GU50oQrJCU0bVCCGQHaGKUbg2Ce8VQEEqTw8/HiS6lXHHdgkdQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*":
  version "18.0.14"
  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.14.tgz#e016616ffff51dba01b04945610fe3671fdbe06d"
@@ -3354,6 +3381,11 @@ diff-sequences@^26.6.2:
  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-26.6.2.tgz#48ba99157de1923412eed41db6b6d4aa9ca7c0b1"
  integrity sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==

+diff-sequences@^28.1.1:
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-28.1.1.tgz#9989dc731266dc2903457a70e996f3a041913ac6"
+  integrity sha512-FU0iFaH/E23a+a718l8Qa/19bF9p06kgE0KipMOMadwa3SjnaElKzPaUC0vnibs6/B/9ni97s61mcejk8W1fQw==
+
 dir-glob@^3.0.1:
  version "3.0.1"
  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
@@ -4770,6 +4802,16 @@ jest-diff@^26.6.2:
    jest-get-type "^26.3.0"
    pretty-format "^26.6.2"

+jest-diff@^28.1.1:
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-28.1.1.tgz#1a3eedfd81ae79810931c63a1d0f201b9120106c"
+  integrity sha512-/MUUxeR2fHbqHoMMiffe/Afm+U8U4olFRJ0hiVG2lZatPJcnGxx292ustVu7bULhjV65IYMxRdploAKLbcrsyg==
+  dependencies:
+    chalk "^4.0.0"
+    diff-sequences "^28.1.1"
+    jest-get-type "^28.0.2"
+    pretty-format "^28.1.1"
+
 jest-docblock@^26.0.0:
  version "26.0.0"
  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-26.0.0.tgz#3e2fa20899fc928cb13bd0ff68bd3711a36889b5"
@@ -4833,6 +4875,11 @@ jest-get-type@^26.3.0:
  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-26.3.0.tgz#e97dc3c3f53c2b406ca7afaed4493b1d099199e0"
  integrity sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==

+jest-get-type@^28.0.2:
+  version "28.0.2"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-28.0.2.tgz#34622e628e4fdcd793d46db8a242227901fcf203"
+  integrity sha512-ioj2w9/DxSYHfOm5lJKCdcAmPJzQXmbM/Url3rhlghrPvT3tt+7a/+oXc9azkKmLvoiXjtV83bEWqi+vs5nlPA==
+
 jest-haste-map@^26.6.2:
  version "26.6.2"
  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-26.6.2.tgz#dd7e60fe7dc0e9f911a23d79c5ff7fb5c2cafeaa"
@@ -4916,6 +4963,16 @@ jest-matcher-utils@^26.6.2:
    jest-get-type "^26.3.0"
    pretty-format "^26.6.2"

+jest-matcher-utils@^28.0.0:
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-28.1.1.tgz#a7c4653c2b782ec96796eb3088060720f1e29304"
+  integrity sha512-NPJPRWrbmR2nAJ+1nmnfcKKzSwgfaciCCrYZzVnNoxVoyusYWIjkBMNvu0RHJe7dNj4hH3uZOPZsQA+xAYWqsw==
+  dependencies:
+    chalk "^4.0.0"
+    jest-diff "^28.1.1"
+    jest-get-type "^28.0.2"
+    pretty-format "^28.1.1"
+
 jest-message-util@^26.6.2:
  version "26.6.2"
  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-26.6.2.tgz#58173744ad6fc0506b5d21150b9be56ef001ca07"
@@ -6572,6 +6629,16 @@ pretty-format@^27.5.1:
    ansi-styles "^5.0.0"
    react-is "^17.0.1"

+pretty-format@^28.0.0, pretty-format@^28.1.1:
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-28.1.1.tgz#f731530394e0f7fcd95aba6b43c50e02d86b95cb"
+  integrity sha512-wwJbVTGFHeucr5Jw2bQ9P+VYHyLdAqedFLEkdQUVaBF/eiidDwH5OpilINq4mEfhbCjLnirt6HTTDhv1HaTIQw==
+  dependencies:
+    "@jest/schemas" "^28.0.2"
+    ansi-regex "^5.0.1"
+    ansi-styles "^5.0.0"
+    react-is "^18.0.0"
+
 process-nextick-args@~2.0.0:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -6703,7 +6770,7 @@ react-dom@17.0.2:
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==

-"react-is@^16.12.0 || ^17.0.0 || ^18.0.0":
+"react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0:
  version "18.2.0"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
@@ -6800,7 +6867,7 @@ react-shallow-renderer@^16.13.1:
    object-assign "^4.1.1"
    react-is "^16.12.0 || ^17.0.0 || ^18.0.0"

-react-test-renderer@17, react-test-renderer@~17.0.2:
+react-test-renderer@17.0.2, react-test-renderer@~17.0.2:
  version "17.0.2"
  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-17.0.2.tgz#4cd4ae5ef1ad5670fc0ef776e8cc7e1231d9866c"
  integrity sha512-yaQ9cB89c17PUb0x6UfWRs7kQCorVdHlutU1boVPEsB8IDZH6n9tHxMacc3y0JoXOJUsZb/t/Mb8FUWMKaM7iQ==