fix: changed import style to fix missing api table (#296)

.eslintrc.js

@@ -37,6 +37,14 @@ module.exports = {
       rules: {
         "react/prop-types": "off",
         "@washingtonpost/wpds/theme-colors": "warn",
+        "no-restricted-syntax": [
+          "error",
+          {
+            selector:
+              "ImportDeclaration[source.value='react'][specifiers.0.type='ImportDefaultSpecifier']",
+            message: "Default React import not allowed",
+          },
+        ],
       },
     },
   ],

build.washingtonpost.com/pages/working-examples/index.tsx

@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import * as React from "react";
+import { useState } from "react";
 import { useForm, Controller } from "react-hook-form";
 import { isPossiblePhoneNumber } from "react-phone-number-input";
 import {

ui/input-text/src/InputText.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from "react";
+import * as React from "react";
+import { useEffect, useState } from "react";
 import { nanoid } from "nanoid";
 import { theme, styled } from "@washingtonpost/wpds-theme";
 import { Button } from "@washingtonpost/wpds-button";
@@ -139,8 +140,6 @@ export const InputText = React.forwardRef<HTMLInputElement, InputTextProps>(
     },
     ref
   ) => {
-    globalInputAutoFillTriggerAnimations();
-
     const [helperId, setHelperId] = useState<string | undefined>();
     const [errorId, setErrorId] = useState<string | undefined>();
     const [isAutofilled, setIsAutofilled] = useState<boolean>(false);
@@ -163,6 +162,7 @@ export const InputText = React.forwardRef<HTMLInputElement, InputTextProps>(
     }, [ref, internalRef]);
 
     useEffect(() => {
+      globalInputAutoFillTriggerAnimations();
       const element = internalRef.current;
 
       const onAnimationStart = (e) => {
@@ -179,7 +179,7 @@ export const InputText = React.forwardRef<HTMLInputElement, InputTextProps>(
       return () => {
         element?.removeEventListener("animationstart", onAnimationStart, false);
       };
-    });
+    }, []);
 
     const [isFloating, handleOnFocus, handleOnBlur, handleOnChange] =
       useFloating(

ui/input-textarea/src/InputTextarea.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { useEffect, useState } from "react";
 import { nanoid } from "nanoid";
 import { theme, css, styled } from "@washingtonpost/wpds-theme";
 import type * as WPDS from "@washingtonpost/wpds-theme";
@@ -12,8 +13,6 @@ import { InputLabel } from "@washingtonpost/wpds-input-label";
 import { ErrorMessage } from "@washingtonpost/wpds-error-message";
 import { HelperText } from "@washingtonpost/wpds-helper-text";
 
-import { useEffect, useState } from "react";
-
 const NAME = "InputTextarea";
 
 const InputTextareaCSS = css({
@@ -122,8 +121,6 @@ export const InputTextarea = React.forwardRef<
     },
     ref
   ) => {
-    globalInputAutoFillTriggerAnimations();
-
     const [helperId, setHelperId] = useState<string | undefined>();
     const [errorId, setErrorId] = useState<string | undefined>();
     const [isAutofilled, setIsAutofilled] = useState<boolean>(false);
@@ -147,10 +144,10 @@ export const InputTextarea = React.forwardRef<
     }, [ref, internalRef]);
 
     useEffect(() => {
+      globalInputAutoFillTriggerAnimations();
       const element = internalRef.current;
 
       const onAnimationStart = (e) => {
-        console.log(e.animationName);
         switch (e.animationName) {
           case "jsTriggerAutoFillStart":
             return setIsAutofilled(true);
@@ -164,7 +161,7 @@ export const InputTextarea = React.forwardRef<
       return () => {
         element?.removeEventListener("animationstart", onAnimationStart, false);
       };
-    });
+    }, []);
 
     const [isFloating, handleFocus, handleBlur, handleChange] = useFloating(
       value || defaultValue || placeholder || isAutofilled,