-
-
Notifications
You must be signed in to change notification settings - Fork 39
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.
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
[react] Create Grid component #144
Merged
Merged
Changes from all commits
Commits
Show all changes
16 commits
Select commit
Hold shift + click to select a range
06f1692
Grid init
DiegoAndai dc8759e
Add row direction
DiegoAndai 51dc95d
Implement shared styles through styled
DiegoAndai 14f5bf3
Support keywords in size and offset props
DiegoAndai b98980a
Support nested grids and refactor code
DiegoAndai a07098a
Use RSC in grid demos
DiegoAndai ec26cbb
Adjust to atomics changes
DiegoAndai 3a60d2d
Move gridAtomics to Grid file
DiegoAndai 5c118ed
prettier
DiegoAndai e5568d3
Use proper casing in Grid component
DiegoAndai daa5ae3
Improve gridAtomics
DiegoAndai afb1b16
Merge branch 'master' into react/grid
DiegoAndai 195ec31
prettier
DiegoAndai a4dc61a
Merge branch 'master' into react/grid
DiegoAndai 129c4aa
Init grid tests
DiegoAndai 59a9ad4
Add basic example test
DiegoAndai File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| 'use client'; | ||
| import * as React from 'react'; | ||
| import Grid from '@pigment-css/react/Grid'; | ||
| import { styled } from '@pigment-css/react'; | ||
|
|
||
| const Item = styled.div` | ||
| background-color: #fff; | ||
| border: 1px solid #ced7e0; | ||
| padding: 8px; | ||
| border-radius: 4px; | ||
| text-align: center; | ||
| `; | ||
|
|
||
| export default function GridDemo3() { | ||
| const [spacing, setSpacing] = React.useState(2); | ||
| return ( | ||
| <div sx={{ display: 'flex', flexDirection: 'column', gap: 4 }}> | ||
| <Grid container spacing={spacing} sx={{ justifyContent: 'center' }}> | ||
| {[0, 1, 2].map((value) => ( | ||
| <Grid key={value}> | ||
| <Item | ||
| sx={{ | ||
| height: 140, | ||
| width: 100, | ||
| }} | ||
| /> | ||
| </Grid> | ||
| ))} | ||
| </Grid> | ||
| <Grid container spacing={1} sx={{ justifyContent: 'center' }}> | ||
| <Grid size={'auto'}>Spacing:</Grid> | ||
| {[0, 0.5, 1, 2, 3, 4, 8, 12].map((value) => ( | ||
| <Grid key={value} size={'auto'}> | ||
| <label> | ||
| <input | ||
| type="radio" | ||
| name="radio" | ||
| value={value} | ||
| checked={value === spacing} | ||
| onChange={(e) => setSpacing(parseFloat(e.target.value))} | ||
| /> | ||
| {value} | ||
| </label> | ||
| </Grid> | ||
| ))} | ||
| </Grid> | ||
| </div> | ||
| ); | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,259 @@ | ||
| import Box from '@pigment-css/react/Box'; | ||
| import Grid from '@pigment-css/react/Grid'; | ||
| import { styled } from '@pigment-css/react'; | ||
| import GridDemo3 from './demo3'; | ||
|
|
||
| const Item = styled.div` | ||
| background-color: #fff; | ||
| border: 1px solid #ced7e0; | ||
| padding: 8px; | ||
| border-radius: 4px; | ||
| text-align: center; | ||
| `; | ||
|
|
||
| function GridDemo1() { | ||
| return ( | ||
| <Grid container spacing={2}> | ||
| <Grid size={8}> | ||
| <Item>size=8</Item> | ||
| </Grid> | ||
| <Grid size={4}> | ||
| <Item>size=4</Item> | ||
| </Grid> | ||
| <Grid size={4}> | ||
| <Item>size=4</Item> | ||
| </Grid> | ||
| <Grid size={8}> | ||
| <Item>size=8</Item> | ||
| </Grid> | ||
| </Grid> | ||
| ); | ||
| } | ||
|
|
||
| function GridDemo2() { | ||
| return ( | ||
| <Grid container spacing={2}> | ||
| <Grid size={{ xs: 6, md: 8 }}> | ||
| <Item>xs=6 md=8</Item> | ||
| </Grid> | ||
| <Grid size={{ xs: 6, md: 4 }}> | ||
| <Item>xs=6 md=4</Item> | ||
| </Grid> | ||
| <Grid size={{ xs: 6, md: 4 }}> | ||
| <Item>xs=6 md=4</Item> | ||
| </Grid> | ||
| <Grid size={{ xs: 6, md: 8 }}> | ||
| <Item>xs=6 md=8</Item> | ||
| </Grid> | ||
| </Grid> | ||
| ); | ||
| } | ||
|
|
||
| function GridDemo4() { | ||
| return ( | ||
| <Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}> | ||
| <Grid size={6}> | ||
| <Item>1</Item> | ||
| </Grid> | ||
| <Grid size={6}> | ||
| <Item>2</Item> | ||
| </Grid> | ||
| <Grid size={6}> | ||
| <Item>3</Item> | ||
| </Grid> | ||
| <Grid size={6}> | ||
| <Item>4</Item> | ||
| </Grid> | ||
| </Grid> | ||
| ); | ||
| } | ||
|
|
||
| function GridDemo5() { | ||
| return ( | ||
| <Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}> | ||
| {Array.from(Array(6)).map((_, index) => ( | ||
| <Grid size={{ xs: 2, sm: 4 }} key={index}> | ||
| <Item>{index + 1}</Item> | ||
| </Grid> | ||
| ))} | ||
| </Grid> | ||
| ); | ||
| } | ||
|
|
||
| function GridDemo6() { | ||
| return ( | ||
| <Grid container spacing={3}> | ||
| <Grid size="grow"> | ||
| <Item>grow</Item> | ||
| </Grid> | ||
| <Grid size={6}> | ||
| <Item>size=6</Item> | ||
| </Grid> | ||
| <Grid size="grow"> | ||
| <Item>grow</Item> | ||
| </Grid> | ||
| </Grid> | ||
| ); | ||
| } | ||
|
|
||
| function GridDemo7() { | ||
| return ( | ||
| <Grid container spacing={3}> | ||
| <Grid size="auto"> | ||
| <Item>Variable width item</Item> | ||
| </Grid> | ||
| <Grid size={6}> | ||
| <Item>size=6</Item> | ||
| </Grid> | ||
| <Grid size="grow"> | ||
| <Item>grow</Item> | ||
| </Grid> | ||
| </Grid> | ||
| ); | ||
| } | ||
|
|
||
| function GridDemo8() { | ||
| return ( | ||
| <Box sx={{ flexGrow: 1 }}> | ||
| <Grid container spacing={2}> | ||
| <Grid size={{ xs: 12, md: 5, lg: 4 }}> | ||
| <Item>Email subscribe section</Item> | ||
| </Grid> | ||
| <Grid container size={{ xs: 12, md: 7, lg: 8 }} spacing={4}> | ||
| <Grid size={{ xs: 6, lg: 3 }}> | ||
| <Item> | ||
| <Box id="category-a" sx={{ fontSize: '12px', textTransform: 'uppercase' }}> | ||
| Category A | ||
| </Box> | ||
| <Box component="ul" aria-labelledby="category-a" sx={{ pl: 2 }}> | ||
| <li>Link 1.1</li> | ||
| <li>Link 1.2</li> | ||
| <li>Link 1.3</li> | ||
| </Box> | ||
| </Item> | ||
| </Grid> | ||
| <Grid size={{ xs: 6, lg: 3 }}> | ||
| <Item> | ||
| <Box id="category-b" sx={{ fontSize: '12px', textTransform: 'uppercase' }}> | ||
| Category B | ||
| </Box> | ||
| <Box component="ul" aria-labelledby="category-b" sx={{ pl: 2 }}> | ||
| <li>Link 2.1</li> | ||
| <li>Link 2.2</li> | ||
| <li>Link 2.3</li> | ||
| </Box> | ||
| </Item> | ||
| </Grid> | ||
| <Grid size={{ xs: 6, lg: 3 }}> | ||
| <Item> | ||
| <Box id="category-c" sx={{ fontSize: '12px', textTransform: 'uppercase' }}> | ||
| Category C | ||
| </Box> | ||
| <Box component="ul" aria-labelledby="category-c" sx={{ pl: 2 }}> | ||
| <li>Link 3.1</li> | ||
| <li>Link 3.2</li> | ||
| <li>Link 3.3</li> | ||
| </Box> | ||
| </Item> | ||
| </Grid> | ||
| <Grid size={{ xs: 6, lg: 3 }}> | ||
| <Item> | ||
| <Box id="category-d" sx={{ fontSize: '12px', textTransform: 'uppercase' }}> | ||
| Category D | ||
| </Box> | ||
| <Box component="ul" aria-labelledby="category-d" sx={{ pl: 2 }}> | ||
| <li>Link 4.1</li> | ||
| <li>Link 4.2</li> | ||
| <li>Link 4.3</li> | ||
| </Box> | ||
| </Item> | ||
| </Grid> | ||
| </Grid> | ||
| <Grid | ||
| size={12} | ||
| container | ||
| direction={{ xs: 'column', sm: 'row' }} | ||
| sx={{ fontSize: '12px', justifyContent: 'space-between', alignItems: 'center' }} | ||
| > | ||
| <Grid sx={{ order: { xs: 2, sm: 1 } }}> | ||
| <Item>© Copyright</Item> | ||
| </Grid> | ||
| <Grid container columnSpacing={1} sx={{ order: { xs: 1, sm: 2 } }}> | ||
| <Grid> | ||
| <Item>Link A</Item> | ||
| </Grid> | ||
| <Grid> | ||
| <Item>Link B</Item> | ||
| </Grid> | ||
| <Grid> | ||
| <Item>Link C</Item> | ||
| </Grid> | ||
| </Grid> | ||
| </Grid> | ||
| </Grid> | ||
| </Box> | ||
| ); | ||
| } | ||
|
|
||
| function GridDemo9() { | ||
| return ( | ||
| <Grid container spacing={2} columns={16}> | ||
| <Grid size={{ xs: 8 }}> | ||
| <Item>size=8</Item> | ||
| </Grid> | ||
| <Grid size={{ xs: 8 }}> | ||
| <Item>size=8</Item> | ||
| </Grid> | ||
| </Grid> | ||
| ); | ||
| } | ||
|
|
||
| function GridDemo10() { | ||
| return ( | ||
| <Grid container spacing={3} sx={{ flexGrow: 1 }}> | ||
| <Grid size={{ xs: 6, md: 2 }} offset={{ xs: 3, md: 0 }}> | ||
| <Item>1</Item> | ||
| </Grid> | ||
| <Grid size={{ xs: 4, md: 2 }} offset={{ md: 'auto' }}> | ||
| <Item>2</Item> | ||
| </Grid> | ||
| <Grid size={{ xs: 4, md: 2 }} offset={{ xs: 4, md: 0 }}> | ||
| <Item>3</Item> | ||
| </Grid> | ||
| <Grid size={{ xs: 'grow', md: 6 }} offset={{ md: 2 }}> | ||
| <Item>4</Item> | ||
| </Grid> | ||
| </Grid> | ||
| ); | ||
| } | ||
|
|
||
| const demos = [ | ||
| { id: '1', component: GridDemo1 }, | ||
| { id: '2', component: GridDemo2 }, | ||
| { id: '3', component: GridDemo3 }, | ||
| { id: '4', component: GridDemo4 }, | ||
| { id: '5', component: GridDemo5 }, | ||
| { id: '6', component: GridDemo6 }, | ||
| { id: '7', component: GridDemo7 }, | ||
| { id: '8', component: GridDemo8 }, | ||
| { id: '9', component: GridDemo9 }, | ||
| { id: '10', component: GridDemo10 }, | ||
| ]; | ||
|
|
||
| export default function InteractiveGrid() { | ||
| return ( | ||
| <div sx={{ p: 2, mb: 16, display: 'flex', flexDirection: 'column', gap: 2 }}> | ||
| <a href="https://mui.com/system/react-grid">Benchmark v5</a> | ||
| <a href="https://next.mui.com/system/react-grid">Benchmark next</a> | ||
| {demos.map((demo) => { | ||
| const Demo = demo.component; | ||
| return ( | ||
| <div key={demo.id} sx={{ flex: '1 1 0', pb: 4, borderBottom: '1px solid gray' }}> | ||
| <h3>Grid Demo {demo.id}</h3> | ||
| <Demo /> | ||
| </div> | ||
| ); | ||
| })} | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is the only demo from the docs demos that is a client component, all others run on the next app as RSC 🚀
The reason this has to be a client component is that the demo uses state to interactively show spacing changes.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
AWESOME!!! ❤️