Important
⭐ Want to help with the Phoenix Storybook project? ⭐
-
I would greatly appreciate your code contributions.
-
You can also sponsor me, as it would enable me to dedicate my free time to fixing bugs and > developing new features 🤗
- improvement: :compilation_debug config option was added in
storybook.ex
to show/hide story compilation logs - improvement: fixed Elixir 1.7 related warnings
- improvement: fixed another bunch of Elixir 1.17 related warnings
- improvement: fixed Elixir 1.17 related warnings
- bugfix: fixed nofile_error_due_to_missing_env issue
- change (breaking!): all css
lsb-
prefixes have been renamed topsb-
(matchinglive storybook
renaming tophoenix storybook
). - change (breaking!):
assign
andtoggle
events have been prefixed withpsb-
(cf.components.md
guide) - feature: render any stories with the new :one_column layout
- improvement: fixed compatibility with phoenix_html_helpers
- improvement: function components use iframe srcdoc.
- improvement: Content-Security-Policy (CSP) support. Special thanks to Gaia for the PR 🙏
- improvement: CSRF token is optional
- bugfix: generating stories without Elixir. prefix in module names
- bugfix: fixed potential import module clashes
- bugfix: generated story for flash core_component has been updated (flash was no longer supporting the
autoshow
option) - bugfix:
mix phx.gen.storybook
now prints how to set the important sandbox strategy - bugfix:
mix phx.gen.storybook
no longer prints Docker instructions when no Docker file is present. - bugfix: dialyxir has been restored
- bugfix: fixed multiple imports issue
- improvement: bumped to
phoenix_live_view 0.20.0
- improvement: bumped to Erlang 26 / Elixir 1.15
- improvement: better router formatting and exporting formatting configuration
- bugfix: fixed theme attributes being stripped out from code preview even when themes aren't being used
- bugfix: updated generated story to the latest phoenix core components
- bugfix: fixed white bar in code preview
- bugfix: fix missing Kernel macros (such as
../0
) when evaluating stories.
- improvement: make it work with FontAwesome webfont. You need to set the
font_awesome_rendering
to:webfont
if you are not using fontawesome with svg icons. - improvement: fixed Elixir 1.15 deprecations
- bugfix: phx.gen.storybook alias to match storybook tailwind profile.
- bugfix: add LiveSocketOptions to support alpine.js.
- bugfix: fixed hooks not being initialized.
- improvement: improved mix phx.gen.storybook instructions
- bugfix: fixed issue with nested story modules.
- bugfix: fixed broken generated stories.
- bugfix: fixed theme strategy function not being called from Playground process.
- change (breaking!): LiveView
0.18.7+
is required - bugfix: fixed
HTMLEngine
issue introduced by LiveView 0.18.7.
- change (breaking!): project has been renamed from
phx_live_storybook
tophoenix_storybook
. In your project:- rename all references of
phx_live_storybook
tophoenix_storybook
- rename all references from
PhxLiveStorybook
toPhoenixStorybook
- rename all references of
- change (breaking!): depends on
phoenix 1.7+
- change (breaking!): component description is no longer a function defined
in your story file but is fetched from your component
@doc
or your live_component@moduledoc
comments. - feature: support for Example stories
- feature: visual regression endpoints. This endpoint can output bare components without the storybook's UI so that you can automate visual tests screenshots.
- improvement: mix phx.gen.storybook now prints formatter instructions
- improvement: new theme strategies. Theming guide has been updated.
- improvement: boolean attributes are rendered with their shorthand notation
- improvement: generating stories for Phoenix 1.7 core components
- bugfix: a project without heroicons will no longer raise on the generated icon story
- bugfix: fixed variation crash with a large binary in a map
- bugfix: fixed slots crash if rendered more than once
- bugfix:
TemplateHelpers.unique_variation_id/2
raises in playground if component has anid
attr. - bugfix: fixed some dialyxir warnings
- feature: you can now customize your story div container
- improvement: removed routes helpers (will help transition to Phoenix 1.7)
- improvement: pass connect params to story page
- bugfix: add :live_session and :as options to router
- bugfix: missing playground tab icons
- bugfix: mounting several storybooks in router is now possible
- bugfix: fixed mobile layout
- improvement: upgraded to LiveView 0.18.1
- improvement: improved generated storybook component & page
- bugfix: sidebar, tabs & theme icon rendering issues have been fixed. Icons are no longer rendered within the CSS sandbox and should be
styles with
lsb-*
classes. - bugfix: search panel no longer binds the
/
key. - bugfix: component generated by the
mix phx.gen.storybook
is no longer crashing.
A lot of necessary changes & refactoring have been made in this release which now requires you to run it with brand new LiveView 0.18.0.
This is the first release containing feedbacks & contribution from outside users! Thank you all! 🔥
- change (breaking!): LiveView 0.18.0 is required. Attributes & slots declared in your components are supported by the component Playground.
- change (breaking!): configuration has been moved from config.exs files to your elixir backend module.
- change (breaking!):
stories
have been re-rebranded asvariations
,Story
becameVariation
andStoryGroup
becameVariationGroup
- change (breaking!):
entries
have been re-rebranded asstories
. - change (breaking!): story (former entry) files must be created in
*.story.exs
files. - change (breaking!): sidebar custom story names and icons are now defined in
*.index.exs
files. - change (breaking!):
live_storybook/2
is no longer serving assets. You must addstorybook_assets/1
to your router in a non CSRF-protected scope. - change (breaking!): attr
options
have been renamed toexamples
. A newvalues
key is also available to enforce variation attribute values. - change (breaking!): slots & block are no longer attributes. Define instead a
slots/0
function returning a list of%Slot{}
. - change (breaking!): icon format has been updated, see this guide
- feature: run
mix phx.gen.storybook
to get started! - feature: new search modal. Trigger it with
cmd-k
or/
shortcuts. - feature: new event log. In the playground, you can now track all events emitted by components.
- feature: theming. You can declare different themes in the application settings. The selected theme will be merged in all components assigns.
- feature: you can initialize the component playground with any variation.
- feature: templates. You can provide HTML templates to render stories, which can help with modals, slide-overs... (see this guide for more details).
- feature: provide custom aliases & imports to your stories/templates (see this guide for more details).
- feature: you can provide a
let
attribute to your inner blocks. - feature: you can use late evaluation with
{:eval, val}
if you want to preserve the original expression in code preview. - improvement: stories compilation is lazy in dev environment (and eager in other envs). This
behavior can be tweaked with the
:compilation_mode
config key. - improvement: storybook playground is now responsive.
- bugfix: fixed pre-opened folders always reopening themselves after each patch.
- bugfix: empty inner_block are no longer passed to all components.
- bugfix: fixed closing tag typo in code preview.
- documentation: new
theming.md
guide. - documentation: new
components.md
guide.
- change (breaking!): entries must now be written as
.exs
files. Otherwise, they will be ignored. - change (breaking!):
variations
have been rebranded asstories
. - change (breaking!):
live_storybook/2
must be set in yourrouter.ex
outside your main scope and outside your:browser
pipeline. - feature: new Playground tab to play with your components! To use it, you must declare attributes in your component entries.
- feature: you can opt-in iframe rendering for any of your components with
def container, do: :iframe
- improvement: storybook is now fully responsive.
- improvement: meaningful errors are raised during compilation if your entries are invalid.
- improvement: improved storybook CSS isolation. It should no longer leak within your components.
- improvement: stateless component entries no longer require defining a
component/0
function. - documentation: new
sandboxing.md
guide.
- feature: new tab to browse your component sources
- feature: work-in-progress component documentation tab
- feature: new page entry support, which allows you create custom pages within your storybook
- improvement: introduced
%VariationGroup{}
to render mulitple variations in a single page div.
Initial release.