Skip to content
This repository was archived by the owner on Jun 12, 2025. It is now read-only.

Commit 6da0041

Browse files
mverissimomverissimo
authored
Merge pull request #206 from mverissimo/refactor/styles
Refactor/styles
2 parents ae9cf0c + ed05799 commit 6da0041

File tree

15 files changed

+374
-394
lines changed

15 files changed

+374
-394
lines changed

‎.releaserc

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -14,20 +14,20 @@
1414
'@semantic-release/commit-analyzer',
1515
'@semantic-release/release-notes-generator',
1616
'@semantic-release/npm',
17-
'@semantic-release/github'
18-
],
19-
[
20-
'@semantic-release/changelog',
21-
{
22-
'changelogTitle': 'Changelog',
23-
'changelogFile': 'docs/CHANGELOG.md'
24-
}
25-
],
26-
[
27-
'@semantic-release/git',
28-
{
29-
'assets': ['docs/CHANGELOG.md']
30-
}
17+
'@semantic-release/github',
18+
[
19+
'@semantic-release/changelog',
20+
{
21+
'changelogTitle': 'Changelog',
22+
'changelogFile': 'docs/CHANGELOG.md'
23+
}
24+
],
25+
[
26+
'@semantic-release/git',
27+
{
28+
'assets': ['docs/CHANGELOG.md']
29+
}
30+
]
3131
]
3232
}
3333
}

‎package.json

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,9 @@
4848
"get-pkg-repo": "4.1.1",
4949
"hosted-git-info": "^2.1.4"
5050
},
51+
"dependencies": {
52+
"@emotion/is-prop-valid": "^1.1.3"
53+
},
5154
"devDependencies": {
5255
"@babel/eslint-parser": "^7.18.2",
5356
"@babel/preset-env": "7.18.6",
@@ -57,6 +60,8 @@
5760
"@emotion/babel-plugin": "^11.9.2",
5861
"@emotion/eslint-plugin": "^11.7.0",
5962
"@emotion/jest": "^11.9.3",
63+
"@emotion/react": "^11.9.3",
64+
"@emotion/styled": "^11.9.3",
6065
"@preconstruct/cli": "2.1.7",
6166
"@semantic-release/changelog": "^6.0.1",
6267
"@semantic-release/commit-analyzer": "9.0.2",
@@ -83,18 +88,16 @@
8388
"lint-staged": "13.0.3",
8489
"prettier": "2.7.1",
8590
"pretty-quick": "3.1.3",
91+
"react": "^18.2.0",
92+
"react-dom": "^18.2.0",
8693
"semantic-release": "19.0.3",
8794
"stylelint": "14.9.1",
8895
"ts-jest": "28.0.5",
8996
"typescript": "4.7.4"
9097
},
91-
"dependencies": {
92-
"@emotion/css": "^11.9.0",
93-
"@emotion/is-prop-valid": "^1.1.3",
98+
"peerDependencies": {
9499
"@emotion/react": "^11.9.3",
95100
"@emotion/styled": "^11.9.3",
96-
"@swc/helpers": "^0.4.3",
97-
"gatsby-plugin-emotion": "^7.18.0",
98101
"react": "^18.2.0",
99102
"react-dom": "^18.2.0"
100103
}

‎src/components/Col/Col.styles.ts

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { css } from '@emotion/react';
2+
3+
import { config } from '../../config';
4+
import { responsive } from '../../utils';
5+
6+
import type { ColProps } from '.';
7+
import type { DefaultTheme, StyleProps } from '../../types/emotion';
8+
9+
export const base = ({ theme }: StyleProps) => css`
10+
label: col;
11+
12+
position: relative;
13+
flex: 1 0 0%;
14+
15+
width: 100%;
16+
max-width: 100%;
17+
18+
box-sizing: border-box;
19+
20+
${responsive(
21+
config(theme).grid.breakpoints,
22+
(breakpoint: keyof DefaultTheme['grid']['breakpoints']) => `
23+
padding-left: ${config(theme).grid.gutter[breakpoint] / 2}rem;
24+
padding-right: ${config(theme).grid.gutter[breakpoint] / 2}rem;
25+
`
26+
)};
27+
`;
28+
29+
export const size = (props: ColProps & StyleProps) =>
30+
responsive(
31+
config(props.theme).grid.breakpoints,
32+
(breakpoint: keyof DefaultTheme['grid']['breakpoints']) =>
33+
props[breakpoint] &&
34+
`
35+
label: col--size;
36+
flex: 0 0 ${
37+
(props[breakpoint] / config(props.theme).grid.columns[breakpoint]) *
38+
100
39+
}%;
40+
max-width: ${
41+
(props[breakpoint] / config(props.theme).grid.columns[breakpoint]) *
42+
100
43+
}%;
44+
`
45+
);
46+
47+
export const offset = ({ theme, offset }: ColProps & StyleProps) =>
48+
offset &&
49+
responsive(
50+
config(theme).grid.breakpoints,
51+
(breakpoint: keyof DefaultTheme['grid']['breakpoints']) =>
52+
offset[breakpoint] &&
53+
`
54+
label: col--offset;
55+
margin-left: ${
56+
offset[breakpoint] >= 0
57+
? (offset[breakpoint] / config(theme).grid.columns[breakpoint]) *
58+
100
59+
: 0
60+
}%;
61+
`
62+
);

‎src/components/Col/Col.tsx

Lines changed: 7 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,25 @@
1-
import React, { Ref, ReactNode } from 'react';
1+
import React from 'react';
2+
import type { Ref, ReactNode } from 'react';
23

34
import styled from '@emotion/styled';
4-
import { css } from '@emotion/react';
55
import isPropValid from '@emotion/is-prop-valid';
66

7-
import { config } from '../../config';
8-
import { responsive } from '../../utils';
7+
import { DefaultTheme } from '../../types/emotion';
98

10-
import { DefaultTheme, StyleProps } from '../../types/emotion';
9+
import * as styles from './Col.styles';
1110

1211
export interface ColProps {
1312
/**
14-
* Trigger column styles
15-
* based on breakpoint
13+
* Controls the column `size`, based on breakpoint
1614
*/
1715
xs?: number;
18-
1916
sm?: number;
20-
2117
md?: number;
22-
2318
lg?: number;
24-
2519
xl?: number;
2620

2721
/**
28-
* The column `span`
22+
* Controls the column `offset`
2923
*/
3024
offset?: DefaultTheme['grid']['breakpoints'];
3125

@@ -40,64 +34,9 @@ export interface ColProps {
4034
children: ReactNode;
4135
}
4236

43-
const baseStyle = ({ theme }: StyleProps) => css`
44-
label: col;
45-
46-
position: relative;
47-
flex: 1 0 0%;
48-
49-
width: 100%;
50-
max-width: 100%;
51-
52-
box-sizing: border-box;
53-
54-
${responsive(
55-
config(theme).grid.breakpoints,
56-
(breakpoint: keyof DefaultTheme['grid']['breakpoints']) => `
57-
padding-left: ${config(theme).grid.gutter[breakpoint] / 2}rem;
58-
padding-right: ${config(theme).grid.gutter[breakpoint] / 2}rem;
59-
`
60-
)};
61-
`;
62-
63-
const sizeStyle = (props: ColProps & StyleProps) =>
64-
responsive(
65-
config(props.theme).grid.breakpoints,
66-
(breakpoint: keyof DefaultTheme['grid']['breakpoints']) =>
67-
props[breakpoint] &&
68-
`
69-
label: col--size;
70-
flex: 0 0 ${
71-
(props[breakpoint] / config(props.theme).grid.columns[breakpoint]) *
72-
100
73-
}%;
74-
max-width: ${
75-
(props[breakpoint] / config(props.theme).grid.columns[breakpoint]) *
76-
100
77-
}%;
78-
`
79-
);
80-
81-
const offsetStyle = ({ theme, offset }: ColProps & StyleProps) =>
82-
offset &&
83-
responsive(
84-
config(theme).grid.breakpoints,
85-
(breakpoint: keyof DefaultTheme['grid']['breakpoints']) =>
86-
offset[breakpoint] &&
87-
`
88-
label: col--offset;
89-
margin-left: ${
90-
offset[breakpoint] >= 0
91-
? (offset[breakpoint] / config(theme).grid.columns[breakpoint]) *
92-
100
93-
: 0
94-
}%;
95-
`
96-
);
97-
9837
const ColEl = styled('div', {
9938
shouldForwardProp: (prop) => isPropValid(prop) && prop !== 'offset',
100-
})<ColProps>(baseStyle, sizeStyle, offsetStyle);
39+
})<ColProps>(styles.base, styles.size, styles.offset);
10140

10241
const Col = React.forwardRef((props: ColProps, ref?: ColProps['ref']) => {
10342
return <ColEl ref={ref} className="EmotionGrid-Col" {...props} />;

‎src/components/Container/Container.styles.ts

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { css } from '@emotion/react';
2+
3+
import { config } from '../../config';
4+
import { responsive } from '../../utils';
5+
6+
import { ContainerProps } from '.';
7+
import type { DefaultTheme, StyleProps } from '../../types/emotion';
8+
9+
export const base = ({ theme }: StyleProps) => css`
10+
label: container;
11+
12+
width: 100%;
13+
max-width: 100%;
14+
15+
margin-right: auto;
16+
margin-left: auto;
17+
18+
box-sizing: border-box;
19+
20+
${responsive(
21+
config(theme).grid.breakpoints,
22+
(breakpoint: keyof DefaultTheme['grid']['breakpoints']) => `
23+
padding-left: ${config(theme).grid.padding[breakpoint] / 2}rem;
24+
padding-right: ${config(theme).grid.padding[breakpoint] / 2}rem;
25+
`
26+
)}
27+
`;
28+
29+
export const fluid = ({ theme, fluid }: ContainerProps & StyleProps) =>
30+
!fluid &&
31+
responsive(
32+
config(theme).grid.breakpoints,
33+
(breakpoint: keyof DefaultTheme['grid']['breakpoints']) =>
34+
typeof config(theme).grid.container[breakpoint] === 'number' &&
35+
`
36+
label: container--fluid;
37+
max-width: ${config(theme).grid.container[breakpoint]}rem;
38+
`
39+
);
40+
41+
export const debug = ({ theme, debug }: ContainerProps & StyleProps) => {
42+
return (
43+
debug &&
44+
css`
45+
.EmotionGrid-Row {
46+
label: row--debug;
47+
background: ${config(theme).grid.colors.blue}0D;
48+
}
49+
50+
.EmotionGrid-Col {
51+
label: col--debug;
52+
background: ${config(theme).grid.colors.blue}0D;
53+
border: 1px solid ${config(theme).grid.colors.blue};
54+
}
55+
`
56+
);
57+
};

‎src/components/Container/Container.tsx

Lines changed: 8 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,18 @@
1-
import React, { Ref, ReactNode } from 'react';
1+
import React from 'react';
2+
import type { Ref, ReactNode } from 'react';
23

34
import styled from '@emotion/styled';
4-
import { css } from '@emotion/react';
55

6-
import { config } from '../../config';
7-
import { responsive } from '../../utils';
8-
9-
import { DefaultTheme, StyleProps } from '../../types/emotion';
6+
import * as styles from './Container.styles';
107

118
export interface ContainerProps {
129
/**
13-
* Set the container `max-width`
10+
* The CSS `max-width` property
1411
*/
1512
fluid?: boolean;
1613

1714
/**
18-
* Set a visual background
15+
* Enable a background, to visual debug
1916
*/
2017
debug?: boolean;
2118

@@ -30,60 +27,10 @@ export interface ContainerProps {
3027
children: ReactNode;
3128
}
3229

33-
const baseStyle = ({ theme }: StyleProps) => css`
34-
label: container;
35-
36-
width: 100%;
37-
max-width: 100%;
38-
39-
margin-right: auto;
40-
margin-left: auto;
41-
42-
box-sizing: border-box;
43-
44-
${responsive(
45-
config(theme).grid.breakpoints,
46-
(breakpoint: keyof DefaultTheme['grid']['breakpoints']) => `
47-
padding-left: ${config(theme).grid.padding[breakpoint] / 2}rem;
48-
padding-right: ${config(theme).grid.padding[breakpoint] / 2}rem;
49-
`
50-
)}
51-
`;
52-
53-
const fluidStyle = ({ theme, fluid }: ContainerProps & StyleProps) =>
54-
!fluid &&
55-
responsive(
56-
config(theme).grid.breakpoints,
57-
(breakpoint: keyof DefaultTheme['grid']['breakpoints']) =>
58-
typeof config(theme).grid.container[breakpoint] === 'number' &&
59-
`
60-
label: container--fluid;
61-
max-width: ${config(theme).grid.container[breakpoint]}rem;
62-
`
63-
);
64-
65-
const debugStyle = ({ theme, debug }: ContainerProps & StyleProps) => {
66-
return (
67-
debug &&
68-
css`
69-
.EmotionGrid-Row {
70-
label: row--debug;
71-
background: ${config(theme).grid.colors.blue}0D;
72-
}
73-
74-
.EmotionGrid-Col {
75-
label: col--debug;
76-
background: ${config(theme).grid.colors.blue}0D;
77-
border: 1px solid ${config(theme).grid.colors.blue};
78-
}
79-
`
80-
);
81-
};
82-
8330
const ContainerEl = styled('div')<ContainerProps>(
84-
baseStyle,
85-
fluidStyle,
86-
debugStyle
31+
styles.base,
32+
styles.fluid,
33+
styles.debug
8734
);
8835

8936
const Container = React.forwardRef(

0 commit comments

Comments
 (0)