@nayhoo/ui 0.3.1 → 0.4.0

package/README.md

@@ -0,0 +1,138 @@
+# @nayhoo/ui
+
+A collection of React components, built with [Radix Primitives](https://www.radix-ui.com/primitives), styled with [vanilla-extract](https://vanilla-extract.style).
+
+## Installation
+
+```sh
+npm install @nayhoo/ui
+```
+
+## Configuration
+
+### Next.js
+
+```sh
+npm install @vanilla-extract/next-plugin
+```
+
+```ts
+// next.config.ts
+
+import { createVanillaExtractPlugin } from "@vanilla-extract/next-plugin";
+import type { NextConfig } from "next";
+
+const withVanillaExtract = createVanillaExtractPlugin();
+
+const nextConfig: NextConfig = {
+  // https://vanilla-extract.style/documentation/integrations/next/
+  transpilePackages: ["@nayhoo/ui"],
+};
+
+export default withVanillaExtract(nextConfig);
+```
+
+```tsx
+// src/app/layout.tsx
+
+import "@nayhoo/ui/css"; // REQUIRED
+import type { Metadata } from "next";
+import "./globals.css";
+import { AppProvider } from "./provider";
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={lightTheme}>
+        <AppProvider>{children}</AppProvider>
+      </body>
+    </html>
+  );
+}
+```
+
+```tsx
+// src/app/provider.tsx
+
+"use client";
+
+import { ThemeProvider } from "@nayhoo/ui/providers";
+import React from "react";
+
+type AppProviderProps = {
+  children: React.ReactNode;
+};
+
+export const AppProvider = ({ children }: AppProviderProps) => {
+  return <ThemeProvider>{children}</ThemeProvider>;
+};
+```
+
+### Vite
+
+```sh
+npm install @vanilla-extract/vite-plugin
+```
+
+```ts
+// vite.config.ts
+
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), vanillaExtractPlugin()],
+  optimizeDeps: {
+    include: ["@nayhoo/ui"],
+  },
+});
+```
+
+```tsx
+// src/main.tsx
+
+import "@nayhoo/ui/css"; // REQUIRED
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.tsx";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
+```
+
+```tsx
+// src/app.tsx
+
+import { ThemeProvider } from "@nayhoo/ui/providers";
+
+function App({ children }: { children: React.ReactNode }) {
+  return <ThemeProvider>{children}</ThemeProvider>;
+}
+```
+
+## Usage
+
+```tsx
+"use client";
+
+import { Button } from "@nayhoo/ui";
+
+export const Component = () => {
+  return <Button onClick={() => alert("Hello!")}>Press me</Button>;
+};
+```