Add documentation

Author: wcandillon

docs/docs/shapes/assets/polygons/rect.png

@@ -59,7 +59,37 @@ const RectDemo = () => {
 };
 ```
 
-![Rounded Rectangle](assets/polygons/rect.png)
+<img src={require("/static/img/rrect/uniform.png").default} width="256" height="256" />
+
+### Using Custom Radii
+
+You can set a different corner radius for each corner.
+
+```tsx twoslash
+import { Canvas, RoundedRect } from "@shopify/react-native-skia";
+
+const RectDemo = () => {
+  const size = 256;
+  const r = size * 0.2;
+  const rrct = {
+    rect: { x: 0, y: 0, width: size, height: size },
+    topLeft: { x: 0, y: 0 },
+    topRight: { x: r, y: r },
+    bottomRight: { x: 0, y: 0 },
+    bottomLeft: { x: r, y: r },
+  };
+  return (
+    <Canvas style={{ width: size, height: size }}>
+      <RoundedRect
+        rect={rrct}
+        color="lightblue"
+      />
+    </Canvas>
+  );
+};
+```
+
+<img src={require("/static/img/rrect/nonuniform.png").default} width="256" height="256" />
 
 ## DiffRect
 

docs/docs/shapes/polygons.md

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { checkImage, docPath } from "../../../__tests__/setup";
-import { RoundedRect } from "../../components";
+import { Path, RoundedRect } from "../../components";
 import { importSkia, surface } from "../setup";
 
 describe("Rects and rounded rects", () => {
@@ -70,7 +70,17 @@ describe("Rects and rounded rects", () => {
     );
     checkImage(image, docPath("rrect/uniform.png"));
   });
-  it("Should draw a rounded rect with non-uniform values", async () => {
+  it("Should draw a rounded rect with uniform values (4)", async () => {
+    const { width } = surface;
+    const r = width * 0.2;
+    const { Skia } = importSkia();
+    const rrct = Skia.RRectXY(Skia.XYWHRect(0, 0, width, width), r, r);
+    const path = Skia.Path.Make();
+    path.addRRect(rrct);
+    const image = await surface.draw(<Path path={path} color="lightblue" />);
+    checkImage(image, docPath("rrect/uniform.png"));
+  });
+  it("Should draw a rounded rect with non-uniform values (1)", async () => {
     const { width } = surface;
     const r = width * 0.2;
     const rrct = {
@@ -85,4 +95,20 @@ describe("Rects and rounded rects", () => {
     );
     checkImage(image, docPath("rrect/nonuniform.png"));
   });
+  it("Should draw a rounded rect with non-uniform values (2)", async () => {
+    const { Skia } = importSkia();
+    const { width } = surface;
+    const r = width * 0.2;
+    const rrct = {
+      rect: { x: 0, y: 0, width, height: width },
+      topLeft: { x: 0, y: 0 },
+      topRight: { x: r, y: r },
+      bottomRight: { x: 0, y: 0 },
+      bottomLeft: { x: r, y: r },
+    };
+    const path = Skia.Path.Make();
+    path.addRRect(rrct);
+    const image = await surface.draw(<Path path={path} color="lightblue" />);
+    checkImage(image, docPath("rrect/nonuniform.png"));
+  });
 });