refactor: update non-exported types from interface to type

Author: booc0mtaco

.storybook/components/Docs/Guidelines/CodeGuidelines.mdx

@@ -207,7 +207,8 @@ Examples:
 
 ```css
 .dropdown-button__icon {
-  transition: transform calc(var(--eds-anim-move-medium) * 1s) var(--eds-anim-ease);
+  transition: transform calc(var(--eds-anim-move-medium) * 1s)
+    var(--eds-anim-ease);
 
   @media (prefers-reduced-motion) {
     transition: none;
@@ -368,7 +369,7 @@ import { Icon } from '../Icon/Icon';
 ### Prop Type definitions
 
 ```tsx
-export interface ComponentNameProps {
+export type ComponentNameProps = {
   /**
    * Toggles the ability to dismiss the banner via an close button in the top right of the banner
    */
@@ -388,7 +389,7 @@ The comment should begin with an import example, include a general description o
 
 Example:
 
-```tsx
+````tsx
 /**
  * `import {ButtonGroup} from "@chanzuckerberg/eds";`
  *
@@ -408,13 +409,13 @@ Example:
  * ```
  */
  export const ButtonGroup = ({ ... })
-```
+````
 
 Do not use [jsdoc tags](https://devhints.io/jsdoc) (e.g. `@example`) if possible because these will break the documentation in storybook and cause all following text to not be shown on the page. For important jsdoc tags that we really want to include, place them at the end of the comment to avoid hiding comment content. For example, we use the `@deprecated` tag so Visual Studio Code will indicate a component is deprecated for developers, but we place that at the end of a component's docstring to avoid disrupting any of the other text.
 
 Example:
 
-```tsx
+````tsx
 /**
  * The Banner component is deprecated and will be removed in an upcoming release.
  *
@@ -437,7 +438,7 @@ Example:
  *
  * @deprecated
  */
-```
+````
 
 ### Export module
 

.storybook/components/Grid/Grid.tsx

@@ -3,7 +3,7 @@ import type { ReactNode } from 'react';
 import React from 'react';
 import styles from './Grid.module.css';
 
-export interface Props {
+export type GridProps = {
   /**
    * Child node(s) that can be nested inside component
    */
@@ -35,9 +35,9 @@ export interface Props {
     | '4up'
     | '1-2-4up'
     | '1-2-1up';
-}
+};
 
-export interface GridItemProps {
+export type GridItemProps = {
   /**
    * Child node(s) that can be nested inside component
    */
@@ -46,7 +46,7 @@ export interface GridItemProps {
    * CSS class names that can be appended to the component.
    */
   className?: string;
-}
+};
 
 /**
  * The Grid component is deprecated and will be removed in an upcoming release.
@@ -64,7 +64,7 @@ export const Grid = ({
   children,
   gap,
   ...other
-}: Props) => {
+}: GridProps) => {
   const componentClassName = clsx(
     styles['grid'],
     variant && styles[`grid--${variant}`],

.storybook/components/Section/Section.tsx

@@ -4,7 +4,8 @@ import React from 'react';
 import { Heading } from '../../../src/';
 import type { HeadingElement } from '../../../src/components/Heading';
 import styles from './Section.module.css';
-export interface Props {
+
+export type SectionProps = {
   /**
    * Align variations:
    * - **center** yields a center-aligned section header
@@ -48,7 +49,7 @@ export interface Props {
    * Slot for node to appear to the left of the section title. Typically used for images or avatars
    */
   titleBefore?: ReactNode;
-}
+};
 
 /**
  * `import {Section} from "@chanzuckerberg/eds";`
@@ -67,7 +68,7 @@ export const Section = ({
   titleAfter,
   titleBefore,
   ...other
-}: Props) => {
+}: SectionProps) => {
   const componentClassName = clsx(
     styles['section'],
     align === 'center' && styles['section--center'],

plop-templates/Component/Component.tsx.hbs

@@ -2,15 +2,15 @@ import clsx from 'clsx';
 import React from 'react';
 import styles from './{{pascalCase name}}.module.css';
 
-export interface Props {
+export type {{pascalCase name}}Props = {
   // Component API
   /**
    * CSS class names that can be appended to the component.
    */
   className?: string;
   // Design API
   // Insert props/values as defined in figma for {{pascalCase name}}
-}
+};
 
 /**
  * BETA: This component is still a work in progress and is subject to change.
@@ -23,7 +23,7 @@ export const {{pascalCase name}} = ({
   className,
   // Add other deferenced props to use
   ...other
-}: Props) => {
+}: {{pascalCase name}}Props) => {
   const componentClassName = clsx(styles['{{dashCase name}}'], className);
 
   return (

src/components/AppNotification/AppNotification.tsx

@@ -4,6 +4,7 @@ import Button from '../Button';
 import Text from '../Text';
 import styles from './AppNotification.module.css';
 
+// TODO(next-major): change export to type for consistency
 export interface AppNotificationProps {
   // Design API
   /**

src/components/Card/Card.tsx

@@ -9,7 +9,7 @@ import Text from '../Text';
 
 import styles from './Card.module.css';
 
-export interface CardProps extends HTMLAttributes<HTMLElement> {
+export type CardProps = HTMLAttributes<HTMLElement> & {
   // Component API
   /**
    * Child node(s) that can be nested inside component
@@ -55,8 +55,8 @@ export interface CardProps extends HTMLAttributes<HTMLElement> {
    * Class to adjust top stripe background color. Choose from brand-background tokens utility classes.
    */
   topStripeColor?: string;
-}
-export interface CardSubComponentProps {
+};
+export type CardSubComponentProps = {
   // Component API
   /**
    * Child node(s) that can be nested inside component
@@ -66,9 +66,9 @@ export interface CardSubComponentProps {
    * CSS class names that can be appended to the component.
    */
   className?: string;
-}
+};
 
-export interface CardHeaderProps {
+export type CardHeaderProps = {
   // Component API
   /**
    * Child node(s) that can be nested inside component. Used in place of any of the above named slots.
@@ -103,7 +103,7 @@ export interface CardHeaderProps {
    * The title/heading of the component
    */
   title?: string;
-}
+};
 
 /**
  * `import {Card} from "@chanzuckerberg/eds";`

src/components/FieldNote/FieldNote.tsx

@@ -6,7 +6,7 @@ import Icon from '../Icon';
 import type { IconName } from '../Icon';
 import styles from './FieldNote.module.css';
 
-export interface Props {
+export type FieldNoteProps = {
   // Component API
   /**
    * Child node(s) that can be nested inside component
@@ -37,7 +37,7 @@ export interface Props {
    * **Default is `"default"`**.
    */
   status?: 'default' | Extract<Status, 'warning' | 'critical'>;
-}
+};
 
 /**
  * `import {FieldNote} from "@chanzuckerberg/eds";`
@@ -52,7 +52,7 @@ export const FieldNote = ({
   icon,
   status,
   ...other
-}: Props) => {
+}: FieldNoteProps) => {
   const componentClassName = clsx(
     styles['field-note'],
     disabled && styles['field-note--disabled'],

src/components/Icon/Icon.tsx

@@ -7,7 +7,7 @@ import styles from './Icon.module.css';
 export type { IconName } from '../../icons/spritemap';
 
 // TODO: export union utility type of "Extract<IconName, T> | (renderProps) => ReactNode" when updating IconName usages
-// TODO: convert to types for consistency
+// TODO(next-major): convert to types for consistency
 interface IconPropsBase {
   /**
    * CSS class names that can be appended to the component.
@@ -52,6 +52,7 @@ interface IconPropsBase {
   viewBox?: string;
 }
 
+// TODO(next-major): convert to types for consistency
 interface InformativeIconProps extends IconPropsBase {
   /**
    * The role of the icon.
@@ -63,6 +64,7 @@ interface InformativeIconProps extends IconPropsBase {
   title: string;
 }
 
+// TODO(next-major): convert to types for consistency
 interface DecorativeIconProps extends IconPropsBase {
   /**
    * The role of the icon.
@@ -76,6 +78,7 @@ interface DecorativeIconProps extends IconPropsBase {
 
 export type IconProps = DecorativeIconProps | InformativeIconProps;
 
+// TODO(next-major): convert to types for consistency
 interface SvgStyle extends CSSProperties {
   '--icon-size'?: string;
 }

src/components/InputChip/InputChip.tsx

@@ -6,7 +6,7 @@ import Text from '../Text';
 
 import styles from './InputChip.module.css';
 
-export interface Props {
+export type InputChipProps = {
   // Component API
   /**
    * CSS class names that can be appended to the component.
@@ -33,7 +33,7 @@ export interface Props {
    * The display size of the chip
    */
   size?: Extract<Size, 'sm' | 'md'>;
-}
+};
 
 /**
  * `import {InputChip} from "@chanzuckerberg/eds";`
@@ -48,7 +48,7 @@ export const InputChip = ({
   onClick,
   size = 'md',
   ...other
-}: Props) => {
+}: InputChipProps) => {
   const componentClassName = clsx(
     styles['input-chip'],
     isDisabled && styles[`input-chip--disabled`],

src/components/Label/Label.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import Text from '../Text';
 import styles from './Label.module.css';
 
-export interface Props {
+export type LabelProps = {
   /**
    * CSS class names that can be appended to the component.
    */
@@ -34,7 +34,7 @@ export interface Props {
    * The label text string
    */
   text: string;
-}
+};
 
 /**
  * `import {Label} from "@chanzuckerberg/eds";`
@@ -50,7 +50,7 @@ export const Label = ({
   required = true,
   text,
   ...other
-}: Props) => {
+}: LabelProps) => {
   const componentClassName = clsx(
     styles['label'],
     hideLabel && styles['u-is-vishidden'],

src/components/Menu/Menu.tsx

@@ -20,7 +20,7 @@ import type { PopoverContext, PopoverOptions } from '../PopoverContainer';
 import PopoverListItem from '../PopoverListItem';
 import styles from './Menu.module.css';
 
-// Note: added className here to prevent private interface collision within HeadlessUI
+// Note: added className here to prevent private API collision within HeadlessUI
 export type MenuProps = ExtractProps<typeof HeadlessMenu> &
   PopoverOptions & {
     // TODO: document children?

src/components/NumberIcon/NumberIcon.tsx

@@ -7,7 +7,7 @@ import Text from '../Text';
 
 import styles from './NumberIcon.module.css';
 
-export interface Props {
+export type NumberIconProps = {
   // Component API
   /**
    * (Required) Screen-reader text for the number icon.
@@ -36,7 +36,7 @@ export interface Props {
    * Indication of the status of the referenced item
    */
   status?: 'completed' | 'incomplete' | 'default';
-}
+};
 
 /**
  * `import {NumberIcon} from "@chanzuckerberg/eds";`
@@ -51,7 +51,7 @@ export const NumberIcon = ({
   status = 'default',
   size = 'lg',
   ...other
-}: Props) => {
+}: NumberIconProps) => {
   const componentClassName = clsx(
     className,
     styles['number-icon'],

src/components/PopoverListItem/PopoverListItem.tsx

@@ -5,7 +5,7 @@ import Icon, { type IconName } from '../Icon';
 import Text from '../Text';
 import styles from './PopoverListItem.module.css';
 
-export interface PopoverListItemProps {
+export type PopoverListItemProps = {
   /**
    * Child node(s) that can be nested inside component
    */
@@ -35,7 +35,7 @@ export interface PopoverListItemProps {
    * Text below the main menu item call-to-action, briefly describing the menu item's function
    */
   subLabel?: string;
-}
+};
 
 /**
  * `import {PopoverListItem} from "@chanzuckerberg/eds";`

src/components/TabGroup/TabGroup.tsx

@@ -24,7 +24,7 @@ import Icon, { type IconName } from '../Icon';
 
 import styles from './TabGroup.module.css';
 
-export interface TabGroupProps {
+export type TabGroupProps = {
   // Component API
   /**
    * Reference to another element that describes the purpose of the set of tabs.
@@ -77,9 +77,9 @@ export interface TabGroupProps {
    * **Default is `"default"`**.
    */
   variant?: 'default' | 'inverse';
-}
+};
 
-export interface TabProps {
+export type TabProps = {
   // Component API
   /**
    * aria-labelledby attribute that associates a tab panel with its accompanying tab title
@@ -118,7 +118,7 @@ export interface TabProps {
    * **NOTE**: this cannot be used with `icon`
    */
   illustration?: ReactNode;
-}
+};
 
 type TabButtonProps = RenderProps<TabContextArgs>;
 export type TabContextArgs = {