fix prop warnings

brandon-pereira · Feb 17, 2024 · a8ebbc7 · a8ebbc7
1 parent 98664b8
commit a8ebbc7
Show file tree

Hide file tree

Showing 9 changed files with 34 additions and 32 deletions.
diff --git a/src/components/ColorPicker/ColorPicker.styles.ts b/src/components/ColorPicker/ColorPicker.styles.ts
@@ -21,7 +21,7 @@ export const Color = styled.button.attrs(props => ({
     style: {
         backgroundColor: props.color
     }
-}))<{ isCurrent?: boolean }>`
+}))<{ $isCurrent?: boolean }>`
     border: none;
     outline: none;
     flex: 1;
@@ -39,7 +39,7 @@ export const Color = styled.button.attrs(props => ({
         border-radius: 0 50px 50px 0;
     }
     ${props =>
-        props.isCurrent &&
+        props.$isCurrent &&
         `
         box-shadow: inset 0 0 0 5px ${props.theme.colors.general.blue};
     `};

diff --git a/src/components/ColorPicker/ColorPicker.tsx b/src/components/ColorPicker/ColorPicker.tsx
@@ -73,7 +73,6 @@ function ColorPicker({ value, onChange }: Props) {
                 e.preventDefault();
             }
             if (inputColorRef.current) {
-                console.log('HERE');
                 inputColorRef.current.focus();
                 inputColorRef.current.click();
             }
@@ -149,7 +148,7 @@ function ColorPicker({ value, onChange }: Props) {
                         key={color}
                         onClick={() => onChangeColor(color)}
                         color={color}
-                        isCurrent={index === idx}
+                        $isCurrent={index === idx}
                     />
                 ))}
             </Container>

diff --git a/src/components/Modal/Modal.styles.ts b/src/components/Modal/Modal.styles.ts
@@ -4,7 +4,7 @@ import _FocusLock from 'react-focus-lock';
 
 import Icon from '@components/Icon';
 
-export const Overlay = styled.div<{ visible: boolean }>`
+export const Overlay = styled.div<{ $isVisible: boolean }>`
     position: fixed;
     top: 0;
     left: 0;
@@ -17,7 +17,7 @@ export const Overlay = styled.div<{ visible: boolean }>`
     background: ${({ theme }) => theme.colors.modals.overlayBackground};
     backdrop-filter: blur(3px);
     ${props =>
-        !props.visible &&
+        !props.$isVisible &&
         `
         visibility: hidden;
         pointer-events: none;
@@ -59,16 +59,16 @@ export const Container = styled(motion.div)<{
 `;
 
 export const ContentContainer = styled.div<{
-    height: number | 'auto';
-    disableHeightAnimation?: boolean;
+    $height: number | 'auto';
+    $disableHeightAnimation?: boolean;
 }>`
     overflow: hidden;
     height: ${props => {
-        if (props.disableHeightAnimation) {
+        if (props.$disableHeightAnimation) {
             return '100%';
         }
-        return typeof props.height === 'number' && props.height !== 0
-            ? `${props.height}px`
+        return typeof props.$height === 'number' && props.$height !== 0
+            ? `${props.$height}px`
             : `auto`;
     }};
     transition: height 0.1s;
@@ -88,7 +88,7 @@ export const ModalClose = styled(Icon)`
     filter: drop-shadow(0 1px #555);
 `;
 
-export const Content = styled.div<{ disableHeightAnimation?: boolean }>`
+export const Content = styled.div<{ $disableHeightAnimation?: boolean }>`
     position: relative;
     z-index: 2;
     padding: 1rem;
@@ -97,7 +97,7 @@ export const Content = styled.div<{ disableHeightAnimation?: boolean }>`
     box-sizing: border-box;
     overflow: auto;
     ${props =>
-        props.disableHeightAnimation &&
+        props.$disableHeightAnimation &&
         `
      height: 100%;
     `}

diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
@@ -90,7 +90,7 @@ const Modal = forwardRef<HTMLDivElement, Props>(
         }, [onContainerResize, disableHeightAnimation, visible]);
 
         return (
-            <Overlay visible={visible} onMouseDown={e => closeModal(e)}>
+            <Overlay $isVisible={visible} onMouseDown={e => closeModal(e)}>
                 <FocusLock disabled={Boolean(!visible)}>
                     <Container
                         initial="hidden"
@@ -111,11 +111,11 @@ const Modal = forwardRef<HTMLDivElement, Props>(
                         $visible={visible}
                     >
                         <ContentContainer
-                            disableHeightAnimation={disableHeightAnimation}
-                            height={height}
+                            $disableHeightAnimation={disableHeightAnimation}
+                            $height={height}
                         >
                             <Content
-                                disableHeightAnimation={disableHeightAnimation}
+                                $disableHeightAnimation={disableHeightAnimation}
                                 ref={contentRef}
                             >
                                 {children}

diff --git a/src/components/Tabs/Tabs.styles.ts b/src/components/Tabs/Tabs.styles.ts
@@ -25,7 +25,7 @@ export const ActiveTabHeaderBackground = styled(motion.div)<{
     background-color: ${props =>
         props.color || props.theme.colors.general.blue};
 `;
-export const TabHeaderItem = styled.button<{ selected: boolean }>`
+export const TabHeaderItem = styled.button<{ $selected: boolean }>`
     border: none;
     background: none;
     font: inherit;
@@ -40,7 +40,7 @@ export const TabHeaderItem = styled.button<{ selected: boolean }>`
     color: ${props => props.color || props.theme.colors.general.blue};
     outline: none;
     ${props =>
-        props.selected &&
+        props.$selected &&
         `
         color: #fff;
         cursor: default;
@@ -54,10 +54,10 @@ export const TabHeaderItem = styled.button<{ selected: boolean }>`
 `;
 
 export const TabsBody = styled.div``;
-export const TabBodyItem = styled.div<{ selected?: boolean }>`
+export const TabBodyItem = styled.div<{ $selected?: boolean }>`
     display: none;
     ${props =>
-        props.selected &&
+        props.$selected &&
         `
         display: block;
     `}

diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
@@ -25,7 +25,7 @@ function Tabs({ selectedIndex, onChange, color, children, titles }: Props) {
                     {titles.map((title, index) => (
                         <TabHeaderItem
                             key={index}
-                            selected={selectedIndex === index}
+                            $selected={selectedIndex === index}
                             onClick={() => onChange(index)}
                             color={color}
                         >
@@ -45,8 +45,7 @@ function Tabs({ selectedIndex, onChange, color, children, titles }: Props) {
             <TabsBody>
                 {Children.map(children, (value, index) => {
                     return cloneElement(value, {
-                        index,
-                        selected: index === selectedIndex
+                        $selected: index === selectedIndex
                     });
                 })}
             </TabsBody>

diff --git a/src/components/Task/Task.styles.ts b/src/components/Task/Task.styles.ts
@@ -72,8 +72,8 @@ export const HighPriorityFlag = styled.div`
 `;
 
 export const Container = styled.button<{
-    isLoading?: boolean;
-    priority: 'low' | 'normal' | 'high';
+    $isLoading?: boolean;
+    $priority: 'low' | 'normal' | 'high';
 }>`
     display: block;
     border: none;
@@ -94,13 +94,13 @@ export const Container = styled.button<{
     z-index: 0;
     position: relative;
     ${props =>
-        props.isLoading &&
+        props.$isLoading &&
         `
         opacity: 0.5;
         pointer-events: none;
     `}
-    ${({ priority, theme }) =>
-        priority === 'low' &&
+    ${({ $priority, theme }) =>
+        $priority === 'low' &&
         `
         background: ${theme.colors.task.lowPriority.background};
         box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);

diff --git a/src/components/Task/Task.tsx b/src/components/Task/Task.tsx
@@ -47,9 +47,9 @@ const Task = forwardRef<HTMLButtonElement, Props>(
         return (
             <Container
                 ref={ref}
-                isLoading={isLoading}
+                $isLoading={isLoading}
                 onClick={onEditTask}
-                priority={priority}
+                $priority={priority}
                 {...containerProps}
             >
                 {isLoading ? (

diff --git a/src/utilities/colors.ts b/src/utilities/colors.ts
@@ -1,6 +1,8 @@
 import { Colord, colord, extend } from 'colord';
 import a11yPlugin from 'colord/plugins/a11y';
 
+import { DEFAULT_LIST_COLOR } from '../constants';
+
 extend([a11yPlugin]);
 
 export function checkIfColorGoodContrast(
@@ -18,7 +20,9 @@ export function getAccessibleAccent(color: string | Colord) {
     if (typeof color === 'string') {
         color = colord(color);
     }
-    console.log(color.toHex());
+    if (!color) {
+        return colord(DEFAULT_LIST_COLOR);
+    }
     const isDarkMode = window.matchMedia(
         '(prefers-color-scheme: dark)'
     ).matches;