{"id":21832033,"url":"https://github.com/neo4j-devtools/graph-app-kit","last_synced_at":"2025-10-24T00:04:15.047Z","repository":{"id":44638543,"uuid":"109478651","full_name":"neo4j-devtools/graph-app-kit","owner":"neo4j-devtools","description":"Reusable components for building Graph Apps","archived":false,"fork":false,"pushed_at":"2022-02-03T00:15:37.000Z","size":412,"stargazers_count":17,"open_issues_count":5,"forks_count":7,"subscribers_count":19,"default_branch":"master","last_synced_at":"2025-03-27T21:01:32.344Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/neo4j-devtools.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-11-04T08:20:40.000Z","updated_at":"2023-01-25T17:36:07.000Z","dependencies_parsed_at":"2022-09-12T15:41:03.970Z","dependency_job_id":null,"html_url":"https://github.com/neo4j-devtools/graph-app-kit","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neo4j-devtools%2Fgraph-app-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neo4j-devtools%2Fgraph-app-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neo4j-devtools%2Fgraph-app-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neo4j-devtools%2Fgraph-app-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/neo4j-devtools","download_url":"https://codeload.github.com/neo4j-devtools/graph-app-kit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248837167,"owners_count":21169376,"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":[],"created_at":"2024-11-27T19:17:23.282Z","updated_at":"2025-10-24T00:04:14.947Z","avatar_url":"https://github.com/neo4j-devtools.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Graph App Kit\n\nBuild Neo4j Graph Apps using components and utilities from this graph app kit.\n\nBrowse source code and read README:s in sub directories for examples and docs.\n\nCheck out the interactive [playground](https://styleguide-cqfmjsxkhp.now.sh) for\na demo of the components.\n\n## What's in here\n\n| Component                                                                                                            | Description                                                                                                                                                                                                                                                              |\n| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| [\u0026lt;AsciiTable\u003e](https://github.com/neo4j-apps/graph-app-kit/tree/master/src/components/AsciiTable)                 | Render your data in an text/ascii table with fixed width font.                                                                                                                                                                                                           |\n| [\u0026lt;Chart\u003e](https://github.com/neo4j-apps/graph-app-kit/tree/master/src/components/Chart)                           | Render your data in a chart visualization.                                                                                                                                                                                                                               |\n| [\u0026lt;Cypher\u003e](https://github.com/neo4j-apps/graph-app-kit/tree/master/src/components/Cypher)                         | A simple component to execute a Cypher query and return the result to your render function.                                                                                                                                                                              |  |\n| [\u0026lt;CypherEditor\u003e](https://github.com/neo4j-apps/graph-app-kit/tree/master/src/components/Editor)                   | A cypher editor component with code highlighting and autocomplete functionality.                                                                                                                                                                                         |\n| [\u0026lt;DesktopIntegration\u003e](https://github.com/neo4j-apps/graph-app-kit/tree/master/src/components/DesktopIntegration) | Easy integration for your app into the Neo4j Desktop API. Subscribe to events etc.                                                                                                                                                                                       |\n| [\u0026lt;DriverProvider\u003e](https://github.com/neo4j-apps/graph-app-kit/tree/master/src/components/DriverProvider)         | Provide your React application with a [`neo4j-driver`](https://github.com/neo4j/neo4j-javascript-driver) in application context.                                                                                                                                         |\n| [\u0026lt;GraphAppBase\u003e](https://github.com/neo4j-apps/graph-app-kit/tree/master/src/components/GraphAppBase)             | A base component for apps to reduce the amount of boilerplate code for connection handling. Integrates the app with the Neo4j Desktop API and provides the application with a [`neo4j-driver`](https://github.com/neo4j/neo4j-javascript-driver) in application context. |\n| [\u0026lt;Render\u003e](https://github.com/neo4j-apps/graph-app-kit/tree/master/src/components/Render)                         | A declarative toggling component to mount / unmount child components under certain conditions.                                                                                                                                                                           |\n\n## Install and import\n\n```bash\nnpm install graph-app-kit --registry https://neo.jfrog.io/neo/api/npm/npm\n// or\nyarn add graph-app-kit --registry https://neo.jfrog.io/neo/api/npm/npm\n```\n\n```javascript\nimport \"semantic-ui-css/semantic.min.css\";\nimport { Cypher } from \"graph-app-kit/components/Cypher\";\nimport { DriverProvider } from \"graph-app-kit/components/DriverProvider\";\nimport { Render } from \"graph-app-kit/components/Render\";\nimport { Chart } from \"graph-app-kit/components/Chart\";\nimport { CypherEditor } from \"graph-app-kit/components/Editor\";\n```\n\n## Component playground / library\n\nThere's an interactive playground to view and modify the components.\\\nThis is temporarily hosted at https://styleguide-cqfmjsxkhp.now.sh\n\nFeedback wanted!\n\nTo use the playground when developing components: `yarn playground` and to\ngenerate a static version to deploy: `yarn playground:build` (the artifacts end\nup in `styleguide/`)\n\n## Development mode\n\n```bash\ngit clone git@github.com:neo4j-apps/graph-app-kit.git graph-app-kit\ncd graph-app-kit\nyarn install\n```\n\n### Dev environment setup\n\nThe preferred way to develop new components is to either develop it directly in\n`src/dev/Component` or import there.\\\nTo start dev server on http://localhost:3000/ (loads `src/dev/index.js` in webpack):\n`yarn start`\\\nTo have continous testing (add tests to `src/dev/Component.test.js`): `yarn dev`\n\n### Exposing components\n\nHere's a checklist for things to be done before opening a PR with a new\ncomponent:\n\n1. Restore `src/dev` to it's initial state.\n1. Name the component file `ComponentName.js` and the test file\n   `ComponentName.test.js`.\n1. Export the component as a named export + a default export. Named for the kit\n   users and default for placing it in the playground.\n1. Add an `index.js` in the components directory, which just exports the named\n   import. i.e. `export { ComponentName } from './ComponentName'`.\n1. Execute `yarn test` and make sure the test coverage for the component is\n   reasonable.\n1. Add a `README.md` in the components directory where you showcase one (or\n   more) example usages and instructions of the component.\n1. Execute `yarn playground` to see it in action. Make sure it looks good and\n   makes sense.\n1. Add an import test for the component in `test_package/react/package.test.js`\n   AND `test_package/preact/preact.test.js`. Execute `yarn test:package` and\n   watch it fail.\n1. Add the component to the file `conf/kit_exports.js`. Follow the named / path\n   convention.\n1. Execute `yarn test:package` again and watch it pass.\n1. Open a PR and wait for praise.\n\n### Linting\n\n```bash\nyarn lint\n```\n\n### Testing\n\nSingle run:\n\n```\nyarn test\n// or for including production bundle tests\nyarn test:all\n```\n\nContinous testing (watch mode):\n\n```bash\nyarn dev\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fneo4j-devtools%2Fgraph-app-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fneo4j-devtools%2Fgraph-app-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fneo4j-devtools%2Fgraph-app-kit/lists"}