Use shared styles examples

Author: ghivert

e2e/redraw_example/gleam.toml

@@ -13,6 +13,7 @@ redraw = ">= 1.1.0 and < 2.0.0"
 redraw_dom = ">= 1.1.0 and < 2.0.0"
 sketch = ">= 3.0.2 and < 4.0.0"
 sketch_redraw = {path = "../../sketch_redraw"}
+shared_styles = {path = "../shared_styles"}
 
 [dev-dependencies]
 gleeunit = ">= 1.0.0 and < 2.0.0"

e2e/redraw_example/index.html

@@ -5,10 +5,23 @@
     <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Zain:wght@200;300;400;700;800;900&display=swap"
+      rel="stylesheet"
+    />
     <style>
       body {
-        font-family: sans-serif;
         margin: 0;
+        font-family: Zain;
+      }
+      :root {
+        --atomic-tangerine: #f79256;
+        --aquamarine: #acfcd9;
+        --turquoise: #5dd9c1;
+        --periwinkle: #a6b1e1;
+        --purple: #dcd6f7;
       }
     </style>
   </head>

e2e/redraw_example/manifest.toml

@@ -2,14 +2,15 @@
 # You typically do not need to edit this file
 
 packages = [
-  { name = "gleam_erlang", version = "0.25.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_erlang", source = "hex", outer_checksum = "054D571A7092D2A9727B3E5D183B7507DAB0DA41556EC9133606F09C15497373" },
-  { name = "gleam_javascript", version = "0.12.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_javascript", source = "hex", outer_checksum = "6EB652538B31E852FE0A8307A8B6314DEB34930944B6DDC41CCC31CA344DA35D" },
-  { name = "gleam_otp", version = "0.11.2", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_stdlib"], otp_app = "gleam_otp", source = "hex", outer_checksum = "517FFB679E44AD71D059F3EF6A17BA6EFC8CB94FA174D52E22FB6768CF684D78" },
-  { name = "gleam_stdlib", version = "0.40.0", build_tools = ["gleam"], requirements = [], otp_app = "gleam_stdlib", source = "hex", outer_checksum = "86606B75A600BBD05E539EB59FABC6E307EEEA7B1E5865AFB6D980A93BCB2181" },
+  { name = "gleam_erlang", version = "0.28.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_erlang", source = "hex", outer_checksum = "BE551521F708DCE5CB954AFBBDF08519C1C44986521FD40753608825F48FFA9E" },
+  { name = "gleam_javascript", version = "0.13.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_javascript", source = "hex", outer_checksum = "F98328FCF573DA6F3A35D7F6CB3F9FF19FD5224CCBA9151FCBEAA0B983AF2F58" },
+  { name = "gleam_otp", version = "0.13.0", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_stdlib"], otp_app = "gleam_otp", source = "hex", outer_checksum = "F7EA44C81679B2A6032FF1B3851F0EFB43F4F1F1CAC616CB7F4A18497F39FAB9" },
+  { name = "gleam_stdlib", version = "0.41.0", build_tools = ["gleam"], requirements = [], otp_app = "gleam_stdlib", source = "hex", outer_checksum = "1B2F80CB1B66B027E3198A2FF71EF3F2F31DF89ED97AD606F25FD387A4C3C1EF" },
   { name = "gleeunit", version = "1.2.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleeunit", source = "hex", outer_checksum = "F7A7228925D3EE7D0813C922E062BFD6D7E9310F0BEE585D3A42F3307E3CFD13" },
   { name = "redraw", version = "1.1.0", build_tools = ["gleam"], requirements = ["gleam_javascript", "gleam_stdlib"], otp_app = "redraw", source = "hex", outer_checksum = "4E6F55F965FD7A4B0514E269AC61BF8EF5EE421DCC19333BF80F4874250FDFB6" },
   { name = "redraw_dom", version = "1.1.0", build_tools = ["gleam"], requirements = ["gleam_stdlib", "redraw"], otp_app = "redraw_dom", source = "hex", outer_checksum = "0FFAAA6FFA52B88C1506EB6908E07479DA51B9F55F875A596E0B48E30FCE5DCE" },
-  { name = "sketch", version = "3.0.2", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_otp", "gleam_stdlib"], otp_app = "sketch", source = "hex", outer_checksum = "66D80F1F42FEE77960DD13E20636D4BAC10857B15AE6EA73B188F74B39E56BA7" },
+  { name = "shared_styles", version = "1.0.0", build_tools = ["gleam"], requirements = ["gleam_stdlib", "sketch"], source = "local", path = "../shared_styles" },
+  { name = "sketch", version = "3.1.0", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_otp", "gleam_stdlib"], otp_app = "sketch", source = "hex", outer_checksum = "F162070BCCF8BEF28C9520E80501565403E681D9E3F80844EC5ED307A2E4ADDF" },
   { name = "sketch_redraw", version = "1.0.0", build_tools = ["gleam"], requirements = ["gleam_stdlib", "redraw", "sketch"], source = "local", path = "../../sketch_redraw" },
 ]
 
@@ -18,5 +19,6 @@ gleam_stdlib = { version = ">= 0.34.0 and < 2.0.0" }
 gleeunit = { version = ">= 1.0.0 and < 2.0.0" }
 redraw = { version = ">= 1.1.0 and < 2.0.0" }
 redraw_dom = { version = ">= 1.1.0 and < 2.0.0" }
+shared_styles = { path = "../shared_styles" }
 sketch = { version = ">= 3.0.2 and < 4.0.0" }
 sketch_redraw = { path = "../../sketch_redraw" }

e2e/redraw_example/src/components.gleam

@@ -0,0 +1,82 @@
+//// Defines the base components used in the shared view. Think copmonents as in
+//// functions that simply returns the HTML correctly formatted.
+//// Every component accepts two arrays, attributes and children, to follow the
+//// same convention as Lustre standard HTML. That way, you could leverage on
+//// your knowledge of Lustre, and behaves exactly as expected.
+
+import redraw
+import redraw/html as h
+import shared_styles as styles
+import sketch/redraw/html
+
+pub fn body(attrs, children) {
+  // demonstrate ability to merge fragment at root
+  redraw.fragment([
+    html.div(styles.body_style(), attrs, children),
+    h.footer([], []),
+  ])
+}
+
+pub fn topbar(attrs, children) {
+  html.div(styles.topbar_style(), attrs, children)
+}
+
+pub fn headline(value, attrs, children) {
+  html.main(styles.headline_style(value), attrs, children)
+}
+
+pub fn headline_subtitle(attrs, children) {
+  html.div(styles.headline_subtitle_style(), attrs, children)
+}
+
+pub fn headline_emphasize(attrs, children) {
+  html.div(styles.headline_emphasize_style(), attrs, children)
+}
+
+pub fn counter(attrs, children) {
+  html.div(styles.counter_style(), attrs, children)
+}
+
+pub fn counter_title(attrs, children) {
+  h.div(attrs, children)
+}
+
+pub fn counter_subtitle(attrs, children) {
+  html.div(styles.counter_subtitle_style(), attrs, children)
+}
+
+pub fn button(attrs, children) {
+  html.button(styles.button_style(), attrs, children)
+}
+
+pub fn value(attrs, children) {
+  html.div(styles.value_style(), attrs, children)
+}
+
+pub fn value_content(attrs, children) {
+  html.div(styles.value_content_style(), attrs, children)
+}
+
+pub fn showcase(attrs, children) {
+  html.div(styles.showcase_style(), attrs, children)
+}
+
+pub fn counter_body(attrs, children) {
+  html.div(styles.counter_body_style(), attrs, children)
+}
+
+pub fn counter_body_title(attrs, children) {
+  html.div(styles.counter_body_title_style(), attrs, children)
+}
+
+pub fn counter_counter(attrs, children) {
+  html.div(styles.counter_counter_style(), attrs, children)
+}
+
+pub fn showcase_body(attrs, children) {
+  html.div(styles.showcase_body_style(), attrs, children)
+}
+
+pub fn card_title(attrs, children) {
+  h.div(attrs, children)
+}

e2e/redraw_example/src/redraw_example.gleam

@@ -1,11 +1,11 @@
+import components
+import gleam/int
 import redraw
+import redraw/attribute as a
 import redraw/handler
 import redraw/html as h
 import redraw_dom/client
-import sketch as s
 import sketch/redraw as sr
-import sketch/redraw/html as sh
-import sketch/size.{px, vh}
 
 pub fn main() {
   let app = app()
@@ -14,99 +14,62 @@ pub fn main() {
 }
 
 fn app() {
+  let view_counter_description = view_counter_description()
+  let view_counter = view_counter()
+  let showcase = showcase()
   use <- redraw.component__("App")
   let #(count, set_count) = redraw.use_state_(0)
-  let on_click = handler.on_click(fn(_) { set_count(fn(c) { c + 1 }) })
-  sh.div(body(), [], [
-    sh.div(wrapper(), [], [
-      sh.h1(main_title(), [], [h.text("Sketch")]),
-      sh.div(subtitle(), [], [h.text("CSS-in-Gleam, made simple")]),
+  let increment = handler.on_click(fn(_) { set_count(fn(c) { c + 1 }) })
+  let decrement = handler.on_click(fn(_) { set_count(fn(c) { c - 1 }) })
+  components.body([], [
+    components.topbar([], [h.text("Sketch")]),
+    components.headline(count, [], [
+      components.headline_subtitle([], [h.text("CSS-in-Gleam")]),
+      components.headline_emphasize([], [
+        h.text("Improve your CSS"),
+        h.br([]),
+        h.text("with Sketch"),
+      ]),
     ]),
-    sh.div(button_wrapper(), [], [
-      sh.button(button(), [on_click], [h.text("Change color")]),
-      sh.div(square_wrapper(), [], [
-        sh.div(square_behind(count + 1), [], []),
-        sh.div(square(count), [], []),
+    components.counter([], [
+      components.counter_body([], [
+        components.counter_body_title([], [
+          view_counter_description(),
+          view_counter(#(count, increment, decrement)),
+        ]),
       ]),
+      components.card_title([], [h.text("See it in action")]),
     ]),
+    showcase(),
   ])
 }
 
-fn body() {
-  s.class([
-    s.height(vh(100)),
-    s.display("flex"),
-    s.flex_direction("column"),
-    s.justify_content("center"),
-    s.align_items("center"),
-    s.gap(px(24)),
-  ])
-}
-
-fn wrapper() {
-  s.class([s.display("flex"), s.gap(px(12)), s.align_items("baseline")])
-}
-
-fn main_title() {
-  s.class([s.margin(px(0))])
-}
-
-fn subtitle() {
-  s.class([])
-}
-
-fn button_wrapper() {
-  s.class([s.display("flex"), s.gap(px(40)), s.align_items("center")])
-}
-
-fn square_wrapper() {
-  s.class([s.position("relative")])
-}
-
-fn square_base(count) {
-  s.class([
-    s.background(compute_bg(count)),
-    s.width(px(80)),
-    s.height(px(80)),
-    s.border_radius(px(10)),
-    s.transition("all .3s"),
+fn view_counter_description() {
+  use <- redraw.component__("CounterDescription")
+  let use_counter = "Use the counter, and see the site changing with the model!"
+  let now_edit = "Now, try to edit the code to see the modifications live!"
+  h.div([], [
+    h.text("Counter"),
+    components.counter_subtitle([], [h.text(use_counter)]),
+    components.counter_subtitle([], [h.text(now_edit)]),
   ])
 }
 
-fn square(count) {
-  s.class([s.compose(square_base(count)), s.position("relative"), s.z_index(1)])
-}
-
-fn square_behind(count) {
-  s.class([
-    s.compose(square_base(count)),
-    s.position("absolute"),
-    s.bottom(px(-40)),
-    s.right(px(-40)),
-    s.z_index(0),
+fn view_counter() {
+  use #(count, increment, decrement) <- redraw.component_("Counter")
+  let disabled = a.disabled(count <= 0)
+  let model = int.to_string(count)
+  components.counter_counter([], [
+    components.button([decrement, disabled], [h.text("-")]),
+    components.value([], [components.value_content([], [h.text(model)])]),
+    components.button([increment], [h.text("+")]),
   ])
 }
 
-fn compute_bg(count) {
-  case count % 2 == 0 {
-    True -> "red"
-    False -> "blue"
-  }
-}
-
-fn button() {
-  s.class([
-    s.margin_top(px(40)),
-    s.background("#ddd"),
-    s.color("black"),
-    s.border_radius(px(8)),
-    s.transition("all .3s"),
-    s.border("none"),
-    s.appearance("none"),
-    s.font_family("inherit"),
-    s.font_size(px(16)),
-    s.padding(px(12)),
-    s.font_weight("bold"),
-    s.cursor("pointer"),
+fn showcase() {
+  use <- redraw.component__("Showcase")
+  components.showcase([], [
+    components.showcase_body([], [h.text("Coming soon...")]),
+    components.card_title([], [h.text("Showcase")]),
   ])
 }

e2e/server_components/manifest.toml

@@ -20,11 +20,11 @@ packages = [
   { name = "mist", version = "3.0.0", build_tools = ["gleam"], requirements = ["birl", "gleam_erlang", "gleam_http", "gleam_otp", "gleam_stdlib", "glisten", "gramps", "hpack_erl", "logging"], otp_app = "mist", source = "hex", outer_checksum = "CDA1A74E768419235E16886463EC4722EFF4AB3F8D820A76EAD45D7C167D7282" },
   { name = "plinth", version = "0.5.0", build_tools = ["gleam"], requirements = ["conversation", "gleam_javascript", "gleam_json", "gleam_stdlib"], otp_app = "plinth", source = "hex", outer_checksum = "9B0ECC110316F55432DC544847B7F4E98B73D3F598CB3EE844570FB1EFB3F8BE" },
   { name = "ranger", version = "1.2.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "ranger", source = "hex", outer_checksum = "1566C272B1D141B3BBA38B25CB761EF56E312E79EC0E2DFD4D3C19FB0CC1F98C" },
-  { name = "shared_view", version = "1.0.0", build_tools = ["gleam"], requirements = ["gleam_stdlib", "lustre", "sketch", "sketch_lustre"], source = "local", path = "../shared_view" },
+  { name = "shared_styles", version = "1.0.0", build_tools = ["gleam"], requirements = ["gleam_stdlib", "sketch"], source = "local", path = "../shared_styles" },
+  { name = "shared_view", version = "1.0.0", build_tools = ["gleam"], requirements = ["gleam_stdlib", "lustre", "shared_styles", "sketch", "sketch_lustre"], source = "local", path = "../shared_view" },
   { name = "sketch", version = "3.1.0", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_otp", "gleam_stdlib"], source = "local", path = "../../sketch" },
-  { name = "sketch_lustre", version = "1.0.2", build_tools = ["gleam"], requirements = ["gleam_stdlib", "lustre", "plinth", "sketch"], source = "local", path = "../../sketch_lustre" },
+  { name = "sketch_lustre", version = "1.0.3", build_tools = ["gleam"], requirements = ["gleam_stdlib", "lustre", "plinth", "sketch"], source = "local", path = "../../sketch_lustre" },
   { name = "telemetry", version = "1.3.0", build_tools = ["rebar3"], requirements = [], otp_app = "telemetry", source = "hex", outer_checksum = "7015FC8919DBE63764F4B4B87A95B7C0996BD539E0D499BE6EC9D7F3875B79E6" },
-  { name = "thoas", version = "1.2.1", build_tools = ["rebar3"], requirements = [], otp_app = "thoas", source = "hex", outer_checksum = "E38697EDFFD6E91BD12CEA41B155115282630075C2A727E7A6B2947F5408B86A" },
 ]
 
 [requirements]

e2e/server_components/src/server_components.gleam

@@ -17,6 +17,7 @@ import mist.{
   type WebsocketMessage,
 }
 import shared_view
+import sketch
 
 pub fn main() {
   let assert Ok(_) =
@@ -113,10 +114,10 @@ type App =
   Subject(lustre.Action(shared_view.Msg, lustre.ServerComponent))
 
 fn socket_init(
-  conn: WebsocketConnection,
+  _conn: WebsocketConnection,
 ) -> #(App, Option(Selector(lustre.Patch(shared_view.Msg)))) {
   let self = process.new_subject()
-  let app = shared_view.app()
+  let app = shared_view.app(sketch.Ephemeral)
   let assert Ok(counter) = lustre.start_actor(app, 0)
 
   process.send(

e2e/shared_styles/.github/workflows/test.yml

@@ -0,0 +1,23 @@
+name: test
+
+on:
+  push:
+    branches:
+      - master
+      - main
+  pull_request:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: erlef/setup-beam@v1
+        with:
+          otp-version: "26.0.2"
+          gleam-version: "1.4.1"
+          rebar3-version: "3"
+          # elixir-version: "1.15.4"
+      - run: gleam deps download
+      - run: gleam test
+      - run: gleam format --check src test

e2e/shared_styles/.gitignore

@@ -0,0 +1,4 @@
+*.beam
+*.ez
+/build
+erl_crash.dump

e2e/shared_styles/README.md

@@ -0,0 +1,24 @@
+# shared_styles
+
+[![Package Version](https://img.shields.io/hexpm/v/shared_styles)](https://hex.pm/packages/shared_styles)
+[![Hex Docs](https://img.shields.io/badge/hex-docs-ffaff3)](https://hexdocs.pm/shared_styles/)
+
+```sh
+gleam add shared_styles@1
+```
+```gleam
+import shared_styles
+
+pub fn main() {
+  // TODO: An example of the project in use
+}
+```
+
+Further documentation can be found at <https://hexdocs.pm/shared_styles>.
+
+## Development
+
+```sh
+gleam run   # Run the project
+gleam test  # Run the tests
+```