diff --git a/.cursorignore b/.cursorignore index 6735e08ba6432..306b6c986d2ca 100644 --- a/.cursorignore +++ b/.cursorignore @@ -11,7 +11,6 @@ documentation/static/ documentation/test/ documentation/versioned_docs/ documentation/versioned_sidebars/ -examples/ hackathon/ patches/ pnpm-lock.yaml diff --git a/.gitignore b/.gitignore index 2c9a4eb24ad6f..5f8a7f31f84a0 100644 --- a/.gitignore +++ b/.gitignore @@ -37,5 +37,7 @@ examples/**/package-lock.json # nx daemon .nx +# cursor +.cursorrules # claude .claude/ diff --git a/.syncpackrc b/.syncpackrc index 16a085924bf83..cdebbcae94251 100644 --- a/.syncpackrc +++ b/.syncpackrc @@ -4,32 +4,82 @@ "semverGroups": [], "versionGroups": [ { - "dependencies": ["@types/**", "@testing-library/**", "typescript"], - "dependencyTypes": ["prod"], + "dependencies": [ + "@types/**", + "@testing-library/**", + "typescript" + ], + "dependencyTypes": [ + "prod" + ], "isBanned": true, "label": "These packages should only be under devDependencies." }, { - "dependencies": ["@refinedev/**"], - "packages": ["**"], + "dependencies": [ + "@refinedev/**" + ], + "packages": [ + "**" + ], "isIgnored": true, "label": "@refinedev dependencies are managed by changeset." }, { - "dependencies": ["**"], - "dependencyTypes": ["peer"], - "packages": ["**"], + "dependencies": [ + "**" + ], + "dependencyTypes": [ + "peer" + ], + "packages": [ + "**" + ], "isIgnored": true }, { - "dependencies": ["nock"], - "dependencyTypes": ["dev"], - "packages": ["@refinedev/appwrite", "@refinedev/graphql"], + "dependencies": [ + "nock" + ], + "dependencyTypes": [ + "dev" + ], + "packages": [ + "@refinedev/appwrite", + "@refinedev/graphql" + ], "isIgnored": true }, { - "dependencies": ["next", "react", "react-dom", "@types/react", "@types/react-dom"], - "packages": ["with-nextjs-headless"], + "dependencies": [ + "next", + "react", + "react-dom", + "@types/react", + "@types/react-dom" + ], + "packages": [ + "with-nextjs-headless" + ], + "isIgnored": true + }, + { + "dependencies": [ + "next", + "react", + "react-dom", + "@types/react", + "@types/react-dom", + "eslint", + "postcss", + "tailwindcss", + "recharts", + "clsx", + "@netlify/plugin-nextjs" + ], + "packages": [ + "@refinedev/refine-ui" + ], "isIgnored": true } ] diff --git a/packages/refine-ui/README.md b/packages/refine-ui/README.md new file mode 100644 index 0000000000000..4b09c06e1f0ff --- /dev/null +++ b/packages/refine-ui/README.md @@ -0,0 +1,23 @@ +# registry-template + +You can use the `shadcn` CLI to run your own component registry. Running your own +component registry allows you to distribute your custom components, hooks, pages, and +other files to any React project. + +> [!IMPORTANT] +> This template uses Tailwind v4. For Tailwind v3, see [registry-template](https://github.com/shadcn-ui/registry-template). + +## Getting Started + +This is a template for creating a custom registry using Next.js. + +- The template uses a `registry.json` file to define components and their files. +- The `shadcn build` command is used to build the registry. +- The registry items are served as static files under `public/r/[name].json`. +- The template also includes a route handler for serving registry items. +- Every registry item are compatible with the `shadcn` CLI. +- We have also added v0 integration using the `Open in v0` api. + +## Documentation + +Visit the [shadcn documentation](https://ui.shadcn.com/docs/registry) to view the full documentation. diff --git a/packages/refine-ui/app/base-example/[[...slug]]/page.tsx b/packages/refine-ui/app/base-example/[[...slug]]/page.tsx new file mode 100644 index 0000000000000..180fe86a619be --- /dev/null +++ b/packages/refine-ui/app/base-example/[[...slug]]/page.tsx @@ -0,0 +1,15 @@ +"use client"; + +import dynamic from "next/dynamic"; + +const BaseExample = dynamic( + () => + import("../../../examples/base-example/app").then((mod) => mod.BaseExample), + { + ssr: false, + }, +); + +export default function BaseExamplePage() { + return ; +} diff --git a/packages/refine-ui/app/favicon.ico b/packages/refine-ui/app/favicon.ico new file mode 100644 index 0000000000000..718d6fea4835e Binary files /dev/null and b/packages/refine-ui/app/favicon.ico differ diff --git a/packages/refine-ui/app/global.css b/packages/refine-ui/app/global.css new file mode 100644 index 0000000000000..0140c737af7eb --- /dev/null +++ b/packages/refine-ui/app/global.css @@ -0,0 +1,123 @@ +@import "tailwindcss"; +@import "tw-animate-css"; + +@custom-variant dark (&:is(.dark *)); + +@theme inline { + --color-background: var(--background); + --color-foreground: var(--foreground); + --color-sidebar-ring: var(--sidebar-ring); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar: var(--sidebar); + --color-chart-5: var(--chart-5); + --color-chart-4: var(--chart-4); + --color-chart-3: var(--chart-3); + --color-chart-2: var(--chart-2); + --color-chart-1: var(--chart-1); + --color-ring: var(--ring); + --color-input: var(--input); + --color-border: var(--border); + --color-destructive: var(--destructive); + --color-accent-foreground: var(--accent-foreground); + --color-accent: var(--accent); + --color-muted-foreground: var(--muted-foreground); + --color-muted: var(--muted); + --color-secondary-foreground: var(--secondary-foreground); + --color-secondary: var(--secondary); + --color-primary-foreground: var(--primary-foreground); + --color-primary: var(--primary); + --color-popover-foreground: var(--popover-foreground); + --color-popover: var(--popover); + --color-card-foreground: var(--card-foreground); + --color-card: var(--card); + --radius-sm: calc(var(--radius) - 2px); + --radius-md: calc(var(--radius)); + --radius-lg: calc(var(--radius) + 2px); + --radius-xl: calc(var(--radius) + 6px); + + --font-sans: "Inter", sans-serif; +} + +:root { + --radius: 0.375rem; + --background: oklch(1 0 0); + --foreground: oklch(0.145 0 0); + --card: oklch(1 0 0); + --card-foreground: oklch(0.145 0 0); + --popover: oklch(1 0 0); + --popover-foreground: oklch(0.145 0 0); + --primary: oklch(54.6% 0.245 262.881); + --primary-foreground: oklch(1 0 0); + --secondary: oklch(0.97 0 0); + --secondary-foreground: oklch(0.205 0 0); + --muted: oklch(0.97 0 0); + --muted-foreground: oklch(0.556 0 0); + --accent: oklch(0.97 0 0); + --accent-foreground: oklch(0.205 0 0); + --destructive: oklch(0.577 0.245 27.325); + --border: oklch(0.922 0 0); + --input: oklch(0.922 0 0); + --ring: oklch(0.708 0 0); + --chart-1: oklch(0.646 0.222 41.116); + --chart-2: oklch(0.6 0.118 184.704); + --chart-3: oklch(0.398 0.07 227.392); + --chart-4: oklch(0.828 0.189 84.429); + --chart-5: oklch(0.769 0.188 70.08); + --sidebar: oklch(0.985 0 0); + --sidebar-foreground: oklch(0.145 0 0); + --sidebar-primary: oklch(54.6% 0.245 262.881); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.97 0 0); + --sidebar-accent-foreground: oklch(0.205 0 0); + --sidebar-border: oklch(0.922 0 0); + --sidebar-ring: oklch(0.708 0 0); +} + +.dark { + --background: oklch(0.145 0 0); + --foreground: oklch(0.985 0 0); + --card: oklch(0.205 0 0); + --card-foreground: oklch(0.985 0 0); + --popover: oklch(0.205 0 0); + --popover-foreground: oklch(0.985 0 0); + --primary: oklch(54.6% 0.245 262.881); + --primary-foreground: oklch(1 0 0); + --secondary: oklch(0.269 0 0); + --secondary-foreground: oklch(0.985 0 0); + --muted: oklch(0.269 0 0); + --muted-foreground: oklch(0.708 0 0); + --accent: oklch(0.269 0 0); + --accent-foreground: oklch(0.985 0 0); + --destructive: oklch(0.704 0.191 22.216); + --border: oklch(1 0 0 / 10%); + --input: oklch(1 0 0 / 15%); + --ring: oklch(0.556 0 0); + --chart-1: oklch(0.488 0.243 264.376); + --chart-2: oklch(0.696 0.17 162.48); + --chart-3: oklch(0.769 0.188 70.08); + --chart-4: oklch(0.627 0.265 303.9); + --chart-5: oklch(0.645 0.246 16.439); + --sidebar: oklch(0.205 0 0); + --sidebar-foreground: oklch(0.985 0 0); + --sidebar-primary: oklch(54.6% 0.245 262.881); + --sidebar-primary-foreground: oklch(1 0 0); + --sidebar-accent: oklch(0.269 0 0); + --sidebar-accent-foreground: oklch(0.985 0 0); + --sidebar-border: oklch(1 0 0 / 10%); + --sidebar-ring: oklch(0.556 0 0); +} + +@layer base { + * { + @apply border-border outline-ring/50 antialiased; + font-family: var(--font-sans); + } + body { + @apply bg-background text-foreground; + } +} diff --git a/packages/refine-ui/app/layout.tsx b/packages/refine-ui/app/layout.tsx new file mode 100644 index 0000000000000..b609f9bf507be --- /dev/null +++ b/packages/refine-ui/app/layout.tsx @@ -0,0 +1,25 @@ +import type { Metadata } from "next"; +import { Inter } from "next/font/google"; +import "./global.css"; + +const inter = Inter({ + variable: "--font-inter", + subsets: ["latin"], +}); + +export const metadata: Metadata = { + title: "Create Next App", + description: "Generated by create next app", +}; + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return ( + + {children} + + ); +} diff --git a/packages/refine-ui/app/page.tsx b/packages/refine-ui/app/page.tsx new file mode 100644 index 0000000000000..c7fe3bbc69015 --- /dev/null +++ b/packages/refine-ui/app/page.tsx @@ -0,0 +1,5 @@ +import * as React from "react"; + +export default function Home() { + return
; +} diff --git a/packages/refine-ui/components.json b/packages/refine-ui/components.json new file mode 100644 index 0000000000000..5592ee706f901 --- /dev/null +++ b/packages/refine-ui/components.json @@ -0,0 +1,21 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "new-york", + "rsc": true, + "tsx": true, + "tailwind": { + "config": "", + "css": "app/globals.css", + "baseColor": "neutral", + "cssVariables": true, + "prefix": "" + }, + "aliases": { + "components": "@/registry/new-york/ui", + "utils": "@/lib/utils", + "ui": "@/registry/new-york/ui", + "lib": "@/lib", + "hooks": "@/hooks" + }, + "iconLibrary": "lucide" +} diff --git a/packages/refine-ui/examples/base-example/app.tsx b/packages/refine-ui/examples/base-example/app.tsx new file mode 100644 index 0000000000000..efdf82c8103c7 --- /dev/null +++ b/packages/refine-ui/examples/base-example/app.tsx @@ -0,0 +1,202 @@ +"use client"; + +import { Refine, Authenticated } from "@refinedev/core"; +import routerProvider, { + UnsavedChangesNotifier, + DocumentTitleHandler, + NavigateToResource, + CatchAllNavigate, +} from "@refinedev/react-router"; +import { BrowserRouter, Outlet, Route, Routes } from "react-router"; +import { Toaster } from "@/registry/new-york/ui/sonner"; +import { Breadcrumb } from "@/registry/new-york/refine-ui/layout/breadcrumb"; +import { ErrorComponent } from "@/registry/new-york/refine-ui/layout/error-component"; +import { + BellIcon, + CreditCardIcon, + DollarSignIcon, + FileIcon, + FolderIcon, + HomeIcon, + SettingsIcon, + UserIcon, +} from "lucide-react"; +import { authProvider } from "./providers/auth"; +import { useNotificationProvider } from "./providers/notification"; +import { createDataProvider } from "./providers/data"; +import { LoginForm } from "./components/login-form"; +import { RegisterForm } from "./components/register-form"; +import { AppLayout } from "./components/layout"; +import { PostsListPage } from "./routes/posts/list"; +import { UsersListPage } from "./routes/users/list"; +import { API_URL } from "./constants"; +import { HomePage } from "./routes/home"; +import CreatePost from "./routes/posts/create"; +import ShowPost from "./routes/posts/show"; +import EditPost from "./routes/posts/edit"; +import { ForgotPasswordForm } from "./components/forgot-password-form"; + +export function BaseExample() { + return ( + + , + }, + }, + { + name: "posts", + list: "/posts", + create: "/posts/create", + edit: "/posts/edit/:id", + show: "/posts/show/:id", + clone: "/posts/clone/:id", + meta: { + icon: , + }, + }, + { + name: "users", + list: "/users", + meta: { icon: }, + }, + { + name: "settings", + meta: { icon: }, + }, + { + name: "Directory", + list: "/directory", + meta: { icon: }, + }, + { + name: "profile", + list: "/profile", + meta: { + parent: "settings", + }, + }, + { + name: "notifications", + list: "/settings/notifications", + edit: "/settings/notifications/:id/edit", + meta: { + icon: , + parent: "settings", + }, + }, + { + name: "finance", + meta: { + group: true, + }, + }, + { + name: "expenses", + list: "/expenses", + meta: { + icon: , + parent: "finance", + }, + }, + { + name: "income", + list: "/income", + meta: { + icon: , + parent: "finance", + }, + }, + ]} + options={{ + syncWithLocation: true, + warnWhenUnsavedChanges: true, + }} + > + + + } + > + + + + } + > + } /> + } /> + } /> + } /> + } /> + } /> + Settings List Page
} /> + + + +

Notifications List Page

+ + } + /> + + + +

Notifications Edit Page

+ + } + /> + Profile List Page} /> + Finance List Page} /> + Expenses List Page} /> + Income List Page} /> + Directory List Page} /> + } /> + + + }> + + + } + > + } /> + } /> + } /> + + + + + + } + > + } /> + + + + + + + + + ); +} diff --git a/packages/refine-ui/examples/base-example/components/forgot-password-form.tsx b/packages/refine-ui/examples/base-example/components/forgot-password-form.tsx new file mode 100644 index 0000000000000..f26f9c4943676 --- /dev/null +++ b/packages/refine-ui/examples/base-example/components/forgot-password-form.tsx @@ -0,0 +1,5 @@ +import { ForgotPasswordForm as BaseForgotPasswordForm } from "@/registry/new-york/refine-ui/form/forgot-password-form"; + +export const ForgotPasswordForm = () => { + return ; +}; diff --git a/packages/refine-ui/examples/base-example/components/layout.tsx b/packages/refine-ui/examples/base-example/components/layout.tsx new file mode 100644 index 0000000000000..60b6379e7e26a --- /dev/null +++ b/packages/refine-ui/examples/base-example/components/layout.tsx @@ -0,0 +1,5 @@ +import { Layout } from "@/registry/new-york/refine-ui/layout/layout-01/layout"; + +export const AppLayout = ({ children }: { children: React.ReactNode }) => { + return {children}; +}; diff --git a/packages/refine-ui/examples/base-example/components/login-form.tsx b/packages/refine-ui/examples/base-example/components/login-form.tsx new file mode 100644 index 0000000000000..37052591cdc8c --- /dev/null +++ b/packages/refine-ui/examples/base-example/components/login-form.tsx @@ -0,0 +1,5 @@ +import { SignInForm } from "@/registry/new-york/refine-ui/form/sign-in-form"; + +export const LoginForm = () => { + return ; +}; diff --git a/packages/refine-ui/examples/base-example/components/register-form.tsx b/packages/refine-ui/examples/base-example/components/register-form.tsx new file mode 100644 index 0000000000000..32ea2560d773c --- /dev/null +++ b/packages/refine-ui/examples/base-example/components/register-form.tsx @@ -0,0 +1,5 @@ +import { SignUpForm } from "@/registry/new-york/refine-ui/form/sign-up-form"; + +export const RegisterForm = () => { + return ; +}; diff --git a/packages/refine-ui/examples/base-example/constants.ts b/packages/refine-ui/examples/base-example/constants.ts new file mode 100644 index 0000000000000..4862046b1a279 --- /dev/null +++ b/packages/refine-ui/examples/base-example/constants.ts @@ -0,0 +1 @@ +export const API_URL = "https://api.fake-rest.refine.dev"; diff --git a/packages/refine-ui/examples/base-example/providers/auth.ts b/packages/refine-ui/examples/base-example/providers/auth.ts new file mode 100644 index 0000000000000..2b53d15417b53 --- /dev/null +++ b/packages/refine-ui/examples/base-example/providers/auth.ts @@ -0,0 +1,131 @@ +import type { AuthProvider } from "@refinedev/core"; + +/** + * mock auth credentials to simulate authentication + */ +const authCredentials = { + email: "demo@refine.dev", + password: "demodemo", +}; + +const TOKEN_KEY = "refine-auth"; + +export const authProvider: AuthProvider = { + login: async ({ providerName, email }) => { + if (providerName === "google") { + return { + success: true, + }; + } + + if (providerName === "github") { + return { + success: true, + }; + } + + if (email === authCredentials.email) { + localStorage.setItem(TOKEN_KEY, email); + return { + success: true, + redirectTo: "/", + }; + } + + return { + success: false, + error: { + message: "Login failed", + name: "Invalid email or password", + }, + }; + }, + register: async (params) => { + if (params.email === authCredentials.email && params.password) { + localStorage.setItem(TOKEN_KEY, params.email); + return { + success: true, + redirectTo: "/", + }; + } + return { + success: false, + error: { + message: "Register failed", + name: "Invalid email or password", + }, + }; + }, + updatePassword: async (params) => { + if (params.password === authCredentials.password) { + //we can update password here + return { + success: true, + }; + } + return { + success: false, + error: { + message: "Update password failed", + name: "Invalid password", + }, + }; + }, + forgotPassword: async (params) => { + if (params.email === authCredentials.email) { + //we can send email with reset password link here + return { + success: true, + }; + } + return { + success: false, + error: { + message: "Forgot password failed", + name: "Invalid email", + }, + }; + }, + logout: async () => { + localStorage.removeItem(TOKEN_KEY); + return { + success: true, + redirectTo: "/login", + }; + }, + onError: async (error) => { + if (error.response?.status === 401) { + return { + logout: true, + }; + } + + return { error }; + }, + check: async () => { + const token = localStorage.getItem(TOKEN_KEY); + + return token + ? { + authenticated: true, + } + : { + authenticated: false, + error: { + message: "Check failed", + name: "Not authenticated", + }, + logout: true, + redirectTo: "/login", + }; + }, + getPermissions: async (params) => params?.permissions, + getIdentity: async () => ({ + id: 1, + firstName: "Jane", + lastName: "Doe", + fullName: "Jane Doe", + avatar: "https://unsplash.com/photos/IWLOvomUmWU/download?force=true&w=640", + email: "jane.doe@example.com", + }), +}; diff --git a/packages/refine-ui/examples/base-example/providers/data.ts b/packages/refine-ui/examples/base-example/providers/data.ts new file mode 100644 index 0000000000000..f58155938a7b9 --- /dev/null +++ b/packages/refine-ui/examples/base-example/providers/data.ts @@ -0,0 +1,4 @@ +import simpleRestDataProvider from "@refinedev/simple-rest"; + +export const createDataProvider = (apiUrl: string) => + simpleRestDataProvider(apiUrl); diff --git a/packages/refine-ui/examples/base-example/providers/notification.ts b/packages/refine-ui/examples/base-example/providers/notification.ts new file mode 100644 index 0000000000000..ff4ecdb2db8c5 --- /dev/null +++ b/packages/refine-ui/examples/base-example/providers/notification.ts @@ -0,0 +1,145 @@ +import type { NotificationProvider } from "@refinedev/core"; +import { toast } from "sonner"; +import React from "react"; + +export const useNotificationProvider = (): NotificationProvider => { + return { + open: ({ + key, + type, + message, + description, + undoableTimeout, + cancelMutation, + }) => { + if (type === "success") { + toast.success(message, { + id: key, + description, + richColors: true, + }); + } + + if (type === "error") { + toast.error(message, { + id: key, + description, + richColors: true, + }); + } + + if (type === "progress") { + const toastId = key || Date.now(); + + toast.custom( + () => + React.createElement(UndoableNotification, { + message, + description, + undoableTimeout, + cancelMutation, + onClose: () => toast.dismiss(toastId), + }), + { + id: toastId, + duration: (undoableTimeout || 5) * 1000, + }, + ); + } + }, + close: (id) => { + toast.dismiss(id); + }, + }; +}; + +interface UndoableNotificationProps { + message: string; + description?: string; + undoableTimeout?: number; + cancelMutation?: () => void; + onClose?: () => void; +} + +const UndoableNotification: React.FC = ({ + message, + description, + undoableTimeout = 5, + cancelMutation, + onClose, +}) => { + const [countdown, setCountdown] = React.useState(undoableTimeout); + + React.useEffect(() => { + const timer = setInterval(() => { + setCountdown((prev) => { + if (prev <= 1) { + onClose?.(); + return 0; + } + return prev - 1; + }); + }, 1000); + + return () => clearInterval(timer); + }, [onClose]); + + const handleUndo = () => { + cancelMutation?.(); + onClose?.(); + }; + + const handleClose = () => { + onClose?.(); + }; + + return React.createElement( + "div", + { + className: + "flex items-center justify-between w-full max-w-md p-4 bg-white border border-gray-200 rounded-lg shadow-lg dark:bg-gray-800 dark:border-gray-700", + }, + React.createElement( + "div", + { className: "flex-1 mr-3" }, + React.createElement( + "div", + { className: "font-medium text-gray-900 dark:text-white" }, + message, + ), + description && + React.createElement( + "div", + { className: "text-sm text-gray-500 dark:text-gray-400 mt-1" }, + description, + ), + React.createElement( + "div", + { className: "text-xs text-gray-400 dark:text-gray-500 mt-2" }, + `Auto-closes in ${countdown}s`, + ), + ), + React.createElement( + "div", + { className: "flex items-center gap-2" }, + React.createElement( + "button", + { + onClick: handleUndo, + className: + "inline-flex items-center px-3 py-1 text-xs font-medium text-blue-600 bg-blue-50 border border-blue-200 rounded hover:bg-blue-100 dark:bg-blue-900/20 dark:border-blue-800 dark:text-blue-400 dark:hover:bg-blue-900/30", + }, + "Undo", + ), + React.createElement( + "button", + { + onClick: handleClose, + className: + "inline-flex items-center justify-center w-8 h-8 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded dark:hover:bg-gray-700 dark:hover:text-gray-300", + }, + "×", + ), + ), + ); +}; diff --git a/packages/refine-ui/examples/base-example/routes/home.tsx b/packages/refine-ui/examples/base-example/routes/home.tsx new file mode 100644 index 0000000000000..60247bf6ef941 --- /dev/null +++ b/packages/refine-ui/examples/base-example/routes/home.tsx @@ -0,0 +1,39 @@ +import { CloneButton } from "@/registry/new-york/refine-ui/buttons/clone"; +import { CreateButton } from "@/registry/new-york/refine-ui/buttons/create"; +import { DeleteButton } from "@/registry/new-york/refine-ui/buttons/delete"; +import { EditButton } from "@/registry/new-york/refine-ui/buttons/edit"; +import { ListButton } from "@/registry/new-york/refine-ui/buttons/list"; +import { RefreshButton } from "@/registry/new-york/refine-ui/buttons/refresh"; +import { ShowButton } from "@/registry/new-york/refine-ui/buttons/show"; +import { Separator } from "@/registry/new-york/ui/separator"; + +export const HomePage = () => { + return ( +
+
+

Navigation Buttons

+
+ + + + + + + + + +
+
+ + + +
+

Action Buttons

+
+ + +
+
+
+ ); +}; diff --git a/packages/refine-ui/examples/base-example/routes/posts/create.tsx b/packages/refine-ui/examples/base-example/routes/posts/create.tsx new file mode 100644 index 0000000000000..59e48d912e688 --- /dev/null +++ b/packages/refine-ui/examples/base-example/routes/posts/create.tsx @@ -0,0 +1,162 @@ +import React from "react"; +import type { HttpError } from "@refinedev/core"; +import { useForm } from "@refinedev/react-hook-form"; +import { useNavigate } from "react-router"; +import { zodResolver } from "@hookform/resolvers/zod"; +import * as z from "zod"; +import { + Form, + FormControl, + FormField, + FormItem, + FormLabel, + FormMessage, +} from "@/registry/new-york/ui/form"; +import { Input } from "@/registry/new-york/ui/input"; +import { Textarea } from "@/registry/new-york/ui/textarea"; +import { Button } from "@/registry/new-york/ui/button"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/registry/new-york/ui/select"; +import { + CreateView, + CreateViewHeader, +} from "@/registry/new-york/refine-ui/views/create-view"; +import type { Post } from "../../types/resources"; + +const postFormSchema = z.object({ + title: z.string().min(2, { + message: "Title must be at least 2 characters.", + }), + content: z.string().min(10, { + message: "Content must be at least 10 characters.", + }), + status: z.string({ + required_error: "Please select a status.", + }), +}); + +type PostFormValues = z.infer; + +export default function CreatePost() { + const navigate = useNavigate(); + + const { + refineCore: { onFinish, formLoading }, + ...form + } = useForm({ + resolver: zodResolver(postFormSchema), + defaultValues: { + title: "", + content: "", + status: "draft", + }, + refineCoreProps: { + resource: "posts", + action: "create", + }, + }); + + function onSubmit(values: PostFormValues) { + onFinish(values); + } + + return ( + + +
+ + ( + + Title + + + + + + )} + /> + ( + + Content + +