WIP design system

.babelrc

@@ -1,3 +1,6 @@
 {
-	"plugins": ["transform-class-properties", "transform-react-jsx-source"]
+	"plugins": [
+		"@babel/plugin-transform-react-jsx-source",
+		["babel-plugin-styled-components", {fileName: false}]
+	]
 }

.meteor/packages

@@ -28,3 +28,4 @@ underscore@1.0.10
 pauldowman:dotenv
 quarterto:hooks
 http
+apollinaire:mdx

.meteor/versions

@@ -1,6 +1,7 @@
 accounts-base@1.4.4
 accounts-password@1.5.1
 allow-deny@1.1.0
+apollinaire:mdx@0.0.5
 autoupdate@1.6.0
 babel-compiler@7.3.4
 babel-runtime@1.3.0

imports/docs/colours.js

@@ -0,0 +1,44 @@
+import React from 'react'
+import styled from 'styled-components'
+import colours from '@apaleslimghost/colours'
+import { H2 } from '../ui/visual/heading'
+import { List } from '../ui/visual/primitives'
+import { readableColor } from 'polished'
+
+export const title = 'Colours'
+export const category = 'Basics'
+
+const Swatch = styled.div`
+	background: ${({ colour }) => colour};
+	color: ${({ colour }) => readableColor(colour)};
+	padding: 0.5em;
+	width: 5em;
+	height: 5em;
+`
+
+function getKeysWithValue(object, value, ignore) {
+	return Object.keys(object).filter(
+		key => key != ignore && object[key] === value,
+	)
+}
+
+export default () => (
+	<>
+		{Object.keys(colours).map(colour => (
+			<div key={colour}>
+				<H2>{colour}</H2>
+				<List>
+					{colours[colour].map((hex, index) => (
+						<Swatch key={hex} colour={hex}>
+							{index}
+							<br />
+							<small>
+								{getKeysWithValue(colours[colour], hex, index).join(', ')}
+							</small>
+						</Swatch>
+					))}
+				</List>
+			</div>
+		))}
+	</>
+)

imports/docs/form.mdx

@@ -0,0 +1,18 @@
+import { Input, Textarea } from '../ui/visual/form'
+import Story from './story'
+export const title = 'Form'
+export const category = 'Basics'
+
+## Input
+
+<Story>{() =>
+	<Input />
+}</Story>
+
+## Textarea
+
+hmm
+
+<Story>{() =>
+	<Textarea />
+}</Story>

imports/docs/gravatar.mdx

@@ -0,0 +1,13 @@
+import Gravatar from '../ui/visual/gravatar'
+import Story from './story'
+
+export const title = 'Gravatar'
+export const category = 'Accounts'
+
+<Story>{() =>
+	<Gravatar />
+}</Story>
+
+<Story>{() =>
+	<Gravatar email='kara@153.io' />
+}</Story>

imports/docs/heading.mdx

@@ -0,0 +1,29 @@
+import { H1, H2, H3, H4, H5, H6 } from '../ui/visual/heading'
+import Story from './story'
+
+export const title = 'Headings'
+export const category = 'Basics'
+
+<Story>{() =>
+	<H1>Heading 1</H1>
+}</Story>
+
+<Story>{() =>
+	<H2>Heading 2</H2>
+}</Story>
+
+<Story>{() =>
+	<H3>Heading 3</H3>
+}</Story>
+
+<Story>{() =>
+	<H4>Heading 4</H4>
+}</Story>
+
+<Story>{() =>
+	<H5>Heading 5</H5>
+}</Story>
+
+<Story>{() =>
+	<H6>Heading 6</H6>
+}</Story>

imports/docs/index.js

@@ -0,0 +1,92 @@
+import React from 'react'
+import { Link } from 'use-history'
+import Title from '../ui/utils/title'
+import Logo from '../ui/visual/logo'
+import { H1, H3 } from '../ui/visual/heading'
+import { FullGrid, Main, Aside } from '../ui/visual/grid'
+import { markdownComponents } from '../ui/document/markdown'
+import { MDXProvider } from '@mdx-js/react'
+import { groupBy } from 'lodash'
+import Icon from '../ui/visual/icon'
+
+import * as index from './index.mdx'
+import * as form from './form.mdx'
+import * as logo from './logo.mdx'
+import * as colours from './colours'
+import * as gravatar from './gravatar'
+import * as heading from './heading'
+import * as ribbon from './ribbon'
+import * as shortcut from './shortcut'
+
+const pages = {
+	index,
+	form,
+	logo,
+	colours,
+	gravatar,
+	heading,
+	ribbon,
+	shortcut,
+}
+
+for (const page in pages) {
+	pages[page].id = page
+}
+
+const categories = groupBy(pages, 'category')
+
+export default ({ page }) => {
+	if (!pages.hasOwnProperty(page)) {
+		throw new Error(`Docs page ${page} not found`)
+	}
+
+	const { default: Page, title, subject } = pages[page]
+	const categories = groupBy(pages, 'category')
+
+	return (
+		<FullGrid>
+			<Title titleTemplate='%s ❈ Almanac Docs'>{title}</Title>
+
+			<Aside left>
+				<Link href='/'>
+					<Logo />
+				</Link>
+				<nav>
+					{Object.keys(categories).map(category => (
+						<>
+							<H3>{category}</H3>
+							<ul>
+								{categories[category].map(page => (
+									<li key={page.id}>
+										<Link
+											href={`/__docs/${page.id === 'index' ? '' : page.id}`}
+										>
+											{page.title}
+										</Link>
+									</li>
+								))}
+							</ul>
+						</>
+					))}
+				</nav>
+			</Aside>
+
+			<Main right>
+				<H1>{title}</H1>
+				{subject && (
+					<a
+						href={`https://github.com/apaleslimghost/almanac/blob/master/${subject}`}
+						target='_blank'
+						rel='noopener'
+					>
+						<Icon icon='external-link' /> {subject}
+					</a>
+				)}
+
+				<MDXProvider components={markdownComponents}>
+					<Page />
+				</MDXProvider>
+			</Main>
+		</FullGrid>
+	)
+}

imports/docs/index.mdx

@@ -0,0 +1,5 @@
+export const title = 'Home'
+export const category = 'Documentation'
+
+Hi so this is the developer documentation for Almanac. If you're a developer then great if not I guess this is a probably boring easter egg.
+

imports/docs/logo.mdx

@@ -0,0 +1,13 @@
+import Logo from '../ui/visual/logo'
+import Story from './story'
+export const title = 'Logo'
+export const category = 'Basics'
+
+A logo can be small:
+
+<Story>{() => <Logo />}</Story>
+
+A logo can be large:
+
+<Story>{() => <Logo large />}</Story>
+

imports/docs/ribbon.mdx

@@ -0,0 +1,13 @@
+import Ribbon from '../ui/visual/ribbon'
+import Story from './story'
+
+export const title = 'Ribbon'
+export const category = 'Basics'
+
+↖︎ it's over there at the top left
+
+<Story>{() =>
+	<Ribbon href='/__docs/ribbon'>Ribbon</Ribbon>
+}</Story>
+
+it's used on the home page to display the "Beta" banner. it's a link with an `href` attribute

imports/docs/shortcut.mdx

@@ -0,0 +1,12 @@
+import Shortcut from '../ui/visual/shortcut'
+import Story from './story'
+
+export const title = 'Shortcut'
+export const category = 'Basics'
+export const subject = 'imports/ui/visual/shortcut.js'
+
+used to display a visual hint for a keyboard shortcut, like the ones to quick-create a card from the search box
+<Story>{() =>
+	<Shortcut>⌘↩︎</Shortcut>
+}</Story>
+

imports/docs/story.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import reactElementToJSXString from 'react-element-to-jsx-string'
+
+export default function Story({ children }) {
+	const child = children()
+
+	return (
+		<>
+			{child}
+
+			<pre>{reactElementToJSXString(child)}</pre>
+		</>
+	)
+}

imports/ui/app.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { Component, Suspense } from 'react'
 import useRoutes from 'boulevard-react'
 import { Error } from './utils/error'
 import GlobalStyles from './visual/global'
@@ -19,6 +19,8 @@ import Enrol from './pages/enrol'
 import Card from './pages/card'
 import EditCard from './pages/edit-card'
 
+const Docs = React.lazy(() => import('../docs'))
+
 const routes = {
 	'/:campaignId/dashboard'({ campaignId }) {
 		return (
@@ -146,6 +148,22 @@ const routes = {
 		)
 	},
 
+	'/__docs/:page'({ page }) {
+		return (
+			<Suspense fallback={null}>
+				<Docs page={page} />
+			</Suspense>
+		)
+	},
+
+	'/__docs'() {
+		return (
+			<Suspense fallback={null}>
+				<Docs page='index' />
+			</Suspense>
+		)
+	},
+
 	'/'() {
 		return (
 			<Layout>

imports/ui/control/form.js

@@ -20,8 +20,8 @@ export const getInputValue = el =>
 
 export const getSelectValue = el => el.options[el.selectedIndex].value
 
-const Fields = createContext({})
-const SetFields = createContext(() => {})
+const Fields = createContext(null)
+const SetFields = createContext(null)
 
 export const useFormFields = () => useContext(Fields)
 export const useFormSet = () => useContext(SetFields)
@@ -68,6 +68,10 @@ export const Input = ({
 	)
 }
 
+export const Textarea = props => {
+	return <Input tag='textarea' {...props} />
+}
+
 export const Select = ({ tag: Tag = 'select', ...props }) => {
 	const fields = useFormFields()
 	const setFields = useFormSet()

imports/ui/control/image-select.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import qs from 'querystring'
 import { useSubscription, useCursor } from '../utils/hooks'
 import styled, { css } from 'styled-components'
-import colours from '@quarterto/colours'
+import colours from '@apaleslimghost/colours'
 
 import { UnsplashPhotos } from '../../lib/collections'
 import { FlexGrid } from '../visual/grid'