From c0b697fe7026dd8e32072d78067d30a091493f8c Mon Sep 17 00:00:00 2001 From: francesco Date: Fri, 19 May 2023 13:04:07 +0200 Subject: [PATCH] Added string url previews to fields --- CHANGELOG.md | 7 ++- .../internal/PropertyTableCell.tsx | 1 + .../internal/TableCell.tsx | 8 +-- .../components/fields/DisabledTextField.tsx | 3 +- .../form/field_bindings/TextFieldBinding.tsx | 18 +++++- .../ArrayOfStringsPreview.tsx | 63 ++++++------------- .../StringPropertyPreview.tsx | 9 ++- website/docs/openai.md | 19 ++++++ 8 files changed, 75 insertions(+), 53 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 592c48295..007c44d6d 100644 --- 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 index 3696f6fbe..6373225d4 100644 --- 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>( key={`preview_cell_${propertyKey}_${entity.id}`} value={internalValue} align={align ?? "left"} + fullHeight={true} disabledTooltip={disabledTooltip ?? (readOnlyProperty ? "Read only" : undefined)} disabled={true}> (({ justifyContent, padding, border, - width, alignItems, backgroundColor }) => ({ - width: width ?? "100%", alignItems, backgroundColor, padding, @@ -118,6 +115,7 @@ const TableCellInner = styled("div", {})(({ }) => ({ display: "flex", + maxHeight: "100%", width: "100%", flexDirection: "column", height: fullHeight ? "100%" : undefined, @@ -270,6 +268,9 @@ export const TableCell = React.memo( return ( ( 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 index d9fcbdfae..2272fa778 100644 --- a/lib/src/core/components/fields/DisabledTextField.tsx +++ b/lib/src/core/components/fields/DisabledTextField.tsx @@ -28,7 +28,8 @@ export function DisabledTextField({ }} variant={"filled"}>{label} {value} diff --git a/lib/src/form/field_bindings/TextFieldBinding.tsx b/lib/src/form/field_bindings/TextFieldBinding.tsx index df337af7b..6fa39944f 100644 --- 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 extends FieldProps { allowInfinity?: boolean @@ -41,8 +43,10 @@ export function TextFieldBinding({ }: TextFieldProps) { 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({ > - {showError && {error}} + {showError && {error}} {includeDescription && } @@ -135,6 +140,15 @@ export function TextFieldBinding({ } } + {url && + + } + {/**/} ); diff --git a/lib/src/preview/property_previews/ArrayOfStringsPreview.tsx b/lib/src/preview/property_previews/ArrayOfStringsPreview.tsx index dfcdd2512..b52167d40 100644 --- 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 {`Unexpected value: ${value}`}; + return
{`Unexpected value: ${value}`}
; } const stringProperty = property.of as ResolvedStringProperty; return ( -
+ {value && - value.map((v, index) => -
- - - -
- )} -
+ value.map((v, index) => +
+ + + +
+ )} + ); } diff --git a/lib/src/preview/property_previews/StringPropertyPreview.tsx b/lib/src/preview/property_previews/StringPropertyPreview.tsx index f2f6d653a..8b8f94840 100644 --- 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"} /> ); + } else if (property.url) { + return ( + + ); } else { if (!value) return <>; const lines = value.split("\n"); diff --git a/website/docs/openai.md b/website/docs/openai.md index 2b94a1d2a..d9d9dcd83 100644 --- 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**!