Apply prettier to cookbook

.eslintignore

@@ -1,2 +1,3 @@
+cookbook/src/gatsby-theme-carbon/**
+dist/**
 node_modules/**
-dist/**

.prettierignore

@@ -0,0 +1,2 @@
+cookbook/.cache/**
+cookbook/src/gatsby-theme-carbon/**

cookbook/.markdownlint.json

@@ -7,5 +7,5 @@
   "MD033": false,
   "MD040": false,
   "no-trailing-spaces": true,
-  "MD024": { "siblings_only": true}
+  "MD024": { "siblings_only": true }
 }

cookbook/gatsby-browser.js

@@ -1 +1 @@
-import './src/styles/index.scss';
+import "./src/styles/index.scss";

cookbook/gatsby-config.js

@@ -1,30 +1,29 @@
-const siteTitle = 'Merative SPM UI Addon Development Environment'
-
-var sitePrefix = process.env.SITE_PREFIX || "/spm-ui-addon-devenv"
-console.log(`Using SITE_PREFIX: '${sitePrefix}'`)
+const siteTitle = "Merative SPM UI Addon Development Environment";
+const sitePrefix = process.env.SITE_PREFIX || "/spm-ui-addon-devenv";
 
 module.exports = {
   siteMetadata: {
     title: siteTitle,
-    description: 'Merative Social Program Management UI Addon Development Environment',
-    keywords: 'merative,curam,containers',
+    description:
+      "Merative Social Program Management UI Addon Development Environment",
+    keywords: "merative,curam,containers",
   },
   pathPrefix: sitePrefix,
   plugins: [
     {
-      resolve: 'gatsby-plugin-manifest',
+      resolve: "gatsby-plugin-manifest",
       options: {
         name: siteTitle,
         short_name: siteTitle,
         start_url: sitePrefix,
-        background_color: '#ffffff',
-        theme_color: '#0062ff',
-        display: 'browser',
-        icon: 'node_modules/gatsby-theme-carbon/src/images/favicon.svg'
+        background_color: "#ffffff",
+        theme_color: "#0062ff",
+        display: "browser",
+        icon: "node_modules/gatsby-theme-carbon/src/images/favicon.svg",
       },
     },
     {
-      resolve: 'gatsby-theme-carbon',
+      resolve: "gatsby-theme-carbon",
       options: {
         isSearchEnabled: true,
         withWebp: true,

cookbook/src/data/nav-items.yaml

@@ -1,6 +1,6 @@
 - title: Overview
   pages:
-     - path: /overview
+    - path: /overview
 - title: Setting up for development
   pages:
     - title: Prerequisites and supported software
@@ -32,10 +32,10 @@
       path: /deployment
     - title: Customizing the Case Overview
       path: /extend-case-overview
-# - title: Integrating components with UIM
-#  pages:
-#    - title: Integrating components with the UIM page
-#      path: /integrate-addon-in-uim
+  # - title: Integrating components with UIM
+  #  pages:
+  #    - title: Integrating components with the UIM page
+  #      path: /integrate-addon-in-uim
   hasDivider: true
 - title: Reference
   pages:

cookbook/src/pages/404.js

@@ -1,10 +1,10 @@
-import React from 'react';
-import { FourOhFour } from 'gatsby-theme-carbon';
+import React from "react";
+import { FourOhFour } from "gatsby-theme-carbon";
 
 const links = [
-  { href: '/components/markdown', text: 'Markdown' },
-  { href: '/components/Aside', text: 'Aside' },
-  { href: '/components/demo', text: 'Demo' },
+  { href: "/components/markdown", text: "Markdown" },
+  { href: "/components/Aside", text: "Aside" },
+  { href: "/components/demo", text: "Demo" },
 ];
 
 const Custom404 = () => <FourOhFour links={links} />;

cookbook/src/pages/build.mdx

@@ -3,16 +3,15 @@ title: Building during development
 description: Building components during development
 ---
 
-Build your components in your development environment during development. For more information about commands and command configuration, see the [Command reference](command-reference). 
-
+Build your components in your development environment during development. For more information about commands and command configuration, see the [Command reference](command-reference).
 
 1. Build your component. Ideally, run this command each time you add new files to the repository.
 
-   ``` 
+   ```
    npm run build
    ```
 
-2. Run a development build to integrate the component with the web client application. Any updates you make to existing files while the development build is running are reflected in the application. 
+2. Run a development build to integrate the component with the web client application. Any updates you make to existing files while the development build is running are reflected in the application.
 
    If you don't use the GraphQL mock service, use this command to run the development build. The GraphQL data from the REST Service is used.
 
@@ -21,7 +20,7 @@ Build your components in your development environment during development. For mo
    ```
 
    If you use the GraphQL mock service, use this command to run the development build. The command is the same as the `npm run dev` command, but prioritizes the data from the mock GraphQL service over the real REST Service when running in Social Program Management.
- 
+
    ```
    export GRAPHQL_SERVER_URL=http://localhost:4000/graphql && npm run dev-with-mockgraphql
    ```

cookbook/src/pages/command-reference.mdx

@@ -23,7 +23,7 @@ After you run the command, any JavaScript or SCSS files that are updated are aut
 export GRAPHQL_SERVER_URL=http://localhost:4000/graphql && npm run dev-with-mockgraphql
 ```
 
-This command is the same as the `npm run dev` command, but prioritizes the data from the mock GraphQL service over the real REST Service when running in SPM.  It requires the `CLIENT_DIR` environment variable to be set.
+This command is the same as the `npm run dev` command, but prioritizes the data from the mock GraphQL service over the real REST Service when running in SPM. It requires the `CLIENT_DIR` environment variable to be set.
 
 ```
 npm run test

cookbook/src/pages/development-environment.mdx

@@ -5,30 +5,30 @@ description: Development environment
 
 Among other files, the repository contains the following significant items. Depending on your operating system, you might need to show hidden files to see them all.
 
-  ```
-  SPM-UI-ADDON-DEV
-  └───.storybook          The stories for the sample components. Add stories for your components here.
-  └───cookbook            The developer documentation source files.
-  └───packages            The repository provides these packages.
-      └───carbon-addon-devenv
-      └───custom-carbon-addons
-      └───graphql-mocks
-      .env                A starter React environment variable configuration file.
-  ```
+```
+SPM-UI-ADDON-DEV
+└───.storybook          The stories for the sample components. Add stories for your components here.
+└───cookbook            The developer documentation source files.
+└───packages            The repository provides these packages.
+    └───carbon-addon-devenv
+    └───custom-carbon-addons
+    └───graphql-mocks
+    .env                A starter React environment variable configuration file.
+```
 
 ## The `carbon-addon-devenv` package
 
-The `carbon-addon-devenv` package contains the development environment to work with Carbon components and to develop custom Carbon add-on components. 
+The `carbon-addon-devenv` package contains the development environment to work with Carbon components and to develop custom Carbon add-on components.
 
-It contains two sample add-on components to help you to get started, which need a Java renderer and a GraphQL query to integrate them onto a UIM page. 
+It contains two sample add-on components to help you to get started, which need a Java renderer and a GraphQL query to integrate them onto a UIM page.
 
-   ```
-   carbon-addon-devenv
-   └───sample_renderers
-   └───src
-   └───stories
-       PersonFolio.stories.js
-   ```
+```
+carbon-addon-devenv
+└───sample_renderers
+└───src
+└───stories
+    PersonFolio.stories.js
+```
 
 An `npm` file is provided for the following open source packages:
 
@@ -43,12 +43,12 @@ An `npm` file is provided for the following open source packages:
 
 The `custom-carbon-addons` package is where you must place all of your custom files, to ensure that upgrades do not affect your custom content.
 
-   ```
-   custom-carbon-addons
-   └───renderers
-   │   index.js
-   └───src
-       package.json_sample
+```
+custom-carbon-addons
+└───renderers
+│   index.js
+└───src
+    package.json_sample
 
 ```
 
@@ -57,15 +57,15 @@ The `custom-carbon-addons` package is where you must place all of your custom fi
 The `graphql-mocks` package is where you can place data for mock GraphQL queries. This package essentially provides a
 lightweight mock GraphQL service that simulates the real GraphQL service from SPM.
 
-  ```
-  graphql-mocks
-  └───resolvers
-  │   └─── data
-  │   index.js
-  └───typeDefs
-  └───server.js
-      package.json
-  ```
+```
+graphql-mocks
+└───resolvers
+│   └─── data
+│   index.js
+└───typeDefs
+└───server.js
+    package.json
+```
 
 The `resolvers` directory contains the resolver functions, also known as
 data fetcher functions in GraphQL terminology, that resolve to data values. The `data` subdirectory in the `resolvers` directory contains the

cookbook/src/pages/development-process.mdx

@@ -16,7 +16,7 @@ The Carbon Design System provides design guidance for the development of user in
 - For more information about IBM Carbon Design System, see the [Carbon v10 website](https://v10.carbondesignsystem.com/) and the [Carbon v10 Storybook](https://v10-react.carbondesignsystem.com/?path=/story/getting-started--welcome).
 
 - If you are new to Carbon and React development, see [Carbon React Frameworks](https://v10.carbondesignsystem.com/developing/frameworks/react/) and the [Carbon v10 React tutorial](https://v10.carbondesignsystem.com/developing/react-tutorial/overview/), and the Facebook [Create React App](https://github.com/facebook/create-react-app/blob/main/packages/cra-template/template/README.md) documentation to get you started.
-  
+
 # Back-end development
 
 Using the Social Program Management server development environment and GraphQL functionality, implement domain definitions and the services (business logic) to create/update/get the data for your components. GraphQL is recommended for the back-end data service, especially for data intensive screens, see [https://www.ibm.com/docs/en/spm/8.0.2?topic=apis-graphql](https://www.ibm.com/docs/en/spm/8.0.2?topic=apis-graphql).

cookbook/src/pages/environment-variables.mdx

@@ -2,6 +2,7 @@
 title: Environment variables
 description: Environment variables
 ---
+
 The following environment variables are available for the development environment.
 
 ## Basic configuration

cookbook/src/pages/extend-case-overview.mdx

@@ -8,55 +8,55 @@ The Case Overview provides an Entitlements card by default, which is rendered wi
 The following guidance assumes that you have developed some Carbon components and want to extend the Case Overview page. For more information about developing custom Carbon components, see [Creating a custom Carbon add-on component](/new-custom-component.md).
 
 1. On the server, create a new domain definition for your custom component in the EJBServer custom component directory. For example, CUSTOM_CASEOVERVIEW.
-  For more information about configuring domain definitions, see [Configuring a domain definition](https://www.ibm.com/docs/en/spm/8.0.2?topic=workflow-configuring-domain-definition).
+   For more information about configuring domain definitions, see [Configuring a domain definition](https://www.ibm.com/docs/en/spm/8.0.2?topic=workflow-configuring-domain-definition).
 
 2. Update the `DomainsConfig.xml` file in your custom component in the `webclient` directory to map the new domain definition to a new Java renderer. If the `DomainsConfig.xml` file does not exist in your custom component, you must create it. For example:
 
-    ```XML
-    <dc:domains xmlns:dc="http://www.curamsoftware.com/curam/util/common/ domain-config">
-      <dc:domain name="CUSTOM_CASEOVERVIEW">
-       <dc:plug-in name="view-renderer"
-                class="custom.CustomCaseOverviewRenderer"/>
-         </dc:domain>
-    </dc:domains>
-    ```
+   ```XML
+   <dc:domains xmlns:dc="http://www.curamsoftware.com/curam/util/common/ domain-config">
+     <dc:domain name="CUSTOM_CASEOVERVIEW">
+      <dc:plug-in name="view-renderer"
+               class="custom.CustomCaseOverviewRenderer"/>
+        </dc:domain>
+   </dc:domains>
+   ```
 
 3. Implement a custom Java renderer, for example `CustomCaseOverviewRenderer`, by extending the existing `CaseOverviewRenderer` Java renderer as shown in the following example. This example extends the Case Overview page with the `ComponentX` component.
 
    In your custom Java renderer, you render both the existing components and the custom components. You create an HTML element for the custom components and call a JavaScript renderer function to integrate the custom components into the renderer.
 
-    ```java
-    public void render(final Field field, final DocumentFragment fragment,
-        final RendererContext context, final RendererContract contract)
-        throws ClientException, DataAccessException, PlugInException {
-    
-        // render the OOTB Case overview UI
-        final DocumentFragment baseFragment =
-          fragment.getOwnerDocument().createDocumentFragment();
-        super.render(field, baseFragment, context, contract);
-        fragment.appendChild(baseFragment);
-    
-       // create a HTML element to render the custom carbon component
-       // and extend the OOTB Carbon components
-        final Element carbonWrapperDiv =
-          fragment.getOwnerDocument().createElement("div");
-        final String carbonWrapperDivID = "CarbonWrapperDiv";
-        carbonWrapperDiv.setAttribute("id", carbonWrapperDivID);
-        HTMLUtils.appendComment(carbonWrapperDiv, "filler");
-        carbonWrapperDiv.setAttribute("class", "spm-custom-component");
-    
-        // append the new element to the fragment
-        fragment.appendChild(carbonWrapperDiv);
-        // placeholder in case overview before content is rendered
-        HTMLUtils.appendComment(carbonWrapperDiv.getPreviousSibling(), "filler");
- 
-        // render the custom Carbon component into the new HTML element
-        // For example, to render a custom Carbon ComponentX it would be the following
-        final Map<String, String> map = new HashMap<String, String>();
-        // Make a call to integrate ComponentX into the renderer by using
-        // the ComponentXRenderer JavaScript renderer function
-       includeCarbonComponent(context, carbonWrapperDivID, "{}", "{}",
-         "window.spmcustom.renderers.ComponentX.ComponentXRenderer",
-           map);
-     }
-     ```
+   ```java
+   public void render(final Field field, final DocumentFragment fragment,
+       final RendererContext context, final RendererContract contract)
+       throws ClientException, DataAccessException, PlugInException {
+
+       // render the OOTB Case overview UI
+       final DocumentFragment baseFragment =
+         fragment.getOwnerDocument().createDocumentFragment();
+       super.render(field, baseFragment, context, contract);
+       fragment.appendChild(baseFragment);
+
+      // create a HTML element to render the custom carbon component
+      // and extend the OOTB Carbon components
+       final Element carbonWrapperDiv =
+         fragment.getOwnerDocument().createElement("div");
+       final String carbonWrapperDivID = "CarbonWrapperDiv";
+       carbonWrapperDiv.setAttribute("id", carbonWrapperDivID);
+       HTMLUtils.appendComment(carbonWrapperDiv, "filler");
+       carbonWrapperDiv.setAttribute("class", "spm-custom-component");
+
+       // append the new element to the fragment
+       fragment.appendChild(carbonWrapperDiv);
+       // placeholder in case overview before content is rendered
+       HTMLUtils.appendComment(carbonWrapperDiv.getPreviousSibling(), "filler");
+
+       // render the custom Carbon component into the new HTML element
+       // For example, to render a custom Carbon ComponentX it would be the following
+       final Map<String, String> map = new HashMap<String, String>();
+       // Make a call to integrate ComponentX into the renderer by using
+       // the ComponentXRenderer JavaScript renderer function
+      includeCarbonComponent(context, carbonWrapperDivID, "{}", "{}",
+        "window.spmcustom.renderers.ComponentX.ComponentXRenderer",
+          map);
+    }
+   ```

cookbook/src/pages/feedback.mdx

@@ -4,7 +4,7 @@ description: Feedback
 ---
 
 If you have feedback, or want to raise an issue and you are not a Merative
- representative, please contact your local Merative account executive.
+representative, please contact your local Merative account executive.
 
 To submit an issue or provide feedback, create an [issue](https://github.com/merative/spm-ui-addon-devenv/issues).
 
@@ -24,9 +24,9 @@ Provide clear and concise steps to reproduce the behavior.
 
 For example:
 
-* One
-* Two
-* Three
+- One
+- Two
+- Three
 
 ### Expected behavior
 

cookbook/src/pages/graphql-query.mdx

@@ -16,7 +16,7 @@ Use the following guidance to familiarize yourself with GraphQL queries in Socia
 1. You must enable GraphQL and GraphQL introspection by setting the `curam.graphql.endpoint.enabled` and `curam.graphql.introspection.enabled` system properties, see [Configuring GraphQL properties](https://www.ibm.com/docs/en/spm/8.0.2?topic=graphql-configuring-properties).
 2. Build the application in your Tomcat environment to make the GraphQL APIs available, see [Building and deploying GraphQL APIs on Tomcat](https://www.ibm.com/docs/en/spm/8.0.2?topic=apis-building-deploying-graphql-tomcat).
 3. View the available resources on an existing GraphQL API, such as the `readIntegratedCase` API, see [Viewing the GraphQL queries by using the GraphiQL IDE](https://www.ibm.com/docs/en/spm/8.0.2?topic=graphql-viewing-queries-by-using-graphiql-ide).
-4. Run some test queries to understand how to get the data you need from GraphQL APIs, see [Testing a GraphQL query by using the GraphiQL IDE](https://www.ibm.com/docs/en/spm/8.0.2?topic=graphql-testing-query-by-using-graphiql-ide). 
+4. Run some test queries to understand how to get the data you need from GraphQL APIs, see [Testing a GraphQL query by using the GraphiQL IDE](https://www.ibm.com/docs/en/spm/8.0.2?topic=graphql-testing-query-by-using-graphiql-ide).
 
 # Creating GraphQL queries and GraphQL APIs
 
@@ -25,9 +25,11 @@ When you understand how GraphQL queries work, you can create your own queries, s
 For data that is not available through existing GraphQL APIs, create your own GraphQL APIs, see [Developing a GraphQL API](https://www.ibm.com/docs/en/spm/8.0.2?topic=graphql-developing-apis).
 
 # Setting up the mock GraphQL service
+
 While the REST Service provides the real data from the GraphQL queries in Social Program Management, you can use a lightweight mock GraphQL service to enable rapid development almost exclusively in your front-end environment. To develop your Carbon components before the real GraphQL queries are available, you can use the mock GraphQL service with Carbon components in Storybook or when testing the integration with SPM.
 
-To add mock data to the mock GraphQL service, complete the following steps in the `graphql-mocks` package. Refer to the provided examples in the directories for guidance. 
- - In the `typeDefs` directory, add a new GraphQL query type definition and update the `index.js` file in that directory to export it.
- - In the `resolvers` directory, add a new resolver and update the `index.js` in that directory to export it.
- - Add the data to the `resolvers/data` subdirectory and import the data in your new resolver.
+To add mock data to the mock GraphQL service, complete the following steps in the `graphql-mocks` package. Refer to the provided examples in the directories for guidance.
+
+- In the `typeDefs` directory, add a new GraphQL query type definition and update the `index.js` file in that directory to export it.
+- In the `resolvers` directory, add a new resolver and update the `index.js` in that directory to export it.
+- Add the data to the `resolvers/data` subdirectory and import the data in your new resolver.