Tyreant

tyreant =
tyranid +
  react +
    ant

Tyreant is a UI Toolkit library built on top of Tyranid, React, and Ant.

The primary goal behind Tyreant is to create metadata-enabled data-driven UI components.

For example, the following creates a data-driven table that can do its own paging, searching, and so on using the Tyranid metadata and client-side API, along with an edit form:

export const UserTable = () => (
  <TyrTable
    collection={User},
    query={{
      status: { $ne: UserStatus.DELETED._id }
    }},
    columns={[
      { field: 'fullName', defaultSort: 'ascend' },
      { field: 'organizationId' },
      { field: 'email', width: '270px' },
      { field: 'updatedAt', width: '200px' },
      { field: 'status', width: '200px' },
    ]},
    route={'/users'},
    actions={[
      <TyrFormModal
        fields={[
          { field: 'firstName' },
          { field: 'lastName' },
          { field: 'email' },
          { field: 'dateOfBirth' },
          { field: 'status' },
        ]},
      />,
    ]}
  />
);

Guiding Principles

• Composable - Multiple components should be able to infer context from other components. For example, a form control nested inside a table control should infer the collection and/or fields from the table and allow the form to be used as an edit form for the table. As another example, Tyreant date fields nested inside a Tyreant form should be able to infer the document they are editing from the form.
• Extensible - Users should be able to write their own Tyreant-compatible, metadata-driven components to extend the component library.
• Intelligent - Components should leverage metadata as much as possible to increase DRYness and provide richer controls.
• Interoperable - Components should be usable on their own alongside non-Tyreant components.
• Offline - Components should operate offline using Tyranid's client-side APIs.
• Performant - Components should be as lightweight as possible and render efficiently.
• Responsive - Components should responsively scale from mobile to desktop.
• Scaleable - Components should be able to have automatic behavior but fallback to more manual react code so that there are no limits to custom behavior. For example, you should be able to specify a form using just a collection and field names or by specifically detailing the field-level components yourself.
• Skinnable - Components should be fully skinnable and styleable and should not lock clients into a particular appearance or style of application.

Roadmap

Completed Roadmap

1. TyrLink enhancements
   1. array of links
   2. tags
   3. allow to be nested inside a TyrForm

Immediate Roadmap

1. Router plug-in API
2. NPM
3. Update to latest Ant
4. TyrBoolean
   1. render as two option radio box
   2. render as checkbox
5. TyrInteger / TyrDouble
   1. support validations
6. TyrString
   1. support regex and length validations
7. TyrLink enhancements
   1. add "details functionality"
8. TyrField control enhancements
   1. placeholder support
   2. infer document and form from parent TyrForm
   3. render computed fields dynamically in forms as read-only components
9. TyrForm enhancements
   1. children support
10. TyrFormDrawer
11. TyrArray control
12. TyrTable enhancements
    1. lift route requirement
    2. pin columns on the left/right
    3. show/hide columns
    4. rearrange columns order
    5. save and load table configurations/layouts
    6. multiple selection
13. documentation
14. layout
    1. grid layout / side-by-side controls
    2. autolayout algorithms
    3. provide ability to estimate "how large" a control will be
15. add TyrImage component
16. testing framework utilizing puppeteer

Future Roadmap

1. TyrPassword
2. TyrTable
   1. column groups
   2. responsive support
   3. download
      1. CSV
      2. Excel
   4. pivot table
   5. mass edit in-place
3. TyrAddress/Location
4. TyrUnit
5. TyrTree
6. TyrForm
   1. multi-step / page forms
   2. responsive support