import SimpleSchema from 'simpl-schema';

export const schema = new SimpleSchema({
  title: { type: String, max: 200 },
  author: { type: String },
  copies: { type: Number, label: 'Number of copies', min: 0 },
  lastCheckedOut: {
    type: Date,
    label: 'Last date this book was checked out',
    optional: true,
  },
});

import { SimpleSchema2Bridge } from 'uniforms-bridge-simple-schema-2';

import { schema } from './schema';

export const bridge = new SimpleSchema2Bridge(schema);

import { AutoForm } from 'uniforms-???';

import { bridge } from './bridge';

async function onBookSubmit(model) {
  await api.books.save(model);
}

export function BookForm {
  return (
    <AutoForm
      schema={bridge}
      onSubmit={onBookSubmit}
    />
  );
}

import { connectField } from 'uniforms';

function Rating({ onChange, value = 0 }) {
  return (
    <div>
      {Array.from({ length: 5 }, (_, index) =>
        <span key={index} onClick={() => onChange(index)}>
          {index <= value ? '★' : '☆'}
        </span>
      )}
    </div>
  );
}

export const RatingField = connectField(Rating);

import { useField } from 'uniforms';

export function RatingField({ name }) {
  const { onChange, value = 0 } = useField(name);

  return (
    <div>
      {Array.from({ length: 5 }, (_, index) =>
        <span key={index} onClick={() => onChange(index)}>
          {index <= value ? '★' : '☆'}
        </span>
      )}
    </div>
  );
}

import { AutoForm, AutoField, NumField, TextField } from 'uniforms-???';

import { RatingField } from './RatingField';
import { bridge } from './bridge';

async function onSubmit(model) { /* ... */ }

export function CustomForm() {
  return (
    <AutoForm schema={bridge} onSubmit={onSubmit}>
      {/* AutoField will pick correct field component */}
      <AutoField name="name" />

      {/* Explicitly select component */}
      <TextField name="name" />
      <NumField name="age" />

      {/* Custom fields works the same */}
      <RatingField name="rating" />
    </AutoForm>
  );
}

import { GraphQLBridge } from 'uniforms-bridge-graphql';

import schema from './schema.graphql';

// See docs for more about validator and options.
function validator(model) {
  return model.title ? null : {
    details: [{ name: 'title', message: 'Title!' }],
  };
}

// Extra props for field components.
const options = { 'address.street': { label: 'Street' } };

export const bridge = new GraphQLBridge(
  schema.getType('Customer'),
  validator,
  options,
);

import Ajv from 'ajv';
import { JSONSchemaBridge } from 'uniforms-bridge-json-schema';

import { schema } from './schema';

const ajv = new Ajv({ allErrors: true, useDefaults: true });

function createValidator(schema) {
  const validator = ajv.compile(schema);

  return model => {
    validator(model);
    return validator.errors?.length
      ? { details: validator.errors }
      : null;
  };
}

export const bridge = new JSONSchemaBridge(
  schema,
  createValidator(schema),
);