From 4d8fdfdbe3118324f114fd08db61882c92d1a45d Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Fri, 6 Dec 2024 17:47:43 +0000
Subject: [PATCH] Fix report API

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 packages/canon/report.api.md                  | 79 +++++++++----------
 packages/canon/src/components/Grid/Docs.mdx   | 26 +++---
 .../src/components/Grid/Grid.stories.tsx      | 22 +++---
 packages/canon/src/components/Grid/Grid.tsx   | 59 +++++++-------
 4 files changed, 89 insertions(+), 97 deletions(-)

diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md
index 5a80802cc6..093c2e10a3 100644
--- a/packages/canon/report.api.md
+++ b/packages/canon/report.api.md
@@ -5,11 +5,9 @@
 ```ts
 /// <reference types="react" />
 
-import { CSSProperties } from 'react';
-import { DetailedReactHTMLElement } from 'react';
-import { DOMElement } from 'react';
+import { ForwardRefExoticComponent } from 'react';
 import { default as React_2 } from 'react';
-import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
 
 // @public (undocumented)
 export type AlignItemsProps =
@@ -59,13 +57,8 @@ export type BorderRadiusProps =
   | Partial<Record<Breakpoint, 'none' | 'small' | 'medium' | 'full'>>;
 
 // @public (undocumented)
-export const Box: (props: BoxProps) => DOMElement<
-  {
-    className: string;
-    style: CSSProperties | undefined;
-    children: ReactNode;
-  },
-  Element
+export const Box: ForwardRefExoticComponent<
+  BoxProps & RefAttributes<HTMLDivElement>
 >;
 
 // @public (undocumented)
@@ -154,6 +147,33 @@ export interface ColorProps {
 // @public (undocumented)
 export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 
+// @public (undocumented)
+export const Container: React_2.ForwardRefExoticComponent<
+  ContainerProps & React_2.RefAttributes<HTMLDivElement>
+>;
+
+// @public (undocumented)
+export interface ContainerProps
+  extends Omit<
+    SpaceProps,
+    | 'padding'
+    | 'paddingLeft'
+    | 'paddingRight'
+    | 'paddingX'
+    | 'margin'
+    | 'marginLeft'
+    | 'marginRight'
+    | 'marginX'
+    | 'gap'
+  > {
+  // (undocumented)
+  children?: React.ReactNode;
+  // (undocumented)
+  className?: string;
+  // (undocumented)
+  style?: React.CSSProperties;
+}
+
 // @public (undocumented)
 export type DisplayProps =
   | 'flex'
@@ -178,22 +198,9 @@ export type FlexWrapProps =
 export type Gap = Space | Partial<Record<Breakpoint, Space>>;
 
 // @public (undocumented)
-export const Grid: {
-  (props: GridProps): DetailedReactHTMLElement<
-    {
-      className: string;
-      style: CSSProperties | undefined;
-    },
-    HTMLElement
-  >;
-  Item: (props: GridItemProps) => DetailedReactHTMLElement<
-    {
-      className: string;
-      style: CSSProperties | undefined;
-    },
-    HTMLElement
-  >;
-};
+export const Grid: ForwardRefExoticComponent<
+  GridProps & RefAttributes<HTMLDivElement>
+>;
 
 // @public (undocumented)
 export interface GridItemProps {
@@ -251,13 +258,8 @@ export type IconNames =
   | 'trash';
 
 // @public (undocumented)
-export const Inline: (props: InlineProps) => DetailedReactHTMLElement<
-  {
-    className: string;
-    style: CSSProperties | undefined;
-    children: ReactNode;
-  },
-  HTMLElement
+export const Inline: ForwardRefExoticComponent<
+  InlineProps & RefAttributes<HTMLElement>
 >;
 
 // @public (undocumented)
@@ -396,13 +398,8 @@ export interface SpaceProps {
 }
 
 // @public (undocumented)
-export const Stack: (props: StackProps) => DetailedReactHTMLElement<
-  {
-    className: string;
-    style: CSSProperties | undefined;
-    children: ReactNode;
-  },
-  HTMLElement
+export const Stack: ForwardRefExoticComponent<
+  StackProps & RefAttributes<HTMLDivElement>
 >;
 
 // @public (undocumented)
diff --git a/packages/canon/src/components/Grid/Docs.mdx b/packages/canon/src/components/Grid/Docs.mdx
index c37d083ef1..c9cefcb040 100644
--- a/packages/canon/src/components/Grid/Docs.mdx
+++ b/packages/canon/src/components/Grid/Docs.mdx
@@ -22,11 +22,11 @@ import { spacingProperties } from '../../layout/sprinkles.css';
   The grid component is made of two parts: the grid container and the grid item. Import all parts and piece them together.
 </Text>
 <Source
-  code={`import * as Grid from "@backstage/canon/grid";
+  code={`import { Grid, GridItem } from "@backstage/canon/grid";
 
 export default () => (
   <Grid>
-    <Grid.Item />
+    <GridItem />
   </Grid>
 );`}
   language="tsx"
@@ -137,12 +137,12 @@ export default () => (
 
 <Source
   code={`<Grid columns={3} gap="md">
-  <Grid.Item colSpan={1}>
+  <GridItem colSpan={1}>
     <Box>Hello World</Box>
-  </Grid.Item>
-  <Grid.Item colSpan={2}>
+  </GridItem>
+  <GridItem colSpan={2}>
     <Box>Hello World</Box>
-  </Grid.Item>
+  </GridItem>
 </Grid>
 `}
   language="tsx"
@@ -160,13 +160,13 @@ export default () => (
   code={`<Grid columns={3} gap="md">
   <Grid.Item colSpan={1} rowSpan={2}>
     <Box>Hello World</Box>
-  </Grid.Item>
-  <Grid.Item colSpan={2}>
+  </GridItem>
+  <GridItem colSpan={2}>
     <Box>Hello World</Box>
-  </Grid.Item>
-  <Grid.Item colSpan={2}>
+  </GridItem>
+  <GridItem colSpan={2}>
     <Box>Hello World</Box>
-  </Grid.Item>
+  </GridItem>
 </Grid>
 `}
   language="tsx"
@@ -199,9 +199,9 @@ export default () => (
 </Text>
 <Source
   code={`<Grid columns={3} gap="md">
-  <Grid.Item start={2} end={4}>
+  <GridItem start={2} end={4}>
     <Box>Hello World</Box>
-  </Grid.Item>
+  </GridItem>
 </Grid>
 `}
   language="tsx"
diff --git a/packages/canon/src/components/Grid/Grid.stories.tsx b/packages/canon/src/components/Grid/Grid.stories.tsx
index bf1bcecfd7..2b9369f7ea 100644
--- a/packages/canon/src/components/Grid/Grid.stories.tsx
+++ b/packages/canon/src/components/Grid/Grid.stories.tsx
@@ -16,7 +16,7 @@
 
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { Grid } from './Grid';
+import { Grid, GridItem } from './Grid';
 import type { GridItemProps } from './types';
 import { Box } from '../Box/Box';
 import { argTypesSpacing, argTypesColor } from '../../../docs/utils/argTypes';
@@ -83,12 +83,12 @@ export const ColumnSizes: Story = {
     <Stack gap="md">
       {Array.from({ length: 11 }, (_, i) => (
         <Grid {...args} key={i}>
-          <Grid.Item colSpan={(i + 1) as GridItemProps['colSpan']}>
+          <GridItem colSpan={(i + 1) as GridItemProps['colSpan']}>
             <FakeBox />
-          </Grid.Item>
-          <Grid.Item colSpan={(11 - i) as GridItemProps['colSpan']}>
+          </GridItem>
+          <GridItem colSpan={(11 - i) as GridItemProps['colSpan']}>
             <FakeBox />
-          </Grid.Item>
+          </GridItem>
         </Grid>
       ))}
     </Stack>
@@ -103,18 +103,18 @@ export const RowAndColumns: Story = {
   render: args => (
     <Stack gap="md">
       <Grid {...args} columns={3}>
-        <Grid.Item colSpan={1} rowSpan={2}>
+        <GridItem colSpan={1} rowSpan={2}>
           <Box
             borderRadius="small"
             style={{ background: '#1f47ff', color: 'white', height: '100%' }}
           />
-        </Grid.Item>
-        <Grid.Item colSpan={2}>
+        </GridItem>
+        <GridItem colSpan={2}>
           <FakeBox />
-        </Grid.Item>
-        <Grid.Item colSpan={2}>
+        </GridItem>
+        <GridItem colSpan={2}>
           <FakeBox />
-        </Grid.Item>
+        </GridItem>
       </Grid>
     </Stack>
   ),
diff --git a/packages/canon/src/components/Grid/Grid.tsx b/packages/canon/src/components/Grid/Grid.tsx
index 51f60afe27..6f46963322 100644
--- a/packages/canon/src/components/Grid/Grid.tsx
+++ b/packages/canon/src/components/Grid/Grid.tsx
@@ -18,12 +18,6 @@ import { createElement, forwardRef } from 'react';
 import { GridItemProps, GridProps } from './types';
 import { gridItemSprinkles, gridSprinkles } from './sprinkles.css';
 
-type GridComponent = React.ForwardRefExoticComponent<
-  GridProps & React.RefAttributes<HTMLDivElement>
-> & {
-  Item: typeof GridItem;
-};
-
 /** @public */
 export const Grid = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
   const {
@@ -45,31 +39,6 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
     .filter(Boolean)
     .join(' ');
 
-  return createElement(
-    'div',
-    {
-      ref,
-      className: classNames,
-      style,
-    },
-    children,
-  );
-}) as GridComponent;
-
-const GridItem = forwardRef<HTMLDivElement, GridItemProps>((props, ref) => {
-  const { children, rowSpan, colSpan, start, end, className, style } = props;
-
-  const sprinklesClassName = gridItemSprinkles({
-    rowSpan,
-    colSpan,
-    start,
-    end,
-  });
-
-  const classNames = ['grid-item', sprinklesClassName, className]
-    .filter(Boolean)
-    .join(' ');
-
   return createElement(
     'div',
     {
@@ -81,4 +50,30 @@ const GridItem = forwardRef<HTMLDivElement, GridItemProps>((props, ref) => {
   );
 });
 
-Grid.Item = GridItem;
+/** @public */
+export const GridItem = forwardRef<HTMLDivElement, GridItemProps>(
+  (props, ref) => {
+    const { children, rowSpan, colSpan, start, end, className, style } = props;
+
+    const sprinklesClassName = gridItemSprinkles({
+      rowSpan,
+      colSpan,
+      start,
+      end,
+    });
+
+    const classNames = ['grid-item', sprinklesClassName, className]
+      .filter(Boolean)
+      .join(' ');
+
+    return createElement(
+      'div',
+      {
+        ref,
+        className: classNames,
+        style,
+      },
+      children,
+    );
+  },
+);