{"id":21140761,"url":"https://github.com/harvestprofit/docflux","last_synced_at":"2025-07-09T04:31:36.250Z","repository":{"id":29019753,"uuid":"120018101","full_name":"HarvestProfit/DocFlux","owner":"HarvestProfit","description":"Flux/React framework for creating any document, just define a few DOM components to transform into the document.","archived":false,"fork":false,"pushed_at":"2023-07-18T23:28:02.000Z","size":3448,"stargazers_count":2,"open_issues_count":20,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-19T16:06:28.026Z","etag":null,"topics":["csv","excel","flux","javascript","pdf","react"],"latest_commit_sha":null,"homepage":"https://harvestprofit.github.io/DocFlux/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HarvestProfit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-02-02T18:46:45.000Z","updated_at":"2023-11-23T13:57:56.000Z","dependencies_parsed_at":"2024-06-21T20:24:21.854Z","dependency_job_id":"21c79d53-0e9b-4164-83bd-bd5eb4d8f080","html_url":"https://github.com/HarvestProfit/DocFlux","commit_stats":{"total_commits":44,"total_committers":4,"mean_commits":11.0,"dds":"0.20454545454545459","last_synced_commit":"cf07f36943fbf9346d054de9fee30bc222fc1b10"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HarvestProfit%2FDocFlux","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HarvestProfit%2FDocFlux/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HarvestProfit%2FDocFlux/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HarvestProfit%2FDocFlux/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HarvestProfit","download_url":"https://codeload.github.com/HarvestProfit/DocFlux/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225482722,"owners_count":17481238,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["csv","excel","flux","javascript","pdf","react"],"created_at":"2024-11-20T07:17:43.392Z","updated_at":"2024-11-20T07:17:44.066Z","avatar_url":"https://github.com/HarvestProfit.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DocFlux\n[![npm](https://img.shields.io/npm/v/@harvest-profit/doc-flux.svg)](https://www.npmjs.com/package/@harvest-profit/doc-flux)  [![Build Status](https://travis-ci.org/HarvestProfit/DocFlux.svg?branch=master)](https://travis-ci.org/HarvestProfit/DocFlux)  [![Coverage Status](https://coveralls.io/repos/github/HarvestProfit/DocFlux/badge.svg?branch=master)](https://coveralls.io/github/HarvestProfit/DocFlux?branch=master) [![npm](https://img.shields.io/npm/l/@harvest-profit/doc-flux.svg)](https://github.com/HarvestProfit/DocFlux/blob/master/LICENSE)\n\nFlux/React framework for creating any document, just define a few DOM components to transform into the document.\n\nSee an example of how to generate Spreadsheets https://github.com/humphreyja/sample-doc-flux-spreadsheets\n\n# Examples\n\n### Documents\nTo 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.\n\n```js\nimport PropTypes from 'prop-types';\nimport { Document } from '@harvest-profit/doc-flux-pdfs';\nimport Table from './Table';\n\nclass TablePDF extends Document {\n  static propTypes = {\n    name: PropTypes.string.isRequired,\n    age: PropTypes.number.isRequired,\n  };\n\n  static styleSheet() {\n    return {\n      td: {\n        fontSize: 11,\n        marginTop: 2,\n        marginBottom: 2,\n      }\n    };\n  }\n\n  static documentSettings(props) {\n    return {\n      name: `People: ${props.name}`,\n      pageMargins: [30, 50, 30, 50],\n      pageOrientation: 'portrait',\n    };\n  }\n\n  static component = Table;\n}\n\nexport default TablePDF;\n```\n\n### Components\nThe 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:\n\n```js\nimport DocFlux from '@harvest-profit/doc-flux';\n/** @jsx DocFlux.createElement */\n\n//... rest of component file\n```\n It is easier to just specify it as `React`\n\n```js\nimport PropTypes from 'prop-types';\nimport React from '@harvest-profit/doc-flux';\nimport RandomRow from './RandomRow';\n\nconst Table = (props) =\u003e (\n  \u003ctable\u003e\n    \u003ctname\u003ePeople\u003c/tname\u003e\n    \u003cthead\u003e\n      \u003cth\u003eName\u003c/th\u003e\n      \u003cth\u003eAge\u003c/th\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e{props.name}\u003c/td\u003e\n        \u003ctd\u003e{props.age}\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003cRandomRow /\u003e\n    \u003c/tbody\u003e\n  \u003c/table\u003e\n)\n\nTable.propTypes = {\n  name: PropTypes.string.isRequired,\n  age: PropTypes.number.isRequired,\n};\n\nexport default Table;\n```\n### Testing\n\nFor 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.\n\nAdditionally, you can use `at(index)`, `first()`, or `last()` on any `find` results.  \n\n```js\nimport React, { shallow } from '@harvest-profit/doc-flux';\nimport Table from './Table';\nimport RandomRow from './RandomRow';\n\ndescribe('\u003cTable /\u003e', () =\u003e {\n  it('should render', () =\u003e {\n    const wrapper = shallow(\n      \u003cTable\n        name=\"Jake\"\n        age={100}\n      /\u003e\n    );\n    expect(wrapper.find('tr').text()).toContain('Jake');\n    expect(wrapper.find('tr').first().text()).toContain('Jake');\n  });\n\n  it('should find the RandomRow component', () =\u003e {\n    const wrapper = shallow(\n      \u003cTable\n        name=\"Jake\"\n        age={100}\n      /\u003e\n    );\n    expect(wrapper.find(RandomRow).length).toEqual(1);\n  });\n});\n```\n\n## Development\n[Clone](https://help.github.com/articles/cloning-a-repository/) this repo, and begin committing changes. PRs are preferred over committing directly to master.\n\nTo run tests locally on your machine, run the following:\n```bash\nyarn run test\n```\n\nTo preview documentation locally on your machine, run the following:\n```bash\nyarn run build-docs\n```\n\nAfter merging your pull request, consider updating the documentation with the following command:\n```bash\nyarn run publish-docs\n```\n\nTo deploy a new version to NPM, bump the version number, commit/merge to `master`, and run the following:\n```bash\nyarn run clean\nyarn run build\n\n# Either NPM\nnpm publish\n# Or Yarn, they do the same thing\nyarn publish\n```\n\n## License\nThis project is [MIT licensed](https://github.com/HarvestProfit/DocFlux/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharvestprofit%2Fdocflux","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fharvestprofit%2Fdocflux","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharvestprofit%2Fdocflux/lists"}