@patternfly/patternfly-doc-core 1.2.0 → 1.3.0

package/dist/server/pages/_image.astro.mjs

@@ -0,0 +1,132 @@
+import { readFile } from 'node:fs/promises';
+import { isAbsolute } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { g as getConfiguredImageService, i as imageConfig, a as isRemoteAllowed, b as assetsDir, o as outDir } from '../chunks/_astro_assets_CLOMnm-3.mjs';
+import { i as isRemotePath } from '../chunks/path_Cvt6sEOY.mjs';
+import * as mime from 'mrmime';
+export { renderers } from '../renderers.mjs';
+
+const fnv1a52 = (str) => {
+  const len = str.length;
+  let i = 0, t0 = 0, v0 = 8997, t1 = 0, v1 = 33826, t2 = 0, v2 = 40164, t3 = 0, v3 = 52210;
+  while (i < len) {
+    v0 ^= str.charCodeAt(i++);
+    t0 = v0 * 435;
+    t1 = v1 * 435;
+    t2 = v2 * 435;
+    t3 = v3 * 435;
+    t2 += v0 << 8;
+    t3 += v1 << 8;
+    t1 += t0 >>> 16;
+    v0 = t0 & 65535;
+    t2 += t1 >>> 16;
+    v1 = t1 & 65535;
+    v3 = t3 + (t2 >>> 16) & 65535;
+    v2 = t2 & 65535;
+  }
+  return (v3 & 15) * 281474976710656 + v2 * 4294967296 + v1 * 65536 + (v0 ^ v3 >> 4);
+};
+const etag = (payload, weak = false) => {
+  const prefix = weak ? 'W/"' : '"';
+  return prefix + fnv1a52(payload).toString(36) + payload.length.toString(36) + '"';
+};
+
+async function loadLocalImage(src, url) {
+  const assetsDirPath = fileURLToPath(assetsDir);
+  let fileUrl;
+  {
+    try {
+      const idx = url.pathname.indexOf("/_image");
+      if (idx > 0) {
+        src = src.slice(idx);
+      }
+      fileUrl = new URL("." + src, outDir);
+      const filePath = fileURLToPath(fileUrl);
+      if (!isAbsolute(filePath) || !filePath.startsWith(assetsDirPath)) {
+        return void 0;
+      }
+    } catch {
+      return void 0;
+    }
+  }
+  let buffer = void 0;
+  try {
+    buffer = await readFile(fileUrl);
+  } catch {
+    try {
+      const sourceUrl = new URL(src, url.origin);
+      buffer = await loadRemoteImage(sourceUrl);
+    } catch (err) {
+      console.error("Could not process image request:", err);
+      return void 0;
+    }
+  }
+  return buffer;
+}
+async function loadRemoteImage(src) {
+  try {
+    const res = await fetch(src);
+    if (!res.ok) {
+      return void 0;
+    }
+    return Buffer.from(await res.arrayBuffer());
+  } catch {
+    return void 0;
+  }
+}
+const GET = async ({ request }) => {
+  try {
+    const imageService = await getConfiguredImageService();
+    if (!("transform" in imageService)) {
+      throw new Error("Configured image service is not a local service");
+    }
+    const url = new URL(request.url);
+    const transform = await imageService.parseURL(url, imageConfig);
+    if (!transform?.src) {
+      const err = new Error(
+        "Incorrect transform returned by `parseURL`. Expected a transform with a `src` property."
+      );
+      console.error("Could not parse image transform from URL:", err);
+      return new Response("Internal Server Error", { status: 500 });
+    }
+    let inputBuffer = void 0;
+    if (isRemotePath(transform.src)) {
+      if (isRemoteAllowed(transform.src, imageConfig) === false) {
+        return new Response("Forbidden", { status: 403 });
+      }
+      inputBuffer = await loadRemoteImage(new URL(transform.src));
+    } else {
+      inputBuffer = await loadLocalImage(transform.src, url);
+    }
+    if (!inputBuffer) {
+      return new Response("Internal Server Error", { status: 500 });
+    }
+    const { data, format } = await imageService.transform(inputBuffer, transform, imageConfig);
+    return new Response(data, {
+      status: 200,
+      headers: {
+        "Content-Type": mime.lookup(format) ?? `image/${format}`,
+        "Cache-Control": "public, max-age=31536000",
+        ETag: etag(data.toString()),
+        Date: (/* @__PURE__ */ new Date()).toUTCString()
+      }
+    });
+  } catch (err) {
+    console.error("Could not process image request:", err);
+    return new Response(
+      `Internal Server Error`,
+      {
+        status: 500
+      }
+    );
+  }
+};
+
+const _page = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+  __proto__: null,
+  GET
+}, Symbol.toStringTag, { value: 'Module' }));
+
+const page = () => _page;
+
+export { page };

package/dist/server/pages/_section_/_---page_.astro.mjs

@@ -0,0 +1 @@
+// Contents removed by Astro as it's used for prerendering only

package/dist/server/pages/_section_/_page_/_---tab_.astro.mjs

@@ -0,0 +1 @@
+// Contents removed by Astro as it's used for prerendering only

package/dist/server/pages/index.astro.mjs

@@ -0,0 +1 @@
+// Contents removed by Astro as it's used for prerendering only

package/dist/server/pages/props.astro.mjs

@@ -0,0 +1,25 @@
+import { readFileSync } from 'fs';
+import { join } from 'path';
+export { renderers } from '../renderers.mjs';
+
+const propsFilePath = join(process.cwd(), "dist", "props.json");
+const propsData = readFileSync(propsFilePath);
+const props = JSON.parse(propsData.toString());
+const prerender = false;
+async function GET({ request }) {
+  const queryParams = new URL(request.url).searchParams;
+  const components = queryParams.get("components");
+  const componentsArray = components?.split(",");
+  const propsData2 = componentsArray?.map((component) => props[component]);
+  return new Response(JSON.stringify(propsData2));
+}
+
+const _page = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+  __proto__: null,
+  GET,
+  prerender
+}, Symbol.toStringTag, { value: 'Module' }));
+
+const page = () => _page;
+
+export { page };

package/dist/server/renderers.mjs

@@ -0,0 +1,259 @@
+import React__default, { createElement } from 'react';
+import ReactDOM from 'react-dom/server';
+
+const contexts = new WeakMap();
+
+const ID_PREFIX = 'r';
+
+function getContext(rendererContextResult) {
+	if (contexts.has(rendererContextResult)) {
+		return contexts.get(rendererContextResult);
+	}
+	const ctx = {
+		currentIndex: 0,
+		get id() {
+			return ID_PREFIX + this.currentIndex.toString();
+		},
+	};
+	contexts.set(rendererContextResult, ctx);
+	return ctx;
+}
+
+function incrementId(rendererContextResult) {
+	const ctx = getContext(rendererContextResult);
+	const id = ctx.id;
+	ctx.currentIndex++;
+	return id;
+}
+
+/**
+ * Astro passes `children` as a string of HTML, so we need
+ * a wrapper `div` to render that content as VNodes.
+ *
+ * As a bonus, we can signal to React that this subtree is
+ * entirely static and will never change via `shouldComponentUpdate`.
+ */
+const StaticHtml = ({ value, name, hydrate = true }) => {
+	if (!value) return null;
+	const tagName = hydrate ? 'astro-slot' : 'astro-static-slot';
+	return createElement(tagName, {
+		name,
+		suppressHydrationWarning: true,
+		dangerouslySetInnerHTML: { __html: value },
+	});
+};
+
+/**
+ * This tells React to opt-out of re-rendering this subtree,
+ * In addition to being a performance optimization,
+ * this also allows other frameworks to attach to `children`.
+ *
+ * See https://preactjs.com/guide/v8/external-dom-mutations
+ */
+StaticHtml.shouldComponentUpdate = () => false;
+
+const slotName = (str) => str.trim().replace(/[-_]([a-z])/g, (_, w) => w.toUpperCase());
+const reactTypeof = Symbol.for('react.element');
+const reactTransitionalTypeof = Symbol.for('react.transitional.element');
+
+async function check(Component, props, children) {
+	// Note: there are packages that do some unholy things to create "components".
+	// Checking the $$typeof property catches most of these patterns.
+	if (typeof Component === 'object') {
+		return Component['$$typeof'].toString().slice('Symbol('.length).startsWith('react');
+	}
+	if (typeof Component !== 'function') return false;
+	if (Component.name === 'QwikComponent') return false;
+
+	// Preact forwarded-ref components can be functions, which React does not support
+	if (typeof Component === 'function' && Component['$$typeof'] === Symbol.for('react.forward_ref'))
+		return false;
+
+	if (Component.prototype != null && typeof Component.prototype.render === 'function') {
+		return React__default.Component.isPrototypeOf(Component) || React__default.PureComponent.isPrototypeOf(Component);
+	}
+
+	let isReactComponent = false;
+	function Tester(...args) {
+		try {
+			const vnode = Component(...args);
+			if (
+				vnode &&
+				(vnode['$$typeof'] === reactTypeof || vnode['$$typeof'] === reactTransitionalTypeof)
+			) {
+				isReactComponent = true;
+			}
+		} catch {}
+
+		return React__default.createElement('div');
+	}
+
+	await renderToStaticMarkup(Tester, props, children, {});
+
+	return isReactComponent;
+}
+
+async function getNodeWritable() {
+	let nodeStreamBuiltinModuleName = 'node:stream';
+	let { Writable } = await import(/* @vite-ignore */ nodeStreamBuiltinModuleName);
+	return Writable;
+}
+
+function needsHydration(metadata) {
+	// Adjust how this is hydrated only when the version of Astro supports `astroStaticSlot`
+	return metadata.astroStaticSlot ? !!metadata.hydrate : true;
+}
+
+async function renderToStaticMarkup(Component, props, { default: children, ...slotted }, metadata) {
+	let prefix;
+	if (this && this.result) {
+		prefix = incrementId(this.result);
+	}
+	const attrs = { prefix };
+
+	delete props['class'];
+	const slots = {};
+	for (const [key, value] of Object.entries(slotted)) {
+		const name = slotName(key);
+		slots[name] = React__default.createElement(StaticHtml, {
+			hydrate: needsHydration(metadata),
+			value,
+			name,
+		});
+	}
+	// Note: create newProps to avoid mutating `props` before they are serialized
+	const newProps = {
+		...props,
+		...slots,
+	};
+	const newChildren = children ?? props.children;
+	if (newChildren != null) {
+		newProps.children = React__default.createElement(StaticHtml, {
+			hydrate: needsHydration(metadata),
+			value: newChildren,
+		});
+	}
+	const formState = this ? await getFormState(this) : undefined;
+	if (formState) {
+		attrs['data-action-result'] = JSON.stringify(formState[0]);
+		attrs['data-action-key'] = formState[1];
+		attrs['data-action-name'] = formState[2];
+	}
+	const vnode = React__default.createElement(Component, newProps);
+	const renderOptions = {
+		identifierPrefix: prefix,
+		formState,
+	};
+	let html;
+	if ('renderToReadableStream' in ReactDOM) {
+		html = await renderToReadableStreamAsync(vnode, renderOptions);
+	} else {
+		html = await renderToPipeableStreamAsync(vnode, renderOptions);
+	}
+	return { html, attrs };
+}
+
+/**
+ * @returns {Promise<[actionResult: any, actionKey: string, actionName: string] | undefined>}
+ */
+async function getFormState({ result }) {
+	const { request, actionResult } = result;
+
+	if (!actionResult) return undefined;
+	if (!isFormRequest(request.headers.get('content-type'))) return undefined;
+
+	const { searchParams } = new URL(request.url);
+	const formData = await request.clone().formData();
+	/**
+	 * The key generated by React to identify each `useActionState()` call.
+	 * @example "k511f74df5a35d32e7cf266450d85cb6c"
+	 */
+	const actionKey = formData.get('$ACTION_KEY')?.toString();
+	/**
+	 * The action name returned by an action's `toString()` property.
+	 * This matches the endpoint path.
+	 * @example "/_actions/blog.like"
+	 */
+	const actionName = searchParams.get('_action');
+
+	if (!actionKey || !actionName) return undefined;
+
+	return [actionResult, actionKey, actionName];
+}
+
+async function renderToPipeableStreamAsync(vnode, options) {
+	const Writable = await getNodeWritable();
+	let html = '';
+	return new Promise((resolve, reject) => {
+		let error = undefined;
+		let stream = ReactDOM.renderToPipeableStream(vnode, {
+			...options,
+			onError(err) {
+				error = err;
+				reject(error);
+			},
+			onAllReady() {
+				stream.pipe(
+					new Writable({
+						write(chunk, _encoding, callback) {
+							html += chunk.toString('utf-8');
+							callback();
+						},
+						destroy() {
+							resolve(html);
+						},
+					}),
+				);
+			},
+		});
+	});
+}
+
+/**
+ * Use a while loop instead of "for await" due to cloudflare and Vercel Edge issues
+ * See https://github.com/facebook/react/issues/24169
+ */
+async function readResult(stream) {
+	const reader = stream.getReader();
+	let result = '';
+	const decoder = new TextDecoder('utf-8');
+	while (true) {
+		const { done, value } = await reader.read();
+		if (done) {
+			if (value) {
+				result += decoder.decode(value);
+			} else {
+				// This closes the decoder
+				decoder.decode(new Uint8Array());
+			}
+
+			return result;
+		}
+		result += decoder.decode(value, { stream: true });
+	}
+}
+
+async function renderToReadableStreamAsync(vnode, options) {
+	return await readResult(await ReactDOM.renderToReadableStream(vnode, options));
+}
+
+const formContentTypes = ['application/x-www-form-urlencoded', 'multipart/form-data'];
+
+function isFormRequest(contentType) {
+	// Split off parameters like charset or boundary
+	// https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type#content-type_in_html_forms
+	const type = contentType?.split(';')[0].toLowerCase();
+
+	return formContentTypes.some((t) => type === t);
+}
+
+const _renderer0 = {
+	name: '@astrojs/react',
+	check,
+	renderToStaticMarkup,
+	supportsAstroStaticSlot: true,
+};
+
+const renderers = [Object.assign({"name":"@astrojs/react","clientEntrypoint":"@astrojs/react/client.js","serverEntrypoint":"@astrojs/react/server.js"}, { ssr: _renderer0 }),];
+
+export { renderers };

package/jest.config.ts

@@ -20,7 +20,7 @@ const config: Config = {
   },
   setupFilesAfterEnv: ['<rootDir>/test.setup.ts'],
   transformIgnorePatterns: [
-    '/node_modules/(?!(change-case|@?nanostores)/)',
+    '/node_modules/(?!(change-case|@?nanostores|react-docgen|strip-indent)/)',
   ],
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly-doc-core",
   "type": "module",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "PatternFly Core Documentation",
   "publishConfig": {
     "access": "public"
@@ -12,6 +12,7 @@
     "build": "astro check && astro build",
     "build:cli": "tsc --build ./cli/tsconfig.json",
     "build:cli:watch": "tsc --build --watch ./cli/tsconfig.json",
+    "build:props": "npm run build:cli && node ./dist/cli/cli.js generate-props",
     "preview": "astro preview",
     "astro": "astro",
     "prettier": "prettier --write ./src",
@@ -40,11 +41,13 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
+    "@astrojs/node": "^9.1.3",
     "@astrojs/react": "^4.2.1",
     "@nanostores/react": "^0.8.0",
     "@patternfly/patternfly": "^6.0.0",
     "@patternfly/react-core": "^6.0.0",
     "@patternfly/react-table": "^6.0.0",
+    "commander": "^13.1.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "astro": "^5.4.1",
@@ -52,6 +55,7 @@
     "glob": "^11.0.1",
     "nanostores": "^0.11.3",
     "react": "^18.3.1",
+    "react-docgen": "^7.1.1",
     "react-dom": "^18.3.1",
     "sass": "^1.81.0",
     "typescript": "^5.6.3"
@@ -70,7 +74,6 @@
     "@typescript-eslint/eslint-plugin": "^8.17.0",
     "@typescript-eslint/parser": "^8.17.0",
     "babel-jest": "^29.7.0",
-    "commander": "^13.1.0",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^9.16.0",
     "eslint-config-prettier": "^9.1.0",

package/pf-docs.config.mjs

@@ -0,0 +1,31 @@
+export const config = {
+  content: [
+    // example content entry for local content, this would feed all markdown files in the content directory to the
+    // documentation core with a content identifier of 'content':
+    // {
+    //   base: 'content',
+    //   pattern: "*.md",
+    //   name: 'content'
+    // },
+    //
+    // example content entry for remote content, this would fetch all markdown files matching the glob in 'pattern'
+    // from the specified npm package and serve them with a content identifier of 'react-component-docs':
+    {
+      packageName: "@patternfly/react-core",
+      pattern: "**/components/**/*.md",
+      name: "react-component-docs",
+    },
+  ],
+  outputDir: './dist/docs',
+  propsGlobs: [
+    {
+      include: ['*/@patternfly/react-core/src/**/*.tsx'],
+      exclude: [
+        '/**/examples/**',
+        '/**/__mocks__/**',
+        '/**/__tests__/**',
+        '/**/*.test.tsx',
+      ],
+    },
+  ],
+}

package/release.config.mjs

@@ -2,7 +2,7 @@
  * @type {import('semantic-release').GlobalConfig}
  */
 export default {
-  branches: 'main',
+  branches: ['main'],
   analyzeCommits: {
     preset: 'angular',
   },

package/src/components/PropsTable.tsx

@@ -23,7 +23,7 @@ export type ComponentProp = {
   description?: string
 }
 
-type PropsTableProps = {
+interface PropsTableProps extends React.HTMLProps<HTMLDivElement> {
   componentName: string
   headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
   componentDescription?: string
@@ -76,7 +76,7 @@ export const PropsTable: React.FunctionComponent<PropsTableProps> = ({
   }
 
   return (
-    <>
+    <div>
       <SectionHeading>{componentName}</SectionHeading>
       <Stack hasGutter>
         {componentDescription && (
@@ -141,6 +141,6 @@ export const PropsTable: React.FunctionComponent<PropsTableProps> = ({
           </>
         )}
       </Stack>
-    </>
+    </div>
   )
 }

package/src/components/PropsTables.astro

@@ -0,0 +1,38 @@
+---
+import { PropsTable } from './PropsTable'
+
+async function getPropsData(propComponents?: string[]) {
+  if (!propComponents || propComponents.length === 0) {
+    return []
+  }
+
+  const url = new URL(`/props?components=${propComponents}`, Astro.url)
+
+  try {
+    const response = await fetch(url)
+    const propsData = await response.json()
+    return propsData
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(e)
+    return []
+  }
+}
+
+const { propComponents } = Astro.props
+
+const propsData = await getPropsData(propComponents)
+---
+
+{
+  propsData
+    .filter((comp: any) => !!comp)
+    .map((component: any) => (
+      <PropsTable
+        key={component.name}
+        componentName={component.name}
+        componentDescription={component.description}
+        componentProps={component.props}
+      />
+    ))
+}

package/src/content.config.ts

@@ -27,6 +27,7 @@ function defineContent(contentObj: CollectionDefinition) {
       section: z.string(),
       subsection: z.string().optional(),
       title: z.string().optional(),
+      propComponents: z.array(z.string()).optional(),
       tab: z.string().optional().default(tabMap[name])
     }),
   })

package/src/pages/[section]/[...page].astro

@@ -2,22 +2,29 @@
 import { getCollection, render } from 'astro:content'
 import { Title } from '@patternfly/react-core'
 import MainLayout from '../../layouts/Main.astro'
-import { content } from "../../content"
+import { content } from '../../content'
 import { kebabCase } from 'change-case'
 import { componentTabs } from '../../globals'
+import PropsTables from '../../components/PropsTables.astro'
 
 export async function getStaticPaths() {
-  const collections = await Promise.all(content.map(async (entry) => await getCollection(entry.name as 'textContent')))
+  const collections = await Promise.all(
+    content.map(
+      async (entry) => await getCollection(entry.name as 'textContent'),
+    ),
+  )
 
   return collections.flat().map((entry) => ({
-      params: { page: kebabCase(entry.data.id), section: entry.data.section },
-      props: { entry, title: entry.data.title },
-    })
-  )
+    params: { page: kebabCase(entry.data.id), section: entry.data.section },
+    props: {
+      entry,
+      title: entry.data.title,
+      propComponents: entry.data.propComponents,
+    },
+  }))
 }
 
-
-const { entry } = Astro.props
+const { entry, propComponents } = Astro.props
 const { title, id, section } = entry.data
 const { Content } = await render(entry)
 
@@ -35,4 +42,5 @@ if(section === 'components') { // if section is components, rewrite to first tab
     )
   }
   <Content />
+  <PropsTables propComponents={propComponents} server:defer />
 </MainLayout>

package/src/pages/[section]/[page]/[...tab].astro

@@ -5,6 +5,7 @@ import MainLayout from '../../../layouts/Main.astro'
 import { content } from "../../../content"
 import { kebabCase } from 'change-case'
 import { componentTabs, tabNames, buildTab, sortTabs } from '../../../globals';
+import PropsTables from '../../../components/PropsTables.astro'
 
 export async function getStaticPaths() {
   const collections = await Promise.all(content.map(async (entry) => await getCollection(entry.name as 'textContent')))
@@ -31,10 +32,11 @@ export async function getStaticPaths() {
   return flatCol;
 }
 
-const { entry } = Astro.props
+const { entry, propComponents } = Astro.props
 const { title, id, section } = entry.data
 const { Content } = await render(entry)
 const currentPath = Astro.url.pathname;
+
 ---
 
 <MainLayout>
@@ -66,6 +68,7 @@ const currentPath = Astro.url.pathname;
   <PageSection id="main-content" isFilled>
     <PFContent>
       <Content />
+      <PropsTables propComponents={propComponents} server:defer />
     </PFContent>
   </PageSection>
 </MainLayout>

package/src/pages/props.ts

@@ -0,0 +1,17 @@
+import { readFileSync } from 'fs'
+import { join } from 'path'
+
+const propsFilePath = join(process.cwd(), 'dist', 'props.json')
+const propsData = readFileSync(propsFilePath)
+const props = JSON.parse(propsData.toString())
+
+export const prerender = false
+
+export async function GET({ request }: { request: Request }) {
+  const queryParams = new URL(request.url).searchParams
+  const components = queryParams.get('components')
+  const componentsArray = components?.split(',')
+  const propsData = componentsArray?.map((component) => props[component])
+
+  return new Response(JSON.stringify(propsData))
+}