@dani-builder/blocks 0.2.0

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@dani-builder/blocks",
+  "version": "0.2.0",
+  "description": "Framework-agnostic React block renderers for Daniworks Builder (Strapi v5)",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./src/styles/blocks.css"
+  },
+  "files": [
+    "dist",
+    "src/styles",
+    "LICENSE",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/HJ-company/daniworks-builder-v2.git",
+    "directory": "packages/blocks"
+  },
+  "peerDependencies": {
+    "@dani-builder/strapi-client": ">=0.3.0 <1",
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "devDependencies": {
+    "@storybook/addon-a11y": "^10.5.7",
+    "@storybook/react-vite": "^10.5.7",
+    "@tailwindcss/postcss": "^4.3.3",
+    "@types/node": "^26.1.1",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@vitejs/plugin-react": "^6.0.5",
+    "react": "^19",
+    "react-dom": "^19",
+    "storybook": "^10.5.7",
+    "tailwindcss": "^4.3.3",
+    "typescript": "^6.0.3",
+    "vite": "^8.2.1",
+    "@dani-builder/strapi-client": "0.3.0",
+    "@repo/typescript-config": "0.0.0"
+  },
+  "keywords": [
+    "strapi",
+    "strapi-v5",
+    "daniworks-builder",
+    "react",
+    "blocks",
+    "cms-blocks"
+  ],
+  "homepage": "https://github.com/HJ-company/daniworks-builder-v2/tree/main/packages/blocks#readme",
+  "author": "HJ-company",
+  "scripts": {
+    "build": "tsc",
+    "check-types": "tsc -p tsconfig.check.json",
+    "storybook": "storybook dev -p 6006 --no-open",
+    "build-storybook": "storybook build"
+  }
+}

package/src/styles/blocks.css

@@ -0,0 +1,291 @@
+/**
+ * @dani-builder/blocks — block styles.
+ *
+ * Pure CSS that references design-token CSS variables (--color-*, --card-*,
+ * --font-*, --section-link). The consuming app supplies those tokens (e.g. via
+ * Tailwind v4 `@theme`) and Tailwind's utility classes. Import once, after
+ * Tailwind, so the `@layer base` rule below merges into Tailwind's layers.
+ *
+ * @import "@dani-builder/blocks/styles.css";
+ */
+
+/* Card surface tokens. Light defaults; each dark `.section-*` preset re-scopes
+   them so cards adapt to the section theme. Cards reference these via
+   bg-(--card-bg) / text-(--card-fg) / border-(--card-border). */
+:root {
+  --card-bg: #ffffff;
+  --card-border: #e6e5dc;
+  --card-fg: var(--color-text);
+}
+
+/* ── Section theme presets ───────────────────────────────── */
+.section-default {
+  background-color: #ffffff;
+  color: var(--color-text);
+}
+
+.section-light {
+  background-color: var(--color-bg);
+  color: var(--color-text);
+  --card-border: color-mix(in srgb, var(--color-text) 12%, transparent);
+}
+
+.section-dark {
+  background-color: #10261e;
+  color: #f4f7f5;
+  --color-text-muted: #9fb3a9;
+  --card-bg: rgba(255, 255, 255, 0.06);
+  --card-border: rgba(255, 255, 255, 0.12);
+  --card-fg: #f4f7f5;
+  --color-primary: var(--color-primary-light);
+}
+
+.section-accent {
+  background-color: var(--color-primary);
+  color: #ffffff;
+  --color-text-muted: rgba(255, 255, 255, 0.85);
+  /* Black overlay (not a white tint) so white --card-fg keeps >=4.5:1 over
+     the indigo accent background. */
+  --card-bg: rgba(0, 0, 0, 0.22);
+  --card-border: rgba(255, 255, 255, 0.28);
+  --card-fg: #ffffff;
+  --section-link: #ffffff;
+  /* Do NOT redefine --color-primary here: background-color above resolves it,
+     so a local override would repaint the section. */
+}
+
+.section-muted {
+  background-color: #edece4;
+  color: #3d4a43;
+}
+
+.section-contrast {
+  background-color: var(--color-text);
+  color: #ffffff;
+  --color-text-muted: rgba(255, 255, 255, 0.72);
+  --card-bg: rgba(255, 255, 255, 0.08);
+  --card-border: rgba(255, 255, 255, 0.18);
+  --card-fg: #ffffff;
+  --color-primary: var(--color-primary-light);
+}
+
+/* ── Shared primitives ───────────────────────────────────────
+   Buttons, kicker, and card surfaces every block reuses. Plain classes (not
+   utilities) so the look is consistent and token-driven in one place. */
+.block-btn,
+.block-btn-ghost {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border-radius: 9999px;
+  padding: 0.7rem 1.6rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.25;
+  transition:
+    background-color 150ms ease,
+    border-color 150ms ease,
+    color 150ms ease,
+    transform 150ms ease;
+}
+.block-btn {
+  background-color: var(--color-cta);
+  color: #ffffff;
+}
+.block-btn:hover {
+  background-color: var(--color-cta-hover);
+}
+.block-btn:active {
+  transform: translateY(1px);
+}
+.block-btn-ghost {
+  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
+  color: inherit;
+}
+.block-btn-ghost:hover {
+  border-color: color-mix(in srgb, currentColor 55%, transparent);
+  background-color: color-mix(in srgb, currentColor 6%, transparent);
+}
+
+/* Signature: kicker label with a small square "block" marker. */
+.section-kicker {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.55rem;
+  font-size: 0.75rem;
+  font-weight: 650;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--color-primary);
+}
+.section-kicker::before {
+  content: "";
+  width: 0.55em;
+  height: 0.55em;
+  border-radius: 1px;
+  background-color: currentColor;
+}
+
+/* Card surface. Hover lift is opt-in via .block-card-hover. */
+.block-card {
+  border-radius: 1.25rem;
+  border: 1px solid var(--card-border);
+  background-color: var(--card-bg);
+  color: var(--card-fg);
+}
+.block-card-hover {
+  transition:
+    border-color 200ms ease,
+    box-shadow 200ms ease,
+    transform 200ms ease;
+}
+.block-card-hover:hover {
+  border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
+  box-shadow: 0 12px 32px -16px color-mix(in srgb, var(--color-text) 35%, transparent);
+  transform: translateY(-2px);
+}
+
+/* Auto-color only unstyled text links inside dark theme sections; class-styled
+   anchors (buttons) keep their own colors. */
+@layer base {
+  .section-dark a:not([class]),
+  .section-accent a:not([class]),
+  .section-contrast a:not([class]) {
+    color: var(--section-link, currentColor);
+    text-decoration: underline;
+  }
+}
+
+/* ── Transparent site header overlay ─────────────────────────
+   A hero with headerMode=transparent-* drops a `data-hero-header` marker;
+   :has() lets the earlier-in-DOM header overlay it transparently. Unlayered so
+   it wins over the header's utility classes. */
+body:has([data-hero-header^="transparent"]) header {
+  position: absolute;
+  inset-inline: 0;
+  background-color: transparent;
+  border-color: transparent;
+  backdrop-filter: none;
+}
+body:has([data-hero-header="transparent-white"]) header
+  :where(a, button, span):not([class*="bg-"]) {
+  color: #ffffff;
+}
+body:has([data-hero-header="transparent-black"]) header
+  :where(a, button, span):not([class*="bg-"]) {
+  color: #111827;
+}
+
+/* Stat values render in the brand color, which disappears on the strong
+   section themes (accent bg IS the brand color) — force white there. */
+.section-accent .stat-value,
+.section-dark .stat-value,
+.section-contrast .stat-value {
+  color: #ffffff;
+}
+
+/* Form inputs: neutral ink-tinted border (the default --card-border is a
+   warm tan tuned for cards, too faint for inputs) + brand focus ring. */
+.form-input {
+  border: 1px solid color-mix(in srgb, var(--color-text) 22%, transparent);
+  background-color: #ffffff;
+}
+.form-input:focus {
+  border-color: var(--color-primary);
+  outline: 2px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
+  outline-offset: 0;
+}
+
+/* Rich-text content: links carry the brand color (the typography plugin's
+   default palette link blue is the only off-palette hue otherwise), and the
+   wide variant flows into columns on large screens so short structured
+   content fills its fold. */
+.block-content a {
+  color: var(--color-primary);
+  text-decoration-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
+}
+.block-content a:hover {
+  text-decoration-color: var(--color-primary);
+}
+@media (min-width: 1024px) {
+  .block-content-wide {
+    columns: 2;
+    column-gap: 4rem;
+  }
+  .block-content-wide h2,
+  .block-content-wide h3 {
+    break-after: avoid;
+  }
+  .block-content-wide p,
+  .block-content-wide ul,
+  .block-content-wide h2,
+  .block-content-wide h3 {
+    break-inside: avoid;
+  }
+  /* CSS columns keep a heading's top margin at the top of a later column,
+     so column starts misalign. Space groups with bottom margins instead. */
+  .block-content-wide :is(h2, h3) {
+    margin-top: 0;
+  }
+  .block-content-wide p {
+    margin-bottom: 1.75rem;
+  }
+}
+
+/* Reveal animations must never hide content in non-interactive rendering
+   contexts (print, PDF capture) where animations may not run. */
+@media print {
+  html.js [data-reveal] > * {
+    opacity: 1 !important;
+    animation: none !important;
+  }
+}
+
+/* ── Motion ──────────────────────────────────────────────────
+   Entrance/marquee motion, gated on prefers-reduced-motion. */
+@keyframes reveal-fade-up {
+  from { opacity: 0; transform: translateY(16px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes logo-marquee {
+  from { transform: translateX(0); }
+  to   { transform: translateX(-50%); }
+}
+
+@keyframes reveal-fallback {
+  to { opacity: 1; }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  /* Gated on `html.js` (host sets it before paint) so JS-disabled content
+     stays visible instead of stuck at opacity:0. The delayed reveal-fallback
+     keyframe makes the hide fail-visible: if hydration never flips
+     data-reveal to "in" (blocked script, hydration error), content still
+     appears after 1.8s instead of staying invisible forever. */
+  html.js [data-reveal="out"] > * {
+    opacity: 0;
+    animation: reveal-fallback 0.6s ease 1.8s both;
+  }
+  html.js [data-reveal="in"] > * {
+    animation: reveal-fade-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
+  }
+  html.js [data-reveal="in"] > *:nth-child(2) { animation-delay: 0.08s; }
+  html.js [data-reveal="in"] > *:nth-child(3) { animation-delay: 0.16s; }
+  html.js [data-reveal="in"] > *:nth-child(4) { animation-delay: 0.24s; }
+  html.js [data-reveal="in"] > *:nth-child(n + 5) { animation-delay: 0.3s; }
+
+  .logo-marquee-track {
+    animation: logo-marquee 30s linear infinite;
+  }
+  .logo-marquee:hover .logo-marquee-track,
+  .logo-marquee:focus-within .logo-marquee-track {
+    animation-play-state: paused;
+  }
+}
+
+/* Fade the marquee edges. */
+.logo-marquee {
+  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
+  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
+}