Added string url previews to fields

VisetDev · May 19, 2023 · c0b697f · c0b697f
1 parent b1765d0
commit c0b697f
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 53 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,9 @@
-## [WIP 2.0.0-beta.6] - 2023-05-11
+## [WIP 2.0.0-beta.7] - 2023-05-11
+
+### Changed
+- Added string url previews to fields
+
+## [2.0.0-beta.6] - 2023-05-11
 
 ### Changed
 - Fix for Typescript types not being exported correctly and giving errors

diff --git a/lib/src/core/components/EntityCollectionTable/internal/PropertyTableCell.tsx b/lib/src/core/components/EntityCollectionTable/internal/PropertyTableCell.tsx
@@ -243,6 +243,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any, any>>(
                 key={`preview_cell_${propertyKey}_${entity.id}`}
                 value={internalValue}
                 align={align ?? "left"}
+                fullHeight={true}
                 disabledTooltip={disabledTooltip ?? (readOnlyProperty ? "Read only" : undefined)}
                 disabled={true}>
                 <PropertyPreview

diff --git a/lib/src/core/components/EntityCollectionTable/internal/TableCell.tsx b/lib/src/core/components/EntityCollectionTable/internal/TableCell.tsx
@@ -69,7 +69,6 @@ function getBackgroundColor(onHover: any, selectedRow: boolean, disabled: boolea
 }
 
 type TableCellRootProps = {
-    width: number,
     padding: string;
     border: string;
     justifyContent: string;
@@ -82,11 +81,9 @@ const TableCellRoot = styled("div", {})<TableCellRootProps>(({
                                                                  justifyContent,
                                                                  padding,
                                                                  border,
-                                                                 width,
                                                                  alignItems,
                                                                  backgroundColor
                                                              }) => ({
-    width: width ?? "100%",
     alignItems,
     backgroundColor,
     padding,
@@ -118,6 +115,7 @@ const TableCellInner = styled("div", {})<TableCellInnerProps>(({
                                                                }) => ({
 
     display: "flex",
+    maxHeight: "100%",
     width: "100%",
     flexDirection: "column",
     height: fullHeight ? "100%" : undefined,
@@ -270,6 +268,9 @@ export const TableCell = React.memo<TableCellProps>(
 
         return (
             <TableCellRoot
+                style={{
+                    width: width ?? "100%"
+                }}
                 tabIndex={selected || disabled ? undefined : 0}
                 ref={ref}
                 onFocus={onFocus}
@@ -281,7 +282,6 @@ export const TableCell = React.memo<TableCellProps>(
                 contain={scrollable ? "content" : "size"}
                 border={border}
                 justifyContent={justifyContent}
-                width={width}
                 alignItems={disabled || !isOverflowing ? "center" : undefined}
                 backgroundColor={getBackgroundColor(onHover, selectedRow, disabled, internalSaved ?? false, theme, isSelected ?? false)}
             >

diff --git a/lib/src/core/components/fields/DisabledTextField.tsx b/lib/src/core/components/fields/DisabledTextField.tsx
@@ -28,7 +28,8 @@ export function DisabledTextField<T extends string | number>({
             }}
             variant={"filled"}>{label}</InputLabel>
         <Box sx={{
-            padding: "32px 12px 8px 12px"
+            padding: "32px 12px 8px 12px",
+            overflow: "auto"
         }}>
             <Typography variant={"body1"}>{value}</Typography>
         </Box>

diff --git a/lib/src/form/field_bindings/TextFieldBinding.tsx b/lib/src/form/field_bindings/TextFieldBinding.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback } from "react";
 import {
+    Collapse,
     Box,
     FormControlLabel,
     FormHelperText,
@@ -10,12 +11,13 @@ import {
 
 import ClearIcon from "@mui/icons-material/Clear";
 
-import { FieldProps } from "../../types";
+import { FieldProps, PreviewType } from "../../types";
 import { FieldDescription } from "../index";
 import { LabelWithIcon } from "../components";
 import { useClearRestoreValue } from "../../hooks";
 import { getIconForProperty } from "../../core";
 import { TextInput } from "../../core/components/fields/TextInput";
+import { PropertyPreview } from "../../preview";
 
 interface TextFieldProps<T extends string | number> extends FieldProps<T> {
     allowInfinity?: boolean
@@ -41,8 +43,10 @@ export function TextFieldBinding<T extends string | number>({
                                                             }: TextFieldProps<T>) {
 
     let multiline: boolean | undefined;
+    let url: boolean | PreviewType | undefined;
     if (property.dataType === "string") {
         multiline = property.multiline;
+        url = property.url;
     }
 
     useClearRestoreValue({
@@ -105,7 +109,8 @@ export function TextFieldBinding<T extends string | number>({
                 >
 
                     <Box flexGrow={1}>
-                        {showError && <FormHelperText error={true}>{error}</FormHelperText>}
+                        {showError && <FormHelperText
+                            error={true}>{error}</FormHelperText>}
 
                         {includeDescription &&
                             <FieldDescription property={property}/>}
@@ -135,6 +140,15 @@ export function TextFieldBinding<T extends string | number>({
                     }
                 </Box>}
 
+            {url && <Collapse
+                in={Boolean(value)}
+                appear={true}
+                timeout={500}>
+                <PropertyPreview value={value}
+                                 property={property}
+                                 size={"regular"}/>
+            </Collapse>}
+
             {/*</FormControl>*/}
         </>
     );

diff --git a/lib/src/preview/property_previews/ArrayOfStringsPreview.tsx b/lib/src/preview/property_previews/ArrayOfStringsPreview.tsx
@@ -5,37 +5,9 @@ import { PropertyPreviewProps } from "../index";
 
 import { ErrorBoundary, resolveArrayProperty } from "../../core";
 import { StringPropertyPreview } from "./StringPropertyPreview";
-import { Theme } from "@mui/material";
+import { Box, Theme } from "@mui/material";
 import { useFireCMSContext } from "../../hooks";
 
-const PREFIX = "ArrayOfStringsPreview";
-
-const classes = {
-    array: `${PREFIX}-array`,
-    arrayWrap: `${PREFIX}-arrayWrap`,
-    arrayItem: `${PREFIX}-arrayItem`
-};
-
-const Root = styled("div")((
-   { theme } : {
-        theme: Theme
-    }
-) => ({
-    [`& .${classes.array}`]: {
-        display: "flex",
-        flexDirection: "column"
-    },
-
-    [`& .${classes.arrayWrap}`]: {
-        display: "flex",
-        flexWrap: "wrap"
-    },
-
-    [`& .${classes.arrayItem}`]: {
-        margin: theme.spacing(0.5)
-    }
-}));
-
 /**
  * @category Preview components
  */
@@ -62,25 +34,28 @@ export function ArrayOfStringsPreview({
         throw Error("Picked wrong preview component ArrayOfStringsPreview");
 
     if (value && !Array.isArray(value)) {
-        return <Root>{`Unexpected value: ${value}`}</Root>;
+        return <div>{`Unexpected value: ${value}`}</div>;
     }
     const stringProperty = property.of as ResolvedStringProperty;
 
     return (
-        <div className={classes.array}>
+        <Box sx={{
+            display: "flex",
+            gap: "2px",
+            flexDirection: "column",
+        }}>
             {value &&
-            value.map((v, index) =>
-                <div className={classes.arrayItem}
-                     key={`preview_array_strings_${propertyKey}_${index}`}>
-                    <ErrorBoundary>
-                        <StringPropertyPreview propertyKey={propertyKey}
-                                               property={stringProperty}
-                                               value={v}
-                                               entity={entity}
-                                               size={size}/>
-                    </ErrorBoundary>
-                </div>
-            )}
-        </div>
+                value.map((v, index) =>
+                    <div key={`preview_array_strings_${propertyKey}_${index}`}>
+                        <ErrorBoundary>
+                            <StringPropertyPreview propertyKey={propertyKey}
+                                                   property={stringProperty}
+                                                   value={v}
+                                                   entity={entity}
+                                                   size={size}/>
+                        </ErrorBoundary>
+                    </div>
+                )}
+        </Box>
     );
 }
diff --git a/lib/src/preview/property_previews/StringPropertyPreview.tsx b/lib/src/preview/property_previews/StringPropertyPreview.tsx
@@ -2,8 +2,9 @@ import React from "react";
 
 import { ErrorBoundary, resolvePropertyEnum } from "../../core";
 import { ColorChip, EnumValuesChip } from "../components/ColorChip";
-import { PropertyPreviewProps } from "../index";
+import { PropertyPreviewProps, UrlComponentPreview } from "../index";
 import { getColorSchemeForSeed } from "../../core/util/chip_utils";
+import { PreviewType } from "../../types";
 
 /**
  * @category Preview components
@@ -32,6 +33,12 @@ export function StringPropertyPreview({
                     small={size !== "regular"}
                 />
             </ErrorBoundary>);
+    } else if (property.url) {
+        return (
+            <UrlComponentPreview size={size}
+                                 url={value}
+                                 previewType={typeof property.url === "string" ? property.url as PreviewType : undefined}/>
+        );
     } else {
         if (!value) return <></>;
         const lines = value.split("\n");

diff --git a/website/docs/openai.md b/website/docs/openai.md
@@ -87,6 +87,25 @@ const dataEnhancementPlugin = useDataEnhancementPlugin({
 });
 ```
 
+## How does it work?
+
+This plugin is able to understand the structure of your data and generate
+content that fits your schema.
+
+Some tips in order to get the best results:
+
+- Make sure you select the **right data** type for your fields.
+- The **field names** are used to generate the content and are usually enough to
+  generate good results. If you want to get even better results, you can
+  **add a description** to your fields. This will help the plugin understand the
+  context of your data and generate better results.
+- The **collection name** is important as well.
+- You can establish **relations between fields** and the plugin will pick it up.
+  e.g. if you have a field called `author` and another field called `book`, the
+  plugin will understand that the author is related to the book and will
+  generate content accordingly. You can use this for making **summaries, reviews,
+  translations, SEO content**, etc.
+
 ## Pricing and subscriptions
 
 You have a 20 **free weekly usages** of the plugin, **no subscription needed**!