From fb53ce0e62443bfb1dab55554627c29e221e3612 Mon Sep 17 00:00:00 2001
From: Kacper Krzywiec <krzywiec@gmail.com>
Date: Tue, 14 Jun 2022 12:10:22 +0200
Subject: [PATCH] docs: application shell connectors

---
 .../get-project-extension-image-regex.js      |  28 +++++
 .../get-project-extension-image-regex.tsx     |  28 +++++
 .../use-application-context.js                |  15 +++
 .../use-application-context.tsx               |  15 +++
 .../with-application-context.js               |  16 +++
 .../with-application-context.tsx              |  29 +++++
 .../with-project-extension-image-regex.js     |  31 ++++++
 .../with-project-extension-image-regex.tsx    |  40 +++++++
 ...-frontend-application-shell-connectors.mdx | 101 +++---------------
 9 files changed, 218 insertions(+), 85 deletions(-)
 create mode 100644 website/src/code-examples/api-reference/commercetools-frontend-application-shell-connectors/get-project-extension-image-regex.js
 create mode 100644 website/src/code-examples/api-reference/commercetools-frontend-application-shell-connectors/get-project-extension-image-regex.tsx
 create mode 100644 website/src/code-examples/api-reference/commercetools-frontend-application-shell-connectors/use-application-context.js
 create mode 100644 website/src/code-examples/api-reference/commercetools-frontend-application-shell-connectors/use-application-context.tsx
 create mode 100644 website/src/code-examples/api-reference/commercetools-frontend-application-shell-connectors/with-application-context.js
 create mode 100644 website/src/code-examples/api-reference/commercetools-frontend-application-shell-connectors/with-application-context.tsx
 create mode 100644 website/src/code-examples/api-reference/commercetools-frontend-application-shell-connectors/with-project-extension-image-regex.js
 create mode 100644 website/src/code-examples/api-reference/commercetools-frontend-application-shell-connectors/with-project-extension-image-regex.tsx

diff --git a/website/src/code-examples/api-reference/commercetools-frontend-application-shell-connectors/get-project-extension-image-regex.js b/website/src/code-examples/api-reference/commercetools-frontend-application-shell-connectors/get-project-extension-image-regex.js
new file mode 100644
index 0000000000..bcce2b5859
--- /dev/null
+++ b/website/src/code-examples/api-reference/commercetools-frontend-application-shell-connectors/get-project-extension-image-regex.js
@@ -0,0 +1,28 @@
+import {
+  GetProjectExtensionImageRegex,
+  ProjectExtensionProviderForImageRegex,
+} from '@commercetools-frontend/application-shell-connectors';
+
+function MyComponent() {
+  return (
+    <GetProjectExtensionImageRegex
+      render={({ isLoading, imageRegex }) => {
+        if (isLoading) return <LoadingSpinner />;
+
+        return (
+          <div>
+            <h1>Project images regex: {imageRegex}</h1>
+          </div>
+        );
+      }}
+    />
+  );
+}
+
+function MyApp() {
+  return (
+    <ProjectExtensionProviderForImageRegex>
+      <MyComponent />
+    </ProjectExtensionProviderForImageRegex>
+  );
+}
diff --git a/website/src/code-examples/api-reference/commercetools-frontend-application-shell-connectors/get-project-extension-image-regex.tsx b/website/src/code-examples/api-reference/commercetools-frontend-application-shell-connectors/get-project-extension-image-regex.tsx
new file mode 100644
index 0000000000..bcce2b5859
--- /dev/null
+++ b/website/src/code-examples/api-reference/commercetools-frontend-application-shell-connectors/get-project-extension-image-regex.tsx
@@ -0,0 +1,28 @@
+import {
+  GetProjectExtensionImageRegex,
+  ProjectExtensionProviderForImageRegex,
+} from '@commercetools-frontend/application-shell-connectors';
+
+function MyComponent() {
+  return (
+    <GetProjectExtensionImageRegex
+      render={({ isLoading, imageRegex }) => {
+        if (isLoading) return <LoadingSpinner />;
+
+        return (
+          <div>
+            <h1>Project images regex: {imageRegex}</h1>
+          </div>
+        );
+      }}
+    />
+  );
+}
+
+function MyApp() {
+  return (
+    <ProjectExtensionProviderForImageRegex>
+      <MyComponent />
+    </ProjectExtensionProviderForImageRegex>
+  );
+}
diff --git a/website/src/code-examples/api-reference/commercetools-frontend-application-shell-connectors/use-application-context.js b/website/src/code-examples/api-reference/commercetools-frontend-application-shell-connectors/use-application-context.js
new file mode 100644
index 0000000000..f19db9f1e2
--- /dev/null
+++ b/website/src/code-examples/api-reference/commercetools-frontend-application-shell-connectors/use-application-context.js
@@ -0,0 +1,15 @@
+import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
+
+const DisplayLocale = () => {
+  const dataLocale = useApplicationContext(
+    (applicationContext) => applicationContext.dataLocale
+  );
+
+  return (
+    <div>
+      <h1>Current data locale: {dataLocale}</h1>
+    </div>
+  );
+};
+
+export default DisplayLocale;
diff --git a/website/src/code-examples/api-reference/commercetools-frontend-application-shell-connectors/use-application-context.tsx b/website/src/code-examples/api-reference/commercetools-frontend-application-shell-connectors/use-application-context.tsx
new file mode 100644
index 0000000000..f19db9f1e2
--- /dev/null
+++ b/website/src/code-examples/api-reference/commercetools-frontend-application-shell-connectors/use-application-context.tsx
@@ -0,0 +1,15 @@
+import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
+
+const DisplayLocale = () => {
+  const dataLocale = useApplicationContext(
+    (applicationContext) => applicationContext.dataLocale
+  );
+
+  return (
+    <div>
+      <h1>Current data locale: {dataLocale}</h1>
+    </div>
+  );
+};
+
+export default DisplayLocale;
diff --git a/website/src/code-examples/api-reference/commercetools-frontend-application-shell-connectors/with-application-context.js b/website/src/code-examples/api-reference/commercetools-frontend-application-shell-connectors/with-application-context.js
new file mode 100644
index 0000000000..4472bd5551
--- /dev/null
+++ b/website/src/code-examples/api-reference/commercetools-frontend-application-shell-connectors/with-application-context.js
@@ -0,0 +1,16 @@
+import { withApplicationContext } from '@commercetools-frontend/application-shell-connectors';
+import { Component } from 'react';
+
+class DisplayLocale extends Component {
+  render() {
+    return (
+      <div>
+        <h1>Current data locale: {this.props.dataLocale}</h1>
+      </div>
+    );
+  }
+}
+
+export default withApplicationContext((applicationContext) => ({
+  dataLocale: applicationContext.dataLocale,
+}))(DisplayLocale);
diff --git a/website/src/code-examples/api-reference/commercetools-frontend-application-shell-connectors/with-application-context.tsx b/website/src/code-examples/api-reference/commercetools-frontend-application-shell-connectors/with-application-context.tsx
new file mode 100644
index 0000000000..9655b98044
--- /dev/null
+++ b/website/src/code-examples/api-reference/commercetools-frontend-application-shell-connectors/with-application-context.tsx
@@ -0,0 +1,29 @@
+import {
+  withApplicationContext,
+  type TApplicationContext,
+} from '@commercetools-frontend/application-shell-connectors';
+import { Component } from 'react';
+
+type TOwnProps = {
+  // ...
+};
+
+type TMappedProps = {
+  dataLocale: TApplicationContext<{}>['dataLocale'];
+};
+
+class DisplayLocale extends Component<TOwnProps & TMappedProps> {
+  render() {
+    return (
+      <div>
+        <h1>Current data locale: {this.props.dataLocale}</h1>
+      </div>
+    );
+  }
+}
+
+export default withApplicationContext<TMappedProps, {}, {}>(
+  (applicationContext) => ({
+    dataLocale: applicationContext.dataLocale,
+  })
+)(DisplayLocale);
diff --git a/website/src/code-examples/api-reference/commercetools-frontend-application-shell-connectors/with-project-extension-image-regex.js b/website/src/code-examples/api-reference/commercetools-frontend-application-shell-connectors/with-project-extension-image-regex.js
new file mode 100644
index 0000000000..28d422ab2a
--- /dev/null
+++ b/website/src/code-examples/api-reference/commercetools-frontend-application-shell-connectors/with-project-extension-image-regex.js
@@ -0,0 +1,31 @@
+import {
+  withProjectExtensionImageRegex,
+  ProjectExtensionProviderForImageRegex,
+} from '@commercetools-frontend/application-shell-connectors';
+import { Component } from 'react';
+
+class MyComponent extends Component {
+  render() {
+    const { imageRegexData } = this.props;
+    return (
+      <div>
+        <h2>Project images regex is loading?: {imageRegexData.isLoading}</h2>
+        <h2>
+          Project images regex: {JSON.stringify(imageRegexData.imageRegex)}
+        </h2>
+      </div>
+    );
+  }
+}
+
+const WrappedComponent = withProjectExtensionImageRegex()(MyComponent);
+
+class MyApp extends Component {
+  render() {
+    return (
+      <ProjectExtensionProviderForImageRegex>
+        <WrappedComponent />
+      </ProjectExtensionProviderForImageRegex>
+    );
+  }
+}
diff --git a/website/src/code-examples/api-reference/commercetools-frontend-application-shell-connectors/with-project-extension-image-regex.tsx b/website/src/code-examples/api-reference/commercetools-frontend-application-shell-connectors/with-project-extension-image-regex.tsx
new file mode 100644
index 0000000000..8e8f1f4ede
--- /dev/null
+++ b/website/src/code-examples/api-reference/commercetools-frontend-application-shell-connectors/with-project-extension-image-regex.tsx
@@ -0,0 +1,40 @@
+import {
+  withProjectExtensionImageRegex,
+  ProjectExtensionProviderForImageRegex,
+} from '@commercetools-frontend/application-shell-connectors';
+import type { TImageRegexContext } from '@commercetools-frontend/application-shell-connectors/dist/declarations/src/components/project-extension-image-regex/project-extension-image-regex';
+import { Component } from 'react';
+
+type TOwnProps = {
+  // ...
+};
+
+type TMappedProps = {
+  imageRegexData?: TImageRegexContext;
+};
+
+class MyComponent extends Component<TOwnProps & TMappedProps> {
+  render() {
+    const { imageRegexData } = this.props;
+    return (
+      <div>
+        <h2>Project images regex is loading?: {imageRegexData?.isLoading}</h2>
+        <h2>Project images regex: {imageRegexData?.imageRegex}</h2>
+      </div>
+    );
+  }
+}
+
+const WrappedComponent = withProjectExtensionImageRegex<
+  TOwnProps & TMappedProps
+>()(MyComponent);
+
+export class MyApp extends Component {
+  render() {
+    return (
+      <ProjectExtensionProviderForImageRegex>
+        <WrappedComponent />
+      </ProjectExtensionProviderForImageRegex>
+    );
+  }
+}
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..e3b0bf964c 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
@@ -144,46 +144,19 @@ The `context.environment` object will then include the `trackingSentry` property
 
 A React hook that allows to access the `ApplicationContext` and selectively pick the necessary properties.
 
-```jsx highlightLines="4-6"
-import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
-
-const DisplayLocale = () => {
-  const dataLocale = useApplicationContext((context) =>
-    applicationContext.dataLocale
-  );
-  render() {
-    return (
-      <div>
-        <h1>Current data locale: {dataLocale}</h1>
-      </div>
-    );
-  }
-}
-
-export default DisplayLocale;
-```
+<MultiCodeExample>
+  <CodeExample language="jsx" path="api-reference/commercetools-frontend-application-shell-connectors/use-application-context.js" highlightLines={[4,5,6]} />
+  <CodeExample language="tsx" path="api-reference/commercetools-frontend-application-shell-connectors/use-application-context.tsx" highlightLines={[4,5,6]} />
+</MultiCodeExample>
 
 ### withApplicationContext
 
 A higher-order component (HOC) that allows to access the `ApplicationContext` and selectively pick the necessary properties. This is the equivalent of the React hook `useApplicationContext`.
 
-```jsx highlightLines="13-15"
-import { withApplicationContext } from '@commercetools-frontend/application-shell-connectors';
-
-class DisplayLocale extends React.Component {
-  render() {
-    return (
-      <div>
-        <h1>Current data locale: {this.props.dataLocale}</h1>
-      </div>
-    );
-  }
-}
-
-export default withApplicationContext((applicationContext) => ({
-  dataLocale: applicationContext.dataLocale
-}))(DisplayLocale);
-```
+<MultiCodeExample>
+  <CodeExample language="jsx" path="api-reference/commercetools-frontend-application-shell-connectors/with-application-context.js" highlightLines={[14,15,16]} />
+  <CodeExample language="tsx" path="api-reference/commercetools-frontend-application-shell-connectors/with-application-context.tsx" highlightLines={[25,26,27,28,29]} />
+</MultiCodeExample>
 
 # Project image settings
 
@@ -219,31 +192,10 @@ This component must be defined in a parent component where children of this comp
 
 Use this component to access the project images configuration, using a `render` prop function.
 
-```jsx
-function MyComponent() {
-  return (
-    <GetProjectExtensionImageRegex
-      render={({ isLoading, imageRegex }) => {
-        if (isLoading) return <LoadingSpinner />;
-
-        return (
-          <div>
-            <h1>Project images regex: {imageRegex}</h1>
-          </div>
-        );
-      }}
-    />
-  );
-}
-
-function MyApp() {
-  return (
-    <ProjectExtensionProviderForImageRegex>
-      <MyComponent />
-    </ProjectExtensionProviderForImageRegex>
-  );
-}
-```
+<MultiCodeExample>
+  <CodeExample language="jsx" path="api-reference/commercetools-frontend-application-shell-connectors/get-project-extension-image-regex.js" />
+  <CodeExample language="tsx" path="api-reference/commercetools-frontend-application-shell-connectors/get-project-extension-image-regex.tsx" />
+</MultiCodeExample>
 
 #### Properties
 
@@ -284,31 +236,10 @@ type TImageRegexContext = {
 
 A higher-order component (HOC) to access the image regex configuration.
 
-```jsx
-class MyComponent extends React.Component {
-  render() {
-    const { imageRegexData } = this.props;
-    return (
-      <div>
-        <h2>Project images regex is loading?: {imageRegexData.isLoading}</h2>
-        <h2>Project images regex: {imageRegexData.imageRegex}</h2>
-      </div>
-    );
-  }
-}
-
-const WrappedComponent = withProjectExtensionImageRegex()(MyComponent);
-
-class MyApp extends React.Component {
-  render() {
-    return (
-      <ProjectExtensionProviderForImageRegex>
-        <MyComponent />
-      </ProjectExtensionProviderForImageRegex>
-    );
-  }
-}
-```
+<MultiCodeExample>
+  <CodeExample language="jsx" path="api-reference/commercetools-frontend-application-shell-connectors/with-project-extension-image-regex.js" />
+  <CodeExample language="tsx" path="api-reference/commercetools-frontend-application-shell-connectors/with-project-extension-image-regex.tsx" />
+</MultiCodeExample>
 
 #### Properties