@patternfly/quickstarts 0.0.0

package/src/ConsoleShared/src/components/status/icons.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
+import dangerColor from '@patternfly/react-tokens/dist/esm/global_danger_color_100';
+import blueInfoColor from '@patternfly/react-tokens/dist/esm/global_palette_blue_300';
+import okColor from '@patternfly/react-tokens/dist/esm/global_palette_green_500';
+import { Icon } from '@patternfly/react-core';
+
+export const GreenCheckCircleIcon: React.FC<ColoredIconProps> = ({ className, title, size }) => (
+  <Icon size={size}>
+    <CheckCircleIcon
+      data-test="success-icon"
+      color={okColor.value}
+      className={className}
+      title={title}
+    />
+  </Icon>
+);
+
+export const RedExclamationCircleIcon: React.FC<ColoredIconProps> = ({
+  className,
+  title,
+  size,
+}) => (
+  <Icon size={size}>
+    <ExclamationCircleIcon color={dangerColor.value} className={className} title={title} />
+  </Icon>
+);
+
+export const BlueInfoCircleIcon: React.FC<ColoredIconProps> = ({ className, title }) => (
+  <InfoCircleIcon color={blueInfoColor.value} className={className} title={title} />
+);
+
+export interface ColoredIconProps {
+  className?: string;
+  title?: string;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+}

package/src/ConsoleShared/src/components/status/index.tsx

@@ -0,0 +1 @@
+export * from './Status';

package/src/ConsoleShared/src/components/status/statuses.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+import GenericStatus from './GenericStatus';
+import { BlueInfoCircleIcon, GreenCheckCircleIcon, RedExclamationCircleIcon } from './icons';
+import { StatusComponentProps } from './types';
+
+export const ErrorStatus: React.FC<StatusComponentProps> = (props) => (
+  <GenericStatus {...props} Icon={RedExclamationCircleIcon} title={props.title || 'Error'} />
+);
+ErrorStatus.displayName = 'ErrorStatus';
+
+export const InfoStatus: React.FC<StatusComponentProps> = (props) => (
+  <GenericStatus {...props} Icon={BlueInfoCircleIcon} title={props.title || 'Information'} />
+);
+InfoStatus.displayName = 'InfoStatus';
+
+export const SuccessStatus: React.FC<StatusComponentProps> = (props) => (
+  <GenericStatus {...props} Icon={GreenCheckCircleIcon} title={props.title || 'Healthy'} />
+);
+SuccessStatus.displayName = 'SuccessStatus';

package/src/ConsoleShared/src/components/status/types.ts

@@ -0,0 +1,8 @@
+export interface StatusComponentProps {
+  children?: React.ReactNode;
+  title?: string;
+  iconOnly?: boolean;
+  noTooltip?: boolean;
+  className?: string;
+  popoverTitle?: string;
+}

package/src/ConsoleShared/src/components/utils/FallbackImg.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+interface FallbackImgProps {
+  src: string;
+  alt?: string;
+  className?: string;
+  fallback?: React.ReactNode;
+}
+
+const FallbackImg: React.FC<FallbackImgProps> = ({ src, alt, className, fallback }) => {
+  const [isSrcValid, setIsSrcValid] = React.useState<boolean>(true);
+
+  if (src && isSrcValid) {
+    return <img className={className} src={src} alt={alt} onError={() => setIsSrcValid(false)} />;
+  }
+
+  return <>{fallback}</>;
+};
+
+export default FallbackImg;

package/src/ConsoleShared/src/components/utils/index.ts

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

package/src/ConsoleShared/src/constants/index.ts

@@ -0,0 +1 @@
+export * from './ui';

package/src/ConsoleShared/src/constants/ui.ts

@@ -0,0 +1 @@
+export const DASH = '-';

package/src/ConsoleShared/src/hooks/index.ts

@@ -0,0 +1,6 @@
+export * from './scroll';
+export * from './useResizeObserver';
+export * from './useScrollShadows';
+export * from './useBoundingClientRect';
+export * from './useForceRender';
+export * from './useEventListener';

package/src/ConsoleShared/src/hooks/scroll.ts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+
+export enum ScrollDirection {
+  scrollingUp = 'scrolling-up',
+  scrollingDown = 'scrolling-down',
+  scrolledToBottom = 'scrolled-to-bottom',
+  scrolledToTop = 'scrolled-to-top',
+}
+
+export const getScrollDirection = (
+  prevScrollTop: number,
+  currentScrollTop: number,
+  scrollHeight: number,
+  clientHeight: number,
+) => {
+  let direction;
+  if (scrollHeight - currentScrollTop === clientHeight) {
+    direction = ScrollDirection.scrolledToBottom;
+  } else if (currentScrollTop === 0) {
+    direction = ScrollDirection.scrolledToTop;
+  } else if (prevScrollTop > currentScrollTop) {
+    direction = ScrollDirection.scrollingUp;
+  } else if (prevScrollTop < currentScrollTop) {
+    direction = ScrollDirection.scrollingDown;
+  }
+  return direction;
+};
+
+export const useScrollDirection = (): [ScrollDirection, (event) => void] => {
+  const scrollPosition = React.useRef<number>(null);
+  const [scrollDirection, setScrollDirection] = React.useState<ScrollDirection>(null);
+  const handleScroll = React.useCallback(
+    (event) => {
+      const { scrollHeight, scrollTop, clientHeight } = event.target;
+      if (scrollPosition.current !== null) {
+        const direction = getScrollDirection(
+          scrollPosition.current,
+          scrollTop,
+          scrollHeight,
+          clientHeight,
+        );
+        if (direction && direction !== scrollDirection) {
+          setScrollDirection(direction);
+        }
+      }
+      scrollPosition.current = scrollTop;
+    },
+    [scrollDirection],
+  );
+
+  return [scrollDirection, handleScroll];
+};

package/src/ConsoleShared/src/hooks/useBoundingClientRect.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { useResizeObserver } from './useResizeObserver';
+
+type BoundingClientRect = ClientRect | null;
+
+export const useBoundingClientRect = (targetElement: HTMLElement | null): BoundingClientRect => {
+  const [clientRect, setClientRect] = React.useState<BoundingClientRect>(() =>
+    targetElement ? targetElement.getBoundingClientRect() : null,
+  );
+
+  const observerCallback = React.useCallback(() => {
+    setClientRect(targetElement ? targetElement.getBoundingClientRect() : null);
+  }, [targetElement]);
+
+  useResizeObserver(observerCallback);
+
+  return clientRect;
+};

package/src/ConsoleShared/src/hooks/useEventListener.ts

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+
+export const useEventListener = (
+  target: EventTarget,
+  event: keyof WindowEventMap,
+  callback: EventListener,
+) => {
+  useEffect(() => {
+    target.addEventListener(event, callback);
+    return () => {
+      target.removeEventListener(event, callback);
+    };
+  }, [target, event, callback]);
+};

package/src/ConsoleShared/src/hooks/useForceRender.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+
+/**
+ * React hook that forces component render.
+ */
+export const useForceRender = () => React.useReducer((s: boolean) => !s, false)[1] as VoidFunction;

package/src/ConsoleShared/src/hooks/useResizeObserver.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+export const useResizeObserver = (
+  callback: ResizeObserverCallback,
+  targetElement?: HTMLElement | null,
+  observerOptions: ResizeObserverOptions = undefined,
+): void => {
+  const element = React.useMemo(
+    () => targetElement ?? document.querySelector('body'),
+    [targetElement],
+  );
+  React.useEffect(() => {
+    const observer = new ResizeObserver(callback);
+    observer.observe(element, observerOptions);
+    return () => {
+      observer.disconnect();
+    };
+  }, [callback, observerOptions, element]);
+};

package/src/ConsoleShared/src/hooks/useScrollShadows.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { useResizeObserver } from './useResizeObserver';
+
+export enum Shadows {
+  none = 'none',
+  both = 'both',
+  top = 'top',
+  bottom = 'bottom',
+}
+
+export const useScrollShadows = (node: HTMLElement): Shadows => {
+  const [shadows, setShadows] = React.useState(Shadows.none);
+  const computeShadows = React.useCallback(() => {
+    if (node) {
+      const { scrollTop, clientHeight, scrollHeight } = node;
+      const top = scrollTop !== 0;
+      const bottom = scrollTop + clientHeight < scrollHeight;
+      if (top && bottom) {
+        setShadows(Shadows.both);
+      } else if (top) {
+        setShadows(Shadows.top);
+      } else if (bottom) {
+        setShadows(Shadows.bottom);
+      } else {
+        setShadows(Shadows.none);
+      }
+    }
+  }, [node]);
+  // recompute when the scroll container changes in size
+  useResizeObserver(computeShadows, node);
+  React.useEffect(() => {
+    if (node) {
+      // compute initial shadows
+      computeShadows();
+      // listen for scroll events
+      node.addEventListener('scroll', computeShadows);
+    }
+    return () => {
+      if (node) {
+        node.removeEventListener('scroll', computeShadows);
+      }
+    };
+  }, [node, computeShadows]);
+  return shadows;
+};

package/src/ConsoleShared/src/index.ts

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './hooks';
+export * from './utils';
+export * from './constants';

package/src/ConsoleShared/src/utils/index.ts

@@ -0,0 +1 @@
+export * from './useCombineRefs';

package/src/ConsoleShared/src/utils/useCombineRefs.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+export const useCombineRefs = <RefType>(...refs: (React.Ref<RefType> | undefined)[]) =>
+  React.useCallback(
+    (element: RefType | null): void =>
+      refs.forEach((ref) => {
+        if (ref) {
+          if (typeof ref === 'function') {
+            ref(element);
+          } else {
+            (ref as React.MutableRefObject<any>).current = element;
+          }
+        }
+      }),
+    [refs],
+  );

package/src/HelpTopicDrawer.tsx

@@ -0,0 +1,116 @@
+import './QuickStartDrawer.scss';
+import * as React from 'react';
+import { Drawer, DrawerContent, DrawerContentBody } from '@patternfly/react-core';
+import HelpTopicPanelContent from './HelpTopicPanelContent';
+import {
+  HelpTopicContext,
+  HelpTopicContextValues,
+  useValuesForHelpTopicContext,
+} from './utils/help-topic-context';
+import { QuickStartContextValues } from './utils/quick-start-context';
+import { HelpTopic } from './utils/help-topic-types';
+
+export interface HelpTopicContainerProps extends React.HTMLProps<HTMLDivElement> {
+  /** array of HelpTopics */
+  helpTopics: HelpTopic[];
+  /** text resources object
+   * Add custom strings: https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/module#localization
+   */
+  resourceBundle?: any;
+  /** language of the current resource bundle */
+  language?: string;
+  /** if true, will show a loading spinner on the catalog page (default false) */
+  loading?: boolean;
+  /**
+   * Additional markdown extensions and renderers to use
+   * Example usage: https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/module#markdown-extensions
+   */
+  markdown?: {
+    extensions?: any[];
+    renderExtension?: (docContext: Document, rootSelector: string) => React.ReactNode;
+  };
+  /** additional quick start context props */
+  contextProps?: QuickStartContextValues;
+  children?: React.ReactNode;
+}
+
+export const HelpTopicContainer: React.FC<HelpTopicContainerProps> = ({
+  helpTopics,
+  children,
+  resourceBundle,
+  language,
+  loading = false,
+  markdown,
+  contextProps,
+  ...props
+}: HelpTopicContainerProps) => {
+  const valuesForHelpTopicContext: HelpTopicContextValues = useValuesForHelpTopicContext({
+    helpTopics,
+    language,
+    resourceBundle: {
+      ...resourceBundle,
+    },
+    loading,
+    markdown,
+    ...contextProps,
+  });
+
+  React.useEffect(() => {
+    if (loading !== valuesForHelpTopicContext.loading) {
+      valuesForHelpTopicContext.setLoading(loading);
+    }
+  }, [loading, valuesForHelpTopicContext]);
+
+  React.useEffect(() => {
+    if (
+      helpTopics &&
+      JSON.stringify(helpTopics) !== JSON.stringify(valuesForHelpTopicContext.helpTopics)
+    ) {
+      valuesForHelpTopicContext.setHelpTopics(helpTopics);
+    }
+  }, [helpTopics, valuesForHelpTopicContext]);
+
+  return (
+    <HelpTopicContext.Provider value={valuesForHelpTopicContext}>
+      <HelpTopicDrawer {...props}>{children}</HelpTopicDrawer>
+    </HelpTopicContext.Provider>
+  );
+};
+
+export interface HelpTopicDrawerProps extends React.HTMLProps<HTMLDivElement> {
+  helpTopics?: HelpTopic[];
+  children?: React.ReactNode;
+}
+
+export const HelpTopicDrawer: React.FC<HelpTopicDrawerProps> = ({ children, ...props }) => {
+  const { activeHelpTopic, filteredHelpTopics, setActiveHelpTopicByName } =
+    React.useContext<HelpTopicContextValues>(HelpTopicContext);
+
+  const onClose = () => {
+    setActiveHelpTopicByName('');
+  };
+
+  const panelContent = (
+    <HelpTopicPanelContent
+      activeHelpTopic={activeHelpTopic}
+      filteredHelpTopics={filteredHelpTopics}
+      onClose={onClose}
+    />
+  );
+
+  return (
+    <>
+      <Drawer isExpanded={!!activeHelpTopic} isInline {...props}>
+        {children ? (
+          <DrawerContent panelContent={panelContent}>
+            <DrawerContentBody className="pfext-quick-start-drawer__body">
+              {children}
+            </DrawerContentBody>
+          </DrawerContent>
+        ) : (
+          <div className="pf-v5-c-drawer__main">{panelContent}</div>
+        )}
+      </Drawer>
+    </>
+  );
+};

package/src/HelpTopicPanelContent.tsx

@@ -0,0 +1,160 @@
+import * as React from 'react';
+import {
+  Button,
+  Divider,
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerHead,
+  DrawerPanelBody,
+  DrawerPanelContent,
+  MenuToggle,
+  Select,
+  SelectList,
+  SelectOption,
+  Stack,
+  StackItem,
+  Title,
+} from '@patternfly/react-core';
+
+import QuickStartMarkdownView from './QuickStartMarkdownView';
+import { HelpTopic } from './utils/help-topic-types';
+import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+
+import './QuickStartPanelContent.scss';
+import { HelpTopicContext, HelpTopicContextValues } from './utils/help-topic-context';
+
+interface HelpTopicPanelContentProps {
+  activeHelpTopic: HelpTopic;
+  filteredHelpTopics?: HelpTopic[];
+  isResizable?: boolean;
+  onClose: () => void;
+}
+
+const HelpTopicPanelContent: React.FC<HelpTopicPanelContentProps> = ({
+  activeHelpTopic = null,
+  filteredHelpTopics = [],
+  isResizable = true,
+  onClose,
+  ...props
+}) => {
+  const { setActiveHelpTopicByName } = React.useContext<HelpTopicContextValues>(HelpTopicContext);
+
+  const [isHelpTopicMenuOpen, setIsHelpTopicMenuOpen] = React.useState(false);
+
+  const toggleHelpTopicMenu = () => {
+    setIsHelpTopicMenuOpen(!isHelpTopicMenuOpen);
+  };
+
+  const onSelectHelpTopic = (
+    _event?: React.MouseEvent<Element, MouseEvent>,
+    value?: string | number,
+  ) => {
+    const topicName = value;
+    setActiveHelpTopicByName(topicName.toString());
+    toggleHelpTopicMenu();
+  };
+
+  const helpTopicOptions =
+    filteredHelpTopics.length > 1 &&
+    filteredHelpTopics.map((topic) => (
+      <SelectOption key={topic.name} value={topic.name}>
+        {topic.title}
+      </SelectOption>
+    ));
+
+  const paddingContainer = (children) => <div style={{ padding: '24px' }}>{children}</div>;
+
+  const panelBodyItems = (
+    <>
+      {paddingContainer(<QuickStartMarkdownView content={activeHelpTopic?.content} />)}
+      {!!activeHelpTopic?.links?.length && <Divider />}
+      {paddingContainer(
+        <Stack hasGutter>
+          {activeHelpTopic?.links?.map(({ href, text, newTab, isExternal }, index) => (
+            <StackItem key={index}>
+              <Button
+                component="a"
+                href={href}
+                target={newTab ? '_blank' : ''}
+                rel="noopener noreferrer"
+                variant="link"
+                aria-label={`Open documentation in new window`}
+                isInline
+                icon={isExternal ? <ExternalLinkAltIcon /> : null}
+                iconPosition="right"
+                style={{ fontSize: 'inherit' }}
+              >
+                {text || href}
+              </Button>
+            </StackItem>
+          ))}
+        </Stack>,
+      )}
+    </>
+  );
+
+  const content = (
+    <DrawerPanelContent isResizable={isResizable} className="pfext-quick-start__base" {...props}>
+      <div>
+        <DrawerHead>
+          <div className="pfext-quick-start-panel-content__title">
+            {helpTopicOptions && (
+              <Select
+                isPlain
+                id="help-topics-select"
+                selected={activeHelpTopic}
+                isOpen={isHelpTopicMenuOpen}
+                onSelect={onSelectHelpTopic}
+                onOpenChange={(isOpen: boolean) => setIsHelpTopicMenuOpen(isOpen)}
+                toggle={(toggleRef) => (
+                  <MenuToggle
+                    isFullWidth
+                    ref={toggleRef}
+                    icon={<BarsIcon />}
+                    onClick={toggleHelpTopicMenu}
+                    isExpanded={isHelpTopicMenuOpen}
+                  >
+                    {activeHelpTopic?.title}
+                  </MenuToggle>
+                )}
+              >
+                <SelectList>{helpTopicOptions}</SelectList>
+              </Select>
+            )}
+
+            <Title
+              headingLevel="h1"
+              size="xl"
+              className="pfext-quick-start-panel-content__name"
+              style={{ marginRight: 'var(--pf-v5-global--spacer--md)' }}
+            >
+              {activeHelpTopic?.title}
+            </Title>
+          </div>
+          {
+            <DrawerActions>
+              <DrawerCloseButton
+                onClick={onClose}
+                className="pfext-quick-start-panel-content__close-button"
+                data-testid="qs-drawer-close"
+              />
+            </DrawerActions>
+          }
+        </DrawerHead>
+        <Divider />
+        <DrawerPanelBody
+          hasNoPadding
+          className="pfext-quick-start-panel-content__body"
+          data-test="content"
+        >
+          {panelBodyItems}
+        </DrawerPanelBody>
+      </div>
+    </DrawerPanelContent>
+  );
+
+  return content;
+};
+
+export default HelpTopicPanelContent;