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

CHANGELOG.md

@@ -1,7 +1,7 @@
 # Changelog
 
 ## Unreleased
-
+- docs `preset/presetname`fix fonts and preview components. Issue #1128
 - Make ThemeProvider `theme` prop required
 - Removes overriding property on editor combobox
 - Adjust media query sort logic #600

packages/docs/src/components/components.mdx

@@ -0,0 +1,217 @@
+<!-- original from https://github.com/beerose/theme-ui-sketchy/blob/master/src/components/components.mdx -->
+
+import { Message, NavLink, Divider, Container, Box, Button, Card, Text, Image, Slider, Label, Flex, Checkbox, Select, Textarea, Radio, Input, Link, Progress, Badge, Alert, useThemeUI } from "theme-ui"
+
+export const Radii = () => {
+  const { theme } = useThemeUI();
+  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 } = useThemeUI();
+  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
+    name='username'
+    mb={3}
+  />
+  <Label htmlFor='password'>Password</Label>
+  <Input
+    type='password'
+    name='password'
+    mb={3}
+  />
+  <Box>
+    <Label mb={3}>
+      <Checkbox />
+      Remember me
+    </Label>
+  </Box>
+  <Label htmlFor='sound'>Sound</Label>
+  <Select name='sound' mb={3}>
+    <option>Beep</option>
+    <option>Boop</option>
+    <option>Blip</option>
+  </Select>
+  <Label htmlFor='comment'>Comment</Label>
+  <Textarea
+    name='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 } = useThemeUI();
+  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 } = useThemeUI();
+  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"
+  }}>
+  <Text>
+    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.
+  </Text>
+</Card>
+
+---

packages/docs/src/components/preset.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
-import { jsx, Styled, components } from 'theme-ui'
-import { ThemeContext } from '@emotion/core'
-import { MDXProvider } from '@mdx-js/react'
+import { Helmet } from 'react-helmet'
+import { jsx, Styled } from 'theme-ui'
+import { ThemeProvider } from '@theme-ui/core'
 import * as presets from '@theme-ui/presets'
 import {
   TypeScale,
@@ -10,14 +10,20 @@ 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>
-      <ThemeContext.Provider value={preset}>
+      <Helmet>
+        <link
+          rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Montserrat:400,700|Poppins:400,700,900|Roboto:400,600|Architects+Daughter"
+        />
+      </Helmet>
+      <ThemeProvider theme={preset}>
         <Styled.root>
           <Styled.h2>Colors</Styled.h2>
           <ColorPalette omit={['modes', 'header']} />
@@ -34,25 +40,23 @@ export default ({ preset: presetName }) => {
           </HeadingStyle>
           <Styled.h2>Type Scale</Styled.h2>
           <TypeScale />
-          <MDXProvider components={components}>
-            <Lorem />
-          </MDXProvider>
+          <Components />
           <Styled.h2 id="json">Raw JSON</Styled.h2>
-          <textarea
-            value={JSON.stringify(preset, null, 2)}
-            rows={16}
-            readOnly
-            aria-labelledby="json"
-            sx={{
-              width: '100%',
-              fontFamily: 'monospace',
-              bg: 'muted',
-              border: 0,
-              borderRadius: 4,
-            }}
-          />
         </Styled.root>
-      </ThemeContext.Provider>
+      </ThemeProvider>
+      <textarea
+        value={JSON.stringify(preset, null, 2)}
+        rows={16}
+        readOnly
+        aria-labelledby="json"
+        sx={{
+          width: '100%',
+          fontFamily: 'monospace',
+          bg: 'muted',
+          border: 0,
+          borderRadius: 4,
+        }}
+      />
     </div>
   )
 }

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

@@ -1,7 +1,6 @@
 /** @jsx jsx */
-import { jsx, Styled, components } from 'theme-ui'
+import { jsx, Styled } from 'theme-ui'
 import { ThemeContext } from '@emotion/core'
-import { MDXProvider } from '@mdx-js/react'
 import { useState } from 'react'
 import { Helmet } from 'react-helmet'
 import * as presets from '@theme-ui/presets'
@@ -13,7 +12,7 @@ import {
   FontFamily,
 } from '@theme-ui/style-guide'
 import Select from './select'
-import Lorem from './lorem.mdx'
+import Components from './components.mdx'
 
 export default () => {
   const [theme, setTheme] = useState('base')
@@ -68,9 +67,7 @@ export default () => {
             </HeadingStyle>
             <Styled.h2>Type Scale</Styled.h2>
             <TypeScale />
-            <MDXProvider components={components}>
-              <Lorem />
-            </MDXProvider>
+            <Components />
             <Styled.h2 id="json">Raw JSON</Styled.h2>
             <textarea
               value={JSON.stringify(preset, null, 2)}