Merge pull request #37 from thatblindgeye/propsTable

feat: Created PropsTable component structure

Author: wise-king-sullyman

package-lock.json

@@ -44,6 +44,7 @@
     "@nanostores/react": "^0.8.0",
     "@patternfly/patternfly": "^6.0.0",
     "@patternfly/react-core": "^6.0.0",
+    "@patternfly/react-table": "^6.0.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "astro": "^5.4.1",

package.json

@@ -0,0 +1,146 @@
+import { Label, Stack } from '@patternfly/react-core'
+import {
+  Table,
+  Thead,
+  Th,
+  Tr,
+  Tbody,
+  Td,
+  TableText,
+} from '@patternfly/react-table'
+import { css } from '@patternfly/react-styles'
+import accessibleStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility'
+import textStyles from '@patternfly/react-styles/css/utilities/Text/text'
+
+export type ComponentProp = {
+  name: string
+  isRequired?: boolean
+  isBeta?: boolean
+  isHidden?: boolean
+  isDeprecated?: boolean
+  type?: string
+  defaultValue?: string
+  description?: string
+}
+
+type PropsTableProps = {
+  componentName: string
+  headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+  componentDescription?: string
+  componentProps?: ComponentProp[]
+}
+
+export const PropsTable: React.FunctionComponent<PropsTableProps> = ({
+  componentName,
+  headingLevel = 'h3',
+  componentDescription,
+  componentProps,
+}) => {
+  const SectionHeading = headingLevel
+  const publicProps = componentProps?.filter((prop) => !prop.isHidden)
+  const hasPropsToRender = !!publicProps?.length
+
+  const renderTagLabel = (componentProp: ComponentProp) => {
+    const { name, isBeta, isDeprecated } = componentProp
+    if (!isBeta && !isDeprecated) {
+      return null
+    }
+
+    if (isBeta && isDeprecated) {
+      // eslint-disable-next-line no-console
+      console.error(
+        `The ${name} prop for ${componentName} has both the isBeta and isDeprecated tag.`,
+      )
+    }
+
+    return (
+      <Label color={`${isBeta ? 'blue' : 'grey'}`} isCompact>
+        {isBeta ? 'Beta' : 'Deprecated'}
+      </Label>
+    )
+  }
+
+  const renderRequiredDescription = (isRequired: boolean | undefined) => {
+    if (!isRequired) {
+      return null
+    }
+
+    return (
+      <>
+        <span aria-hidden="true" className={css(textStyles.textColorRequired)}>
+          *
+        </span>
+        <span className={css(accessibleStyles.screenReader)}>required</span>
+      </>
+    )
+  }
+
+  return (
+    <>
+      <SectionHeading>{componentName}</SectionHeading>
+      <Stack hasGutter>
+        {componentDescription && (
+          <div
+            data-testid="component-description"
+            className={css(textStyles.textColorSubtle)}
+          >
+            {componentDescription}
+          </div>
+        )}
+        {hasPropsToRender && (
+          <>
+            <div id={`${componentName}-required-description`}>
+              <span className={css(textStyles.textColorRequired)}>*</span>{' '}
+              <span className={css(textStyles.textColorSubtle)}>
+                indicates a required prop
+              </span>
+            </div>
+            <Table
+              variant="compact"
+              aria-label={`Props for ${componentName}`}
+              aria-describedby={`${componentName}-required-description`}
+              gridBreakPoint="grid-lg"
+            >
+              <Thead>
+                <Tr>
+                  <Th width={20}>Name</Th>
+                  <Th width={20}>Type</Th>
+                  <Th width={10}>Default</Th>
+                  <Th>Description</Th>
+                </Tr>
+              </Thead>
+              <Tbody>
+                {publicProps.map((prop: ComponentProp) => (
+                  <Tr key={prop.name}>
+                    <Td>
+                      <TableText wrapModifier="breakWord">
+                        {prop.name}
+                        {renderRequiredDescription(prop.isRequired)}{' '}
+                        {renderTagLabel(prop)}
+                      </TableText>
+                    </Td>
+                    <Td>
+                      <TableText wrapModifier="breakWord">
+                        {prop.type || 'No type info available'}
+                      </TableText>
+                    </Td>
+                    <Td>
+                      <TableText wrapModifier="breakWord">
+                        {prop.defaultValue || '-'}
+                      </TableText>
+                    </Td>
+                    <Td>
+                      <TableText wrapModifier="breakWord">
+                        {prop.description || 'No description available.'}
+                      </TableText>
+                    </Td>
+                  </Tr>
+                ))}
+              </Tbody>
+            </Table>
+          </>
+        )}
+      </Stack>
+    </>
+  )
+}