Upstream

.eslintrc.js

@@ -0,0 +1,46 @@
+const path = require('path')
+
+module.exports = {
+  "extends": [
+    "airbnb-base",
+    "plugin:prettier/recommended",
+  ],
+  "globals": {
+    "window": true,
+    "document": true,
+    "it": true,
+    "FileReader": true
+  },
+  "env": {
+    "browser": true,
+    "jest": true,
+    "es6": true,
+    "node": true
+  },
+  "parser": 'babel-eslint',
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "ignorePatterns": [
+    "**/node_modules/**",
+    "**/lib",
+    "**/lib/**/*.js"
+  ],
+  "rules": {
+    "import/prefer-default-export": "off",
+    "import/no-extraneous-dependencies": "off",
+    "no-unused-vars": "warn"
+  },
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": ['.js', '.jsx', '.test.js'],
+        "moduleDirectory": [
+          "node_modules",
+          "src"
+        ]
+      }
+    }
+  }
+};

.gitignore

@@ -1,5 +1,8 @@
-.cache
+*.DS_Store
 node_modules
-node_modules/*
-dist/*
+coverage
+lib
+.envrc
 *.log
+**/node_modules
+**/lib

.prettierrc.js

@@ -0,0 +1,9 @@
+module.exports = {
+  printWidth: 80,
+  trailingComma: "all",
+  tabWidth: 2,
+  semi: false,
+  arrowParens: "always",
+  singleQuote: true,
+  jsxSingleQuote: false
+};

babel.config.json

@@ -0,0 +1,20 @@
+{
+  "presets": [
+    "@babel/react",
+    [
+      "@babel/env",
+      {
+        "targets": {
+          "browsers": "last 2 versions",
+          "node": "12.16.2"
+        }
+      }
+    ]
+  ],
+  "env": {
+    "build": {
+      "ignore": []
+    }
+  },
+  "ignore": ["node_modules"]
+}

docs/async-form.md

@@ -0,0 +1,127 @@
+# AsyncForm
+A Compound Collection of Components for handling async forms in a web app
+
+## FormLoadError
+It should display an error message to the user.
+Renders its children when an error occurs while initially loading data. Attaches the `error` prop to all children before rendering.
+
+## FormError
+It should display an error message to the user.
+Renders its children when an error occurs while performing a form action. Attaches the `error` prop to all children before rendering.
+
+## FormLoading
+It should show a spinner or a label indicating the form is loading.
+Renders its children when the form is busy with an async action such as loading, saving, etc.
+
+## FormContent
+It should contain the body of the form, including any fields, labels, etc.
+Renders its children when the form's state is idle, error, loadSuccess, updating, updateSuccess or deleting.
+
+## FormActions
+It should render buttons or other UI elements to allow user to perform Save, Delete actions
+Renders its children under the same conditions as <FormContent />.
+Attaches `state`, `handleDelete`, and `handleSave` props to all children.
+
+## FormDeleteSuccess
+It should show a message informing the user that their delete operation succeeded.
+Renders its children when the state is deleteSuccess.
+
+## AsyncForm
+Renders various states of a form based on the UI state of an async action(s)
+
+### Props
+- **state**: the state value from `useModel` hook
+- **error**: the error value from `useModel` hook
+- **handleSave**: the function returned from the `useModel` hook
+- **handleDelete**: the function returned form the `useModel` hook
+- **afterUpdate**: the function to fire after a successful update operation
+- **afterDelete**: the function to fire after a successful delete operation
+- **children**: any combination of the above Components + any other React components to render an input form to the user
+
+## Example
+```javascript
+import React from 'react'
+import {
+  AsyncForm,
+  FormActions,
+  FormContent,
+  FormError,
+  FormInitError,
+  FormInitializing,
+  FormLoading
+} from './components/async-form'
+import useWidget from '../models/use-widget'
+
+function WidgetFormError({ error }) {
+  return (
+    <p>{error.message}</p>
+  )
+}
+
+function WidgetFormActions({
+  handleSave,
+  handleDelete,
+  state
+}) {
+  return (
+    <div>
+      <button type="submit" disabled={state === 'loading'}>Submit</button>
+      <button type="button" onClick={handleSave} disabled={state === 'loading'}>Save</button>
+      <button type="button" onClick={handleDelete} disabled={state === 'deleting'}>Delete</button>
+    </div>
+  )
+}
+
+export default function WidgetForm({ id }) {
+  const {
+    model: widget,
+    handleAttributeChange,
+    handleSave,
+    handleDelete,
+    state,
+    error,
+  } = useWidget(id, { staleTime: 10000 })
+
+  return (
+    <AsyncForm
+      state={state}
+      error={error}
+      handleSave={handleSave}
+      handleDelete={handleDelete}
+      onUpdate={() => {
+        alert('Just Updated!')
+      }}
+    >
+      <FormInitializing>
+        <p>Initializing...</p>
+      </FormInitializing>
+
+      <FormInitError>
+        <p>Init Error!</p>
+      </FormInitError>
+
+      <FormLoading>
+        <p>Loading...</p>
+      </FormLoading>
+
+      <FormError>
+        <WidgetFormError />
+      </FormError>
+
+      <FormContent>
+        {widget && widget.$error && widget.$error.map((e) => {
+          return <p key={e}>{e}</p>
+        })}
+        {widget && JSON.stringify(widget.$object)}
+        <div><input type="text" name="name" onChange={handleAttributeChange} value={widget ? widget.name.$value : ''} /></div>
+        <div><input type="date" name="created" onChange={handleAttributeChange} value={widget ? widget.created.$value : ''} /></div>
+        <div><input type="number" name="quantity" onChange={handleAttributeChange} value={widget ? widget.quantity.$value : 0} /></div>
+      </FormContent>
+
+      <FormActions>
+        <WidgetFormActions />
+      </FormActions>
+    </AsyncForm>
+  )
+}
+```

docs/client.md

@@ -0,0 +1,115 @@
+# Client Interface
+## Purpose
+Make calls to a service to fetch/update/create/delete data, usually asynchronously
+
+---
+
+## Exports 
+
+### load : Function
+**Returns** Async Function with a `key` property
+
+a function that accepts a Model() function as its first argument and returns an async function which will fetch a single resource. The async function must also have a property called `key` that contains a string or array which uniquely identifies the data that will be loaded. This `key` value will be used to identify the returned resource in cache.
+
+ ```javascript
+ export function load({
+   Model, /* A Model() creator */
+   ...
+   /* any additional config values necessary for target backend */
+ }) {
+
+   async function loader() {
+     /* 1. do some loading */
+     /* 2. Use Model creator function to create a Model instance */
+     /* 3. Return the Model instance */
+   }
+
+   loader.key = `some unique id` // an unique array or string identifier
+
+   return loader
+ }
+ ```
+
+---
+
+### loadCollection
+**Returns** Async Function with a `key` property
+
+ a function that accepts a Model() function as its first argument and returns an async function which will fetch a collection of resources. The async function must also have a property called `key` that contains a string or array which uniquely identifies the data that will be loaded. This `key` value will be used to identify the returned resource in cache.
+
+```javascript
+export function loadCollection({
+  Model, /* A Model() creator */
+  ...
+  /* any additional config values necessary for target backend */
+}) {
+
+  async function loader() {
+    /* 1. do some loading */
+    /* 2. map through the results from the backend */
+    /* 3. Use Model creator function to create an array of Models */
+    /* 4. Return the Models[] array */
+  }
+
+  loader.key = `some unique id` // a unique array or string identifier
+
+  return loader
+}
+```
+---
+
+### create
+**Returns** Promise
+
+an async function that creates a new resource on the target backend
+
+```javascript
+export async function create({
+  model: An instance of a Model with magic $ methods,
+  ...
+  /* any additional config values necessary for target backend */
+}) {
+  /* check `model.$valid` */
+  /* throw Error if not valid */
+  /* Otherwise, do some creating and return promise */
+}
+```
+
+---
+
+### update
+**Returns** Promise
+
+an async function that updates an existing resource on the target backend
+
+```javascript
+export async function update({
+  model: An instance of a Model with magic $ methods,
+  ...
+  /* any additional config values necessary for target backend */
+}) {
+  /* check `model.$valid` */
+  /* throw Error if not valid */
+  /* Otherwise, do some updating and return promise */
+}
+```
+
+---
+
+### del
+**Returns** Promise
+
+an async function that deletes an existing resource on the target backend
+
+```javascript
+export async function del({
+  /* any config values necessary for target backend */  
+}) {
+  /* Do some deleting and return promise */
+}
+```
+
+
+
+
+