DocFlux

Flux/React framework for creating any document, just define a few DOM components to transform into the document.

See an example of how to generate Spreadsheets https://github.com/humphreyja/sample-doc-flux-spreadsheets

Examples

Documents

To start, you must define a document. Think of this as the root. You will define a few document metadata options and specify which component it will render. Below I am using the DocFlux PDFS package to create a pdf that uses the Table component specified in the next section. documentSettings takes options specified in PDFMake document metadata docs.

import PropTypes from 'prop-types';
import { Document } from '@harvest-profit/doc-flux-pdfs';
import Table from './Table';

class TablePDF extends Document {
  static propTypes = {
    name: PropTypes.string.isRequired,
    age: PropTypes.number.isRequired,
  };

  static styleSheet() {
    return {
      td: {
        fontSize: 11,
        marginTop: 2,
        marginBottom: 2,
      }
    };
  }

  static documentSettings(props) {
    return {
      name: `People: ${props.name}`,
      pageMargins: [30, 50, 30, 50],
      pageOrientation: 'portrait',
    };
  }

  static component = Table;
}

export default TablePDF;

Components

The following is a sample component that will render a table. Notice, the tname tag. This is a special tag created from the DocFlux Spreadsheets package. It names the tab to People in excel. For PDFs, this will be ignored. NOTICE: For this to work, you must either import doc-flux as React or change the babel parser like the following:

import DocFlux from '@harvest-profit/doc-flux';
/** @jsx DocFlux.createElement */

//... rest of component file

It is easier to just specify it as React

import PropTypes from 'prop-types';
import React from '@harvest-profit/doc-flux';
import RandomRow from './RandomRow';

const Table = (props) => (
  <table>
    <tname>People</tname>
    <thead>
      <th>Name</th>
      <th>Age</th>
    </thead>
    <tbody>
      <tr>
        <td>{props.name}</td>
        <td>{props.age}</td>
      </tr>
      <RandomRow />
    </tbody>
  </table>
)

Table.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
};

export default Table;

Testing

For testing, this uses a similar API to enzyme. You can shallow render the component (which only renders the component and not any child components). Then you can actively find or get text from the rendered component. You can find by tag name or component name.

Additionally, you can use at(index), first(), or last() on any find results.

import React, { shallow } from '@harvest-profit/doc-flux';
import Table from './Table';
import RandomRow from './RandomRow';

describe('<Table />', () => {
  it('should render', () => {
    const wrapper = shallow(
      <Table
        name="Jake"
        age={100}
      />
    );
    expect(wrapper.find('tr').text()).toContain('Jake');
    expect(wrapper.find('tr').first().text()).toContain('Jake');
  });

  it('should find the RandomRow component', () => {
    const wrapper = shallow(
      <Table
        name="Jake"
        age={100}
      />
    );
    expect(wrapper.find(RandomRow).length).toEqual(1);
  });
});

Development

Clone this repo, and begin committing changes. PRs are preferred over committing directly to master.

To run tests locally on your machine, run the following:

yarn run test

To preview documentation locally on your machine, run the following:

yarn run build-docs

After merging your pull request, consider updating the documentation with the following command:

yarn run publish-docs

To deploy a new version to NPM, bump the version number, commit/merge to master, and run the following:

yarn run clean
yarn run build

# Either NPM
npm publish
# Or Yarn, they do the same thing
yarn publish

License

This project is MIT licensed