Merge pull request #1 from nucleartide/changeset

Add beginnings of example

Author: nucleartide

example/components/Validate.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { Component } from 'react';
+import { IValidationMap } from 'validated-proxy/dist/types/utils/validator-lookup';
+import { validatedProxy, BufferedProxy } from 'validated-proxy';
+
+interface HelperProps {
+  model: BufferedProxy
+  set: <T>(name: string, value: T) => void
+  reset: () => void
+  isPristine: boolean
+  hasErrors: boolean
+  flush: () => void
+}
+
+type RenderProp = (p: HelperProps) => JSX.Element
+
+interface Props<T> {
+  model: T
+  as: IValidationMap
+  children: RenderProp
+}
+
+interface State {
+  model: BufferedProxy
+}
+
+class Validate<Model extends {}> extends Component<Props<Model>, State> {
+  constructor(p: Props<Model>) {
+    super(p);
+    this.state = {
+      model: validatedProxy(p.model, { validations: p.as }),
+    };
+  }
+
+  set = <V extends {}>(name: string, value: V) => {
+    this.state.model[name] = value;
+    this.setState({ model: this.state.model });
+  }
+
+  reset = () => {
+    this.state.model.reset();
+    this.setState({ model: this.state.model });
+  }
+
+  flush = () => {
+    this.state.model.flush();
+    this.setState({ model: this.state.model });
+  }
+
+  render() {
+    return this.props.children({
+      model: this.state.model,
+      set: this.set,
+      reset: this.reset,
+      isPristine: Object.keys(this.state.model.cache).length === 0,
+      hasErrors: this.state.model.errors.length > 0,
+      flush: this.flush,
+    });
+  }
+}
+
+export default Validate;

example/components/ValidatedField.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { BufferedProxy } from 'validated-proxy';
+
+interface Props {
+  model: BufferedProxy
+  property: string
+  setProperty: (name: string, value: string) => void
+  type: 'text' | 'number'
+}
+
+interface ComputedProps extends Props {
+  messages: Array<string>
+}
+
+const transform = (p: Props): ComputedProps => ({
+  messages: p.model.cache
+    && p.model.cache[p.property]
+    && p.model.cache[p.property].validations
+      .filter(v => !v.validation)
+      .map(v => v.message)
+    || [],
+  ...p,
+});
+
+const component = (p: ComputedProps) => (
+  <>
+    <label htmlFor={p.property}>{p.property}</label>
+    <input
+      type={p.type}
+      id={p.property}
+      value={p.model[p.property]}
+      onChange={e => p.setProperty(p.property, e.target.value)}
+    />
+
+    {p.messages.length > 0 &&
+      <ul>
+        {p.messages.map(m => <li key={m}>{m}</li>)}
+      </ul>
+    }
+  </>
+);
+
+// def validated_field(p) do
+//   p
+//   |> transform
+//   |> component
+// end
+const ValidatedField = (p: Props) => (
+  component(
+    transform(
+      p
+    )
+  )
+);
+
+export default ValidatedField;

example/index.css

@@ -0,0 +1,3 @@
+form {
+  background-color: papayawhip;
+}

example/index.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { render } from 'react-dom';
+
+import Adult from './validations/adult';
+import Child from './validations/child';
+import Validate from './components/Validate';
+import ValidatedField from './components/ValidatedField';
+
+window.user = {
+  firstName: 'Billy',
+  lastName: 'Bob',
+  email: '',
+  job: '',
+  age: 10,
+};
+
+// Try swapping `as={Adult}` with `as={Child}`.
+render(
+  <Validate model={window.user} as={Adult}>
+    {({ model, set, reset, isPristine, hasErrors, flush }) => (
+      <form onSubmit={e => {
+        e.preventDefault();
+        flush();
+      }}>
+        <ValidatedField
+          type="text"
+          model={model}
+          property="firstName"
+          setProperty={set}
+        />
+
+        <ValidatedField
+          type="text"
+          model={model}
+          property="lastName"
+          setProperty={set}
+        />
+
+        <ValidatedField
+          type="text"
+          model={model}
+          property="email"
+          setProperty={set}
+        />
+
+        <ValidatedField
+          type="text"
+          model={model}
+          property="job"
+          setProperty={set}
+        />
+
+        <ValidatedField
+          type="number"
+          model={model}
+          property="age"
+          setProperty={(name, value) => set(name, parseInt(value, 10))}
+        />
+
+        <button type="submit" disabled={isPristine || hasErrors}>Save</button>
+        <button type="button" onClick={reset}>Reset</button>
+      </form>
+    )}
+  </Validate>,
+  document.getElementById('app')
+);

example/validations/adult.ts

@@ -0,0 +1,7 @@
+import User from './user';
+import isNumber from '../validators/number';
+
+export default {
+  ...User,
+  age: isNumber({ op: '>=', value: 18 }),
+};

example/validations/child.ts

@@ -0,0 +1,7 @@
+import User from './user';
+import isNumber from '../validators/number';
+
+export default {
+  ...User,
+  age: isNumber({ op: '<', value: 18 }),
+};

example/validations/user.ts

@@ -0,0 +1,22 @@
+import isPresent from '../validators/presence';
+import hasLength from '../validators/length';
+import isUnique from '../validators/uniqueness';
+import isEmail from '../validators/email';
+
+export default {
+  firstName: [
+    isPresent(),
+    hasLength({ min: 2 }),
+  ],
+  lastName: [
+    isPresent(),
+    hasLength({ min: 2 }),
+  ],
+  email: [
+    isUnique(),
+    isEmail(),
+  ],
+  job: [
+    isPresent(),
+  ],
+};

example/validators/email.ts

@@ -0,0 +1,11 @@
+const Email = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+
+// Validate that an email has the correct format.
+const validateEmail =
+  () =>
+  (key: string, newValue: string, oldValue: string) => ({
+    message: 'Invalid email.',
+    validation: Email.test(newValue),
+  });
+
+export default validateEmail;

example/validators/length.ts

@@ -0,0 +1,13 @@
+interface Options {
+  min: number
+}
+
+// Validate that a string has minimum length.
+const validateLength =
+  ({ min }: Options) =>
+  (key: string, newValue: string, oldValue: string) => ({
+    message: `${key} is too short.`,
+    validation: newValue.length >= min,
+  });
+
+export default validateLength;

example/validators/number.ts

@@ -0,0 +1,52 @@
+import { IValidationMeta } from 'validated-proxy/dist/types/validation-result';
+
+interface LessThan {
+  op: '<',
+  value: number
+}
+
+interface GreaterThanOrEqual {
+  op: '>=',
+  value: number
+}
+
+type Options =
+  | LessThan
+  | GreaterThanOrEqual
+  ;
+
+const welp = (x: never): never => {
+  throw new Error('Unexpected object.');
+};
+
+const message = (o: Options, key: string, newValue: number): string => {
+  switch (o.op) {
+  case '<':
+    return `${key} is not less than ${o.value}.`;
+  case '>=':
+    return `${key} is not greater than or equal to ${o.value}.`;
+  default:
+    return welp(o);
+  }
+};
+
+const validation = (o: Options, key: string, newValue: number): boolean => {
+  switch (o.op) {
+  case '<':
+    return newValue < o.value;
+  case '>=':
+    return newValue >= o.value;
+  default:
+    return welp(o);
+  }
+};
+
+// Validate that a number satisfies comparison rules.
+const validateNumber =
+  (o: Options) =>
+  (key: string, newValue: number, oldValue: number): IValidationMeta => ({
+    message: message(o, key, newValue),
+    validation: validation(o, key, newValue),
+  });
+
+export default validateNumber;

example/validators/presence.ts

@@ -0,0 +1,9 @@
+// Validate that a value is truthy.
+const validatePresence =
+  () =>
+  <T extends {}>(key: string, newValue: T, oldValue: T) => ({
+    message: `${key} is missing.`,
+    validation: Boolean(newValue),
+  });
+
+export default validatePresence;

example/validators/uniqueness.ts

@@ -0,0 +1,11 @@
+const ReservedEmails = ['foo@bar.com', 'admin@example.com'];
+
+// Validate that an email is not reserved.
+const validateUniqueness =
+  () =>
+  (key: string, newValue: string, oldValue: string) => ({
+    message: `Email is taken.`,
+    validation: ReservedEmails.indexOf(newValue) === -1,
+  });
+
+export default validateUniqueness;

index.html

@@ -3,8 +3,10 @@
   <head>
     <meta charset="UTF-8">
     <title></title>
+    <link rel="stylesheet" href="./example/index.css">
   </head>
   <body>
-    <script src="./index.ts"></script>
+    <div id="app"></div>
+    <script src="./example/index.tsx"></script>
   </body>
 </html>