Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/harvestprofit/docflux
Flux/React framework for creating any document, just define a few DOM components to transform into the document.
https://github.com/harvestprofit/docflux
csv excel flux javascript pdf react
Last synced: about 1 month ago
JSON representation
Flux/React framework for creating any document, just define a few DOM components to transform into the document.
- Host: GitHub
- URL: https://github.com/harvestprofit/docflux
- Owner: HarvestProfit
- License: mit
- Created: 2018-02-02T18:46:45.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-07-18T23:28:02.000Z (over 1 year ago)
- Last Synced: 2024-11-19T16:06:28.026Z (about 1 month ago)
- Topics: csv, excel, flux, javascript, pdf, react
- Language: JavaScript
- Homepage: https://harvestprofit.github.io/DocFlux/
- Size: 3.29 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# DocFlux
[](https://www.npmjs.com/package/@harvest-profit/doc-flux) [](https://travis-ci.org/HarvestProfit/DocFlux) [](https://coveralls.io/github/HarvestProfit/DocFlux?branch=master) [](https://github.com/HarvestProfit/DocFlux/blob/master/LICENSE)
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](https://github.com/HarvestProfit/DocFlux-PDFs) package to create a pdf that uses the `Table` component specified in the next section. `documentSettings` takes options specified in [PDFMake](https://pdfmake.github.io/docs/document-definition-object/document-medatadata/) document metadata docs.
```js
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](https://github.com/HarvestProfit/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:
```js
import DocFlux from '@harvest-profit/doc-flux';
/** @jsx DocFlux.createElement */
//... rest of component file
```
It is easier to just specify it as `React`
```js
import PropTypes from 'prop-types';
import React from '@harvest-profit/doc-flux';
import RandomRow from './RandomRow';
const Table = (props) => (
People
Name
Age
{props.name}
{props.age}
)
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.
```js
import React, { shallow } from '@harvest-profit/doc-flux';
import Table from './Table';
import RandomRow from './RandomRow';
describe('', () => {
it('should render', () => {
const wrapper = shallow(
);
expect(wrapper.find('tr').text()).toContain('Jake');
expect(wrapper.find('tr').first().text()).toContain('Jake');
});
it('should find the RandomRow component', () => {
const wrapper = shallow(
);
expect(wrapper.find(RandomRow).length).toEqual(1);
});
});
```
## Development
[Clone](https://help.github.com/articles/cloning-a-repository/) this repo, and begin committing changes. PRs are preferred over committing directly to master.
To run tests locally on your machine, run the following:
```bash
yarn run test
```
To preview documentation locally on your machine, run the following:
```bash
yarn run build-docs
```
After merging your pull request, consider updating the documentation with the following command:
```bash
yarn run publish-docs
```
To deploy a new version to NPM, bump the version number, commit/merge to `master`, and run the following:
```bash
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](https://github.com/HarvestProfit/DocFlux/blob/master/LICENSE)