feat(docs): Add custom content for sketchy preset demo

packages/docs/src/components/components.mdx

@@ -0,0 +1,232 @@
+<!-- original from https://github.com/beerose/theme-ui-sketchy/blob/master/src/components/components.mdx -->
+
+import { useTheme } from '@emotion/react'
+import {
+  Message,
+  NavLink,
+  Divider,
+  Container,
+  Box,
+  Button,
+  Card,
+  Text,
+  Paragraph,
+  Image,
+  Slider,
+  Label,
+  Flex,
+  Checkbox,
+  Select,
+  Textarea,
+  Radio,
+  Input,
+  Link,
+  Progress,
+  Badge,
+  Alert,
+} from 'theme-ui'
+
+export const Radii = () => {
+  const theme = useTheme()
+  if (typeof theme.radii === 'object') {
+    return (
+      <React.Fragment>
+        <Divider />
+        <h2>Borders</h2>
+        <Flex sx={{ flexWrap: 'wrap' }}>
+          {Object.keys(theme.radii).map((key) => (
+            <Box
+              key={`border_${key}`}
+              p={3}
+              m={2}
+              color="text"
+              bg="muted"
+              sx={{
+                border: '2px solid black',
+                borderRadius: { key },
+                minWidth: '100px',
+              }}>
+              {key}
+            </Box>
+          ))}
+        </Flex>
+      </React.Fragment>
+    )
+  }
+  return null
+}
+
+# Example components
+
+<Radii />
+
+export const Buttons = () => {
+  const theme = useTheme()
+  if (typeof theme.buttons === 'object') {
+    return (
+      <React.Fragment>
+        <Divider />
+        <h2>Buttons</h2>
+        <Flex sx={{ flexWrap: 'wrap' }}>
+          {Object.keys(theme.buttons).map((key) => (
+            <Button key={`button_${key}`} variant={key} m={10}>
+              {key}
+            </Button>
+          ))}
+        </Flex>
+      </React.Fragment>
+    )
+  }
+  return null
+}
+
+<Buttons />
+
+---
+
+## Form elements
+
+<Box
+  as="form"
+  pb={3}
+  onSubmit={(e) => e.preventDefault()}
+  sx={{ width: '100%', maxWidth: '500px' }}>
+  <Label htmlFor="username">Username</Label>
+  <Input id="username" mb={3} />
+  <Label htmlFor="password">Password</Label>
+  <Input type="password" id="password" mb={3} />
+  <Box>
+    <Label mb={3}>
+      <Checkbox />
+      Remember me
+    </Label>
+  </Box>
+  <Label htmlFor="sound">Sound</Label>
+  <Select id="sound" mb={3}>
+    <option>Beep</option>
+    <option>Boop</option>
+    <option>Blip</option>
+  </Select>
+  <Label htmlFor="comment">Comment</Label>
+  <Textarea 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>
+  <Button>Submit</Button>
+</Box>
+
+---
+
+## Links
+
+<Box pb={20}>
+  <Link href="#!">Hello</Link>
+</Box>
+
+export const Badges = () => {
+  const theme = useTheme()
+  if (typeof theme.badges === 'object') {
+    return (
+      <React.Fragment>
+        <Divider />
+        <h2>Badges</h2>
+        <Flex sx={{ flexWrap: 'wrap' }}>
+          {Object.keys(theme.badges).map((key) => (
+            <Badge key={`button_${key}`} variant={key} m={10}>
+              {key}
+            </Badge>
+          ))}
+        </Flex>
+      </React.Fragment>
+    )
+  }
+  return null
+}
+
+<Badges />
+
+export const Alerts = () => {
+  const theme = useTheme()
+  if (typeof theme.alerts === 'object') {
+    return (
+      <React.Fragment>
+        <Divider />
+        <h2>Alerts</h2>
+        <Flex sx={{ flexDirection: 'column' }}>
+          {Object.keys(theme.alerts).map((key) => (
+            <Alert key={`button_${key}`} variant={key} m={10}>
+              {key}
+            </Alert>
+          ))}
+        </Flex>
+      </React.Fragment>
+    )
+  }
+  return null
+}
+
+<Alerts />
+
+---
+
+## Navigation
+
+<Box pb={20}>
+  <Flex as="nav">
+    <NavLink href="#!" p={2}>
+      Home
+    </NavLink>
+    <NavLink href="#!" p={2}>
+      Blog
+    </NavLink>
+    <NavLink href="#!" p={2}>
+      About
+    </NavLink>
+  </Flex>
+</Box>
+
+---
+
+## Table
+
+<table style={{ paddingBottom: 20 }}>
+  <thead>
+    <tr>
+      <th colSpan="2">The table header</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>The table body</td>
+      <td>with two columns</td>
+    </tr>
+  </tbody>
+</table>
+
+---
+
+## Card
+
+<Card
+  mb={5}
+  sx={{
+    maxWidth: 400,
+    padding: '30px',
+  }}>
+  <Paragraph>
+    Cupcake ipsum dolor sit amet chocolate bar. Apple pie macaroon muffin jelly
+    candy cake soufflé muffin croissant. Gummies jelly beans cotton candy
+    fruitcake. Wafer lemon drops soufflé cookie. Sesame snaps fruitcake
+    cheesecake danish toffee marzipan biscuit.
+  </Paragraph>
+</Card>
+
+---

packages/docs/src/components/preset.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
-import { jsx, Themed, components } from 'theme-ui'
+import { Helmet } from 'react-helmet'
+import { jsx, Themed } from 'theme-ui'
 import { ThemeContext } from '@emotion/react'
-import { MDXProvider } from '@mdx-js/react'
 import * as presets from '@theme-ui/presets'
 import {
   TypeScale,
@@ -10,13 +10,19 @@ import {
   ColorPalette,
   FontFamily,
 } from '@theme-ui/style-guide'
-import Lorem from './lorem.mdx'
+import Components from './components.mdx'
 
 export default ({ preset: presetName }) => {
   const preset = presets[presetName]
 
   return (
     <div>
+      <Helmet>
+        <link
+          rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Montserrat:400,700|Poppins:400,700,900|Roboto:400,600|Architects+Daughter"
+        />
+      </Helmet>
       <ThemeContext.Provider value={preset}>
         <Themed.root>
           <Themed.h2>Colors</Themed.h2>
@@ -34,10 +40,10 @@ export default ({ preset: presetName }) => {
           </HeadingStyle>
           <Themed.h2>Type Scale</Themed.h2>
           <TypeScale />
-          <MDXProvider components={components}>
-            <Lorem />
-          </MDXProvider>
-          <Themed.h2 id="json">Raw JSON</Themed.h2>
+          <Components />
+          <Themed.h2 id="json">
+            Raw JSON
+          </Themed.h2>
           <textarea
             value={JSON.stringify(preset, null, 2)}
             rows={16}

packages/docs/src/components/presets-demo.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx, Themed, components, Select, ThemeProvider } from 'theme-ui'
+import { jsx, ThemeProvider, Themed, Select } from 'theme-ui'
 import { MDXProvider } from '@mdx-js/react'
 import { useState } from 'react'
 import { Helmet } from 'react-helmet'
@@ -11,13 +11,12 @@ import {
   ColorPalette,
   FontFamily,
 } from '@theme-ui/style-guide'
-import Lorem from './lorem.mdx'
+import Components from './components.mdx'
 
 export default function PresetsDemo() {
   const [theme, setTheme] = useState('base')
   const preset = presets[theme]   
 
-
   return (
     <div>
       <Helmet>
@@ -75,11 +74,10 @@ export default function PresetsDemo() {
             </HeadingStyle>
             <Themed.h2>Type Scale</Themed.h2>
             <TypeScale />
-            <MDXProvider components={components}>
-              <Lorem />
-            </MDXProvider>
-            <Themed.h2 id="json">Raw JSON</Themed.h2>
+            <Components />
+            <label htmlFor="json">Raw JSON</label>
             <textarea
+              id="json"
               value={JSON.stringify(preset, null, 2)}
               rows={16}
               readOnly