ref(space) codemod for tempate literal

update mod execute changes execute changes remove unused imports ref: remove codemod lint and fix :hammer_and_wrench: apply pre-commit fixes fix
getsentry · JonasBa · Aug 8, 2024 · Aug 9, 2024 · Aug 14, 2024 · Aug 14, 2024
commit 67916223414096f179678e7b43af59efa65a3ad4
diff --git a/package.json b/package.json
@@ -263,9 +263,7 @@
       "last 3 iOS major versions",
       "Firefox ESR"
     ],
-    "test": [
-      "current node"
-    ]
+    "test": ["current node"]
   },
   "volta": {
     "extends": ".volta.json"

diff --git a/static/app/actionCreators/indicator.tsx b/static/app/actionCreators/indicator.tsx
@@ -7,7 +7,6 @@ import type FormModel from 'sentry/components/forms/model';
 import {DEFAULT_TOAST_DURATION} from 'sentry/constants';
 import {t, tct} from 'sentry/locale';
 import IndicatorStore from 'sentry/stores/indicatorStore';
-import {space} from 'sentry/styles/space';
 
 type IndicatorType = 'loading' | 'error' | 'success' | 'undo' | '';
 
@@ -250,11 +249,11 @@ export function saveOnBlurUndoMessage(
 
 const FormValue = styled('span')`
   font-style: italic;
-  margin: 0 ${space(0.5)};
+  margin: 0 ${p => p.theme.space(0.5)};
 `;
 const FieldName = styled('span')`
   font-weight: ${p => p.theme.fontWeightBold};
-  margin: 0 ${space(0.5)};
+  margin: 0 ${p => p.theme.space(0.5)};
 `;
 const MessageContainer = styled('div')`
   display: flex;

diff --git a/static/app/components/acl/featureDisabled.tsx b/static/app/components/acl/featureDisabled.tsx
@@ -8,7 +8,6 @@ import ExternalLink from 'sentry/components/links/externalLink';
 import {CONFIG_DOCS_URL} from 'sentry/constants';
 import {IconChevron, IconCopy} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
-import {space} from 'sentry/styles/space';
 import {selectText} from 'sentry/utils/selectText';
 import useCopyToClipboard from 'sentry/utils/useCopyToClipboard';
 
@@ -130,7 +129,7 @@ const FeatureDisabledMessage = styled('div')`
 `;
 
 const HelpDescription = styled('div')`
-  margin-top: ${space(1)};
+  margin-top: ${p => p.theme.space(1)};
 
   pre,
   code {
@@ -139,12 +138,12 @@ const HelpDescription = styled('div')`
   }
 
   button {
-    margin-bottom: ${space(0.5)};
+    margin-bottom: ${p => p.theme.space(0.5)};
   }
 `;
 
 const HelpText = styled('p')`
-  margin-bottom: ${space(1)};
+  margin-bottom: ${p => p.theme.space(1)};
 `;
 
 const ToggleButton = styled(Button)`
@@ -159,7 +158,7 @@ const ToggleButton = styled(Button)`
   ${ButtonLabel} {
     display: grid;
     grid-auto-flow: column;
-    gap: ${space(1)};
+    gap: ${p => p.theme.space(1)};
   }
 `;
 

diff --git a/static/app/components/actions/menuHeader.tsx b/static/app/components/actions/menuHeader.tsx
@@ -1,14 +1,13 @@
 import styled from '@emotion/styled';
 
 import MenuItem from 'sentry/components/menuItem';
-import {space} from 'sentry/styles/space';
 
 const MenuHeader = styled(MenuItem)`
   text-transform: uppercase;
   font-weight: ${p => p.theme.fontWeightBold};
   color: ${p => p.theme.gray400};
   border-bottom: 1px solid ${p => p.theme.innerBorder};
-  padding: ${space(1)};
+  padding: ${p => p.theme.space(1)};
 `;
 
 MenuHeader.defaultProps = {

diff --git a/static/app/components/actions/resolve.tsx b/static/app/components/actions/resolve.tsx
@@ -13,7 +13,6 @@ import {DropdownMenu} from 'sentry/components/dropdownMenu';
 import {Tooltip} from 'sentry/components/tooltip';
 import {IconReleases} from 'sentry/icons';
 import {t} from 'sentry/locale';
-import {space} from 'sentry/styles/space';
 import type {GroupStatusResolution, ResolvedStatusDetails} from 'sentry/types/group';
 import {GroupStatus, GroupSubstatus} from 'sentry/types/group';
 import type {Project} from 'sentry/types/project';
@@ -387,9 +386,9 @@ const StyledDropdownMenu = styled(DropdownMenu)<{itemsHidden: boolean}>`
 const SetupReleases = styled('div')`
   display: flex;
   flex-direction: column;
-  gap: ${space(2)};
+  gap: ${p => p.theme.space(2)};
   align-items: center;
-  padding: ${space(2)} 0;
+  padding: ${p => p.theme.space(2)} 0;
   text-align: center;
   color: ${p => p.theme.gray400};
   width: 250px;
@@ -399,5 +398,5 @@ const SetupReleases = styled('div')`
 
 const SetupReleasesHeader = styled('h6')`
   font-size: ${p => p.theme.fontSizeMedium};
-  margin-bottom: ${space(1)};
+  margin-bottom: ${p => p.theme.space(1)};
 `;
diff --git a/static/app/components/activity/item/index.tsx b/static/app/components/activity/item/index.tsx
@@ -3,7 +3,6 @@ import moment from 'moment-timezone';
 
 import {DateTime} from 'sentry/components/dateTime';
 import TimeSince from 'sentry/components/timeSince';
-import {space} from 'sentry/styles/space';
 import textStyles from 'sentry/styles/text';
 import type {AvatarUser} from 'sentry/types/user';
 
@@ -115,13 +114,13 @@ function ActivityItem({
 
 const ActivityItemWrapper = styled('div')`
   display: flex;
-  margin-bottom: ${space(2)};
+  margin-bottom: ${p => p.theme.space(2)};
 `;
 
 const ActivityHeader = styled('div')`
   display: flex;
   align-items: center;
-  padding: 6px ${space(2)};
+  padding: 6px ${p => p.theme.space(2)};
   border-bottom: 1px solid ${p => p.theme.border};
   font-size: ${p => p.theme.fontSizeMedium};
 
@@ -135,12 +134,12 @@ const ActivityHeaderContent = styled('div')`
 `;
 
 const ActivityBody = styled('div')`
-  padding: ${space(2)} ${space(2)};
+  padding: ${p => p.theme.space(2)} ${p => p.theme.space(2)};
   ${textStyles}
 `;
 
 const StyledActivityAvatar = styled(ActivityAvatar)`
-  margin-right: ${space(1)};
+  margin-right: ${p => p.theme.space(1)};
 `;
 
 const StyledTimeSince = styled(TimeSince)`

diff --git a/static/app/components/activity/note/body.tsx b/static/app/components/activity/note/body.tsx
@@ -1,6 +1,5 @@
 import styled from '@emotion/styled';
 
-import {space} from 'sentry/styles/space';
 import marked from 'sentry/utils/marked';
 
 type Props = {
@@ -31,7 +30,7 @@ const StyledNoteBody = styled('div')`
   pre,
   hr,
   blockquote {
-    margin-bottom: ${space(2)};
+    margin-bottom: ${p => p.theme.space(2)};
   }
 
   ul,
@@ -48,7 +47,7 @@ const StyledNoteBody = styled('div')`
   blockquote {
     font-size: 15px;
     border-left: 5px solid ${p => p.theme.innerBorder};
-    padding-left: ${space(1)};
+    padding-left: ${p => p.theme.space(1)};
     margin-left: 0;
   }
 `;

diff --git a/static/app/components/activity/note/header.tsx b/static/app/components/activity/note/header.tsx
@@ -6,7 +6,6 @@ import {DropdownMenu} from 'sentry/components/dropdownMenu';
 import {IconEllipsis} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import ConfigStore from 'sentry/stores/configStore';
-import {space} from 'sentry/styles/space';
 import type {User} from 'sentry/types/user';
 
 type Props = {
@@ -67,7 +66,7 @@ function NoteHeader({authorName, user, onEdit, onDelete}: Props) {
 const Container = styled('div')`
   display: flex;
   align-items: center;
-  gap: ${space(1)};
+  gap: ${p => p.theme.space(1)};
 `;
 
 export {NoteHeader};
diff --git a/static/app/components/activity/note/input.tsx b/static/app/components/activity/note/input.tsx
@@ -9,7 +9,6 @@ import {Button} from 'sentry/components/button';
 import {TabList, TabPanels, Tabs} from 'sentry/components/tabs';
 import {IconMarkdown} from 'sentry/icons';
 import {t} from 'sentry/locale';
-import {space} from 'sentry/styles/space';
 import textStyles from 'sentry/styles/text';
 import type {NoteType} from 'sentry/types/alerts';
 import domId from 'sentry/utils/domId';
@@ -291,8 +290,8 @@ const getNoteInputErrorStyles = (p: {theme: Theme; error?: string}) => {
 };
 
 const StyledTabList = styled(TabList)`
-  padding: 0 ${space(2)};
-  padding-top: ${space(0.5)};
+  padding: 0 ${p => p.theme.space(2)};
+  padding-top: ${p => p.theme.space(0.5)};
 `;
 
 const NoteInputForm = styled('form')<{error?: string}>`
@@ -309,7 +308,7 @@ const Footer = styled('div')`
   display: flex;
   border-top: 1px solid ${p => p.theme.border};
   justify-content: space-between;
-  padding-left: ${space(1.5)};
+  padding-left: ${p => p.theme.space(1.5)};
 `;
 
 const FooterButton = styled(Button)<{error?: boolean}>`
@@ -337,7 +336,7 @@ const ErrorMessage = styled('span')`
 const MarkdownIndicator = styled('div')`
   display: flex;
   align-items: center;
-  gap: ${space(1)};
+  gap: ${p => p.theme.space(1)};
   color: ${p => p.theme.subText};
 `;
 

diff --git a/static/app/components/alert.tsx b/static/app/components/alert.tsx
@@ -190,7 +190,7 @@ const alertStyles = ({
 
 const Wrap = styled('div')<AlertProps & {hovered: boolean}>`
   ${alertStyles}
-  padding: ${space(1.5)} ${space(2)};
+  padding: ${p => p.theme.space(1.5)} ${p => p.theme.space(2)};
 `;
 
 const IconWrapper = styled('div')`
@@ -210,7 +210,7 @@ const TrailingItems = styled('div')<{showIcon: boolean}>`
   grid-auto-flow: column;
   grid-template-rows: 100%;
   align-items: center;
-  gap: ${space(1)};
+  gap: ${p => p.theme.space(1)};
 
   @media (max-width: ${p => p.theme.breakpoints.small}) {
     /* In mobile, TrailingItems should wrap to a second row and be vertically aligned
@@ -219,12 +219,12 @@ const TrailingItems = styled('div')<{showIcon: boolean}>`
     grid-row: 2;
     grid-column: ${p => (p.showIcon ? 2 : 1)} / -1;
     justify-items: start;
-    margin: ${space(0.5)} 0;
+    margin: ${p => p.theme.space(0.5)} 0;
   }
 `;
 
 const ExpandIconWrap = styled(IconWrapper)`
-  margin-left: ${space(0.5)};
+  margin-left: ${p => p.theme.space(0.5)};
 `;
 
 const ExpandContainer = styled('div')<{showIcon: boolean; showTrailingItems: boolean}>`

diff --git a/static/app/components/alertLink.tsx b/static/app/components/alertLink.tsx
@@ -4,7 +4,6 @@ import omit from 'lodash/omit';
 import ExternalLink from 'sentry/components/links/externalLink';
 import Link from 'sentry/components/links/link';
 import {IconChevron} from 'sentry/icons';
-import {space} from 'sentry/styles/space';
 
 type Size = 'small' | 'normal';
 type Priority = 'info' | 'warning' | 'success' | 'error' | 'muted';
@@ -90,8 +89,9 @@ const StyledLink = styled(
   text-decoration-thickness: 0.08em;
   text-underline-offset: 0.06em;
   border: 1px solid ${p => p.theme.alert[p.priority].border};
-  padding: ${p => (p.size === 'small' ? `${space(1)} ${space(1.5)}` : space(2))};
-  margin-bottom: ${p => (p.withoutMarginBottom ? 0 : space(3))};
+  padding: ${p =>
+    p.size === 'small' ? `${p.theme.space(1)} ${p.theme.space(1.5)}` : p.theme.space(2)};
+  margin-bottom: ${p => (p.withoutMarginBottom ? 0 : p.theme.space(3))};
   border-radius: 0.25em;
   transition: 0.2s border-color;
 
@@ -118,13 +118,13 @@ const StyledLink = styled(
 const IconWrapper = styled('span')`
   display: flex;
   height: calc(${p => p.theme.fontSizeMedium} * ${p => p.theme.text.lineHeightBody});
-  margin-right: ${space(1)};
+  margin-right: ${p => p.theme.space(1)};
   align-items: center;
 `;
 
 const IconLink = styled(IconWrapper)`
   margin-right: 0;
-  margin-left: ${space(1)};
+  margin-left: ${p => p.theme.space(1)};
 `;
 
 const AlertLinkText = styled('div')`

diff --git a/static/app/components/alerts/notificationBar.tsx b/static/app/components/alerts/notificationBar.tsx
@@ -1,10 +1,9 @@
 import styled from '@emotion/styled';
 
 import {IconInfo} from 'sentry/icons';
-import {space} from 'sentry/styles/space';
 
 const StyledNotificationBarIconInfo = styled(IconInfo)`
-  margin-right: ${space(1)};
+  margin-right: ${p => p.theme.space(1)};
   color: ${p => p.theme.alert.info.color};
 `;
 
@@ -14,7 +13,7 @@ export const NotificationBar = styled('div')`
   color: ${p => p.theme.textColor};
   background-color: ${p => p.theme.alert.info.backgroundLight};
   border-bottom: 1px solid ${p => p.theme.alert.info.border};
-  padding: ${space(1.5)};
+  padding: ${p => p.theme.space(1.5)};
   font-size: 14px;
   line-height: normal;
   ${StyledNotificationBarIconInfo} {

diff --git a/static/app/components/alerts/pageBanner.tsx b/static/app/components/alerts/pageBanner.tsx
@@ -5,7 +5,6 @@ import {Button} from 'sentry/components/button';
 import Panel from 'sentry/components/panels/panel';
 import {IconClose} from 'sentry/icons';
 import {t} from 'sentry/locale';
-import {space} from 'sentry/styles/space';
 
 interface Props {
   description: ReactNode;
@@ -58,7 +57,7 @@ export default function PageBanner({
 
 const Wrapper = styled(Panel)`
   display: flex;
-  padding: ${space(2)};
+  padding: ${p => p.theme.space(2)};
   min-height: 100px;
   justify-content: space-between;
   align-items: center;
@@ -68,8 +67,8 @@ const Wrapper = styled(Panel)`
 const CloseButton = styled(Button)`
   justify-content: center;
   position: absolute;
-  top: -${space(1)};
-  right: -${space(1)};
+  top: -${p => p.theme.space(1)};
+  right: -${p => p.theme.space(1)};
   border-radius: 50%;
   height: ${p => p.theme.iconSizes.lg};
   width: ${p => p.theme.iconSizes.lg};
@@ -96,7 +95,7 @@ const Stack = styled('div')`
   flex-direction: column;
   justify-content: space-between;
   max-width: 50%;
-  gap: ${space(1)};
+  gap: ${p => p.theme.space(1)};
 `;
 
 const TextContainer = styled('div')`
@@ -105,7 +104,7 @@ const TextContainer = styled('div')`
   justify-content: space-between;
   z-index: 1;
   h4 {
-    margin-bottom: ${space(0.5)};
+    margin-bottom: ${p => p.theme.space(0.5)};
   }
 `;
 
@@ -119,6 +118,6 @@ const TypeText = styled(SubText)`
   align-items: center;
   display: flex;
   font-weight: ${p => p.theme.fontWeightNormal};
-  gap: ${space(0.5)};
+  gap: ${p => p.theme.space(0.5)};
   text-transform: uppercase;
 `;