@patternfly/quickstarts 2.2.1 → 2.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +20 -20
- package/dist/ConsoleShared/src/components/markdown-extensions/code-extension.d.ts +7 -0
- package/dist/ConsoleShared/src/components/markdown-extensions/index.d.ts +1 -0
- package/dist/HelpTopicDrawer.d.ts +8 -2
- package/dist/QuickStartDrawer.d.ts +21 -2
- package/dist/index.d.ts +1 -0
- package/dist/index.es.js +127 -21
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +126 -19
- package/dist/index.js.map +1 -1
- package/dist/patternfly-docs/quick-starts/design-guidelines/design-guidelines.md +105 -0
- package/dist/patternfly-docs/quick-starts/design-guidelines/img/card-elements copy.png +0 -0
- package/dist/patternfly-docs/quick-starts/design-guidelines/img/card-elements.png +0 -0
- package/dist/patternfly-docs/quick-starts/design-guidelines/img/catalog-elements.png +0 -0
- package/dist/patternfly-docs/quick-starts/design-guidelines/img/check-your-work.png +0 -0
- package/dist/patternfly-docs/quick-starts/design-guidelines/img/introduction-screen.png +0 -0
- package/dist/patternfly-docs/quick-starts/design-guidelines/img/mixed-catalog.png +0 -0
- package/dist/patternfly-docs/quick-starts/design-guidelines/img/prerequisites.png +0 -0
- package/dist/patternfly-docs/quick-starts/design-guidelines/img/qs-context.png +0 -0
- package/dist/patternfly-docs/quick-starts/design-guidelines/img/side-panel-elements.png +0 -0
- package/dist/patternfly-docs/quick-starts/design-guidelines/img/side-panel-resized.png +0 -0
- package/dist/patternfly-docs/quick-starts/design-guidelines/img/side-panel.png +0 -0
- package/dist/patternfly-docs/quick-starts/design-guidelines/img/task-no.png +0 -0
- package/dist/patternfly-docs/quick-starts/design-guidelines/img/task-yes.png +0 -0
- package/dist/patternfly-docs/quick-starts/design-guidelines/img/task.png +0 -0
- package/dist/patternfly-docs/quick-starts/examples/Basic.jsx +73 -0
- package/dist/patternfly-docs/quick-starts/examples/HelpTopic.jsx +53 -0
- package/dist/patternfly-docs/quick-starts/examples/about.md +77 -0
- package/dist/patternfly-docs/quick-starts/examples/basic.md +27 -0
- package/dist/patternfly-docs/quick-starts/examples/example-data/example-help-topics.js +173 -0
- package/dist/patternfly-docs/quick-starts/examples/example-data/example-quickstarts.js +215 -0
- package/dist/patternfly-docs/quick-starts/examples/example-data/index.js +15 -0
- package/dist/patternfly-docs/quick-starts/examples/help-topics.md +25 -0
- package/dist/patternfly-docs/quick-starts/examples/img/catalog.png +0 -0
- package/dist/patternfly-docs/quick-starts/examples/img/help-topic.png +0 -0
- package/dist/patternfly-docs/quick-starts/examples/img/side-panel.png +0 -0
- package/dist/patternfly-nested.css +11 -1
- package/dist/quickstarts-base.css +49 -11
- package/dist/quickstarts-full.es.js +451 -305
- package/dist/quickstarts-full.es.js.map +1 -1
- package/dist/quickstarts-standalone.css +5 -15
- package/dist/quickstarts-standalone.min.css +1 -1
- package/dist/quickstarts.css +49 -11
- package/dist/quickstarts.min.css +1 -1
- package/dist/utils/asciidoc-procedure-parser.d.ts +12 -0
- package/dist/utils/help-topic-types.d.ts +7 -1
- package/package.json +11 -4
- package/src/ConsoleInternal/components/_icon-and-text.scss +14 -0
- package/src/ConsoleInternal/components/_markdown-view.scss +19 -0
- package/src/ConsoleInternal/components/catalog/_catalog.scss +390 -0
- package/src/ConsoleInternal/components/markdown-view.tsx +305 -0
- package/src/ConsoleInternal/components/utils/_status-box.scss +58 -0
- package/src/ConsoleInternal/components/utils/camel-case-wrap.tsx +33 -0
- package/src/ConsoleInternal/components/utils/index.tsx +3 -0
- package/src/ConsoleInternal/components/utils/router.ts +47 -0
- package/src/ConsoleInternal/components/utils/status-box.tsx +94 -0
- package/src/ConsoleInternal/module/k8s/types.ts +53 -0
- package/src/ConsoleShared/index.ts +1 -0
- package/src/ConsoleShared/src/components/index.ts +7 -0
- package/src/ConsoleShared/src/components/layout/PageLayout.scss +29 -0
- package/src/ConsoleShared/src/components/markdown-extensions/MarkdownCopyClipboard.tsx +93 -0
- package/src/ConsoleShared/src/components/markdown-extensions/__tests__/MarkdownCopyClipboard.spec.tsx +25 -0
- package/src/ConsoleShared/src/components/markdown-extensions/__tests__/test-data.ts +5 -0
- package/src/ConsoleShared/src/components/markdown-extensions/admonition-extension.tsx +66 -0
- package/src/ConsoleShared/src/components/markdown-extensions/code-extension.tsx +25 -0
- package/src/ConsoleShared/src/components/markdown-extensions/const.ts +3 -0
- package/src/ConsoleShared/src/components/markdown-extensions/index.ts +5 -0
- package/src/ConsoleShared/src/components/markdown-extensions/inline-clipboard-extension.tsx +45 -0
- package/src/ConsoleShared/src/components/markdown-extensions/multiline-clipboard-extension.tsx +50 -0
- package/src/ConsoleShared/src/components/markdown-extensions/showdown-extension.scss +52 -0
- package/src/ConsoleShared/src/components/markdown-extensions/utils.ts +3 -0
- package/src/ConsoleShared/src/components/markdown-highlight-extension/MarkdownHighlightExtension.tsx +64 -0
- package/src/ConsoleShared/src/components/markdown-highlight-extension/highlight-consts.ts +9 -0
- package/src/ConsoleShared/src/components/markdown-highlight-extension/index.ts +1 -0
- package/src/ConsoleShared/src/components/modal/Modal.scss +3 -0
- package/src/ConsoleShared/src/components/modal/Modal.tsx +19 -0
- package/src/ConsoleShared/src/components/modal/index.ts +1 -0
- package/src/ConsoleShared/src/components/popper/Portal.tsx +23 -0
- package/src/ConsoleShared/src/components/popper/SimplePopper.tsx +90 -0
- package/src/ConsoleShared/src/components/popper/index.ts +2 -0
- package/src/ConsoleShared/src/components/spotlight/InteractiveSpotlight.tsx +58 -0
- package/src/ConsoleShared/src/components/spotlight/Spotlight.tsx +35 -0
- package/src/ConsoleShared/src/components/spotlight/StaticSpotlight.tsx +32 -0
- package/src/ConsoleShared/src/components/spotlight/index.ts +1 -0
- package/src/ConsoleShared/src/components/spotlight/spotlight.scss +63 -0
- package/src/ConsoleShared/src/components/status/GenericStatus.tsx +33 -0
- package/src/ConsoleShared/src/components/status/NotStartedIcon.tsx +27 -0
- package/src/ConsoleShared/src/components/status/PopoverStatus.tsx +42 -0
- package/src/ConsoleShared/src/components/status/Status.tsx +38 -0
- package/src/ConsoleShared/src/components/status/StatusIconAndText.tsx +42 -0
- package/src/ConsoleShared/src/components/status/icons.tsx +77 -0
- package/src/ConsoleShared/src/components/status/index.tsx +1 -0
- package/src/ConsoleShared/src/components/status/statuses.tsx +36 -0
- package/src/ConsoleShared/src/components/status/types.ts +7 -0
- package/src/ConsoleShared/src/components/utils/FallbackImg.tsx +20 -0
- package/src/ConsoleShared/src/components/utils/index.ts +1 -0
- package/src/ConsoleShared/src/constants/index.ts +1 -0
- package/src/ConsoleShared/src/constants/ui.ts +1 -0
- package/src/ConsoleShared/src/hooks/index.ts +6 -0
- package/src/ConsoleShared/src/hooks/scroll.ts +52 -0
- package/src/ConsoleShared/src/hooks/useBoundingClientRect.ts +18 -0
- package/src/ConsoleShared/src/hooks/useEventListener.ts +14 -0
- package/src/ConsoleShared/src/hooks/useForceRender.ts +6 -0
- package/src/ConsoleShared/src/hooks/useResizeObserver.ts +20 -0
- package/src/ConsoleShared/src/hooks/useScrollShadows.ts +45 -0
- package/src/ConsoleShared/src/index.ts +4 -0
- package/src/ConsoleShared/src/utils/index.ts +1 -0
- package/src/ConsoleShared/src/utils/useCombineRefs.ts +17 -0
- package/src/HelpTopicDrawer.tsx +124 -0
- package/src/HelpTopicPanelContent.tsx +152 -0
- package/src/QuickStartCatalogPage.tsx +190 -0
- package/src/QuickStartCloseModal.tsx +47 -0
- package/src/QuickStartController.tsx +113 -0
- package/src/QuickStartDrawer.scss +11 -0
- package/src/QuickStartDrawer.tsx +265 -0
- package/src/QuickStartMarkdownView.tsx +75 -0
- package/src/QuickStartPanelContent.scss +46 -0
- package/src/QuickStartPanelContent.tsx +153 -0
- package/src/__tests__/quick-start-utils.spec.tsx +16 -0
- package/src/catalog/Catalog/QuickStartCatalogHeader.tsx +18 -0
- package/src/catalog/Catalog/QuickStartCatalogSection.tsx +9 -0
- package/src/catalog/Catalog/QuickStartCatalogToolbar.tsx +12 -0
- package/src/catalog/Catalog/index.ts +3 -0
- package/src/catalog/QuickStartCatalog.scss +8 -0
- package/src/catalog/QuickStartCatalog.tsx +42 -0
- package/src/catalog/QuickStartTile.scss +11 -0
- package/src/catalog/QuickStartTile.tsx +105 -0
- package/src/catalog/QuickStartTileDescription.scss +29 -0
- package/src/catalog/QuickStartTileDescription.tsx +79 -0
- package/src/catalog/QuickStartTileFooter.tsx +101 -0
- package/src/catalog/QuickStartTileFooterExternal.tsx +40 -0
- package/src/catalog/QuickStartTileHeader.scss +12 -0
- package/src/catalog/QuickStartTileHeader.tsx +77 -0
- package/src/catalog/Toolbar/QuickStartCatalogFilter.scss +25 -0
- package/src/catalog/Toolbar/QuickStartCatalogFilter.tsx +34 -0
- package/src/catalog/Toolbar/QuickStartCatalogFilterItems.tsx +199 -0
- package/src/catalog/__tests__/QuickStartCatalog.spec.tsx +35 -0
- package/src/catalog/__tests__/QuickStartTile.spec.tsx +38 -0
- package/src/catalog/__tests__/QuickStartTileDescription.spec.tsx +44 -0
- package/src/catalog/index.ts +9 -0
- package/src/controller/QuickStartConclusion.tsx +63 -0
- package/src/controller/QuickStartContent.scss +12 -0
- package/src/controller/QuickStartContent.tsx +72 -0
- package/src/controller/QuickStartFooter.scss +13 -0
- package/src/controller/QuickStartFooter.tsx +128 -0
- package/src/controller/QuickStartIntroduction.scss +35 -0
- package/src/controller/QuickStartIntroduction.tsx +66 -0
- package/src/controller/QuickStartTaskHeader.scss +58 -0
- package/src/controller/QuickStartTaskHeader.tsx +116 -0
- package/src/controller/QuickStartTaskHeaderList.scss +17 -0
- package/src/controller/QuickStartTaskHeaderList.tsx +35 -0
- package/src/controller/QuickStartTaskReview.scss +30 -0
- package/src/controller/QuickStartTaskReview.tsx +81 -0
- package/src/controller/QuickStartTasks.scss +89 -0
- package/src/controller/QuickStartTasks.tsx +75 -0
- package/src/controller/__tests__/QuickStartConclusion.spec.tsx +95 -0
- package/src/controller/__tests__/QuickStartContent.spec.tsx +52 -0
- package/src/controller/__tests__/QuickStartFooter.spec.tsx +148 -0
- package/src/controller/__tests__/QuickStartTaskHeader.spec.tsx +56 -0
- package/src/controller/__tests__/QuickStartTaskReview.spec.tsx +45 -0
- package/src/controller/__tests__/QuickStartTasks.spec.tsx +81 -0
- package/src/data/mocks/json/explore-pipeline-quickstart.ts +66 -0
- package/src/data/mocks/json/explore-serverless-quickstart.ts +90 -0
- package/src/data/mocks/json/monitor-sampleapp-quickstart.ts +77 -0
- package/src/data/mocks/json/tour-icons.ts +3 -0
- package/src/data/mocks/yamls/add-healthchecks-quickstart.yaml +67 -0
- package/src/data/mocks/yamls/explore-pipeline-quickstart.yaml +57 -0
- package/src/data/mocks/yamls/explore-serverless-quickstart.yaml +83 -0
- package/src/data/mocks/yamls/install-associate-pipeline-quickstart.yaml +74 -0
- package/src/data/mocks/yamls/monitor-sampleapp-quickstart.yaml +66 -0
- package/src/data/mocks/yamls/sample-application-quickstart.yaml +97 -0
- package/src/data/mocks/yamls/serverless-application-quickstart.yaml +141 -0
- package/src/data/quick-start-test-data.ts +10 -0
- package/src/data/test-utils.ts +11 -0
- package/src/declaration.d.ts +2 -0
- package/src/index.ts +17 -0
- package/src/locales/en/quickstart.json +46 -0
- package/src/styles/_base.scss +54 -0
- package/src/styles/_dark-custom-override.scss +62 -0
- package/src/styles/legacy-bootstrap/README.md +21 -0
- package/src/styles/legacy-bootstrap/_code.scss +44 -0
- package/src/styles/legacy-bootstrap/_tables.scss +38 -0
- package/src/styles/legacy-bootstrap/_type.scss +90 -0
- package/src/styles/legacy-bootstrap/_variables.scss +48 -0
- package/src/styles/legacy-bootstrap.scss +5 -0
- package/src/styles/patternfly-global-entry.ts +1 -0
- package/src/styles/patternfly-global.scss +28 -0
- package/src/styles/patternfly-nested-entry.ts +1 -0
- package/src/styles/patternfly-nested.scss +18 -0
- package/src/styles/quickstarts-standalone-entry.ts +1 -0
- package/src/styles/quickstarts-standalone.scss +7 -0
- package/src/styles/style.scss +12 -0
- package/src/styles/vendor-entry.ts +1 -0
- package/src/styles/vendor.scss +7 -0
- package/src/utils/PluralResolver.ts +356 -0
- package/src/utils/asciidoc-procedure-parser.ts +132 -0
- package/src/utils/const.ts +10 -0
- package/src/utils/help-topic-context.tsx +74 -0
- package/src/utils/help-topic-types.ts +16 -0
- package/src/utils/quick-start-context.tsx +477 -0
- package/src/utils/quick-start-types.ts +72 -0
- package/src/utils/quick-start-utils.ts +92 -0
- package/src/utils/useLocalStorage.ts +38 -0
package/README.md
CHANGED
|
@@ -262,12 +262,21 @@ The quickstarts package is being extended to support a side panel that displays
|
|
|
262
262
|
### Help Topic type definition
|
|
263
263
|
|
|
264
264
|
```ts
|
|
265
|
+
type HelpTopicLink = {
|
|
266
|
+
href: string;
|
|
267
|
+
text?: string;
|
|
268
|
+
// open link in new tab
|
|
269
|
+
newTab?: boolean;
|
|
270
|
+
// add PF icon indicating link is external
|
|
271
|
+
isExternal?: boolean;
|
|
272
|
+
};
|
|
273
|
+
|
|
265
274
|
type HelpTopic = {
|
|
266
|
-
name: string;
|
|
267
|
-
title: string;
|
|
268
|
-
tags: string[];
|
|
269
|
-
content: string;
|
|
270
|
-
links:
|
|
275
|
+
name: string;
|
|
276
|
+
title: string;
|
|
277
|
+
tags: string[];
|
|
278
|
+
content: string;
|
|
279
|
+
links: HelpTopicLink[];
|
|
271
280
|
};
|
|
272
281
|
```
|
|
273
282
|
|
|
@@ -283,21 +292,12 @@ type HelpTopic = {
|
|
|
283
292
|
|
|
284
293
|
Etiam viverra et tortor et maximus. Aliquam quis scelerisque metus. Proin luctus pretium sodales. Mauris nibh nibh, auctor eu scelerisque et, hendrerit a metus. Vivamus pharetra bibendum finibus. Sed a pulvinar ipsum. Fusce pharetra venenatis porttitor. Praesent justo metus, consectetur quis erat id, congue varius metus. Suspendisse dui est, tempor nec diam quis, facilisis sodales erat. Curabitur viverra convallis ex. Ut egestas condimentum augue, id euismod leo volutpat vitae. Quisque aliquet ac dolor quis pretium. Nunc at nibh quis arcu maximus elementum vel a mi.
|
|
285
294
|
links:
|
|
286
|
-
- '
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
- page-3
|
|
293
|
-
title: Workspace
|
|
294
|
-
content: |-
|
|
295
|
-
**A Workspace** is...
|
|
296
|
-
|
|
297
|
-
Fusce nunc risus, vehicula feugiat pellentesque sit amet, pretium non urna. Phasellus nibh mi, ornare quis euismod a, iaculis et eros. Vivamus auctor nunc odio, quis porttitor diam pellentesque nec. In et varius tellus, eget porta urna. Etiam bibendum, est eget mollis lobortis, velit risus efficitur lacus, sed pulvinar sem est vel libero. In sodales placerat tincidunt. Proin vitae risus elit. Ut lobortis ligula est, cursus rhoncus enim scelerisque ac. Donec lacus nisl, tempor porta hendrerit nec, volutpat vitae arcu. Curabitur ornare ullamcorper mi in tincidunt. Aenean efficitur posuere auctor. Pellentesque accumsan mauris vel arcu congue, nec sagittis nisl condimentum. Suspendisse mauris nulla, dignissim at viverra sed, fringilla eu purus.
|
|
298
|
-
links:
|
|
299
|
-
- '[Creating quick starts](https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html)'
|
|
300
|
-
- '[Redhat Console](https://console.redhat.com/)'
|
|
295
|
+
- text: 'Creating quick starts (external)'
|
|
296
|
+
href: 'https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html'
|
|
297
|
+
isExternal: true
|
|
298
|
+
- text: 'Redhat Console (opens in new tab)'
|
|
299
|
+
href: 'https://console.redhat.com'
|
|
300
|
+
newTab: true
|
|
301
301
|
```
|
|
302
302
|
|
|
303
303
|
### Usage Example
|
|
@@ -2,3 +2,4 @@ export { default as MarkdownCopyClipboard } from './MarkdownCopyClipboard';
|
|
|
2
2
|
export { default as useInlineCopyClipboardShowdownExtension } from './inline-clipboard-extension';
|
|
3
3
|
export { default as useMultilineCopyClipboardShowdownExtension } from './multiline-clipboard-extension';
|
|
4
4
|
export { default as useAdmonitionShowdownExtension } from './admonition-extension';
|
|
5
|
+
export { default as useCodeShowdownExtension } from './code-extension';
|
|
@@ -3,19 +3,25 @@ import * as React from 'react';
|
|
|
3
3
|
import { QuickStartContextValues } from './utils/quick-start-context';
|
|
4
4
|
import { HelpTopic } from './utils/help-topic-types';
|
|
5
5
|
export interface HelpTopicContainerProps extends React.HTMLProps<HTMLDivElement> {
|
|
6
|
+
/** array of HelpTopics */
|
|
6
7
|
helpTopics: HelpTopic[];
|
|
8
|
+
/** text resources object
|
|
9
|
+
* Add custom strings: https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/module#localization
|
|
10
|
+
*/
|
|
7
11
|
resourceBundle?: any;
|
|
12
|
+
/** language of the current resource bundle */
|
|
8
13
|
language?: string;
|
|
14
|
+
/** if true, will show a loading spinner on the catalog page (default false) */
|
|
9
15
|
loading?: boolean;
|
|
10
16
|
/**
|
|
11
17
|
* Additional markdown extensions and renderers to use
|
|
12
|
-
*
|
|
13
|
-
* https://github.com/openshift/console/blob/master/frontend/packages/console-app/src/components/quick-starts/utils/quick-start-context.tsx#L235
|
|
18
|
+
* Example usage: https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/module#markdown-extensions
|
|
14
19
|
*/
|
|
15
20
|
markdown?: {
|
|
16
21
|
extensions?: any[];
|
|
17
22
|
renderExtension?: (docContext: HTMLDocument, rootSelector: string) => React.ReactNode;
|
|
18
23
|
};
|
|
24
|
+
/** additional quick start context props */
|
|
19
25
|
contextProps?: QuickStartContextValues;
|
|
20
26
|
}
|
|
21
27
|
export declare const HelpTopicContainer: React.FC<HelpTopicContainerProps>;
|
|
@@ -3,32 +3,51 @@ import * as React from 'react';
|
|
|
3
3
|
import { QuickStartContextValues } from './utils/quick-start-context';
|
|
4
4
|
import { QuickStart, AllQuickStartStates } from './utils/quick-start-types';
|
|
5
5
|
export interface QuickStartContainerProps extends React.HTMLProps<HTMLDivElement> {
|
|
6
|
+
/** array of quick starts */
|
|
6
7
|
quickStarts: QuickStart[];
|
|
8
|
+
/** id of the currently active quick start */
|
|
7
9
|
activeQuickStartID: string;
|
|
10
|
+
/** setter for the active quick starts */
|
|
8
11
|
setActiveQuickStartID: React.Dispatch<React.SetStateAction<string>>;
|
|
12
|
+
/** quick starts state object */
|
|
9
13
|
allQuickStartStates: AllQuickStartStates;
|
|
14
|
+
/** setter for the quick starts state object */
|
|
10
15
|
setAllQuickStartStates: React.Dispatch<React.SetStateAction<AllQuickStartStates>>;
|
|
16
|
+
/** content to render within the container */
|
|
11
17
|
children?: React.ReactNode;
|
|
18
|
+
/** element to render the drawer panel into */
|
|
12
19
|
appendTo?: HTMLElement | (() => HTMLElement);
|
|
20
|
+
/** if true, the panel will take up the full browser width */
|
|
13
21
|
fullWidth?: boolean;
|
|
22
|
+
/** callback when an in-progress quick start is closed */
|
|
14
23
|
onCloseInProgress?: any;
|
|
24
|
+
/** callback when a not-in-progress quick start is closed */
|
|
15
25
|
onCloseNotInProgress?: any;
|
|
26
|
+
/** true to show footer buttons in the catalog tiles (default true) */
|
|
16
27
|
showCardFooters?: boolean;
|
|
28
|
+
/** true to use legacy drawer header variant colors */
|
|
17
29
|
useLegacyHeaderColors?: boolean;
|
|
30
|
+
/** text resources object */
|
|
18
31
|
resourceBundle?: any;
|
|
32
|
+
/** language of the current resource bundle
|
|
33
|
+
* Add custom strings: https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/module#localization
|
|
34
|
+
*/
|
|
19
35
|
language?: string;
|
|
36
|
+
/** if true, will show a loading spinner on the catalog page (default false) */
|
|
20
37
|
loading?: boolean;
|
|
38
|
+
/** if true, will update the browser URL with ?quickstart={ID} (default true) */
|
|
21
39
|
useQueryParams?: boolean;
|
|
40
|
+
/** if true, the TaskReview component, aka "Check your work", will be shown regardless of task status */
|
|
22
41
|
alwaysShowTaskReview?: boolean;
|
|
23
42
|
/**
|
|
24
43
|
* Additional markdown extensions and renderers to use
|
|
25
|
-
*
|
|
26
|
-
* https://github.com/openshift/console/blob/master/frontend/packages/console-app/src/components/quick-starts/utils/quick-start-context.tsx#L235
|
|
44
|
+
* Example usage: https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/module#markdown-extensions
|
|
27
45
|
*/
|
|
28
46
|
markdown?: {
|
|
29
47
|
extensions?: any[];
|
|
30
48
|
renderExtension?: (docContext: HTMLDocument, rootSelector: string) => React.ReactNode;
|
|
31
49
|
};
|
|
50
|
+
/** additional quick start context props */
|
|
32
51
|
contextProps?: QuickStartContextValues;
|
|
33
52
|
}
|
|
34
53
|
export declare const QuickStartContainer: React.FC<QuickStartContainerProps>;
|
package/dist/index.d.ts
CHANGED
|
@@ -11,5 +11,6 @@ export * from './utils/help-topic-context';
|
|
|
11
11
|
export * from './utils/help-topic-types';
|
|
12
12
|
export * from './utils/quick-start-utils';
|
|
13
13
|
export * from './utils/useLocalStorage';
|
|
14
|
+
export * from './utils/asciidoc-procedure-parser';
|
|
14
15
|
export { default as QuickStartPanelContent } from './QuickStartPanelContent';
|
|
15
16
|
export { default as QuickStartCloseModal } from './QuickStartCloseModal';
|
package/dist/index.es.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import React__default, { createContext, useCallback, useEffect, useState } from 'react';
|
|
3
|
-
import { Card, CardHeader, CardActions, CardTitle, CardBody, CardFooter, Modal as Modal$1, Tooltip, Alert, Popover, PopoverPosition, Button, Text, TextVariants, TextList, TextListItem, Flex, FlexItem, Title, Label, Gallery, GalleryItem, ToolbarItem, SearchInput, Select, SelectVariant, SelectOption, Toolbar, ToolbarContent, EmptyState, EmptyStateIcon, EmptyStateBody, EmptyStatePrimary, Divider, ModalVariant, WizardNavItem, List, ExpandableSection, ListItem, Radio, DrawerPanelContent, DrawerHead, DrawerActions, DrawerCloseButton, DrawerPanelBody, Drawer, DrawerContent, DrawerContentBody, OptionsMenuItem, OptionsMenu, OptionsMenuToggle } from '@patternfly/react-core';
|
|
3
|
+
import { Card, CardHeader, CardActions, CardTitle, CardBody, CardFooter, Modal as Modal$1, Tooltip, Alert, CodeBlock, Popover, PopoverPosition, Button, Text, TextVariants, TextList, TextListItem, Flex, FlexItem, Title, Label, Gallery, GalleryItem, ToolbarItem, SearchInput, Select, SelectVariant, SelectOption, Toolbar, ToolbarContent, EmptyState, EmptyStateIcon, EmptyStateBody, EmptyStatePrimary, Divider, ModalVariant, WizardNavItem, List, ExpandableSection, ListItem, Radio, DrawerPanelContent, DrawerHead, DrawerActions, DrawerCloseButton, DrawerPanelBody, Drawer, DrawerContent, DrawerContentBody, OptionsMenuItem, Stack, StackItem, OptionsMenu, OptionsMenuToggle } from '@patternfly/react-core';
|
|
4
4
|
import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
|
|
5
5
|
import { css } from '@patternfly/react-styles';
|
|
6
6
|
import RocketIcon from '@patternfly/react-icons/dist/js/icons/rocket-icon';
|
|
@@ -1315,6 +1315,20 @@ const useAdmonitionShowdownExtension = () => {
|
|
|
1315
1315
|
}), []);
|
|
1316
1316
|
};
|
|
1317
1317
|
|
|
1318
|
+
const useCodeShowdownExtension = () => {
|
|
1319
|
+
return React.useMemo(() => ({
|
|
1320
|
+
type: 'output',
|
|
1321
|
+
regex: /<pre><code>(.*?)\n?<\/code><\/pre>/g,
|
|
1322
|
+
replace: (text, content) => {
|
|
1323
|
+
if (!content) {
|
|
1324
|
+
return text;
|
|
1325
|
+
}
|
|
1326
|
+
const pfCodeBlock = React.createElement(CodeBlock, null, content);
|
|
1327
|
+
return removeTemplateWhitespace(renderToStaticMarkup(pfCodeBlock));
|
|
1328
|
+
},
|
|
1329
|
+
}), []);
|
|
1330
|
+
};
|
|
1331
|
+
|
|
1318
1332
|
const FallbackImg = ({ src, alt, className, fallback }) => {
|
|
1319
1333
|
const [isSrcValid, setIsSrcValid] = React.useState(true);
|
|
1320
1334
|
if (src && isSrcValid) {
|
|
@@ -1555,6 +1569,7 @@ const QuickStartMarkdownView = ({ content, exactHeight, className, }) => {
|
|
|
1555
1569
|
const inlineCopyClipboardShowdownExtension = useInlineCopyClipboardShowdownExtension();
|
|
1556
1570
|
const multilineCopyClipboardShowdownExtension = useMultilineCopyClipboardShowdownExtension();
|
|
1557
1571
|
const admonitionShowdownExtension = useAdmonitionShowdownExtension();
|
|
1572
|
+
const codeShowdownExtension = useCodeShowdownExtension();
|
|
1558
1573
|
return (React.createElement(SyncMarkdownView, { inline: true, content: content, exactHeight: exactHeight, extensions: [
|
|
1559
1574
|
{
|
|
1560
1575
|
type: 'lang',
|
|
@@ -1577,6 +1592,7 @@ const QuickStartMarkdownView = ({ content, exactHeight, className, }) => {
|
|
|
1577
1592
|
inlineCopyClipboardShowdownExtension,
|
|
1578
1593
|
multilineCopyClipboardShowdownExtension,
|
|
1579
1594
|
admonitionShowdownExtension,
|
|
1595
|
+
codeShowdownExtension,
|
|
1580
1596
|
...(markdown ? markdown.extensions : []),
|
|
1581
1597
|
], renderExtension: (docContext, rootSelector) => (React.createElement(React.Fragment, null,
|
|
1582
1598
|
React.createElement(MarkdownHighlightExtension, { docContext: docContext, rootSelector: rootSelector }),
|
|
@@ -1696,7 +1712,7 @@ const QuickStartTile = ({ quickStart, status, isActive, onClick = () => { }, })
|
|
|
1696
1712
|
|
|
1697
1713
|
const QuickStartCatalog = ({ quickStarts }) => {
|
|
1698
1714
|
const { activeQuickStartID, allQuickStartStates } = React.useContext(QuickStartContext);
|
|
1699
|
-
return (React.createElement("div", { className: "pfext-page-layout__content
|
|
1715
|
+
return (React.createElement("div", { className: "pfext-page-layout__content" },
|
|
1700
1716
|
React.createElement(Gallery, { className: "pfext-quick-start-catalog__gallery", hasGutter: true }, quickStarts.map((quickStart) => {
|
|
1701
1717
|
const { metadata: { name: id }, } = quickStart;
|
|
1702
1718
|
return (React.createElement(GalleryItem, { key: id, className: "pfext-quick-start-catalog__gallery-item" },
|
|
@@ -1901,7 +1917,7 @@ const QuickStartCatalogHeader = ({ title, hint, }) => (React.createElement("div"
|
|
|
1901
1917
|
React.createElement("h1", { "data-pf-content": "true", className: "pfext-page-layout__title" }, title),
|
|
1902
1918
|
hint && React.createElement("div", { className: "pfext-page-layout__hint" }, hint)));
|
|
1903
1919
|
|
|
1904
|
-
const QuickStartCatalogSection = ({ children }) => (React.createElement("div", { className: "pfext-page-layout__content
|
|
1920
|
+
const QuickStartCatalogSection = ({ children }) => (React.createElement("div", { className: "pfext-page-layout__content" }, children));
|
|
1905
1921
|
|
|
1906
1922
|
const QuickStartCatalogToolbar = ({ children }) => (React.createElement(Toolbar, { usePageInsets: true, className: "pfext-quick-start-catalog-filter__flex" }, children));
|
|
1907
1923
|
|
|
@@ -2336,6 +2352,7 @@ const useValuesForHelpTopicContext = (value = {}) => {
|
|
|
2336
2352
|
};
|
|
2337
2353
|
|
|
2338
2354
|
const HelpTopicPanelContent = (_a) => {
|
|
2355
|
+
var _b, _c;
|
|
2339
2356
|
var { activeHelpTopic = null, filteredHelpTopics = [], isResizable = true, onClose } = _a, props = __rest(_a, ["activeHelpTopic", "filteredHelpTopics", "isResizable", "onClose"]);
|
|
2340
2357
|
const { setActiveHelpTopicByName } = React.useContext(HelpTopicContext);
|
|
2341
2358
|
const [isHelpTopicMenuOpen, setIsHelpTopicMenuOpen] = React.useState(false);
|
|
@@ -2354,10 +2371,11 @@ const HelpTopicPanelContent = (_a) => {
|
|
|
2354
2371
|
const paddingContainer = (children) => React.createElement("div", { style: { padding: '24px' } }, children);
|
|
2355
2372
|
const panelBodyItems = (React.createElement(React.Fragment, null,
|
|
2356
2373
|
paddingContainer(React.createElement(QuickStartMarkdownView, { content: activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.content })),
|
|
2357
|
-
React.createElement(Divider, null),
|
|
2358
|
-
paddingContainer(activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.links.map((
|
|
2359
|
-
return React.createElement(
|
|
2360
|
-
|
|
2374
|
+
((_b = activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.links) === null || _b === void 0 ? void 0 : _b.length) && React.createElement(Divider, null),
|
|
2375
|
+
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) => {
|
|
2376
|
+
return (React.createElement(StackItem, { key: index },
|
|
2377
|
+
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)));
|
|
2378
|
+
})))));
|
|
2361
2379
|
const content = (React.createElement(DrawerPanelContent, Object.assign({ isResizable: isResizable, className: "pfext-quick-start__base" }, props),
|
|
2362
2380
|
React.createElement("div", null,
|
|
2363
2381
|
React.createElement(DrawerHead, null,
|
|
@@ -2392,20 +2410,8 @@ const HelpTopicContainer = (_a) => {
|
|
|
2392
2410
|
React.createElement(HelpTopicDrawer, Object.assign({}, drawerProps), children)));
|
|
2393
2411
|
};
|
|
2394
2412
|
const HelpTopicDrawer = (_a) => {
|
|
2395
|
-
var {
|
|
2396
|
-
// helpTopics,
|
|
2397
|
-
children } = _a, props = __rest(_a, ["children"]);
|
|
2413
|
+
var { children } = _a, props = __rest(_a, ["children"]);
|
|
2398
2414
|
const { activeHelpTopic, filteredHelpTopics, setActiveHelpTopicByName } = React.useContext(HelpTopicContext);
|
|
2399
|
-
// Leave here if query param is desired for help topics later
|
|
2400
|
-
// React.useEffect(() => {
|
|
2401
|
-
// const params = new URLSearchParams(window.location.search);
|
|
2402
|
-
// // if there is a quick start param, but the quick start is not active, set it
|
|
2403
|
-
// // this can happen if a new browser session is opened or an incognito window for example
|
|
2404
|
-
// const helpTopicNameFromParam = params.get(HELP_TOPIC_NAME_KEY) || '';
|
|
2405
|
-
// if (helpTopicNameFromParam) {
|
|
2406
|
-
// setActiveHelpTopicByName(helpTopicNameFromParam);
|
|
2407
|
-
// }
|
|
2408
|
-
// }, [inContextHelpTopics, setActiveHelpTopicByName]);
|
|
2409
2415
|
const onClose = () => {
|
|
2410
2416
|
setActiveHelpTopicByName('');
|
|
2411
2417
|
};
|
|
@@ -2452,5 +2458,105 @@ const useLocalStorage = (key, initialValue) => {
|
|
|
2452
2458
|
return [storedValue, setValue];
|
|
2453
2459
|
};
|
|
2454
2460
|
|
|
2455
|
-
|
|
2461
|
+
/* eslint-disable */
|
|
2462
|
+
// Brought in from dev to publish this with QS module
|
|
2463
|
+
// Dev now imports from here
|
|
2464
|
+
const ProcQuickStartParser = (quickStart, environmentVariables) => {
|
|
2465
|
+
var _a;
|
|
2466
|
+
const replaceEnvironmentVariables = (s) => s === null || s === void 0 ? void 0 : s.replace(/\${(\w+)}/, (substring, name) => {
|
|
2467
|
+
return environmentVariables ? ([name] ? environmentVariables[name] : substring) : substring;
|
|
2468
|
+
});
|
|
2469
|
+
quickStart.spec.tasks = (_a = quickStart.spec.tasks) === null || _a === void 0 ? void 0 : _a.map((task, index) => {
|
|
2470
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
2471
|
+
let proc;
|
|
2472
|
+
let answer;
|
|
2473
|
+
if (typeof task === 'string') {
|
|
2474
|
+
proc = task;
|
|
2475
|
+
answer = {};
|
|
2476
|
+
}
|
|
2477
|
+
else {
|
|
2478
|
+
// @ts-ignore
|
|
2479
|
+
proc = task.proc;
|
|
2480
|
+
answer = task;
|
|
2481
|
+
// @ts-ignore
|
|
2482
|
+
delete task.proc;
|
|
2483
|
+
}
|
|
2484
|
+
let description = '', procedure, verification, title, summaryFailed, success, reviewFailed, prerequisites;
|
|
2485
|
+
if (proc) {
|
|
2486
|
+
const taskDOM = document.createElement('div');
|
|
2487
|
+
taskDOM.innerHTML = proc;
|
|
2488
|
+
// remove the screencapture images
|
|
2489
|
+
taskDOM.querySelectorAll('.imageblock.screencapture').forEach((node) => {
|
|
2490
|
+
var _a;
|
|
2491
|
+
(_a = node.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(node);
|
|
2492
|
+
});
|
|
2493
|
+
title = (_a = taskDOM
|
|
2494
|
+
.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();
|
|
2495
|
+
let sectionBody = taskDOM.querySelector('.sectionbody');
|
|
2496
|
+
if (!(sectionBody === null || sectionBody === void 0 ? void 0 : sectionBody.hasChildNodes())) {
|
|
2497
|
+
// possibly in other templates, where we want to look for article
|
|
2498
|
+
sectionBody = taskDOM.querySelector('article');
|
|
2499
|
+
}
|
|
2500
|
+
if (sectionBody) {
|
|
2501
|
+
for (let i = 0; i < sectionBody.children.length || 0; i++) {
|
|
2502
|
+
/**
|
|
2503
|
+
child typically looks like:
|
|
2504
|
+
|
|
2505
|
+
<div class="paragraph|olist|ulist|admonitionblock">
|
|
2506
|
+
<div class="title">Procedure|Prerequisites|Verification|Note|Warning</div>
|
|
2507
|
+
<ol|ul class="arabic">
|
|
2508
|
+
<li>
|
|
2509
|
+
<li>...
|
|
2510
|
+
</ol|ul>
|
|
2511
|
+
</div>
|
|
2512
|
+
|
|
2513
|
+
And the below code extracts the <ol> or <ul>
|
|
2514
|
+
Except for when there is no <div class="title|heading"/>, then the description is extracted
|
|
2515
|
+
in the else if below
|
|
2516
|
+
*/
|
|
2517
|
+
const child = sectionBody.children.item(i);
|
|
2518
|
+
// find the title
|
|
2519
|
+
const sectionTitle = child === null || child === void 0 ? void 0 : child.querySelector('.heading,.title');
|
|
2520
|
+
// should this section be assigned to a specific section
|
|
2521
|
+
const sectionTitleText = (_b = sectionTitle === null || sectionTitle === void 0 ? void 0 : sectionTitle.textContent) === null || _b === void 0 ? void 0 : _b.trim();
|
|
2522
|
+
const isKnownSection = ['Procedure', 'Verification', 'Prerequisites'].includes((_c = sectionTitle === null || sectionTitle === void 0 ? void 0 : sectionTitle.textContent) === null || _c === void 0 ? void 0 : _c.trim());
|
|
2523
|
+
if (isKnownSection) {
|
|
2524
|
+
switch (sectionTitleText) {
|
|
2525
|
+
case 'Procedure':
|
|
2526
|
+
procedure = (_d = child === null || child === void 0 ? void 0 : child.querySelector(':not(.heading):not(.title)')) === null || _d === void 0 ? void 0 : _d.outerHTML.trim();
|
|
2527
|
+
break;
|
|
2528
|
+
case 'Verification':
|
|
2529
|
+
verification = (_e = child === null || child === void 0 ? void 0 : child.querySelector(':not(.heading):not(.title)')) === null || _e === void 0 ? void 0 : _e.outerHTML.trim();
|
|
2530
|
+
break;
|
|
2531
|
+
case 'Prerequisites':
|
|
2532
|
+
prerequisites = (_f = child === null || child === void 0 ? void 0 : child.querySelector(':not(.heading):not(.title)')) === null || _f === void 0 ? void 0 : _f.outerHTML.trim();
|
|
2533
|
+
break;
|
|
2534
|
+
}
|
|
2535
|
+
}
|
|
2536
|
+
else if (!procedure) {
|
|
2537
|
+
// Otherwise if it comes before a procedure it's part of the description
|
|
2538
|
+
description = description + (child === null || child === void 0 ? void 0 : child.outerHTML.trim());
|
|
2539
|
+
}
|
|
2540
|
+
}
|
|
2541
|
+
}
|
|
2542
|
+
success = (_g = taskDOM.querySelector('.qs-summary.success')) === null || _g === void 0 ? void 0 : _g.innerHTML.trim();
|
|
2543
|
+
reviewFailed = (_h = taskDOM.querySelector('.qs-review.failed')) === null || _h === void 0 ? void 0 : _h.innerHTML.trim();
|
|
2544
|
+
summaryFailed = (_j = taskDOM.querySelector('.qs-summary.failed')) === null || _j === void 0 ? void 0 : _j.innerHTML.trim();
|
|
2545
|
+
}
|
|
2546
|
+
answer.title = replaceEnvironmentVariables(answer.title || title);
|
|
2547
|
+
answer.description = replaceEnvironmentVariables(answer.description || `${description} ${prerequisites || ''} ${procedure}`);
|
|
2548
|
+
answer.review = answer.review || {};
|
|
2549
|
+
answer.review.instructions = replaceEnvironmentVariables(((_k = answer.review) === null || _k === void 0 ? void 0 : _k.instructions) || verification || 'Have you completed these steps?');
|
|
2550
|
+
answer.review.failedTaskHelp = replaceEnvironmentVariables(answer.review.failedTaskHelp ||
|
|
2551
|
+
reviewFailed ||
|
|
2552
|
+
'This task isn’t verified yet. Try the task again.');
|
|
2553
|
+
answer.summary = answer.summary || {};
|
|
2554
|
+
answer.summary.success = replaceEnvironmentVariables(answer.summary.success || success || 'You have completed this task!');
|
|
2555
|
+
answer.summary.failed = replaceEnvironmentVariables(answer.summary.failed || summaryFailed || 'Try the steps again.');
|
|
2556
|
+
return answer;
|
|
2557
|
+
});
|
|
2558
|
+
return quickStart;
|
|
2559
|
+
};
|
|
2560
|
+
|
|
2561
|
+
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 };
|
|
2456
2562
|
//# sourceMappingURL=index.es.js.map
|