Merge pull request #2 from jakewies/develop

Added Docs!
jakewies · Apr 25, 2018 · 74fcc73 · 74fcc73
2 parents f9545e1 + ad344af
commit 74fcc73
Show file tree

Hide file tree

Showing 37 changed files with 3,909 additions and 276 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -6,6 +6,7 @@ module.exports = {
     jest: true
   },
   extends: ['eslint:recommended', 'plugin:react/recommended'],
+  parser: 'babel-eslint',
   parserOptions: {
     ecmaFeatures: {
       experimentalObjectRestSpread: true,

diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+docs/out
+docs/.next
diff --git a/.npmignore b/.npmignore
@@ -1,4 +1,5 @@
 __tests__
+docs
 src
 
 flexomatic.png

diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="flexomatic.png" alt="Flexomatic" title="Flexomatic" width="435" height="167.5" />
+  <img src="docs/static/flexomatic.png" alt="Flexomatic" title="Flexomatic" width="435" height="167.5" />
 </p>
 
 A component-based flexbox grid system for React, built with `styled-components` and based on the [Solved by Flexbox](https://philipwalton.github.io/solved-by-flexbox/demos/grids/) implementation.
@@ -70,6 +70,10 @@ Aligns `Cell` children using the `align-items` style. Available options:
 * `end`
 * `baseline`
 
+`spacing`
+
+A string value representing the default space between `Cell` components, or the "gutters" (default: "1em").
+
 ### Cell
 
 The individual columns of a grid.
@@ -99,7 +103,7 @@ Explicitly sets the width of a `Cell` as a percentage value using a number great
   <Cell width={0.25} /> // width: 25%
 ```
 
-You can also use keywords  `full`, `half`, `third`, and `fourth`to set the width.
+You can also use keywords `full`, `half`, `third`, and `fourth`to set the width.
 
 ```javascript
   // as keyword
@@ -150,7 +154,7 @@ The examples above will result in the styling:
 }
 ```
 
- Note that it's not necessary to pass exactly 3 values to the width array, but more than 3 will result in an error.
+Note that it's not necessary to pass exactly 3 values to the width array, but more than 3 will result in an error.
 
 ## Contributing
 

diff --git a/__tests__/components/__snapshots__/Cell.js.snap b/__tests__/components/__snapshots__/Cell.js.snap
@@ -3,7 +3,6 @@
 exports[`Cell renders 1`] = `
 .c0 {
   box-sizing: border-box;
-  padding: 1em 0 0 1em;
   display: block;
   width: auto;
   -webkit-flex: 1;
@@ -21,7 +20,6 @@ exports[`Cell renders 1`] = `
 exports[`Cell renders with multiple widths 1`] = `
 .c0 {
   box-sizing: border-box;
-  padding: 1em 0 0 1em;
   display: block;
   width: 100%;
   -webkit-flex: none;
@@ -58,7 +56,6 @@ exports[`Cell renders with multiple widths 1`] = `
 exports[`Cell renders with proper width 1`] = `
 .c0 {
   box-sizing: border-box;
-  padding: 1em 0 0 1em;
   display: block;
   width: 50%;
   -webkit-flex: none;

diff --git a/docs/.babelrc b/docs/.babelrc
@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [["styled-components", { "ssr": true, "displayName": true, "preprocess": false }]]
+}
diff --git a/docs/next.config.js b/docs/next.config.js
@@ -0,0 +1,8 @@
+module.exports = {
+  exportPathMap: function() {
+    return {
+      '/': { page: '/' },
+      '/docs': { page: '/docs' }
+    }
+  }
+}
diff --git a/docs/pages/_document.js b/docs/pages/_document.js
@@ -0,0 +1,29 @@
+import React from 'react'
+import Document, { Head, Main, NextScript } from 'next/document'
+import { ServerStyleSheet } from 'styled-components'
+
+export default class MyDocument extends Document {
+  static getInitialProps({ renderPage }) {
+    const sheet = new ServerStyleSheet()
+    const page = renderPage(App => props => sheet.collectStyles(<App {...props} />))
+    const styleTags = sheet.getStyleElement()
+    return { ...page, styleTags }
+  }
+
+  render() {
+    return (
+      <html>
+        <Head>
+          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+          <title>flexomatic</title>
+          <link href="/static/styles/styles.css" rel="stylesheet" />
+          {this.props.styleTags}
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </html>
+    )
+  }
+}
diff --git a/docs/pages/docs.js b/docs/pages/docs.js
@@ -0,0 +1,19 @@
+import React from 'react'
+import Head from 'next/head'
+import { Page, Example } from '../src/components'
+import examples from '../src/examples'
+
+const navRoutes = ['Home']
+
+const Docs = () => (
+  <div>
+    <Head>
+      <link href="/static/styles/docs.css" rel="stylesheet" />
+    </Head>
+    <Page childrenMaxWidth="1400px" routes={navRoutes}>
+      <div>{examples.map((example, i) => <Example key={i} example={example} />)}</div>
+    </Page>
+  </div>
+)
+
+export default Docs
diff --git a/docs/pages/index.js b/docs/pages/index.js
@@ -0,0 +1,67 @@
+import React from 'react'
+import Link from 'next/link'
+import {
+  Page,
+  Section,
+  UnorderedList,
+  ListItem,
+  TextBlock,
+  Code,
+  FancyLink
+} from '../src/components'
+
+const navRoutes = ['Docs']
+
+const Home = () => (
+  <Page routes={navRoutes} childrenMaxWidth="1400px">
+    <Section title="Motivation">
+      <TextBlock>
+        <Code>flexomatic</Code> aims to be a very simple, lightweight grid system with a flexible
+        API that allows you to get up and running in seconds. It is based on the methodology
+        proposed in{' '}
+        <FancyLink href="https://philipwalton.github.io/solved-by-flexbox/demos/grids/">
+          Solved by Flexbox
+        </FancyLink>, where the goal is to expose a minimal grid system that doesn&#39;t weigh the
+        user down with a multitude of options.
+      </TextBlock>
+    </Section>
+    <Section title="Features">
+      <UnorderedList pl="36px">
+        <ListItem>
+          Each <Code>Cell</Code> component is the same width by default
+        </ListItem>
+        <ListItem>
+          Full control over individual <Code>Cell</Code> components, including width and alignment
+        </ListItem>
+        <ListItem>Responsive, with media query support</ListItem>
+        <ListItem>Nested Grids</ListItem>
+      </UnorderedList>
+    </Section>
+    <Section title="Getting Started">
+      <UnorderedList pl="36px" mb="1rem">
+        <ListItem>
+          Make sure <Code>styled-components</Code> is installed in your project
+        </ListItem>
+        <ListItem>
+          <Code>yarn add flexomatic</Code>
+        </ListItem>
+        <ListItem>
+          See the{' '}
+          <Link href="/docs">
+            <a style={fancyNextLinkStyles}>docs</a>
+          </Link>{' '}
+          for examples and usage! 🚀
+        </ListItem>
+      </UnorderedList>
+    </Section>
+  </Page>
+)
+
+const fancyNextLinkStyles = {
+  borderBottom: '2px solid #000',
+  color: '#000',
+  textDecoration: 'none',
+  paddingBottom: '2px'
+}
+
+export default Home
diff --git a/docs/src/components/Example.js b/docs/src/components/Example.js
@@ -0,0 +1,82 @@
+import React from 'react'
+import { object } from 'prop-types'
+import styled from 'styled-components'
+import ReactMarkdown from 'react-markdown'
+import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'
+import slugify from '@sindresorhus/slugify'
+import { SectionHeader, FancyLine } from './Section'
+import { Header2 } from './Typography'
+import { Grid, Cell, Demo } from '../../../src'
+
+const scope = { Grid, Cell, Demo }
+
+const Example = ({ example }) => {
+  const slug = slugify(example.title)
+  return (
+    <ExampleContainer>
+      <SectionHeader>
+        <Header2 id={slug}>{example.title}</Header2>
+        <FancyLine />
+      </SectionHeader>
+      <ExampleContent>
+        <ReactMarkdown source={example.md} className="example__md" escapeHtml={false} />
+        <LiveProvider code={example.code} scope={scope}>
+          <LiveContainer>
+            <LiveEditor />
+            <LivePreview />
+          </LiveContainer>
+          <StyledError />
+        </LiveProvider>
+      </ExampleContent>
+    </ExampleContainer>
+  )
+}
+
+Example.propTypes = {
+  example: object.isRequired
+}
+
+const ExampleContainer = styled.div`
+  margin-bottom: 8rem;
+`
+
+const ExampleContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 50px;
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+    justify-content: space-between;
+    margin-bottom: 25px;
+  }
+`
+
+const LiveContainer = styled.div`
+  display: flex;
+  flex-direction: column-reverse;
+
+  pre {
+    overflow: auto;
+  }
+
+  .react-live-preview {
+    border: 1px solid #eee;
+    padding: 1em;
+    min-height: 150px;
+  }
+`
+
+const StyledError = styled(LiveError)`
+  background: crimson;
+  color: #fff;
+  font-size: 12px;
+  padding: 5px;
+  font-family: Menlo, monospace;
+
+  @media (min-width: 900px) {
+    width: 50%;
+  }
+`
+
+export default Example
diff --git a/docs/src/components/FancyLink.js b/docs/src/components/FancyLink.js
@@ -0,0 +1,10 @@
+import styled from 'styled-components'
+
+const FancyLink = styled.a`
+  border-bottom: 2px solid #000;
+  color: #000;
+  text-decoration: none;
+  padding-bottom: 2px;
+`
+
+export default FancyLink
diff --git a/docs/src/components/GridDemo.js b/docs/src/components/GridDemo.js
@@ -0,0 +1,40 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Grid, Cell, Demo } from '../../../src'
+
+const StyledGrid = styled(Grid)`
+  width: 100%;
+  max-width: 125px;
+  margin: 0 auto;
+`
+
+const GridDemo = () => (
+  <StyledGrid spacing="8px">
+    <Cell width={0.6}>
+      <Demo />
+    </Cell>
+    <Cell width={0.4}>
+      <Demo />
+    </Cell>
+    <Cell width={0.33}>
+      <Demo />
+    </Cell>
+    <Cell width={0.33}>
+      <Demo />
+    </Cell>
+    <Cell width={0.33}>
+      <Demo />
+    </Cell>
+    <Cell width={1}>
+      <Demo />
+    </Cell>
+    <Cell width={0.25}>
+      <Demo />
+    </Cell>
+    <Cell width={0.75}>
+      <Demo />
+    </Cell>
+  </StyledGrid>
+)
+
+export default GridDemo