ref(avatars): Use relative imports for avatar types (#93748)

Author: evanpurkhiser

static/app/components/core/avatar/actorAvatar.spec.tsx

@@ -4,13 +4,14 @@ import {UserFixture} from 'sentry-fixture/user';
 
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
-import {ActorAvatar} from 'sentry/components/core/avatar/actorAvatar';
 import MemberListStore from 'sentry/stores/memberListStore';
 import OrganizationStore from 'sentry/stores/organizationStore';
 import TeamStore from 'sentry/stores/teamStore';
 import type {Team as TeamType} from 'sentry/types/organization';
 import type {User as UserType} from 'sentry/types/user';
 
+import {ActorAvatar} from './actorAvatar';
+
 describe('ActorAvatar', function () {
   const user: UserType = {
     ...UserFixture(),

static/app/components/core/avatar/actorAvatar.tsx

@@ -2,14 +2,15 @@ import type React from 'react';
 import {useMemo} from 'react';
 import * as Sentry from '@sentry/react';
 
-import {BaseAvatar, type BaseAvatarProps} from 'sentry/components/core/avatar/baseAvatar';
-import {TeamAvatar, type TeamAvatarProps} from 'sentry/components/core/avatar/teamAvatar';
-import {UserAvatar, type UserAvatarProps} from 'sentry/components/core/avatar/userAvatar';
 import Placeholder from 'sentry/components/placeholder';
 import type {Actor} from 'sentry/types/core';
 import {useMembers} from 'sentry/utils/useMembers';
 import {useTeamsById} from 'sentry/utils/useTeamsById';
 
+import {BaseAvatar, type BaseAvatarProps} from './baseAvatar';
+import {TeamAvatar, type TeamAvatarProps} from './teamAvatar';
+import {UserAvatar, type UserAvatarProps} from './userAvatar';
+
 // Allows us to pass in an actor if we do not have any info aside from the ID
 interface SimpleActor extends Omit<Actor, 'name'> {
   name?: string;

static/app/components/core/avatar/avatarList.spec.tsx

@@ -3,7 +3,7 @@ import {UserFixture} from 'sentry-fixture/user';
 
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
-import AvatarList from 'sentry/components/core/avatar/avatarList';
+import AvatarList from './avatarList';
 
 function renderComponent({
   users,

static/app/components/core/avatar/avatarList.stories.tsx

@@ -1,11 +1,12 @@
 import {Fragment, useEffect} from 'react';
 
-import AvatarList from 'sentry/components/core/avatar/avatarList';
 import Placeholder from 'sentry/components/placeholder';
 import * as Storybook from 'sentry/stories';
 import {useMembers} from 'sentry/utils/useMembers';
 import {useUserTeams} from 'sentry/utils/useUserTeams';
 
+import AvatarList from './avatarList';
+
 function useLoadedMembers() {
   const {members, loadMore, ...rest} = useMembers({limit: 50});
 

static/app/components/core/avatar/avatarList.tsx

@@ -1,15 +1,16 @@
 import {css, type Theme} from '@emotion/react';
 import styled from '@emotion/styled';
 
-import {TeamAvatar} from 'sentry/components/core/avatar/teamAvatar';
-import {UserAvatar, type UserAvatarProps} from 'sentry/components/core/avatar/userAvatar';
 import {Tag} from 'sentry/components/core/badge/tag';
 import {Tooltip} from 'sentry/components/core/tooltip';
 import type {Actor} from 'sentry/types/core';
 import type {Team} from 'sentry/types/organization';
 import type {AvatarUser} from 'sentry/types/user';
 import {useHasStreamlinedUI} from 'sentry/views/issueDetails/utils';
 
+import {TeamAvatar} from './teamAvatar';
+import {UserAvatar, type UserAvatarProps} from './userAvatar';
+
 type Props = {
   avatarSize?: number;
   className?: string;

static/app/components/core/avatar/baseAvatar.tsx

@@ -4,15 +4,12 @@ import styled from '@emotion/styled';
 import classNames from 'classnames';
 import * as qs from 'query-string';
 
-import {Gravatar} from 'sentry/components/core/avatar/gravatar';
-import {LetterAvatar} from 'sentry/components/core/avatar/letterAvatar';
 import {Tooltip, type TooltipProps} from 'sentry/components/core/tooltip';
 import type {Avatar as AvatarType} from 'sentry/types/core';
 
-import {
-  type BaseAvatarComponentProps,
-  BaseAvatarComponentStyles,
-} from './baseAvatarComponentStyles';
+import {type BaseAvatarStyleProps, baseAvatarStyles} from './baseAvatarComponentStyles';
+import {Gravatar} from './gravatar';
+import {LetterAvatar} from './letterAvatar';
 
 const DEFAULT_REMOTE_SIZE = 120;
 
@@ -143,6 +140,6 @@ const AvatarContainer = styled('span')<{
   background-color: ${p => (p.suggested ? p.theme.background : 'none')};
 `;
 
-const ImageAvatar = styled('img')<BaseAvatarComponentProps>`
-  ${BaseAvatarComponentStyles};
+const ImageAvatar = styled('img')<BaseAvatarStyleProps>`
+  ${baseAvatarStyles};
 `;

static/app/components/core/avatar/baseAvatarComponentStyles.tsx

@@ -1,11 +1,11 @@
 import {css} from '@emotion/react';
 
-export interface BaseAvatarComponentProps {
+export interface BaseAvatarStyleProps {
   round?: boolean;
   suggested?: boolean;
 }
 
-export const BaseAvatarComponentStyles = (props: BaseAvatarComponentProps) => css`
+export const baseAvatarStyles = (props: BaseAvatarStyleProps) => css`
   position: absolute;
   top: 0px;
   left: 0px;

static/app/components/core/avatar/docIntegrationAvatar.tsx

@@ -1,7 +1,8 @@
-import {BaseAvatar, type BaseAvatarProps} from 'sentry/components/core/avatar/baseAvatar';
 import {PluginIcon} from 'sentry/plugins/components/pluginIcon';
 import type {DocIntegration} from 'sentry/types/integrations';
 
+import {BaseAvatar, type BaseAvatarProps} from './baseAvatar';
+
 interface DocIntegrationAvatarProps extends BaseAvatarProps {
   docIntegration?: DocIntegration;
   ref?: React.Ref<HTMLSpanElement>;

static/app/components/core/avatar/gravatar.spec.tsx

@@ -1,6 +1,6 @@
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
-import {Gravatar} from 'sentry/components/core/avatar/gravatar';
+import {Gravatar} from './gravatar';
 
 describe('Gravatar', () => {
   it('renders the image with remote size', async () => {

static/app/components/core/avatar/gravatar.tsx

@@ -3,13 +3,11 @@ import styled from '@emotion/styled';
 import * as Sentry from '@sentry/react';
 import * as qs from 'query-string';
 
-import {
-  type BaseAvatarComponentProps,
-  BaseAvatarComponentStyles,
-} from 'sentry/components/core/avatar/baseAvatarComponentStyles';
 import ConfigStore from 'sentry/stores/configStore';
 
-interface GravatarProps extends BaseAvatarComponentProps {
+import {type BaseAvatarStyleProps, baseAvatarStyles} from './baseAvatarComponentStyles';
+
+interface GravatarProps extends BaseAvatarStyleProps {
   remoteSize: number;
   gravatarId?: string;
   onError?: () => void;
@@ -94,6 +92,6 @@ async function hashGravatarId(message = ''): Promise<string> {
     .join('');
 }
 
-const Image = styled('img')<BaseAvatarComponentProps>`
-  ${BaseAvatarComponentStyles};
+const Image = styled('img')<BaseAvatarStyleProps>`
+  ${baseAvatarStyles};
 `;

static/app/components/core/avatar/index.stories.tsx

@@ -1,15 +1,16 @@
 import {Fragment} from 'react';
 
-import {DocIntegrationAvatar} from 'sentry/components/core/avatar/docIntegrationAvatar';
-import {OrganizationAvatar} from 'sentry/components/core/avatar/organizationAvatar';
-import {ProjectAvatar} from 'sentry/components/core/avatar/projectAvatar';
-import {SentryAppAvatar} from 'sentry/components/core/avatar/sentryAppAvatar';
-import {TeamAvatar} from 'sentry/components/core/avatar/teamAvatar';
-import {UserAvatar} from 'sentry/components/core/avatar/userAvatar';
 import * as Storybook from 'sentry/stories';
 
+import {DocIntegrationAvatar} from './docIntegrationAvatar';
+import {OrganizationAvatar} from './organizationAvatar';
+import {ProjectAvatar} from './projectAvatar';
+import {SentryAppAvatar} from './sentryAppAvatar';
+import {TeamAvatar} from './teamAvatar';
+import {UserAvatar} from './userAvatar';
+
 // eslint-disable-next-line import/no-webpack-loader-syntax
-import types from '!!type-loader!sentry/components/core/avatar/projectAvatar';
+import types from '!!type-loader!./projectAvatar';
 
 export default Storybook.story('Avatar', (story, APIReference) => {
   APIReference(types.Avatar);

static/app/components/core/avatar/letterAvatar.spec.tsx

@@ -1,6 +1,6 @@
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
-import {LetterAvatar} from 'sentry/components/core/avatar/letterAvatar';
+import {LetterAvatar} from './letterAvatar';
 
 describe('LetterAvatar', function () {
   const USER_1 = {

static/app/components/core/avatar/letterAvatar.tsx

@@ -5,14 +5,11 @@ import styled from '@emotion/styled';
 
 import {isChonkTheme} from 'sentry/utils/theme/withChonk';
 
-import {
-  type BaseAvatarComponentProps,
-  BaseAvatarComponentStyles,
-} from './baseAvatarComponentStyles';
+import {type BaseAvatarStyleProps, baseAvatarStyles} from './baseAvatarComponentStyles';
 
 interface LetterAvatarProps
   extends React.HTMLAttributes<SVGSVGElement>,
-    BaseAvatarComponentProps {
+    BaseAvatarStyleProps {
   displayName?: string;
   identifier?: string;
   ref?: React.Ref<SVGSVGElement>;
@@ -42,7 +39,7 @@ export function LetterAvatar({displayName, ref, ...props}: LetterAvatarProps) {
 }
 
 const LetterAvatarComponent = styled('svg')<LetterAvatarProps>`
-  ${BaseAvatarComponentStyles};
+  ${baseAvatarStyles};
 
   rect {
     fill: ${props =>

static/app/components/core/avatar/organizationAvatar.tsx

@@ -1,7 +1,8 @@
-import {BaseAvatar, type BaseAvatarProps} from 'sentry/components/core/avatar/baseAvatar';
 import type {OrganizationSummary} from 'sentry/types/organization';
 import {explodeSlug} from 'sentry/utils';
 
+import {BaseAvatar, type BaseAvatarProps} from './baseAvatar';
+
 interface OrganizationAvatarProps extends BaseAvatarProps {
   organization?: OrganizationSummary;
   ref?: React.Ref<HTMLSpanElement>;

static/app/components/core/avatar/projectAvatar.tsx

@@ -1,8 +1,9 @@
-import type {BaseAvatarProps} from 'sentry/components/core/avatar/baseAvatar';
 import {Tooltip} from 'sentry/components/core/tooltip';
 import {PlatformList} from 'sentry/components/platformList';
 import type {AvatarProject} from 'sentry/types/project';
 
+import type {BaseAvatarProps} from './baseAvatar';
+
 interface ProjectAvatarProps extends BaseAvatarProps {
   project: AvatarProject;
   direction?: 'left' | 'right';

static/app/components/core/avatar/sentryAppAvatar.tsx

@@ -1,7 +1,8 @@
-import {BaseAvatar, type BaseAvatarProps} from 'sentry/components/core/avatar/baseAvatar';
 import {IconGeneric} from 'sentry/icons';
 import type {AvatarSentryApp} from 'sentry/types/integrations';
 
+import {BaseAvatar, type BaseAvatarProps} from './baseAvatar';
+
 interface SentryAppAvatarProps extends BaseAvatarProps {
   isColor?: boolean;
   isDefault?: boolean;

static/app/components/core/avatar/teamAvatar.tsx

@@ -1,9 +1,10 @@
 import type React from 'react';
 
-import {BaseAvatar, type BaseAvatarProps} from 'sentry/components/core/avatar/baseAvatar';
 import type {Team} from 'sentry/types/organization';
 import {explodeSlug} from 'sentry/utils';
 
+import {BaseAvatar, type BaseAvatarProps} from './baseAvatar';
+
 export interface TeamAvatarProps extends BaseAvatarProps {
   team: Team | undefined;
   ref?: React.Ref<HTMLSpanElement | SVGSVGElement | HTMLImageElement>;

static/app/components/core/avatar/userAvatar.tsx

@@ -1,10 +1,11 @@
 import type React from 'react';
 
-import {BaseAvatar, type BaseAvatarProps} from 'sentry/components/core/avatar/baseAvatar';
 import type {Actor} from 'sentry/types/core';
 import type {AvatarUser} from 'sentry/types/user';
 import {userDisplayName} from 'sentry/utils/formatters';
 
+import {BaseAvatar, type BaseAvatarProps} from './baseAvatar';
+
 export interface UserAvatarProps extends BaseAvatarProps {
   gravatar?: boolean;
   ref?: React.Ref<HTMLSpanElement | SVGSVGElement | HTMLImageElement>;