E527 poc: new content system tryout by mkucmus · Pull Request #2183 · shopware/frontends · GitHub
[go: up one dir, main page]
Skip to content

poc: new content system tryout #2183

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Draft
mkucmus wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

poc: new content system tryout #2183

mkucmus wants to merge 3 commits into from

Conversation

@mkucmus
Copy link
Contributor
@mkucmus mkucmus commented Dec 16, 2025 •
edited
Loading

Summary

Introduces a type-safe, agnostic pattern for content components with shared style configurations.

New Components (5)

  • ContentImage
  • ContentButton
  • ContentText
  • ContentGrid
  • ContentProductCard

New Utilities

  • useContentProperties.ts - Type interfaces for content element properties
  • useContentStyles.ts - Centralized style class mappings
  • useContentFactory.ts - Property extraction with type safety and validation

Features

  • Type Safety: Type-safe property extraction with defined interfaces
  • Shared Styles: Centralized class mappings for consistent styling (alignments, sizes, variants, gaps)
  • Developer Experience: Guaranteed non-undefined values, full TypeScript support
  • Minimal Boilerplate: Clean, declarative component pattern

Documentation

  • CONTENT_COMPONENT_PATTERNS.md - Implementation patterns and usage guide
  • Updated README.md - Examples and best practices

Usage Pattern

const { title, alignment } = extractProperties<TextProperties>(
  props.properties,
  {
    title: { default: "" },
    alignment: { default: "left" },
  }
);

const alignmentClass = computed(() =>
  ALIGNMENT_TEXT_CLASSES[alignment] || ALIGNMENT_TEXT_CLASSES.left
);

Benefits

  • Type-safe property access without manual assertions
  • Reusable style configurations across components
  • Consistent patterns for content element handling
  • Extensible foundation for validation and advanced patterns

@vercel
Copy link
vercel bot commented Dec 16, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (UTC)
frontends-demo Ready Ready Preview, Comment Dec 16, 2025 1:20pm
frontends-extended-starter-template Ready Ready Preview, Comment Dec 16, 2025 1:20pm
frontends-vue-starter-template Ready Ready Preview, Comment Dec 16, 2025 1:20pm
1 Skipped Deployment
Project Deployment Review Updated (UTC)
shopware-frontends-docs Skipped Skipped Comment Dec 16, 2025 1:20pm

@vercel vercel bot temporarily deployed to Preview – shopware-frontends-docs December 16, 2025 13:08 Inactive
@vercel vercel bot temporarily deployed to Preview – shopware-frontends-docs December 16, 2025 13:18 Inactive
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@mkucmus
0