primer · shawnbot · Aug 22, 2018 · Aug 17, 2018 · Aug 17, 2018 · Aug 17, 2018
diff --git a/.babelrc b/.babelrc
@@ -5,6 +5,7 @@
   ],
   "plugins": [
     "add-react-displayname",
-    "transform-object-rest-spread"
+    "transform-object-rest-spread",
+    "preval"
   ]
 }
diff --git a/.gitignore b/.gitignore
@@ -2,5 +2,6 @@
 .DS_Store
 coverage/
 dist/
+docs/TEMP/
 node_modules
 npm-debug.log
diff --git a/.travis.yml b/.travis.yml
@@ -6,7 +6,7 @@ node_js:
 script:
   - npm run lint
   - npm test
-  - npm run build
+  - npm run dist
   - npm run build:docs
 
 notifications:

diff --git a/docs/404.html b/docs/404.html
@@ -1,18 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
   <meta charset="utf-8" />
-
   <title>primer-react</title>
-
   <script>
     sessionStorage.redirect = location.href;
   </script>
-
-  <meta http-equiv="refresh" content="0;URL='/primer-react'"></meta>
+  <meta http-equiv="refresh" content="0;URL=/"></meta>
 </head>
-
 <body>
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

diff --git a/docs/assets/favicon.png b/docs/assets/favicon.png
diff --git a/docs/bundle.js b/docs/bundle.js
diff --git a/docs/components/index.html b/docs/components/index.html
diff --git a/docs/demos/index.html b/docs/demos/index.html
diff --git a/docs/index.html b/docs/index.html
diff --git a/docs/sandbox/index.html b/docs/sandbox/index.html
diff --git a/examples/_app.js b/examples/_app.js
@@ -1,42 +1,39 @@
 import React from 'react'
-import {ThemeProvider} from 'emotion-theming'
 import PropTypes from 'prop-types'
+import {Package} from '@githubprimer/octicons-react'
 import {NavLink} from 'react-router-dom'
-import Styles from './doc-components/Styles'
-import Octicon, {Package} from '@githubprimer/octicons-react'
-import {Box, Link, Text, UnderlineNav, UnderlineNavLink, theme} from '../src'
+import {Styles} from './doc-components'
+import Octicon from '../src/Octicon'
+import {Box, Link, Sticky, Text, UnderlineNav, UnderlineNavLink} from '../src'
 import {name, repository, version} from '../package.json'
 
 const pkg = `${name}@${version}`
 const releaseURL = `https://github.com/${repository}/releases/v${version}`
 
+function TopNavLink(props) {
+  return <UnderlineNavLink is={NavLink} px={3} {...props} />
+}
+
 export default function Page({render}) {
   return (
     <React.Fragment>
       <Styles />
-      <ThemeProvider theme={theme}>
-        <Box color="bodytext">
-          <UnderlineNav
-            actions={
-              <Text color="gray.5" fontFamily="mono" px={4}>
-                <Octicon icon={Package} className="mr-2" />
-                <Link href={releaseURL}>{pkg}</Link>
-              </Text>
-            }
-          >
-            <UnderlineNavLink is={NavLink} to="/components" px={3}>
-              Components
-            </UnderlineNavLink>
-            <UnderlineNavLink is={NavLink} to="/demos" px={3}>
-              Demos
-            </UnderlineNavLink>
-            <UnderlineNavLink is={NavLink} to="/sandbox" px={3}>
-              Sandbox
-            </UnderlineNavLink>
-          </UnderlineNav>
-          <Box p={3}>{render()}</Box>
-        </Box>
-      </ThemeProvider>
+      <Sticky bg="white" zIndex={100}>
+        <UnderlineNav
+          pl={3}
+          actions={
+            <Text color="gray.5" fontFamily="mono" px={4}>
+              <Octicon icon={Package} mr={2} />
+              <Link href={releaseURL}>{pkg}</Link>
+            </Text>
+          }
+        >
+          <TopNavLink to="/components/">Components</TopNavLink>
+          <TopNavLink to="/demos/">Demos</TopNavLink>
+          <TopNavLink to="/sandbox/">Sandbox</TopNavLink>
+        </UnderlineNav>
+      </Sticky>
+      <Box p={3}>{render()}</Box>
     </React.Fragment>
   )
 }

diff --git a/examples/_html.js b/examples/_html.js
@@ -0,0 +1,29 @@
+const css = require('../src/css')
+
+module.exports = ({html = '', scripts, title = 'primer-react', static: staticBuild}) =>
+  `<!DOCTYPE html>
+  <html>
+  <head>
+    <title>${title}</title>
+    <meta name='viewport' content='width=device-width,initial-scale=1' />
+    <meta name='generator' content='Compositor X0' />
+    <meta name='og:title' content='Primer React' />
+    <meta name='description' content='Primer components built with React.js.' />
+    <link rel='icon' href='/assets/favicon.png' />
+    <style id="primer-css">${css}</style>
+  </head>
+  <body>
+  <script>
+    (function() {
+      var redirect = sessionStorage.redirect
+      delete sessionStorage.redirect
+      if (redirect && redirect !== location.href) {
+        history.replaceState(null, null, redirect)
+      }
+    })()
+  </script>
+    <div id="root">${html}</div>
+  </body>
+  </html>
+  ${staticBuild ? '' : scripts}
+  `
diff --git a/examples/component-examples/Avatar.js b/examples/component-examples/Avatar.js
@@ -2,7 +2,7 @@ import React from 'react'
 import {LiveEditor} from '@compositor/kit'
 import {Box, Avatar} from '../../src'
 
-const AvatarExample = {
+export default {
   name: 'Avatar',
   element: (
     <div>
@@ -33,5 +33,3 @@ const AvatarExample = {
     </div>
   )
 }
-
-export default AvatarExample
diff --git a/examples/component-examples/BorderBox.js b/examples/component-examples/BorderBox.js
@@ -2,7 +2,7 @@ import React from 'react'
 import {LiveEditor} from '@compositor/kit'
 import {BorderBox, Box} from '../../src'
 
-const BorderBoxExample = {
+export default {
   name: 'BorderBox',
   element: (
     <div>
@@ -45,5 +45,3 @@ const BorderBoxExample = {
     </div>
   )
 }
-
-export default BorderBoxExample
diff --git a/examples/component-examples/Box.js b/examples/component-examples/Box.js
@@ -19,7 +19,7 @@ const colors = [...Object.entries(theme.colors)].reduce((keys, [key, value]) =>
 
 const textColors = ['white', 'gray.5', 'black']
 
-const BoxExample = {
+export default {
   name: 'Box',
   element: (
     <div>
@@ -64,5 +64,3 @@ const BoxExample = {
     </div>
   )
 }
-
-export default BoxExample
diff --git a/examples/component-examples/BranchName.js b/examples/component-examples/BranchName.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import Octicon, {GitBranch} from '@githubprimer/octicons-react'
 import {Detail, LiveEditor} from '@compositor/kit'
-import ExampleHeading from '../doc-components/ExampleHeading'
+import {ExampleHeading} from '../doc-components'
 import {BranchName} from '../../src'
 
 const linkedBranch = `<BranchName is="a" href="/">
@@ -13,7 +13,7 @@ const branchOcticon = `<BranchName>
   a_new_feature_branch
 </BranchName>`
 
-const BranchNameExample = {
+export default {
   name: 'BranchName',
   element: (
     <div>
@@ -27,5 +27,3 @@ const BranchNameExample = {
     </div>
   )
 }
-
-export default BranchNameExample
diff --git a/examples/component-examples/Buttons.js b/examples/component-examples/Buttons.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import {Hubot, Pencil, X} from '@githubprimer/octicons-react'
 import {LiveEditor} from '@compositor/kit'
-import ExampleHeading from '../doc-components/ExampleHeading'
+import {ExampleHeading} from '../doc-components'
 import {Box, Button, ButtonLink, ButtonDanger, ButtonPrimary, ButtonOutline, OcticonButton, Text} from '../../src'
 
-const ButtonExample = {
+export default {
   name: 'Buttons',
   element: (
     <div>
@@ -58,5 +58,3 @@ const ButtonExample = {
     </div>
   )
 }
-
-export default ButtonExample
diff --git a/examples/component-examples/CircleBadge.js b/examples/component-examples/CircleBadge.js
@@ -13,7 +13,7 @@ const sizes = `<CircleBadge bg="blue.5" size="small"><img src="https://avatars0.
 <CircleBadge bg="blue.5" size="medium"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>
 <CircleBadge bg="blue.5" size="large"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>`
 
-const CircleBadgeExample = {
+export default {
   name: 'CircleBadge',
   element: (
     <div>
@@ -36,5 +36,3 @@ const CircleBadgeExample = {
     </div>
   )
 }
-
-export default CircleBadgeExample
diff --git a/examples/component-examples/CircleOcticon.js b/examples/component-examples/CircleOcticon.js
@@ -1,18 +1,20 @@
 import React from 'react'
-import {Check} from '@githubprimer/octicons-react'
+import {Check, X, Zap} from '@githubprimer/octicons-react'
 import {LiveEditor} from '@compositor/kit'
-import {CircleOcticon} from '../../src'
+import {CircleOcticon, FlexContainer} from '../../src'
 
-const CircleOcticonExample = {
+export default {
   name: 'CircleOcticon',
   element: (
-    <div className="d-flex">
-      <LiveEditor
-        code={`<CircleOcticon icon={Check} size={32} bg="green.5" color="white" />`}
-        scope={{CircleOcticon, Check}}
-      />
-    </div>
+    <LiveEditor
+      code={`
+<FlexContainer>
+  <CircleOcticon icon={Check} size={32} bg="green.5" color="white" mr={2} />
+  <CircleOcticon icon={Zap} size={48} bg="blue.5" color="white" mr={2} />
+  <CircleOcticon icon={X} size={64} bg="red.5" color="white" mr={2} />
+</FlexContainer>
+        `.trim()}
+      scope={{CircleOcticon, Check, FlexContainer, X, Zap}}
+    />
   )
 }
-
-export default CircleOcticonExample
diff --git a/examples/component-examples/CounterLabel.js b/examples/component-examples/CounterLabel.js
@@ -2,7 +2,7 @@ import React from 'react'
 import {LiveEditor} from '@compositor/kit'
 import {CounterLabel} from '../../src'
 
-const CounterLabelExample = {
+export default {
   name: 'CounterLabel',
   element: (
     <div>
@@ -12,5 +12,3 @@ const CounterLabelExample = {
     </div>
   )
 }
-
-export default CounterLabelExample
diff --git a/examples/component-examples/Details.js b/examples/component-examples/Details.js
@@ -2,7 +2,7 @@
 import React from 'react'
 import {LiveEditor} from '@compositor/kit'
 import {Box, Details} from '../../src'
-import ExampleHeading from '../doc-components/ExampleHeading'
+import {ExampleHeading} from '../doc-components'
 
 const example1 = `<Details>
   <summary className="btn">Click me</summary>
@@ -22,7 +22,7 @@ const example2 = `<Details>
 </Details>
 `
 
-const DetailsExample = {
+export default {
   name: 'Details',
   element: (
     <div>
@@ -41,5 +41,3 @@ const DetailsExample = {
     </div>
   )
 }
-
-export default DetailsExample
diff --git a/examples/component-examples/DonutChart.js b/examples/component-examples/DonutChart.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import {LiveEditor} from '@compositor/kit'
 import {Box, DonutChart, Text, DonutSlice, theme} from '../../src'
-import ExampleHeading from '../doc-components/ExampleHeading'
+import {ExampleHeading} from '../doc-components'
 
 const dataPropExample = `<DonutChart mr={1} data={{error: 2, pending: 3, success: 5}} />
 <DonutChart mr={1} data={{error: 1, pending: 4, success: 2}} />
@@ -49,7 +49,7 @@ const customColorsExample = `<DonutChart>
   <DonutSlice value={1} fill={theme.colors.purple[4]} />
 </DonutChart>`
 
-const DonutChartExample = {
+export default {
   name: 'DonutChart',
   element: (
     <div>
@@ -74,5 +74,3 @@ const DonutChartExample = {
     </div>
   )
 }
-
-export default DonutChartExample
diff --git a/examples/component-examples/Dropdown.js b/examples/component-examples/Dropdown.js
@@ -1,35 +1,35 @@
 import React from 'react'
 import {LiveEditor} from '@compositor/kit'
 import {Box, Dropdown, Link} from '../../src'
-import ExampleHeading from '../doc-components/ExampleHeading'
+import {ExampleHeading} from '../doc-components'
 
 const dropdownPrimary = `<Dropdown scheme="primary" minWidth="5em">
-  <ul className="list-style-none m-0 p-0">
+  <Box is="ul" m={0} p={0} className="list-style-none">
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
-  </ul>
+  </Box>
 </Dropdown>`
 
 const dropdown = `<Dropdown minWidth="5em">
-  <ul className="list-style-none m-0 p-0">
+  <Box is="ul" m={0} p={0} className="list-style-none">
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
-  </ul>
+  </Box>
 </Dropdown>`
 
 const dropdownTitle = `<Dropdown title="Options" minWidth="5em">
-  <ul className="list-style-none m-0 p-0">
+  <Box is="ul" m={0} p={0} className="list-style-none">
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
-  </ul>
+  </Box>
 </Dropdown>`
 
 const scope = {Box, Dropdown, Link}
 
-const DropdownExample = {
+export default {
   name: 'Dropdown',
   element: (
     <div>
@@ -48,5 +48,3 @@ const DropdownExample = {
     </div>
   )
 }
-
-export default DropdownExample