diff --git a/.eslintrc.js b/.eslintrc.js index c376ce25a..008b06956 100644 --- a/.eslintrc.js +++ b/.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", + }, + ], }, }, ], diff --git a/build.washingtonpost.com/pages/working-examples/index.tsx b/build.washingtonpost.com/pages/working-examples/index.tsx index 332334292..2240afac0 100644 --- a/build.washingtonpost.com/pages/working-examples/index.tsx +++ b/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 { diff --git a/ui/input-text/src/InputText.tsx b/ui/input-text/src/InputText.tsx index e97ad25c5..b0d659610 100644 --- a/ui/input-text/src/InputText.tsx +++ b/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( }, ref ) => { - globalInputAutoFillTriggerAnimations(); - const [helperId, setHelperId] = useState(); const [errorId, setErrorId] = useState(); const [isAutofilled, setIsAutofilled] = useState(false); @@ -163,6 +162,7 @@ export const InputText = React.forwardRef( }, [ref, internalRef]); useEffect(() => { + globalInputAutoFillTriggerAnimations(); const element = internalRef.current; const onAnimationStart = (e) => { @@ -179,7 +179,7 @@ export const InputText = React.forwardRef( return () => { element?.removeEventListener("animationstart", onAnimationStart, false); }; - }); + }, []); const [isFloating, handleOnFocus, handleOnBlur, handleOnChange] = useFloating( diff --git a/ui/input-textarea/src/InputTextarea.tsx b/ui/input-textarea/src/InputTextarea.tsx index c2027ea69..d28f99023 100644 --- a/ui/input-textarea/src/InputTextarea.tsx +++ b/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(); const [errorId, setErrorId] = useState(); const [isAutofilled, setIsAutofilled] = useState(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,