drf-react-by-schema 0.3.0 → 0.4.0

package/src/index.ts

@@ -1,77 +0,0 @@
-// Methods:
-import {
-    updateData,
-    partialUpdateData,
-    createData,
-    deleteData,
-    createOrUpdateData,
-    updateDataBySchema,
-    addExistingRelatedModel,
-    getAutoComplete,
-    getJSONSchema,
-    createOrUpdateJSONSchema,
-    loginByPayload,
-    setAuthToken,
-    isLoggedIn,
-    getGenericModelList,
-    getGenericModel
-} from './api';
-import {
-    emptyByType,
-    getChoiceByValue,
-    populateValues,
-    buildGenericYupValidationSchema,
-    errorProps,
-    getTmpId,
-    isTmpId,
-    getPatternFormat
-} from './utils';
-
-// Wrappers/Providers:
-import DRFReactBySchemaProvider from './context/DRFReactBySchemaProvider';
-import { DRFReactBySchemaContext, useTheme } from './context/DRFReactBySchemaContext';
-import { APIWrapperContext } from './context/APIWrapperContext';
-// Components
-import DataGridBySchemaEditable from './components/DataGridBySchemaEditable';
-import GenericModelList from './components/GenericModelList';
-import GenericRelatedModelList from './components/GenericRelatedModelList';
-import DataTotals from './components/DataTotals';
-import DialogActions from './components/DialogActions';
-
-export {
-    // Wrappers/Providers:
-    DRFReactBySchemaProvider,
-    DRFReactBySchemaContext,
-    APIWrapperContext,
-    useTheme,
-    // Components:
-    DataGridBySchemaEditable,
-    GenericModelList,
-    GenericRelatedModelList,
-    DataTotals,
-    DialogActions,
-    // Methods:
-    updateData,
-    partialUpdateData,
-    createData,
-    deleteData,
-    createOrUpdateData,
-    updateDataBySchema,
-    addExistingRelatedModel,
-    getAutoComplete,
-    getJSONSchema,
-    createOrUpdateJSONSchema,
-    loginByPayload,
-    setAuthToken,
-    isLoggedIn,
-    getGenericModelList,
-    getGenericModel,
-    emptyByType,
-    getChoiceByValue,
-    populateValues,
-    buildGenericYupValidationSchema,
-    errorProps,
-    getTmpId,
-    isTmpId,
-    getPatternFormat
-};

package/src/styles/layout.ts

@@ -1,104 +0,0 @@
-import theme from './theme';
-
-export const content = {
-    flexGrow: 1,
-    pr: 3,
-    pl: 3,
-    pt: 2,
-    pb: 0
-};
-
-export const main = {
-    ...content,
-    ml: 4
-};
-
-export const flexRow = {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center'
-};
-
-export const topBar = {
-    ...flexRow,
-    width: '100%',
-    pl: 3,
-    pr: 6
-};
-
-export const loadingBox = {
-    ...flexRow,
-    height: '100%',
-    backgroundColor: '#ccc',
-    justifyContent: 'center'
-};
-
-export const actionButtons = {
-    ...flexRow,
-    width: '100%',
-    alignItems: 'flex-start'
-};
-
-export const inLineForm = {
-    ...flexRow,
-    width: '100%',
-    justifyContent: 'flex-start'
-};
-
-export const flexColumn = {
-    ...flexRow,
-    flexDirection: 'column'
-};
-
-export const flexRowGrow = {
-    ...flexRow,
-    flexGrow: 1
-};
-
-export const topBarOverList = {
-    ...flexRowGrow,
-    mb: 2
-};
-
-export const dataGrid = {
-    height: 'calc(100vh - 180px)',
-    mt: 2
-};
-
-export const dataGridWithTabs = {
-    ...dataGrid,
-    mt: 0
-};
-
-export const dataGridFixedHeight = {
-    ...dataGrid,
-    height: 400
-};
-
-export const fullWidthButton = {
-    mt: 3,
-    width: '100%'
-};
-
-export const formCard = {
-    width: '100%',
-    backgroundColor: theme.palette.formCard.main,
-    mt: 2,
-    mb: 2
-};
-
-export const formCardContent = {
-    maxHeight: 350,
-    overflow: 'scroll'
-};
-
-export const metabaseAppEmbed = {
-    height: 1700
-};
-
-export const geoPicker = {
-    height: 350,
-    width: '100%',
-    mt: 0
-};

package/src/styles/theme.ts

@@ -1,190 +0,0 @@
-import type {} from '@mui/x-data-grid/themeAugmentation';
-import { createTheme } from '@mui/material/styles';
-import { ptBR as corePtBR } from '@mui/material/locale';
-import { ptBR } from '@mui/x-data-grid';
-import { ptBR as pickersPtBR } from '@mui/x-date-pickers';
-
-declare module '@mui/material/styles' {
-    // interface Theme {
-    //     status: {
-    //         danger: React.CSSProperties['color'];
-    //     };
-    // }
-    interface Palette {
-        avatars: string[];
-        avatarsMore: string[];
-        topBarButton: Palette['primary'];
-        producao: Palette['primary'];
-        empreendimento: Palette['primary'];
-        comercializacao: Palette['primary'];
-        credito: Palette['primary'];
-        certificacao: Palette['primary'];
-        successButton: Palette['primary'];
-        selectedItem: Palette['primary'];
-        tableColumnHeader: Palette['primary'];
-        formCard: Palette['primary'];
-    }
-    // interface PaletteOptions {
-    //     neutral: PaletteOptions['primary'];
-    // }
-    //
-    interface PaletteColor {
-        semaphoric?: string;
-    }
-    // interface SimplePaletteColorOptions {
-    //     darker?: string;
-    // }
-    // interface ThemeOptions {
-    //     status: {
-    //         danger: React.CSSProperties['color'];
-    //     };
-    // }
-}
-
-
-ptBR.components.MuiDataGrid.defaultProps.localeText = {
-    ...ptBR.components.MuiDataGrid.defaultProps.localeText,
-    toolbarQuickFilterPlaceholder: 'Buscar...',
-    toolbarQuickFilterLabel: 'Buscar',
-    toolbarQuickFilterDeleteIconLabel: 'Limpar busca'
-};
-
-const palette = {
-    avatars: ['#e60049', '#0bb4ff', '#50e991', '#e6d800', '#9b19f5', '#ffa300', '#dc0ab4', '#b3d4ff', '#00bfa0'],
-    avatarsMore: ['#023fa5', '#8e063b', '#d33f6a', '#11c638', '#ef9708', '#0fcfc0', '#f79cd4', '#7d87b9', '#bb7784', '#4a6fe3', '#8595e1', '#b5bbe3', '#e6afb9', '#e07b91', '#8dd593', '#c6dec7', '#ead3c6', '#f0b98d', '#9cded6', '#d5eae7', '#f3e1eb', '#f6c4e1', '#bec1d4', '#d6bcc0'],
-    topBarButton: {
-        main: '#ffffff'
-    },
-    producao: {
-        main: '#e60049',
-        contrastText: '#fff'
-    },
-    empreendimento: {
-        main: '#0bb4ff',
-        contrastText: '#fff'
-    },
-    comercializacao: {
-        main: '#ffa300',
-        contrastText: '#fff'
-    },
-    credito: {
-        main: '#dc0ab4',
-        contrastText: '#fff'
-    },
-    certificacao: {
-        main: '#9b19f5',
-        contrastText: '#fff'
-    },
-    background: {
-        default: '#D9D9D9'
-    },
-    primary: {
-        main: '#3949AB'
-    },
-    secondary: {
-        main: '#9ca4d5',
-        contrastText: '#fff'
-    },
-    successButton: {
-        main: '#CDDC39',
-        contrastText: '#fff'
-    },
-    success: {
-        main: '#0e0',
-        contrastText: '#fff',
-        semaphoric: '#0e0'
-    },
-    error: {
-        main: '#d32f2f',
-        semaphoric: '#f66'
-    },
-    warning: {
-        main: '#ee0',
-        semaphoric: '#ee0'
-    },
-    selectedItem: {
-        main: '#2962FF'
-    },
-    tableColumnHeader: {
-        main: '#ECEFF1'
-    },
-    formCard: {
-        main: '#FFF'
-    }
-};
-
-const defaultTheme = createTheme(
-    {
-        palette,
-        components: {
-            MuiButton: {
-                styleOverrides: {
-                    contained: {
-                        // borderRadius: 50
-                    }
-                }
-            },
-            MuiTextField: {
-                styleOverrides: {
-                    root: {
-                        '&.Mui-required .MuiFormLabel-asterisk': {
-                            // color: '#F00'
-                        }
-                    }
-                }
-            },
-            MuiListItemButton: {
-                styleOverrides: {
-                    root: {
-                        '&.Mui-selected, :hover': {
-                            color: palette.selectedItem.main,
-                            '& .MuiListItemIcon-root': {
-                                color: palette.selectedItem.main
-                            }
-                        },
-                        '&.Mui-selected:hover': {
-                            color: palette.selectedItem.main,
-                            '& .MuiListItemIcon-root': {
-                                color: palette.selectedItem.main
-                            }
-                        },
-                        '&.disabled': {
-                            opacity: 0.5
-                        }
-                    }
-                }
-            },
-            MuiDataGrid: {
-                styleOverrides: {
-                    root: {
-                        backgroundColor: palette.formCard.main,
-                        '& .MuiDataGrid-columnHeaderTitle': {
-                            overflow: 'visible',
-                            lineHeight: '1.43rem',
-                            whiteSpace: 'normal'
-                        }
-                    },
-                    cell: {
-                        // backgroundColor: 'yellow'
-                    },
-                    columnHeader: {
-                        backgroundColor: palette.tableColumnHeader.main
-                    }
-                }
-            },
-            MuiTabs: {
-                styleOverrides: {
-                    root: {
-                        backgroundColor: palette.formCard.main,
-                        marginTop: 20
-                    }
-                }
-            }
-        }
-    },
-    corePtBR,
-    ptBR,
-    pickersPtBR
-);
-
-export default defaultTheme;

package/src/utils.ts

@@ -1,327 +0,0 @@
-import * as Yup from 'yup';
-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 const emptyByType: any = (field:Field, forDatabase:boolean = 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;
-    }
-};
-
-export const getChoiceByValue = (
-    value:number | string,
-    choices:Choice[] | undefined
-) => {
-    if (!choices) {
-        return null;
-    }
-    for (const choice of choices) {
-        if (choice.value === value) {
-            return choice.display_name;
-        }
-    }
-};
-
-export const populateValues = ({
-    data,
-    schema
-}: {
-    data:Item,
-    schema:SchemaType
-}) => {
-    const values:Record<string, any> = {};
-    for (const entry of Object.entries(schema)) {
-        const [key, field] = entry;
-        if (key === 'id' && isTmpId(data[key])) {
-            continue;
-        }
-
-        if (!data[key]) {
-            values[key] = emptyByType(field);
-            continue;
-        }
-
-        if (field.type === 'field' && field.child) {
-            if (Array.isArray(data[key])) {
-                const arValues = [];
-                for (const row of data[key]) {
-                    const value = populateValues({
-                        data: row,
-                        schema: field.child.children
-                    });
-                    arValues.push(value);
-                }
-                values[key] = arValues;
-                continue;
-            }
-
-            values[key] = populateValues({
-                data: data[key],
-                schema: field.child.children
-            });
-            continue;
-        }
-
-        if (field.type === 'choice') {
-            values[key] = data[key]
-                ? {
-                    value: data[key],
-                    display_name: getChoiceByValue(data[key], field.choices)
-                }
-                : emptyByType(field);
-            continue;
-        }
-
-        values[key] = data[key];
-    }
-    // console.log(values);
-    return values;
-};
-
-const getYupValidator = (type:string) => {
-    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.boolean();
-            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();
-};
-
-export const buildGenericYupValidationSchema = ({
-    data,
-    schema,
-    many = false,
-    skipFields = [],
-    extraValidators = {}
-}:{
-    data:Item,
-    schema:SchemaType,
-    many?:boolean,
-    skipFields?: string[],
-    extraValidators?:Item
-}) => {
-    const yupValidator:Record<string, any> = {};
-    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] = 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 as string), `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);
-};
-
-export const errorProps = ({
-    type,
-    errors,
-    fieldKey,
-    fieldKeyProp,
-    index
-}: {
-    type:string,
-    errors:Item,
-    fieldKey:string,
-    fieldKeyProp:string,
-    index?:number
-}) => {
-    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 };
-};
-
-export const getTmpId = () => {
-    return 'tmp' + Math.floor(Math.random() * 1000000);
-};
-
-export const isTmpId = (id:string | number | undefined | null) => {
-    if (!id) {
-        return true;
-    }
-    return id.toString().substr(0, 3) === 'tmp';
-};
-
-export const reducer = (state:Record<string, any>, newState:Record<string, any>) => {
-    return { ...state, ...newState };
-};
-
-export const getPatternFormat = (type:string) => {
-    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;
-};

package/styleguide.config.js

@@ -1,13 +0,0 @@
-const path = require('path');
-const glob = require('glob');
-
-module.exports = {
-  title: 'Styleguides for DRF React By Schema Package',
-  styleguideDir: 'public',
-  components: [
-    'src/components/*.tsx',
-    'src/context/*.tsx'
-  ],
-  resolver: require('react-docgen').resolver.findAllComponentDefinitions,
-  propsParser: require('react-docgen-typescript').withDefaultConfig({ propFilter: { skipPropsWithoutDoc: false } }).parse
-};