Skip to content

Commit

Permalink
 Use shared styles examples
Browse files Browse the repository at this point in the history
  • Loading branch information
ghivert committed Nov 7, 2024
1 parent 490180c commit 4149bce
Show file tree
Hide file tree
Showing 21 changed files with 450 additions and 283 deletions.
1 change: 1 addition & 0 deletions e2e/redraw_example/gleam.toml
Original file line number Diff line number Diff line change
Expand Up @@ -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"
15 changes: 14 additions & 1 deletion e2e/redraw_example/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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:[email protected]&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>
Expand Down
12 changes: 7 additions & 5 deletions e2e/redraw_example/manifest.toml
Original file line number Diff line number Diff line change
Expand Up @@ -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" },
]

Expand All @@ -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" }
82 changes: 82 additions & 0 deletions e2e/redraw_example/src/components.gleam
Original file line number Diff line number Diff line change
@@ -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)
}
129 changes: 46 additions & 83 deletions e2e/redraw_example/src/redraw_example.gleam
Original file line number Diff line number Diff line change
@@ -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()
Expand All @@ -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")]),
])
}
6 changes: 3 additions & 3 deletions e2e/server_components/manifest.toml
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand Down
5 changes: 3 additions & 2 deletions e2e/server_components/src/server_components.gleam
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import mist.{
type WebsocketMessage,
}
import shared_view
import sketch

pub fn main() {
let assert Ok(_) =
Expand Down Expand Up @@ -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(
Expand Down
23 changes: 23 additions & 0 deletions e2e/shared_styles/.github/workflows/test.yml
Original file line number Diff line number Diff line change
@@ -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
4 changes: 4 additions & 0 deletions e2e/shared_styles/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
*.beam
*.ez
/build
erl_crash.dump
24 changes: 24 additions & 0 deletions e2e/shared_styles/README.md
Original file line number Diff line number Diff line change
@@ -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
```
Loading

0 comments on commit 4149bce

Please sign in to comment.