Sort sidebar entries

[cblavier]

All entries are currently sorted alphabetically.
We should implement manual sorting, such as custom indexes or a similar method.

[sodapopcan]

Hello again!

So my company very much wants this. If you're open to me taking it on, I've been given the go ahead to do this on the clock.

Do you have an API in mind?

My thinking was to add a callback to PhoenixStorybook.Index. You could either do the whole thing in _root of specify overrides per directory. So with this structure:

storybook/
  _root.index.exs
  menu.story.exs
  buttons/
    _buttons.index.exs
    button.story.exs
    submit.story.exs    

You could do:

# _root.index.exs
def order do
  [
    :menu,
    buttons: [
      :submit,
      :button
    ]
  ]
end

or:

# _root.index.exs
def order, do: [:menu, :buttons]

# _buttons.index.exs
def order, do: [:submit, :button]

Another idea would be to add "weights" to the stories themselves. This option feels harder to maintain, although it could be useful if you always want to sort one story to the top (like a summary/usage page) and have everything else alphabetical.

Lastly, I'm not sure if anyone wants this (I don't think we do) but it would be to define a sort function:

def sort_function, do: &MyApp.sort_function/2

Of course all three could be implemented.

What are your thoughts?

[cblavier]

What about folder_index/0 and a new :index key for entry/1 functions?

• nil indexes are put at the end
• items with the same index are sorted in alphabetical order

defmodule Storybook.CoreComponents do
  use PhoenixStorybook.Index

  def folder_open?, do: true
  def folder_icon, do: {:fa, "box-open", :thin}
  def folder_index, do: 0

  def entry("back"), do: [icon: {:fa, "circle-left", :thin}, index: 0]
  def entry("button"), do: [icon: {:fa, "rectangle-ad", :thin}, index: 1]
  def entry("error"), do: [icon: {:fa, "circle-exclamation", :thin}, index: 2]
  def entry("flash"), do: [icon: {:fa, "bolt", :thin}]
end

WDYT?

[sodapopcan]

Oh ya, I totally forgot about entry/1 as we don't use it. Ya, I'm super happy with this!

[sodapopcan]

Let me know if you would like me to handle this. If so, I can get started tomorrow.

[cblavier]

Yes please!