https://github.com/react-declarative/cra-template-react-declarative
The most advanced CRM Boilerplate for React + TypeScript + Mobx. Contains snippets for automatic state management in a declarative style
https://github.com/react-declarative/cra-template-react-declarative
create-react-app crm declarative-programming form-validation grid-system json-endpoint layout-engine material-ui mobx mock mocking msw mui react state-management typescript ux
Last synced: 11 days ago
JSON representation
The most advanced CRM Boilerplate for React + TypeScript + Mobx. Contains snippets for automatic state management in a declarative style
- Host: GitHub
- URL: https://github.com/react-declarative/cra-template-react-declarative
- Owner: react-declarative
- License: mit
- Created: 2022-08-20T11:13:00.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-04-29T22:51:50.000Z (about 2 years ago)
- Last Synced: 2024-05-09T13:42:32.939Z (12 months ago)
- Topics: create-react-app, crm, declarative-programming, form-validation, grid-system, json-endpoint, layout-engine, material-ui, mobx, mock, mocking, msw, mui, react, state-management, typescript, ux
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/cra-template-react-declarative
- Size: 3.24 MB
- Stars: 6
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ⚛️ cra-template-react-declarative
> Contains the most advanced `todo-list` which you ever seen!
[](https://npmjs.org/package/cra-template-react-declarative)
## Contribute
> [!IMPORTANT]
> Made by using [react-declarative](https://github.com/react-declarative/react-declarative) to solve your problems. **⭐Star** and **💻Fork** It on github will be appreciated
## Usage
```bash
yarn create react-app --template cra-template-react-declarative .
```
or
```bash
npx create-react-app . --template=react-declarative
```
## What's inside
1. [TypeScript](https://www.typescriptlang.org/)
2. [MUI](https://mui.com/)
3. [Mobx](https://mobx.js.org/)
4. [MSW](https://mswjs.io/)
5. [tss-react](https://www.tss-react.dev/)
6. [react-declarative](https://www.npmjs.com/package/react-declarative)
## Code sample
```tsx
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 (
<>
history.push('/todos')}
/>
props.todo}
fields={fields}
{...oneProps}
/>
>
);
};
return (
{(todo) => (
)}
);
};
export default TodoOnePage;
```