Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ferdiunal/refine-shadcn
This package provides theme integration using shadcn-ui for refine.dev
https://github.com/ferdiunal/refine-shadcn
admin-dashboard admin-panel admin-template nextjs radix-ui react refinedev shadcn-ui tailwindcss vite
Last synced: 1 day ago
JSON representation
This package provides theme integration using shadcn-ui for refine.dev
- Host: GitHub
- URL: https://github.com/ferdiunal/refine-shadcn
- Owner: ferdiunal
- License: mit
- Created: 2024-08-14T11:29:16.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-10-02T19:57:39.000Z (about 1 month ago)
- Last Synced: 2024-10-02T20:03:27.224Z (about 1 month ago)
- Topics: admin-dashboard, admin-panel, admin-template, nextjs, radix-ui, react, refinedev, shadcn-ui, tailwindcss, vite
- Language: TypeScript
- Homepage: https://ferdiunal.tech
- Size: 1.96 MB
- Stars: 27
- Watchers: 0
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-refine - @ferdiunal/refine-shadcn
README
# refine-shadcn
This package is a theme integration for [refine.dev](https://refine.dev) built using [ui.shadcn](ui.shadcn.com).
# Previews 💪
### [Vite Example](https://refine-shadcn-vite.vercel.app)
### [Nextjs Example](https://refine-shadcn-nextjs.vercel.app)
## Install
```bash
npm install @ferdiunal/refine-shadcn
```
or
```bash
yarn add @ferdiunal/refine-shadcn
```
## Useage
**For Vite**
[You can use the layout structure prepared for Vite.js from this link](templates/vite-react/src/App.tsx)
**For NexJs**
[You can use the layout structure prepared for Next.js from this link](templates/nextjs/app/app-layout.tsx)
### List Page
The List Page displays a table or a grid of records fetched from a data source. It typically includes features like filtering, sorting, bulk actions, and pagination to help users navigate through large sets of data efficiently.
Code Example
```tsx
import { ListPage, Table, TableFilterProps } from "@ferdiunal/refine-shadcn";
import { AvatarImage } from "@radix-ui/react-avatar";
import { BaseRecord, HttpError, useUserFriendlyName } from "@refinedev/core";
import type { UseTableReturnType } from "@refinedev/react-table";
import { Edit, Eye, Trash2 } from "lucide-react";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Checkbox } from "@/components/ui/checkbox";
const UserList = () => {
const friendly = useUserFriendlyName();
const bulkDeleteAction = (
table: UseTableReturnType,
) => {
const label = `Delete Selected (${
table.getSelectedRowModel().rows.length
}) ${friendly(
"Row",
table.getSelectedRowModel().rows.length > 1 ? "plural" : "singular",
)}`;
return {
label,
onClick: () => {
alert("Delete Selected");
},
};
};
return (
(
)}
cell={({ row }) => (
row.toggleSelected(!!value)
}
aria-label="Select row"
key={`checkbox-${row.original.id}`}
/>
)}
/>
row.original.avatar?.[0]?.url && (
{row.original.firstName[0]}
{row.original.lastName[0]}
)
}
/>
(
)}
/>
(
}
/>
}
/>
}
/>
)}
/>
);
};
export default UserList;
```
### Show Page
The Show Page is designed to display detailed information about a single record. It is a read-only view that presents the data in a structured format, often including related records and metadata to give users a comprehensive understanding of the selected item.
Code Example
```tsx
import { ShowPage } from "@ferdiunal/refine-shadcn";
import { IResourceComponentsProps, useShow } from "@refinedev/core";
import { IUser } from "./Form";
const UserShow: React.FC = () => {
const {
query: { data },
} = useShow();
const record = data?.data;
return (
);
};
export default UserShow;
```
### Create Page
The Create Page allows users to input new data into the system. It provides a form where users can fill out the necessary fields to create a new record, ensuring that all required information is collected before submission.
Code Example
```tsx
import { CreatePage } from "@ferdiunal/refine-shadcn";
import { Field, Form } from "@ferdiunal/refine-shadcn";
import { zodResolver } from "@hookform/resolvers/zod";
import { RedirectAction } from "@refinedev/core";
import { useForm } from "@refinedev/react-hook-form";
import * as z from "zod";
import { Input } from "@/components/ui/input";
export interface IUser {
id: number;
firstName: string;
lastName: string;
email: string;
}
const formSchema = z.object({
firstName: z.string().min(2, {
message: "Firstname must be at least 2 characters.",
}),
lastName: z.string().min(2, {
message: "Lastname must be at least 2 characters.",
}),
email: z.string().email({
message: "Please enter a valid email address.",
}),
});
const UserCreate = () => {
const { ...form } = useForm>({
mode: "all",
resolver: zodResolver(formSchema),
defaultValues: {
firstName: "",
lastName: "",
email: "",
},
refineCoreProps: {
autoSave: {
enabled: true,
},
redirect,
},
warnWhenUnsavedChanges: true,
});
return (
);
};
export default UserCreate;
```
### Edit Page
The Edit Page enables users to modify existing records. It loads the current data into a form, allowing users to make updates and save changes. It usually includes validation to ensure that updates do not violate any data integrity rules.
Code Example
```tsx
import { EditPage } from "@ferdiunal/refine-shadcn";
import { Field, Form } from "@ferdiunal/refine-shadcn";
import { zodResolver } from "@hookform/resolvers/zod";
import { RedirectAction } from "@refinedev/core";
import { useForm } from "@refinedev/react-hook-form";
import * as z from "zod";
import { Input } from "@/components/ui/input";
export interface IUser {
id: number;
firstName: string;
lastName: string;
email: string;
}
const formSchema = z.object({
firstName: z.string().min(2, {
message: "Firstname must be at least 2 characters.",
}),
lastName: z.string().min(2, {
message: "Lastname must be at least 2 characters.",
}),
email: z.string().email({
message: "Please enter a valid email address.",
}),
});
const UserEdit = () => {
const { ...form } = useForm>({
mode: "all",
resolver: zodResolver(formSchema),
defaultValues: {
firstName: "",
lastName: "",
email: "",
},
refineCoreProps: {
autoSave: {
enabled: true,
},
redirect,
},
warnWhenUnsavedChanges: true,
});
return (
);
};
export default UserEdit;
```
## Screenshots
# Sponsors
[
](https://github.com/refinedev)
## License
The MIT License (MIT). Please see [License File](LICENSE) for more information.