Merge branch 'typescript-snippets' of github.com:commercetools/mercha…

…nt-center-application-kit into typescript-snippets

website/src/code-examples/api-reference/application-config/environment-prop.js

@@ -0,0 +1,8 @@
+import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
+
+const MyComponent = () => {
+  const applicationName = useApplicationContext(
+    (context) => context.environment.applicationName
+  );
+  return <div>{`Welcome to the application ${applicationName}!`}</div>;
+};

website/src/code-examples/api-reference/application-config/environment-prop.tsx

@@ -0,0 +1,8 @@
+import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
+
+const MyComponent = () => {
+  const applicationName = useApplicationContext(
+    (context) => context.environment.applicationName
+  );
+  return <div>{`Welcome to the application ${applicationName}!`}</div>;
+};

website/src/code-examples/api-reference/commercetools-frontend-permissions/use-is-authorized.js

@@ -0,0 +1,13 @@
+import { useIsAuthorized } from '@commercetools-frontend/permissions';
+
+const CreateButton = () => {
+  const canManage = useIsAuthorized({
+    demandedPermissions: ['ManageAvengers'],
+  });
+  return (
+    <PrimaryButton
+      isDisabled={!canManage}
+      // ...
+    />
+  );
+};

website/src/code-examples/api-reference/commercetools-frontend-permissions/use-is-authorized.tsx

@@ -0,0 +1,13 @@
+import { useIsAuthorized } from '@commercetools-frontend/permissions';
+
+const CreateButton = () => {
+  const canManage = useIsAuthorized({
+    demandedPermissions: ['ManageAvengers'],
+  });
+  return (
+    <PrimaryButton
+      isDisabled={!canManage}
+      // ...
+    />
+  );
+};

website/src/code-examples/migrating-from-project-level-custom-applications/constants.js

@@ -0,0 +1,5 @@
+import { entryPointUriPathToPermissionKeys } from '@commercetools-frontend/application-shell/ssr';
+
+export const entryPointUriPath = 'avengers';
+
+export const PERMISSIONS = entryPointUriPathToPermissionKeys(entryPointUriPath);

website/src/code-examples/migrating-from-project-level-custom-applications/constants.ts

@@ -0,0 +1,5 @@
+import { entryPointUriPathToPermissionKeys } from '@commercetools-frontend/application-shell/ssr';
+
+export const entryPointUriPath = 'avengers';
+
+export const PERMISSIONS = entryPointUriPathToPermissionKeys(entryPointUriPath);

website/src/code-examples/migrating-from-project-level-custom-applications/custom-application-config.js

@@ -0,0 +1,11 @@
+import { entryPointUriPath, PERMISSIONS } from './src/constants';
+
+const config = {
+  entryPointUriPath,
+  mainMenuLink: {
+    // ...
+    permissions: [PERMISSIONS.View],
+  },
+  // ...
+};
+export default config;

website/src/code-examples/migrating-from-project-level-custom-applications/custom-application-config.ts

@@ -0,0 +1,12 @@
+import { entryPointUriPath, PERMISSIONS } from './src/constants';
+import type { ConfigOptions } from '@commercetools-frontend/application-config';
+
+const config: ConfigOptions = {
+  entryPointUriPath,
+  mainMenuLink: {
+    // ...
+    permissions: [PERMISSIONS.View],
+  },
+  // ...
+};
+export default config;

website/src/code-examples/migrating-from-project-level-custom-applications/permissions.js

@@ -0,0 +1,8 @@
+import { useIsAuthorized } from '@commercetools-frontend/permissions';
+import { PERMISSIONS } from '../../constants';
+
+const MyComponent = () => {
+  const canView = useIsAuthorized({
+    demandedPermissions: [PERMISSIONS.View],
+  });
+};

website/src/code-examples/migrating-from-project-level-custom-applications/permissions.tsx

@@ -0,0 +1,8 @@
+import { useIsAuthorized } from '@commercetools-frontend/permissions';
+import { PERMISSIONS } from '../../constants';
+
+const MyComponent = () => {
+  const canView = useIsAuthorized({
+    demandedPermissions: [PERMISSIONS.View],
+  });
+};

website/src/content/api-reference/application-config.mdx

@@ -687,16 +687,10 @@ It is recommended to always pass the value to the `<ApplicationShell>`.
 
 The `environment` prop is parsed and injected into a React Context, making it available to the entire application. To access it, use the `@commercetools-frontend/application-shell-connectors` package.
 
-```jsx
-import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
-
-const MyComponent = () => {
-  const applicationName = useApplicationContext(
-    context => context.environment.applicationName
-  );
-  return (<div>{`Welcome to the application ${applicationName}!`}</div>);
-};
-```
+<MultiCodeExample>
+  <CodeExample language="jsx" path="api-reference/application-config/environment-prop.js" />
+  <CodeExample language="tsx" path="api-reference/application-config/environment-prop.tsx" />
+</MultiCodeExample>
 
 <Info>
 

website/src/content/api-reference/commercetools-frontend-permissions.mdx

@@ -36,21 +36,10 @@ A React hook that evaluates the [Custom Application requested user permissions](
 
 ### Usage
 
-```jsx
-import { useIsAuthorized } from '@commercetools-frontend/permissions';
-
-const CreateButton = () => {
-  const canManage = useIsAuthorized({
-    demandedPermissions: ['ManageAvengers']
-  });
-  return (
-    <PrimaryButton
-      isDisabled={!canManage}
-      // ...
-    />
-  );
-}
-```
+<MultiCodeExample>
+  <CodeExample language="jsx" path="api-reference/commercetools-frontend-permissions/use-is-authorized.js" />
+  <CodeExample language="tsx" path="api-reference/commercetools-frontend-permissions/use-is-authorized.tsx" />
+</MultiCodeExample>
 
 ### Options
 

website/src/content/migrating-from-project-level-custom-applications.mdx

@@ -190,28 +190,19 @@ Use the `entryPointUriPathToPermissionKeys` to automatically compute the permiss
 
 </Info>
 
-```js title="constants.js"
-import { entryPointUriPathToPermissionKeys } from '@commercetools-frontend/application-shell/ssr';
-
-export const entryPointUriPath = 'avengers';
-
-export const PERMISSIONS = entryPointUriPathToPermissionKeys(entryPointUriPath);
-```
+<MultiCodeExample title="Constants">
+  <CodeExample language="js" path="migrating-from-project-level-custom-applications/constants.js" />
+  <CodeExample language="ts" path="migrating-from-project-level-custom-applications/constants.ts" />
+</MultiCodeExample>
 
 The `PERMISSIONS` variable contains a `View` and `Manage` properties, with the values being the computed values based on the `entryPointUriPath`.
 
 Next, replace the user permissions with the `PERMISSIONS` variable.
 
-```js highlightLines="6"
-import { useIsAuthorized } from '@commercetools-frontend/permissions';
-import { PERMISSIONS } from '../../constants';
-
-const MyComponent = () => {
-  const canView = useIsAuthorized({
-    demandedPermissions: [PERMISSIONS.View],
-  });
-};
-```
+<MultiCodeExample>
+  <CodeExample language="jsx" path="migrating-from-project-level-custom-applications/permissions.js" highlightLines={[6]} />
+  <CodeExample language="tsx" path="migrating-from-project-level-custom-applications/permissions.tsx" highlightLines={[6]} />
+</MultiCodeExample>
 
 Furthermore, replace the user permissions in the menu links `permissions` field in the Custom Application config.
 
@@ -225,20 +216,12 @@ Furthermore, replace the user permissions in the menu links `permissions` field
 
 <Info>
 
-Given that you have defined the `constants` variables as described above, to avoid duplicating and hardcoding the `entryPointUriPath` and user permission values you can choose to use the `.mjs` extension for the Custom Application config file, instead of `.json`. This allows you to import the variables from the `constants` file and reference them in the configuration. See [supported file extensions](/api-reference/application-config#supported-file-extensions) for more information.
-
-```js title="custom-application-config.mjs"
-import { entryPointUriPath, PERMISSIONS } from './src/constants';
+Given that you have defined the `constants` variables as described above, to avoid duplicating and hardcoding the `entryPointUriPath` and user permission values you can choose to use the `.mjs` (or `.ts`) extension for the Custom Application config file, instead of `.json`. This allows you to import the variables from the `constants` file and reference them in the configuration. See [supported file extensions](/api-reference/application-config#supported-file-extensions) for more information.
 
-const config = {
-  entryPointUriPath,
-  mainMenuLink: {
-    permissions: [PERMISSIONS.View]
-  },
-  // ...
-};
-export default config;
-```
+<MultiCodeExample title="custom-application-config">
+  <CodeExample language="js" path="migrating-from-project-level-custom-applications/custom-application-config.js" />
+  <CodeExample language="ts" path="migrating-from-project-level-custom-applications/custom-application-config.ts" />
+</MultiCodeExample>
 
 </Info>