{"id":16979147,"url":"https://github.com/yuichiroaoki/react-agentscript","last_synced_at":"2025-04-05T17:18:15.671Z","repository":{"id":42570711,"uuid":"401910961","full_name":"yuichiroaoki/react-agentscript","owner":"yuichiroaoki","description":"An agentscript react component","archived":false,"fork":false,"pushed_at":"2023-01-07T14:49:50.000Z","size":7943,"stargazers_count":0,"open_issues_count":6,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-15T19:46:07.752Z","etag":null,"topics":["agent","agent-based-modeling","agent-based-simulation","react","storybook","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-agentscript","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yuichiroaoki.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-09-01T02:50:06.000Z","updated_at":"2021-12-19T06:19:44.000Z","dependencies_parsed_at":"2023-02-07T11:16:38.711Z","dependency_job_id":null,"html_url":"https://github.com/yuichiroaoki/react-agentscript","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":"HarveyD/react-component-library","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuichiroaoki%2Freact-agentscript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuichiroaoki%2Freact-agentscript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuichiroaoki%2Freact-agentscript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuichiroaoki%2Freact-agentscript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yuichiroaoki","download_url":"https://codeload.github.com/yuichiroaoki/react-agentscript/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247369953,"owners_count":20927928,"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":["agent","agent-based-modeling","agent-based-simulation","react","storybook","typescript"],"created_at":"2024-10-14T01:44:57.939Z","updated_at":"2025-04-05T17:18:15.651Z","avatar_url":"https://github.com/yuichiroaoki.png","language":"JavaScript","readme":"# React Agentscript\n\n![build](https://github.com/yuichiroaoki/react-agentscript/actions/workflows/build.yaml/badge.svg)\n![test](https://github.com/yuichiroaoki/react-agentscript/actions/workflows/test.yaml/badge.svg)\n![codeql](https://github.com/yuichiroaoki/react-agentscript/actions/workflows/codeql-analysis.yml/badge.svg)\n![release](https://github.com/yuichiroaoki/react-agentscript/actions/workflows/release.yaml/badge.svg)\n[![License: GPL v3](https://img.shields.io/badge/License-GPLv3-blue.svg)](https://www.gnu.org/licenses/gpl-3.0)\n\nAn agentscript react component\n\n## Installation\n\n```bash\nnpm install react-agentscript ts-agent\n```\n\n## Usage\n\n```typescript\nimport React, { useState } from \"react\";\nimport Agentscript from \"./Agentscript\";\nimport Model from \"../models/AntsModel\";\n\nexport const AgentscriptComponent = () =\u003e {\n  const [anim, setAnim] = useState\u003cany | undefined\u003e();\n  const [reset, setReset] = useState\u003cboolean\u003e(false);\n  const [model, setModel] = useState\u003cany | undefined\u003e();\n\n  useEffect(() =\u003e {\n    updateModel();\n  }, []);\n\n  const updateModel = () =\u003e {\n    const newModel = new Model();\n    setModel(newModel);\n  };\n  return (\n    \u003cAgentscript\n      view={{\n        width: 800,\n        drawOptions: {\n          turtlesColor: (t) =\u003e (t.carryingFood ? \"red\" : \"blue\"),\n          patchesColor: (p) =\u003e {\n            if (p.isNest) return \"blue\";\n            if (p.isFood) return \"red\";\n            return \"black\";\n          },\n          turtlesSize: 5,\n          turtlesShape: \"bug\",\n        },\n      }}\n      animation={{\n        step: step,\n        fps: fps,\n      }}\n      reset={reset}\n      model={model}\n      setAnim={setAnim}\n    /\u003e\n  );\n};\n```\n\n## Development\n\n### Testing\n\n```\nnpm run test\n```\n\n### Building\n\n```\nnpm run build\n```\n\n### Storybook\n\nTo run a live-reload Storybook server on your local machine:\n\n```\nnpm run storybook\n```\n\nTo export your Storybook as static files:\n\n```\nnpm run storybook:export\n```\n\nYou can then serve the files under `storybook-static` using S3, GitHub pages, Express etc. I've hosted this library at: https://www.harveydelaney.com/react-component-library\n\n### Generating New Components\n\nI've included a handy NodeJS util file under `util` called `create-component.js`. Instead of copy pasting components to create a new component, you can instead run this command to generate all the files you need to start building out a new component. To use it:\n\n```\nnpm run generate YourComponentName\n```\n\nThis will generate:\n\n```\n/src\n  /YourComponentName\n    YourComponentName.tsx\n    YourComponentName.stories.tsx\n    YourComponentName.test.tsx\n    YourComponentName.types.ts\n    YourComponentName.scss\n```\n\nThe default templates for each file can be modified under `util/templates`.\n\nDon't forget to add the component to your `index.ts` exports if you want the library to export the component!\n\n### Installing Component Library Locally\n\nLet's say you have another project (`test-app`) on your machine that you want to try installing the component library into without having to first publish the component library. In the `test-app` directory, you can run:\n\n```\nnpm i --save ../react-component-library\n```\n\nwhich will install the local component library as a dependency in `test-app`. It'll then appear as a dependency in `package.json` like:\n\n```JSON\n  ...\n  \"dependencies\": {\n    ...\n    \"react-component-library\": \"file:../react-component-library\",\n    ...\n  },\n  ...\n```\n\nYour components can then be imported and used in that project.\n\n### Using Component Library SASS Variables\n\nI've found that it's helpful to export SASS variables to projects consuming the library. As such, I've added the `rollup-plugin-copy` NPM package and used it to copy the [`src/typography.scss`](src/typography.scss) and [`variables.scss`](src/variables.scss) into the `build` directory as part of the Rollup bundle process. This allows you to use these variables in your projects consuming the component library.\n\nFor example, let's say you installed `harvey-component-library` into your project. To use the exported variables/mixins, in a SASS file you would do the following:\n\n```Sass\n@import '~harvey-component-library/build/typography';\n\n.example-container {\n    @include heading;\n\n    color: $harvey-white;\n}\n```\n\n## Additional Help\n\n### Dark Mode\n\nThe example component `TestComponent` respects the user's dark mode operating system preferences and renders the component in the appropriate theme.\n\nThis is achieved by using the media query: `@media (prefers-color-scheme: dark)` in combination with CSS variables. The colours that change depending on dark mode preference can be found in [`src/variables.scss`](src/variables.scss). Example usage of these variables can be found within [`src/TestComponent/TestComponent.scss`](src/TestComponent/TestComponent.scss).\n\nRead https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme for more details.\n\n### Using Alternatives to Sass\n\n#### Less or Stylus\n\nThe Rollup plugin `rollup-plugin-postcss` supports Sass, Less and Stylus:\n\n- For Stylus, install stylus: `yarn add stylus --dev`\n- For Less, install less: `yarn add less --dev`\n\nYou can then remove `node-sass` from your dependencies.\n\n#### CSS Modules\n\nIf you want to use CSS Modules, update `postcss` in `rollup-config.js` to:\n\n```\npostcss({\n  modules: true\n})\n```\n\n#### Styled Components\n\nIf you want to use [`styled-components`](https://styled-components.com/), the changes required are a bit more involved. As such, I've created a branch where I've got `styled-components` working in this component library, [check it out here](https://github.com/HarveyD/react-component-library/tree/styled-components).\n\n### Component Code Splitting\n\nCode splitting of your components is not supported by default.\n\n[Read this section of my blog post](https://blog.harveydelaney.com/creating-your-own-react-component-library/#introducing-code-splitting-optional-) to find out how and why you would enable code splitting of your components. In summary, code splitting enables users to import components in isolation like:\n\n```\nimport TestComponent from 'harvey-component-library/build/TestComponent';\n```\n\nThis can reduce the bundle size for projects using older (CJS) module formats.\n\nYou can check out [this branch](https://github.com/HarveyD/react-component-library/tree/code-splitting) or [this commit](https://github.com/HarveyD/react-component-library/commit/94631be5a871f3b39dbc3e9bd3e75a8ae5b3b759) to see what changes are neccesary to implement it.\n\nPlease note, there's an issue with code splitting and using `rollup-plugin-postcss`. I recommend using `rollup-plugin-sass` instead alongside code splitting.\n\n### Supporting Image Imports\n\nAdd the following library to your component library [@rollup/plugin-image](https://github.com/rollup/plugins/tree/master/packages/image):\n\n```\nnpm i -D @rollup/plugin-image\n```\n\nThen add it to `rollup-config.js`:\n\n```\n...\nplugins:[\n  ...,\n  image(),\n  ...\n]\n...\n```\n\nYou can then import and render images in your components like:\n\n```tsx\nimport logo from \"./rollup.png\";\n\nexport const ImageComponent = () =\u003e (\n  \u003cdiv\u003e\n    \u003cimg src={logo} /\u003e\n  \u003c/div\u003e\n);\n```\n\n### Supporting JSON Imports\n\nAdd the following library to your component library [@rollup/plugin-json](https://github.com/rollup/plugins/tree/master/packages/json):\n\n```\nnpm i -D @rollup/plugin-json\n```\n\nThen add it to `rollup-config.js`:\n\n```\n...\nplugins:[\n  ...,\n  json(),\n  ...\n]\n...\n```\n\nYou can then import and use JSON as ES6 Modules:\n\n```tsx\nimport data from \"./some-data.json\";\n\nexport const JsonDataComponent = () =\u003e \u003cdiv\u003e{data.description}\u003c/div\u003e;\n```\n\nCheckout the [official Rollup plugin list](https://github.com/rollup/plugins) for additional helpful plugins.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyuichiroaoki%2Freact-agentscript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyuichiroaoki%2Freact-agentscript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyuichiroaoki%2Freact-agentscript/lists"}