Added Slider component and DialogTitle

fgatti675 · fgatti675 · commit 8820e61ad488 · 2024-10-13T13:23:17.000+02:00
diff --git a/examples/example_pro/src/SimpleApp/App.tsx b/examples/example_pro/src/SimpleApp/App.tsx
@@ -159,7 +159,7 @@ function ProSample() {
     });
 
     if (firebaseConfigLoading || !firebaseApp) {
-        return <><CircularProgressCenter/></>;
+        return <CircularProgressCenter/>;
     }
 
     if (configError) {
diff --git a/packages/firecms_core/src/form/field_bindings/KeyValueFieldBinding.tsx b/packages/firecms_core/src/form/field_bindings/KeyValueFieldBinding.tsx
@@ -311,7 +311,7 @@ function MapKeyValueRow<T extends Record<string, any>>({
                                   }}/>;
         } else if (dataType === "boolean") {
             return <BooleanSwitchWithLabel value={entryValue}
-                                           size={"medium"}
+                                           size={"small"}
                                            position={"start"}
                                            disabled={disabled || !fieldKey}
                                            onValueChange={(newValue) => {
@@ -478,7 +478,7 @@ function ArrayKeyValueRow<T>({
                                   }}/>;
         } else if (dataType === "boolean") {
             return <BooleanSwitchWithLabel value={entryValue}
-                                           size={"medium"}
+                                           size={"small"}
                                            position={"start"}
                                            onValueChange={(v) => {
                                                setValue(v as T);
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -61,9 +61,11 @@
     "@radix-ui/react-scroll-area": "^1.2.0",
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slider": "^1.2.1",
     "@radix-ui/react-switch": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.3",
+    "@radix-ui/react-visually-hidden": "^1.1.0",
     "clsx": "^2.1.1",
     "cmdk": "^0.2.1",
     "date-fns": "^3.6.0",
diff --git a/packages/ui/src/components/DialogTitle.tsx b/packages/ui/src/components/DialogTitle.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
+import { Typography, TypographyProps, TypographyVariant } from "./Typography.tsx";
+
+export type DialogContentProps = TypographyProps & {
+    children: React.ReactNode,
+    hidden?: boolean,
+    className?: string,
+    variant?: TypographyVariant
+};
+
+export function DialogTitle({
+                                children,
+                                hidden,
+                                className,
+                                variant = "h4",
+                                ...props
+                            }: DialogContentProps) {
+
+    const title = <DialogPrimitive.Title asChild>
+        <Typography variant={variant}
+                    className={className}
+                    {...props}>
+            {children}
+        </Typography>
+    </DialogPrimitive.Title>;
+
+    if (hidden) {
+        return <VisuallyHidden.Root>{title}</VisuallyHidden.Root>
+    }
+
+    return title;
+}
diff --git a/packages/ui/src/components/Slider.tsx b/packages/ui/src/components/Slider.tsx
@@ -0,0 +1,80 @@
+import * as React from "react"
+import { cls } from "../util";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+export interface SliderProps {
+    className?: string;
+    name?: string;
+    disabled?: boolean;
+    orientation?: React.AriaAttributes["aria-orientation"];
+    dir?: "ltr" | "rtl";
+    min?: number;
+    max?: number;
+    step?: number;
+    minStepsBetweenThumbs?: number;
+    value?: number[];
+    defaultValue?: number[];
+
+    onValueChange?(value: number[]): void;
+
+    onValueCommit?(value: number[]): void;
+
+    inverted?: boolean;
+    form?: string;
+}
+
+const Slider = React.forwardRef<
+    React.ElementRef<typeof SliderPrimitive.Root>,
+    SliderProps
+>(({
+       className,
+       ...props
+   }, ref) => {
+    const [hovered, setHovered] = React.useState(false);
+    return (
+        <TooltipPrimitive.Provider delayDuration={200}>
+            <TooltipPrimitive.Root open={hovered}>
+                <SliderPrimitive.Root
+                    ref={ref}
+                    onMouseEnter={() => setHovered(true)}
+                    onMouseLeave={() => setHovered(false)}
+                    className={cls(
+                        "relative flex w-full touch-none select-none items-center",
+                        className
+                    )}
+                    {...props}
+                >
+                    <SliderPrimitive.Track
+                        className="relative h-2 w-full grow overflow-hidden rounded-full bg-slate-300 bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40">
+                        <SliderPrimitive.Range className={cls("absolute h-full",
+                            {
+                                "bg-primary": !props.disabled,
+                                "bg-slate-300 dark:bg-gray-700": props.disabled
+                            })}/>
+                    </SliderPrimitive.Track>
+                    <TooltipPrimitive.Trigger asChild>
+                        <SliderPrimitive.Thumb
+                            className={cls({
+                                "border-primary bg-primary hover:bg-primary-dark ring-offset-primary focus-visible:ring-2 focus-visible:ring-primary ": !props.disabled,
+                                "border-slate-300 bg-slate-300 dark:border-gray-700 dark:bg-gray-700": props.disabled
+                            }, "block h-6 w-6 rounded-full  transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50")}/>
+                    </TooltipPrimitive.Trigger>
+                    <TooltipPrimitive.Content side="top" sideOffset={5}
+                                              className={cls(
+                                                  "TooltipContent",
+                                                  "max-w-lg leading-relaxed",
+                                                  "z-50 rounded px-3 py-2 text-xs leading-none bg-slate-700 dark:bg-slate-800 bg-opacity-90 font-medium text-slate-50 shadow-2xl select-none duration-400 ease-in transform opacity-100",
+                                              )}>
+                        {props.value?.[0]}
+                    </TooltipPrimitive.Content>
+
+                </SliderPrimitive.Root>
+            </TooltipPrimitive.Root>
+        </TooltipPrimitive.Provider>
+    );
+});
+
+Slider.displayName = "Slider";
+
+export { Slider }
diff --git a/packages/ui/src/components/Typography.tsx b/packages/ui/src/components/Typography.tsx
@@ -1,22 +1,23 @@
 import React, { ReactEventHandler } from "react";
 import { cls } from "../util";
 
-export type TextProps<C extends React.ElementType> = {
+export type TypographyVariant = keyof typeof typographyVariants;
+export type TypographyProps<C extends React.ElementType = "span"> = {
     align?: "center" | "inherit" | "justify" | "left" | "right";
     children?: React.ReactNode;
     className?: string;
     component?: C;
     gutterBottom?: boolean;
     noWrap?: boolean;
     paragraph?: boolean;
-    variant?: keyof typeof defaultVariantMapping;
+    variant?: TypographyVariant;
     variantMapping?: { [key: string]: string };
     color?: "inherit" | "initial" | "primary" | "secondary" | "disabled" | "error";
     onClick?: ReactEventHandler<HTMLElement>;
     style?: React.CSSProperties;
 } & React.ComponentPropsWithoutRef<C>;
 
-const defaultVariantMapping = {
+const typographyVariants = {
     h1: "h1",
     h2: "h2",
     h3: "h3",
@@ -76,7 +77,7 @@ const variantToClasses = {
     button: "typography-button"
 };
 
-export function Typography<C extends React.ElementType>(
+export function Typography<C extends React.ElementType = "span">(
     {
         align = "inherit",
         color = "primary",
@@ -87,15 +88,15 @@ export function Typography<C extends React.ElementType>(
         noWrap = false,
         paragraph = false,
         variant = "body1",
-        variantMapping = defaultVariantMapping,
+        variantMapping = typographyVariants,
         style,
         onClick,
         ...other
-    }: TextProps<C>
+    }: TypographyProps<C>
 ) {
     const Component =
         component ||
-        (paragraph ? "p" : variantMapping[variant] || defaultVariantMapping[variant]) ||
+        (paragraph ? "p" : variantMapping[variant] || typographyVariants[variant]) ||
         "span";
 
     const classes = cls(
diff --git a/packages/ui/src/components/index.tsx b/packages/ui/src/components/index.tsx
@@ -15,6 +15,7 @@ export * from "./DateTimeField";
 export * from "./Dialog";
 export * from "./DialogActions";
 export * from "./DialogContent";
+export * from "./DialogTitle";
 export * from "./ExpandablePanel";
 export * from "./FileUpload";
 export * from "./IconButton";
@@ -31,6 +32,7 @@ export * from "./RadioGroup";
 export * from "./SearchBar";
 export * from "./Select";
 export * from "./Separator";
+export * from "./Slider";
 export * from "./Sheet";
 export * from "./TextareaAutosize";
 export * from "./TextField";
diff --git a/packages/ui/src/styles.ts b/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-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 defaultBorderMixin = "border-gray-200 border-opacity-40 dark:border-gray-700 dark:border-opacity-50";
+export const paperMixin = "bg-white rounded-md dark:bg-gray-950 border border-gray-200 border-opacity-40 dark:border-gray-700 dark:border-opacity-50";
+export const cardMixin = "bg-white border border-gray-200 border-opacity-40 dark:border-transparent rounded-md dark:bg-gray-950 dark:border-gray-700 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";
diff --git a/website/blog/2023-05-28-why_react_cms.md b/website/blog/2023-05-28-why_react_cms.md
@@ -88,7 +88,7 @@ mobile, and IoT devices, effectively increasing your reach.
 
 A React-based headless CMS allows content creators to customize their editorial
 workflows to suit their requirements better. Custom content types, taxonomies,
-and metadata can all be seamlessly managed and edited, ultimately fostering a
+and metadata can all be managed and edited, ultimately fostering a
 more efficient and tailored approach to content creation.
 
 ### 3. API-driven Content Delivery
diff --git a/website/docs/cloud/migrating_from_v2.mdx b/website/docs/cloud/migrating_from_v2.mdx
@@ -2,7 +2,7 @@
 id: migrating_from_v2
 title: Migrating from FireCMS 2.0 to FireCMS Cloud
 sidebar_label: Migrating from FireCMS 2.0 to FireCMS Cloud
-description: Migrate seamlessly to FireCMS 3.0, the latest innovation in headless CMS, by creating a new project on app.firecms.co. Benefit from centralized configuration management and hassle-free integration without having to reveal Firebase credentials. Initiate a fresh project setup with simple CLI commands and adapt your existing collections to the new format with ease. Tailored for developers, FireCMS 3.0 elevates content management to new flexibility and customization heights, while retaining the familiarity of previous versions.
+description: Migrate to FireCMS 3.0, the latest innovation in headless CMS, by creating a new project on app.firecms.co. Benefit from centralized configuration management and hassle-free integration without having to reveal Firebase credentials. Initiate a fresh project setup with simple CLI commands and adapt your existing collections to the new format with ease. Tailored for developers, FireCMS 3.0 brings content management to new flexibility and customization heights, while retaining the familiarity of previous versions.
 ---
 
 :::important
diff --git a/website/docs/pro/migrating_from_v2_to_pro.mdx b/website/docs/pro/migrating_from_v2_to_pro.mdx
@@ -2,7 +2,7 @@
 id: migrating_from_v2_to_pro
 title: Migrating from FireCMS 2.0 to FireCMS PRO
 sidebar_label: Migrating from FireCMS 2.0 to FireCMS PRO
-description: Migrate seamlessly to FireCMS PRO, the self-hosted version of FireCMS.
+description: Migrate to FireCMS PRO, the self-hosted version of FireCMS.
 ---
 
 FireCMS 3.0 is a major release that introduces a lot of changes. This page
diff --git a/website/docs/recipes/copy_entity.mdx b/website/docs/recipes/copy_entity.mdx
@@ -2,7 +2,7 @@
 id: copy_entity
 title: Copying an entity from one collection to another
 sidebar_label: Copying from another collection
-description: Implement custom functionality to copy entities between collections in Firestore using FireCMS with this practical tutorial. Assuming you're equipped with a Firebase project and FireCMS instance, you'll learn how to introduce a copy button to your collection views, enabling the replication of data across different Firestore locations, a helpful feature in denormalized NoSQL databases. This guide walks you through declaring source and target collections, crafting a custom button component leveraging FireCMS hooks, and seamlessly integrating it as a custom action within your collection's framework. Complete with code snippets illustrating a simple product collection and the custom button logic, this tutorial equips you to handle common scenarios requiring data duplication, enhancing the data management capabilities of your CMS. Whether you're dealing with products, articles, or user data, mastering entity copying can streamline your workflow and maintain data consistency across your FireCMS application.
+description: Implement custom functionality to copy entities between collections in Firestore using FireCMS with this practical tutorial. Assuming you're equipped with a Firebase project and FireCMS instance, you'll learn how to introduce a copy button to your collection views, enabling the replication of data across different Firestore locations, a helpful feature in denormalized NoSQL databases. This guide walks you through declaring source and target collections, crafting a custom button component leveraging FireCMS hooks, and integrating it as a custom action within your collection's framework. Complete with code snippets illustrating a simple product collection and the custom button logic, this tutorial equips you to handle common scenarios requiring data duplication, enhancing the data management capabilities of your CMS. Whether you're dealing with products, articles, or user data, mastering entity copying can streamline your workflow and maintain data consistency across your FireCMS application.
 ---
 
 ![Product selection](/img/product_selection.webp)
diff --git a/website/samples/components/dialog/dialog_basic.tsx b/website/samples/components/dialog/dialog_basic.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Button, Dialog, DialogActions, DialogContent, Typography } from "@firecms/ui";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@firecms/ui";
 
 export default function DialogBasicDemo() {
     const [open, setOpen] = useState(false);
@@ -11,9 +11,9 @@ export default function DialogBasicDemo() {
                 open={open}
                 onOpenChange={setOpen}>
                 <DialogContent className="p-8 flex flex-col space-y-2">
-                    <Typography variant={"h5"} gutterBottom>
+                    <DialogTitle variant={"h5"} gutterBottom>
                         Your dialog
-                    </Typography>
+                    </DialogTitle>
                     <Typography gutterBottom>
                         Basic Dialog Content
                     </Typography>
diff --git a/website/samples/components/slider/slider_basic.tsx b/website/samples/components/slider/slider_basic.tsx
@@ -0,0 +1,16 @@
+import React, { useState } from "react";
+import { Slider } from "@firecms/ui";
+
+export default function SliderBasicDemo() {
+    const [value, setValue] = useState([50]);
+
+    return (
+        <Slider
+            value={value}
+            onValueChange={setValue}
+            min={0}
+            max={100}
+            step={1}
+        />
+    );
+}
diff --git a/website/samples/components/slider/slider_disabled.tsx b/website/samples/components/slider/slider_disabled.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import { Slider } from "@firecms/ui";
+
+export default function SliderDisabledDemo() {
+    return (
+        <Slider
+            value={[30]}
+            min={0}
+            max={100}
+            disabled
+        />
+    );
+}
diff --git a/website/samples/components/slider/slider_inverted.tsx b/website/samples/components/slider/slider_inverted.tsx
@@ -0,0 +1,16 @@
+import React, { useState } from "react";
+import { Slider } from "@firecms/ui";
+
+export default function SliderInvertedDemo() {
+    const [value, setValue] = useState([70]);
+
+    return (
+        <Slider
+            value={value}
+            onValueChange={setValue}
+            min={0}
+            max={100}
+            inverted
+        />
+    );
+}
diff --git a/website/src/docs_generation/index.ts b/website/src/docs_generation/index.ts
@@ -49,4 +49,4 @@ function camelToSlug(input: string): string {
     return slug.charAt(0) === "_" ? slug.slice(1) : slug;
 }
 
-generateDocsForFile("../packages/ui/src/components/Menubar.tsx")
+generateDocsForFile("../packages/ui/src/components/Slider.tsx")
diff --git a/website/src/pages/pro.tsx b/website/src/pages/pro.tsx
@@ -41,7 +41,6 @@ function ProPage() {
                                 could be easily customized to fit different needs.
                             </p>
                         </div>
-                        <HeroProButtons/>
                     </Panel>
 
                     <PublicFacingApps/>
diff --git a/website/src/pages/ui.tsx b/website/src/pages/ui.tsx
@@ -11,15 +11,14 @@ const UIPage: React.FC = () => {
         <Layout title="FireCMS UI, batteries included">
 
             <Hero
-                color={"secondary"}
                 title={
                     <>
                         <span className="block lg:inline">FireCMS UI</span>
                     </>}
                 subtitle={
                     <>
                         <p>
-                            FireCMS includes a set of components based on <b>tailwind</b> and <b>RadixUI</b> that can be
+                            A battle-tested set of components based on <b>tailwind</b> and <b>RadixUI</b> that can be
                             used in any React project.
                         </p>
                     </>}
diff --git a/website/src/partials/features/Features.tsx b/website/src/partials/features/Features.tsx
@@ -15,7 +15,13 @@ import inlineEditingVideo from "@site/static/img/inline_table_editing.mp4";
 
 import { useColorMode } from "@docusaurus/theme-common";
 import { TwoColumns } from "../general/TwoColumns";
-import { ContainerInnerPaddingMixin, CTACaret, CTAOutlinedButtonMixin, defaultBorderMixin } from "../styles";
+import {
+    ContainerInnerPaddingMixin,
+    CTACaret,
+    CTAOutlinedButtonMixin,
+    CTAOutlinedButtonWhiteMixin,
+    defaultBorderMixin
+} from "../styles";
 import { BrowserFrame } from "../BrowserFrame";
 import clsx from "clsx";
 import { Panel } from "../general/Panel";
@@ -70,7 +76,7 @@ function Features() {
                     </p>
 
                     <a
-                        className={CTAOutlinedButtonMixin + " w-fit"}
+                        className={CTAOutlinedButtonWhiteMixin + " w-fit"}
                         href="https://demo.firecms.co"
                         rel="noopener noreferrer"
                         target="_blank"
diff --git a/website/src/partials/home/ImportDataIntro.tsx b/website/src/partials/home/ImportDataIntro.tsx
diff --git a/website/src/partials/pro/ProDeveloperFeatures.tsx b/website/src/partials/pro/ProDeveloperFeatures.tsx
diff --git a/website/src/partials/pro/ProFeaturesPanels.tsx b/website/src/partials/pro/ProFeaturesPanels.tsx
diff --git a/website/src/partials/ui/ClientUIComponentsShowcase.tsx b/website/src/partials/ui/ClientUIComponentsShowcase.tsx
diff --git a/website/src/pro_sample/pro_sample.tsx b/website/src/pro_sample/pro_sample.tsx
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -159,7 +159,7 @@ function ProSample() {`
`159`	`159`	`});`
`160`	`160`
`161`	`161`	`if (firebaseConfigLoading \|\| !firebaseApp) {`
`162`		`- return <><CircularProgressCenter/></>;`
	`162`	`+ return <CircularProgressCenter/>;`
`163`	`163`	`}`
`164`	`164`
`165`	`165`	`if (configError) {`
Original file line number	Diff line number	Diff line change
`@@ -49,4 +49,4 @@ function camelToSlug(input: string): string {`
`49`	`49`	`return slug.charAt(0) === "_" ? slug.slice(1) : slug;`
`50`	`50`	`}`
`51`	`51`
`52`		`-generateDocsForFile("../packages/ui/src/components/Menubar.tsx")`
	`52`	`+generateDocsForFile("../packages/ui/src/components/Slider.tsx")`