diff --git a/apps/demo/app/Framework.ts b/apps/demo/app/Framework.ts deleted file mode 100644 index 81ed5206e..000000000 --- a/apps/demo/app/Framework.ts +++ /dev/null @@ -1,2 +0,0 @@ -export const validFrameworks = ["antd", "material-ui", "custom"]; -export type Framework = "antd" | "material-ui" | "custom"; diff --git a/apps/demo/app/[...puckPath]/client.tsx b/apps/demo/app/[...puckPath]/client.tsx index 43d674baa..b454f5875 100644 --- a/apps/demo/app/[...puckPath]/client.tsx +++ b/apps/demo/app/[...puckPath]/client.tsx @@ -3,32 +3,20 @@ import { Config, Data } from "@measured/puck"; import { Puck } from "@measured/puck/components/Puck"; import { Render } from "@measured/puck/components/Render"; -import { Framework } from "../Framework"; import { useEffect, useState } from "react"; import { Button } from "@measured/puck/components/Button"; import headingAnalyzer from "@measured/puck-plugin-heading-analyzer/src/HeadingAnalyzer"; +import config, { initialData } from "../../config"; const isBrowser = typeof window !== "undefined"; -export function Client({ - path, - isEdit, - framework, -}: { - path: string; - isEdit: boolean; - framework: Framework; -}) { - const config: Config = require(`../configs/${framework}/`).default; - const initialData: Data = - require(`../configs/${framework}/`).initialData || {}; - +export function Client({ path, isEdit }: { path: string; isEdit: boolean }) { // unique b64 key that updates each time we add / remove components const componentKey = Buffer.from( Object.keys(config.components).join("-") ).toString("base64"); - const key = `puck-demo:${framework}:${componentKey}:${path}`; + const key = `puck-demo:${componentKey}:${path}`; const [data] = useState(() => { if (isBrowser) { @@ -52,7 +40,7 @@ export function Client({ return (
{ localStorage.setItem(key, JSON.stringify(data)); @@ -72,7 +60,7 @@ export function Client({ } if (data) { - return ; + return ; } return ( diff --git a/apps/demo/app/[...puckPath]/page.tsx b/apps/demo/app/[...puckPath]/page.tsx index f78b2eccf..d98586b6d 100644 --- a/apps/demo/app/[...puckPath]/page.tsx +++ b/apps/demo/app/[...puckPath]/page.tsx @@ -31,5 +31,5 @@ export default async function Page({ }) { const { isEdit, path } = resolvePuckPath(params.puckPath); - return ; + return ; } diff --git a/apps/demo/app/configs/antd/blocks/CardDeck.tsx b/apps/demo/app/configs/antd/blocks/CardDeck.tsx deleted file mode 100644 index 11bb800fa..000000000 --- a/apps/demo/app/configs/antd/blocks/CardDeck.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import React from "react"; -import { Card, Col, Row } from "antd"; -import { ComponentConfig } from "@measured/puck"; - -export type CardDeckProps = { - cards: { title: string; content: string }[]; -}; - -export const CardDeck: ComponentConfig = { - fields: { - cards: { - type: "array", - arrayFields: { title: { type: "text" }, content: { type: "textarea" } }, - }, - }, - defaultProps: { - cards: [ - { title: "Title", content: "Content" }, - { title: "Title", content: "Content" }, - { title: "Title", content: "Content" }, - ], - }, - render: ({ cards }) => { - return ( -
-
- - {cards.map((item, i) => ( - - - {item.content} - - - ))} - -
-
- ); - }, -}; diff --git a/apps/demo/app/configs/antd/blocks/Carousel.tsx b/apps/demo/app/configs/antd/blocks/Carousel.tsx deleted file mode 100644 index 259f365f6..000000000 --- a/apps/demo/app/configs/antd/blocks/Carousel.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import React from "react"; -import { Carousel as AntdCarousel } from "antd/dist/antd"; -import { Image } from "antd"; -import { ComponentConfig } from "@measured/puck"; - -export type CarouselProps = { - slides: { imageUrl: string; alt: string }[]; -}; - -const contentStyle: React.CSSProperties = { - display: "flex", - alignItems: "center", - justifyContent: "center", - position: "relative", - margin: 0, - height: "400px", - color: "#fff", - background: "#364d79", -}; - -export const Carousel: ComponentConfig = { - fields: { - slides: { - type: "array", - arrayFields: { imageUrl: { type: "text" }, alt: { type: "text" } }, - }, - }, - render: ({ slides = [] }) => { - return ( - - {slides.map((slide, i) => { - return ( -
-
- {slide.alt} -
-
- ); - })} - - {slides.length === 0 && ( -
-
Carousel
-
- )} - - ); - }, -}; diff --git a/apps/demo/app/configs/antd/blocks/Hero.tsx b/apps/demo/app/configs/antd/blocks/Hero.tsx deleted file mode 100644 index 5f815c509..000000000 --- a/apps/demo/app/configs/antd/blocks/Hero.tsx +++ /dev/null @@ -1,94 +0,0 @@ -import React from "react"; -import { Button, Image, Space, Typography } from "antd"; -import { ComponentConfig } from "@measured/puck"; - -export type HeroProps = { - title: string; - description: string; - ctas: { - label: string; - href: string; - type?: "primary" | "text"; - }[]; -}; - -const contentStyle: React.CSSProperties = { - display: "flex", - alignItems: "center", - justifyContent: "center", - position: "relative", - margin: 0, - height: "400px", - color: "#fff", - background: "#364d79", -}; - -export const Hero: ComponentConfig = { - fields: { - title: { - type: "text", - }, - description: { - type: "textarea", - }, - ctas: { - type: "array", - arrayFields: { - label: { - type: "text", - }, - href: { - type: "text", - }, - type: { - type: "radio", - options: [ - { - value: "primary", - label: "Primary", - }, - { - value: "text", - label: "Text", - }, - ], - }, - }, - }, - }, - defaultProps: { - title: "Title", - description: "Description", - ctas: [{ label: "Click me", href: "#", type: "primary" }], - }, - render: ({ title, description, ctas }) => { - return ( -
-
- - {title} - - - {description} - - - - {ctas.map((cta, i) => ( - - ))} - -
-
- ); - }, -}; diff --git a/apps/demo/app/configs/antd/blocks/Video.tsx b/apps/demo/app/configs/antd/blocks/Video.tsx deleted file mode 100644 index 439b8de55..000000000 --- a/apps/demo/app/configs/antd/blocks/Video.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React from "react"; -import { ComponentConfig } from "@measured/puck"; - -export type VideoProps = { - autoplay: "on" | "off"; - loop: "on" | "off"; - src: string; -}; - -export const Video: ComponentConfig = { - fields: { - src: { - type: "text", - }, - autoplay: { - type: "radio", - options: [ - { label: "On", value: "on" }, - { label: "Off", value: "off" }, - ], - }, - loop: { - type: "radio", - options: [ - { label: "On", value: "on" }, - { label: "Off", value: "off" }, - ], - }, - }, - render: ({ autoplay = "on", loop = "on", src }) => { - return ( -
-
-
-
- ); - }, -}; diff --git a/apps/demo/app/configs/antd/index.tsx b/apps/demo/app/configs/antd/index.tsx deleted file mode 100644 index 7e51160c4..000000000 --- a/apps/demo/app/configs/antd/index.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import { Config, Data } from "@measured/puck"; -import { CardDeck, CardDeckProps } from "./blocks/CardDeck"; -import { Carousel, CarouselProps } from "./blocks/Carousel"; -import { Hero, HeroProps } from "./blocks/Hero"; -import { Video, VideoProps } from "./blocks/Video"; -import { Root, RootProps } from "./root"; - -type Props = { - CardDeck: CardDeckProps; - Carousel: CarouselProps; - Hero: HeroProps; - Video: VideoProps; -}; - -// We avoid the name config as next gets confused -export const conf: Config = { - root: { - fields: { - title: { - type: "text", - }, - layout: { - type: "select", - options: [ - { - value: "", - label: "Default", - }, - { - value: "sidebar", - label: "Sidebar", - }, - ], - }, - }, - render: Root, - }, - components: { - CardDeck, - Carousel, - Hero, - Video, - }, -}; - -export const initialData: Record = { - "/": { - content: [ - { - type: "Hero", - props: { - id: "Hero-1686932817569", - ctas: [ - { label: "Click me", href: "#", type: "primary" }, - { label: "Click me", href: "#" }, - ], - title: "Hello, world", - description: "This is an example page built with puck and antd.", - }, - }, - ], - root: { title: "Home", layout: "" }, - }, - "/about": { - content: [ - { - type: "Hero", - props: { - id: "Hero-1686937288591", - title: "About page", - description: "Here you can find information about us", - }, - }, - ], - root: { title: "About us", layout: "" }, - }, -}; - -export default conf; diff --git a/apps/demo/app/configs/antd/root.tsx b/apps/demo/app/configs/antd/root.tsx deleted file mode 100644 index 674fc0110..000000000 --- a/apps/demo/app/configs/antd/root.tsx +++ /dev/null @@ -1,151 +0,0 @@ -import React, { ReactNode } from "react"; -import { - LaptopOutlined, - NotificationOutlined, - UserOutlined, -} from "@ant-design/icons"; -import type { MenuProps } from "antd"; -import { Layout, Menu, Typography, theme } from "antd"; -import Footer from "rc-footer"; - -import "rc-footer/assets/index.css"; - -const { Header, Content, Sider } = Layout; - -const items1: MenuProps["items"] = [ - { key: "/", label: "Home" }, - { key: "/about", label: "About" }, -]; - -const items2: MenuProps["items"] = [ - UserOutlined, - LaptopOutlined, - NotificationOutlined, -].map((icon, index) => { - const key = String(index + 1); - - return { - key: `sub${key}`, - icon: React.createElement(icon), - label: `subnav ${key}`, - - children: new Array(4).fill(null).map((_, j) => { - const subKey = index * 4 + j + 1; - return { - key: subKey, - label: `option${subKey}`, - }; - }), - }; -}); - -export type RootProps = { - children: ReactNode; - layout: string; - title: string; - editMode: boolean; -}; - -export const Root = ({ children, layout, editMode }: RootProps) => { - const { - token: { colorBgContainer }, - } = theme.useToken(); - - const navPath = - window.location.pathname.replace("/antd", "").replace("/edit", "") || "/"; - - return ( - -
- - Ant Design - - { - if (editMode) { - window.location.href = `/antd/${item.key}/edit`; - } else { - window.location.href = `/antd/${item.key}`; - } - }} - /> -
- - {layout === "sidebar" && ( - <> - - - - - - - {children} - - - - )} - {layout !== "sidebar" && children} - -