@pega/custom-dx-components 23.1.11 → 24.1.10

package/README.md

@@ -8,14 +8,14 @@ This project provides you with an environment to extend Constellation by giving
 
 Ensure you have access to the following in your system:
 
-- Pega Infinity Server version 23 or later
+- Pega Infinity Server version 24 or later
 
 - Git version 2.30 or later
 
-- System node version 18
+- System node version 18, 20
 
-- System npm version 8
+- System npm version 8, 10 (9 is not supported)
 
 ## Latest Documentation
 
-Find the latest documentation on using **DX Component Builder** [here](https://docs.pega.com/bundle/constellation-dx-components/page/constellation-dx-components/custom-components/lifecycle-dx-cosmos-components.html)
+Find the latest documentation on using **DX Component Builder** [here](https://docs.pega.com/bundle/constellation-dx-components/page/constellation-dx-components/custom-components/whats-new-constellation-dx-components-pega-infinity-23.html)

package/SECURITY.md

@@ -0,0 +1,10 @@
+# Reporting Security Issues
+
+Pegasystems takes security seriously. We appreciate your efforts to responsibly disclose your findings, and will make every effort to acknowledge your contributions.
+
+To report a security issue, [email us](mailto:opensource@pega.com;security@pega.com) and include the word "SECURITY" in the subject line.
+
+The Pega team will send a response indicating the next steps in handling your report. We may ask for additional information or guidance.
+
+## Learning More About Security
+To learn more about securing a Pega application or our security capabilities, please see the [security article](https://community.pega.com/knowledgebase/capabilities/security) on Pega Community and the [Pega Trust Center](https://www.pega.com/products/cloud/pega-trust-center).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/custom-dx-components",
-  "version": "23.1.11",
+  "version": "24.1.10",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {

package/src/cli.js

@@ -18,7 +18,8 @@ import {
   promoteWebPack,
   updateComponent,
   validate,
-  upgrade
+  upgrade,
+  buildJestAssets
 } from './tasks/index.js';
 
 const TASKS = {
@@ -38,7 +39,8 @@ const TASKS = {
   DELETE: 'delete',
   DELETE_ALL: "deleteAll",
   AUTHENTICATE: 'authenticate',
-  UPGRADE: 'upgrade'
+  UPGRADE: 'upgrade',
+  BUILD_JEST_ASSETS: 'buildJestAssets'
 };
 
 const parseArgumentsIntoOptions = rawArgs => {
@@ -132,6 +134,10 @@ export default async (args = []) => {
       upgrade(options);
       break;
     }
+    case TASKS.BUILD_JEST_ASSETS: {
+      buildJestAssets(options);
+      break;
+    }
     default: {
       console.log(chalk.red(`No task matched with ${task}`));
       break;

package/src/constants.js

@@ -4,6 +4,7 @@ export const PACKAGE_JSON_FILENAME = 'package.json';
 export const BUILD_CONFIG_JSON_FILENAME = 'build.config.json';
 export const WEBPACK_CONFIG_JS_FILENAME = 'webpack.config.js';
 export const WEBPACK_PATHS_JS_FILENAME = 'paths.js';
+export const USE_PROMOTED_WEB_PACK = 'usePromotedWebPack';
 export const COMPONENTS_DIRECTORY_PATH = 'components-directory-path';
 export const COMPONENTS_PATH = 'component';
 export const TOKEN_PATH = 'node_modules/@pega/custom-dx-components/.access_token';
@@ -38,6 +39,11 @@ export const BUILDER_DIR_FILE_PATH = '../bundle/builder';
 
 export const CATEGORY_CONSTELLATION = 'constellation';
 
+export const JEST_ASSETS_PATH = 'node_modules/@pega/custom-dx-components/tests/assets/components/';
+export const JEST_CREATE_PATH = 'create/';
+export const JEST_CREATE_ALL_CONSTELLATION_PATH = 'createAll/Constellation/';
+export const JEST_CREATE_ALL_LAUNCHPAD_PATH = 'createAll/Launchpad';
+
 export const AUTHENTICATE_DEFAULTS = {
   serverType: 'infinity',
   server: 'https://localhost:1080/prweb',
@@ -133,6 +139,10 @@ export const COMPONENT_SCHEMA = {
         name: 'URL',
         value: 'Text-URL'
       },
+      {
+        name: 'Icon Button URL',
+        value: 'Icon-Button-URL'
+      },
       {
         name: 'Integer',
         value: 'Integer'

package/src/tasks/build-all/helper.js

@@ -56,11 +56,17 @@ export const zipComponent = async (componentKey) => {
   const srcDirectory = await getComponentDirectoryPath(componentKey);
   const buildDirectory = await path.join(path.resolve(), 'dist/components', componentKey);
   const configJson = `${srcDirectory}/config.json`;
+  const localizationJson = `${srcDirectory}/localizations.json`;
 
   const zip = new AdmZip();
 
   zip.addLocalFolder(srcDirectory, 'src/');
   zip.addLocalFile(configJson);
+
+  if (fs.existsSync(localizationJson)) {
+    zip.addLocalFile(localizationJson);
+  }
+
   zip.addLocalFolder(buildDirectory);
   const zipContent = zip.toBuffer().toString('base64');
 

package/src/tasks/build-all/index.js

@@ -9,9 +9,7 @@ import { getComponentDirectoryPath, showVersion, getComponents } from '../../uti
 
 import { getBuildComponentQuestions, cleanUp } from './helper.js';
 
-
 export function getCustomTasks(componentKey, sourceMap, devBuild, options) {
-
   const sDevBuild = devBuild ? '(dev build)' : '';
   return new Listr(
     [
@@ -35,50 +33,37 @@ export function getCustomTasks(componentKey, sourceMap, devBuild, options) {
         skip: () => (options.skipBundle ? 'Skipped bundling component' : undefined)
       }
     ],
-    {
-      exitOnError: true
-    }
+    { concurrent: false, exitOnError: true }
   );
-
-
 }
 
-
-
-
-export default async (options) => {
+export default async options => {
   showVersion();
 
-
   const components = await getComponents();
   let sourceMap;
   let devBuild;
 
   if (options.params.length >= 4) {
     const dBuild = options.params[3];
-    devBuild = (dBuild === 'Y' ||
-    dBuild === 'y' ||
-    dBuild === true ||
-    dBuild === 'true') ? true : false;
-  }
-  else {
+    devBuild = !!(dBuild === 'Y' || dBuild === 'y' || dBuild === true || dBuild === 'true');
+  } else {
     const questions = await getBuildComponentQuestions();
     const answers = await inquirer.prompt(questions);
     ({ sourceMap, devBuild } = answers);
   }
 
-
-  for (const componentKey of components) {
+  for await (const componentKey of components) {
     console.log(chalk.bold.green(`Building ${componentKey}`));
 
-    const myCustomTasks = getCustomTasks(componentKey, sourceMap, devBuild, options );
+    const myCustomTasks = getCustomTasks(componentKey, sourceMap, devBuild, options);
 
-    // eslint-disable-next-line no-await-in-loop
-    await myCustomTasks.run().catch(err => {
+    try {
+      await myCustomTasks.run();
+    } catch (err) {
       console.log(chalk.bold.red(err.toString()));
       process.exit(1);
-    });
-
+    }
   }
 
   // once done, remove leftover directories

package/src/tasks/build-comp/helper.js

@@ -46,13 +46,21 @@ export const zipComponent = async (componentKey) => {
   const buildDirectory = await path.join(path.resolve(), 'dist/components', componentKey);
   const configJson = `${srcDirectory}/config.json`;
 
+  const localizationJson = `${srcDirectory}/localizations.json`;
+
   const zip = new AdmZip();
 
   zip.addLocalFolder(srcDirectory, 'src/');
   zip.addLocalFile(configJson);
+
+  if (fs.existsSync(localizationJson)) {
+    zip.addLocalFile(localizationJson);
+  }
+
   zip.addLocalFolder(buildDirectory);
   const zipContent = zip.toBuffer().toString('base64');
 
+
   const configContent = Buffer.from(fs.readFileSync(`${srcDirectory}/config.json`)).toString();
   if (fs.existsSync('dist/components')) {
     fs.rm('dist/components', { recursive: true }, err => {

package/src/tasks/build-comp/index.js

@@ -71,6 +71,7 @@ export default async options => {
 
   await tasks.run().catch(err => {
     console.log(chalk.bold.red(err.toString()));
+    process.exit(1);
   });
   return true;
 };

package/src/tasks/build-jest-assets/index.js

@@ -0,0 +1,171 @@
+import fs from 'fs';
+import path from 'path';
+import { join } from 'path';
+import inquirer from 'inquirer';
+import { Listr } from 'listr2';
+import chalk from 'chalk';
+
+import { showVersion, getServerType, setServerType, getSubComponents, deleteLocalComponent, checkPathAccess, getComponents } from '../../util.js';
+import createAll from '../create-all/index.js';
+import create from '../create/index.js';
+
+import { JEST_ASSETS_PATH, JEST_CREATE_PATH, JEST_CREATE_ALL_CONSTELLATION_PATH, JEST_CREATE_ALL_LAUNCHPAD_PATH, TASKS_CONFIG_JSON_FILENAME, COMPONENTS_DIRECTORY_PATH } from '../../constants.js';
+
+
+const getBuildAssetsQuestions = async ()  => {
+  const message = "\n**IMPORTANT** Building Jest Assets will remove any local components in your components directory!\n";
+  console.log(`${chalk.green.bold(message)}`);
+
+  return [
+    {
+      name: 'buildAssets',
+      type: 'confirm',
+      message: 'Generate Jest Assets ?',
+      default: false
+    }
+  ];
+};
+
+const deleteTestComponent = async(path, componentKey) => {
+  const directory = join(path, componentKey);
+
+  try {
+    fs.rmSync(directory, { recursive: true });
+    console.log(`${chalk.red.bold(componentKey)} is deleted from assets`);
+  } catch (err) {
+    console.log('no file');
+    throw new Error(`No such file ${componentKey}`);
+  }
+}
+
+const copyAssets = async(destinationPath) => {
+  const currentDirectory = process.cwd();
+  const pegaConfigJsonPath = join(currentDirectory, TASKS_CONFIG_JSON_FILENAME);
+
+  await checkPathAccess(pegaConfigJsonPath);
+
+  let data = fs.readFileSync(pegaConfigJsonPath, { encoding: 'utf8' });
+  data = JSON.parse(data);
+
+  if (!data[COMPONENTS_DIRECTORY_PATH]) {
+    console.error(
+      `${chalk.red.bold('ERROR')} Could not able find components directory path in config.json`
+    );
+    process.exit(1);
+  }
+
+  const srcDir = join(currentDirectory, data[COMPONENTS_DIRECTORY_PATH]);
+
+  fs.cpSync(srcDir, destinationPath, { recursive: true});
+}
+
+const deleteAssets = async() => {
+  const currentDirectory = process.cwd();
+  const pegaConfigJsonPath = join(currentDirectory, TASKS_CONFIG_JSON_FILENAME);
+
+  await checkPathAccess(pegaConfigJsonPath);
+
+  let data = fs.readFileSync(pegaConfigJsonPath, { encoding: 'utf8' });
+  data = JSON.parse(data);
+
+  if (!data[COMPONENTS_DIRECTORY_PATH]) {
+    console.error(
+      `${chalk.red.bold('ERROR')} Could not able find components directory path in config.json`
+    );
+    process.exit(1);
+  }
+  const localComponents = await getComponents();
+
+  for (const index in localComponents) {
+    const componentToDelete = localComponents[index];
+    // console.log(chalk.bold.green("Deleting: " + componentToDelete));
+    // eslint-disable-next-line no-await-in-loop
+    const directory = join(currentDirectory, data[COMPONENTS_DIRECTORY_PATH], componentToDelete);
+
+    try {
+      fs.rmSync(directory, { recursive: true });
+      console.log(`${chalk.red.bold(componentToDelete)} is deleted from Local`);
+    } catch (err) {
+        console.log('no file');
+        throw new Error(`No such file ${componentToDelete}`);
+    }
+  }
+}
+
+const createJestAssets = async(isLaunchPad = false) => {
+
+  // initially delete local assets
+  await deleteAssets();
+
+  // const framework = await getFramework();
+  let args  = [ '','', '', 'My', '0.0.1', 'DXIL', '', 'Pega'];
+  let myOptions = {};
+  myOptions["params"] = args;
+
+  await createAll(myOptions);
+
+  const jestCreateAllPath = isLaunchPad ? JEST_CREATE_ALL_LAUNCHPAD_PATH : JEST_CREATE_ALL_CONSTELLATION_PATH;
+
+  // goto Constellation
+  // get current test assets and delete them
+  let createAllPath = path.join(path.resolve(), JEST_ASSETS_PATH, jestCreateAllPath);
+  const fileList = await getSubComponents(createAllPath, '');
+
+  for (const index in fileList) {
+    const componentToDelete = fileList[index];
+    // console.log(chalk.bold.green("Deleting: " + componentToDelete));
+    // eslint-disable-next-line no-await-in-loop
+    await deleteTestComponent(createAllPath, componentToDelete);
+  }
+
+  await copyAssets(createAllPath);
+  await deleteAssets();
+
+  args  = [ '','', '', 'Field', 'Text', 'MyTestText', 'My Test Text', '0.0.1','DXIL', '', 'My Test Text Description', 'Pega'];
+  myOptions = {};
+  myOptions["params"] = args;
+
+  await create(myOptions);
+
+  let createPath = path.join(path.resolve(), JEST_ASSETS_PATH, JEST_CREATE_PATH);
+  const myFileList = await getSubComponents(createPath, '');
+
+  for (const index in myFileList) {
+    const componentToDelete = myFileList[index];
+    // console.log(chalk.bold.green("Deleting: " + componentToDelete));
+    // eslint-disable-next-line no-await-in-loop
+    await deleteTestComponent(createPath, componentToDelete);
+  }
+
+  await copyAssets(createPath);
+  await deleteAssets();
+}
+
+
+export default async options => {
+  showVersion();
+
+  const questions = await getBuildAssetsQuestions();
+  const answers = await inquirer.prompt(questions);
+  const {  buildAssets } = answers;
+
+  if (buildAssets) {
+    // get current server type
+    const savedServerType = await getServerType();
+
+    // Constellation
+    await setServerType("infinity");
+    await createJestAssets(false);
+
+    //Launchpad
+    await setServerType("launchpad");
+    await createJestAssets(true);
+
+
+    // restore serverType
+    await setServerType(savedServerType);
+  }
+
+
+
+};

package/src/tasks/bundle/builder/index.js

@@ -3,12 +3,15 @@ import fs from 'fs-extra';
 import webpack from 'webpack';
 import FileSizeReporter from 'react-dev-utils/FileSizeReporter.js';
 import printBuildError from 'react-dev-utils/printBuildError.js';
+import { getUseWebPackPromotion} from '../../../util.js';
 
 
+const usePromoted = await getUseWebPackPromotion();
 // used by promote and revert webPack commands, do not change
-import configFactory from './webpack.config.js';
-// import configFactory from '../../../../../../../webpack.config.js';
-// do not change
+const configFactory = (
+  await import(`${usePromoted ? `../../../../../../../webpack.config.js` : `./webpack.config.js`}`)
+).default
+
 
 import paths from './paths.js';
 

package/src/tasks/bundle/builder/webpack.config.js

@@ -304,6 +304,7 @@ export default (
         resourceRegExp: /^\.\/locale$/,
         contextRegExp: /moment$/
       }),
+      /* cosmos 4.x and below */
       /* Ignore cosmos icons */
       new webpack.IgnorePlugin({
         resourceRegExp: /^\.\/icons$/,
@@ -327,7 +328,20 @@ export default (
         resourceRegExp: /^\.\/streamline-icons$/,
         contextRegExp: /@pega\\cosmos-react-core\\lib\\components\\Icon$/
       }),
-      
+
+      /* cosmos 6.x and above */
+      /* Ignore cosmos icons */
+      new webpack.IgnorePlugin({
+        resourceRegExp: /^\.\/.*\/.*\.icon$/,
+        contextRegExp: /@pega\/cosmos-react-core\/lib\/components\/Icon$/
+      }),
+
+      /* Ignore cosmos icons - windows */
+      new webpack.IgnorePlugin({
+        resourceRegExp: /^\.\/.*\/.*\.icon$/,
+        contextRegExp: /@pega\\cosmos-react-core\\lib\\components\\Icon$/
+      }),
+
       new webpack.optimize.LimitChunkCountPlugin({
         maxChunks: 1
       }),

package/src/tasks/create/index.js

@@ -73,6 +73,9 @@ const compileMustacheTemplates = async (
       case 'Picklist-RadioButtons':
         mustacheSubType = 'Picklist';
         break;
+      case 'Icon-Button-URL':
+        mustacheSubType = 'Text-URL';
+        break;
     }
   }
 

package/src/tasks/create/templates/Constellation/Field/Boolean/Boolean.ts.mustache

@@ -0,0 +1,35 @@
+function Boolean(value: any, { allowEmpty = true, tick = '', cross = '' } = {}) {
+  if (
+    (!allowEmpty && !value) ||
+    value === false ||
+    value?.toString()?.toLowerCase() === 'false' ||
+    value === 0 ||
+    value === '0'
+  ) {
+    return cross || '';
+  }
+  if (
+    value === true ||
+    value?.toString()?.toLowerCase() === 'true' ||
+    value === 1 ||
+    value === '1'
+  ) {
+    return tick || '';
+  }
+  if (
+    allowEmpty &&
+    (value === 'null' || value === '' || value === null || typeof value === 'undefined')
+  ) {
+    return '––';
+  }
+  return value;
+}
+
+export default {
+  TrueFalse: (value: any, options: Object) =>
+    Boolean(value, {
+      ...options,
+      tick: 'True',
+      cross: 'False'
+    })
+};

package/src/tasks/create/templates/Constellation/Field/Boolean/demo.stories.tsx.mustache

@@ -2,38 +2,28 @@
 /* eslint-disable react/jsx-no-useless-fragment */
 // @ts-nocheck
 import { useState } from 'react';
-import { withKnobs } from '@storybook/addon-knobs';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { configProps, stateProps } from './mock';
 
 import {{COMPONENT_CLASS_NAME}} from './index';
 
-export default {
+const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
   title: '{{COMPONENT_CLASS_NAME}}',
-  decorators: [withKnobs],
-  component: {{COMPONENT_CLASS_NAME}}
+  component: {{COMPONENT_CLASS_NAME}},
+  excludeStories: /.*Data$/
 };
 
-export const Base{{COMPONENT_CLASS_NAME}} = () => {
+export default meta;
+type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
+
+export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 
   const [value, setValue] = useState(configProps.value);
 
   const props = {
     value,
-    label: configProps.label,
-    helperText: configProps.helperText,
-    caption: configProps.caption,
-    validatemessage: configProps.validatemessage,
-    hideLabel: configProps.hideLabel,
-    testId: configProps.testId,
     additionalProps: configProps.additionalProps,
-    displayMode: configProps.displayMode,
-    variant: configProps.variant,
-    trueLabel: configProps.trueLabel,
-    falseLabel: configProps.falseLabel,
-    disabled: configProps.disabled,
-    readOnly: configProps.readOnly,
-    required: configProps.required,
     getPConnect: () => {
       return {
         getStateProps: () => {
@@ -58,7 +48,24 @@ export const Base{{COMPONENT_CLASS_NAME}} = () => {
 
   return (
     <>
-      <{{COMPONENT_CLASS_NAME}} {...props} />
+      <{{COMPONENT_CLASS_NAME}} {...props} {...args} />
     </>
   );
 };
+
+Base{{COMPONENT_CLASS_NAME}}.args = {
+  label: configProps.label,
+  helperText: configProps.helperText,
+  caption: configProps.caption,
+  testId: configProps.testId,
+  readOnly: configProps.readOnly,
+  disabled: configProps.disabled,
+  required: configProps.required,
+  status: configProps.status,
+  hideLabel: configProps.hideLabel,
+  trueLabel: configProps.trueLabel,
+  falseLabel: configProps.falseLabel,
+  displayMode: configProps.displayMode,
+  variant: configProps.variant,
+  validatemessage: configProps.validatemessage
+};

package/src/tasks/create/templates/Constellation/Field/Boolean/index.tsx.mustache

@@ -2,10 +2,10 @@ import {
   Checkbox as CosmosCheckbox,
   CheckboxGroup,
   FieldValueList,
-  Text
+  Text,
+  withConfiguration,
+  BooleanDisplay
 } from "@pega/cosmos-react-core";
-import PropTypes from "prop-types";
-
 
 import type { PConnFieldProps } from './PConnProps';
 
@@ -40,19 +40,19 @@ interface ActionsProps {
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
 // any default values in config.pros should be set in defaultProps at bottom of this file
-export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
+function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   const {
     getPConnect,
-    value,
-    label,
-    helperText,
+    value = false,
+    label = '',
+    helperText = '',
     caption,
     validatemessage,
     hideLabel,
     testId,
-    additionalProps,
+    additionalProps = {},
     displayMode,
-    variant,
+    variant = 'inline',
     trueLabel,
     falseLabel
   } = props;
@@ -62,7 +62,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const stateProps = pConn.getStateProps() as StateProps;
   const propName: string = stateProps.value;
 
-  let { readOnly, required, disabled } = props;
+  let { readOnly = false, required = false, disabled = false } = props;
   [readOnly, required, disabled] = [readOnly, required, disabled].map(
     (prop) => prop === true || (typeof prop === 'string' && prop === 'true')
   );
@@ -97,15 +97,17 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
   let displayComponent;
   if (displayMode) {
-    // @ts-ignore
     displayComponent = (
-      // @ts-ignore
-      <{{COMPONENT_CLASS_NAME}} value={value} trueLabel={trueLabel} falseLabel={falseLabel} />
+      <BooleanDisplay value={value} trueLabel={trueLabel} falseLabel={falseLabel} />
     );
   }
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return ( <Styled{{COMPONENT_CLASS_NAME}}Wrapper> displayComponent </Styled{{COMPONENT_CLASS_NAME}}Wrapper>);
+    return (
+      <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+       {displayComponent}
+      </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+    );
   }
 
   if (displayMode === "LABELS_LEFT") {
@@ -161,40 +163,4 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 };
 
 
-{{COMPONENT_CLASS_NAME}}.defaultProps = {
-  validatemessage: '',
-  value: false,
-  label: '',
-  hideLabel: false,
-  helperText: '',
-  disabled: false,
-  readOnly: false,
-  required: false,
-  testId: '',
-  additionalProps: {},
-  displayMode: null,
-  variant: 'inline',
-  displayValue: 'Yes/No',
-  trueLabel: '',
-  falseLabel: ''
-};
-
-{{COMPONENT_CLASS_NAME}}.propTypes = {
-  getPConnect: PropTypes.func.isRequired,
-  validatemessage: PropTypes.string,
-  label: PropTypes.string,
-  hideLabel: PropTypes.bool,
-  helperText: PropTypes.string,
-  value: PropTypes.bool,
-  caption: PropTypes.string.isRequired,
-  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  readOnly: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  required: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  testId: PropTypes.string,
-  additionalProps: PropTypes.objectOf(PropTypes.any),
-  displayMode: PropTypes.string,
-  variant: PropTypes.string,
-  displayValue: PropTypes.string,
-  trueLabel: PropTypes.string,
-  falseLabel: PropTypes.string
-};
+export default withConfiguration({{COMPONENT_CLASS_NAME}});