npm - @pega/custom-dx-components - Versions diffs - 0.0.1 → 0.23.1 - Mend

@@ -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;

@@ -1,44 +0,0 @@
-import { useState } from 'react';
-import { withKnobs, text, boolean } from '@storybook/addon-knobs';
-import {{COMPONENT_CLASS_NAME}} from './index.jsx';
-export default {
-  title: '{{COMPONENT_CLASS_NAME}}',
-  decorators: [withKnobs],
-  component: {{COMPONENT_CLASS_NAME}}
-};
-export const base{{COMPONENT_CLASS_NAME}} = () => {
-  const [value, setValue] = useState('test value');
-  const props = {
-    getPConnect: () => {
-      return {
-        getActionsApi: () => {
-          return {
-            updateFieldValue: (propName, value) => {
-              setValue(value);
-            }
-          };
-        },
-        getStateProps: () => {
-          return { value: '.name' };
-        }
-      };
-    },
-    value,
-    placeholder: text('Placeholder', 'Test placeholder'),
-    disabled: boolean('Disabled', false),
-    readOnly: boolean('Disabled', false),
-    required: boolean('Disabled', false),
-    label: text('Label', 'Sample Label'),
-    testId: text('Test id', 'text-12344566')
-  };
-  return (
-    <>
-      <{{COMPONENT_CLASS_NAME}} {...props} />
-    </>
-  );
-};

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

@@ -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';

@@ -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';

@@ -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';

@@ -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';

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

@pega/custom-dx-components 0.0.1 → 0.23.1