Skip to main content

Fusion

Fusion is a reactive UI library created and maintained by Daniel P H Fox. flipbook supports Fusion via the packages object. Pass in your installation of Fusion to your Storybook and all stories will be rendered with it.

Storybook​

Project/Fusion.storybook.luau
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local Fusion = require(ReplicatedStorage.Packages.Fusion)

return {
	name = "Fusion",
	storyRoots = {
		script.Parent,
	},
	packages = {
		Fusion = Fusion,
	},
}

Component​

Project/Components/Button.luau
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local Fusion = require(ReplicatedStorage.Packages.Fusion)

local New = Fusion.New
local OnEvent = Fusion.OnEvent

local function FusionButton(props: {
	text: string,
	onActivated: () -> (),
})
	return New("TextButton")({
		Text = props.text,
		TextSize = 16,
		Font = Enum.Font.BuilderSansExtraBold,
		TextColor3 = Color3.fromRGB(50, 50, 50),
		BackgroundColor3 = Color3.fromRGB(255, 255, 255),
		BorderSizePixel = 0,
		Size = UDim2.fromOffset(200, 40),
		[OnEvent("Activated")] = props.onActivated,
	})
end

return FusionButton

Story​

Project/Components/Button.story.luau
local FusionButton = require(script.Parent.FusionButton)

return {
	story = function()
		return FusionButton({
			text = "Click Me",
			onActivated = function()
				print("click")
			end,
		})
	end,
}