0.5.1

moonwave.toml

@@ -31,6 +31,7 @@ classes = [
   "IconText",
   "Heading",
   "SwapInput",
+  "Slider",
 ]
 
 [docusaurus]

samples/SettingsMenu/SettingsMenu.story.luau

@@ -13,29 +13,28 @@ local Components = {
 	SettingsMenu = SettingsMenu,
 }
 
-return function(Parent: GuiObject)
-	local Scope = Scoped(Fusion, Components)
-	local Theme = Themer.Theme:now()
+return {
+	story = function(Props)
+		local Scope = Fusion.innerScope(Props.scope, Fusion, Components)
+		local Theme = Themer.Theme:now()
 
-	Scope:Frame {
-		Parent = Parent,
-		Padding = Scope:Computed(function(Use)
-			return UDim.new(0, Use(Theme.StrokeThickness["1"]))
-		end),
-		ListEnabled = true,
-		ListFillDirection = Enum.FillDirection.Horizontal,
-
-		[Children] = {
-			Scope:SettingsMenu {},
-			Themer.Theme:is(BitCave):during(function()
-				return Scope:SettingsMenu {
-					Size = UDim2.fromOffset(380, 0),
-				}
+		Scope:Frame {
+			Parent = Props.target,
+			Padding = Scope:Computed(function(Use)
+				return UDim.new(0, Use(Theme.StrokeThickness["1"]))
 			end),
-		},
-	}
+			ListEnabled = true,
+			ListFillDirection = Enum.FillDirection.Horizontal,
 
-	return function()
-		Scope:doCleanup()
-	end
-end
+			[Children] = {
+				Scope:SettingsMenu {},
+				Themer.Theme:is(BitCave):during(function()
+					return Scope:SettingsMenu {
+						Size = UDim2.fromOffset(380, 0),
+					}
+				end),
+			},
+		}
+	end,
+	fusion = Fusion,
+}

samples/SettingsMenu/init.luau

@@ -70,6 +70,9 @@ return function(Scope: Fusion.Scope<any>, Props: Props)
 						PlaceholderText = "Nickname",
 						CharacterLimit = 20,
 					},
+					Scope:Slider {
+						Unit = 1 / 8,
+					},
 				},
 			},
 			Scope:Button {

samples/Testing/ContextualPalette.story.luau

@@ -46,32 +46,35 @@ local function Palette(Scope: Fusion.Scope<any>, _: any)
 	}
 end
 
-return function(Parent: GuiObject)
-	local Scope = Fusion.scoped(Fusion, Components, {
-		Palette = Palette,
-	})
+return {
+	story = function(Props)
+		local Scope = Fusion.scoped(Fusion, Components, {
+			Palette = Palette,
+		})
 
-	local AnotherTheme = Themer.NewTheme(Scope, {
-		Colors = {
-			Info = { Main = Util.Colors.Blue["600"] },
-		},
-	})
+		local AnotherTheme = Themer.NewTheme(Scope, {
+			Colors = {
+				Info = { Main = Util.Colors.Blue["600"] },
+			},
+		})
 
-	Scope:Base {
-		Parent = Parent,
-		ListEnabled = true,
-		ListFillDirection = Enum.FillDirection.Horizontal,
-		BackgroundTransparency = 1,
+		Scope:Base {
+			Parent = Props.target,
+			ListEnabled = true,
+			ListFillDirection = Enum.FillDirection.Horizontal,
+			BackgroundTransparency = 1,
 
-		[Children] = {
-			Scope:Palette {},
-			Themer.Theme:is(AnotherTheme):during(function()
-				return Scope:Palette {}
-			end),
-		},
-	}
+			[Children] = {
+				Scope:Palette {},
+				Themer.Theme:is(AnotherTheme):during(function()
+					return Scope:Palette {}
+				end),
+			},
+		}
 
-	return function()
-		Scope:doCleanup()
-	end
-end
+		return function()
+			Scope:doCleanup()
+		end
+	end,
+	fusion = Fusion,
+}

src/Components/Avatar.story.luau

@@ -19,8 +19,8 @@ local INDICATOR_COLORS =
 	{ Util.Colors.Red["500"], Util.Colors.Green["400"], Util.Colors.Orange["500"], Util.Colors.Stone["600"] }
 
 return {
-	story = function(Parent: GuiObject)
-		local Scope = Scoped(Fusion, Components)
+	story = function(Props)
+		local Scope = Fusion.innerScope(Props.scope, Fusion, Components)
 		local Theme = Themer.Theme:now()
 
 		local IndicatorColor = Scope:Value(INDICATOR_COLORS[2])
@@ -45,7 +45,7 @@ return {
 		})
 
 		Scope:Frame {
-			Parent = Parent,
+			Parent = Props.target,
 			Padding = Scope:Computed(function(Use)
 				return UDim.new(0, Use(Theme.StrokeThickness["4"]))
 			end),
@@ -101,9 +101,6 @@ return {
 				},
 			},
 		}
-
-		return function()
-			Scope:doCleanup()
-		end
 	end,
+	fusion = Fusion,
 }

src/Components/Badge.story.luau

@@ -18,8 +18,8 @@ local Components = {
 }
 
 return {
-	story = function(Parent: GuiObject)
-		local Scope = Scoped(Fusion, Components)
+	story = function(Props)
+		local Scope = Fusion.innerScope(Props.scope, Fusion, Components)
 		local Theme = Themer.Theme:now()
 
 		local NotificationCount = Scope:Value(0)
@@ -42,7 +42,7 @@ return {
 		})
 
 		Scope:Frame {
-			Parent = Parent,
+			Parent = Props.target,
 			ListEnabled = true,
 			ListPadding = Scope:Computed(function(Use)
 				return UDim.new(0, Use(Theme.Spacing["0.5"]))
@@ -94,9 +94,6 @@ return {
 				},
 			},
 		}
-
-		return function()
-			Scope:doCleanup()
-		end
 	end,
+	fusion = Fusion,
 }

src/Components/Base.story.luau

@@ -4,15 +4,14 @@ local Themer = require(OnyxUI.Themer)
 local Components = require(OnyxUI.Components)
 
 local Children = Fusion.Children
-local Scoped = Fusion.scoped
 
 return {
-	story = function(Parent: GuiObject)
+	story = function(Props)
 		local Theme = Themer.Theme:now()
-		local Scope = Scoped(Fusion, Components)
+		local Scope = Fusion.innerScope(Props.scope, Fusion, Components)
 
 		Scope:Base {
-			Parent = Parent,
+			Parent = Props.target,
 			ListEnabled = true,
 			Padding = Scope:Computed(function(Use)
 				return UDim.new(0, Use(Theme.StrokeThickness["4"]))
@@ -106,9 +105,6 @@ return {
 				},
 			},
 		}
-
-		return function()
-			Scope:doCleanup()
-		end
 	end,
+	fusion = Fusion,
 }

src/Components/Button.story.luau

@@ -16,13 +16,12 @@ local Components = {
 }
 
 return {
-	clipsDescendants = false,
-	story = function(Parent: GuiObject)
-		local Scope = Scoped(Fusion, Components)
+	story = function(Props)
+		local Scope = Fusion.innerScope(Props.scope, Fusion, Components)
 		local Theme = Themer.Theme:now()
 
 		Scope:Frame {
-			Parent = Parent,
+			Parent = Props.target,
 			ListEnabled = true,
 			ListPadding = Scope:Computed(function(Use)
 				return UDim.new(0, Use(Theme.Spacing["0.5"]))
@@ -108,9 +107,6 @@ return {
 				},
 			},
 		}
-
-		return function()
-			Scope:doCleanup()
-		end
 	end,
+	fusion = Fusion,
 }

src/Components/Card.story.luau

@@ -18,12 +18,12 @@ local Components = {
 }
 
 return {
-	story = function(Parent: GuiObject)
-		local Scope = Scoped(Fusion, Components)
+	story = function(Props)
+		local Scope = Fusion.innerScope(Props.scope, Fusion, Components)
 		local Theme = Themer.Theme:now()
 
 		Scope:Frame {
-			Parent = Parent,
+			Parent = Props.target,
 			Size = UDim2.fromOffset(300, 0),
 			AutomaticSize = Enum.AutomaticSize.Y,
 			ListEnabled = true,
@@ -61,9 +61,6 @@ return {
 				},
 			},
 		}
-
-		return function()
-			Scope:doCleanup()
-		end
 	end,
+	fusion = Fusion,
 }

src/Components/Checkbox.story.luau

@@ -15,12 +15,12 @@ local Components = {
 }
 
 return {
-	story = function(Parent: GuiObject)
-		local Scope = Scoped(Fusion, Components)
+	story = function(Props)
+		local Scope = Fusion.innerScope(Props.scope, Fusion, Components)
 		local Theme = Themer.Theme:now()
 
 		Scope:Frame {
-			Parent = Parent,
+			Parent = Props.target,
 			Padding = Scope:Computed(function(Use)
 				return UDim.new(0, Use(Theme.StrokeThickness["1"]))
 			end),
@@ -49,9 +49,6 @@ return {
 				},
 			},
 		}
-
-		return function()
-			Scope:doCleanup()
-		end
 	end,
+	fusion = Fusion,
 }

src/Components/Divider.story.luau

@@ -16,12 +16,12 @@ local Components = {
 }
 
 return {
-	story = function(Parent: GuiObject)
-		local Scope = Scoped(Fusion, Components)
+	story = function(Props)
+		local Scope = Fusion.innerScope(Props.scope, Fusion, Components)
 		local Theme = Themer.Theme:now()
 
 		Scope:Frame {
-			Parent = Parent,
+			Parent = Props.target,
 			Size = UDim2.fromOffset(300, 0),
 			AutomaticSize = Enum.AutomaticSize.Y,
 			ListEnabled = true,
@@ -42,9 +42,6 @@ return {
 				},
 			},
 		}
-
-		return function()
-			Scope:doCleanup()
-		end
 	end,
+	fusion = Fusion,
 }

src/Components/Heading.story.luau

@@ -16,30 +16,27 @@ local Components = {
 }
 
 return {
-	story = function(Parent: GuiObject)
-		local Scope = Scoped(Fusion, Components)
+	story = function(Props)
+		local Scope = Fusion.innerScope(Props.scope, Fusion, Components)
 		local Theme = Themer.Theme:now()
 
 		Scope:Frame {
-			Parent = Parent,
+			Parent = Props.target,
 			ListEnabled = true,
 			ListPadding = Scope:Computed(function(Use)
 				return UDim.new(0, Use(Theme.Spacing["0.5"]))
 			end),
 
 			[Children] = {
 				Scope:Heading {
-					Parent = Parent,
+					Parent = Props.target,
 					Text = "Heading",
 				},
 				Scope:Text {
 					Text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
 				},
 			},
 		}
-
-		return function()
-			Scope:doCleanup()
-		end
 	end,
+	fusion = Fusion,
 }

src/Components/Icon.story.luau

@@ -9,16 +9,13 @@ local Components = {
 }
 
 return {
-	story = function(Parent: GuiObject)
-		local Scope = Scoped(Fusion, Components)
+	story = function(Props)
+		local Scope = Fusion.innerScope(Props.scope, Fusion, Components)
 
 		Scope:Icon {
-			Parent = Parent,
+			Parent = Props.target,
 			Image = "rbxassetid://11560341132",
 		}
-
-		return function()
-			Scope:doCleanup()
-		end
 	end,
+	fusion = Fusion,
 }