[expo] add typedoc

**Summary**

We want to document our codebase with typedoc.

**Test**

- yarn lint

**Issue**

- N/A

docs/.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+    "markdownlint.config": {
+        "$schema": "https://raw.githubusercontent.com/DavidAnson/markdownlint/v0.34.0/schema/markdownlint-config-schema.json",
+        "commands-show-output": false
+    }
+}

docs/expo/development.md → docs/expo/build.md

@@ -1,34 +1,36 @@
-# iOS/Android development
+# Build - iOS/Android development
 
-To develop iOS/Android applications, you need to have
+You need a IPA/APK for development purpose (a.k.a adhoc build). This document describes how to build IPA/APK for development.
+
+## Prerequisites
+
+To build IPA/APK, you need to have the following accounts and projects and get familliar with them. This document don't show the basic procedure of these services.
 
 - [expo.dev](https://expo.dev/) project
 - [Firebase](https://firebase.google.com/) project
 
-and get familiar with them. This document don't show the basic procedure of these services.
-
 ## Start to work on the expo directory
 
-```
+```shell
 $ cd expo/
 $ yarn install
 $ yarn expo login
 ```
 
 ## Define your config name
 
+**You can skip this step if you have access to Expo Project for [dev](https://expo.dev/accounts/yssk22/projects/hpapp).**
+
 We use `yourconfig` in this doc as an example. We use `dev` in development build for repository owners, and use `prod` in production build. Open Source contributors need their own config name.
 
-```
+```shell
 $ export HPAPP_CONFIG_NAME=yourconfig
 $ cp -r ./config/dev ./config/$HPAPP_CONFIG_NAME
 ```
 
-## Update configuration
-
 ### app.config.js
 
-Edit `./config/$HPAPP_CONFIG_NAME/app.config.js`. It's important to update the following configurations to adjust your EAS environment. You should have an Expo project at this stage.
+Edit `./config/$HPAPP_CONFIG_NAME/app.config.js`. It's important to update the following configurations to adjust your Expo project.
 
 - `config.slug`
 - `config.extra.eas.projectId`
@@ -39,15 +41,13 @@ Edit `./config/$HPAPP_CONFIG_NAME/app.config.js`. It's important to update the f
 
 Edit `./config/$HPAPP_CONFIG_NAME/eas.json`. You just need to replace `"dev"` with `${HPAPP_CONFIG_NAME}`
 
-## Put your secrets under your config directory
-
 ### Firebase configuration file
 
 You need to obtain `GoogleService-Info.plist` and `google-services.json` from your Firebase project as described in [the Help Center article](https://support.google.com/firebase/answer/7015592).
 
 Once you get these files, put them in `./config/$HPAPP_CONFIG_NAME/` directory and upload them as EAS credential.
 
-```
+```text
 $ yarn eas secret:create --scope project --name DEV_GOOGLE_SERVICES_JSON --type file --value ./config/dev/google-services.json
 $ yarn eas secret:create --scope project --name DEV_GOOGLE_SERVICES_INFO_PLIST --type file --value ./config/dev/GoogleService-Info.plist
 ```
@@ -60,7 +60,7 @@ If you use Firebase Authentication with AppCheck, you need to configure AppCheck
 
 `secrets.json` is a file to define application specific configuratons which we don't want to share with others. You need to put it under `./config/$HPAPP_CONFIG_NAME/secrets.json` as well. The file is something like that.
 
-```
+```json
 {
   "extra": {
     "hpapp": {
@@ -78,31 +78,20 @@ If you use Firebase Authentication with AppCheck, you need to configure AppCheck
 
 then upload it to the EAS server as a file secret.
 
-```
+```shell
 $ yarn eas secret:create --scope project --name DEV_SECRETS_JSON --type file --value ./config/dev/secrets.json
 ```
 
 ## Create a development build on EAS
 
 It's now ready to kick the development build process.
 
-```
-$ ./scripts/eas-build.sh
-```
-
-The script start the build proces only for iOS by default. If you want to build Android as well, you can use HPAPP_CONFIG_PLATFORM.
-
-For the very first build, you may need to setup project credentials such as Distribution Certificate, Provisioning Proile, Push Notification Key, ...etc. You can pass HPAPP_CONFIG_INTERACTIVE=1 to setup these credentials interactively.
-
-```
-
-```
-
-$ HPAPP_CONFIG_PLATFORM=android ./scripts/eas-build.sh
-
+```shell
+$ ./scripts/eas-build-pre-install.sh
+$ ./scripts/eas.sh build --profile ${HPAPP_CONFIG_NAME} --platform ios
 ```
 
-The script simply copy `eas.json` from the config directory and run `yarn eas build --profile ${HPAPP_CONFIG_NAME} --platform ${HPAPP_CONFIG_PLATFORM} --non-interactive` command.
+The `./scripts/eas.sh` simply copy `eas.json` from the config directory to the root eas.json file and run `yarn eas`. For the very first build, you may need to setup project credentials such as Distribution Certificate, Provisioning Proile, Push Notification Key, ...etc. From the second build, you can add --non-interactive to skip the setup process.
 
 Once the build is completed, you can download and install the build on your device.
 
@@ -114,23 +103,14 @@ so that your react native packager to bind with the address.
 
 Note that your_container_address can be the same sa your host IP if you use the port forwarding in vscode Remote Container Development.
 
-```
-
+```shell
 $ export REACT_NATIVE_PACKAGER_HOSTNAME={your_container_address}
-
 ```
 
 Then you can start the devclient with the following command.
 
-```
-
+```shell
 $ yarn start
-
 ```
 
 Now it's time to launch your development build and connect your environment to test the app!
-
-## Expo Go client to develop
-
-This may or may not work.
-```

docs/expo/index.md

@@ -0,0 +1,54 @@
+# Expo
+
+Mobile Application is built on top of [Expo](https://expo.dev) framework with TypeScript.
+We also use paid [EAS service](https://expo.dev/eas) to build and submit buids to platform stores.
+
+## File Structure
+
+Main source code is located in `expo` directory and files at the root of the `expo` directory are configuration files for the Expo framework (`App.tsx` is an entry point). Here are brief explanations of each file/directory.
+
+### `assets`
+
+`assets` is a direcotry that contains any static assets icluding images, fonts, etc. If you want to have a feature specific assets, you can create `assets/{feature-name}` directory and put assets there.
+
+### `config`
+
+`config` is a direcotry that contains build configurations. `config/{env}/` is for the specific environment configurations to override `prod` configurations. You can refer to [build](./build.md) doc to see how to create a new build with the configurations.
+
+Note that you should not include any sensitive information (such as API keys) in this directory but use Expo's enviroment variables instead.
+
+### `features`
+
+`features` directory is to organize user-facing features. Each feature should have its own directory and contain all the components, hooks, and screens related to the feature.
+
+```text
+features/
+  {featurename}/
+    components/
+    hooks/
+    tests/
+```
+
+### `foundation`
+
+`foundation` is a directory that contains TypeScript foundations. These are utilitise for builtin types such as `Date`, `Error`, `Function`, ...etc. Each module here should not depends on any other third party libraries includig `react` or `expo`.
+
+### `generated`
+
+`generated`: a directory that contains auto generated code such as `schema.graphql`.
+
+### `scripts`
+
+`scripts` is a directory that contains scripts to automate development tasks.
+
+### `system`
+
+`system` is a direcotry that provides the wrapper framework for third party libraries such as kvs, i18n, ...etc. Each module here should not have any React components nor React hooks.
+
+## Coding Standards
+
+- Do not use `../` or `./` in module imports. Use `@hpapp/` instead.
+
+## See also 
+
+- [typedoc](./typedoc/index.html)

docs/expo/typedoc/.nojekyll

@@ -0,0 +1 @@
+TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false.

docs/expo/typedoc/assets/highlight.css

@@ -0,0 +1,22 @@
+:root {
+    --light-code-background: #FFFFFF;
+    --dark-code-background: #1E1E1E;
+}
+
+@media (prefers-color-scheme: light) { :root {
+    --code-background: var(--light-code-background);
+} }
+
+@media (prefers-color-scheme: dark) { :root {
+    --code-background: var(--dark-code-background);
+} }
+
+:root[data-theme='light'] {
+    --code-background: var(--light-code-background);
+}
+
+:root[data-theme='dark'] {
+    --code-background: var(--dark-code-background);
+}
+
+pre, code { background: var(--code-background); }