From c13fd06eb9e098d68019c008fdf8cb80d843a0c7 Mon Sep 17 00:00:00 2001 From: Nicola Molinari Date: Wed, 29 Jun 2022 21:31:11 +0200 Subject: [PATCH] docs: add release note for v21.8 --- .changeset/angry-days-swim.md | 2 +- .changeset/quick-plums-wonder.md | 4 +- .changeset/quick-rocks-rhyme.md | 2 +- .changeset/red-trainers-behave.md | 4 +- .changeset/silver-cobras-switch.md | 2 +- ...-frontend-application-shell-connectors.mdx | 28 +++++++++++ website/src/content/getting-started.mdx | 2 + .../src/releases/2022-07/release-v21.8.mdx | 48 +++++++++++++++++++ 8 files changed, 85 insertions(+), 7 deletions(-) create mode 100644 website/src/releases/2022-07/release-v21.8.mdx diff --git a/.changeset/angry-days-swim.md b/.changeset/angry-days-swim.md index 64444d6030..ce8654b821 100644 --- a/.changeset/angry-days-swim.md +++ b/.changeset/angry-days-swim.md @@ -14,7 +14,7 @@ function MyComponent() { return (
-

Project images regex: {imageRegex}

+

Project images regex: {JSON.stringify(imageRegex)}

); } diff --git a/.changeset/quick-plums-wonder.md b/.changeset/quick-plums-wonder.md index 30ccd05e98..f7804a22da 100644 --- a/.changeset/quick-plums-wonder.md +++ b/.changeset/quick-plums-wonder.md @@ -2,8 +2,8 @@ '@commercetools-frontend/application-shell': patch --- -Fixed aria role names. +Fixed ARIA role names. We were using invalid role names in some of the component's elements. -Special mention to the element wrapping the notifications as it now uses the aria-live [attribute](https://www.w3.org/TR/wai-aria/#aria-live) (with **polite** value). +Special mention to the element wrapping the notifications as it now uses the `aria-live` [attribute](https://www.w3.org/TR/wai-aria/#aria-live) (with **polite** value). diff --git a/.changeset/quick-rocks-rhyme.md b/.changeset/quick-rocks-rhyme.md index 3a63251476..2156d98770 100644 --- a/.changeset/quick-rocks-rhyme.md +++ b/.changeset/quick-rocks-rhyme.md @@ -2,4 +2,4 @@ '@commercetools-frontend/assets': patch --- -Convert entry point to typescript +Convert entry point to typescript. diff --git a/.changeset/red-trainers-behave.md b/.changeset/red-trainers-behave.md index 66700f78cf..d3d87af5a6 100644 --- a/.changeset/red-trainers-behave.md +++ b/.changeset/red-trainers-behave.md @@ -1,5 +1,5 @@ --- -"@commercetools-frontend/application-shell": patch +'@commercetools-frontend/application-shell': patch --- -Fix `ApplicationShell` header selectors a11y issues +Fix `` header selectors accessibility issues. diff --git a/.changeset/silver-cobras-switch.md b/.changeset/silver-cobras-switch.md index 832c483371..72ef068de4 100644 --- a/.changeset/silver-cobras-switch.md +++ b/.changeset/silver-cobras-switch.md @@ -2,4 +2,4 @@ '@commercetools-frontend/application-shell-connectors': patch --- -Export `TImageRegexContext` type +Export `TImageRegexContext` type. diff --git a/website/src/content/api-reference/commercetools-frontend-application-shell-connectors.mdx b/website/src/content/api-reference/commercetools-frontend-application-shell-connectors.mdx index 991370cb88..a665e4b4fc 100644 --- a/website/src/content/api-reference/commercetools-frontend-application-shell-connectors.mdx +++ b/website/src/content/api-reference/commercetools-frontend-application-shell-connectors.mdx @@ -215,6 +215,34 @@ This component must be defined in a parent component where children of this comp | `skip` | `boolean` | - | - | false | Disables loading images configuration. | +### useProjectExtensionImageRegex + +A React hook that allows to access the project images configuration. + +```jsx highlightLines="4-6" +import { useProjectExtensionImageRegex } from '@commercetools-frontend/application-shell-connectors'; + +function MyComponent() { + const { isLoading, imageRegex } = useProjectExtensionImageRegex(); + + if (isLoading) return ; + + return ( +
+

Project images regex: {JSON.stringify(imageRegex)}

+
+ ); +} + +function MyApp() { + return ( + + + + ); +} +``` + ### GetProjectExtensionImageRegex Use this component to access the project images configuration, using a `render` prop function. diff --git a/website/src/content/getting-started.mdx b/website/src/content/getting-started.mdx index aa7e5e77e0..4ce197a7f6 100644 --- a/website/src/content/getting-started.mdx +++ b/website/src/content/getting-started.mdx @@ -24,6 +24,8 @@ npx @commercetools-frontend/create-mc-app \ --template starter ``` +If you want to start with a [TypeScript](https://www.typescriptlang.org/) project you can use the `--template=starter-typescript` option. Read more about TypeScript in the [Adding TypeScript](/development/adding-typescript) page. + Local development and login are only allowed for users being part of the `Administrators` Team of your Organization. Therefore, choose a Project that is part of an Organization where you are an administrator of. diff --git a/website/src/releases/2022-07/release-v21.8.mdx b/website/src/releases/2022-07/release-v21.8.mdx new file mode 100644 index 0000000000..cf6eb2f624 --- /dev/null +++ b/website/src/releases/2022-07/release-v21.8.mdx @@ -0,0 +1,48 @@ +--- +date: 2022-07-04 +title: Custom Applications v21.8 +description: The Application Kit packages have been released with several new features. +type: feature +topics: + - CLI + - Configuration + - Templates + - UI Components +--- + +The Application Kit packages have been released with a minor version `v21.8`. + +This release includes several new features that we would like to present: + +* Official support for developing Custom Applications in [TypeScript](https://www.typescriptlang.org/), including a new starter template. Read more about TypeScript in the [Adding TypeScript](/development/adding-typescript) page. +* New policy option for configuring the `audience` field when [integrating your Custom Application with an external API](/concepts/integrate-with-your-own-api#configuring-the-audience-policy). +* Improved accessibility of different elements to use correct ARIA attributes. +* Simpler and more readable list of time zone data, available from the `@commercetools-frontend/l10n` package. +* New React hook `useProjectExtensionImageRegex` for accessing the project images configuration, available from the `@commercetools-frontend/application-shell-connectors` package. + +As always, if you have questions or feedback you can open a [GitHub Discussion](https://github.com/commercetools/merchant-center-application-kit/discussions) or a [GitHub Issue](https://github.com/commercetools/merchant-center-application-kit/issues). + + + +# Deprecations + +The `mc-scripts` CLI has deprecated some entry points. + +Importing the function `createPostcssConfig` from the main entry point `@commercetools-frontend/mc-scripts` is now deprecated. Use the entry point `@commercetools-frontend/mc-scripts/postcss` instead. + +```diff +const { + createPostcssConfig, +-} = require('@commercetools-frontend/mc-scripts'); ++} = require('@commercetools-frontend/mc-scripts/postcss'); +``` + +Importing the functions `createWebpackConfigForDevelopment` and `createWebpackConfigForProduction` from the main entry point `@commercetools-frontend/mc-scripts` is now deprecated. Use the entry point `@commercetools-frontend/mc-scripts/webpack` instead. + +```diff +const { + createWebpackConfigForDevelopment, + createWebpackConfigForProduction, +-} = require('@commercetools-frontend/mc-scripts'); ++} = require('@commercetools-frontend/mc-scripts/webpack'); +```