fix(view): errors for transient props in styled-components

MauriceNino · Dec 31, 2022 · 599e968 · 599e968
1 parent cb429e3
commit 599e968
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 45 deletions.
diff --git a/apps/view/src/components/chart-container.tsx b/apps/view/src/components/chart-container.tsx
@@ -1,22 +1,22 @@
+import { Transient } from '@dash/common';
 import { motion } from 'framer-motion';
 import { forwardRef, ReactElement } from 'react';
 import { SwapSpinner } from 'react-spinners-kit';
 import ReactVirtualizedAutoSizer from 'react-virtualized-auto-sizer';
 import styled, { useTheme } from 'styled-components';
 import { useIsMobile } from '../services/mobile';
 
-type ContainerProps = {
-  mobile: boolean;
+type ContainerProps = Transient<{
   edges: [boolean, boolean, boolean, boolean];
   loading: boolean;
-};
+}>;
 const Container = styled.div<ContainerProps>`
   position: relative;
   display: flex;
 
   min-width: 0;
   background-color: ${({ theme }) => theme.colors.surface};
-  border-radius: ${({ edges: [top, right, bottom, left] }) =>
+  border-radius: ${({ $edges: [top, right, bottom, left] }) =>
     `${top ? '25px' : '10px'} ${right ? '25px' : '10px'} ${
       bottom ? '25px' : '10px'
     } ${left ? '25px' : '10px'}`};
@@ -28,8 +28,8 @@ const Container = styled.div<ContainerProps>`
 
   > div {
     overflow: hidden;
-    ${({ edges: [top, right, bottom, left], loading }) =>
-      !loading &&
+    ${({ $edges: [top, right, bottom, left], $loading }) =>
+      !$loading &&
       `
     position: absolute;
     border-radius: ${`${top ? '25px' : '10px'} ${right ? '25px' : '10px'} ${
@@ -76,14 +76,12 @@ type ChartContainerProps = {
 export const ChartContainer = motion(
   forwardRef<HTMLDivElement, ChartContainerProps>((props, ref) => {
     const theme = useTheme();
-    const isMobile = useIsMobile();
 
     return (
       <Container
         ref={ref}
-        mobile={isMobile}
-        edges={props.edges ?? [true, true, true, true]}
-        loading={!props.contentLoaded}
+        $edges={props.edges ?? [true, true, true, true]}
+        $loading={!props.contentLoaded}
       >
         {props.contentLoaded ? (
           <>

diff --git a/apps/view/src/components/glass-pane.tsx b/apps/view/src/components/glass-pane.tsx
@@ -1,17 +1,20 @@
+import { Transient } from '@dash/common';
 import { motion } from 'framer-motion';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { useIsMobile } from '../services/mobile';
 
-type SCProps = GlassPaneProps & { mobile: boolean };
+type SCProps = Transient<
+  Pick<GlassPaneProps, 'grow' | 'minWidth'> & { mobile: boolean }
+>;
 
 const Container = styled.div<SCProps>`
-  min-width: ${({ minWidth, mobile }) => (mobile ? 0 : minWidth)}px;
-  width: ${({ mobile }) => (mobile ? '100%' : 'unset')};
+  min-width: ${({ $minWidth, $mobile }) => ($mobile ? 0 : $minWidth)}px;
+  width: ${({ $mobile }) => ($mobile ? '100%' : 'unset')};
   min-height: 360px;
-  max-height: ${({ mobile }) => (mobile ? 'unset' : '500px')};
+  max-height: ${({ $mobile }) => ($mobile ? 'unset' : '500px')};
 
-  flex-grow: ${props => props.grow ?? 1};
+  flex-grow: ${({ $grow }) => $grow ?? 1};
   transition: opacity 0.3 ease-in-out;
 
   display: flex;
@@ -35,9 +38,9 @@ export const GlassPane = motion(
     return (
       <Container
         ref={ref}
-        mobile={isMobile}
-        grow={props.grow ?? 1}
-        minWidth={props.minWidth ?? 350}
+        $mobile={isMobile}
+        $grow={props.grow ?? 1}
+        $minWidth={props.minWidth ?? 350}
       >
         {props.children}
       </Container>

diff --git a/apps/view/src/components/hardware-info-container.tsx b/apps/view/src/components/hardware-info-container.tsx
@@ -1,3 +1,4 @@
+import { Transient } from '@dash/common';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { faArrowLeft, faArrowRight } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -8,18 +9,18 @@ import { useIsMobile } from '../services/mobile';
 import { InfoTable, InfoTableProps } from './info-table';
 import { ThemedText } from './text';
 
-const Container = styled.div<{ mobile: boolean }>`
+const Container = styled.div`
   position: relative;
   display: flex;
   flex-direction: column;
   width: 100%;
 `;
 
-const ContentContainer = styled.div<{ mobile: boolean }>`
+const ContentContainer = styled.div<Transient<{ mobile: boolean }>>`
   display: flex;
-  flex-direction: ${({ mobile }) => (mobile ? 'column-reverse' : 'row')};
+  flex-direction: ${({ $mobile }) => ($mobile ? 'column-reverse' : 'row')};
   flex: 1 1 auto;
-  ${({ mobile }) => mobile && 'padding: 20px 0'};
+  ${({ $mobile }) => $mobile && 'padding: 20px 0'};
 `;
 
 const InfoContainer = styled.div`
@@ -31,7 +32,7 @@ const InfoContainer = styled.div`
   flex-grow: 0 !important;
 `;
 
-const InfoIcon = styled.div<HardwareInfoProps>`
+const InfoIcon = styled.div<Transient<{ color: string }>>`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -43,7 +44,7 @@ const InfoIcon = styled.div<HardwareInfoProps>`
   top: -10px;
   left: 20px;
 
-  background-color: ${props => props.color};
+  background-color: ${props => props.$color};
   border-radius: 10px;
   box-shadow: 13px 13px 35px 0px rgba(0, 0, 0, 0.15);
 
@@ -99,12 +100,12 @@ export const HardwareInfoContainer: FC<HardwareInfoProps> = props => {
   };
 
   return (
-    <Container mobile={isMobile}>
-      <InfoIcon {...props}>
+    <Container>
+      <InfoIcon $color={props.color}>
         <FontAwesomeIcon icon={props.icon} size='2x' />
       </InfoIcon>
 
-      <ContentContainer mobile={isMobile}>
+      <ContentContainer $mobile={isMobile}>
         <InfoContainer>
           <InfoHeadingContainer>
             <InfoHeading>{props.heading}</InfoHeading>

diff --git a/apps/view/src/components/main-widget-container.tsx b/apps/view/src/components/main-widget-container.tsx
@@ -1,3 +1,4 @@
+import { Transient } from '@dash/common';
 import { motion, Variants } from 'framer-motion';
 import { FC, useEffect } from 'react';
 import { default as styled } from 'styled-components';
@@ -31,28 +32,28 @@ const itemVariants: Variants = {
   },
 };
 
-const FlexContainer = styled(motion.div)<{ mobile: boolean }>`
-  width: ${({ mobile }) => (mobile ? 'calc(100vw - 50px)' : '92vw')};
-  min-height: ${({ mobile }) => (mobile ? 'calc(100vh - 50px)' : '86vh')};
-  margin: ${({ mobile }) => (mobile ? '50px' : '7vh')} auto
-    ${({ mobile }) => (mobile ? '50px' : '7vh')} auto;
+const FlexContainer = styled(motion.div)<Transient<{ mobile: boolean }>>`
+  width: ${({ $mobile }) => ($mobile ? 'calc(100vw - 50px)' : '92vw')};
+  min-height: ${({ $mobile }) => ($mobile ? 'calc(100vh - 50px)' : '86vh')};
+  margin: ${({ $mobile }) => ($mobile ? '50px' : '7vh')} auto
+    ${({ $mobile }) => ($mobile ? '50px' : '7vh')} auto;
 
   display: flex;
   flex-flow: row wrap;
   column-gap: 40px;
-  row-gap: ${({ mobile }) => (mobile ? '40px' : '70px')};
+  row-gap: ${({ $mobile }) => ($mobile ? '40px' : '70px')};
 `;
 
-const ErrorContainer = styled(motion.div)<{ mobile: boolean }>`
-  width: ${({ mobile }) => (mobile ? 'calc(100vw - 50px)' : '92vw')};
-  min-height: ${({ mobile }) => (mobile ? 'calc(100vh - 50px)' : '86vh')};
-  margin: ${({ mobile }) => (mobile ? '50px' : '7vh')} auto
-    ${({ mobile }) => (mobile ? '50px' : '7vh')} auto;
+const ErrorContainer = styled(motion.div)<Transient<{ mobile: boolean }>>`
+  width: ${({ $mobile }) => ($mobile ? 'calc(100vw - 50px)' : '92vw')};
+  min-height: ${({ $mobile }) => ($mobile ? 'calc(100vh - 50px)' : '86vh')};
+  margin: ${({ $mobile }) => ($mobile ? '50px' : '7vh')} auto
+    ${({ $mobile }) => ($mobile ? '50px' : '7vh')} auto;
 
   display: flex;
   flex-flow: row wrap;
   column-gap: 40px;
-  row-gap: ${({ mobile }) => (mobile ? '40px' : '70px')};
+  row-gap: ${({ $mobile }) => ($mobile ? '40px' : '70px')};
 
   justify-content: center;
   align-items: center;
@@ -93,7 +94,7 @@ export const MainWidgetContainer: FC = () => {
         initial='initial'
         animate='animate'
         exit='exit'
-        mobile={isMobile}
+        $mobile={isMobile}
       >
         <GlassPane variants={itemVariants} grow={0} minWidth={500}>
           <ErrorWidget errorText={error.text} />
@@ -150,7 +151,7 @@ export const MainWidgetContainer: FC = () => {
 
   return (
     <FlexContainer
-      mobile={isMobile}
+      $mobile={isMobile}
       variants={containerVariants}
       initial='initial'
       animate='animate'

diff --git a/apps/view/src/widgets/server.tsx b/apps/view/src/widgets/server.tsx
@@ -1,4 +1,4 @@
-import { Config, OsInfo } from '@dash/common';
+import { Config, OsInfo, Transient } from '@dash/common';
 import {
   faApple,
   faCentos,
@@ -96,9 +96,9 @@ const Link = styled(Button)`
   }
 `;
 
-const StyledInfoTable = styled(InfoTable)<{ mobile: boolean }>`
+const StyledInfoTable = styled(InfoTable)<Transient<{ mobile: boolean }>>`
   width: 100%;
-  padding: 15px 5px ${({ mobile }) => (mobile ? 15 : 5)}px 5px;
+  padding: 15px 5px ${({ $mobile }) => ($mobile ? 15 : 5)}px 5px;
 `;
 
 const SFontAwesomeIcon = styled(FontAwesomeIcon)`
@@ -256,7 +256,7 @@ export const ServerWidget: FC<ServerWidgetProps> = ({ data, config }) => {
       </Heading>
 
       <StyledInfoTable
-        mobile={isMobile}
+        $mobile={isMobile}
         infos={toInfoTable(
           config.os_label_list,
           {

diff --git a/libs/common/src/types.ts b/libs/common/src/types.ts
@@ -178,3 +178,7 @@ export type Config = {
 export type ServerInfo = HardwareInfo & {
   config: Config;
 };
+
+export type Transient<T extends object> = {
+  [K in keyof T & string as `$${K}`]: T[K];
+};