🐛 fix console errors

.changeset/nice-tigers-sing.md

@@ -0,0 +1,5 @@
+---
+"kitchn": patch
+---
+
+Remove all React warnings from console

examples/gatsby-typescript/src/pages/index.tsx

@@ -21,7 +21,7 @@ const IndexPage: React.FC<PageProps> = () => {
       align={"center"}
     >
       <Container w={"100%"} align={"center"} justify={"space-between"} row>
-        <Card p={"small"} br={"square"} align={"center"} active row>
+        <Card p={"small"} br={"square"} align={"center"} bw={1} row>
           <Text span>
             {"Get started by editing \r"}
             <Text size={"compact"} monospace span>
@@ -68,7 +68,7 @@ const IndexPage: React.FC<PageProps> = () => {
           row
         >
           <Card
-            as={Link}
+            forwardedAs={Link}
             href={"https://kitchn.tonightpass.com/docs"}
             p={"small"}
             flex={1}
@@ -85,7 +85,7 @@ const IndexPage: React.FC<PageProps> = () => {
           </Card>
 
           <Card
-            as={Link}
+            forwardedAs={Link}
             href={"https://discord.gg/VvvAkPqQ98"}
             p={"small"}
             flex={1}
@@ -110,7 +110,7 @@ const IndexPage: React.FC<PageProps> = () => {
           row
         >
           <Card
-            as={Link}
+            forwardedAs={Link}
             href={"https://patreon.com/onruntime"}
             p={"small"}
             flex={1}
@@ -125,7 +125,7 @@ const IndexPage: React.FC<PageProps> = () => {
           </Card>
 
           <Card
-            as={Link}
+            forwardedAs={Link}
             href={
               "https://vercel.com/new/git/external?repository-url=https://github.com/tonightpass/kitchn/tree/master/examples/next-typescript&project-name=kitchn-app&repository-name=kitchn-app"
             }
@@ -148,11 +148,8 @@ const IndexPage: React.FC<PageProps> = () => {
   );
 };
 
-const Card = kitchn(Container)<{
-  active?: boolean;
-}>`
-  border: 1px solid ${({ theme, active }) =>
-    active ? theme.colors.layout.dark : "transparent"};
+const Card = kitchn(Container)`
+  border: 1px solid transparent;
   transition: all 0.2s ease-in-out;
   &:hover {
     border: 1px solid ${({ theme }) => theme.colors.layout.dark};

examples/next-typescript/src/pages/index.tsx

@@ -24,7 +24,7 @@ const IndexPage = () => {
         <link rel={"icon"} href={"/favicon.ico"} />
       </Head>
       <Container w={"100%"} align={"center"} justify={"space-between"} row>
-        <Card p={"small"} br={"square"} align={"center"} active row>
+        <Card p={"small"} br={"square"} align={"center"} bw={1} row>
           <Text span>
             {"Get started by editing \r"}
             <Text size={"compact"} monospace span>
@@ -71,7 +71,7 @@ const IndexPage = () => {
           row
         >
           <Card
-            as={Link}
+            forwardedAs={Link}
             href={"https://kitchn.tonightpass.com/docs"}
             p={"small"}
             flex={1}
@@ -88,7 +88,7 @@ const IndexPage = () => {
           </Card>
 
           <Card
-            as={Link}
+            forwardedAs={Link}
             href={"https://discord.gg/VvvAkPqQ98"}
             p={"small"}
             flex={1}
@@ -113,7 +113,7 @@ const IndexPage = () => {
           row
         >
           <Card
-            as={Link}
+            forwardedAs={Link}
             href={"https://patreon.com/onruntime"}
             p={"small"}
             flex={1}
@@ -128,7 +128,7 @@ const IndexPage = () => {
           </Card>
 
           <Card
-            as={Link}
+            forwardedAs={Link}
             href={
               "https://vercel.com/new/git/external?repository-url=https://github.com/tonightpass/kitchn/tree/master/examples/next-typescript&project-name=kitchn-app&repository-name=kitchn-app"
             }
@@ -151,11 +151,8 @@ const IndexPage = () => {
   );
 };
 
-const Card = kitchn(Container)<{
-  active?: boolean;
-}>`
-  border: 1px solid ${({ theme, active }) =>
-    active ? theme.colors.layout.dark : "transparent"};
+const Card = kitchn(Container)`
+  border: 1px solid transparent;
   transition: all 0.2s ease-in-out;
   &:hover {
     border: 1px solid ${({ theme }) => theme.colors.layout.dark};

examples/react-typescript/src/Template.tsx

@@ -19,7 +19,7 @@ export default function Template() {
       align={"center"}
     >
       <Container w={"100%"} align={"center"} justify={"space-between"} row>
-        <Card p={"small"} br={"square"} align={"center"} active row>
+        <Card p={"small"} br={"square"} align={"center"} bw={1} row>
           <Text span>
             {"Get started by editing \r"}
             <Text size={"compact"} monospace span>
@@ -66,7 +66,7 @@ export default function Template() {
           row
         >
           <Card
-            as={Link}
+            forwardedAs={Link}
             href={"https://kitchn.tonightpass.com/docs"}
             p={"small"}
             flex={1}
@@ -83,7 +83,7 @@ export default function Template() {
           </Card>
 
           <Card
-            as={Link}
+            forwardedAs={Link}
             href={"https://discord.gg/VvvAkPqQ98"}
             p={"small"}
             flex={1}
@@ -108,7 +108,7 @@ export default function Template() {
           row
         >
           <Card
-            as={Link}
+            forwardedAs={Link}
             href={"https://patreon.com/onruntime"}
             p={"small"}
             flex={1}
@@ -123,7 +123,7 @@ export default function Template() {
           </Card>
 
           <Card
-            as={Link}
+            forwardedAs={Link}
             href={
               "https://vercel.com/new/git/external?repository-url=https://github.com/tonightpass/kitchn/tree/master/examples/next-typescript&project-name=kitchn-app&repository-name=kitchn-app"
             }
@@ -146,11 +146,8 @@ export default function Template() {
   );
 }
 
-const Card = kitchn(Container)<{
-  active?: boolean;
-}>`
-  border: 1px solid ${({ theme, active }) =>
-    active ? theme.colors.layout.dark : "transparent"};
+const Card = kitchn(Container)`
+  border: 1px solid transparent;
   transition: all 0.2s ease-in-out;
   &:hover {
     border: 1px solid ${({ theme }) => theme.colors.layout.dark};

packages/kitchn/src/components/Badge/index.tsx

@@ -98,7 +98,7 @@ const BadgeComponent = styled(({ children, ...props }: BadgeProps) => {
         return theme.colors.layout.light;
       case "primary":
       default:
-        return theme.colors.layout.darkest;
+        return theme.colors.layout.darker;
     }
   }};
 `;

packages/kitchn/src/components/Button/index.tsx

@@ -40,7 +40,6 @@ const ButtonComponent = styled(
     width,
     prefix,
     suffix,
-    type,
     htmlType,
     ...props
   }: ButtonProps) => {
@@ -52,7 +51,6 @@ const ButtonComponent = styled(
         aria-disabled={props.disabled ? "true" : undefined}
         role={"button"}
         type={htmlType}
-        $type={type}
         {...props}
       >
         {(prefix || loading) && (

packages/kitchn/src/components/Collapse/index.tsx

@@ -24,6 +24,8 @@ const CollapseComponent = styled(
     children,
     defaultExpanded = false,
     size = "medium",
+    // Prevent 'card' from being passed to the DOM element
+    card: _card,
     ...props
   }: CollapseProps) => {
     const contentContainerRef = React.useRef<HTMLDivElement>(null);

packages/kitchn/src/components/Container/index.tsx

@@ -32,7 +32,17 @@ export type ContainerProps = Props & React.ComponentPropsWithRef<"div">;
 
 const ForwardedContainer = React.forwardRef<HTMLDivElement, ContainerProps>(
   (
-    { children, header, section, form, label, ...rest }: ContainerProps,
+    {
+      children,
+      header,
+      section,
+      form,
+      label,
+      // This prevents 'row' and 'gap' from being passed to the DOM element, avoiding React warnings
+      row: _row,
+      gap: _gap,
+      ...rest
+    }: ContainerProps,
     ref: React.ForwardedRef<HTMLDivElement>,
   ) => {
     const Component = header

packages/kitchn/src/components/Entity/Field/index.tsx

@@ -16,13 +16,13 @@ export type EntityFieldTitleProps = KitchnComponent<
 >;
 
 export const EntityFieldTitle = styled(
-  ({ ...props }: EntityFieldTitleProps) => {
+  ({ active, label, ...props }: EntityFieldTitleProps) => {
     return (
       <Text
-        size={props.label ? "small" : "compact"}
-        weight={props.label ? "regular" : "semiBold"}
-        color={props.label ? "light" : !props.active ? "light" : "lightest"}
-        transform={props.label ? "uppercase" : "none"}
+        size={label ? "small" : "compact"}
+        weight={label ? "regular" : "semiBold"}
+        color={label ? "light" : !active ? "light" : "lightest"}
+        transform={label ? "uppercase" : "none"}
         truncate
         span
         {...props}

packages/kitchn/src/components/Fieldset/index.tsx

@@ -55,13 +55,20 @@
         : theme.colors.layout.darker};
 `;
 
-const FieldsetComponent = styled(({ children, ...props }: FieldsetProps) => {
-  return (
-    <div role={"group"} {...props}>
-      {children}
-    </div>
-  );
-})<FieldsetProps>`
+const FieldsetComponent = styled(
+  ({
+    children,
+    // Prevents the 'tabs' prop from being passed down to the DOM element
+    tabs: _tabs,
+    ...props
+  }: FieldsetProps) => {
+    return (
+      <div role={"group"} {...props}>
+        {children}
+      </div>
+    );
+  },
+)<FieldsetProps>`
   overflow: hidden;
   position: relative;
   box-sizing: border-box;
@@ -113,7 +120,7 @@
 
 export const isFieldsetContainer = (
   child: React.ReactNode,
 ): child is React.ReactElement<any> => {
   return React.isValidElement(child) && child.type === Fieldset.Container;
 };
 

packages/kitchn/src/components/Footer/index.tsx

@@ -40,7 +40,6 @@ export const FooterNav = styled.nav`
   display: grid;
   grid-template-columns: ${({ children }) =>
     `repeat(${Math.min(React.Children.count(children), 4)}, 1fr)`};
-  gap: ${({ theme }) => theme.gap.normal};
 
   @media (max-width: ${({ theme }) => theme.breakpoint.laptop}) {
     grid-template-columns: ${({ children }) =>

packages/kitchn/src/components/Icon/index.tsx

@@ -34,7 +34,13 @@ type Props = IconSource & {
 export type IconProps = KitchnComponent<Props, React.SVGProps<SVGSVGElement>>;
 
 const IconComponent = styled(
-  ({ size, src, icon: IconComponent, ...rest }: IconProps) => {
+  ({
+    size,
+    src,
+    icon: IconComponent,
+    clickable: _clickable,
+    ...rest
+  }: IconProps) => {
     const theme = useTheme();
 
     if (src) {

packages/kitchn/src/components/Image/index.tsx

@@ -1,14 +1,12 @@
 import React from "react";
 import styled from "styled-components";
 
-import { AreaProps, withDecorator } from "../../hoc/withDecorator";
+import { withDecorator } from "../../hoc/withDecorator";
 import { KitchnComponent } from "../../types";
 
 type Props = {
-  width?: AreaProps["width"];
-  w?: Props["width"];
-  height?: AreaProps["height"];
-  h?: Props["height"];
+  htmlWidth?: string;
+  htmlHeight?: string;
   src: string;
   alt: string;
   objectFit?:
@@ -27,9 +25,20 @@ export type ImageProps = KitchnComponent<
   React.ImgHTMLAttributes<HTMLImageElement>
 >;
 
-const ImageComponent = styled(({ src, alt, ...props }: ImageProps) => {
-  return <img src={src} alt={alt} draggable={false} {...props} />;
-})<ImageProps>`
+const ImageComponent = styled(
+  ({ src, alt, htmlWidth, htmlHeight, ...props }: ImageProps) => {
+    return (
+      <img
+        src={src}
+        alt={alt}
+        width={htmlWidth}
+        height={htmlHeight}
+        draggable={false}
+        {...props}
+      />
+    );
+  },
+)<ImageProps>`
   ${({ objectFit }) => objectFit && `object-fit: ${objectFit};`}
 `;
 

packages/kitchn/src/components/Note/index.tsx

@@ -54,6 +54,8 @@ const NoteComponent = styled(
     action,
     label = true,
     size,
+    // Prevents the 'fill' prop from being passed to the DOM element
+    fill: _fill,
     children,
     ...props
   }: NoteProps) => {

packages/kitchn/src/components/Progress/index.tsx

@@ -87,13 +87,13 @@ const ProgressComponent = styled(
         />
         <ProgressCheckpointContainer>
           {states &&
-            Object.keys(states).map((key) => {
+            Object.keys(states).map((key, index) => {
               const checkpoint = parseInt(key, 10);
               const active = checkpoint <= value;
               const first = checkpoint === 0;
               const last = checkpoint === max;
               return (
-                <>
+                <React.Fragment key={index}>
                   <ProgressCheckpoint
                     aria-hidden={"true"}
                     key={checkpoint}
@@ -103,7 +103,7 @@ const ProgressComponent = styled(
                     last={last}
                     onMouseEnter={() => setIsHover(checkpoint)}
                     onMouseLeave={() => setIsHover(null)}
-                    title={states && title}
+                    hasTitle={states && title}
                     max={max}
                     amount={Object.keys(states).length}
                     checkpointStyle={checkpointStyle}
@@ -120,7 +120,7 @@ const ProgressComponent = styled(
                       {states[checkpoint]}
                     </ProgressCheckpointTitle>
                   )}
-                </>
+                </React.Fragment>
               );
             })}
         </ProgressCheckpointContainer>
@@ -214,7 +214,7 @@ export const ProgressCheckpoint = styled.div<{
   color?: string;
   first?: boolean;
   last?: boolean;
-  title?: boolean;
+  hasTitle?: boolean;
   amount: number;
   checkpointStyle: ProgressProps["checkpointStyle"];
 }>`