Merge pull request #23 from joseemds/feat/add-transform-api

feat: add initial transform API

sketch/src/sketch.gleam

@@ -11,6 +11,7 @@ import sketch/internals/cache/setup as cache
 import sketch/internals/style
 import sketch/media.{type Query}
 import sketch/size.{type Size}
+import sketch/transform.{type Transform}
 
 // Types
 
@@ -1983,10 +1984,17 @@ pub fn touch_action(value: String) {
   property("touch-action", value)
 }
 
+/// `transform` will be turned into `transform_` in 4.0.0
 pub fn transform(transform: String) {
   property("transform", transform)
 }
 
+/// `transform_` uses `sketch.transform` to offer an enhanced API for CSS transforms
+pub fn transform_(transform_args: List(Transform)) {
+  let transform_string = transform.to_string(transform_args)
+  property("transform", transform_string)
+}
+
 pub fn transform_box(transform_box: String) {
   property("transform-box", transform_box)
 }

sketch/src/sketch/angle.gleam

@@ -0,0 +1,33 @@
+import gleam/float
+
+pub opaque type Angle {
+  Deg(Float)
+  Rad(Float)
+  Grad(Float)
+  Turn(Float)
+}
+
+pub fn deg(value: Float) {
+  Deg(value)
+}
+
+pub fn rad(value: Float) {
+  Rad(value)
+}
+
+pub fn grad(value: Float) {
+  Grad(value)
+}
+
+pub fn turn(value: Float) {
+  Turn(value)
+}
+
+pub fn to_string(angle: Angle) {
+  case angle {
+    Deg(value) -> float.to_string(value) <> "deg"
+    Rad(value) -> float.to_string(value) <> "rad"
+    Grad(value) -> float.to_string(value) <> "grad"
+    Turn(value) -> float.to_string(value) <> "turn"
+  }
+}

sketch/src/sketch/transform.gleam

@@ -0,0 +1,91 @@
+import gleam/float
+import gleam/list
+import gleam/string
+import sketch/angle.{type Angle}
+import sketch/size.{type Size}
+
+pub opaque type Transform {
+  Translate(Size, Size)
+  TranslateX(Size)
+  TranslateY(Size)
+  Scale(Float, Float)
+  ScaleX(Float)
+  ScaleY(Float)
+  Rotate(Angle)
+  SkewX(Angle)
+  SkewY(Angle)
+}
+
+fn transform_to_string(value: Transform) {
+  case value {
+    Translate(x, y) ->
+      "translate("
+      <> string.join([size.to_string(x), size.to_string(y)], ",")
+      <> ")"
+    TranslateX(x) -> "translateX(" <> size.to_string(x) <> ")"
+    TranslateY(y) -> "translateY(" <> size.to_string(y) <> ")"
+    Scale(x, y) ->
+      "scale("
+      <> string.join([float.to_string(x), float.to_string(y)], ",")
+      <> ")"
+    ScaleX(x) -> "scaleX(" <> float.to_string(x) <> ")"
+    ScaleY(y) -> "scaleY(" <> float.to_string(y) <> ")"
+    Rotate(ang) -> "rotate(" <> angle.to_string(ang) <> ")"
+    SkewX(x) -> "skewX(" <> angle.to_string(x) <> ")"
+    SkewY(y) -> "skewY(" <> angle.to_string(y) <> ")"
+  }
+}
+
+pub fn translate2(x: Size, y: Size) {
+  Translate(x, y)
+}
+
+/// `translate(x)` is `translate2(x, size.percent(0))`
+pub fn translate(x: Size) {
+  translate2(x, size.percent(0))
+}
+
+pub fn translate_x(x: Size) {
+  TranslateX(x)
+}
+
+pub fn translate_y(y: Size) {
+  TranslateY(y)
+}
+
+pub fn scale2(x: Float, y: Float) {
+  Scale(x, y)
+}
+
+/// `scale(x)` is `scale2(x, x)`
+pub fn scale(x: Float) {
+  scale2(x, x)
+}
+
+pub fn scale_x(x: Float) {
+  ScaleX(x)
+}
+
+pub fn scale_y(y: Float) {
+  ScaleY(y)
+}
+
+pub fn rotate(value: Angle) {
+  Rotate(value)
+}
+
+pub fn skew_x(x: Angle) {
+  SkewX(x)
+}
+
+pub fn skew_y(x: Angle) {
+  SkewY(x)
+}
+
+pub fn to_string(value: List(Transform)) {
+  case value {
+    [] -> "none"
+    transform_list ->
+      list.map(transform_list, transform_to_string) |> string.join(" ")
+  }
+}

sketch/test/transform_test.gleam

@@ -0,0 +1,91 @@
+import gleeunit/should
+import sketch/angle
+import sketch/size
+import sketch/transform
+
+pub fn translate_test() {
+  [transform.translate(size.px(10))]
+  |> transform.to_string
+  |> should.equal("translate(10.0px,0.0%)")
+}
+
+pub fn translate2_test() {
+  [transform.translate2(size.px(10), size.rem(3.0))]
+  |> transform.to_string
+  |> should.equal("translate(10.0px,3.0rem)")
+}
+
+pub fn translate_x() {
+  [transform.translate_x(size.px(10))]
+  |> transform.to_string
+  |> should.equal("translateX(10px)")
+}
+
+pub fn translate_y() {
+  [transform.translate_y(size.px(10))]
+  |> transform.to_string
+  |> should.equal("translateY(10px)")
+}
+
+pub fn scale2_test() {
+  [transform.scale2(10.0, 10.0)]
+  |> transform.to_string
+  |> should.equal("scale(10.0,10.0)")
+}
+
+pub fn scale_test() {
+  [transform.scale(10.0)]
+  |> transform.to_string
+  |> should.equal("scale(10.0,10.0)")
+}
+
+pub fn scale_x_test() {
+  [transform.scale_x(10.0)]
+  |> transform.to_string
+  |> should.equal("scaleX(10.0)")
+}
+
+pub fn scale_y_test() {
+  [transform.scale_y(10.0)]
+  |> transform.to_string
+  |> should.equal("scaleY(10.0)")
+}
+
+pub fn rotate_test() {
+  [transform.rotate(angle.rad(2.0))]
+  |> transform.to_string
+  |> should.equal("rotate(2.0rad)")
+}
+
+pub fn skew_x() {
+  [transform.skew_x(angle.rad(2.0))]
+  |> transform.to_string
+  |> should.equal("skewX(2.0rad)")
+}
+
+pub fn skew_y() {
+  [transform.skew_y(angle.rad(2.0))]
+  |> transform.to_string
+  |> should.equal("skewY(2.0rad)")
+}
+
+pub fn translate_equiv_test() {
+  let current = [transform.translate(size.px(10))] |> transform.to_string
+  let expected =
+    [transform.translate2(size.px(10), size.percent(0))]
+    |> transform.to_string
+
+  should.equal(current, expected)
+}
+
+pub fn scale_equiv_test() {
+  let current = [transform.scale(10.0)] |> transform.to_string
+  let expected = [transform.scale2(10.0, 10.0)] |> transform.to_string
+
+  should.equal(current, expected)
+}
+
+pub fn transform_none_test() {
+  transform.to_string([])
+  |> should.equal("none")
+}