area17 / blast Goto Github PK
View Code? Open in Web Editor NEWStorybook for Laravel Blade ๐
Home Page: https://dev.to/area17/getting-started-with-blast-storybook-for-laravel-blade-c5c
License: Apache License 2.0
Storybook for Laravel Blade ๐
Home Page: https://dev.to/area17/getting-started-with-blast-storybook-for-laravel-blade-c5c
License: Apache License 2.0
Hi!
Please excuse my poor English.
Thank you for the great library.
Let me ask a question as there does not seem to be the same issue in the past.
My environment is:
M1 Macbook Air
macOS 12.2.1
Blast v1.8
I have a component that changes its style when an error occurs, like this:
@props([
'name' => '',
'errors' => null,
])
<input {{ $attributes->class(['!border-rose-600' => $errors->has($name)])
->merge([
'type' => 'text',
'name' => $name,
'class' => 'w-full !text-base py-3 px-5 border border-solid border-transparent focus:outline-none focus:border-primary-400 rounded-xl',
]) }} />
I want to display this component in Storybook, but since the $errors variable is undefined.
I tried to override the has() method explicitly by using storybook or php directive, but you received an error message and could not achieve your goal.
@storybook([
'args' => [
'errors' => (object) [
'has' => function () {
return true;
}
]
]
])
<x-input :errors="$errors" placeholder="Enter text here"></x-input>
// error message -> Call to a member function has() on array
@php
$errors = (object) [
'has' => function () {
return true;
},
];
@endphp
<x-input :errors="$errors" placeholder="Enter text here"></x-input>
// error message -> Call to undefined method stdClass::has()
Is there a way to display this component in Story?
I followed the instruction to create a demo from here https://dev.to/area17/getting-started-with-blast-storybook-for-laravel-blade-c5c ,
After running php artisan blast:demo
then php artisan blast:launch
, the demo button is not rendered
checked the console and got this error :
EventSource's response has a MIME type ("application/json") that is not "text/event-stream". Aborting the connection.
For instance, I have a typical blade component called ticket.blade.php. Inside that component I render things like ticket->title
and $ticket->price
. In typical Laravel fashion, I render the component by passing a whole ticket object (eloquent model) to the component like <x-card.ticket :ticket="$ticket" />
How would I do similar inside a story file? How can I pass a single $ticket object to the component inside a story?
In the button example, there are single variables like $label
, etc. but I can't figure out how to create a story with an object rather than just individual vars.
Hopefully that question makes sense :) Thanks!
I use Laravel Sail to run my project locally. Initial launch with blast:launch
works fine, but as soon as some code is changed the node process throws an error.
[1] /var/www/html/vendor/area17/blast/node_modules/chokidar-cli/utils.js:16
[1] throw new Error('$SHELL environment variable is not set.');
[1] ^
[1]
[1] Error: $SHELL environment variable is not set.
[1] at Object.run (/var/www/html/vendor/area17/blast/node_modules/chokidar-cli/utils.js:16:15)
[1] at run (/var/www/html/vendor/area17/blast/node_modules/chokidar-cli/index.js:225:18)
[1] at FSWatcher.<anonymous> (/var/www/html/vendor/area17/blast/node_modules/chokidar-cli/index.js:164:13)
[1] at FSWatcher.emit (node:events:378:20)
[1] at FSWatcher.emitWithAll (/var/www/html/vendor/area17/blast/node_modules/chokidar-cli/node_modules/chokidar/index.js:541:32)
[1] at FSWatcher._emit (/var/www/html/vendor/area17/blast/node_modules/chokidar-cli/node_modules/chokidar/index.js:632:8)
[1] at listener (/var/www/html/vendor/area17/blast/node_modules/chokidar-cli/node_modules/chokidar/lib/nodefs-handler.js:370:20)
[1] npm ERR! code 1
[1] npm ERR! path /var/www/html/vendor/area17/blast
[1] npm ERR! command failed
[1] npm ERR! command sh -c chokidar "$COMPONENTPATH/**/*.blade.php" -d 0 -c "cd $PROJECTPATH && php artisan blast:generate-stories --watchEvent={event} -- '{path}';"
[1]
npm ERR! A complete log of this run can be found in:
[1] npm ERR! /home/sail/.npm/_logs/2021-11-09T14_02_55_395Z-debug.log
[1] npm run watch-components exited with code 1
Looks like chokidar is exiting because env var $SHELL
is not present. I echoed $SHELL
in the Sail shell, and its defined as /bin/bash
.
As per Design addon settings pass array of designs.
https://storybookjs.github.io/addon-designs/?path=/story/docs-advanced-usage--embed-multiple-designs
https://github.com/storybookjs/addon-designs/blob/e09d21d2381752184eb9d442b9b89229d011af65/packages/examples/stories/docs/advanced/index.stories.js#L28-L39
https://storybookjs.github.io/addon-designs/?path=/story/docs-advanced-usage--set-tab-names
I discovered an issue with the command blast:launch --install
when ssh'ing into vagrant box/homestead. The same babel parser error that gets thrown sometimes when trying to run npm run dev
in the same environment. It seems to be caused by simlinks set up between the repos on the windows host and the directories hosting the site in the vagrant box. When running the command from a terminal on the windows host it works fine (using npm installation on windows), after which running blast:launch
(without --install) works from within the vagrant box. The usual work around is the --no-bin-links
argument with the npm command. Will investigate further...
Update so --noInstall
is default action when running the blast:launch
task.
Detect if storybook is installed already and if so, skip the install. Add --install
option to force installing dependencies.
Hi, it's sure, I'm a beginner with StoryBook.
I followed the documentation of this package.
I installed a new fresh Laravel 11.
laravel new storybook
composer require area17/blast
php artisan vendor:publish --provider="A17\Blast\BlastServiceProvider" --tag="blast-config"
I don't know how I should update the config file
If I do this :
php artisan blast:demo
The story is created
If I do :
php artisan blast:launch
or
php artisan blast:launch --install
I would like to be able to choose on which port Storybook runs. Currently, it seems to be hard coded (-p 6006
). Adding a --PORT
option to the blast:launch command
would be useful.
Investigate if it's possible to automatically detect css and js to remove requirement to publish config and manually setup assets when initially setting up Blast.
mix-manifest
file and auto load from that?Hi there,
Thanks for creating this excellent package.
I tried to follow the tutorial at https://dev.to/area17/getting-started-with-blast-storybook-for-laravel-blade-c5c but encountered difficulties.
Steps I tried:
Visit http://localhost:6006/?path=/story/button--primary
Get the following error message:
Failed to fetch
TypeError: Failed to fetch
at _callee$ (http://localhost:6006/vendors-node_modules_storybook_addon-a11y_dist_esm_a11yHighlight_js-generated-other-entry_js--83ef59.iframe.bundle.js:26705:20)
at tryCatch (http://localhost:6006/vendors-node_modules_storybook_addon-a11y_dist_esm_a11yHighlight_js-generated-other-entry_js--83ef59.iframe.bundle.js:119458:40)
at Generator.invoke [as _invoke] (http://localhost:6006/vendors-node_modules_storybook_addon-a11y_dist_esm_a11yHighlight_js-generated-other-entry_js--83ef59.iframe.bundle.js:119689:22)
at Generator.next (http://localhost:6006/vendors-node_modules_storybook_addon-a11y_dist_esm_a11yHighlight_js-generated-other-entry_js--83ef59.iframe.bundle.js:119514:21)
at asyncGeneratorStep (http://localhost:6006/vendors-node_modules_storybook_addon-a11y_dist_esm_a11yHighlight_js-generated-other-entry_js--83ef59.iframe.bundle.js:26666:103)
at _next (http://localhost:6006/vendors-node_modules_storybook_addon-a11y_dist_esm_a11yHighlight_js-generated-other-entry_js--83ef59.iframe.bundle.js:26668:194)
at http://localhost:6006/vendors-node_modules_storybook_addon-a11y_dist_esm_a11yHighlight_js-generated-other-entry_js--83ef59.iframe.bundle.js:26668:364
at new Promise (<anonymous>)
at http://localhost:6006/vendors-node_modules_storybook_addon-a11y_dist_esm_a11yHighlight_js-generated-other-entry_js--83ef59.iframe.bundle.js:26668:97
at defaultFetchStoryHtml (http://localhost:6006/vendors-node_modules_storybook_addon-a11y_dist_esm_a11yHighlight_js-generated-other-entry_js--83ef59.iframe.bundle.js:26720:17)
In my console where php artisan blast:launch
is running, I get
resources/views/stories/button/primary.blade.php
[1]
[1] InvalidArgumentException
[1]
[1] Unable to locate a class or view for component [button.primary].
[1]
[1] at vendor/laravel/framework/src/Illuminate/View/Compilers/ComponentTagCompiler.php:279
[1] 275โ if ($viewFactory->exists($view = $this->guessViewName($component).'.index')) {
[1] 276โ return $view;
[1] 277โ }
[1] 278โ
[1] โ 279โ throw new InvalidArgumentException(
[1] 280โ "Unable to locate a class or view for component [{$component}]."
[1] 281โ );
[1] 282โ }
[1] 283โ
[1]
[1] +2 vendor frames
[1] 3 [internal]:0
[1] Illuminate\View\Compilers\ComponentTagCompiler::Illuminate\View\Compilers\{closure}(["<x-button.primary>", "button.primary", "", ""])
[1]
[1] +28 vendor frames
[1] 32 artisan:37
[1] Illuminate\Foundation\Console\Kernel::handle(Object(Symfony\Component\Console\Input\ArgvInput), Object(Symfony\Component\Console\Output\ConsoleOutput))
As a side note, similar errors still happen when I do php artisan blast:demo
and visit those sample components
If you could point me to a better direction to resolve this issue, that would be great.
After installing blast and added the demo button I get the error message
'Cannot GET /storybook_preview/blast-demo/button'
In developer console it shows a 'GET' error 404 not found on this url:
http://localhost:6006/storybook_preview/blast-demo/button?measureEnabled=false&outline=false&label=Button&href=http%3A%2F%2Farea17.com&icon=plus-24&iconPosition=after
What should I change in my config to make this work?
I am thinking of a solution that avoids running a separate php server for the components, this could make it possible to serve the storybook on a github page.
Maybe we can just run php in the browser (via a wasm package?)
Or other ideas?
https://www.chromatic.com/docs/setup
ive tried using the prebuilt static storybook but still fails.
Its likely ive missed something
steps to reproduce
create project on chromatic
https://www.chromatic.com/start
blast:publish
npx chromatic --project-token=<tokenId> --storybook-build-dir public/storybook-static
relates to #66
Hi Folks, Please let me know if you need more info than I provide: I have tried this package with 2 laravel 8 apps. One on a vagrant/homestead installation on windows and one on a wampserver installation on windows. I have read and re-read the docs re package installation. Both time keep getting CORS error thrown from the iFrame within blast page. I have debugged through the JS to line 46 in render.js where the error gets throws. I have tried disabling CORS protection in laravel by commenting CORS line in App\HTTP\Kernal.php, I have also tried adding custom CORS class to laravel to allow all.
I have also debugged through the php call stack - am I correct in thinking you cannot use the url generated in blast.php to access the page as it doesn't contain the necessary parameters e.g. myapp.local/storybook_preview/{because this bit is missing which access the template directory}. I am thinking you have coded this to be NOT accessed in this way but rather through the automated page loading from the 'artisan blast:launch' command with the localhost:6006 url? Therefore, I am starting to think along the lines of Laravel getting it's knickers in a twist over port 6006? or localhost having a fit over who is listening to what?
It is worth noting that I have noticed that the artisan command will boot the storybook server without a webserver running at all and open the browser window (Chrome) with the same errorbut the rest of the page loading ok.
Help resolving this issue would be amazing please as I am looking forward to trying out this package. The only component within the stories directory is the demo one from this package. Cheers, Rob.
STACK TRACE FROM DEV CONSOLE:
DevTools failed to load source map: Could not load content for http://localhost:6006/index.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load source map: Could not load content for http://localhost:6006/react-popper-tooltip.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
iframe.html:1 Access to fetch at 'http://moneyscout.local/storybook_preview/blast-demo/button?measureEnabled=false&outline=false&label=Button&href=http%3A%2F%2Farea17.com&icon=plus-24&iconPosition=after' from origin 'http://localhost:6006' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
render.js:46 GET http://moneyscout.local/storybook_preview/blast-demo/button?measureEnabled=false&outline=false&label=Button&href=http%3A%2F%2Farea17.com&icon=plus-24&iconPosition=after net::ERR_FAILED 200
_callee$ @ render.js:46
tryCatch @ runtime.js:63
invoke @ runtime.js:294
(anonymous) @ runtime.js:119
asyncGeneratorStep @ render.js:7
_next @ render.js:9
(anonymous) @ render.js:9
(anonymous) @ render.js:9
defaultFetchStoryHtml @ render.js:61
_callee2$ @ render.js:118
tryCatch @ runtime.js:63
invoke @ runtime.js:294
(anonymous) @ runtime.js:119
asyncGeneratorStep @ render.js:7
_next @ render.js:9
(anonymous) @ render.js:9
(anonymous) @ render.js:9
_renderMain @ render.js:167
renderMain @ render.js:99
_callee3$ @ StoryRenderer.js:388
tryCatch @ runtime.js:63
invoke @ runtime.js:294
(anonymous) @ runtime.js:119
asyncGeneratorStep @ StoryRenderer.js:18
_next @ StoryRenderer.js:20
Promise.then (async)
asyncGeneratorStep @ StoryRenderer.js:18
_next @ StoryRenderer.js:20
(anonymous) @ StoryRenderer.js:20
(anonymous) @ StoryRenderer.js:20
renderStory @ StoryRenderer.js:429
_callee2$ @ StoryRenderer.js:266
tryCatch @ runtime.js:63
invoke @ runtime.js:294
(anonymous) @ runtime.js:119
asyncGeneratorStep @ StoryRenderer.js:18
_next @ StoryRenderer.js:20
(anonymous) @ StoryRenderer.js:20
(anonymous) @ StoryRenderer.js:20
renderStoryIfChanged @ StoryRenderer.js:290
_callee$ @ StoryRenderer.js:160
tryCatch @ runtime.js:63
invoke @ runtime.js:294
(anonymous) @ runtime.js:119
asyncGeneratorStep @ StoryRenderer.js:18
_next @ StoryRenderer.js:20
(anonymous) @ StoryRenderer.js:20
(anonymous) @ StoryRenderer.js:20
renderCurrentStory @ StoryRenderer.js:174
(anonymous) @ StoryRenderer.js:87
(anonymous) @ index.js:168
handleEvent @ index.js:167
handler @ index.js:93
emit @ index.js:100
setSelection @ story_store.js:961
finishConfiguring @ story_store.js:424
ConfigApi.configure @ config_api.js:26
(anonymous) @ loadCsf.js:223
configure @ index.js:17
./.storybook/generated-stories-entry.js @ generated-stories-entry.js:6
webpack_require @ bootstrap:24
webpack_exec @ util.inspect:1
(anonymous) @ util.inspect:1
webpack_require.O @ chunk loaded:23
(anonymous) @ util.inspect:1
webpackJsonpCallback @ jsonp chunk loading:558
(anonymous) @ main.iframe.bundle.js:1
Show 36 more frames
index.js:56 TypeError: Failed to fetch
at _callee$ (render.js:46)
at tryCatch (runtime.js:63)
at Generator.invoke [as _invoke] (runtime.js:294)
at Generator.next (runtime.js:119)
at asyncGeneratorStep (render.js:7)
at _next (render.js:9)
at render.js:9
at new Promise ()
at render.js:9
at defaultFetchStoryHtml (render.js:61)
VAR DUMP of fetchUrl - passed into fetch(fetchURL) at which point the error is thrown:
fetchUrl: URL
hash: ""
host: "moneyscout.local"
hostname: "moneyscout.local"
href: "http://moneyscout.local/storybook_preview/blast-demo/button?measureEnabled=false&outline=false&label=Button&href=http%3A%2F%2Farea17.com&icon=plus-24&iconPosition=after"
origin: "http://moneyscout.local"
password: ""
pathname: "/storybook_preview/blast-demo/button"
port: ""
protocol: "http:"
search: "?measureEnabled=false&outline=false&label=Button&href=http%3A%2F%2Farea17.com&icon=plus-24&iconPosition=after"
searchParams: URLSearchParams {}
username: ""
COMPOSER.JSON:
{
"name": "laravel/laravel",
"type": "project",
"description": "The Laravel Framework.",
"keywords": ["framework", "laravel"],
"license": "MIT",
"require": {
"php": "^7.3|^8.0",
"area17/blast": "^1.2",
"fruitcake/laravel-cors": "^2.0",
"guzzlehttp/guzzle": "^7.0.1",
"laravel/framework": "^8.54",
"laravel/sanctum": "^2.11",
"laravel/tinker": "^2.5",
"laravel/ui": "^3.3",
"livewire/livewire": "^2.6",
"silviolleite/laravelpwa": "^2.0"
},
"require-dev": {
"facade/ignition": "^2.5",
"fakerphp/faker": "^1.9.1",
"laravel/sail": "^1.0.1",
"mockery/mockery": "^1.4.2",
"nunomaduro/collision": "^5.0",
"phpunit/phpunit": "^9.3.3"
},
"autoload": {
"psr-4": {
"App\": "app/",
"Database\Factories\": "database/factories/",
"Database\Seeders\": "database/seeders/"
}
},
"autoload-dev": {
"psr-4": {
"Tests\": "tests/"
}
},
"scripts": {
"post-autoload-dump": [
"Illuminate\Foundation\ComposerScripts::postAutoloadDump",
"@php artisan package:discover --ansi"
],
"post-update-cmd": [
"@php artisan vendor:publish --tag=laravel-assets --ansi"
],
"post-root-package-install": [
"@php -r "file_exists('.env') || copy('.env.example', '.env');""
],
"post-create-project-cmd": [
"@php artisan key:generate --ansi"
]
},
"extra": {
"laravel": {
"dont-discover": []
}
},
"config": {
"optimize-autoloader": true,
"preferred-install": "dist",
"sort-packages": true
},
"minimum-stability": "dev",
"prefer-stable": true
}
PACKAGE.JSON:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"axios": "^0.21",
"bootstrap": "^4.6.0",
"jquery": "^3.6",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"popper.js": "^1.16.1",
"postcss": "^8.1.14",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.11",
"sass-loader": "^11.0.1"
},
"dependencies": {
}
}
First of love the work!
blast/src/BlastServiceProvider.php
Lines 118 to 119 in 1c3aaf3
we are using wp acorn which is WordPress with Laravel
it generates the manifest file to public/dist instead.
So we would like to be able to config the path of the manifest files
refs:
@mrtimbrook Will do, I had a dive into the Storybook docs about this topic earlier,. Will do more digging. Looks like the dependency is already there.
I just tried out Beyond Code's Invoker app and upon launch, I got an error that seemed to be related to this package. So I figured I'd cross-post this issue here too:
beyondcode/invoker-community#318
OS: darwin
Invoker Version: 2.10.0
Laravel Version: 9.34.0
Local project: true
PHP Binary: /opt/homebrew/bin/php
Route: /project/placeholder?project=local-jNgTuLwmLanmNUq8TaxKzzError:
ErrorException mkdir(): Read-only file system at /Users/nathan/Code/pigworks/vendor/laravel/framework/src/Illuminate/Filesystem/Filesystem.php:631 627โ if ($force) { 628โ return @mkdir($path, $mode, $recursive); 629โ } 630โ โ 631โ return mkdir($path, $mode, $recursive); 632โ } 633โ 634โ /** 635โ * Move a directory. ๏ฟฝ[2m+3 vendor frames ๏ฟฝ[22m 4 [internal]:0 A17\Blast\DataStore::__construct(Object(Illuminate\Filesystem\Filesystem)) ๏ฟฝ[2m+19 vendor frames ๏ฟฝ[22m 24 phar:/Applications/Invoker.app/Contents/Resources/invoker.phar/src/Actions/GetCommandsAction.php:22 Illuminate\Foundation\Console\Kernel::all()
This happens as soon as I open this particular project. I'm not sure what directory is failing to create. Does Invoker create a file or directory per project?
As soon as I removed this package, the project opens in Invoker without error. I wasn't really sure how to parse this. Any ideas what might be going on?
Hi. I am not pretty sure about is it a Storybook or Blast bug, but when I am trying to use dot (.) in args name it throw an error:
You may need an additional loader to handle the result of these loaders.
[0] File was processed with these loaders:
[0] * ./node_modules/@storybook/server/dist/cjs/server/loader.js
[0] You may need an additional loader to handle the result of these loaders.
[0] | ],
[0] | translations: {
[0] > prefix.key1: "Text1",
[0] | prefix.key2: "Text2",
[0] | prefix.key3: "Text3",
[0] at handleParseError (/var/www/html/vendor/area17/blast/node_modules/webpack/lib/NormalModule.js:941:19)
[0] at /var/www/html/vendor/area17/blast/node_modules/webpack/lib/NormalModule.js:1045:5
[0] at processResult (/var/www/html/vendor/area17/blast/node_modules/webpack/lib/NormalModule.js:763:11)
[0] at /var/www/html/vendor/area17/blast/node_modules/webpack/lib/NormalModule.js:827:5
[0] at /var/www/html/vendor/area17/blast/node_modules/loader-runner/lib/LoaderRunner.js:406:3
[0] at iterateNormalLoaders (/var/www/html/vendor/area17/blast/node_modules/loader-runner/lib/LoaderRunner.js:232:10)
In a data folder, it's represented as:
return [
'translations' => [
'args' => [
"prefix.key1" => "Text1",
"prefix.key2" => "Text2",
"prefix.key3" => "Text3",
]
]
];
Hello, I'm sorry to report I'm having CORs issues with the default installation.
I have tried the workaround in the blog post listed here but it has not worked.
Storybook instance loads fine but I get a 301 error and CORS errors in the console for the iframe content.
I can confirm that going to that page directly, loads the button component just fine.
If there's anything I can do to help or more info I can provide please let me know.
Lastly, thanks for creating this - it's a much needed addition to laravel and will allow me to remove a lot of my own hacks for getting components in to storybook.
Currently we're bulding a static version of the storybook (blast:publish
) and including that in a docker image to be deployed to various urls... Thus the STORYBOOK_SERVER_URL still includes the storybook_preview
(which is weird as i'd like to have a static build of the entire storybook)
So what am i doing wrong? Is this something inside storybook or in the combination of blast and storybook ?
Right now you can't run the publish
task without having run the launch
task or manually installed the dependencies. Let's update it to check/install dependencies as part of this task too.
Relevant doc entry: https://www.php.net/manual/en/migration81.deprecated.php#migration81.deprecated.core.static-trait
The default config causes the following notice:
Deprecated: Calling static trait method A17\Blast\Traits\StorybookLogo::defaultLogo is deprecated, it should only be called on a class using the trait in /var/www/html/config/blast.php on line 80
Suggested fix:
Make A17\Blast\Traits\StorybookLogo
a class instead of a trait. However this could count as a BC break.
An alternative suggestion is to mark that trait as deprecated to be in line with PHP 8.1's deprecations and create a new class that does the exact same.
I can provide a PR if you'd like.
First of all, awesome work! Very cool making Storybook work with blade components. ๐
I was wondering if actions were currently supported, I think I'm on the right track, but I'm not sure if my config is broken or if it's the app.
I've been able to get this far:
{{-- resources/views/stories/button.blade.php --}}
@storybook([
'name' => 'Button',
'args' => [ ],
'argTypes' => [
'onClick' => [
'action' => 'click',
],
]
])
<button onclick="{{ $onClick ?? '' }}('click')">Click Me</button>
But when I click the button, I get the following error:
In case it's needed, here is my config/blast.php
file
<?php
return [
'storybook_server_url' =>
env('STORYBOOK_SERVER_HOST', env('APP_URL')) . '/storybook_preview',
// See https://storybook.js.org/docs/react/configure/theming for available options
'storybook_theme' => [],
// set the background color of the storybook canvas area
'canvas_bg_color' => '',
// Blast will attempt to autoload assets from a mix-manifest if the assets arrays are empty. This option allows you to disable that functionality
'autoload_assets' => false,
'assets' => [
'css' => [
'assets/css/argon.mine209.css',
'css/app.css',
'assets/css/custom.css',
],
'js' => [
'js/manifest.js',
'js/vendor.js',
'js/app.js'
],
],
// See https://storybook.js.org/addons/@etchteam/storybook-addon-status/
'storybook_statuses' => [
'deprecated' => [
'background' => '#e02929',
'color' => '#ffffff',
'description' =>
'This component is deprecated and should no longer be used',
],
'wip' => [
'background' => '#f59506',
'color' => '#ffffff',
'description' => 'This component is a work in progress',
],
'readyForQA' => [
'background' => '#34aae5',
'color' => '#ffffff',
'description' => 'This component is complete and ready to qa',
],
'stable' => [
'background' => '#1bbb3f',
'color' => '#ffffff',
'description' => 'This component is stable and released',
],
],
'storybook_global_types' => [],
// set a global custom order for stories in the Storybook UI
// More info - https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy#sorting-stories
'storybook_sort_order' => [],
'build_timeout' => 300,
'vendor_path' => 'vendor/area17/blast',
'components' => [
'docs-page' => \A17\Blast\Components\DocsPages\DocsPage::class,
],
];
Keep up the good work!
In my recent Laravel + Tailwind installation, tailwind.config.js
is included as an ES Module. This causes the following error on blast:launch
and blast:publish
:
php artisan blast:launch
0/2 [โโโโโโโโโโโโโโโโโโโโโโโโโโโโ] Reusing npm dependencies...
1/2 [โโโโโโโโโโโโโโโโโโโโโโโโโโโโ] Generating Stories...Error [ERR_REQUIRE_ESM]: require() of ES Module /e/server/gigsalad-laravel/laravel/tailwind.config.js
from /e/server/gigsalad-laravel/laravel/vendor/area17/blast/src/resolveTailwindConfig.js not supported.
Instead change the require of tailwind.config.js in /e/server/gigsalad-laravel/laravel/vendor/area17/blast/src/resolveTailwindConfig.js to a dynamic import()
which is available in all CommonJS modules.
at Object.<anonymous> (/e/server/gigsalad-laravel/laravel/vendor/area17/blast/src/resolveTailwindConfig.js:6:18) {
code: 'ERR_REQUIRE_ESM'
}
It appears Tailwind generates an ESM config file by default depending on other settings in your project: https://tailwindcss.com/docs/configuration#using-esm-or-type-script
And it looks like Laravel has configured package.json
as type: module
since version 10.2: https://github.com/laravel/laravel/blob/25070a3ffb175c15b59cd7f12289a9648165bba3/CHANGELOG.md?plain=1#L34
By supporting both ESM and CommonJS formats, Blast will be more able to provide documentation "out of the box" going forward.
Windows 10
Running Herd using PHP-8.1
The title sums it up. When running php artisan blast:launch
it seems to hang on the Setup Complete. Booting Storybook and watching stories
message without continuing on with messaging on where to view the local instance.
I know that this by default should be viewed on localhost:6006
but I get a connection issue error in my browser.
Has anyone gotten the this to work on a Windows machine using port 6006? If so, please share the solution!
0/2 [โโโโโโโโโโโโโโโโโโโโโโโโโโโโ] Reusing npm dependencies...
1/2 [โโโโโโโโโโโโโโโโโโโโโโโโโโโโ] Generating Stories...<path>tailwind.config.ts:2
import type { Config } from 'tailwindcss';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at internalCompileFunction (node:internal/vm:73:18)
at wrapSafe (node:internal/modules/cjs/loader:1178:20)
at Module._compile (node:internal/modules/cjs/loader:1220:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
at Module.load (node:internal/modules/cjs/loader:1119:32)
at Module._load (node:internal/modules/cjs/loader:960:12)
at Module.require (node:internal/modules/cjs/loader:1143:19)
at require (node:internal/modules/cjs/helpers:110:18)
at Object.<anonymous> (<path>/vendor/area17/blast/src/resolveTailwindConfig.js:6:18)
at Module._compile (node:internal/modules/cjs/loader:1256:14)
Since we already have the values from tailwind why not use it in storybook aswell?
refs:
Weโre currently looking to add a data-theme switcher addon for use with DaisyUI, but would it be in anyway possible to add the ability to manage storybook addons, so that you could add your own?
Running the blast:launch
command doesn't produce the expected result which would be to access either localhost:6006
or freshl9.test/storybook_preview
and see StoryBook.
Blast: 1.6
Laravel: 9.9.0
PHP: 8.1.4
Node: 17.8.0
Also to node, the process keeps running until I ^C
which you can notice in the log below.
Here's the console output.
[0] info @storybook/server v6.4.9
[0] info
[0] (node:63163) DeprecationWarning: --static-dir CLI flag is deprecated, see:
[0]
[0] https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated---static-dir-cli-flag
[0] (Use `node --trace-deprecation ...` to show where the warning was created)
[0] info => Loading presets
[0] info => Serving static files from /freshl9/public at /
[0] info => Loading custom manager config
[0] info => Using PostCSS preset with [email protected]
[0] info => Using default Webpack5 setup
[0] info => Loading custom manager config
[0] <i> [webpack-dev-middleware] wait until bundle finished
[0] <i> [webpack-dev-middleware] wait until bundle finished
[0] node:internal/crypto/hash:67
[0] this[kHandle] = new _Hash(algorithm, xofLen);
[0] ^
[0]
[0] Error: error:0308010C:digital envelope routines::unsupported
[0] at new Hash (node:internal/crypto/hash:67:19)
[0] at Object.createHash (node:crypto:135:10)
[0] at BulkUpdateDecorator.hashFactory (/freshl9/vendor/area17/blast/node_modules/webpack/lib/util/createHash.js:145:18)
[0] at BulkUpdateDecorator.update (/freshl9/vendor/area17/blast/node_modules/webpack/lib/util/createHash.js:46:50)
[0] at OriginalSource.updateHash (/freshl9/vendor/area17/blast/node_modules/webpack/node_modules/webpack-sources/lib/OriginalSource.js:131:8)
[0] at NormalModule._initBuildHash (/freshl9/vendor/area17/blast/node_modules/webpack/lib/NormalModule.js:888:17)
[0] at handleParseResult (/freshl9/vendor/area17/blast/node_modules/webpack/lib/NormalModule.js:954:10)
[0] at /freshl9/vendor/area17/blast/node_modules/webpack/lib/NormalModule.js:1048:4
[0] at processResult (/freshl9/vendor/area17/blast/node_modules/webpack/lib/NormalModule.js:763:11)
[0] at /freshl9/vendor/area17/blast/node_modules/webpack/lib/NormalModule.js:827:5
[0] at /freshl9/vendor/area17/blast/node_modules/loader-runner/lib/LoaderRunner.js:406:3
[0] at iterateNormalLoaders (/freshl9/vendor/area17/blast/node_modules/loader-runner/lib/LoaderRunner.js:232:10)
[0] at /freshl9/vendor/area17/blast/node_modules/loader-runner/lib/LoaderRunner.js:223:4
[0] at processTicksAndRejections (node:internal/process/task_queues:83:21) {
[0] opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
[0] library: 'digital envelope routines',
[0] reason: 'unsupported',
[0] code: 'ERR_OSSL_EVP_UNSUPPORTED'
[0] }
[0]
[0] Node.js v17.8.0
[0] start-storybook --quiet -s /freshl9/public -p 6006 exited with code 1
^C
[2] npm run watch-data exited with code SIGINT
[1] npm run watch-components exited with code SIGINT
Although accessing localhost:6006 has no response, accessing freshl9.test/storybook_preview
throws a an exception.
Too few arguments to function A17\Blast\Controllers\StoryController::__invoke(), 1 passed in /Users/rui.sardinha/dev/sites/freshl9/vendor/laravel/framework/src/Illuminate/Routing/ControllerDispatcher.php on line 48 and exactly 2 expected
Let me know if I can provide more context.
https://tailwindcss.com/blog/tailwindcss-v3-4
Dynamic viewport units: Full-height elements that actually work on mobile.
New :has() variant: Style parent elements based on their children.
Style children with the * variant: Weโll probably regret giving you this one.
New size-* utilities: Set width and height at the same time, finally.
Balanced headlines with text-wrap utilities: No more max-width tweaking or responsive line breaks.
Subgrid support: That grid feature you struggle to understand, finally in Tailwind CSS.
Extended min-width, max-width, and min-height scales: Now min-w-12 is a real class.
Extended opacity scale: For those moments when neither 60% or 70% were quite right.
Extended grid-rows-* scale: Might as well make it match the column scale.
New forced-colors variant: Easily fine-tune your site for forced colors mode.
New forced-color-adjust utilities: For even more forced colors fine-tuning.
Hi @mrtimbrook is this supported and I am missing something? I have been so far able to pass an array to the story so it registers in the controls addon effectively but only gets passed to the components blade as a bool?
hello. is it possible to set data in 'controls' tab and copy ready to use code snippet with this data. like Copy to Clipboard" or "Code Snippets" addons?
At the moment presetArgs
can only be used inside a preset
. Enabling presetArgs
in @storybook
directive would remove the requirement to create a data file.
Hi there, amazing project , perfect partner for working with Twill.
I instaled in a pre-existing twill instalation. Everything fine, but I would like to devep isolated components working straight in the Storybook as I do with Nuxt. But I can't get it to auto-reload the page when a save the component source changes.
At my laravel build I use the browserSync for Lavavel Mix so I can proxy the Storybook url to get something like this, but I would like to have it straight into the Storybook build. Any way to edit the Blast webpack.config ?
Also, Is there any way to add storybook addons, like the tailwind dark mode ?
Resuming: the possibly to overwrite the .storybook and webpack without hacking the vendor package would be great.
Big thanks.
Hello, i just installed this package and i fail..
โฏ npm -v
8.12.1
โฏ node -v
v18.2.0
โฏ php -v
PHP 8.1.6 (cli) (built: May 12 2022 23:30:52) (NTS)
Copyright (c) The PHP Group
Zend Engine v4.1.6, Copyright (c) Zend Technologies
with Zend OPcache v8.1.6, Copyright (c), by Zend Technologies
php artisan blast:launch
0/2 [โโโโโโโโโโโโโโโโโโโโโโโโโโโโ] Reusing npm dependencies...
1/2 [โโโโโโโโโโโโโโโโโโโโโโโโโโโโ] Generating Stories...
2/2 [โโโโโโโโโโโโโโโโโโโโโโโโโโโโ] Setup Complete. Booting Storybook and watching stories.
> @area17/[email protected] storybook
> concurrently "start-storybook --quiet -s $STORYBOOK_STATIC_PATH -p 6006" "npm run watch-components" "npm run watch-data"
[1]
[1] > @area17/[email protected] watch-components
[1] > chokidar "$COMPONENTPATH/**/*.blade.php" -d 0 -c "cd $PROJECTPATH && php artisan blast:generate-stories --watchEvent={event} -- '{path}';"
[1]
[2]
[2] > @area17/[email protected] watch-data
[2] > chokidar "$COMPONENTPATH/data/**/*.php" "$COMPONENTPATH/**/*.md" -d 0 -c "cd $PROJECTPATH && php artisan blast:generate-stories;"
[2]
[1] Watching "/Users/jonasgustafsson/projects/app/resources/views/stories/**/*.blade.php" ..
[2] Watching "/Users/jonasgustafsson/projects/app/resources/views/stories/data/**/*.php", "/Users/jonasgustafsson/projects/app/resources/views/stories/**/*.md" ..
[0] info @storybook/server v6.4.9
[0] info
[0] (node:40429) DeprecationWarning: --static-dir CLI flag is deprecated, see:
[0]
[0] https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated---static-dir-cli-flag
[0] (Use `node --trace-deprecation ...` to show where the warning was created)
[0] info => Loading presets
[0] info => Serving static files from /Users/jonasgustafsson/projects/app/public at /
[0] ERR! TypeError: details.family.toLowerCase is not a function
[0] ERR! at /Users/jonasgustafsson/projects/app/vendor/area17/blast/node_modules/ip/lib/ip.js:385:39
[0] ERR! at Array.filter (<anonymous>)
[0] ERR! at /Users/jonasgustafsson/projects/app/vendor/area17/blast/node_modules/ip/lib/ip.js:384:37
[0] ERR! at Array.map (<anonymous>)
[0] ERR! at ip.address (/Users/jonasgustafsson/projects/app/vendor/area17/blast/node_modules/ip/lib/ip.js:379:37)
[0] ERR! at getServerAddresses (/Users/jonasgustafsson/projects/app/vendor/area17/blast/node_modules/@storybook/core-server/dist/cjs/utils/server-address.js:20:55)
[0] ERR! at storybookDevServer (/Users/jonasgustafsson/projects/app/vendor/area17/blast/node_modules/@storybook/core-server/dist/cjs/dev-server.js:91:67)
[0] ERR! at async buildDevStandalone (/Users/jonasgustafsson/projects/app/vendor/area17/blast/node_modules/@storybook/core-server/dist/cjs/build-dev.js:115:31)
[0] ERR! at async buildDev (/Users/jonasgustafsson/projects/app/vendor/area17/blast/node_modules/@storybook/core-server/dist/cjs/build-dev.js:161:5)
[0] ERR! TypeError: details.family.toLowerCase is not a function
[0] ERR! at /Users/jonasgustafsson/projects/app/vendor/area17/blast/node_modules/ip/lib/ip.js:385:39
[0] ERR! at Array.filter (<anonymous>)
[0] ERR! at /Users/jonasgustafsson/projects/app/vendor/area17/blast/node_modules/ip/lib/ip.js:384:37
[0] ERR! at Array.map (<anonymous>)
[0] ERR! at ip.address (/Users/jonasgustafsson/projects/app/vendor/area17/blast/node_modules/ip/lib/ip.js:379:37)
[0] ERR! at getServerAddresses (/Users/jonasgustafsson/projects/app/vendor/area17/blast/node_modules/@storybook/core-server/dist/cjs/utils/server-address.js:20:55)
[0] ERR! at storybookDevServer (/Users/jonasgustafsson/projects/app/vendor/area17/blast/node_modules/@storybook/core-server/dist/cjs/dev-server.js:91:67)
[0] ERR! at async buildDevStandalone (/Users/jonasgustafsson/projects/app/vendor/area17/blast/node_modules/@storybook/core-server/dist/cjs/build-dev.js:115:31)
[0] ERR! at async buildDev (/Users/jonasgustafsson/projects/app/vendor/area17/blast/node_modules/@storybook/core-server/dist/cjs/build-dev.js:161:5)
[0] WARN Broken build, fix the error above.
[0] WARN You may need to refresh the browser.
[0]
[0]
[0] start-storybook --quiet -s /Users/jonasgustafsson/projects/app/public -p 6006 exited with code 1
Hi,
I install a fresh Laravel 10 with Laravel Herd. I install this package, and I try to launch it, but there are much errors in terminal
I followed the doc, twice, but without result.
[storybook] info => Serving static files from ./../../../public at /
[storybook] info => Starting manager..
[storybook] WARN unable to find package.json for @prettier/plugin-php
[storybook] WARN unable to find package.json for eslint
[storybook] WARN unable to find package.json for eslint-config-prettier
WARN unable to find package.json for eslint-plugin-prettier
[storybook] WARN unable to find package.json for husky
[storybook] WARN unable to find package.json for lint-staged
WARN unable to find package.json for prettier
[storybook] WARN unable to find package.json for stylelint
[storybook] WARN unable to find package.json for stylelint-config-recommended
[storybook] WARN unable to find package.json for stylelint-order
[storybook] WARN unable to find package.json for stylelint-prettier
[storybook] info Addon-docs: using MDX2
[storybook] info => Using implicit CSS loaders
[storybook] info => Using default Webpack5 setup
And when I start the website :
Too few arguments to function A17\Blast\Controllers\StoryController::__invoke(), 1 passed
When I launch the button
demo, I have this :
Undefined variable $href
Hi. I found 1 issue related to the preset (presetArgs).
If we are looking for an example of presetArgs: https://github.com/area17/blast#presetting-data all type of values are strings, and works well.
If in the example (in file stories/data/card.php) we change a title value to null, we get an error, like:
[0] info => Using cached manager
[0] webpack built preview d42a76af114de80996eb in 7378ms
[0] ModuleBuildError: Module build failed (from ./node_modules/@storybook/server/dist/cjs/server/loader.js):
[0] TypeError: Cannot convert undefined or null to object
[0] at Function.keys (<anonymous>)
[0] at stringifyObject (/var/www/html/vendor/area17/blast/node_modules/@storybook/server/dist/cjs/lib/compiler/stringifier.js:108:16)
[0] at /var/www/html/vendor/area17/blast/node_modules/@storybook/server/dist/cjs/lib/compiler/stringifier.js:110:21
[0] at Array.map (<anonymous>)
[0] at stringifyObject (/var/www/html/vendor/area17/blast/node_modules/@storybook/server/dist/cjs/lib/compiler/stringifier.js:109:47)
[0] at /var/www/html/vendor/area17/blast/node_modules/@storybook/server/dist/cjs/lib/compiler/stringifier.js:98:14
[0] at Array.map (<anonymous>)
[0] at stringifyObject (/var/www/html/vendor/area17/blast/node_modules/@storybook/server/dist/cjs/lib/compiler/stringifier.js:97:31)
[0] at /var/www/html/vendor/area17/blast/node_modules/@storybook/server/dist/cjs/lib/compiler/stringifier.js:110:21
[0] at Array.map (<anonymous>)
[0] at stringifyObject (/var/www/html/vendor/area17/blast/node_modules/@storybook/server/dist/cjs/lib/compiler/stringifier.js:109:47)
[0] at /var/www/html/vendor/area17/blast/node_modules/@storybook/server/dist/cjs/lib/compiler/stringifier.js:110:21
[0] at Array.map (<anonymous>)
[0] at stringifyObject (/var/www/html/vendor/area17/blast/node_modules/@storybook/server/dist/cjs/lib/compiler/stringifier.js:109:47)
[0] at stringifyStory (/var/www/html/vendor/area17/blast/node_modules/@storybook/server/dist/cjs/lib/compiler/stringifier.js:159:69)
[0] at /var/www/html/vendor/area17/blast/node_modules/@storybook/server/dist/cjs/lib/compiler/stringifier.js:165:12
[0] at processResult (/var/www/html/vendor/area17/blast/node_modules/webpack/lib/NormalModule.js:721:19)
[0] at /var/www/html/vendor/area17/blast/node_modules/webpack/lib/NormalModule.js:827:5
[0] at /var/www/html/vendor/area17/blast/node_modules/loader-runner/lib/LoaderRunner.js:399:11
[0] at /var/www/html/vendor/area17/blast/node_modules/loader-runner/lib/LoaderRunner.js:251:18
[0] at runSyncOrAsync (/var/www/html/vendor/area17/blast/node_modules/loader-runner/lib/LoaderRunner.js:156:3)
[0] at iterateNormalLoaders (/var/www/html/vendor/area17/blast/node_modules/loader-runner/lib/LoaderRunner.js:250:2)
[0] at Array.<anonymous> (/var/www/html/vendor/area17/blast/node_modules/loader-runner/lib/LoaderRunner.js:223:4)
[0] at runCallbacks (/var/www/html/vendor/area17/blast/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:27:15)
[0] at /var/www/html/vendor/area17/blast/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:200:4
[0] at /var/www/html/vendor/area17/blast/node_modules/graceful-fs/graceful-fs.js:123:16
[0] at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)
[0]
[0]
[0] WARN Broken build, fix the error above.
[0] WARN You may need to refresh the browser.
[0] start-storybook --quiet -s /var/www/html/public -p 6006 exited with code 1
The key phrase is:
TypeError: Cannot convert undefined or null to object
Is it possible to add a support for null values to Blast?
Thanks
$this->buildTailwindViewports($this->storybookViewports),
trait TailwindViewports
should use Illuminate\Support\Arr;
I would like to use the same app.js (with my Vue setup) in Blast as in my project (with Vite), but when I add app.js to the config, it doesn't work because the type of the <script>
is text/javascript
instead of module
.
Let's say we have a component that uses slots, how should that be defined in the storybook args?
For example, a more complex component that uses slots and sub-components:
<x-ui.buttons.general
class="flex items-center gap-2 px-4 py-1 text-gray-600 border border-gray-500 rounded-md hover:bg-gray-500 hover:text-gray-100"
>
<x-slot
name="loadingIcon"
>
<x-icons.solid.cog
class="w-4 h-4 shrink-0"
/>
</x-slot>
<x-slot
name="icon"
>
<x-icons.light.csv
class="w-4 h-4 shrink-0"
/>
</x-slot>
<span>
Export To CSV
</span>
</x-ui.buttons.general>
Hello,
I'm encountering difficulties configuring Laravel Sail as I'm consistently encountering the following error: [insert error message here]. I've followed the instructions provided in the official documentation, yet I'm unable to resolve it.
use "php artisan blast:launch"
Could someone please provide guidance on the correct configuration to use with Laravel Sail? I appreciate any assistance or suggestions you can offer to help resolve this issue.
Thank you in advance for your collaboration!
When running blade:publish
, a JavaScript error is present in main.5538a5c7.iframe.bundle.js
(link):
VM2768:1 Uncaught SyntaxError: "undefined" is not valid JSON
at JSON.parse (<anonymous>)
at ./.storybook/preview.js-generated-config-entry.js (main.5538a5c7.iframe.bundle.js:1:15462)
at __webpack_require__ (runtime~main.1e62e197.iframe.bundle.js:1:381)
at __webpack_exec__ (main.5538a5c7.iframe.bundle.js:1:64322)
at main.5538a5c7.iframe.bundle.js:1:65443
at __webpack_require__.O (runtime~main.1e62e197.iframe.bundle.js:1:1015)
at main.5538a5c7.iframe.bundle.js:1:65586
at webpackJsonpCallback (runtime~main.1e62e197.iframe.bundle.js:1:5873)
at main.5538a5c7.iframe.bundle.js:1:69
That line refers to STORYBOOK_VIEWPORTS
as the culprit (viewports: JSON.parse(process.env.STORYBOOK_VIEWPORTS)
).
As far as I can tell, the Publish command doesn't provide viewport information, and possibly other information as well. (It looks like it hasn't been updated for a couple of years.)
@storybook/cli v7.1.1
info => Cleaning outputDir: /storybook-static
info => Loading presets
info => Building manager..
WARN unable to find package.json for @prettier/plugin-php
WARN unable to find package.json for eslint
WARN unable to find package.json for eslint-config-prettier
WARN unable to find package.json for eslint-plugin-prettier
WARN unable to find package.json for husky
WARN unable to find package.json for lint-staged
WARN unable to find package.json for stylelint
WARN unable to find package.json for stylelint-config-recommended
WARN unable to find package.json for stylelint-order
WARN unable to find package.json for stylelint-prettier
info => Manager built (1.28 s)
info => Compiling preview..
info => Copying static files: /e/server/gigsalad-laravel/laravel/vendor/area17/blast/node_modules/@storybook/manager/static at /e/server/gigsalad-laravel/laravel/vendor/area17/blast/storybook-static/sb-common-assets
info Addon-docs: using MDX2
info => Using implicit CSS loaders
info => Using default Webpack5 setup
info => Preview built (17 s)
WARN export 'default' (imported as 'previewAnnotations') was not found in '/e/server/gigsalad-laravel/laravel/vendor/area17/blast/node_modules/@storybook/addon-a11y/dist/preview.mjs' (module has no exports)
WARN export 'default' (imported as 'previewAnnotations') was not found in '/e/server/gigsalad-laravel/laravel/vendor/area17/blast/node_modules/@storybook/addon-essentials/dist/actions/preview.mjs' (possible exports: argsEnhancers)
WARN export 'default' (imported as 'previewAnnotations') was not found in '/e/server/gigsalad-laravel/laravel/vendor/area17/blast/node_modules/@storybook/addon-essentials/dist/backgrounds/preview.mjs' (possible exports: decorators, globals, parameters)
WARN export 'default' (imported as 'previewAnnotations') was not found in '/e/server/gigsalad-laravel/laravel/vendor/area17/blast/node_modules/@storybook/addon-essentials/dist/docs/preview.mjs' (possible exports: parameters)
WARN export 'default' (imported as 'previewAnnotations') was not found in '/e/server/gigsalad-laravel/laravel/vendor/area17/blast/node_modules/@storybook/addon-essentials/dist/highlight/preview.mjs' (possible exports: highlightObject, highlightStyle)
WARN export 'default' (imported as 'previewAnnotations') was not found in '/e/server/gigsalad-laravel/laravel/vendor/area17/blast/node_modules/@storybook/addon-essentials/dist/measure/preview.mjs' (possible exports: decorators, globals)
WARN export 'default' (imported as 'previewAnnotations') was not found in '/e/server/gigsalad-laravel/laravel/vendor/area17/blast/node_modules/@storybook/addon-essentials/dist/outline/preview.mjs' (possible exports: decorators, globals)
WARN export 'default' (imported as 'previewAnnotations') was not found in '/e/server/gigsalad-laravel/laravel/vendor/area17/blast/node_modules/@storybook/addon-links/dist/preview.mjs' (possible exports: decorators)
WARN export 'default' (imported as 'previewAnnotations') was not found in '/e/server/gigsalad-laravel/laravel/vendor/area17/blast/node_modules/@storybook/server/preview.js' (possible exports: parameters, render, renderToCanvas)
WARN asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
WARN This can impact web performance.
WARN Assets:
WARN 964.bc4fb6f7.iframe.bundle.js (986 KiB)
WARN 644.10db7075.iframe.bundle.js (583 KiB)
WARN 115.4267b1f8.iframe.bundle.js (584 KiB)
info => Output directory: /e/server/gigsalad-laravel/laravel/vendor/area17/blast/storybook-static
3/3 [โโโโโโโโโโโโโโโโโโโโโโโโโโโโ] Copying static build to /public/storybook-static
..
3/3 [โโโโโโโโโโโโโโโโโโโโโโโโโโโโ] Publish Complete
When running the script on a Windows environment, the dynamic import statement in the resolveTailwindConfig
function throws an ERR_UNSUPPORTED_ESM_URL_SCHEME
error. This issue arises because the path provided to the import()
function does not conform to the file://
URL scheme expected by Node.js for ESM imports on Windows platforms.
Steps to reproduce the behavior:
php artisan blast:publish
.ERR_UNSUPPORTED_ESM_URL_SCHEME
error related to the dynamic import statement.The script should dynamically import the Tailwind configuration file without throwing any errors, regardless of the operating system.
Error Output:
================
node:internal/errors:496
ErrorCaptureStackTrace(err);
^
Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only URLs with a scheme in: file, data,
and node are supported by the default ESM loader. On Windows, absolute paths must
be valid file:// URLs. Received protocol 'c:'
at new NodeError (node:internal/errors:405:5)
at throwIfUnsupportedURLScheme (node:internal/modules/esm/load:131:11)
at defaultLoad (node:internal/modules/esm/load:82:3)
at nextLoad (node:internal/modules/esm/loader:163:28)
at ESMLoader.load (node:internal/modules/esm/loader:603:26)
at ESMLoader.moduleProvider (node:internal/modules/esm/loader:457:22)
at new ModuleJob (node:internal/modules/esm/module_job:64:26)
at #createModuleJob (node:internal/modules/esm/loader:480:17)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:434:34) {
code: 'ERR_UNSUPPORTED_ESM_URL_SCHEME'
}
Node.js v18.17.0
To resolve this issue, we suggest modifying the resolveTailwindConfig()
function to use the pathToFileURL
function from Node.js's url
module. This change will correctly convert the file path to a file://
URL, ensuring compatibility across operating systems, including Windows.
Here's the suggested change:
// ./src/resolveTailwindConfig.js
async function resolveTailwindConfig() {
const fs = await import('fs');
const { default: resolveConfig } = await import('tailwindcss/resolveConfig.js')
const { pathToFileURL } = await import('url');
// Convert CONFIGPATH to a file URL
const configPath = pathToFileURL(process.env.CONFIGPATH).href;
const { default: config } = await import(configPath)
const fullConfig = resolveConfig(config);
try {
if (!fs.existsSync(TEMP_DIR)) {
fs.mkdirSync(TEMP_DIR);
}
fs.writeFileSync(OUTPUT_PATH, `<?php return ${parseConfig(fullConfig)};`);
} catch (err) {
console.error(err);
}
}
This update will automatically handle the conversion of the configuration file path into a valid file://
URL, resolving the ERR_UNSUPPORTED_ESM_URL_SCHEME
error on Windows platforms.
I am using default Laravel 10 and tested also with Laravel 11 after installed Laravel Breeze:
0/2 [โโโโโโโโโโโโโโโโโโโโโโโโโโโโ] Reusing npm dependencies...
1/2 [โโโโโโโโโโโโโโโโโโโโโโโโโโโโ] Generating Stories...node:internal/process/promises:289
triggerUncaughtException(err, true /* fromPromise */);
^
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/var/www/html/node_modules/tailwindcss/defaultTheme' imported from /var/www/html/tailwind.config.js
Did you mean to import tailwindcss/defaultTheme.js?
at finalizeResolution (node:internal/modules/esm/resolve:264:11)
at moduleResolve (node:internal/modules/esm/resolve:917:10)
at defaultResolve (node:internal/modules/esm/resolve:1130:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:396:12)
at ModuleLoader.resolve (node:internal/modules/esm/loader:365:25)
at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:240:38)
at ModuleWrap. (node:internal/modules/esm/module_job:85:39)
at link (node:internal/modules/esm/module_job:84:36) {
code: 'ERR_MODULE_NOT_FOUND',
url: 'file:///var/www/html/node_modules/tailwindcss/defaultTheme'
}
Node.js v20.11.1
Symfony\Component\Process\Exception\ProcessFailedException
The command "'node' './src/resolveTailwindConfig.js'" failed.
Exit Code: 1(General error)
Working directory: /var/www/html/vendor/area17/blast
at vendor/symfony/process/Process.php:270
266โ */
267โ public function mustRun(?callable $callback = null, array $env = []): static
268โ {
269โ if (0 !== $this->run($callback, $env)) {
โ 270โ throw new ProcessFailedException($this);
271โ }
272โ
273โ return $this;
274โ }
+27 vendor frames
28 artisan:35
Illuminate\Foundation\Console\Kernel::handle()
Looks like https://github.com/area17/blast/blob/main/.storybook/preview.js#L1 imports https://github.com/area17/blast/blob/main/resources/frontend/css/main.css and therefore tailwind by default. This makes it very hard to use Blast for anything that does not use it. Tailwind has it's own set of default styles and resets (i.e. sets <svg>
to display:block
) that changes styling of components we build in storybook. Either requires overriding tailwind styles or produces unexpected results once the component is rendered outside of Blast. Neither is the ideal workflow.
Is that by design to only support tailwind projects or is possible to fix?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.