@availity/mui-spaces 0.2.6 → 0.3.0

package/src/lib/SpacesLink/SpacesLink.tsx

@@ -0,0 +1,239 @@
+import dayjs from 'dayjs';
+import { Card, CardContent, CardHeader } from '@availity/mui-card';
+import { Typography } from '@availity/mui-typography';
+import { NavigateTopIcon, FileIcon } from '@availity/mui-icon';
+import { useMemo, cloneElement } from 'react';
+import { StatusChip, Chip } from '@availity/mui-chip';
+import { CircularProgress } from '@availity/mui-progress';
+import { Link } from '@availity/mui-link';
+import { FavoriteHeart } from '@availity/mui-favorites';
+import { Grid, Box } from '@availity/mui-layout';
+import { ListItem, ListItemText } from '@availity/mui-list';
+import ReactMarkdown from 'react-markdown';
+import { useSpacesContext } from '../Spaces';
+import { useLink } from './useLink';
+import type { SpacesLinkWithSpace, SpacesLinkWithSpaceId, SpacesLinkVariants } from './spaces-link-types';
+import { isFunction } from '../helpers';
+
+const getDisplayDate = (date: string | null | undefined) => dayjs(date).format('MM/DD/YYYY');
+
+const getContainerTag = (propTag: string | undefined, variant: SpacesLinkVariants) => {
+  if (variant && variant !== 'default') return { card: Card, list: ListItem }[variant];
+  return propTag || 'div';
+};
+
+const getBodyTag = (propTag: string | undefined, variant: SpacesLinkVariants) => {
+  if (variant && variant !== 'default') return { card: CardContent, list: 'div' }[variant];
+  return propTag || 'div';
+};
+
+const getTitleTag = (propTag: string | undefined, variant: SpacesLinkVariants) => {
+  if (variant && variant !== 'default') return { card: CardHeader, list: Typography }[variant];
+  return propTag || 'div';
+};
+
+const getTextTag = (propTag: string | undefined, variant: SpacesLinkVariants) => {
+  if (variant && variant !== 'default') return { card: Typography, list: ListItemText }[variant];
+  return propTag || 'div';
+};
+
+export const SpacesLink = ({
+  spaceId,
+  space: propSpace,
+  className,
+  children,
+  favorite,
+  icon,
+  showName = true,
+  showNew,
+  showDate,
+  stacked,
+  body = true,
+  description: showDescription,
+  tag,
+  bodyTag,
+  titleTag,
+  textTag,
+  titleClassName,
+  variant = 'default',
+  loading: propsLoading,
+  clientId: propsClientId,
+  maxDescriptionWidth,
+  style,
+  linkAttributes,
+  role,
+  analytics,
+  customBadgeText,
+  customBadgeColor,
+  idPrefix = '',
+  ...rest
+}: SpacesLinkWithSpace | SpacesLinkWithSpaceId) => {
+  const { loading } = useSpacesContext();
+  const isLoading = loading || propsLoading;
+
+  const [linkSpace, props] = useLink(propSpace || spaceId, { clientId: propsClientId, linkAttributes });
+
+  const showUrl = !linkSpace?.isGhosted && linkSpace?.link?.url;
+
+  const favoriteIcon = useMemo(
+    () =>
+      linkSpace?.configurationId &&
+      favorite && (
+        <FavoriteHeart
+          id={`${idPrefix}${linkSpace?.configurationId}`}
+          name={linkSpace?.name}
+          onChange={(_, e) => e.stopPropagation()}
+        />
+      ),
+    [favorite, linkSpace?.configurationId, linkSpace?.name, idPrefix]
+  );
+
+  const dateInfo = useMemo(
+    () =>
+      (showNew || showDate) && (
+        <Grid textAlign={stacked ? 'center' : 'inherit'}>
+          {showNew && linkSpace?.isNew && (
+            <Chip id={`${idPrefix}app-new-badge-${linkSpace?.configurationId}`} label="New!" />
+          )}
+          {showDate && (
+            <Typography
+              id={`${idPrefix}app-date-badge-${linkSpace?.configurationId}`}
+              variant="caption"
+              color="textSecondary"
+            >
+              {getDisplayDate(linkSpace?.activeDate)}
+            </Typography>
+          )}
+        </Grid>
+      ),
+    [linkSpace?.activeDate, linkSpace?.isNew, showDate, showNew, stacked, linkSpace?.configurationId, idPrefix]
+  );
+
+  const customBadgeDisplay = useMemo(
+    () =>
+      customBadgeText && (
+        <Box
+          textAlign={stacked ? 'center' : 'inherit'}
+          marginRight={variant !== 'card' && (showDate || (showNew && linkSpace?.isNew)) ? 2 : undefined}
+        >
+          <StatusChip
+            color={customBadgeColor || 'info'}
+            id={`${idPrefix}app-custom-badge-${linkSpace?.configurationId}-${customBadgeText}`}
+            label={customBadgeText}
+          />
+        </Box>
+      ),
+    [
+      customBadgeColor,
+      customBadgeText,
+      showDate,
+      showNew,
+      stacked,
+      variant,
+      linkSpace?.isNew,
+      idPrefix,
+      linkSpace?.configurationId,
+    ]
+  );
+
+  if (isLoading) {
+    return <CircularProgress id={`${idPrefix}app-${linkSpace?.configurationId}-loading`} {...rest} />;
+  }
+
+  const Tag = getContainerTag(tag, variant);
+  const BodyTag = getBodyTag(bodyTag, variant);
+  const TitleTag = getTitleTag(titleTag, variant);
+  const TextTag = getTextTag(textTag, variant);
+
+  const renderChildren = () => {
+    if (children) {
+      return isFunction(children)
+        ? (() =>
+            children({
+              ...linkSpace,
+              ...analytics,
+              ...props,
+            }))()
+        : cloneElement(children, {
+            role: 'link',
+            tabIndex: 0,
+            style: { cursor: showUrl ? 'pointer' : 'not-allowed' },
+            'aria-label': linkSpace?.name,
+            ...analytics,
+            ...props,
+          });
+    }
+  };
+  return (
+    <Tag
+      title={linkSpace?.name}
+      className={className}
+      {...rest}
+      style={{ ...style }}
+      role={variant === 'list' ? 'listitem' : role}
+    >
+      <BodyTag>
+        <Grid alignItems={!showDescription || stacked ? 'center' : 'start'} direction={stacked ? 'column' : 'row'}>
+          {!stacked && favoriteIcon}
+          {icon && linkSpace?.url && linkSpace?.type?.toUpperCase() === 'FILE' ? (
+            <Link target="_blank" href={linkSpace?.url}>
+              <FileIcon data-testid="icon" />
+            </Link>
+          ) : (
+            <NavigateTopIcon data-testid="icon" />
+          )}
+          {children
+            ? renderChildren()
+            : body && (
+                <Grid id={`${idPrefix}${linkSpace?.type}-${linkSpace?.configurationId}`}>
+                  <Box
+                    marginBottom={!customBadgeDisplay && (!showDescription || !linkSpace?.description) ? 0 : undefined}
+                    paddingTop={stacked ? 3 : undefined}
+                    textAlign={stacked ? 'center' : undefined}
+                  >
+                    <TitleTag
+                      id={`${idPrefix}app-title-${linkSpace?.configurationId}`}
+                      className={titleClassName}
+                      tabIndex={0}
+                      style={{
+                        cursor: showUrl ? 'pointer' : 'not-allowed',
+                      }}
+                      {...analytics}
+                      {...props}
+                      role={showUrl ? 'link' : role}
+                      aria-label={linkSpace?.name}
+                      aria-describedby={
+                        showNew && linkSpace?.isNew
+                          ? `${idPrefix}app-new-badge-${linkSpace?.configurationId}`
+                          : undefined
+                      }
+                      variant={variant === 'list' ? 'h5' : 'h6'}
+                      title={showName ? linkSpace?.name : undefined}
+                    >
+                      {showName ? linkSpace?.name : undefined}
+                    </TitleTag>
+                  </Box>
+                  {stacked && dateInfo}
+                  {showDescription && linkSpace?.description && (
+                    <TextTag
+                      marginTop={1}
+                      textAlign={stacked ? 'center' : undefined}
+                      overflow="hidden"
+                      whiteSpace={maxDescriptionWidth ? 'nowrap' : undefined}
+                      width={maxDescriptionWidth}
+                      textOverflow="ellipsis"
+                      id={`${idPrefix}app-description-${linkSpace?.configurationId}`}
+                    >
+                      <ReactMarkdown className="Card-text">{linkSpace?.description}</ReactMarkdown>
+                    </TextTag>
+                  )}
+                  {variant === 'card' && customBadgeDisplay}
+                </Grid>
+              )}
+          {variant !== 'card' && customBadgeDisplay}
+          {!stacked && dateInfo}
+        </Grid>
+      </BodyTag>
+    </Tag>
+  );
+};

package/src/lib/SpacesLink/linkHandlers.tsx

@@ -0,0 +1,45 @@
+import { getUrl, getTarget, updateUrl } from '../helpers';
+import nativeForm from '@availity/native-form';
+import { isAbsoluteUrl } from '@availity/resolve-url';
+import { updateTopApps } from '../topApps';
+import { OpenLink, OpenLinkWithSso } from './spaces-link-types';
+
+export const openLink: OpenLink = async (space, params) => {
+  if (!space?.link?.url) {
+    return;
+  }
+
+  if (params?.akaname) await updateTopApps(space, params.akaname);
+
+  const url = !isAbsoluteUrl(space.link.url)
+    ? getUrl(updateUrl(space.link.url, 'spaceId', params?.payerSpaceId || space.parents?.[0]?.id), false, false)
+    : space.link.url;
+
+  const target = getTarget(space.link.target);
+
+  window.open(url, target);
+};
+
+export const openLinkWithSso: OpenLinkWithSso = async (space, { akaname, clientId, payerSpaceId, ssoParams }) => {
+  if (space.meta && space.meta.ssoId) {
+    const options = space.link?.target ? { target: getTarget(space.link.target) } : undefined;
+
+    const attributes = {
+      X_Client_ID: clientId,
+      X_XSRF_TOKEN: document.cookie.replace(/(?:(?:^|.*;\s*)XSRF-TOKEN\s*=\s*([^;]*).*$)|^.*$/, '$1'),
+      spaceId: payerSpaceId,
+      ...ssoParams,
+    };
+
+    try {
+      if (akaname) await updateTopApps(space, akaname);
+      await nativeForm(space.meta.ssoId, attributes, options, space.type);
+    } catch {
+      console.warn('Something went wrong');
+    }
+
+    return false;
+  }
+
+  return false;
+};

package/src/lib/SpacesLink/spaces-link-types.tsx

@@ -0,0 +1,143 @@
+import type { StatusChipProps } from '@availity/mui-chip';
+import type { Space } from '../spaces-types';
+
+export type SpacesLinkVariants = 'card' | 'list' | 'default' | undefined;
+
+export type SpacesLinkWithSpace = {
+  /** If no spaceId is provided, the first space in the spaces array is used.
+   * Note: This is only to be used when the Spaces provider should only ever contain a single space.
+   */
+  spaceId?: string;
+  /** Use to directly pass a space to the component rather than have it fetched from the spaces API.
+   * This component does not have to be a child of SpacesProvider.
+   * Note: If you are wanting to take advantage of the sso links you will additionally need to pass the clientId in.
+   */
+  space: Space | SsoTypeSpace;
+} & SpacesLinkProps;
+
+export type SpacesLinkWithSpaceId = {
+  /** If no spaceId is provided, the first space in the spaces array is used.
+   * Note: This is only to be used when the Spaces provider should only ever contain a single space.
+   */
+  spaceId: string;
+  /** Use to directly pass a space to the component rather than have it fetched from the spaces API.
+   * This component does not have to be a child of SpacesProvider.
+   * Note: If you are wanting to take advantage of the sso links you will additionally need to pass the clientId in.
+   */
+  space?: Space | SsoTypeSpace;
+} & SpacesLinkProps;
+
+export type SpacesLinkProps = {
+  /** Children can be a react child or render prop. */
+  children?: JSX.Element | ((props: any | undefined) => JSX.Element);
+  /** Tag to overwrite the root component rendered. */
+  tag?: string;
+  /** Tag to overwrite the body component that renders the title, description and data values.
+   * It defaults to CardBody or div depending on the value of the variant prop.
+   */
+  bodyTag?: string;
+  /** Tag to overwrite the title component. If variant prop is set to "card", defaults to CardTitle.
+   * If variant is set to "list", defaults to ListItemHeading. Overwise, defaults to div.
+   */
+  titleTag?: string;
+  /** Tag to overwrite the text component. If variant prop is set to "card", defaults to Card Text.
+   * If variant is set to "list", defaults to ListItemText. Otherwise, defaults to div.
+   */
+  textTag?: string;
+  titleClassName?: string;
+  /** When true, utilizes the Card component for styling. */
+  card?: boolean;
+  /** When true, renders an @availity/mui-icon next to the title if present on the Space. */
+  icon?: boolean;
+  /** When true, renders the Spaces description beneath the title. */
+  description?: boolean;
+  /** When passed in, provides predefined styles for the component.
+   * @default 'default'
+   */
+  variant?: SpacesLinkVariants;
+  /** When true, renders the FavoriteHeart component to the left of the Component.
+   * Note, this does require you to have wrapped your component somewhere in the Favorites Provider.
+   * This also requires the peerDependency @tanstack/react-query.
+   */
+  favorite?: boolean;
+  /** When true, renders the tyitle, and allow for the description and date info to be added on.
+   * @default true
+   */
+  body?: boolean;
+  /** When true, renders the activeDate of the space. */
+  showDate?: boolean;
+  /** When true, renders the name of the space.
+   * @default true
+   */
+  showName?: boolean;
+  /** When true, renders a "New!" badge if the activeDate is less than 30 days old. */
+  showNew?: boolean;
+  /** When true, renders the component vertically. */
+  stacked?: boolean;
+  /** Optionally pass in your own landing state for the component if you are managing the state yourself. */
+  loading?: boolean;
+  /** Required when space is not provided, or space is provided and space contains an sso link. */
+  clientId?: string;
+  style?: object;
+  className?: string;
+  /** Allows the description length to be truncated. */
+  maxDescriptionWidth?: string;
+  /** Additional attributes you may want to tack onto the native-form when submitting a SAML sso.
+   * i.e. spaceId or sourceApplicationId
+   */
+  linkAttributes?: object;
+  /** Allows the role of the root component to be overwritten.
+   * If variant prop is set to "list", defaults to "listitem".
+   */
+  role?: string;
+  /** When Analytics props are passed inside the analytics props, they will be passed down to the click item.
+   * For more information on Analytics props see: Autotrack Logged Events
+   */
+  analytics?: object;
+  customBadgeText?: string;
+  customBadgeColor?: StatusChipProps['color'];
+  /** prefix for ids to prevent duplicates when the same config link is displayed on the page more than once
+   * @default ''
+   */
+  idPrefix?: string;
+  [key: string]: any;
+};
+
+export type MediaProps = {
+  role: string;
+  onClick?: (event: React.MouseEvent) => void;
+  onKeyDown?: (event: React.KeyboardEvent) => void;
+};
+
+export interface SsoTypeSpace extends Space {
+  type: 'saml' | 'openid';
+}
+
+export type UseLink = {
+  (
+    spaceId?: Space | SsoTypeSpace | string,
+    options?: { clientId?: string; linkAttributes?: Record<string, any> }
+  ): [Space | undefined, MediaProps | undefined];
+};
+
+export type OpenLink = {
+  (
+    space?: Space,
+    params?: {
+      akaname?: string;
+      payerSpaceId?: string;
+    }
+  ): Promise<void>;
+};
+
+export type OpenLinkWithSso = {
+  (
+    space: SsoTypeSpace,
+    params: {
+      akaname?: string;
+      clientId: string;
+      payerSpaceId: string;
+      ssoParams: Record<string, string>;
+    }
+  ): Promise<boolean>;
+};