Components app

core/lib/Layout.re

@@ -28,16 +28,15 @@ module Create = (Node: Flex.Spec.Node, Encoding: Flex.Spec.Encoding) => {
           ~bottom=cssUndefined,
           position,
         ) => {
-      let pos: t = {
+      `Position({
         position,
         inset: {
           left,
           top,
           right,
           bottom,
         },
-      };
-      `Position(pos);
+      });
     };
   };
 
@@ -61,8 +60,7 @@ module Create = (Node: Flex.Spec.Node, Encoding: Flex.Spec.Encoding) => {
     };
 
     let make = (~family="", ~size=cssUndefined, ~weight=`Regular, ()) => {
-      let font: t = {family, size, weight};
-      `Font(font);
+      `Font({family, size, weight});
     };
   };
 
@@ -99,16 +97,38 @@ module Create = (Node: Flex.Spec.Node, Encoding: Flex.Spec.Encoding) => {
           ~color=Color0.undefined,
           (),
         ) => {
-      let border: t = {width, radius, color};
-      `Border(border);
+      `Border({width, radius, color});
     };
 
     let width = (width: Encoding.scalar) => make(~width, ());
     let color = (color: Color0.t) => make(~color, ());
   };
 
+  module Shadow = {
+    type t = {
+      x: scalar,
+      y: scalar,
+      opacity: scalar,
+      blur: scalar,
+      color: Color0.t,
+    };
+
+    let make =
+        (
+          ~x=cssUndefined,
+          ~y=cssUndefined,
+          ~opacity=cssUndefined,
+          ~blur=cssUndefined,
+          ~color=Color0.undefined,
+          (),
+        ) => {
+      `Shadow({x, y, opacity, blur, color});
+    };
+  };
+
   let position = Position.make;
   let border = Border.make;
+  let shadow = Shadow.make;
   let font = Font.make;
   let kern = f => `Kern(f);
   let align = Alignment.make;
@@ -226,7 +246,7 @@ module Create = (Node: Flex.Spec.Node, Encoding: Flex.Spec.Encoding) => {
 
   let applyCommonStyle = (style: cssStyle, attribute: [> style]) =>
     switch (attribute) {
-    | `Position(({position, inset}: Position.t)) =>
+    | `Position({Position.position, inset}) =>
       let positionType =
         switch (position) {
         | `Absolute => Absolute
@@ -254,7 +274,7 @@ module Create = (Node: Flex.Spec.Node, Encoding: Flex.Spec.Encoding) => {
     | `Width(w) => {...style, width: int_of_scalar(w)}
     | `Height(h) => {...style, height: int_of_scalar(h)}
     | `Overflow(overflow) => {...style, overflow}
-    | `Border(({width, _}: Border.t)) => {
+    | `Border({Border.width, _}) => {
         ...style,
         border: !isUndefined(width) ? int_of_scalar(width) : style.border,
       }
@@ -334,5 +354,17 @@ module Create = (Node: Flex.Spec.Node, Encoding: Flex.Spec.Encoding) => {
 
       markDirtyInternal(node);
     };
+
+    let removeChild = (node, child) => {
+      node.children =
+        node.children
+        |> Array.to_seq
+        |> Seq.filter(p => p === child)
+        |> Array.of_seq;
+
+      node.childrenCount = node.childrenCount - 1;
+
+      markDirtyInternal(node);
+    };
   };
 };

examples/components-macos/app/Resources/Assets.xcassets/brisk.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images": [
+    {
+      "idiom": "universal",
+      "filename": "brisk.pdf",
+      "scale": "1x"
+    },
+    {
+      "idiom": "universal",
+      "scale": "2x"
+    },
+    {
+      "idiom": "universal",
+      "scale": "3x"
+    }
+  ],
+  "info": {
+    "version": 1,
+    "author": "xcode"
+  }
+}

examples/components-macos/bin/app.re

@@ -1,148 +1,6 @@
 open Brisk_macos;
 open Components_macos;
 
-type tab =
-  | Welcome
-  | Views
-  | Buttons
-  | Text
-  | Image
-  | System;
-
-type tabItem = {
-  kind: tab,
-  label: string,
-};
-
-let tabs = [
-  {kind: Welcome, label: "Welcome"},
-  {kind: Views, label: "Views"},
-  {kind: Buttons, label: "Buttons"},
-  {kind: Text, label: "Text"},
-  {kind: Image, label: "Image"},
-];
-
-type state = {currentTab: tab};
-
-let app = (~children as _, ()) =>
-  Brisk.component("AppRoot", hooks => {
-    open Brisk.Layout;
-
-    let (state, setState, hooks) =
-      Brisk.Hooks.state({currentTab: Welcome}, hooks);
-    (
-      hooks,
-      {
-        let {currentTab} = state;
-
-        <view
-          style=[
-            position(~top=0., ~left=0., ~right=0., ~bottom=0., `Absolute),
-            flexDirection(`Row),
-          ]>
-          <effectView
-            style=EffectView.[
-              blendingMode(`BehindWindow),
-              position(~top=0., ~left=0., ~bottom=0., `Absolute),
-              width(185.),
-            ]>
-            <view style=[margin2(~v=37., ())]>
-              ...{
-                   tabs
-                   |> List.map(tab =>
-                        <text
-                          style=[
-                            font(~size=15., ()),
-                            kern(0.09),
-                            align(`Left),
-                            color(Color.hex("#282522")),
-                            background(
-                              tab.kind == currentTab
-                                ? Color.hexa("#000000", 0.4)
-                                : Color.transparent,
-                            ),
-                            padding2(~h=25., ~v=4., ()),
-                          ]
-                          value={tab.label}
-                        />
-                      )
-                 }
-            </view>
-          </effectView>
-          <scrollView
-            style=[
-              position(~top=0., ~left=185., ~right=0., ~bottom=0., `Absolute),
-              padding4(~top=20., ~left=13., ()),
-            ]>
-            <text
-              style=[
-                font(~size=24., ~weight=`Semibold, ()),
-                kern(0.58),
-                align(`Left),
-                color(Color.hex("#000000")),
-                background(Color.transparent),
-              ]
-              value="Welcome to Brisk"
-            />
-            <view style=[justifyContent(`Center), alignContent(`Center)]>
-              <text
-                style=[
-                  font(~size=18., ()),
-                  align(`Center),
-                  alignSelf(`Center),
-                  width(200.),
-                  border(~radius=10., ()),
-                  color(Color.hex("#ffffff")),
-                  background(Color.hexa("#263ac5", 0.9)),
-                  margin(20.),
-                  padding2(~h=10., ~v=10., ()),
-                ]
-                value="Text bubble"
-              />
-            </view>
-            <button
-              style=[
-                width(400.),
-                height(60.),
-                margin4(~top=20., ()),
-                alignSelf(`Center),
-                font(~size=16., ()),
-                color(Color.hex("#ffffff")),
-                background(Color.hex("#263ac5")),
-                align(`Center),
-              ]
-              title="You're gonna have to wait 1 second"
-              callback={() =>
-                Lwt.Infix.(
-                  ignore(
-                    Lwt_unix.sleep(1.)
-                    >>= (_ => Lwt.return(setState(state))),
-                  )
-                )
-              }
-            />
-            <view style=[alignContent(`Center), height(600.)]>
-              <text
-                style=[
-                  font(~size=18., ()),
-                  align(`Center),
-                  alignSelf(`Center),
-                  width(200.),
-                  height(300.),
-                  border(~radius=10., ()),
-                  color(Color.hex("#011021")),
-                  margin(20.),
-                  padding2(~h=10., ~v=10., ()),
-                ]
-                value="Very large height for scrolling"
-              />
-            </view>
-          </scrollView>
-        </view>;
-      },
-    );
-  });
-
 let () = {
   open Cocoa;
 
@@ -151,7 +9,7 @@ let () = {
   Application.init();
 
   Application.willFinishLaunching(() => {
-    let menu = UiMenu.makeMainMenu(appName);
+    let menu = MainMenu.make(appName);
     Menu.add(~kind=Main, menu);
   });
 
@@ -183,12 +41,16 @@ let () = {
             width(Window.contentWidth(window)),
             height(Window.contentHeight(window)),
           ],
-          view,
+          {view, isYAxisFlipped: false},
         );
       {Brisk.OutputTree.view, layoutNode};
     };
 
-    UI.renderAndMount(~height=Window.contentHeight(window), root, <app />);
+    UI.renderAndMount(
+      ~height=Window.contentHeight(window),
+      root,
+      Main.(<app />),
+    );
 
     RunLoop.spawn();
   });

examples/components-macos/esy.json

@@ -14,8 +14,7 @@
   "dependencies": {
     "@esy-ocaml/reason": ">=3.4.0",
     "@brisk/macos": "*",
-    "@opam/dune": "^1.7.2",
-    "@opam/cohttp-lwt-unix": "^1.2.0",
+    "@opam/dune": "^1.7.3",
     "ocaml": "~4.7.1000"
   },
   "devDependencies": {