Merge pull request #1 from Expensify/main

update

.github/PULL_REQUEST_TEMPLATE.md

@@ -79,6 +79,7 @@ This is a checklist for PR authors. Please make sure to complete all tasks and c
 - [ ] I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
 - [ ] I followed proper code patterns (see [Reviewing the code](https://github.com/Expensify/App/blob/main/contributingGuides/PR_REVIEW_GUIDELINES.md#reviewing-the-code))
     - [ ] I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. `toggleReport` and not `onIconClick`)
+    - [ ] I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. `myBool && <MyComponent />`.
     - [ ] I verified that comments were added to code that is not self explanatory
     - [ ] I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
     - [ ] I verified any copy / text shown in the product is localized by adding it to `src/languages/*` files and using the [translation method](https://github.com/Expensify/App/blob/4bd99402cebdf4d7394e0d1f260879ea238197eb/src/components/withLocalize.js#L60)

.github/scripts/createDocsRoutes.js

@@ -0,0 +1,92 @@
+const yaml = require('js-yaml');
+const fs = require('fs');
+const _ = require('underscore');
+
+const warn = 'Number of hubs in _routes.yml does not match number of hubs in docs/articles. Please update _routes.yml with hub info.';
+const disclaimer = '# This file is auto-generated. Do not edit it directly. Use npm run createDocsRoutes instead.\n';
+const docsDir = `${process.cwd()}/docs`;
+const routes = yaml.load(fs.readFileSync(`${docsDir}/_data/_routes.yml`, 'utf8'));
+
+/**
+ * @param {String} str - The string to convert to title case
+ * @returns {String}
+ */
+function toTitleCase(str) {
+    return str.replace(/\w\S*/g, txt => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase());
+}
+
+/**
+ * @param {String} filename - The name of the file
+ * @returns {Object}
+ */
+function getArticleObj(filename) {
+    const href = filename.replace('.md', '');
+    return {
+        href,
+        title: toTitleCase(href.replaceAll('-', ' ')),
+    };
+}
+
+/**
+ * If the articlea / sections exist in the hub, then push the entry to the array.
+ * Otherwise, create the array and push the entry to it.
+ * @param {*} hubs - The hubs array
+ * @param {*} hub - The hub we are iterating
+ * @param {*} key - If we want to push sections / articles
+ * @param {*} entry - The article / section to push
+ */
+function pushOrCreateEntry(hubs, hub, key, entry) {
+    const hubObj = _.find(hubs, obj => obj.href === hub);
+    if (hubObj[key]) {
+        hubObj[key].push(entry);
+    } else {
+        hubObj[key] = [entry];
+    }
+}
+
+function run() {
+    const hubs = fs.readdirSync(`${docsDir}/articles`);
+    if (hubs.length !== routes.hubs.length) {
+        // If new hubs have been added without metadata addition to _routes.yml
+        console.error(warn);
+        process.exit(1);
+    }
+    _.each(hubs, (hub) => {
+        // Iterate through each directory in articles
+        fs.readdirSync(`${docsDir}/articles/${hub}`).forEach((fileOrFolder) => {
+            // If the directory content is a markdown file, then it is an article
+            if (fileOrFolder.endsWith('.md')) {
+                const articleObj = getArticleObj(fileOrFolder);
+                pushOrCreateEntry(routes.hubs, hub, 'articles', articleObj);
+                return;
+            }
+
+            // For readability, we will use the term section to refer to subfolders
+            const section = fileOrFolder;
+            const articles = [];
+
+            // Each subfolder will be a section containing articles
+            fs.readdirSync(`${docsDir}/articles/${hub}/${section}`).forEach((subArticle) => {
+                articles.push(getArticleObj(subArticle));
+            });
+
+            pushOrCreateEntry(routes.hubs, hub, 'sections', {
+                href: section,
+                title: toTitleCase(section.replaceAll('-', ' ')),
+                articles,
+            });
+        });
+    });
+
+    // Convert the object to YAML and write it to the file
+    let yamlString = yaml.dump(routes);
+    yamlString = disclaimer + yamlString;
+    fs.writeFileSync(`${docsDir}/_data/routes.yml`, yamlString);
+}
+
+try {
+    run();
+} catch (error) {
+    console.error('A problem occurred while trying to read the directories.', error);
+    process.exit(1);
+}

.github/scripts/createDocsRoutes.sh

@@ -0,0 +1,19 @@
+#!/bin/bash
+#
+# Re-compiles the routes.yml required by the docs and verifies that there is no diff,
+# because that would indicate that the PR author forgot to run `npm run createDocsRoutes`
+# and commit the updated routes file.
+
+declare -r GREEN='\033[0;32m'
+declare -r NC='\033[0m'
+
+printf '\nRebuilding docs/routes.yml...\n'
+npm run createDocsRoutes
+SCRIPT_EXIT_CODE=$?
+
+if [[ SCRIPT_EXIT_CODE -eq 1 ]]; then
+    exit 1
+else
+    echo -e "${GREEN}The docs routes files is up to date!${NC}"
+    exit 0
+fi

.github/workflows/deployExpensifyHelp.yml

@@ -0,0 +1,58 @@
+# Deploying the ExpensifyHelp Jekyll site by dynamically generating routes file
+name: Deploy ExpensifyHelp
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
+      - name: Setup NodeJS
+        uses: Expensify/App/.github/actions/composite/setupNode@main
+      - name: Setup Pages
+        uses: actions/configure-pages@f156874f8191504dae5b037505266ed5dda6c382
+      - name: Create docs routes file
+        run: ./.github/scripts/createDocsRoutes.sh
+      - name: Build with Jekyll
+        uses: actions/jekyll-build-pages@0143c158f4fa0c5dcd99499a5d00859d79f70b0e
+        with:
+          source: ./docs/
+          destination: ./docs/_site
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@64bcae551a7b18bcb9a09042ddf1960979799187
+        with:
+          path: ./docs/_site
+
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@af48cf94a42f2c634308b1c9dc0151830b6f190a

.github/workflows/testBuild.yml

@@ -281,7 +281,8 @@ jobs:
           content_android="${content_android//'%'/'%25'}"
           content_android="${content_android//$'\n'/'%0A'}"
           content_android="${content_android//$'\r'/'%0D'}"
-          echo "android_paths=$content_android" >> "$GITHUB_OUTPUT"
+          android_path=$(echo "$content_android" | jq -r '.html_path')
+          echo "android_path=$android_path" >> "$GITHUB_OUTPUT"
 
       - name: Read JSONs with iOS paths
         id: get_ios_path
@@ -291,7 +292,8 @@ jobs:
           content_ios="${content_ios//'%'/'%25'}"
           content_ios="${content_ios//$'\n'/'%0A'}"
           content_ios="${content_ios//$'\r'/'%0D'}"
-          echo "ios_paths=$content_ios" >> "$GITHUB_OUTPUT"
+          ios_path=$(echo "$content_ios" | jq -r '.html_path')
+          echo "ios_path=$ios_path" >> "$GITHUB_OUTPUT"
 
       # This step removes previous comments with links connected to the PR
       - name: maintain-comment
@@ -313,7 +315,7 @@ jobs:
           DESKTOP: ${{ needs.desktop.result }}
           IOS: ${{ needs.iOS.result }}
           WEB: ${{ needs.web.result }}
-          ANDROID_LINK: ${{fromJson(steps.get_android_path.outputs.android_paths).html_path}}
+          ANDROID_LINK: ${{steps.get_android_path.outputs.android_path}}
           DESKTOP_LINK: https://ad-hoc-expensify-cash.s3.amazonaws.com/desktop/${{ env.PULL_REQUEST_NUMBER }}/NewExpensify.dmg
-          IOS_LINK: ${{ fromJson(steps.get_ios_path.outputs.ios_paths).html_path }}
+          IOS_LINK: ${{steps.get_ios_path.outputs.ios_path}}
           WEB_LINK: https://${{ env.PULL_REQUEST_NUMBER }}.pr-testing.expensify.com

.github/workflows/validateDocsRoutes.yml

@@ -0,0 +1,23 @@
+name: Validate Docs Routes File
+
+on:
+  pull_request:
+    types: [opened, synchronize]
+    paths:
+      - docs/**
+
+jobs:
+  verify:
+    if: github.actor != 'OSBotify'
+    runs-on: ubuntu-latest
+    steps:
+      # This action checks-out the repository, so the workflow can access it.
+      - uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
+        with:
+          fetch-depth: 0
+
+      - uses: Expensify/App/.github/actions/composite/setupNode@main
+
+      # Verify that no new hubs were created without adding their metadata to _routes.yml
+      - name: Validate Docs Routes File
+        run: ./.github/scripts/createDocsRoutes.sh

.storybook/public/index.css

@@ -1,24 +1,28 @@
 .search-field *, .sidebar-item, .search-result-item--label {
-    color: #fff !important;
+    color: #E7ECE9 !important;
 }
 
 .sidebar-subheading *, .search-result-item {
-    color: #fff;
+    color: #E7ECE9;
 }
 
 a.sidebar-item > svg {
     color: #03d47c;
 }
 
+a.sidebar-item[data-selected="true"], a.sidebar-item[data-selected="true"]:focus, a.sidebar-item[data-selected="true"]:hover {
+    background: #1A3D32;
+}
+
 .search-result-item--label span {
-    color: #ffffffaa !important;
+    color: #E7ECE9aa !important;
 }
 
 #panel-tab-content :is(input:checked ~ span:last-of-type, input:not(:checked) ~ span:first-of-type) {
-    background: #ff7101;
-    color: #fff;
+    background: #03D47C;
+    color: #E7ECE9;
 }
 
 .sidebar-container {
-    background: #0b1b34;
+    background: #07271f;
 }

.storybook/theme.js

@@ -2,14 +2,22 @@ import {create} from '@storybook/theming';
 import colors from '../src/styles/colors';
 
 export default create({
-    appBg: colors.dark,
-    barSelectedColor: colors.blue,
-    base: 'light',
-    brandTitle: 'Expensify UI Docs',
+    brandTitle: 'New Expensify UI Docs',
     brandImage: 'logomark.svg',
-    colorPrimary: colors.dark,
-    colorSecondary: colors.orange,
     fontBase: 'ExpensifyNeue-Regular',
     fontCode: 'monospace',
-    textInverseColor: colors.black,
+    base: 'dark',
+    appBg: colors.greenHighlightBackground,
+    colorPrimary: colors.greenDefaultButton,
+    colorSecondary: colors.green,
+    appContentBg: colors.greenAppBackground,
+    textColor: colors.white,
+    barTextColor: colors.white,
+    barSelectedColor: colors.green,
+    barBg: colors.greenAppBackground,
+    appBorderColor: colors.greenBorders,
+    inputBg: colors.greenHighlightBackground,
+    inputBorder: colors.greenBorders,
+    appBorderRadius: 8,
+    inputBorderRadius: 8,
 });

__mocks__/react-native-key-command.js

@@ -0,0 +1,13 @@
+const registerKeyCommands = () => {};
+const unregisterKeyCommands = () => {};
+const constants = {};
+const eventEmitter = () => {};
+const addListener = () => {};
+
+export {
+    registerKeyCommands,
+    unregisterKeyCommands,
+    constants,
+    eventEmitter,
+    addListener,
+};

android/app/build.gradle

@@ -106,8 +106,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001030400
-        versionName "1.3.4-0"
+        versionCode 1001030808
+        versionName "1.3.8-8"
     }
 
     splits {