docs: application shell connectors

commercetools · Jun 14, 2022 · fb53ce0 · fb53ce0
1 parent 9db0c0d
commit fb53ce0
Show file tree

Hide file tree

Showing 9 changed files with 218 additions and 85 deletions.
diff --git a/.../commercetools-frontend-application-shell-connectors/get-project-extension-image-regex.js b/.../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/...commercetools-frontend-application-shell-connectors/get-project-extension-image-regex.tsx b/...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/...-reference/commercetools-frontend-application-shell-connectors/use-application-context.js b/...-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/...reference/commercetools-frontend-application-shell-connectors/use-application-context.tsx b/...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/...reference/commercetools-frontend-application-shell-connectors/with-application-context.js b/...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/...eference/commercetools-frontend-application-shell-connectors/with-application-context.tsx b/...eference/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/...commercetools-frontend-application-shell-connectors/with-project-extension-image-regex.js b/...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/...ommercetools-frontend-application-shell-connectors/with-project-extension-image-regex.tsx b/...ommercetools-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/...c/content/api-reference/commercetools-frontend-application-shell-connectors.mdx b/...c/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