Fix docs + types

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

packages/canon/docs/spaceProps.ts

@@ -0,0 +1,73 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export const spacePropsList = {
+  margin: {
+    type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+    responsive: true,
+  },
+  marginBottom: {
+    type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+    responsive: true,
+  },
+  marginLeft: {
+    type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+    responsive: true,
+  },
+  marginRight: {
+    type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+    responsive: true,
+  },
+  marginTop: {
+    type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+    responsive: true,
+  },
+  marginX: {
+    type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+    responsive: true,
+  },
+  marginY: {
+    type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+    responsive: true,
+  },
+  padding: {
+    type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+    responsive: true,
+  },
+  paddingBottom: {
+    type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+    responsive: true,
+  },
+  paddingLeft: {
+    type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+    responsive: true,
+  },
+  paddingRight: {
+    type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+    responsive: true,
+  },
+  paddingTop: {
+    type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+    responsive: true,
+  },
+  paddingX: {
+    type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+    responsive: true,
+  },
+  paddingY: {
+    type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+    responsive: true,
+  },
+};

packages/canon/report.api.md

@@ -146,7 +146,7 @@ export interface ColorProps {
 }
 
 // @public (undocumented)
-export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto';
 
 // @public (undocumented)
 export const Container: React_2.ForwardRefExoticComponent<
@@ -184,9 +184,6 @@ export type FlexDirection = 'row' | 'column';
 // @public (undocumented)
 export type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
 
-// @public (undocumented)
-export type Gap = Space | Partial<Record<Breakpoint, Space>>;
-
 // @public (undocumented)
 export const Grid: ForwardRefExoticComponent<
   GridProps & RefAttributes<HTMLDivElement>
@@ -203,25 +200,27 @@ export interface GridItemProps {
   // (undocumented)
   className?: string;
   // (undocumented)
-  colSpan?: Columns | 'full';
+  colEnd?: UtilityProps['colEnd'];
   // (undocumented)
-  end?: Columns | 'auto';
+  colSpan?: UtilityProps['colSpan'];
   // (undocumented)
-  rowSpan?: Columns | 'full';
+  colStart?: UtilityProps['colStart'];
   // (undocumented)
-  start?: Columns | 'auto';
+  rowSpan?: UtilityProps['rowSpan'];
   // (undocumented)
   style?: React.CSSProperties;
 }
 
 // @public (undocumented)
-export interface GridProps extends SpaceProps, ColorProps {
+export interface GridProps extends SpaceProps {
   // (undocumented)
   children?: React.ReactNode;
   // (undocumented)
   className?: string;
   // (undocumented)
-  columns?: Columns | Partial<Record<Breakpoint, Columns>>;
+  columns?: UtilityProps['columns'];
+  // (undocumented)
+  gap?: UtilityProps['gap'];
   // (undocumented)
   style?: React.CSSProperties;
 }
@@ -284,6 +283,8 @@ export interface InlineProps extends SpaceProps, ColorProps {
   // (undocumented)
   className?: string;
   // (undocumented)
+  gap?: UtilityProps['gap'];
+  // (undocumented)
   style?: React.CSSProperties;
 }
 
@@ -296,83 +297,39 @@ export type JustifyContent =
   | 'around'
   | 'between';
 
-// @public (undocumented)
-export type Margin = Space | Partial<Record<Breakpoint, Space>>;
-
-// @public (undocumented)
-export type MarginBottom = Space | Partial<Record<Breakpoint, Space>>;
-
-// @public (undocumented)
-export type MarginLeft = Space | Partial<Record<Breakpoint, Space>>;
-
-// @public (undocumented)
-export type MarginRight = Space | Partial<Record<Breakpoint, Space>>;
-
-// @public (undocumented)
-export type MarginTop = Space | Partial<Record<Breakpoint, Space>>;
-
-// @public (undocumented)
-export type MarginX = Space | Partial<Record<Breakpoint, Space>>;
-
-// @public (undocumented)
-export type MarginY = Space | Partial<Record<Breakpoint, Space>>;
-
-// @public (undocumented)
-export type Padding = Space | Partial<Record<Breakpoint, Space>>;
-
-// @public (undocumented)
-export type PaddingBottom = Space | Partial<Record<Breakpoint, Space>>;
-
-// @public (undocumented)
-export type PaddingLeft = Space | Partial<Record<Breakpoint, Space>>;
-
-// @public (undocumented)
-export type PaddingRight = Space | Partial<Record<Breakpoint, Space>>;
-
-// @public (undocumented)
-export type PaddingTop = Space | Partial<Record<Breakpoint, Space>>;
-
-// @public (undocumented)
-export type PaddingX = Space | Partial<Record<Breakpoint, Space>>;
-
-// @public (undocumented)
-export type PaddingY = Space | Partial<Record<Breakpoint, Space>>;
-
 // @public (undocumented)
 export type Space = 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 
 // @public (undocumented)
 export interface SpaceProps {
   // (undocumented)
-  gap?: Gap;
+  margin?: Space | Partial<Record<Breakpoint, Space>>;
   // (undocumented)
-  margin?: Margin;
+  marginBottom?: Space | Partial<Record<Breakpoint, Space>>;
   // (undocumented)
-  marginBottom?: MarginBottom;
+  marginLeft?: Space | Partial<Record<Breakpoint, Space>>;
   // (undocumented)
-  marginLeft?: MarginLeft;
+  marginRight?: Space | Partial<Record<Breakpoint, Space>>;
   // (undocumented)
-  marginRight?: MarginRight;
+  marginTop?: Space | Partial<Record<Breakpoint, Space>>;
   // (undocumented)
-  marginTop?: MarginTop;
+  marginX?: Space | Partial<Record<Breakpoint, Space>>;
   // (undocumented)
-  marginX?: MarginX;
+  marginY?: Space | Partial<Record<Breakpoint, Space>>;
   // (undocumented)
-  marginY?: MarginY;
+  padding?: Space | Partial<Record<Breakpoint, Space>>;
   // (undocumented)
-  padding?: Padding;
+  paddingBottom?: Space | Partial<Record<Breakpoint, Space>>;
   // (undocumented)
-  paddingBottom?: PaddingBottom;
+  paddingLeft?: Space | Partial<Record<Breakpoint, Space>>;
   // (undocumented)
-  paddingLeft?: PaddingLeft;
+  paddingRight?: Space | Partial<Record<Breakpoint, Space>>;
   // (undocumented)
-  paddingRight?: PaddingRight;
+  paddingTop?: Space | Partial<Record<Breakpoint, Space>>;
   // (undocumented)
-  paddingTop?: PaddingTop;
+  paddingX?: Space | Partial<Record<Breakpoint, Space>>;
   // (undocumented)
-  paddingX?: PaddingX;
-  // (undocumented)
-  paddingY?: PaddingY;
+  paddingY?: Space | Partial<Record<Breakpoint, Space>>;
 }
 
 // @public (undocumented)
@@ -395,6 +352,8 @@ export interface StackProps extends SpaceProps, ColorProps {
   // (undocumented)
   className?: string;
   // (undocumented)
+  gap?: UtilityProps['gap'];
+  // (undocumented)
   style?: React.CSSProperties;
 }
 
@@ -444,7 +403,7 @@ export const TableRow: React_3.ForwardRefExoticComponent<
 export type Theme = 'light' | 'dark';
 
 // @public (undocumented)
-export interface UtilityProps {
+export interface UtilityProps extends SpaceProps {
   // (undocumented)
   alignItems?: AlignItems | Partial<Record<Breakpoint, AlignItems>>;
   // (undocumented)
@@ -452,6 +411,14 @@ export interface UtilityProps {
   // (undocumented)
   borderRadius?: BorderRadius | Partial<Record<Breakpoint, BorderRadius>>;
   // (undocumented)
+  colEnd?: Columns | 'auto' | Partial<Record<Breakpoint, Columns | 'auto'>>;
+  // (undocumented)
+  colSpan?: Columns | 'full' | Partial<Record<Breakpoint, Columns | 'full'>>;
+  // (undocumented)
+  colStart?: Columns | 'auto' | Partial<Record<Breakpoint, Columns | 'auto'>>;
+  // (undocumented)
+  columns?: Columns | Partial<Record<Breakpoint, Columns>>;
+  // (undocumented)
   display?: Display | Partial<Record<Breakpoint, Display>>;
   // (undocumented)
   flexDirection?: FlexDirection | Partial<Record<Breakpoint, FlexDirection>>;
@@ -462,32 +429,6 @@ export interface UtilityProps {
   // (undocumented)
   justifyContent?: JustifyContent | Partial<Record<Breakpoint, JustifyContent>>;
   // (undocumented)
-  margin?: Space | Partial<Record<Breakpoint, Space>>;
-  // (undocumented)
-  marginBottom?: Space | Partial<Record<Breakpoint, Space>>;
-  // (undocumented)
-  marginLeft?: Space | Partial<Record<Breakpoint, Space>>;
-  // (undocumented)
-  marginRight?: Space | Partial<Record<Breakpoint, Space>>;
-  // (undocumented)
-  marginTop?: Space | Partial<Record<Breakpoint, Space>>;
-  // (undocumented)
-  marginX?: Space | Partial<Record<Breakpoint, Space>>;
-  // (undocumented)
-  marginY?: Space | Partial<Record<Breakpoint, Space>>;
-  // (undocumented)
-  padding?: Space | Partial<Record<Breakpoint, Space>>;
-  // (undocumented)
-  paddingBottom?: Space | Partial<Record<Breakpoint, Space>>;
-  // (undocumented)
-  paddingLeft?: Space | Partial<Record<Breakpoint, Space>>;
-  // (undocumented)
-  paddingRight?: Space | Partial<Record<Breakpoint, Space>>;
-  // (undocumented)
-  paddingTop?: Space | Partial<Record<Breakpoint, Space>>;
-  // (undocumented)
-  paddingX?: Space | Partial<Record<Breakpoint, Space>>;
-  // (undocumented)
-  paddingY?: Space | Partial<Record<Breakpoint, Space>>;
+  rowSpan?: Columns | 'full' | Partial<Record<Breakpoint, Columns | 'full'>>;
 }
 ```

packages/canon/src/components/Box/Docs.mdx

@@ -2,6 +2,7 @@ import { Meta, Unstyled, Source, Canvas } from '@storybook/blocks';
 import * as BoxStories from './Box.stories';
 import { Title, Text } from '../../../docs/components';
 import { PropsTable } from '../../../docs/components';
+import { spacePropsList } from '../../../docs/spaceProps';
 
 <Meta of={BoxStories} />
 
@@ -84,66 +85,7 @@ import { PropsTable } from '../../../docs/components';
 
 <Canvas of={BoxStories.Padding} />
 
-<PropsTable
-  data={{
-    margin: {
-      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-      responsive: true,
-    },
-    marginBottom: {
-      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-      responsive: true,
-    },
-    marginLeft: {
-      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-      responsive: true,
-    },
-    marginRight: {
-      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-      responsive: true,
-    },
-    marginTop: {
-      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-      responsive: true,
-    },
-    marginX: {
-      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-      responsive: true,
-    },
-    marginY: {
-      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-      responsive: true,
-    },
-    padding: {
-      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-      responsive: true,
-    },
-    paddingBottom: {
-      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-      responsive: true,
-    },
-    paddingLeft: {
-      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-      responsive: true,
-    },
-    paddingRight: {
-      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-      responsive: true,
-    },
-    paddingTop: {
-      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-      responsive: true,
-    },
-    paddingX: {
-      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-      responsive: true,
-    },
-    paddingY: {
-      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-      responsive: true,
-    },
-  }}
-/>
+<PropsTable data={spacePropsList} />
 
 <Title type="h2">Examples</Title>
 <Text>Here are some examples of how you can use the Box component.</Text>

packages/canon/src/components/Container/types.ts

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { SpaceProps } from '../../layout/types';
+import { SpaceProps } from '../../types';
 
 /** @public */
 export interface ContainerProps

packages/canon/src/components/Grid/Docs.mdx

@@ -1,7 +1,7 @@
 import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks';
 import * as GridStories from './Grid.stories';
-import { Title, Text, PropsTable, getProps } from '../../../docs/components';
-import { spacingProperties } from '../../layout/sprinkles.css';
+import { Title, Text, PropsTable } from '../../../docs/components';
+import { spacePropsList } from '../../../docs/spaceProps';
 
 <Meta of={GridStories} />
 
@@ -59,7 +59,7 @@ import { spacingProperties } from '../../layout/sprinkles.css';
   The grid component also accepts all the spacing props from the Box component.
 </Text>
 
-<PropsTable data={getProps(spacingProperties.styles)} />
+<PropsTable data={spacePropsList} />
 
 <Title type="h3">Grid Item</Title>
 <Text>

packages/canon/src/components/Grid/Grid.stories.tsx

@@ -61,20 +61,6 @@ export const Default: Story = {
   ),
 };
 
-export const Test: Story = {
-  args: {
-    columns: 12,
-    gap: 'md',
-  },
-  render: args => (
-    <Grid {...args}>
-      <FakeBox />
-      <FakeBox />
-      <FakeBox />
-    </Grid>
-  ),
-};
-
 export const LargeGap: Story = {
   args: {
     gap: 'lg',

packages/canon/src/components/Grid/Grid.tsx

@@ -47,13 +47,6 @@ const GridItem = forwardRef<HTMLDivElement, GridItemProps>((props, ref) => {
 
   const utilityClassNames = getClassNames(restProps);
 
-  // const sprinklesClassName = gridItemSprinkles({
-  //   rowSpan,
-  //   colSpan,
-  //   start,
-  //   end,
-  // });
-
   const classNames = ['grid-item', utilityClassNames, className]
     .filter(Boolean)
     .join(' ');

packages/canon/src/components/Grid/index.ts

@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 export { Grid } from './Grid';
-export type { GridProps, GridItemProps, Columns } from './types';
+export type { GridProps, GridItemProps } from './types';

packages/canon/src/components/Inline/types.ts

@@ -15,12 +15,13 @@
  */
 
 import { AsProps, ColorProps } from '../../layout/types';
-import { SpaceProps } from '../../layout/types';
-import type { Breakpoint } from '../../types';
+import type { Breakpoint, SpaceProps, UtilityProps } from '../../types';
+
 /** @public */
 export interface InlineProps extends SpaceProps, ColorProps {
   children: React.ReactNode;
   as?: AsProps;
+  gap?: UtilityProps['gap'];
   align?:
     | 'left'
     | 'center'

packages/canon/src/components/Stack/types.ts

@@ -14,12 +14,13 @@
  * limitations under the License.
  */
 import { AsProps, ColorProps } from '../../layout/types';
-import { SpaceProps } from '../../layout/types';
-import type { Breakpoint } from '../../types';
+import type { Breakpoint, SpaceProps, UtilityProps } from '../../types';
+
 /** @public */
 export interface StackProps extends SpaceProps, ColorProps {
   children: React.ReactNode;
   as?: AsProps;
+  gap?: UtilityProps['gap'];
   align?:
     | 'left'
     | 'center'

packages/canon/src/layout/types.ts

@@ -14,75 +14,9 @@
  * limitations under the License.
  */
 
-import type { Breakpoint, Space } from '../types';
-
 /** @public */
 export type Theme = 'light' | 'dark';
 
-/** @public */
-export type Gap = Space | Partial<Record<Breakpoint, Space>>;
-
-/** @public */
-export type PaddingLeft = Space | Partial<Record<Breakpoint, Space>>;
-
-/** @public */
-export type PaddingRight = Space | Partial<Record<Breakpoint, Space>>;
-
-/** @public */
-export type PaddingTop = Space | Partial<Record<Breakpoint, Space>>;
-
-/** @public */
-export type PaddingBottom = Space | Partial<Record<Breakpoint, Space>>;
-
-/** @public */
-export type Padding = Space | Partial<Record<Breakpoint, Space>>;
-
-/** @public */
-export type PaddingX = Space | Partial<Record<Breakpoint, Space>>;
-
-/** @public */
-export type PaddingY = Space | Partial<Record<Breakpoint, Space>>;
-
-/** @public */
-export type MarginLeft = Space | Partial<Record<Breakpoint, Space>>;
-
-/** @public */
-export type MarginRight = Space | Partial<Record<Breakpoint, Space>>;
-
-/** @public */
-export type MarginTop = Space | Partial<Record<Breakpoint, Space>>;
-
-/** @public */
-export type MarginBottom = Space | Partial<Record<Breakpoint, Space>>;
-
-/** @public */
-export type Margin = Space | Partial<Record<Breakpoint, Space>>;
-
-/** @public */
-export type MarginX = Space | Partial<Record<Breakpoint, Space>>;
-
-/** @public */
-export type MarginY = Space | Partial<Record<Breakpoint, Space>>;
-
-/** @public */
-export interface SpaceProps {
-  gap?: Gap;
-  padding?: Padding;
-  paddingLeft?: PaddingLeft;
-  paddingRight?: PaddingRight;
-  paddingTop?: PaddingTop;
-  paddingBottom?: PaddingBottom;
-  paddingX?: PaddingX;
-  paddingY?: PaddingY;
-  margin?: Margin;
-  marginLeft?: MarginLeft;
-  marginRight?: MarginRight;
-  marginTop?: MarginTop;
-  marginBottom?: MarginBottom;
-  marginX?: MarginX;
-  marginY?: MarginY;
-}
-
 /** @public */
 export type Background =
   | 'background'