<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="256711" data-post-id="256711">
  <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>Now on track for <code>0.2.0</code> <img src="https://forum.elixirforum.com/images/emoji/apple/slight_smile.png?v=15" title=":slight_smile:" class="emoji" alt=":slight_smile:" loading="lazy" width="20" height="20"></p>
<p>          <a href="https://phenixdisplays-misc.s3-eu-west-3.amazonaws.com/CleanShot%202022-07-27%20at%2015.56.25.gif" target="_blank" rel="noopener nofollow ugc" class="onebox">
            <img src="https://phenixdisplays-misc.s3-eu-west-3.amazonaws.com/CleanShot%202022-07-27%20at%2015.56.25.gif" width="690" height="500">
          </a>
</p>
<p>Last features:</p>
<ul>
<li>copy/paste code snippets</li>
<li>component sub-navigation</li>
<li>preview your component source code</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="256711" 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/22">Post #21</a>
	                </div>
	            </div>
              <div id="likers-container-256711" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="256711"
                     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 #21"></div>
  </section>
</div>
    <div class="postbit" id="256817" data-post-id="256817">
  <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>Today I shipped the ability to mix regular <strong>page entries</strong> within your storybook content.<br>
We found it useful to share some general UI guidelines with the team.</p>
<p>          <a href="https://phenixdisplays-misc.s3-eu-west-3.amazonaws.com/CleanShot%202022-07-28%20at%2017.39.08.gif" target="_blank" rel="noopener nofollow ugc" class="onebox">
            <img src="https://phenixdisplays-misc.s3-eu-west-3.amazonaws.com/CleanShot%202022-07-28%20at%2017.39.08.gif" width="690" height="669">
          </a>
</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="256817" data-batch-url="/posts/batch_likers">
                        9
                      </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/23">Post #22</a>
	                </div>
	            </div>
              <div id="likers-container-256817" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="256817"
                     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 #22"></div>
  </section>
</div>
    <div class="postbit" id="257099" data-post-id="257099">
  <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>Shipped <a href="https://github.com/phenixdigital/phx_live_storybook/blob/main/CHANGELOG.md" rel="noopener nofollow ugc">0.2.0</a> a few days ago and 0.3.0 is under work with a new responsive UI</p>
<p>          <a href="https://phenixdisplays-misc.s3-eu-west-3.amazonaws.com/CleanShot%202022-08-01%20at%2010.21.34.gif" target="_blank" rel="noopener nofollow ugc" class="onebox">
            <img src="https://phenixdisplays-misc.s3-eu-west-3.amazonaws.com/CleanShot%202022-08-01%20at%2010.21.34.gif" width="690" height="509">
          </a>
</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="257099" data-batch-url="/posts/batch_likers">
                        16
                      </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/24">Post #23</a>
	                </div>
	            </div>
              <div id="likers-container-257099" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="257099"
                     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 #23"></div>
  </section>
</div>
    <div class="postbit" id="257522" data-post-id="257522">
  <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>After a lot of technical code and refactoring (btw I still need help on this <a href="https://forum.elixirforum.com/t/exs-files-evaluated-during-compilation-are-still-available-at-runtime/49350/2" rel="nofollow">topic</a>), I just started working on a pillar feature of the storybook: <strong>component documentation &amp; playground.</strong></p>
<p>It will list and document all your component’s properties, and allow you to play with them interactively.</p>
<p>I wrote an <code>attributes</code> API that mimics forthcoming LiveView 0.18.0 declarative assigns</p>
<p></p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/3X/e/f/ef9cd10363d62c2f721872c50886b226e00172ce.jpeg" data-download-href="https://forum.elixirforum.com/uploads/default/ef9cd10363d62c2f721872c50886b226e00172ce" title="CleanShot 2022-08-05 at 10.45.10" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/original/3X/e/f/ef9cd10363d62c2f721872c50886b226e00172ce.jpeg" alt="CleanShot 2022-08-05 at 10.45.10" data-base62-sha1="ybI5M41jSLm3eZUUhC1j9OcwEsC" width="690" height="234" data-dominant-color="DBDCDC"><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 2022-08-05 at 10.45.10</span><span class="informations">1200×408 39.1 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>Stay tuned <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"></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="257522" 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/25">Post #24</a>
	                </div>
	            </div>
              <div id="likers-container-257522" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="257522"
                     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 #24"></div>
  </section>
</div>
    <div class="postbit" id="257535" data-post-id="257535">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>This is cool! We are slowly migrating over to a more component based structure for our liveview project.<br>
Thanks for you effort, will give it a go soonish. <img src="https://forum.elixirforum.com/images/emoji/apple/slight_smile.png?v=15" title=":slight_smile:" class="emoji" alt=":slight_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="257535" 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/26">Post #25</a>
	                </div>
	            </div>
              <div id="likers-container-257535" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="257535"
                     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 #25"></div>
  </section>
</div>
    <div class="postbit" id="257539" data-post-id="257539">
  <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>Cool! Feel free to give some feedbacks after you tried it.</p>
<p>If you are still building your components library, make sure to have a look at <a href="https://github.com/cblavier/phx_component_helpers" rel="noopener nofollow ugc">our other library</a>, it helped us a lot.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="257539" 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/27">Post #26</a>
	                </div>
	            </div>
              <div id="likers-container-257539" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="257539"
                     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 #26"></div>
  </section>
</div>
    <div class="postbit" id="257558" data-post-id="257558">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>This came at the right time for us, as I was planning to dump all our components on a blank page to aid our designer as we start our topdown redesign with Phoenix Components next week. Now we have this set up for our atomic components. We’re very excited to see how this progresses.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="257558" 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/28">Post #27</a>
	                </div>
	            </div>
              <div id="likers-container-257558" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="257558"
                     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 #27"></div>
  </section>
</div>
    <div class="postbit" id="257705" data-post-id="257705">
  <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 couple of days later, the new playground tab (inspired by what <a class="mention" href="/u/msaraiva" rel="nofollow">@msaraiva</a> did on Surface Catalogue) is shaping up!</p>
<p>          <a href="https://phenixdisplays-misc.s3-eu-west-3.amazonaws.com/CleanShot%202022-08-07%20at%2019.12.55.gif" target="_blank" rel="noopener nofollow ugc" class="onebox">
            <img src="https://phenixdisplays-misc.s3-eu-west-3.amazonaws.com/CleanShot%202022-08-07%20at%2019.12.55.gif" width="690" height="438">
          </a>
</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="257705" data-batch-url="/posts/batch_likers">
                        9
                      </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/29">Post #28</a>
	                </div>
	            </div>
              <div id="likers-container-257705" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="257705"
                     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 #28"></div>
  </section>
</div>
    <div class="postbit" id="258079" data-post-id="258079">
  <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 went through a bit of refactoring to compartmentalize component playground rendering in a dedicated child LiveView.</p>
<p>Below is an example where a component crashes, because of a missing required attribute.<br>
I’m always amazed by seeing the crashed LiveView restart &amp; recover by itself, with 0 lines of code.</p>
<p>          <a href="https://phenixdisplays-misc.s3-eu-west-3.amazonaws.com/CleanShot%202022-08-10%20at%2021.56.09.gif" target="_blank" rel="noopener nofollow ugc" class="onebox">
            <img src="https://phenixdisplays-misc.s3-eu-west-3.amazonaws.com/CleanShot%202022-08-10%20at%2021.56.09.gif" width="690" height="603">
          </a>
</p>
<p>In a further release, it will also help with a real-time state inspection feature.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="258079" 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/30">Post #29</a>
	                </div>
	            </div>
              <div id="likers-container-258079" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="258079"
                     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 #29"></div>
  </section>
</div>
    <div class="postbit" id="258662" data-post-id="258662">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Looking awesome!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="258662" data-batch-url="/posts/batch_likers">
                        2
                      </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/31">Post #30</a>
	                </div>
	            </div>
              <div id="likers-container-258662" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="258662"
                     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 #30"></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=4">Load more posts (64 remaining)</a>
</div></template></turbo-stream>