Skip to content

mattweston/solid-admin

 
 

Repository files navigation

solid-admin

A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, SolidJS and DaisyUI. Open sourced and maintained by marmelab.

It's a port of React-admin for SolidJS.

Installation

Solid-admin is available from npm. You can install it (and its required dependencies) using:

npm install @solid-admin/admin
#or
yarn add @solid-admin/admin

At a Glance

// in app.js
import { render } from 'solid-js/web';
import { Admin, Resource } from '@solid-admin/admin';
import restProvider from '@solid-admin/data-fakerest';
import data from '.data.json';

import { PostList, PostEdit, PostCreate } from './posts';

render(
    <Admin dataProvider={restProvider(data)}>
        <Resource name="posts" list={PostList} edit={PostEdit} create={PostCreate} />
    </Admin>,
    document.getElementById('root'));
);

The <Resource> component is a configuration component that allows to define sub components for each of the admin view: list, edit, and create. These components use DaisyUI and custom components from solid-admin:

// in posts.js
import { List, Datagrid, Edit, Create, SimpleForm, TextField, EditButton, TextInput, useRecordContext } from '@solid-admin/admin';

export const PostList = () => (
    <List>
        <Datagrid>
            <TextField source="id" />
            <TextField source="title" />
            <TextField source="published_at" />
            <TextField source="average_note" />
            <TextField source="views" />
            <EditButton />
        </Datagrid>
    </List>
);

const PostTitle = () => {
    const record = useRecordContext();
    return <span>Post {record ? `"${record.title}"` : ''}</span>;
};

export const PostEdit = () => (
    <Edit title={<PostTitle />}>
        <SimpleForm>
            <TextInput disabled source="id" />
            <TextInput source="title" />
            <TextInput source="teaser" options={{ multiline: true }} />
            <TextInput multiline source="body" />
            <TextInput label="Publication date" source="published_at" />
            <TextInput source="average_note" />
            <TextInput disabled label="Nb views" source="views" />
        </SimpleForm>
    </Edit>
);

export const PostCreate = () => (
    <Create title="Create a Post">
        <SimpleForm>
            <TextInput source="title" />
            <TextInput source="teaser" options={{ multiline: true }} />
            <TextInput multiline source="body" />
            <TextInput label="Publication date" source="published_at" />
            <TextInput source="average_note" />
        </SimpleForm>
    </Create>
);

Demo

A demo is available inside packages/demo.

To run it, clone the repository, install the dependencies, and run the demo:

make install
make start

The demo will be available at http://localhost:3000.

You can use any username and password to log in.

Does It Work With My API?

Yes.

Solid-admin uses an adapter approach, with a concept called Data Providers. Existing providers can be used as a blueprint to design your API, or you can write your own Data Provider to query an existing API. Writing a custom Data Provider is a matter of hours.

Data provider architecture

See the react-admin Data Providers documentation for details.

Batteries Included But Removable

Solid-admin is designed as a library of loosely coupled Solid components and hooks exposing reusable controller logic. It is very easy to replace any part of solid-admin with your own, e.g. to use a custom datagrid, GraphQL instead of REST, or Bootstrap instead of Material Design.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 98.8%
  • Other 1.2%