'Component Playground', 'components' => $this->getComponentExamples(), 'phpComponents' => $this->getPhpComponentExamples(), 'colorTokens' => $this->getColorTokens(), 'spacingTokens' => $this->getSpacingTokens(), 'current_year' => $this->clock->now()->format('Y'), ]; $finalData = $this->layoutProcessor->processLayoutFromArray($data); return new ViewResult( template: 'styleguide', metaData: $metaData, data: $finalData ); } /** * @return array> */ private function getComponentExamples(): array { return [ 'buttons' => [ 'primary' => '', 'secondary' => '', 'success' => '', 'warning' => '', 'error' => '', 'small' => '', 'large' => '', ], 'cards' => [ 'basic' => '

Basic Card

This is a basic admin card with header and content.
', 'status_success' => '

✅ Success Card

PASS
This is a success status card.
', 'metric' => '
1,234
Total Users
+12% this month
', ], 'forms' => [ 'input' => '', 'select' => ' ', 'search' => '
', ], 'tables' => [ 'basic' => '

Sample Data

Name Status Value Actions
Sample Item 1 ACTIVE $123.45 Edit Delete
Sample Item 2 PENDING $67.89 Edit Delete
', ], ]; } /** * @return array> */ private function getColorTokens(): array { return [ 'primary' => [ 'accent' => 'var(--accent)', 'bg' => 'var(--bg)', 'bg-alt' => 'var(--bg-alt)', 'text' => 'var(--text)', 'muted' => 'var(--muted)', 'border' => 'var(--border)', ], 'semantic' => [ 'success' => 'var(--success)', 'warning' => 'var(--warning)', 'error' => 'var(--error)', 'info' => 'var(--info-base)', ], ]; } /** * @return array */ private function getSpacingTokens(): array { return [ 'space-sm' => 'var(--space-sm)', 'space-md' => 'var(--space-md)', 'space-lg' => 'var(--space-lg)', 'radius-md' => 'var(--radius-md)', 'radius-lg' => 'var(--radius-lg)', ]; } /** * @return array> */ private function getPhpComponentExamples(): array { return [ 'buttons' => [ 'primary' => Button::primary('Primary Button'), 'secondary' => Button::secondary('Secondary Button'), 'danger' => Button::danger('Delete'), 'success' => Button::success('Save'), 'ghost' => Button::ghost('Cancel'), 'link' => Button::link('View Details', '/admin/details'), 'submit' => Button::primary('Submit Form')->asSubmit(), 'small' => Button::primary('Small')->withSize('sm'), 'large' => Button::primary('Large')->withSize('lg'), 'full_width' => Button::primary('Full Width')->fullWidth(), ], 'button_groups' => [ 'horizontal' => ButtonGroup::create( Button::primary('Left'), Button::secondary('Center'), Button::secondary('Right') ), 'vertical' => ButtonGroup::create( Button::primary('Top'), Button::secondary('Middle'), Button::secondary('Bottom') )->asVertical(), ], 'badges' => [ 'default' => Badge::create('Default'), 'primary' => Badge::primary('Primary'), 'success' => Badge::success('Success'), 'warning' => Badge::warning('Warning'), 'danger' => Badge::danger('Danger'), 'info' => Badge::info('Info'), 'pill' => Badge::primary('Pill Badge')->asPill(), 'small' => Badge::success('Small')->withSize('sm'), 'large' => Badge::danger('Large')->withSize('lg'), ], 'alerts' => [ 'info' => Alert::info('This is an informational message.'), 'success' => Alert::success('Operation completed successfully!'), 'warning' => Alert::warning('Please review this warning.'), 'danger' => Alert::danger('An error occurred!'), 'with_title' => Alert::success('Operation completed successfully!', 'Success'), 'dismissible' => Alert::info('You can dismiss this alert.')->withDismissible(), ], 'forms' => [ 'text_input' => FormInput::text('username', 'Username', ''), 'email_input' => FormInput::email('email', 'Email Address', ''), 'password_input' => FormInput::password('password', 'Password'), 'required_input' => FormInput::text('required_field', 'Required Field')->withRequired(), 'error_input' => FormInput::email('error_email', 'Email')->withError('Invalid email address'), 'textarea' => FormTextarea::create('description', 'Description', ''), 'select' => FormSelect::create( 'status', ['active' => 'Active', 'pending' => 'Pending', 'inactive' => 'Inactive'], 'Status' ), 'checkbox' => FormCheckbox::create('agree', 'I agree to the terms and conditions', '1'), 'radio_group' => FormRadio::create('size', 'small', 'Small') . FormRadio::create('size', 'medium', 'Medium')->withChecked() . FormRadio::create('size', 'large', 'Large'), ], 'cards' => [ 'basic' => Card::create('This is a basic card with just content.'), 'with_title' => Card::withTitle('Card Title', 'This card has a title and content.'), 'with_subtitle' => Card::withTitle('Card Title', 'Card content here.') ->withSubtitle('This is a subtitle'), 'with_footer' => Card::withTitle('Card with Footer', 'Card content goes here.') ->withFooter('Footer text or actions'), 'full_card' => Card::withTitle('Complete Card', 'This is the main content of the card.') ->withSubtitle('Optional subtitle') ->withFooter(Button::primary('Action')), ], 'containers' => [ 'default' => Container::create('

Default container with max-width: 1024px

'), 'small' => Container::small('

Small container with max-width: 640px

'), 'large' => Container::large('

Large container with max-width: 1280px

'), 'fluid' => Container::fluid('

Fluid container with no max-width

'), ], ]; } }