Merge pull request #59 from merative/ab/apply-prettier

Apply prettier

.babelrc

@@ -1,3 +1,3 @@
 {
-    "presets": ["@babel/env", "@babel/preset-react"]
-}
+  "presets": ["@babel/env", "@babel/preset-react"]
+}

.github/ISSUE_TEMPLATE/bug_report.md

@@ -3,15 +3,15 @@ name: Bug report
 about: Create a report to help us improve
 title: "[BUG]: "
 labels: bug
-assignees: ''
-
+assignees: ""
 ---
 
 **Describe the bug**
 A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -24,11 +24,12 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
- - OS: [e.g. macOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
- - Node version
- - NPM version
+
+- OS: [e.g. macOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
+- Node version
+- NPM version
 
 **Additional context**
 Add any other context about the problem here.

.github/workflows/deploy.yml

@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     permissions:
       contents: write
-    steps:      
+    steps:
       - name: checkout code
         uses: actions/checkout@v3
       - name: Install Node.js

.storybook/main.js

@@ -1,10 +1,7 @@
 module.exports = {
-  "stories": [
+  stories: [
     "../packages/**/*.stories.mdx",
-    "../packages/**/*.stories.@(js|jsx|ts|tsx)"
+    "../packages/**/*.stories.@(js|jsx|ts|tsx)",
   ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials"
-  ]
-}
+  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
+};

.storybook/preview.js

@@ -1,4 +1,4 @@
-import '../packages/custom-carbon-addons/src/scss/index.scss';
+import "../packages/custom-carbon-addons/src/scss/index.scss";
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
@@ -8,4 +8,4 @@ export const parameters = {
       date: /Date$/,
     },
   },
-}
+};

.storybook/webpack.config.js

@@ -1,12 +1,12 @@
-const path = require('path');
-const glob = require('glob');
-const custom = require('../webpack.config.js');
+const path = require("path");
+const glob = require("glob");
+const custom = require("../webpack.config.js");
 
 module.exports = async ({ config, mode }) => {
   config.module.rules.push({
     test: /\.scss$/,
-    loaders: ['style-loader', 'css-loader', 'sass-loader'],
-    include: path.resolve(__dirname, '../'),
+    loaders: ["style-loader", "css-loader", "sass-loader"],
+    include: path.resolve(__dirname, "../"),
   });
 
   return {

.travis.yml

@@ -2,8 +2,7 @@ language: node_js
 node_js:
   - "12"
 
-before_install:
-  cd cookbook
+before_install: cd cookbook
 
 install:
   - npm install -g markdownlint-cli

CHANGELOG.md

@@ -1,21 +1,25 @@
 # Changelog
+
 ## 1.1.0 - 11/11/2022 ![SPM 8.0.2,SPM 8.0.1](https://img.shields.io/badge/-SPM_8.0.2-green)
+
 ### Added
 
-This release has the following improvements: 
- - Better structure of the Apollo Client hooks for the sample addon component in the `carbon-addons-devenv` package.
- - Restructured documentation, now including an overview diagram. Improved guidance for customization, both for creating custom pages and for customizing the Case Overview. Improved guidance about creating GraphQL queries.
- - The provision of a lightweight mock GraphQL service that serves data from the file system and can be used within this sandboxed environment for testing purposes. You can use the mock GraphQL service to test your custom components before production GraphQL queries development is completed.
- - Enablement of the React Development Tools browser extension to view the composition of React JavaScript components on web page with iframes.
- - The provision of a tool that shows a breakdown of the generated JavaScript files in terms
-of how much footprint (size in KB) each third-party library contributes to their overall size.
+This release has the following improvements:
+
+- Better structure of the Apollo Client hooks for the sample addon component in the `carbon-addons-devenv` package.
+- Restructured documentation, now including an overview diagram. Improved guidance for customization, both for creating custom pages and for customizing the Case Overview. Improved guidance about creating GraphQL queries.
+- The provision of a lightweight mock GraphQL service that serves data from the file system and can be used within this sandboxed environment for testing purposes. You can use the mock GraphQL service to test your custom components before production GraphQL queries development is completed.
+- Enablement of the React Development Tools browser extension to view the composition of React JavaScript components on web page with iframes.
+- The provision of a tool that shows a breakdown of the generated JavaScript files in terms
+  of how much footprint (size in KB) each third-party library contributes to their overall size.
 - The introduction of `index_latest` files as a mechanism to convey the most up-to-date-template for index files. You can diff `index_latest` files with your verion of the `index.js` or `index.scss` files to see any differences in the underlying directory structure.
 
+### Removed
 
-### Removed 
 Not applicable
 
 ## More information
+
 For more information about the React Developer Tools browser extension, see [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en).
 
 For more information about Merative™ Social Program Management, see the [documentation](https://curam-spm-devops.github.io/wh-support-docs/spm/pdf-documentation).
@@ -25,12 +29,11 @@ For more information about server-side changes, see the [Merative Social Program
 For more information about the IBM Carbon Design System v10, see [https://v10.carbondesignsystem.com/](https://v10.carbondesignsystem.com/).
 
 ## 1.0.0 - 26/11/2021 ![SPM 8.0.1](https://img.shields.io/badge/-SPM_8.0.1-green)
+
 ### Added
 
 This initial release enables the rapid development of custom application pages based on IBM Carbon components.
-=======
-
-### Removed 
-Not applicable
 
+### Removed
 
+Not applicable

CONTRIBUTING.md

@@ -1,3 +1,5 @@
 # spm-ui-components
+
 ## Contributing In General
-Contributions are not supported at the moment. 
+
+Contributions are not supported at the moment.

README.md

@@ -1,5 +1,5 @@
 # UI Addon Development Environment
 
-A collection of front-end tools and libraries that can be used to extend UIM with JavaScript components.  It enables rapid development of SPM custom application pages based on the IBM Carbon Design System.
+A collection of front-end tools and libraries that can be used to extend UIM with JavaScript components. It enables rapid development of SPM custom application pages based on the IBM Carbon Design System.
 
 The documentation is available at this URL: [https://merative.github.io/spm-ui-addon-devenv/](https://merative.github.io/spm-ui-addon-devenv/)

cookbook/src/pages/setup.mdx

@@ -7,11 +7,11 @@ description: Setting up your development environment
 2. Download and install your IDE. Microsoft Visual Studio Code [https://code.visualstudio.com/download](https://code.visualstudio.com/download) is the recommended IDE. Install any needed extensions, such as ESLint or Prettier.
 3. Download the `main` branch of the SPM UI Addon Development Environment code from [https://github.com/merative/spm-ui-addon-devenv](https://github.com/merative/spm-ui-addon-devenv).
 
-    You can choose one of the following options:
+   You can choose one of the following options:
 
-    1. Download as Zip. Select the Code drop-down menu and select the **Download Zip** option.
-    2. Open with GitHub Desktop.
-    3. Clone the repository. If you have Git set up, you can clone the repository by opening a command prompt and running the command:
+   1. Download as Zip. Select the Code drop-down menu and select the **Download Zip** option.
+   2. Open with GitHub Desktop.
+   3. Clone the repository. If you have Git set up, you can clone the repository by opening a command prompt and running the command:
 
 ```
 git clone https://github.com/merative/spm-ui-addon-devenv.git

cookbook/src/pages/spm-uim-integration.mdx

@@ -12,9 +12,9 @@ Complete the following steps to integrate the component into a Java renderer:
 1. Create a custom UIM page in your web client custom components directory.
 2. Create a Java renderer in the web client custom component directory. Refer to the PersonFolio and Logo samples for guidance, see [Samples reference](samples-reference).
 
-    - For this example, create the `CarbonComponentXViewRenderer.java` Java renderer in the `JavaSource/custom` subdirectory. The renderer extends the
-      `AbstractViewRenderer`` (curam.util.client.domain.render.view.AbstractViewRenderer) class.
-    - Make a call to the `includeCarbonComponent()` function to call the custom component. For more information about the `includeCarbonComponent()` function, see the the Java documentation. Call the following code from the `render()` method:
+   - For this example, create the `CarbonComponentXViewRenderer.java` Java renderer in the `JavaSource/custom` subdirectory. The renderer extends the
+     `AbstractViewRenderer`` (curam.util.client.domain.render.view.AbstractViewRenderer) class.
+   - Make a call to the `includeCarbonComponent()` function to call the custom component. For more information about the `includeCarbonComponent()` function, see the the Java documentation. Call the following code from the `render()` method:
 
 ```
 // making the call to integrate the ComponentX component into the renderer via
@@ -36,8 +36,8 @@ final Map<String, String> map = new HashMap<String, String>();
 ```
 
 3. Configure your Java renderer by doing the following:
-    - On the server, create a `CUSTOM_CARBON_COMPONENT_X` domain definition for your custom component in the the `EJBServer` custom component directory. For more information about configuring domain definitions see [https://www.ibm.com/docs/en/spm/8.0.2?topic=workflow-configuring-domain-definition](https://www.ibm.com/docs/en/spm/8.0.2?topic=workflow-configuring-domain-definition).
-    - Update the `DomainsConfig.xml` file in your custom component in the webclient directory to map the new domain definition to the new Java renderer. If this file does not exist in your custom component, you must create it. For example:
+   - On the server, create a `CUSTOM_CARBON_COMPONENT_X` domain definition for your custom component in the the `EJBServer` custom component directory. For more information about configuring domain definitions see [https://www.ibm.com/docs/en/spm/8.0.2?topic=workflow-configuring-domain-definition](https://www.ibm.com/docs/en/spm/8.0.2?topic=workflow-configuring-domain-definition).
+   - Update the `DomainsConfig.xml` file in your custom component in the webclient directory to map the new domain definition to the new Java renderer. If this file does not exist in your custom component, you must create it. For example:
 
 ```
 <?xml version="1.0" encoding="ISO-8859-1"?>

package.json

@@ -9,7 +9,7 @@
     }
   },
   "lint-staged": {
-    "*.{js,jsx,json,css,md}": [
+    "*.{js,jsx,json,css,scss,md,mdx}": [
       "prettier --write"
     ],
     "*.{js,jsx}": [

packages/carbon-addons-devenv/sample_renderers/Renderer.js

@@ -7,7 +7,6 @@
  * @namespace Renderer
  */
 export default class Renderer {
-
   /**
    * Creates a renderer.
    *
@@ -18,28 +17,34 @@ export default class Renderer {
    * @private
    */
   static create = async (containerId, config, specifiedApolloClientHook) => {
-  window.spmcustom.requireCustomCarbonAddons()
-    .then(async (CustomCarbonAddonModule) => {
-
-      let apolloClientDataProvider;
-      let apolloClientHookList;
-      try {
-        const apolloClientHookListName = 'ApolloClientHooks';
-        apolloClientHookList = CustomCarbonAddonModule[apolloClientHookListName];
-        apolloClientDataProvider = apolloClientHookList[specifiedApolloClientHook];
-      } catch (e) {
-        throw new Error(`The apollo data provider : ${  specifiedApolloClientHook  } does not exist. This is the list of available ones: ${ JSON.stringify(apolloClientHookList)}`);
-      }
-      if (!apolloClientDataProvider) {
-        throw new Error(`The apollo data provider : ${  specifiedApolloClientHook  } does not exist. This is the list of available ones: ${  JSON.stringify(apolloClientHookList)}`);
-      }
-      apolloClientDataProvider(document.getElementById(containerId), {
-        ...config,
-        labels: {
-          ...config.labels,
-          ...config.messages,
+    window.spmcustom
+      .requireCustomCarbonAddons()
+      .then(async (CustomCarbonAddonModule) => {
+        let apolloClientDataProvider;
+        let apolloClientHookList;
+        try {
+          const apolloClientHookListName = "ApolloClientHooks";
+          apolloClientHookList =
+            CustomCarbonAddonModule[apolloClientHookListName];
+          apolloClientDataProvider =
+            apolloClientHookList[specifiedApolloClientHook];
+        } catch (e) {
+          throw new Error(
+            `The apollo data provider : ${specifiedApolloClientHook} does not exist. This is the list of available ones: ${JSON.stringify(apolloClientHookList)}`,
+          );
+        }
+        if (!apolloClientDataProvider) {
+          throw new Error(
+            `The apollo data provider : ${specifiedApolloClientHook} does not exist. This is the list of available ones: ${JSON.stringify(apolloClientHookList)}`,
+          );
         }
+        apolloClientDataProvider(document.getElementById(containerId), {
+          ...config,
+          labels: {
+            ...config.labels,
+            ...config.messages,
+          },
+        });
       });
-    });
-  }
+  };
 }

packages/carbon-addons-devenv/sample_renderers/logo/index.js

@@ -2,8 +2,8 @@
  * Copyright Merative US L.P. 2020
  */
 
-import LogoRenderer from './LogoRenderer';
+import LogoRenderer from "./LogoRenderer";
 
 export default {
-  LogoRenderer
+  LogoRenderer,
 };

packages/carbon-addons-devenv/sample_renderers/personFolio/index.js

@@ -2,8 +2,8 @@
  * Copyright Merative US L.P. 2020
  */
 
-import PersonFolioRenderer from './PersonFolioRenderer';
+import PersonFolioRenderer from "./PersonFolioRenderer";
 
 export default {
-  PersonFolioRenderer
+  PersonFolioRenderer,
 };