paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 51 Packages Projects Releases Wiki Activity

Fix report API

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2024-12-06 17:47:43 +00:00
parent 53e73b5e57
commit 4d8fdfdbe3
4 changed files with 89 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/canon/report.api.md
+38 -41
View File
@@ -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)
packages/canon/src/components/Grid/Docs.mdx
+13 -13
View File
@@ -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"
packages/canon/src/components/Grid/Grid.stories.tsx
+11 -11
View File
@@ -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>
),
packages/canon/src/components/Grid/Grid.tsx
+27 -32
View File
@@ -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,
);
},
);