@pega/custom-dx-components 2.0.4 → 2.0.6

package/README.md

@@ -8,13 +8,13 @@ This project provides you with an environment to extend Constellation by giving
 
 Ensure you have access to the following in your system:
 
-- Pega Infinity Server version 8.7 and above
+- Pega Infinity Server version 8.7 or later
 
-- Git version 2.30 and above
+- Git version 2.30 or later
 
-- System node version latest 14
+- System node version 16
 
-- System npm version latest 6
+- System npm version 7
 
 ## Initialize a project
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/custom-dx-components",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {
@@ -13,44 +13,44 @@
   "type": "module",
   "sideEffects": false,
   "dependencies": {
-    "@babel/core": "^7.17.10",
-    "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/preset-env": "^7.17.10",
-    "@babel/preset-react": "^7.16.7",
+    "@babel/core": "^7.19.1",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/preset-env": "^7.19.1",
+    "@babel/preset-react": "^7.18.6",
     "adm-zip": "^0.5.9",
     "ajv": "^8.11.0",
-    "arg": "^5.0.1",
+    "arg": "^5.0.2",
     "babel-loader": "^8.2.5",
     "chalk": "^5.0.1",
-    "compression-webpack-plugin": "^9.2.0",
+    "compression-webpack-plugin": "^10.0.0",
     "css-loader": "6.7.1",
-    "css-minimizer-webpack-plugin": "^3.4.1",
+    "css-minimizer-webpack-plugin": "^4.1.0",
     "execa": "^6.1.0",
     "file-loader": "6.2.0",
     "fs-extra": "^10.1.0",
     "gitignore": "^0.7.0",
-    "inquirer": "^8.2.4",
+    "inquirer": "^9.1.1",
     "listr": "^0.14.3",
-    "mini-css-extract-plugin": "2.6.0",
+    "mini-css-extract-plugin": "2.6.1",
     "mustache": "^4.2.0",
     "ncp": "^2.0.0",
-    "node-fetch": "^3.2.4",
-    "ora": "^6.1.0",
+    "node-fetch": "^3.2.10",
+    "ora": "^6.1.2",
     "pascalcase": "^2.0.0",
-    "postcss": "^8.4.13",
-    "postcss-loader": "6.2.1",
-    "postcss-preset-env": "7.5.0",
+    "postcss": "^8.4.16",
+    "postcss-loader": "7.0.1",
+    "postcss-preset-env": "7.8.2",
     "prop-types": "^15.8.1",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-dev-utils": "^12.0.1",
-    "resolve": "1.22.0",
+    "resolve": "1.22.1",
     "resolve-url-loader": "^5.0.0",
-    "sass-loader": "^12.6.0",
-    "terser-webpack-plugin": "5.3.1",
-    "ts-loader": "^9.3.0",
-    "typescript": "^4.6.4",
+    "sass-loader": "^13.0.2",
+    "terser-webpack-plugin": "5.3.6",
+    "ts-loader": "^9.3.1",
+    "typescript": "^4.8.3",
     "url-loader": "4.1.1",
-    "webpack": "5.72.1"
+    "webpack": "5.74.0"
   },
   "author": "Custom component dev",
   "license": "SEE LICENSE IN LICENSE",
@@ -60,8 +60,8 @@
   ],
   "devDependencies": {
     "@pega/configs": "^0.3.3",
-    "cspell": "^5.20.0",
-    "eslint": "^8.15.0",
-    "prettier": "2.6.2"
+    "cspell": "^6.9.0",
+    "eslint": "^8.23.1",
+    "prettier": "2.7.1"
   }
-}
+}

package/src/constants.js

@@ -25,6 +25,10 @@ export const COMPONENT_SCHEMA = {
     {
       name: 'Widget',
       value: 'Widget'
+    },
+    {
+      name: 'Table',
+      value: 'Table'
     }
   ],
   subtype: {

package/src/tasks/authenticate/index.js

@@ -30,7 +30,13 @@ const generateAccessToken = async config => {
     headers: { 'content-type': 'application/x-www-form-urlencoded' },
     body: formData.toString()
   })
-    .then(response => response.json())
+    .then(response => {
+      if (response.ok && response.status === 200) {
+        return response.json();
+      } else {
+        throw new Error(`Failed with status: ${response.status}`);
+      }
+    })
     .then(data => {
       if (data && data.errors) {
         const errMessages = data.errors;

package/src/tasks/create/index.js

@@ -269,6 +269,23 @@ export default async options => {
           return 'Please select subtype';
         }
       },
+      {
+        name: 'subtype',
+        type: 'rawlist',
+        message: 'Enter subtype of component',
+        default: [componentDefaults.subtype || COMPONENT_SCHEMA.subtype.table[0]],
+        choices: COMPONENT_SCHEMA.subtype.table,
+        when(answers) {
+          return answers.type === 'Table';
+        },
+        validate: value => {
+          /* value should not be empty */
+          if (Array.isArray(value) && value.length) {
+            return true;
+          }
+          return 'Please select subtype';
+        }
+      },
       {
         name: 'description',
         message: 'Enter description for the component',

package/src/tasks/init/template/README.md

@@ -8,13 +8,13 @@ This project provides you with an environment to extend Constellation by giving
 
 Ensure you have access to the following in your system:
 
-- Pega Infinity Server version 8.7 and above
+- Pega Infinity Server version 8.7 or later
 
-- Git version 2.30 and above
+- Git version 2.30 or later
 
-- System node version latest 14
+- System node version 16
 
-- System npm version latest 6
+- System npm version 7
 
 ## Initialize a project
 

package/src/tasks/init/template/package.json.mustache

@@ -35,35 +35,35 @@
   "license": "Enter License",
   "sideEffects": false,
   "dependencies": {
-    "@pega/cosmos-react-core": "^3.0.0-dev.16.0",
+    "@pega/cosmos-react-core": "^3.0.0-rc.4",
+    "@storybook/addon-knobs": "^6.3.1",
     "polished": "^4.2.2",
+    "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-autosuggest": "^10.1.0",
     "react-dom": "^17.0.2",
-    "react-player": "^2.9.0",
-    "styled-components": "^5.3.5",
-    "prop-types": "^15.8.1",
-    "@storybook/addon-knobs": "^6.3.1"
+    "react-player": "^2.10.1",
+    "styled-components": "^5.3.5"
   },
   "devDependencies": {
     "@pega/configs": "^0.3.3",
-    "@pega/custom-dx-components": "^2.0.4",
-    "@storybook/addon-actions": "^6.4.22",
-    "@storybook/addon-essentials": "^6.4.22",
-    "@storybook/addon-links": "^6.4.22",
-    "@storybook/addon-storysource": "^6.4.22",
-    "@storybook/builder-webpack5": "^6.4.22",
-    "@storybook/manager-webpack5": "^6.4.22",
-    "@storybook/react": "^6.4.22",
+    "@pega/custom-dx-components": "^2.0.6",
+    "@storybook/addon-actions": "^6.5.12",
+    "@storybook/addon-essentials": "^6.5.12",
+    "@storybook/addon-links": "^6.5.12",
+    "@storybook/addon-storysource": "^6.5.12",
+    "@storybook/builder-webpack5": "^6.5.12",
+    "@storybook/manager-webpack5": "^6.5.12",
+    "@storybook/react": "^6.5.12",
     "@types/emoji-mart": "^3.0.9",
     "@types/react": "^17.0.39",
     "@types/react-color": "^3.0.6",
     "@types/react-dom": "^17.0.11",
-    "@types/styled-components": "^5.1.25",
-    "eslint": "^8.15.0",
+    "@types/styled-components": "^5.1.26",
+    "eslint": "^8.23.1",
     "npm-run-all": "^4.1.5",
-    "prettier": "2.6.2",
-    "stylelint": "^14.8.2",
-    "typescript": "~4.6.4"
+    "prettier": "2.7.1",
+    "stylelint": "^14.11.0",
+    "typescript": "~4.8.3"
   }
 }

package/src/tasks/init/template/src/components/MBTAList/MBTAList.stories.tsx

@@ -1,10 +0,0 @@
-import MBTAListComp from './MBTAList';
-
-export default {
-  title: 'MBTAList',
-  component: MBTAListComp
-};
-
-export const MBTAList = () => {
-  return <MBTAListComp />;
-};

package/src/tasks/init/template/src/components/MBTAList/MBTAList.tsx

@@ -1,122 +0,0 @@
-import { useEffect, useState, useContext } from 'react';
-import {
-  Flex,
-  SummaryList,
-  SummaryListItem,
-  ViewAll,
-  ModalManagerContext,
-  Modal,
-  registerIcon,
-  Icon,
-  MetaList,
-  MetaListProps
-} from '@pega/cosmos-react-core';
-
-import * as accessibleIcon from './icons/accessible.icon';
-import * as busIcon from './icons/bus.icon';
-import * as mbtaIcon from './icons/mbta.icon';
-import * as subwayIcon from './icons/subway.icon';
-
-registerIcon(accessibleIcon, busIcon, mbtaIcon, subwayIcon);
-
-export interface MBTAListProps {}
-
-const params = new URLSearchParams([
-  ['page[offset]', '0'],
-  ['page[limit]', '1000'],
-  ['filter[latitude]', '42.362339984866466'],
-  ['filter[longitude]', '-71.07999650212442'],
-  ['filter[radius]', '0.01'],
-  ['filter[route_type]', '1,3']
-]);
-
-const MBTAList = (props: MBTAListProps) => {
-  const [items, setItems] = useState<SummaryListItem[]>();
-  const [error, setError] = useState<string>();
-  const { create } = useContext(ModalManagerContext);
-
-  useEffect(() => {
-    const controller = new AbortController();
-
-    fetch(`https://api-v3.mbta.com/stops?${params}`, { signal: controller.signal })
-      .then(async res => {
-        if (!res.ok) throw new Error(`Responded with "${res.status}"`);
-
-        const { data } = await res.json();
-        if (controller.signal.aborted) return;
-
-        setItems(
-          // TODO: Type the api response: https://api-v3.mbta.com/docs/swagger/index.html#/Stop/ApiWeb_StopController_index
-          data.map(({ id, attributes }: any) => {
-            const meta: MetaListProps['items'] = [];
-
-            if (attributes.wheelchair_boarding) {
-              meta.push(
-                <>
-                  <Icon name='accessible' style={{ width: '1em', height: '1em' }} />
-                  &nbsp;Wheelchair boarding
-                </>
-              );
-            }
-
-            if (attributes.vehicle_type === 1) {
-              meta.push(attributes.platform_name);
-              return {
-                id,
-                visual: <Icon name='subway' />,
-                primary: attributes.name,
-                secondary: <MetaList items={meta} />
-              };
-            }
-
-            meta.push(attributes.name);
-            return {
-              id,
-              visual: <Icon name='bus' />,
-              primary: attributes.on_street,
-              secondary: <MetaList items={meta} />
-            };
-          })
-        );
-      })
-      .catch((err: unknown) => {
-        if (controller.signal.aborted) return;
-
-        if (err instanceof Error) {
-          setError(err.message);
-        } else {
-          setError('An error occurred.');
-        }
-      });
-
-    return () => {
-      controller.abort();
-    };
-  }, []);
-
-  return (
-    <SummaryList
-      {...props}
-      icon='mbta'
-      name='Stops near Pega'
-      count={items?.length}
-      items={items?.slice(0, 3) ?? []}
-      loading={!items && !error}
-      error={error ? { message: error } : undefined}
-      onViewAll={() => {
-        create(Modal, {
-          heading: (
-            <Flex container={{ gap: 1, alignItems: 'center' }}>
-              <Icon name='mbta' />
-              Stops near Pega
-            </Flex>
-          ),
-          count: items?.length,
-          children: <ViewAll items={items ?? []} />
-        });
-      }}
-    />
-  );
-};
-
-export default MBTAList;

package/src/tasks/init/template/src/components/MBTAList/icons/accessible.icon.tsx

@@ -1,14 +0,0 @@
-// FontAwesome "accessible" icon
-// https://fontawesome.com/license
-// Converted from SVG to Cosmos Icon format
-
-export const name = 'accessible';
-
-export const Component = () => (
-  <path
-    fill='currentColor'
-    d='M423.9 255.8L411 413.1c-3.3 40.7-63.9 35.1-60.6-4.9l10-122.5-41.1 2.3c10.1 20.7 15.8 43.9 15.8 68.5 0 41.2-16.1 78.7-42.3 106.5l-39.3-39.3c57.9-63.7 13.1-167.2-74-167.2-25.9 0-49.5 9.9-67.2 26L73 243.2c22-20.7 50.1-35.1 81.4-40.2l75.3-85.7-42.6-24.8-51.6 46c-30 26.8-70.6-18.5-40.5-45.4l68-60.7c9.8-8.8 24.1-10.2 35.5-3.6 0 0 139.3 80.9 139.5 81.1 16.2 10.1 20.7 36 6.1 52.6L285.7 229l106.1-5.9c18.5-1.1 33.6 14.4 32.1 32.7zm-64.9-154c28.1 0 50.9-22.8 50.9-50.9C409.9 22.8 387.1 0 359 0c-28.1 0-50.9 22.8-50.9 50.9 0 28.1 22.8 50.9 50.9 50.9zM179.6 456.5c-80.6 0-127.4-90.6-82.7-156.1l-39.7-39.7C36.4 287 24 320.3 24 356.4c0 130.7 150.7 201.4 251.4 122.5l-39.7-39.7c-16 10.9-35.3 17.3-56.1 17.3z'
-  />
-);
-
-export const viewBox = '0 0 448 512';

package/src/tasks/init/template/src/components/MBTAList/icons/bus.icon.tsx

@@ -1,13 +0,0 @@
-export const name = 'bus';
-
-export const Component = () => (
-  <>
-    <path d='m12.06 24c6.72-.17 12.11-5.64 11.94-12.06a12 12 0 1 0 -11.94 12.06' fill='#ffc72c' />
-    <path
-      d='m18.78 10.67-.66-5.17c-.16-.93-.75-1.3-1.63-1.68a14.25 14.25 0 0 0 -4.49-.82 14.32 14.32 0 0 0 -4.5.82c-.86.37-1.45.75-1.63 1.68l-.66 5.17v7.15h1.17v1.25a1 1 0 0 0 1.91 0v-1.25h7.45v1.25a.91.91 0 0 0 .48.8 1 1 0 0 0 1 0 .88.88 0 0 0 .47-.8v-1.25h1.13zm-9.57-6.36h5.61a.42.42 0 0 1 .43.41.42.42 0 0 1 -.43.42h-5.61a.43.43 0 0 1 -.43-.42.42.42 0 0 1 .43-.41zm-2.79 6.21.58-4.09a.54.54 0 0 1 .51-.43h9.06a.56.56 0 0 1 .54.44l.54 4.09a.33.33 0 0 1 0 .14.49.49 0 0 1 -.16.37.54.54 0 0 1 -.38.15h-10.17a.56.56 0 0 1 -.38-.19.57.57 0 0 1 -.14-.38.33.33 0 0 1 0-.1zm.92 5.09a1 1 0 1 1 1-1 1 1 0 0 1 -.3.7 1 1 0 0 1 -.7.3zm9.36 0a1 1 0 1 1 1-1 1 1 0 0 1 -.3.7 1.06 1.06 0 0 1 -.72.29z'
-      fill='#1c1e23'
-    />
-  </>
-);
-
-export const viewBox = '0 0 24 24';

package/src/tasks/init/template/src/components/MBTAList/icons/mbta.icon.tsx

@@ -1,10 +0,0 @@
-export const name = 'mbta';
-
-export const Component = () => (
-  <>
-    <circle cx='250' cy='250' r='239' stroke='#000' strokeWidth='22' fill='#fff' />
-    <path d='M92,138.5h316v79.5h-118.25v194h-79.5v-194h-118.25z' />
-  </>
-);
-
-export const viewBox = '0 0 500 500';

package/src/tasks/init/template/src/components/MBTAList/icons/subway.icon.tsx

@@ -1,14 +0,0 @@
-export const name = 'subway';
-
-export const Component = () => (
-  <>
-    <path d='m24 0a24 24 0 1 0 24 24 24 24 0 0 0 -24-24' fill='#494f5b' />
-    <g fill='#fff'>
-      <path d='m25.8889 5.8222a1.4111 1.4111 0 1 0 -1.4111-1.4111 1.411 1.411 0 0 0 1.4111 1.4111z' />
-      <path d='m31.4555 34.2111a4.9779 4.9779 0 0 0 3.889-4.8222v-18.1445a5.0112 5.0112 0 0 0 -5.0778-4.9111h-12.5333a5.0112 5.0112 0 0 0 -5.1 4.9v18.1556a4.9779 4.9779 0 0 0 3.8889 4.8222l-5.8556 8.7889h3.4l4.1889-6.1445h11.5555l4.1889 6.1445h3.3333zm-10.7555-25.9889a.8445.8445 0 0 1 .8445-.8111h4.9555a.8444.8444 0 0 1 .8333.8111v1.4445l-.0006.0339a.8334.8334 0 0 1 -.866.7994l-4.9222-.0111a.8333.8333 0 0 1 -.8445-.8222zm-3.1111 23.3334a2.2223 2.2223 0 1 1 2.2222-2.2223 2.2223 2.2223 0 0 1 -2.2222 2.2223zm.2889-11.8112c-.0758.0036-.1518.0036-.2276 0a2.4221 2.4221 0 0 1 -2.3057-2.5333v-3.2667a2.4109 2.4109 0 0 1 2.5333-2.5444h12.2222a2.4113 2.4113 0 0 1 2.5333 2.5444v3.2667q.0054.1137 0 .2276a2.4221 2.4221 0 0 1 -2.5333 2.3057zm12.4333 11.8112a2.2334 2.2334 0 1 1 .0223 0z' />
-      <path d='m22.1445 5.8222h-.0334.0337a1.4113 1.4113 0 1 0 -1.4115-1.4115 1.4111 1.4111 0 0 0 1.4115 1.4119z' />
-    </g>
-  </>
-);
-
-export const viewBox = '0 0 48 48';

package/src/tasks/init/template/src/components/MBTAList/index.ts

@@ -1,2 +0,0 @@
-export { default } from './MBTAList';
-export type { MBTAListProps } from './MBTAList';