@asheeui/puck 0.0.0-stage → 2.3.0

package/src/web/blocks/sections.tsx

@@ -0,0 +1,177 @@
+"use client";
+
+/**
+ * The web marketing section blocks.
+ *
+ * Each one is a thin adapter over the framework component of the same name, so the
+ * builder edits the component's own props rather than a parallel model of them. The
+ * label, the fields and the defaults come from `src/shared`; only the drawing is here.
+ */
+
+import {
+  CTA,
+  FeatureGrid,
+  Hero,
+  PricingCard,
+  Testimonials,
+} from "@asheeui/web";
+import type {
+  AsheeBlock,
+  CtaBlockProps,
+  FeatureGridBlockProps,
+  HeroBlockProps,
+  PricingCardBlockProps,
+  TestimonialsBlockProps,
+} from "../../shared";
+import {
+  CTA_SPEC,
+  FEATURE_GRID_SPEC,
+  HERO_SPEC,
+  PRICING_CARD_SPEC,
+  TESTIMONIALS_SPEC,
+  toAction,
+  toColumns,
+} from "../../shared";
+
+/**
+ * The leading statement of a page.
+ */
+export const heroBlock: AsheeBlock<HeroBlockProps> = {
+  ...HERO_SPEC,
+  render: ({
+    eyebrow,
+    title,
+    description,
+    primaryAction,
+    secondaryAction,
+    align,
+    background,
+    contentWidth,
+  }) => (
+    <Hero
+      eyebrow={eyebrow || undefined}
+      title={title ?? ""}
+      description={description || undefined}
+      primaryAction={toAction(primaryAction)}
+      secondaryAction={toAction(secondaryAction)}
+      align={align ?? "start"}
+      background={background ?? "none"}
+      containerSize={contentWidth ?? "lg"}
+    />
+  ),
+};
+
+/**
+ * The closing call to action of a page.
+ */
+export const ctaBlock: AsheeBlock<CtaBlockProps> = {
+  ...CTA_SPEC,
+  render: ({
+    eyebrow,
+    title,
+    description,
+    primaryAction,
+    secondaryAction,
+    align,
+    background,
+    panel,
+  }) => (
+    <CTA
+      eyebrow={eyebrow || undefined}
+      title={title ?? ""}
+      description={description || undefined}
+      primaryAction={toAction(primaryAction)}
+      secondaryAction={toAction(secondaryAction)}
+      align={align ?? "center"}
+      background={background ?? "none"}
+      panel={panel ?? "bordered"}
+    />
+  ),
+};
+
+/**
+ * A band of features laid out in a responsive grid.
+ */
+export const featureGridBlock: AsheeBlock<FeatureGridBlockProps> = {
+  ...FEATURE_GRID_SPEC,
+  render: ({
+    eyebrow,
+    title,
+    description,
+    items,
+    columnsMd,
+    columnsLg,
+    align,
+    background,
+  }) => (
+    <FeatureGrid
+      eyebrow={eyebrow || undefined}
+      title={title || undefined}
+      description={description || undefined}
+      align={align ?? "center"}
+      background={background ?? "none"}
+      columnsMd={toColumns(columnsMd)}
+      columnsLg={toColumns(columnsLg)}
+      items={(items ?? []).map((item, index) => ({
+        id: index,
+        title: item.title ?? "",
+        description: item.description || undefined,
+      }))}
+    />
+  ),
+};
+
+/**
+ * A band of attributed customer quotes.
+ */
+export const testimonialsBlock: AsheeBlock<TestimonialsBlockProps> = {
+  ...TESTIMONIALS_SPEC,
+  render: ({ eyebrow, title, description, items, align }) => (
+    <Testimonials
+      eyebrow={eyebrow || undefined}
+      title={title || undefined}
+      description={description || undefined}
+      align={align ?? "center"}
+      items={(items ?? []).map((item, index) => ({
+        id: index,
+        quote: item.quote ?? "",
+        name: item.name ?? "",
+        role: item.role || undefined,
+      }))}
+    />
+  ),
+};
+
+/**
+ * One plan in a pricing table.
+ */
+export const pricingCardBlock: AsheeBlock<PricingCardBlockProps> = {
+  ...PRICING_CARD_SPEC,
+  render: ({
+    badge,
+    name,
+    price,
+    period,
+    description,
+    features,
+    highlighted,
+    primaryAction,
+  }) => (
+    <div className="p-6">
+      <PricingCard
+        badge={badge || undefined}
+        name={name ?? ""}
+        price={price ?? ""}
+        period={period || undefined}
+        description={description || undefined}
+        highlighted={highlighted ?? false}
+        features={(features ?? []).map((feature, index) => ({
+          id: index,
+          label: feature.label ?? "",
+          included: feature.included !== false,
+        }))}
+        primaryAction={toAction(primaryAction)}
+      />
+    </div>
+  ),
+};

package/src/web/blocks/utility.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+/**
+ * The web utility blocks.
+ *
+ * The empty state is the one utility block a marketing or application page needs from a
+ * builder: a region that has nothing in it yet, which a non-developer can word and
+ * justify without touching code. The fields and the defaults come from `src/shared`.
+ */
+
+import { EmptyState } from "@asheeui/web";
+import type { AsheeBlock, EmptyStateBlockProps } from "../../shared";
+import { EMPTY_STATE_SPEC, toAction } from "../../shared";
+
+/**
+ * A region with nothing in it.
+ */
+export const emptyStateBlock: AsheeBlock<EmptyStateBlockProps> = {
+  ...EMPTY_STATE_SPEC,
+  render: ({ title, description, type, panel, primaryAction }) => (
+    <div className="p-6">
+      <EmptyState
+        title={title ?? ""}
+        description={description || undefined}
+        type={type ?? "info"}
+        panel={panel ?? false}
+        primaryAction={toAction(primaryAction)}
+      />
+    </div>
+  ),
+};

package/src/web/config.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+/**
+ * The AsheeUI configuration for Puck, on the web.
+ *
+ * This file is the registry the visual builder reads: every block, the category it
+ * belongs to, and the page shell a published page renders into. It contains no second
+ * implementation of any component. Each entry is the framework component plus the
+ * serializable configuration a builder can own, and the configuration half comes from
+ * `src/shared`, so the web editor and the native renderer offer one editor for one
+ * block.
+ *
+ * One assertion is made here and nowhere else: the components map and the category map
+ * are asserted to be the shape the editor's own `Config` describes. It is the single
+ * point where this package's platform-free field vocabulary meets the editor's, and a
+ * cast is what keeps the two descriptions from having to be one type in both halves —
+ * the native entry could not load if they were.
+ */
+
+import type { Config } from "@puckeditor/core";
+import type {
+  AsheePuckRootProps,
+  CtaBlockProps,
+  EmptyStateBlockProps,
+  FeatureGridBlockProps,
+  FooterBlockProps,
+  HeadingBlockProps,
+  HeroBlockProps,
+  NavbarBlockProps,
+  PricingCardBlockProps,
+  TestimonialsBlockProps,
+  TextBlockProps,
+} from "../shared";
+import { PUCK_CATEGORIES } from "../shared";
+import { headingBlock, textBlock } from "./blocks/content";
+import {
+  type ColumnsBlockProps,
+  columnsBlock,
+  type SectionBlockProps,
+  sectionBlock,
+} from "./blocks/layout";
+import { footerBlock, navbarBlock } from "./blocks/navigation";
+import {
+  ctaBlock,
+  featureGridBlock,
+  heroBlock,
+  pricingCardBlock,
+  testimonialsBlock,
+} from "./blocks/sections";
+import { emptyStateBlock } from "./blocks/utility";
+import { PuckRoot } from "./root";
+
+/**
+ * Every block the AsheeUI configuration offers, with its props.
+ */
+export type AsheePuckComponents = {
+  /** A band with vertical rhythm and a background. */
+  Section: SectionBlockProps;
+
+  /** A two-column arrangement that stacks on a narrow screen. */
+  Columns: ColumnsBlockProps;
+
+  /** A section heading. */
+  Heading: HeadingBlockProps;
+
+  /** A paragraph of body text. */
+  Text: TextBlockProps;
+
+  /** The navigation bar of a page. */
+  Navbar: NavbarBlockProps;
+
+  /** The footer of a page. */
+  Footer: FooterBlockProps;
+
+  /** The leading statement of a page. */
+  Hero: HeroBlockProps;
+
+  /** The closing call to action of a page. */
+  CTA: CtaBlockProps;
+
+  /** A band of features in a responsive grid. */
+  FeatureGrid: FeatureGridBlockProps;
+
+  /** A band of attributed customer quotes. */
+  Testimonials: TestimonialsBlockProps;
+
+  /** One plan in a pricing table. */
+  PricingCard: PricingCardBlockProps;
+
+  /** A region with nothing in it. */
+  EmptyState: EmptyStateBlockProps;
+};
+
+/**
+ * The categories a block can be filed under.
+ */
+export type AsheePuckCategory =
+  | "Layout"
+  | "Navigation"
+  | "Hero"
+  | "Content"
+  | "Features"
+  | "CTA"
+  | "Pricing"
+  | "Testimonials"
+  | "Utility";
+
+/**
+ * The type of the AsheeUI Puck configuration.
+ */
+export type AsheePuckConfig = Config<{
+  components: AsheePuckComponents;
+  root: AsheePuckRootProps;
+  categories: AsheePuckCategory[];
+}>;
+
+/**
+ * The AsheeUI blocks, filed under the categories the builder shows.
+ */
+export const asheePuckConfig: AsheePuckConfig = {
+  components: {
+    Section: sectionBlock,
+    Columns: columnsBlock,
+    Heading: headingBlock,
+    Text: textBlock,
+    Navbar: navbarBlock,
+    Footer: footerBlock,
+    Hero: heroBlock,
+    CTA: ctaBlock,
+    FeatureGrid: featureGridBlock,
+    Testimonials: testimonialsBlock,
+    PricingCard: pricingCardBlock,
+    EmptyState: emptyStateBlock,
+  } as unknown as AsheePuckConfig["components"],
+  categories: PUCK_CATEGORIES as unknown as AsheePuckConfig["categories"],
+  root: {
+    fields: {},
+    defaultProps: {},
+    render: ({ children }) => <PuckRoot>{children}</PuckRoot>,
+  },
+};

package/src/web/index.ts

@@ -0,0 +1,21 @@
+"use client";
+
+/**
+ * The web half of the Puck integration.
+ *
+ * It is the shared layer plus this platform's drawings: the block specs, the field
+ * builders and the adapters are re-exported unchanged, and the block registrations and
+ * the page renderer are the web's own. Nothing here imports React Native, and nothing
+ * here imports the native half of the package, so a browser bundle reaches only the DOM
+ * renderer.
+ */
+
+export * from "../shared";
+export * from "./blocks/content";
+export * from "./blocks/layout";
+export * from "./blocks/navigation";
+export * from "./blocks/sections";
+export * from "./blocks/utility";
+export * from "./config";
+export * from "./page";
+export * from "./root";

package/src/web/page.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+/**
+ * Rendering a stored page, on the web.
+ *
+ * A published page renders through the editor's own renderer, which needs no editor:
+ * the same block registry the builder reads is what a live site renders, so the two
+ * cannot drift. The native entry offers a component of the same name, so an application
+ * writes one import and one call and gets each platform's own renderer.
+ */
+
+import { type Data, Render } from "@puckeditor/core";
+import type { AsheePuckData } from "../shared";
+import { type AsheePuckConfig, asheePuckConfig } from "./config";
+
+/**
+ * Props of {@link PuckPage}.
+ */
+export interface PuckPageProps {
+  /** The page the builder published. */
+  data: AsheePuckData;
+
+  /** The block registry to render with. Defaults to the AsheeUI configuration. */
+  config?: AsheePuckConfig;
+}
+
+/**
+ * Render a stored page.
+ *
+ * @param props - The stored page, and optionally the registry to render it with.
+ * @returns The rendered page.
+ *
+ * @example
+ * ```tsx
+ * <PuckPage data={page} />
+ * ```
+ */
+export function PuckPage({ data, config = asheePuckConfig }: PuckPageProps) {
+  return <Render config={config} data={data as unknown as Data} />;
+}

package/src/web/root.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+/**
+ * The page shell a published page renders into, on the web.
+ *
+ * A block resolves its theme through the framework provider, so the shell supplies one
+ * when the consumer has not. An existing provider is respected rather than nested, so a
+ * consumer's own configuration — a default theme, a component override — keeps applying
+ * to a built page. That is the whole reason this reads the context instead of always
+ * rendering a provider: a second provider would replace the resolved configuration with
+ * the framework's own defaults.
+ */
+
+import { AsheeConfigContext, AsheeUIProvider } from "@asheeui/web";
+import { useContext } from "react";
+import type { AsheePuckRootProps } from "../shared";
+
+/**
+ * The published page's root.
+ *
+ * @param props - The page the builder composed.
+ * @returns The page, inside the framework's provider when the application has none.
+ */
+export function PuckRoot({ children }: AsheePuckRootProps) {
+  const existingConfig = useContext(AsheeConfigContext);
+
+  const page = (
+    <div className="flex min-h-dvh w-full flex-col bg-background text-foreground">
+      {children}
+    </div>
+  );
+
+  return existingConfig ? page : <AsheeUIProvider>{page}</AsheeUIProvider>;
+}