Advertisement
SirMeme

StoryBook

May 28th, 2022
477
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.20 KB | None | 0 0
  1. What Is Developer Storybook?
  2. Developer Storybook is an internal plugin used by engineers to preview stories of what UI would look like with Roact. Originally, the plans for Developer Storybook were to release it publically under the name "Horsecat", however those plans have since never been elaborated on, and Developer Storybook remains internal. UNTIL NOW OF COURSE.
  3.  
  4. So basically, I found out that inside of the roblox DeveloperFramework module, there were scripts which allowed you to demote whole scripts and convert them from RobloxScriptSecurity to PluginSecurity. Using this knowledge, I created a tool which allows you to convert whole internal plugins to work with PluginSecurity. However, my tool is ass, and there is a better tool made by grilme99 on Github Gist which does the exact same functionality as what I did. Using my tool I converted all of DeveloperStorybook to work with PluginSecurity. I did run into some errors when converting (curse you RegExp), but I was able to convert it properly after a few extra adjustments.
  5.  
  6. Features of Developer Storybook
  7. Developer Storybook looks for modules in certain locations of Studio and checks to see if they have the prefix ".storybook" and are also Roact compatible. They should also be located in a folder within a project called Stories, which is what Developer Storybook looks for. Then, it is loaded into the DeveloperStorybook plugin. From there, you are able to view stories from inside of the plugin. By default, Roblox will load up DeveloperFramework stories, but you can also load up other stories such as UIBlox stories. If a .storybook script is not located inside of a Stories file but still has the .storybook prefix it will be added to a folder in the tree called "Unavailable Stories".
  8.  
  9. The tree system is very complicated and of course you don't want to go looking for certain stories in the editor for a long time until you find one. That's where the search system comes in! Developer Storybook has a built in powerful search feature which allows you to search the story tree to look for certain stories of your choice. It displays the entire tree path for the story, and it doesn't just search folders, it searches FILES as well. This is a pretty powerful tool which makes Developer Storybook powerful.
  10.  
  11. Ever wanted to preview what your UI looks like in different themes? Well, you can do that with Developer Storybook! Storybook allows you to change themes on the fly, and it also allows you to use the default theme you use in Studio as an option as well, there is also live theming so if you change your studio theme it also updates on the fly. Very useful for testing light and dark mode ui themes.
  12.  
  13. Extra Features
  14. - You can collapse all elements inside of a tree. (Wish Roblox would add this natively Cry )
  15. - If configured correctly, Required and Optional props are shown in Roact for your story.
  16. - There are 3 buttons on the bottom right of the plugin window. Explore (which selects the currently running story), Run Tests (not sure at all what this does), and View Source (lets you view the source of a story). Useful for debugging.
  17. - You can embed Storybook in a game (not sure what this does tho)
  18. - Comes built in with already made stories for you to view and stuff.
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement