@styleflow.app/flowpress-astro-core 0.2.0-beta.2 → 0.2.0-beta.21

package/dist/astro/blocks/ColumnBlock.astro

@@ -0,0 +1,83 @@
+---
+import S from "@styleflow.app/astro/S.astro";
+import type { FlowpressBlock } from "../../types.js";
+import type { StyleflowContract } from "../../styleflow.js";
+import {
+  blockHtmlAttributes,
+  responsiveValues,
+  semanticProps
+} from "./helpers.js";
+
+interface Props {
+  block: FlowpressBlock;
+  contract?: StyleflowContract;
+}
+
+const { block, contract } = Astro.props;
+const values = responsiveValues(block.attributes, "span", 1);
+const partial = ["start", "end"].includes(String(block.attributes.partialContainer))
+  ? String(block.attributes.partialContainer)
+  : "none";
+const partialBreakpoint = ["base", "sm", "md", "lg", "xl", "2xl"].includes(
+  String(block.attributes.partialContainerBreakpoint)
+) ? String(block.attributes.partialContainerBreakpoint) : "lg";
+const semantic = semanticProps(block.attributes, contract);
+const htmlAttributes = blockHtmlAttributes(block.attributes, "flowpress-column");
+const style = [
+  `--flowpress-span-base:${values.base}`,
+  `--flowpress-span-sm:${values.sm}`,
+  `--flowpress-span-md:${values.md}`,
+  `--flowpress-span-lg:${values.lg}`,
+  `--flowpress-span-xl:${values.xl}`,
+  `--flowpress-span-2xl:${values["2xl"]}`
+].join(";");
+---
+
+<S
+  as="div"
+  {...semantic}
+  {...htmlAttributes}
+  data-partial={partial}
+  data-partial-breakpoint={partialBreakpoint}
+  style={style}
+>
+  <slot />
+</S>
+
+<style>
+  .flowpress-column {
+    grid-column: span var(--flowpress-span-base) / span var(--flowpress-span-base);
+    min-width: 0;
+  }
+  .flowpress-column[data-partial="start"][data-partial-breakpoint="base"] {
+    padding-inline-start: max(var(--sf-padding-inline, 0px), calc((100vw - var(--sf-container-max-width, 100vw)) / 2));
+  }
+  .flowpress-column[data-partial="end"][data-partial-breakpoint="base"] {
+    padding-inline-end: max(var(--sf-padding-inline, 0px), calc((100vw - var(--sf-container-max-width, 100vw)) / 2));
+  }
+  @media (min-width: 40rem) {
+    .flowpress-column { grid-column: span var(--flowpress-span-sm) / span var(--flowpress-span-sm); }
+    .flowpress-column[data-partial="start"][data-partial-breakpoint="sm"] { padding-inline-start: max(var(--sf-padding-inline, 0px), calc((100vw - var(--sf-container-max-width, 100vw)) / 2)); }
+    .flowpress-column[data-partial="end"][data-partial-breakpoint="sm"] { padding-inline-end: max(var(--sf-padding-inline, 0px), calc((100vw - var(--sf-container-max-width, 100vw)) / 2)); }
+  }
+  @media (min-width: 48rem) {
+    .flowpress-column { grid-column: span var(--flowpress-span-md) / span var(--flowpress-span-md); }
+    .flowpress-column[data-partial="start"][data-partial-breakpoint="md"] { padding-inline-start: max(var(--sf-padding-inline, 0px), calc((100vw - var(--sf-container-max-width, 100vw)) / 2)); }
+    .flowpress-column[data-partial="end"][data-partial-breakpoint="md"] { padding-inline-end: max(var(--sf-padding-inline, 0px), calc((100vw - var(--sf-container-max-width, 100vw)) / 2)); }
+  }
+  @media (min-width: 64rem) {
+    .flowpress-column { grid-column: span var(--flowpress-span-lg) / span var(--flowpress-span-lg); }
+    .flowpress-column[data-partial="start"][data-partial-breakpoint="lg"] { padding-inline-start: max(var(--sf-padding-inline, 0px), calc((100vw - var(--sf-container-max-width, 100vw)) / 2)); }
+    .flowpress-column[data-partial="end"][data-partial-breakpoint="lg"] { padding-inline-end: max(var(--sf-padding-inline, 0px), calc((100vw - var(--sf-container-max-width, 100vw)) / 2)); }
+  }
+  @media (min-width: 80rem) {
+    .flowpress-column { grid-column: span var(--flowpress-span-xl) / span var(--flowpress-span-xl); }
+    .flowpress-column[data-partial="start"][data-partial-breakpoint="xl"] { padding-inline-start: max(var(--sf-padding-inline, 0px), calc((100vw - var(--sf-container-max-width, 100vw)) / 2)); }
+    .flowpress-column[data-partial="end"][data-partial-breakpoint="xl"] { padding-inline-end: max(var(--sf-padding-inline, 0px), calc((100vw - var(--sf-container-max-width, 100vw)) / 2)); }
+  }
+  @media (min-width: 96rem) {
+    .flowpress-column { grid-column: span var(--flowpress-span-2xl) / span var(--flowpress-span-2xl); }
+    .flowpress-column[data-partial="start"][data-partial-breakpoint="2xl"] { padding-inline-start: max(var(--sf-padding-inline, 0px), calc((100vw - var(--sf-container-max-width, 100vw)) / 2)); }
+    .flowpress-column[data-partial="end"][data-partial-breakpoint="2xl"] { padding-inline-end: max(var(--sf-padding-inline, 0px), calc((100vw - var(--sf-container-max-width, 100vw)) / 2)); }
+  }
+</style>

package/dist/astro/blocks/FormBlock.astro

@@ -0,0 +1,233 @@
+---
+import S from "@styleflow.app/astro/S.astro";
+import type { FlowpressBlock } from "../../types.js";
+import type { StyleflowContract } from "../../styleflow.js";
+import { blockHtmlAttributes, semanticProps } from "./helpers.js";
+
+interface FormField {
+  name: string;
+  type: string;
+  required?: boolean;
+  values?: string[];
+  labels?: string[];
+  options?: string[];
+}
+
+interface FormSchema {
+  id: number;
+  title: string;
+  fields: FormField[];
+  submitUrl: string;
+  turnstileSiteKey: string;
+  available: boolean;
+}
+
+interface Props {
+  block: FlowpressBlock;
+  contract?: StyleflowContract;
+}
+
+const { block, contract } = Astro.props;
+const schema = block.attributes.formSchema as FormSchema | undefined;
+const semantic = semanticProps(block.attributes, contract);
+const htmlAttributes = blockHtmlAttributes(block.attributes);
+const labelFor = (field: FormField): string => field.name
+  .replace(/[-_]+/g, " ")
+  .replace(/\b\w/g, (letter) => letter.toUpperCase());
+const optionLabel = (field: FormField, index: number): string =>
+  field.labels?.[index] || field.values?.[index] || "";
+---
+
+{schema?.available ? (
+  <S as="div" {...semantic} {...htmlAttributes}>
+    <flowpress-cf7-form>
+      <form action={schema.submitUrl} method="post" enctype="multipart/form-data" novalidate>
+        {block.attributes.title || schema.title ? (
+          <S as="h2">{String(block.attributes.title || schema.title)}</S>
+        ) : null}
+        {schema.fields.map((field) => {
+          if (field.type === "submit") {
+            return (
+              <button type="submit">
+                {field.values?.[0] || "Invia"}
+              </button>
+            );
+          }
+          if (field.type === "hidden") {
+            return <input type="hidden" name={field.name} value={field.values?.[0] || ""} />;
+          }
+          if (["checkbox", "radio"].includes(field.type)) {
+            return (
+              <fieldset>
+                <legend>{labelFor(field)}</legend>
+                {(field.values || []).map((value, index) => (
+                  <label>
+                    <input
+                      type={field.type}
+                      name={field.type === "checkbox" ? `${field.name}[]` : field.name}
+                      value={value}
+                      required={field.required}
+                    />
+                    {optionLabel(field, index)}
+                  </label>
+                ))}
+                <span data-field-error={field.name}></span>
+              </fieldset>
+            );
+          }
+          if (field.type === "acceptance") {
+            return (
+              <label>
+                <input type="checkbox" name={field.name} value="1" required={field.required} />
+                {field.values?.[0] || labelFor(field)}
+                <span data-field-error={field.name}></span>
+              </label>
+            );
+          }
+          if (field.type === "select") {
+            return (
+              <label>
+                {labelFor(field)}
+                <select
+                  name={field.options?.includes("multiple") ? `${field.name}[]` : field.name}
+                  required={field.required}
+                  multiple={field.options?.includes("multiple")}
+                >
+                  {(field.values || []).map((value, index) => (
+                    <option value={value}>{optionLabel(field, index)}</option>
+                  ))}
+                </select>
+                <span data-field-error={field.name}></span>
+              </label>
+            );
+          }
+          if (field.type === "textarea") {
+            return (
+              <label>
+                {labelFor(field)}
+                <textarea name={field.name} required={field.required}></textarea>
+                <span data-field-error={field.name}></span>
+              </label>
+            );
+          }
+          return (
+            <label>
+              {labelFor(field)}
+              <input
+                type={field.type === "file" ? "file" : field.type}
+                name={field.name}
+                required={field.required}
+              />
+              <span data-field-error={field.name}></span>
+            </label>
+          );
+        })}
+        <div
+          data-turnstile
+          data-sitekey={schema.turnstileSiteKey}
+          aria-label="Verifica anti-spam"
+        ></div>
+        <p data-form-status role="status" aria-live="polite"></p>
+      </form>
+    </flowpress-cf7-form>
+  </S>
+) : (
+  <S as="p" {...semantic} {...htmlAttributes} role="status">
+    Il modulo non è temporaneamente disponibile.
+  </S>
+)}
+
+<script>
+  declare global {
+    interface Window {
+      turnstile?: {
+        render(target: Element, options: Record<string, unknown>): string;
+        reset(widgetId?: string): void;
+      };
+    }
+  }
+
+  let turnstilePromise: Promise<void> | undefined;
+  const loadTurnstile = (): Promise<void> => {
+    if (window.turnstile) return Promise.resolve();
+    if (turnstilePromise) return turnstilePromise;
+    turnstilePromise = new Promise((resolve, reject) => {
+      const existing = document.querySelector<HTMLScriptElement>(
+        'script[data-flowpress-turnstile]'
+      );
+      if (existing) {
+        existing.addEventListener("load", () => resolve(), { once: true });
+        existing.addEventListener("error", () => reject(new Error("Turnstile unavailable")), { once: true });
+        return;
+      }
+      const script = document.createElement("script");
+      script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
+      script.async = true;
+      script.defer = true;
+      script.dataset.flowpressTurnstile = "true";
+      script.addEventListener("load", () => resolve(), { once: true });
+      script.addEventListener("error", () => reject(new Error("Turnstile unavailable")), { once: true });
+      document.head.append(script);
+    });
+    return turnstilePromise;
+  };
+
+  if (!customElements.get("flowpress-cf7-form")) {
+    customElements.define("flowpress-cf7-form", class extends HTMLElement {
+      private widgetId?: string;
+
+      connectedCallback() {
+        const form = this.querySelector<HTMLFormElement>("form");
+        const target = this.querySelector<HTMLElement>("[data-turnstile]");
+        const status = this.querySelector<HTMLElement>("[data-form-status]");
+        if (!form || !target || !status) return;
+
+        loadTurnstile()
+          .then(() => {
+            if (!window.turnstile || this.widgetId) return;
+            this.widgetId = window.turnstile.render(target, {
+              sitekey: target.dataset.sitekey
+            });
+          })
+          .catch(() => {
+            status.textContent = "La verifica anti-spam non è disponibile.";
+          });
+
+        form.addEventListener("submit", async (event) => {
+          event.preventDefault();
+          status.textContent = "Invio in corso…";
+          form.querySelectorAll<HTMLElement>("[data-field-error]")
+            .forEach((node) => { node.textContent = ""; });
+          const submit = form.querySelector<HTMLButtonElement>('[type="submit"]');
+          if (submit) submit.disabled = true;
+          try {
+            const response = await fetch(form.action, {
+              method: "POST",
+              body: new FormData(form),
+              headers: { Accept: "application/json" }
+            });
+            const result = await response.json() as {
+              message?: string;
+              invalidFields?: Array<{ field?: string; into?: string; message?: string }>;
+            };
+            status.textContent = result.message || (response.ok ? "Messaggio inviato." : "Invio non riuscito.");
+            for (const invalid of result.invalidFields || []) {
+              const name = invalid.field || invalid.into?.replace(/^span\./, "") || "";
+              const node = name
+                ? form.querySelector<HTMLElement>(`[data-field-error="${CSS.escape(name)}"]`)
+                : null;
+              if (node) node.textContent = invalid.message || "";
+            }
+            if (response.ok) form.reset();
+            if (window.turnstile) window.turnstile.reset(this.widgetId);
+          } catch {
+            status.textContent = "Impossibile inviare il modulo. Riprova.";
+            if (window.turnstile) window.turnstile.reset(this.widgetId);
+          } finally {
+            if (submit) submit.disabled = false;
+          }
+        });
+      }
+    });
+  }
+</script>

package/dist/astro/blocks/GridBlock.astro

@@ -0,0 +1,70 @@
+---
+import S from "@styleflow.app/astro/S.astro";
+import type { FlowpressBlock } from "../../types.js";
+import type { StyleflowContract } from "../../styleflow.js";
+import {
+  blockHtmlAttributes,
+  responsiveValues,
+  semanticProps
+} from "./helpers.js";
+
+interface Props {
+  block: FlowpressBlock;
+  contract?: StyleflowContract;
+}
+
+const { block, contract } = Astro.props;
+const values = responsiveValues(
+  block.attributes,
+  "columns",
+  Number(block.attributes.columns) || 12
+);
+const align = ["start", "center", "end", "stretch"].includes(
+  String(block.attributes.align)
+) ? String(block.attributes.align) : "stretch";
+const semantic = semanticProps(block.attributes, contract, {
+  surface: "default",
+  layoutRole: "container",
+  density: "md"
+});
+const htmlAttributes = blockHtmlAttributes(block.attributes, "flowpress-grid");
+const style = [
+  `--flowpress-grid-base:${values.base}`,
+  `--flowpress-grid-sm:${values.sm}`,
+  `--flowpress-grid-md:${values.md}`,
+  `--flowpress-grid-lg:${values.lg}`,
+  `--flowpress-grid-xl:${values.xl}`,
+  `--flowpress-grid-2xl:${values["2xl"]}`
+].join(";");
+---
+
+<S as="div" {...semantic} {...htmlAttributes} data-align={align} style={style}>
+  <slot />
+</S>
+
+<style>
+  .flowpress-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--flowpress-grid-base), minmax(0, 1fr));
+    align-items: var(--flowpress-grid-align, stretch);
+  }
+  .flowpress-grid[data-align="start"] { --flowpress-grid-align: start; }
+  .flowpress-grid[data-align="center"] { --flowpress-grid-align: center; }
+  .flowpress-grid[data-align="end"] { --flowpress-grid-align: end; }
+  .flowpress-grid[data-align="stretch"] { --flowpress-grid-align: stretch; }
+  @media (min-width: 40rem) {
+    .flowpress-grid { grid-template-columns: repeat(var(--flowpress-grid-sm), minmax(0, 1fr)); }
+  }
+  @media (min-width: 48rem) {
+    .flowpress-grid { grid-template-columns: repeat(var(--flowpress-grid-md), minmax(0, 1fr)); }
+  }
+  @media (min-width: 64rem) {
+    .flowpress-grid { grid-template-columns: repeat(var(--flowpress-grid-lg), minmax(0, 1fr)); }
+  }
+  @media (min-width: 80rem) {
+    .flowpress-grid { grid-template-columns: repeat(var(--flowpress-grid-xl), minmax(0, 1fr)); }
+  }
+  @media (min-width: 96rem) {
+    .flowpress-grid { grid-template-columns: repeat(var(--flowpress-grid-2xl), minmax(0, 1fr)); }
+  }
+</style>

package/dist/astro/blocks/HeroBlock.astro

@@ -0,0 +1,119 @@
+---
+import S from "@styleflow.app/astro/S.astro";
+import type { FlowpressBlock } from "../../types.js";
+import type { StyleflowContract } from "../../styleflow.js";
+import {
+  blockHtmlAttributes,
+  heroObjectPosition,
+  objectValue,
+  semanticProps
+} from "./helpers.js";
+
+interface Props {
+  block: FlowpressBlock;
+  contract?: StyleflowContract;
+}
+
+const { block, contract } = Astro.props;
+const attributes = block.attributes;
+const semantic = semanticProps(attributes, contract, {
+  surface: "default",
+  layoutRole: "region",
+  density: "md"
+});
+const htmlAttributes = blockHtmlAttributes(attributes, "flowpress-hero");
+const backgroundType = ["color", "image", "video"].includes(
+  String(attributes.backgroundType)
+) ? String(attributes.backgroundType) : "color";
+const image = objectValue(block, "backgroundImage");
+const video = objectValue(block, "backgroundVideo");
+const imageSrc = String(image.url ?? image.sourceUrl ?? "");
+const videoSrc = String(video.url ?? video.sourceUrl ?? video.mediaItemUrl ?? "");
+const objectPosition = heroObjectPosition(attributes.objectPosition);
+const scrimEnabled = Boolean(attributes.scrimEnabled) && backgroundType !== "color";
+const scrimIntensity = Math.min(10, Math.max(1, Number(attributes.scrimIntensity) || 6));
+---
+
+<S
+  as="section"
+  {...semantic}
+  {...htmlAttributes}
+  style={[
+    `--flowpress-hero-object-position:${objectPosition}`,
+    `--flowpress-scrim-opacity:${scrimIntensity * 10}%`
+  ].join(";")}
+>
+  {backgroundType === "image" && imageSrc ? (
+    <img
+      class="flowpress-hero__media"
+      src={imageSrc}
+      alt=""
+      aria-hidden="true"
+      loading="eager"
+      decoding="async"
+    />
+  ) : null}
+  {backgroundType === "video" && videoSrc ? (
+    <video
+      class="flowpress-hero__media"
+      src={videoSrc}
+      poster={imageSrc || undefined}
+      autoplay
+      muted
+      loop
+      playsinline
+      preload="metadata"
+      aria-hidden="true"
+      tabindex="-1"
+    />
+  ) : null}
+  {scrimEnabled ? <span class="flowpress-hero__scrim" aria-hidden="true"></span> : null}
+  <div class="flowpress-hero__content">
+    <slot />
+  </div>
+</S>
+
+<style>
+  .flowpress-hero {
+    position: relative;
+    display: grid;
+    overflow: hidden;
+    isolation: isolate;
+  }
+
+  .flowpress-hero__media,
+  .flowpress-hero__scrim {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .flowpress-hero__media {
+    z-index: -2;
+    object-fit: cover;
+    object-position: var(--flowpress-hero-object-position);
+  }
+
+  .flowpress-hero__scrim {
+    z-index: -1;
+    background: color-mix(
+      in srgb,
+      var(--sf-background) var(--flowpress-scrim-opacity),
+      transparent
+    );
+    pointer-events: none;
+  }
+
+  .flowpress-hero__content {
+    position: relative;
+    display: grid;
+    gap: inherit;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .flowpress-hero__media:is(video) {
+      display: none;
+    }
+  }
+</style>

package/dist/astro/blocks/ListItemFallback.astro

@@ -0,0 +1,28 @@
+---
+import S from "@styleflow.app/astro/S.astro";
+
+interface Props {
+  item: Record<string, unknown>;
+}
+
+const { item } = Astro.props;
+const image = item.image && typeof item.image === "object" && !Array.isArray(item.image)
+  ? item.image as Record<string, unknown>
+  : {};
+---
+
+{image.url ? (
+  <img
+    src={String(image.url)}
+    alt={String(image.alt ?? "")}
+    loading="lazy"
+    decoding="async"
+  />
+) : null}
+{item.uri ? (
+  <S as="a" href={String(item.uri)}>{String(item.title ?? "")}</S>
+) : (
+  <S as="span">{String(item.title ?? "")}</S>
+)}
+{item.excerpt ? <S as="p">{String(item.excerpt)}</S> : null}
+{item.priceHtml ? <S as="div" set:html={String(item.priceHtml)} /> : null}

package/dist/astro/blocks/NumberSpinnerBlock.astro

@@ -0,0 +1,130 @@
+---
+import S from "@styleflow.app/astro/S.astro";
+import {
+  clampSpinnerDuration,
+  spinnerFractionDigits
+} from "../../number-spinner.js";
+import type { StyleflowContract } from "../../styleflow.js";
+import type { FlowpressBlock } from "../../types.js";
+import {
+  blockHtmlAttributes,
+  prefixedTextSemanticProps,
+  semanticProps,
+  textHtmlTag
+} from "./helpers.js";
+
+interface Props {
+  block: FlowpressBlock;
+  contract?: StyleflowContract;
+}
+
+const { block, contract } = Astro.props;
+const attributes = block.attributes;
+const prefix = String(attributes.prefix ?? "");
+const suffix = String(attributes.suffix ?? "");
+const candidateNumber = Number(attributes.number);
+const number = Number.isFinite(candidateNumber) ? candidateNumber : 0;
+const duration = clampSpinnerDuration(attributes.duration);
+const fractionDigits = spinnerFractionDigits(number);
+const locale = Astro.currentLocale ?? "";
+const numberText = String(number);
+const semantic = semanticProps(attributes, contract);
+const htmlAttributes = blockHtmlAttributes(
+  attributes,
+  "flowpress-number-spinner"
+);
+const prefixSemantic = prefixedTextSemanticProps(
+  attributes,
+  "prefix",
+  contract,
+  { ty: "body", v: "md", w: "default", foreground: "primary" }
+);
+const numberSemantic = prefixedTextSemanticProps(
+  attributes,
+  "number",
+  contract,
+  { ty: "heading", v: "2", w: "strong", foreground: "primary" }
+);
+const suffixSemantic = prefixedTextSemanticProps(
+  attributes,
+  "suffix",
+  contract,
+  { ty: "body", v: "md", w: "default", foreground: "primary" }
+);
+const prefixTag = textHtmlTag(attributes.prefixTag);
+const numberTag = textHtmlTag(attributes.numberTag);
+const suffixTag = textHtmlTag(attributes.suffixTag);
+---
+
+<S
+  as="div"
+  {...semantic}
+  {...htmlAttributes}
+  data-flowpress-number-spinner
+  data-spinner-target={number}
+  data-spinner-duration={duration}
+  data-spinner-fraction-digits={fractionDigits}
+  data-spinner-locale={locale || undefined}
+>
+  {prefix ? (
+    <S
+      as={prefixTag}
+      class="flowpress-number-spinner__segment"
+      {...prefixSemantic}
+    >
+      {prefix}
+    </S>
+  ) : null}
+  <S
+    as={numberTag}
+    class="flowpress-number-spinner__segment flowpress-number-spinner__number"
+    {...numberSemantic}
+  >
+    <span class="flowpress-number-spinner__accessible-value">
+      {numberText}
+    </span>
+    <span
+      aria-hidden="true"
+      data-flowpress-number-spinner-value
+    >
+      {numberText}
+    </span>
+  </S>
+  {suffix ? (
+    <S
+      as={suffixTag}
+      class="flowpress-number-spinner__segment"
+      {...suffixSemantic}
+    >
+      {suffix}
+    </S>
+  ) : null}
+</S>
+
+<script>
+  import { initializeNumberSpinners } from "../../number-spinner.js";
+
+  initializeNumberSpinners();
+</script>
+
+<style>
+  .flowpress-number-spinner {
+    display: inline-flex;
+    align-items: baseline;
+  }
+
+  .flowpress-number-spinner__segment {
+    display: inline;
+    margin: 0;
+  }
+
+  .flowpress-number-spinner__accessible-value {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+</style>