Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yuichiroaoki/react-agentscript
An agentscript react component
https://github.com/yuichiroaoki/react-agentscript
agent agent-based-modeling agent-based-simulation react storybook typescript
Last synced: 7 days ago
JSON representation
An agentscript react component
- Host: GitHub
- URL: https://github.com/yuichiroaoki/react-agentscript
- Owner: yuichiroaoki
- License: gpl-3.0
- Created: 2021-09-01T02:50:06.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-01-07T14:49:50.000Z (about 2 years ago)
- Last Synced: 2025-01-17T18:52:51.415Z (about 1 month ago)
- Topics: agent, agent-based-modeling, agent-based-simulation, react, storybook, typescript
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-agentscript
- Size: 7.58 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# React Agentscript
[](https://www.gnu.org/licenses/gpl-3.0)
An agentscript react component
## Installation
```bash
npm install react-agentscript ts-agent
```
## Usage
```typescript
import React, { useState } from "react";
import Agentscript from "./Agentscript";
import Model from "../models/AntsModel";
export const AgentscriptComponent = () => {
const [anim, setAnim] = useState();
const [reset, setReset] = useState(false);
const [model, setModel] = useState();
useEffect(() => {
updateModel();
}, []);
const updateModel = () => {
const newModel = new Model();
setModel(newModel);
};
return (
(t.carryingFood ? "red" : "blue"),
patchesColor: (p) => {
if (p.isNest) return "blue";
if (p.isFood) return "red";
return "black";
},
turtlesSize: 5,
turtlesShape: "bug",
},
}}
animation={{
step: step,
fps: fps,
}}
reset={reset}
model={model}
setAnim={setAnim}
/>
);
};
```
## Development
### Testing
```
npm run test
```
### Building
```
npm run build
```
### Storybook
To run a live-reload Storybook server on your local machine:
```
npm run storybook
```
To export your Storybook as static files:
```
npm run storybook:export
```
You 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
### Generating New Components
I'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:
```
npm run generate YourComponentName
```
This will generate:
```
/src
/YourComponentName
YourComponentName.tsx
YourComponentName.stories.tsx
YourComponentName.test.tsx
YourComponentName.types.ts
YourComponentName.scss
```
The default templates for each file can be modified under `util/templates`.
Don't forget to add the component to your `index.ts` exports if you want the library to export the component!
### Installing Component Library Locally
Let'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:
```
npm i --save ../react-component-library
```
which will install the local component library as a dependency in `test-app`. It'll then appear as a dependency in `package.json` like:
```JSON
...
"dependencies": {
...
"react-component-library": "file:../react-component-library",
...
},
...
```
Your components can then be imported and used in that project.
### Using Component Library SASS Variables
I'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.
For 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:
```Sass
@import '~harvey-component-library/build/typography';
.example-container {
@include heading;
color: $harvey-white;
}
```
## Additional Help
### Dark Mode
The example component `TestComponent` respects the user's dark mode operating system preferences and renders the component in the appropriate theme.
This 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).
Read https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme for more details.
### Using Alternatives to Sass
#### Less or Stylus
The Rollup plugin `rollup-plugin-postcss` supports Sass, Less and Stylus:
- For Stylus, install stylus: `yarn add stylus --dev`
- For Less, install less: `yarn add less --dev`
You can then remove `node-sass` from your dependencies.
#### CSS Modules
If you want to use CSS Modules, update `postcss` in `rollup-config.js` to:
```
postcss({
modules: true
})
```
#### Styled Components
If 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).
### Component Code Splitting
Code splitting of your components is not supported by default.
[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:
```
import TestComponent from 'harvey-component-library/build/TestComponent';
```
This can reduce the bundle size for projects using older (CJS) module formats.
You 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.
Please note, there's an issue with code splitting and using `rollup-plugin-postcss`. I recommend using `rollup-plugin-sass` instead alongside code splitting.
### Supporting Image Imports
Add the following library to your component library [@rollup/plugin-image](https://github.com/rollup/plugins/tree/master/packages/image):
```
npm i -D @rollup/plugin-image
```
Then add it to `rollup-config.js`:
```
...
plugins:[
...,
image(),
...
]
...
```
You can then import and render images in your components like:
```tsx
import logo from "./rollup.png";
export const ImageComponent = () => (
);
```
### Supporting JSON Imports
Add the following library to your component library [@rollup/plugin-json](https://github.com/rollup/plugins/tree/master/packages/json):
```
npm i -D @rollup/plugin-json
```
Then add it to `rollup-config.js`:
```
...
plugins:[
...,
json(),
...
]
...
```
You can then import and use JSON as ES6 Modules:
```tsx
import data from "./some-data.json";
export const JsonDataComponent = () =>
{data.description};
```
Checkout the [official Rollup plugin list](https://github.com/rollup/plugins) for additional helpful plugins.