fix: added compiler options to react-docgen-typescript for doc site a…

…pi tables (#635)
washingtonpost · May 15, 2024 · 5cd9ce5 · 5cd9ce5
1 parent c4c209f
commit 5cd9ce5
Show file tree

Hide file tree

Showing 6 changed files with 245 additions and 203 deletions.
diff --git a/build.washingtonpost.com/services/getPropsTable.js b/build.washingtonpost.com/services/getPropsTable.js
@@ -1,10 +1,8 @@
 const docgen = require("react-docgen-typescript");
+const { JsxEmit } = require("typescript");
 
 export const getPropsTable = async (component = "icon") => {
   const options = {
-    shouldExtractLiteralValuesFromEnum: true,
-    savePropValueAsString: true,
-    shouldExtractValuesFromUnion: true,
     propFilter: (prop) => {
       if (prop.declarations !== undefined && prop.declarations.length > 0) {
         const hasPropAdditionalDescription = prop.declarations.find(
@@ -20,10 +18,18 @@ export const getPropsTable = async (component = "icon") => {
     },
   };
 
+  const customParser = docgen.withCompilerOptions(
+    {
+      esModuleInterop: true,
+      jsx: JsxEmit.Preserve,
+    },
+    options
+  );
+
   // Parse a file for docgen info
 
   try {
-    const componentsData = docgen.parse(
+    const componentsData = customParser.parse(
       `../packages/kit/src/${component}/index.ts`,
       options
     );

diff --git a/packages/kit/src/alert-banner/AlertBanner.tsx b/packages/kit/src/alert-banner/AlertBanner.tsx
@@ -1,203 +1,13 @@
-import React from "react";
+import { AlertBannerRoot } from "./AlertBannerRoot";
+import { AlertBannerTrigger } from "./AlertBannerTrigger";
+import { AlertBannerContent } from "./AlertBannerContent";
 
-import { theme, styled } from "../theme";
-import { Icon } from "../icon";
-import { Button } from "../button";
-import { AppBar } from "../app-bar";
-
-import type * as WPDS from "../theme";
-
-import {
-  Error,
-  Success,
-  Warning,
-  Info as Information,
-  Close,
-} from "@washingtonpost/wpds-assets";
-
-const StyledAlertBannerTrigger = styled(Button, {
-  alignSelf: "flex-start",
-});
-
-type AlertBannerTriggerVariants = React.ComponentProps<
-  typeof StyledAlertBannerTrigger
->;
-
-interface AlertBannerTriggerInterface extends AlertBannerTriggerVariants {
-  css?: WPDS.CSS;
-}
-
-const AlertBannerTrigger = React.forwardRef<
-  HTMLButtonElement,
-  AlertBannerTriggerInterface
->((props, ref) => {
-  return (
-    <StyledAlertBannerTrigger
-      ref={ref}
-      isOutline
-      icon="center"
-      variant="primary"
-      css={{
-        border: "none",
-        ...props.css,
-      }}
-      {...props}
-    >
-      <Icon size="100" label="Close alert banner">
-        <Close />
-      </Icon>
-    </StyledAlertBannerTrigger>
-  );
-});
-type AlertBannerTriggerProps = React.ComponentProps<typeof AlertBannerTrigger>;
-AlertBannerTrigger.displayName = "AlertBannerTrigger";
-
-const StyledAlertBannerContent = styled("p", {
-  marginBlock: "0.625rem",
-  flex: "1",
-});
-const AlertBannerContent = StyledAlertBannerContent;
-type AlertBannerContentProps = React.ComponentProps<typeof AlertBannerContent>;
-
-const StyledAlertBanner = styled(AppBar, {
-  width: "100%",
-  flexDirection: "row",
-  justifyContent: "flex-start",
-  color: theme.colors.primary,
-  alignItems: "center",
-  fontFamily: "$meta",
-  fontSize: "$100",
-  fontWeight: "$light",
-  lineHeight: "$125",
-  minHeight: "40px",
-
-  variants: {
-    /** 4 predefined alert banners each tied to our symantic messaging on our site. They are Warning, Information, Success, and Error. */
-    variant: {
-      error: {
-        background: theme.colors.red600,
-      },
-      success: {
-        background: theme.colors.green600,
-      },
-      warning: {
-        background: theme.colors.orange600,
-      },
-      information: {
-        background: theme.colors.blue600,
-      },
-    },
-    /** The alert banner can be permanent or dismissable. */
-    dismissable: {
-      false: {
-        paddingRight: "$050",
-      },
-    },
-  },
-  defaultVariants: {
-    variant: "information",
-    dismissable: true,
-  },
-});
-
-const AlertIcons = {
-  error: Error,
-  success: Success,
-  warning: Warning,
-  information: Information,
-};
-
-type AlertIconType = keyof typeof AlertIcons;
-
-type AlertBannerVariants = React.ComponentProps<typeof StyledAlertBanner>;
-
-const AlertBannerRoot = React.forwardRef<HTMLDivElement, AlertBannerVariants>(
-  (
-    {
-      variant = "information" as AlertBannerVariants["variant"],
-      dismissable = true as AlertBannerVariants["dismissable"],
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const kids = React.Children.toArray(children);
-    const contentNode = kids.find(
-      (child) =>
-        React.isValidElement(child) && child.type === AlertBannerContent
-    );
-    const triggerNode = kids.find(
-      (child) =>
-        React.isValidElement(child) && child.type === AlertBannerTrigger
-    );
-
-    const AlertIcon = AlertIcons[variant as AlertIconType];
-
-    const StyledAlertIcon = styled(AlertIcon, {
-      $$alertBannerIconColor: theme.colors.signal,
-      fill: "$$alertBannerIconColor",
-      flex: "0 0 auto",
-
-      variants: {
-        variant: {
-          error: {
-            $$alertBannerIconColor: theme.colors.error,
-          },
-          success: {
-            $$alertBannerIconColor: theme.colors.success,
-          },
-          warning: {
-            $$alertBannerIconColor: theme.colors.warning,
-          },
-          information: {
-            $$alertBannerIconColor: theme.colors.signal,
-          },
-        },
-      },
-
-      defaultVariants: {
-        variant: "information",
-      },
-    });
-
-    return (
-      <StyledAlertBanner
-        ref={ref}
-        role="alert"
-        variant={variant}
-        dismissable={dismissable}
-        {...props}
-      >
-        <Button
-          as="div"
-          icon="center"
-          variant="primary"
-          isOutline
-          css={{
-            alignSelf: "flex-start",
-            border: "none",
-            borderRadius: 0,
-            cursor: "auto",
-            "@hover": {
-              "&:hover": {
-                background: "none",
-              },
-            },
-          }}
-        >
-          <Icon size="100" label="">
-            <StyledAlertIcon variant={variant} />
-          </Icon>
-        </Button>
-        {contentNode}
-
-        {dismissable ? triggerNode : ""}
-      </StyledAlertBanner>
-    );
-  }
-);
-AlertBannerRoot.displayName = "AlertBannerRoot";
-type AlertBannerProps = React.ComponentProps<typeof AlertBannerRoot>;
+import type { AlertBannerProps } from "./AlertBannerRoot";
+import type {
+  AlertBannerTriggerProps,
+  AlertBannerTriggerInterface,
+} from "./AlertBannerTrigger";
+import type { AlertBannerContentProps } from "./AlertBannerContent";
 
 const Root = AlertBannerRoot;
 const Trigger = AlertBannerTrigger;

diff --git a/packages/kit/src/alert-banner/AlertBannerContent.tsx b/packages/kit/src/alert-banner/AlertBannerContent.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+
+import { styled } from "../theme";
+
+const StyledAlertBannerContent = styled("p", {
+  marginBlock: "0.625rem",
+  flex: "1",
+});
+export const AlertBannerContent = StyledAlertBannerContent;
+export type AlertBannerContentProps = React.ComponentProps<
+  typeof AlertBannerContent
+>;