hkuglldocnbodn
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

101 lines
2.2 KiB

import React, { useState } from 'react';
import {
Box,
Label,
Input,
Select,
Textarea,
Radio,
Flex,
Checkbox,
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} />
<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} css={{ maxWidth: '700px' }}>
<Box mb={2}>
<Label>Theme</Label>
<ThemeSelector
value={theme}
onChange={newTheme => setTheme(newTheme)}
/>
</Box>
<Form />
<Box my={3}>
<Spinner />
<Badges />
<Alerts />
</Box>
</Box>
</ThemeSystemProvider>
);
};