@pega/custom-dx-components 26.1.10 → 26.1.11-alpha-0.2

package/eslint.config.mjs

@@ -1,234 +0,0 @@
-import { globalIgnores } from 'eslint/config';
-import { fileURLToPath } from 'node:url';
-import eslint from '@eslint/js';
-import tseslint from 'typescript-eslint';
-import sonarjs from 'eslint-plugin-sonarjs';
-import importPlugin from 'eslint-plugin-import';
-import react from 'eslint-plugin-react';
-import reactHooks from 'eslint-plugin-react-hooks';
-// eslint.config.js
-import { defineConfig } from 'eslint/config';
-import noPcorePconnectInPresentation from './src/rules/no-pcore-pconnect-in-presentation.js';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = fileURLToPath(new URL('.', import.meta.url));
-
-export default defineConfig([
-  eslint.configs.recommended,
-  ...tseslint.configs.recommended,
-  globalIgnores([
-    '**/node_modules',
-    'packages/*/lib',
-    '!**/.storybook',
-    '.storybook/public',
-    '**/demo.stories.jsx',
-    '**/mock.stories.js',
-    '**/demo.stories.tsx',
-    '**/demo.test.tsx',
-    '**/*.test.tsx',
-    '**/mock.stories.ts',
-    '**/*.mdx',
-    '**/webpack.config.js',
-    'src/helpers/config_access.js',
-    '**/*.html',
-    '**/*.css',
-    '**/*.json',
-    '**/*.md',
-    '**/*.svg',
-    '**/*.zip',
-    '**/*.d.ts',
-    '*.storybook/*',
-    '**/*.cjs',
-    '**/*.mjs',
-    '**/paths.js',
-    'dist/*',
-    'lib/*',
-    'tests/*'
-  ]),
-  {
-    languageOptions: {
-      globals: {
-        PCore: 'readonly',
-        window: true,
-        console: true,
-        document: true,
-        fetch: true
-      },
-
-      ecmaVersion: 13,
-      sourceType: 'script',
-
-      parserOptions: {
-        project: true,
-        tsconfigRootDir: __dirname,
-        ecmaFeatures: {
-          jsx: true
-        }
-      }
-    },
-
-    settings: {
-      'import/resolver': {
-        typescript: {},
-        react: {
-          version: 'detect'
-        },
-        node: {
-          extensions: ['.js', '.jsx', '.ts', '.tsx']
-        }
-      },
-
-      react: {
-        version: 'detect'
-      }
-    },
-
-    plugins: { sonarjs, import: importPlugin, react, 'react-hooks': reactHooks, 'pega-presentation': { rules: { 'no-pcore-pconnect-in-presentation': noPcorePconnectInPresentation } } },
-    rules: {
-      'pega-presentation/no-pcore-pconnect-in-presentation': 'error',
-      'prettier/prettier': 'off',
-      'sonarjs/cognitive-complexity': 'off',
-      'sonarjs/no-identical-functions': 'off',
-      'sonarjs/no-duplicate-string': 'off',
-      'sonarjs/no-nested-template-literals': 'off',
-      '@typescript-eslint/array-type': 'off',
-      '@typescript-eslint/no-wrapper-object-types': 'off',
-      '@typescript-eslint/no-explicit-any': 'off',
-      '@typescript-eslint/no-empty-object-type': 'off',
-      '@typescript-eslint/ban-ts-comment': 'off',
-      '@typescript-eslint/no-unsafe-function-type': 'off',
-      '@typescript-eslint/no-inferrable-types': 'off',
-      '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',
-      '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',
-      'react/jsx-fragments': 'off',
-      'react/jsx-no-bind': 'off',
-      'react/self-closing-comp': 'off',
-      'sonarjs/prefer-immediate-return': 'off',
-      '@typescript-eslint/dot-notation': 'off',
-      '@typescript-eslint/naming-convention': 'off',
-      '@typescript-eslint/ban-types': 'off',
-      eqeqeq: 'off',
-      'no-alert': 'off',
-      'no-console': 'off',
-      'no-fallthrough': 'error',
-      'no-unused-vars': 'off',
-      'no-var': 'off',
-      'no-undef': 'off',
-      yoda: 'error',
-      'no-irregular-whitespace': 'off',
-      'no-empty': 'off',
-      'no-new-object': 'off',
-      'import/no-relative-packages': 'off',
-      'import/no-mutable-exports': 'error',
-      'sonarjs/max-switch-cases': 'off',
-      'sonarjs/no-collapsible-if': 'off',
-      'sonarjs/no-all-duplicated-branches': 'error',
-      'sonarjs/no-duplicated-branches': 'error',
-      'sonarjs/no-gratuitous-expressions': 'off',
-      'sonarjs/no-ignored-return': 'error',
-      'sonarjs/no-small-switch': 'error',
-      'sonarjs/prefer-object-literal': 'off',
-      'sonarjs/prefer-single-boolean-return': 'off',
-      '@typescript-eslint/no-shadow': 'off',
-      'react/default-props-match-prop-types': 'error',
-      'react/no-unescaped-entities': 'error',
-      'react/no-unused-prop-types': 'error',
-      'react/static-property-placement': 'error',
-      'array-callback-return': 'error',
-      'func-names': 'off',
-      'no-case-declarations': 'off',
-      'no-lonely-if': 'off',
-      'no-nested-ternary': 'off',
-      'no-plusplus': 'off',
-      'no-restricted-globals': 'error',
-      'no-restricted-properties': 'error',
-      'no-shadow': 'off',
-      radix: 'off',
-      'spaced-comment': 'error',
-      'import/newline-after-import': 'error',
-      'sonarjs/no-nested-switch': 'error',
-      '@typescript-eslint/no-array-constructor': 'error',
-      '@typescript-eslint/no-unused-vars': 'off',
-      '@typescript-eslint/no-useless-constructor': 'error',
-      'react/button-has-type': 'error',
-      'react/jsx-curly-brace-presence': 'error',
-      'react/jsx-boolean-value': 'error',
-      'react/no-array-index-key': 'error',
-      'class-methods-use-this': 'error',
-      'guard-for-in': 'off',
-      'no-unneeded-ternary': 'error',
-      'no-unused-expressions': 'error',
-      'operator-assignment': 'error',
-      'prefer-template': 'error',
-      'vars-on-top': 'off',
-      'prefer-regex-literals': 'off',
-      'no-use-before-define': 'off',
-      '@typescript-eslint/no-use-before-define': 'off',
-      'sonarjs/no-duplicated-branches': 'off',
-      'no-useless-escape': 'off',
-      'no-redeclare': 'off',
-      'no-constant-binary-expression': 'off',
-      'no-constant-condition': 'off',
-      'no-useless-catch': 'off',
-    }
-  },
-  {
-    files: ['**/*.@(ts|tsx)'],
-
-    rules: {
-      '@typescript-eslint/method-signature-style': ['error', 'property'],
-      quotes: 'off',
-      '@typescript-eslint/quotes': 'off'
-    }
-  },
-  {
-    files: ['**/*.@(jsx|tsx|mdx)'],
-
-    rules: {
-      'react/react-in-jsx-scope': 'off',
-      'react-hooks/rules-of-hooks': 'off',
-      'react-hooks/exhaustive-deps': 'off'
-    }
-  },
-  {
-    files: ['**/*.@(ts|tsx)'],
-    rules: {
-      'no-console': 'off',
-      'import/prefer-default-export': 'off',
-      'import/no-relative-packages': 'off',
-      'react/jsx-fragments': 'off',
-      'react/react-in-jsx-scope': 'off',
-      'react-hooks/exhaustive-deps': 'off',
-      'sonarjs/cognitive-complexity': ['warn', 45]
-    }
-  },
-  {
-    files: ['**/*.@(js|jsx|ts|tsx|mdx)'],
-    rules: {}
-  },
-
-  {
-    files: ['*/**/mocks/**.@(mocks|styles).@(tsx|ts)'],
-
-    rules: {
-      'import/prefer-default-export': ['off']
-    }
-  }
-]);

package/jest.config.cjs

@@ -1,37 +0,0 @@
-module.exports = {
-  verbose: true,
-  roots: ['./tests'],
-  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/tests/assets/library/components/create/Pega_DXIL_MyTestText/config.json

@@ -1,58 +0,0 @@
-{
-  "name": "Pega_DXIL_MyTestText",
-  "label": "My Test Text",
-  "description": "My Test Text Description",
-  "organization": "Pega",
-  "version": "0.0.1",
-  "library": "DXIL",
-  "componentKey": "Pega_DXIL_MyTestText",
-  "type": "Field",
-  "subtype": "Text",
-  "subtypeLabel": "Text",
-  "properties": [
-    {
-      "name": "label",
-      "label": "Label value",
-      "format": "TEXT"
-    },
-    {
-      "name": "placeholder",
-      "label": "Placeholder",
-      "format": "TEXT"
-    },
-    {
-      "name": "visibility",
-      "label": "Visible",
-      "format": "VISIBILITY"
-    },
-    {
-      "name": "disabled",
-      "label": "Disabled",
-      "format": "DISABLED"
-    },
-    {
-      "name": "required",
-      "label": "Required",
-      "format": "REQUIRED"
-    },
-    {
-      "label": "Advanced",
-      "format": "GROUP",
-      "collapsible": true,
-      "properties": [
-        {
-          "name": "testId",
-          "label": "Test ID",
-          "format": "TEXT",
-          "ignorePattern": "[^-_\\p{N}\\p{L}]",
-          "includeAnnotations": false
-        }
-      ]
-    }
-  ],
-  "defaultConfig": {
-    "detailFVLItem": true,
-    "isFormWidth" : false,
-    "isContainerWidth" : false
-  }
-}

package/tests/assets/library/components/create/Pega_DXIL_MyTestText/demo.stories.tsx

@@ -1,67 +0,0 @@
-
-/* eslint-disable react/jsx-no-useless-fragment */
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { stateProps, configProps } from './mock';
-
-import PegaDxilMyTestText from './index';
-
-const meta: Meta<typeof PegaDxilMyTestText> = {
-  title: 'PegaDxilMyTestText',
-  component: PegaDxilMyTestText,
-  excludeStories: /.*Data$/
-};
-
-export default meta;
-type Story = StoryObj<typeof PegaDxilMyTestText>;
-
-export const BasePegaDxilMyTestText: Story = (args: any) => {
-
-  const [value, setValue] = useState(configProps.value);
-
-  const props = {
-    value,
-    hasSuggestions: configProps.hasSuggestions,
-
-    getPConnect: () => {
-      return {
-        getStateProps: () => {
-          return stateProps;
-        },
-        getActionsApi: () => {
-          return {
-            updateFieldValue: (propName: string, theValue: any) => {
-              setValue(theValue);
-            },
-            triggerFieldChange: () => {/* nothing */}
-          };
-        },
-        ignoreSuggestion: () => {/* nothing */},
-        acceptSuggestion: () => {/* nothing */},
-        setInheritedProps: () => {/* nothing */},
-        resolveConfigProps: () => {/* nothing */}
-      };
-    }
-  };
-
-  return (
-    <>
-      <PegaDxilMyTestText {...props} {...args} />
-    </>
-  );
-};
-
-BasePegaDxilMyTestText.args = {
-  label: configProps.label,
-  helperText: configProps.helperText,
-  placeholder: configProps.placeholder,
-  testId: configProps.testId,
-  readOnly: configProps.readOnly,
-  disabled: configProps.disabled,
-  required: configProps.required,
-  status: configProps.status,
-  hideLabel: configProps.hideLabel,
-  displayMode: configProps.displayMode,
-  validatemessage: configProps.validatemessage
-};

package/tests/assets/library/components/create/Pega_DXIL_MyTestText/demo.test.tsx

@@ -1,19 +0,0 @@
-// import { expect, test } from '@jest/globals';
-import { render, screen } from '@testing-library/react';
-import { composeStories } from '@storybook/react';
-import '@testing-library/jest-dom';
-
-import * as DemoStories from './demo.stories';
-
-const { BasePegaDxilMyTestText } = composeStories(DemoStories);
-
-test('renders PegaDxilMyTestText', async () => {
-  render(<BasePegaDxilMyTestText />);
-  expect(await screen.findByText('Text Sample')).toBeVisible();
-
-
-  const textElement = (screen.getByTestId('Text-12345678:input:control') as HTMLInputElement);
-  expect(textElement.value).toBe('');
-
-  expect(textElement).toHaveAttribute('placeholder', 'Text Placeholder');
-});

package/tests/assets/library/components/create/Pega_DXIL_MyTestText/index.tsx

@@ -1,146 +0,0 @@
-import {
-  Input,
-  FieldValueList,
-  Text,
-  EmailDisplay,
-  PhoneDisplay,
-  URLDisplay,
-  withConfiguration
-} from '@pega/cosmos-react-core';
-
-import type { PConnFieldProps } from '../shared/PConnProps';
-import '../shared/create-nonce';
-
-import StyledPegaDxilMyTestTextWrapper from './styles';
-
-// interface for props
-interface PegaDxilMyTestTextProps extends PConnFieldProps {
-  // If any, enter additional props that only exist on TextInput here
-  isTableFormatter?: boolean;
-  formatter: string;
-  variant?: any;
-}
-
-// interface for StateProps object
-interface StateProps {
-  value: string;
-  hasSuggestions: boolean;
-}
-
-export const formatExists = (formatterVal: string) => {
-  const formatterValues = [
-    'TextInput',
-    'WorkStatus',
-    'RichText',
-    'Email',
-    'Phone',
-    'URL',
-    'Operator'
-  ];
-  let isformatter = false;
-  if (formatterValues.includes(formatterVal)) {
-    isformatter = true;
-  }
-  return isformatter;
-};
-
-export const textFormatter = (formatter: string, value: string) => {
-  let displayComponent: any = null;
-  switch (formatter) {
-    case 'TextInput': {
-      displayComponent = value;
-      break;
-    }
-    case 'Email': {
-      displayComponent = <EmailDisplay value={value} displayText={value} variant='link' />;
-      break;
-    }
-    case 'Phone': {
-      displayComponent = <PhoneDisplay value={value} variant='link' />;
-      break;
-    }
-    case 'URL': {
-      displayComponent = (
-        <URLDisplay target='_blank' value={value} displayText={value} variant='link' />
-      );
-      break;
-    }
-    // no default
-  }
-  return displayComponent;
-};
-
-// 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
-function PegaDxilMyTestText(props: PegaDxilMyTestTextProps) {
-  const { getPConnect, value, placeholder, disabled = false, displayMode, readOnly = false, required = false, label, hideLabel = false, testId, isTableFormatter = false, variant = 'inline' } = props;
-
-  const pConn = getPConnect();
-  const actions = pConn.getActionsApi();
-  const stateProps = pConn.getStateProps() as StateProps;
-  const propName: string = stateProps.value;
-  const { formatter } = props;
-
-  const handleOnChange = (event: any) => {
-    const { value: updatedValue } = event.target;
-    actions.updateFieldValue(propName, updatedValue);
-  };
-
-  if (displayMode === 'LABELS_LEFT' || displayMode === 'DISPLAY_ONLY') {
-    let displayComp = value || <span aria-hidden='true'>&ndash;&ndash;</span>;
-    if (isTableFormatter && formatExists(formatter)) {
-      displayComp = textFormatter(formatter, value);
-    }
-    return displayMode === 'DISPLAY_ONLY' ? (
-      <StyledPegaDxilMyTestTextWrapper> {displayComp} </StyledPegaDxilMyTestTextWrapper>
-    ) : (
-      <StyledPegaDxilMyTestTextWrapper>
-        <FieldValueList
-          variant={hideLabel ? 'stacked' : variant}
-          data-testid={testId}
-          fields={[{ id: '1', name: hideLabel ? '' : label, value: displayComp }]}
-        />
-      </StyledPegaDxilMyTestTextWrapper>
-    );
-  }
-
-  if (displayMode === 'STACKED_LARGE_VAL') {
-    const isValDefined = typeof value !== 'undefined' && value !== '';
-    const val = isValDefined ? (
-      <Text variant='h1' as='span'>
-        {value}
-      </Text>
-    ) : (
-      ''
-    );
-    return (
-      <StyledPegaDxilMyTestTextWrapper>
-        <FieldValueList
-          variant='stacked'
-          data-testid={testId}
-          fields={[{ id: '2', name: hideLabel ? '' : label, value: val }]}
-        />
-      </StyledPegaDxilMyTestTextWrapper>
-    );
-  }
-
-  return (
-    <StyledPegaDxilMyTestTextWrapper>
-      <Input
-        type='text'
-        value={value}
-        label={label}
-        labelHidden={hideLabel}
-        placeholder={placeholder}
-        disabled={disabled}
-        readOnly={readOnly}
-        required={required}
-        onChange={handleOnChange}
-        testId={testId}
-      />
-    </StyledPegaDxilMyTestTextWrapper>
-  );
-};
-
-
-export default withConfiguration(PegaDxilMyTestText);

package/tests/assets/library/components/create/Pega_DXIL_MyTestText/mock.ts

@@ -1,21 +0,0 @@
-
-export const configProps = {
-  value: '',
-  label: 'Text Sample',
-  placeholder: 'Text Placeholder',
-  helperText: 'Text Helper Text',
-  testId: 'Text-12345678',
-  hasSuggestions: false,
-  displayMode: '',
-  hideLabel: false,
-  readOnly: false,
-  required: false,
-  disabled: false,
-  status: '',
-  validatemessage: ''
-};
-
-export const stateProps = {
-  value: '.TextSample',
-  hasSuggestions: false
-};

package/tests/assets/library/components/create/Pega_DXIL_MyTestText/styles.ts

@@ -1,8 +0,0 @@
-// 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;
-  `;
-});

package/tests/assets/library/components/create/_components.md

@@ -1 +0,0 @@
-# directory for components #

package/tests/assets/library/components/create/shared/PConnProps.d.ts

@@ -1,45 +0,0 @@
-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/tests/assets/library/components/create/shared/create-nonce.ts

@@ -1,5 +0,0 @@
-// @ts-ignore
-if (window?.__webpack_nonce__) {
-  // @ts-ignore
-  __webpack_nonce__ = window.__webpack_nonce__;
-}

package/tests/assets/library/components/create/shared/suggestions-handler.ts

@@ -1,9 +0,0 @@
-export const suggestionsHandler = (accepted: boolean, pConn: any, setStatus: any) => {
-  if (accepted) {
-    pConn.acceptSuggestion();
-    setStatus('success');
-  } else {
-    pConn.ignoreSuggestion();
-    setStatus(undefined);
-  }
-};