🐛 fix(styled-components): use $ prefix for dom props

dashpresshq · Apr 14, 2024 · 66f70ce · 66f70ce
1 parent 9de4a78
commit 66f70ce
Show file tree

Hide file tree

Showing 49 changed files with 143 additions and 134 deletions.
diff --git a/src/backend/dashboard-widgets/dashboard-widgets.service.ts b/src/backend/dashboard-widgets/dashboard-widgets.service.ts
@@ -158,9 +158,9 @@ export class DashboardWidgetsApiService {
             icon: SystemIconsList[index % (SystemIconsList.length - 1)],
             script: dateField
               ? `const actual = await $.query(${queryQuote}${plainCountQuery}${queryQuote});
-    const relative = await $.query(${queryQuote}${dateCountQuery}${queryQuote});
+const relative = await $.query(${queryQuote}${dateCountQuery}${queryQuote});
 
-    return [actual[0], relative[0]];
+return [actual[0], relative[0]];
                 `
               : `return await $.query(${queryQuote}${plainCountQuery}${queryQuote})`,
           };

diff --git a/src/frontend/_layouts/app/LayoutImpl/NavigationSkeleton.tsx b/src/frontend/_layouts/app/LayoutImpl/NavigationSkeleton.tsx
@@ -26,8 +26,8 @@ export function NavigationSkeleton() {
 
   return (
     <Stack
-      direction="column"
-      spacing={16}
+      $direction="column"
+      $spacing={16}
       style={{ padding: 24, marginTop: 48 }}
     >
       {SCHEMA.map((type, index) => {

diff --git a/src/frontend/_layouts/app/LayoutImpl/Profile.tsx b/src/frontend/_layouts/app/LayoutImpl/Profile.tsx
@@ -48,8 +48,8 @@ export function ProfileOnNavigation({ isFullWidth }: IProps) {
   }
 
   return (
-    <ProfileRoot justify="space-between" align="center">
-      <Name weight="bold">
+    <ProfileRoot $justify="space-between" $align="center">
+      <Name $weight="bold">
         Hi,
         {currentUser.isLoading ? `There` : ellipsis(currentUser.data?.name, 14)}
       </Name>

diff --git a/src/frontend/_layouts/app/LayoutImpl/RenderNavigation.tsx b/src/frontend/_layouts/app/LayoutImpl/RenderNavigation.tsx
@@ -187,7 +187,11 @@ export function RenderNavigation({
                 >
                   {menuIcon}
                   {isFullWidth && (
-                    <Stack justify="space-between" spacing={0} align="center">
+                    <Stack
+                      $justify="space-between"
+                      $spacing={0}
+                      $align="center"
+                    >
                       <NavLabel $isFullWidth={isFullWidth}>{title}</NavLabel>
                       <SubMenuArrow
                         $isFullWidth={isFullWidth}

diff --git a/src/frontend/_layouts/app/LayoutImpl/SideBar.tsx b/src/frontend/_layouts/app/LayoutImpl/SideBar.tsx
@@ -129,9 +129,9 @@ export function SideBar({ isFullWidth, setIsFullWidth }: IProps) {
         </Link>
       </Brand>
       <Stack
-        justify="space-between"
-        direction="column"
-        spacing={0}
+        $justify="space-between"
+        $direction="column"
+        $spacing={0}
         style={{ height: "calc(100vh - 70px)" }}
       >
         <Scroll

diff --git a/src/frontend/_layouts/app/_MainContent.tsx b/src/frontend/_layouts/app/_MainContent.tsx
@@ -72,7 +72,7 @@ export function MainContent({
         </title>
         <meta name="viewport" content="initial-scale=1.0, width=device-width" />
       </Head>
-      <Stack justify="space-between" align="center">
+      <Stack $justify="space-between" $align="center">
         <HeaderLeft>
           <Typo.MD>{pageTitle}</Typo.MD>
           <Breadcrumbs items={homedBreadcrumb} onCrumbClick={goToLinkIndex} />

diff --git a/src/frontend/_layouts/guest/_partials/GuestContainer/index.tsx b/src/frontend/_layouts/guest/_partials/GuestContainer/index.tsx
@@ -21,7 +21,7 @@ const WrapperRow = styled(Stack)`
 export function GuestContainer({ children }: { children: ReactNode }) {
   return (
     <Root>
-      <WrapperRow justify="center" align="center">
+      <WrapperRow $justify="center" $align="center">
         {children}
       </WrapperRow>
     </Root>

diff --git a/src/frontend/_layouts/guest/_partials/GuestHeader/index.tsx b/src/frontend/_layouts/guest/_partials/GuestHeader/index.tsx
@@ -35,9 +35,9 @@ export function GuestHeader({
         <Spacer />
         {fullLogo && <img src={fullLogo} height="40" alt="logo" />}
         <Spacer />
-        <Typo.MD color="inverse">{title}</Typo.MD>
+        <Typo.MD $color="inverse">{title}</Typo.MD>
         <Spacer size="xs" />
-        <Typo.XS color="inverse">{subTitle}</Typo.XS>
+        <Typo.XS $color="inverse">{subTitle}</Typo.XS>
       </a>
     </Root>
   );

diff --git a/src/frontend/design-system/components/Breadcrumbs/index.tsx b/src/frontend/design-system/components/Breadcrumbs/index.tsx
@@ -39,7 +39,7 @@ const BreadcrumbItem = styled.li`
   }
 `;
 
-const BreadcrumbItemLink = styled.button<{ active: boolean }>`
+const BreadcrumbItemLink = styled.button<{ $active: boolean }>`
   font-weight: 400;
   border: none;
   padding: 0;
@@ -48,7 +48,7 @@ const BreadcrumbItemLink = styled.button<{ active: boolean }>`
   color: ${USE_ROOT_COLOR("primary-color")};
 
   ${(props) =>
-    props.active &&
+    props.$active &&
     css`
       color: ${USE_ROOT_COLOR("muted-text")};
     `}
@@ -72,14 +72,14 @@ export function Breadcrumbs({ items, onCrumbClick }: IProps) {
               label
             ) : onCrumbClick ? (
               <BreadcrumbItemLink
-                active={isLastElement}
+                $active={isLastElement}
                 onClick={() => onCrumbClick(index)}
               >
                 {label}
               </BreadcrumbItemLink>
             ) : (
               <Link href={value} passHref>
-                <BreadcrumbItemLink active={isLastElement}>
+                <BreadcrumbItemLink $active={isLastElement}>
                   {label}
                 </BreadcrumbItemLink>
               </Link>

diff --git a/src/frontend/design-system/components/Button/ActionButtons/index.tsx b/src/frontend/design-system/components/Button/ActionButtons/index.tsx
@@ -24,7 +24,7 @@ export function ActionButtons({
   const ellipsisButtons = sortedActions.slice(ELLIPSIS_THRESHOLD);
 
   return (
-    <Stack width="auto">
+    <Stack $width="auto">
       {buttonsToShow.map((actionButton) => (
         <SoftButton
           key={actionButton.id}

diff --git a/src/frontend/design-system/components/Button/FormButton/index.tsx b/src/frontend/design-system/components/Button/FormButton/index.tsx
@@ -27,12 +27,12 @@ export const actionButtonIsMakingRequest = (
     size: 16,
   };
   return isMakingRequest ? (
-    <Stack align="center" justify="center" width="auto">
+    <Stack $align="center" $justify="center" $width="auto">
       <Spin as={Loader} {...iconProps} />
       <span>{text(true)}</span>
     </Stack>
   ) : (
-    <Stack align="center" justify="center" width="auto">
+    <Stack $align="center" $justify="center" $width="auto">
       <SystemIcon
         icon={systemIcon}
         {...iconProps}
@@ -83,7 +83,7 @@ export function FormButton({
   );
 
   return (
-    <Stack justify="end">
+    <Stack $justify="end">
       {isInverse ? (
         <OutlineButton {...options}>{toRender}</OutlineButton>
       ) : (

diff --git a/src/frontend/design-system/components/Button/SoftButton.tsx b/src/frontend/design-system/components/Button/SoftButton.tsx
@@ -31,10 +31,10 @@ export function SoftButton({
     <Spin as={Loader} {...iconProps} />
   ) : (
     <Stack
-      spacing={4}
-      width="auto"
-      align="center"
-      justify={block ? "center" : undefined}
+      $spacing={4}
+      $width="auto"
+      $align="center"
+      $justify={block ? "center" : undefined}
     >
       <>
         <SystemIcon icon={systemIcon} {...iconProps} />

diff --git a/src/frontend/design-system/components/ConfirmAlert/index.tsx b/src/frontend/design-system/components/ConfirmAlert/index.tsx
@@ -36,9 +36,9 @@ from {
 `;
 
 const Overlay = styled(Stack).attrs({
-  direction: "column",
-  align: "center",
-  justify: "center",
+  $direction: "column",
+  $align: "center",
+  $justify: "center",
 })`
   position: fixed;
   top: 0;
@@ -65,7 +65,7 @@ export function Presentation({ action, title, onClose }: IPresentationProps) {
       tabIndex={-1}
     >
       <Body>
-        <Typo.MD weight="bold">
+        <Typo.MD $weight="bold">
           <span id="confirm_delete_label"> {title} </span>
         </Typo.MD>
         <Spacer size="xl" />
@@ -75,7 +75,7 @@ export function Presentation({ action, title, onClose }: IPresentationProps) {
           </span>
         </Typo.XS>
         <Spacer size="xxl" />
-        <Stack justify="center" spacing={8}>
+        <Stack $justify="center" $spacing={8}>
           <SoftButton action={onClose} label="Cancel" systemIcon={null} />
 
           <SoftButton

diff --git a/src/frontend/design-system/components/DropdownMenu/index.tsx b/src/frontend/design-system/components/DropdownMenu/index.tsx
@@ -180,7 +180,7 @@ export function DropDownMenu({
   const { systemIcon, label } = currentMenuItem;
 
   const currentItem = (
-    <Stack spacing={4} align="center">
+    <Stack $spacing={4} $align="center">
       {currentMenuItem.isMakingRequest ? (
         <Spin as={Loader} size={14} />
       ) : (
@@ -205,8 +205,8 @@ export function DropDownMenu({
   return (
     <Dropdown
       as={Stack}
-      spacing={0}
-      width="auto"
+      $spacing={0}
+      $width="auto"
       show={dropDownMode.isOn}
       align="end"
       onToggle={toggleDropDown}
@@ -254,13 +254,13 @@ export function DropDownMenu({
               )}
               <Typo.XS
                 as="span"
-                color={menuItem.disabled ? "muted" : undefined}
+                $color={menuItem.disabled ? "muted" : undefined}
               >
                 {menuItem.label}
               </Typo.XS>
             </Stack>
             {menuItem.description ? (
-              <Typo.XS color="muted" as="span">
+              <Typo.XS $color="muted" as="span">
                 {menuItem.description}
               </Typo.XS>
             ) : null}

diff --git a/src/frontend/design-system/components/EmptyWrapper/index.tsx b/src/frontend/design-system/components/EmptyWrapper/index.tsx
@@ -20,7 +20,7 @@ export function EmptyWrapper({ text, createNew }: IEmptyWrapperProps) {
     <Root>
       <Frown size={50} color={USE_ROOT_COLOR("muted-text")} />
       <Spacer size="xxl" />
-      <Typo.MD color="muted"> {text} </Typo.MD>
+      <Typo.MD $color="muted"> {text} </Typo.MD>
       {createNew && (
         <>
           <Spacer size="xxl" />

diff --git a/src/frontend/design-system/components/Form/FormCheckBox/index.tsx b/src/frontend/design-system/components/Form/FormCheckBox/index.tsx
@@ -44,7 +44,7 @@ export function FormCheckBox({
           id={input.name}
         />
         <label htmlFor={input.name}>
-          <Typo.MD color={disabled ? "muted" : undefined}>{label}</Typo.MD>
+          <Typo.MD $color={disabled ? "muted" : undefined}>{label}</Typo.MD>
         </label>
       </Stack>
       <FormFeedback>

diff --git a/src/frontend/design-system/components/Form/FormFileInput/Presentation.tsx b/src/frontend/design-system/components/Form/FormFileInput/Presentation.tsx
@@ -128,7 +128,7 @@ export function Presentation({
         </Typo.MD>
         <Spacer />
         {value && (
-          <Typo.SM color="muted">
+          <Typo.SM $color="muted">
             {value}{" "}
             {!disabled ? (
               <SoftButton
@@ -145,7 +145,7 @@ export function Presentation({
           </Typo.SM>
         )}
         {error && (
-          <Typo.MD color="danger" weight="bold">
+          <Typo.MD $color="danger" $weight="bold">
             {error}
           </Typo.MD>
         )}

diff --git a/src/frontend/design-system/components/Form/FormSwitch/index.tsx b/src/frontend/design-system/components/Form/FormSwitch/index.tsx
@@ -124,7 +124,7 @@ export function FormSwitch(props: IProps) {
 
   return (
     <Root htmlFor={name} size={size}>
-      <Stack spacing={SIZES_CONFIG[size].labelSpacing} align="center">
+      <Stack $spacing={SIZES_CONFIG[size].labelSpacing} $align="center">
         <Input
           id={name}
           type="checkbox"
@@ -140,7 +140,7 @@ export function FormSwitch(props: IProps) {
         {label ? (
           <div style={{ cursor: "pointer" }}>
             <Typo.Raw
-              color={disabled ? "muted" : undefined}
+              $color={disabled ? "muted" : undefined}
               size={SIZES_CONFIG[size].fontSize}
             >
               {label}

diff --git a/src/frontend/design-system/components/Form/Stories.tsx b/src/frontend/design-system/components/Form/Stories.tsx
@@ -330,7 +330,7 @@ function DemoForm() {
               },
             ]}
           />
-          <Stack justify="flex-end">
+          <Stack $justify="flex-end">
             <FormButton
               text={(isSubmitting) =>
                 isSubmitting ? "Making Progress" : "Make Progress"

diff --git a/src/frontend/design-system/components/Form/_wrapForm.tsx b/src/frontend/design-system/components/Form/_wrapForm.tsx
@@ -27,7 +27,7 @@ export const wrapLabelAndError = (
   }: ISharedFormInput
 ) => (
   <>
-    <Stack justify="space-between" align="baseline">
+    <Stack $justify="space-between" $align="baseline">
       <div>
         {label && (
           <>
@@ -44,7 +44,7 @@ export const wrapLabelAndError = (
         ) : null}
       </div>
       {rightActions.length > 0 && (
-        <Stack flex={1} justify="end">
+        <Stack $flex={1} $justify="end">
           {rightActions.map((rightAction) => (
             <SoftButton
               key={rightAction.label}

diff --git a/src/frontend/design-system/components/ListManager/ListManagerItem/index.tsx b/src/frontend/design-system/components/ListManager/ListManagerItem/index.tsx
@@ -159,7 +159,7 @@ export function ListManagerItem({
   const id = useId();
   const content = (
     <Stack>
-      <Stack align="center">
+      <Stack $align="center">
         <div style={{ display: sortable && !subtle ? "block" : "none" }}>
           <SortableKnob>
             <GrabIcon />
@@ -182,7 +182,7 @@ export function ListManagerItem({
           {subLabel ? <SubLabel $active={active}>{subLabel}</SubLabel> : null}
         </div>
       </Stack>
-      <Stack justify="end" width="initial">
+      <Stack $justify="end" $width="initial">
         <>
           {actionButtons.map(
             ({

diff --git a/src/frontend/design-system/components/OffCanvas/index.tsx b/src/frontend/design-system/components/OffCanvas/index.tsx
@@ -76,8 +76,8 @@ export function OffCanvas({
         {show && (
           <>
             <Header>
-              <Stack justify="space-between" align="center">
-                <Typo.MD weight="bold">{title}</Typo.MD>
+              <Stack $justify="space-between" $align="center">
+                <Typo.MD $weight="bold">{title}</Typo.MD>
                 <SoftButton
                   justIcon
                   label="Close Canvas"

diff --git a/src/frontend/design-system/components/Section/SectionBox/index.tsx b/src/frontend/design-system/components/Section/SectionBox/index.tsx
@@ -45,12 +45,12 @@ export function SectionBox({
       <Card>
         {!headLess ? (
           <CardHeader>
-            <Stack justify="space-between" align="center">
+            <Stack $justify="space-between" $align="center">
               <Stack>
                 {isLoading ? (
                   <BaseSkeleton width="150px" height="20px" />
                 ) : (
-                  <Typo.MD weight="bold">{title}</Typo.MD>
+                  <Typo.MD $weight="bold">{title}</Typo.MD>
                 )}
                 {description ? (
                   <Tooltip text={description}>

diff --git a/src/frontend/design-system/components/Section/SectionDivider/index.tsx b/src/frontend/design-system/components/Section/SectionDivider/index.tsx
@@ -43,7 +43,7 @@ ContentLayout.Right = function SectionRight({ children }: IProps) {
 
 ContentLayout.Center = function SectionCenter({ children }: IProps) {
   return (
-    <Stack justify="center">
+    <Stack $justify="center">
       <div style={{ maxWidth: "1200px", width: "100%" }}>{children}</div>
     </Stack>
   );

diff --git a/src/frontend/design-system/components/Skeleton/Form/index.tsx b/src/frontend/design-system/components/Skeleton/Form/index.tsx
@@ -21,7 +21,7 @@ export function FormSkeleton({ schema }: IProps) {
           <BaseSkeleton height={schema[key]} bottom={24} />
         </Fragment>
       ))}
-      <Stack justify="end">
+      <Stack $justify="end">
         <BaseSkeleton height="3em" width="120px" bottom={3} top={-8} />
       </Stack>
     </div>

diff --git a/src/frontend/design-system/components/Table/Foot.tsx b/src/frontend/design-system/components/Table/Foot.tsx
@@ -27,8 +27,8 @@ export function TableFoot({ table, dataLength }: IProps) {
         <tr key={footerGroup.id}>
           {footerGroup.headers.map((header) => (
             <Th key={header.id}>
-              <Stack justify="start">
-                <Typo.SM weight="bold" as="span">
+              <Stack $justify="start">
+                <Typo.SM $weight="bold" as="span">
                   {header.isPlaceholder
                     ? null
                     : flexRender(