From b783db9fcae190a8950b0df405c1e48049d0a2b0 Mon Sep 17 00:00:00 2001 From: folkforms Date: Thu, 25 Apr 2024 09:05:02 +0100 Subject: [PATCH 1/6] Apply prettier to carbon-addons-devenv --- .../sample_renderers/Renderer.js | 51 ++++---- .../sample_renderers/logo/index.js | 4 +- .../sample_renderers/personFolio/index.js | 4 +- .../core/ApolloClientConfig.js | 48 +++---- .../core/ApolloClientDataProvider.js | 17 +-- .../core/ApolloClientQueryProvider.js | 16 +-- .../hook_samples/Logo/LogoQuery.js | 11 +- .../hook_samples/Person/PersonQuery.js | 11 +- packages/carbon-addons-devenv/src/index.js | 13 +- .../src/react/addons_samples/Logo/Logo.js | 40 +++--- .../react/addons_samples/Logo/Logo.stories.js | 75 +++++------ .../Logo/__tests__/Logo.test.js | 60 +++++---- .../src/react/addons_samples/Logo/index.js | 21 ++-- .../addons_samples/PersonFolio/PersonFolio.js | 117 +++++++++--------- .../PersonFolio/__tests__/PersonFolio.test.js | 87 ++++++------- .../src/react/core/InlContext.js | 2 +- .../src/react/core/settings.js | 3 +- .../carbon-addons-devenv/src/react/index.js | 10 +- .../src/scss/addon-samples.scss | 14 +-- .../src/scss/addons_samples/personfolio.scss | 53 ++++---- .../src/scss/carbon-components.scss | 14 +-- .../carbon-addons-devenv/src/scss/index.scss | 4 +- .../src/scss/personfolio.scss | 46 +++---- .../src/scss/variables.scss | 4 +- .../stories/PersonFolio.stories.js | 59 ++++----- 25 files changed, 373 insertions(+), 411 deletions(-) diff --git a/packages/carbon-addons-devenv/sample_renderers/Renderer.js b/packages/carbon-addons-devenv/sample_renderers/Renderer.js index 9321c17..669c122 100644 --- a/packages/carbon-addons-devenv/sample_renderers/Renderer.js +++ b/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, + }, + }); }); - }); - } + }; } diff --git a/packages/carbon-addons-devenv/sample_renderers/logo/index.js b/packages/carbon-addons-devenv/sample_renderers/logo/index.js index a5e39f0..354ee56 100644 --- a/packages/carbon-addons-devenv/sample_renderers/logo/index.js +++ b/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, }; diff --git a/packages/carbon-addons-devenv/sample_renderers/personFolio/index.js b/packages/carbon-addons-devenv/sample_renderers/personFolio/index.js index 1219ff2..1e52159 100644 --- a/packages/carbon-addons-devenv/sample_renderers/personFolio/index.js +++ b/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, }; diff --git a/packages/carbon-addons-devenv/src/apollo-client-hooks/core/ApolloClientConfig.js b/packages/carbon-addons-devenv/src/apollo-client-hooks/core/ApolloClientConfig.js index c46d0ad..73cac2c 100644 --- a/packages/carbon-addons-devenv/src/apollo-client-hooks/core/ApolloClientConfig.js +++ b/packages/carbon-addons-devenv/src/apollo-client-hooks/core/ApolloClientConfig.js @@ -2,13 +2,13 @@ * Copyright Merative US L.P. 2021 */ -import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client'; -import { setContext } from '@apollo/client/link/context'; +import { ApolloClient, createHttpLink, InMemoryCache } from "@apollo/client"; +import { setContext } from "@apollo/client/link/context"; let csrfToken; class ApolloClientConfig { - static serverURL = process.env.GRAPHQL_SERVER_URL || '/Rest/graphql'; + static serverURL = process.env.GRAPHQL_SERVER_URL || "/Rest/graphql"; static csrfTokenHeader = process.env.CSRF_TOKEN_REQUEST_HEADER; @@ -24,9 +24,9 @@ class ApolloClientConfig { */ static getCSRFRequestHeaderName = () => { return process.env.CSRF_TOKEN_REQUEST_HEADER; - } - - /** + }; + + /** * Gets the CSRF token by making a call to the configured REST endpoint. * * @static @@ -34,13 +34,13 @@ class ApolloClientConfig { * @memberof ApolloClientConfig * @private */ - static getCSRFToken = async () => { + static getCSRFToken = async () => { const response = await fetch(this.csrfTokenEndpoint, {}); const token = await response.headers.get(this.csrfTokenHeader); return token; - } + }; - /** + /** * Gets the http endpoint for GraphQL with basic configuration. * * @static @@ -67,8 +67,8 @@ class ApolloClientConfig { headers: { ...headers, [this.csrfTokenHeader]: crfToken ? `${crfToken}` : "", - } - } + }, + }; }; /** @@ -79,8 +79,8 @@ class ApolloClientConfig { * @memberof ApolloClientConfig * @private */ - static getCSRFLink = () => { - return setContext(async(_, { headers }) => { + static getCSRFLink = () => { + return setContext(async (_, { headers }) => { // return the headers to the context so httpLink can read them if (!csrfToken) { csrfToken = await this.getCSRFToken(); @@ -89,8 +89,7 @@ class ApolloClientConfig { }); }; - - /** + /** * Gets the Apollo Client configuration depdending on the configuration from the renderers. * * @static @@ -100,15 +99,16 @@ class ApolloClientConfig { */ static getConfig = (configuration) => { const { security } = configuration; - const isCsrfEnabled = security && security.csrf && security.csrf.enabled === 'true'; + const isCsrfEnabled = + security && security.csrf && security.csrf.enabled === "true"; const httpLink = this.getHttpLink(); - return new ApolloClient({ - link: isCsrfEnabled ? this.getCSRFLink().concat(httpLink) : httpLink, - headers: { - 'Accept-Language': configuration.locale, - }, - cache: new InMemoryCache() - }); - } + return new ApolloClient({ + link: isCsrfEnabled ? this.getCSRFLink().concat(httpLink) : httpLink, + headers: { + "Accept-Language": configuration.locale, + }, + cache: new InMemoryCache(), + }); + }; } export default ApolloClientConfig; diff --git a/packages/carbon-addons-devenv/src/apollo-client-hooks/core/ApolloClientDataProvider.js b/packages/carbon-addons-devenv/src/apollo-client-hooks/core/ApolloClientDataProvider.js index 7cd69ee..143633b 100644 --- a/packages/carbon-addons-devenv/src/apollo-client-hooks/core/ApolloClientDataProvider.js +++ b/packages/carbon-addons-devenv/src/apollo-client-hooks/core/ApolloClientDataProvider.js @@ -2,22 +2,17 @@ * Copyright Merative US L.P. 2020 */ -import React from 'react'; -import PropTypes from 'prop-types'; -import { ApolloProvider } from '@apollo/client'; +import React from "react"; +import PropTypes from "prop-types"; +import { ApolloProvider } from "@apollo/client"; const ApolloClientDataProvider = ({ apolloClient, children }) => { - return ( - - {children} - - ); + return {children}; }; ApolloClientDataProvider.propTypes = { apolloClient: PropTypes.object.isRequired, - children: PropTypes.element.isRequired -} - + children: PropTypes.element.isRequired, +}; export default ApolloClientDataProvider; diff --git a/packages/carbon-addons-devenv/src/apollo-client-hooks/core/ApolloClientQueryProvider.js b/packages/carbon-addons-devenv/src/apollo-client-hooks/core/ApolloClientQueryProvider.js index 585ee9f..6ab1da3 100644 --- a/packages/carbon-addons-devenv/src/apollo-client-hooks/core/ApolloClientQueryProvider.js +++ b/packages/carbon-addons-devenv/src/apollo-client-hooks/core/ApolloClientQueryProvider.js @@ -2,25 +2,23 @@ * Copyright Merative US L.P. 2020 */ -import React from 'react'; -import PropTypes from 'prop-types'; -import InlContext from '../../react/core/InlContext'; - -const ApolloClientQueryProvider = ({configuration, children}) => { +import React from "react"; +import PropTypes from "prop-types"; +import InlContext from "../../react/core/InlContext"; +const ApolloClientQueryProvider = ({ configuration, children }) => { const { locale, dateFormat, labels } = configuration; return ( - {children} + {children} ); - }; ApolloClientQueryProvider.propTypes = { @@ -28,6 +26,4 @@ ApolloClientQueryProvider.propTypes = { children: PropTypes.node.isRequired, }; - - export default ApolloClientQueryProvider; diff --git a/packages/carbon-addons-devenv/src/apollo-client-hooks/hook_samples/Logo/LogoQuery.js b/packages/carbon-addons-devenv/src/apollo-client-hooks/hook_samples/Logo/LogoQuery.js index c308228..db2ac03 100644 --- a/packages/carbon-addons-devenv/src/apollo-client-hooks/hook_samples/Logo/LogoQuery.js +++ b/packages/carbon-addons-devenv/src/apollo-client-hooks/hook_samples/Logo/LogoQuery.js @@ -1,10 +1,10 @@ /* * Copyright Merative US L.P. 2021 */ -import { gql, useQuery } from '@apollo/client'; +import { gql, useQuery } from "@apollo/client"; const GetLogo = gql` - query GetLogo($logoId: String!) { + query GetLogo($logoId: String!) { logo(logoId: $logoId) { name } @@ -15,9 +15,6 @@ const useGetLogo = (logoIdValue) => { return useQuery(GetLogo, { variables: { logoId: logoIdValue }, }); -} - -export { - GetLogo, - useGetLogo, }; + +export { GetLogo, useGetLogo }; diff --git a/packages/carbon-addons-devenv/src/apollo-client-hooks/hook_samples/Person/PersonQuery.js b/packages/carbon-addons-devenv/src/apollo-client-hooks/hook_samples/Person/PersonQuery.js index 1cd9ab2..0d28d45 100644 --- a/packages/carbon-addons-devenv/src/apollo-client-hooks/hook_samples/Person/PersonQuery.js +++ b/packages/carbon-addons-devenv/src/apollo-client-hooks/hook_samples/Person/PersonQuery.js @@ -2,7 +2,7 @@ * Copyright Merative US L.P. 2021 */ -import { gql, useQuery } from '@apollo/client'; +import { gql, useQuery } from "@apollo/client"; const GetPersons = gql` query GetPerson { @@ -11,15 +11,12 @@ const GetPersons = gql` firstname surname age - } + } } `; const useGetPersons = () => { return useQuery(GetPersons); -} - -export { - GetPersons, - useGetPersons, }; + +export { GetPersons, useGetPersons }; diff --git a/packages/carbon-addons-devenv/src/index.js b/packages/carbon-addons-devenv/src/index.js index 30d3621..38dc72a 100644 --- a/packages/carbon-addons-devenv/src/index.js +++ b/packages/carbon-addons-devenv/src/index.js @@ -1,12 +1,7 @@ - import "../../custom-carbon-addons/src/scss/index.scss"; -import 'regenerator-runtime/runtime'; -import { renderers, sampleRenderers } from './staticExports'; - - import { - requireCustomCarbonAddons, - } from './dynamicExports'; +import "regenerator-runtime/runtime"; +import { renderers, sampleRenderers } from "./staticExports"; - export default { requireCustomCarbonAddons, renderers, sampleRenderers }; +import { requireCustomCarbonAddons } from "./dynamicExports"; - \ No newline at end of file +export default { requireCustomCarbonAddons, renderers, sampleRenderers }; diff --git a/packages/carbon-addons-devenv/src/react/addons_samples/Logo/Logo.js b/packages/carbon-addons-devenv/src/react/addons_samples/Logo/Logo.js index 74d74ab..64fab0c 100644 --- a/packages/carbon-addons-devenv/src/react/addons_samples/Logo/Logo.js +++ b/packages/carbon-addons-devenv/src/react/addons_samples/Logo/Logo.js @@ -2,23 +2,23 @@ * Copyright Merative US L.P. 2021 */ -import React from 'react'; -import PropTypes from 'prop-types'; -import cx from 'classnames'; -import settings from '../../core/settings'; +import React from "react"; +import PropTypes from "prop-types"; +import cx from "classnames"; +import settings from "../../core/settings"; - /** - * Example component. - *

- * A logo component that renders an image within a circle. A typical usage pattern for this component - * would be for the avatar of a person. - * @namespace Logo - */ +/** + * Example component. + *

+ * A logo component that renders an image within a circle. A typical usage pattern for this component + * would be for the avatar of a person. + * @namespace Logo + */ /** * @typedef {Object} Logo * @memberof Logo - * @property {node} children Child node(s). This is required. An 'img' node i a typical child node + * @property {node} children Child node(s). This is required. An 'img' node i a typical child node * @property {string} className CSS class name to be added to class list. This is optional. * @property {string} size The size of logo. Accepted values are 'small', 'mdeium', or 'large'. * This is optional and the default is medium. @@ -29,16 +29,16 @@ const Logo = ({ children, className, imageName, size, ...other }) => { const styleClass = cx( `${settings.prefix}--logo`, { - [`${settings.prefix}--logo--large`]: size === 'large', - [`${settings.prefix}--logo--medium`]: size === 'medium', - [`${settings.prefix}--logo--small`]: size === 'small', + [`${settings.prefix}--logo--large`]: size === "large", + [`${settings.prefix}--logo--medium`]: size === "medium", + [`${settings.prefix}--logo--small`]: size === "small", }, - className + className, ); const pathToImage = `../Images/${imageName}`; return (

- {imageName ? (a logo) : <>{children}} + {imageName ? a logo : <>{children}}
); }; @@ -57,13 +57,13 @@ Logo.propTypes = { /** * Specify an optional size for the Logo. Defaults to 'medium' */ - size: PropTypes.oneOf(['small', 'medium', 'large']), + size: PropTypes.oneOf(["small", "medium", "large"]), }; Logo.defaultProps = { - size: 'medium', + size: "medium", className: undefined, - imageName: undefined + imageName: undefined, }; export default Logo; diff --git a/packages/carbon-addons-devenv/src/react/addons_samples/Logo/Logo.stories.js b/packages/carbon-addons-devenv/src/react/addons_samples/Logo/Logo.stories.js index e6fc29c..5f5bc73 100644 --- a/packages/carbon-addons-devenv/src/react/addons_samples/Logo/Logo.stories.js +++ b/packages/carbon-addons-devenv/src/react/addons_samples/Logo/Logo.stories.js @@ -1,67 +1,68 @@ -import React from 'react'; -import Example from '../../../examples/images/sample-logo.jpg'; -import Logo from './Logo'; - +import React from "react"; +import Example from "../../../examples/images/sample-logo.jpg"; +import Logo from "./Logo"; export default { - title: 'Logo', + title: "Logo", component: Logo, -} +}; -const Template = (args) =>
logo
; +const Template = (args) => ( +
+ {" "} + + logo + +
+); export const Small = Template.bind({}); Small.args = { -size: "small", + size: "small", }; export const Medium = Template.bind({}); Medium.args = { -size: "medium", + size: "medium", }; export const Large = Template.bind({}); Large.args = { -size: "large", + size: "large", }; - - - export const All = () => { return (
-
-
-
-

small

- - small logo - -
+
+
+
+

small

+ + small logo +
-
-
-

medium

- - medium logo - -
+
+
+
+

medium

+ + medium logo +
-
-
-

large

- - large logo - -
+
+
+
+

large

+ + large logo +
+
); }; - - diff --git a/packages/carbon-addons-devenv/src/react/addons_samples/Logo/__tests__/Logo.test.js b/packages/carbon-addons-devenv/src/react/addons_samples/Logo/__tests__/Logo.test.js index 97d3c3f..2f5aea3 100644 --- a/packages/carbon-addons-devenv/src/react/addons_samples/Logo/__tests__/Logo.test.js +++ b/packages/carbon-addons-devenv/src/react/addons_samples/Logo/__tests__/Logo.test.js @@ -2,28 +2,24 @@ * Copyright Merative US L.P. 2020 */ -import { mount } from 'enzyme'; -import React from 'react';import Logo from '../Logo'; -import settings from '../../../core/settings'; +import { mount } from "enzyme"; +import React from "react"; +import Logo from "../Logo"; +import settings from "../../../core/settings"; - -describe('Logo tests', () => { - it('tests Logo 1 children node', () => { +describe("Logo tests", () => { + it("tests Logo 1 children node", () => { const smallLogo = mount( small logo - + , ); - const logoDiv = smallLogo.find('div'); + const logoDiv = smallLogo.find("div"); // check that the root div exists expect(logoDiv.exists()).toBeTruthy(); // check class name on root div - expect( - logoDiv.hasClass(`${settings.prefix}--logo`) - ).toBeTruthy(); - expect( - logoDiv.hasClass(`${settings.prefix}--logo--small`) - ).toBeTruthy(); + expect(logoDiv.hasClass(`${settings.prefix}--logo`)).toBeTruthy(); + expect(logoDiv.hasClass(`${settings.prefix}--logo--small`)).toBeTruthy(); // check child nodes expect(logoDiv.at(0).children().length).toBe(1); @@ -33,16 +29,20 @@ describe('Logo tests', () => { const imgAtts = logoDiv.at(0).childAt(0).props(); expect(Object.keys(imgAtts).length).toBe(2); expect(logoDiv.at(0).childAt(0).props().src).toBe("../sample-logo.jpg"); - expect(logoDiv.at(0).childAt(0).props().alt).toBe("small logo"); + expect(logoDiv.at(0).childAt(0).props().alt).toBe("small logo"); }); - it('tests size and className attributes', () => { + it("tests size and className attributes", () => { const largeLogo = mount( - - small logo - + + small logo + , ); - const logoDiv = largeLogo.find('div'); + const logoDiv = largeLogo.find("div"); // check that the root div exists expect(logoDiv.exists()).toBeTruthy(); // check class name on root div @@ -50,29 +50,27 @@ describe('Logo tests', () => { const divAtts = logoDiv.at(0).props(); expect(Object.keys(divAtts).length).toBe(3); - expect(logoDiv.at(0).props().className).toBe("bx--logo bx--logo--large settings.prefix--logo--extraextra"); - expect(logoDiv.at(0).props().id).toBe("logo_123"); - // this is the child nodes not an attribute - expect(typeof logoDiv.at(0).props().children !== 'string').toBeTruthy(); + expect(logoDiv.at(0).props().className).toBe( + "bx--logo bx--logo--large settings.prefix--logo--extraextra", + ); + expect(logoDiv.at(0).props().id).toBe("logo_123"); + // this is the child nodes not an attribute + expect(typeof logoDiv.at(0).props().children !== "string").toBeTruthy(); // check child nodes expect(logoDiv.at(0).children().length).toBe(1); // child node already tested previoussly }); - it('tests optional attributes', () => { + it("tests optional attributes", () => { const logoWithImageName = mount( child - + , ); - const logoDiv = logoWithImageName.find('div'); + const logoDiv = logoWithImageName.find("div"); // check that the root div exists expect(logoDiv.exists()).toBeTruthy(); }); - }); - - - diff --git a/packages/carbon-addons-devenv/src/react/addons_samples/Logo/index.js b/packages/carbon-addons-devenv/src/react/addons_samples/Logo/index.js index c4ba0fc..9d49b8b 100644 --- a/packages/carbon-addons-devenv/src/react/addons_samples/Logo/index.js +++ b/packages/carbon-addons-devenv/src/react/addons_samples/Logo/index.js @@ -1,24 +1,19 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import Logo from './Logo'; +import React from "react"; +import ReactDOM from "react-dom"; +import Logo from "./Logo"; const getWrapper = (iframeWindow, containerID) => { return iframeWindow.document.getElementById(`${containerID}`); -} +}; -const render = ({ - inputId, - iframeWindow = window, - logo, - size, -}) => { +const render = ({ inputId, iframeWindow = window, logo, size }) => { const container = getWrapper(iframeWindow, inputId); ReactDOM.render( - small logo - , - container + small logo + , + container, ); }; diff --git a/packages/carbon-addons-devenv/src/react/addons_samples/PersonFolio/PersonFolio.js b/packages/carbon-addons-devenv/src/react/addons_samples/PersonFolio/PersonFolio.js index 133de7d..e7f61d0 100644 --- a/packages/carbon-addons-devenv/src/react/addons_samples/PersonFolio/PersonFolio.js +++ b/packages/carbon-addons-devenv/src/react/addons_samples/PersonFolio/PersonFolio.js @@ -2,19 +2,19 @@ * Copyright Merative US L.P. 2021 */ -import React, { useContext } from 'react'; +import React, { useContext } from "react"; import PropTypes from "prop-types"; -import cx from 'classnames'; -import InlContext from '../../core/InlContext'; -import settings from '../../core/settings'; +import cx from "classnames"; +import InlContext from "../../core/InlContext"; +import settings from "../../core/settings"; /** - * An Example component. - *

- * A PersonFolio component that renders a list of people. - * @namespace PersonFolio - */ + * An Example component. + *

+ * A PersonFolio component that renders a list of people. + * @namespace PersonFolio + */ /** * @typedef {Object} PersonFolio @@ -27,58 +27,63 @@ import settings from '../../core/settings'; */ const PersonFolio = ({ children, className, age, ...other }) => { const { labels } = useContext(InlContext); - const styleClass = cx( - `${settings.prefix}--personfolio`, - { - [`${settings.prefix}--personfolio--child`]: age < 18, - [`${settings.prefix}--personfolio--youngadult`]: age >= 18 && age < 25, - [`${settings.prefix}--personfolio--adult`]: age >= 25 && age < 65, - [`${settings.prefix}--personfolio--senior`]: age >= 65, - }, - className - ); + const styleClass = cx( + `${settings.prefix}--personfolio`, + { + [`${settings.prefix}--personfolio--child`]: age < 18, + [`${settings.prefix}--personfolio--youngadult`]: age >= 18 && age < 25, + [`${settings.prefix}--personfolio--adult`]: age >= 25 && age < 65, + [`${settings.prefix}--personfolio--senior`]: age >= 65, + }, + className, + ); - const {firstname, surname} = other; - const firstnameLabel = labels && labels.firstnameLabel || "First name"; - const surnameLabel = labels && labels.surnameLabel || "Surname"; - const ageLabel = labels && labels.ageLabel || "Age"; - return ( - // the renderer usually sets the 'data-testid' attribute but where - // there is a large composition of components it may need to be added at this level -

-

{firstnameLabel}: {firstname}

-

{surnameLabel}: {surname}

-

{ageLabel}: {age}

- {children} -
- ); - }; + const { firstname, surname } = other; + const firstnameLabel = (labels && labels.firstnameLabel) || "First name"; + const surnameLabel = (labels && labels.surnameLabel) || "Surname"; + const ageLabel = (labels && labels.ageLabel) || "Age"; + return ( + // the renderer usually sets the 'data-testid' attribute but where + // there is a large composition of components it may need to be added at this level +
+

+ {firstnameLabel}: {firstname} +

+

+ {surnameLabel}: {surname} +

+

+ {ageLabel}: {age} +

+ {children} +
+ ); +}; - PersonFolio.propTypes = { - /** - * Pass in the image that will be rendered within the Logo. - */ - children: PropTypes.node, - - /** - * Additional styling - */ - className: PropTypes.string, - - /** - * Additional styling - */ - age: PropTypes.number, +PersonFolio.propTypes = { + /** + * Pass in the image that will be rendered within the Logo. + */ + children: PropTypes.node, - }; - - PersonFolio.defaultProps = { - className: undefined, - children: undefined, - age: undefined, - }; + /** + * Additional styling + */ + className: PropTypes.string, /** + * Additional styling + */ + age: PropTypes.number, +}; + +PersonFolio.defaultProps = { + className: undefined, + children: undefined, + age: undefined, +}; + +/** * Group * @typedef {Object} PortFolio * @memberof PortFolio diff --git a/packages/carbon-addons-devenv/src/react/addons_samples/PersonFolio/__tests__/PersonFolio.test.js b/packages/carbon-addons-devenv/src/react/addons_samples/PersonFolio/__tests__/PersonFolio.test.js index c1000d9..6e75601 100644 --- a/packages/carbon-addons-devenv/src/react/addons_samples/PersonFolio/__tests__/PersonFolio.test.js +++ b/packages/carbon-addons-devenv/src/react/addons_samples/PersonFolio/__tests__/PersonFolio.test.js @@ -2,33 +2,31 @@ * Copyright Merative US L.P. 2021 */ - -import { mount } from 'enzyme'; -import React from 'react'; -import PersonFolio from '../PersonFolio'; -import settings from '../../../core/settings'; -import InlContext from '../../../core/InlContext'; +import { mount } from "enzyme"; +import React from "react"; +import PersonFolio from "../PersonFolio"; +import settings from "../../../core/settings"; +import InlContext from "../../../core/InlContext"; const testParagraphElement = (wrapperElement, text) => { expect(wrapperElement.type()).toBe("p"); expect(wrapperElement.text()).toBe(text); -} - -describe('personfolio tests', () => { +}; - it('tests child Person', () => { +describe("personfolio tests", () => { + it("tests child Person", () => { const child = mount( - + , ); - const portFolioDiv = child.find('div'); + const portFolioDiv = child.find("div"); // check that the root div exists expect(portFolioDiv.exists()).toBeTruthy(); // check class name on root div expect( - portFolioDiv.hasClass(`${settings.prefix}--personfolio`) + portFolioDiv.hasClass(`${settings.prefix}--personfolio`), ).toBeTruthy(); expect( - portFolioDiv.hasClass(`${settings.prefix}--personfolio--child`) + portFolioDiv.hasClass(`${settings.prefix}--personfolio--child`), ).toBeTruthy(); // check child nodes @@ -37,40 +35,39 @@ describe('personfolio tests', () => { testParagraphElement(portFolioDiv.at(0).childAt(0), "First name: Dave"); // 2nd node testParagraphElement(portFolioDiv.at(0).childAt(1), "Surname: Bloggs"); - // 3rd node - testParagraphElement(portFolioDiv.at(0).childAt(2), "Age: 12"); - + // 3rd node + testParagraphElement(portFolioDiv.at(0).childAt(2), "Age: 12"); }); - it('tests senior Person', () => { + it("tests senior Person", () => { const senior = mount( - + , ); - const portFolioDiv = senior.find('div'); + const portFolioDiv = senior.find("div"); expect( - portFolioDiv.hasClass(`${settings.prefix}--personfolio`) + portFolioDiv.hasClass(`${settings.prefix}--personfolio`), ).toBeTruthy(); expect( - portFolioDiv.hasClass(`${settings.prefix}--personfolio--senior`) + portFolioDiv.hasClass(`${settings.prefix}--personfolio--senior`), ).toBeTruthy(); - // check child nodes - expect(portFolioDiv.at(0).children().length).toBe(3); - // 1st node - testParagraphElement(portFolioDiv.at(0).childAt(0), "First name: Jerry"); - // 2nd node - testParagraphElement(portFolioDiv.at(0).childAt(1), "Surname: Bloggs"); - // 3rd node - testParagraphElement(portFolioDiv.at(0).childAt(2), "Age: 70"); + // check child nodes + expect(portFolioDiv.at(0).children().length).toBe(3); + // 1st node + testParagraphElement(portFolioDiv.at(0).childAt(0), "First name: Jerry"); + // 2nd node + testParagraphElement(portFolioDiv.at(0).childAt(1), "Surname: Bloggs"); + // 3rd node + testParagraphElement(portFolioDiv.at(0).childAt(2), "Age: 70"); }); - it('tests children', () => { + it("tests children", () => { const personWithChildNode = mount( child node - + , ); - const portFolioDiv = personWithChildNode.find('div'); + const portFolioDiv = personWithChildNode.find("div"); // check child nodes present expect(portFolioDiv.at(0).children().length).toBe(4); @@ -79,22 +76,21 @@ describe('personfolio tests', () => { expect(portFolioDiv.at(0).childAt(3).text()).toBe("child node"); }); - it('tests labels passed to the component', () => { - const labels = {firstnameLabel: "firstNom", surnameLabel: "surNom"} + it("tests labels passed to the component", () => { + const labels = { firstnameLabel: "firstNom", surnameLabel: "surNom" }; const personWithChildNode = mount( - - child node - - + value={{ + labels, + }} + > + + child node + + , ); - - const portFolioDiv = personWithChildNode.find('div'); + const portFolioDiv = personWithChildNode.find("div"); // check child nodes present expect(portFolioDiv.at(0).children().length).toBe(4); @@ -103,4 +99,3 @@ describe('personfolio tests', () => { expect(portFolioDiv.at(0).childAt(3).text()).toBe("child node"); }); }); - diff --git a/packages/carbon-addons-devenv/src/react/core/InlContext.js b/packages/carbon-addons-devenv/src/react/core/InlContext.js index 96643de..8a47e47 100644 --- a/packages/carbon-addons-devenv/src/react/core/InlContext.js +++ b/packages/carbon-addons-devenv/src/react/core/InlContext.js @@ -2,7 +2,7 @@ * Copyright Merative US L.P. 2020 */ -import React from 'react'; +import React from "react"; const InlContext = React.createContext({ labels: undefined, diff --git a/packages/carbon-addons-devenv/src/react/core/settings.js b/packages/carbon-addons-devenv/src/react/core/settings.js index 10f7cb2..d036ead 100644 --- a/packages/carbon-addons-devenv/src/react/core/settings.js +++ b/packages/carbon-addons-devenv/src/react/core/settings.js @@ -1,6 +1,5 @@ - const settings = { - prefix: 'bx', + prefix: "bx", }; module.exports = settings; diff --git a/packages/carbon-addons-devenv/src/react/index.js b/packages/carbon-addons-devenv/src/react/index.js index 5facf53..71eb32e 100644 --- a/packages/carbon-addons-devenv/src/react/index.js +++ b/packages/carbon-addons-devenv/src/react/index.js @@ -1,8 +1,6 @@ -import 'regenerator-runtime/runtime'; -import * as Logo from './addons_samples/Logo'; -import * as PersonFolio from './addons_samples/PersonFolio/PersonFolio'; -import settings from './core/settings'; +import "regenerator-runtime/runtime"; +import * as Logo from "./addons_samples/Logo"; +import * as PersonFolio from "./addons_samples/PersonFolio/PersonFolio"; +import settings from "./core/settings"; export { Logo, PersonFolio, settings }; - - diff --git a/packages/carbon-addons-devenv/src/scss/addon-samples.scss b/packages/carbon-addons-devenv/src/scss/addon-samples.scss index 4670c8e..d13e524 100644 --- a/packages/carbon-addons-devenv/src/scss/addon-samples.scss +++ b/packages/carbon-addons-devenv/src/scss/addon-samples.scss @@ -1,8 +1,6 @@ - - - //------------------------- - // ✨ Addons samples - //------------------------- - @import './variables.scss'; - @import './addons_samples/logo.scss'; - @import './addons_samples/personfolio.scss'; +//------------------------- +// ✨ Addons samples +//------------------------- +@import "./variables.scss"; +@import "./addons_samples/logo.scss"; +@import "./addons_samples/personfolio.scss"; diff --git a/packages/carbon-addons-devenv/src/scss/addons_samples/personfolio.scss b/packages/carbon-addons-devenv/src/scss/addons_samples/personfolio.scss index 186ae44..e09f02b 100644 --- a/packages/carbon-addons-devenv/src/scss/addons_samples/personfolio.scss +++ b/packages/carbon-addons-devenv/src/scss/addons_samples/personfolio.scss @@ -1,32 +1,25 @@ .#{$prefix}--personfolio { - - background-color: $layer-01; - color: $text-primary; - border-radius: 6px; - border-width: 1px 1px 1px 1px; - border-style: solid !important; - padding: $spacing-05; - margin-top: $spacing-05; - - &--child { - border-color: $support-error; - - } - - &--youngadult { - - border-color: $support-success; - - } - - &--adult { - - border-color: $support-warning; - } - - &--senior { - - border-color: $support-info; - } - + background-color: $layer-01; + color: $text-primary; + border-radius: 6px; + border-width: 1px 1px 1px 1px; + border-style: solid !important; + padding: $spacing-05; + margin-top: $spacing-05; + + &--child { + border-color: $support-error; + } + + &--youngadult { + border-color: $support-success; + } + + &--adult { + border-color: $support-warning; + } + + &--senior { + border-color: $support-info; + } } diff --git a/packages/carbon-addons-devenv/src/scss/carbon-components.scss b/packages/carbon-addons-devenv/src/scss/carbon-components.scss index 6cc8ba3..06261bc 100644 --- a/packages/carbon-addons-devenv/src/scss/carbon-components.scss +++ b/packages/carbon-addons-devenv/src/scss/carbon-components.scss @@ -1,9 +1,9 @@ -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/react/scss/themes'; -@use '@carbon/react/scss/theme' as * with ( +@use "@carbon/styles/scss/spacing" as *; +@use "@carbon/react/scss/themes"; +@use "@carbon/react/scss/theme" as * with ( $theme: themes.$g10 ); -@use '@carbon/react/scss/reset'; -@import './variables.scss'; -@import './addons_samples/logo.scss'; -@import './addons_samples/personfolio.scss'; +@use "@carbon/react/scss/reset"; +@import "./variables.scss"; +@import "./addons_samples/logo.scss"; +@import "./addons_samples/personfolio.scss"; diff --git a/packages/carbon-addons-devenv/src/scss/index.scss b/packages/carbon-addons-devenv/src/scss/index.scss index c2f47bd..17a287f 100644 --- a/packages/carbon-addons-devenv/src/scss/index.scss +++ b/packages/carbon-addons-devenv/src/scss/index.scss @@ -1,5 +1,5 @@ -@import './app.scss'; +@import "./app.scss"; .spm-custom-component { - @import './carbon-components.scss'; + @import "./carbon-components.scss"; } diff --git a/packages/carbon-addons-devenv/src/scss/personfolio.scss b/packages/carbon-addons-devenv/src/scss/personfolio.scss index 4d6eda3..b007b06 100644 --- a/packages/carbon-addons-devenv/src/scss/personfolio.scss +++ b/packages/carbon-addons-devenv/src/scss/personfolio.scss @@ -1,33 +1,25 @@ .#{$prefix}--personfolio { + background-color: $ui-01; + color: $text-01; + border-radius: 6px; + border-width: 1px 1px 1px 1px; + border-style: solid !important; + padding: $spacing-05; + margin-top: $spacing-05; - background-color: $ui-01; - color: $text-01; - border-radius: 6px; - border-width: 1px 1px 1px 1px; - border-style: solid !important; - padding: $spacing-05; - margin-top: $spacing-05; - - &--child { - border-color: $support-01; - - } - - &--youngadult { - - border-color: $support-02; - - } - - &--adult { + &--child { + border-color: $support-01; + } - border-color: $support-03; - } + &--youngadult { + border-color: $support-02; + } - &--senior { + &--adult { + border-color: $support-03; + } - border-color: $support-04; - } - + &--senior { + border-color: $support-04; } - \ No newline at end of file +} diff --git a/packages/carbon-addons-devenv/src/scss/variables.scss b/packages/carbon-addons-devenv/src/scss/variables.scss index 6ad9649..d550332 100644 --- a/packages/carbon-addons-devenv/src/scss/variables.scss +++ b/packages/carbon-addons-devenv/src/scss/variables.scss @@ -1,5 +1,5 @@ -$prefix: 'bx'; -$border-radius-round: 100vw !default; +$prefix: "bx"; +$border-radius-round: 100vw !default; $width-logo-large: 120px; // do we need small and medium too $width-logo-medium: 80px; $width-logo-small: 36px; diff --git a/packages/carbon-addons-devenv/stories/PersonFolio.stories.js b/packages/carbon-addons-devenv/stories/PersonFolio.stories.js index 61810c6..0ceea2f 100644 --- a/packages/carbon-addons-devenv/stories/PersonFolio.stories.js +++ b/packages/carbon-addons-devenv/stories/PersonFolio.stories.js @@ -1,70 +1,73 @@ -import React from 'react'; -import PersonFolio from '../src/react/addons_samples/PersonFolio/PersonFolio'; - +import React from "react"; +import PersonFolio from "../src/react/addons_samples/PersonFolio/PersonFolio"; // 👇 We create a “template” of how args map to rendering -const Template = (args) =>
; +const Template = (args) => ( +
+ {" "} + +
+); // 👇 Each story then reuses that template export const Child = Template.bind({}); Child.args = { -age: "12", + age: "12", }; export const YoungAdult = Template.bind({}); YoungAdult.args = { -age: "20", + age: "20", }; export const Adult = Template.bind({}); Adult.args = { -age: "32", + age: "32", }; export const Senior = Template.bind({}); Senior.args = { -age: "71", + age: "71", }; export const PersonFolioStory = () => { return (
-
-
-
- -
+
+
+
+
+
-
-
- -
+
+
+
+
-
-
- -
+
+
+
+
-
-
- -
+
+
+
+
); }; - export default { - title: 'Person Folio Story', + title: "Person Folio Story", component: PersonFolio, -} \ No newline at end of file +}; From ab499df61603c3e5dfb474c8f238c8dc242feb16 Mon Sep 17 00:00:00 2001 From: folkforms Date: Thu, 25 Apr 2024 09:07:24 +0100 Subject: [PATCH 2/6] Apply prettier to custom-carbon-addons --- packages/custom-carbon-addons/src/scss/index.scss | 12 ++++++------ .../custom-carbon-addons/src/scss/index_latest.scss | 12 ++++++------ .../custom-carbon-addons/src/scss/variables.scss | 2 +- 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/custom-carbon-addons/src/scss/index.scss b/packages/custom-carbon-addons/src/scss/index.scss index b1f2368..e75ab9c 100644 --- a/packages/custom-carbon-addons/src/scss/index.scss +++ b/packages/custom-carbon-addons/src/scss/index.scss @@ -1,17 +1,17 @@ -@import '../../../carbon-addons-devenv/src/scss/app.scss'; +@import "../../../carbon-addons-devenv/src/scss/app.scss"; .spm-custom-component { //------------------------- // Variable overrides - //------------------------- - @import './variables.scss'; + //------------------------- + @import "./variables.scss"; //------------------------- // Carbon-Components - //------------------------- - @import '../../../carbon-addons-devenv/src/scss/carbon-components.scss'; + //------------------------- + @import "../../../carbon-addons-devenv/src/scss/carbon-components.scss"; //------------------------- // Custom addons scss here - //------------------------- + //------------------------- // Sample component addons //@import '../../../carbon-addons-devenv/src/scss/addon-samples.scss'; } diff --git a/packages/custom-carbon-addons/src/scss/index_latest.scss b/packages/custom-carbon-addons/src/scss/index_latest.scss index 7572746..95eee20 100644 --- a/packages/custom-carbon-addons/src/scss/index_latest.scss +++ b/packages/custom-carbon-addons/src/scss/index_latest.scss @@ -1,17 +1,17 @@ -@import 'devenv_pkg/src/scss/app.scss'; +@import "devenv_pkg/src/scss/app.scss"; .spm-custom-component { //------------------------- // Variable overrides - //------------------------- - @import './variables.scss'; + //------------------------- + @import "./variables.scss"; //------------------------- // Carbon-Components - //------------------------- - @import 'devenv_pkg/src/scss/carbon-components.scss'; + //------------------------- + @import "devenv_pkg/src/scss/carbon-components.scss"; //------------------------- // Custom addons scss here - //------------------------- + //------------------------- // Sample component addons // add your custom styling here from scss files in the addons directory // e.g @import './addons/componentX.scss'; diff --git a/packages/custom-carbon-addons/src/scss/variables.scss b/packages/custom-carbon-addons/src/scss/variables.scss index e14829b..f4688f1 100644 --- a/packages/custom-carbon-addons/src/scss/variables.scss +++ b/packages/custom-carbon-addons/src/scss/variables.scss @@ -1 +1 @@ -// custom variables here \ No newline at end of file +// custom variables here From 871807618098467d0730f127d95c8bcb9d9e79ff Mon Sep 17 00:00:00 2001 From: folkforms Date: Thu, 25 Apr 2024 09:09:39 +0100 Subject: [PATCH 3/6] Apply prettier to graphql-mocks --- packages/graphql-mocks/cors.js | 16 ++++--------- .../resolvers/SampleLogoResolvers.js | 14 +++++------ .../resolvers/SamplePersonResolvers.js | 13 +++++----- .../resolvers/data/samplePeopleData.js | 10 +++++--- packages/graphql-mocks/resolvers/index.js | 12 ++++------ .../graphql-mocks/typeDefs/LogoTypeDef.js | 18 +++++++------- .../graphql-mocks/typeDefs/PersonTypeDef.js | 22 ++++++++--------- packages/graphql-mocks/typeDefs/index.js | 24 +++++++++---------- 8 files changed, 60 insertions(+), 69 deletions(-) diff --git a/packages/graphql-mocks/cors.js b/packages/graphql-mocks/cors.js index 4f66c34..fd6f315 100644 --- a/packages/graphql-mocks/cors.js +++ b/packages/graphql-mocks/cors.js @@ -11,17 +11,11 @@ * @param {any} next next middleware call */ const cors = (req, res, next) => { - res.header('Access-Control-Allow-Origin', "*"); - res.header( - 'Access-Control-Allow-Headers', - '*' - ); - res.header( - 'Access-Control-Expose-Headers', - '*' - ); - res.header('Access-Control-Allow-Credentials', true); - res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE'); + res.header("Access-Control-Allow-Origin", "*"); + res.header("Access-Control-Allow-Headers", "*"); + res.header("Access-Control-Expose-Headers", "*"); + res.header("Access-Control-Allow-Credentials", true); + res.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, DELETE"); next(); }; diff --git a/packages/graphql-mocks/resolvers/SampleLogoResolvers.js b/packages/graphql-mocks/resolvers/SampleLogoResolvers.js index 90382ff..f8df1c7 100644 --- a/packages/graphql-mocks/resolvers/SampleLogoResolvers.js +++ b/packages/graphql-mocks/resolvers/SampleLogoResolvers.js @@ -1,11 +1,9 @@ - - -const { logoData } = require('./data/sampleLogoData'); +const { logoData } = require("./data/sampleLogoData"); const SampleLogoResolver = { - Query: { - logo: logoData, - } - } + Query: { + logo: logoData, + }, +}; -module.exports = SampleLogoResolver \ No newline at end of file +module.exports = SampleLogoResolver; diff --git a/packages/graphql-mocks/resolvers/SamplePersonResolvers.js b/packages/graphql-mocks/resolvers/SamplePersonResolvers.js index 62d2c4f..1429719 100644 --- a/packages/graphql-mocks/resolvers/SamplePersonResolvers.js +++ b/packages/graphql-mocks/resolvers/SamplePersonResolvers.js @@ -1,10 +1,9 @@ - -const { personsData } = require('./data/samplePeopleData'); +const { personsData } = require("./data/samplePeopleData"); const SamplePersonResolver = { - Query: { - persons: personsData, - } - } + Query: { + persons: personsData, + }, +}; -module.exports = SamplePersonResolver \ No newline at end of file +module.exports = SamplePersonResolver; diff --git a/packages/graphql-mocks/resolvers/data/samplePeopleData.js b/packages/graphql-mocks/resolvers/data/samplePeopleData.js index cc267da..745b5c8 100644 --- a/packages/graphql-mocks/resolvers/data/samplePeopleData.js +++ b/packages/graphql-mocks/resolvers/data/samplePeopleData.js @@ -1,5 +1,9 @@ const personsData = () => { - return [{id: 'id_1', firstname: 'John BAM', surname: 'Senior', age: 70}, {id: 'id_2', firstname: 'Jennifer BAM', surname: 'Middleage', age: 42}, {id: 'id_3', firstname: 'Sam BAM', surname: 'Young', age: 12}]; -} + return [ + { id: "id_1", firstname: "John BAM", surname: "Senior", age: 70 }, + { id: "id_2", firstname: "Jennifer BAM", surname: "Middleage", age: 42 }, + { id: "id_3", firstname: "Sam BAM", surname: "Young", age: 12 }, + ]; +}; -module.exports = { personsData }; \ No newline at end of file +module.exports = { personsData }; diff --git a/packages/graphql-mocks/resolvers/index.js b/packages/graphql-mocks/resolvers/index.js index 5b29288..d396cc5 100644 --- a/packages/graphql-mocks/resolvers/index.js +++ b/packages/graphql-mocks/resolvers/index.js @@ -1,16 +1,14 @@ - -const SamplePersonResolvers = require('./SamplePersonResolvers'); -const SampleLogoResolvers = require('./SampleLogoResolvers'); +const SamplePersonResolvers = require("./SamplePersonResolvers"); +const SampleLogoResolvers = require("./SampleLogoResolvers"); const Resolvers = [ // Sample resolvers here - SamplePersonResolvers, + SamplePersonResolvers, SampleLogoResolvers, // add your custom resolvers here and put the data // into the JSON data into the 'data' folder. - ]; module.exports = { - Resolvers -} \ No newline at end of file + Resolvers, +}; diff --git a/packages/graphql-mocks/typeDefs/LogoTypeDef.js b/packages/graphql-mocks/typeDefs/LogoTypeDef.js index a77e9fe..dc0ffb6 100644 --- a/packages/graphql-mocks/typeDefs/LogoTypeDef.js +++ b/packages/graphql-mocks/typeDefs/LogoTypeDef.js @@ -1,14 +1,14 @@ -const gql = require('graphql-tag'); +const gql = require("graphql-tag"); const LogoTypeDef = gql` -extend type Query { - logo(logoId: String!): Logo, -} + extend type Query { + logo(logoId: String!): Logo + } -type Logo { - logoId: String - name: String -} + type Logo { + logoId: String + name: String + } `; -module.exports = LogoTypeDef \ No newline at end of file +module.exports = LogoTypeDef; diff --git a/packages/graphql-mocks/typeDefs/PersonTypeDef.js b/packages/graphql-mocks/typeDefs/PersonTypeDef.js index e094627..4d92ad5 100644 --- a/packages/graphql-mocks/typeDefs/PersonTypeDef.js +++ b/packages/graphql-mocks/typeDefs/PersonTypeDef.js @@ -1,16 +1,16 @@ -const gql = require('graphql-tag'); +const gql = require("graphql-tag"); const PersonTypeDef = gql` -type Query { - persons: [Person], -} + type Query { + persons: [Person] + } -type Person { - id: String - firstname: String - surname: String - age: Int -} + type Person { + id: String + firstname: String + surname: String + age: Int + } `; -module.exports = PersonTypeDef \ No newline at end of file +module.exports = PersonTypeDef; diff --git a/packages/graphql-mocks/typeDefs/index.js b/packages/graphql-mocks/typeDefs/index.js index 43671dc..caf8313 100644 --- a/packages/graphql-mocks/typeDefs/index.js +++ b/packages/graphql-mocks/typeDefs/index.js @@ -1,15 +1,13 @@ - -const PersonTypeDef = require('./PersonTypeDef'); -const LogoTypeDef = require('./LogoTypeDef'); +const PersonTypeDef = require("./PersonTypeDef"); +const LogoTypeDef = require("./LogoTypeDef"); const TypeDefs = [ - // Sample tyepDefs here - PersonTypeDef, - LogoTypeDef - // add custom ones here - - ]; - - module.exports = { - TypeDefs - } \ No newline at end of file + // Sample tyepDefs here + PersonTypeDef, + LogoTypeDef, + // add custom ones here +]; + +module.exports = { + TypeDefs, +}; From 5ee7ae7b90105efe88c411fa75d9c13fa102552a Mon Sep 17 00:00:00 2001 From: folkforms Date: Thu, 25 Apr 2024 09:11:04 +0100 Subject: [PATCH 4/6] Add scss and mdx files to prettier --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index ba0ed7d..940d2e3 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ } }, "lint-staged": { - "*.{js,jsx,json,css,md}": [ + "*.{js,jsx,json,css,scss,md,mdx}": [ "prettier --write" ], "*.{js,jsx}": [ From b6fd27ee6c7039c3915ff1fc5c3ea70fa67034e2 Mon Sep 17 00:00:00 2001 From: folkforms Date: Thu, 25 Apr 2024 09:15:40 +0100 Subject: [PATCH 5/6] 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, + }, +}; From a06a03394eb83103da714e432b75dc9e5cfa9805 Mon Sep 17 00:00:00 2001 From: folkforms Date: Thu, 25 Apr 2024 09:31:24 +0100 Subject: [PATCH 6/6] Fix incorrect heading in changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d8411ca..2e619c2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -32,7 +32,7 @@ For more information about the IBM Carbon Design System v10, see [https://v10.ca ### Added -# This initial release enables the rapid development of custom application pages based on IBM Carbon components. +This initial release enables the rapid development of custom application pages based on IBM Carbon components. ### Removed