CRUD Bundle
Version: 2.80.0 | TypeScript Files: 97 (74 TSX + 23 TS) | Components: 49+
Introduction
A powerful CRUD (Create, Read, Update, Delete) components library that transforms complex data operations into simple, reusable components. Built for Next.js 14+ with React 18+, TypeScript 5+, and Tailwind CSS.
Quick Navigation
Listing ComponentsForm ComponentsEntity ManagementModal ComponentsContext ProvidersImport/ExportMetadata ComponentsUtility FunctionsAdditional ComponentsCustom Properties
Installation
To use @phpcreation/frontend-crud-react-nextjs-bundle in your project, follow these steps:
Open a terminal in your project root
Create a Github Personnal Access Token
How to create a Github PAT :
Create a Github Personal Access TokenLogin to NPM registry
npm login --scope=@phpcreation --auth-type=legacy --registry=https://npm.pkg.github.com- username: your github username in lowercase
- password: The PAT you just created
Install the Package
npm install @phpcreation/frontend-crud-react-nextjs-bundleSetup
Environment Variables
Follow these steps to manage environment variables correctly :
Environment Variables Management.env
# App Id
NEXT_PUBLIC_APP_ID= # The App Id
# Feedback form
NEXT_PUBLIC_TICKET_FEEDBACK= # The URL to the feedback form
# Icons
NEXT_PUBLIC_ICONS_URL= # The url provided by the ICONS Library (@phpcreation/frontend-icons-react-nextjs-bundle)
# Components Bundle
NEXT_PUBLIC_DROPDOWN_API_SUFFIX = 1 # 0 - Don't add suffix to dropdown API call (/dropdown) instead of (/dropdown/get)
# CRUD Bundle - The fun configuration part!
NEXT_PUBLIC_Role_Accessibility_Check = 0 # 0 = No role checks (perfect for development)
NEXT_PUBLIC_KVS_DATA_STORE_TOGGLE = 0 # 0 = Skip KVS (Key-Value Store for user preferences)
NEXT_PUBLIC_KVS_API_RESOURCE_NAME = "key_values" # OPTIONAL - Custom KVS resource name
NEXT_PUBLIC_USE_PUT_METHOD = 0 # 0 = Use PATCH instead of PUT (recommended for partial updates)
NEXT_PUBLIC_IMPORT_FEATURE_TOGGLE = 0 # 0 = Hide import buttons (set to 1 to enable bulk imports)Project Structure
The CRUD bundle v2.80.0 follows a structured architecture with 97 TypeScript files across 89 directories:
src/
├── components/ # 20 component directories (61 files)
│ ├── ActionButtons/ # Reusable action buttons with dropdown support
│ ├── AddEntity/ # Form, Footer for creating entities
│ ├── DebugFooter/ # Debug information display
│ ├── DetailShow/ # Actions, Associations, File, Footer, GeneralDetails, Header
│ ├── DraggableDropdown/ # Drag and drop functionality
│ ├── EditEntity/ # Form for editing entities
│ ├── ImportEntity/ # DocumentationSidebox, FileUploader, ImportForm, ImportTable, ReviewContainer
│ ├── InfoBadge/ # Information badges
│ ├── Listing/ # 9 sub-components: Actions, DefaultFiltersMenu, Filters, Footer, Header, KanbanBoard, ListingTable, Pagination, QueryString
│ ├── MetadataEntity/ # APITab, FieldsTab, Footer, Header, InterfacesTab, OverviewTab
│ ├── MetadataFooter/ # Metadata footer component
│ ├── Modals/ # 16 modal types (see Modal Components)
│ ├── Navbar/ # Navigation with breadcrumbs
│ ├── QueryString/ # URL query string management
│ ├── RenderFilterFields/ # Dynamic filter rendering (431 lines)
│ ├── RenderFormFields/ # Dynamic form rendering (360 lines)
│ ├── SidebarMenu/ # Collapsible sidebar navigation
│ ├── Sidebox/ # Contextual sidebar content
│ ├── Tour/ # Guided tours with CustomTooltip
│ └── TranslatableFields/ # Multi-language field support
├── contexts/ # 4 React contexts
│ ├── DebugContext/ # Debugging utilities
│ ├── DetailShowContext/ # Entity detail view state
│ ├── KanbanListingContext/# Kanban board state & drag-drop
│ └── ListingContext/ # Data listing, filtering, pagination
├── sitedata/ # 7 data modules
│ ├── AddFilterModal/ # Filter modal configuration
│ ├── Countries/ # Country data
│ ├── Dashboard/ # Dashboard configuration
│ ├── DefaultTime/ # Time zone defaults
│ ├── Help/ # Help content
│ ├── ImportJobDocumentation/ # Import documentation
│ └── SystemFields/ # System field definitions
├── styles/ # Global CSS (globals.css)
└── utils/
├── HOC/ # getPageConfig
├── default/ # TenantWhitelist, TenantIgnorelist
├── functions/ # 9 utility functions
│ ├── formatEntityName
│ ├── validateFormSchema
│ ├── callAPI
│ ├── getTenant
│ ├── getTenantBackend
│ ├── importEntitySchema
│ ├── logger
│ ├── getUpdatedFormFields
│ └── verifyUser
└── hooks/ # 6 custom hooks
├── useKVS
├── useTreeView
├── useFormValues
├── useDefaultFormValues
├── useScrollToError
└── useActionButtonsDependencies
Key dependencies include:
| Category | Packages |
|---|---|
| Framework | React 18+, Next.js 14.2+, TypeScript 5+ |
| Form & Validation | react-hook-form ^7.51.5, @hookform/resolvers ^5.1.1, zod ^3.25.49 |
| Drag & Drop | react-beautiful-dnd ^13.1.1 |
| API & Caching | axios ^1.9.0, axios-cache-interceptor ^1.6.2 |
| Styling | Tailwind CSS, tailwindcss-animate ^1.0.7, clsx ^2.1.1 |
| i18n | next-intl ^4.0.2 |
| UI Components | @radix-ui/react-dialog ^1.1.15, react-icons ^5.5.0 |
| Notifications | react-hot-toast ^2.4.1, sonner ^1.7.1 |
| Tours | react-joyride ^2.9.3 |
| Date/Time | moment-timezone ^0.6.0 |
| Security | jose ^5.9.6, jsonwebtoken ^9.0.2, csrf ^3.1.0, crypto-js ^4.2.0 |
| AWS | @aws-sdk/client-dynamodb ^3.726.1, @aws-sdk/lib-dynamodb ^3.726.1 |
| Monitoring | @sentry/nextjs ^8.48.0 |
| Utilities | uuid ^11.0.5, js-cookie ^3.0.5, html-react-parser ^5.2.10, hotkeys-js ^3.13.11 |
Usage Examples
Basic Listing Implementation
import {
ListingTable,
ListingContextProvider,
ListingActions,
} from "@phpcreation/frontend-crud-react-nextjs-bundle/components";
function MyListing() {
return (
<ListingContextProvider>
<ListingActions resource="users" />
<ListingTable resource="users" columns={columns} data={data} />
</ListingContextProvider>
);
}Form Integration
import {
AddEntityForm,
RenderFormFields,
} from "@phpcreation/frontend-crud-react-nextjs-bundle/components";
function CreateUser() {
return (
<AddEntityForm
resource="users"
formInputs={userFormFields}
fqcn_bui={fqcnConfig}
onSuccess={handleSuccess}
/>
);
}Common Issues
Common IssuesLast updated on