Merge branch 'main' into fullscreen-preview

webstudio-is · May 10, 2024 · 3b362af · 3b362af
2 parents df0e203 + efa5445
commit 3b362af
Show file tree

Hide file tree

Showing 226 changed files with 3,461 additions and 3,896 deletions.
diff --git a/apps/builder/app/builder/features/ai/ai-command-bar.tsx b/apps/builder/app/builder/features/ai/ai-command-bar.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable import/no-internal-modules */
 import { formatDistance } from "date-fns/formatDistance";
 import {
   AutogrowTextArea,

diff --git a/apps/builder/app/builder/features/inspector/inspector.tsx b/apps/builder/app/builder/features/inspector/inspector.tsx
@@ -25,6 +25,7 @@ import {
   $registeredComponentMetas,
   $dragAndDropState,
   $inspectorLastInputTime,
+  $selectedPage,
 } from "~/shared/nano-states";
 import { NavigatorTree } from "~/builder/shared/navigator-tree";
 import type { Settings } from "~/builder/shared/client-settings";
@@ -82,6 +83,7 @@ export const Inspector = ({ navigatorLayout }: InspectorProps) => {
   const [tab, setTab] = useState("style");
   const isDragging = useStore($isDragging);
   const metas = useStore($registeredComponentMetas);
+  const selectedPage = useStore($selectedPage);
 
   if (navigatorLayout === "docked" && isDragging) {
     return <NavigatorTree />;
@@ -101,7 +103,9 @@ export const Inspector = ({ navigatorLayout }: InspectorProps) => {
   }
 
   const meta = metas.get(selectedInstance.component);
-  const isStyleTabVisible = meta?.stylable ?? true;
+  const documentType = selectedPage?.meta.documentType ?? "html";
+
+  const isStyleTabVisible = documentType === "html" && (meta?.stylable ?? true);
 
   const availableTabs = [
     isStyleTabVisible ? "style" : undefined,

diff --git a/apps/builder/app/builder/features/project-settings/section-general.tsx b/apps/builder/app/builder/features/project-settings/section-general.tsx
@@ -1,3 +1,5 @@
+import { z } from "zod";
+import { useId, useState } from "react";
 import { useStore } from "@nanostores/react";
 import {
   Grid,
@@ -10,16 +12,21 @@ import {
   CheckboxAndLabel,
   Checkbox,
   css,
+  Flex,
+  Tooltip,
+  InputErrorsTooltip,
+  ProBadge,
 } from "@webstudio-is/design-system";
+import { InfoCircleIcon } from "@webstudio-is/icons";
 import { ImageControl } from "./image-control";
-import { $assets, $imageLoader, $pages } from "~/shared/nano-states";
 import { Image } from "@webstudio-is/image";
-import { useIds } from "~/shared/form-utils";
 import type { ProjectMeta, CompilerSettings } from "@webstudio-is/sdk";
-import { useState } from "react";
+import { $assets, $imageLoader, $pages } from "~/shared/nano-states";
+import { useIds } from "~/shared/form-utils";
 import { serverSyncStore } from "~/shared/sync";
 import { sectionSpacing } from "./utils";
 import { CodeEditor } from "~/builder/shared/code-editor";
+import { $userPlanFeatures } from "~/builder/shared/nano-states";
 
 const imgStyle = css({
   width: 72,
@@ -32,15 +39,25 @@ const imgStyle = css({
 
 const defaultMetaSettings: ProjectMeta = {
   siteName: "",
+  contactEmail: "",
   faviconAssetId: "",
   code: "",
 };
 
+const Email = z.string().email();
+
 export const SectionGeneral = () => {
+  const { allowContactEmail } = useStore($userPlanFeatures);
   const [meta, setMeta] = useState(
     () => $pages.get()?.meta ?? defaultMetaSettings
   );
-  const ids = useIds(["siteName"]);
+  const siteNameId = useId();
+  const contactEmailId = useId();
+  const contactEmailError =
+    (meta.contactEmail ?? "").trim().length === 0 ||
+    Email.safeParse(meta.contactEmail).success
+      ? undefined
+      : "Contact email is invalid.";
   const assets = useStore($assets);
   const asset = assets.get(meta.faviconAssetId ?? "");
   const favIconUrl = asset ? `${asset.name}` : undefined;
@@ -65,21 +82,59 @@ export const SectionGeneral = () => {
   };
 
   return (
-    <>
+    <Grid gap={2}>
+      <Text variant="titles" css={sectionSpacing}>
+        General
+      </Text>
+
       <Grid gap={1} css={sectionSpacing}>
-        <Text variant="titles">General</Text>
-        <Label htmlFor={ids.siteName}>Site Name</Label>
+        <Flex gap={1} align="center">
+          <Label htmlFor={siteNameId}>Site Name</Label>
+          <Tooltip
+            variant="wrapped"
+            content="Used in search results and social previews."
+          >
+            <InfoCircleIcon tabIndex={0} />
+          </Tooltip>
+        </Flex>
         <InputField
-          id={ids.siteName}
+          id={siteNameId}
+          placeholder="Current Site Name"
+          autoFocus={true}
           value={meta.siteName ?? ""}
           onChange={(event) => {
             handleSave("siteName")(event.target.value);
           }}
-          placeholder="Current Site Name"
-          autoFocus
         />
       </Grid>
 
+      <Grid gap={1} css={sectionSpacing}>
+        <Flex gap={1} align="center">
+          <Label htmlFor={contactEmailId}>Contact Email</Label>
+          <Tooltip
+            variant="wrapped"
+            content="Used as the email recipient when submitting a webhook form without an action."
+          >
+            <InfoCircleIcon tabIndex={0} />
+          </Tooltip>
+          {allowContactEmail === false && <ProBadge>Pro</ProBadge>}
+        </Flex>
+        <InputErrorsTooltip
+          errors={contactEmailError ? [contactEmailError] : undefined}
+        >
+          <InputField
+            id={contactEmailId}
+            color={contactEmailError ? "error" : undefined}
+            placeholder="[email protected]"
+            disabled={allowContactEmail === false}
+            value={meta.contactEmail ?? ""}
+            onChange={(event) => {
+              handleSave("contactEmail")(event.target.value);
+            }}
+          />
+        </InputErrorsTooltip>
+      </Grid>
+
       <Separator />
 
       <Grid gap={2} css={sectionSpacing}>
@@ -118,7 +173,7 @@ export const SectionGeneral = () => {
       <Separator />
 
       <CompilerSection />
-    </>
+    </Grid>
   );
 };
 

diff --git a/apps/builder/app/builder/features/project-settings/section-marketplace.tsx b/apps/builder/app/builder/features/project-settings/section-marketplace.tsx
@@ -167,9 +167,11 @@ export const SectionMarketplace = () => {
   };
 
   return (
-    <>
+    <Grid gap={2}>
+      <Text variant="titles" css={sectionSpacing}>
+        Marketplace
+      </Text>
       <Grid gap={1} css={sectionSpacing}>
-        <Text variant="titles">Marketplace</Text>
         <Label htmlFor={ids.name}>Product Name</Label>
         <InputErrorsTooltip errors={errors?.name}>
           <InputField
@@ -350,6 +352,6 @@ export const SectionMarketplace = () => {
           </Button>
         )}
       </Flex>
-    </>
+    </Grid>
   );
 };
diff --git a/apps/builder/app/builder/features/settings-panel/props-section/props-section.tsx b/apps/builder/app/builder/features/settings-panel/props-section/props-section.tsx
@@ -1,7 +1,9 @@
 import { useState } from "react";
 import { useStore } from "@nanostores/react";
+import { matchSorter } from "match-sorter";
 import type { Instance } from "@webstudio-is/sdk";
 import { theme, Combobox, Separator, Flex } from "@webstudio-is/design-system";
+import { descendantComponent } from "@webstudio-is/react-sdk";
 import {
   $propValuesByInstanceSelector,
   $propsIndex,
@@ -17,7 +19,6 @@ import {
 } from "./use-props-logic";
 import { Row } from "../shared";
 import { serverSyncStore } from "~/shared/sync";
-import { matchSorter } from "match-sorter";
 
 const itemToString = (item: NameAndLabel | null) =>
   item?.label || item?.name || "";
@@ -222,11 +223,16 @@ export const PropsSectionContainer = ({
   }
 
   return (
-    <PropsSection
-      propsLogic={logic}
-      propValues={propValues ?? new Map()}
-      component={instance.component}
-      instanceId={instance.id}
-    />
+    <fieldset
+      style={{ display: "contents" }}
+      disabled={instance.component === descendantComponent}
+    >
+      <PropsSection
+        propsLogic={logic}
+        propValues={propValues ?? new Map()}
+        component={instance.component}
+        instanceId={instance.id}
+      />
+    </fieldset>
   );
 };
diff --git a/apps/builder/app/builder/features/settings-panel/props-section/use-props-logic.ts b/apps/builder/app/builder/features/settings-panel/props-section/use-props-logic.ts
@@ -151,11 +151,12 @@ export const usePropsLogic = ({
   const instanceMeta = useStore($registeredComponentMetas).get(
     instance.component
   );
-  const meta = useStore($registeredComponentPropsMetas).get(instance.component);
-
-  if (meta === undefined) {
-    throw new Error(`Could not get meta for component "${instance.component}"`);
-  }
+  const meta = useStore($registeredComponentPropsMetas).get(
+    instance.component
+  ) ?? {
+    props: {},
+    initialProps: [],
+  };
 
   const savedProps = props;
 

diff --git a/apps/builder/app/builder/features/sidebar-left/panels/components/components.tsx b/apps/builder/app/builder/features/sidebar-left/panels/components/components.tsx
@@ -22,13 +22,17 @@ import {
   useDraggable,
 } from "./use-draggable";
 import { MetaIcon } from "~/builder/shared/meta-icon";
-import { $registeredComponentMetas } from "~/shared/nano-states";
+import { $registeredComponentMetas, $selectedPage } from "~/shared/nano-states";
 import { getMetaMaps } from "./get-meta-maps";
 import { getInstanceLabel } from "~/shared/instance-utils";
 import { isFeatureEnabled } from "@webstudio-is/feature-flags";
 
 export const TabContent = ({ publish, onSetActiveTab }: TabContentProps) => {
   const metaByComponentName = useStore($registeredComponentMetas);
+  const selectedPage = useStore($selectedPage);
+
+  const documentType = selectedPage?.meta.documentType ?? "html";
+
   const { metaByCategory, componentNamesByMeta } = useMemo(
     () => getMetaMaps(metaByComponentName),
     [metaByComponentName]
@@ -51,9 +55,18 @@ export const TabContent = ({ publish, onSetActiveTab }: TabContentProps) => {
               return false;
             }
 
+            // Only xml category is allowed for xml document type
+            if (documentType === "xml") {
+              return category === "xml";
+            }
+            // Hide xml category for non-xml document types
+            if (category === "xml") {
+              return false;
+            }
+
             if (
-              isFeatureEnabled("xmlElement") === false &&
-              category === "xml"
+              isFeatureEnabled("internalComponents") === false &&
+              category === "internal"
             ) {
               return false;
             }
@@ -80,6 +93,12 @@ export const TabContent = ({ publish, onSetActiveTab }: TabContentProps) => {
                       ) {
                         return;
                       }
+                      if (
+                        isFeatureEnabled("cms") === false &&
+                        component === "ContentEmbed"
+                      ) {
+                        return;
+                      }
                       return (
                         <ListItem
                           asChild