HomePage

Prosciutto CRUDo

Simple Tables and forms to create a nice looking admin panel in short amount of time. Go ahead take a slice.

Getting Started

Install Chakra UI

Install peer deps

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6 react-icons

Then install prosciutto

npm install prosciutto-crudo

Then wrap your app in `ChakraProvider`

Use!

Generic Table

Objects
First Name	Last Name	Actions
Michael	Jackson
Bob	Marley

import { ProsciuttoFactory } from 'prosciutto-crudo';
const { GenericTable } = ProsciuttoFactory<{
    Person: {
        firstName: string;
        lastName: string;
        id: string;
    };
}>();

export default () => {
    const [tablePeople, setTablePeople] = useState(people);
    return <GenericTable
        onDelete={(o) => setTablePeople(
            (ppl) => ppl.filter((p) => p.id !== o.id)
        )}
        object="Person"
        objects={tablePeople}
        primaryKey="id"
        searchKey="lastName"
        params={[
            { key: 'firstName', label: 'First Name' },
            { key: 'lastName', label: 'Last Name', },
        ]}
    />
}

Rich Content Field

﻿

import { RichContentField } from 'prosciutto-crudo'

export default () => {
    
    const [rcfValue, setRcfValue] = useState('');
    
    return <RichContentField
        style={{ background: 'white', padding: '2rem' }}
        value={rcfValue}
        onChange={(e) => setRcfValue(e)}
    />
    
}

Multiple Relation Field

Add Olive Oil

import { MultipleRelationField } from 'prosciutto-crudo'

export default () => {
    const [selectedOlives, setSelectedOlives] = useState<string[]>([]);

    return <MultipleRelationField
        objects={[
            {
            name: 'Garlic Olive Oil',
            _id: 'jsidaiudjsaui',
            },
            {
            name: 'Pepper Olive Oil',
            _id: 'dsdssadad',
            },
        ]}
        displayKey="name"
        name="Olive Oil"
        primaryKey="_id"
        selectedObjects={selectedOlives}
        setSelectedObjects={setSelectedOlives}
    />

}