Skip to content

New maker command #30

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.

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

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion composer.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,8 @@
"symfony/ux-live-component": "^2.16",
"symfony/ux-twig-component": "2.16",
"symfonycasts/sass-bundle": "^0.5.1",
"symfonycasts/tailwind-bundle": "^0.5.0"
"symfonycasts/tailwind-bundle": "^0.5.0",
"symfony/maker-bundle": "^1.60"
},
"conflict": {
"symfony/ux-twig-component": "2.17"
Expand Down
2 changes: 2 additions & 0 deletions phpstan.neon.dist
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ parameters:
- tests
bootstrapFiles:
- vendor/bin/.phpunit/phpunit/vendor/autoload.php
excludePaths:
- src/Resources/skeleton
ignoreErrors:
-
message: '#^Call to an undefined method Symfony\\Component\\Config\\Definition\\Builder\\NodeParentInterface\:\:arrayNode\(\)\.$#'
Expand Down
12 changes: 12 additions & 0 deletions src/DependencyInjection/StorybookExtension.php
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
use Storybook\EventListener\ComponentMockSubscriber;
use Storybook\EventListener\ProxyRequestListener;
use Storybook\Exception\UnauthorizedStoryException;
use Storybook\Maker\MakeStory;
use Storybook\Mock\ComponentProxyFactory;
use Storybook\StoryRenderer;
use Storybook\Twig\StorybookEnvironmentConfigurator;
Expand Down Expand Up @@ -139,6 +140,17 @@ static function (ChildDefinition $definition, AsComponentMock $attributeInstance
$container->register('storybook.component_mock_subscriber', ComponentMockSubscriber::class)
->setArgument(0, new Reference('storybook.component_proxy_factory'))
->addTag('kernel.event_subscriber');

// Maker
$container->register('storybook.maker.story_renderer', \Storybook\Maker\StoryRenderer::class)
->setArgument(0, new Reference('maker.generator'))
->setArgument(1, new Reference('ux.twig_component.component_factory'))
->setArgument(2, '%kernel.project_dir%/stories');
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Stories path depends on Storybook configuration, so I think this should be handled in a interactive prompt at maker level, with smart suggestions like stories/ or the current component template directory?


$container->register('storybook.maker.story_maker', MakeStory::class)
->setArgument(0, new Reference('storybook.maker.story_renderer'))
->addTag('maker.command')
;
}

public function getConfigTreeBuilder(): TreeBuilder
Expand Down
62 changes: 62 additions & 0 deletions src/Maker/MakeStory.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<?php

namespace Storybook\Maker;

use Symfony\Bundle\MakerBundle\ConsoleStyle;
use Symfony\Bundle\MakerBundle\DependencyBuilder;
use Symfony\Bundle\MakerBundle\Generator;
use Symfony\Bundle\MakerBundle\InputConfiguration;
use Symfony\Bundle\MakerBundle\Maker\AbstractMaker;
use Symfony\Component\Console\Command\Command;
use Symfony\Component\Console\Input\InputArgument;
use Symfony\Component\Console\Input\InputInterface;
use Symfony\Component\Console\Question\Question;

/**
* @method string getCommandDescription()
*/
class MakeStory extends AbstractMaker
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could be final

{
public function __construct(
private StoryRenderer $storyRenderer,
) {
}

public static function getCommandName(): string
{
return 'make:storybook:story';
}

public static function getCommandDescription(): string
{
return 'Creates a new Storybook story';
}

public function configureCommand(Command $command, InputConfiguration $inputConfig): void
{
$command
->addArgument('component', InputArgument::OPTIONAL, 'The name of the component you want a story for')
;
}

public function interact(InputInterface $input, ConsoleStyle $io, Command $command): void
{
if (null === $input->getArgument('component')) {
$question = new Question('What is the name of the component?');
$question->setValidator(fn ($value) => null !== $value);
$question->setMaxAttempts(3);
$input->setArgument('component', $io->askQuestion($question));
}
}

public function generate(InputInterface $input, ConsoleStyle $io, Generator $generator)
{
$componentName = $input->getArgument('component');

$this->storyRenderer->render($componentName);
}

public function configureDependencies(DependencyBuilder $dependencies)
{
}
}
28 changes: 28 additions & 0 deletions src/Maker/StoryRenderer.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<?php

namespace Storybook\Maker;

use Symfony\Bundle\MakerBundle\Generator;
use Symfony\UX\TwigComponent\ComponentFactory;

class StoryRenderer
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it possible to rename this class to something that doesn't collide with the main StoryRenderer? Like StoryGenerator?

Also this class could be final

{
public function __construct(
private Generator $generator,
private ComponentFactory $componentFactory,
private string $storiesPath,
) {
}

public function render(string $componentName): void
{
$componentMetadata = $this->componentFactory->metadataFor($componentName);

$this->generator->generateFile($this->storiesPath.'/'.$componentName.'.stories.js', __DIR__.'/../Resources/skeleton/Story.tpl.php', [
'componentName' => $componentName,
'template' => $componentMetadata->getTemplate(),
]);

$this->generator->writeChanges();
}
}
12 changes: 12 additions & 0 deletions src/Resources/skeleton/Story.tpl.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import <?php echo $componentName; ?> from "../templates/<?php echo $template; ?>";
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Relates to the previous comment on stories path: I'd prefer the full path to be dynamically generated depending on where the story file is created.

import { twig } from '@sensiolabs/storybook-symfony-webpack5';

export default {
component: (args) => ({
component: {<?php echo $componentName; ?>},
template: twig`
<twig:<?php echo $componentName; ?>/>
`,
})
}

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be nice to add a default story here, like

export const Default = {};

This is required for Storybook to properly index the story file, otherwise we'll get an indexing error AFAIK.

Loading