5 files changed, 81 insertions, 0 deletions

diff --git a/examples/kitchen-sink/packages/ui/src/CounterButton.tsx b/examples/kitchen-sink/packages/ui/src/CounterButton.tsx
new file mode 100644
index 0000000..ec99b39
--- /dev/null
+++ b/examples/kitchen-sink/packages/ui/src/CounterButton.tsx
@@ -0,0 +1,45 @@
+import * as React from "react";
+
+export const CounterButton = () => {
+  const [count, setCount] = React.useState(0);
+  return (
+    <div
+      style={{
+        background: `rgba(0,0,0,0.05)`,
+        borderRadius: `8px`,
+        padding: "1.5rem",
+        fontWeight: 500,
+      }}
+    >
+      <p style={{ margin: "0 0 1.5rem 0" }}>
+        This component is from{" "}
+        <code
+          style={{
+            padding: "0.2rem 0.3rem",
+            background: `rgba(0,0,0,0.1)`,
+            borderRadius: "0.25rem",
+          }}
+        >
+          ui
+        </code>
+      </p>
+      <div>
+        <button
+          style={{
+            background: "black",
+            color: "white",
+            border: "none",
+            padding: "0.5rem 1rem",
+            borderRadius: "0.25rem",
+            display: "inline-block",
+            cursor: "pointer",
+          }}
+          type="button"
+          onClick={() => setCount((c) => c + 1)}
+        >
+          Count: {count}
+        </button>
+      </div>
+    </div>
+  );
+};
diff --git a/examples/kitchen-sink/packages/ui/src/NewTabLink.tsx b/examples/kitchen-sink/packages/ui/src/NewTabLink.tsx
new file mode 100644
index 0000000..e8a00a0
--- /dev/null
+++ b/examples/kitchen-sink/packages/ui/src/NewTabLink.tsx
@@ -0,0 +1,15 @@
+import * as React from "react";
+export const NewTabLink = ({
+  children,
+  href,
+  ...other
+}: {
+  children: React.ReactNode;
+  href: string;
+}) => {
+  return (
+    <a target="_blank" rel="noreferrer" href={href} {...other}>
+      {children}
+    </a>
+  );
+};
diff --git a/examples/kitchen-sink/packages/ui/src/__tests__/index.test.tsx b/examples/kitchen-sink/packages/ui/src/__tests__/index.test.tsx
new file mode 100644
index 0000000..8956208
--- /dev/null
+++ b/examples/kitchen-sink/packages/ui/src/__tests__/index.test.tsx
@@ -0,0 +1,11 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { CounterButton } from "../CounterButton";
+
+describe("CounterButton", () => {
+  it("renders without crashing", () => {
+    const div = document.createElement("div");
+    ReactDOM.render(<CounterButton />, div);
+    ReactDOM.unmountComponentAtNode(div);
+  });
+});
diff --git a/examples/kitchen-sink/packages/ui/src/__tests__/tsconfig.json b/examples/kitchen-sink/packages/ui/src/__tests__/tsconfig.json
new file mode 100644
index 0000000..10f19c1
--- /dev/null
+++ b/examples/kitchen-sink/packages/ui/src/__tests__/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": [".", "../."],
+  "compilerOptions": {
+    "jsx": "react"
+  }
+}
diff --git a/examples/kitchen-sink/packages/ui/src/index.tsx b/examples/kitchen-sink/packages/ui/src/index.tsx
new file mode 100644
index 0000000..4880f34
--- /dev/null
+++ b/examples/kitchen-sink/packages/ui/src/index.tsx
@@ -0,0 +1,3 @@
+import * as React from "react";
+export { NewTabLink } from "./NewTabLink";
+export { CounterButton } from "./CounterButton";