@pega/custom-dx-components 0.0.1 → 0.8.1

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

package/src/tasks/init/template/src/components/Organization_Library_MediaURL/MediaURL.stories.tsx

@@ -1,19 +0,0 @@
-import type { Meta, Story } from '@storybook/react';
-
-import MediaURLInput from './MediaURLInput';
-import MediaURLDisplay from './MediaURLDisplay';
-
-export default {
-  title: 'MediaURL',
-  parameters: {
-    layout: 'centered'
-  }
-} as Meta;
-
-export const InputMode: Story = () => {
-  return <MediaURLInput label='Media src url' />;
-};
-
-export const DisplayMode: Story = () => {
-  return <MediaURLDisplay value='https://youtu.be/BxogmCLpy0w' />;
-};

package/src/tasks/init/template/src/components/Organization_Library_MediaURL/MediaURL.styles.ts

@@ -1,5 +0,0 @@
-import styled, { css } from 'styled-components';
-
-export default styled.div(() => {
-  return css``;
-});

package/src/tasks/init/template/src/components/Organization_Library_MediaURL/MediaURL.types.ts

@@ -1,10 +0,0 @@
-import type { FormControlProps, OmitStrict, URLDisplayProps } from '@pega/cosmos-react-core';
-
-export interface MediaURLInputProps extends OmitStrict<FormControlProps, 'defaultValue'> {
-  testId?: string;
-}
-
-export interface MediaURLDisplayProps extends OmitStrict<URLDisplayProps, 'variant' | 'ref'> {
-  variant?: 'player' | URLDisplayProps['variant'];
-  testId?: string;
-}

package/src/tasks/init/template/src/components/Organization_Library_MediaURL/MediaURLDisplay.tsx

@@ -1,25 +0,0 @@
-import type { FunctionComponent } from 'react';
-import { URLDisplay } from '@pega/cosmos-react-core';
-import ReactPlayer from 'react-player';
-
-import StyledMediaURLDisplay from './MediaURL.styles';
-import type { MediaURLDisplayProps } from './MediaURL.types';
-
-const MediaURLDisplay: FunctionComponent<MediaURLDisplayProps> = ({
-  value,
-  variant = 'player',
-  testId,
-  ...restProps
-}) => {
-  if ((!value && variant !== 'player') || variant !== 'player') {
-    return <URLDisplay value={value} variant={variant} {...restProps} />;
-  }
-
-  return (
-    <StyledMediaURLDisplay data-testid={testId}>
-      <ReactPlayer url={value} />
-    </StyledMediaURLDisplay>
-  );
-};
-
-export default MediaURLDisplay;

package/src/tasks/init/template/src/components/Organization_Library_MediaURL/MediaURLInput.tsx

@@ -1,24 +0,0 @@
-import { ChangeEvent, FunctionComponent, useState } from 'react';
-import { Input } from '@pega/cosmos-react-core';
-
-import type { MediaURLInputProps } from './MediaURL.types';
-
-const MediaURLInput: FunctionComponent<MediaURLInputProps> = ({
-  value,
-  ...restProps
-}: MediaURLInputProps) => {
-  const [url, setURL] = useState(value);
-
-  return (
-    <Input
-      {...restProps}
-      type='url'
-      value={url}
-      onChange={(e: ChangeEvent<HTMLInputElement>) => {
-        setURL(e.target.value);
-      }}
-    />
-  );
-};
-
-export default MediaURLInput;

package/src/tasks/init/template/src/components/Organization_Library_MediaURL/config.json

@@ -1,13 +0,0 @@
-{
-  "name": "Organization_Library_MediaURL",
-  "label": "MediaURL",
-  "description": "A pair of components for taking input and displaying teh value of a video or audio url.",
-  "organization": "TBD",
-  "version": "0.0.1",
-  "library": "TBD",
-  "componentKey": "Organization_Library_MediaURL",
-  "type": "Field",
-  "subtype": "Text",
-  "icon": "TBD",
-  "properties": ["TBD"]
-}

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

@@ -1,2 +0,0 @@
-export { default as MediaURLInput } from './MediaURLInput';
-export { default as MediaURLDisplay } from './MediaURLDisplay';

package/src/tasks/init/template/src/components/Organization_Library_VideoPlayer/demo.stories.jsx

@@ -1,40 +0,0 @@
-import React, { useState } from 'react';
-import { withKnobs, text, boolean } from '@storybook/addon-knobs';
-
-import VideoPlayer from './index';
-
-export default {
-  title: 'VideoPlayer',
-  decorators: [withKnobs],
-  component: VideoPlayer
-};
-
-export const baseVideoPlayer = () => {
-  const [value, setValue] = useState('test value');
-
-  const props = {
-    getPConnect: () => {
-      return {
-        getActionsApi: () => {
-          return {
-            updateFieldValue: (propName, value) => {
-              setValue(value);
-            }
-          };
-        },
-        getStateProps: () => {
-          return { value: '.name' };
-        }
-      };
-    },
-    value: text('src', 'https://www.youtube.com/watch?v=EtG5IuNGYSk'),
-    placeholder: text('Placeholder', 'Test placeholder'),
-    disabled: boolean('Disabled', false),
-    readOnly: boolean('Disabled', false),
-    required: boolean('Disabled', false),
-    label: text('Label', 'Video player label'),
-    testId: text('Test id', 'video-12344566')
-  };
-
-  return <VideoPlayer {...props} />;
-};

package/src/tasks/init/template/src/components/Organization_Library_VideoPlayer/index.jsx

@@ -1,42 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Label } from '@pega/cosmos-react-core';
-import ReactPlayer from 'react-player';
-
-import StyledVideoPlayerWrapper from './styles';
-
-const VideoPlayer = props => {
-  const { getPConnect, value, placeholder, disabled, readOnly, required, label } = props;
-
-  const pConn = getPConnect();
-  const actions = pConn.getActionsApi();
-  const propName = pConn?.getStateProps()?.value;
-
-  return (
-    <StyledVideoPlayerWrapper>
-      <Label>{label}</Label>
-      <ReactPlayer url={value} />
-    </StyledVideoPlayerWrapper>
-  );
-};
-
-VideoPlayer.defaultProps = {
-  value: '',
-  placeholder: '',
-  disabled: false,
-  readOnly: false,
-  required: false,
-  testId: null
-};
-VideoPlayer.propTypes = {
-  label: PropTypes.string,
-  value: PropTypes.string.isRequired,
-  placeholder: PropTypes.string,
-  getPConnect: PropTypes.func.isRequired,
-  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  readOnly: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  required: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  testId: PropTypes.string
-};
-
-export default VideoPlayer;

package/src/tasks/init/template/src/components/Organization_Library_VideoPlayer/styles.js

@@ -1,5 +0,0 @@
-import styled, { css } from 'styled-components';
-
-export default styled.div(() => {
-  return css``;
-});