<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="348718" data-post-id="348718">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="cblavier" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/cblavier/120/29763_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  cblavier
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Released 0.7.2 with support for local_icons plus color_mode &amp; icon related bugfixes</p>
<ul>
<li><strong>feature</strong>: <a href="https://github.com/phenixdigital/phoenix_storybook/pull/518" rel="noopener nofollow ugc">support for local icons</a> (read the updated <code>icons.md</code> guide for details)</li>
<li><strong>bugfix</strong>: <a href="https://github.com/phenixdigital/phoenix_storybook/issues/523" rel="noopener nofollow ugc">fixed missing color mode icons</a></li>
<li><strong>bugfix</strong>: <a href="https://github.com/phenixdigital/phoenix_storybook/issues/527" rel="noopener nofollow ugc">fixed active dark mode when color_mode is disabled</a></li>
<li><strong>change (breaking!)</strong>: FontAwesome icons are now CSS loaded (cf. <code>icons.md</code> guide)</li>
</ul> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="348718" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/phoenix-storybook-a-storybook-like-ui-interface-for-phoenix-components/48890/82">Post #81</a>
	                </div>
	            </div>
              <div id="likers-container-348718" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="348718"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #81"></div>
  </section>
</div>
    <div class="postbit" id="349236" data-post-id="349236">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="cblavier" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/cblavier/120/29763_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  cblavier
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Rendering the source code for a full component module could be too lengthy and slow (think <code>core_components.ex</code> with a lot of function components in a single module)</p>
<p>You can now decide, per story, to render only your function’s source code.</p>
<p></p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/3X/c/2/c2c8102dab41ac6b759665eac7b90291a407b912.jpeg" data-download-href="https://forum.elixirforum.com/uploads/default/c2c8102dab41ac6b759665eac7b90291a407b912" title="CleanShot 2024-12-10 at 13.25.50" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/optimized/3X/c/2/c2c8102dab41ac6b759665eac7b90291a407b912_2_676x600.jpeg" alt="CleanShot 2024-12-10 at 13.25.50" data-base62-sha1="rN7ghMgSt2uUFE1xoH7QSHy8Jyy" width="676" height="600" srcset="https://forum.elixirforum.com/uploads/default/optimized/3X/c/2/c2c8102dab41ac6b759665eac7b90291a407b912_2_676x600.jpeg, https://forum.elixirforum.com/uploads/default/optimized/3X/c/2/c2c8102dab41ac6b759665eac7b90291a407b912_2_1014x900.jpeg 1.5x, https://forum.elixirforum.com/uploads/default/original/3X/c/2/c2c8102dab41ac6b759665eac7b90291a407b912.jpeg 2x" data-dominant-color="536275"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">CleanShot 2024-12-10 at 13.25.50</span><span class="informations">1200×1065 60.7 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div><p></p>
<p>Shipped, but not released yet.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="349236" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/phoenix-storybook-a-storybook-like-ui-interface-for-phoenix-components/48890/83">Post #82</a>
	                </div>
	            </div>
              <div id="likers-container-349236" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="349236"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #82"></div>
  </section>
</div>
    <div class="postbit" id="351906" data-post-id="351906">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="cblavier" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/cblavier/120/29763_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  cblavier
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Released <code>0.8.0</code> with a lot of stuff regarding components, attributes, and slots documentation <img src="https://forum.elixirforum.com/images/emoji/apple/rocket.png?v=15" title=":rocket:" class="emoji" alt=":rocket:" loading="lazy" width="20" height="20"></p>
<p>Function documentation is properly rendering markdown:</p>
<p></p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/3X/0/0/00741c75e0863f9225440b0648e9b779583a3776.jpeg" data-download-href="https://forum.elixirforum.com/uploads/default/00741c75e0863f9225440b0648e9b779583a3776" title="CleanShot 2025-01-07 at 15.55.22@2x" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/optimized/3X/0/0/00741c75e0863f9225440b0648e9b779583a3776_2_690x443.jpeg" alt="CleanShot 2025-01-07 at 15.55.22@2x" data-base62-sha1="40LyvEgJJauY22dwpvewlZQIlw" width="690" height="443" srcset="https://forum.elixirforum.com/uploads/default/optimized/3X/0/0/00741c75e0863f9225440b0648e9b779583a3776_2_690x443.jpeg, https://forum.elixirforum.com/uploads/default/optimized/3X/0/0/00741c75e0863f9225440b0648e9b779583a3776_2_1035x664.jpeg 1.5x, https://forum.elixirforum.com/uploads/default/original/3X/0/0/00741c75e0863f9225440b0648e9b779583a3776.jpeg 2x" data-dominant-color="D5E1E2"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">CleanShot 2025-01-07 at 15.55.22@2x</span><span class="informations">1200×771 45 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div><p></p>
<hr>
<p>Attribute and slots documentation is rendering markdown and can be expanded when written on multiple lines.</p>
<p></p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/3X/7/8/78c22db4e4ce3e0ee64294bb5d39c62f84d86662.jpeg" data-download-href="https://forum.elixirforum.com/uploads/default/78c22db4e4ce3e0ee64294bb5d39c62f84d86662" title="image" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/optimized/3X/7/8/78c22db4e4ce3e0ee64294bb5d39c62f84d86662_2_690x435.jpeg" alt="image" data-base62-sha1="hehjXZZ99OVhuBYJBkS2V9vUNOO" width="690" height="435" srcset="https://forum.elixirforum.com/uploads/default/optimized/3X/7/8/78c22db4e4ce3e0ee64294bb5d39c62f84d86662_2_690x435.jpeg, https://forum.elixirforum.com/uploads/default/optimized/3X/7/8/78c22db4e4ce3e0ee64294bb5d39c62f84d86662_2_1035x652.jpeg 1.5x, https://forum.elixirforum.com/uploads/default/original/3X/7/8/78c22db4e4ce3e0ee64294bb5d39c62f84d86662.jpeg 2x" data-dominant-color="D8E5E5"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">image</span><span class="informations">1200×757 39.2 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div><p></p>
<hr>
<p>It also features a new <strong>HTML preview tab</strong> for function components</p>
<p></p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/3X/9/e/9e116b73f79f292b87a851f0487d62da9c11aca2.jpeg" data-download-href="https://forum.elixirforum.com/uploads/default/9e116b73f79f292b87a851f0487d62da9c11aca2" title="CleanShot 2025-01-07 at 15.14.15@2x" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/optimized/3X/9/e/9e116b73f79f292b87a851f0487d62da9c11aca2_2_690x358.jpeg" alt="CleanShot 2025-01-07 at 15.14.15@2x" data-base62-sha1="mykLeVyG0pzDP1vB0jcKe1ZTgZA" width="690" height="358" srcset="https://forum.elixirforum.com/uploads/default/optimized/3X/9/e/9e116b73f79f292b87a851f0487d62da9c11aca2_2_690x358.jpeg, https://forum.elixirforum.com/uploads/default/optimized/3X/9/e/9e116b73f79f292b87a851f0487d62da9c11aca2_2_1035x537.jpeg 1.5x, https://forum.elixirforum.com/uploads/default/optimized/3X/9/e/9e116b73f79f292b87a851f0487d62da9c11aca2_2_1380x716.jpeg 2x" data-dominant-color="C5C8CE"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">CleanShot 2025-01-07 at 15.14.15@2x</span><span class="informations">2772×1440 139 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div><p></p>
<hr>
<p><img src="https://forum.elixirforum.com/images/emoji/apple/warning.png?v=15" title=":warning:" class="emoji" alt=":warning:" loading="lazy" width="20" height="20"> it now requires <code>phoenix_live_view 1.0.0</code></p>
<hr>
<details>
<summary>
Full changelog 👇</summary>
<ul>
<li><strong>change (breaking!)</strong>: requires <code>phoenix_live_view ~&gt; 1.0.x</code></li>
<li><strong>feature</strong>: <a href="https://github.com/phenixdigital/phoenix_storybook/issues/534" rel="noopener nofollow ugc">new tab to preview function components HTML</a></li>
<li><strong>improvement</strong>: <a href="https://github.com/phenixdigital/phoenix_storybook/issues/514" rel="noopener nofollow ugc">component documentation’s markdown is properly formatted</a></li>
<li><strong>improvement</strong>: <a href="https://github.com/phenixdigital/phoenix_storybook/issues/515" rel="noopener nofollow ugc">component documentation’s attribute stripping can be opted out by configuration</a></li>
<li><strong>improvement</strong>: <a href="https://github.com/phenixdigital/phoenix_storybook/issues/516" rel="noopener nofollow ugc">playground attribute documentation is properly formatted and can be expanded<br>
when written on multiple lines</a>.</li>
<li><strong>improvement</strong>: nested slot attributes are properly displayed in the playground</li>
<li><strong>improvement</strong>: <a href="https://github.com/phenixdigital/phoenix_storybook/issues/529" rel="noopener nofollow ugc">render only component function’s source code for component stories</a></li>
<li><strong>improvement</strong>: <a href="https://github.com/phenixdigital/phoenix_storybook/issues/546" rel="noopener nofollow ugc">updated generator with improved core_components’ stories</a></li>
<li><strong>improvement</strong>: <a href="https://github.com/phenixdigital/phoenix_storybook/issues/548" rel="noopener nofollow ugc">generated code markup is properly wrapped</a></li>
<li><strong>improvement</strong>: <a href="https://github.com/phenixdigital/phoenix_storybook/issues/250" rel="noopener nofollow ugc">storybook can be disabled per environment</a></li>
<li><strong>bugfix</strong>: fixed broken playground for stories using templating features</li>
</ul>
</details> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="351906" data-batch-url="/posts/batch_likers">
                        5
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/phoenix-storybook-a-storybook-like-ui-interface-for-phoenix-components/48890/84">Post #83</a>
	                </div>
	            </div>
              <div id="likers-container-351906" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="351906"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #83"></div>
  </section>
</div>
    <div class="postbit" id="353426" data-post-id="353426">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="cblavier" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/cblavier/120/29763_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  cblavier
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p><strong>0.8.1</strong> is out, this is the first release ever for which I didn’t produce a single line of code.<br>
Thank you <a class="mention" href="/u/xxdavid" rel="nofollow">@xxdavid</a> <a class="mention" href="/u/cschmatzler" rel="nofollow">@cschmatzler</a> <a class="mention" href="/u/sodapopcan" rel="nofollow">@sodapopcan</a> for your contributions! <img src="https://forum.elixirforum.com/images/emoji/apple/pray.png?v=15" title=":pray:" class="emoji" alt=":pray:" loading="lazy" width="20" height="20"></p>
<p>Changelog:</p>
<ul>
<li><strong>improvement</strong>: <a href="https://github.com/phenixdigital/phoenix_storybook/pull/562" rel="noopener nofollow ugc">better formatting of playground’s HTML</a> - <img src="https://forum.elixirforum.com/images/emoji/apple/folded_hands.png?v=15" title=":folded_hands:" class="emoji" alt=":folded_hands:" loading="lazy" width="20" height="20"> <a class="mention" href="/u/xxdavid" rel="nofollow">@xxdavid</a></li>
<li><strong>improvement</strong>: <a href="https://github.com/phenixdigital/phoenix_storybook/pull/561" rel="noopener nofollow ugc">highlight code blocks in components doc</a> - <img src="https://forum.elixirforum.com/images/emoji/apple/folded_hands.png?v=15" title=":folded_hands:" class="emoji" alt=":folded_hands:" loading="lazy" width="20" height="20"> <a class="mention" href="/u/xxdavid" rel="nofollow">@xxdavid</a></li>
<li><strong>improvement</strong>: <a href="https://github.com/phenixdigital/phoenix_storybook/pull/563" rel="noopener nofollow ugc">support ESM imports for scripts</a> - <img src="https://forum.elixirforum.com/images/emoji/apple/folded_hands.png?v=15" title=":folded_hands:" class="emoji" alt=":folded_hands:" loading="lazy" width="20" height="20"> <a class="mention" href="/u/cschmatzler" rel="nofollow">@cschmatzler</a></li>
<li><strong>improvement</strong>: <a href="https://github.com/phenixdigital/phoenix_storybook/pull/565" rel="noopener nofollow ugc">UX tweaks</a> - <img src="https://forum.elixirforum.com/images/emoji/apple/folded_hands.png?v=15" title=":folded_hands:" class="emoji" alt=":folded_hands:" loading="lazy" width="20" height="20"> <a class="mention" href="/u/sodapopcan" rel="nofollow">@sodapopcan</a></li>
</ul> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="353426" data-batch-url="/posts/batch_likers">
                        11
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/phoenix-storybook-a-storybook-like-ui-interface-for-phoenix-components/48890/85">Post #84</a>
	                </div>
	            </div>
              <div id="likers-container-353426" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="353426"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #84"></div>
  </section>
</div>
    <div class="postbit" id="368634" data-post-id="368634">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="cblavier" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/cblavier/120/29763_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  cblavier
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p><img src="https://forum.elixirforum.com/images/emoji/apple/waving_hand.png?v=15" title=":waving_hand:" class="emoji" alt=":waving_hand:" loading="lazy" width="20" height="20"> It’s been a few months!</p>
<p>Version 0.9.0 (and 0.9.1) have just been released. Most of the work focused on migrating to Tailwind 4.x, which turned out to be quite a daunting task! <img src="https://forum.elixirforum.com/images/emoji/apple/scream.png?v=15" title=":scream:" class="emoji" alt=":scream:" loading="lazy" width="20" height="20"></p>
<p>Here the changelog:</p>
<h2><a name="p-368634-v091-2025-07-04-1" class="anchor" href="#p-368634-v091-2025-07-04-1" aria-label="Heading link" rel="nofollow"></a>v0.9.1 (2025-07-04)</h2>
<ul>
<li><strong>bugfix</strong>: asset finger-printing is now an opt-in config var (see <a rel="nofollow">README</a>)</li>
</ul>
<h2><a name="p-368634-v090-2025-07-04-2" class="anchor" href="#p-368634-v090-2025-07-04-2" aria-label="Heading link" rel="nofollow"></a>v0.9.0 (2025-07-04)</h2>
<ul>
<li><strong>change</strong>: <a href="https://github.com/phenixdigital/phoenix_storybook/issues/522" rel="noopener nofollow ugc"><code>phoenix_storybook</code> has been considerably refactored to use the latest Tailwind 4.x.</a></li>
<li><strong>bugfix</strong>: <a href="https://github.com/phenixdigital/phoenix_storybook/issues/609" rel="noopener nofollow ugc"><code>phoenix</code> &amp; <code>phoenix_live_view</code> are no longer bundled in the storybook JS file</a></li>
<li><strong>bugfix</strong>: <a href="https://github.com/phenixdigital/phoenix_storybook/issues/606" rel="noopener nofollow ugc">JSS and CSS assets are served with their MD5 fingerprint</a></li>
<li><strong>bugfix</strong>: <a href="https://github.com/phenixdigital/phoenix_storybook/issues/624" rel="noopener nofollow ugc">color mode is propagated to example stories</a></li>
<li><strong>bugfix</strong>: <a href="https://github.com/phenixdigital/phoenix_storybook/issues/595" rel="noopener nofollow ugc">fixed warnings when generating mix docs</a></li>
</ul> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="368634" data-batch-url="/posts/batch_likers">
                        6
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/phoenix-storybook-a-storybook-like-ui-interface-for-phoenix-components/48890/86">Post #85</a>
	                </div>
	            </div>
              <div id="likers-container-368634" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="368634"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #85"></div>
  </section>
</div>
    <div class="postbit" id="370146" data-post-id="370146">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="pau-riosa" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/pau-riosa/120/18838_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  pau-riosa
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I am working on a component that optionally has a <code>row_click</code> attribute.<br>
How can I pass the value of the <code>row_click</code> attribute (which is JS event) in my functional component for my story to be shown?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="370146" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/phoenix-storybook-a-storybook-like-ui-interface-for-phoenix-components/48890/87">Post #86</a>
	                </div>
	            </div>
              <div id="likers-container-370146" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="370146"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #86"></div>
  </section>
</div>
    <div class="postbit" id="370148" data-post-id="370148">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="pau-riosa" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/pau-riosa/120/18838_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  pau-riosa
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I got it working now,</p>
<pre data-code-wrap="elixir"><code class="lang-elixir"> attributes: %{
          ...
          row_click:
            {:eval,
             ~S"""
             fn id -&gt; 
             %JS{} 
             |&gt; JS.toggle_class( "rotate-180", to: "#icon-user-with-accordion-#{id}") 
             |&gt; JS.toggle_class("hidden", to: "#content-user-with-accordion-#{id}")
             end
             """}
        },
</code></pre> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="370148" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/phoenix-storybook-a-storybook-like-ui-interface-for-phoenix-components/48890/88">Post #87</a>
	                </div>
	            </div>
              <div id="likers-container-370148" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="370148"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #87"></div>
  </section>
</div>
    <div class="postbit" id="370404" data-post-id="370404">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="cblavier" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/cblavier/120/29763_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  cblavier
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p><img src="https://forum.elixirforum.com/images/emoji/apple/police_car_light.png?v=15" title=":police_car_light:" class="emoji" alt=":police_car_light:" loading="lazy" width="20" height="20"> <a href="https://hex.pm/packages/phoenix_storybook/0.9.2" rel="nofollow">0.9.2</a> has been released!</p>
<p><a href="https://github.com/phenixdigital/phoenix_storybook/blob/main/CHANGELOG.md" rel="noopener nofollow ugc">Changelog</a>:</p>
<ul>
<li><strong>feature</strong>: <a href="https://github.com/phenixdigital/phoenix_storybook/issues/517" rel="noopener nofollow ugc">sidebar entries can be sorted</a> (read <code>Index</code> module doc for details)</li>
<li><strong>improvement</strong>: <a href="https://github.com/phenixdigital/phoenix_storybook/issues/646" rel="noopener nofollow ugc">fingerprinting of user assets</a></li>
<li><strong>change</strong>: <a href="https://github.com/phenixdigital/phoenix_storybook/issues/660" rel="noopener nofollow ugc">updated generator with correct otp_app and updated tailwind instructions</a></li>
<li><strong>bugfix</strong>: <a href="https://github.com/phenixdigital/phoenix_storybook/issues/647" rel="noopener nofollow ugc">performance impact of event logs</a></li>
<li><strong>bugfix</strong>: events in the playground couldn’t be unfolded</li>
<li><strong>bugfix</strong>: the storybook JS bundle wasn’t loaded within iframes</li>
<li><strong>bugfix</strong>: <a href="https://github.com/phenixdigital/phoenix_storybook/issues/656" rel="noopener nofollow ugc">anchor icon should appear on hover</a></li>
<li><strong>bugfix</strong>: <a href="https://github.com/phenixdigital/phoenix_storybook/issues/657" rel="noopener nofollow ugc">iframe.js loads before storybook.js when using the module js type </a></li>
</ul>
<p>And a big question: when is it a good time to release a <code>1.0.0</code>? <img src="https://forum.elixirforum.com/images/emoji/apple/sweat_smile.png?v=15" title=":sweat_smile:" class="emoji" alt=":sweat_smile:" loading="lazy" width="20" height="20"></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="370404" data-batch-url="/posts/batch_likers">
                        4
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/phoenix-storybook-a-storybook-like-ui-interface-for-phoenix-components/48890/89">Post #88</a>
	                </div>
	            </div>
              <div id="likers-container-370404" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="370404"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #88"></div>
  </section>
</div>
    <div class="postbit" id="384312" data-post-id="384312">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="cblavier" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/cblavier/120/29763_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  cblavier
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p><a href="https://github.com/phenixdigital/phoenix_storybook" rel="noopener nofollow ugc">1.0.0 is out</a>! <img src="https://forum.elixirforum.com/images/emoji/apple/fire.png?v=15" title=":fire:" class="emoji" alt=":fire:" loading="lazy" width="20" height="20"> <img src="https://forum.elixirforum.com/images/emoji/apple/rocket.png?v=15" title=":rocket:" class="emoji" alt=":rocket:" loading="lazy" width="20" height="20"></p>
<p>Why a <code>1.0.0</code> now?<br>
… because why not? <img src="https://forum.elixirforum.com/images/emoji/apple/sweat_smile.png?v=15" title=":sweat_smile:" class="emoji" alt=":sweat_smile:" loading="lazy" width="20" height="20"></p>
<p>We’ve been using it in production for years, so it feels stable enough!</p>
<p>The <a href="https://github.com/phenixdigital/phoenix_storybook/blob/main/CHANGELOG.md" rel="noopener nofollow ugc">changelog</a>:</p>
<ul>
<li><strong>feature</strong>: <a href="https://github.com/phenixdigital/phoenix_storybook/issues/722" rel="noopener nofollow ugc">support custom light class in color mode sandbox</a></li>
<li><strong>feature</strong>: allow live_component stories to implement <code>handle_info/2</code> for parent message handling (e.g. <code>send_update/2</code>)</li>
<li><strong>improvement</strong>: <a href="https://github.com/phenixdigital/phoenix_storybook/issues/739" rel="noopener nofollow ugc">allow overriding FontAwesome CSS path to use app-provided assets</a></li>
<li><strong>bugfix</strong>: <a href="https://github.com/phenixdigital/phoenix_storybook/issues/699" rel="noopener nofollow ugc">storybook asset hash query param renamed to avoid live reload URL rewriting</a></li>
<li><strong>bugfix</strong>: <a href="https://github.com/phenixdigital/phoenix_storybook/issues/663" rel="noopener nofollow ugc">Error when using hooks defined as a subclass of LiveView’s v1.1 new ViewHook</a></li>
</ul> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="384312" data-batch-url="/posts/batch_likers">
                        4
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/phoenix-storybook-a-storybook-like-ui-interface-for-phoenix-components/48890/90">Post #89</a>
	                </div>
	            </div>
              <div id="likers-container-384312" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="384312"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #89"></div>
  </section>
</div>
    <div class="postbit" id="384679" data-post-id="384679">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="cblavier" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/cblavier/120/29763_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  cblavier
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I just shipped <a href="https://github.com/phenixdigital/phoenix_storybook/pull/771" rel="noopener nofollow ugc">support for permalinks to a component’s source</a> on GitHub and GitLab.<br>
The link includes precise highlighting of the component’s function. <img src="https://forum.elixirforum.com/images/emoji/apple/bullseye.png?v=15" title=":bullseye:" class="emoji" alt=":bullseye:" loading="lazy" width="20" height="20"></p>
<p>          <a href="https://phenixdisplays-misc.s3-eu-west-3.amazonaws.com/CleanShot%202026-03-09%20at%2014.09.09.gif" target="_blank" rel="noopener nofollow ugc" class="onebox">
            <img src="https://phenixdisplays-misc.s3-eu-west-3.amazonaws.com/CleanShot%202026-03-09%20at%2014.09.09.gif" width="690" height="651">
          </a>
</p>
<p><img src="https://forum.elixirforum.com/images/emoji/apple/artist_palette.png?v=15" title=":artist_palette:" class="emoji" alt=":artist_palette:" loading="lazy" width="20" height="20"> Bonus: dedicated icons for GitHub and GitLab.</p>
<p>Now on main, soon in <code>1.1.0</code></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="384679" data-batch-url="/posts/batch_likers">
                        3
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/phoenix-storybook-a-storybook-like-ui-interface-for-phoenix-components/48890/91">Post #90</a>
	                </div>
	            </div>
              <div id="likers-container-384679" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="384679"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #90"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <a class="load-more-button" data-turbo-stream="true" href="/topics/48890/load_more?page=10">Load more posts (4 remaining)</a>
</div></template></turbo-stream>