@brizy/cms-ui NPM

Build env vars

APP_ORIGIN - You don't need it, is something internal
APP_PROJECT_TYPE - There are 2 environment types: cloud | shopify
APP_SHOPIFY_SUBSCRIPTION_TYPE - There are 4 subscription types: free | silver | gold | platinum.
APP_GRAPHQL_ENDPOINT - Link to CMS api graphql endpoint, example https://your-server.local/graphql
APP_TRANSLATION_ENDPOINT - Link to Translation api graphql endpoint, example https://your-server.local/graphql
APP_TRANSLATION_TOKEN - Translation api token, in case authorization type is by token
APP_APPOINTMENTS_ENDPOINT - Link to Appointments api graphql endpoint, example https://your-server.local/graphql
APP_NOTIFICATIONS_ENDPOINT - Link to Notifications api graphql endpoint, example https://your-server.local/graphql
APP_SHOPIFY_ENDPOINT - Link to shopify api graphql endpoint, example https://your-server.local/graphql
APP_SQUARE_ENDPOINT - Link to square api endpoint, example https://your-server.local
APP_MEDIA_ENDPOINT - Base URL to get media images, example http://www.brizysites.com/media
APP_AIRTABLE_ENDPOINT - Link to airtable api endpoint, example https://your-server.local/graphql
APP_PROJECT_AUTHORIZATION - cookies | token. Default token
APP_USER_SUBSCRIPTION - free | pro. Specify user subscription type.
APP_USER_TOKEN - Required if you want to use Apps.
APP_NOTIFICATIONS_TOKEN - Required for Notifications.
APP_PROTECTED_PAGE_PASSWORD - Optional protected page password.
APP_PROJECT_TOKEN - Required only if APP_PROJECT_AUTHORIZATION is set to token. Bearer Token, example NTliYTVkYTA2NzdjMTkyNWYxNjhmZTIxMjk0MjdmOWE2MWMxOGRjNTRkMDdmMWY3N2RmZTZlODA1YWY3YzY4Mg.
APP_PROJECT_ID - Project Id example /data/4240838
APP_SHOP_URL - Link to shop,example https://site.com
APP_WHITE_LABEL_BRANDING_NAME - White label branding name`
APP_WHITE_LABEL_ABOUT_US_LINK - White label about us link`
APP_WHITE_LABEL_SUPPORT_LINK - White label support link`
APP_WHITE_LABEL_UPDATE_TO_PRO_LINK - White label update to pro link`
APP_TAXES_INFO_LINK = Taxes info link
APP_SHOP_TOKEN - Bearer Token for shop,example NTliYTVkYTA2NzdjMTkyNWYxNjhmZTIxMjk0MjdmOWE2MWMxOGRjNTRkMDdmMWY3N2RmZTZlODA1YWY3YzY4Mg
APP_APPOINTMENTS_TOKEN - Bearer Token for appointments,example NTliYTVkYTA2NzdjMTkyNWYxNjhmZTIxMjk0MjdmOWE2MWMxOGRjNTRkMDdmMWY3N2RmZTZlODA1YWY3YzY4Mg
APP_TRANSLATION_TOKEN - Bearer Token for translations,example NTliYTVkYTA2NzdjMTkyNWYxNjhmZTIxMjk0MjdmOWE2MWMxOGRjNTRkMDdmMWY3N2RmZTZlODA1YWY3YzY4Mg
APP_SHOPIFY_TOKEN - Bearer Token for shopify,example NTliYTVkYTA2NzdjMTkyNWYxNjhmZTIxMjk0MjdmOWE2MWMxOGRjNTRkMDdmMWY3N2RmZTZlODA1YWY3YzY4Mg
APP_SQUARE_TOKEN - Bearer Token for square,example NTliYTVkYTA2NzdjMTkyNWYxNjhmZTIxMjk0MjdmOWE2MWMxOGRjNTRkMDdmMWY3N2RmZTZlODA1YWY3YzY4Mg
APP_PROJECT_SETTINGS_URL - Link to project settings, example https://site.com URL format: https://site.com/[project id]/settings
APP_PREVIEW_URL - Root URL for collections items preview. example https://site.com
APP_DOMAIN_URL - Root URL for collections items domain. example https://site.com URL format: http://site.com/[project id]/preview/[collection item slug]
APP_SHOP_DEFAULT_CHANNEL - Default Channel Code`
APP_TAXES_MAIN_CATEGORY_ID - Main TaxCategory Id`
APP_SUPPORT_LINK_CUSTOM_CSS - Custom Css article support link, example https://site.com
APP_SUPPORT_LINK_CODE_INJECT - Code Inject article support link, example https://site.com
APP_SUPPORT_LINK_WEBHOOKS - Webhooks article support link, example https://site.com
APP_SUPPORT_REDIRECTS - Redirects article support link, example https://site.com
APP_SUPPORT_ACF - ACF article support link, example https://site.com
APP_SUPPORT_USERS - Users article support link, example https://site.com
APP_SUPPORT_ORDERS - Orders article support link, example https://site.com
APP_SUPPORT_DISCOUNTS - Discounts article support link, example https://site.com
APP_SHOP_CUSTOMERS_SLUG - Reference Collection Type Slug, there will be no example. Just create a CollectionType and use it for the reference
APP_SHOP_CATEGORIES_SLUG - Reference Collection Type Slug, there will be no example. Just create a CollectionType and use it for the reference
APP_SHOP_PRODUCTS_SLUG - Reference Collection Type Slug, there will be no example. Just create a CollectionType and use it for the reference
APP_CUSTOMER_EDITOR_URL - Editor URL for Customers`
APP_MODULES_SHOP_DISABLED - Disable Shop module
APP_MODULES_USERS_DISABLED - Disable Users module
APP_ACTIVE_ITEM_ID - Active item Id example /data/4240838
APP_ACTIVE_ITEM_TYPE - collectionItem | customer | ecwidProduct | ecwidCategory. Specify active item type.
APP_SITE_URL - Site url, example https://site.com
APP_BUILDER_VERSION - Builder version is used for shopify project type
APP_ECWID_DAYS_LEFT - Is used in ecwid shop module, example 30
APP_ECWID_SUBSCRIPTION_TYPE - Is used in ecwid shop module, There are 2 types: free | pro
APP_LOCALE - Specify app display language code. E.g.: en, fr
APP_IS_AVAILABLE_PREVIEW_BADGE - Specify if is available "made with" badge: true | false
APP_CLONE_LINK - Specify clone link without id: http://clone-link.com
APP_CLONE_API - Link to Clone Link api endpoint, example https://your-server.local
APP_CLONE_TOKEN - Token for Clone API,example NTliYTVkYTA2NzdjMTkyNWYxNjhmZTIxMjk0MjdmOWE2MWMxOGRjNTRkMDdmMWY3N2RmZTZlODA1YWY3YzY4Mg

Update GraphQL schema

env APP_GRAPHQL_ENDPOINT=http://HOST/api/graphql \
    APP_PROJECT_SETTINGS_URL=http://HOST/project-settings \
    APP_PREVIEW_URL=http://HOST/item-preview npm run graphql:schema:update

Deploy Kubernetes

Same steps as here.

Run with docker

Switch on the desired branch
Build the image: docker build -f dockerfiles/env.Dockerfile -t myimage .
Start:

docker run --detach -p [DESIRED PORT]:80 \
           --env APP_PROJECT_TYPE=[cloud | shopify] \
           --env APP_SHOPIFY_SUBSCRIPTION_TYPE=[free | silver | gold | platinum] \
           --env APP_ACTIVE_ITEM_ID=[ITEM ID] \
           --env APP_ACTIVE_ITEM_TYPE=[collectionItem | customer | ecwidProduct | ecwidCategory] \
           --env APP_GRAPHQL_ENDPOINT=[GRPHQL ENDPOINT URL] \
           --env APP_PROJECT_AUTHORIZATION=token \
           --env APP_PROJECT_TOKEN=[ACCESS TOKEN] \
           --env APP_USER_SUBSCRIPTION=[free | pro] \
           --env APP_USER_TOKEN=[ACCESS TOKEN] \
           --env APP_PROJECT_ID=[PROJECT ID] \
           --env APP_IS_AVAILABLE_PREVIEW_BADGE=[true | false] \
           myimage

Demo:

docker run --detach -p 9000:80 \
           --env APP_PROJECT_TYPE=cloud \
           --env APP_PROJECT_ID=/data/4240838 \
           --env APP_SHOPIFY_SUBSCRIPTION_TYPE=silver \
           --env APP_ACTIVE_ITEM_ID=/collection_items/1153 \
           --env APP_ACTIVE_ITEM_TYPE=collectionItem \
           --env APP_GRAPHQL_ENDPOINT=http://api.office.brizy.org/graphql \
           --env APP_PROJECT_AUTHORIZATION=token \
           --env APP_PROJECT_TOKEN=eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIzOGd4ZTNuY2ZneXM4czg0Y2N3NDh3bzBrc293NDRnMCIsImp0aSI6ImFhOTA4NjU3YzkxYzMxYTIzZjY0NjgwZWQyOTBiNjVkNjAyNjk2M2RmNmFmZTg3MWJjMjU5YzE1MWE0ODM3YjNjMTk3MGUxODUxYmM0YjM4IiwiaWF0IjoxNjA2MTM5NjMyLCJuYmYiOjE2MDYxMzk2MzIsImV4cCI6MTYzNzY3NTYzMiwic3ViIjoiMTU4MDY1Iiwic2NvcGVzIjpbInByb2plY3QiXX0.KdJBOPM-vK3mjAmoMtiqmT21EsYd69jtqIejvJuISVjlIF7AArEQ3Vzlr6zH7LxHY0aqjo_oWg9eAP0FWrH1x7n52IthVLnhW1ws2FVh3cf6EReYLGIet5mnw0-2w_EfedNul9_HJaXxVcdT_Y8WufC0ioQQUeTxoCycHLzPKgo \
           --env APP_USER_SUBSCRIPTION=free \
           --env APP_USER_TOKEN=eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiI0dXk4MG13bHZoOGc0bzRrdzBzd2tvczRjczRzYzQ4ayIsImp0aSI6IjI4ZTlhZjQ1YTJhYmYyMGNiZDQxMzAxZDk4Y2JlNTY0NmVkZTVmZGZlYzM2OGUzYmM5ZmMyMmM1YzczYTA3YWU1MmY2MGRkNDM0YTAyMTc4IiwiaWF0IjoiMTYxNTI3ODc2OC4xOTY1OTkiLCJuYmYiOiIxNjE1Mjc4NzY4LjE5NjYwNCIsImV4cCI6IjE2NDY4MTQ3NjcuNjYzNTU3Iiwic3ViIjoiMTU4MDY1Iiwic2NvcGVzIjpbInVzZXIiXX0.VahSEDONaN0rMVBaW3eb8DKlJzTrqAKRoSU8y4EuD5a_mA2LShR-kgkJrOn-a7u30oIhLAWH6AXQZDaD33Gvfc2pNOR0ke2YXULW6pBKZC-WOAxwgc07bSq0YLdAvop0uSN3mYHts5oP8ZSBY5HPQlFYWe0LxTr4b3c3TKzHNlc \
           --env APP_WHITE_LABEL_BRANDING_NAME=Brizy \
           --env APP_WHITE_LABEL_ABOUT_US_LINK=http://brizy.io \
           --env APP_WHITE_LABEL_UPDATE_TO_PRO_LINK=https://site.com \
           --env APP_WHITE_LABEL_SUPPORT_LINK=https://site.com \
           --env APP_TAXES_INFO_LINK=https://site.com \
           --env APP_MEDIA_ENDPOINT=http://www.brizysites.com/media \
           --env APP_PREVIEW_URL=http://test.com/preview \
           --env APP_DOMAIN_URL=http://test.com/domain \
           --env APP_PROJECT_SETTINGS_URL=http://brizy.io \
           --env APP_SHOP_URL=http://sylius.office.brizy.org/ \
           --env APP_SHOP_DEFAULT_CHANNEL=FASHION_WEB \
           --env APP_TAXES_MAIN_CATEGORY_ID=/api/v2/admin/tax-categories/other \
           --env APP_SHOP_TOKEN=eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJpYXQiOjE2MjY4NTE3NzEsImV4cCI6MTYyNjk1MTc3MCwicm9sZXMiOlsiUk9MRV9BRE1JTklTVFJBVElPTl9BQ0NFU1MiLCJST0xFX0FQSV9BQ0NFU1MiXSwidXNlcm5hbWUiOiJhcGkifQ.vzYfwTkJa9ZgBiHHSWfeTUXdpGasD6yugmPUL7Hk3eoxn0DqoqyKD9fvdDVd5NtbWhK2254zFlcKplw4nK3pma1-DTIcW66EqMbO7ySB1fpnxPZuWwETce3ihpJ3OEEzt0xVxyFM0hwneituMI6dcR0c_Ks2D69BR2wIGmjwL0njqX-3vv4hpQVgu3grRJMVVVAbUoUHabOaupklyTPybuoI8A0rAKJ5QOhhr3TJf3MEscubCd5i-riVJg0rOevlI-6eI69QxKojOA16jzN8SErpsHViEOsX8EJJQr9MG2T-l91CoFX9yTwlzf76Bg6J4jcPVHg55pdvAq5nipYnsQ \
           --env APP_PROTECTED_PAGE_PASSWORD="pass" \
           --env APP_IS_AVAILABLE_PREVIEW_BADGE=true \
           myimage

Github deployment

There are moments when you need the deployment of your PR on github to have some specific environment variables, with other values then the default provided or secrets.

For this yu need to create a .sh file with your branch name in .github/workflows/ci_cd/env, and there specify the variables your want to overwrite.

E.g.

Let's say that your branch name is 3456-shopify-gold-subscription Create a file .github/workflows/ci_cd/env/3456-shopify-gold-subscription.sh. Add content:

#!/usr/bin/env bash

APP_PROJECT_TYPE=shopify
APP_SHOPIFY_SUBSCRIPTION_TYPE=gold

New version

1. New fixes branch

New version usually is created from current fixes-* branch. First of all you need to switch to the current version tag. Let's say current version in package.json file is 0.7.7. That means that current fixes branch name is fixes-0.7.8(because fixes branch name is the name of the next version), also means that you need to switch to v0.7.7 tag (this is the start of the current version).

git checkout v0.7.7

From here you need to create next fixes branch, it's name is next version from current fixes branch, so it will be fixes-0.7.9.

# Create branch
git checkout -b fixes-0.7.9

# And push it on the server
git push --set-upstream origin fixes-0.7.9

We create next fixes branch from latest tag, just because we need after that to merge current fixes branch in to new fixes branch. This will change the base of all open PRs attached to current fixes branch, to new fixes branch, so ou'll not have to do this manually. Note: As you will see next, this merge should be done from github interface, not from local computer terminal.

2. Release new version

Now we need to create new version from current fixes branch.

# Switch to current fixes branch:
git checkout fixes-0.7.8

# make sure you have the latest changes
git pull

# Update new localization.
# Make sure this command will run properly and will end with code `0`. Otherwise resolve the problem then continue.
# More info about how to resolve problems check out on Localization section in this document
npm run i18n

# If there are new strings, commit the updated localization files
git add .
git commit -m "Updated localization"

# Create new version using `npm version` command, https://docs.npmjs.com/cli/v8/commands/npm-version
# This command will increase the version in `package.json`&`package-lock.json` files, will commit the changes in git, also will create new git tag with new version.
npm version patch

# Push new version on github
git push origin fixes-0.7.8
git push --tags

3. Push new docker image on DockerHUB

Create new image

docker build -f dockerfiles/iframe.Dockerfile -t brizy/cms-ui:[VERSION TAG NAME] .

In our example case

docker build -f dockerfiles/iframe.Dockerfile -t brizy/cms-ui:v0.7.8 .

Wait until the build finishes. Also make sure it finishes with code 0

Push image on docker hub

docker push brizy/cms-ui:v0.7.8

Merge current fixes branch in next fixes branch

Go on github, and create a pull request from current fixes branch (in out case from fixes-0.7.8).
Set the base to new the new fixes branch
Merge pull request in new fixes branch and delete merged branch

Create new milestone

Go to github milestones page, (https://github.com/bagrinsergiu/brizy-cms-ui/milestones)
Create new milestone (click New milestone button)
Set it's title in ucrent format 0. Fixes-[VERISON NUMBER WITHOUT PATCH NUMBER]-[DAY.MONTH]. In our example it will be 0. Fixes-0.7-30.06
In Due date (optional) filed set the next monday

In Description field set this text

Branch: `[NEW FIXES BRANCH]`
From Tag: `[CURRENT TAG]`
Next Tag: `[NEXT TAG]`

In our example

Branch: `fixes-0.7.9`
From Tag: `v0.7.8`
Next Tag: `v0.7.9`

Click Create milestone
Open old milestone for current version
Check all open issues
Click on Milestone button
Pick new created milestone. This way you'll transfer all issues from current milestone to the new one.
Got back to milestones and close the all milestone

Announce in #cms-ui Discord channel about new release, with such message

@everyone 
`fixes-0.7.8` released
New fixes branch: `fixes-0.7.9`
New Fixes Milestone: `1. Fixes-0.7-30.06`

Localization

Localization allows to translate static strings from project in different languages, depending on locale code.

Localization usage

In this project the locale code is in Conext.locale parameter. It can be passed via post message by editor (usually in production), in locale property, or by environment variable: APP_LOCALE

In order to make strings translatable, we need to use the t function.

For rect components we use useTranslation hook.

import { useTranslation } from "~/locale/useTranslation";

function MyComponent() {
  const { t } = useTranslation();
  
  return <div>{t("Hello World!!!")}</div>
}

In case we need t function outside of a React component, we need to pass the t function as parameter. In case that function is called from a react component, sure we will take the t functin from useTranslation hook and pass it. In cas the function is called from an observable middleware or reducer, then usually middlewares and reducers get this function as dependecy. See already implemented observables. Note: We are trying to make all string translable from components. So make sure to avoid translating from reducers or middlewares.

Interpolation

If you want to fill the static string with some dynamic content, then you need to do proper interpolation:

import { useTranslation } from "~/locale/useTranslation";

function MyComponent({ firstName, lastName }) {
  const { t } = useTranslation();
  
  return <div>{t("Hello {{firstName}} {{lastName}}! How are you?", {firstName, lastName})}</div>
}

Generate translatable strings

All translatable strings are saved in /locales/default.json. In case new strings are added, we need to mae sure that they ar added in this file too. They should not be added in default.json manually, there is a special command for this npm run i18n.

Whenever you add new translatable strings, before you commit your changes run npm run i18n. Make sure the command did run properly and end with code 0. If something goes wrong, it will give an error. Unfortunately the error message is not descriptive at all. So you have to find the error by your self. Scroll in terminal logs generated by npm run i18n

Usually the log line look something like this:

[read]    /home/h/www/brizy-cms-ui/src/utils/sideBarTab.ts

But when something wrong happens it will look like this:

[error]    /home/h/www/brizy-cms-ui/src/utils/sideBarTab.ts
[warning]    /home/h/www/brizy-cms-ui/src/utils/sideBarTab.ts

Open the file and find out wat's wrong with t function usage. The common mistake is to use t string templates that have variables. You need to fix this by using proper interpolation. (Check out Interpolation section).