Skip to content

Commit 9388d69

Browse files
fgatti675fgatti675
committed
Moved plugins to navigation controller, and doc updates
1 parent e393f4e commit 9388d69

File tree

19 files changed

+325
-209
lines changed

19 files changed

+325
-209
lines changed

‎examples/example_pro/src/FirestoreApp/collections/test_collection.tsx

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -316,22 +316,22 @@ export const testCollection = buildCollection<any>({
316316
// return <div>Test</div>;
317317
// }
318318
// }),
319-
// body: buildProperty({
320-
// name: "Body",
321-
// validation: { required: false },
322-
// dataType: "map",
323-
// keyValue: true,
324-
// customProps: {
325-
// editable: true
326-
// },
327-
// defaultValue: {
328-
// clientIp: "client.ip",
329-
// clientDeviceType: "client.deviceType",
330-
// clientLanguage: "client.language",
331-
// clientReferral: "client.referral",
332-
// clientUserAgent: "client.userAgent",
333-
// },
334-
// }),
319+
body: buildProperty({
320+
name: "Body",
321+
validation: { required: false },
322+
dataType: "map",
323+
keyValue: true,
324+
customProps: {
325+
editable: true
326+
},
327+
defaultValue: {
328+
clientIp: "client.ip",
329+
clientDeviceType: "client.deviceType",
330+
clientLanguage: "client.language",
331+
clientReferral: "client.referral",
332+
clientUserAgent: "client.userAgent",
333+
},
334+
}),
335335
// background: {
336336
// dataType: "number",
337337
// name: "Colour",

‎packages/cli/templates/template_pro/src/App.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -218,7 +218,6 @@ export function App() {
218218
userConfigPersistence={userConfigPersistence}
219219
dataSourceDelegate={firestoreDelegate}
220220
storageSource={storageSource}
221-
plugins={plugins}
222221
>
223222
{({
224223
context,

‎packages/collection_editor/README.md

Lines changed: 165 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,165 @@
1-
## Collection editor plugin
1+
# FireCMS Collection Editor Plugin
2+
3+
This plugin enables creating and managing Firestore collections directly from your FireCMS interface. It adds a visual
4+
collection editor that allows you to create, edit, and delete collections without writing code.
5+
6+
## Installation
7+
8+
```bash
9+
npm install @firecms/collection_editor
10+
# or
11+
yarn add @firecms/collection_editor
12+
```
13+
14+
For Firebase integration, also install:
15+
16+
```bash
17+
npm install @firecms/collection_editor_firebase
18+
# or
19+
yarn add @firecms/collection_editor_firebase
20+
```
21+
22+
## Features
23+
24+
- Create and edit collections through a visual interface
25+
- Define properties, validations, and display options
26+
- Organize collections with groups and subcollections
27+
- Merge UI-defined collections with code-defined collections
28+
- Persist collection configurations in Firestore
29+
- Control permissions for collection editing operations
30+
31+
## Basic Usage
32+
33+
```tsx
34+
import React from "react";
35+
import { FireCMS } from "@firecms/core";
36+
import { useCollectionEditorPlugin } from "@firecms/collection_editor";
37+
import { useFirestoreCollectionsConfigController } from "@firecms/collection_editor_firebase";
38+
39+
export default function App() {
40+
// Controller to save collection configs in Firestore
41+
const collectionConfigController = useFirestoreCollectionsConfigController({
42+
firebaseApp
43+
});
44+
45+
// Initialize the collection editor plugin
46+
const collectionEditorPlugin = useCollectionEditorPlugin({
47+
collectionConfigController
48+
});
49+
50+
const navigationController = useBuildNavigationController({
51+
// Your other config options
52+
plugins: [collectionEditorPlugin]
53+
});
54+
55+
return <FireCMS
56+
name={"My CMS"}
57+
navigationController={navigationController}
58+
authentication={myAuthenticator}
59+
firebaseConfig={firebaseConfig}
60+
/>;
61+
}
62+
```
63+
64+
## Advanced Configuration
65+
66+
You can customize collection editor behavior with these options:
67+
68+
```tsx
69+
const collectionEditorPlugin = useCollectionEditorPlugin({
70+
collectionConfigController, // Required: controller that handles persistence
71+
72+
// Define permissions for collection operations
73+
configPermissions: ({ user }) => ({
74+
createCollections: user.roles?.includes("admin") ?? false,
75+
editCollections: user.roles?.includes("admin") ?? false,
76+
deleteCollections: user.roles?.includes("admin") ?? false
77+
}),
78+
79+
// Prevent these group names from being used
80+
reservedGroups: ["admin", "system"],
81+
82+
// Optional custom view to add to the editor
83+
extraView: {
84+
View: MyCustomView,
85+
icon: <CustomIcon />
86+
},
87+
88+
// Function to infer collection structure from existing data
89+
collectionInference: async ({ path }) => {
90+
// Return inferred schema based on data at path
91+
},
92+
93+
// Function to get sample data for a collection
94+
getData: async (path, parentPaths) => {
95+
// Return sample data for the specified path
96+
},
97+
98+
// Track collection editor events
99+
onAnalyticsEvent: (event, params) => {
100+
console.log("Collection editor event:", event, params);
101+
},
102+
103+
// Include introduction widget when no collections exist
104+
includeIntroView: true
105+
});
106+
```
107+
108+
## Integration with Code-Defined Collections
109+
110+
You can combine collections defined in code with those created in the UI:
111+
112+
```tsx
113+
import { mergeCollections } from "@firecms/collection_editor";
114+
115+
const collectionsBuilder = useCallback(() => {
116+
// Collections defined in code
117+
const codeCollections = [productsCollection, ordersCollection];
118+
119+
// Merge with collections from the editor UI
120+
return mergeCollections(codeCollections, collectionConfigController.collections ?? []);
121+
}, [collectionConfigController.collections]);
122+
123+
const navigationController = useBuildNavigationController({
124+
collections: collectionsBuilder,
125+
// Other options
126+
});
127+
```
128+
129+
## Firestore Configuration Controller
130+
131+
To persist collections in Firestore:
132+
133+
```tsx
134+
const collectionConfigController = useFirestoreCollectionsConfigController({
135+
firebaseApp,
136+
137+
// Optional: specify where to save configs (default: "__FIRECMS/config/collections")
138+
configPath: "custom/config/path",
139+
140+
// Optional: define permissions for collections
141+
permissions: ({ user }) => ({
142+
// Your permissions logic
143+
}),
144+
145+
// Optional: custom property configurations
146+
propertyConfigs: [
147+
// Custom property types
148+
]
149+
});
150+
```
151+
152+
## Additional Notes
153+
154+
- Collections created through the editor are stored in Firestore and loaded dynamically
155+
- The plugin automatically adds UI elements for creating and managing collections
156+
- For a complete solution, consider using alongside other plugins like data import/export
157+
158+
## Related Plugins
159+
160+
FireCMS offers several complementary plugins:
161+
162+
- Data Import: Import data from CSV or JSON into Firestore collections
163+
- Data Export: Export collection data to CSV or JSON formats
164+
- Data Enhancement: Generate content using AI for your collections
165+
- Entity History: Track changes to your collection entities

‎packages/data_enhancement/README.md

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ No need to add any subscription key or anything like that.
2424

2525
```tsx
2626
import React from "react";
27-
import { FirebaseCMSApp } from "@firecms/core";
27+
import { FireCMS } from "@firecms/core";
2828
import "typeface-rubik";
2929
import "@fontsource/jetbrains-mono";
3030

@@ -51,13 +51,18 @@ export default function App() {
5151
}
5252
});
5353

54-
return <FirebaseCMSApp
54+
const plugins = [dataEnhancementPlugin];
55+
56+
const navigationController = useBuildNavigationController({
57+
// ... rest of your config
58+
plugins
59+
});
60+
61+
return <FireCMS
5562
name={"My Online Shop"}
5663
plugins={[dataEnhancementPlugin]}
5764
authentication={myAuthenticator}
58-
collections={[
59-
//...
60-
]}
65+
navigationController={navigationController}
6166
firebaseConfig={firebaseConfig}
6267
/>;
6368
}

‎packages/data_export/README.md

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ I'll enhance the README with more detailed documentation, configuration options,
22

33
# FireCMS Data Export Plugin
44

5-
This plugin enables exporting Firestore collections to CSV or JSON formats directly from your FireCMS interface. It adds an export button to collection views, providing a simple way to back up data or share it with others.
5+
This plugin enables exporting Firestore collections to CSV or JSON formats directly from your FireCMS interface. It adds
6+
an export button to collection views, providing a simple way to back up data or share it with others.
67

78
## Installation
89

@@ -23,17 +24,25 @@ yarn add @firecms/data_export
2324

2425
```tsx
2526
import React from "react";
26-
import { FirebaseCMSApp } from "@firecms/core";
27+
import { FireCMS } from "@firecms/core";
2728
import { useExportPlugin } from "@firecms/data_export";
2829

2930

3031
export default function App() {
3132

3233
// Basic setup with default options
3334
const exportPlugin = useExportPlugin();
34-
return <FirebaseCMSApp
35+
36+
const plugins = [exportPlugin];
37+
38+
const navigationController = useBuildNavigationController({
39+
// ... rest of your config
40+
plugins
41+
});
42+
43+
return <FireCMS
3544
name={"My Online Shop"}
36-
plugins={[exportPlugin]}
45+
navigationController={navigationController}
3746
authentication={myAuthenticator}
3847
collections={myCollections}
3948
firebaseConfig={firebaseConfig}
@@ -68,18 +77,18 @@ const exportPlugin = useExportPlugin({
6877

6978
## Configuration Options
7079

71-
| Option | Type | Description |
72-
|--------|------|-------------|
73-
| `exportAllowed` | `(params: ExportAllowedParams) => boolean` | Function to determine if export is allowed for a collection |
74-
| `notAllowedView` | `React.ReactNode` | Custom component to display when export is not allowed |
75-
| `onAnalyticsEvent` | `(event: string, params?: any) => void` | Callback for tracking export events |
80+
| Option | Type | Description |
81+
|--------------------|--------------------------------------------|-------------------------------------------------------------|
82+
| `exportAllowed` | `(params: ExportAllowedParams) => boolean` | Function to determine if export is allowed for a collection |
83+
| `notAllowedView` | `React.ReactNode` | Custom component to display when export is not allowed |
84+
| `onAnalyticsEvent` | `(event: string, params?: any) => void` | Callback for tracking export events |
7685

7786
Where `ExportAllowedParams` includes:
87+
7888
- `collectionEntitiesCount`: Number of entities in the collection
7989
- `path`: Path of the collection
8090
- `collection`: Collection configuration object
8191

82-
8392
## Additional Notes
8493

8594
- Exports are performed client-side and may be limited by browser capabilities for very large collections

‎packages/data_import/README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ yarn add @firecms/data_import
2121

2222
```tsx
2323
import React from "react";
24-
import { FirebaseCMSApp } from "@firecms/core";
24+
import { FireCMS } from "@firecms/core";
2525
import { useImportPlugin } from "@firecms/data_import";
2626

2727

@@ -30,7 +30,7 @@ export default function App() {
3030
// Basic setup with default options
3131
const importPlugin = useImportPlugin();
3232

33-
return <FirebaseCMSApp
33+
return <FireCMS
3434
name={"My Online Shop"}
3535
plugins={[importPlugin]}
3636
authentication={myAuthenticator}

0 commit comments

Comments
 (0)