♻️ refactor(styles): nuke styled prefix

dashpresshq · Nov 8, 2023 · 5354d70 · 5354d70
1 parent 8173945
commit 5354d70
Show file tree

Hide file tree

Showing 57 changed files with 322 additions and 344 deletions.
diff --git a/src/frontend/_layouts/app/LayoutImpl/Profile.tsx b/src/frontend/_layouts/app/LayoutImpl/Profile.tsx
@@ -25,7 +25,7 @@ const Name = styled(Typo.XS)`
   color: ${SYSTEM_COLORS.white};
 `;
 
-const StyledDropDownItem = styled.button`
+const DropDownItem = styled.button`
   display: block;
   width: 100%;
   padding: 6px 12px;
@@ -76,12 +76,9 @@ export function ProfileOnNavigation({ isFullWidth }: IProps) {
         <DownRoot direction="column">
           {[...constantNavigation, ...constantNavigationMenuItems].map(
             ({ label, value }) => (
-              <StyledDropDownItem
-                key={label}
-                onClick={() => router.push(value)}
-              >
+              <DropDownItem key={label} onClick={() => router.push(value)}>
                 {label}
-              </StyledDropDownItem>
+              </DropDownItem>
             )
           )}
         </DownRoot>

diff --git a/src/frontend/_layouts/app/LayoutImpl/RenderNavigation.tsx b/src/frontend/_layouts/app/LayoutImpl/RenderNavigation.tsx
@@ -18,13 +18,13 @@ import { useThemeColorShade } from "frontend/design-system/theme/useTheme";
 import { useNavigationStack } from "frontend/lib/routing/useNavigationStack";
 import { ActionIntegrationKeys } from "shared/types/actions";
 
-const StyledLeftSideNavMenuList = styled.li<{}>`
+const LeftSideNavMenuList = styled.li<{}>`
   list-style: none;
   display: block;
   transition: all 0.3s;
 `;
 
-const StyledLeftSideNavMenuListAnchor = styled.a<{
+const LeftSideNavMenuListAnchor = styled.a<{
   hoverColor: string;
   $isActive: boolean;
   $depth: number;
@@ -48,7 +48,7 @@ const StyledLeftSideNavMenuListAnchor = styled.a<{
   }
 `;
 
-const StyledIconRoot = styled.span<{ $isFullWidth: boolean }>`
+const IconRoot = styled.span<{ $isFullWidth: boolean }>`
   color: ${SYSTEM_COLORS.white};
   width: 20px;
   height: 20px;
@@ -58,7 +58,7 @@ const StyledIconRoot = styled.span<{ $isFullWidth: boolean }>`
   }
 `;
 
-const StyledLeftSideNavMenu = styled.ul<{}>`
+const LeftSideNavMenu = styled.ul<{}>`
   padding: 0;
   margin-bottom: 0;
 `;
@@ -157,17 +157,17 @@ export function RenderNavigation({
   const getBackgroundColor = useThemeColorShade();
 
   return (
-    <StyledLeftSideNavMenu>
+    <LeftSideNavMenu>
       {navigation.map(({ title, icon, type, link, id, children }) => {
         const isActive = activeItem === id;
         return (
-          <StyledLeftSideNavMenuList key={id}>
+          <LeftSideNavMenuList key={id}>
             {/* eslint-disable-next-line no-nested-ternary */}
             {type === NavigationMenuItemType.Header ? (
               <NavHeader $isFullWidth={isFullWidth}>{title}</NavHeader>
             ) : children && children.length > 0 ? (
               <>
-                <StyledLeftSideNavMenuListAnchor
+                <LeftSideNavMenuListAnchor
                   as={PlainButton}
                   $isActive={isActive}
                   $depth={depth}
@@ -178,7 +178,7 @@ export function RenderNavigation({
                     setActiveItem(isActive ? "" : id);
                   }}
                 >
-                  <StyledIconRoot
+                  <IconRoot
                     aria-label={`${title} Icon`}
                     $isFullWidth={isFullWidth}
                     dangerouslySetInnerHTML={{
@@ -197,7 +197,7 @@ export function RenderNavigation({
                       />
                     </Stack>
                   )}
-                </StyledLeftSideNavMenuListAnchor>
+                </LeftSideNavMenuListAnchor>
                 {isActive && isFullWidth && (
                   <RenderNavigation
                     setIsFullWidth={setIsFullWidth}
@@ -209,7 +209,7 @@ export function RenderNavigation({
               </>
             ) : (
               <Link href={getNavigationTypeLink(type, link)} passHref>
-                <StyledLeftSideNavMenuListAnchor
+                <LeftSideNavMenuListAnchor
                   $isActive={isActive}
                   $depth={depth}
                   onClick={() => {
@@ -224,7 +224,7 @@ export function RenderNavigation({
                   hoverColor={getBackgroundColor("primary-color", 45)}
                 >
                   {icon && (
-                    <StyledIconRoot
+                    <IconRoot
                       aria-label={`${title} Icon`}
                       $isFullWidth={isFullWidth}
                       dangerouslySetInnerHTML={{
@@ -235,12 +235,12 @@ export function RenderNavigation({
                   <NavLabel ellipsis $isFullWidth={isFullWidth}>
                     {title}
                   </NavLabel>
-                </StyledLeftSideNavMenuListAnchor>
+                </LeftSideNavMenuListAnchor>
               </Link>
             )}
-          </StyledLeftSideNavMenuList>
+          </LeftSideNavMenuList>
         );
       })}
-    </StyledLeftSideNavMenu>
+    </LeftSideNavMenu>
   );
 }
diff --git a/src/frontend/_layouts/app/LayoutImpl/SideBar.tsx b/src/frontend/_layouts/app/LayoutImpl/SideBar.tsx
@@ -18,15 +18,15 @@ import { NavigationSkeleton } from "./NavigationSkeleton";
 import { ProfileOnNavigation } from "./Profile";
 import { RenderNavigation } from "./RenderNavigation";
 
-const StyledLogoSm = styled.img`
+const LogoSm = styled.img`
   width: 28px;
 `;
 
-const StyledLogoFull = styled.img`
+const LogoFull = styled.img`
   width: 120px;
 `;
 
-const StyledBrand = styled.div`
+const Brand = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -56,7 +56,7 @@ const Root = styled.div<{ $isFullWidth: boolean }>`
       : SIDE_BAR_WIDTH_VARIATIONS.collapsed}px;
 `;
 
-const StyledIconRoot = styled.span<{ $isFullWidth: boolean }>`
+const IconRoot = styled.span<{ $isFullWidth: boolean }>`
   color: ${SYSTEM_COLORS.white};
   width: 32px;
   height: 32px;
@@ -65,7 +65,7 @@ const StyledIconRoot = styled.span<{ $isFullWidth: boolean }>`
   ${(props) => props.$isFullWidth && "transform: rotate(180deg);"}
 `;
 
-export const StyledPlainButton = styled.button`
+export const PlainButton = styled.button`
   &:focus {
     outline: 0;
   }
@@ -105,19 +105,19 @@ export function SideBar({ isFullWidth, setIsFullWidth }: IProps) {
 
   return (
     <Root $isFullWidth={isFullWidth}>
-      <StyledBrand
+      <Brand
         style={{
           backgroundColor: getThemeColorShade("primary-color", 35),
         }}
       >
         <Link href="/">
           {isFullWidth ? (
-            <StyledLogoFull src={siteConfig.fullLogo} alt="full logo" />
+            <LogoFull src={siteConfig.fullLogo} alt="full logo" />
           ) : (
-            <StyledLogoSm src={siteConfig.logo} alt="small logo" />
+            <LogoSm src={siteConfig.logo} alt="small logo" />
           )}
         </Link>
-      </StyledBrand>
+      </Brand>
       <Stack
         justify="space-between"
         direction="column"
@@ -143,14 +143,14 @@ export function SideBar({ isFullWidth, setIsFullWidth }: IProps) {
           </ViewStateMachine>
         </Scroll>
 
-        <StyledPlainButton
+        <PlainButton
           style={{
             backgroundColor: getThemeColorShade("primary-color", 30),
           }}
           onClick={() => setIsFullWidth(!isFullWidth)}
         >
-          <StyledIconRoot as={ChevronRight} $isFullWidth={isFullWidth} />
-        </StyledPlainButton>
+          <IconRoot as={ChevronRight} $isFullWidth={isFullWidth} />
+        </PlainButton>
       </Stack>
     </Root>
   );

diff --git a/src/frontend/_layouts/app/LayoutImpl/index.tsx b/src/frontend/_layouts/app/LayoutImpl/index.tsx
@@ -15,7 +15,7 @@ const Root = styled.div`
   flex-direction: row;
 `;
 
-const StyledPage = styled.div<{ $isFullWidth: boolean }>`
+const Page = styled.div<{ $isFullWidth: boolean }>`
   padding: 16px;
   min-height: 100vh;
   display: block;
@@ -43,7 +43,7 @@ export function LayoutImplementation({ children }: IProps) {
   return (
     <Root>
       <SideBar isFullWidth={isFullWidth} setIsFullWidth={setIsFullWidth} />
-      <StyledPage $isFullWidth={isFullWidth}>{children}</StyledPage>
+      <Page $isFullWidth={isFullWidth}>{children}</Page>
     </Root>
   );
 }
diff --git a/src/frontend/design-system/components/Alert/index.tsx b/src/frontend/design-system/components/Alert/index.tsx
@@ -12,7 +12,7 @@ import { Typo } from "frontend/design-system/primitives/Typo";
 import { getBestErrorMessage } from "frontend/lib/toast/utils";
 import { Stack } from "frontend/design-system/primitives/Stack";
 import { Spacer } from "frontend/design-system/primitives/Spacer";
-import { StyledSoftButton } from "../Button/Button";
+import { SoftButtonStyled } from "../Button/Button";
 
 export enum AlertType {
   Success = "success",
@@ -52,7 +52,7 @@ const Root = styled.div<{
   border-color: ${(props) => props.color}11;
 `;
 
-const StyledAlertButton = styled.button<{ color: string }>`
+const AlertButton = styled.button<{ color: string }>`
   color: ${(props) => props.color}AA;
   padding: 0;
   align-self: flex-start;
@@ -88,11 +88,11 @@ const Content = styled.div`
   align-self: center;
 `;
 
-const StyledText = styled(Typo.XS)<{ $color: string }>`
+const Text = styled(Typo.XS)<{ $color: string }>`
   color: ${(props) => props.$color};
 `;
 
-const ActionButton = styled(StyledSoftButton)<{ $color: string }>`
+const ActionButton = styled(SoftButtonStyled)<{ $color: string }>`
   background-color: ${(props) => props.$color}1A;
   color: ${(props) => props.$color};
   border-color: ${(props) => props.$color};
@@ -119,9 +119,9 @@ export function Alert({ type, message, renderJsx, action }: IProps) {
         <IconCmp size={20} />
       </IconRoot>
       <Content>
-        <StyledText $color={color}>
+        <Text $color={color}>
           {(renderJsx ? message : getBestErrorMessage(message)) as string}
-        </StyledText>
+        </Text>
         {action && (
           <>
             <Spacer />
@@ -134,7 +134,7 @@ export function Alert({ type, message, renderJsx, action }: IProps) {
           </>
         )}
       </Content>
-      <StyledAlertButton
+      <AlertButton
         type="button"
         onClick={() => {
           setShouldRender(false);
@@ -143,7 +143,7 @@ export function Alert({ type, message, renderJsx, action }: IProps) {
         aria-label="Close"
       >
         <X size={16} />
-      </StyledAlertButton>
+      </AlertButton>
     </Root>
   );
 }

diff --git a/src/frontend/design-system/components/Badge/Badge.tsx b/src/frontend/design-system/components/Badge/Badge.tsx
@@ -3,7 +3,7 @@ import styled from "styled-components";
 import { SYSTEM_COLORS } from "frontend/design-system/theme/system";
 import { StyledBadge } from "./Base";
 
-const StyledSoftBadge = styled(StyledBadge)`
+const SoftBadge = styled(StyledBadge)`
   background-color: ${(props) => SYSTEM_COLORS[props.color]};
   color: ${SYSTEM_COLORS.white};
 `;
@@ -14,5 +14,5 @@ export interface IProps {
 }
 
 export function Badge({ text, color }: IProps) {
-  return <StyledSoftBadge color={color}>{text}</StyledSoftBadge>;
+  return <SoftBadge color={color}>{text}</SoftBadge>;
 }
diff --git a/src/frontend/design-system/components/Badge/BadgePill.tsx b/src/frontend/design-system/components/Badge/BadgePill.tsx
@@ -3,7 +3,7 @@ import styled, { css } from "styled-components";
 import { SYSTEM_COLORS } from "frontend/design-system/theme/system";
 import { StyledBadge } from "./Base";
 
-const StyledBadgePill = styled(StyledBadge)<{
+const BadgePillStyled = styled(StyledBadge)<{
   isIconBadge?: true;
   color: string;
 }>`
@@ -38,8 +38,8 @@ export function BadgePill({ value, color, isIconBadge }: IProps) {
     return null;
   }
   return (
-    <StyledBadgePill color={color} isIconBadge={isIconBadge}>
+    <BadgePillStyled color={color} isIconBadge={isIconBadge}>
       {value}
-    </StyledBadgePill>
+    </BadgePillStyled>
   );
 }
diff --git a/src/frontend/design-system/components/Breadcrumbs/index.tsx b/src/frontend/design-system/components/Breadcrumbs/index.tsx
@@ -4,7 +4,7 @@ import styled, { css } from "styled-components";
 import { USE_ROOT_COLOR } from "frontend/design-system/theme/root";
 import { ILabelValue } from "shared/types/options";
 
-const StyledBreadcrumb = styled.ol`
+const Breadcrumb = styled.ol`
   display: flex;
   flex-wrap: wrap;
   margin: 0;
@@ -17,7 +17,7 @@ const StyledBreadcrumb = styled.ol`
   background-color: transparent;
 `;
 
-const StyledBreadcrumbItem = styled.li`
+const BreadcrumbItem = styled.li`
   display: flex;
   color: ${USE_ROOT_COLOR("muted-text")};
 
@@ -39,7 +39,7 @@ const StyledBreadcrumbItem = styled.li`
   }
 `;
 
-const StyledBreadcrumbItemLink = styled.button<{ active: boolean }>`
+const BreadcrumbItemLink = styled.button<{ active: boolean }>`
   font-weight: 400;
   border: none;
   padding: 0;
@@ -62,31 +62,31 @@ export interface IProps {
 export function Breadcrumbs({ items, onCrumbClick }: IProps) {
   const itemsLength = items.length;
   return (
-    <StyledBreadcrumb>
+    <Breadcrumb>
       {items.map(({ label, value }, index) => {
         const isLastElement = index === itemsLength - 1;
         return (
-          <StyledBreadcrumbItem key={value}>
+          <BreadcrumbItem key={value}>
             {/* eslint-disable-next-line no-nested-ternary */}
             {isLastElement ? (
               label
             ) : onCrumbClick ? (
-              <StyledBreadcrumbItemLink
+              <BreadcrumbItemLink
                 active={isLastElement}
                 onClick={() => onCrumbClick(index)}
               >
                 {label}
-              </StyledBreadcrumbItemLink>
+              </BreadcrumbItemLink>
             ) : (
               <Link href={value} passHref>
-                <StyledBreadcrumbItemLink active={isLastElement}>
+                <BreadcrumbItemLink active={isLastElement}>
                   {label}
-                </StyledBreadcrumbItemLink>
+                </BreadcrumbItemLink>
               </Link>
             )}
-          </StyledBreadcrumbItem>
+          </BreadcrumbItem>
         );
       })}
-    </StyledBreadcrumb>
+    </Breadcrumb>
   );
 }