feat(starter-template): add starter template in TypeScript

[kark]

Summary

The aim of this PR is to add a stater template in TypeScript.

Closes #2297
Ref: #1668

[changeset-bot]

🦋 Changeset detected

Latest commit: 8a61737

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 33 packages

Name	Type
@commercetools-frontend/application-config	Minor
@commercetools-frontend/sdk	Minor
@commercetools-frontend/application-components	Minor
merchant-center-application-template-starter-typescript	Minor
@commercetools-frontend/create-mc-app	Minor
merchant-center-application-template-starter	Minor
@commercetools-frontend/i18n	Minor
@commercetools-frontend/application-shell	Minor
@commercetools-frontend/cypress	Minor
@commercetools-frontend/mc-dev-authentication	Minor
@commercetools-frontend/mc-html-template	Minor
@commercetools-frontend/mc-scripts	Minor
playground	Patch
@commercetools-local/visual-testing-app	Patch
@commercetools-website/components-playground	Patch
@commercetools-backend/eslint-config-node	Minor
@commercetools-backend/express	Minor
@commercetools-backend/loggers	Minor
@commercetools-frontend/actions-global	Minor
@commercetools-frontend/application-shell-connectors	Minor
@commercetools-frontend/assets	Minor
@commercetools-frontend/babel-preset-mc-app	Minor
@commercetools-frontend/browser-history	Minor
@commercetools-frontend/constants	Minor
@commercetools-frontend/eslint-config-mc-app	Minor
@commercetools-frontend/jest-preset-mc-app	Minor
@commercetools-frontend/jest-stylelint-runner	Minor
@commercetools-frontend/l10n	Minor
@commercetools-frontend/notifications	Minor
@commercetools-frontend/permissions	Minor
@commercetools-frontend/react-notifications	Minor
@commercetools-frontend/sentry	Minor
@commercetools-frontend/url-utils	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Deploy preview for merchant-center-application-kit ready!

✅ Preview
https://merchant-center-application-ccbxm4k22-commercetools.vercel.app
https://appkit-sha-b445289fe54f8eaad466a444d368450622a850b9.commercetools.vercel.app
https://appkit-pr-2615.commercetools.vercel.app

Built with commit 8a61737.
This pull request is being automatically deployed with vercel-action

[CarlosCortizasCT]

Super awesome job 💪

I just left some questions/suggestions for better understanding.

[CarlosCortizasCT]

I was wondering if we could use the Channel our test-data package provides instead of creating this whole directory.
(maybe as a follow-up task)

[kark]

I actually tried that and with the current implementation of the Channel model in @commercetools-test-data/channel I was not able to get the gql response modelled properly. I haven’t worked with test-data repo much (perhaps I did not use it properly) but it seems that the Transformer in its current shape does not allow to customize the name like:

import * as Channel from "@commercetools-test-data/channel";

const channel = Channel.random()
  .name(LocalizedString.presets.empty().en(name))
  .key("some-key")
  .buildGraphql();

The name is always randomly generated so I wouldn’t be able to test the channel name update.

[emmenko]

Can you show what the error is?

And yes, we should use the model from the test-data.

[kark]

Oh, there’s no error. It only works differently. I created a playground to isolate the issue.
TL;DR: channels transformer from @commercetools-test-data/channel works differently from the current solution - nameAllLocales is random, not based on the provided name

[CarlosCortizasCT]

Yes, it seems something needs to be adjusted in the test-models package.
We even have some preset channels over there which doesn't seem to return the expected data:

import * as Channel from "@commercetools-test-data/channel";

const channel: TChannel = Channel.presets.foodStore().buildGraphql();

console.log(
  "channel test data:",
  {
    key: channel.key,
    name: JSON.stringify(channel.name),
    nameAllLocales: JSON.stringify(channel.nameAllLocales)
  }
);

// This is what it renders: (expected other localized names)
channel test data:
{
  key: "food-store-key",
  name: "{}",
  nameAllLocales: "[
    {"locale":"de","value":"distinctio nihil magni ut deleniti","__typename":"LocalizedString"},
    {"locale":"en","value":"sint aut est","__typename":"LocalizedString"},
    {"locale":"fr","value":"eos nihil ratione est","__typename":"LocalizedString"}
  ]"
}

[kark]

As suggested, I used Channel data model from @commercetools-test-data/channel in tests (updated in 05150c1).

As noted 👆to make all test cases work (also including parts testing name and nameAllLocales that I removed for the time being) that repo would have to be refactored and it seems to me some breaking changes would need to be introduced there (and I guess to other packages in the test data repo too). I don’t feel 100% confident about those changes 😕 as I don't understand why the implementation of the model transformers is different in the first place.

I was wondering if that could be done as a follow up once @emmenko is back.

[CarlosCortizasCT]

Totally agree about working on the test-data repo in a different task as a follow up. However, I would personally keep the tests with our local test-data utilities until we can use the external ones.

[Rhotimee]

Good job 🙌🏽
I left some minor suggestions.

[Rhotimee]

NIT: Why use the angle brackets here?
Do you mean <TabHeader />?

[emmenko]

It's just my way of indicating that it's a React component, same as HTML elements are usually documented (e.g. <div>, etc.)