Custom ordering, new config features, refactoring

- New order attribute to custom order fields - Added new ZenStackUIOptions object for passing settings with defaults - package/src/form file has been separated into multiple separate files for readability - renamed items with "Zenstack" to "ZenStack" with a capital S to match the official naming scheme (ex: official plugin uses name "ZenStackHooksProvider", my ocd kicked in)
kirankunigiri · Dec 9, 2024 · 1001ed1 · 1001ed1
1 parent 32e472e
commit 1001ed1
Show file tree

Hide file tree

Showing 13 changed files with 614 additions and 519 deletions.
diff --git a/example-client/src/form/form-config.tsx b/example-client/src/form/form-config.tsx
@@ -1,13 +1,12 @@
-import { Checkbox, MultiSelect, NumberInput, TextInput } from '@mantine/core';
-import { Button } from '@mantine/core';
+import { Button, Checkbox, MultiSelect, NumberInput, TextInput } from '@mantine/core';
 
 import { SearchableSelect } from '~client/form/lib/searchable-select';
 import { queryClient } from '~client/utils/query-client';
 import * as hooks from '~zenstack/hooks';
 import metadata from '~zenstack/hooks/__model_meta';
 import * as schemas from '~zenstack/zod/models';
 import { type Field, FieldType } from '~zenstack-ui/metadata';
-import type { MapFieldTypeToElement, MapSubmitTypeToButton, SubmitButtonProps, ZenstackUIConfigType } from '~zenstack-ui/utils/provider';
+import type { MapFieldTypeToElement, MapSubmitTypeToButton, SubmitButtonProps, ZenStackUIConfigCreate } from '~zenstack-ui/utils/provider';
 
 // --------------------------------------------------------------------------------
 // Form Config - Element Mapping
@@ -84,6 +83,8 @@ export const meta = metadata as EnhancedMetadata<typeof metadata>;
 meta.models.item.fields.id.hidden = true;
 meta.models.houseRoom.fields.id.hidden = true;
 meta.models.houseRoom.fields.aiSummary.label = 'AI Generated Summary';
+meta.models.item.fields.category.order = 2;
+meta.models.item.fields.name.order = 1;
 
 // All forms that reference the room model will use the room name instead of id in the Select component
 meta.models.houseRoom.fields.id.displayFieldForReferencePicker = meta.models.houseRoom.fields.name.name;
@@ -100,7 +101,7 @@ meta.models.item.fields.ownerName.filter = (itemFields: typeof meta.models.item.
 // --------------------------------------------------------------------------------
 // Export config
 // --------------------------------------------------------------------------------
-export const zenstackUIConfig: ZenstackUIConfigType = {
+export const zsuiConfig: ZenStackUIConfigCreate = {
 	hooks,
 	schemas,
 	metadata: meta,
@@ -109,4 +110,8 @@ export const zenstackUIConfig: ZenstackUIConfigType = {
 	enumLabelTransformer: (label: string) => label.replace(/_/g, ' '),
 	globalClassName: 'flex flex-col gap-2',
 	queryClient,
+	options: {
+		// Example of using custom options
+		// showOrderedFieldsFirst: false,
+	},
 };
diff --git a/example-client/src/main.tsx b/example-client/src/main.tsx
@@ -17,13 +17,13 @@ import { createTRPCReact } from '@trpc/react-query';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 
-import { zenstackUIConfig } from '~client/form/form-config';
+import { zsuiConfig } from '~client/form/form-config';
 import { theme } from '~client/routes/-mantine-theme';
 import { routeTree } from '~client/routeTree.gen';
 import { queryClient } from '~client/utils/query-client';
 import type { AppRouter } from '~server/api';
 import { Provider as ZenStackHooksProvider } from '~zenstack/hooks';
-import { ZenstackUIProvider } from '~zenstack-ui/utils/provider';
+import { ZenStackUIProvider } from '~zenstack-ui/utils/provider';
 
 // --------------------------------------------------------------------------------
 // TanStack Router Setup
@@ -84,7 +84,7 @@ if (!rootElement.innerHTML) {
 				<QueryClientProvider client={queryClient}>
 					<ZenStackHooksProvider value={{ endpoint: `${serverUrl}/api/model` }}>
 						<MantineProvider theme={theme} defaultColorScheme="dark">
-							<ZenstackUIProvider config={zenstackUIConfig}>
+							<ZenStackUIProvider config={zsuiConfig}>
 								<ModalsProvider>
 									<RouterProvider router={router} />
 									<ReactQueryDevtools initialIsOpen={false} />
@@ -99,7 +99,7 @@ if (!rootElement.innerHTML) {
 										toggleButtonProps={{ id: tanStackRouterDevToolsOpenBtnId, className: '!hidden' }}
 									/>
 								</ModalsProvider>
-							</ZenstackUIProvider>
+							</ZenStackUIProvider>
 						</MantineProvider>
 					</ZenStackHooksProvider>
 				</QueryClientProvider>

diff --git a/example-client/src/routes/index.tsx b/example-client/src/routes/index.tsx
@@ -6,6 +6,6 @@ export const Route = createFileRoute('/')({
 
 function RouteComponent() {
 	return (
-		<Navigate to="/items" />
+		<Navigate to="/items" search={{ search: undefined }} />
 	);
 }
diff --git a/example-client/src/routes/items/$id.tsx b/example-client/src/routes/items/$id.tsx
@@ -5,6 +5,7 @@ import { modelNames } from '~client/form/form-config';
 import { DetailHeader } from '~client/form/lib/detail-header';
 import MZSUpdateForm from '~client/form/lib/mantine-update-form';
 import { ItemSchema } from '~zenstack/zod/models';
+import type { ZenStackUIOptions } from '~zenstack-ui/index';
 
 export const Route = createFileRoute('/items/$id')({
 	component: ItemsDetail,
@@ -17,6 +18,12 @@ const CustomItemSchema = ItemSchema
 		path: ['name'],
 	});
 
+// Example to pass options override, uncomment to test
+const optionsOverride: Partial<ZenStackUIOptions> = {
+	// showOrderedFieldsFirst: false,
+	// showUpdateButton: true,
+};
+
 function ItemsDetail() {
 	const params = Route.useParams() as { id: string };
 	const id = Number(params.id);
@@ -25,7 +32,7 @@ function ItemsDetail() {
 		<div className="flex grow flex-col justify-between">
 			<div>
 				<DetailHeader model={modelNames.item} id={id} route="/items" />
-				<MZSUpdateForm model={modelNames.item} id={id} route="/items/$id" schemaOverride={CustomItemSchema} />
+				<MZSUpdateForm model={modelNames.item} id={id} route="/items/$id" schemaOverride={CustomItemSchema} optionsOverride={optionsOverride} />
 			</div>
 
 			<ItemsDetailCode />

diff --git a/example-client/src/routes/rooms/$id.tsx b/example-client/src/routes/rooms/$id.tsx
@@ -6,7 +6,8 @@ import { modelNames, typedModelFields } from '~client/form/form-config';
 import { DetailHeader } from '~client/form/lib/detail-header';
 import MZSUpdateForm from '~client/form/lib/mantine-update-form';
 import { CustomRoomUpdateSchema } from '~server/schemas';
-import { ZSCustomField, ZSFieldSlot, type ZSFormRef } from '~zenstack-ui/index';
+import type { ZSFormRef } from '~zenstack-ui/form/base';
+import { ZSCustomField, ZSFieldSlot } from '~zenstack-ui/index';
 
 export const Route = createFileRoute('/rooms/$id')({
 	component: PeopleDetail,

diff --git a/package/package.json b/package/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "zenstack-ui",
 	"description": "Customizable react components for zenstack (forms/lists/etc.)",
-	"version": "0.0.20",
+	"version": "0.0.21",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/kirankunigiri/zenstack-ui",