diff options
author | Hayleigh Thompson <me@hayleigh.dev> | 2024-01-27 02:24:50 +0000 |
---|---|---|
committer | Hayleigh Thompson <me@hayleigh.dev> | 2024-01-27 02:24:50 +0000 |
commit | c34d1a0e9003d483752720466def696c30f705c8 (patch) | |
tree | b6e693c3b3d971a9d449daeb461b1a867177ad39 /examples/input | |
parent | 235fcd2ae0229272ebb0927806d301c8b887c1ba (diff) | |
download | lustre-c34d1a0e9003d483752720466def696c30f705c8.tar.gz lustre-c34d1a0e9003d483752720466def696c30f705c8.zip |
:construction: Start replacing old test examples with structured examples.
Diffstat (limited to 'examples/input')
-rw-r--r-- | examples/input/gleam.toml | 7 | ||||
-rw-r--r-- | examples/input/manifest.toml | 15 | ||||
-rw-r--r-- | examples/input/src/input.gleam | 120 |
3 files changed, 0 insertions, 142 deletions
diff --git a/examples/input/gleam.toml b/examples/input/gleam.toml deleted file mode 100644 index 5d891e8..0000000 --- a/examples/input/gleam.toml +++ /dev/null @@ -1,7 +0,0 @@ -name = "input" -version = "1.0.0" -target = "javascript" - -[dependencies] -gleam_stdlib = "~> 0.34" -lustre = { path = "../../" }
\ No newline at end of file diff --git a/examples/input/manifest.toml b/examples/input/manifest.toml deleted file mode 100644 index 16bdd27..0000000 --- a/examples/input/manifest.toml +++ /dev/null @@ -1,15 +0,0 @@ -# This file was generated by Gleam -# You typically do not need to edit this file - -packages = [ - { name = "gleam_erlang", version = "0.24.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_erlang", source = "hex", outer_checksum = "26BDB52E61889F56A291CB34167315780EE4AA20961917314446542C90D1C1A0" }, - { name = "gleam_json", version = "0.7.0", build_tools = ["gleam"], requirements = ["gleam_stdlib", "thoas"], otp_app = "gleam_json", source = "hex", outer_checksum = "CB405BD93A8828BCD870463DE29375E7B2D252D9D124C109E5B618AAC00B86FC" }, - { name = "gleam_otp", version = "0.9.0", build_tools = ["gleam"], requirements = ["gleam_stdlib", "gleam_erlang"], otp_app = "gleam_otp", source = "hex", outer_checksum = "5FADBBEC5ECF3F8B6BE91101D432758503192AE2ADBAD5602158977341489F71" }, - { name = "gleam_stdlib", version = "0.34.0", build_tools = ["gleam"], requirements = [], otp_app = "gleam_stdlib", source = "hex", outer_checksum = "1FB8454D2991E9B4C0C804544D8A9AD0F6184725E20D63C3155F0AEB4230B016" }, - { name = "lustre", version = "3.1.1", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_json", "gleam_otp", "gleam_stdlib"], source = "local", path = "../.." }, - { name = "thoas", version = "0.4.1", build_tools = ["rebar3"], requirements = [], otp_app = "thoas", source = "hex", outer_checksum = "4918D50026C073C4AB1388437132C77A6F6F7C8AC43C60C13758CC0ADCE2134E" }, -] - -[requirements] -gleam_stdlib = { version = "~> 0.34" } -lustre = { path = "../../" } diff --git a/examples/input/src/input.gleam b/examples/input/src/input.gleam deleted file mode 100644 index 6425b0c..0000000 --- a/examples/input/src/input.gleam +++ /dev/null @@ -1,120 +0,0 @@ -// IMPORTS --------------------------------------------------------------------- - -import gleam/dynamic -import gleam/string -import lustre -import lustre/attribute.{attribute} -import lustre/element.{type Element, text} -import lustre/element/html.{div, input, label, pre} -import lustre/event - -// MAIN ------------------------------------------------------------------------ - -pub fn main() { - // A `simple` lustre application doesn't produce `Effect`s. These are best to - // start with if you're just getting started with lustre or you know you don't - // need the runtime to manage any side effects. - let app = lustre.simple(init, update, view) - let assert Ok(_) = lustre.start(app, "[data-lustre-app]", Nil) - - Nil -} - -// MODEL ----------------------------------------------------------------------- - -type Model { - Model(email: String, password: String, remember_me: Bool) -} - -fn init(_) -> Model { - Model(email: "", password: "", remember_me: False) -} - -// UPDATE ---------------------------------------------------------------------- - -type Msg { - Typed(Input, String) - Toggled(Control, Bool) -} - -type Input { - Email - Password -} - -type Control { - RememberMe -} - -fn update(model: Model, msg: Msg) -> Model { - case msg { - Typed(Email, email) -> Model(..model, email: email) - Typed(Password, password) -> Model(..model, password: password) - Toggled(RememberMe, remember_me) -> Model(..model, remember_me: remember_me) - } -} - -// RENDER ---------------------------------------------------------------------- - -fn view(model: Model) -> Element(Msg) { - div([attribute.class("container")], [ - card([ - email_input(model.email), - password_input(model.password), - remember_checkbox(model.remember_me), - pre([attribute.class("debug")], [ - string.inspect(model) - |> string.replace("(", "(\n ") - |> string.replace(", ", ",\n ") - |> string.replace(")", "\n)") - |> text, - ]), - ]), - ]) -} - -fn card(content: List(Element(a))) -> Element(a) { - div([attribute.class("card")], [div([], content)]) -} - -fn email_input(value: String) -> Element(Msg) { - render_input(Email, "email", "email-input", value, "Email address") -} - -fn password_input(value: String) -> Element(Msg) { - render_input(Password, "password", "password-input", value, "Password") -} - -fn render_input( - field: Input, - type_: String, - id: String, - value: String, - label_: String, -) -> Element(Msg) { - div([attribute.class("input")], [ - label([attribute.for(id)], [text(label_)]), - input([ - attribute.id(id), - attribute.name(id), - attribute.type_(type_), - attribute.required(True), - attribute.value(dynamic.from(value)), - event.on_input(fn(value) { Typed(field, value) }), - ]), - ]) -} - -fn remember_checkbox(checked: Bool) -> Element(Msg) { - div([attribute.class("flex items-center")], [ - input([ - attribute.id("remember-me"), - attribute.name("remember-me"), - attribute.type_("checkbox"), - attribute.checked(checked), - attribute.class("checkbox"), - event.on_click(Toggled(RememberMe, !checked)), - ]), - label([attribute.for("remember-me")], [text("Remember me")]), - ]) -} |