drf-react-by-schema 0.7.6 → 0.8.0

package/README.md

@@ -1,22 +1,75 @@
 # DRF and React By Schema - JS
 
-*This Package will offer out-of-the-box Components, Providers and other tools to make it a breeze to build editable tables and complete forms, completely integrated to Django Rest Framework schemas for validations and widgets, and all CRUD operations working, based diractly, primarily and automatically on the Model, Viewsets and Serializers built in Django.*
+*This package, with the corresponding Django package with the same name, enables a django headless infrastructure for running with react very easily, directly from your models.*
 
 ## About
 
-Working with forms and CRUD operations in React having Django as the Backend Server can be too "manual" and prone for errors.
+React has great power in building highly responsive and dynamic interfaces for users, with great flexibility and quality.
 
-There are no simple ways to make things more integrated among both systems.
+On the other hand, Django offers a consolidated infrastructure, high performance, and a popular way to organize data models for creating, removing, and updating data (CRUD) for simple to highly complex and intricate systems.
 
-There will be two solutions: one for react (this very one!) and one for Django, with the same name (still not released).
+A recognized and active library in Django, called Django Rest Framework, or simply DRF, leverages these Django characteristics to allow developers to create powerful API schemas directly related to the data model, using the concept of `viewsets` (analogous to `views`) and `serializers` (analogous to `forms`).
 
-**Warning:** This is still a work in progress! At the moment, only some of the components are built, besides the Provider Component.
+Building systems with a large number of forms for managing different processes is Django's power, but its approach to the interface, based on `views`, `forms`, and especially `templates`, `templatetags`, and `inclusiontags`, is outdated, as every update must refresh the entire page, following a logic of HTML template rendering.
 
-For `drf-react-by-schema` to work, you will have to install other important packages, as MUI, YUP, among others (listed as Peer Dependencies in `package.json`).
+An attractive option is to use React as the client (interface) for a Django instance with DRF as the server. In other words, Django serves the data and performs operations on the data as a Headless server (i.e., without `views`, `forms`, or `templates`, but only through the API).
 
-In the next weeks, we hope to offer full Documentation, guides to install, and other useful informations for using it.
+However, a common problem with this approach is that it often requires duplicating work in the client (React) and the server (Django/DRF) to handle form interactions and validations in React that are related to the server models.
 
-For now, if you have interest in using this solution or helping to develop, send us an e-mail at dtygel@eita.org.br or create issues directly at our repository.
+As an example, let's suppose that you want to manage products. Let's say that each product belongs to a product category. Let's assume we have the categories "fruits and vegetables" and "grains," and the products lettuce, papaya, and grapes in the "fruits and vegetables" category, and beans, rice, and fava beans in the "grains" category. In this example, we could consider that each product has attributes such as "name", "description", "unit", "price per unit," and "availability". For the categories, we could say they have attributes like "name" and "description".
+
+In Django, the data model is created very simply: create a `ProductCategory` and a `Product` models, with a "ForeignKey" relationship indicating a one-to-many relationship between the product and the category (one category can have many products, and one product belongs to a single category).
+
+In React, you would need to build the form, types of components (simple text input, long text input, numeric input, password input, yes/no switch input, autocomplete multiple-choice, single-choice dropdown, date pickers, etc.), validation conditions (whether it's mandatory or not, initial data, data format masks, etc.).
+
+The problem is that this is redundant work because this information is already available in the Django model!
+
+But how do you pass the data structure information to React? This is where _DRF and React By Schema - Django_ (`drf-react-by-schema-django`) comes in. It creates a powerful schema on the server that can be accessed by React via the OPTION method.
+
+And how do you build forms, validation conditions, and form components in React? This is where _DRF and React By Schema - React_ (`drf-react-by-schema-react`) comes in, which consumes the schemas generated by `drf-react-by-schema-django` and automatically builds all of this for the developer with very few lines of code, while allowing complete customization of the interfaces (layout).
+
+Furthermore, on the Django side, `drf-react-by-schema-django` automatically generates a full API endpoint structure directly from the app's models, along with powerful search tools, filters, nested related objects, validation, and handling of object creation, updating, and removal processes, which is a challenging task to do manually in Django DRF because it typically requires in-depth knowledge of `serializers` and `viewsets`. The Django package simplifies this entire process for the developer while maintaining performance.
+
+On the React side, `drf-react-by-schema-react` offers a range of powerful components that allow for the automatic construction of forms, including forms for multiple related objects (through editable tables), using the full power of MUI and MUI x-DataGrid.
+
+The _DRF and React By Schema_ Suite is available for React at https://www.npmjs.com/package/drf-react-by-schema and for Django at https://pypi.org/project/drf-react-by-schema/.
+
+## Getting started
+
+1. Build the Django model (a guide is available at https://pypi.org/project/drf-react-by-schema/)
+
+2. Create a `frontend` folder, where you will add your React project
+
+3. Install all peer-dependencies of drf-react-by-schema:
+```
+yarn add @hookform/resolvers@^2.9.10 @mui/icons-material@5.11.0 @mui/lab@^5.0.0-alpha.112 @mui/material@^5.11.0 @mui/x-data-grid@5.17.14 @mui/x-date-pickers@^5.0.11 axios@^0.27.2 moment@^2.29.4 react@^18.2.0 react-dom@^18.2.0 react-hook-form@^7.41.3 react-number-format@^5.1.2 string-mask@^0.3.0 yup@^0.32.11
+```
+
+4. Install drf-react-by-schema:
+```
+yarn add drf-react-by-schema
+```
+
+5. Wrap your app with DRFReactBySchema Provider, adding your custom themes and the Django endpoints. For example, in `App.js`:
+```
+export default function App() {
+    return (
+        <DRFReactBySchemaProvider
+            serverEndPoint={{
+                url: 'http://localhost:8000',
+                apiTokenUrl: 'http://localhost:8000/api-auth/token',
+                signUp: 'http://localhost:8000/api-auth/signup/',
+            }}
+            theme={yourWonderfulTheme}>
+            <YourWonderfulApp />
+        </DRFReactBySchemaProvider>
+    );
+}
+
+```
+
+
+6. Now you have the full power of the integration of React and Django! Explore the components to build your app seamlessly, with all validation, form widgets and functionalities built-in.
 
 ## Styleguides
 

package/dist/api.js

@@ -388,7 +388,7 @@ const getDataGridColumns = (schema, columnFields = [], hiddenFields = [], creata
     });
 };
 const getAutoComplete = ({ model, serverEndPoint, }) => __awaiter(void 0, void 0, void 0, function* () {
-    const data = yield getData({ path: model, serverEndPoint, route: 'autocomplete' });
+    const data = yield getData({ path: `${model}/`, serverEndPoint, route: 'autocomplete' });
     if (data === false) {
         return false;
     }
@@ -471,7 +471,7 @@ const isLoggedIn = (serverEndPoint) => __awaiter(void 0, void 0, void 0, functio
     if (!token) {
         return false;
     }
-    const usuaria = yield getData({ path: 'minhaconta', serverEndPoint });
+    const usuaria = yield getData({ path: 'minhaconta/', serverEndPoint });
     if (!usuaria) {
         console.log('Erro ao recuperar dados de usuária!');
         return false;
@@ -531,13 +531,13 @@ const signUp = (data, serverEndPoint) => __awaiter(void 0, void 0, void 0, funct
 exports.signUp = signUp;
 const getGenericModelList = ({ model, serverEndPoint, id = '', relatedModel = '', relatedModelId = '', columnFields, hiddenFields = ['id'], creatableFields = [], isInBatches = false, loadedSchema, loadedModelOptions, page, filter, sort, sumRows, }) => __awaiter(void 0, void 0, void 0, function* () {
     let path = `${model}/${id}`;
-    let schemaPath = model;
+    let schemaPath = `${model}/`;
     let schema = loadedSchema;
     let modelOptions = loadedModelOptions;
     let columns;
     if (!(0, utils_1.isTmpId)(id) && relatedModel) {
-        path += `/${relatedModel}/${relatedModelId}`;
-        schemaPath += `/${id}/${relatedModel}`;
+        path += `/${relatedModel}/${relatedModelId}/`;
+        schemaPath += `${id}/${relatedModel}/`;
     }
     const queryParams = [];
     // SERVER-SIDE TOTALS (sumRows):
@@ -638,10 +638,13 @@ const getGenericModelList = ({ model, serverEndPoint, id = '', relatedModel = ''
 exports.getGenericModelList = getGenericModelList;
 const getGenericModel = ({ model, serverEndPoint, id = '', relatedModel = '', relatedModelId = '', }) => __awaiter(void 0, void 0, void 0, function* () {
     let path = `${model}/${id}`;
-    let schemaPath = model;
+    let schemaPath = `${model}/`;
     if (id && relatedModel) {
-        path += `/${relatedModel}/${relatedModelId}`;
-        schemaPath += `/${id}/${relatedModel}`;
+        path += `/${relatedModel}/${relatedModelId}/`;
+        schemaPath += `${id}/${relatedModel}/`;
+    }
+    else if (id) {
+        path += '/';
     }
     const options = yield getSchema(schemaPath, serverEndPoint);
     if (!options) {
@@ -659,8 +662,7 @@ const getAllModels = (serverEndPoint) => __awaiter(void 0, void 0, void 0, funct
     if (!serverEndPoint) {
         return [];
     }
-    const path = 'endpoints';
-    const data = yield getData({ path, serverEndPoint });
+    const data = yield getData({ path: 'endpoints/', serverEndPoint });
     return data || [];
 });
 exports.getAllModels = getAllModels;

package/dist/components/forms/inputs/EditableAutocompleteFieldBySchema.js

@@ -96,7 +96,7 @@ const EditableAutocompleteFieldBySchema = react_1.default.forwardRef((_a, ref) =
                 : schema[name].help_text || '',
         };
     if (!schema[model].disabled && onEditModel && optionsModel) {
-        return (react_1.default.createElement(react_hook_form_1.Controller, { control: control, name: name, render: ({ field }) => (react_1.default.createElement(Autocomplete_1.default, Object.assign({ key: name }, field, { id: name, options: options, disabled: options.length === 0 || schema[model].disabled === true, autoHighlight: true, isOptionEqualToValue: (option, value) => option.id === value.id, fullWidth: true, multiple: multiple, sx: sx, onChange: (e, value) => {
+        return (react_1.default.createElement(react_hook_form_1.Controller, { control: control, name: name, render: ({ field }) => (react_1.default.createElement(Autocomplete_1.default, Object.assign({ key: name }, field, { id: name, options: options, disabled: schema[model].disabled === true, autoHighlight: true, isOptionEqualToValue: (option, value) => option.id === value.id, fullWidth: true, multiple: multiple, sx: sx, onChange: (e, value) => {
                     let valueAr = value;
                     if (!multiple) {
                         valueAr = [value];
@@ -196,7 +196,7 @@ const EditableAutocompleteFieldBySchema = react_1.default.forwardRef((_a, ref) =
                     }
                     : undefined }))) }));
     }
-    return (react_1.default.createElement(react_hook_form_1.Controller, { control: control, name: name, render: ({ field }) => (react_1.default.createElement(Autocomplete_1.default, Object.assign({ key: name }, field, { id: name, options: options, disabled: options.length === 0 || schema[model].disabled === true, autoHighlight: true, isOptionEqualToValue: (option, value) => option.id === value.id, fullWidth: true, multiple: multiple, sx: sx, onChange: (e, value) => {
+    return (react_1.default.createElement(react_hook_form_1.Controller, { control: control, name: name, render: ({ field }) => (react_1.default.createElement(Autocomplete_1.default, Object.assign({ key: name }, field, { id: name, options: options, disabled: schema[model].disabled === true, autoHighlight: true, isOptionEqualToValue: (option, value) => option.id === value.id, fullWidth: true, multiple: multiple, sx: sx, onChange: (e, value) => {
                 field.onChange(value);
             }, renderInput: (params) => (react_1.default.createElement(TextField_1.default, Object.assign({}, params, { label: label, required: schema[model].required, margin: "normal", error: error, helperText: helperText }, other))), getOptionLabel: getOptionLabel, renderOption: renderOption }))) }));
 });

package/dist/context/DRFReactBySchemaProvider.js

@@ -37,7 +37,9 @@ const DRFReactBySchemaProvider = ({ serverEndPoint, theme, isInBatches, firstBat
             if (serverEndPoint[hybridKey]) {
                 continue;
             }
-            serverEndPoint[hybridKey] = `${serverEndPoint.url}/${hybridUrl}`;
+            serverEndPoint[hybridKey] = ['refreshToken', 'verifyToken'].includes(hybridKey)
+                ? `${serverEndPoint.apiTokenUrl}${hybridUrl}/`
+                : `${serverEndPoint.url}/${hybridUrl}`;
         }
     }
     const mergedTheme = theme ? Object.assign(Object.assign({}, theme_1.default), theme) : theme_1.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drf-react-by-schema",
-  "version": "0.7.6",
+  "version": "0.8.0",
   "description": "Components and Tools for building a React App having Django Rest Framework (DRF) as server",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -40,7 +40,10 @@
     "@babel/preset-typescript": "^7.18.6",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
+    "@types/jest": "^29.2.4",
+    "@types/node": "^18.11.15",
     "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
     "@typescript-eslint/eslint-plugin": "^5.47.0",
     "@typescript-eslint/parser": "^5.47.0",
     "eslint": "^8.30.0",
@@ -65,13 +68,6 @@
     "@mui/material": "^5.11.0",
     "@mui/x-data-grid": "^5.17.14",
     "@mui/x-date-pickers": "^5.0.11",
-    "@rjsf/core": "^5.0.0-beta.15",
-    "@rjsf/mui": "^5.0.0-beta.15",
-    "@rjsf/utils": "^5.0.0-beta.15",
-    "@rjsf/validator-ajv8": "^5.0.0-beta.15",
-    "@types/jest": "^29.2.4",
-    "@types/node": "^18.11.15",
-    "@types/react-dom": "^18.0.9",
     "axios": "^0.27.2",
     "moment": "^2.29.4",
     "react": "^18.2.0",