@patternfly/quickstarts 2.2.2 → 2.3.0

package/README.md

@@ -32,7 +32,7 @@ If you use an older version of @patternfly/react-core (older than "4.115.2"), an
 
 Ideally @patternfly/quickstarts will use the consumer provided PatternFly styles, only use these stylesheets if really needed.
 
-`quickstarts-standalone.min.css` nests the css classes within a **.pfext-quick-start__base** parent, so that they have higher specificity. `patternfly-global.css` includes component styles that we cannot nest with more specificiy (for example Drawer since it can include consumer components that depend on an older PF version).
+`quickstarts-standalone.min.css` nests the css classes within a **.pfext-quick-start__base** parent, so that they have higher specificity. `patternfly-global.css` includes component styles that we cannot nest with more specificity (for example Drawer since it can include consumer components that depend on an older PF version).
 
 > Note: Only use these stylesheets if necessary!
 ```js
@@ -69,7 +69,7 @@ import {
 import { Button } from "@patternfly/react-core";
 import jsYaml from "js-yaml";
 // quick start files could be yaml files or js files, or really anything,
-// as long as they get parsed out to the expexted JSON format
+// as long as they get parsed out to the expected JSON format
 import quickstartOne from "./quick-starts/quickstart-one.yaml";
 import quickstartTwo from "./quick-starts/quickstart-two.yaml";
 import quickstartThree from "./quick-starts/quickstart-three";
@@ -253,7 +253,7 @@ return (
 Use this [file](https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/module/src/locales/en/quickstart.json) as a base for your translations.
 Each language is different, especially when it comes to plurals. Try [this utility](https://jsfiddle.net/6bpxsgd4) sourced from [i18next](https://www.i18next.com/translation-function/plurals#how-to-find-the-correct-plural-suffix) to determine the suffixes for the right plural format.
 
-For localizing the content of quick starts files, we provide the option to include `language` and `countryCode` key to your translated file. Based on these keys you can filter out quick starts. We have a demo of this behaviour in our [demo app](https://quickstarts.netlify.app/quickstarts-localized). You can have a look at the code [here](https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/dev/src/AppLocalized.tsx).
+For localizing the content of quick starts files, we provide the option to include `language` and `countryCode` key to your translated file. Based on these keys you can filter out quick starts. We have a demo of this behavior in our [demo app](https://quickstarts.netlify.app/quickstarts-localized). You can have a look at the code [here](https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/dev/src/AppLocalized.tsx).
 
 ## In-App / In Context Help Panel
 
@@ -406,7 +406,7 @@ const FormGroupWithHelpTopicPopover: React.FC<FormGroupWithHelpTopicPopoverProps
         <Popover
           bodyContent={(hide) => (
             <div>
-              {topic.title} is quite amaizing{' '}
+              {topic.title} is quite amazing{' '}
               <Button
                 variant="link"
                 onClick={() => {

package/dist/HelpTopicDrawer.d.ts

@@ -3,19 +3,25 @@ import * as React from 'react';
 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
-     * TODO: example usage - In the meantime you can take a look at:
-     * https://github.com/openshift/console/blob/master/frontend/packages/console-app/src/components/quick-starts/utils/quick-start-context.tsx#L235
+     * Example usage: https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/module#markdown-extensions
      */
     markdown?: {
         extensions?: any[];
         renderExtension?: (docContext: HTMLDocument, rootSelector: string) => React.ReactNode;
     };
+    /** additional quick start context props */
     contextProps?: QuickStartContextValues;
 }
 export declare const HelpTopicContainer: React.FC<HelpTopicContainerProps>;

package/dist/QuickStartDrawer.d.ts

@@ -3,32 +3,51 @@ import * as React from 'react';
 import { QuickStartContextValues } from './utils/quick-start-context';
 import { QuickStart, AllQuickStartStates } from './utils/quick-start-types';
 export interface QuickStartContainerProps extends React.HTMLProps<HTMLDivElement> {
+    /** array of quick starts */
     quickStarts: QuickStart[];
+    /** id of the currently active quick start */
     activeQuickStartID: string;
+    /** setter for the active quick starts */
     setActiveQuickStartID: React.Dispatch<React.SetStateAction<string>>;
+    /** quick starts state object */
     allQuickStartStates: AllQuickStartStates;
+    /** setter for the quick starts state object */
     setAllQuickStartStates: React.Dispatch<React.SetStateAction<AllQuickStartStates>>;
+    /** content to render within the container */
     children?: React.ReactNode;
+    /** element to render the drawer panel into */
     appendTo?: HTMLElement | (() => HTMLElement);
+    /** if true, the panel will take up the full browser width */
     fullWidth?: boolean;
+    /** callback when an in-progress quick start is closed */
     onCloseInProgress?: any;
+    /** callback when a not-in-progress quick start is closed */
     onCloseNotInProgress?: any;
+    /** true to show footer buttons in the catalog tiles (default true) */
     showCardFooters?: boolean;
+    /** true to use legacy drawer header variant colors */
     useLegacyHeaderColors?: boolean;
+    /** text resources object */
     resourceBundle?: any;
+    /** language of the current resource bundle
+     * Add custom strings: https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/module#localization
+     */
     language?: string;
+    /** if true, will show a loading spinner on the catalog page (default false) */
     loading?: boolean;
+    /** if true, will update the browser URL with ?quickstart={ID} (default true) */
     useQueryParams?: boolean;
+    /** if true, the TaskReview component, aka "Check your work", will be shown regardless of task status */
     alwaysShowTaskReview?: boolean;
     /**
      * Additional markdown extensions and renderers to use
-     * TODO: example usage - In the meantime you can take a look at:
-     * https://github.com/openshift/console/blob/master/frontend/packages/console-app/src/components/quick-starts/utils/quick-start-context.tsx#L235
+     * Example usage: https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/module#markdown-extensions
      */
     markdown?: {
         extensions?: any[];
         renderExtension?: (docContext: HTMLDocument, rootSelector: string) => React.ReactNode;
     };
+    /** additional quick start context props */
     contextProps?: QuickStartContextValues;
 }
 export declare const QuickStartContainer: React.FC<QuickStartContainerProps>;

package/dist/controller/QuickStartTaskHeader.d.ts

@@ -9,7 +9,7 @@ declare type QuickStartTaskHeaderProps = {
     size?: 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
     isActiveTask?: boolean;
     onTaskSelect: (index: number) => void;
-    chidlren?: React.ReactNode;
+    children?: React.ReactNode;
 };
 declare const QuickStartTaskHeader: React.FC<QuickStartTaskHeaderProps>;
 export default QuickStartTaskHeader;

package/dist/index.d.ts

@@ -11,5 +11,6 @@ export * from './utils/help-topic-context';
 export * from './utils/help-topic-types';
 export * from './utils/quick-start-utils';
 export * from './utils/useLocalStorage';
+export * from './utils/asciidoc-procedure-parser';
 export { default as QuickStartPanelContent } from './QuickStartPanelContent';
 export { default as QuickStartCloseModal } from './QuickStartCloseModal';

package/dist/index.es.js

@@ -1233,7 +1233,7 @@ const useInlineCopyClipboardShowdownExtension = () => {
     const { getResource } = React.useContext(QuickStartContext);
     return React.useMemo(() => ({
         type: 'lang',
-        regex: /`([^`](.*?)[^`])`{{copy}}/g,
+        regex: /```[\n]\s*((((?!```).)*?\n)+)\s*```{{copy}}/g,
         replace: (text, group, subGroup, groupType, groupId) => {
             if (!group || !subGroup || !groupType || !groupId) {
                 return text;
@@ -1301,7 +1301,7 @@ const useAdmonitionShowdownExtension = () => {
     // const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
     return React.useMemo(() => ({
         type: 'lang',
-        regex: /\[([\d\w\s-()$!]+)]{{(admonition) ([\w-]+)}}/g,
+        regex: /\[(.+)]{{(admonition) ([\w-]+)}}/g,
         replace: (text, content, admonitionLabel, admonitionType, groupId) => {
             if (!content || !admonitionLabel || !admonitionType || !groupId) {
                 return text;
@@ -2371,7 +2371,7 @@ const HelpTopicPanelContent = (_a) => {
     const paddingContainer = (children) => React.createElement("div", { style: { padding: '24px' } }, children);
     const panelBodyItems = (React.createElement(React.Fragment, null,
         paddingContainer(React.createElement(QuickStartMarkdownView, { content: activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.content })),
-        ((_b = activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.links) === null || _b === void 0 ? void 0 : _b.length) && React.createElement(Divider, null),
+        !!((_b = activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.links) === null || _b === void 0 ? void 0 : _b.length) && React.createElement(Divider, null),
         paddingContainer(React.createElement(Stack, { hasGutter: true }, (_c = activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.links) === null || _c === void 0 ? void 0 : _c.map(({ href, text, newTab, isExternal }, index) => {
             return (React.createElement(StackItem, { key: index },
                 React.createElement(Button, { component: "a", href: href, target: newTab ? '_blank' : '', rel: "noopener noreferrer", variant: "link", "aria-label": `Open documentation in new window`, isInline: true, icon: isExternal ? React.createElement(ExternalLinkAltIcon, null) : null, iconPosition: "right", style: { fontSize: 'inherit' } }, text || href)));
@@ -2458,5 +2458,105 @@ const useLocalStorage = (key, initialValue) => {
     return [storedValue, setValue];
 };
 
-export { Box, CamelCaseWrap, EmptyBox, HELP_TOPIC_NAME_KEY, HelpTopicContainer, HelpTopicContext, HelpTopicContextDefaults, HelpTopicDrawer, Loading, LoadingBox, QUICKSTART_ID_FILTER_KEY, QUICKSTART_SEARCH_FILTER_KEY, QUICKSTART_STATUS_FILTER_KEY, QUICKSTART_TASKS_INITIAL_STATES, QUICK_START_NAME, QuickStartCatalog, QuickStartCatalogEmptyState, QuickStartCatalogFilter, QuickStartCatalogFilterCount, QuickStartCatalogFilterCountWrapper, QuickStartCatalogFilterSearch, QuickStartCatalogFilterSearchWrapper, QuickStartCatalogFilterSelect, QuickStartCatalogFilterStatusWrapper, QuickStartCatalogHeader, QuickStartCatalogPage, QuickStartCatalogSection, QuickStartCatalogToolbar, QuickStartCloseModal, QuickStartContainer, QuickStartContext, QuickStartContextDefaults, QuickStartContextProvider, QuickStartDrawer, QuickStartPanelContent, QuickStartStatus, QuickStartTaskStatus, QuickStartTile, QuickStartTileDescription, QuickStartTileFooter, QuickStartTileFooterExternal, QuickStartTileHeader, camelize, clearFilterParams, equalsIgnoreOrder, filterQuickStarts, getDefaultQuickStartState, getDisabledQuickStarts, getQuickStartByName, getQuickStartStatus, getQuickStartStatusCount, getResource, getTaskStatusKey, history, isDisabledQuickStart, removeQueryArgument, setQueryArgument, useLocalStorage, useValuesForHelpTopicContext, useValuesForQuickStartContext };
+/* eslint-disable */
+// Brought in from dev to publish this with QS module
+// Dev now imports from here
+const ProcQuickStartParser = (quickStart, environmentVariables) => {
+    var _a;
+    const replaceEnvironmentVariables = (s) => s === null || s === void 0 ? void 0 : s.replace(/\${(\w+)}/, (substring, name) => {
+        return environmentVariables ? ([name] ? environmentVariables[name] : substring) : substring;
+    });
+    quickStart.spec.tasks = (_a = quickStart.spec.tasks) === null || _a === void 0 ? void 0 : _a.map((task, index) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        let proc;
+        let answer;
+        if (typeof task === 'string') {
+            proc = task;
+            answer = {};
+        }
+        else {
+            // @ts-ignore
+            proc = task.proc;
+            answer = task;
+            // @ts-ignore
+            delete task.proc;
+        }
+        let description = '', procedure, verification, title, summaryFailed, success, reviewFailed, prerequisites;
+        if (proc) {
+            const taskDOM = document.createElement('div');
+            taskDOM.innerHTML = proc;
+            // remove the screencapture images
+            taskDOM.querySelectorAll('.imageblock.screencapture').forEach((node) => {
+                var _a;
+                (_a = node.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(node);
+            });
+            title = (_a = taskDOM
+                .querySelector('h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child')) === null || _a === void 0 ? void 0 : _a.innerHTML.trim();
+            let sectionBody = taskDOM.querySelector('.sectionbody');
+            if (!(sectionBody === null || sectionBody === void 0 ? void 0 : sectionBody.hasChildNodes())) {
+                // possibly in other templates, where we want to look for article
+                sectionBody = taskDOM.querySelector('article');
+            }
+            if (sectionBody) {
+                for (let i = 0; i < sectionBody.children.length || 0; i++) {
+                    /**
+                    child typically looks like:
+          
+                    <div class="paragraph|olist|ulist|admonitionblock">
+                       <div class="title">Procedure|Prerequisites|Verification|Note|Warning</div>
+                       <ol|ul class="arabic">
+                         <li>
+                         <li>...
+                       </ol|ul>
+                    </div>
+          
+                    And the below code extracts the <ol> or <ul>
+                    Except for when there is no <div class="title|heading"/>, then the description is extracted
+                    in the else if below
+                    */
+                    const child = sectionBody.children.item(i);
+                    // find the title
+                    const sectionTitle = child === null || child === void 0 ? void 0 : child.querySelector('.heading,.title');
+                    // should this section be assigned to a specific section
+                    const sectionTitleText = (_b = sectionTitle === null || sectionTitle === void 0 ? void 0 : sectionTitle.textContent) === null || _b === void 0 ? void 0 : _b.trim();
+                    const isKnownSection = ['Procedure', 'Verification', 'Prerequisites'].includes((_c = sectionTitle === null || sectionTitle === void 0 ? void 0 : sectionTitle.textContent) === null || _c === void 0 ? void 0 : _c.trim());
+                    if (isKnownSection) {
+                        switch (sectionTitleText) {
+                            case 'Procedure':
+                                procedure = (_d = child === null || child === void 0 ? void 0 : child.querySelector(':not(.heading):not(.title)')) === null || _d === void 0 ? void 0 : _d.outerHTML.trim();
+                                break;
+                            case 'Verification':
+                                verification = (_e = child === null || child === void 0 ? void 0 : child.querySelector(':not(.heading):not(.title)')) === null || _e === void 0 ? void 0 : _e.outerHTML.trim();
+                                break;
+                            case 'Prerequisites':
+                                prerequisites = (_f = child === null || child === void 0 ? void 0 : child.querySelector(':not(.heading):not(.title)')) === null || _f === void 0 ? void 0 : _f.outerHTML.trim();
+                                break;
+                        }
+                    }
+                    else if (!procedure) {
+                        // Otherwise if it comes before a procedure it's part of the description
+                        description = description + (child === null || child === void 0 ? void 0 : child.outerHTML.trim());
+                    }
+                }
+            }
+            success = (_g = taskDOM.querySelector('.qs-summary.success')) === null || _g === void 0 ? void 0 : _g.innerHTML.trim();
+            reviewFailed = (_h = taskDOM.querySelector('.qs-review.failed')) === null || _h === void 0 ? void 0 : _h.innerHTML.trim();
+            summaryFailed = (_j = taskDOM.querySelector('.qs-summary.failed')) === null || _j === void 0 ? void 0 : _j.innerHTML.trim();
+        }
+        answer.title = replaceEnvironmentVariables(answer.title || title);
+        answer.description = replaceEnvironmentVariables(answer.description || `${description} ${prerequisites || ''} ${procedure}`);
+        answer.review = answer.review || {};
+        answer.review.instructions = replaceEnvironmentVariables(((_k = answer.review) === null || _k === void 0 ? void 0 : _k.instructions) || verification || 'Have you completed these steps?');
+        answer.review.failedTaskHelp = replaceEnvironmentVariables(answer.review.failedTaskHelp ||
+            reviewFailed ||
+            'This task isn’t verified yet. Try the task again.');
+        answer.summary = answer.summary || {};
+        answer.summary.success = replaceEnvironmentVariables(answer.summary.success || success || 'You have completed this task!');
+        answer.summary.failed = replaceEnvironmentVariables(answer.summary.failed || summaryFailed || 'Try the steps again.');
+        return answer;
+    });
+    return quickStart;
+};
+
+export { Box, CamelCaseWrap, EmptyBox, HELP_TOPIC_NAME_KEY, HelpTopicContainer, HelpTopicContext, HelpTopicContextDefaults, HelpTopicDrawer, Loading, LoadingBox, ProcQuickStartParser, QUICKSTART_ID_FILTER_KEY, QUICKSTART_SEARCH_FILTER_KEY, QUICKSTART_STATUS_FILTER_KEY, QUICKSTART_TASKS_INITIAL_STATES, QUICK_START_NAME, QuickStartCatalog, QuickStartCatalogEmptyState, QuickStartCatalogFilter, QuickStartCatalogFilterCount, QuickStartCatalogFilterCountWrapper, QuickStartCatalogFilterSearch, QuickStartCatalogFilterSearchWrapper, QuickStartCatalogFilterSelect, QuickStartCatalogFilterStatusWrapper, QuickStartCatalogHeader, QuickStartCatalogPage, QuickStartCatalogSection, QuickStartCatalogToolbar, QuickStartCloseModal, QuickStartContainer, QuickStartContext, QuickStartContextDefaults, QuickStartContextProvider, QuickStartDrawer, QuickStartPanelContent, QuickStartStatus, QuickStartTaskStatus, QuickStartTile, QuickStartTileDescription, QuickStartTileFooter, QuickStartTileFooterExternal, QuickStartTileHeader, camelize, clearFilterParams, equalsIgnoreOrder, filterQuickStarts, getDefaultQuickStartState, getDisabledQuickStarts, getQuickStartByName, getQuickStartStatus, getQuickStartStatusCount, getResource, getTaskStatusKey, history, isDisabledQuickStart, removeQueryArgument, setQueryArgument, useLocalStorage, useValuesForHelpTopicContext, useValuesForQuickStartContext };
 //# sourceMappingURL=index.es.js.map