tinalabs / react-tinacms-i18n Goto Github PK

Install required deps:

npm i tina-scripts rollup rollup-plugin-commonjs rollup-plugin-replace rollup-plugin-typescript2 rollup-plugin-uglify typescript typescript-plugin-styled-components

Then update package scripts:

  "scripts": {
    "start": "npm run watch",
    "watch": "tinacms-scripts watch",
    "dev": "tinacms-scripts dev",
    "build": "tinacms-scripts build",
    "test": "jest --passWithNoTests"
  }

Then update "main" and "types" of package.json:

  "main": "build/index.js",
  "types": "build/index.d.ts",

Add a custom action for blocks controls to allow managing an “active” localization for blocks.

This allows the developer to expose these controls to end users, and get and display the correct data on demand.

It should support 2 modes:

a hot swap, and a “display all” toggle mode.

Hot swap is a drop down as a radio list.

Toggle mode is a drop down as a checkbox list.

We want a:

• tinacms-i18n package that contains:
  • only the vanilla JS logic (e.g, the api client)
• react-tinacms-i18n package that contains:
  • react abstractions for this suite, plus;
  • re-exports tinacms-i18n

If you provide bare languages and regionalized languages, it seems like you can't select the languages:

[
  {
     language: "en",
  },
  {
     language: "fr",
  },
  {
     language: "en",
     region: "PE"
  },
  {
     language: "fr",
     region: "PE"
  }
]

Set default on the provider or when constructing the API, and it will default to that language on load, UNLESS currentLocale is applied, in which case that is used instead.

react-tinacms-prompts is its own repo so it can be taken out of this one

• update readme
• update code to import tina-cms-prompts

This should change the repo name and the npm name

Let's eliminate the react api class inheriting from the vanilla one, and instead move it's business logic into the TinaI18nProvider

instead of the language referring to the language code, it should refer to the code and a label.
Example:
Instead of

locale  = {
  region: "ca",
  language: "en",
}

it should be

locale = {
  region: {
         code: 'ca',
         label: 'Canada'
    },
   language: {
      code: 'en',
      label: 'English' 
   }
}

There should also be a way to fetch this data async

See: https://react.i18next.com/

Right now we default to:

• Showing a list of regions (if present) + a list of languages w/o region
• Selecting a region results in a push to a sub-menu to select the language for that region
• Selecting a language w/o region selects that locale

We want:

• Context to take an "sortBy" prop, which can be language, region
• If sortBy is language, then the initial list is all languages, and:
  • If that language has regions, we push to a menu that lets you select the raw language (if it is a locale on its own) or the regionalized language
• If sortBy is region, we keep the current behaviour, but move languages w/o regions to the top of the list instead of the bottom.

the useTranslation hook should only return the translation function and not the localization api

It appears when a region has multiple languages, we get the region listed for every language it exists for

I can't share the example on the forum as it's returning a 404
https://tinalabs.github.io/react-tinacms-i18n/example/

There's an issue with the build command
https://github.com/tinalabs/react-tinacms-i18n/runs/1937074958#step:5:6

See: https://tina.io/docs/plugins/screens/

user should be able to select two documents and view them side by side.