Skip to content

The most advanced CRM Boilerplate for React + TypeScript + Mobx. Contains snippets for automatic state management in a declarative style

License

Notifications You must be signed in to change notification settings

react-declarative/cra-template-react-declarative

Folders and files

NameName
Last commit message
Last commit date

Latest commit

2a95bf5 · May 30, 2024

History

89 Commits
Aug 21, 2022
Apr 9, 2023
Aug 20, 2022
Aug 20, 2022
May 30, 2024
Aug 20, 2022
Apr 29, 2023
Apr 29, 2023
Apr 29, 2023
Aug 21, 2022

Repository files navigation

⚛️ cra-template-react-declarative

Contains the most advanced todo-list which you ever seen!

npm

screenshot

Contribute

Important

Made by using react-declarative to solve your problems. ⭐Star and 💻Fork It on github will be appreciated

Usage

yarn create react-app --template cra-template-react-declarative .

or

npx create-react-app . --template=react-declarative

What's inside

  1. TypeScript
  2. MUI
  3. Mobx
  4. MSW
  5. tss-react
  6. react-declarative

Code sample

import { FetchView, Breadcrumbs, One, FieldType, IField, usePreventLeave } from 'react-declarative';

import fetchApi from '../../helpers/fetchApi';
import history from '../../helpers/history';

interface ITodoOnePageProps {
    id: string;
}

const fields: IField[] = [
    {
        type: FieldType.Line,
        title: 'System info'
    },
    {
        type: FieldType.Div,
        style: {
          display: 'grid',
          gridTemplateColumns: '1fr auto',
        },
        fields: [
            {
                type: FieldType.Text,
                name: 'userId',
                title: 'User id',
                outlined: false,
                disabled: true,
            },
            {
                type: FieldType.Checkbox,
                fieldBottomMargin: "0",
                name: 'completed',
                title: "Completed",
                disabled: true,
            },
        ]
    },
    {
        type: FieldType.Line,
        title: 'Common info'
    },
    {
        type: FieldType.Text,
        name: 'title',
        title: 'Title',
    }
];

export const TodoOnePage = ({
    id,
}: ITodoOnePageProps) => {

    const fetchState = async () => await fetchApi(`/api/v1/todos/${id}`);

    const Content = (props: any) => {

        const {
            data,
            oneProps,
            beginSave,
        } = usePreventLeave({
            history,
            onSave: async () => {
                alert(JSON.stringify(data, null, 2));
                return true; // HTTP 200
            },
        });

        return (
            <>
                <Breadcrumbs
                    withSave
                    saveDisabled={!data}
                    title="Todo list"
                    subtitle={props.todo.title}
                    onSave={beginSave}
                    onBack={() => history.push('/todos')}
                />
                <One
                    handler={() => props.todo}
                    fields={fields}
                    {...oneProps}
                />
            </>
        );
    };

    return (
        <FetchView state={fetchState}>
            {(todo) => (
                <Content todo={todo} />
            )}
        </FetchView>
    );
};

export default TodoOnePage;