npm package: @recode-js/next-toolkit
Description: A Next.js–first toolkit providing prebuilt navigation, auth pages, form actions, drawer utilities, and toast system — designed to accelerate app development without locking you into a framework or UI library.
Latest version: 0.0.2

# @recode-js/next-toolkit

A Next.js–first toolkit providing prebuilt navigation, auth pages, form actions, drawer utilities, and toast system — designed to accelerate app development without locking you into a framework or UI library.

**This package is not a backend, not a BaaS, and not a full auth solution.**  
It provides UI + client/server utilities that you wire into your own logic.

---

## Features

✅ Ready-to-use Login & Signup pages  
✅ Form Actions helper for Next.js Server Actions  
✅ Navigation system (Header, Drawer, Bottom Tab)  
✅ Drawer state hook  
✅ Toast notification system  
✅ Next.js App Router compatible  
✅ TypeScript-first  
✅ No global CSS pollution

---

## Installation
```bash
npm install @recode-js/next-toolkit
```

### Peer dependencies (required)
```bash
npm install next react react-dom
```

---

## Quick Start

### Wrap your app
```tsx
import NextToolkitProvider from "@recode-js/next-toolkit";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <body>
        <NextToolkitProvider>
          {children}
        </NextToolkitProvider>
      </body>
    </html>
  );
}
```

---

## Exports Overview
```tsx
import {
  NextToolkitProvider,
  InjectNavigators,
  useDrawer,
  useToast,
  ToastExample,
  LoginPage,
  SignUpPage,
  createFormAction,
} from "@recode-js/next-toolkit";
```

---

## Navigation System

### Inject Navigators (Header + Drawer + Bottom Tab)
```tsx
import { InjectNavigators } from "@recode-js/next-toolkit";

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <InjectNavigators>
      {children}
    </InjectNavigators>
  );
}
```

### Drawer Hook
```tsx
import { useDrawer } from "@recode-js/next-toolkit";

const { openDrawer, closeDrawer, toggleDrawer } = useDrawer();
```

---

## Toast System

### Trigger Toast
```tsx
import { useToast } from "@recode-js/next-toolkit";

const toast = useToast();
toast.success("Saved successfully");
toast.error("Something went wrong");
```

### Example Component
```tsx
import { ToastExample } from "@recode-js/next-toolkit";

<ToastExample />
```

---

## Authentication Pages

### Login Page
```tsx
import { LoginPage } from "@recode-js/next-toolkit";

export default function Login() {
  return <LoginPage />;
}
```

### Signup Page
```tsx
import { SignUpPage } from "@recode-js/next-toolkit";

export default function Register() {
  return <SignUpPage />;
}
```

**These pages are UI only.**  
You are responsible for authentication logic and APIs.

---

## Server Actions Helper

### createFormAction

Utility to simplify Next.js Server Actions with validation and structured responses.
```tsx
import { createFormAction } from "@recode-js/next-toolkit";

export const loginAction = createFormAction(async (formData) => {
  const email = formData.get("email");
  const password = formData.get("password");
  // your logic here
});
```

---

## Styling

The toolkit ships with scoped styles only.  
If a global stylesheet is required:
```tsx
import "@recode-js/next-toolkit/styles.css";
```

**No Tailwind, no CSS reset, no opinionated theme.**

---

## Compatibility

- Next.js 13+ (App Router)
- React 18+
- Works with Server Components & Client Components
- Supports Server Actions

---

## What this package is NOT

To avoid confusion:

❌ Not a backend service  
❌ Not a complete auth system  
❌ Not a UI framework like MUI or Chakra  
❌ Not opinionated about API, database, or state

**It is a toolkit, not a platform.**

---

## Philosophy

This package exists to:

- Reduce repetitive boilerplate
- Provide production-ready primitives
- Stay out of your business logic
- Remain easy to remove or replace

**If you need full control — you have it.**

---

## License

MIT

---

## Maintained by

[Recode JS](https://github.com/recode-js)

---