drf-react-by-schema 0.3.0 → 0.4.0

package/dist/utils.d.ts

@@ -0,0 +1,74 @@
+import { GridActionsColDef, GridColDef } from '@mui/x-data-grid';
+export type Id = string | number;
+export type Item = Record<string, any>;
+export type SchemaType = Record<string, Field>;
+export interface Choice {
+    value: string | number;
+    display_name: string;
+}
+type FieldChild = Record<string, SchemaType>;
+export interface Field {
+    type: string;
+    child?: FieldChild;
+    children?: SchemaType;
+    model_default?: any;
+    model_required?: boolean;
+    choices?: Choice[];
+    max_length?: number | string;
+    label: string;
+    read_only?: boolean;
+}
+interface GridBySchemaColDef extends GridColDef {
+    isIndexField?: boolean;
+    creatable?: boolean;
+    orderable?: boolean;
+    patternFormat?: string;
+}
+interface GridActionsBySchemaColDef extends GridActionsColDef {
+    isIndexField?: boolean;
+    creatable?: boolean;
+    orderable?: boolean;
+    patternFormat?: string;
+}
+export type GridEnrichedBySchemaColDef = GridBySchemaColDef | GridActionsBySchemaColDef;
+export interface DataSchemaColumnsType {
+    data: Item[];
+    schema: SchemaType;
+    columns?: GridEnrichedBySchemaColDef[];
+}
+export interface ItemSchemaColumnsType {
+    data: Item;
+    schema: SchemaType;
+    columns?: GridEnrichedBySchemaColDef[];
+}
+export declare const emptyByType: any;
+export declare const getChoiceByValue: (value: number | string, choices: Choice[] | undefined) => string | null | undefined;
+export declare const populateValues: ({ data, schema }: {
+    data: Item;
+    schema: SchemaType;
+}) => Record<string, any>;
+export declare const buildGenericYupValidationSchema: ({ data, schema, many, skipFields, extraValidators }: {
+    data: Item;
+    schema: SchemaType;
+    many?: boolean | undefined;
+    skipFields?: string[] | undefined;
+    extraValidators?: Item | undefined;
+}) => any;
+export declare const errorProps: ({ type, errors, fieldKey, fieldKeyProp, index }: {
+    type: string;
+    errors: Item;
+    fieldKey: string;
+    fieldKeyProp: string;
+    index?: number | undefined;
+}) => {
+    error: any;
+    helperText: any;
+};
+export declare const getTmpId: () => string;
+export declare const isTmpId: (id: string | number | undefined | null) => boolean;
+export declare const reducer: (state: Record<string, any>, newState: Record<string, any>) => {
+    [x: string]: any;
+};
+export declare const getPatternFormat: (type: string) => string;
+export type AddParametersToEnd<TFunction extends (...args: any) => any, TParameters extends [...args: any]> = (...args: [...Parameters<TFunction>, ...TParameters]) => ReturnType<TFunction>;
+export {};

package/dist/utils.js

@@ -0,0 +1,268 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPatternFormat = exports.reducer = exports.isTmpId = exports.getTmpId = exports.errorProps = exports.buildGenericYupValidationSchema = exports.populateValues = exports.getChoiceByValue = exports.emptyByType = void 0;
+const Yup = __importStar(require("yup"));
+;
+;
+;
+;
+const emptyByType = (field, forDatabase = false) => {
+    if (field.model_default) {
+        return field.model_default;
+    }
+    switch (field.type) {
+        case 'nested object':
+            // emptyByType must be an empty object for the database, but must be null for the mui-autocomplete component. So I had to make this ugly hack here, when we're preparing to sendo to the database:
+            return forDatabase ? {} : null;
+        case 'field':
+            if (field.child) {
+                return [];
+            }
+            return (forDatabase)
+                ? undefined
+                : null;
+        case 'string':
+        case 'email':
+            return '';
+        case 'integer':
+            return 0;
+        case 'array':
+            return [];
+        default:
+            return null;
+    }
+};
+exports.emptyByType = emptyByType;
+const getChoiceByValue = (value, choices) => {
+    if (!choices) {
+        return null;
+    }
+    for (const choice of choices) {
+        if (choice.value === value) {
+            return choice.display_name;
+        }
+    }
+};
+exports.getChoiceByValue = getChoiceByValue;
+const populateValues = ({ data, schema }) => {
+    const values = {};
+    for (const entry of Object.entries(schema)) {
+        const [key, field] = entry;
+        if (key === 'id' && (0, exports.isTmpId)(data[key])) {
+            continue;
+        }
+        if (!data[key]) {
+            values[key] = (0, exports.emptyByType)(field);
+            continue;
+        }
+        if (field.type === 'field' && field.child) {
+            if (Array.isArray(data[key])) {
+                const arValues = [];
+                for (const row of data[key]) {
+                    const value = (0, exports.populateValues)({
+                        data: row,
+                        schema: field.child.children
+                    });
+                    arValues.push(value);
+                }
+                values[key] = arValues;
+                continue;
+            }
+            values[key] = (0, exports.populateValues)({
+                data: data[key],
+                schema: field.child.children
+            });
+            continue;
+        }
+        if (field.type === 'choice') {
+            values[key] = data[key]
+                ? {
+                    value: data[key],
+                    display_name: (0, exports.getChoiceByValue)(data[key], field.choices)
+                }
+                : (0, exports.emptyByType)(field);
+            continue;
+        }
+        values[key] = data[key];
+    }
+    // console.log(values);
+    return values;
+};
+exports.populateValues = populateValues;
+const getYupValidator = (type) => {
+    let yupFunc;
+    try {
+        switch (type) {
+            case 'slug':
+                yupFunc = Yup.string();
+                break;
+            case 'email':
+                yupFunc = Yup.string().email('Este campo deve ser um e-mail válido.');
+                break;
+            case 'integer':
+                yupFunc = Yup.number().integer('Este campo deve ser um número inteiro');
+                break;
+            case 'choice':
+                yupFunc = Yup.object();
+                break;
+            case 'field':
+                yupFunc = Yup.mixed();
+                break;
+            case 'nested object':
+                yupFunc = Yup.object();
+                break;
+            case 'date':
+                yupFunc = Yup.date();
+                break;
+            case 'string':
+                yupFunc = Yup.string();
+                break;
+            case 'number':
+                yupFunc = Yup.number();
+                break;
+            case 'boolean':
+                yupFunc = Yup.bool();
+                break;
+            case 'array':
+                yupFunc = Yup.array();
+                break;
+            case 'object':
+                yupFunc = Yup.object();
+                break;
+            default:
+                yupFunc = Yup.string();
+                break;
+        }
+    }
+    catch (e) {
+        yupFunc = Yup.string();
+    }
+    return yupFunc.nullable();
+};
+const buildGenericYupValidationSchema = ({ data, schema, many = false, skipFields = [], extraValidators = {} }) => {
+    const yupValidator = {};
+    for (const entry of Object.entries(schema)) {
+        const [key, field] = entry;
+        if (!data || !(key in data) || key === 'id' || skipFields.includes(key)) {
+            continue;
+        }
+        // console.log({ key, field, data: data[key] });
+        // OneToMany or ManyToMany:
+        if (field.type === 'field' && field.child) {
+            yupValidator[key] = (0, exports.buildGenericYupValidationSchema)({
+                schema: field.child.children,
+                many: true,
+                data: data[key],
+                extraValidators: Object.prototype.hasOwnProperty.call(extraValidators, key)
+                    ? extraValidators[key]
+                    : {}
+            });
+            continue;
+        }
+        // Nested Object:
+        if (field.type === 'nested object' && field.children) {
+            // yupValidator[key] = buildGenericYupValidationSchema({
+            //     schema: field.children,
+            //     many: false,
+            //     data: data[key],
+            //     extraValidators: Object.prototype.hasOwnProperty.call(extraValidators, key)
+            //         ? extraValidators[key]
+            //         : {}
+            // });
+            // if (!field.model_required) {
+            //     yupValidator[key] = yupValidator[key].nullable();
+            // }
+            // continue;
+        }
+        yupValidator[key] = Object.prototype.hasOwnProperty.call(extraValidators, key)
+            ? extraValidators[key]
+            : getYupValidator(field.type);
+        if (field.model_required) {
+            yupValidator[key] = yupValidator[key].required('Este campo é obrigatório');
+        }
+        if (field.max_length) {
+            yupValidator[key] = yupValidator[key].max(parseInt(field.max_length), `Este campo só pode ter no máximo ${field.max_length} caracteres`);
+        }
+    }
+    // console.log({ yupValidator });
+    return (many)
+        ? Yup.array().of(Yup.object().shape(yupValidator))
+        : Yup.object().shape(yupValidator);
+};
+exports.buildGenericYupValidationSchema = buildGenericYupValidationSchema;
+const errorProps = ({ type, errors, fieldKey, fieldKeyProp, index }) => {
+    let error;
+    let helperText;
+    if (index) {
+        const hasErrors = errors && errors[fieldKey] && errors[fieldKey][index] && Boolean(errors[fieldKey][index][fieldKeyProp]);
+        error = hasErrors;
+        helperText = hasErrors ? errors[fieldKey][index][fieldKeyProp].message : null;
+        return { error, helperText };
+    }
+    const hasErrors = errors && errors[fieldKey] && Boolean(errors[fieldKey][fieldKeyProp]);
+    error = hasErrors;
+    helperText = hasErrors ? errors[fieldKey][fieldKeyProp].message : null;
+    return { error, helperText };
+};
+exports.errorProps = errorProps;
+const getTmpId = () => {
+    return 'tmp' + Math.floor(Math.random() * 1000000);
+};
+exports.getTmpId = getTmpId;
+const isTmpId = (id) => {
+    if (!id) {
+        return true;
+    }
+    return id.toString().substr(0, 3) === 'tmp';
+};
+exports.isTmpId = isTmpId;
+const reducer = (state, newState) => {
+    return Object.assign(Object.assign({}, state), newState);
+};
+exports.reducer = reducer;
+const getPatternFormat = (type) => {
+    let format = '';
+    switch (type) {
+        case 'telefone':
+        case 'fone':
+        case 'phone':
+        case 'contact':
+        case 'contato':
+            format = '(##)#####-####';
+            break;
+        case 'cpf':
+            format = '###.###.###-##';
+            break;
+        case 'cnpj':
+            format = '##.###.###/####-##';
+            break;
+        case 'cep':
+            format = '##.###-###';
+            break;
+    }
+    return format;
+};
+exports.getPatternFormat = getPatternFormat;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drf-react-by-schema",
-  "version": "0.3.0",
+  "version": "0.4.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",
@@ -9,7 +9,10 @@
     "build": "tsc",
     "prepare": "install-peers",
     "styleguide": "styleguidist server",
-    "styleguide:build": "styleguidist build"
+    "styleguide:build": "styleguidist build",
+    "release:major": "yarn version --version $(semver $npm_package_version -i major) && yarn publish --tag latest",
+    "release:minor": "yarn version --new-version $(semver $npm_package_version -i minor) && yarn publish --tag latest",
+    "release:patch": "yarn version --new-version $(semver $npm_package_version -i patch) && yarn publish --tag latest"
   },
   "repository": {
     "type": "git",
@@ -49,12 +52,14 @@
     "install-peers-cli": "^2.2.0",
     "react-docgen-typescript": "^2.2.2",
     "react-styleguidist": "^13.0.0",
+    "semver": "^7.5.1",
     "ts-loader": "^9.4.2",
     "typedoc": "^0.23.23",
     "typescript": "^4.9.4",
     "webpack": "^5.75.0"
   },
   "peerDependencies": {
+    "@hookform/resolvers": "^2.9.10",
     "@mui/icons-material": "^5.11.0",
     "@mui/lab": "^5.0.0-alpha.112",
     "@mui/material": "^5.11.0",
@@ -71,6 +76,7 @@
     "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"
@@ -81,5 +87,8 @@
     "last 1 version",
     "Firefox ESR",
     "not dead"
+  ],
+  "files": [
+    "dist"
   ]
 }

package/.eslintrc.js

@@ -1,14 +0,0 @@
-module.exports = {
-  parser: '@typescript-eslint/parser',
-  extends: ['plugin:@typescript-eslint/recommended', 'prettier', 'plugin:react-hooks/recommended'],
-  parserOptions: {
-    sourceType: 'module',
-  },
-  rules: {
-    'prettier/prettier': 'error',
-    'react-hooks/rules-of-hooks': 'error',
-    'react-hooks/exhaustive-deps': 'warn',
-    'tsdoc/syntax': 'warn'
-  },
-  plugins: ['@typescript-eslint', 'prettier', 'react-hooks', 'eslint-plugin-tsdoc'],
-}

package/.gitlab-ci.yml

@@ -1,14 +0,0 @@
-image: node:latest
-
-pages:
-  cache:
-    paths:
-    - node_modules/
-  script:
-    - yarn install
-    - yarn styleguide:build
-  only:
-    - master
-  artifacts:
-      paths:
-      - public