82 lines
2.6 KiB
Markdown
82 lines
2.6 KiB
Markdown
# 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 –
|
|
|
|
- [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
|