Browse Source

Add more items to Theming story, add card story

unoptim
GreatBearShark 2 years ago
parent
commit
d8b44eca0d
  1. 2
      package.json
  2. 3
      src/custom.css
  3. 37
      src/stories/Button.stories.tsx
  4. 74
      src/stories/Card.stories.tsx
  5. 138
      src/stories/Theming.stories.tsx
  6. 49
      src/theme.tsx

2
package.json

@ -9,7 +9,7 @@
"build": "node generate_translations.js && NODE_ENV=production vite build --base=/static/",
"lint": "tsc --noEmit && eslint --report-unused-disable-directives --ext .js,.ts,.tsx src",
"start": "node generate_translations.js && vite --port 4444 --open",
"storybook": "start-storybook"
"storybook": "start-storybook -p 9009"
},
"keywords": [],
"dependencies": {

3
src/custom.css

@ -730,3 +730,6 @@ a.text-body {
border-bottom-left-radius: 0;
}
button:hover [type="button"]:hover {
cursor: pointer;
}

37
src/stories/Button.stories.tsx

@ -1,12 +1,15 @@
import React, { useState } from 'react';
import { Box, Label,
import {
Box,
Label,
Input,
Select,
Textarea,
Radio,
Flex,
Checkbox,
Slider, } from 'theme-ui';
Slider,
} from 'theme-ui';
import Button from '../components/elements/Button';
import { ThemeSystemProvider } from '../components/ThemeSystemProvider';
import { themes } from '../theme';
@ -21,16 +24,28 @@ export const Basic = () => {
<ThemeSystemProvider key={theme} initialTheme={theme}>
<Box bg="background" p={2}>
<Button mx={1}>Primary</Button>
<Button variant="secondary" mx={1}>Secondary</Button>
<Button variant="highlight" mx={1}>Highlight</Button>
<Button variant="muted" mx={1}>Muted</Button>
<Button disabled mx={1}>Disabled</Button>
<Button variant="danger" mx={1}>Danger</Button>
<Button variant="outline" mx={1}>Outline</Button>
<Button variant="secondary" mx={1}>
Secondary
</Button>
<Button variant="highlight" mx={1}>
Highlight
</Button>
<Button variant="muted" mx={1}>
Muted
</Button>
<Button disabled mx={1}>
Disabled
</Button>
<Button variant="danger" mx={1}>
Danger
</Button>
<Button variant="outline" mx={1}>
Outline
</Button>
</Box>
</ThemeSystemProvider>
)
);
})}
</div>
)
}
);
};

74
src/stories/Card.stories.tsx

@ -0,0 +1,74 @@
import React, { useState } from 'react';
import { Box, Heading } from 'theme-ui';
import Card from '../components/elements/Card';
import { ThemeSystemProvider } from '../components/ThemeSystemProvider';
import { ThemeSelector } from '../theme';
export default {
title: 'Card',
};
export const Basic = () => {
const [theme, setTheme] = useState('chapo');
return (
<ThemeSystemProvider>
<Box m={4}>
<ThemeSelector
value={theme}
onChange={newTheme => setTheme(newTheme)}
/>
</Box>
<Box m={4}>
<Card>
<div className="card-body">
<Heading as="h4">
Trending{' '}
<a className="text-body" href="/communities">
communities
</a>
</Heading>
<ul className="list-inline">
<li className="list-inline-item">
<a href="/c/nullcom">nullcom</a>
</li>
<li className="list-inline-item">
<a href="/c/chapotraphouse">chapotraphouse</a>
</li>
<li className="list-inline-item">
<a href="/c/mls">mls</a>
</li>
<li className="list-inline-item">
<a href="/c/readonly_test">readonly_test</a>
</li>
<li className="list-inline-item">
<a href="/c/dad">dad</a>
</li>
</ul>
</div>
<div>
<h5>
Subscribed to{' '}
<a className="text-body" href="/communities">
communities
</a>
</h5>
<ul className="list-inline">
<li className="list-inline-item">
<a href="/c/bug_reports">bug_reports</a>
</li>
<li className="list-inline-item">
<a href="/c/tacobell">tacobell</a>
</li>
</ul>
</div>
<div className="css-4cffwv">
<a className="css-18q9lsw" href="/create_community">
Create a Community
</a>
</div>
</Card>
</Box>
</ThemeSystemProvider>
);
};

138
src/stories/Theming.stories.tsx

@ -1,93 +1,101 @@
import React, { useState } from 'react';
import { Box, Label,
import {
Box,
Label,
Input,
Select,
Textarea,
Radio,
Flex,
Checkbox,
Slider, } from 'theme-ui';
Slider,
Heading,
Spinner,
Badge,
Alert,
} from 'theme-ui';
import Button from '../components/elements/Button';
import { ThemeSystemProvider } from '../components/ThemeSystemProvider';
import { ThemeSelector } from '../theme';
// import { Button } from '@storybook/react/demo';
export default { title: 'Themes' };
function Form() {
return (
<Box
as='form'
onSubmit={e => e.preventDefault()}>
<Label htmlFor='username'>Username</Label>
<Input
name='username'
id='username'
mb={3}
/>
<Label htmlFor='password'>Password</Label>
<Input
type='password'
name='password'
id='password'
mb={3}
/>
<Box>
<Label mb={3}>
<Checkbox />
Remember me
</Label>
</Box>
<Label htmlFor='sound'>Sound</Label>
<Select name='sound' id='sound' mb={3}>
<option>Beep</option>
<option>Boop</option>
<option>Blip</option>
</Select>
<Label htmlFor='comment'>Comment</Label>
<Textarea
name='comment'
id='comment'
rows='6'
mb={3}
/>
<Flex mb={3}>
<Label>
<Radio name='letter' /> Alpha
</Label>
<Label>
<Radio name='letter' /> Bravo
</Label>
<Label>
<Radio name='letter' /> Charlie
</Label>
</Flex>
<Label>
Slider
</Label>
<Slider mb={3} />
<Button variant="primary">
Submit
</Button>
<Button variant='secondary'>
Cancel
</Button>
</Box>
)
<Box as="form" onSubmit={e => e.preventDefault()}>
<Label htmlFor="username">Username</Label>
<Input name="username" id="username" mb={3} />
<Box>
<Label mb={3}>
<Checkbox />
Remember me
</Label>
</Box>
<Label htmlFor="comment">Comment</Label>
<Textarea name="comment" id="comment" rows="6" mb={3} />
<Flex mb={3}>
<Label>
<Radio name="letter" /> Alpha
</Label>
<Label>
<Radio name="letter" /> Bravo
</Label>
<Label>
<Radio name="letter" /> Charlie
</Label>
</Flex>
<Label>Slider</Label>
<Slider mb={3} />
<Button variant="primary">Submit</Button>
<Button variant="secondary">Cancel</Button>
</Box>
);
}
const Badges = () => (
<Box my={3}>
<Heading>Badges</Heading>
<Badge mr={2}>Badge 1</Badge>
<Badge variant="outline">Badge 2</Badge>
</Box>
);
const Alerts = () => (
<Box my={3}>
<Heading>Alerts</Heading>
<Alert variant="primary" mb={2}>
Primary
</Alert>
<Alert variant="secondary" mb={2}>
Secondary
</Alert>
<Alert variant="muted" mb={2}>
Muted
</Alert>
</Box>
);
export const Basic = () => {
const [theme, setTheme] = useState('chapo');
return (
<ThemeSystemProvider>
<Box m={4}>
<Box m={4} css={{ maxWidth: '700px' }}>
<Box mb={2}>
<ThemeSelector value={theme} onChange={newTheme => setTheme(newTheme)} />
<Label>Theme</Label>
<ThemeSelector
value={theme}
onChange={newTheme => setTheme(newTheme)}
/>
</Box>
<Form />
<Box my={3}>
<Spinner />
<Badges />
<Alerts />
</Box>
</Box>
</ThemeSystemProvider>
)
};
);
};

49
src/theme.tsx

@ -16,21 +16,23 @@ export const variants = {
cursor: 'pointer',
'&:hover': {
textDecoration: 'none',
cursor: 'pointer',
},
'&:disabled': {
opacity: 0.5,
cursor: 'not-allowed',
},
},
muted: {
bg: 'muted',
color: 'text',
},
secondary: {
color: 'background',
bg: 'secondary',
},
muted: {
bg: 'muted',
color: 'text',
},
highlight: {
bg: 'highlight',
color: 'text',
'&:hover': {
backgroundColor: 'muted',
@ -54,6 +56,16 @@ export const variants = {
color: 'text',
},
},
alerts: {
primary: {
color: 'background',
bg: 'primary',
},
muted: {
color: 'text',
bg: 'muted',
},
},
};
const defaultTheme: ThemeProviderProps<Theme> = {
@ -72,14 +84,37 @@ const defaultTheme: ThemeProviderProps<Theme> = {
primary: {
...variants.buttons.primary,
color: 'text',
bg: 'primary'
bg: 'primary',
},
secondary: {
...variants.buttons.secondary,
color: 'text',
bg: 'secondary',
}
}
},
highlight: {
...variants.buttons.highlight,
color: 'text',
bg: lighten('muted', 0.1),
},
},
alerts: {
...variants.alerts,
primary: {
...variants.alerts.primary,
color: 'text',
bg: 'primary',
},
secondary: {
...variants.alerts.secondary,
color: 'text',
bg: 'secondary',
},
highlight: {
...variants.alerts.highlight,
color: 'text',
bg: lighten('muted', 0.1),
},
},
};
export const themes = {

Loading…
Cancel
Save