Added label docs, some extendable panel updates and border style update

eslint.config.mjs

@@ -81,7 +81,6 @@ export default [
             "@typescript-eslint/no-empty-function": "warn",
             "@typescript-eslint/no-inferrable-types": "warn",
             "@typescript-eslint/ban-ts-comment": "warn",
-            "@typescript-eslint/ban-types": "warn",
             "@typescript-eslint/no-explicit-any": "off",
         },
     }];

examples/example_pro/src/FirestoreApp/custom_field/JSONField.tsx

@@ -25,7 +25,7 @@ export function JSONField({
         <>
             <ExpandablePanel initiallyExpanded={true}
                              title={property.name}
-                             className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}>
+                             innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}>
                 <span>{error}</span>
                 <JsonView
                     src={internalValue}

packages/collection_editor/src/ui/collection_editor/properties/validation/ValidationPanel.tsx

@@ -10,7 +10,7 @@ export function ValidationPanel({
         <ExpandablePanel
             initiallyExpanded={false}
             asField={true}
-            className="p-4"
+            innerClassName="p-4"
             title={
                 <div className="flex flex-row text-gray-500">
                     <RuleIcon/>

packages/data_import/src/components/DataNewPropertiesMapping.tsx

@@ -100,7 +100,7 @@ export function DataNewPropertiesMapping({
                 </TableBody>
             </Table>
 
-            <ExpandablePanel title="Default values" initiallyExpanded={false} className={"p-4 mt-4"}>
+            <ExpandablePanel title="Default values" initiallyExpanded={false} innerClassName={"p-4 mt-4"}>
 
                 <div className={"text-sm text-slate-500 dark:text-slate-300 font-medium ml-3.5 mb-1"}>
                     You can select a default value for unmapped columns and empty values:

packages/editor/src/extensions/HighlightDecorationExtension.ts

@@ -1,5 +1,4 @@
 import { Command, Extension } from "@tiptap/core"
-import { Node } from "@tiptap/pm/model"
 import { Plugin, PluginKey } from "@tiptap/pm/state"
 import { Decoration, DecorationSet } from "@tiptap/pm/view"
 
@@ -27,7 +26,7 @@ export interface HighlightDecorationOptions {
     highlight?: { from: number, to: number }
 }
 
-function buildDecorationSet(highlight: any, doc: Node) {
+function buildDecorationSet(highlight: any, doc: any) {
     const decorations: [any?] = [];
 
     if (highlight) {

packages/editor/src/extensions/Image.ts

@@ -86,7 +86,7 @@ export const createDropImagePlugin = (upload: UploadFn): Plugin => {
 
                         const reader = new FileReader();
                         reader.onload = async (readerEvent) => {
-                            await onFileRead(view, readerEvent, position.pos, upload, image);
+                            await onFileRead(view as any, readerEvent, position.pos, upload, image);
                         };
                         reader.readAsDataURL(image);
                     });
@@ -119,7 +119,7 @@ export const createDropImagePlugin = (upload: UploadFn): Plugin => {
                         const reader = new FileReader();
 
                         reader.onload = async (readerEvent) => {
-                            await onFileRead(view, readerEvent, pos, upload, image);
+                            await onFileRead(view as any, readerEvent, pos, upload, image);
                         };
                         reader.readAsDataURL(image);
                     }

packages/editor/src/extensions/drag-and-drop.tsx

@@ -124,10 +124,10 @@ function DragHandle(options: DragHandleOptions) {
             dragHandleElement.dataset.dragHandle = "";
             dragHandleElement.classList.add("drag-handle");
             dragHandleElement.addEventListener("dragstart", (e) => {
-                handleDragStart(e, view);
+                handleDragStart(e, view as any);
             });
             dragHandleElement.addEventListener("click", (e) => {
-                handleClick(e, view);
+                handleClick(e, view as any);
             });
 
             hideDragHandle();

packages/editor/src/extensions/index.ts

@@ -52,7 +52,7 @@ const Horizontal = HorizontalRule.extend({
                     const start = range.from;
                     const end = range.to;
 
-                    tr.insert(start - 1, this.type.create(attributes)).delete(
+                    tr.insert(start - 1, this.type.create(attributes) as any).delete(
                         tr.mapping.map(start),
                         tr.mapping.map(end)
                     );

packages/firecms_core/src/app/Drawer.tsx

@@ -7,7 +7,6 @@ import { DefaultDrawer } from "../core";
  * If you want to customise the drawer, you can create your own component and pass it as a child.
  * For custom drawers, you can use the {@link useApp} to open and close the drawer.
  *
-
  */
 export function Drawer({
                            children,

packages/firecms_core/src/components/HomePage/NavigationGroup.tsx

@@ -13,7 +13,7 @@ export function NavigationGroup({
         <ExpandablePanel
             invisible={true}
             titleClassName={"font-medium text-sm text-gray-600 dark:text-gray-400"}
-            className={"py-4"}
+            innerClassName={"py-4"}
             initiallyExpanded={!(userConfigurationPersistence?.collapsedGroups ?? []).includes(group ?? "ungrouped")}
             onExpandedChange={expanded => {
                 if (userConfigurationPersistence) {

packages/firecms_core/src/form/field_bindings/ArrayCustomShapedFieldBinding.tsx

@@ -80,7 +80,7 @@ export function ArrayCustomShapedFieldBinding<T extends Array<any>>({
             {!minimalistView &&
                 <ExpandablePanel initiallyExpanded={expanded}
                                  title={title}
-                                 className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}>
+                                 innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}>
                     {body}
                 </ExpandablePanel>}
 

packages/firecms_core/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx

@@ -135,7 +135,7 @@ export function ArrayOfReferencesFieldBinding({
             {!minimalistView &&
                 <ExpandablePanel
                     titleClassName={fieldBackgroundMixin}
-                    className={cls("px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2", fieldBackgroundMixin)}
+                    innerClassName={cls("px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2", fieldBackgroundMixin)}
                     initiallyExpanded={expanded}
                     title={title}>
                     {body}

packages/firecms_core/src/form/field_bindings/BlockFieldBinding.tsx

@@ -89,7 +89,7 @@ export function BlockFieldBinding<T extends Array<any>>({
 
             {!minimalistView &&
                 <ExpandablePanel
-                    className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}
+                    innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}
                     initiallyExpanded={expanded}
                     title={title}>
                     {body}

packages/firecms_core/src/form/field_bindings/KeyValueFieldBinding.tsx

@@ -74,7 +74,7 @@ export function KeyValueFieldBinding({
 
             {!minimalistView && <ExpandablePanel initiallyExpanded={expanded}
                                                  title={title}
-                                                 className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}>{mapFormView}</ExpandablePanel>}
+                                                 innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}>{mapFormView}</ExpandablePanel>}
 
             {minimalistView && mapFormView}
 

packages/firecms_core/src/form/field_bindings/MapFieldBinding.tsx

@@ -95,7 +95,7 @@ export function MapFieldBinding({
         <ErrorBoundary>
 
             {!minimalistView && !minimalistView && <ExpandablePanel initiallyExpanded={expanded}
-                                                                    className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2 bg-slate-50 bg-opacity-50 dark:bg-gray-900"}
+                                                                    innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2 bg-white dark:bg-gray-900"}
                                                                     title={title}>{mapFormView}</ExpandablePanel>}
 
             {(minimalistView || minimalistView) && mapFormView}

packages/firecms_core/src/form/field_bindings/RepeatFieldBinding.tsx

@@ -100,7 +100,7 @@ export function RepeatFieldBinding<T extends Array<any>>({
         <>
 
             {!minimalistView && <ExpandablePanel initiallyExpanded={expanded}
-                                                 className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}
+                                                 innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}
                                                  title={title}>
                 {arrayContainer}
             </ExpandablePanel>}

packages/ui/src/components/ExpandablePanel.tsx

@@ -15,7 +15,8 @@ export function ExpandablePanel({
                                     initiallyExpanded = true,
                                     titleClassName,
                                     asField,
-                                    className
+                                    className,
+                                    innerClassName
                                 }: PropsWithChildren<{
     title: React.ReactNode,
     invisible?: boolean,
@@ -24,7 +25,8 @@ export function ExpandablePanel({
     onExpandedChange?: (expanded: boolean) => void,
     titleClassName?: string,
     asField?: boolean,
-    className?: string
+    className?: string,
+    innerClassName?: string
 }>) {
 
     useInjectStyles("ExpandablePanel", `
@@ -79,7 +81,8 @@ export function ExpandablePanel({
                 className={cls(
                     !invisible && defaultBorderMixin + " border",
                     "rounded-md",
-                    "w-full"
+                    "w-full",
+                    className
                 )}
                 open={open}
                 onOpenChange={(updatedOpen: boolean) => {
@@ -89,8 +92,8 @@ export function ExpandablePanel({
 
                 <Collapsible.Trigger
                     className={cls(
-                        "rounded flex items-center justify-between w-full min-h-[52px]",
-                        "hover:bg-slate-50 dark:hover:bg-gray-800 dark:hover:bg-opacity-20",
+                        "rounded-t flex items-center justify-between w-full min-h-[52px]",
+                        "hover:bg-slate-200 hover:bg-opacity-20 dark:hover:bg-gray-800 dark:hover:bg-opacity-20",
                         invisible ? "border-b px-2" : "p-4",
                         invisible && defaultBorderMixin,
                         asField && fieldBackgroundMixin,
@@ -107,7 +110,7 @@ export function ExpandablePanel({
                         overflow: allowOverflow ? "visible" : "hidden"
                     }}
                 >
-                    <div className={className}>
+                    <div className={innerClassName}>
                         {children}
                     </div>
                 </Collapsible.Content>

packages/ui/src/components/FileUpload.tsx

@@ -11,7 +11,7 @@ export interface FileUploadError {
 
 export type OnFileUploadRejected = (fileRejections: {
     file: File;
-    errors: FileUploadError[];
+    errors: readonly FileUploadError[];
 }[], event: object) => void;
 
 export type OnFilesUploadAdded = (files: File[]) => void;

packages/ui/src/components/Sheet.tsx

@@ -7,6 +7,7 @@ interface SheetProps {
     children: React.ReactNode;
     open: boolean;
     title?: string;
+    modal?: boolean;
     side?: "top" | "bottom" | "left" | "right";
     darkBackground?: boolean;
     transparent?: boolean;
@@ -19,6 +20,7 @@ export const Sheet: React.FC<SheetProps> = ({
                                                 children,
                                                 side = "right",
                                                 title,
+                                                modal = true,
                                                 open,
                                                 onOpenChange,
                                                 transparent,
@@ -51,12 +53,13 @@ export const Sheet: React.FC<SheetProps> = ({
 
     return (
         <DialogPrimitive.Root open={displayed || open}
+                              modal={modal}
                               onOpenChange={onOpenChange}>
             <DialogPrimitive.Portal>
                 <DialogPrimitive.Title autoFocus tabIndex={0}>
                     {title ?? "Sheet"}
                 </DialogPrimitive.Title>
-                <DialogPrimitive.Overlay
+                {modal && <DialogPrimitive.Overlay
                     className={cls(
                         "fixed inset-0 transition-opacity z-20 ease-in-out duration-100 backdrop-blur-sm",
                         "bg-black bg-opacity-50",
@@ -68,7 +71,7 @@ export const Sheet: React.FC<SheetProps> = ({
                         pointerEvents: displayed ? "auto" : "none"
                     }}
                     onClick={() => onOpenChange && onOpenChange(false)}
-                />
+                />}
                 <DialogPrimitive.Content
                     {...props}
                     onFocusCapture={(event) => event.preventDefault()}

packages/ui/src/styles.ts

@@ -5,8 +5,8 @@ export const fieldBackgroundMixin = "bg-opacity-50 bg-slate-200 dark:bg-gray-800
 export const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-slate-100 dark:bg-gray-800 dark:bg-opacity-0";
 export const fieldBackgroundDisabledMixin = "dark:bg-gray-800 bg-opacity-50 dark:bg-opacity-90";
 export const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-gray-700 dark:hover:bg-opacity-40";
-export const defaultBorderMixin = "border-gray-100 dark:border-gray-800 dark:border-opacity-80";
-export const paperMixin = "bg-white rounded-md dark:bg-gray-950 border dark:border-gray-800 dark:border-opacity-80 border-gray-100";
-export const cardMixin = "bg-white border border-gray-100 dark:border-transparent rounded-md dark:bg-gray-950 dark:border-gray-800 dark:border-opacity-50 m-1 -p-1";
+export const defaultBorderMixin = "border-gray-200 border-opacity-40 dark:border-gray-700 dark:border-opacity-70";
+export const paperMixin = "bg-white rounded-md dark:bg-gray-950 border border-gray-200 border-opacity-40 dark:border-gray-800 dark:border-opacity-80";
+export const cardMixin = "bg-white border border-gray-200 border-opacity-40 dark:border-transparent rounded-md dark:bg-gray-950 dark:border-gray-800 dark:border-opacity-50 m-1 -p-1";
 export const cardClickableMixin = "hover:bg-primary-bg dark:hover:bg-primary-bg hover:bg-opacity-20 dark:hover:bg-opacity-20 hover:ring-2 hover:ring-primary cursor-pointer";
 export const cardSelectedMixin = "bg-primary-bg dark:bg-primary-bg bg-opacity-30 dark:bg-opacity-10 ring-1 ring-primary ring-opacity-75";

website/docs/components.mdx

@@ -57,7 +57,13 @@ npm install @firecms/ui
 You also need to install `tailwindcss`:
 
 ```bash
-yarn add tailwindcss
+yarn add tailwindcss @tailwindcss/typography
+```
+
+And initialize it in your project:
+
+```bash
+npx tailwindcss init
 ```
 
 And add then add the fireCMS preset in your `tailwind.config.js`:
@@ -70,12 +76,12 @@ export default {
     content: [
         "./index.html",
         "./src/**/*.{js,ts,jsx,tsx}",
-        "../../packages/**/src/**/*.{js,ts,jsx,tsx}",
-        "../../node_modules/firecms/src/**/*.{js,ts,jsx,tsx}",
-        "../../node_modules/@firecms/**/src/**/*.{js,ts,jsx,tsx}",
+        "./node_modules/firecms/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:
 

website/docs/components/label.mdx

@@ -0,0 +1,44 @@
+---
+id: label
+title: Label
+sidebar_label: Label
+---
+
+The `Label` component is a simple and versatile component used to display text content with a label style.
+You usually use it to display a label for an input field, like a checkbox, or radio button.
+
+## Usage
+
+To use the `Label` component, import it from your components. You can pass a `border` prop to add a border around the label.
+You can also pass any of the HTML `label` props, such as `htmlFor`, `className`, and `style`.
+
+
+
+import CodeSample from "../../src/CodeSample";
+import CodeBlock from "@theme/CodeBlock";
+
+## Label with a Checkbox
+
+Simple example of using the `Label` component to create a basic surface for content.
+
+import LabelCheckboxDemo from '../../samples/components/label/label_checkbox';
+import LabelCheckboxSource from '!!raw-loader!../../samples/components/label/label_checkbox';
+
+<CodeSample>
+    <LabelCheckboxDemo/>
+</CodeSample>
+
+<CodeBlock language="tsx">{LabelCheckboxSource}</CodeBlock>
+
+## Label with a Radio Button
+
+This is an example of using the `Label` component with a radio button.
+
+import LabelRadioButtonDemo from '../../samples/components/label/label_radio_group';
+import LabelRadioButtonSource from '!!raw-loader!../../samples/components/label/label_radio_group';
+
+<CodeSample>
+    <LabelRadioButtonDemo/>
+</CodeSample>
+
+<CodeBlock language="tsx">{LabelRadioButtonSource}</CodeBlock>

website/docusaurus.config.js

@@ -114,7 +114,7 @@ module.exports = {
         description: "Headless CMS based on Firestore/Firebase, React and tailwindcss, and completely open-source",
         announcementBar: {
             id: "dataki-announcement",
-            content: "<code>DATAKI</code> is our new <b>AI analytics tool</b> for SQL databases. Is is amazing! 🚀 <a href='https://dataki.ai?utm_source=firecms_landing'>Check it out!</a>",
+            content: "<code>DATAKI</code> is our new <b>AI analytics tool</b> for SQL databases. It is amazing! 🚀 <a href='https://dataki.ai?utm_source=firecms_landing'>Check it out!</a>",
             backgroundColor: "#FF5B79",
             textColor: "black",
             isCloseable: true

website/samples/components/label/label_checkbox.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Checkbox, Label } from "@firecms/ui";
+
+export default function LabelCheckboxDemo() {
+
+    const [checked, setChecked] = React.useState(false);
+
+    return (
+        <Label
+            border={true}
+            className="cursor-pointer p-2 flex items-center gap-2 [&:has(:checked)]:bg-gray-100 dark:[&:has(:checked)]:bg-gray-800"
+            htmlFor="my-filter"
+        >
+            <Checkbox id="my-filter"
+                      checked={checked}
+                      size={"small"}
+                      onCheckedChange={setChecked}/>
+            Filter for null values
+        </Label>
+    );
+}