@pega/custom-dx-components 0.23.20 → 0.23.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/custom-dx-components",
-  "version": "0.23.20",
+  "version": "0.23.21",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {
@@ -15,47 +15,47 @@
   "type": "module",
   "sideEffects": false,
   "dependencies": {
-    "@babel/core": "^7.23.3",
+    "@babel/core": "^7.23.7",
     "@babel/plugin-transform-class-properties": "^7.23.3",
     "@babel/preset-react": "^7.23.3",
-    "@pega/auth": "^0.1.1",
-    "adm-zip": "^0.5.9",
+    "@pega/auth": "^0.1.6",
+    "adm-zip": "^0.5.10",
     "ajv": "^8.12.0",
     "ajv-keywords": "^5.1.0",
     "arg": "^5.0.2",
-    "babel-loader": "^9.1.2",
-    "chalk": "^5.0.1",
+    "babel-loader": "^9.1.3",
+    "chalk": "^5.3.0",
     "check-git": "^2.0.2",
     "compression-webpack-plugin": "^10.0.0",
-    "css-loader": "6.7.1",
-    "css-minimizer-webpack-plugin": "^5.0.0",
-    "eslint": "^8.4.1",
-    "execa": "^6.1.0",
+    "css-loader": "6.8.1",
+    "css-minimizer-webpack-plugin": "^5.0.1",
+    "eslint": "^8.56.0",
+    "execa": "^8.0.1",
     "file-loader": "6.2.0",
-    "fs-extra": "^10.1.0",
+    "fs-extra": "^11.2.0",
     "gitignore": "^0.7.0",
-    "inquirer": "^9.1.1",
-    "listr": "^0.14.3",
-    "mini-css-extract-plugin": "2.6.1",
+    "inquirer": "^9.2.12",
+    "listr2": "^8.0.1",
+    "mini-css-extract-plugin": "2.7.6",
     "mustache": "^4.2.0",
     "ncp": "^2.0.0",
-    "node-fetch": "^3.2.10",
-    "ora": "^6.1.2",
+    "node-fetch": "^3.3.2",
+    "ora": "^8.0.1",
     "pascalcase": "^2.0.0",
-    "postcss": "^8.4.16",
-    "postcss-loader": "7.0.1",
-    "postcss-preset-env": "7.8.2",
+    "postcss": "^8.4.33",
+    "postcss-loader": "7.3.4",
+    "postcss-preset-env": "9.3.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dev-utils": "^12.0.1",
-    "resolve": "1.22.1",
+    "resolve": "1.22.8",
     "resolve-url-loader": "^5.0.0",
-    "sass-loader": "^13.0.2",
-    "terser-webpack-plugin": "5.3.6",
-    "ts-loader": "^9.3.1",
-    "typescript": "^4.8.3",
+    "sass-loader": "^13.3.3",
+    "terser-webpack-plugin": "5.3.10",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.3.3",
     "url-loader": "4.1.1",
-    "webpack": "5.76.1"
+    "webpack": "5.89.0"
   },
   "author": "Custom component dev",
   "license": "SEE LICENSE IN LICENSE",
@@ -64,16 +64,16 @@
     "custom-components"
   ],
   "devDependencies": {
-    "@babel/preset-env": "^7.23.3",
-    "@pega/configs": "^0.5.3",
-    "@pega/prettier-config": "^0.5.3",
-    "@types/jest": "^29.5.3",
-    "babel-jest": "^29.6.1",
-    "cspell": "^4.0.23",
-    "jest": "^29.6.1",
-    "jest-environment-jsdom": "^29.3.1",
-    "jest-junit": "^15.0.0",
-    "prettier": "2.7.1",
+    "@babel/preset-env": "^7.23.7",
+    "@pega/configs": "^0.7.1",
+    "@pega/prettier-config": "^0.7.1",
+    "@types/jest": "^29.5.11",
+    "babel-jest": "^29.7.0",
+    "cspell": "^8.3.2",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-junit": "^16.0.0",
+    "prettier": "3.1.1",
     "ts-jest": "^29.1.1"
   }
 }

package/src/constants.js

@@ -18,9 +18,12 @@ 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?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 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';
@@ -165,6 +168,14 @@ export const COMPONENT_SCHEMA = {
       {
         name: 'Picklist',
         value: 'Picklist'
+      },
+      {
+        name: 'Autocomplete',
+        value: 'Picklist-Autocomplete'
+      },
+      {
+        name: 'Radio Buttons',
+        value: 'Picklist-RadioButtons'
       }
     ],
     template: [

package/src/tasks/authenticate/helper.js

@@ -1,17 +1,23 @@
 /* eslint-disable import/prefer-default-export */
 import { AUTHENTICATE_SCHEMA, AUTHENTICATE_DEFAULTS } from '../../constants.js';
 
-export const getAuthQuestions = async (dxcbConfig) => {
+export const getAuthQuestions = async dxcbConfig => {
   const defaultPegaConfig = dxcbConfig;
-  const aAlwaysAsk = dxcbConfig.questions_askAlways ? dxcbConfig.questions_askAlways.split(',') : [];
+  const aAlwaysAsk = dxcbConfig.questions_askAlways
+    ? dxcbConfig.questions_askAlways.split(',')
+    : [];
   const aNeverAsk = dxcbConfig.questions_askNever ? dxcbConfig.questions_askNever.split(',') : [];
   const aAskOnce = dxcbConfig.questions_askOnce ? dxcbConfig.questions_askOnce.split(',') : [];
-  const aAskedOnce = dxcbConfig.questions_askedOnce ? dxcbConfig.questions_askedOnce.split(',') : [];
+  const aAskedOnce = dxcbConfig.questions_askedOnce
+    ? dxcbConfig.questions_askedOnce.split(',')
+    : [];
 
   // Ask if various must, never, once criteria are met
-  const askThisTime = (prop) => {
-    return aAlwaysAsk.includes(prop) ||
-      (!aNeverAsk.includes(prop) && (aAskOnce.includes(prop) && !aAskedOnce.includes(prop)));
+  const askThisTime = prop => {
+    return (
+      aAlwaysAsk.includes(prop) ||
+      (!aNeverAsk.includes(prop) && aAskOnce.includes(prop) && !aAskedOnce.includes(prop))
+    );
   };
 
   const initAnswer = (prop, defValue) => {
@@ -21,11 +27,10 @@ export const getAuthQuestions = async (dxcbConfig) => {
     return defaultPegaConfig[prop] ? defaultPegaConfig[prop] : defValue;
   };
 
-  const initAnswers = (answers) => {
+  const initAnswers = answers => {
     // Setup default answers (if they are present and non-empty)
     answers.serverType = initAnswer('serverType', AUTHENTICATE_DEFAULTS.serverType);
     answers.server = initAnswer('server', AUTHENTICATE_DEFAULTS.server);
-    answers.isolationId = initAnswer('isolationId');
     answers.clientId = initAnswer('clientId', AUTHENTICATE_DEFAULTS.clientId);
     answers.grantType = initAnswer('grantType', AUTHENTICATE_DEFAULTS.grantType);
     answers.authService = initAnswer('authService', AUTHENTICATE_DEFAULTS.authService);
@@ -79,28 +84,15 @@ export const getAuthQuestions = async (dxcbConfig) => {
         return fnStandardWhen('server', answers);
       }
     },
-    {
-      name: 'isolationId',
-      tpye: 'input',
-      message: 'Enter isolation id',
-      default: defaultPegaConfig.isolationId,
-      validate: value => {
-        if (value.trim()) {
-          return true;
-        }
-        return 'Launchpad isolationId cannot be empty';
-      },
-      when: answers => {
-        return answers.serverType === "launchpad" && fnStandardWhen('isolationId', answers);
-      }
-    },
     {
       name: 'grantType',
       type: 'rawlist',
       message: 'Enter OAuth 2.0 grant type',
       default: defaultPegaConfig.grantType,
       choices: answers => {
-        return AUTHENTICATE_SCHEMA.grantType.filter(gt => !(answers.serverType === "launchpad" && gt.value === "passwordCreds"));
+        return AUTHENTICATE_SCHEMA.grantType.filter(
+          gt => !(answers.serverType === 'launchpad' && gt.value === 'passwordCreds')
+        );
       },
       validate: value => {
         if (value.trim()) {
@@ -124,7 +116,11 @@ export const getAuthQuestions = async (dxcbConfig) => {
         return 'Authentication service alias cannot be empty';
       },
       when: answers => {
-        return answers.serverType === "infinity" && answers.grantType === "authCode" && fnStandardWhen('authService', answers);
+        return (
+          answers.serverType === 'infinity' &&
+          answers.grantType === 'authCode' &&
+          fnStandardWhen('authService', answers)
+        );
       }
     },
     {
@@ -139,7 +135,11 @@ export const getAuthQuestions = async (dxcbConfig) => {
         return 'Redirect URI cannot be empty';
       },
       when: answers => {
-        return answers.serverType === "infinity" && answers.grantType === "authCode" && fnStandardWhen('redirectUri', answers);
+        return (
+          answers.serverType === 'infinity' &&
+          answers.grantType === 'authCode' &&
+          fnStandardWhen('redirectUri', answers)
+        );
       }
     },
     {
@@ -148,13 +148,17 @@ export const getAuthQuestions = async (dxcbConfig) => {
       message: 'Enter user id',
       default: defaultPegaConfig.user,
       validate: (value, answers) => {
-        if (value.trim() || answers.grantType === "authCode") {
+        if (value.trim() || answers.grantType === 'authCode') {
           return true;
         }
         return 'Username cannot be empty';
       },
       when: answers => {
-        return (answers.serverType === "infinity" && answers.grantType === "passwordCreds") && fnStandardWhen('user', answers);
+        return (
+          answers.serverType === 'infinity' &&
+          answers.grantType === 'passwordCreds' &&
+          fnStandardWhen('user', answers)
+        );
       }
     },
     {
@@ -163,13 +167,18 @@ export const getAuthQuestions = async (dxcbConfig) => {
       message: 'Enter password',
       default: defaultPegaConfig.password,
       validate: (value, answers) => {
-        if (value.trim() || answers.grantType === "authCode") {
+        if (value.trim() || answers.grantType === 'authCode') {
           return true;
         }
         return 'Password cannot be empty';
       },
       when: answers => {
-        return (answers.user && (answers.serverType === "infinity" && answers.grantType === "passwordCreds") && fnStandardWhen('password', answers));
+        return (
+          answers.user &&
+          answers.serverType === 'infinity' &&
+          answers.grantType === 'passwordCreds' &&
+          fnStandardWhen('password', answers)
+        );
       }
     },
     {
@@ -199,8 +208,11 @@ export const getAuthQuestions = async (dxcbConfig) => {
         return 'clientSecret cannot be empty';
       },
       when: answers => {
-        return (((answers.serverType === "infinity" && answers.grantType !== "authCode") ||
-          answers.serverType === "launchpad") && fnStandardWhen('clientSecret', answers));
+        return (
+          ((answers.serverType === 'infinity' && answers.grantType !== 'authCode') ||
+            answers.serverType === 'launchpad') &&
+          fnStandardWhen('clientSecret', answers)
+        );
       }
     }
   ];

package/src/tasks/authenticate/index.js

@@ -103,7 +103,9 @@ const generateAccessToken = async config => {
       }
     }
     if (serverType === 'launchpad') {
-      authConfig.isolationId = isolationId;
+      if (isolationId) {
+        authConfig.isolationId = isolationId;
+      }
       authConfig.noPKCE = true;
     }
 

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

@@ -1,5 +1,5 @@
 import inquirer from 'inquirer';
-import Listr from 'listr';
+import { Listr } from 'listr2';
 import chalk from 'chalk';
 
 import validate from '../validator/index.js';

package/src/tasks/{build → build-comp}/index.js

@@ -1,5 +1,5 @@
 import inquirer from 'inquirer';
-import Listr from 'listr';
+import { Listr } from 'listr2';
 import chalk from 'chalk';
 
 import validate from '../validator/index.js';

package/src/tasks/create/index.js

@@ -47,7 +47,6 @@ const compileMustacheTemplates = async (
   const componentClassName = convertIntoPascalCase(componentKey);
 
   const isTemplate = type === 'Template';
-  const isPicklist = subtype === 'Picklist';
   const isBool = subtype === 'Boolean';
   const isPhone = subtype === 'Phone';
 
@@ -56,15 +55,29 @@ const compileMustacheTemplates = async (
   }
 
   let mustacheSubType = subtype;
-  if (typeof(mustacheSubType) == "string") {
-    if (mustacheSubType == "FORM-region") {
-      mustacheSubType = "FORM";
-    }
-    else if (mustacheSubType == "DETAILS-region") {
-      mustacheSubType = "DETAILS";
+  if (typeof mustacheSubType === 'string') {
+    // eslint-disable-next-line default-case
+    switch (mustacheSubType) {
+      case 'FORM-region':
+        mustacheSubType = 'FORM';
+        break;
+      case 'DETAILS-region':
+        mustacheSubType = 'DETAILS';
+        break;
+      case 'Text-Input':
+        mustacheSubType = 'Text';
+        break;
+      case 'Picklist-Autocomplete':
+        mustacheSubType = 'Picklist';
+        break;
+      case 'Picklist-RadioButtons':
+        mustacheSubType = 'Picklist';
+        break;
     }
   }
 
+  const isPicklist = subtype === 'Picklist';
+
   if (allowedApplications.trim() === '') {
     allowedApplications = [];
   } else {

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

@@ -0,0 +1,46 @@
+import  {PConnect } from '@pega/pcore-pconnect-typedefs';
+
+// PConnProps.d.ts
+// This gives us a place to have each component (which is most DX Components) that is
+//  expected to have a getPConnect extend its props (from BaseProps)
+//  such that every component will be expected to have a getPConnect() function
+//  that returns a PConnect object. (new/better way of doing .propTypes).
+//  This PConnProps can be extended to include other props that we know are in every component
+export interface PConnProps {
+  // getPConnect should exist for every C11n component. (add @ts-ignore in special cases where it isn't)
+  getPConnect: () => typeof PConnect;
+
+  // Allow any/all other key/value pairs in the BaseProps for now
+  //  TODO: refine which other props are always expected for various component
+  //    types and consider further interface "subclassing". For example, we may
+  //    want to create a "BasePropsForm" that gives guidance on required, readonly, etc.
+  //    and any other props that every Form component expects.
+  //    For example, see the PConnFieldProps below.
+  // NOTE: if you uncomment the line below, the PConnProps type will allow
+  //  otherwise undefined types to appear. This can be helpful for debugging
+  //  or when adding new components whose types aren't yet known.
+  // [key: string]: any;
+}
+
+
+// PConnFieldProps extends PConnProps to bring in the common properties that are
+// associated with most field components (ex: Dropdown, TextInput, etc.) in the
+//  components/field directory
+export interface PConnFieldProps extends PConnProps {
+  label: string,
+  required: boolean,
+  disabled: boolean,
+  value: any,
+  validatemessage: string,
+  status?: string,
+  onChange?: any,
+  onBlur?: any,
+  readOnly: boolean,
+  testId: string,
+  helperText: string,
+  displayMode?: string,
+  hideLabel: boolean,
+  placeholder?: string,
+  fieldMetadata?: any,
+  additionalProps?: any
+}

package/src/tasks/create/templates/Constellation/Field/Boolean/{boolean-format.js.mustache → boolean-format.ts.mustache}

@@ -1,4 +1,4 @@
-/* eslint-disable import/no-relative-packages */
+
 import Boolean from "./Boolean";
 
 
@@ -8,7 +8,7 @@ export default {
 
 
 
-export function format(value, type) {
+export function format(value: any, type: string) {
   let formattedValue;
 
   switch (type?.toLowerCase()) {

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

@@ -1,10 +1,10 @@
-/* eslint-disable import/no-relative-packages */
+
 /* eslint-disable storybook/prefer-pascal-case */
 /* eslint-disable react/jsx-no-useless-fragment */
 import { useState } from 'react';
 import { withKnobs } from '@storybook/addon-knobs';
 
-import { configProps, stateProps } from './mock.stories';
+import { configProps, stateProps } from './mock';
 
 import {{COMPONENT_CLASS_NAME}} from './index';
 
@@ -14,7 +14,7 @@ export default {
   component: {{COMPONENT_CLASS_NAME}}
 };
 
-export const base{{COMPONENT_CLASS_NAME}} = () => {
+export const Base{{COMPONENT_CLASS_NAME}} = () => {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const [value, setValue] = useState(configProps.value);
 

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

@@ -0,0 +1,18 @@
+const handleEvent = (actions: any, eventType: string, propName: string, value: string) => {
+  switch (eventType) {
+    case 'change':
+      actions.updateFieldValue(propName, value);
+      break;
+    case 'blur':
+      actions.triggerFieldChange(propName, value);
+      break;
+    case 'changeNblur':
+      actions.updateFieldValue(propName, value);
+      actions.triggerFieldChange(propName, value);
+      break;
+    default:
+      break;
+  }
+};
+
+export default handleEvent;

package/src/tasks/create/templates/Constellation/Field/Boolean/{index.jsx.mustache → index.tsx.mustache}

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-relative-packages */
 import {
   Checkbox as CosmosCheckbox,
   CheckboxGroup,
@@ -7,16 +6,40 @@ import {
 } from "@pega/cosmos-react-core";
 import PropTypes from "prop-types";
 
+import type { PConnFieldProps } from './PConnProps';
+
 // includes in bundle
 import handleEvent from "./event-utils";
-
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
+// interface for props
+interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
+  // If any, enter additional props that only exist on TextInput here
+  displayAsStatus?: boolean;
+  isTableFormatter?: boolean;
+  hasSuggestions?: boolean;
+  variant?: any;
+  formatter: string;
+  caption: string;
+  trueLabel: string;
+  falseLabel: string;
+}
+
+// interface for StateProps object
+interface StateProps {
+  value: string;
+  hasSuggestions: boolean;
+}
+
+interface ActionsProps {
+  onClick: any;
+}
+
 // Duplicated runtime code from Constellation Design System Component
 
 // 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
-const {{COMPONENT_CLASS_NAME}} = props => {
+export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   const {
     getPConnect,
     value,
@@ -34,14 +57,16 @@ const {{COMPONENT_CLASS_NAME}} = props => {
   } = props;
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
-  const propName = pConn.getStateProps().value;
+  const actionsProps = pConn.getActionsApi() as unknown as ActionsProps;
+  const stateProps = pConn.getStateProps() as StateProps;
+  let propName: string = stateProps.value;
 
   let { readOnly, required, disabled } = props;
   [readOnly, required, disabled] = [readOnly, required, disabled].map(
     (prop) => prop === true || (typeof prop === 'string' && prop === 'true')
   );
 
-  let status = "";
+  let status: "error" | "success" | "warning" | "pending" | undefined;
   if (validatemessage !== "") {
     status = "error";
   }
@@ -55,11 +80,12 @@ const {{COMPONENT_CLASS_NAME}} = props => {
       disabled={disabled}
       readOnly={readOnly}
       required={required}
-      onClick={actions.onClick}
+      onClick={actionsProps.onClick}
       onChange={(event) => {
-        handleEvent(actions, "changeNblur", propName, event.target.checked);
+        handleEvent(actions, "changeNblur", propName, (event.target.checked).toString());
       }}
-      onBlur={(event) => {
+      onBlur={(event: { target: { checked: any; }; }) => {
+        // @ts-ignore
         pConn.getValidationApi().validate(event.target.checked);
       }}
       data-testid={testId}
@@ -70,6 +96,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
 
   let displayComponent;
   if (displayMode) {
+    // @ts-ignore
     displayComponent = <{{COMPONENT_CLASS_NAME}}  value={value} trueLabel={trueLabel} falseLabel={falseLabel} />;
   }
 
@@ -167,5 +194,3 @@ const {{COMPONENT_CLASS_NAME}} = props => {
   trueLabel: PropTypes.string,
   falseLabel: PropTypes.string
 };
-
-export default {{COMPONENT_CLASS_NAME}};

package/src/tasks/create/templates/Constellation/Field/{Date/styles.js.mustache → Boolean/styles.ts.mustache}

@@ -1,4 +1,4 @@
-/* eslint-disable import/no-relative-packages */
+
 // utilizing theming, comment out, if want individual style
 import styled from 'styled-components';
 import { Configuration } from '@pega/cosmos-react-core';

package/src/tasks/create/templates/Constellation/Field/Date/DateFormatter.js.mustache

@@ -1,4 +1,4 @@
-/* eslint-disable import/no-relative-packages */
+
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime.js';
 import localizedFormat from 'dayjs/plugin/localizedFormat.js';

package/src/tasks/create/templates/Constellation/Field/Date/FormattedText.jsx.mustache

@@ -1,4 +1,4 @@
-/* eslint-disable import/no-relative-packages */
+
 import { FieldValueList } from '@pega/cosmos-react-core';
 import PropTypes from 'prop-types';
 

package/src/tasks/create/templates/Constellation/Field/Date/PConnProps.d.ts.mustache

@@ -0,0 +1,46 @@
+import  {PConnect } from '@pega/pcore-pconnect-typedefs';
+
+// PConnProps.d.ts
+// This gives us a place to have each component (which is most DX Components) that is
+//  expected to have a getPConnect extend its props (from BaseProps)
+//  such that every component will be expected to have a getPConnect() function
+//  that returns a PConnect object. (new/better way of doing .propTypes).
+//  This PConnProps can be extended to include other props that we know are in every component
+export interface PConnProps {
+  // getPConnect should exist for every C11n component. (add @ts-ignore in special cases where it isn't)
+  getPConnect: () => typeof PConnect;
+
+  // Allow any/all other key/value pairs in the BaseProps for now
+  //  TODO: refine which other props are always expected for various component
+  //    types and consider further interface "subclassing". For example, we may
+  //    want to create a "BasePropsForm" that gives guidance on required, readonly, etc.
+  //    and any other props that every Form component expects.
+  //    For example, see the PConnFieldProps below.
+  // NOTE: if you uncomment the line below, the PConnProps type will allow
+  //  otherwise undefined types to appear. This can be helpful for debugging
+  //  or when adding new components whose types aren't yet known.
+  // [key: string]: any;
+}
+
+
+// PConnFieldProps extends PConnProps to bring in the common properties that are
+// associated with most field components (ex: Dropdown, TextInput, etc.) in the
+//  components/field directory
+export interface PConnFieldProps extends PConnProps {
+  label: string,
+  required: boolean,
+  disabled: boolean,
+  value: any,
+  validatemessage: string,
+  status?: string,
+  onChange?: any,
+  onBlur?: any,
+  readOnly: boolean,
+  testId: string,
+  helperText: string,
+  displayMode?: string,
+  hideLabel: boolean,
+  placeholder?: string,
+  fieldMetadata?: any,
+  additionalProps?: any
+}

package/src/tasks/create/templates/Constellation/Field/Date/date.js.mustache

@@ -1,5 +1,3 @@
-/* eslint-disable import/no-relative-packages */
-/* eslint-disable no-undef */
 /* eslint-disable prefer-regex-literals */
 import dayjs from 'dayjs';
 import DateFormatter from './DateFormatter.js';

package/src/tasks/create/templates/Constellation/Field/Date/demo.stories.jsx.mustache

@@ -1,8 +1,8 @@
-/* eslint-disable import/no-relative-packages */
+
 /* eslint-disable storybook/prefer-pascal-case */
 /* eslint-disable react/jsx-no-useless-fragment */
 import { withKnobs } from '@storybook/addon-knobs';
-import { configProps, stateProps } from './mock.stories';
+import { configProps, stateProps } from './mock';
 import {{COMPONENT_CLASS_NAME}} from './index.jsx';
 
 export default {
@@ -23,7 +23,7 @@ window.PCore.getEnvironmentInfo = () => {
   };
 };
 
-export const base{{COMPONENT_CLASS_NAME}} = () => {
+export const Base{{COMPONENT_CLASS_NAME}} = () => {
   const props = {
     getPConnect: () => {
       return {