npm package: @hubspire/expo-app
Description: This package helps to setup an Expo project using HubSpire's boilerplate code.
Author: Hosam Ashraf
Latest version: 2.6.8

## Expo Application Template

> This package helps to setup an Expo application using HubSpire's template.

### Prerequisites

Make sure you have:

- set up a bitbucket repository for the project with write access.
- set up a [Sentry](https://sentry.io) account for the project.
- the development, staging and production base API URLs.

### Usage

To create the Expo project using this template, run:

```sh
$ bunx create-expo-app <ProjectName> --template @hubspire/expo-app
```

### Getting Started

> **_NOTE:_** When running scripts, it's important to initiate them from the top-level directory of the project.

#### Project setup

- Create a .env file in root and add these environment variables:

```sh
GIT_REMOTE_URL =
SENTRY_ORG =
SENTRY_PROJECT =
SENTRY_AUTH_TOKEN =
SENTRY_DSN =
DEV_API_URL =
STAGING_API_URL =
PROD_API_URL =
OPENAPI_KEY =
FIGMA_TOKEN =
FIGMA_FILE =
```

Now run:

```sh
$ bun run project-setup
```

- Make sure that you are running this script before making any changes to the project by yourself. This will :
- Create the default environment files with the required environment variables for you. It will also update the env field inside [eas.json](eas.json) with the values you provide during setup.
- Remove/Update some values in the [app.config.ts](app.config.ts), [eas.json](eas.json), [eas-build-on-success.sh](eas-build-on-success.sh) and [package.json](package.json) files which are exclusive for the template project.
- Remove readme file used for the template project.
- Add secret folders and files to gitignore.
- Initialise new repository for the project.
- Publish an initial commit to the remote url you provided.

#### Setup push notification

- Add your google-services.json (3 files for 3 environments) files inside assets/secrets folder.
- Add [environment secrets](https://docs.expo.dev/build-reference/variables/#adding-secrets-with-eas-cli) GOOGLE_SERVICES_JSON with their corresponding values for eas build to have access to these variables.
- Make sure you have set up [server credentials](https://docs.expo.dev/push-notifications/fcm-credentials/) for android.
- Make sure you have enabled push notification and generated APNS key for your iOS build when prompted during eas build.
- Listeners to display notification, deep linking configurations for push notification and a button to send a test notification has been set up in the template.
- Refer this [documentation](https://docs.expo.dev/push-notifications/push-notifications-setup/) for more.

#### EAS

Install eas cli.

```sh
$ bun install -g eas-cli
```

Login to Expo account if you haven't already.

```sh
$ eas login
```

Configure eas build.

```sh
$ bun run build:configure
```

Configure eas update.

```sh
$ bun run update:configure
```

Add environment variables in the Expo account.

Build and run development build using eas

```sh
$ bun run build:dev:eas
```

### Testing

#### Unit Testing: [Jest](https://jestjs.io/)

```sh
$ bun run test:unit
```

#### E2E Testing: [Maestro](https://cloud.mobile.dev/)

```sh
$ bun run test:e2e:dev
```

### CI/CD

#### Bitbucket: [bitbucket-pipelines.yml](bitbucket-pipelines.yml)

> **_NOTE:_** Make sure you have set up the [EXPO_TOKEN](https://docs.expo.dev/accounts/programmatic-access/#personal-access-tokens) environment variable in your repository and [MAESTRO_API_KEY](https://developers.maestro.io/api/key/) as an [environment secret](https://docs.expo.dev/build-reference/variables/#adding-secrets-with-eas-cli).

Commits to **\_release/development** branch will trigger EAS build using **development:e2e** profile.

Commits to **_release/staging_** branch will trigger EAS build using **preview** profile.

Commits to **_release/production_** branch will trigger EAS build using **production** profile.

#### EAS: [eas-build-on-success.sh](eas-build-on-success.sh)

A successful EAS build with the **development:e2e** profile will trigger E2E testing using [Maestro](https://maestro.mobile.dev/). The flows are expected to be located inside the .maestro folder at the top-level directory of the project.

### Work in Progress

This project is actively being developed. Current work in progress includes:

- [ ] Automated component generation from Figma designs
  - [x] Integration with Figma API
  - [x] Component template generation
  - [x] Style extraction and application
  - [x] Generate test cases
  - [x] Generate stories
  - [ ] Prompt optimizations and corrections