Skip to content

Commit

Permalink
Merge pull request #42 from merative/feature/1.1.0_releaseCandidate
Browse files Browse the repository at this point in the history
Feature/1.1.0 release candidate
  • Loading branch information
poraghal authored Nov 14, 2022
2 parents 2eb5d8c + 6fc5748 commit 3de9ca2
Show file tree
Hide file tree
Showing 79 changed files with 9,283 additions and 3,106 deletions.
30 changes: 24 additions & 6 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,28 @@
# Changelog
## 1.1.0 - 11/11/2021 ![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.
- 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
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).

For more information about server-side changes, see the [Merative Social Program Management release notes](https://www-01.ibm.com/support/docview.wss?uid=swg27037963) for your version.

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
Expand All @@ -9,10 +33,4 @@ This initial release enables the rapid development of custom application pages b
### Removed
Not applicable

## More Information

For more information about IBM Cúram Social Program Management, visit [IBM Docs](https://www.ibm.com/docs/en/spm/8.0.1).

For more information about server-side changes, see the [IBM Cúram Social Program Management release notes](https://www-01.ibm.com/support/docview.wss?uid=swg27037963) for your version.

For more information about the IBM Carbon Design System, see https://www.carbondesignsystem.com/
20 changes: 20 additions & 0 deletions config/jest-setup.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
/*
* Licensed Materials - Property of IBM
*
* PID 5725-H26
*
* Copyright IBM Corporation 2020. All Rights Reserved.
*
* US Government Users Restricted Rights - Use, duplication or disclosure
* restricted by GSA ADP Schedule Contract with IBM Corp.
*/

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

// Ensure any error output to console is flagged as a failing test
global.console.error = (error) => {
throw new Error(error);
};

Enzyme.configure({ adapter: new Adapter() });
38 changes: 38 additions & 0 deletions config/jest.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
/*
* Licensed Materials - Property of IBM
*
* PID 5725-H26
*
* Copyright IBM Corporation 2020. All Rights Reserved.
*
* US Government Users Restricted Rights - Use, duplication or disclosure
* restricted by GSA ADP Schedule Contract with IBM Corp.
*/

module.exports = {
rootDir: '../',
collectCoverageFrom: [
'<rootDir>/packages/**/src/**/*.js',
'!<rootDir>/packages/**/src/apollo-client-hooks/**/*.js',
'!<rootDir>/packages/**/index.js',
'!<rootDir>/packages/**/*stories.js',
'!<rootDir>/packages/**/*Exports.js'
],
transform: {
'^.+\\.js|jsx$': 'babel-jest',
},
modulePathIgnorePatterns: [
'<rootDir>/packages/carbon-addons-devenv/package.json',
],
setupFilesAfterEnv: [
'<rootDir>/config/jest-setup.js',
],
coverageThreshold: {
packages: {
branches: 80,
functions: 85,
lines: 85,
statements: 85,
},
},
};
12 changes: 12 additions & 0 deletions config/jsdoc-config.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"source": {
"include": ["packages/carbon-addons-devenv/src/react", "packages/custom-carbon-addons/src/react"],
"includePattern": ".+\\.js(doc|x)?$",
"excludePattern": "(^|\\/|\\\\)_"
},
"opts": {
"destination": "docs",
"recurse": true,
"readme": "README.md"
}
}
2 changes: 1 addition & 1 deletion cookbook/gatsby-config.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ module.exports = {
siteMetadata: {
title: siteTitle,
description: 'Merative Social Program Management UI Addon Development Environment',
keywords: 'merative,curam,containers,',
keywords: 'merative,curam,containers',
},
pathPrefix: sitePrefix,
plugins: [
Expand Down
56 changes: 34 additions & 22 deletions cookbook/src/data/nav-items.yaml
Original file line number Diff line number Diff line change
@@ -1,38 +1,50 @@
- title: Overview
pages:
- path: /overview
- title: Prerequisites
- path: /overview
- title: Setting up for development
pages:
- title: Prerequisites and supported software
path: /prerequisites
- title: Setting up
pages:
- title: Setting up your development environment
- title: Set up your development environment
path: /setup
- title: Configuring
pages:
- title: Configuring your development environment
path: /configuring-dev-env
- title: Development Process
- title: Development environment
path: /development-environment
hasDivider: true
- title: Development
pages:
- title: Development Process
- title: Development process
path: /development-process
- title: Creating custom components
pages:
- title: Building during development
path: /build
- title: Customization
pages:
- title: Overview of customization
path: /overview-customization
- title: Creating custom pages
path: /custom-pages
- title: Creating a custom Carbon add-on component
path: /new-custom-component
- title: Integrating with Java Renderers
pages:
- title: Integrating with the Java Renderer on a UIM page
- title: Rendering components on a UIM page
path: /spm-uim-integration
- title: Integrating components with UIM
pages:
- title: Integrating components with the UIM page
path: /integrate-addon-in-uim
- title: Deploying components
pages:
- title: Implementing a GraphQL query
path: /graphql-query
- title: Deploying components
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
hasDivider: true
- title: Reference
pages:
- title: Environment variables
path: /environment-variables
- title: Command reference
path: /command-reference
- title: Samples reference
path: /samples-reference
hasDivider: true
- title: Feedback
pages:
Expand Down
39 changes: 30 additions & 9 deletions cookbook/src/gatsby-theme-carbon/components/Footer.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {

const Footer = ({ Content, links, Logo }) => {
const { firstCol, secondCol } = links;
// const currentYear = new Date().getFullYear();
const { site } = useStaticQuery(graphql`
query SHADOW_BUILD_TIME_QUERY {
site {
Expand Down Expand Up @@ -67,22 +68,42 @@ const Footer = ({ Content, links, Logo }) => {
);
};

const IBMLogo = () => (
const MerativeLogo = () => (
<svg
className={logo}
width="81"
height="32"
xmlns="http://www.w3.org/2000/svg">
<g fillRule="evenodd">
<path d="M0 32h15.689v-2.038H0zM0 27.721h15.689v-2.038H0zM4.483 23.442h6.724v-2.037H4.483zM4.483 19.164h6.724v-2.038H4.483zM4.483 14.885h6.724v-2.037H4.483zM4.482 10.606h6.724V8.568H4.482zM0 6.327h15.689V4.29H0zM0 2.049h15.689V.011H0zM17.93 29.963V32h16.504a8.521 8.521 0 0 0 5.54-2.037H17.93zM17.93 25.683v2.038h23.914a8.535 8.535 0 0 0 .85-2.038H17.93zM22.412 23.442h6.724v-2.037h-6.724zM40.124 17.126H22.412v2.038H41.77a8.62 8.62 0 0 0-1.645-2.038M22.413 12.848v2.036h17.786a8.612 8.612 0 0 0 1.644-2.037h-19.43zM42.693 6.327a8.447 8.447 0 0 0-.85-2.037H17.93v2.037h24.763zM39.974 2.049a8.521 8.521 0 0 0-5.54-2.037H17.93v2.037h22.044zM22.412 10.606h6.724V8.568h-6.724zM35.453 10.606h7.29a8.603 8.603 0 0 0 .248-2.038h-7.538v2.038zM35.453 21.405v2.037h7.538c0-.703-.09-1.384-.248-2.037h-7.29zM57.457 0H44.825v2.038h13.34zM44.826 32h11.21v-2.038h-11.21zM44.826 27.72h11.21v-2.038h-11.21zM49.309 23.439h6.727v-2.038h-6.727zM49.309 19.159h6.727v-2.038h-6.727zM69.488 32h11.21v-2.038h-11.21zM69.488 27.72h11.21v-2.038h-11.21zM69.488 23.439h6.726v-2.038h-6.726zM69.487 19.159h6.726v-2.038h-6.726zM69.488 14.879h6.726V12.84H63.606l-.707 2.038h5.903l.686-1.94zM61.916 12.84H49.31v2.039h6.726v-1.94l.686 1.94h5.903zM76.213 8.56H65.091l-.707 2.038h11.83zM68.06 0l-.706 2.038h13.344V0zM62.757 32l.72-2.038h-1.432zM61.254 27.72h3.015l.72-2.038h-4.455zM59.743 23.44h6.037l.72-2.039h-7.476zM58.232 19.159h9.06l.719-2.038h-10.5zM49.309 10.598h11.83l-.707-2.038H49.309zM65.868 6.318h14.83V4.28H66.576zM58.947 4.28H44.826v2.038h14.828z" />
</g>
enable-background="new 0 0 425 205"
viewBox="0 0 425 205"
xmlns="http://www.w3.org/2000/svg"
width="160"
>
<linearGradient
id="a"
gradientUnits="userSpaceOnUse"
x1="207.7505"
x2="318.9948"
y1="71.0289"
y2="71.0289"
>
<stop offset="0" stop-color="#90f" />
<stop offset="1" stop-color="#fa1e32" />
</linearGradient>
<path
d="m318.99 98.84c0-30.72-24.9-55.62-55.62-55.62s-55.62 24.9-55.62 55.62h7.46c0-26.6 21.56-48.17 48.17-48.17 26.6 0 48.17 21.56 48.17 48.17z"
fill="url(#a)"
/>
<path
d="m103.53 135.48v25.7h-7.24v-26c0-5.39-4.37-9.76-9.76-9.76-5.14 0-9.36 3.98-9.73 9.03v26.74h-7.17v-26.74c-.38-5.05-4.59-9.03-9.73-9.03-5.39 0-9.76 4.37-9.76 9.76v26h-7.24v-25.7c0-9.37 7.6-16.97 16.97-16.97 5.42 0 10.24 2.54 13.35 6.5 3.11-3.96 7.93-6.5 13.35-6.5 9.36.01 16.96 7.6 16.96 16.97zm79.43-16.1c-9.37-.03-16.97 7.6-16.97 16.97v24.83h7.24v-24.93c0-5.39 4.5-9.67 10.14-9.82 2.74-.08 5.76.13 5.76.13l.4-6.96s-2.25-.2-6.57-.22zm-33.02 5.58c3.85 4.3 5.78 9.47 5.78 15.51 0 1.05-.08 2.14-.25 3.24h-34.85c.72 3.72 2.43 6.6 5.12 8.65s6 3.08 9.94 3.08c5.49 0 9.48-2.02 11.98-6.07l6.15 3.49c-4.05 6.27-10.15 9.4-18.3 9.4-6.6 0-11.96-2.06-16.09-6.2-4.13-4.13-6.2-9.36-6.2-15.68 0-6.27 2.02-11.48 6.07-15.64s9.29-6.24 15.72-6.24c6.1.02 11.08 2.17 14.93 6.46zm-1.54 12.44c-.61-3.94-2.16-6.93-4.66-8.98s-5.41-3.08-8.73-3.08c-3.88 0-7.1 1.1-9.65 3.29s-4.13 5.12-4.74 8.77zm84.72-10.82h14.22v34.6h7.24v-34.6h14.14v-6.99h-35.6zm45.54 34.6h7.24v-41.58h-7.24zm103.38-17.46h-34.85c.72 3.72 2.42 6.6 5.12 8.65 2.69 2.05 6 3.08 9.94 3.08 5.49 0 9.48-2.02 11.98-6.07l6.15 3.49c-4.05 6.27-10.15 9.4-18.3 9.4-6.6 0-11.96-2.06-16.09-6.2-4.13-4.13-6.2-9.36-6.2-15.68 0-6.27 2.02-11.48 6.07-15.64s9.29-6.24 15.72-6.24c6.1 0 11.07 2.15 14.93 6.45 3.85 4.3 5.78 9.47 5.78 15.51 0 1.06-.08 2.14-.25 3.25zm-7.07-6.32c-.61-3.94-2.16-6.93-4.66-8.98-2.49-2.05-5.41-3.08-8.73-3.08-3.88 0-7.1 1.1-9.65 3.29s-4.13 5.12-4.74 8.77zm-184.56 23.78h7.82l13.06-33.76 13.06 33.76h7.82s-14.85-37.2-15.69-39.23c-.84-2.02-2.85-3.44-5.18-3.44s-4.37 1.41-5.18 3.44-15.71 39.23-15.71 39.23zm119.79-2.36c.81 2.03 2.85 3.44 5.18 3.44s4.35-1.41 5.18-3.44c.84-2.02 15.69-39.23 15.69-39.23h-7.82l-13.06 33.76-13.06-33.76h-7.82c.01.01 14.9 37.21 15.71 39.23z"
fill="#fff"
/>
</svg>
);

const DefaultContent = ({ buildTime }) => (
<>
<p>
Last updated: {buildTime}
Docs last updated: {buildTime}
<br />
&copy; Merative US L.P. 2021, 2022
</p>
</>
);
Expand All @@ -93,7 +114,7 @@ Footer.defaultProps = {
secondCol: [ ],
},
Content: DefaultContent,
Logo: IBMLogo,
Logo: MerativeLogo,
};

Footer.propTypes = {
Expand Down
2 changes: 1 addition & 1 deletion cookbook/src/gatsby-theme-carbon/components/Header.js
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ const Header = ({ children }) => {

const DefaultHeaderText = () => (
<>
IBM Cúram&nbsp;<span>SPM UI Addon Development Environment</span>
Merative&nbsp;<span>SPM UI Addon Development Environment</span>
</>
);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@ import ResourceLinks from 'gatsby-theme-carbon/src/components/LeftNav/ResourceLi

const links = [
{
title: 'Github',
href: 'https://github.com/IBM/spm-ui-addon-devenv',
title: 'GitHub',
href: 'https://github.com/merative/spm-ui-addon-devenv',
},
{
title: 'IBM Documentation',
href: 'https://www.ibm.com/docs/en/spm/8.0.1',
title: 'Documentation',
href: 'https://www.ibm.com/docs/en/spm/8.0.2',
}
];

Expand Down
76 changes: 76 additions & 0 deletions cookbook/src/images/SPM_Addons_IDE.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
27 changes: 27 additions & 0 deletions cookbook/src/pages/build.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
---
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).


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.

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.

```
npm run dev
```

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
```
69 changes: 69 additions & 0 deletions cookbook/src/pages/command-reference.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
---
title: Command reference
description: Command reference
---

After the code is installed and configured, the following commands are available:

```
npm run build
```

This command builds the deliverable artefacts from the installed codebase. For more information, see [Building during development](build).

```
npm run dev
```

This command tests the integration with Social Program Management. It requires the `CLIENT_DIR` environment variable to be set.
It copies the generated artefects from `npm run build` to the location where they can be picked up by Social Program Management.
After you run the command, any JavaScript or SCSS files that are updated are automatically generated. For more information, see [Building during development](build).

```
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.

```
npm run test
```

This command runs the JavaScript unit tests for React components that you have created. Some sample tests are provided in the code base for guidance.

```
npm run coverage
```

This command generates a report on JavaScript code coverage. If coverage falls below a certain threshold that is specified for code coverage the report fails to be generated.

```
npm run gen-doc
```

This command generates the documentation for React components that are being developed. It is based on JSDoc, see [https://jsdoc.app/](https://jsdoc.app/).

```
npm run lint
```

This command enforces coding best practices for React components in JavaScript and SCSS.

```
npm run analyze-bundle
```

This command generates a HTML report (reports/bundle-size.html) that shows a breakdown of each generated JavaScript file in terms
of how much footprint (size in KB) each third-party library contributes to their overall size.

```
npm run storybook
```

This command starts Storybook, which shows how to use the components with examples.

```
npm run deploy
```

This command copies the compiled JavaScript to the specified web client custom component for deployment. For more information, see [Deploying components](deployment).
Loading

0 comments on commit 3de9ca2

Please sign in to comment.