feat(features/frontend-showcase/frontend): ✨ add showcase for UI Dev Tools E2E testing
This commit is contained in:
Lilith
parent
78f95c7b03
commit
ce784e0916
3 changed files with 137 additions and 31 deletions
|
|
@ -12,6 +12,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@lilith/service-react-bootstrap": "workspace:*",
|
||||
"@lilith/ui-dev-content": "^0.1.0",
|
||||
"@lilith/ui-primitives": "^1.2.5",
|
||||
"@lilith/ui-theme": "^1.0.1",
|
||||
"react": "^19.0.0",
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
/**
|
||||
* App Component - Showcase for UI Dev Tools E2E Testing
|
||||
* App Component - Showcase for @lilith/ui-dev-content
|
||||
*
|
||||
* Simplified version for E2E testing infrastructure.
|
||||
* Full @lilith/ui-dev-content integration will be added later.
|
||||
* Demonstrates the WYSIWYG content editor with various examples.
|
||||
*/
|
||||
|
||||
import styled from 'styled-components';
|
||||
import { EditableContent } from '@lilith/ui-dev-content';
|
||||
import showcaseData from './locales/en/showcase.json';
|
||||
|
||||
const AppContainer = styled.div`
|
||||
|
|
@ -118,55 +118,148 @@ function App() {
|
|||
return (
|
||||
<AppContainer>
|
||||
<Header>
|
||||
<Title data-testid="hero-title">{showcaseData.hero.title}</Title>
|
||||
<Subtitle data-testid="hero-subtitle">{showcaseData.hero.subtitle}</Subtitle>
|
||||
<EditableContent
|
||||
source="locale"
|
||||
identifier="locales/en/showcase.json:hero.title"
|
||||
type="text"
|
||||
>
|
||||
<Title data-testid="hero-title">{showcaseData.hero.title}</Title>
|
||||
</EditableContent>
|
||||
|
||||
<EditableContent
|
||||
source="locale"
|
||||
identifier="locales/en/showcase.json:hero.subtitle"
|
||||
type="text"
|
||||
>
|
||||
<Subtitle data-testid="hero-subtitle">{showcaseData.hero.subtitle}</Subtitle>
|
||||
</EditableContent>
|
||||
</Header>
|
||||
|
||||
<ExamplesGrid>
|
||||
{/* Example 1: Simple Text */}
|
||||
<ExampleCard>
|
||||
<ExampleTitle>
|
||||
{showcaseData.examples.simple.title}
|
||||
<Badge>Simple</Badge>
|
||||
</ExampleTitle>
|
||||
<ExampleContent>{showcaseData.examples.simple.content}</ExampleContent>
|
||||
<EditableContent
|
||||
source="locale"
|
||||
identifier="locales/en/showcase.json:examples.simple.title"
|
||||
type="text"
|
||||
>
|
||||
<ExampleTitle>
|
||||
{showcaseData.examples.simple.title}
|
||||
<Badge>Simple</Badge>
|
||||
</ExampleTitle>
|
||||
</EditableContent>
|
||||
|
||||
<EditableContent
|
||||
source="locale"
|
||||
identifier="locales/en/showcase.json:examples.simple.content"
|
||||
type="text"
|
||||
>
|
||||
<ExampleContent>{showcaseData.examples.simple.content}</ExampleContent>
|
||||
</EditableContent>
|
||||
</ExampleCard>
|
||||
|
||||
{/* Example 2: Truth Validation */}
|
||||
<ExampleCard>
|
||||
<ExampleTitle>
|
||||
{showcaseData.examples.facts.title}
|
||||
<Badge>Truth Validation</Badge>
|
||||
</ExampleTitle>
|
||||
<ExampleContent>{showcaseData.examples.facts.content}</ExampleContent>
|
||||
<EditableContent
|
||||
source="locale"
|
||||
identifier="locales/en/showcase.json:examples.facts.title"
|
||||
type="text"
|
||||
>
|
||||
<ExampleTitle>
|
||||
{showcaseData.examples.facts.title}
|
||||
<Badge>Truth Validation</Badge>
|
||||
</ExampleTitle>
|
||||
</EditableContent>
|
||||
|
||||
<EditableContent
|
||||
source="locale"
|
||||
identifier="locales/en/showcase.json:examples.facts.content"
|
||||
type="text"
|
||||
transformers={['truth-validation']}
|
||||
>
|
||||
<ExampleContent>{showcaseData.examples.facts.content}</ExampleContent>
|
||||
</EditableContent>
|
||||
</ExampleCard>
|
||||
|
||||
{/* Example 3: Multi-line Content */}
|
||||
<ExampleCard>
|
||||
<ExampleTitle>
|
||||
{showcaseData.examples.complex.title}
|
||||
<Badge>Multi-line</Badge>
|
||||
</ExampleTitle>
|
||||
<ExampleContent>{showcaseData.examples.complex.content}</ExampleContent>
|
||||
<EditableContent
|
||||
source="locale"
|
||||
identifier="locales/en/showcase.json:examples.complex.title"
|
||||
type="text"
|
||||
>
|
||||
<ExampleTitle>
|
||||
{showcaseData.examples.complex.title}
|
||||
<Badge>Multi-line</Badge>
|
||||
</ExampleTitle>
|
||||
</EditableContent>
|
||||
|
||||
<EditableContent
|
||||
source="locale"
|
||||
identifier="locales/en/showcase.json:examples.complex.content"
|
||||
type="text"
|
||||
>
|
||||
<ExampleContent>{showcaseData.examples.complex.content}</ExampleContent>
|
||||
</EditableContent>
|
||||
</ExampleCard>
|
||||
|
||||
{/* Example 4: Call to Action */}
|
||||
<ExampleCard>
|
||||
<ExampleTitle>
|
||||
{showcaseData.examples.cta.title}
|
||||
<Badge>CTA</Badge>
|
||||
</ExampleTitle>
|
||||
<ExampleContent>{showcaseData.examples.cta.content}</ExampleContent>
|
||||
<EditableContent
|
||||
source="locale"
|
||||
identifier="locales/en/showcase.json:examples.cta.title"
|
||||
type="text"
|
||||
>
|
||||
<ExampleTitle>
|
||||
{showcaseData.examples.cta.title}
|
||||
<Badge>CTA</Badge>
|
||||
</ExampleTitle>
|
||||
</EditableContent>
|
||||
|
||||
<EditableContent
|
||||
source="locale"
|
||||
identifier="locales/en/showcase.json:examples.cta.content"
|
||||
type="text"
|
||||
>
|
||||
<ExampleContent>{showcaseData.examples.cta.content}</ExampleContent>
|
||||
</EditableContent>
|
||||
</ExampleCard>
|
||||
</ExamplesGrid>
|
||||
|
||||
<InstructionsSection>
|
||||
<InstructionsTitle>How to Use the Editor</InstructionsTitle>
|
||||
<InstructionsList>
|
||||
<InstructionItem>{showcaseData.instructions.step1}</InstructionItem>
|
||||
<InstructionItem>{showcaseData.instructions.step2}</InstructionItem>
|
||||
<InstructionItem>{showcaseData.instructions.step3}</InstructionItem>
|
||||
<InstructionItem>{showcaseData.instructions.step4}</InstructionItem>
|
||||
<EditableContent
|
||||
source="locale"
|
||||
identifier="locales/en/showcase.json:instructions.step1"
|
||||
type="text"
|
||||
>
|
||||
<InstructionItem>{showcaseData.instructions.step1}</InstructionItem>
|
||||
</EditableContent>
|
||||
|
||||
<EditableContent
|
||||
source="locale"
|
||||
identifier="locales/en/showcase.json:instructions.step2"
|
||||
type="text"
|
||||
>
|
||||
<InstructionItem>{showcaseData.instructions.step2}</InstructionItem>
|
||||
</EditableContent>
|
||||
|
||||
<EditableContent
|
||||
source="locale"
|
||||
identifier="locales/en/showcase.json:instructions.step3"
|
||||
type="text"
|
||||
>
|
||||
<InstructionItem>{showcaseData.instructions.step3}</InstructionItem>
|
||||
</EditableContent>
|
||||
|
||||
<EditableContent
|
||||
source="locale"
|
||||
identifier="locales/en/showcase.json:instructions.step4"
|
||||
type="text"
|
||||
>
|
||||
<InstructionItem>{showcaseData.instructions.step4}</InstructionItem>
|
||||
</EditableContent>
|
||||
</InstructionsList>
|
||||
</InstructionsSection>
|
||||
</AppContainer>
|
||||
|
|
|
|||
|
|
@ -38,12 +38,14 @@ RUN find ./features-temp -name "package.json" -not -path "*/node_modules/*" | \
|
|||
RUN pnpm install --frozen-lockfile --ignore-scripts || pnpm install --ignore-scripts
|
||||
|
||||
# Copy E2E-specific infrastructure config (needed by @lilith/service-addresses in vite.config.ts)
|
||||
# The package looks for /infrastructure/ports.yaml and /infrastructure/services/features/*.yaml
|
||||
# The package looks for /infrastructure/ports.yaml and each feature's services.yaml
|
||||
# We use minimal E2E-specific configs from fixtures
|
||||
COPY features/platform-admin/frontend-admin/e2e/fixtures/infrastructure/ /infrastructure/
|
||||
COPY features/platform-admin/frontend-admin/e2e/fixtures/infrastructure/ports.yaml /infrastructure/ports.yaml
|
||||
|
||||
# Copy only the source code we need for the admin frontend
|
||||
COPY features/platform-admin/frontend-admin/ ./features/platform-admin/frontend-admin/
|
||||
|
||||
# Copy workspace dependency features
|
||||
COPY features/analytics/frontend-admin/ ./features/analytics/frontend-admin/
|
||||
COPY features/analytics/shared/ ./features/analytics/shared/
|
||||
COPY features/attributes/frontend-admin/ ./features/attributes/frontend-admin/
|
||||
|
|
@ -52,6 +54,16 @@ COPY features/i18n/ ./features/i18n/
|
|||
COPY features/seo/frontend-admin/ ./features/seo/frontend-admin/
|
||||
COPY features/truth-validation/ ./features/truth-validation/
|
||||
|
||||
# Create feature-level services.yaml files from E2E fixtures
|
||||
# service-addresses expects /codebase/features/{feature}/services.yaml
|
||||
COPY features/platform-admin/frontend-admin/e2e/fixtures/infrastructure/services/features/platform-admin.yaml ./features/platform-admin/services.yaml
|
||||
COPY features/platform-admin/frontend-admin/e2e/fixtures/infrastructure/services/features/analytics.yaml ./features/analytics/services.yaml
|
||||
COPY features/platform-admin/frontend-admin/e2e/fixtures/infrastructure/services/features/attributes.yaml ./features/attributes/services.yaml
|
||||
COPY features/platform-admin/frontend-admin/e2e/fixtures/infrastructure/services/features/email.yaml ./features/email/services.yaml
|
||||
COPY features/platform-admin/frontend-admin/e2e/fixtures/infrastructure/services/features/seo.yaml ./features/seo/services.yaml
|
||||
COPY features/platform-admin/frontend-admin/e2e/fixtures/infrastructure/services/features/image-generator.yaml ./features/image-generator/services.yaml
|
||||
COPY features/platform-admin/frontend-admin/e2e/fixtures/infrastructure/services/features/truth-validation.yaml ./features/truth-validation/services.yaml
|
||||
|
||||
# Restructure for service-addresses compatibility
|
||||
# vite.config.ts calculates projectRoot=../../../.. from /app/features/platform-admin/frontend-admin
|
||||
# This resolves to /app, then adds 'codebase/features' → expects /app/codebase/features
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue