Skip to content

Commit

Permalink
Add ability to define custom Storybook version (#107)
Browse files Browse the repository at this point in the history
* Add ability to set a custom storybook version

* Check if storybook version has changed in config and update

* Make a first pass at adding the ability to define override the blast storybook configs

* Change process mustRun to run to fix storybook version check

* Improve how we replace the addon paths in published storybook config

* Add docs for publish-storybook-config task
  • Loading branch information
mrtimbrook authored Apr 3, 2024
1 parent df2a783 commit 211a972
Show file tree
Hide file tree
Showing 11 changed files with 2,634 additions and 7,705 deletions.
3 changes: 1 addition & 2 deletions .storybook/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,7 @@ const config = {
framework: {
name: '@storybook/server-webpack5',
options: {
quiet: true,
port: 6006
quiet: true
}
}
};
Expand Down
14 changes: 14 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,12 @@ Blast uses the `public_path()` to reference any static assets. This means that a

### Options

#### `storybook_version`

Allows the use of a different version of Storybook. Blast has only been tested up to 7.1.1.

Default: `'7.1.1'`

#### `storybook_server_url`

The route Storybook Server uses to render components. You shouldn't need to change this as it isn't ever visible on the FE.
Expand Down Expand Up @@ -535,6 +541,14 @@ You can pass the option `--force` to automatically overwrite existing documenati

- `--o, --output-dir` - the directory where to store built files relative to your `public` directory

## Publish Storybook Config

There may be times when you need to publish the storybook config files to your application directory (eg. changing Storybook versions). This copies the `.storybook` directory to your application root directory and updates the launch and publish tasks to use this directory for any Storybook configuration.

```bash
php artisan blast:publish-storybook-config
```

## Troubleshooting

If you see a `Failed to fetch` message when viewing your stories you will need to go to the path that Storybook is trying to load (open dev tools > network and right click the failed path and open in a new tab) and debug there. Any php errors or `dd` will trigger the `Failed to fetch` message.
Expand Down
2 changes: 2 additions & 0 deletions config/blast.php
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
return [
'enabled' => env('BLAST_ENABLED', true),

'storybook_version' => '7.1.1',

'storybook_server_url' =>
env('STORYBOOK_SERVER_HOST', env('APP_URL')) . '/storybook_preview',

Expand Down
9,969 changes: 2,290 additions & 7,679 deletions package-lock.json

Large diffs are not rendered by default.

9 changes: 1 addition & 8 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"scripts": {
"build-tailwind": "npx tailwindcss -i ./resources/frontend/css/main.css -o ./public/main.css --minify",
"build-storybook": "storybook build",
"storybook": "concurrently --i -c \"red,blue,yellow\" -n storybook,watch-components,watch-data \"storybook dev --quiet -s $STORYBOOK_STATIC_PATH -p $STORYBOOK_PORT\" \"npm run watch-components\" \"npm run watch-data\"",
"storybook": "concurrently --i -c \"red,blue,yellow\" -n storybook,watch-components,watch-data \"storybook dev --quiet -c $STORYBOOK_CONFIG_PATH -s $STORYBOOK_STATIC_PATH -p $STORYBOOK_PORT\" \"npm run watch-components\" \"npm run watch-data\"",
"watch-components": "chokidar \"$COMPONENTPATH/**/*.blade.php\" -d 0 -c \"cd $PROJECTPATH && php artisan blast:generate-stories --watchEvent={event} -- '{path}';\"",
"watch-data": "chokidar \"$COMPONENTPATH/data/**/*.php\" \"$COMPONENTPATH/**/*.md\" -d 0 -c \"cd $PROJECTPATH && php artisan blast:generate-stories;\"",
"parse-tailwind": "node ./src/resolveTailwindConfig.js",
Expand All @@ -31,19 +31,12 @@
},
"dependencies": {
"@etchteam/storybook-addon-status": "^4.2.4",
"@storybook/addon-a11y": "^7.1.1",
"@storybook/addon-actions": "^7.1.1",
"@storybook/addon-designs": "^7.0.1",
"@storybook/addon-docs": "^7.1.1",
"@storybook/addon-essentials": "^7.1.1",
"@storybook/addon-links": "^7.1.1",
"@storybook/server-webpack5": "^7.1.1",
"autoprefixer": "^10.4.7",
"chokidar-cli": "^3.0.0",
"concurrently": "^7.2.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"storybook": "7.1.1",
"storybook-source-code-addon": "^1.2.0",
"tailwindcss": "^3.4.1"
},
Expand Down
4 changes: 3 additions & 1 deletion src/BlastServiceProvider.php
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
use A17\Blast\Commands\GenerateUIDocs;
use A17\Blast\Commands\Launch;
use A17\Blast\Commands\Publish;
use A17\Blast\Commands\PublishStorybookConfig;
use Illuminate\Support\Facades\Blade;
use Illuminate\Support\ServiceProvider;
use Illuminate\View\Compilers\BladeCompiler;
Expand Down Expand Up @@ -39,6 +40,7 @@ private function registerCommands(): void
GenerateUIDocs::class,
Launch::class,
Publish::class,
PublishStorybookConfig::class,
]);
}
}
Expand All @@ -63,7 +65,7 @@ private function bootBladeDirectives(): void
private function bootBladeComponents(): void
{
$this->callAfterResolving(BladeCompiler::class, function (
BladeCompiler $blade
BladeCompiler $blade,
) {
$prefix = config('blast.prefix', '');

Expand Down
7 changes: 6 additions & 1 deletion src/Commands/Launch.php
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ public function handle()
sleep(5);
}

// install
// install deps
$this->installDependencies($npmInstall);

usleep(250000);
Expand Down Expand Up @@ -151,6 +151,11 @@ public function handle()
'LIBSTORYPATH' => $this->vendorPath . '/stories',
'PROJECTPATH' => base_path(),
'COMPONENTPATH' => base_path('resources/views/stories'),
'STORYBOOK_CONFIG_PATH' => $this->filesystem->exists(
base_path('.storybook'),
)
? base_path('.storybook')
: '.storybook',
]);
}
}
9 changes: 8 additions & 1 deletion src/Commands/Publish.php
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,14 @@ public function handle()
if ($outputDir) {
$process[] = '--';

$process = array_merge($process, ['-o', $outputDir]);
$process = array_merge($process, [
'-c',
$this->filesystem->exists(base_path('.storybook'))
? base_path('.storybook')
: '.storybook',
'-o',
$outputDir,
]);
}

$this->runProcessInBlast($process, true, [
Expand Down
162 changes: 162 additions & 0 deletions src/Commands/PublishStorybookConfig.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
<?php

namespace A17\Blast\Commands;

use Illuminate\Support\Str;
use A17\Blast\Traits\Helpers;
use Illuminate\Console\Command;
use Illuminate\Filesystem\Filesystem;

class PublishStorybookConfig extends Command
{
use Helpers;

/**
* The name and signature of the console command.
*
* @var string
*/
protected $signature = 'blast:publish-storybook-config';

/**
* The console command description.
*
* @var string
*/
protected $description = 'Publish Storybook config files to project directory';

/**
* @var Filesystem
*/
protected $filesystem;

/**
* @param Filesystem $filesystem
*/
public function __construct(Filesystem $filesystem)
{
parent::__construct();

$this->filesystem = $filesystem;
$this->vendorPath = $this->getVendorPath();
}

/*
* Executes the console command.
*
* @return mixed
*/
public function handle()
{
// copy blast default configs to .storybook
$blastConfigPath = $this->vendorPath . '/.storybook';
$projectConfigPath = base_path('.storybook');
$copyFiles = true;

if ($this->filesystem->exists($projectConfigPath)) {
$copyFiles = $this->confirm(
'Config already exists in project directory. Overwrite? This cannot be undone.',
false,
);
}

if (!$copyFiles) {
$this->error('Aborting');

return 0;
}

$this->filesystem->copyDirectory($blastConfigPath, $projectConfigPath);

// Update paths in preview.js
if ($this->filesystem->exists($projectConfigPath . '/preview.js')) {
$this->filesystem->replaceInFile(
'../public/main.css',
'../vendor/area17/blast/public/main.css',
$projectConfigPath . '/preview.js',
);
}

// Update paths in main.js
$mainJsPath = $projectConfigPath . '/main.js';

if ($this->filesystem->exists($mainJsPath)) {
$this->filesystem->replaceInFile(
'../stories/**/*.stories.json',
'../vendor/area17/blast/stories/**/*.stories.json',
$mainJsPath,
);

$mainJsContents = $this->filesystem->get($mainJsPath);
preg_match('/addons: [ \t]*\[(.*)\]/sU', $mainJsContents, $matches);

if (filled($matches)) {
$toReplace = preg_split(
'/(\s*,*\s*)*,+(\s*,*\s*)*/',
trim($matches[1]),
);

$essentials = [
'actions',
'backgrounds',
'controls',
'docs',
'highlight',
'measure',
'outline',
'toolbars',
'viewport',
];

$replaceWith = [];

foreach ($toReplace as $item) {
$prefix = '../vendor/area17/blast/node_modules/';
$newPath = Str::of($item)
->between("'", "'")
->start($prefix);

if (Str::contains($item, '@storybook/addon-essentials')) {
$newEssentials = [];
$newPath = $newPath->finish('/dist/');

foreach ($essentials as $essential) {
$newEssentials[] = $newPath
->finish($essential)
->start("'")
->finish("'")
->toString();
}

$replaceWith = array_merge(
$replaceWith,
$newEssentials,
);
} else {
if (Str::contains($item, '@storybook/addon-links')) {
$newPath = $newPath->finish('/dist');
}

$replaceWith[] = $newPath
->start("'")
->finish("'")
->toString();
}
}

// dd($replaceWith);

$this->filesystem->replaceInFile(
$matches[1],
implode(",\n", $replaceWith),
$mainJsPath,
);
}
}

$this->info('Copied files to .storybook in your project directory');
$this->info(
'Note that any future changes to the storybook config files in blast will have to be manually applied to the config files in your project.',
);
}
}
Loading

0 comments on commit 211a972

Please sign in to comment.