Nitrogen Peroxide Monoxide

    teselagen-react-components
    TypeScript icon, indicating that this package has built-in type declarations

    30.7.21 • Public • Published

    TeselaGen-React-Components

    Demo: https://teselagen.github.io/teselagen-react-components/

    CircleCI npm version codecov

    Using:

    yarn add teselagen-react-components
    

    Add peer-dependencies:

    yarn add @blueprintjs/core @blueprintjs/datetime @blueprintjs/select react-addons-css-transition-group react-redux 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 :)
    })

    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:
    
    //LIMS EXAMPLE: 
    cd lims/node_modules/react        //this is so we don't have 2 copies of react being used on the front-end (react will throw errors if so)
    yarn link 
    cd teselagen-react-components
    yarn link
    yarn link react
    cd lims
    yarn link teselagen-react-components
    
    //HDE EXAMPLE: 
    cd hde/client/node_modules/react     //this is so we don't have 2 copies of react being used on the front-end (react will throw errors if so)
    yarn link 
    cd teselagen-react-components
    yarn link
    yarn link react
    cd hde/client
    yarn link teselagen-react-components
    
    //ALWAYS:
    //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-admin
    • npm login teselagen-admin//ask @tnrich or @tgreen or @tgadam for password//devops@teselagen.com
    • git pull
    • npm version patch|minor|major
    • npm publish
    • git push

    Adding custom svg icons

    See the demo page for live examples!

    open src/customIcons.js and add a new exported svg with a name of xxxxIcon (you can find the svgs from iconmonstr or flaticon or wherever)

    be sure to add it to the demo/src/examples/CustomIcons.js page to TEST THAT IT WORKS and so that people know it exists!

    Install

    npm i teselagen-react-components

    DownloadsWeekly Downloads

    3,894

    Version

    30.7.21

    License

    MIT

    Unpacked Size

    1.01 MB

    Total Files

    194

    Last publish

    Collaborators

    • teselagen-admin
    • tnrich