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

Fix API report

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2024-12-05 10:52:09 +00:00
parent c0fe222665
commit 21bae49983
12 changed files with 202 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/canon/report.api.md
+146
View File
@@ -6,6 +6,7 @@
/// <reference types="react" />
import { CSSProperties } from 'react';
import { DetailedReactHTMLElement } from 'react';
import { DOMElement } from 'react';
import { default as React_2 } from 'react';
import { ReactNode } from 'react';
@@ -150,6 +151,9 @@ export interface ColorProps {
color?: Color;
}
// @public (undocumented)
export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
// @public (undocumented)
export type DisplayProps =
| 'flex'
@@ -173,6 +177,69 @@ export type FlexWrapProps =
// @public (undocumented)
export type Gap = Space | Partial<Record<Breakpoint, Space>>;
// @public (undocumented)
export const Grid: {
({
children,
columns,
gap,
className,
style,
...restProps
}: GridProps): DetailedReactHTMLElement<
{
className: string;
style: CSSProperties | undefined;
},
HTMLElement
>;
Item: ({
children,
rowSpan,
colSpan,
start,
end,
className,
style,
}: GridItemProps) => DetailedReactHTMLElement<
{
className: string;
style: CSSProperties | undefined;
},
HTMLElement
>;
};
// @public (undocumented)
export interface GridItemProps {
// (undocumented)
children: React.ReactNode;
// (undocumented)
className?: string;
// (undocumented)
colSpan?: Columns | 'full';
// (undocumented)
end?: Columns | 'auto';
// (undocumented)
rowSpan?: Columns | 'full';
// (undocumented)
start?: Columns | 'auto';
// (undocumented)
style?: React.CSSProperties;
}
// @public (undocumented)
export interface GridProps extends SpaceProps, ColorProps {
// (undocumented)
children?: React.ReactNode;
// (undocumented)
className?: string;
// (undocumented)
columns?: Columns | Partial<Record<Breakpoint, Columns>>;
// (undocumented)
style?: React.CSSProperties;
}
// @public (undocumented)
export const Icon: ({ name }: { name: IconNames }) => React_2.JSX.Element;
@@ -198,6 +265,49 @@ export type IconNames =
| 'plus'
| 'trash';
// @public (undocumented)
export const Inline: ({
as,
children,
align,
alignY,
gap,
className,
style,
...restProps
}: InlineProps) => DetailedReactHTMLElement<
{
className: string;
style: CSSProperties | undefined;
children: ReactNode;
},
HTMLElement
>;
// @public (undocumented)
export interface InlineProps extends SpaceProps, ColorProps {
// (undocumented)
align?:
| 'left'
| 'center'
| 'right'
| Partial<Record<Breakpoint, 'left' | 'center' | 'right'>>;
// (undocumented)
alignY?:
| 'top'
| 'center'
| 'bottom'
| Partial<Record<Breakpoint, 'top' | 'center' | 'bottom'>>;
// (undocumented)
as?: AsProps;
// (undocumented)
children: React.ReactNode;
// (undocumented)
className?: string;
// (undocumented)
style?: React.CSSProperties;
}
// @public (undocumented)
export type JustifyContentProps =
| 'stretch'
@@ -309,6 +419,42 @@ export interface SpaceProps {
paddingY?: PaddingY;
}
// @public (undocumented)
export const Stack: ({
as,
children,
align,
gap,
className,
style,
...restProps
}: StackProps) => DetailedReactHTMLElement<
{
className: string;
style: CSSProperties | undefined;
children: ReactNode;
},
HTMLElement
>;
// @public (undocumented)
export interface StackProps extends SpaceProps, ColorProps {
// (undocumented)
align?:
| 'left'
| 'center'
| 'right'
| Partial<Record<Breakpoint, 'left' | 'center' | 'right'>>;
// (undocumented)
as?: AsProps;
// (undocumented)
children: React.ReactNode;
// (undocumented)
className?: string;
// (undocumented)
style?: React.CSSProperties;
}
// @public (undocumented)
export type Theme = keyof typeof themes;
packages/canon/src/components/Box/Docs.mdx
+36 -5
View File
@@ -1,4 +1,4 @@
import { Canvas, Meta, Unstyled } from '@storybook/blocks';
import { Meta, Unstyled, Source } from '@storybook/blocks';
import * as BoxStories from './Box.stories';
import { Title, Text } from '../../../docs/components';
import { Padding } from './docs/padding';
@@ -13,8 +13,18 @@ import { spacingProperties } from '../../layout/sprinkles.css';
<Title type="h1">Box</Title>
<Text>
Box is the lowest-level component in Canon. We use it internally to build all
of our components. It is a wrapper around the HTML `<div>` element and
provides a consistent API for styling and layout. You'll find below a list of all the available properties.
of our components. It provides a consistent API for styling and layout.
</Text>
<Title type="h2">Installation</Title>
<Source code={`yarn install @backstage/canon/box`} language="bash" dark />
<Title type="h2">API reference</Title>
<Title type="h3">Box</Title>
<Text>
This is the Box component, our lowest-level component. Here are all the
available properties.
</Text>
<PropsTable
@@ -35,8 +45,7 @@ import { spacingProperties } from '../../layout/sprinkles.css';
}}
/>
<Title type="h2">Padding & Margin</Title>
<Text>
<Text style={{ marginTop: '16px' }}>
Padding and margin are used to create space around your component using our
predefined spacing tokens. We would recommend to use padding over margin to
avoid collapsing margins but both are available.
@@ -46,4 +55,26 @@ import { spacingProperties } from '../../layout/sprinkles.css';
<PropsTable data={getBoxProps(spacingProperties.styles)} />
<Title type="h2">Examples</Title>
<Text>Here are some examples of how you can use the Box component.</Text>
<Title type="h3">Simple example</Title>
<Text>A simple example of how to use the Box component.</Text>
<Source
code={`<Box padding="md" borderRadius="md">Hello World</Box>`}
language="tsx"
dark
/>
<Title type="h3">Responsive</Title>
<Text>
Most of the values can be defined per breakpoint, making it easy to create
responsive designs.
</Text>
<Source
code={`<Box padding={{ xs: 'sm', md: 'md' }} borderRadius={{ xs: 'sm', md: 'md' }}>Hello World</Box>`}
language="tsx"
dark
/>
</Unstyled>
packages/canon/src/components/Grid/Grid.tsx
+1
View File
@@ -18,6 +18,7 @@ import { createElement } from 'react';
import { GridItemProps, GridProps } from './types';
import { gridItemSprinkles, gridSprinkles } from './sprinkles.css';
/** @public */
export const Grid = ({
children,
columns,
packages/canon/src/components/Grid/index.ts
+1 -1
View File
@@ -14,4 +14,4 @@
* limitations under the License.
*/
export { Grid } from './Grid';
export type { GridProps, GridItemProps } from './types';
export type { GridProps, GridItemProps, Columns } from './types';
packages/canon/src/components/Grid/types.ts
+4 -1
View File
@@ -16,8 +16,10 @@
import { Breakpoint, ColorProps } from '../../layout/types';
import { SpaceProps } from '../../layout/types';
type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
/** @public */
export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
/** @public */
export interface GridProps extends SpaceProps, ColorProps {
children?: React.ReactNode;
columns?: Columns | Partial<Record<Breakpoint, Columns>>;
@@ -25,6 +27,7 @@ export interface GridProps extends SpaceProps, ColorProps {
style?: React.CSSProperties;
}
/** @public */
export interface GridItemProps {
children: React.ReactNode;
rowSpan?: Columns | 'full';
packages/canon/src/components/Inline/Inline.tsx
+1
View File
@@ -32,6 +32,7 @@ const alignToFlexAlignY = (align: InlineProps['align']) => {
return undefined;
};
/** @public */
export const Inline = ({
as = 'div',
children,
packages/canon/src/components/Inline/index.ts
+1
View File
@@ -14,3 +14,4 @@
* limitations under the License.
*/
export { Inline } from './Inline';
export type { InlineProps } from './types';
packages/canon/src/components/Inline/types.ts
+1
View File
@@ -17,6 +17,7 @@
import { AsProps, Breakpoint, ColorProps } from '../../layout/types';
import { SpaceProps } from '../../layout/types';
/** @public */
export interface InlineProps extends SpaceProps, ColorProps {
children: React.ReactNode;
as?: AsProps;
packages/canon/src/components/Stack/Stack.tsx
+1
View File
@@ -25,6 +25,7 @@ const alignToFlexAlign = (align: StackProps['align']) => {
return undefined;
};
/** @public */
export const Stack = ({
as = 'div',
children,
packages/canon/src/components/Stack/index.ts
+1
View File
@@ -14,3 +14,4 @@
* limitations under the License.
*/
export { Stack } from './Stack';
export type { StackProps } from './types';
packages/canon/src/components/Stack/types.ts
+1
View File
@@ -16,6 +16,7 @@
import { AsProps, Breakpoint, ColorProps } from '../../layout/types';
import { SpaceProps } from '../../layout/types';
/** @public */
export interface StackProps extends SpaceProps, ColorProps {
children: React.ReactNode;
as?: AsProps;
packages/canon/src/index.ts
+8 -3
View File
@@ -20,10 +20,15 @@
* @packageDocumentation
*/
export * from './components/Button';
export * from './components/Box';
export * from './components/Icon';
// Layout types
export * from './layout/types';
// Layout components
export * from './components/Box';
export * from './components/Grid';
export * from './components/Stack';
export * from './components/Inline';
// UI components
export * from './components/Button';
export * from './components/Icon';