Skip to content

Commit 501474c

Browse files
KamilEmeleevKamilEmeleev
authored
feat(components/Grid): import subcomponents via Grid.Item
1 parent 092e6d2 commit 501474c

File tree

4 files changed

+96
-87
lines changed

4 files changed

+96
-87
lines changed

‎packages/components/src/components/Grid/Grid.mdx

+3-3
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import * as Stories from './Grid.stories';
1717
Grid is a base tool for organizing content on a page.
1818

1919
```tsx
20-
import { Grid, GridItem } from '@koobiq/react-components';
20+
import { Grid } from '@koobiq/react-components';
2121
```
2222

2323
<Story of={Stories.Base} />
@@ -75,9 +75,9 @@ Responsive values is supported by:
7575
- `justifyItems`
7676
- `alignItems`
7777

78-
## GridItem
78+
## Grid Item
7979

80-
GridItem is a box where you can place content. It can take up one or more rows or columns, and move within the grid.
80+
`Grid.Item` is a box where you can place content. It can take up one or more rows or columns, and move within the grid.
8181

8282
### Col
8383

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

+77-77
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@ import type { CSSProperties } from 'react';
22

33
import type { StoryObj } from '@storybook/react';
44

5-
import { Grid, GridItem } from './index';
6-
import type { GridBaseProps } from './index.js';
5+
import { Grid } from './index';
6+
import type { GridBaseProps } from './index';
77

88
const meta = {
99
title: 'Components/Grid',
1010
component: Grid,
11-
subcomponents: { GridItem },
11+
subcomponents: { 'Grid.Item': Grid.Item },
1212
};
1313

1414
export default meta;
@@ -25,39 +25,39 @@ const itemStyle = {
2525
export const Base: Story = {
2626
render: (args: GridBaseProps) => (
2727
<Grid cols={3} gap="m" {...args}>
28-
<GridItem style={itemStyle}>01</GridItem>
29-
<GridItem style={itemStyle} col={2}>
28+
<Grid.Item style={itemStyle}>01</Grid.Item>
29+
<Grid.Item style={itemStyle} col={2}>
3030
02
31-
</GridItem>
32-
<GridItem style={itemStyle} col={2}>
31+
</Grid.Item>
32+
<Grid.Item style={itemStyle} col={2}>
3333
03
34-
</GridItem>
35-
<GridItem style={itemStyle}>04</GridItem>
36-
<GridItem style={itemStyle}>05</GridItem>
37-
<GridItem style={itemStyle}>06</GridItem>
38-
<GridItem style={itemStyle}>07</GridItem>
34+
</Grid.Item>
35+
<Grid.Item style={itemStyle}>04</Grid.Item>
36+
<Grid.Item style={itemStyle}>05</Grid.Item>
37+
<Grid.Item style={itemStyle}>06</Grid.Item>
38+
<Grid.Item style={itemStyle}>07</Grid.Item>
3939
</Grid>
4040
),
4141
};
4242

4343
export const Cols: Story = {
4444
render: (args: GridBaseProps) => (
4545
<Grid gap="m" cols={4} {...args}>
46-
<GridItem style={itemStyle}>01</GridItem>
47-
<GridItem style={itemStyle}>02</GridItem>
48-
<GridItem style={itemStyle}>03</GridItem>
49-
<GridItem style={itemStyle}>04</GridItem>
46+
<Grid.Item style={itemStyle}>01</Grid.Item>
47+
<Grid.Item style={itemStyle}>02</Grid.Item>
48+
<Grid.Item style={itemStyle}>03</Grid.Item>
49+
<Grid.Item style={itemStyle}>04</Grid.Item>
5050
</Grid>
5151
),
5252
};
5353

5454
export const Gap: Story = {
5555
render: (args: GridBaseProps) => (
5656
<Grid gap="m" rowGap="xxl" cols={2} {...args}>
57-
<GridItem style={itemStyle}>01</GridItem>
58-
<GridItem style={itemStyle}>02</GridItem>
59-
<GridItem style={itemStyle}>03</GridItem>
60-
<GridItem style={itemStyle}>04</GridItem>
57+
<Grid.Item style={itemStyle}>01</Grid.Item>
58+
<Grid.Item style={itemStyle}>02</Grid.Item>
59+
<Grid.Item style={itemStyle}>03</Grid.Item>
60+
<Grid.Item style={itemStyle}>04</Grid.Item>
6161
</Grid>
6262
),
6363
};
@@ -66,29 +66,29 @@ export const AlignmentItems: Story = {
6666
name: 'Alignment items',
6767
render: (args: GridBaseProps) => (
6868
<Grid gap="m" justifyItems="center" cols={2} {...args}>
69-
<GridItem style={itemStyle}>01</GridItem>
70-
<GridItem style={itemStyle}>02</GridItem>
71-
<GridItem style={itemStyle}>03</GridItem>
72-
<GridItem style={itemStyle}>04</GridItem>
69+
<Grid.Item style={itemStyle}>01</Grid.Item>
70+
<Grid.Item style={itemStyle}>02</Grid.Item>
71+
<Grid.Item style={itemStyle}>03</Grid.Item>
72+
<Grid.Item style={itemStyle}>04</Grid.Item>
7373
</Grid>
7474
),
7575
};
7676

7777
export const Col: Story = {
7878
render: (args: GridBaseProps) => (
7979
<Grid gap="m" cols={4} {...args}>
80-
<GridItem style={itemStyle} col={3}>
80+
<Grid.Item style={itemStyle} col={3}>
8181
01
82-
</GridItem>
83-
<GridItem style={itemStyle} col={1}>
82+
</Grid.Item>
83+
<Grid.Item style={itemStyle} col={1}>
8484
02
85-
</GridItem>
86-
<GridItem style={itemStyle} col={1}>
85+
</Grid.Item>
86+
<Grid.Item style={itemStyle} col={1}>
8787
03
88-
</GridItem>
89-
<GridItem style={itemStyle} col={3}>
88+
</Grid.Item>
89+
<Grid.Item style={itemStyle} col={3}>
9090
04
91-
</GridItem>
91+
</Grid.Item>
9292
</Grid>
9393
),
9494
};
@@ -97,34 +97,34 @@ export const ColStart: Story = {
9797
name: 'ColStart',
9898
render: (args: GridBaseProps) => (
9999
<Grid gap="m" cols={4} {...args}>
100-
<GridItem style={itemStyle} col={2} colStart={2}>
100+
<Grid.Item style={itemStyle} col={2} colStart={2}>
101101
01
102-
</GridItem>
103-
<GridItem style={itemStyle} col={1} colStart={2}>
102+
</Grid.Item>
103+
<Grid.Item style={itemStyle} col={1} colStart={2}>
104104
02
105-
</GridItem>
106-
<GridItem style={itemStyle} col={1}>
105+
</Grid.Item>
106+
<Grid.Item style={itemStyle} col={1}>
107107
03
108-
</GridItem>
108+
</Grid.Item>
109109
</Grid>
110110
),
111111
};
112112

113113
export const Row: Story = {
114114
render: (args: GridBaseProps) => (
115115
<Grid gap="m" cols={4} {...args}>
116-
<GridItem style={itemStyle} col={2} row={2}>
116+
<Grid.Item style={itemStyle} col={2} row={2}>
117117
01
118-
</GridItem>
119-
<GridItem style={itemStyle} col={1}>
118+
</Grid.Item>
119+
<Grid.Item style={itemStyle} col={1}>
120120
02
121-
</GridItem>
122-
<GridItem style={itemStyle} col={1}>
121+
</Grid.Item>
122+
<Grid.Item style={itemStyle} col={1}>
123123
03
124-
</GridItem>
125-
<GridItem style={itemStyle} col={2}>
124+
</Grid.Item>
125+
<Grid.Item style={itemStyle} col={2}>
126126
04
127-
</GridItem>
127+
</Grid.Item>
128128
</Grid>
129129
),
130130
};
@@ -133,18 +133,18 @@ export const RowStart: Story = {
133133
name: 'RowStart',
134134
render: (args: GridBaseProps) => (
135135
<Grid gap="xl" cols={4} {...args}>
136-
<GridItem style={itemStyle} col={2}>
136+
<Grid.Item style={itemStyle} col={2}>
137137
01
138-
</GridItem>
139-
<GridItem style={itemStyle} col={2}>
138+
</Grid.Item>
139+
<Grid.Item style={itemStyle} col={2}>
140140
02
141-
</GridItem>
142-
<GridItem rowStart={3} style={itemStyle} col={2}>
141+
</Grid.Item>
142+
<Grid.Item rowStart={3} style={itemStyle} col={2}>
143143
03
144-
</GridItem>
145-
<GridItem rowStart={3} style={itemStyle} col={2}>
144+
</Grid.Item>
145+
<Grid.Item rowStart={3} style={itemStyle} col={2}>
146146
04
147-
</GridItem>
147+
</Grid.Item>
148148
</Grid>
149149
),
150150
};
@@ -153,27 +153,27 @@ export const SelfAlignment: Story = {
153153
name: 'Self-alignment',
154154
render: (args: GridBaseProps) => (
155155
<Grid gap="m" cols={2} {...args}>
156-
<GridItem style={itemStyle} alignSelf="center" justifySelf="center">
156+
<Grid.Item style={itemStyle} alignSelf="center" justifySelf="center">
157157
01
158-
</GridItem>
159-
<GridItem style={itemStyle}>02</GridItem>
160-
<GridItem style={itemStyle}>03</GridItem>
161-
<GridItem style={itemStyle}>04</GridItem>
158+
</Grid.Item>
159+
<Grid.Item style={itemStyle}>02</Grid.Item>
160+
<Grid.Item style={itemStyle}>03</Grid.Item>
161+
<Grid.Item style={itemStyle}>04</Grid.Item>
162162
</Grid>
163163
),
164164
};
165165

166166
export const Nested: Story = {
167167
render: (args: GridBaseProps) => (
168168
<Grid gap="xl" cols={3} {...args}>
169-
<GridItem style={itemStyle}>01</GridItem>
170-
<GridItem style={itemStyle}>02</GridItem>
171-
<GridItem>
169+
<Grid.Item style={itemStyle}>01</Grid.Item>
170+
<Grid.Item style={itemStyle}>02</Grid.Item>
171+
<Grid.Item>
172172
<Grid cols={1} gap="xl">
173-
<GridItem style={itemStyle}>03</GridItem>
174-
<GridItem style={itemStyle}>04</GridItem>
173+
<Grid.Item style={itemStyle}>03</Grid.Item>
174+
<Grid.Item style={itemStyle}>04</Grid.Item>
175175
</Grid>
176-
</GridItem>
176+
</Grid.Item>
177177
</Grid>
178178
),
179179
};
@@ -182,10 +182,10 @@ export const ResponsiveValues: Story = {
182182
name: 'Responsive values',
183183
render: (args: GridBaseProps) => (
184184
<Grid gap={{ xs: 'xl', l: '6xl' }} cols={{ m: 4, xs: 1 }} {...args}>
185-
<GridItem style={itemStyle}>01</GridItem>
186-
<GridItem style={itemStyle}>02</GridItem>
187-
<GridItem style={itemStyle}>03</GridItem>
188-
<GridItem style={itemStyle}>04</GridItem>
185+
<Grid.Item style={itemStyle}>01</Grid.Item>
186+
<Grid.Item style={itemStyle}>02</Grid.Item>
187+
<Grid.Item style={itemStyle}>03</Grid.Item>
188+
<Grid.Item style={itemStyle}>04</Grid.Item>
189189
</Grid>
190190
),
191191
};
@@ -194,18 +194,18 @@ export const ResponsiveValuesItems: Story = {
194194
name: 'Responsive values for items',
195195
render: (args: GridBaseProps) => (
196196
<Grid gap="m" cols={2} {...args}>
197-
<GridItem style={itemStyle} col={{ xs: 2, m: 1 }}>
197+
<Grid.Item style={itemStyle} col={{ xs: 2, m: 1 }}>
198198
01
199-
</GridItem>
200-
<GridItem style={itemStyle} col={{ xs: 2, m: 1 }}>
199+
</Grid.Item>
200+
<Grid.Item style={itemStyle} col={{ xs: 2, m: 1 }}>
201201
02
202-
</GridItem>
203-
<GridItem style={itemStyle} col={{ xs: 2, m: 1 }}>
202+
</Grid.Item>
203+
<Grid.Item style={itemStyle} col={{ xs: 2, m: 1 }}>
204204
03
205-
</GridItem>
206-
<GridItem style={itemStyle} col={{ xs: 2, m: 1 }}>
205+
</Grid.Item>
206+
<Grid.Item style={itemStyle} col={{ xs: 2, m: 1 }}>
207207
04
208-
</GridItem>
208+
</Grid.Item>
209209
</Grid>
210210
),
211211
};

‎packages/components/src/components/Grid/Grid.test.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { createRef } from 'react';
33
import { render } from '@testing-library/react';
44
import { describe, it, expect } from 'vitest';
55

6-
import { Grid, GridItem } from './index';
6+
import { Grid } from './index';
77
import type { GridProps, GridItemProps } from './index';
88

99
describe('Grid', () => {
@@ -32,7 +32,7 @@ describe('Grid', () => {
3232
});
3333
});
3434

35-
describe('GridItem', () => {
35+
describe('Grid.Item', () => {
3636
const baseProps = {};
3737

3838
it('should merge a custom class name with the default ones', () => {
@@ -43,7 +43,7 @@ describe('GridItem', () => {
4343
className,
4444
};
4545

46-
const { container } = render(<GridItem {...props} />);
46+
const { container } = render(<Grid.Item {...props} />);
4747

4848
const grid = container.querySelector('div');
4949

@@ -52,7 +52,7 @@ describe('GridItem', () => {
5252

5353
it('should forward a ref', () => {
5454
const ref = createRef<HTMLDivElement>();
55-
const { container } = render(<GridItem {...baseProps} ref={ref} />);
55+
const { container } = render(<Grid.Item {...baseProps} ref={ref} />);
5656
const grid = container.querySelector('div');
5757
expect(ref.current).toBe(grid);
5858
});

‎packages/components/src/components/Grid/Grid.tsx

+12-3
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,12 @@ import { clsx, polymorphicForwardRef } from '@koobiq/react-core';
77
import { getResponsiveValue } from '../../utils';
88
import { useMatchedBreakpoints } from '../Provider';
99

10+
import { GridItem } from './components';
1011
import s from './Grid.module.css';
1112
import type { GridBaseProps } from './types';
1213
import { normalizeGap } from './utils';
1314

14-
export const Grid = polymorphicForwardRef<'div', GridBaseProps>(
15+
const GridComponent = polymorphicForwardRef<'div', GridBaseProps>(
1516
(
1617
{
1718
as: Tag = 'div',
@@ -59,8 +60,16 @@ export const Grid = polymorphicForwardRef<'div', GridBaseProps>(
5960
}
6061
);
6162

62-
Grid.displayName = 'Grid';
63+
GridComponent.displayName = 'Grid';
6364

6465
export type GridProps<As extends ElementType = 'div'> = ComponentPropsWithRef<
65-
typeof Grid<As>
66+
typeof GridComponent<As>
6667
>;
68+
69+
type CompoundedComponent = typeof GridComponent & {
70+
Item: typeof GridItem;
71+
};
72+
73+
export const Grid = GridComponent as CompoundedComponent;
74+
75+
Grid.Item = GridItem;

0 commit comments

Comments
 (0)