node package manager
Easy collaboration. Discover, share, and reuse code in your team. Create a free org »

teselagen-react-components

TeselaGen-React-Components

Demo: http://reactcomponents.teselagen.com/

CircleCI [![npm package][npm-badge]][npm] codecov

Using:

yarn add teselagen-react-components

Add peer-dependencies:

yarn add @blueprintjs/core @blueprintjs/datetime @blueprintjs/table react-addons-css-transition-group react-redux react-select redux 

Enhancers:

withDialog

withDialog()(YourComponent) wraps YourComponent in a blueprint Dialog!

First hook up dialog to redux (only need to do this once):

//rootReducer.js
import {tg_modalState} from 'teselagen-react-components'
 
export default combineReducers({
  tg_modalState,
})

Use the component

const DialogComp = withDialog({...bpDialogPropsHere})(MyComponent)
render() {
  return <DialogComp 
  dialogName={string} //optionally pass a UNIQUE dialog name to be used
  dialogProps={object} //optionally pass additional runtime blueprint dialog props here
  //all other props passed directly to wrapped component
  > 
  <Trigger/>
</DialogComp>
}

In RARE cases where you need to open the dialog programatically, make sure the dialog component is on the page (just don't pass a child component and nothing will appear to be added to the DOM), and call dispatch like:

dispatch({
  type: "TG_SHOW_MODAL",
  name: dialogName //you'll need to pass a unique dialogName prop to the compoennt
  props:  // pass props to the wrapped component here :)
})

withDelete, withUpsert, withQuery

import {withDelete, withUpsert, withQuery} from "teselagen-react-components";
import jobWorkflowRunsQuery from '../graphql/queries/jobWorkflowRunsQuery';
import workQueueItemFragment from '../graphql/fragments/workQueueItemFragment';
 
export default compose(
    //withUpsert takes a fragment/string as its first argument and an options object as its second param.
    //in the case below it will pass a prop to the wrapped component called upsertWorkQueueItem
    //upsertWorkQueueItem() can be passed an array or single object and will perform a create or an update based on 
    //if it detects an id
  withUpsert(workQueueItemFragment,
        {extraMutateArgs: {
            refetchQueries: [ { query: jobWorkflowRunsQuery } ]
            //any additional options are spread onto the usual apollo mutation enhancer 
    }}),
    //withDelete takes a fragment/string as its first argument and an options object as its second param.
    //in the case below it will pass a prop to the wrapped component called deleteWorkQueueItem
    //deleteWorkQueueItem() can be passed an array of ids or a single id and will delete those items with the given id
  withDelete(workQueueItemFragment, { 
    mutationName: "deleteWorkQueueItems",
        //any additional options are spread onto the usual apollo mutation enhancer 
  })
    //withQuery takes only a fragment as its first argument and an options object as its second param.
    //in the case below it will pass several props to the wrapped component: 
    //data  --- the usual apollo query data object 
    //workQueueItemsQuery  ---  the usual apollo query data object just on a unique name
    //workQueueItem/s  --- the actual workQueueItem record or the workQueueItems records array  
    //workQueueItemsCount --- the count of the records coming back if isPlural:true
    withQuery(workQueueItemFragment, {
        //isPlural: boolean whether or not to search for just one item or multiple
    //any additional options are spread onto the usual apollo query enhancer 
        options: props => {
      const id = parseInt(get(props, "match.params.id"), 10);
      return {
        variables: {
          id
        }
      };
    }
  }),
)(AddToWorkQueueDialog);

getApolloMethods (query, upsert, delete)

//pass an apollo client here:
const {upsert, query, delete} = getApolloMethods(client);

query

const resultArray = await query(fragment, options)
//examples: 
const aliquot = await query(aliquotFragment, {variables: {id: 2}})
const aliquots = await query(aliquotFragment, {isPlural: true, variables: {filter: {name: 'aliquotX'}}})

upsert

const resultArray = await upsert(modelNameOrFragment [, options], modelOrModels)
//examples: 
const [aliquot] = await upsert('aliquot', {name: 'aliquot1'})
const aliquots = await upsert('aliquot', [{name: 'aliquot1'}, {name: 'aliquot2'}])

delete

await delete(modelNameOrFragment, [, options], modelOrModels)
//examples: 
await delete('aliquot', 1)
await delete('aliquot', [1,2,6,1616])

Data Table

Use the component with withTableParams() enhancer or by itself (locally connected) DataTable props

import {DataTable} from "teselagen-react-components";
<DataTable {DataTableProps here} /> 

Simple DataTable Demo Src Code

withTableParams (enhancer)

Use withTableParams in conjunction with withQuery

withTableParams({
  formName: String; // - required unique identifier for the table
  schema: Boolean; //  - The data table schema
  urlConnected: Boolean; //  - default: false - whether the table should connect to/update the URL
  withSelectedEntities: Boolean; //  - whether or not to pass the selected entities
  defaults: defaults; // - tableParam defaults such as pageSize, filter, etc
})
withQuery() //the usual withQuery stuff here

withTableParams returns a prop called tableParams which you can spread like:

<DataTable {...tableParams}/> //this provides, entities, schema, handlers etc

Form Components

import {
    InputField,
    SelectField,
    DateInputField,
    CheckboxField,
    TextareaField,
    EditableTextField,
    ReactSelectField,
    NumericInputField,
    RadioGroupField,
    FileUploadField
} from 'teselagen-react-components'
 
<InputField
  name={"fieldName"}
  label="fieldLabel"
  placeholder="Enter text..."
  inputClassName="className(s) for input"
/>

Development:

Prerequisites

Node.js >= v4 must be installed.

Installation

  • Running npm install in the components's root directory will install everything you need for development.

Demo Development Server

  • npm start will run a development server with the component's demo app at http://localhost:3000 with hot module reloading. You can check the /demo folder for the source code.

Developing linked to another folder: aka lims/hde

//link everything up:
cd lims/node_modules/react
yarn link 
cd teselagen-react-components
yarn link
yarn link react
cd lims
yarn link teselagen-react-components

//start the auto rebuild:
cd teselagen-react-components
yarn build-watch

Running Tests

  • npm test will run the tests once.

  • npm run test:coverage will run the tests and produce a coverage report in coverage/.

  • npm run test:watch will run the tests on every change.

Releasing

  • npm whoami you should be teselagen
  • npm login teselagen//ourMasterPass//team@teselagen.com
  • git pull
  • npm version patch|minor|major
  • npm publish
  • git push

Adding custom svg icons

  • yarn fontopen this opens up our custom font file in the fontello webtool
  • add the svg icons you want, hit Save Session to commit your changes
  • then run yarn fontsave
  • commit the changes :)