Skip to content

Commit 1989d84

Browse files
Jarvis1010Jarvis1010
authored
Merge pull request #2019 from Bedrock-Layouts/add-type-defs
2 parents d1bcc67 + 4e41084 commit 1989d84

File tree

4 files changed

+183
-91
lines changed

4 files changed

+183
-91
lines changed

‎packages/appboundary/src/index.tsx

+19-4
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,30 @@ import {
99
import { forwardRefWithAs } from "@bedrock-layout/type-utils";
1010
import React from "react";
1111

12-
type BoundarySize = number | CSSLength | SizesOptions;
12+
/**
13+
* The `boundarySize` prop can accept any positive integer, `CSSLength`, `SizeOption`.
14+
*/
15+
export type BoundarySize = number | CSSLength | SizesOptions;
16+
17+
/**
18+
* Props for the AppBoundary component.
19+
*/
1320
export interface AppBoundaryProps {
21+
/**
22+
* Sets the size of the app boundary.
23+
* The `boundarySize` prop can accept any positive integer, `CSSLength`, `SizeOption`.
24+
*/
1425
boundarySize?: BoundarySize;
1526
}
1627

28+
/**
29+
* The `AppBoundary` component is designed to wrap your entire app.
30+
* Your app will be clamped at the `boundarySize` and stay centered on the screen.
31+
* By default, it will clamp the width at the `sizeXxl` option,
32+
* but can also be set to other the valid size options using the `boundarySize` prop.
33+
*/
1734
export const AppBoundary = forwardRefWithAs<"div", AppBoundaryProps>(
18-
({ as, boundarySize, children, style, ...props }, ref) => {
35+
function AppBoundary({ as, boundarySize, children, style, ...props }, ref) {
1936
const theme = useTheme();
2037
const maybeSize = getSizeValue(theme, boundarySize);
2138
const safeStyle = style ?? {};
@@ -37,5 +54,3 @@ export const AppBoundary = forwardRefWithAs<"div", AppBoundaryProps>(
3754
);
3855
},
3956
);
40-
41-
AppBoundary.displayName = "AppBoundary";

‎packages/center/src/index.tsx

+52-30
Original file line numberDiff line numberDiff line change
@@ -7,45 +7,67 @@ import {
77
import { forwardRefWithAs } from "@bedrock-layout/type-utils";
88
import React, { CSSProperties } from "react";
99

10-
type MaxWidth = number | CSSLength | SizesOptions;
10+
/**
11+
* The `maxWidth` prop can accept any positive integer, `CSSLength`, `SizeOption`.
12+
*/
13+
export type MaxWidth = number | CSSLength | SizesOptions;
1114

15+
/**
16+
* Props for the Center component.
17+
*/
1218
export interface CenterProps {
19+
/**
20+
* Sets the max-inline size of the component.
21+
* The `maxWidth` prop can accept any positive integer, `CSSLength`, `SizeOption`.
22+
*/
1323
maxWidth?: MaxWidth;
24+
/**
25+
* Sets the text alignment of the component to center.
26+
*/
1427
centerText?: boolean;
28+
/**
29+
* Sets the alignment of the component's children to be centered.
30+
*/
1531
centerChildren?: boolean;
1632
}
1733

18-
export const Center = forwardRefWithAs<"div", CenterProps>(
19-
({ as, centerChildren, centerText, maxWidth, style, ...props }, ref) => {
20-
const theme = useTheme();
21-
const centerProps = [
22-
centerText && "center-text",
23-
centerChildren && "center-children",
24-
]
25-
.filter((x) => x)
26-
.join(" ");
34+
/**
35+
* The `Center` component is designed to center and clamp its width at a predefined value.
36+
* By default, this value is set to the `medium` breakpoint.
37+
* You can also center the children and text alignment as well.
38+
*/
39+
export const Center = forwardRefWithAs<"div", CenterProps>(function Center(
40+
{ as, centerChildren, centerText, maxWidth, style, ...props },
41+
ref,
42+
) {
43+
const theme = useTheme();
44+
const centerProps = [
45+
centerText && "center-text",
46+
centerChildren && "center-children",
47+
]
48+
.filter((x) => x)
49+
.join(" ");
2750

28-
const safeStyle = style ?? {};
51+
const safeStyle = style ?? {};
2952

30-
const Component = as ?? "div";
53+
const Component = as ?? "div";
3154

32-
return (
33-
<Component
34-
data-bedrock-center={centerProps}
35-
ref={ref}
36-
style={
37-
{
38-
"--maxWidth":
39-
typeof maxWidth === "number" && maxWidth > 0
40-
? `${maxWidth}px`
41-
: getSizeValue(theme, maxWidth) ?? maxWidth,
42-
...safeStyle,
43-
} as CSSProperties
44-
}
45-
{...props}
46-
/>
47-
);
48-
},
49-
);
55+
return (
56+
<Component
57+
data-bedrock-center={centerProps}
58+
ref={ref}
59+
style={
60+
{
61+
"--maxWidth":
62+
typeof maxWidth === "number" && maxWidth > 0
63+
? `${maxWidth}px`
64+
: getSizeValue(theme, maxWidth) ?? maxWidth,
65+
...safeStyle,
66+
} as CSSProperties
67+
}
68+
{...props}
69+
/>
70+
);
71+
});
5072

5173
Center.displayName = "Center";

‎packages/column-drop/src/index.tsx

+27-4
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,27 @@ import {
99
import { forwardRefWithAs } from "@bedrock-layout/type-utils";
1010
import React, { CSSProperties } from "react";
1111

12-
type MinItemWidth = CSSLength | number | SizesOptions;
12+
/**
13+
* The `minItemWidth` prop can accept any positive integer, `CSSLength`, or `SizeOption`.
14+
*/
15+
export type MinItemWidth = number | CSSLength | SizesOptions;
1316

17+
/**
18+
* Props for the ColumnDrop component.
19+
*/
1420
export interface ColumnDropProps {
21+
/**
22+
* Sets space between each element.
23+
*/
1524
gutter?: Gutter;
25+
/**
26+
* Sets the minimum width of each child.
27+
* The `minItemWidth` prop can accept any positive integer, `CSSLength`, or `SizeOption`.
28+
*/
1629
minItemWidth?: MinItemWidth;
30+
/**
31+
* Prevents columns from stretching to fill the space.
32+
*/
1733
noStretchedColumns?: boolean;
1834
}
1935

@@ -27,11 +43,19 @@ function getSafeMinItemWidth(
2743
return getSizeValue(theme, minItemWidth);
2844
}
2945

46+
/**
47+
* The `ColumnDrop` component is used to create a layout
48+
* of columns that stretch to fit the space, and snaps
49+
* to the next row at a minimum size. As columns drop
50+
* down to a new row, they will be laid out independently
51+
* of the column layout above. This component is useful for
52+
* creating a responsive grid.
53+
*/
3054
export const ColumnDrop = forwardRefWithAs<"div", ColumnDropProps>(
31-
(
55+
function ColumnDrop(
3256
{ as, gutter, style, minItemWidth, noStretchedColumns = false, ...props },
3357
ref,
34-
) => {
58+
) {
3559
const theme = useTheme();
3660
const maybeGutter = getSafeGutter(theme, gutter);
3761

@@ -58,4 +82,3 @@ export const ColumnDrop = forwardRefWithAs<"div", ColumnDropProps>(
5882
);
5983
},
6084
);
61-
ColumnDrop.displayName = "ColumnDrop";

‎packages/columns/src/index.tsx

+85-53
Original file line numberDiff line numberDiff line change
@@ -9,77 +9,109 @@ import {
99
import { forwardRefWithAs } from "@bedrock-layout/type-utils";
1010
import React, { CSSProperties } from "react";
1111

12+
/**
13+
* Props for the `Columns` component.
14+
*/
1215
export interface ColumnsProps {
16+
/**
17+
* Sets space between each element.
18+
*/
1319
gutter?: Gutter;
20+
/**
21+
* Sets the number of columns.
22+
*/
1423
columns?: number;
24+
/**
25+
* Sets the width breakpoint at which the columns
26+
* will switch to a single column.
27+
*/
1528
switchAt?: number | CSSLength | SizesOptions;
16-
children?: React.ReactNode;
1729
}
1830

19-
export const Columns = forwardRefWithAs<"div", ColumnsProps>(
20-
({ as, gutter, columns = 1, style, switchAt, ...props }, ref) => {
21-
const theme = useTheme();
22-
const maybeGutter = getSafeGutter(theme, gutter);
23-
const safeColumns = columns > 0 ? columns : 1;
24-
const safeStyle = style ?? {};
25-
const safeSwitchAt = getSizeValue(theme, switchAt) ?? switchAt;
31+
/**
32+
* The `Columns` component is designed to create a n-column layout.
33+
* The complimentary `Column` component will allow elements to span and
34+
* offset n-columns.
35+
*/
36+
export const Columns = forwardRefWithAs<"div", ColumnsProps>(function Columns(
37+
{ as, gutter, columns = 1, style, switchAt, ...props },
38+
ref,
39+
) {
40+
const theme = useTheme();
41+
const maybeGutter = getSafeGutter(theme, gutter);
42+
const safeColumns = columns > 0 ? columns : 1;
43+
const safeStyle = style ?? {};
44+
const safeSwitchAt = getSizeValue(theme, switchAt) ?? switchAt;
2645

27-
const Component = as ?? "div";
46+
const Component = as ?? "div";
2847

29-
return (
30-
<Component
31-
ref={ref}
32-
data-bedrock-columns={""}
33-
style={
34-
{
35-
...safeStyle,
36-
"--gutter": maybeGutter,
37-
"--columns": safeColumns,
38-
"--switchAt": safeSwitchAt,
39-
} as CSSProperties
40-
}
41-
{...props}
42-
/>
43-
);
44-
},
45-
);
46-
47-
Columns.displayName = "Columns";
48+
return (
49+
<Component
50+
ref={ref}
51+
data-bedrock-columns={""}
52+
style={
53+
{
54+
...safeStyle,
55+
"--gutter": maybeGutter,
56+
"--columns": safeColumns,
57+
"--switchAt": safeSwitchAt,
58+
} as CSSProperties
59+
}
60+
{...props}
61+
/>
62+
);
63+
});
4864

65+
/**
66+
* Props for the `Column` component.
67+
*/
4968
export interface ColumnProps {
69+
/**
70+
* Sets the number of columns the element will span.
71+
*/
5072
span?: number;
73+
/**
74+
* Sets the number of columns the element will offset from the start.
75+
*/
5176
offsetStart?: number;
77+
/**
78+
* Sets the number of columns the element will offset from the end.
79+
*/
5280
offsetEnd?: number;
5381
}
5482

5583
const safeSpan = (span: unknown) => {
5684
return typeof span === "number" ? span : 1;
5785
};
5886

59-
export const Column = forwardRefWithAs<"div", ColumnProps>(
60-
({ as, span, style, offsetStart = 0, offsetEnd = 0, ...props }, ref) => {
61-
const safeOffsetStart = offsetStart > 0 ? offsetStart : undefined;
62-
const safeOffsetEnd = offsetEnd > 0 ? offsetEnd : undefined;
63-
const safeStyle = style ?? {};
64-
65-
const Component = as ?? "div";
87+
/**
88+
* The `Column` component is designed to be used in conjunction
89+
* with the `Columns` component.
90+
* It allows elements to span and offset n-columns.
91+
*/
92+
export const Column = forwardRefWithAs<"div", ColumnProps>(function Column(
93+
{ as, span, style, offsetStart = 0, offsetEnd = 0, ...props },
94+
ref,
95+
) {
96+
const safeOffsetStart = offsetStart > 0 ? offsetStart : undefined;
97+
const safeOffsetEnd = offsetEnd > 0 ? offsetEnd : undefined;
98+
const safeStyle = style ?? {};
6699

67-
return (
68-
<Component
69-
data-bedrock-column
70-
ref={ref}
71-
style={
72-
{
73-
...safeStyle,
74-
"--span": Math.max(safeSpan(span), 1),
75-
"--offsetStart": safeOffsetStart,
76-
"--offsetEnd": safeOffsetEnd,
77-
} as CSSProperties
78-
}
79-
{...props}
80-
/>
81-
);
82-
},
83-
);
100+
const Component = as ?? "div";
84101

85-
Column.displayName = "Column";
102+
return (
103+
<Component
104+
data-bedrock-column
105+
ref={ref}
106+
style={
107+
{
108+
...safeStyle,
109+
"--span": Math.max(safeSpan(span), 1),
110+
"--offsetStart": safeOffsetStart,
111+
"--offsetEnd": safeOffsetEnd,
112+
} as CSSProperties
113+
}
114+
{...props}
115+
/>
116+
);
117+
});

0 commit comments

Comments
 (0)