typed-ui

Generic UI for the GraphQL Schema Language.

Install

$ yarn add typed-ui

Docs

https://typed-ui.js.org

Usage

import React from 'react';
import { render } from 'react-dom';
import {
  GraphQLObjectType,
  GraphQLInputObjectType,
  GraphQLString,
  GraphQLList,
  GraphQLNonNull
} from 'graphql';
import { Put } from '../../src';

const Demo = () => (
  <Put
    type={
      new GraphQLObjectType({
        name: 'typed-ui Demo',
        fields: {
          A: {
            args: {
              X: {
                type: new GraphQLInputObjectType({
                  name: 'X',
                  fields: {
                    xs: { type: GraphQLList(GraphQLNonNull(GraphQLString)) }
                  }
                })
              }
            },
            type: new GraphQLObjectType({
              name: 'This is what A returned',
              fields: {
                B: { type: GraphQLList(GraphQLString) }
              }
            })
          }
        }
      })
    }
    data={{
      A: { output: { B: { output: ['hew'] } } }
    }}
    onChange={console.log}
  />
);

render(<Demo />, document.querySelector('#demo'));

API

Members

ListInput ⇒ Component: Returns a list input component with change events handled by the given callback.
ObjectInput ⇒ Component: Returns an object input component with change events handled by the given callback.
NonNullInput: TODO A component for non null inputs. Bases component selection on name of type.
HigherOrderInput ⇒ React.Element: Component for displaying GraphQL input types of higher order.
ListOutput ⇒ Element: Component for displaying GraphQLObjectType input and output data.
NonNullOutput: TODO A component for non null inputs. Bases component selection on name of type.
HigherOrderOutput ⇒ React.Element: Component for displaying GraphQL output types of higher order.
StringInput ⇒ Component: Returns a text field with change events handled by the given callback.
IntegerInput ⇒ Component: Returns an integer input component with change events handled by the given callback.
FloatInput ⇒ Component: Returns a float input component with change events handled by the given callback.
BooleanInput ⇒ Component: Returns a boolean input component with change events handled by the given callback.
EnumInput ⇒ Component: Returns a select component with change events handled by the given callback.
StringOutput ⇒ Component: Returns a div surrounding the supplied data.
EnumOutput ⇒ Component: Returns a readonly component displaying the supplied data.
BooleanOutput ⇒ Component: Returns a readonly checkbox displaying the value of the supplied boolean.
IntegerOutput ⇒ Component: Returns a readonly number input component displaying the integer.
FloatOutput ⇒ Component: Returns a readonly number input component displaying the float.
Put ⇒ Component: Component for displaying GraphQL data

Functions

ListOutput(props) ⇒ Component: Returns a list surrounding the supplied list data.

ListInput ⇒ `Component`

Returns a list input component with change events handled by the given callback.

Kind: global variable
Returns: Component - A list input component.

Param	Type	Description
props	`Object`	The component props.
props.ofType	`GraphQLInputType`	The type of items in the list.
props.onChange	`onChange`	The handler for change events.

Example (Log list input to the console)

<ListInput ofType={GraphQLString} onChange={console.log} />

ListInput~onChange : `function`

This callback handles ListInput change events.

Kind: inner typedef of ListInput

Param	Type
value	`Array.<*>`

ObjectInput ⇒ `Component`

Returns an object input component with change events handled by the given callback.

Kind: global variable
Returns: Component - An object input component.

Param	Type	Description
props	`Object`	The component props.
props.name	`string`	The name of the input object.
props.fields	`Object`	The input object fields.
props.onChange	`onChange`	The handler for change events.

Example (Log object input to the console)

<ObjectInput
  name="This is the name of the input object."
  fields={{
    x: { type: GraphQLString }
  }}
  onChange={console.log}
/>

ObjectInput~onChange : `function`

This callback handles ObjectInput change events.

Kind: inner typedef of ObjectInput

Param	Type
value	`Object`

NonNullInput

TODO A component for non null inputs. Bases component selection on name of type.

Kind: global variable

HigherOrderInput ⇒ `React.Element`

Component for displaying GraphQL input types of higher order.

Kind: global variable
Returns: React.Element - An element displaying the input.

Param	Type	Description
ofType	`GraphQLInputType`	The type of the input.
ofType	`Object.<GraphQLInputType, Component>`	Map from GraphQL input types to components.

ListOutput ⇒ `Element`

Component for displaying GraphQLObjectType input and output data.

Kind: global variable
Returns: Element - A object surrounding the object items.

Param	Type	Description
props	`Object`	The component props.
props.name	`string`	The name of the object.
props.fields	`Object`	The type of fields of the object.
props.data	`Object`	The object field args and return data.
props.data[fieldName].selected	`Boolean`	Whether the field is selected.
props.data[fieldName].input	`Object`	The input data for object field arguments.
props.data[fieldName].input[argName	`GraphQLInputType`	The input data for object field arguments.
props.data[fieldName].output	`GraphQLType`	The output data for object field return types.
props.onChange	`onChange`	The handler for change events.

Example (Display an object of one string)

<ObjectOutput
  name="This is the name of the object."
  fields={{
    hew: { type: GraphQLString }
  }}
  data={{ hew: 'This is a string field called hew.' }}
/>

ListOutput~onChange : `function`

This callback handles ListOutput change events.

Kind: inner typedef of ListOutput

Param	Type
value	`Array.<*>`

NonNullOutput

TODO A component for non null inputs. Bases component selection on name of type.

Kind: global variable

HigherOrderOutput ⇒ `React.Element`

Component for displaying GraphQL output types of higher order.

Kind: global variable
Returns: React.Element - An element displaying the input.

Param	Type	Description
ofType	`GraphQLOutputType`	The type of the input.
ofType	`Object.<GraphQLOutputType, Component>`	Map from GraphQL input types to components.

StringInput ⇒ `Component`

Returns a text field with change events handled by the given callback.

Kind: global variable
Returns: Component - A text field component.

Param	Type	Description
props	`Object`	The component props.
props.onChange	`onChange`	The handler for change events.

Example (Log string input to the console)

<StringInput onChange={console.log} />

StringInput~onChange : `function`

This callback handles StringInput change events.

Kind: inner typedef of StringInput

Param	Type
value	`string`

IntegerInput ⇒ `Component`

Returns an integer input component with change events handled by the given callback.

Kind: global variable
Returns: Component - An integer input component.

Param	Type	Description
props	`Object`	The component props.
props.onChange	`onChange`	The handler for change events.

Example (Log integer input to the console)

<IntegerInput onChange={console.log} />

IntegerInput~onChange : `function`

This callback handles IntegerInput change events.

Kind: inner typedef of IntegerInput

Param	Type
value	`integer`

FloatInput ⇒ `Component`

Returns a float input component with change events handled by the given callback.

Kind: global variable
Returns: Component - A float input component.

Param	Type	Description
props	`Object`	The component props.
props.onChange	`onChange`	The handler for change events.

Example (Log float input to the console)

<FloatInput onChange={console.log} />

FloatInput~onChange : `function`

This callback handles FloatInput change events.

Kind: inner typedef of FloatInput

Param	Type
value	`float`

BooleanInput ⇒ `Component`

Returns a boolean input component with change events handled by the given callback.

Kind: global variable
Returns: Component - A boolean input component.

Param	Type	Description
props	`Object`	The component props.
props.onChange	`onChange`	The handler for change events.

Example (Log boolean input to the console)

<BooleanInput onChange={console.log} />

BooleanInput~onChange : `function`

This callback handles BooleanInput change events.

Kind: inner typedef of BooleanInput

Param	Type
value	`boolean`

EnumInput ⇒ `Component`

Returns a select component with change events handled by the given callback.

Kind: global variable
Returns: Component - A select component.

Param	Type	Description
props	`Object`	The component props.
props.options	`Array.<string>`	= The enum options.
props.data	`string`	= The enum data.
props.onChange	`onChange`	The handler for change events.

Example (Log enum input to the console)

<EnumInput options={['a', 'b', 'c']} data="b" onChange={console.log} />

EnumInput~onChange : `function`

This callback handles EnumInput change events.

Kind: inner typedef of EnumInput

Param	Type
value	`string`

StringOutput ⇒ `Component`

Returns a div surrounding the supplied data.

Kind: global variable
Returns: Component - A div surrounding the data.

Param	Type	Description
props	`Object`	The component props.
props.data	`string`	The string data.

Example (Display the string "abc")

<StringOutput data="abc" />

EnumOutput ⇒ `Component`

Returns a readonly component displaying the supplied data.

Kind: global variable
Returns: Component - A component displaying the enum.

Param	Type	Description
props	`Object`	The component props.
data	`string`	The enum data.

Example (Display an enum)

<EnumOutput data="ABC" />

BooleanOutput ⇒ `Component`

Returns a readonly checkbox displaying the value of the supplied boolean.

Kind: global variable
Returns: Component - A chechbox displaying the data.

Param	Type	Description
props	`Object`	The component props.
props.data	`boolean`	The boolean data.

Example (Display true)

<BooleanOutput data={true} />

IntegerOutput ⇒ `Component`

Returns a readonly number input component displaying the integer.

Kind: global variable
Returns: Component - A number input displaying the data.

Param	Type	Description
props	`Object`	The component props.
props.data	`integer`	The integer data.

Example (Display an integer)

<IntegerOutput data={true} />

FloatOutput ⇒ `Component`

Returns a readonly number input component displaying the float.

Kind: global variable
Returns: Component - A number input displaying the data.

Param	Type	Description
props	`Object`	The component props.
props.data	`float`	The float data.

Example (Display an float)

<FloatOutput data={true} />

Put ⇒ `Component`

Component for displaying GraphQL data

Kind: global variable
Returns: Component - A component displaying the data.

Param	Type	Description
props	`Object`	The component props.
props.type	`GraphQLType`	The type of the data.
[props.data]	`Object`	The initial data.
[props.onChange]	`onChange`	The handler for changes in the data.
[props.render]	`render`	The custom GraphQL data renderer.

Example (Display a string)

<Put type={GraphQLString} data="abc" />

Example (Display an object)

<Put
  type={
    new GraphQLObjectType({
      name: 'abc',
      fields: { w: { type: GraphQLString } }
    })
  }
  data={{ w: 'xyz' }}
/>

Example (Log object input to the console)

<Put
  type={
    new GraphQLInputObjectType({
      name: 'abc',
      fields: { w: { type: GraphQLString } }
    })
  }
  data={{ w: '' }}
  onChange={console.log}
/>

Put ⇒ Component
- ~onChange : function
- ~render : function

Put~onChange : `function`

This callback handles Put change events.

Kind: inner typedef of Put

Param	Type
value	`Object`

Put~render : `function`

This function renders GraphQL data.

Kind: inner typedef of Put

Param	Type
type	`GraphQLType`
data	`*`

ListOutput(props) ⇒ `Component`

Returns a list surrounding the supplied list data.

Kind: global function
Returns: Component - A list surrounding the list items.

Param	Type	Description
props	`Object`	The component props.
props.ofType	`GraphQLOutputType`	The type of the list items.
props.data	`Array.<*>`	The list data.
props.onChange	`onChange`	The handler for change events.

Example (Display a list of strings)

<ListOutput ofType={GraphQLString} data={['abc', 'd', 'xyz']} />

Example (Display a list of list of integers)

<ListOutput
  ofType={new GraphQLList(GraphQLInt)}
  data={[[0, 1, 2], [10, 11, 12], [50, 100]]}
/>

ListOutput~onChange : `function`

This callback handles ListOutput change events.

Kind: inner typedef of ListOutput

Param	Type
value	`Array.<*>`

Maintainers

License

MIT © Pi Cubed

Name		Name	Last commit message	Last commit date
Latest commit History 137 Commits
.github/ISSUE_TEMPLATE		.github/ISSUE_TEMPLATE
demo		demo
docs		docs
src		src
tests		tests
tooling/docs		tooling/docs
.gitignore		.gitignore
.prettierrc		.prettierrc
.travis.yml		.travis.yml
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
book.json		book.json
nwb.config.js		nwb.config.js
package.json		package.json
yarn.lock		yarn.lock

Folders and files

Latest commit

History

Repository files navigation

typed-ui

Install

Docs

Usage

API

Members

Functions

ListInput ⇒ Component

ListInput~onChange : function

ObjectInput ⇒ Component

ObjectInput~onChange : function

NonNullInput

HigherOrderInput ⇒ React.Element

ListOutput ⇒ Element

ListOutput~onChange : function

NonNullOutput

HigherOrderOutput ⇒ React.Element

StringInput ⇒ Component

StringInput~onChange : function

IntegerInput ⇒ Component

IntegerInput~onChange : function

FloatInput ⇒ Component

FloatInput~onChange : function

BooleanInput ⇒ Component

BooleanInput~onChange : function

EnumInput ⇒ Component

EnumInput~onChange : function

StringOutput ⇒ Component

EnumOutput ⇒ Component

BooleanOutput ⇒ Component

IntegerOutput ⇒ Component

FloatOutput ⇒ Component

Put ⇒ Component

Put~onChange : function

Put~render : function

ListOutput(props) ⇒ Component

ListOutput~onChange : function

Maintainers

License

About

Topics

Resources

License

Code of conduct

Contributing

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Uh oh!

Contributors

Uh oh!

Languages

ListInput ⇒ `Component`

ListInput~onChange : `function`

ObjectInput ⇒ `Component`

ObjectInput~onChange : `function`

HigherOrderInput ⇒ `React.Element`

ListOutput ⇒ `Element`

ListOutput~onChange : `function`

HigherOrderOutput ⇒ `React.Element`

StringInput ⇒ `Component`

StringInput~onChange : `function`

IntegerInput ⇒ `Component`

IntegerInput~onChange : `function`

FloatInput ⇒ `Component`

FloatInput~onChange : `function`

BooleanInput ⇒ `Component`

BooleanInput~onChange : `function`

EnumInput ⇒ `Component`

EnumInput~onChange : `function`

StringOutput ⇒ `Component`

EnumOutput ⇒ `Component`

BooleanOutput ⇒ `Component`

IntegerOutput ⇒ `Component`

FloatOutput ⇒ `Component`

Put ⇒ `Component`

Put~onChange : `function`

Put~render : `function`

ListOutput(props) ⇒ `Component`

ListOutput~onChange : `function`

Packages