npm package: @skypager/ui-copy-manager
Description: sync your ui copy with google spreadsheets.
Author: Jon Soeder
Latest version: 1.2.4

# UI Content / Copy Management Demo 

Easily edit all of the string literals in your source code project (UI Copy / Content) 
from a google spreadsheet.

![Demo](./ui-copy-manager-sync.gif)

This is an example of a script which uses the following skypager components:

- [Document Helper](../../helpers/document) - treat each JS and Markdown file as a database 
- [Google Sheet Helper](../../helpers/google-sheet) - turn any google sheet into javascript objects, change the object, change the sheet.

It uses a [Google Spreadsheet](https://docs.google.com/spreadsheets/d/1VaxyqqBXHQ4xmqfsUHf6_zkcYDf3saiuMkB5xKDwxpQ/edit#gid=0) where each row 
corresponds to a source code location in your project.  We're only interested in certain string literals for this example.

Once it puts all of these values in the sheet, you or somebody else can edit the sheet, and apply those edits back to the source code using these scripts.


## Required Setup

You'll need

1) a Service Account JSON
2) The Google Drive and Google Sheets APIs
3) Google Sheets shared with the `client_email` from the service account.

### Server to Server Auth

Using this module requires using interacting with Google APIs using their server to server auth method, which is powered by Service Account credentials.

A Service Account credential looks like:

```json
{
  "type": "service_account",
  "project_id": "your-project-id",
  "private_key_id": "your-private-key-id",
  "private_key": "-----BEGIN PRIVATE KEY-----\nYOUR-PRIVATE_KEY\n-----END PRIVATE KEY-----\n",
  "client_email": "some-random-email@your-project-id.iam.gserviceaccount.com",
  "client_id": "your-client-id",
  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
  "token_uri": "https://oauth2.googleapis.com/token",
  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/your-project-id.iam.gserviceaccount.com"
}
```

You can manage your Service Accounts by going to the [Google Cloud Console](https://console.cloud.google.com/) and creating a project or selecting the one you want to work with.

Once you are there, under the `IAM & admin` section you can click on `Service Accounts`. (e.g. `https://console.cloud.google.com/iam-admin/serviceaccounts?project=your-project-id`)

Create a service account, and download the JSON to `secrets/serviceAccount.json`, or some other path.

You'll use this service account when activating the helper, as you'll see in [USAGE](#usage).

### Enable Google APIs

You'll also need to enable the Google Drive and Google Sheets APIs.  

In the Google Cloud Console, under `APIs and Services` choose `Library` (e.g. `https://console.cloud.google.com/apis/library?project=your-project-id`)

### Share Your Sheets

With the server to server auth set up, the last step is to share the sheets you want to load with the service account client email you'll be using to access them.

You can find the email address in `client_id` property of the service account json

## Usage 

You can run the following command to start the web application with hot module reloading, and open it in a browser

```shell
$ yarn dev --open
```

You can run the next command to open the google sheet

```shell
$ skypager sync --open 
```

Running the following will read all of the React Components in your project, parse their AST to find string literals, and publishes each instance to google sheets.

```shell
$ skypager sync 
```

Running the following will read the google sheet, and apply any changes it needs to the React Components so that they are in sync.

```shell
$ skypager sync inbound
```

If you get stuck

```shell
$ skypager sync help
```


## How It Works

[See The Walkthrough](WALKTHROUGH.md)

You can even confirm that the walkthrough is valid! This command uses the [Test Code Blocks Script](../../helpers/document/scripts/test-code-blocks.js)

```shell
$ GCLOUD_PROJECT=skypager-4dab8 skypager test-code-blocks WALKTHROUGH.md --test-helpers @skypager/devtools/testing/mocha-test-setup
```

Which results in the following output:

```
UI Copy Manager Walkthrough

     Step Zero: We setup the project to use the google sheet helper

     Step One: Uses @skypager/helpers-document to parse your React Components

     Step Two: Find all of the StringLiteral or JSXAttribute nodes in the file

     Step Three: Get the string value, and create an entry for this node in the spreadsheet

4/4 tests PASSED
```