https://github.com/tmattio/tyxml-components
Components for Tyxml, built with TailwindCSS and AlpineJS.
https://github.com/tmattio/tyxml-components
Last synced: 10 months ago
JSON representation
Components for Tyxml, built with TailwindCSS and AlpineJS.
- Host: GitHub
- URL: https://github.com/tmattio/tyxml-components
- Owner: tmattio
- License: mit
- Created: 2020-07-09T18:20:01.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-03-27T02:46:02.000Z (almost 4 years ago)
- Last Synced: 2025-03-20T16:16:40.292Z (10 months ago)
- Language: OCaml
- Homepage: https://tmattio.github.io/tyxml-components/
- Size: 2.31 MB
- Stars: 9
- Watchers: 1
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGES.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - tyxml-components
README
# Tyxml Components
[](https://github.com/tmattio/tyxml-components/actions)
Components for Tyxml, built with TailwindCSS and AlpineJS.
This repository provides two libraries:
- `tyxml-stories`- A library to build component explorers for your components.
- `tyxml-components` - A small set of reusable UI components built with TailwindCSS and AlpineJS
The primary purpose of `tyxml-components` is to offer reusable UI components for your backend. If you have a backend with some HTML generated with Tyxml.
The second purpose is to mimic a typical frontend development workflow when you are building server-side rendered applications. By typical workflow, I mean that the UI components are extracted in a component library / design system, and its development is done separately from the application development.
`tyxml-components` itself makes use of `tyxml-stories`, you can see the generated component explorer [here](https://tmattio.github.io/tyxml-components/).
## Using `tyxml-components`
Install it with:
```
opam install tyxml-components
```
And use the components in your application:
```ocaml
div [
Tyxml_components.alert (`error "An error occured while processing your request.")
]
```
## Using `tyxml-stories`
Install it with:
```
opam install tyxml-stories
```
You can copy the content of `example/` which providers a minimal component explorer. Otherwise, read further for the required steps to get started.
To build your own component explorer, you can first copy the `asset/` directory in your application. It provides the JS setup and static content needed to create a SPA application for the component explorer.
Then you can create a "binary" file that starts your application:
```ocaml
let () = Tyxml_stories.start ()
```
And configure dune to compile as Javascript:
```
(library
(name my_component_stories)
(libraries tyxml tyxml_stories tyxml_components)
(modules (:standard \ main))
(flags
(:standard -linkall)))
(executable
(name main)
(libraries my_component_stories)
(modes js))
```
A typical story looks like this:
```ocaml
open Incr_dom.Tyxml.Html
open Tyxml_components.Vdom
let view =
Tyxml_stories.Component.make
~title:"My story component"
~code:
{|
The demo code goes here.
|}
(div
~a:[ a_class [ "space-y-6 p-4" ] ]
[ p [ txt "Hello world" ] ])
let () = Tyxml_stories.add ~name:"My story" ~url:"/hello-world" view
```
## Contributing
Take a look at our [Contributing Guide](CONTRIBUTING.md).