Skip to content

Commit

Permalink
Use container component in vite app
Browse files Browse the repository at this point in the history
  • Loading branch information
@brijeshb42
brijeshb42 committed Jun 17, 2024
1 parent 10664ce commit 292c54c
Show file tree
Hide file tree
Showing 3 changed files with 103 additions and 148 deletions.
85 changes: 47 additions & 38 deletions apps/pigment-css-next-app/src/app/stack/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
'use client';
import * as React from 'react';
import Stack from '@pigment-css/react/Stack';
import Container from '@pigment-css/react/Container';
import { styled, css } from '@pigment-css/react';

type StackProps = React.ComponentProps<typeof Stack>;
Expand Down Expand Up @@ -58,45 +59,53 @@ export default function InteractiveStack() {
`;

return (
<Stack spacing={2} sx={{ flexGrow: 1, padding: 2 }}>
<Stack direction="row" justifyContent="space-between" spacing={2}>
<fieldset>
<legend>Direction</legend>
{['row', 'row-reverse', 'column', 'column-reverse'].map((item) => (
<label key={item} className={labelClass}>
{item}
<input
type="radio"
name="direction"
value={item}
checked={item === direction}
onChange={handleChange}
/>
</label>
<Container maxWidth="md">
<Stack spacing={2} sx={{ flexGrow: 1, padding: 2 }}>
<Stack
spacing={2}
direction="row"
sx={{
justifyContent: 'space-between',
}}
>
<fieldset>
<legend>Direction</legend>
{['row', 'row-reverse', 'column', 'column-reverse'].map((item) => (
<label key={item} className={labelClass}>
{item}
<input
type="radio"
name="direction"
value={item}
checked={item === direction}
onChange={handleChange}
/>
</label>
))}
</fieldset>
<fieldset sx={{ mt: 1 }}>
<legend>Spacing</legend>
{[0, 0.5, 1, 2, 3, 4, 8, 12, '2rem'].map((item) => (
<label key={item} className={labelClass}>
{item}
<input
type="radio"
name="spacing"
value={item}
checked={item === spacing}
onChange={handleChange}
/>
</label>
))}
</fieldset>
</Stack>
<Stack direction={direction} spacing={spacing}>
{[0, 1, 2].map((value) => (
<Card key={value}>{`Item ${value + 1}`}</Card>
))}
</fieldset>
<fieldset sx={{ mt: 1 }}>
<legend>Spacing</legend>
{[0, 0.5, 1, 2, 3, 4, 8, 12, '2rem'].map((item) => (
<label key={item} className={labelClass}>
{item}
<input
type="radio"
name="spacing"
value={item}
checked={item === spacing}
onChange={handleChange}
/>
</label>
))}
</fieldset>
</Stack>
<Stack direction={direction} spacing={spacing}>
{[0, 1, 2].map((value) => (
<Card key={value}>{`Item ${value + 1}`}</Card>
))}
</Stack>
<textarea style={{ colorScheme: 'dark' }} value={jsx} readOnly rows={8} />
</Stack>
<textarea style={{ colorScheme: 'dark' }} value={jsx} readOnly rows={8} />
</Stack>
</Container>
);
}
164 changes: 55 additions & 109 deletions apps/pigment-css-vite-app/src/pages/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import * as React from 'react';
import Stack from '@pigment-css/react/Stack';
import Container from '@pigment-css/react/Container';
import { styled, css } from '@pigment-css/react';

type StackProps = React.ComponentProps<typeof Stack>;
Expand All @@ -16,39 +17,32 @@ const Card = styled.div`
rgba(0, 0, 0, 0.14) 0px 1px 1px 0px,
rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05));
color: white;
padding: 8px 16px;
font-family: Roboto, Helvetica, Arial, sans-serif;
font-weight: 400;
font-size: 0.875rem;
line-height: 1.43;
letter-spacing: 0.01071em;
background-color: rgb(26, 32, 39);
color: white;
`;

export default function InteractiveStack() {
const [direction, setDirection] = React.useState<StackProps['direction']>('column');
const [justifyContent, setJustifyContent] =
React.useState<StackProps['justifyContent']>('center');
const [alignItems, setAlignItems] = React.useState<StackProps['alignItems']>('center');
const [spacing, setSpacing] = React.useState(2);
const [spacing, setSpacing] = React.useState<string | number>(2);

const handleChange = React.useCallback((ev: React.ChangeEvent<HTMLInputElement>) => {
switch (ev.target.name) {
case 'direction': {
setDirection(ev.target.value as StackProps['direction']);
break;
}
case 'justify-content': {
setJustifyContent(ev.target.value as StackProps['justifyContent']);
break;
}
case 'align-items': {
setAlignItems(ev.target.value as StackProps['alignItems']);
break;
}
case 'spacing': {
setSpacing(parseFloat(ev.target.value));
setSpacing(
ev.target.value.match(/^[0-9]+\.?[0-9]*$/)
? parseFloat(ev.target.value)
: ev.target.value,
);
break;
}
default:
Expand All @@ -59,106 +53,58 @@ export default function InteractiveStack() {
const jsx = `
<Stack
direction="${direction}"
justifyContent="${justifyContent}"
alignItems="${alignItems}"
spacing={${spacing}}
spacing=${typeof spacing === 'number' ? `{${spacing}}` : `"${spacing}"`}
>
`;

return (
<Stack sx={{ flexGrow: 1 }}>
<Stack direction="row" justifyContent="space-between">
<fieldset>
<legend>Direction</legend>
{['row', 'row-reverse', 'column', 'column-reverse'].map((item) => (
<label key={item} className={labelClass}>
{item}
<input
type="radio"
name="direction"
value={item}
checked={item === direction}
onChange={handleChange}
/>
</label>
<Container maxWidth="md">
<Stack spacing={2} sx={{ flexGrow: 1, padding: 2 }}>
<Stack
spacing={2}
direction="row"
sx={{
justifyContent: 'space-between',
}}
>
<fieldset>
<legend>Direction</legend>
{['row', 'row-reverse', 'column', 'column-reverse'].map((item) => (
<label key={item} className={labelClass}>
{item}
<input
type="radio"
name="direction"
value={item}
checked={item === direction}
onChange={handleChange}
/>
</label>
))}
</fieldset>
<fieldset sx={{ mt: 1 }}>
<legend>Spacing</legend>
{[0, 0.5, 1, 2, 3, 4, 8, 12, '2rem'].map((item) => (
<label key={item} className={labelClass}>
{item}
<input
type="radio"
name="spacing"
value={item}
checked={item === spacing}
onChange={handleChange}
/>
</label>
))}
</fieldset>
</Stack>
<Stack direction={direction} spacing={spacing}>
{[0, 1, 2].map((value) => (
<Card key={value}>{`Item ${value + 1}`}</Card>
))}
</fieldset>
<fieldset sx={{ mt: 1 }}>
<legend>justifyContent</legend>
{[
'flex-start',
'center',
'flex-end',
'space-between',
'space-around',
'space-evenly',
].map((item) => (
<label key={item} className={labelClass}>
{item}
<input
type="radio"
name="justify-content"
value={item}
checked={item === justifyContent}
onChange={handleChange}
/>
</label>
))}
</fieldset>
</Stack>
<Stack direction="row" justifyContent="space-between">
<fieldset sx={{ mt: 1 }}>
<legend>alignItems</legend>
{[
'flex-start',
'center',
'flex-end',
'stretch',
'baseline',
'space-between',
'space-around',
'space-evenly',
].map((item) => (
<label key={item} className={labelClass}>
{item}
<input
type="radio"
name="align-items"
value={item}
checked={item === alignItems}
onChange={handleChange}
/>
</label>
))}
</fieldset>
<fieldset sx={{ mt: 1 }}>
<legend>Spacing</legend>
{[0, 0.5, 1, 2, 3, 4, 8, 12].map((item) => (
<label key={item} className={labelClass}>
{item}
<input
type="radio"
name="spacing"
value={item}
checked={item === spacing}
onChange={handleChange}
/>
</label>
))}
</fieldset>
</Stack>
<Stack
direction={direction}
justifyContent={justifyContent}
alignItems={alignItems}
spacing={spacing}
sx={{ height: 240, width: '100%' }}
>
{[0, 1, 2].map((value) => (
<Card key={value}>{`Item ${value + 1}`}</Card>
))}
</Stack>
<textarea style={{ colorScheme: 'dark' }} value={jsx} readOnly rows={8} />
</Stack>
<textarea style={{ colorScheme: 'dark' }} value={jsx} readOnly rows={8} />
</Stack>
</Container>
);
}
2 changes: 1 addition & 1 deletion apps/pigment-css-vite-app/vite.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { defineConfig, splitVendorChunkPlugin } from 'vite';
import reactPlugin from '@vitejs/plugin-react';
import Pages from 'vite-plugin-pages';
import { pigment } from '@pigment-css/vite-plugin';
import { experimental_extendTheme as extendTheme } from '@mui/material/styles';
import { extendTheme } from '@mui/material';

const theme = extendTheme({
getSelector: function getSelector(colorScheme, css) {
Expand Down

0 comments on commit 292c54c

Please sign in to comment.