@firecms/ui

FireCMS UI

FireCMS UI is a high quality set of components that you can use to build your own custom views. You can use these components to build your own FireCMS views, or in any other React application. You just need to install tailwindcss and the @firecms/ui package.

Why build this UI kit?

FireCMS was using MUI until version 3.0. MUI provides ready to use components with intuitive APIs, but it also comes with a lot of complexity and overhead. We wanted to build a simpler and more flexible UI kit that could be used in any React project, not just in FireCMS. We also wanted to make it easy to transition from MUI to our new UI kit, so we kept the API as similar as possible. The result it a set of components that are easy to use, easy to customize, much more performant and with a smaller bundle size.

The components are primarily built using Radix UI primitives and tailwindcss. This means that you can easily customize them using tailwindcss classes or override the styles using CSS.

See the full list of components in https://firecms.co/docs/components

All the components are exported from the @firecms/ui package. These are the same components used internally in FireCMS.

Installation

If you are using FireCMS, you don't need to install this package, as it is already included, and configured for you.

To use the components in your own project, you need to install the @firecms/ui package:

yarn add @firecms/ui

or

npm install @firecms/ui

You also need to install tailwindcss:

yarn add tailwindcss @tailwindcss/typography

And initialize it in your project:

npx tailwindcss init

And add then add the fireCMS preset in your tailwind.config.js:

import fireCMSConfig from "@firecms/ui/tailwind.config.js";

export default {
    presets: [fireCMSConfig],
    content: [
        "./index.html",
        "./src/**/*.{js,ts,jsx,tsx}",
        "./node_modules/@firecms/**/src/**/*.{js,ts,jsx,tsx}"
    ]
};

(You might need to adjust the paths in the content array to match your project structure)

Finally, you need to define your primary and secondary colors in your index.css file:

@import "@firecms/ui/index.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --fcms-primary: #0070F4;
    --fcms-primary-bg: #0061e610;
    --fcms-secondary: #FF5B79;
}

Changelog

[3.0.0-beta.11] - 2024-12-13

• New Next.js template for FireCMS PRO. You can now create a new project with the PRO template using the CLI.
• [BREAKING] Removed userRoles from AuthController. You can now access the roles prop in the user object directly
• [BREAKING] Many FireCMS UI sizes have been adjusted for better consistency. This will affect you only if you are using custom components.
  • smallest or tiny have been renamed to small.
  • small has been renamed to medium.
  • medium has been renamed to large.
• [BREAKING] For self-hosted versions, there has been a change in the API for the data management controllers. The authController is now passed to the User Management controller, instead of the other way around. The userManagementController can be used as an auth controller, but with all the added logic for user management.

❌ Code before:

    /**
 * Controller in charge of user management
 */
const userManagement = useBuildUserManagement({
        dataSourceDelegate: firestoreDelegate
    });

/**
 * Controller for managing authentication
 */
const authController: FirebaseAuthController = useFirebaseAuthController({
    firebaseApp,
    signInOptions,
    loading: userManagement.loading,
    defineRolesFor: userManagement.defineRolesFor
});

✅ Code after:

    /**
 * Controller for managing authentication
 */
const authController: FirebaseAuthController = useFirebaseAuthController({
        firebaseApp,
        signInOptions
    });

/**
 * Controller in charge of user management
 */
const userManagement = useBuildUserManagement({
    dataSourceDelegate: firestoreDelegate,
    authController
});

• Added many "use client" directives to UI components.
• Fixed issues in collection editor code dialog.
• Updated web styles and integrated improvements in Docusaurus.
• Enhanced styling for empty references and minor design tweaks.
• Continued work in progress on Editor custom components.
• Reintroduced dark primary color variant for better theme options.
• Minor web updates for improved aesthetics and functionality.
• Fixed a bug where the Editor was not saving false values.
• Replaced all instances of gray and slate colors with more unified surface and surface-accent colors for UI consistency.
• Added Avatar component fallback and integrated ESLint configuration into templates.
• Enhanced error handling in forms and improved cloud error messages.
• Refactored user management logic for better code organization.
• Improved the handling of boolean switch properties in configurations.
• Introduced state management for children in ArrayContainer.
• Added a recipe for slug creation, improving URL handling and SEO.
• Fixed crash issues in repeat fields for subproperties and addressed various minor styling and functionality bugs.
• Made improvements to heatmap responsiveness (HMR fixes).
• Refactored text search functionalities for better efficiency and added relevant documentation.
• Fixed issues with number input fields blocking scroll and replaced date picker with native HTML date input for consistency.
• If you are using the Select component, you don't need to provide a renderValue function anymore. The component will handle it automatically.
• Custom preview properties are now rendered if the value is undefined.
• Fixed for Cloud version refreshing navigation too often.
• Fix for local search not working when returning to a collection.
• Fix for bug when selecting a read only entity.
• Fixed selection bug in collection groups for entities sharing id.
• Reference previews now take into account arrays of images for the preview image.