ra-friendsofbabba v4.0.0-rc17

FriendsOfBabba/RA 🥧 - React Admin extended components

This library is compatible with React Admin v3.x

I'm a big fan of react-admin and I've built a simple layout using Mini drawer variant. The layout has a simple navigation bar and a drawer with a navigation menu and it can be used as a starting point for your own layout. Any component can be overridden by using the layout prop.

How To Use

Install the package:

npm i --save ra-friendsofbabba

and then you have to import and use it in you react-admin app:

import { Layout } from "ra-friendsofbabba";
import { Admin, Resource } from "react-admin";
const App = () => (
  <Admin layout={Layout}>
    <Resource name="..." />
  </Admin>
);

The first step is to add some configuration to your resources files. They need to instruct the layout component on how to render the resource in group of items inside the drawer. For example, if you want to show posts in the drawer under Dashboard group you need to add the following configuration:

export default {
  ...,
  options: { group: "dashboard", roles: ["user"] }
}

In this example, the resource will be rendered in the drawer under the Dashboard group and only the user role will be able to see it (roles is another option exposed in this layout that can be helpful to customize resources access).

Data

Configure Data Provider

import { dataProvider, prepareUpload } from "ra-friendsofbabba";
// Define list of uploadable fields:
const UPLOADABLE_FIELDS = ["image", "document", "profile.picture"];
const dp = dataProvider({
  apiUrl: "...",
  prepareUpload: (data) => prepareUpload(data, UPLOADABLE_FIELDS),
});

Components

Layout

The Layout component follow the same props as the react-admin.

You can override components like AppBar, Sidebar or Menu by passing them to the layout as prop, in addition I've added the following props (useful for the mini drawer):

If you want to override them you can do it as follow:

import { Layout } from "ra-friendsofbabba";
import { Admin, Resource } from "react-admin";
const MyLayout = (props) => (
  <Layout {...props} drawerWidth={300} title="My App" subtitle="My Subtitle" />
);
const App = () => (
  <Admin layout={MyLayout}>
    <Resource name="..." />
  </Admin>
);

Menu

The menu component has been designed to be fully customizable and you can use it in many ways. Suppose you want to customize everything withouth use default menu items and groups:

import { Layout, Menu, MenuGroup, MenuItem } from "ra-friendsofbabba";
const CustomMenu = (props) => (
  <Menu {...props} mode="custom">
    <MenuGroup label="My Group">
      <MenuItem label="My Item" />
    </MenuGroup>
  </Menu>
);

The mode prop can be used to customize the menu. The default menu is a Menu component with mode="build" prop, this means that the menu will be built from the MenuItem and MenuGroup components generated scanning the resources. You can also use mode="custom" to customize the menu and show what you really need or mode="build" to use the default menu and add your custom items that will be placed at the end of the menu.

MenuItem

Menu item can be used in many ways, you can use it to redirect users to external URL like docs or links or you can publish your own custom routes to specific pages like in this example:

import { Layout, Menu, MenuGroup, MenuItem } from "ra-friendsofbabba";
const CustomMenu = (props) => (
  <Menu {...props}>
    <MenuGroup label="Useful Link">
      <MenuItem {...props} href="https://www.google.it" target="_blank" />
      <MenuItem {...props} to="/local-custom-page">
    </MenuGroup>
  </Menu>
)

Remember that MenuItem must be used inside a MenuGroup component. The current version of this library doesn't support nested menus or root items.

Badges

You can pass a badge prop to the MenuItem component to show a badge. The Menu component accept badges props that allows you to customize the badges for all menu items, this prop can be an object of key/value pairs where the key is the resource name and the value is the badge config.

For every badge you have to provide these props:

• value: the badge value
• color: the badge color
• icon: the badge icon
• variant: the badge variant
• show (not required): a boolean to show or hide the badge

For example, an output badges config can be like this:

{
  posts: {
    value: 10,
    color: "primary",
    icon: "notifications",
    variant: "dot"
  }
}

UserMenu

The UserMenu component allows you to customize the user menu (in the top right corner). Please refer to this example:

import { UserMenu, UserMenuItem } from "ra-friendsofbabba";
import * as Icons from "@material-ui/icons";
const MyUserMenu = (props) => (
  <UserMenu {...props}>
    <UserMenuItem
      label="User Profile"
      to="/user-profile"
      icon={<Icons.AccountUser />}
    />
    {props.logout}
  </UserMenu>
);

How to contribute

Clone the repository and run npm run i-all to install dependencies. After that, you can start to testing your app running npm run dev. Use playground to test app with your own modifications.