@pega/custom-dx-components 8.8.17 → 8.8.18

package/.prettierrc.json

@@ -1 +1,7 @@
-"@pega/prettier-config"
+{
+  "$schema": "http://json.schemastore.org/prettierrc",
+  "extends": "@pega/prettier-config",
+  "printWidth": 150,
+  "singleQuote": true,
+  "trailingComma": "none"
+}

package/babel.config.cjs

@@ -0,0 +1,13 @@
+module.exports = {
+    presets: [
+      [
+        '@babel/preset-env',
+        {
+          targets: {
+            node: 'current'
+          }
+        }
+      ]
+    ]
+  };
+  

package/jest.config.cjs

@@ -0,0 +1,37 @@
+module.exports = {
+  verbose: true,
+  roots: ['./test'],
+  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
+  testEnvironment: 'jsdom',
+  transform: {
+    '^.+\\.[t|j]sx?$': 'babel-jest'
+  },
+  collectCoverage: true,
+  haste: {
+    retainAllFiles: true
+  },
+  testPathIgnorePatterns: [],
+  transformIgnorePatterns: [],
+  modulePathIgnorePatterns: [],
+  coveragePathIgnorePatterns: [],
+  collectCoverageFrom: ['./src/*.js'],
+  coverageThreshold: {
+    global: {
+      statements: 79,
+      branches: 74,
+      functions: 81,
+      lines: 80
+    }
+  },
+  reporters: [
+    'default',
+    [
+      'jest-junit',
+      {
+        suiteName: 'unit tests',
+        outputDirectory: 'build/test-results/test',
+        outputName: 'TEST-results-unit.xml'
+      }
+    ]
+  ]
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/custom-dx-components",
-  "version": "8.8.17",
+  "version": "8.8.18",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {
@@ -8,14 +8,14 @@
     "lint:format": "prettier -c .",
     "lint:spelling": "cspell **/*",
     "fix:es": "eslint --fix .",
-    "fix:format": "prettier -w ."
+    "fix:format": "prettier -w .",
+    "test:unit:local": "node --input-type=module  --experimental-vm-modules node_modules/jest/bin/jest.js --runInBand /test/unitTest"
   },
   "type": "module",
   "sideEffects": false,
   "dependencies": {
     "@babel/core": "^7.22.5",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/preset-env": "^7.22.5",
     "@babel/preset-react": "^7.22.5",
     "adm-zip": "^0.5.9",
     "ajv": "^8.12.0",
@@ -23,6 +23,7 @@
     "arg": "^5.0.2",
     "babel-loader": "^9.1.2",
     "chalk": "^5.0.1",
+    "check-git": "^2.0.2",
     "compression-webpack-plugin": "^10.0.0",
     "css-loader": "6.7.1",
     "css-minimizer-webpack-plugin": "^5.0.0",
@@ -62,9 +63,16 @@
     "custom-components"
   ],
   "devDependencies": {
+    "@babel/preset-env": "^7.22.9",
     "@pega/configs": "^0.4.0",
     "@pega/prettier-config": "^0.5.3",
+    "@types/jest": "^29.5.3",
+    "babel-jest": "^29.6.1",
     "cspell": "^4.0.23",
-    "prettier": "2.7.1"
+    "jest": "^29.6.1",
+    "jest-environment-jsdom": "^29.3.1",
+    "jest-junit": "^15.0.0",
+    "prettier": "2.7.1",
+    "ts-jest": "^29.1.1"
   }
 }

package/src/auth.js

@@ -622,9 +622,15 @@ class PegaAuth {
    * Return agent value for POST commands
    */
   #getAgent() {
-    return this.isNode && this.config.ignoreInvalidCerts
-      ? new this.https.Agent({ rejectUnauthorized: false })
-      : undefined;
+    if (this.isNode && this.config.ignoreInvalidCerts) {
+      let options = {rejectUnauthorized: false};
+      if (this.config.legacyTLS) {
+        options.secureOptions = this.crypto.constants.SSL_OP_LEGACY_SERVER_CONNECT;
+      }
+      return new this.https.Agent(options);
+    } else {
+      return undefined;
+    }
   }
 }
 

package/src/constants.js

@@ -1,7 +1,9 @@
 // cSpell:ignore words timeofday caseview casepreview objectview
 export const TASKS_CONFIG_JSON_FILENAME = 'tasks.config.json';
+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_CONFIG_JS_FILENAME = 'webpack.config.js';
+export const WEBPACK_PATHS_JS_FILENAME = 'paths.js';
 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';
@@ -16,10 +18,9 @@ export const INF_TOKEN_URL_V1 = 'PRRestService/oauth2/v1/token';
 export const INF_AUTHORIZE_URL_V1 = 'PRRestService/oauth2/v1/authorize';
 export const LP_TOKEN_URL = 'uas/oauth/token';
 export const LP_AUTHORIZE_URL = 'uas/oauth/authorize';
-export const LP_LIST_COMPONENT_SERVICE_REST_ENDPOINT =
-  'pegalaunchpad/c11n/v103/app/appstudiox/componentslist';
-export const LP_PUBLISH_COMPONENT_SERVICE_REST_ENDPOINT =
-  'pegalaunchpad/c11n/isolations/{isolationId}/v102/assetsUpdate';
+export const LP_LIST_COMPONENT_SERVICE_REST_ENDPOINT = 'pegalaunchpad/c11n/v103/app/appstudiox/componentslist?field0=type&value0={type}';
+export const LP_PUBLISH_COMPONENT_SERVICE_REST_ENDPOINT = 'pegalaunchpad/c11n/isolations/{isolationId}/v102/assetsUpdate';
+export const LP_DELETE_COMPONENT_SERVICE_REST_ENDPOINT = 'pegalaunchpad/c11n/isolations/{isolationId}/v102/assetsUpdate';
 
 export const FIELD_PATH = '/field';
 export const TEMPLATE_PATH = '/template';
@@ -30,6 +31,7 @@ export const COMPONENT_PREFIX_TEMPLATE_PATH = 'template/';
 export const COMPONENT_PREFIX_WIDGET_PATH = 'widget/';
 
 export const BUILDER_INDEX_FILE_PATH = '../bundle/builder/index.js';
+export const BUILDER_DIR_FILE_PATH = '../bundle/builder';
 
 export const CATEGORY_CONSTELLATION = 'constellation';
 

package/src/currentPath.cjs

@@ -0,0 +1 @@
+module.exports = __dirname;

package/src/tasks/authenticate/index.js

@@ -6,19 +6,18 @@ import inquirer from 'inquirer';
 
 import { checkPathAccess, showVersion } from '../../util.js';
 import { TOKEN_PATH, INF_TOKEN_URL_V1, INF_AUTHORIZE_URL_V1, LP_TOKEN_URL, LP_AUTHORIZE_URL } from '../../constants.js';
+import PegaAuth from '../../auth.js';
 
 import { getAuthQuestions } from './helper.js';
-import PegaAuth from '../../auth.js';
 
 export const TASKS_CONFIG_JSON_FILENAME = 'tasks.config.json';
 
 const pegaConfigJsonPath = path.join(path.resolve(), TASKS_CONFIG_JSON_FILENAME);
-let server = null;
-
-const generateAccessToken = async config => {
+const server = null;
 
+const generateAccessToken = async (config) => {
   let authSuccess = false;
-  const { serverType, authService, isolationId, grantType, clientId, clientSecret, user, password } = config;
+  const { serverType, authService, isolationId, grantType, clientId, clientSecret, user, password, legacyTLS } = config;
   // Try to gracefully deal with missing trailing slashes for server (and later conditionally for redirectUri)
   const server = config.server.endsWith('/') ? config.server : `${config.server}/`;
 
@@ -50,26 +49,32 @@ const generateAccessToken = async config => {
     <div style="padding: 10px;">
     </div>`;
 
-    const authCodeConfig = grantType === 'authCode' ? {
-      authorizeUri: sAuthorizeUri,
-      redirectUri: config.redirectUri.endsWith('/') ? config.redirectUri : `${config.redirectUri}/`,
-      cert: config.cert,
-      key: config.key,
-      winTitle: 'DX Component Dev',
-      winBodyHtml: browserAuthSuccessMarkup
-    } : {};
+    const authCodeConfig =
+      grantType === 'authCode'
+        ? {
+            authorizeUri: sAuthorizeUri,
+            redirectUri: config.redirectUri.endsWith('/') ? config.redirectUri : `${config.redirectUri}/`,
+            cert: config.cert,
+            key: config.key,
+            winTitle: 'DX Component Dev',
+            winBodyHtml: browserAuthSuccessMarkup
+          }
+        : {};
 
     // Build auth config structure
     const authConfig = {
-      serverType: serverType,
-      authService: authService,
-      grantType: grantType,
+      serverType,
+      authService,
+      grantType,
       tokenUri: sTokenUri,
-      clientId: clientId,
-      clientSecret: clientSecret,
+      clientId,
+      clientSecret,
       ignoreInvalidCerts: true,
       ...authCodeConfig
     };
+    if (legacyTLS) {
+      authConfig.legacyTLS = true;
+    }
     if (serverType === 'infinity') {
       if (grantType !== 'clientCreds' && user && password) {
         authConfig.userIdentifier = user;
@@ -84,14 +89,17 @@ const generateAccessToken = async config => {
     try {
       const auth = new PegaAuth(authConfig);
       if (grantType === 'authCode') {
-        console.log(`${chalk.green('Awaiting authorization to complete (Ctrl-C to exit).  You may need to enter credentials within your default browser.')}`);
+        console.log(
+          `${chalk.green('Awaiting authorization to complete (Ctrl-C to exit).  You may need to enter credentials within your default browser.')}`
+        );
       }
       // console.log(`authConfig: ${JSON.stringify(authConfig)}`);
 
-      auth.login()
+      auth
+        .login()
         .then((token) => {
           if (token?.token_type) {
-            fs.writeFile(TOKEN_PATH, JSON.stringify(token), err => {
+            fs.writeFile(TOKEN_PATH, JSON.stringify(token), (err) => {
               if (err) {
                 console.error(err);
                 return reject(authSuccess);
@@ -101,32 +109,29 @@ const generateAccessToken = async config => {
               return resolve(authSuccess);
             });
           } else {
-            console.log(`${chalk.bold.red('Authentication failed:' + JSON.stringify(token.errors ? token.errors : token))}`);
+            console.log(`${chalk.bold.red(`Authentication failed:${JSON.stringify(token.errors ? token.errors : token)}`)}`);
             return reject(authSuccess);
           }
         })
         .catch((e) => {
-          console.log(`${chalk.bold.red('Authentication failed:' + e)}`);
+          console.log(`${chalk.bold.red(`Authentication failed:${e}`)}`);
           return reject(authSuccess);
         });
-
     } catch (e) {
       console.log(`Authentication failed: Problem initializing OAuth library`);
       return reject(authSuccess);
     }
-
   });
 };
 
-export default async options => {
-
+export default async (options) => {
   let authOK = false;
 
   showVersion();
 
   await checkPathAccess(pegaConfigJsonPath);
 
-  let cfgData = fs.readFileSync(pegaConfigJsonPath, { encoding: 'utf8' });
+  const cfgData = fs.readFileSync(pegaConfigJsonPath, { encoding: 'utf8' });
   let data = null;
   if (cfgData) {
     try {
@@ -138,7 +143,7 @@ export default async options => {
   }
 
   const serverConfig = data['server-config'];
-  const isPwdNonEmpty = serverConfig['password'] ? true : false;
+  const isPwdNonEmpty = !!serverConfig.password;
 
   // console.log(`serverConfig: ${JSON.stringify(serverConfig)}`);
   const questions = await getAuthQuestions(serverConfig);
@@ -147,7 +152,7 @@ export default async options => {
   const aAsked = answers.aAsked;
   delete answers.aAsked;
   const aProps = ['serverType', 'server', 'isolationId', 'clientId', 'grantType', 'authService', 'redirectUri', 'clientSecret', 'user', 'password'];
-  const isLaunchPad = answers.serverType === "launchpad";
+  const isLaunchPad = answers.serverType === 'launchpad';
   let bWriteUpdate = false;
   for (let i = 0; i < aProps.length; i += 1) {
     const prop = aProps[i];
@@ -163,8 +168,8 @@ export default async options => {
     }
   }
   // Update the askedOnce array based on askOnce criteria
-  const aAskOnce = serverConfig['questions_askOnce'] ? serverConfig['questions_askOnce'].split(',') : [];
-  const aAskedOnce = serverConfig['questions_askedOnce'] ? serverConfig['questions_askedOnce'].split(',') : [];
+  const aAskOnce = serverConfig.questions_askOnce ? serverConfig.questions_askOnce.split(',') : [];
+  const aAskedOnce = serverConfig.questions_askedOnce ? serverConfig.questions_askedOnce.split(',') : [];
   let bAskedOnceUpdated = false;
   for (let j = 0; j < aAsked.length; j += 1) {
     const prop = aAsked[j];
@@ -176,7 +181,7 @@ export default async options => {
   }
   // If askedOnce array was updated we need to update value in config
   if (bAskedOnceUpdated) {
-    serverConfig['questions_askedOnce'] = aAskedOnce.join(',');
+    serverConfig.questions_askedOnce = aAskedOnce.join(',');
     bWriteUpdate = true;
   }
 
@@ -184,26 +189,24 @@ export default async options => {
     // console.log(`serverConfig: ${JSON.stringify(serverConfig)}`);
     authOK = await generateAccessToken(serverConfig);
   } catch (e) {
-    console.log(`${chalk.bold.red('Authentication failed:' + JSON.stringify(e))}`);
+    console.log(`${chalk.bold.red(`Authentication failed:${JSON.stringify(e)}`)}`);
   }
 
   if (authOK & bWriteUpdate) {
     // Don't write password value (unless it already had a value)
     if (!isPwdNonEmpty) {
-      serverConfig['password'] = '';
+      serverConfig.password = '';
     }
     console.log(`${chalk.green('Writing updated config...')}`);
     let updCfg = null;
     try {
       updCfg = JSON.stringify(data, null, 2);
       // console.log(`updated config: ${updCfg}`);
-      fs.writeFileSync(pegaConfigJsonPath, updCfg, err => {
+      fs.writeFileSync(pegaConfigJsonPath, updCfg, (err) => {
         if (err) throw err;
       });
-    } catch (e) {
-
-    }
+    } catch (e) {}
   }
 
-  process.exit(1);
+  process.exit();
 };

package/src/tasks/build/helper.js

@@ -1,25 +1,19 @@
 import fs from 'fs';
 import path from 'path';
-import https from 'https';
 
 import fetch from 'node-fetch';
 import AdmZip from 'adm-zip';
 import chalk from 'chalk';
 
-import {
-  constructCompleteUrl,
-  getComponentDirectoryPath,
-  getComponents,
-  getPegaServerConfig
-} from '../../util.js';
+import { constructCompleteUrl, getComponentDirectoryPath, getComponents, getPegaServerConfig, getHttpsAgent } from '../../util.js';
 import { PUBLISH_COMPONENT_SERVICE_REST_ENDPOINT, TOKEN_PATH } from '../../constants.js';
 
 export const getPublishComponentQuestions = async () => {
   const components = await getComponents();
 
-  if (components.length == 0) {
-    console.log(chalk.redBright("No components to build"));
-    process.exit(1);
+  if (components.length === 0) {
+    console.log(chalk.redBright('No components to build'));
+    process.exit();
   }
 
   const defaultPegaConfig = await getPegaServerConfig();
@@ -35,6 +29,7 @@ export const getPublishComponentQuestions = async () => {
       name: 'sourceMap',
       message: 'Generate source map ?',
       default: defaultPegaConfig.sourceMap,
+      // eslint-disable-next-line sonarjs/no-redundant-boolean
       when: () => false && !process.env.SOURCE_MAP
     },
     {
@@ -46,7 +41,7 @@ export const getPublishComponentQuestions = async () => {
   ];
 };
 
-export const zipComponent = async componentKey => {
+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`;
@@ -59,7 +54,7 @@ export const zipComponent = async componentKey => {
   const zipContent = zip.toBuffer().toString('base64');
 
   const configContent = Buffer.from(fs.readFileSync(`${srcDirectory}/config.json`)).toString();
-  fs.rmdir('dist', { recursive: true }, err => {
+  fs.rmdir('dist', { recursive: true }, (err) => {
     if (err) {
       throw err;
     }
@@ -67,8 +62,8 @@ export const zipComponent = async componentKey => {
   return { zipContent, configContent };
 };
 
-export const publishComponentToServer = async data => {
-  const { configContent, zipContent, componentKey, rulesetName, rulesetVersion } = data;
+export const publishComponentToServer = async (data) => {
+  const { configContent, zipContent, rulesetName, rulesetVersion } = data;
 
   const apiBody = {
     configContent,
@@ -80,46 +75,38 @@ export const publishComponentToServer = async data => {
     category: ''
   };
   const defaultPegaConfig = await getPegaServerConfig();
-  const url = constructCompleteUrl(
-    defaultPegaConfig.server,
-    PUBLISH_COMPONENT_SERVICE_REST_ENDPOINT
-  );
+  const url = constructCompleteUrl(defaultPegaConfig.server, PUBLISH_COMPONENT_SERVICE_REST_ENDPOINT);
   try {
     const OauthData = fs.readFileSync(TOKEN_PATH, 'utf8');
     if (OauthData) {
-      const {
-        access_token: accessToken,
-        token_type: tokenType,
-        refresh_token: refreshToken
-      } = JSON.parse(OauthData);
+      const { access_token: accessToken, token_type: tokenType } = JSON.parse(OauthData);
       let status = 500;
       fetch(url, {
         method: 'POST',
-        agent: new https.Agent({ rejectUnauthorized: false }),
+        agent: getHttpsAgent(defaultPegaConfig),
         headers: {
           Authorization: `${tokenType} ${accessToken}`
         },
         body: JSON.stringify(apiBody)
       })
-        .then(response => {
+        .then((response) => {
           status = response.status;
           return response.text();
         })
-        .then(resp => {
+        .then((resp) => {
           const respData = JSON.parse(resp);
           if (status === 401) {
-            throw new Error(
-              'Error occurred in authentication. Please regenerate using authenticate'
-            );
+            throw new Error('Error occurred in authentication. Please regenerate using authenticate');
             // console.log(accessTokenUri, refreshToken);
             /* TODO - Handle refresh_token */
-          } else if (status == 200) {
+          } else if (status === 200) {
             console.log(chalk.bold.green(`Success : ${respData.message}`));
           } else {
             throw new Error(`${respData.message}`);
           }
         })
-        .catch(e => Promise.reject(`${chalk.bold.red(e)}`));
+        // eslint-disable-next-line prefer-promise-reject-errors
+        .catch((e) => Promise.reject(`${chalk.bold.red(e)}`));
     } else {
       throw new Error(`Error occurred in authentication. Please regenerate using authenticate`);
     }

package/src/tasks/build/index.js

@@ -12,13 +12,33 @@ import { getComponentDirectoryPath, showVersion } from '../../util.js';
 export default async options => {
   showVersion();
 
-  const questions = await getPublishComponentQuestions();
-  const answers = await inquirer.prompt(questions);
-  const { componentKey, sourceMap, devBuild } = answers;
+  let componentKey;
+  let sourceMap;
+  let devBuild;
+  let content;
+
+  if (options.params.length >= 6) {
+    componentKey = options.params[3];
+    sourceMap = options.params[4];
+    const dBuild = options.params[5];
+    devBuild = (dBuild === 'Y' ||
+    dBuild === 'y' ||
+    dBuild === true ||
+    dBuild === 'true') ? true : false;
+
+    content = { componentKey, sourceMap, devBuild};
+  }
+  else {
+    const questions = await getPublishComponentQuestions();
+    const answers = await inquirer.prompt(questions);
+    ({ componentKey, sourceMap, devBuild } = answers);
+
+    content = {
+      ...answers
+    };
+  }
+
 
-  let content = {
-    ...answers
-  };
 
   const sDevBuild = devBuild ? '(dev build)' : '';
   const tasks = new Listr(

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

@@ -51,9 +51,21 @@ export default async (options) => {
 
 
   const components = await getComponents();
-  const questions = await getBuildComponentQuestions();
-  const answers = await inquirer.prompt(questions);
-  const { sourceMap, devBuild } = answers;
+  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 {
+    const questions = await getBuildComponentQuestions();
+    const answers = await inquirer.prompt(questions);
+    ({ sourceMap, devBuild } = answers);
+  }
 
 
   for (const componentKey of components) {

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

@@ -7,7 +7,7 @@ import printBuildError from 'react-dev-utils/printBuildError.js';
 
 // used by promote and revert webPack commands, do not change
 import configFactory from './webpack.config.js';
-//import configFactory from '../../../../../../../webpack.config.js';
+// import configFactory from '../../../../../../../webpack.config.js';
 // do not change
 
 import paths from './paths.js';

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

@@ -115,9 +115,7 @@ export default (
       path: paths.appBuild,
       // There will be one main bundle, and one file per asynchronous chunk.
       // In development, it does not produce real files.
-      filename: isEnvProduction
-        ? `${componentKey}/${componentKey}.js`
-        : isEnvDevelopment && `${componentKey}/${componentKey}.js`,
+      filename: isEnvProduction ? `${componentKey}/${componentKey}.js` : isEnvDevelopment && `${componentKey}/${componentKey}.js`,
       chunkFilename: isEnvProduction
         ? `${componentKey}/js/[name].[contenthash:8].chunk.js`
         : isEnvDevelopment && `${componentKey}/js/[name].chunk.js`,

package/src/tasks/create/index.js

@@ -109,7 +109,8 @@ const validateCompile = async (
     type,
     subtype,
     description,
-    allowedApplications
+    allowedApplications,
+    organization
   },
   options
 ) => {
@@ -127,7 +128,11 @@ const validateCompile = async (
   const templateDir = `./templates/${framework}/${type}/${sSubType}`;
   const templateDirectory = fileURLToPath(new URL(templateDir, import.meta.url));
 
-  const { organization } = JSON.parse(fs.readFileSync(path.resolve('package.json'), 'utf8'));
+  if (organization == null) {
+   ({ organization } = JSON.parse(fs.readFileSync(path.resolve('package.json'), 'utf8')));
+  }
+
+
 
   const componentKey = `${organization}_${library}_${componentName}`;
   const targetDirectory = await getComponentDirectoryPath(componentKey);
@@ -162,15 +167,18 @@ const validateCompile = async (
 export default async options => {
   showVersion();
 
-  if (options.params[9]) {
+  if (options.params.length >= 12) {
 
     const type = options.params[3];
     const subtype = options.params[4];
     const componentName = options.params[5];
     const componentLabel = options.params[6];
-    const library = options.params[7];
-    const version = options.params[9];
-    const description = options.params[9];
+    const version = options.params[7];
+    const library = options.params[8];
+    const allowedApplications = options.params[9];
+    const description = options.params[10];
+    const organization = options.params[11];
+    const framework = "Constellation";
 
     await validateCompile(
       {
@@ -181,7 +189,9 @@ export default async options => {
         framework,
         type,
         subtype,
-        description
+        description,
+        allowedApplications,
+        organization
       },
       options
     );

package/src/tasks/create/templates/Constellation/Field/Boolean/styles.js.mustache

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0px;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });