📺 GleamBR UI Lustre library

Gleam UI lustre library by @gleam-br

Como usar?

import lustre/element as el

import gbr/ui/theme

pub fn div_container(state) -> el.Element(msg) {
  // theme design
  let variant = theme.primary()
  let appearance = theme.filled()

  // theme create
  let theme =
    theme.new()
    |> theme.with_design_to_tokens(design_classes)
    |> theme.with_variant(variant:)
    |> theme.with_appearance(appearance:)
    |> theme.with_state(state:)

  // typo view with theme
  theme.div(theme:, attributes: [], elements: [])
}

fn design_classes(variant v, appearance a, state s) {
  case v, a, s {
    theme.VariantPrimary, theme.AppearanceFilled, _ -> [
      lustre.Class("bg-primary-500"),
      lustre.Classes([
        #("opacity-50 cursor-not-allowed", s == theme.StateDisabled),
      ]),
    ]
    _, _, _ -> [
      lustre.Class("bg-secondary-500"),
      lustre.Classes([
        #("opacity-75 cursor-wait", s == theme.StateLoading),
      ]),
    ]
  }
}

Outro exemplo: Um título utilizando o módulo auxiliar typo.

import lustre/element as el

import gbr/ui/theme
import gbr/ui/theme/typo

pub fn title(state) -> el.Element(msg) {
  // typography type
  let title = typo.H2
  // theme design
  let variant = theme.primary()
  let appearance = theme.filled()
  // theme create
  let theme =
    theme.new()
    |> theme.with_design_to_tokens(design_classes)
    |> theme.with_variant(variant:)
    |> theme.with_appearance(appearance:)
    |> theme.with_state(state:)

  // typo view with theme
  typo.view(title, theme:, attributes: [], elements: [])
}

fn design_classes(variant v, appearance a, state s) {
  case v, a, s {
    theme.VariantPrimary, theme.AppearanceFilled, theme.StatePressed -> [
      lustre.Class("text-primary-700"),
    ]

    theme.VariantPrimary, theme.AppearanceFilled, _ -> [
      lustre.Classes([
        #("text-primary-500", s == theme.StateIdle),
        #("opacity-50 cursor-wait", s == theme.StateLoading),
      ]),
    ]
    _, _, _ -> [
      lustre.Classes([
        #("text-secondary-500", s == theme.StateIdle),
        #("opacity-50 cursor-not-allowed", s == theme.StateDisabled),
      ]),
    ]
  }
}