🧹Web cleanup (readme + static dir)

packages/web/README.md

@@ -14,6 +14,16 @@ and then running
 
 which will start a server accessible at [http://localhost:3000](http://localhost:3000)
 
+## Testing
+
+run tests with `yarn test`
+
+tools: `jest`, `@testing-library/react`
+
+#### Testing Strategy
+
+Each page should have a snapshot test found in `src/_page-tests` more interactive components should have an additional tests for various states/ interactions.
+
 ## Architecture
 
 The website uses [React.js](https://reactjs.org/), [Next.js](https://nextjs.org/), and [React Native Web](https://github.com/necolas/react-native-web). React is a great library for building user interfaces. Next.js takes care of server-rendering React apps in a simple way and preloading/transitioning pages quickly. React Native web allows us to use the same code in the application on the website, specifically the way we do CSS.
@@ -35,7 +45,3 @@ Now you can run
 `yarn run deploy:dev`
 
 to deploy to the `dev` environment, with similar commands for `staging` and `prod`
-
-## Add your picture
-
-Take a look at the files in [this folder](https://github.com/celo-org/celo-monorepo/tree/master/packages/web/src/about/team) and see if you can figure out how to add your picture to the `/about` page :)

packages/web/package.json

@@ -53,7 +53,7 @@
     "net": "^1.0.2",
     "network-speed": "^2.0.4",
     "next": "^9.1.5",
-    "next-i18next": "^2.1.1",
+    "next-i18next": "^4.0.1",
     "next-images": "^1.2.0",
     "next-plugin-transpile-modules": "^2.0.0",
     "node-cache": "^5.0.2",

packages/web/src/_page-tests/__snapshots__/about.test.tsx.snap

@@ -27,7 +27,7 @@ exports[`About renders 1`] = `
         autoPlay={true}
         loop={true}
         muted={true}
-        poster="/static/AboutPreview.jpg"
+        poster="/images/AboutPreview.jpg"
         style={
           Object {
             "MozTransitionProperty": "filter",
@@ -63,7 +63,7 @@ exports[`About renders 1`] = `
             style={
               Object {
                 "backgroundColor": "rgba(0,0,0,0.00)",
-                "backgroundImage": "url(\\"/static/AboutPreview.jpg\\")",
+                "backgroundImage": "url(\\"/images/AboutPreview.jpg\\")",
                 "backgroundPosition": "center",
                 "backgroundRepeat": "no-repeat",
                 "backgroundSize": "cover",
@@ -82,7 +82,7 @@ exports[`About renders 1`] = `
             alt=""
             className="css-accessibilityImage-9pa8cd"
             draggable={false}
-            src="/static/AboutPreview.jpg"
+            src="/images/AboutPreview.jpg"
           />
         </div>
       </video>

packages/web/src/_page-tests/experience/__snapshots__/logo.test.tsx.snap

@@ -1041,7 +1041,7 @@ exports[`Experience/Logo renders 1`] = `
                   className="css-reset-4rbku5 css-cursor-18t94o4 css-text-901oao"
                   data-focusable={true}
                   dir="auto"
-                  href="/static/assets/CeloLogoPackage.zip"
+                  href="/assets/CeloLogoPackage.zip"
                   role="link"
                   style={
                     Object {
@@ -1365,7 +1365,7 @@ exports[`Experience/Logo renders 1`] = `
                     className="css-reset-4rbku5 css-cursor-18t94o4 css-text-901oao"
                     data-focusable={true}
                     dir="auto"
-                    href="/static/assets/CeloColorLogo.zip"
+                    href="/assets/CeloColorLogo.zip"
                     role="link"
                     style={
                       Object {
@@ -1544,7 +1544,7 @@ exports[`Experience/Logo renders 1`] = `
                     className="css-reset-4rbku5 css-cursor-18t94o4 css-text-901oao"
                     data-focusable={true}
                     dir="auto"
-                    href="/static/assets/CeloColorLogoReverse.zip"
+                    href="/assets/CeloColorLogoReverse.zip"
                     role="link"
                     style={
                       Object {
@@ -1731,7 +1731,7 @@ exports[`Experience/Logo renders 1`] = `
                     className="css-reset-4rbku5 css-cursor-18t94o4 css-text-901oao"
                     data-focusable={true}
                     dir="auto"
-                    href="/static/assets/CeloMonochromeLogo.zip"
+                    href="/assets/CeloMonochromeLogo.zip"
                     role="link"
                     style={
                       Object {
@@ -1910,7 +1910,7 @@ exports[`Experience/Logo renders 1`] = `
                     className="css-reset-4rbku5 css-cursor-18t94o4 css-text-901oao"
                     data-focusable={true}
                     dir="auto"
-                    href="/static/assets/CeloMonochromeLogoReverse.zip"
+                    href="/assets/CeloMonochromeLogoReverse.zip"
                     role="link"
                     style={
                       Object {
@@ -2048,7 +2048,7 @@ exports[`Experience/Logo renders 1`] = `
                   className="css-reset-4rbku5 css-cursor-18t94o4 css-text-901oao"
                   data-focusable={true}
                   dir="auto"
-                  href="/static/assets/CeloGlyphs.zip"
+                  href="/assets/CeloGlyphs.zip"
                   role="link"
                   style={
                     Object {

packages/web/src/about/VideoCover.tsx

@@ -7,8 +7,8 @@ import Hoverable from 'src/shared/Hoverable'
 import { PlayCircle2 } from 'src/shared/PlayCircle'
 import VideoModal from 'src/shared/VideoModal'
 import { standardStyles, textStyles } from 'src/styles'
-
 import { hasGoodConnection } from 'src/utils/utils'
+
 interface State {
   isHovering: boolean
   supportsVideo: boolean
@@ -56,7 +56,7 @@ class VideoCover extends React.PureComponent<I18nProps & ScreenProps, State> {
             muted={true}
             autoPlay={true}
             loop={true}
-            poster="/static/AboutPreview.jpg"
+            poster="/images/AboutPreview.jpg"
           >
             {this.state.supportsVideo && (
               <source
@@ -67,7 +67,7 @@ class VideoCover extends React.PureComponent<I18nProps & ScreenProps, State> {
             }
             <Image
               resizeMode="cover"
-              source={{ uri: '/static/AboutPreview.jpg' }}
+              source={{ uri: '/images/AboutPreview.jpg' }}
               style={standardStyles.image}
             />
           </Video>

packages/web/src/brandkit/Logo.tsx

@@ -50,7 +50,7 @@ const Overview = withNamespaces(NameSpaces.brand)(
           <Button
             kind={BTN.PRIMARY}
             text={t('logo.overviewBtn')}
-            href="/static/assets/CeloLogoPackage.zip"
+            href="/assets/CeloLogoPackage.zip"
           />
           <Text style={[fonts.h5, standardStyles.blockMarginTop]}>{t('licenseTitle')}</Text>
           <Text
@@ -73,28 +73,28 @@ const Overview = withNamespaces(NameSpaces.brand)(
             hasBorder={true}
             logoType={Logos.light}
             background={colors.white}
-            href="/static/assets/CeloColorLogo.zip"
+            href="/assets/CeloColorLogo.zip"
             caption={t('logo.fullColorOnLightCaption')}
           />
           <LogoExample
             hasBorder={false}
             logoType={Logos.dark}
             background={colors.dark}
-            href="/static/assets/CeloColorLogoReverse.zip"
+            href="/assets/CeloColorLogoReverse.zip"
             caption={t('logo.fullColorOnDarkCaption')}
           />
           <LogoExample
             hasBorder={true}
             logoType={Logos.black}
             background={colors.white}
-            href="/static/assets/CeloMonochromeLogo.zip"
+            href="/assets/CeloMonochromeLogo.zip"
             caption={t('logo.monochromeCaption')}
           />
           <LogoExample
             hasBorder={false}
             logoType={Logos.white}
             background={colors.dark}
-            href="/static/assets/CeloMonochromeLogoReverse.zip"
+            href="/assets/CeloMonochromeLogoReverse.zip"
             caption={t('logo.monochromeInverseCaption')}
           />
         </View>
@@ -103,7 +103,7 @@ const Overview = withNamespaces(NameSpaces.brand)(
             {t('logo.glyphTitle')}
           </Text>
           <Text style={fonts.p}>{t('logo.glyphText')}</Text>
-          <DownloadButton uri="/static/assets/CeloGlyphs.zip" />
+          <DownloadButton uri="/assets/CeloGlyphs.zip" />
           <View style={[styles.tiling, standardStyles.elementalMarginTop]}>
             <View
               style={[

packages/web/src/community/CodeOfConduct.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { StyleSheet, View } from 'react-native'
-import defaultContent from 'src/../static/locales/en/codeofconduct.json'
+import defaultContent from 'src/../public/static/locales/en/codeofconduct.json'
 import { IntegratingAnimation } from 'src/community/connect/CodeOfConduct'
 import { H1, Li, Ul } from 'src/fonts/Fonts'
 import OpenGraph from 'src/header/OpenGraph'

yarn.lock

@@ -19145,20 +19145,20 @@ i18next-xhr-backend@^3.0.0:
   dependencies:
     "@babel/runtime" "^7.5.5"
 
-i18next@^18.0.1:
-  version "18.0.1"
-  resolved "https://registry.yarnpkg.com/i18next/-/i18next-18.0.1.tgz#10841209f6983df4d8e367204da403d8cbc609cf"
-  integrity sha512-KWd9qMFXw0qjxF7cTAqQselPCYoHfaLvBs8c6JcNzaQKVxbAlE/wv9EZXPy+JlKUcXCT0qgjcmxrJjmbnEp60A==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-
 i18next@^19.0.2:
   version "19.0.2"
   resolved "https://registry.yarnpkg.com/i18next/-/i18next-19.0.2.tgz#d72502ef031403572703f2e9f013cae005265444"
   integrity sha512-fBa43Ann2udP1CQAz3IQpOZ1dGAkmi3mMfzisOhH17igneSRbvZ7P2RNbL+L1iRYKMufBmVwnC7G3gqcyviZ9g==
   dependencies:
     "@babel/runtime" "^7.3.1"
 
+i18next@^19.0.3:
+  version "19.1.0"
+  resolved "https://registry.yarnpkg.com/i18next/-/i18next-19.1.0.tgz#fe1a1da3d208872946307c7d2d115da45d46159f"
+  integrity sha512-ISbmukX4L6Dz0QoH9+EW1AnBw7j+NRLoMu9uLPMaNSSTP9Eie9/oUL0dOyWX15baB3gYOpkHJpGZRHOqcnl0ew==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+
 iconv-lite@0.4.19:
   version "0.4.19"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
@@ -24172,15 +24172,15 @@ nexmo@2.4.2:
     request "^2.88.0"
     uuid "^2.0.2"
 
-next-i18next@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/next-i18next/-/next-i18next-2.1.1.tgz#fb669b57b42efe95242af98a892be85096e2371a"
-  integrity sha512-Mbeb73SK9ozNBQIp8Fp/Fb51Xw7Tx/1m4rNHFnkTEupztrMCHBdKsG0t7L4k4VWwchW+a2sJ284nxSxtFSHOaw==
+next-i18next@^4.0.1:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/next-i18next/-/next-i18next-4.1.0.tgz#dcb5afba1254551b5ced34ef2e40b38203babdb6"
+  integrity sha512-i02CxQdLzUg1ny3FNFZ0QXoBu8Yn5SkNt1lctcUYUQNWw/xBGfN+WhuDAM8Vcifhb5bAcJeo3nX7ELMG2PyhBw==
   dependencies:
     core-js "^2"
     detect-node "^2.0.4"
     hoist-non-react-statics "^3.2.0"
-    i18next "^18.0.1"
+    i18next "^19.0.3"
     i18next-browser-languagedetector "^4.0.0"
     i18next-express-middleware "^1.5.0"
     i18next-node-fs-backend "^2.1.0"