feat: minimal setup for storybook like behavior

.ladle/components.tsx

@@ -0,0 +1,29 @@
+import React, { useEffect } from "react";
+import "../styles/globals.css";
+import "./styles.css";
+
+import type { GlobalProvider } from "@ladle/react";
+import { ThemeProvider, useTheme } from "next-themes";
+
+export const Provider: GlobalProvider = ({ children, globalState }) => {
+  const { setTheme } = useTheme();
+
+  useEffect(() => {
+    setTheme(globalState.theme);
+  }, [globalState.theme, setTheme]);
+
+  return (
+    <div className="container bg-background font-sans" style={{ maxWidth: 800 }}>
+      <ThemeProvider
+        attribute="class"
+        defaultTheme="light"
+        forcedTheme={globalState.theme}
+        disableTransitionOnChange
+        enableSystem
+        enableColorScheme
+      >
+        {children}
+      </ThemeProvider>
+    </div>
+  );
+};

.ladle/config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('@ladle/react').UserConfig} */
+export default {
+  stories: "**/*.stories.{js,jsx,ts,tsx,mdx}",
+};

.ladle/styles.css

@@ -0,0 +1,41 @@
+@font-face {
+  /* includes font-weights from 600-900 */
+  font-family: "Europa";
+  src: url("/fonts/EuropaGroteskSH-Med.otf");
+  font-weight: 600 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  /* includes font-weights from 400-500 */
+  font-family: "Europa";
+  src: url("/fonts/EuropaGroteskSH-Reg.otf");
+  font-weight: 400 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  /* includes font-weights from 100-300 */
+  font-family: "Europa";
+  src: url("/fonts/EuropaGroteskSH-Lig.otf");
+  font-weight: 100 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+:root {
+  /* define custom css var for the Europa font */
+  --font-europa-sans: "Europa", sans-serif;
+}
+
+* {
+  /* apply letter-spacing to all html elements */
+  @apply tracking-wider;
+}
+
+.font-mono {
+  /* reset the `tracking-wider` on the monospace font */
+  letter-spacing: initial;
+}

.npmignore

@@ -9,4 +9,8 @@ tsconfig.tsbuildinfo
 *.spec.*
 vitest.config.ts
 setupTests.ts
-coverage
+coverage
+.ladle
+tailwind.config.ts
+postcss.config.cjs
+stories

README.md

@@ -18,4 +18,4 @@ https://www.npmjs.com/package/@risc0/ui
 
 | Statements                  | Branches                | Functions                 | Lines             |
 | --------------------------- | ----------------------- | ------------------------- | ----------------- |
-| ![Statements](https://img.shields.io/badge/statements-40.64%25-red.svg?style=flat) | ![Branches](https://img.shields.io/badge/branches-72.85%25-red.svg?style=flat) | ![Functions](https://img.shields.io/badge/functions-54.54%25-red.svg?style=flat) | ![Lines](https://img.shields.io/badge/lines-40.64%25-red.svg?style=flat) |
+| ![Statements](https://img.shields.io/badge/statements-39.66%25-red.svg?style=flat) | ![Branches](https://img.shields.io/badge/branches-66.19%25-red.svg?style=flat) | ![Functions](https://img.shields.io/badge/functions-41.17%25-red.svg?style=flat) | ![Lines](https://img.shields.io/badge/lines-39.66%25-red.svg?style=flat) |