Skip to content

feat: add grid component based on styled-system styles function #271

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: refactor-v2
Choose a base branch
from
Open

feat: add grid component based on styled-system styles function #271

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6bcd179
feat: add grid component based on styled-system styles function
Jan 20, 2022
0741ff7
feat: add grid documentation
Jan 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,12 +87,12 @@
"styled-components": "^5.3.1",
"styled-system": "^5.1.5",
"swiper": "^6.7.0",
"themeprovider-storybook": "^1.7.2"
"themeprovider-storybook": "^1.7.2",
"clsx": "^1.1.1"
},
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
},
"dependencies": {}
}
}
4 changes: 2 additions & 2 deletions src/components/Box/Box.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import styled from 'styled-components'
import propTypes from '@styled-system/prop-types'
import { compose, space, layout, typography, color, flexbox, background } from 'styled-system'
import { compose, space, layout, typography, color, flexbox, background, grid, border } from 'styled-system'

const props = compose(space, layout, typography, color, flexbox, background)
const props = compose(space, layout, typography, color, flexbox, background, grid, border)

const Box = styled.div`
margin: 0;
Expand Down
17 changes: 17 additions & 0 deletions src/components/Grid/Grid.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { Box } from '../'
import clsx from 'clsx'
import styled from 'styled-components'
import { parseGridProps, columnsProp } from './Grid.utils'

const containerClassName = 'Saturn_grid-container'
const itemClassName = 'Saturn_grid-container'

const Grid = styled(({ className: extraClassNames, item, ...rest }) => {
const defaultClassName = item ? itemClassName : containerClassName
return <Box display='grid' className={clsx(defaultClassName, extraClassNames)} {...rest} />
})`
${parseGridProps};
${columnsProp};
`

export default Grid
60 changes: 60 additions & 0 deletions src/components/Grid/Grid.utils.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import { system, style } from 'styled-system'

export const parseGridProps = system({
gap: {
property: 'gridGap'
},
columnGap: {
property: 'gridColumnGap'
},
rowGap: {
property: 'gridRowGap'
},
column: {
property: 'gridColumn'
},
row: {
property: 'gridRow'
},
autoFlow: {
property: 'gridAutoFlow'
},
autoColumns: {
property: 'gridAutoColumns'
},
autoRows: {
property: 'gridAutoRows'
},
templateColumns: {
property: 'gridTemplateColumns'
},
templateRows: {
property: 'gridTemplateRows'
},
templateAreas: {
property: 'gridTemplateAreas'
},
area: {
property: 'gridArea'
},
columnStart: {
property: 'gridColumnStart'
},
columnEnd: {
property: 'gridColumnEnd'
},
rowStart: {
property: 'gridrowStart'
},
rowEnd: {
property: 'gridrowEnd'
}
})
const getterColumns = n => `repeat(${n}, 1fr)`

export const columnsProp = style({
cssProperty: 'grid-template-columns',
prop: 'columns',
alias: 'c',
transformValue: getterColumns
})
3 changes: 3 additions & 0 deletions src/components/Grid/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import Grid from './Grid'

export { Grid }
2 changes: 2 additions & 0 deletions src/components/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
export * from './Box'
export * from './Flex'
export * from './Grid'
export * from './Typography'
export * from './TextField'
export * from './TextArea'
Expand All @@ -24,3 +25,4 @@ export * from './Card'
export * from './SaturnProvider'
export * from './Carousel'
export * from './ProgressBar'
export * from './Grid'
80 changes: 80 additions & 0 deletions src/stories/Flex.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks'

import { Flex, Box, Typography, SaturnProvider } from '../components'

<Meta title='Layout/Flex | Box' component={Flex} />

# Flex | Box

O Componente Flex é o componente que encapsula todos os filhos `Box` e os delimita dentro do layout. Ele recebe qualquer propriedade disponível no [styled-system](https://styled-system.com/api), mas idealmente sua utilização deve ser estritamente a de posicionar o conteúdo dentro do layout desejado.
O componente Box é responsável por encapsular uma porção de conteúdo, afim de posicioná-lo na tela. Ele recebe qualquer propriedade disponível no [styled-system](https://styled-system.com/api), mas idealmente sua utilização deve ser estritamente a de posicionar o conteúdo dentro do layout desejado. Sua principal diferença está na forma de definir a width do componente, onde um array de larguras pode ser inserido, seguindo os breakpoints disponíveis no `theme` definido.

<Canvas>
<Story name='Flex | Box'>
<SaturnProvider>
<Flex flexWrap='wrap' backgroundColor='gray.400'>
<Box width={1} p='2'>
<Typography color='white'>Flex</Typography>
</Box>
<Box width={{ xs: 1, md: 1 / 4 }} p='2' backgroundColor='purple.400'>
<Typography color='white' textAlign='center'>
Box 1 / 4
</Typography>
</Box>
<Box width={{ xs: 1, md: 1 / 4 }} p='2' backgroundColor='purple.400'>
<Typography color='white' textAlign='center'>
Box 1 / 4
</Typography>
</Box>
<Box width={{ xs: 1, md: 1 / 4 }} p='2' backgroundColor='purple.400'>
<Typography color='white' textAlign='center'>
Box 1 / 4
</Typography>
</Box>
<Box width={{ xs: 1, md: 1 / 4 }} p='2' backgroundColor='purple.400'>
<Typography color='white' textAlign='center'>
Box 1 / 4
</Typography>
</Box>
<Box width={{ xs: 1, md: 1 / 3 }} p='2' backgroundColor='red.400'>
<Typography color='white' textAlign='center'>
Box 1 / 3
</Typography>
</Box>
<Box width={{ xs: 1, md: 1 / 3 }} p='2' backgroundColor='red.400'>
<Typography color='white' textAlign='center'>
Box 1 / 3
</Typography>
</Box>
<Box width={{ xs: 1, md: 1 / 3 }} p='2' backgroundColor='red.400'>
<Typography color='white' textAlign='center'>
Box 1 / 3
</Typography>
</Box>
<Box width={{ xs: 1, md: 1 / 2 }} p='2' backgroundColor='blue.400'>
<Typography color='white' textAlign='center'>
Box 1 / 2
</Typography>
</Box>
<Box width={{ xs: 1, md: 1 / 2 }} p='2' backgroundColor='blue.400'>
<Typography color='white' textAlign='center'>
Box 1 / 2
</Typography>
</Box>
<Box width={1} p='2' backgroundColor='green.400'>
<Typography color='white' textAlign='center'>
Box 1
</Typography>
</Box>
</Flex>
</SaturnProvider>
</Story>
</Canvas>

### Proptypes Flex

<ArgsTable of={Flex} />

### Proptypes Box

<ArgsTable of={Box} />
129 changes: 63 additions & 66 deletions src/stories/Grid.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,80 +1,77 @@
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks'

import { Flex, Box, Typography, SaturnProvider } from '../components'
import { Grid, Box, Typography, SaturnProvider } from '../components'

<Meta title='Layout/Flex | Box' component={Flex} />
<Meta title='Layout/Grid' component={Grid} />

# Flex | Box

O Componente Flex é o componente que encapsula todos os filhos `Box` e os delimita dentro do layout. Ele recebe qualquer propriedade disponível no [styled-system](https://styled-system.com/api), mas idealmente sua utilização deve ser estritamente a de posicionar o conteúdo dentro do layout desejado.
O componente Box é responsável por encapsular uma porção de conteúdo, afim de posicioná-lo na tela. Ele recebe qualquer propriedade disponível no [styled-system](https://styled-system.com/api), mas idealmente sua utilização deve ser estritamente a de posicionar o conteúdo dentro do layout desejado. Sua principal diferença está na forma de definir a width do componente, onde um array de larguras pode ser inserido, seguindo os breakpoints disponíveis no `theme` definido.
Componente primitivo para construção de layout's complexos (onde somente os componentes de Box/Grid nao sao suficientes). O componente possibilita a utilização de qualquer propriedade que envolva grid suportada pelo styled system (https://styled-system.com/api/#grid-layout) além de propriedades customizadas para casos mais simples

<Canvas>
<Story name='Flex | Box'>
<Story name='Grid'>
<SaturnProvider>
<Grid columns={[0, 2, 3, 4]} gap={10} mb={50}>
<Box bg="purple.500" borderRadius={4} height={50} />
<Box bg="purple.500" borderRadius={4} height={50} />
<Box bg="purple.500" borderRadius={4} height={50} />
<Box bg="purple.500" borderRadius={4} height={50} />
<Box bg="purple.500" borderRadius={4} height={50} />
<Box bg="purple.500" borderRadius={4} height={50} />
<Box bg="purple.500" borderRadius={4} height={50} />
</Grid>
<Grid
gap={10}
templateRows='repeat(2, 1fr)'
templateColumns='repeat(5, 1fr)'
>
<Grid item column={1} row={1} bg='orange.500' height={50} borderRadius={4} />
<Grid item columnStart={1} columnEnd={3} row={2} bg='orange.500' height={50} borderRadius={4} />
<Grid item columnStart={2} columnEnd={5} row={1} bg='blue.500' height={50} borderRadius={4} />
<Grid item columnStart={5} columnEnd={6} row={1} bg='red.500' height={50} borderRadius={4} />
<Grid item columnStart={5} columnEnd={6} row={1} bg='red.500' height={50} borderRadius={4} />
</Grid>
</SaturnProvider>
</Story>
</Canvas>

# Grid (simples)

Para utilizar a grid com finalidades mais simples (ex.: listagem com colunas) basta utilizar o Grid como Wrapper. Utilizar propriedade `columns` para escrever a quantidade de colunas desejadas (ex.: columns={3} equivale a `templateColumns="repeat(3, 1fr)"`)

<Canvas >
<Story name='Grid Simples'>
<SaturnProvider>
<Flex flexWrap='wrap' backgroundColor='gray.400'>
<Box width={1} p='2'>
<Typography color='white'>Flex</Typography>
</Box>
<Box width={{ xs: 1, md: 1 / 4 }} p='2' backgroundColor='purple.400'>
<Typography color='white' textAlign='center'>
Box 1 / 4
</Typography>
</Box>
<Box width={{ xs: 1, md: 1 / 4 }} p='2' backgroundColor='purple.400'>
<Typography color='white' textAlign='center'>
Box 1 / 4
</Typography>
</Box>
<Box width={{ xs: 1, md: 1 / 4 }} p='2' backgroundColor='purple.400'>
<Typography color='white' textAlign='center'>
Box 1 / 4
</Typography>
</Box>
<Box width={{ xs: 1, md: 1 / 4 }} p='2' backgroundColor='purple.400'>
<Typography color='white' textAlign='center'>
Box 1 / 4
</Typography>
</Box>
<Box width={{ xs: 1, md: 1 / 3 }} p='2' backgroundColor='red.400'>
<Typography color='white' textAlign='center'>
Box 1 / 3
</Typography>
</Box>
<Box width={{ xs: 1, md: 1 / 3 }} p='2' backgroundColor='red.400'>
<Typography color='white' textAlign='center'>
Box 1 / 3
</Typography>
</Box>
<Box width={{ xs: 1, md: 1 / 3 }} p='2' backgroundColor='red.400'>
<Typography color='white' textAlign='center'>
Box 1 / 3
</Typography>
</Box>
<Box width={{ xs: 1, md: 1 / 2 }} p='2' backgroundColor='blue.400'>
<Typography color='white' textAlign='center'>
Box 1 / 2
</Typography>
</Box>
<Box width={{ xs: 1, md: 1 / 2 }} p='2' backgroundColor='blue.400'>
<Typography color='white' textAlign='center'>
Box 1 / 2
</Typography>
</Box>
<Box width={1} p='2' backgroundColor='green.400'>
<Typography color='white' textAlign='center'>
Box 1
</Typography>
</Box>
</Flex>
<Grid columns={[0, 2, 3, 4]} gap={10} mb={50}>
<Box bg="purple.500" borderRadius={4} height={50} />
<Box bg="purple.500" borderRadius={4} height={50} />
<Box bg="purple.500" borderRadius={4} height={50} />
<Box bg="purple.500" borderRadius={4} height={50} />
<Box bg="purple.500" borderRadius={4} height={50} />
<Box bg="purple.500" borderRadius={4} height={50} />
<Box bg="purple.500" borderRadius={4} height={50} />
</Grid>
</SaturnProvider>
</Story>
</Canvas>

### Proptypes Flex
# Grid (uso geral)

<ArgsTable of={Flex} />
Para demais finalidades da Grid, aconselhamos utilizar Grid o mesmo componente grid, passando como prop item. Assim você terá acesso a todas as as funcionalidades relacionadas a grid tanto no Wrapper quanto nos filhos

### Proptypes Box
<Canvas >
<Story name='Grid (uso geral)'>
<SaturnProvider>
<Grid
gap={10}
templateRows='repeat(2, 1fr)'
templateColumns='repeat(5, 1fr)'
>
<Grid item column={1} row={1} bg='orange.500' height={50} borderRadius={4} />
<Grid item columnStart={1} columnEnd={3} row={2} bg='orange.500' height={50} borderRadius={4} />
<Grid item columnStart={2} columnEnd={5} row={1} bg='blue.500' height={50} borderRadius={4} />
<Grid item columnStart={5} columnEnd={6} row={1} bg='red.500' height={50} borderRadius={4} />
<Grid item columnStart={5} columnEnd={6} row={1} bg='red.500' height={50} borderRadius={4} />
</Grid>
</SaturnProvider>
</Story>
</Canvas>

<ArgsTable of={Box} />
2 changes: 1 addition & 1 deletion src/theme/Theme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import pallette from './pallette'

const breakpoints = [0, 600, 960, 1280, 1920]
const breakpoints = ['0px', '600px', '960px', '1280px', '1920px']
breakpoints.xs = breakpoints[0]
breakpoints.sm = breakpoints[1]
breakpoints.md = breakpoints[2]
Expand Down