Merge remote-tracking branch 'upstream/main'

measuredco · Mar 27, 2024 · 8140e34 · 8140e34
2 parents cc526cb + f81931a
commit 8140e34
Show file tree

Hide file tree

Showing 145 changed files with 3,571 additions and 1,236 deletions.
diff --git a/apps/demo/app/[...puckPath]/client.tsx b/apps/demo/app/[...puckPath]/client.tsx
@@ -1,9 +1,6 @@
 "use client";
 
-import { Data } from "@/core/types/Config";
-import { Puck } from "@/core/components/Puck";
-import { Render } from "@/core/components/Render";
-import { Button } from "@/core/components/Button";
+import { Button, Data, Puck, Render } from "@/core";
 import headingAnalyzer from "@/plugin-heading-analyzer/src/HeadingAnalyzer";
 import config, { UserConfig } from "../../config";
 import { useDemoData } from "../../lib/use-demo-data";

diff --git a/apps/demo/app/custom-ui/[...puckPath]/client.tsx b/apps/demo/app/custom-ui/[...puckPath]/client.tsx
@@ -1,9 +1,6 @@
 "use client";
 
-import { Data } from "@/core/types/Config";
-import { Puck } from "@/core/components/Puck";
-import { Render } from "@/core/components/Render";
-import { Button } from "@/core/components/Button";
+import { Button, Data, Puck, Render } from "@/core";
 import { HeadingAnalyzer } from "@/plugin-heading-analyzer/src/HeadingAnalyzer";
 import config, { UserConfig } from "../../../config";
 import { useDemoData } from "../../../lib/use-demo-data";
@@ -120,13 +117,14 @@ const Tabs = ({
                 }
               }}
               style={{
+                fontFamily: "inherit",
                 fontSize: 16,
                 padding: "16px 16px",
                 paddingTop: 19,
-                color: isCurrentTab ? "var(--puck-color-azure-3)" : "black",
+                color: isCurrentTab ? "var(--puck-color-azure-04)" : "black",
                 border: "none",
                 borderBottom: isCurrentTab
-                  ? "3px solid var(--puck-color-azure-3)"
+                  ? "3px solid var(--puck-color-azure-04)"
                   : "3px solid transparent",
                 background: "white",
                 cursor: "pointer",
@@ -290,6 +288,7 @@ export function Client({ path, isEdit }: { path: string; isEdit: boolean }) {
       <Puck<UserConfig>
         config={config}
         data={data}
+        iframe={{ enabled: false }}
         headerPath={path}
         overrides={{
           outline: ({ children }) => (
@@ -303,7 +302,7 @@ export function Client({ path, isEdit }: { path: string; isEdit: boolean }) {
                     display: "flex",
                     pointerEvents: "all",
                     padding: "16px",
-                    background: "var(--puck-color-grey-11)",
+                    background: "var(--puck-color-grey-12)",
                   }}
                 >
                   {Object.keys(config.components).map(

diff --git a/apps/demo/app/layout.tsx b/apps/demo/app/layout.tsx
@@ -1,13 +1,6 @@
 import "@/core/styles.css";
 import "./styles.css";
 
-import { Inter } from "next/font/google";
-
-const inter = Inter({
-  subsets: ["latin"],
-  display: "swap",
-});
-
 export default function RootLayout({
   children,
 }: {
@@ -24,7 +17,9 @@ export default function RootLayout({
           ></script>
         )}
       </head>
-      <body className={inter.className}>{children}</body>
+      <body>
+        <div>{children}</div>
+      </body>
     </html>
   );
 }
diff --git a/apps/demo/app/styles.css b/apps/demo/app/styles.css
@@ -1,54 +1,16 @@
 @import url("https://rsms.me/inter/inter.css");
 
-html,
 body {
   font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI,
     Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji,
     Segoe UI Symbol;
   margin: 0;
-  padding: 0;
 }
 
-.Page {
-  margin-left: auto;
-  margin-right: auto;
-  max-width: 1024px;
-  text-align: center;
-  padding-top: 128px;
-}
-
-h1 {
-  font-size: 72px;
-  margin: 0px;
-}
-
-h2 {
-  font-size: 32px;
-  margin: 0px;
-  font-weight: 400;
-}
-
-.Frameworks {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: 24px;
-  margin-top: 64px;
-}
-
-.Framework {
-  margin: 0px;
-  padding: 12px 16px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  min-height: 64px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-weight: 500;
-  text-decoration: none;
-}
-
-.Framework:hover {
-  background-color: #f1f1f1;
-  cursor: pointer;
+@supports (font-variation-settings: normal) {
+  body {
+    font-family: InterVariable, -apple-system, BlinkMacSystemFont, Segoe UI,
+      Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji,
+      Segoe UI Symbol;
+  }
 }
diff --git a/apps/demo/config/blocks/ButtonGroup/index.tsx b/apps/demo/config/blocks/ButtonGroup/index.tsx
@@ -14,6 +14,7 @@ export type ButtonGroupProps = {
 };
 
 export const ButtonGroup: ComponentConfig<ButtonGroupProps> = {
+  label: "Button Group",
   fields: {
     buttons: {
       type: "array",

diff --git a/apps/demo/config/blocks/Card/styles.module.css b/apps/demo/config/blocks/Card/styles.module.css
@@ -23,8 +23,8 @@
 
 .Card-icon {
   border-radius: 256px;
-  background: var(--puck-color-azure-8);
-  color: var(--puck-color-azure-5);
+  background: var(--puck-color-azure-09);
+  color: var(--puck-color-azure-06);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -44,7 +44,7 @@
 .Card-description {
   font-size: 16px;
   line-height: 1.5;
-  color: var(--puck-color-grey-4);
+  color: var(--puck-color-grey-05);
   text-align: center;
   font-weight: 300;
 }

diff --git a/apps/demo/config/blocks/FeatureList/styles.module.css b/apps/demo/config/blocks/FeatureList/styles.module.css
@@ -42,8 +42,8 @@
 
 .FeatureList-icon {
   border-radius: 256px;
-  background: var(--puck-color-azure-8);
-  color: var(--puck-color-azure-5);
+  background: var(--puck-color-azure-09);
+  color: var(--puck-color-azure-06);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -63,7 +63,7 @@
 .FeatureList-description {
   font-size: 16px;
   line-height: 1.5;
-  color: var(--puck-color-grey-4);
+  color: var(--puck-color-grey-05);
   text-align: center;
   font-weight: 300;
 }

diff --git a/apps/demo/config/blocks/Heading/styles.module.css b/apps/demo/config/blocks/Heading/styles.module.css
@@ -1,3 +1,3 @@
 .Heading {
-  padding: 0px;
+  margin: 0;
 }
diff --git a/apps/demo/config/blocks/Hero/index.tsx b/apps/demo/config/blocks/Hero/index.tsx
@@ -33,7 +33,23 @@ export const Hero: ComponentConfig<HeroProps> = {
       type: "external",
       placeholder: "Select a quote",
       showSearch: true,
-      fetchList: async ({ query }) => {
+      filterFields: {
+        author: {
+          type: "select",
+          options: [
+            { value: "", label: "Select an author" },
+            { value: "Mark Twain", label: "Mark Twain" },
+            { value: "Henry Ford", label: "Henry Ford" },
+            { value: "Kurt Vonnegut", label: "Kurt Vonnegut" },
+            { value: "Andrew Carnegie", label: "Andrew Carnegie" },
+            { value: "C. S. Lewis", label: "C. S. Lewis" },
+            { value: "Confucius", label: "Confucius" },
+            { value: "Eleanor Roosevelt", label: "Eleanor Roosevelt" },
+            { value: "Samuel Ullman", label: "Samuel Ullman" },
+          ],
+        },
+      },
+      fetchList: async ({ query, filters }) => {
         // Simulate delay
         await new Promise((res) => setTimeout(res, 500));
 
@@ -44,19 +60,24 @@ export const Hero: ComponentConfig<HeroProps> = {
             description: quote.content,
           }))
           .filter((item) => {
-            if (!query) return item;
+            if (filters?.author && item.title !== filters?.author) {
+              return false;
+            }
+
+            if (!query) return true;
 
             const queryLowercase = query.toLowerCase();
 
             if (item.title.toLowerCase().indexOf(queryLowercase) > -1) {
-              return item;
+              return true;
             }
 
             if (item.description.toLowerCase().indexOf(queryLowercase) > -1) {
-              return item;
+              return true;
             }
           });
       },
+      mapRow: (item) => ({ title: item.title, description: item.description }),
       mapProp: (result) => {
         return { index: result.index, label: result.description };
       },
@@ -66,6 +87,8 @@ export const Hero: ComponentConfig<HeroProps> = {
     description: { type: "textarea" },
     buttons: {
       type: "array",
+      min: 1,
+      max: 4,
       getItemSummary: (item) => item.label || "Button",
       arrayFields: {
         label: { type: "text" },
@@ -78,6 +101,10 @@ export const Hero: ComponentConfig<HeroProps> = {
           ],
         },
       },
+      defaultItemProps: {
+        label: "Button",
+        href: "#",
+      },
     },
     align: {
       type: "radio",

diff --git a/apps/demo/config/blocks/Hero/styles.module.css b/apps/demo/config/blocks/Hero/styles.module.css
@@ -26,6 +26,7 @@
 .Hero h1 {
   line-height: 1.1;
   font-size: 48px;
+  margin: 0;
 }
 
 @media (min-width: 768px) {
@@ -35,7 +36,7 @@
 }
 
 .Hero-subtitle {
-  color: var(--puck-color-grey-4);
+  color: var(--puck-color-grey-05);
   font-size: var(--puck-font-size-m);
   line-height: 1.5;
   margin: 0;
@@ -44,7 +45,7 @@
 }
 
 .Hero--hasImageBackground .Hero-subtitle {
-  color: var(--puck-color-grey-2);
+  color: var(--puck-color-grey-03);
 }
 
 .Hero-image {

diff --git a/apps/demo/config/blocks/Logos/styles.module.css b/apps/demo/config/blocks/Logos/styles.module.css
@@ -1,5 +1,5 @@
 .Logos {
-  background-color: var(--puck-color-grey-1);
+  background-color: var(--puck-color-grey-02);
 }
 
 .Logos-items {

diff --git a/apps/demo/config/blocks/Stats/index.tsx b/apps/demo/config/blocks/Stats/index.tsx
@@ -48,8 +48,8 @@ export const Stats: ComponentConfig<StatsProps> = {
   defaultProps: {
     items: [
       {
-        title: "Feature",
-        description: "Description",
+        title: "Stat",
+        description: "1,000",
       },
     ],
   },

diff --git a/apps/demo/config/blocks/Stats/styles.module.css b/apps/demo/config/blocks/Stats/styles.module.css
@@ -1,8 +1,8 @@
 .Stats-items {
   background-image: linear-gradient(
     120deg,
-    var(--puck-color-azure-2) 0%,
-    var(--puck-color-azure-4) 100%
+    var(--puck-color-azure-03) 0%,
+    var(--puck-color-azure-05) 100%
   );
   border-radius: 24px;
   display: grid;
@@ -35,13 +35,14 @@
   align-items: center;
   color: white;
   gap: 8px;
+  overflow: hidden;
   width: 100%;
 }
 
 .Stats-icon {
   border-radius: 256px;
-  background: var(--puck-color-azure-8);
-  color: var(--puck-color-azure-5);
+  background: var(--puck-color-azure-09);
+  color: var(--puck-color-azure-06);
   display: flex;
   justify-content: center;
   align-items: center;

diff --git a/apps/demo/config/blocks/Text/index.tsx b/apps/demo/config/blocks/Text/index.tsx
@@ -52,7 +52,8 @@ export const Text: ComponentConfig<TextProps> = {
       <Section padding={padding} maxWidth={maxWidth}>
         <span
           style={{
-            color: color === "default" ? "inherit" : "var(--puck-color-grey-4)",
+            color:
+              color === "default" ? "inherit" : "var(--puck-color-grey-05)",
             display: "flex",
             textAlign: align,
             width: "100%",

diff --git a/apps/demo/config/blocks/VerticalSpace/index.tsx b/apps/demo/config/blocks/VerticalSpace/index.tsx
@@ -8,6 +8,7 @@ export type VerticalSpaceProps = {
 };
 
 export const VerticalSpace: ComponentConfig<VerticalSpaceProps> = {
+  label: "Vertical Space",
   fields: {
     size: {
       type: "select",