From b6fd27ee6c7039c3915ff1fc5c3ea70fa67034e2 Mon Sep 17 00:00:00 2001 From: folkforms Date: Thu, 25 Apr 2024 09:15:40 +0100 Subject: [PATCH] Apply prettier to remaining files --- .babelrc | 4 +- .github/ISSUE_TEMPLATE/bug_report.md | 15 +++--- .github/workflows/deploy.yml | 2 +- .storybook/main.js | 11 ++--- .storybook/preview.js | 4 +- .storybook/webpack.config.js | 10 ++-- .travis.yml | 3 +- CHANGELOG.md | 29 ++++++----- CONTRIBUTING.md | 4 +- README.md | 2 +- cookbook/src/pages/setup.mdx | 8 +-- cookbook/src/pages/spm-uim-integration.mdx | 10 ++-- webpack.config.js | 57 +++++++++++++--------- 13 files changed, 86 insertions(+), 73 deletions(-) diff --git a/.babelrc b/.babelrc index 14d9aa2..0dce8c0 100644 --- a/.babelrc +++ b/.babelrc @@ -1,3 +1,3 @@ { - "presets": ["@babel/env", "@babel/preset-react"] -} \ No newline at end of file + "presets": ["@babel/env", "@babel/preset-react"] +} diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index d92d402..99a3374 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -3,8 +3,7 @@ name: Bug report about: Create a report to help us improve title: "[BUG]: " labels: bug -assignees: '' - +assignees: "" --- **Describe the bug** @@ -12,6 +11,7 @@ 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. diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index b37fb4f..109dcd6 100644 --- a/.github/workflows/deploy.yml +++ b/.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 diff --git a/.storybook/main.js b/.storybook/main.js index 0924ed2..e4bf46c 100644 --- a/.storybook/main.js +++ b/.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"], +}; diff --git a/.storybook/preview.js b/.storybook/preview.js index a27c66c..523017a 100644 --- a/.storybook/preview.js +++ b/.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$/, }, }, -} \ No newline at end of file +}; diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index d2f0454..a70f9b4 100644 --- a/.storybook/webpack.config.js +++ b/.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 { diff --git a/.travis.yml b/.travis.yml index 00e677b..2be19cb 100644 --- a/.travis.yml +++ b/.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 diff --git a/CHANGELOG.md b/CHANGELOG.md index b4adfa8..d8411ca 100644 --- a/CHANGELOG.md +++ b/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. -======= +### Added -### Removed -Not applicable +# This initial release enables the rapid development of custom application pages based on IBM Carbon components. +### Removed +Not applicable diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 4bd16af..41c4f05 100644 --- a/CONTRIBUTING.md +++ b/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. diff --git a/README.md b/README.md index 4d6a944..cdbd320 100644 --- a/README.md +++ b/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/) diff --git a/cookbook/src/pages/setup.mdx b/cookbook/src/pages/setup.mdx index 59dc013..42a5cee 100644 --- a/cookbook/src/pages/setup.mdx +++ b/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 diff --git a/cookbook/src/pages/spm-uim-integration.mdx b/cookbook/src/pages/spm-uim-integration.mdx index a59462b..03b7ef1 100644 --- a/cookbook/src/pages/spm-uim-integration.mdx +++ b/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 map = new HashMap(); ``` 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: ``` diff --git a/webpack.config.js b/webpack.config.js index b78d032..540c641 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,72 +1,83 @@ const path = require("path"); -const webpack = require('webpack'); -const ReactDevToolsIFramePlugin = require('react-dev-tools-iframe-webpack-plugin'); +const webpack = require("webpack"); +const ReactDevToolsIFramePlugin = require("react-dev-tools-iframe-webpack-plugin"); module.exports = { - entry: ['./public-path.js', "./packages/carbon-addons-devenv/src/index.js"], + entry: ["./public-path.js", "./packages/carbon-addons-devenv/src/index.js"], mode: "development", module: { rules: [ { test: /\.scss$/, loaders: [ - 'style-loader', - 'css-loader', + "style-loader", + "css-loader", { loader: "sass-loader", options: { sassOptions: { - includePaths: [ "node_modules" ] + includePaths: ["node_modules"], }, }, }, ], - include: path.resolve(__dirname, './packages/custom-carbon-addons/src/scss'), + include: path.resolve( + __dirname, + "./packages/custom-carbon-addons/src/scss", + ), }, { test: /\.(js|jsx)$/, exclude: /(bower_components)/, loader: "babel-loader", - options: { presets: ["@babel/env"] } + options: { presets: ["@babel/env"] }, }, { test: /\.css$/, - use: ["style-loader", "css-loader"] + use: ["style-loader", "css-loader"], }, { test: /\.(gif|png|jpe?g|svg)$/i, - loader: 'file-loader', + loader: "file-loader", }, { test: /\.(png|woff|woff2|eot|ttf|svg)$/, - loader: 'url-loader?limit=100000' + loader: "url-loader?limit=100000", }, - ] + ], }, plugins: [ - new webpack.EnvironmentPlugin(['RELATIVE_PATH_TO_BUNDLE', 'GRAPHQL_SERVER_URL', 'CUSTOM_COMPONENT_NAME', 'CSRF_TOKEN_REQUEST_HEADER', 'CSRF_TOKEN_ENPOINT']),new ReactDevToolsIFramePlugin() + new webpack.EnvironmentPlugin([ + "RELATIVE_PATH_TO_BUNDLE", + "GRAPHQL_SERVER_URL", + "CUSTOM_COMPONENT_NAME", + "CSRF_TOKEN_REQUEST_HEADER", + "CSRF_TOKEN_ENPOINT", + ]), + new ReactDevToolsIFramePlugin(), ], - resolve: { extensions: ["*", ".js", ".jsx"], + resolve: { + extensions: ["*", ".js", ".jsx"], alias: { - devenv_pkg: path.resolve('./packages/carbon-addons-devenv') - } + devenv_pkg: path.resolve("./packages/carbon-addons-devenv"), + }, }, output: { path: path.resolve(__dirname, "dist/"), - library: 'spmcustom', - libraryExport: 'default', + library: "spmcustom", + libraryExport: "default", publicPath: "/dist/", filename: "spm-custom-carbon-addons-[name].bundle.js", - chunkFilename: 'spm-custom-carbon-addons-[name].chunk.js', + chunkFilename: "spm-custom-carbon-addons-[name].chunk.js", }, watchOptions: { poll: 400, - ignored: '**/node_modules', + ignored: "**/node_modules", }, devServer: { contentBase: path.join(__dirname, "public/"), port: 3000, publicPath: "http://localhost:3000/dist/", - hotOnly: false - } -}; \ No newline at end of file + hotOnly: false, + }, +};