<p align="center">
  <img src="https://raw.githubusercontent.com/ayoayco/astro-reactive-library/main/.github/assets/logo/min-banner.png" alt="Astro Reactive Library Logo">
  <br />
  <strong>Astro Reactive Library</strong>
  <br />
  Let your data build your UI with native <a href="https://astro.build">Astro</a> components and architecture.
  <br />
  <br />
  <a href="https://github.com/ayoayco/astro-reactive-library/actions/workflows/build-and-test.yml">
    <img src="https://github.com/ayoayco/astro-reactive-library/actions/workflows/build-and-test.yml/badge.svg?branch=main" alt="Build & Test Result" />
  </a>
  <a href="https://github.com/ayoayco/astro-reactive-library">
    <img alt="Last Commit" src="https://img.shields.io/github/last-commit/ayoayco/astro-reactive-library" />
  </a>
  <a href="https://gitpod.io/#https://github.com/ayoayco/astro-reactive-library.git">
  <img
    src="https://img.shields.io/badge/Contribute%20with-Gitpod-908a85?logo=gitpod"
    alt="Contribute with Gitpod"
  />
  </a>
  <a href="https://stackblitz.com/edit/github-ze9ebb-tthuka?file=package.json,src%2Fpages%2Findex.astro">
    <img
      src=" https://img.shields.io/badge/Play%20with-StackBlitz-2596be?logo=stackblitz"
      alt="Play around in StackBlitz"
    />
  </a>
  <a href="https://codesandbox.io/s/astro-reactive-library-u72dgj?file=/src/pages/index.astro">
    <img
      src="https://img.shields.io/badge/Play%20with-CodeSandbox-040404?logo=codesandbox"
      alt="CodeSandbox"
    />
  </a>
  <br />
  <br />
<p>

| Packages                                                                                              | Version                                                                                           | Description                                              |
| ----------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | -------------------------------------------------------- |
| [form](https://github.com/ayoayco/astro-reactive-library/blob/main/packages/form/README.md)           | [![npm](https://img.shields.io/npm/v/@astro-reactive/form)](./packages/form/RELEASE.md)           | a dynamic form which can be modified programmatically    |
| [validator](https://github.com/ayoayco/astro-reactive-library/blob/main/packages/validator/README.md) | [![npm](https://img.shields.io/npm/v/@astro-reactive/validator)](./packages/validator/RELEASE.md) | validators for editable fields                           |
| data-grid                                                                                             | 🛠                                                                                                 | a dynamic data grid of values                            |
| themes                                                                                                | 🛠                                                                                                 | easy-to-use, accessible, consistent cross-browser styles |
| viz                                                                                                   | 🛠                                                                                                 | data visualization that emits and responds to events     |

# HACKTOBERFEST 2022

[Hacktoberfest](https://hacktoberfest.com) has begun! 🚀

Any contribution is welcome. See our [contributing guide](https://github.com/ayoayco/astro-reactive-library/blob/main/CONTRIBUTING.md), and feel free to look around to find something that interests you. :)

Maybe add some themes to our form component? Or maybe an improvement for the README?

The [issues page](https://github.com/ayoayco/astro-reactive-library/issues?q=is%3Aopen+is%3Aissue+label%3A%22accepting+PRs%22) contains some ideas, but they should not limit your contribution.

If you don't find anything there, I'm happy to help you get your contribution in.

You can always [create a new issue](https://github.com/ayoayco/astro-reactive-library/issues/new/choose) for your own idea, [email me (ayo@ayco.io)](mailto:ayo@ayco.io) or message me on [Twitter (@ayoayco)](https://twitter.com/ayoayco).

# Running locally

We mainly use the `demo` app to see changes we make on the packages. Do the following to start hacking:

1. Fork the project then clone to your computer

```
git clone git@github.com:<your-user-name>/astro-reactive-library.git
```

2. Go into the project directory

```
cd astro-reactive-library
```

3. Install the node dependencies

```
npm i
```

4. Run the demo application

```
npm start
```

5. Open the demo application on your browser. Browse to the address:

```
https://localhost:3000
```

6. To run the tests:

```
npm test
```

## Other apps

We also maintain the docs website and the project landing page in this repository. Run the following to start the dev servers:

```
npm run docs
```

```
npm run landing-page
```

# Contributors

This project is only possible because of the support and contribution of our community ❤️

<a href="https://github.com/ayoayco/astro-reactive-library/graphs/contributors">
  <img src="https://contrib.rocks/image?repo=ayoayco/astro-reactive-library" />
</a>

👉 _[Join our contributors!](https://github.com/ayoayco/astro-reactive-library/blob/main/CONTRIBUTING.md)_
