Merge branch 'main' into figma-tokens

webstudio-is · Dec 17, 2023 · 8b0429f · 8b0429f
2 parents 4e0d923 + 0253473
commit 8b0429f
Show file tree

Hide file tree

Showing 206 changed files with 6,001 additions and 2,112 deletions.
diff --git a/.github/workflows/add-status.yml b/.github/workflows/add-status.yml
@@ -4,13 +4,13 @@ on:
   push:
     branches:
       - main
-  pull_request:
+  pull_request_target:
 
 permissions:
-  statuses: write # to fetch code (actions/checkout)
+  statuses: write # This is required for the GitHub Script createCommitStatus to work
 
 jobs:
-  checks:
+  add-status:
     timeout-minutes: 20
 
     env:

diff --git a/README.md b/README.md
@@ -20,7 +20,7 @@
 
 ## Contributing
 
-- [Contributing Guide](https://github.com/webstudio-is/webstudio-community/blob/main/docs/contributing.md)
+- [Contributing Guide](https://github.com/webstudio-is/webstudio-community/tree/main/docs/contributing)
 - [Github Discussions](https://github.com/webstudio-is/webstudio-community/discussions)
 - [Wishlist](https://github.com/webstudio-is/webstudio-community/discussions/categories/wishlist)
 - [Builder Issues Tracker](https://github.com/webstudio-is/webstudio/issues)

diff --git a/apps/builder/app/builder/builder.tsx b/apps/builder/app/builder/builder.tsx
@@ -47,6 +47,7 @@ import { useMount } from "~/shared/hook-utils/use-mount";
 import { subscribeCommands } from "~/builder/shared/commands";
 import { AiCommandBar } from "./features/ai/ai-command-bar";
 import { SiteSettings } from "./features/seo/site-settings";
+import type { UserPlanFeatures } from "~/shared/db/user-plan-features.server";
 
 registerContainers();
 
@@ -225,6 +226,7 @@ export type BuilderProps = {
   assets: [Asset["id"], Asset][];
   authToken?: string;
   authPermit: AuthPermit;
+  userPlanFeatures: UserPlanFeatures;
 };
 
 export const Builder = ({
@@ -234,6 +236,7 @@ export const Builder = ({
   assets,
   authToken,
   authPermit,
+  userPlanFeatures,
 }: BuilderProps) => {
   useMount(() => {
     // additional data stores
@@ -301,7 +304,11 @@ export const Builder = ({
     <TooltipProvider>
       <ChromeWrapper isPreviewMode={isPreviewMode}>
         <SiteSettings />
-        <Topbar gridArea="header" project={project} />
+        <Topbar
+          gridArea="header"
+          project={project}
+          hasProPlan={userPlanFeatures.hasProPlan}
+        />
         <Main>
           <Workspace
             onTransitionEnd={onTransitionEnd}

diff --git a/apps/builder/app/builder/features/blocking-alerts/alert.tsx b/apps/builder/app/builder/features/blocking-alerts/alert.tsx
@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 import { css, Flex, Text, theme } from "@webstudio-is/design-system";
 import { AlertIcon } from "@webstudio-is/icons";
 
@@ -16,7 +17,7 @@ const contentStyle = css({
   color: theme.colors.foregroundDestructive,
 });
 
-export const Alert = ({ message }: { message: string }) => {
+export const Alert = ({ message }: { message: string | ReactNode }) => {
   return (
     <Flex align="center" justify="center" className={containerStyle()}>
       <Flex
@@ -26,7 +27,7 @@ export const Alert = ({ message }: { message: string }) => {
         className={contentStyle()}
       >
         <AlertIcon size={22} />
-        <Text color="contrast" variant="labelsSentenceCase" align="center">
+        <Text color="contrast" align="center">
           {message}
         </Text>
       </Flex>

diff --git a/apps/builder/app/builder/features/blocking-alerts/blocking-alerts.tsx b/apps/builder/app/builder/features/blocking-alerts/blocking-alerts.tsx
@@ -1,7 +1,8 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, type ReactNode } from "react";
 import { Alert } from "./alert";
 import { useWindowResizeDebounced } from "~/shared/dom-hooks";
 import { isFeatureEnabled } from "@webstudio-is/feature-flags";
+import { styled, theme } from "@webstudio-is/design-system";
 
 const useTooSmallMessage = () => {
   const [message, setMessage] = useState<string>();
@@ -20,14 +21,54 @@ const useTooSmallMessage = () => {
   return message;
 };
 
+// @todo: move to design system
+// https://discord.com/channels/955905230107738152/1149380442315825212/1149408306671128666
+// https://discord.com/channels/955905230107738152/1048308525673238558/1184833931569266738
+const Link = styled("a", {
+  color: theme.colors.foregroundLink,
+  "&:visited": {
+    color: theme.colors.foregroundLinkVisited,
+  },
+});
+
 const useUnsupportedBrowser = () => {
-  const [message, setMessage] = useState<string>();
+  const [message, setMessage] = useState<ReactNode>();
   useEffect(() => {
     if ("chrome" in window || isFeatureEnabled("unsupportedBrowsers")) {
       return;
     }
+
     setMessage(
-      "Webstudio currently supports Google Chrome and Microsoft Edge. We plan to support more browsers in the near future."
+      <>
+        The Webstudio Builder UI currently supports any{" "}
+        <Link
+          href="https://en.wikipedia.org/wiki/Chromium_(web_browser)"
+          target="_blank"
+        >
+          Chromium-based
+        </Link>{" "}
+        browsers such as{" "}
+        <Link href="https://www.google.com/chrome" target="_blank">
+          Google Chrome
+        </Link>
+        ,{" "}
+        <Link href="https://www.microsoft.com/en-us/edge" target="_blank">
+          Microsoft Edge
+        </Link>
+        ,{" "}
+        <Link href="https://brave.com/" target="_blank">
+          Brave
+        </Link>
+        ,{" "}
+        <Link href="https://arc.net/" target="_blank">
+          Arc
+        </Link>{" "}
+        and many more. We plan to support Firefox and Safari in the near future.
+        <br />
+        <br />
+        The website you&apos;re building should function correctly across all
+        browsers!
+      </>
     );
   }, []);
   return message;

diff --git a/apps/builder/app/builder/features/settings-panel/code-editor.tsx b/apps/builder/app/builder/features/settings-panel/code-editor.tsx
@@ -326,18 +326,21 @@ const paragraphStyle = css({
  * Could be used to edit css as well in the future.
  */
 export const CodeEditor = ({
+  readOnly = false,
   variables,
   defaultValue,
   onChange,
   onBlur,
 }: {
+  readOnly?: boolean;
   variables: Map<string, string>;
   defaultValue: string;
   onChange: (newCode: string) => void;
   onBlur?: () => void;
 }) => {
   const initialConfig = {
     namespace: "CodeEditor",
+    editable: readOnly === false,
     nodes: [MentionNode],
     theme: {
       root: rootStyle.toString(),

diff --git a/apps/builder/app/builder/features/settings-panel/controls/boolean.tsx b/apps/builder/app/builder/features/settings-panel/controls/boolean.tsx
@@ -12,6 +12,7 @@ export const BooleanControl = ({
   prop,
   propName,
   deletable,
+  readOnly,
   onChange,
   onDelete,
 }: ControlProps<"boolean", "boolean">) => {
@@ -30,7 +31,7 @@ export const BooleanControl = ({
       gap="2"
     >
       <Box css={{ position: "relative" }}>
-        <Label htmlFor={id} description={meta.description}>
+        <Label htmlFor={id} description={meta.description} readOnly={readOnly}>
           {getLabel(meta, propName)}
         </Label>
         <VariablesButton
@@ -41,6 +42,7 @@ export const BooleanControl = ({
       </Box>
       <Switch
         id={id}
+        disabled={readOnly}
         checked={prop?.value ?? false}
         onCheckedChange={(value) => onChange({ type: "boolean", value })}
       />

diff --git a/apps/builder/app/builder/features/settings-panel/controls/check.tsx b/apps/builder/app/builder/features/settings-panel/controls/check.tsx
@@ -28,6 +28,7 @@ export const CheckControl = ({
   prop,
   propName,
   deletable,
+  readOnly,
   onChange,
   onDelete,
 }: ControlProps<"check" | "inline-check" | "multi-select", "string[]">) => {
@@ -45,7 +46,11 @@ export const CheckControl = ({
     <VerticalLayout
       label={
         <Box css={{ position: "relative" }}>
-          <Label htmlFor={`${id}:${options[0]}`} description={meta.description}>
+          <Label
+            htmlFor={`${id}:${options[0]}`}
+            description={meta.description}
+            readOnly={readOnly}
+          >
             {getLabel(meta, propName)}
           </Label>
           <VariablesButton
@@ -62,6 +67,7 @@ export const CheckControl = ({
         {options.map((option) => (
           <CheckboxAndLabel key={option}>
             <Checkbox
+              disabled={readOnly}
               checked={value.includes(option)}
               onCheckedChange={(checked) => {
                 onChange({

diff --git a/apps/builder/app/builder/features/settings-panel/controls/code.tsx b/apps/builder/app/builder/features/settings-panel/controls/code.tsx
@@ -7,6 +7,7 @@ export const CodeControl = ({
   prop,
   propName,
   deletable,
+  readOnly,
   onChange,
   onDelete,
 }: ControlProps<"code", "string">) => {
@@ -19,6 +20,7 @@ export const CodeControl = ({
       }}
       prop={prop}
       propName={propName}
+      readOnly={readOnly}
       deletable={deletable}
       onChange={(value) => {
         if (value.type === "string") {

diff --git a/apps/builder/app/builder/features/settings-panel/controls/color.tsx b/apps/builder/app/builder/features/settings-panel/controls/color.tsx
@@ -17,6 +17,7 @@ export const ColorControl = ({
   prop,
   propName,
   deletable,
+  readOnly,
   onChange,
   onDelete,
 }: ControlProps<"color", "string">) => {
@@ -30,7 +31,11 @@ export const ColorControl = ({
     <ResponsiveLayout
       label={
         <Box css={{ position: "relative" }}>
-          <Label htmlFor={id} description={meta.description}>
+          <Label
+            htmlFor={id}
+            description={meta.description}
+            readOnly={readOnly}
+          >
             {getLabel(meta, propName)}
           </Label>
           <VariablesButton
@@ -45,6 +50,7 @@ export const ColorControl = ({
     >
       <InputField
         id={id}
+        disabled={readOnly}
         value={localValue.value}
         onChange={(event) => localValue.set(event.target.value)}
         onBlur={localValue.save}

diff --git a/apps/builder/app/builder/features/settings-panel/controls/combined.tsx b/apps/builder/app/builder/features/settings-panel/controls/combined.tsx
@@ -30,6 +30,10 @@ export const renderControl = ({
     return;
   }
 
+  if (meta.control === "json" && (prop === undefined || prop.type === "json")) {
+    return <JsonControl meta={meta} prop={prop} {...rest} />;
+  }
+
   if (
     meta.control === "text" &&
     (prop === undefined || prop.type === "string")

diff --git a/apps/builder/app/builder/features/settings-panel/controls/json.tsx b/apps/builder/app/builder/features/settings-panel/controls/json.tsx
@@ -16,6 +16,7 @@ export const JsonControl = ({
   prop,
   propName,
   deletable,
+  readOnly,
   onChange,
   onDelete,
 }: ControlProps<"json", "json">) => {
@@ -35,7 +36,9 @@ export const JsonControl = ({
     <VerticalLayout
       label={
         <Box css={{ position: "relative" }}>
-          <Label description={meta.description}>{label}</Label>
+          <Label description={meta.description} readOnly={readOnly}>
+            {label}
+          </Label>
           <VariablesButton
             propId={prop?.id}
             propName={propName}
@@ -49,9 +52,12 @@ export const JsonControl = ({
       <Box css={{ py: theme.spacing[2] }}>
         <CodeEditor
           // reset editor every time value is changed
-          key={localValue.value}
+          key={valueString}
+          readOnly={readOnly}
           variables={emptyVariables}
-          defaultValue={localValue.value}
+          // actual local value is not important because code editor
+          // is uncontrolled and has own local value
+          defaultValue={valueString}
           onChange={localValue.set}
           onBlur={localValue.save}
         />

diff --git a/apps/builder/app/builder/features/settings-panel/controls/number.tsx b/apps/builder/app/builder/features/settings-panel/controls/number.tsx
@@ -15,6 +15,7 @@ export const NumberControl = ({
   propName,
   onChange,
   deletable,
+  readOnly,
   onDelete,
 }: ControlProps<"number", "number">) => {
   const id = useId();
@@ -33,7 +34,11 @@ export const NumberControl = ({
     <ResponsiveLayout
       label={
         <Box css={{ position: "relative" }}>
-          <Label htmlFor={id} description={meta.description}>
+          <Label
+            htmlFor={id}
+            description={meta.description}
+            readOnly={readOnly}
+          >
             {getLabel(meta, propName)}
           </Label>
           <VariablesButton
@@ -48,6 +53,7 @@ export const NumberControl = ({
     >
       <InputField
         id={id}
+        disabled={readOnly}
         type="number"
         value={localValue.value}
         color={isInvalid ? "error" : undefined}

diff --git a/apps/builder/app/builder/features/settings-panel/controls/radio.tsx b/apps/builder/app/builder/features/settings-panel/controls/radio.tsx
@@ -15,6 +15,7 @@ export const RadioControl = ({
   prop,
   propName,
   deletable,
+  readOnly,
   onChange,
   onDelete,
 }: ControlProps<"radio" | "inline-radio", "string">) => {
@@ -30,7 +31,11 @@ export const RadioControl = ({
     <VerticalLayout
       label={
         <Box css={{ position: "relative" }}>
-          <Label htmlFor={id} description={meta.description}>
+          <Label
+            htmlFor={id}
+            description={meta.description}
+            readOnly={readOnly}
+          >
             {getLabel(meta, propName)}
           </Label>
           <VariablesButton
@@ -45,6 +50,7 @@ export const RadioControl = ({
     >
       <Box css={{ paddingTop: theme.spacing[2] }}>
         <RadioGroup
+          disabled={readOnly}
           name="value"
           value={prop?.value}
           onValueChange={(value) => onChange({ type: "string", value })}