{"id":22813176,"url":"https://github.com/morewings/structure","last_synced_at":"2025-04-22T16:20:33.559Z","repository":{"id":36980411,"uuid":"257343498","full_name":"morewings/structure","owner":"morewings","description":"Structure is a tool to view and edit tree-like graph data object.","archived":false,"fork":false,"pushed_at":"2025-04-08T10:23:40.000Z","size":50179,"stargazers_count":5,"open_issues_count":33,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-22T16:19:51.518Z","etag":null,"topics":["react","reactjs","redux","structure","structured-data","ui"],"latest_commit_sha":null,"homepage":"https://structure.ninja","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/morewings.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-04-20T16:39:31.000Z","updated_at":"2024-01-31T10:34:54.000Z","dependencies_parsed_at":"2023-10-03T09:50:01.474Z","dependency_job_id":"8be4b216-d362-45e5-b37f-48102fffe4b0","html_url":"https://github.com/morewings/structure","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morewings%2Fstructure","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morewings%2Fstructure/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morewings%2Fstructure/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morewings%2Fstructure/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/morewings","download_url":"https://codeload.github.com/morewings/structure/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250275553,"owners_count":21403680,"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":["react","reactjs","redux","structure","structured-data","ui"],"created_at":"2024-12-12T12:15:51.558Z","updated_at":"2025-04-22T16:20:33.503Z","avatar_url":"https://github.com/morewings.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Structure\n\n## Definition\n\n**Structure** is a tool to view and edit tree-like graph data object.\n\n## Development\n\n```shell script\nyarn start # starts dev mode\nyarn edit:fonts # opens icon font edit tool\n```\n\nDesign assets are located at [Google Drive](https://drive.google.com/open?id=1d373Aux91lg9t5Xefgj5E-W6LNbblATQ)\n\n## Feature description\n\n### Structure\n\nIncludes a hierarchy of **Nodes** inside Record-like collection.\n\n**Node** - entity which contains specific fields\n\n```js\nconst node = {\n  title: 'Initial Node', // node title\n  isDone: false, // Boolean value\n  children: [], // list of node ids\n  parentId: 'parentId', // id of parent\n  generation: 0, // number of generation\n  color: 'red', // name of color\n  id: 'id' // id of node\n}\n```\n\n### Modal\n\nContains Map like collection of **Modals**.\n\nModal is a React component.\n\n### Accordion\n\nContains Map like collection of accordion states. Each state related to the Node with same id.\n\n```js\nconst accordion = {\n  openNode: 'node_id'\n}\n```\n\n\n## Guides\n\n### How to add new modal\n\nCreate modal content component (`\u003cModalContent /\u003e`).\n\nAdd new modal type to `src/components/ModalManager/modalTypes.js`\n```js\nexport default Object.freeze({\n  // ...\n  NEW_MODAL_NAME: 'NEW_MODAL_NAME',\n  // ...\n});\n```\n\nDescribe connection between type and component in `src/components/ModalManager/useModalComponent.js`\n\n```js\nimport ModalContent from '@/components/ModalContent';\nimport modalTypes from './modalTypes';\n\nconst useModalComponent = modalType =\u003e\n  ({\n    // ...\n    [modalTypes.NEW_MODAL_NAME]: ModalContent,\n    // ...\n  }[modalType]);\n\n// ...\n```\n\nCreate action hook in `src/components/ModalManager/` folder.\n\n```js\nimport {useModalActions} from '@/features/modal';\nimport modalTypes from './modalTypes';\n\nconst useModalComponent = () =\u003e {\n  const {openModal} = useModalActions();\n  // we can pass props to ModalContent here, see `modalProps`. Props should be serializable since they are stored in redux.\n  return modalProps =\u003e {\n    openModal({\n      modalType: modalTypes.NEW_MODAL_NAME,\n      modalProps: modalProps,\n    });\n  };\n};\n```\n\n\nUse it like this:\n\n```jsx\nimport {useModalComponent} from '@/components/ModalManager';\n\nconst Component = () =\u003e {\n  //...\n  const showModal = useModalComponent();\n  // ...\n  return \u003cdiv onClick={showModal} /\u003e\n}\n```\n\n### Add new `Toast`\n\nAdd new `Toast` type to `@/components/ToastManager/toastTypes.js`\n```js\nexport default Object.freeze({\n  // ...\n  NEW_TOAST_NAME: 'NEW_TOAST_NAME',\n  // ...\n});\n```\n\nCreate `Toast` UI component.\n\nDescribe connection between type and new component in `src/components/ToastManager/useToastComponent.js`\n\n```js\nimport ToastContent from '@/components/ToastContent';\nimport toastTypes from './toastTypes';\n\nconst useToastComponent = toastType =\u003e\n  ({\n    // ...\n    [toastTypes.NEW_TOAST_NAME]: ToastContent,\n    // ...\n  }[toastType]);\n// ...\n```\n\nCreate state action hook in the new `Toast` component folder.\n\n```js\nimport {useCallback} from 'react';\n\nimport {useToastActions} from '@/features/toast';\nimport {toastTypes} from '@/components/ToastManager';\n\nexport const useToast = () =\u003e {\n  const {openToast} = useToastActions();\n  return useCallback(\n    ({text}) =\u003e {\n      openToast({\n        toastType: toastTypes.NEW_TOAST_NAME,\n        toastProps: {\n          text,\n        },\n      });\n    },\n    [openToast]\n  );\n};\n```\n\nUse it like this:\n\n```jsx\nimport {useToastComponent} from '@/components/ToastComponent';\n\nconst Component = () =\u003e {\n  //...\n  const showToast = useToastComponent();\n  // ...\n  return \u003cbutton onClick={showToast} /\u003e\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorewings%2Fstructure","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmorewings%2Fstructure","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorewings%2Fstructure/lists"}