{"id":24562562,"url":"https://github.com/humanbrainproject/hbp-react-ui","last_synced_at":"2025-03-16T23:14:02.551Z","repository":{"id":57261894,"uuid":"98168994","full_name":"HumanBrainProject/hbp-react-ui","owner":"HumanBrainProject","description":"A library of useful user-interface components built with React and MobX","archived":false,"fork":false,"pushed_at":"2018-04-03T06:57:47.000Z","size":175,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-08T16:37:42.448Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HumanBrainProject.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-24T08:42:49.000Z","updated_at":"2018-04-03T06:56:53.000Z","dependencies_parsed_at":"2022-08-25T06:10:57.944Z","dependency_job_id":null,"html_url":"https://github.com/HumanBrainProject/hbp-react-ui","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HumanBrainProject%2Fhbp-react-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HumanBrainProject%2Fhbp-react-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HumanBrainProject%2Fhbp-react-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HumanBrainProject%2Fhbp-react-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HumanBrainProject","download_url":"https://codeload.github.com/HumanBrainProject/hbp-react-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243945623,"owners_count":20372897,"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":"2025-01-23T09:16:15.552Z","updated_at":"2025-03-16T23:14:02.524Z","avatar_url":"https://github.com/HumanBrainProject.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# hbp-react-ui\nA library of useful user-interface components built with React and MobX.\n\nThey are written in ES6 and require Babel to transpile, with the following (order-sensitive) parameters:\n\n```\n    \"presets\": [\n        \"es2015\",\n        \"react\" // Transpile React components to JavaScript\n    ],\n    \"plugins\": [\n        \"transform-decorators-legacy\",\n        \"transform-class-properties\" // This order is important: last-to-first\n    ],\n```\n\nBootstrap is also required for styling and icon fonts.\n\n\n## **Install:**\n\n```\nnpm install -D hbp-react-ui\n```\n\n\n## **Logging:**\n\nTo enable console logging, add the following to the global namespace:\n```\n        \u003cscript\u003e\n\n        _hbp_debug_ = true; // Enable console logging for all components\n\n        \u003c/script\u003e \n```\n\n\n## **Contents:**\n\n* DatePicker\n* DynamicList\n* InputText\n* Select\n* Tree\n\nThe components use common styling to ensure visual compatibility e.g. height \u0026 width, between Chrome and Firefox.\n\nPlease see the detailed descriptions of the individual components below...\n\n---\n\n### DatePicker\n\nA simple wrapper for ```\u003cinput type='date'/\u003e```.\n\n---\n\n### DynamicList\n\nBuild a list of strings from a text selection or text input, optionally notifying a sink of updates.\n\nEach item in the list has a button to delete itself.\n\nNote: Uses name-value pair objects instead of primitive data types e.g.  ```{ name: 'Male', value: 'M' }```.\nThis allows for a human-readable display form and an alternative identifier for storage.\n\n---\n\n### InputText\n\nA simple wrapper for ```\u003cinput type='text'/\u003e```.\n\n---\n\n### Select\n\nAllows an item to be selected from a list, optionally notifying a sink\n\nNote: Uses name-value pair objects instead of primitive data types e.g.  ```{ name: 'Male', value: 'M' }```.\nThis allows for a human-readable display form and an alternative identifier for storage.\n\n---\n\n### Tree\n\nBuild a hierarchical tree with expandable/collapsible nodes. Each node consists of a name, a value and optional children. Clicking on a node notifies an event sink of the selected value.\n\n\n```\nimport { Tree } from 'hbp-react-ui';\n\nclass ShowMe extends React.Component {\n    render() {\n        return (\n            \u003cdiv\u003e\n                \u003cTree\n                    path={'/Category/Item'}\n                    onSelect={this.onSelect.bind(this)} \n                    data={this.data}\n                /\u003e\n            \u003c/div\u003e\n        );\n    }\n\n    onSelect(path, node) {\n        console.log(`onSelect: ${path} - {name: '${node.name}', value: '${node.value}'}`);\n    }\n}\n```\n\nThe tree is initialised with a JSON data structure, ```data```, of the following form:\n```\n    {\n        \"name\": \"olfactory nerve\",\n        \"value\": \"MBA:840\",\n        \"children\": [\n            {\n                \"name\": \"olfactory nerve layer of main olfactory bulb\",\n                \"value\": \"MBA:1016\"\n            },\n            {\n                \"name\": \"lateral olfactory tract, general\",\n                \"value\": \"MBA:21\",\n                \"children\": [\n                    {\n                        \"name\": \"lateral olfactory tract, body\",\n                        \"value\": \"MBA:665\"\n                    }\n                ]\n            },\n            {\n                \"name\": \"anterior commissure, olfactory limb\",\n                \"value\": \"MBA:900\"\n            }\n        ]\n    }, etc...\n```\n\nThe component recurses down the structure, creating ```\u003cul\u003e```'s with ```\u003cli\u003e```'s. Each ```\u003cli\u003e``` contains an ```\u003ca\u003e``` and optionally another child ```\u003cul\u003e```.\n\n\n\n---\n\n![](https://www.humanbrainproject.eu/static/img/HBP_logo.svg)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhumanbrainproject%2Fhbp-react-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhumanbrainproject%2Fhbp-react-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhumanbrainproject%2Fhbp-react-ui/lists"}