@firecms/collection_editor 3.0.0-canary.98 → 3.0.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (79) hide show
  1. package/README.md +165 -1
  2. package/dist/ConfigControllerProvider.d.ts +0 -1
  3. package/dist/index.es.js +9920 -4958
  4. package/dist/index.es.js.map +1 -1
  5. package/dist/index.umd.js +9912 -4954
  6. package/dist/index.umd.js.map +1 -1
  7. package/dist/types/collection_editor_controller.d.ts +0 -1
  8. package/dist/types/collection_inference.d.ts +4 -1
  9. package/dist/types/config_controller.d.ts +3 -1
  10. package/dist/types/config_permissions.d.ts +2 -2
  11. package/dist/types/persisted_collection.d.ts +1 -1
  12. package/dist/ui/EditorEntityAction.d.ts +2 -0
  13. package/dist/ui/collection_editor/CollectionDetailsForm.d.ts +3 -1
  14. package/dist/ui/collection_editor/CollectionEditorWelcomeView.d.ts +1 -1
  15. package/dist/ui/collection_editor/CollectionPropertiesEditorForm.d.ts +1 -1
  16. package/dist/ui/collection_editor/EntityActionsEditTab.d.ts +4 -0
  17. package/dist/ui/collection_editor/EntityActionsSelectDialog.d.ts +4 -0
  18. package/dist/ui/collection_editor/LayoutModeSwitch.d.ts +5 -0
  19. package/dist/ui/collection_editor/PropertyEditView.d.ts +8 -0
  20. package/dist/ui/collection_editor/PropertyTree.d.ts +2 -3
  21. package/dist/ui/collection_editor/import/CollectionEditorImportDataPreview.d.ts +1 -1
  22. package/dist/ui/collection_editor/import/CollectionEditorImportMapping.d.ts +8 -1
  23. package/dist/ui/collection_editor/import/clean_import_data.d.ts +1 -1
  24. package/dist/ui/collection_editor/properties/MarkdownPropertyField.d.ts +4 -0
  25. package/dist/ui/collection_editor/properties/ReferencePropertyField.d.ts +2 -1
  26. package/dist/ui/collection_editor/properties/StringPropertyField.d.ts +1 -1
  27. package/dist/useCollectionEditorPlugin.d.ts +6 -6
  28. package/dist/utils/collections.d.ts +1 -1
  29. package/package.json +25 -23
  30. package/src/ConfigControllerProvider.tsx +2 -7
  31. package/src/types/collection_editor_controller.tsx +1 -2
  32. package/src/types/collection_inference.ts +4 -1
  33. package/src/types/config_controller.tsx +4 -1
  34. package/src/types/config_permissions.ts +1 -1
  35. package/src/types/persisted_collection.ts +2 -3
  36. package/src/ui/CollectionViewHeaderAction.tsx +4 -2
  37. package/src/ui/EditorCollectionAction.tsx +3 -7
  38. package/src/ui/EditorCollectionActionStart.tsx +1 -1
  39. package/src/ui/EditorEntityAction.tsx +51 -0
  40. package/src/ui/HomePageEditorCollectionAction.tsx +5 -3
  41. package/src/ui/NewCollectionButton.tsx +1 -1
  42. package/src/ui/PropertyAddColumnComponent.tsx +5 -3
  43. package/src/ui/collection_editor/CollectionDetailsForm.tsx +126 -49
  44. package/src/ui/collection_editor/CollectionEditorDialog.tsx +71 -16
  45. package/src/ui/collection_editor/CollectionEditorWelcomeView.tsx +20 -29
  46. package/src/ui/collection_editor/CollectionPropertiesEditorForm.tsx +19 -17
  47. package/src/ui/collection_editor/EntityActionsEditTab.tsx +163 -0
  48. package/src/ui/collection_editor/EntityActionsSelectDialog.tsx +41 -0
  49. package/src/ui/collection_editor/EntityCustomViewsSelectDialog.tsx +11 -7
  50. package/src/ui/collection_editor/EnumForm.tsx +11 -7
  51. package/src/ui/collection_editor/GetCodeDialog.tsx +46 -26
  52. package/src/ui/collection_editor/LayoutModeSwitch.tsx +54 -0
  53. package/src/ui/collection_editor/PropertyEditView.tsx +260 -75
  54. package/src/ui/collection_editor/PropertyFieldPreview.tsx +5 -4
  55. package/src/ui/collection_editor/PropertyTree.tsx +184 -138
  56. package/src/ui/collection_editor/SubcollectionsEditTab.tsx +24 -17
  57. package/src/ui/collection_editor/UnsavedChangesDialog.tsx +9 -7
  58. package/src/ui/collection_editor/import/CollectionEditorImportDataPreview.tsx +11 -3
  59. package/src/ui/collection_editor/import/CollectionEditorImportMapping.tsx +34 -3
  60. package/src/ui/collection_editor/import/clean_import_data.ts +1 -1
  61. package/src/ui/collection_editor/properties/BlockPropertyField.tsx +18 -12
  62. package/src/ui/collection_editor/properties/DateTimePropertyField.tsx +54 -47
  63. package/src/ui/collection_editor/properties/EnumPropertyField.tsx +2 -0
  64. package/src/ui/collection_editor/properties/MapPropertyField.tsx +3 -2
  65. package/src/ui/collection_editor/properties/MarkdownPropertyField.tsx +139 -0
  66. package/src/ui/collection_editor/properties/ReferencePropertyField.tsx +7 -3
  67. package/src/ui/collection_editor/properties/StoragePropertyField.tsx +13 -18
  68. package/src/ui/collection_editor/properties/StringPropertyField.tsx +1 -10
  69. package/src/ui/collection_editor/properties/UrlPropertyField.tsx +1 -0
  70. package/src/ui/collection_editor/properties/advanced/AdvancedPropertyValidation.tsx +2 -0
  71. package/src/ui/collection_editor/properties/validation/ValidationPanel.tsx +2 -2
  72. package/src/ui/collection_editor/templates/pages_template.ts +1 -6
  73. package/src/ui/collection_editor/utils/strings.ts +13 -6
  74. package/src/ui/collection_editor/utils/supported_fields.tsx +1 -0
  75. package/src/ui/collection_editor/utils/update_property_for_widget.ts +9 -0
  76. package/src/useCollectionEditorPlugin.tsx +20 -15
  77. package/src/utils/collections.ts +23 -7
  78. package/dist/ui/collection_editor/PropertySelectItem.d.ts +0 -8
  79. package/src/ui/collection_editor/PropertySelectItem.tsx +0 -32
package/README.md CHANGED
@@ -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
@@ -29,7 +29,6 @@ export interface ConfigControllerProviderProps {
29
29
  }>;
30
30
  icon: React.ReactNode;
31
31
  };
32
- getPathSuggestions?: (path?: string) => Promise<string[]>;
33
32
  getUser?: (uid: string) => User | null;
34
33
  getData?: (path: string, parentPaths: string[]) => Promise<object[]>;
35
34
  onAnalyticsEvent?: (event: string, params?: object) => void;