Fitbit locale helper

The goal of this library is to make easier the localization of Fitbit apps & clockfaces by generating .po files instead of bundling all translations in .js files Fitbit Guide

Features

• Generate date strings (Month & Weekdays) using date-fns
• Merge extra .po files (For example, the ones from Kiezel Pay)

Installation

Install the library with npm i fitbit-locale-helper or yarn add fitbit-locale-helper

How to generate

Create a fitbitLocaleHelper.json in the root of your project.

| Attribute | Description | Default |
| --- | --- | --- | | srcRootFolder | If you have a custom build, set where your app, companion and/or settings are (in relation from where the script is executed) | '' | | languages | List of languages you want to generate | If this value is not set, will generate all 18 currently supported languages |

Example

{
  "srcRootFolder": "",
  "languages": ["es-ES", "en-US", "fr-FR"]
}

If you need dates

Set dateTimes array in the configuration file. Add as many settings as you need for your app.

| Attribute | Description | Values | Required |
| --- | --- | --- | --- | | folder | Section where you need the translations | app, settings, companion | true | | type | Date type | weekDay, month | true | | format | date-fns format to generate | See Date-fns docs | true | | prefix, suffix | How you want the keys to be generated | Anything you like | false |

prefix & suffix are optional. If NONE of them are set, will default to {prefix='week', suffix=''} or {prefix='month', suffix=''} If any of the values are set, those will be used instead. The keys will be generated like: 'prefix' + number + 'suffix' so you can retrieve the key like: 'prefix' + date.getMonth() + 'suffix'

Example

{
  "srcRootFolder": "",
  "languages": ["es-ES", "en-US", "fr-FR"],
  "dateTimes": [
    {
      "folder": "app",
      "type": "weekDay",
      "format": "EEE",
      "prefix": "week"
    },
    {
      "folder": "app",
      "type": "month",
      "format": "MMMM",
      "prefix": "month"
    }
  ]
}

Output example

week0 => "Sun" 
week1 => "Mon"
week2 => "Tue"  
week3 => "Wed"
week4 => "Thu"
week5 => "Fri" 
week6 => "Sat" 
month0 => "January"
month1 => "February"
month2 => "March"
month3 => "April"
month4 => "May"
month5 => "June"
month6 => "July"
month7 => "August"
month8 => "September"
month9 => "October"
month10 => "November"
month11 => "December"

If you have any existing .po files

Set localesFolder in the configuration file. Create the folder and add the extra .po files in the required subfolders.

Create required subfolders (locales/app, locales/companion, locales/settings) and add the .po files to them with the language set in the name.

Example

{
  "srcRootFolder": "",
  "languages": ["es-ES", "en-US", "fr-FR"],
  "dateTimes": [],
  "localesFolder": "locales"
}

root
└── fitbitLocaleHelper.json
└── locales
|   └── app
|       └── en-US.po
|       └── es-ES.po
|   └── settings
|       └── en-US.po
|       └── es-ES.po
└── app
    └── index.js

Usage

To generate the files just execute from the project root (or where the config file is)

npx fitbit-locale-generate

After generating the translations, you will have the new .po files inside a i18n subfolder inside your app, settings or companion folders. To use them you will have to use the i18n API provided by Fitbit

App or Companion usage example

import {gettext} from "i18n";

const weekElement = document.getElementById("weekElement");
const monthElement = document.getElementById("monthElement");

const now = new Date(); // Better use clock API

weekElement.text = gettext(`week${now.getDay()}`);
monthElement.text = gettext(`month${now.getMonth()}`);

Settings usage example

import { gettext } from "i18n";

function Settings() {
  return (
    <Page>
      <Section
        title={<Text bold align="center">{'Show like: ' + gettext('week3')}</Text>}>
        <Toggle
          settingsKey="toggleExample"
          label={gettext('toggleLabel')}
        />
      </Section>
    </Page>
  );
}

registerSettingsPage(Settings);