wip: wip

README.md

@@ -11,4 +11,4 @@ A library for editing data structures that works really well with React.
 
 ## Packages
 
-If you're using React, get [`react-dataparcels`](https://www.npmjs.com/package/react-dataparcels) and you'll also get components and hocs to easily use dataparcels in a React app. If not, go for [`dataparcels`](https://www.npmjs.com/package/dataparcels).
+If you're using React, get [`react-dataparcels`](https://www.npmjs.com/package/react-dataparcels) and you'll also get hooks and components to easily use dataparcels in a React app. If not, go for [`dataparcels`](https://www.npmjs.com/package/dataparcels).

packages/dataparcels-docs/.eslintignore

@@ -0,0 +1,2 @@
+**/*-test.js
+**/node_modules

packages/dataparcels-docs/.eslintrc

@@ -0,0 +1,15 @@
+{
+    "extends": [
+        "eslint-config-blueflag",
+        "eslint-config-blueflag/flow",
+        "eslint-config-blueflag/react"
+    ],
+    "rules": {
+        "newline-per-chained-call": "off"
+    },
+    "settings": {
+        "react": {
+            "version": "detect"
+        }
+    }
+}

packages/dataparcels-docs/gatsby-config.js

@@ -1,13 +1,9 @@
-//@flow
+// @flow
+const {gatsbyConfig} = require('dcme-gatsby/lib/gatsby/gatsby-config');
+
 module.exports = {
-    pathPrefix: '/dataparcels',
     siteMetadata: {
         title: 'Dataparcels'
     },
-    plugins: [
-        'gatsby-plugin-sass',
-        'gatsby-plugin-react-helmet',
-        'gatsby-plugin-offline',
-        'gatsby-plugin-resolve-src'
-    ]
+    ...gatsbyConfig
 };

packages/dataparcels-docs/gatsby-node.js

@@ -1,35 +1,7 @@
 /* eslint-disable */
 
-const path = require('path');
-
-exports.onCreateWebpackConfig = ({
- stage, getConfig, rules, loaders, actions
-}) => {
-  console.log("...onCreateWebpackConfig");
-  actions.setWebpackConfig({
-    module: {
-      rules: [
-        {
-          test: /\.md$/,
-          use: [
-            //loaders.js(),
-            //'babel-loader'
-            'mdx-loader'
-          ]
-        }
-      ]
-    }
-    // resolve: {
-    //   alias: {
-    //     'dataparcels': path.resolve(__dirname, "../dataparcels/"),
-    //     'react-dataparcels': path.resolve(__dirname, "../react-dataparcels/")
-    //     'react-dataparcels-drag': path.resolve(__dirname, "../react-dataparcels-drag/")
-    //   }
-    // }
-  });
-}
-
-console.log("...gatsby-node.js is valid");
+const {onCreateWebpackConfig} = require('dcme-gatsby/lib/gatsby/gatsby-node');
+exports.onCreateWebpackConfig = onCreateWebpackConfig;
 
 // kill all jest child processes that hang around after build,
 // which stop netlify from recognising that build is complete

packages/dataparcels-docs/package.json

@@ -12,31 +12,11 @@
     "watch": "gatsby develop"
   },
   "dependencies": {
-    "babel-preset-blueflag": "^1.0.0",
-    "bruce": "^4.0.0",
     "dataparcels": "^0.19.1",
-    "dcme-style": "^0.18.1",
+    "dcme-gatsby": "^0.5.0",
+    "dcme-style": "^0.27.4",
     "gatsby": "^2.0.19",
-    "gatsby-image": "^2.0.15",
-    "gatsby-plugin-offline": "^2.0.5",
-    "gatsby-plugin-react-helmet": "^3.0.0",
-    "gatsby-plugin-resolve-src": "^2.0.0",
-    "gatsby-plugin-sass": "^2.0.11",
-    "gatsby-remark-prismjs": "^3.2.8",
-    "gatsby-source-filesystem": "^2.0.4",
-    "immutable": "^3.8.2",
-    "mdx-loader": "1.0.0-beta.3",
-    "mdxc": "^1.1.2",
-    "node-sass": "^4.11.0",
-    "react": "^16.8.6",
-    "react-cool-storage": "^0.1.1",
     "react-dataparcels": "file:.yalc/react-dataparcels",
-    "react-dataparcels-drag": "file:.yalc/react-dataparcels-drag",
-    "react-dom": "^16.8.6",
-    "react-flip-move": "^3.0.2",
-    "react-helmet": "^5.2.0",
-    "react-sortable-hoc": "^1.4.0",
-    "react-spruce": "^0.1.1",
-    "unmutable": "^0.43.1"
+    "react-dataparcels-drag": "file:.yalc/react-dataparcels-drag"
   }
 }

packages/dataparcels-docs/src/component/ApiPage.jsx

@@ -1,25 +1,9 @@
 // @flow
 import type {Node} from 'react';
 import React from 'react';
-import {Fragment} from 'react';
-import {Box, Grid, GridItem, NavigationList, NavigationListItem, Text, Typography} from 'dcme-style';
+import {Box, Grid, GridItem, Text, Typography} from 'dcme-style';
 import Link from 'component/Link';
-import SiteNavigation from 'component/SiteNavigation';
-import PageLayout from 'component/PageLayout';
-import APINavigation from 'component/APINavigation';
-
-const renderApi = (api) => api
-    .split('\n')
-    .map((line: string): Node => {
-        if(line.slice(0,2) === "# ") {
-            return line.slice(2);
-        }
-        if(!line) {
-            return <br />;
-        }
-        return <a className="Link" href={`#${line.replace("()","")}`}>{line.replace("()","")}</a>;
-    })
-    .map((line, key) => <NavigationListItem key={key}>{line}</NavigationListItem>);
+import ContentNav from 'shape/ContentNav';
 
 const renderDoclets = ({api, md}) => api
     .split('\n')
@@ -55,23 +39,15 @@ type Props = {
 export default ({name, api, md, after}: Props) => {
     let Description = md._desc;
     let After = md._after;
-    return <PageLayout
-        modifier="marginBottom"
-        content={() => <Box>
-            <Box modifier="marginBottomGiga">
-                <Typography>
-                    <Description />
-                </Typography>
-            </Box>
+    return <ContentNav
+        content={() => <>
+            <Description />
             {renderDoclets({api, md})}
-            {After && <Typography><After /></Typography>}
-        </Box>}
-        nav={() => <Fragment>
-            <APINavigation />
-            <NavigationList>
-                <NavigationListItem>{name}</NavigationListItem>
-                {renderApi(api)}
-            </NavigationList>
-        </Fragment>}
+            {After && <After />}
+        </>}
+        pageNav={[
+            '# validation',
+            ...api.split('\n')
+        ]}
     />;
 };

packages/dataparcels-docs/src/component/ExampleHoc.jsx → packages/dataparcels-docs/src/component/exampleFrame.jsx

@@ -27,10 +27,10 @@ const stringify = (value) => {
         }
         return value;
     };
-    return JSON.stringify(value, replacer, 4);
+    return `${JSON.stringify(value, replacer, 4)}`.replace(/"NaN"/g, "NaN");
 };
 
-export default (Component: ComponentType<*>) => class Example extends Layout<Props> {
+class ExampleFrame extends Layout<Props> {
     static elements = ['demo', 'data'];
 
     static layout = ({demo, data}) => <Box modifier="paddingBottomKilo example">
@@ -47,13 +47,12 @@ export default (Component: ComponentType<*>) => class Example extends Layout<Pro
     </Box>;
 
     demo = (): Node => {
-        return <Component {...this.props} />;
+        return this.props.children;
     };
 
     data = (): Node => {
         return pipeWith(
-            this.props,
-            filter((value, key) => value && key.substr(-6) === "Parcel"),
+            this.props.parcels,
             map((parcel, key) => <Box key={key}>
                 <Text element="div" modifier="monospace">{key}</Text>
                 <Terminal>{stringify(parcel.value)}</Terminal>
@@ -62,3 +61,10 @@ export default (Component: ComponentType<*>) => class Example extends Layout<Pro
         );
     };
 };
+
+export default (parcels: Object, children) => {
+    return <ExampleFrame
+        parcels={parcels}
+        children={children}
+    />;
+};