Skip to content

Commit 38e8f01

Browse files
imagine10255imagine10255
committed
Integrate GridThemeProvider across components and stories, add breakpoint-aware spacer support, and update dependencies to include @acrool/react-types.
1 parent 8379d11 commit 38e8f01

File tree

19 files changed

+187
-88
lines changed

19 files changed

+187
-88
lines changed

‎example/.storybook/preview.tsx‎

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,25 @@
1-
import type { Preview } from "@storybook/react";
21
import './reset.css';
32
import '@acrool/react-grid/dist/index.css';
4-
import {GridThemeProvider} from "@acrool/react-grid";
3+
4+
import {GridThemeProvider} from '@acrool/react-grid';
5+
import type {Preview} from '@storybook/react';
56

67

78
const preview: Preview = {
8-
parameters: {
9-
layout: 'fullscreen',
10-
controls: {
11-
matchers: {
12-
color: /(background|color)$/i,
13-
date: /Date$/i,
14-
},
9+
parameters: {
10+
layout: 'fullscreen',
11+
controls: {
12+
matchers: {
13+
color: /(background|color)$/i,
14+
date: /Date$/i,
15+
},
16+
},
1517
},
16-
},
17-
decorators: [
18-
(Story) => (
19-
<GridThemeProvider>
20-
<Story />
21-
</GridThemeProvider>
22-
),
23-
],
18+
decorators: [
19+
(Story) => (
20+
<Story />
21+
),
22+
],
2423
};
2524

2625
export default preview;

‎example/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"dependencies": {
1616
"@acrool/js-utils": "^3.2.12",
1717
"@acrool/react-grid": "link:..",
18+
"@acrool/react-types": "^0.0.4",
1819
"@chromatic-com/storybook": "^1.5.0",
1920
"@emotion/is-prop-valid": "^1.2.2",
2021
"@storybook/addon-essentials": "^8.6.11",

‎example/src/components/Utilities/Gutters/Gutters.stories.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
1+
import {GridThemeProvider, Col, Container, Flex, Row} from '@acrool/react-grid';
12
import type {Meta, StoryObj} from '@storybook/react';
2-
3-
import {Col, Container, Flex, Row} from '@acrool/react-grid';
43
import React from 'react';
5-
import styled from 'styled-components';
64

75
const meta = {
86
title: 'Utilities/Gutters',
97
parameters: {},
108
argTypes: {},
119
args: {},
10+
decorators: (Story) => (
11+
<GridThemeProvider>
12+
<Story />
13+
</GridThemeProvider>
14+
),
1215
} satisfies Meta<typeof Flex>;
1316

1417
export default meta;

‎example/src/components/atoms/Button/Button.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {FCChildrenProps} from '@acrool/react-grid';
1+
import {FCChildrenProps} from '@acrool/react-types';
22
import styled from 'styled-components';
33

44
interface IProps extends FCChildrenProps {

‎example/src/components/examples/DesignCode/DesignCode.tsx‎

Lines changed: 30 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import {GridThemeProvider} from '@acrool/react-grid';
23
import styled, {createGlobalStyle} from 'styled-components';
34
import Navbar from './layout/Navbar';
45
import Header from './layout/Header';
@@ -23,44 +24,46 @@ import Footer from './layout/Footer';
2324

2425
export default function DesignCode() {
2526

26-
return <DesignCodeRoot>
27+
return <GridThemeProvider>
28+
<DesignCodeRoot>
2729

28-
<WaveWrapper1/>
29-
<Wrapper>
30-
<Navbar className="mb-9"/>
31-
<Header/>
32-
</Wrapper>
30+
<WaveWrapper1/>
31+
<Wrapper>
32+
<Navbar className="mb-9"/>
33+
<Header/>
34+
</Wrapper>
3335

34-
<CourseSection className="mb-9"/>
36+
<CourseSection className="mb-9"/>
3537

36-
<Wrapper2>
37-
<TutorialSection/>
38-
<WaveWrapper2/>
39-
</Wrapper2>
38+
<Wrapper2>
39+
<TutorialSection/>
40+
<WaveWrapper2/>
41+
</Wrapper2>
4042

41-
<Profile/>
43+
<Profile/>
4244

43-
<AppDownload/>
45+
<AppDownload/>
4446

45-
<Discounts/>
47+
<Discounts/>
4648

47-
<Wrapper3>
48-
<Trusted/>
49-
<CompanyList/>
50-
<Instructors/>
49+
<Wrapper3>
50+
<Trusted/>
51+
<CompanyList/>
52+
<Instructors/>
5153

52-
<WaveWrapper3/>
53-
</Wrapper3>
54+
<WaveWrapper3/>
55+
</Wrapper3>
5456

55-
<Price/>
57+
<Price/>
5658

57-
<Wrapper4>
58-
<WaveWrapper4/>
59-
<Footer/>
60-
</Wrapper4>
59+
<Wrapper4>
60+
<WaveWrapper4/>
61+
<Footer/>
62+
</Wrapper4>
6163

62-
<GlobalCSS/>
63-
</DesignCodeRoot>;
64+
<GlobalCSS/>
65+
</DesignCodeRoot>
66+
</GridThemeProvider>;
6467

6568
}
6669

‎example/src/components/examples/DesignCode/layout/_components/CourseButton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {FCChildrenProps} from '@acrool/react-grid';
1+
import {FCChildrenProps} from '@acrool/react-types';
22
import styled, {css} from 'styled-components';
33

44
interface IProps extends FCChildrenProps {

‎example/src/components/examples/Features/Features.tsx‎

Lines changed: 13 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,9 @@
11
import styled, {createGlobalStyle} from 'styled-components';
22
import Button from '../../atoms/Button';
3-
import {Container, Grid, Flex, FCProps} from '@acrool/react-grid';
3+
import {Container, GridThemeProvider, Grid, Flex} from '@acrool/react-grid';
44

5-
interface IProps extends FCProps {
65

7-
}
8-
9-
const Features = ({
10-
className,
11-
}: IProps) => {
6+
const Features = () => {
127

138

149
const renderColumnIcons = () => {
@@ -180,20 +175,20 @@ const Features = ({
180175
</Container>;
181176
};
182177

183-
return <FeaturesRoot className={className}>
184-
185-
{renderColumnIcons()}
186-
{renderColumnIcons2()}
187-
{renderHanding()}
188-
{renderCustomCards()}
189-
{renderIconGrid()}
190-
{renderFeatureWithTitle()}
191-
178+
return <GridThemeProvider>
179+
<FeaturesRoot>
192180

181+
{renderColumnIcons()}
182+
{renderColumnIcons2()}
183+
{renderHanding()}
184+
{renderCustomCards()}
185+
{renderIconGrid()}
186+
{renderFeatureWithTitle()}
193187

188+
<GlobalCSS/>
189+
</FeaturesRoot>
190+
</GridThemeProvider>;
194191

195-
<GlobalCSS/>
196-
</FeaturesRoot>;
197192
};
198193

199194
export default Features;

‎example/src/components/examples/Heroes/Heroes.tsx‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1+
import {auto, Col, Container, Grid, GridThemeProvider,Row} from '@acrool/react-grid';
12
import styled, {createGlobalStyle} from 'styled-components';
3+
24
import Button from '../../atoms/Button';
3-
import {Col, Container, Grid, Row, auto} from '@acrool/react-grid';
45

56

67
const Heroes = () => {
@@ -213,18 +214,20 @@ const Heroes = () => {
213214
};
214215

215216

216-
return <HeroesRoot>
217+
return <GridThemeProvider>
218+
<HeroesRoot>
217219

218-
{renderRowSub()}
219-
{renderHero()}
220-
{renderScreenshot()}
221-
{renderResponsive()}
222-
{renderSignUp()}
223-
{renderBorder()}
224-
{renderDark()}
220+
{renderRowSub()}
221+
{renderHero()}
222+
{renderScreenshot()}
223+
{renderResponsive()}
224+
{renderSignUp()}
225+
{renderBorder()}
226+
{renderDark()}
225227

226-
<GlobalCSS/>
227-
</HeroesRoot>;
228+
<GlobalCSS/>
229+
</HeroesRoot>
230+
</GridThemeProvider>;
228231
};
229232

230233
export default Heroes;

‎example/src/components/primary/Col/Col.stories.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Col, Container,Row} from '@acrool/react-grid';
1+
import {Col, Container,Row, GridThemeProvider} from '@acrool/react-grid';
22
import type {Meta, StoryObj} from '@storybook/react';
33
import React from 'react';
44
import styled from 'styled-components';
@@ -24,6 +24,11 @@ const meta = {
2424
xxl: 4,
2525

2626
},
27+
decorators: (Story) => (
28+
<GridThemeProvider>
29+
<Story />
30+
</GridThemeProvider>
31+
),
2732
render: function Render(args) {
2833

2934
const length = 3;

‎example/src/components/primary/Container/Container.stories.tsx‎

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Col, Container,Row} from '@acrool/react-grid';
1+
import {Col, Container,GridThemeProvider,Row} from '@acrool/react-grid';
22
import type {Meta, StoryObj} from '@storybook/react';
33
import React from 'react';
44
import styled from 'styled-components';
@@ -18,6 +18,11 @@ const meta = {
1818
args: {
1919
fluid: false,
2020
},
21+
decorators: (Story) => (
22+
<GridThemeProvider>
23+
<Story />
24+
</GridThemeProvider>
25+
),
2126
render: function Render(args) {
2227

2328
const length = 4;
@@ -59,6 +64,36 @@ export const WithFullPage: Story = {
5964
},
6065
};
6166

67+
export const WithOneSizeSpacer: Story = {
68+
decorators: (Story) => (
69+
<GridThemeProvider gridTheme={{
70+
spacer: '20px',
71+
}}>
72+
<Story />
73+
</GridThemeProvider>
74+
),
75+
args: {
76+
fluid: false,
77+
},
78+
};
79+
80+
export const WithBreakpointsSpacer: Story = {
81+
decorators: (Story) => (
82+
<GridThemeProvider gridTheme={{
83+
// spacer: '20px',
84+
spacer: {
85+
xs: '20px',
86+
lg: '40px',
87+
},
88+
}}>
89+
<Story />
90+
</GridThemeProvider>
91+
),
92+
args: {
93+
fluid: false,
94+
},
95+
};
96+
6297

6398

6499

0 commit comments

Comments
 (0)