@patternfly/patternfly-doc-core 1.4.0 → 1.6.0

package/src/components/Content.tsx

@@ -0,0 +1,61 @@
+import { Content as PFContent } from '@patternfly/react-core'
+import { ReactNode } from 'react'
+
+export const h1 = ({ children }: { children: ReactNode }) => (
+  <PFContent component="h1">{children}</PFContent>
+)
+export const h2 = ({ children }: { children: ReactNode }) => (
+  <PFContent component="h2">{children}</PFContent>
+)
+export const h3 = ({ children }: { children: ReactNode }) => (
+  <PFContent component="h3">{children}</PFContent>
+)
+export const h4 = ({ children }: { children: ReactNode }) => (
+  <PFContent component="h4">{children}</PFContent>
+)
+export const h5 = ({ children }: { children: ReactNode }) => (
+  <PFContent component="h5">{children}</PFContent>
+)
+export const h6 = ({ children }: { children: ReactNode }) => (
+  <PFContent component="h6">{children}</PFContent>
+)
+
+export const p = ({ children }: { children: ReactNode }) => (
+  <PFContent component="p">{children}</PFContent>
+)
+export const a = ({ children }: { children: ReactNode }) => (
+  <PFContent component="a">{children}</PFContent>
+)
+export const small = ({ children }: { children: ReactNode }) => (
+  <PFContent component="small">{children}</PFContent>
+)
+
+export const blockquote = ({ children }: { children: ReactNode }) => (
+  <PFContent component="blockquote">{children}</PFContent>
+)
+export const pre = ({ children }: { children: ReactNode }) => (
+  <PFContent component="pre">{children}</PFContent>
+)
+export const hr = ({ children }: { children: ReactNode }) => (
+  <PFContent component="hr">{children}</PFContent>
+)
+
+export const ul = ({ children }: { children: ReactNode }) => (
+  <PFContent component="ul">{children}</PFContent>
+)
+export const ol = ({ children }: { children: ReactNode }) => (
+  <PFContent component="ol">{children}</PFContent>
+)
+export const dl = ({ children }: { children: ReactNode }) => (
+  <PFContent component="dl">{children}</PFContent>
+)
+export const li = ({ children }: { children: ReactNode }) => (
+  <PFContent component="li">{children}</PFContent>
+)
+
+export const dt = ({ children }: { children: ReactNode }) => (
+  <PFContent component="dt">{children}</PFContent>
+)
+export const dd = ({ children }: { children: ReactNode }) => (
+  <PFContent component="dd">{children}</PFContent>
+)

package/src/components/ExampleToolbar.tsx

@@ -0,0 +1,296 @@
+// TODO remove this component it is not good and I don't like that I have to add it
+
+import React from 'react'
+import { Button, Form, Tooltip } from '@patternfly/react-core'
+import {
+  CodeEditor,
+  CodeEditorControl,
+  Language,
+} from '@patternfly/react-code-editor'
+import { convertToJSX } from '@patternfly/ast-helpers'
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon'
+import CodepenIcon from '@patternfly/react-icons/dist/esm/icons/codepen-icon'
+import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon'
+import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon'
+import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon'
+import ReplyAllIcon from '@patternfly/react-icons/dist/esm/icons/reply-all-icon'
+
+const copy = (textToCopy: string) => {
+  navigator.clipboard.writeText(textToCopy)
+}
+
+interface TrackEventValue {
+  event_category: string
+  event_label: string
+  value?: number
+}
+
+interface WindowWithGtag extends Window {
+  gtag?: (type: string, name: string, value: TrackEventValue) => void
+}
+const _window = window as WindowWithGtag
+/**
+ * Sends network call using Google Analytic's gtag function
+ * https://developers.google.com/analytics/devguides/collection/gtagjs/events#send_events
+ *
+ * @param name {string} - The value that will appear as the event action in Google Analytics Event reports.
+ * @param eventCategory {string} - The category of the event.
+ * @param eventLabel {string} - The label of the event.
+ * @param [value] {number} - An optional non-negative integer that will appear as the event value.
+ */
+const trackEvent = (
+  name: string,
+  eventCategory: string,
+  eventLabel: string,
+  value?: number,
+) => {
+  value ||= 0
+  if (_window?.gtag) {
+    _window?.gtag('event', name, {
+      // eslint-disable-next-line camelcase
+      event_category: eventCategory,
+      // eslint-disable-next-line camelcase
+      event_label: eventLabel,
+      // Optional non-negative integer
+      ...(value >= 0 && { value }),
+    })
+  }
+}
+
+function getLanguage(lang: string) {
+  if (lang === 'js') {
+    return Language.javascript
+  } else if (lang === 'ts') {
+    return Language.typescript
+  }
+
+  return lang as Language
+}
+
+interface ExampleToolbarProps {
+  fullscreenLink?: string
+  codeBoxParams?: any
+  lang: string
+  isFullscreen?: boolean
+  originalCode: string
+  code: string
+  setCode: (code: string) => void
+  exampleTitle?: string
+}
+
+export const ExampleToolbar = ({
+  // Link to fullscreen example page (each example has one)
+  fullscreenLink,
+  // Params to pass to codesandbox
+  codeBoxParams,
+  // Language of code
+  lang,
+  // Whether the example is fullscreen only
+  isFullscreen,
+  // Original version of the code
+  originalCode,
+  // Current code in editor
+  code,
+  // Callback to set code in parent component
+  setCode,
+  // Title of example used in creating unique labels
+  exampleTitle,
+}: ExampleToolbarProps) => {
+  const [isEditorOpen, setIsEditorOpen] = React.useState(false)
+  const [isCopied, setCopied] = React.useState(false)
+
+  const copyLabel = 'Copy code to clipboard'
+  const languageLabel = `Toggle ${lang.toUpperCase()} code`
+  const codesandboxLabel = 'Open example in CodeSandbox'
+  const fullscreenLabel = 'Open example in new window'
+  const convertLabel = 'Convert example from Typescript to JavaScript'
+  const undoAllLabel = 'Undo all changes'
+
+  const copyAriaLabel = `Copy ${exampleTitle} example code to clipboard`
+  const languageAriaLabel = `Toggle ${lang.toUpperCase()} code in ${exampleTitle} example`
+  const codesandboxAriaLabel = `Open ${exampleTitle} example in CodeSandbox`
+  const fullscreenAriaLabel = `Open ${exampleTitle} example in new window`
+  const convertAriaLabel = `Convert ${exampleTitle} example from Typescript to JavaScript`
+  const undoAllAriaLabel = `Undo all changes to ${exampleTitle}`
+
+  const editorControlProps = {
+    className: 'ws-code-editor-control',
+  }
+
+  const commonTooltipProps = {
+    exitDelay: 300,
+    maxWidth: 'var(--ws-code-editor--tooltip--MaxWidth)',
+  }
+
+  const copyCode = () => {
+    copy(code)
+    setCopied(true)
+  }
+
+  const customControls = (
+    <React.Fragment>
+      <CodeEditorControl
+        icon={
+          <React.Fragment>
+            <CodeIcon />
+            {' ' + lang.toUpperCase()}
+          </React.Fragment>
+        }
+        onClick={() => {
+          setIsEditorOpen(!isEditorOpen)
+          // 1 === expand code, 0 === collapse code
+          trackEvent(
+            'code_editor_control_click',
+            'click_event',
+            'TOGGLE_CODE',
+            isEditorOpen ? 0 : 1,
+          )
+        }}
+        tooltipProps={{
+          content: languageLabel,
+          ...commonTooltipProps,
+        }}
+        aria-label={languageAriaLabel}
+        aria-expanded={isEditorOpen}
+        {...editorControlProps}
+      />
+      <Tooltip
+        content={<div>{isCopied ? 'Code copied' : copyLabel}</div>}
+        maxWidth={(editorControlProps as any)?.maxWidth}
+        exitDelay={isCopied ? 300 : 1600}
+        onTooltipHidden={() => setCopied(false)}
+      >
+        <Button
+          onClick={() => {
+            copyCode()
+            trackEvent('code_editor_control_click', 'click_event', 'COPY_CODE')
+          }}
+          variant="plain"
+          aria-label={copyAriaLabel}
+          className={editorControlProps.className}
+        >
+          <CopyIcon />
+        </Button>
+      </Tooltip>
+      {codeBoxParams && (
+        <Form
+          aria-label={`${codesandboxAriaLabel} form`}
+          action="https://codesandbox.io/api/v1/sandboxes/define"
+          method="POST"
+          target="_blank"
+          style={{ display: 'inline-block' }}
+        >
+          <Tooltip
+            content={codesandboxLabel}
+            maxWidth={(editorControlProps as any).maxWidth}
+          >
+            <Button
+              aria-label={codesandboxAriaLabel}
+              variant="plain"
+              type="submit"
+              onClick={() => {
+                trackEvent(
+                  'code_editor_control_click',
+                  'click_event',
+                  'CODESANDBOX_LINK',
+                )
+              }}
+              className={editorControlProps.className}
+            >
+              <CodepenIcon />
+            </Button>
+          </Tooltip>
+          <input type="hidden" name="parameters" value={codeBoxParams} />
+        </Form>
+      )}
+      {fullscreenLink && (
+        <CodeEditorControl
+          component="a"
+          icon={<ExternalLinkAltIcon />}
+          href={fullscreenLink}
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label={fullscreenAriaLabel}
+          tooltipProps={{
+            content: fullscreenLabel,
+            ...commonTooltipProps,
+          }}
+          onClick={() => {
+            trackEvent(
+              'code_editor_control_click',
+              'click_event',
+              'FULLSCREEN_LINK',
+            )
+          }}
+          {...editorControlProps}
+        />
+      )}
+      {isEditorOpen && lang === 'ts' && (
+        <CodeEditorControl
+          icon={
+            <React.Fragment>
+              {'TS '}
+              <AngleDoubleRightIcon />
+              {' JS'}
+            </React.Fragment>
+          }
+          aria-label={convertAriaLabel}
+          tooltipProps={{
+            content: convertLabel,
+            ...commonTooltipProps,
+          }}
+          onClick={() => {
+            setCode(convertToJSX(code).code)
+            trackEvent('code_editor_control_click', 'click_event', 'TS_TO_JS')
+          }}
+          {...editorControlProps}
+        />
+      )}
+      {code !== originalCode && (
+        <CodeEditorControl
+          icon={<ReplyAllIcon />}
+          aria-label={undoAllAriaLabel}
+          tooltipProps={{
+            content: undoAllLabel,
+            ...commonTooltipProps,
+          }}
+          onClick={() => {
+            setCode(originalCode)
+            trackEvent('code_editor_control_click', 'click_event', 'RESET_CODE')
+          }}
+          {...editorControlProps}
+        />
+      )}
+    </React.Fragment>
+  )
+
+  // TODO: check if worth adding react, patternfly, and example types
+  // https://microsoft.github.io/monaco-editor/api/interfaces/monaco.languages.typescript.languageservicedefaults.html#addextralib
+  const onEditorDidMount = (_editor: any, monaco: any) => {
+    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+      jsx: true,
+      ...monaco.languages.typescript.typescriptDefaults.getCompilerOptions(),
+    })
+    monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+      noSemanticValidation: true,
+      noSyntaxValidation: true,
+      noSuggestionDiagnostics: true,
+      onlyVisible: true,
+    })
+  }
+
+  return (
+    <CodeEditor
+      customControls={customControls}
+      showEditor={isEditorOpen}
+      language={getLanguage(lang)}
+      height="400px"
+      code={code}
+      onChange={(newCode) => setCode(newCode)}
+      onEditorDidMount={onEditorDidMount}
+      isReadOnly={isFullscreen}
+      className={`${isEditorOpen ? 'ws-example-code-expanded ' : ''}ws-code-editor`}
+      isHeaderPlain
+    />
+  )
+}

package/src/components/LiveExample.astro

@@ -0,0 +1,7 @@
+---
+import { LiveExample as LiveExampleBase } from './LiveExample'
+
+const { src } = Astro.props
+---
+
+<LiveExampleBase src={src} client:only="react" />

package/src/components/LiveExample.tsx

@@ -0,0 +1,42 @@
+import React, { useState } from 'react'
+import { convertToReactComponent } from '@patternfly/ast-helpers'
+import * as reactCoreModule from '@patternfly/react-core'
+import { ExampleToolbar } from './ExampleToolbar'
+interface LiveExampleProps {
+  src: string
+}
+
+function getLivePreview(editorCode: string) {
+  const scope = { ...reactCoreModule, ...{ useState } }
+  const { code: transformedCode } = convertToReactComponent(editorCode)
+
+  const componentNames = Object.keys(scope)
+  const componentValues = Object.values(scope)
+
+  const getPreviewComponent = new Function(
+    'React',
+    ...componentNames,
+    transformedCode,
+  )
+  const PreviewComponent = getPreviewComponent(React, ...componentValues)
+
+  return <PreviewComponent />
+}
+
+export const LiveExample = ({ src }: LiveExampleProps) => {
+  const [code, setCode] = useState(src)
+  const livePreview = getLivePreview(code)
+
+  return (
+    <>
+      {livePreview}
+      <ExampleToolbar
+        originalCode={src}
+        code={code}
+        setCode={setCode}
+        lang="ts"
+        isFullscreen={false}
+      />
+    </>
+  )
+}

package/src/components/Masthead.astro

@@ -16,7 +16,7 @@ import { PageToggle } from './PageToggle'
 <PFMasthead>
   <MastheadMain>
     <MastheadToggle>
-      <PageToggle client:idle />
+      <PageToggle client:idle transition:persist />
     </MastheadToggle>
     <MastheadBrand>
       <MastheadLogo component="a" href="/">

package/src/components/NavEntry.tsx

@@ -6,9 +6,7 @@ export interface TextContentEntry {
   data: {
     id: string
     section: string
-    tab?: string
   }
-  collection: string
 }
 
 interface NavEntryProps {

package/src/components/NavSection.tsx

@@ -14,30 +14,10 @@ export const NavSection = ({
   sectionId,
   activeItem,
 }: NavSectionProps) => {
-  const isExpanded = window.location.pathname.includes(sectionId)
+  const isExpanded = window.location.pathname.includes(kebabCase(sectionId))
+  const isActive = entries.some((entry) => entry.id === activeItem)
 
-  const sortedNavEntries = entries.sort((a, b) =>
-    a.data.id.localeCompare(b.data.id),
-  )
-
-  const isActive = sortedNavEntries.some((entry) => entry.id === activeItem)
-
-  let navItems = sortedNavEntries
-  if (sectionId === 'components' || sectionId === 'layouts') {
-    // only display unique entry.data.id in the nav list if the section is components
-    navItems = [
-      ...sortedNavEntries
-        .reduce((map, entry) => {
-          if (!map.has(entry.data.id)) {
-            map.set(entry.data.id, entry)
-          }
-          return map
-        }, new Map())
-        .values(),
-    ]
-  }
-
-  const items = navItems.map((entry) => (
+  const items = entries.map((entry) => (
     <NavEntry
       key={entry.id}
       entry={entry}

package/src/components/Navigation.astro

@@ -2,6 +2,7 @@
 import { getCollection } from 'astro:content'
 
 import { Navigation as ReactNav } from './Navigation.tsx'
+import { TextContentEntry } from './NavEntry.tsx'
 
 import { content } from '../content'
 
@@ -13,12 +14,56 @@ const collections = await Promise.all(
   ),
 )
 
-const navEntries = collections.flat()
+const navDataRaw = collections.flat();
+const uniqueSections = new Set(navDataRaw.map((entry) => entry.data.section));
+const navData: Record<string, TextContentEntry[]> = {};
+
+const [orderedSections, unorderedSections] = Array.from(uniqueSections).reduce(
+    (acc, section) => {
+      if (!config.navSectionOrder) {
+        acc[1].push(section)
+        return acc
+      }
+
+      const index = config.navSectionOrder.indexOf(section)
+      if (index > -1) {
+        acc[0][index] = section
+      } else {
+        acc[1].push(section)
+      }
+      return acc
+    },
+    [[], []] as [string[], string[]],
+  )
+
+const sortedSections = [...orderedSections, ...unorderedSections.sort()]
+sortedSections.map((section) => {
+  const entries = navDataRaw
+    .filter((entry) => entry.data.section === section)
+    .map(entry => ({ id: entry.id, data: { id: entry.data.id, section }} as TextContentEntry))
+
+  const sortedEntries = entries.sort((a, b) =>
+    a.data.id.localeCompare(b.data.id),
+  )
+
+  let navEntries = sortedEntries
+  if (section === 'components' || section === 'layouts') {
+    // only display unique entry.data.id in the nav list if the section is components
+    navEntries = [
+      ...sortedEntries
+        .reduce((map, entry) => {
+          if (!map.has(entry.data.id)) {
+            map.set(entry.data.id, entry)
+          }
+          return map
+        }, new Map())
+        .values(),
+    ]
+  }
+
+  navData[section] = navEntries;
+})
+
 ---
 
-<ReactNav
-  client:only="react"
-  navEntries={navEntries}
-  navSectionOrder={config.navSectionOrder}
-  transition:animate="fade"
-/>
+<ReactNav client:only="react" navData={navData} transition:animate="fade" />

package/src/components/Navigation.tsx

@@ -4,19 +4,17 @@ import { NavSection } from './NavSection'
 import { type TextContentEntry } from './NavEntry'
 
 interface NavigationProps {
-  navEntries: TextContentEntry[]
-  navSectionOrder?: string[]
+  navData: Record<string, TextContentEntry[]>
 }
 
 export const Navigation: React.FunctionComponent<NavigationProps> = ({
-  navEntries,
-  navSectionOrder,
+  navData,
 }: NavigationProps) => {
   const [activeItem, setActiveItem] = useState('')
 
   useEffect(() => {
     // TODO: Needs an alternate solution because of /tab in the path
-    setActiveItem(window.location.pathname.split('/').reverse()[0]) 
+    setActiveItem(window.location.pathname.split('/').reverse()[0])
   }, [])
 
   const onNavSelect = (
@@ -26,48 +24,20 @@ export const Navigation: React.FunctionComponent<NavigationProps> = ({
     setActiveItem(selectedItem.itemId.toString())
   }
 
-  const uniqueSections = Array.from(
-    new Set(navEntries.map((entry) => entry.data.section)),
-  )
-
-  // We want to list any ordered sections first, followed by any unordered sections sorted alphabetically
-  const [orderedSections, unorderedSections] = uniqueSections.reduce(
-    (acc, section) => {
-      if (!navSectionOrder) {
-        acc[1].push(section)
-        return acc
-      }
-
-      const index = navSectionOrder.indexOf(section)
-      if (index > -1) {
-        acc[0][index] = section
-      } else {
-        acc[1].push(section)
-      }
-      return acc
-    },
-    [[], []] as [string[], string[]],
-  )
-  const sortedSections = [...orderedSections, ...unorderedSections.sort()]
-
-  const navSections = sortedSections.map((section) => {
-    const entries = navEntries.filter((entry) => entry.data.section === section)
-
-    return (
-      <NavSection
-        key={section}
-        entries={entries}
-        sectionId={section}
-        activeItem={activeItem}
-      />
-    )
-  })
-
   return (
     // Can possibly add back PageSidebar wrapper when https://github.com/patternfly/patternfly/issues/7377 goes in
     <PageSidebarBody id="page-sidebar-body">
       <Nav onSelect={onNavSelect}>
-        <NavList>{navSections}</NavList>
+        <NavList>
+          {Object.entries(navData).map(([key, value], index) => (
+            <NavSection
+              key={index}
+              entries={value}
+              sectionId={key}
+              activeItem={activeItem}
+            />
+          ))}
+        </NavList>
       </Nav>
     </PageSidebarBody>
   )

package/src/content.ts

@@ -1,5 +1,6 @@
 export const content = [
-  { base: 'textContent', pattern: '*.md', name: "textContent" } 
+  { base: 'textContent', pattern: '*.{md,mdx}', name: 'textContent' },
+  { base: 'textContent', pattern: 'examples/*/*.mdx', name: 'examples' },
   // TODO: Remove. Uncomment for local testing.
   // {
   //   "packageName":"@patternfly/react-core",