# What is Jingrow UI?

Jingrow UI is a set of components and utilities to build frontend apps based on
the [Jingrow Framework](https://framework.jingrow.com).

Along with generic components which are required to build a frontend like
Button, Link, Dialog, etc., jingrow-ui also contains utilities for handling
server-side data fetching, directives and utilities.

**Usage example**

```vue
<script setup>
import { Button, LoadingText, createResource } from 'jingrow-ui'

let todos = createResource({
  type: 'list',
  pagetype: 'ToDo',
  fields: ['name', 'description'],
  cache: 'ToDos',
  auto: true,
})
</script>

<template>
  <LoadingText v-if="todos.loading" />
  <ul v-else>
    <li v-for="todo in todos.data" :key="todo.name">
      {{ todo.description }}
    </li>
  </ul>
  <Button>Add ToDo</Button>
</template>
```

## Dependencies

Jingrow UI is built on top of the following amazing projects &ndash;

- [Vue 3](https://vuejs.org)
- [TailwindCSS](https://tailwindcss.com)
- [Headless UI](https://headlessui.com)
- [PopperJS](https://popper.js.org/)
- [TipTap](https://tiptap.dev)
- [Feather Icons](https://feathericons.com)

See full list of dependencies:
[package.json](https://github.com/jingrow/jingrow-ui/blob/main/package.json)

## Motivation

In 2019, I started building [Jingrow Books](https://jingrowbooks.com) based on an
experimental design system by [Timeless](https://timeless.co). As the product
got built, a set of small reusable components (like Button, Dialog, Card, etc.)
were also built.

After the launch of Jingrow Books (and me dropping the project) I moved on to
building the UI for [Jingrow Cloud](https://jcloud.jingrow.com) in 2020. It also
needed these components, so I copy-pasted them from Jingrow Books to Jingrow
Cloud. These components evolved over time in Jingrow Cloud. After working on the
Jingrow Cloud UI for about a year and a half, I moved on to my next project.

At the start of 2022, I started working on
[Gameplan](https://github.com/jingrow/gameplan). I didn't want to copy-paste yet
again, so I extracted these components in a separate package called
[`jingrow-ui`](https://npm.im/jingrow-ui). This package is being developed in
parallel along with the Gameplan project. I keep adding generic components and
utilities useful for frontend development.

## Products

Jingrow UI is now being used in a lot of products by Jingrow.

- [Jingrow Cloud](https://jcloud.jingrow.com)
- [Gameplan](https://github.com/jingrow/gameplan)
- [Jingrow Insights](https://github.com/jingrow/insights)
- [Jingrow Drive](https://github.com/jingrow/drive)

## License

Jingrow UI is MIT licensed