@pega/custom-dx-components 0.242.17 → 0.242.18

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyForm/demo.stories.tsx

@@ -1,186 +0,0 @@
-
-/* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import PegaDxilMyForm from './index';
-import { DateInput, Input, FieldValueList, Text } from '@pega/cosmos-react-core';
-import { PhoneInput as CosmosPhone } from '@pega/cosmos-react-core';
-import { pyReviewRaw, regionChildrenResolved } from './mock';
-
-const meta: Meta<typeof PegaDxilMyForm> = {
-  title: 'PegaDxilMyForm',
-  component: PegaDxilMyForm,
-  excludeStories: /.*Data$/,
-  parameters: {
-    type: 'Form'
-  }
-};
-
-export default meta;
-type Story = StoryObj<typeof PegaDxilMyForm>;
-
-const renderField = resolvedProps => {
-  const { displayMode, value = '', label = '', key } = resolvedProps;
-
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const [inputValue, setInputValue] = useState(value);
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const [phoneValue, setPhoneValue] = useState('+16397975093');
-
-  const variant = displayMode === 'LABELS_LEFT' ? 'inline' : 'stacked';
-
-  let val =
-    value !== '' ? (
-      <Text
-        variant='h1'
-        as='span'
-        key={key}
-        onChange={e => {
-          setInputValue(e.target.value);
-        }}
-      >
-        {inputValue}
-      </Text>
-    ) : (
-      ''
-    );
-
-
-  if (label === 'Service Date') {
-    val = (
-      <DateInput
-        value={inputValue}
-        style={{ fontSize: '14px' }}
-        key={key}
-        onChange={dateValue => {
-          const { valueAsISOString: date } = dateValue;
-          const trimmedDate = date ? date.substring(0, date.indexOf('T')) : date;
-          setInputValue(trimmedDate);
-        }}
-      />
-    );
-  }
-
-  if (label === 'Email') {
-    val = (
-      <Input
-        type='email'
-        value={inputValue}
-        style={{ fontSize: '14px' }}
-        key={key}
-        onChange={e => {
-          setInputValue(e.target.value);
-        }} />
-    );
-  }
-
-  if (label === 'First Name' || label === 'Last Name' || label === 'Middle Name') {
-    val = (
-      <Input
-        value={inputValue}
-        style={{ fontSize: '14px' }}
-        key={key}
-        onChange={e => {
-          setInputValue(e.target.value);
-        }}
-      />
-    );
-  }
-
-  if (label === 'Phone Number') {
-    val = (
-      <CosmosPhone
-        value={phoneValue}
-        style={{ fontSize: '14px' }}
-        key={key}
-        onChange={phoneVal => {
-          setPhoneValue(phoneVal);
-        }}
-      />
-    );
-  }
-
-
-  if (variant === 'inline') {
-    val = value || (
-      <span
-        aria-hidden='true'
-        onChange={e => {
-          setInputValue(e.target.value);
-        }}
-      >
-        &ndash;&ndash;
-      </span>
-    );
-  } else {
-    val = (
-      <Text
-        variant='h1'
-        as='span'
-        key={key}
-        onChange={e => {
-          setInputValue(e.target.value);
-        }}
-      >
-        {val}
-      </Text>
-    );
-  }
-  return (
-    <FieldValueList
-      variant={variant}
-      fields={[{ name: label, value: val }]}
-      key={key}
-    />
-  );
-};
-
-export const BasePegaDxilMyForm: Story = args => {
-  const props = {
-    getPConnect: () => {
-      return {
-        getChildren: () => {
-          return pyReviewRaw.children;
-        },
-        getInheritedProps: () => {
-          return pyReviewRaw.config.inheritedProps;
-        },
-        createComponent: config => {
-          // eslint-disable-next-line default-case
-          switch (config.config.value) {
-            case '@P .FirstName':
-              return renderField(regionChildrenResolved[0]);
-            case '@P .MiddleName':
-              return renderField(regionChildrenResolved[1]);
-            case '@P .LastName':
-              return renderField(regionChildrenResolved[2]);
-            case '@P .Email':
-              return renderField(regionChildrenResolved[3]);
-            case '@P .PhoneNumber':
-              return renderField(regionChildrenResolved[4]);
-            case '@P .ServiceDate':
-              return renderField(regionChildrenResolved[5]);
-          }
-        }
-      };
-    }
-  };
-
-  const regionAChildren = pyReviewRaw.children[0].children.map(child => {
-    return props.getPConnect().createComponent(child);
-  });
-
-  return (
-    <>
-      <PegaDxilMyForm {...props} {...args}>{regionAChildren}</PegaDxilMyForm>
-    </>
-  );
-};
-
-BasePegaDxilMyForm.args = {
-  showLabel: true,
-  label: 'Form template',
-  NumCols: 1,
-};

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyForm/index.tsx

@@ -1,68 +0,0 @@
-import { Grid, Flex, FieldGroup, withConfiguration } from '@pega/cosmos-react-core';
-
-
-import type { PConnFieldProps } from './PConnProps';
-import DetailsRender from './DetailsRender';
-
-import StyledPegaDxilMyFormWrapper from './styles';
-
-// interface for props
-interface PegaDxilMyFormProps extends PConnFieldProps {
-  // If any, enter additional props that only exist on TextInput here
-  showLabel: boolean;
-  NumCols: string;
-  children: any;
-}
-
-// 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 PegaDxilMyForm(props: PegaDxilMyFormProps) {
-
-  const { children = [], NumCols = '1', label, showLabel, getPConnect, readOnly, displayMode } = props;
-  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
-
-  const nCols = parseInt(NumCols, 10);
-
-
-  if (readOnly && readOnly === true && displayMode && displayMode === 'DISPLAY_ONLY') {
-    const numRegions = '1';
-    const gridRepeat = 'repeat('.concat(numRegions).concat(', 1fr)');
-    const gridContainer = { colGap: 0, 'margin-line-start': 0 };
-    // @ts-ignore
-    gridContainer.cols = gridRepeat;
-
-    return (
-      <StyledPegaDxilMyFormWrapper>
-        <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
-          <Grid container={gridContainer} data-testid={`column-count-${numRegions}`}>
-            {children.map((child: any, i: number) => (
-              <Flex
-                // @ts-ignore
-                container={{ direction: 'column', alignItems: 'normal', colGap: 1, rowGap: 1.5 }}
-                key={`r-${i + 1}`}
-              >
-                <DetailsRender child={child} />
-              </Flex>
-            ))}
-          </Grid>
-        </FieldGroup>
-      </StyledPegaDxilMyFormWrapper>
-    );
-  }
-  return (
-    <StyledPegaDxilMyFormWrapper>
-    <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
-      <Grid container={{
-            cols: `repeat(${nCols}, minmax(0, 1fr))`,
-            gap: 2
-          }}>
-            {children}
-      </Grid>
-    </FieldGroup>
-    </StyledPegaDxilMyFormWrapper>
-  );
-
-
-}
-
-export default withConfiguration(PegaDxilMyForm);

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyIconButtonURL/demo.stories.tsx

@@ -1,103 +0,0 @@
-
-/* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
-import type { Meta, StoryObj } from '@storybook/react';
-
-import PegaDxilMyIconButtonUrl from './index';
-import { stateProps, configProps } from './mock';
-
-const meta: Meta<typeof PegaDxilMyIconButtonUrl> = {
-  title: 'PegaDxilMyIconButtonUrl',
-  component: PegaDxilMyIconButtonUrl,
-  excludeStories: /.*Data$/
-};
-
-export default meta;
-type Story = StoryObj<typeof PegaDxilMyIconButtonUrl>;
-
-if (!window.PCore) {
-  window.PCore = {};
-}
-
-const countrylistData = {
-  data: [
-    {
-      Name: 'United States of America',
-      ShortName: 'USA'
-    },
-    {
-      Name: 'Canada',
-      ShortName: 'CAN'
-    },
-    {
-      Name: 'Mexico',
-      ShortName: 'MEX'
-    }
-  ]
-};
-
-window.PCore.getDataPageUtils = () => {
-  return {
-    getData: () => {
-      return new Promise(resolve => {
-        resolve(countrylistData);
-      });
-    },
-    getDataAsync: () => {
-      return new Promise(resolve => {
-        resolve(countrylistData);
-      });
-    }
-  };
-};
-
-export const BasePegaDxilMyIconButtonUrl: Story = args => {
-
-  const props = {
-    getPConnect: () => {
-      return {
-        getValue: value => {
-          return value;
-        },
-        getContextName: () => {
-          return 'app/primary_1';
-        },
-        getLocalizedValue: value => {
-          return value;
-        },
-        getActionsApi: () => {
-          return {
-            updateFieldValue: () => {
-              /* nothing */
-            },
-            triggerFieldChange: () => {
-              /* nothing */
-            }
-          };
-        },
-        ignoreSuggestion: () => {
-          /* nothing */
-        },
-        acceptSuggestion: () => {
-          /* nothing */
-        },
-        setInheritedProps: () => {
-          /* nothing */
-        },
-        resolveConfigProps: () => {
-          /* nothing */
-        }
-      };
-    }
-  };
-
-  return (
-    <>
-      <PegaDxilMyIconButtonUrl {...props} {...args} />
-    </>
-  );
-};
-
-BasePegaDxilMyIconButtonUrl.args = {
-
-};

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyIconButtonURL/index.tsx

@@ -1,214 +0,0 @@
-import { useEffect, useState } from 'react';
-import {
-  Icon,
-  Button,
-  withConfiguration,
-  registerIcon,
-  Table,
-  Label,
-  Link,
-  URLDisplay
-} from '@pega/cosmos-react-core';
-import type { PConnFieldProps } from './PConnProps';
-
-// IMPORTANT
-// To use Icons, need to individually import the icon file form @pega/cosmos-react-core (see path below)
-// Icons filename is kabab case (file-name), where as the icon you import is camel case (fileName)
-// Icons need to be registered (camel case), and then used (kabab case)
-import * as listNumber from '@pega/cosmos-react-core/lib/components/Icon/icons/list-number.icon';
-import * as arrowRight from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-right.icon';
-import * as globe from '@pega/cosmos-react-core/lib/components/Icon/icons/globe.icon';
-
-import StyledPegaDxilMyIconButtonUrlWrapper from './styles';
-
-// interface for props
-interface PegaDxilMyIconButtonUrlProps extends PConnFieldProps {
-  // If any, enter additional props that only exist on TextInput here
-}
-
-export const textFormatter = (value: string) => {
-  const displayComponent = (
-    <URLDisplay target='_blank' value={value} displayText={value} variant='link' />
-  );
-
-  return displayComponent;
-};
-
-// *************
-// This component is meant to be an example of usage (Icon, Button, Link, etc.) and NOT meant to be
-// used "as is"
-//
-// In this example, Icon is shown on its own and inside a Button
-// Though an Icon can have an "onClick" event is it recommended if you want to click on it,
-// to put it in a Button (shown below), so you can have a tooltip and hover style or put it
-// in a Link (shown below) as a URL.
-//
-// For the button, the click will get a list of countries and display in a table
-//
-// Globe icon is an icon placed in a Link element. The Link element to use an icon internally.  (NOTE: In general
-// the Link element shows the open icon to the left of the link text, but here we are using
-// another icon, so with "icon" specified in the Link element, the open icon doesn't show)
-// Link elements do not handle bad urls well, so we have a simple validator to prevent the Link element
-// from getting most bad urls.
-//
-// NOTE: because icons have to be imported and registered, you can NOT put the icon name
-// inside the config.json and let the user pick it, if it is not already part of your
-// import and registration (can't be done on the fly)
-// **************
-
-// 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 PegaDxilMyIconButtonUrl(props: PegaDxilMyIconButtonUrlProps) {
-  const { value, displayMode, getPConnect, testId } = props;
-  const [countrylist, setCountrylist] = useState([]);
-  const [showTable, setShowTable] = useState(false);
-  const [isLoading, setIsLoading] = useState(true);
-  const [validUrl, setValidUrl] = useState('about:blank');
-  const PConnect = getPConnect();
-  const dataViewName = 'CountryList';
-  const context = PConnect.getContextName();
-
-  // IMPORTANT: need to register icons used in camel case
-  registerIcon(listNumber, arrowRight, globe);
-
-
-   // setting up columns for the work list table
-  const columns = [
-    { renderer: 'countryName', label: PConnect.getLocalizedValue('Country Name', '', '') },
-    { renderer: 'shortName', label: PConnect.getLocalizedValue('Abbreviation', '', '') }
-  ];
-
-  // toggle showing table and getting table data
-  function showHideTable() {
-    setShowTable(prevShowTable => !prevShowTable);
-  }
-
-  // check if url is valid (simple)
-  function validateUrl(href: string) {
-    return /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:[/?#]\S*)?$/i.test(
-      href
-    );
-  }
-
-  // Testing to see if value entered is valid url, if not can't use it.
-  // Reason for this code is that you can NOT pass to Link component
-  // a bad url, or it will error out.
-  // For example: Since the value is the property field,
-  // it could be entered from another component and thus as it is
-  // entered (typed in), it won't be valid until it is all entered.
-  // NOTE: can't have a blank value for the url as the Link element will error out
-  // in App studio preview
-  useEffect(() => {
-    if (validateUrl(value)) {
-      setValidUrl(value);
-    } else {
-      setValidUrl('about:blank');
-    }
-  }, [value]);
-
-  // going to get data for worklist to put into a table
-  // data comes from calling a PCore function to get
-  // get data from a data page and a PConnect function
-  // to get getContextName
-  useEffect(() => {
-    const params = { };
-
-    // only retrieve table data if table is shown
-    if (showTable) {
-      PCore.getDataPageUtils()
-        // @ts-ignore
-        .getDataAsync(dataViewName, context, params, null, null)
-        // @ts-ignore
-        .then((response: any) => {
-          setIsLoading(false);
-          // table requires an index or will get setExtraStackFrame error
-          if (response.data !== null) {
-            setCountrylist(
-              response.data.map((entry: any, index: number) => {
-                // mapping the data into the column names
-                // MUST have an id/index or will get a setExtraStackFrame error
-                // put a key in the table
-                return {
-                  countryName: entry.Name,
-                  shortName: entry.ShortName,
-                  id: index
-                };
-              })
-            );
-          }
-          else {
-            setCountrylist([]);
-            setIsLoading(false);
-          }
-
-        })
-        .catch((error: any) => {
-          setCountrylist([]);
-          setIsLoading(false);
-          console.log(error);
-        });
-    }
-  }, [context, showTable]);
-
-  // when DISPLAY_ONLY, in this example we will just show the URL.
-  if (displayMode === 'DISPLAY_ONLY') {
-    const displayComp = textFormatter(validUrl);
-    return (
-      <StyledPegaDxilMyIconButtonUrlWrapper> {displayComp} </StyledPegaDxilMyIconButtonUrlWrapper>
-    );
-  }
-
-  return (
-    <StyledPegaDxilMyIconButtonUrlWrapper>
-    <div style={{ display: 'flex' }} data-testid={testId}>
-      <Icon
-        style={{ height: '1.5rem', width: '1.5rem' }}
-        // icon name is kabab case
-        name='arrow-right'
-        role='img'
-        aria-label='arrow right'
-      />
-      <Label style={{ margin: '0.1rem' }}>
-        {' '}
-        {PConnect.getLocalizedValue('List of countries', '', '')}{' '}
-      </Label>
-      <Button
-        icon
-        label={PConnect.getLocalizedValue('Click to show/hide country list', '', '')}
-        variant='link'
-        compact={false}
-        onClick={showHideTable}
-      >
-        <Icon
-          style={{ height: '1.5rem', width: '1.5rem' }}
-          // icon name is kabab case
-          name='list-number'
-          role='img'
-          aria-label='numbered list'
-        />
-      </Button>
-      <Link href={validUrl} variant='link' label={validUrl} icon>
-        <Icon
-          style={{ height: '1.5rem', width: '1.5rem' }}
-          // icon name is kabab case
-          name='globe'
-          role='img'
-          aria-label='open link'
-        />
-      </Link>
-    </div>
-      {showTable && (
-        <Table
-          title={PConnect.getLocalizedValue('State list', '', '')}
-          columns={columns}
-          data={countrylist}
-          loading={isLoading}
-          loadingMessage={PConnect.getLocalizedValue('Loading country list', '', '')}
-        />
-      )}
-    </StyledPegaDxilMyIconButtonUrlWrapper>
-  );
-}
-
-
-export default withConfiguration(PegaDxilMyIconButtonUrl);

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyIconButtonURL/mock.ts

@@ -1,5 +0,0 @@
-
-// @ts-nocheck
-export const configProps = {
-
-};

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyInteger/demo.stories.tsx

@@ -1,64 +0,0 @@
-/* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { stateProps, configProps, fieldMetadata } from './mock';
-
-import PegaDxilMyInteger from './index';
-
-const meta: Meta<typeof PegaDxilMyInteger> = {
-  title: 'PegaDxilMyInteger',
-  component: PegaDxilMyInteger,
-  excludeStories: /.*Data$/
-};
-
-export default meta;
-type Story = StoryObj<typeof PegaDxilMyInteger>;
-
-export const BasePegaDxilMyInteger: Story = args => {
-
-  const props = {
-    value: configProps.value,
-    hasSuggestions: configProps.hasSuggestions,
-    fieldMetadata,
-    getPConnect: () => {
-      return {
-        getStateProps: () => {
-          return stateProps;
-        },
-        getActionsApi: () => {
-          return {
-            updateFieldValue: () => {/* nothing */},
-            triggerFieldChange: () => {/* nothing */}
-          };
-        },
-        ignoreSuggestion: () => {/* nothing */},
-        acceptSuggestion: () => {/* nothing */},
-        setInheritedProps: () => {/* nothing */},
-        resolveConfigProps: () => {/* nothing */}
-      };
-    }
-  };
-
-  return (
-    <>
-      <PegaDxilMyInteger {...props} {...args} />
-    </>
-  );
-};
-
-BasePegaDxilMyInteger.args = {
-  label: configProps.label,
-  helperText: configProps.helperText,
-  placeholder: configProps.placeholder,
-  showGroupSeparators: configProps.showGroupSeparators,
-  testId: configProps.testId,
-  readOnly: configProps.readOnly,
-  disabled: configProps.disabled,
-  required: configProps.required,
-  status: configProps.status,
-  hideLabel: configProps.hideLabel,
-  displayMode: configProps.displayMode,
-  variant: configProps.variant,
-  validatemessage: configProps.validatemessage
-};