@pega/dx-component-builder-sdk 0.23.1 → 0.23.3

package/src/tasks/create/templates/SDK-React/template/FORM-region/index.tsx.mustache

@@ -1,11 +1,19 @@
 
 import React from "react";
-import PropTypes from "prop-types";
 import { Grid, GridSize } from "@material-ui/core";
 import { makeStyles } from '@material-ui/core/styles';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
+interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
+  // If any, enter additional props that only exist on this componentName
+  children: Array<any>,
+  templateCol: string
+}
+
+
 const useStyles = makeStyles(() => ({
   colStyles: {
     display: "grid",
@@ -19,10 +27,10 @@ const useStyles = makeStyles(() => ({
 
 // 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) {
+export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   const classes = useStyles();
 
-  const {children, templateCol} = props;
+  const {children, templateCol = '1fr 1fr'} = props;
 
   if (children.length !== 2) {
     // eslint-disable-next-line no-console
@@ -55,15 +63,3 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
  )
 
 }
-
-{{COMPONENT_CLASS_NAME}}.defaultProps = {
-  templateCol: "1fr 1fr",
-  // icon: ""
-};
-
-{{COMPONENT_CLASS_NAME}}.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.node).isRequired,
-  // title: PropTypes.string,
-  templateCol: PropTypes.string,
-  // icon: PropTypes.string
-};

package/src/tasks/create/templates/SDK-React/template/PAGE/index.tsx.mustache

@@ -1,17 +1,24 @@
 
 import React from "react";
-import PropTypes from 'prop-types';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
 
 import OneColumn from './OneColumn';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
+interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
+  // If any, enter additional props that only exist on this componentName
+  children: Array<any>
+}
+
+
 
 // Duplicated runtime code from React SDK
 
 // 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) {
+export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
     return (
       <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
@@ -22,10 +29,3 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
   );
 
 }
-
-{{COMPONENT_CLASS_NAME}}.defaultProps = {
-  children: PropTypes.arrayOf(PropTypes.node).isRequired,
-};
-
-{{COMPONENT_CLASS_NAME}}.propTypes = {
-};

package/src/tasks/create/templates/SDK-React/widget/CASE/index.tsx.mustache

@@ -1,6 +1,5 @@
 
 import React, { useState, useRef, useEffect } from "react";
-import PropTypes from "prop-types";
 import { withStyles, Theme, createStyles } from '@material-ui/core/styles';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
@@ -13,7 +12,15 @@ import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
-declare const PCore;
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+// Remove this and use "real" PCore type once .d.ts is fixed (currently shows 2 errors)
+declare const PCore: any;
+
+
+interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
+  // If any, enter additional props that only exist on this component  
+}
 
 const StyledTableCell = withStyles((theme: Theme) =>
   createStyles({
@@ -39,15 +46,15 @@ const StyledTableCell = withStyles((theme: Theme) =>
 
 // 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) {
+export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   const { getPConnect } = props;
   const thePConn = getPConnect();
   // let waitingForData = true;
 
   const displayedColumns = [
-    { label: thePConn.getLocalizedValue('Date'), type: "DateTime", fieldName: "pxTimeCreated" },
-    { label: thePConn.getLocalizedValue('Description'), type: "TextInput", fieldName: "pyMessageKey" },
-    { label: thePConn.getLocalizedValue('Performed by'), type: "TextInput", fieldName: "pyPerformer" }
+    { label: thePConn.getLocalizedValue('Date', '', ''), type: "DateTime", fieldName: "pxTimeCreated" },           // 2nd and 3rd args empty string until typedef marked correctly
+    { label: thePConn.getLocalizedValue('Description', '', ''), type: "TextInput", fieldName: "pyMessageKey" },    // 2nd and 3rd args empty string until typedef marked correctly
+    { label: thePConn.getLocalizedValue('Performed by', '', ''), type: "TextInput", fieldName: "pyPerformer" }     // 2nd and 3rd args empty string until typedef marked correctly
    ];
 
   const rowData: any = useRef([]);
@@ -55,7 +62,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
   const [waitingForData, setWaitingForData] = useState<boolean>(true);
 
 
-  const caseID = thePConn.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID);
+  const caseID = thePConn.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID, '');  // 2nd arg empty string until typedef marked correctly
   const dataViewName = "D_pyWorkHistory";
   const context = thePConn.getContextName();
 
@@ -172,7 +179,3 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }
-
-{{COMPONENT_CLASS_NAME}}.propTypes = {
-  getPConnect: PropTypes.func.isRequired
-};

package/src/tasks/create/templates/SDK-React/widget/PAGE/index.tsx.mustache

@@ -1,12 +1,20 @@
 
 import React from "react";
-import PropTypes from "prop-types";
 import { Card, CardContent, CardHeader, Typography, CardActions, Button } from "@material-ui/core";
 import { makeStyles } from '@material-ui/core/styles';
-
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
+
+interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
+  // If any, enter additional props that only exist on this component 
+  header?: string,
+  description?: string,
+  datasource?: any,
+  whatsnewlink?: string 
+}
+
 const useStyles = makeStyles((theme) => ({
   root: {
     marginTop: theme.spacing(1),
@@ -22,7 +30,7 @@ const useStyles = makeStyles((theme) => ({
 
 // 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) {
+export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   const { header, description, datasource, whatsnewlink } = props;
   let details = [];
   if (datasource && datasource.source) {
@@ -60,18 +68,3 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
   );
 
 }
-
-{{COMPONENT_CLASS_NAME}}.defaultProps = {
-  header: "",
-  description: "",
-  // image: "",
-  datasource: [],
-  whatsnewlink: ""
-};
-
-{{COMPONENT_CLASS_NAME}}.propTypes = {
-  header: PropTypes.string,
-  description: PropTypes.string,
-  datasource: PropTypes.instanceOf(Object),
-  whatsnewlink: PropTypes.string
-};

package/src/tasks/create/templates/SDK-React/widget/PAGE-CASE/demo.stories.jsx.mustache

@@ -27,7 +27,7 @@ window.PCore.getUserApi = () => {
 export const Base{{COMPONENT_CLASS_NAME}} = () => {
 
   const props = {
-    caseOpConfig,
+    ...caseOpConfig,
     getPConnect: () => {
       return {
         getActionsApi: () => {

package/src/tasks/create/templates/SDK-React/widget/PAGE-CASE/index.tsx.mustache

@@ -1,6 +1,4 @@
-/* eslint-disable react/no-unused-prop-types */
 import React, {useState} from "react";
-import PropTypes from "prop-types";
 import TextField from '@material-ui/core/TextField';
 import Popover from '@material-ui/core/Popover';
 import Grid from '@material-ui/core/Grid';
@@ -10,8 +8,21 @@ import { makeStyles } from '@material-ui/core/styles';
 
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+
+interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
+  // If any, enter additional props that only exist on this componentName
+  // eslint-disable-next-line react/no-unused-prop-types
+  label: string,
+  createDateTime: string,
+  createLabel: string,
+  createOperator: { userName: string, userId: string },
+  updateDateTime: string,
+  updateLabel: string,
+  updateOperator: { userName: string, userId: string }
+}
 
-declare const PCore: any;
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -30,7 +41,7 @@ const useStyles = makeStyles((theme) => ({
 
 // 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) {
+export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   // const componentName = "Operator";
   const classes = useStyles();
 
@@ -39,12 +50,12 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
   let caseOpLabel = "---";
   let caseOpName = "---";
   let caseOpId = "";
-  let caseTime = null;
+  let caseTime = "";
 
   let updateOpLabel = "---";
   let updateOpName = "---";
   let updateOpId = "";
-  let updateTime = null;
+  let updateTime = "";
 
   // fieldLabel = props.fieldLabel;
   caseOpLabel = props.createLabel;
@@ -54,7 +65,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
 
   updateOpLabel = props.updateLabel;
   updateOpName = props.updateOperator.userName;
-  updateTime = props.updateDateTimeDateTime;
+  updateTime = props.updateDateTime;
   updateOpId = props.updateOperator.userId;
 
 
@@ -313,27 +324,3 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
 	</Styled{{COMPONENT_CLASS_NAME}}Wrapper>;
 
 }
-
-{{COMPONENT_CLASS_NAME}}.defaultProps = {
-  createLabel: null,
-  updateLabel: null,
-  createOperator: null,
-  updateOperator: null,
-  createDateTime: null,
-  updateDateTime: null
-};
-
-{{COMPONENT_CLASS_NAME}}.propTypes = {
-  getPConnect: PropTypes.func.isRequired,
-  label: PropTypes.string,
-  createLabel: PropTypes.string,
-  updateLabel: PropTypes.string,
-  resolveLabel: PropTypes.string,
-  createOperator: PropTypes.objectOf(PropTypes.any),
-  updateOperator: PropTypes.objectOf(PropTypes.any),
-  resolveOperator: PropTypes.objectOf(PropTypes.any),
-  createDateTime: PropTypes.string,
-  updateDateTime: PropTypes.string,
-  resolveDateTime: PropTypes.string,
-  hideLabel: PropTypes.bool
-};

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

@@ -306,7 +306,7 @@ export const validateCompile = async (
 
   const templateDirConstellation = `./templates/Constellation/${typeLC}/${sSubType}`;
   let templateDirectoryConstellation = fileURLToPath(new URL(templateDirConstellation, import.meta.url));
-  templateDirectoryConstellation = templateDirectoryConstellation.replace("/create-all", "/create");
+  templateDirectoryConstellation = templateDirectoryConstellation.replace( path.sep + "create-all", path.sep + "create");
 
   const componentKey = `${organization}_${library}_${componentName}`;
 

package/src/tasks/map/map.js

@@ -40,6 +40,9 @@ export const updateComponentMap = async (componentKey, category = CATEGORY_CUSTO
 
   const framework = await getFramework();
 
+  // POSIX key
+  componentKey = componentKey.split(path.sep).join("/");
+
   switch (framework) {
     case 'SDK-React' :
 
@@ -51,7 +54,9 @@ export const updateComponentMap = async (componentKey, category = CATEGORY_CUSTO
       let mapData = fs.readFileSync(pegaLocalReactComponentMapPath, { encoding: 'utf8' });
     
       let importComponent = join(REACT_COMPONENTS_DIRECTORY_PATH, categoryDirectory, componentKey);
-      importComponent = "./".concat(importComponent);
+
+      // POSIX path
+      importComponent = "./".concat(importComponent).split(path.sep).join("/");
     
       let importFull = "import ".concat(componentName).concat(" from '").concat(importComponent).concat("/';");
       let mapFull = "\"".concat(componentNameNoPrefix).concat("\" : " ).concat(componentName).concat(",");
@@ -94,7 +99,9 @@ export const updateComponentMap = async (componentKey, category = CATEGORY_CUSTO
     
       // componentKey twice for directory and file
       let importComponentAng = join(ANGULAR_COMPONENTS_DIRECTORY_PATH, categoryDirectoryAng, componentKey, componentNameNoPrefixAng);
-      importComponentAng = "./".concat(importComponentAng);
+
+      // POSIX path
+      importComponentAng = "./".concat(importComponentAng).split(path.sep).join("/");
     
       let importFullAng = "import { ".concat(componentComponentNameAng).concat(" } from '").concat(importComponentAng).concat(".component';");
       let mapFullAng = "\"".concat(originalComponentName).concat("\" : " ).concat(componentComponentNameAng).concat(",");
@@ -135,6 +142,8 @@ export const deleteFromComponentMap = async (componentKey, category = CATEGORY_C
 
   const framework = await getFramework();
 
+  // POSIX key
+  componentKey = componentKey.split(path.sep).join("/");
 
   switch (framework) {
     case 'SDK-React' :
@@ -146,7 +155,10 @@ export const deleteFromComponentMap = async (componentKey, category = CATEGORY_C
       let mapData = fs.readFileSync(pegaLocalReactComponentMapPath, { encoding: 'utf8' });
     
       let importComponent = join(REACT_COMPONENTS_DIRECTORY_PATH, categoryDirectory, componentKey);
-      importComponent = "./".concat(importComponent);
+
+      // POSIX path
+      importComponent = "./".concat(importComponent).split(path.sep).join("/");
+
     
       let importFull = "import ".concat(componentName).concat(" from '").concat(importComponent).concat("/';");
       let mapFull = "\"".concat(componentNameNoPrefix).concat("\" : " ).concat(componentName).concat(",");
@@ -177,7 +189,9 @@ export const deleteFromComponentMap = async (componentKey, category = CATEGORY_C
 
       // componentKey twice for directory and file
       let importComponentAng = join(ANGULAR_COMPONENTS_DIRECTORY_PATH, categoryDirectoryAng, componentKey, componentNameNoPrefixAng);
-      importComponentAng = "./".concat(importComponentAng);
+
+      // POSIX path
+      importComponentAng = "./".concat(importComponentAng).split(path.sep).join("/");
     
     
       let importFullAng = "import { ".concat(componentComponentNameAng).concat(" } from '").concat(importComponentAng).concat(".component';");
@@ -211,6 +225,10 @@ export const renameComponentInMap = async (oldComponentKey, newComponentKey) =>
 
   const framework = await getFramework();
 
+  // POSIX key
+  oldComponentKey = oldComponentKey.split(path.sep).join("/");
+  newComponentKey = newComponentKey.split(path.sep).join("/");
+
   switch (framework) {
     case 'SDK-React' :
 
@@ -355,7 +373,7 @@ export const isComponentMapEmpty = (framework) => {
   let mapData;
 
   switch (framework) {
-    case "SDk-React":
+    case "SDK-React":
       blankMap = path.join(path.resolve(), COMPONENT_REACT_LIB_PATH, SDK_LOCAL_REACT_COMPONENT_MAP_FILENAME);
       blankMapData = fs.readFileSync(blankMap, { encoding: 'utf8' });
       mapData = fs.readFileSync(pegaLocalAngularComponentMapPath, { encoding: 'utf8' });

package/src/tasks/validator/index.js

@@ -364,6 +364,12 @@ export default async (option, category = CATEGORY_CUSTOM) => {
   //const data = JSON.parse(fs.readFileSync(path.resolve(configFile), 'utf8'));
   const data = JSON.parse(configData);
 
+  // for now a special case for ScalarList, it doesn't have a "subtype", so for now manualy
+  // add one in here, just to pass validation
+  if (data["name"] === "ScalarList") {
+    data["subtype"] = "LIST";
+  }
+
   const valid = (category === CATEGORY_OVERRIDE) ? validateOverrideSchema(data) : validateSchema(data);
 
   if (valid) {

package/tests/assets/components/SDK-Angular/create/custom-constellation/.eslintrc.json

@@ -0,0 +1,177 @@
+{
+  "root": true,
+  "extends": ["@pega"],
+  "parserOptions": {
+    "project": "tsconfig.json",
+    "ecmaVersion": 13,
+    "warnOnUnsupportedTypeScriptVersion": false
+  },
+  "settings": {
+    "import/resolver": {
+      "typescript": {},
+      "node": {
+        "extensions": [".js", ".jsx"]
+      }
+    }
+  },
+  "ignorePatterns": [
+      "node_modules", "packages/*/lib", "!.storybook", ".storybook/public"
+    ],
+  "rules": {
+
+    // Prettier recommends running separately from a linter.
+    // https://prettier.io/docs/en/integrating-with-linters.html#notes
+    "prettier/prettier": "off",
+
+    // Disable rules from shared configs we're not ready for yet.
+    "sonarjs/cognitive-complexity": "off",
+    "sonarjs/no-identical-functions": "off",
+    "sonarjs/no-duplicate-string": "off",
+    "sonarjs/no-nested-template-literals": "off",
+
+    //
+    // JA - Override some default lint handling here
+    "@typescript-eslint/array-type": ["error", { "default": "generic" }],
+    // "import/extensions": ["warn", "never"],    // Turning off for now (see below)
+
+    //
+    // Initial release: turning these off; phase in to "warn" or "error" over time
+    //  For "quotes" and "@typescript-eslint/quotes", see override below for .ts/.tsx files
+    "import/extensions": ["off", "never"],
+    "import/named": "off",
+    "import/no-cycle": "off",
+    "import/no-duplicates": "off",
+    "import/no-extraneous-dependencies": "off",
+    "import/no-named-as-default": "off",
+    "import/no-named-as-default-member": "off",
+    "import/no-self-import": "off",
+    "import/no-unresolved": "off",
+    "import/no-useless-path-segments": "off",
+    "import/order": "off",
+    "import/prefer-default-export": "off",
+    "import/no-relative-packages": "off",
+
+    "no-else-return": "off",
+    "no-restricted-syntax": "off",
+    "no-underscore-dangle": "off",
+
+    "jsx-a11y/alt-text": "off",
+    "jsx-a11y/anchor-is-valid": "off",
+    "jsx-a11y/click-events-have-key-events": "off",
+    "jsx-a11y/label-has-associated-control": "off",
+    "jsx-a11y/no-static-element-interactions": "off",
+
+
+    "sonarjs/prefer-immediate-return": "off",
+    "sonarjs/no-redundant-boolean": "off",
+
+    "@typescript-eslint/dot-notation": "off",       // prefer warn but needs different parserOptions
+    "@typescript-eslint/naming-convention": "off",  // prefer warn but needs different parserOptions
+    "@typescript-eslint/ban-types": "off",   // also, see override below
+
+    //
+    // Initial release: set to error
+    "@typescript-eslint/no-inferrable-types": "off",
+    "eqeqeq": "off",
+    "no-alert": "off",
+    "no-console": "off",
+    "no-fallthrough": "error",
+    "no-undef": "off",
+    "no-unused-vars": "off",
+    "no-var": "off",
+    "prefer-const": "off",
+    "yoda": "error",
+    "no-irregular-whitespace": "off",
+    "no-empty": "off",
+    "no-new-object": "off",
+
+    "import/no-mutable-exports": "error",
+    "sonarjs/max-switch-cases": "error",
+    "sonarjs/no-collapsible-if": "off",
+    "sonarjs/no-all-duplicated-branches": "off",
+    "sonarjs/no-duplicated-branches": "off",
+    "sonarjs/no-gratuitous-expressions": "off",
+    "sonarjs/no-ignored-return": "off",
+    "sonarjs/no-small-switch": "off",
+    "sonarjs/prefer-object-literal": "off",
+    "sonarjs/prefer-single-boolean-return": "off",
+    "@typescript-eslint/no-shadow": "off",
+    "array-callback-return": "off",
+    "camelcase": "error",
+    "default-case": "off",
+    "func-names": "error",
+    "no-case-declarations": "error",
+    "no-lonely-if": "off",
+    "no-nested-ternary": "error",
+    "no-plusplus": "off",
+    "no-restricted-globals": "off",
+    "no-restricted-properties": "off",
+    "no-shadow": "off",
+    "radix": "off",
+    "spaced-comment": "off",
+
+    "import/newline-after-import": "off",
+    "sonarjs/no-nested-switch": "off",
+    "@typescript-eslint/no-array-constructor": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "@typescript-eslint/no-useless-constructor": "off",
+    "@typescript-eslint/no-unused-expressions": "off",
+    "class-methods-use-this": "off",
+    "guard-for-in": "off",
+    "no-unneeded-ternary": "off",
+    "no-unused-expressions": "off",
+    "operator-assignment": "off",
+    "prefer-template": "off",
+    "vars-on-top": "off",
+
+    "no-use-before-define": "off",    // doc for @typescript-eslint/no-use-before-define says to turn off the base implementation
+    "@typescript-eslint/no-use-before-define": "error"
+
+  },
+  "overrides": [
+    {
+      "files": "*.@(ts|tsx)",
+      "rules": {
+        "@typescript-eslint/method-signature-style": ["off", "property"],
+        // "@typescript-eslint/ban-types": [
+        //   "warn",
+        //   {
+        //     "types": {
+        //       "Omit": "Please use the 'OmitStrict' type from 'src/types/' instead.",
+        //       "object": false,
+        //       "Function": false
+        //     },
+        //     "extendDefaults": true
+        //   }
+        // ],
+
+        "quotes": "off",
+        "@typescript-eslint/quotes": "off"
+        // [
+        //   "error",
+        //   "single",
+        //   {
+        //     "avoidEscape": true,
+        //     "allowTemplateLiterals": false
+        //   }
+        // ]
+      }
+    },
+    {
+      "files": "*.@(js|jsx|ts|tsx|mdx)",
+      "rules": {
+      }
+    },
+    {
+      "files": ".storybook/*.js",
+      "extends": ["@pega/eslint-config/script"]
+    },
+    {
+      "files": "*/**/mocks/**.@(mocks|styles).@(tsx|ts)",
+      "rules": {
+        "import/prefer-default-export": ["off"]
+      }
+    }
+  ]
+}

package/tests/assets/components/SDK-Angular/create/custom-constellation/_custom-constellation.md

@@ -0,0 +1,5 @@
+# The **components/custom-constellation** directory
+
+The **src/components/custom-constellation** directory contains the code for Constellation-related _associated_ components of custom components that you create and use with the **Angular SDK**.
+These _associated_ components are used to show the preview of the custom component in App Studio when you are authoring your application and App Studio needs to use the Constellation
+design system version of your custom component.

package/tests/assets/components/SDK-Angular/create/custom-constellation/field/Pega_DXIL_MyTestText/demo.stories.jsx

@@ -0,0 +1,51 @@
+import { useState } from 'react';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import { stateProps, configProps } from './mock.stories';
+
+import PegaDxilMyTestText from './index.jsx';
+
+export default {
+  title: 'PegaDxilMyTestText',
+  decorators: [withKnobs],
+  component: PegaDxilMyTestText
+};
+
+export const basePegaDxilMyTestText = () => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [value, setValue] = useState(configProps.value);
+
+  const props = {
+    value,
+    placeholder: configProps.placeholder,
+    label: configProps.label,
+    testId: configProps.testId,
+    hasSuggestions: configProps.hasSuggestions,
+
+    getPConnect: () => {
+      return {
+        getStateProps: () => {
+          return stateProps;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: (propName, theValue) => {
+              setValue(theValue);
+            },
+            triggerFieldChange: () => {/* nothing */}
+          };
+        },
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
+      };
+    }
+  };
+
+  return (
+    <>
+      <PegaDxilMyTestText {...props} />
+    </>
+  );
+};