README.md

# Supabase UI for Surface (WIP)

[![Hex.pm](https://img.shields.io/hexpm/v/supabase_surface.svg)](https://hex.pm/packages/supabase_surface)

A component library for [Supabase](supabase.io) and [Surface](https://surface-ui.org/).

[Here](https://github.com/treebee/supabase_surface_demo) you can find a demo application
using this project.

This library can be used in a
[Phoenix LiveView](https://github.com/phoenixframework/phoenix_live_view) project
that uses Surface as a component library.
It provides components

- styled like the React components of [Supabase UI](https://github.com/supabase/ui/) (it actually uses )
- implementing functionality to handle things like [authentication](https://supabase.io/docs/guides/auth)

There are additional things, for example a [plug](https://github.com/elixir-plug/plug)
that checks the expiration time of an access_token stored in the session and
does a refresh if necessary.

## Installation

```elixir
def deps do
  [
    {:supabase_surface, "~> 0.1.4"}
  ]
end
```

You also have to add the JavaScript library as a dependency so that hooks and
other things are working:

```javascript
// package.json
"dependencies": {
    ...
    "supabase_surface": "file:../deps/supabase_surface",
    ...
}
```

And for the styles, in case of a standard phoenix live view project:

```css
/* app.scss */
@import "supabase_surface";
```

`supabase-surface` uses AlpineJS, so you will have to add

```javascript
let liveSocket = new LiveSocket("/live", Socket, {
  ...,
  dom: {
    onBeforeElUpdated(from, to){
      if(from.__x){ window.Alpine.clone(from.__x, to) }
    }
  },
})
```

to your `app.js`.

## Component Catalogue

You can also checkout the Repository and start the component catalogue to have live documentation:

    mix deps.get
    mix dev

    # or for another port

    PORT=4444 mix dev

## Credits

- **SupabaseUI**: we use a copy of CSS files and the TailwindCSS config
- **Surface**: used as the base component library; also directly copied some of the functionality
- **TailwindCSS** and **Heroicons** (with https://github.com/mveytsman/heroicons_elixir)
- **AlpineJS**: to provide better UX for components like Dropdowns
- **Phoenix/LiveView**