diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 0000000..b024fcd --- /dev/null +++ b/.github/workflows/ci.yml @@ -0,0 +1,38 @@ +name: ci + +on: + push: + branches: + - main + + pull_request: + branches: + - main + +jobs: + lint: + name: selene lint + runs-on: ubuntu-latest + steps: + - name: Checkout code + uses: actions/checkout@v3 + + - name: Install Aftman + uses: ok-nick/setup-aftman@v0.4.2 + + - name: Lint src + run: selene src + + style: + name: style + runs-on: ubuntu-latest + steps: + - name: Checkout code + uses: actions/checkout@v3 + + - name: Check code style + uses: JohnnyMorganz/stylua-action@v3 + with: + token: ${{ secrets.GITHUB_TOKEN }} + version: v0.19.1 + args: --check src stories test diff --git a/aftman.toml b/aftman.toml new file mode 100644 index 0000000..4cd22b3 --- /dev/null +++ b/aftman.toml @@ -0,0 +1,6 @@ +[tools] +rojo = "rojo-rbx/rojo@7.3.0" +wally-package-types = "JohnnyMorganz/wally-package-types@1.2.1" +selene = "kampfkarren/selene@0.26.1" +wally = "upliftgames/wally@0.3.1" +StyLua = "JohnnyMorganz/StyLua@0.19.1" diff --git a/foreman.toml b/foreman.toml deleted file mode 100644 index be331d8..0000000 --- a/foreman.toml +++ /dev/null @@ -1,4 +0,0 @@ -[tools] -wally = { source = "upliftgames/wally", version = "0.3.1" } -rojo = { source = "rojo-rbx/rojo", version = "7.0.0" } -selene = { source = "Kampfkarren/selene", version = "0.16" } \ No newline at end of file diff --git a/src/Controller.lua b/src/Controller.lua index 47ddcf8..fb49f2a 100644 --- a/src/Controller.lua +++ b/src/Controller.lua @@ -1,11 +1,11 @@ --!strict -local React = require(script.Parent.React) local Promise = require(script.Parent.Promise) +local React = require(script.Parent.React) local SpringValue = require(script.Parent.SpringValue) +local common = require(script.Parent.types.common) local helpers = require(script.Parent.helpers) local util = require(script.Parent.util) -local common = require(script.Parent.types.common) local Controller = {} Controller.__index = Controller @@ -66,7 +66,7 @@ end Process a single set of props using the given controller. ]] -local function flushUpdate(ctrl, props, isLoop: boolean?) +local function flushUpdate(ctrl, props, _isLoop: boolean?) -- Looping must be handled in this function, or else the values -- would end up looping out-of-sync in many common cases. local loop = props.loop diff --git a/src/Controller.spec.lua b/src/Controller.spec.lua index 0a3e3d3..7f23c0b 100644 --- a/src/Controller.spec.lua +++ b/src/Controller.spec.lua @@ -32,17 +32,17 @@ return function() end) it("should set the initial value of `from` if one is passed to constructor", function() - local styles, api = RoactSpring.Controller.new({ from = { x = 0 } }) + local styles, _api = RoactSpring.Controller.new({ from = { x = 0 } }) expect(styles.x:getValue()).to.equal(0) end) it("should set the initial value of `to` if one is passed to constructor", function() - local styles, api = RoactSpring.Controller.new({ to = { x = 100 } }) + local styles, _api = RoactSpring.Controller.new({ to = { x = 100 } }) expect(styles.x:getValue()).to.equal(100) end) it("should set the initial value of `from` if both `from` and `to` are passed to constructor", function() - local styles, api = RoactSpring.Controller.new({ from = { x = 0 }, to = { x = 100 } }) + local styles, _api = RoactSpring.Controller.new({ from = { x = 0 }, to = { x = 100 } }) expect(styles.x:getValue()).to.equal(0) end) diff --git a/src/SpringValue.lua b/src/SpringValue.lua index ce4679f..0232c5f 100644 --- a/src/SpringValue.lua +++ b/src/SpringValue.lua @@ -1,11 +1,11 @@ local RunService = game:GetService("RunService") -local Promise = require(script.Parent.Promise) -local Signal = require(script.Parent.Signal) local Animation = require(script.Parent.Animation) local AnimationConfig = require(script.Parent.AnimationConfig) -local util = require(script.Parent.util) +local Promise = require(script.Parent.Promise) +local Signal = require(script.Parent.Signal) local helpers = require(script.Parent.helpers) +local util = require(script.Parent.util) local SpringValue = {} SpringValue.__index = SpringValue diff --git a/src/hooks/useSpring.lua b/src/hooks/useSpring.lua index 2c4026d..62f684e 100644 --- a/src/hooks/useSpring.lua +++ b/src/hooks/useSpring.lua @@ -1,9 +1,9 @@ --!strict -local Promise = require(script.Parent.Parent.Promise) local Controller = require(script.Parent.Parent.Controller) +local Promise = require(script.Parent.Parent.Promise) local common = require(script.Parent.Parent.types.common) -local useSprings = require(script.Parent.useSprings) local isRoact17 = require(script.Parent.Parent.isRoact17) +local useSprings = require(script.Parent.useSprings) export type UseSpringApi = { start: (startProps: Controller.ControllerProps) -> typeof(Promise.new()), diff --git a/src/hooks/useSprings.lua b/src/hooks/useSprings.lua index 461c947..44c6195 100644 --- a/src/hooks/useSprings.lua +++ b/src/hooks/useSprings.lua @@ -1,11 +1,11 @@ --!strict -local React = require(script.Parent.Parent.React) -local Promise = require(script.Parent.Parent.Promise) local Controller = require(script.Parent.Parent.Controller) -local util = require(script.Parent.Parent.util) +local Promise = require(script.Parent.Parent.Promise) +local React = require(script.Parent.Parent.React) local common = require(script.Parent.Parent.types.common) local isRoact17 = require(script.Parent.Parent.isRoact17) +local util = require(script.Parent.Parent.util) local useRefKey = if isRoact17 then "current" else "value" diff --git a/src/hooks/useTrail.lua b/src/hooks/useTrail.lua index ffac6e6..4cda571 100644 --- a/src/hooks/useTrail.lua +++ b/src/hooks/useTrail.lua @@ -1,9 +1,9 @@ --!strict -local React = require(script.Parent.Parent.React) local Controller = require(script.Parent.Parent.Controller) +local React = require(script.Parent.Parent.React) +local isRoact17 = require(script.Parent.Parent.isRoact17) local useSprings = require(script.Parent.useSprings) local util = require(script.Parent.Parent.util) -local isRoact17 = require(script.Parent.Parent.isRoact17) local useRefKey = if isRoact17 then "current" else "value" diff --git a/src/init.lua b/src/init.lua index d7d3ec4..5019ccc 100644 --- a/src/init.lua +++ b/src/init.lua @@ -1,8 +1,8 @@ --!strict +local Controller = require(script.Controller) local common = require(script.types.common) local useSprings = require(script.hooks.useSprings) -local Controller = require(script.Controller) export type AnimatableType = common.AnimatableType export type AnimationStyle = common.AnimationStyle diff --git a/stories/components/CircleButton.lua b/stories/components/CircleButton.lua index ec89581..916f3a6 100644 --- a/stories/components/CircleButton.lua +++ b/stories/components/CircleButton.lua @@ -6,28 +6,28 @@ local e = React.createElement local function Button(props) return e("TextButton", { - AnchorPoint = props.AnchorPoint or Vector2.new(0.5, 0.5), - Position = props.Position or UDim2.fromScale(0.5, 0.5), + AnchorPoint = props.AnchorPoint or Vector2.new(0.5, 0.5), + Position = props.Position or UDim2.fromScale(0.5, 0.5), Size = props.Size or UDim2.fromOffset(150, 150), - BackgroundColor3 = Color3.fromRGB(255, 255, 255), - AutoButtonColor = false, - Text = "", + BackgroundColor3 = Color3.fromRGB(255, 255, 255), + AutoButtonColor = false, + Text = "", - [React.Event.Activated] = props[React.Event.Activated], - [React.Event.InputBegan] = props[React.Event.InputBegan], - [React.Event.InputEnded] = props[React.Event.InputEnded], + [React.Event.Activated] = props[React.Event.Activated], + [React.Event.InputBegan] = props[React.Event.InputBegan], + [React.Event.InputEnded] = props[React.Event.InputEnded], }, { - UICorner = e("UICorner", { - CornerRadius = UDim.new(1, 0), - }), - UIGradient = e("UIGradient", { - Color = ColorSequence.new({ - ColorSequenceKeypoint.new(0, Color3.fromRGB(110, 255, 183)), - ColorSequenceKeypoint.new(1, Color3.fromRGB(255, 119, 253)), - }), - Rotation = 25, - }), - }) + UICorner = e("UICorner", { + CornerRadius = UDim.new(1, 0), + }), + UIGradient = e("UIGradient", { + Color = ColorSequence.new({ + ColorSequenceKeypoint.new(0, Color3.fromRGB(110, 255, 183)), + ColorSequenceKeypoint.new(1, Color3.fromRGB(255, 119, 253)), + }), + Rotation = 25, + }), + }) end return Button diff --git a/stories/hooks/useSpringBouncePause.story.lua b/stories/hooks/useSpringBouncePause.story.lua index 0c4c6fb..7402171 100644 --- a/stories/hooks/useSpringBouncePause.story.lua +++ b/stories/hooks/useSpringBouncePause.story.lua @@ -1,39 +1,39 @@ --!strict local ReplicatedStorage = game:GetService("ReplicatedStorage") +local CircleButton = require(script.Parent.Parent.components.CircleButton) local React = require(ReplicatedStorage.Packages.React) local ReactRoblox = require(ReplicatedStorage.Packages.ReactRoblox) local RoactSpring = require(ReplicatedStorage.Packages.RoactSpring) -local CircleButton = require(script.Parent.Parent.components.CircleButton) local e = React.createElement local PAUSE_AFTER_SECONDS = 1.5 local function Button(_) - local styles, api = RoactSpring.useSpring(function() - return { - position = UDim2.fromScale(0.5, 0.5), - } - end) + local styles, api = RoactSpring.useSpring(function() + return { + position = UDim2.fromScale(0.5, 0.5), + } + end) return e(CircleButton, { - Position = styles.position, - [React.Event.Activated] = function() - api.start({ - to = { position = UDim2.fromScale(0.5, 0.8) }, - config = { bounce = 1, tension = 180, friction = 0 }, - }) - task.wait(PAUSE_AFTER_SECONDS) - api.pause() - end + Position = styles.position, + [React.Event.Activated] = function() + api.start({ + to = { position = UDim2.fromScale(0.5, 0.8) }, + config = { bounce = 1, tension = 180, friction = 0 }, + }) + task.wait(PAUSE_AFTER_SECONDS) + api.pause() + end, }) end return function(target) local root = ReactRoblox.createRoot(Instance.new("Folder")) - root:render(ReactRoblox.createPortal({ - App = e(Button) - }, target)) + root:render(ReactRoblox.createPortal({ + App = e(Button), + }, target)) return function() root:unmount() diff --git a/stories/hooks/useSpringBounceStop.story.lua b/stories/hooks/useSpringBounceStop.story.lua index baf61de..d3a7a61 100644 --- a/stories/hooks/useSpringBounceStop.story.lua +++ b/stories/hooks/useSpringBounceStop.story.lua @@ -1,39 +1,39 @@ --!strict local ReplicatedStorage = game:GetService("ReplicatedStorage") +local CircleButton = require(script.Parent.Parent.components.CircleButton) local React = require(ReplicatedStorage.Packages.React) local ReactRoblox = require(ReplicatedStorage.Packages.ReactRoblox) local RoactSpring = require(ReplicatedStorage.Packages.RoactSpring) -local CircleButton = require(script.Parent.Parent.components.CircleButton) local e = React.createElement local STOP_AFTER_SECONDS = 3 local function Button(_) - local styles, api = RoactSpring.useSpring(function() - return { - position = UDim2.fromScale(0.5, 0.3), - } - end) + local styles, api = RoactSpring.useSpring(function() + return { + position = UDim2.fromScale(0.5, 0.3), + } + end) return e(CircleButton, { - Position = styles.position, - [React.Event.Activated] = function() - api.start({ - to = { position = UDim2.fromScale(0.5, 0.8) }, - config = { mass = 2.5, bounce = 1, tension = 180, friction = 0 }, - }) - task.wait(STOP_AFTER_SECONDS) - api.stop() - end + Position = styles.position, + [React.Event.Activated] = function() + api.start({ + to = { position = UDim2.fromScale(0.5, 0.8) }, + config = { mass = 2.5, bounce = 1, tension = 180, friction = 0 }, + }) + task.wait(STOP_AFTER_SECONDS) + api.stop() + end, }) end return function(target) local root = ReactRoblox.createRoot(Instance.new("Folder")) - root:render(ReactRoblox.createPortal({ - App = e(Button) - }, target)) + root:render(ReactRoblox.createPortal({ + App = e(Button), + }, target)) return function() root:unmount() diff --git a/stories/hooks/useSpringColorDeclarative.story.lua b/stories/hooks/useSpringColorDeclarative.story.lua index 54167ca..627629c 100644 --- a/stories/hooks/useSpringColorDeclarative.story.lua +++ b/stories/hooks/useSpringColorDeclarative.story.lua @@ -8,34 +8,34 @@ local RoactSpring = require(ReplicatedStorage.Packages.RoactSpring) local e = React.createElement local function Button(_) - local toggle, setToggle = React.useState(false) - local styles = RoactSpring.useSpring({ - color = if toggle then Color3.fromRGB(0, 0, 0) else Color3.fromRGB(255, 255, 255), - }) + local toggle, setToggle = React.useState(false) + local styles = RoactSpring.useSpring({ + color = if toggle then Color3.fromRGB(0, 0, 0) else Color3.fromRGB(255, 255, 255), + }) return e("TextButton", { - AnchorPoint = Vector2.new(0.5, 0.5), - Position = UDim2.fromScale(0.5, 0.5), + AnchorPoint = Vector2.new(0.5, 0.5), + Position = UDim2.fromScale(0.5, 0.5), Size = UDim2.fromOffset(200, 200), BackgroundColor3 = styles.color, - AutoButtonColor = false, - Text = "", + AutoButtonColor = false, + Text = "", - [React.Event.Activated] = function() - setToggle(function(prevState) - return not prevState - end) - end, + [React.Event.Activated] = function() + setToggle(function(prevState) + return not prevState + end) + end, }, { - UICorner = e("UICorner"), - }) + UICorner = e("UICorner"), + }) end return function(target) local root = ReactRoblox.createRoot(Instance.new("Folder")) - root:render(ReactRoblox.createPortal({ - App = e(Button) - }, target)) + root:render(ReactRoblox.createPortal({ + App = e(Button), + }, target)) return function() root:unmount() diff --git a/stories/hooks/useSpringDeclarative.story.lua b/stories/hooks/useSpringDeclarative.story.lua index 28966d7..c89d395 100644 --- a/stories/hooks/useSpringDeclarative.story.lua +++ b/stories/hooks/useSpringDeclarative.story.lua @@ -1,37 +1,37 @@ --!strict local ReplicatedStorage = game:GetService("ReplicatedStorage") +local CircleButton = require(script.Parent.Parent.components.CircleButton) local React = require(ReplicatedStorage.Packages.React) local ReactRoblox = require(ReplicatedStorage.Packages.ReactRoblox) local RoactSpring = require(ReplicatedStorage.Packages.RoactSpring) -local CircleButton = require(script.Parent.Parent.components.CircleButton) local e = React.createElement local function Button(_) - local toggle, setToggle = React.useState(false) - local styles = RoactSpring.useSpring({ - position = if toggle then UDim2.fromScale(0.7, 0.5) else UDim2.fromScale(0.3, 0.5), - config = if toggle then { tension = 200 } else { tension = 50 }, - }, { toggle }) + local toggle, setToggle = React.useState(false) + local styles = RoactSpring.useSpring({ + position = if toggle then UDim2.fromScale(0.7, 0.5) else UDim2.fromScale(0.3, 0.5), + config = if toggle then { tension = 200 } else { tension = 50 }, + }, { toggle }) return e(CircleButton, { - Position = styles.position, - [React.Event.Activated] = function() - setToggle(function(prevState) - return not prevState - end) - end, + Position = styles.position, + [React.Event.Activated] = function() + setToggle(function(prevState) + return not prevState + end) + end, }) end return function(target) local root = ReactRoblox.createRoot(Instance.new("Folder")) - root:render(ReactRoblox.createPortal({ - App = e(Button) - }, target)) + root:render(ReactRoblox.createPortal({ + App = e(Button), + }, target)) return function() root:unmount() end -end \ No newline at end of file +end diff --git a/stories/hooks/useSpringDrag.story.lua b/stories/hooks/useSpringDrag.story.lua index 1b0463f..d405f19 100644 --- a/stories/hooks/useSpringDrag.story.lua +++ b/stories/hooks/useSpringDrag.story.lua @@ -4,63 +4,70 @@ must be viewed in the Roblox Studio window to work properly. ]] +local GuiService = game:GetService("GuiService") local ReplicatedStorage = game:GetService("ReplicatedStorage") local RunService = game:GetService("RunService") local UserInputService = game:GetService("UserInputService") -local GuiService = game:GetService("GuiService") +local CircleButton = require(script.Parent.Parent.components.CircleButton) local React = require(ReplicatedStorage.Packages.React) local ReactRoblox = require(ReplicatedStorage.Packages.ReactRoblox) local RoactSpring = require(ReplicatedStorage.Packages.RoactSpring) -local CircleButton = require(script.Parent.Parent.components.CircleButton) local e = React.createElement local function Button(_) - local styles, api = RoactSpring.useSpring(function() - return { - size = UDim2.fromOffset(150, 150), - position = UDim2.fromScale(0.5, 0.5), - config = { tension = 100, friction = 10 }, - } - end) - local connection = React.useRef(nil :: RBXScriptConnection?) + local styles, api = RoactSpring.useSpring(function() + return { + size = UDim2.fromOffset(150, 150), + position = UDim2.fromScale(0.5, 0.5), + config = { tension = 100, friction = 10 }, + } + end) + local connection = React.useRef(nil :: RBXScriptConnection?) return e(CircleButton, { - Position = styles.position, + Position = styles.position, Size = styles.size, - [React.Event.InputBegan] = function(_, input) - if input.UserInputType == Enum.UserInputType.MouseButton1 or input.UserInputType == Enum.UserInputType.Touch then - if not connection.current then - connection.current = RunService.Heartbeat:Connect(function() - local mousePos = UserInputService:GetMouseLocation() - Vector2.new(0, GuiService:GetGuiInset().Y) + [React.Event.InputBegan] = function(_, input) + if + input.UserInputType == Enum.UserInputType.MouseButton1 + or input.UserInputType == Enum.UserInputType.Touch + then + if not connection.current then + connection.current = RunService.Heartbeat:Connect(function() + local mousePos = UserInputService:GetMouseLocation() + - Vector2.new(0, GuiService:GetGuiInset().Y) - api.start({ - position = UDim2.fromOffset(mousePos.X, mousePos.Y), - size = UDim2.fromOffset(180, 180), - }) - end) - end - end - end, - [React.Event.InputEnded] = function(_,input) - if input.UserInputType == Enum.UserInputType.MouseButton1 or input.UserInputType == Enum.UserInputType.Touch then - if connection.current then - api.start({ size = UDim2.fromOffset(150, 150) }) - connection.current:Disconnect() - connection.current = nil - end - end - end + api.start({ + position = UDim2.fromOffset(mousePos.X, mousePos.Y), + size = UDim2.fromOffset(180, 180), + }) + end) + end + end + end, + [React.Event.InputEnded] = function(_, input) + if + input.UserInputType == Enum.UserInputType.MouseButton1 + or input.UserInputType == Enum.UserInputType.Touch + then + if connection.current then + api.start({ size = UDim2.fromOffset(150, 150) }) + connection.current:Disconnect() + connection.current = nil + end + end + end, }) end return function(target) local root = ReactRoblox.createRoot(Instance.new("Folder")) - root:render(ReactRoblox.createPortal({ - App = e(Button) - }, target)) + root:render(ReactRoblox.createPortal({ + App = e(Button), + }, target)) return function() root:unmount() diff --git a/stories/hooks/useSpringEasingClick.story.lua b/stories/hooks/useSpringEasingClick.story.lua index 662c335..ff66507 100644 --- a/stories/hooks/useSpringEasingClick.story.lua +++ b/stories/hooks/useSpringEasingClick.story.lua @@ -4,50 +4,53 @@ must be viewed in the Roblox Studio window to work properly. ]] +local GuiService = game:GetService("GuiService") local ReplicatedStorage = game:GetService("ReplicatedStorage") local UserInputService = game:GetService("UserInputService") -local GuiService = game:GetService("GuiService") +local CircleButton = require(script.Parent.Parent.components.CircleButton) local React = require(ReplicatedStorage.Packages.React) local ReactRoblox = require(ReplicatedStorage.Packages.ReactRoblox) local RoactSpring = require(ReplicatedStorage.Packages.RoactSpring) -local CircleButton = require(script.Parent.Parent.components.CircleButton) local e = React.createElement local function Button(_) - local styles, api = RoactSpring.useSpring(function() - return { - position = UDim2.fromScale(0.5, 0.5), - } - end) - - React.useEffect(function() - local conn = UserInputService.InputEnded:Connect(function(input) - if input.UserInputType == Enum.UserInputType.MouseButton1 or input.UserInputType == Enum.UserInputType.Touch then - local mousePos = UserInputService:GetMouseLocation() - Vector2.new(0, GuiService:GetGuiInset().Y) - api.start({ - position = UDim2.fromOffset(mousePos.X, mousePos.Y), - config = { duration = 3, easing = RoactSpring.easings.easeInElastic }, - }) - end - end) - - return function() - conn:Disconnect() - end - end) + local styles, api = RoactSpring.useSpring(function() + return { + position = UDim2.fromScale(0.5, 0.5), + } + end) + + React.useEffect(function() + local conn = UserInputService.InputEnded:Connect(function(input) + if + input.UserInputType == Enum.UserInputType.MouseButton1 + or input.UserInputType == Enum.UserInputType.Touch + then + local mousePos = UserInputService:GetMouseLocation() - Vector2.new(0, GuiService:GetGuiInset().Y) + api.start({ + position = UDim2.fromOffset(mousePos.X, mousePos.Y), + config = { duration = 3, easing = RoactSpring.easings.easeInElastic }, + }) + end + end) + + return function() + conn:Disconnect() + end + end) return e(CircleButton, { - Position = styles.position, + Position = styles.position, }) end return function(target) local root = ReactRoblox.createRoot(Instance.new("Folder")) - root:render(ReactRoblox.createPortal({ - App = e(Button) - }, target)) + root:render(ReactRoblox.createPortal({ + App = e(Button), + }, target)) return function() root:unmount() diff --git a/stories/hooks/useSpringFromDeclarative.story.lua b/stories/hooks/useSpringFromDeclarative.story.lua index 06049a3..4d410e5 100644 --- a/stories/hooks/useSpringFromDeclarative.story.lua +++ b/stories/hooks/useSpringFromDeclarative.story.lua @@ -1,35 +1,35 @@ --!strict local ReplicatedStorage = game:GetService("ReplicatedStorage") +local CircleButton = require(script.Parent.Parent.components.CircleButton) local React = require(ReplicatedStorage.Packages.React) local ReactRoblox = require(ReplicatedStorage.Packages.ReactRoblox) local RoactSpring = require(ReplicatedStorage.Packages.RoactSpring) -local CircleButton = require(script.Parent.Parent.components.CircleButton) local e = React.createElement local function Button(_) - local toggle, setToggle = React.useState(false) - local styles = RoactSpring.useSpring({ - from = { position = if toggle then UDim2.fromScale(0.3, 0.2) else UDim2.fromScale(0.7, 0.2) }, - to = { position = if toggle then UDim2.fromScale(0.7, 0.5) else UDim2.fromScale(0.3, 0.5) }, - }, { toggle }) + local toggle, setToggle = React.useState(false) + local styles = RoactSpring.useSpring({ + from = { position = if toggle then UDim2.fromScale(0.3, 0.2) else UDim2.fromScale(0.7, 0.2) }, + to = { position = if toggle then UDim2.fromScale(0.7, 0.5) else UDim2.fromScale(0.3, 0.5) }, + }, { toggle }) return e(CircleButton, { - Position = styles.position, - [React.Event.Activated] = function() - setToggle(function(prevState) - return not prevState - end) - end, + Position = styles.position, + [React.Event.Activated] = function() + setToggle(function(prevState) + return not prevState + end) + end, }) end return function(target) local root = ReactRoblox.createRoot(Instance.new("Folder")) - root:render(ReactRoblox.createPortal({ - App = e(Button) - }, target)) + root:render(ReactRoblox.createPortal({ + App = e(Button), + }, target)) return function() root:unmount() diff --git a/stories/hooks/useSpringFromImperative.story.lua b/stories/hooks/useSpringFromImperative.story.lua index 3740aea..8606916 100644 --- a/stories/hooks/useSpringFromImperative.story.lua +++ b/stories/hooks/useSpringFromImperative.story.lua @@ -1,34 +1,34 @@ --!strict local ReplicatedStorage = game:GetService("ReplicatedStorage") +local CircleButton = require(script.Parent.Parent.components.CircleButton) local React = require(ReplicatedStorage.Packages.React) local ReactRoblox = require(ReplicatedStorage.Packages.ReactRoblox) local RoactSpring = require(ReplicatedStorage.Packages.RoactSpring) -local CircleButton = require(script.Parent.Parent.components.CircleButton) local e = React.createElement local function Button(_) - local styles, api = RoactSpring.useSpring(function() - return { position = UDim2.fromScale(0.5, 0.5) } - end) + local styles, api = RoactSpring.useSpring(function() + return { position = UDim2.fromScale(0.5, 0.5) } + end) return e(CircleButton, { - Position = styles.position, - [React.Event.Activated] = function() - api.start({ - from = { position = UDim2.fromScale(0.2, 0.2) }, - to = { position = UDim2.fromScale(0.5, 0.8) }, - }) - end, + Position = styles.position, + [React.Event.Activated] = function() + api.start({ + from = { position = UDim2.fromScale(0.2, 0.2) }, + to = { position = UDim2.fromScale(0.5, 0.8) }, + }) + end, }) end return function(target) local root = ReactRoblox.createRoot(Instance.new("Folder")) - root:render(ReactRoblox.createPortal({ - App = e(Button) - }, target)) + root:render(ReactRoblox.createPortal({ + App = e(Button), + }, target)) return function() root:unmount() diff --git a/stories/hooks/useSpringImmediate.story.lua b/stories/hooks/useSpringImmediate.story.lua index 8a38dc8..8eb5f22 100644 --- a/stories/hooks/useSpringImmediate.story.lua +++ b/stories/hooks/useSpringImmediate.story.lua @@ -1,34 +1,34 @@ --!strict local ReplicatedStorage = game:GetService("ReplicatedStorage") +local CircleButton = require(script.Parent.Parent.components.CircleButton) local React = require(ReplicatedStorage.Packages.React) local ReactRoblox = require(ReplicatedStorage.Packages.ReactRoblox) local RoactSpring = require(ReplicatedStorage.Packages.RoactSpring) -local CircleButton = require(script.Parent.Parent.components.CircleButton) local e = React.createElement local function Button(_) - local styles, api = RoactSpring.useSpring(function() - return { position = UDim2.fromScale(0.5, 0.5), } - end) + local styles, api = RoactSpring.useSpring(function() + return { position = UDim2.fromScale(0.5, 0.5) } + end) return e(CircleButton, { - Position = styles.position, - [React.Event.Activated] = function() - api.start({ - position = UDim2.fromScale(0.5, 0.8), - immediate = true, - }) - end, + Position = styles.position, + [React.Event.Activated] = function() + api.start({ + position = UDim2.fromScale(0.5, 0.8), + immediate = true, + }) + end, }) end return function(target) local root = ReactRoblox.createRoot(Instance.new("Folder")) - root:render(ReactRoblox.createPortal({ - App = e(Button) - }, target)) + root:render(ReactRoblox.createPortal({ + App = e(Button), + }, target)) return function() root:unmount() diff --git a/stories/hooks/useSpringImperative.story.lua b/stories/hooks/useSpringImperative.story.lua index 619570e..a38fafb 100644 --- a/stories/hooks/useSpringImperative.story.lua +++ b/stories/hooks/useSpringImperative.story.lua @@ -1,34 +1,34 @@ --!strict local ReplicatedStorage = game:GetService("ReplicatedStorage") +local CircleButton = require(script.Parent.Parent.components.CircleButton) local React = require(ReplicatedStorage.Packages.React) local ReactRoblox = require(ReplicatedStorage.Packages.ReactRoblox) local RoactSpring = require(ReplicatedStorage.Packages.RoactSpring) -local CircleButton = require(script.Parent.Parent.components.CircleButton) local e = React.createElement local function Button(_) - local styles, api = RoactSpring.useSpring(function() - return { position = UDim2.fromScale(0.5, 0.5) } - end) + local styles, api = RoactSpring.useSpring(function() + return { position = UDim2.fromScale(0.5, 0.5) } + end) return e(CircleButton, { - Position = styles.position, + Position = styles.position, - [React.Event.Activated] = function() - api.start({ - position = UDim2.fromScale(0.5, 0.8), - }) - end, + [React.Event.Activated] = function() + api.start({ + position = UDim2.fromScale(0.5, 0.8), + }) + end, }) end return function(target) local root = ReactRoblox.createRoot(Instance.new("Folder")) - root:render(ReactRoblox.createPortal({ - App = e(Button) - }, target)) + root:render(ReactRoblox.createPortal({ + App = e(Button), + }, target)) return function() root:unmount() diff --git a/stories/hooks/useSpringLoop.story.lua b/stories/hooks/useSpringLoop.story.lua index 137e5c9..3d8729b 100644 --- a/stories/hooks/useSpringLoop.story.lua +++ b/stories/hooks/useSpringLoop.story.lua @@ -8,28 +8,28 @@ local RoactSpring = require(ReplicatedStorage.Packages.RoactSpring) local e = React.createElement local function Button(_) - local styles = RoactSpring.useSpring({ - from = { transparency = 0 }, - to = { transparency = 1 }, - loop = true, - }) + local styles = RoactSpring.useSpring({ + from = { transparency = 0 }, + to = { transparency = 1 }, + loop = true, + }) return e("TextButton", { - AnchorPoint = Vector2.new(0.5, 0.5), - Position = UDim2.fromScale(0.5, 0.5), - Size = UDim2.fromScale(0.5, 0.5), - Transparency = styles.transparency, - Text = "", + AnchorPoint = Vector2.new(0.5, 0.5), + Position = UDim2.fromScale(0.5, 0.5), + Size = UDim2.fromScale(0.5, 0.5), + Transparency = styles.transparency, + Text = "", }, { - UICorner = e("UICorner"), - }) + UICorner = e("UICorner"), + }) end return function(target) local root = ReactRoblox.createRoot(Instance.new("Folder")) - root:render(ReactRoblox.createPortal({ - App = e(Button) - }, target)) + root:render(ReactRoblox.createPortal({ + App = e(Button), + }, target)) return function() root:unmount() diff --git a/stories/hooks/useSpringVelocity.story.lua b/stories/hooks/useSpringVelocity.story.lua index 680fdc6..5510e1d 100644 --- a/stories/hooks/useSpringVelocity.story.lua +++ b/stories/hooks/useSpringVelocity.story.lua @@ -1,38 +1,38 @@ --!strict local ReplicatedStorage = game:GetService("ReplicatedStorage") +local CircleButton = require(script.Parent.Parent.components.CircleButton) local React = require(ReplicatedStorage.Packages.React) local ReactRoblox = require(ReplicatedStorage.Packages.ReactRoblox) local RoactSpring = require(ReplicatedStorage.Packages.RoactSpring) -local CircleButton = require(script.Parent.Parent.components.CircleButton) local e = React.createElement local function Button(_) - local styles, api = RoactSpring.useSpring(function() - return { - position = UDim2.fromScale(0.5, 0.6), - config = { - friction = 8, - velocity = { 0, 0, 0, -5 } - }, - } - end) + local styles, api = RoactSpring.useSpring(function() + return { + position = UDim2.fromScale(0.5, 0.6), + config = { + friction = 8, + velocity = { 0, 0, 0, -5 }, + }, + } + end) return e(CircleButton, { - Position = styles.position, + Position = styles.position, - [React.Event.Activated] = function() - api.start({ position = UDim2.fromScale(0.5, 0.6) }) - end + [React.Event.Activated] = function() + api.start({ position = UDim2.fromScale(0.5, 0.6) }) + end, }) end return function(target) local root = ReactRoblox.createRoot(Instance.new("Folder")) - root:render(ReactRoblox.createPortal({ - App = e(Button) - }, target)) + root:render(ReactRoblox.createPortal({ + App = e(Button), + }, target)) return function() root:unmount() diff --git a/stories/hooks/useSpringsEasing.story.lua b/stories/hooks/useSpringsEasing.story.lua index edd9b4c..ebda739 100644 --- a/stories/hooks/useSpringsEasing.story.lua +++ b/stories/hooks/useSpringsEasing.story.lua @@ -10,72 +10,75 @@ local e = React.createElement local easingsArray = {} for name, easing in pairs(RoactSpring.easings) do - table.insert(easingsArray, { - name = name, - easing = easing, - }) + table.insert(easingsArray, { + name = name, + easing = easing, + }) end local function Button(_) - local toggle, setToggle = React.useState(false) + local toggle, setToggle = React.useState(false) - local springProps = {} - for i in ipairs(easingsArray) do - table.insert(springProps, { - position = UDim2.fromScale(if toggle then 0.8 else 0.2, 0.05 + i * 0.03), - config = { easing = easingsArray[i].easing, duration = 2 }, - }) - end - local springs = RoactSpring.useSprings(#easingsArray, springProps) + local springProps = {} + for i in ipairs(easingsArray) do + table.insert(springProps, { + position = UDim2.fromScale(if toggle then 0.8 else 0.2, 0.05 + i * 0.03), + config = { easing = easingsArray[i].easing, duration = 2 }, + }) + end + local springs = RoactSpring.useSprings(#easingsArray, springProps) - React.useEffect(function() - local conn = UserInputService.InputEnded:Connect(function(input) - if input.UserInputType == Enum.UserInputType.MouseButton1 or input.UserInputType == Enum.UserInputType.Touch then - setToggle(function(prevState) - return not prevState - end) - end - end) + React.useEffect(function() + local conn = UserInputService.InputEnded:Connect(function(input) + if + input.UserInputType == Enum.UserInputType.MouseButton1 + or input.UserInputType == Enum.UserInputType.Touch + then + setToggle(function(prevState) + return not prevState + end) + end + end) - return function() - conn:Disconnect() - end - end, {}) + return function() + conn:Disconnect() + end + end, {}) - local buttons = {} + local buttons = {} - for index, easing in ipairs(easingsArray) do - buttons[easing.name] = e(React.Fragment, nil, { - Button = e("TextButton", { - AnchorPoint = Vector2.new(0.5, 0.5), - Position = springs[index].position, - Size = UDim2.fromOffset(15, 15), - BackgroundColor3 = Color3.fromRGB(255, 255, 255), - Text = "", - }, { - UICorner = e("UICorner"), - }), - Label = e("TextLabel", { - AnchorPoint = Vector2.new(1, 0.5), - Position = UDim2.fromScale(0.18, 0.05 + index * 0.03), - Size = UDim2.fromOffset(0, 0), - BackgroundTransparency = 1, - Text = easing.name, - TextSize = 10, - TextColor3 = Color3.fromRGB(255, 255, 255), - TextXAlignment = Enum.TextXAlignment.Right, - }), - }) - end + for index, easing in ipairs(easingsArray) do + buttons[easing.name] = e(React.Fragment, nil, { + Button = e("TextButton", { + AnchorPoint = Vector2.new(0.5, 0.5), + Position = springs[index].position, + Size = UDim2.fromOffset(15, 15), + BackgroundColor3 = Color3.fromRGB(255, 255, 255), + Text = "", + }, { + UICorner = e("UICorner"), + }), + Label = e("TextLabel", { + AnchorPoint = Vector2.new(1, 0.5), + Position = UDim2.fromScale(0.18, 0.05 + index * 0.03), + Size = UDim2.fromOffset(0, 0), + BackgroundTransparency = 1, + Text = easing.name, + TextSize = 10, + TextColor3 = Color3.fromRGB(255, 255, 255), + TextXAlignment = Enum.TextXAlignment.Right, + }), + }) + end return e(React.Fragment, nil, buttons) end return function(target) local root = ReactRoblox.createRoot(Instance.new("Folder")) - root:render(ReactRoblox.createPortal({ - App = e(Button) - }, target)) + root:render(ReactRoblox.createPortal({ + App = e(Button), + }, target)) return function() root:unmount() diff --git a/stories/hooks/useSpringsList.story.lua b/stories/hooks/useSpringsList.story.lua index be413bd..bab3975 100644 --- a/stories/hooks/useSpringsList.story.lua +++ b/stories/hooks/useSpringsList.story.lua @@ -4,10 +4,10 @@ must be viewed in the Roblox Studio window to work properly. ]] +local GuiService = game:GetService("GuiService") local ReplicatedStorage = game:GetService("ReplicatedStorage") local RunService = game:GetService("RunService") local UserInputService = game:GetService("UserInputService") -local GuiService = game:GetService("GuiService") local React = require(ReplicatedStorage.Packages.React) local ReactRoblox = require(ReplicatedStorage.Packages.ReactRoblox) @@ -16,168 +16,184 @@ local RoactSpring = require(ReplicatedStorage.Packages.RoactSpring) local e = React.createElement local buttonProps = { - { - text = "LOREM", - gradient = ColorSequence.new({ - ColorSequenceKeypoint.new(0, Color3.fromRGB(240, 215, 72)), - ColorSequenceKeypoint.new(1, Color3.fromRGB(236, 147, 57)), - }), - }, { - text = "IPSUM", - gradient = ColorSequence.new({ - ColorSequenceKeypoint.new(0, Color3.fromRGB(241, 108, 230)), - ColorSequenceKeypoint.new(1, Color3.fromRGB(238, 71, 130)), - }), - }, { - text = "DOLOR", - gradient = ColorSequence.new({ - ColorSequenceKeypoint.new(0, Color3.fromRGB(138, 223, 240)), - ColorSequenceKeypoint.new(1, Color3.fromRGB(172, 119, 224)), - }), - }, { - text = "SIT", - gradient = ColorSequence.new({ - ColorSequenceKeypoint.new(0, Color3.fromRGB(177, 223, 233)), - ColorSequenceKeypoint.new(1, Color3.fromRGB(151, 182, 224)), - }), - } + { + text = "LOREM", + gradient = ColorSequence.new({ + ColorSequenceKeypoint.new(0, Color3.fromRGB(240, 215, 72)), + ColorSequenceKeypoint.new(1, Color3.fromRGB(236, 147, 57)), + }), + }, + { + text = "IPSUM", + gradient = ColorSequence.new({ + ColorSequenceKeypoint.new(0, Color3.fromRGB(241, 108, 230)), + ColorSequenceKeypoint.new(1, Color3.fromRGB(238, 71, 130)), + }), + }, + { + text = "DOLOR", + gradient = ColorSequence.new({ + ColorSequenceKeypoint.new(0, Color3.fromRGB(138, 223, 240)), + ColorSequenceKeypoint.new(1, Color3.fromRGB(172, 119, 224)), + }), + }, + { + text = "SIT", + gradient = ColorSequence.new({ + ColorSequenceKeypoint.new(0, Color3.fromRGB(177, 223, 233)), + ColorSequenceKeypoint.new(1, Color3.fromRGB(151, 182, 224)), + }), + }, } local function Button(_) - local springs, api = RoactSpring.useSprings(#buttonProps, function(i) - return { - Position = UDim2.fromScale(0.5, i * 0.16), - Size = UDim2.fromScale(1, 0.13), - ZIndex = 1, - } - end) - local connection = React.useRef(nil :: RBXScriptConnection?) - - local contents = {} - - for index, buttonProp in ipairs(buttonProps) do - contents[index] = e("ImageButton", { - AnchorPoint = Vector2.new(0.5, 0.5), - Position = springs[index].Position, - Size = springs[index].Size, - BackgroundColor3 = Color3.fromRGB(255, 255, 255), - AutoButtonColor = false, - ZIndex = springs[index].ZIndex, - - [React.Event.InputBegan] = function(button, input) - if input.UserInputType == Enum.UserInputType.MouseButton1 or input.UserInputType == Enum.UserInputType.Touch then - connection.current = RunService.Heartbeat:Connect(function() - local mousePos = UserInputService:GetMouseLocation() - Vector2.new(0, GuiService:GetGuiInset().Y) - local yPos = mousePos.Y - local frame = button.Parent - - api.start(function(i) - if i == index then - return { - Position = UDim2.fromScale(0.5, (yPos - frame.AbsolutePosition.Y) / frame.AbsoluteSize.Y), - ZIndex = 10, - immediate = true, - } - end - return { - ZIndex = 1, - immediate = true, - } - end) - - api.start(function(i) - if i == index then - return { - Size = UDim2.new(1, 15, 0.13, 15), - } - end - return {} - end) - - local buttons: { ImageButton } = frame:GetChildren() - - table.sort(buttons, function(a, b) - return a.AbsolutePosition.Y < b.AbsolutePosition.Y - end) - - local sortedButtonNums = {} - for _, v in ipairs(buttons) do - table.insert(sortedButtonNums, tonumber(v.Name)) - end - - api.start(function(i) - if i ~= index then - return { - Position = UDim2.fromScale(0.5, ((table.find(sortedButtonNums, i) or 1) - 1) * 0.16 + 0.16), - } - end - return {} - end) - end) - end - end, - [React.Event.InputEnded] = function(button,input) - if input.UserInputType == Enum.UserInputType.MouseButton1 or input.UserInputType == Enum.UserInputType.Touch then - if connection.current then - connection.current:Disconnect() - connection.current = nil - end - - local buttons = button.Parent:GetChildren() - - table.sort(buttons, function(a, b) - return a.AbsolutePosition.Y < b.AbsolutePosition.Y - end) - - local sortedButtonNums = {} - for _, v in ipairs(buttons) do - table.insert(sortedButtonNums, tonumber(v.Name)) - end - - api.start(function(i) - return { - Position = UDim2.fromScale(0.5, ((table.find(sortedButtonNums, i) or 1) - 1) * 0.16 + 0.16), - Size = UDim2.fromScale(1, 0.13), - } - end) - end - end - }, { - UICorner = e("UICorner"), - UIGradient = e("UIGradient", { - Color = buttonProp.gradient, - }), - UIStroke = e("UIStroke", { - ApplyStrokeMode = Enum.ApplyStrokeMode.Border, - Color = Color3.fromRGB(95, 95, 95), - Thickness = 2, - Transparency = 0, - }, { - UIGradient = e("UIGradient", { - Rotation = -90, - Transparency = NumberSequence.new({ - NumberSequenceKeypoint.new(0, 0.85), - NumberSequenceKeypoint.new(1, 1), - }), - }), - }), - Label = e("TextLabel", { - AnchorPoint = Vector2.new(0.5, 0.5), - Position = UDim2.fromScale(0.5, 0.5), - Size = UDim2.fromScale(0.7, 0.7), - BackgroundTransparency = 1, - TextColor3 = Color3.fromRGB(255, 255, 255), - Text = buttonProp.text, - TextSize = 22, - TextXAlignment = Enum.TextXAlignment.Left, - ZIndex = springs[index].ZIndex, - }), - }) - end + local springs, api = RoactSpring.useSprings(#buttonProps, function(i) + return { + Position = UDim2.fromScale(0.5, i * 0.16), + Size = UDim2.fromScale(1, 0.13), + ZIndex = 1, + } + end) + local connection = React.useRef(nil :: RBXScriptConnection?) + + local contents = {} + + for index, buttonProp in ipairs(buttonProps) do + contents[index] = e("ImageButton", { + AnchorPoint = Vector2.new(0.5, 0.5), + Position = springs[index].Position, + Size = springs[index].Size, + BackgroundColor3 = Color3.fromRGB(255, 255, 255), + AutoButtonColor = false, + ZIndex = springs[index].ZIndex, + + [React.Event.InputBegan] = function(button, input) + if + input.UserInputType == Enum.UserInputType.MouseButton1 + or input.UserInputType == Enum.UserInputType.Touch + then + connection.current = RunService.Heartbeat:Connect(function() + local mousePos = UserInputService:GetMouseLocation() + - Vector2.new(0, GuiService:GetGuiInset().Y) + local yPos = mousePos.Y + local frame = button.Parent + + api.start(function(i) + if i == index then + return { + Position = UDim2.fromScale( + 0.5, + (yPos - frame.AbsolutePosition.Y) / frame.AbsoluteSize.Y + ), + ZIndex = 10, + immediate = true, + } + end + return { + ZIndex = 1, + immediate = true, + } + end) + + api.start(function(i) + if i == index then + return { + Size = UDim2.new(1, 15, 0.13, 15), + } + end + return {} + end) + + local buttons: { ImageButton } = frame:GetChildren() + + table.sort(buttons, function(a, b) + return a.AbsolutePosition.Y < b.AbsolutePosition.Y + end) + + local sortedButtonNums = {} + for _, v in ipairs(buttons) do + table.insert(sortedButtonNums, tonumber(v.Name)) + end + + api.start(function(i) + if i ~= index then + return { + Position = UDim2.fromScale( + 0.5, + ((table.find(sortedButtonNums, i) or 1) - 1) * 0.16 + 0.16 + ), + } + end + return {} + end) + end) + end + end, + [React.Event.InputEnded] = function(button, input) + if + input.UserInputType == Enum.UserInputType.MouseButton1 + or input.UserInputType == Enum.UserInputType.Touch + then + if connection.current then + connection.current:Disconnect() + connection.current = nil + end + + local buttons = button.Parent:GetChildren() + + table.sort(buttons, function(a, b) + return a.AbsolutePosition.Y < b.AbsolutePosition.Y + end) + + local sortedButtonNums = {} + for _, v in ipairs(buttons) do + table.insert(sortedButtonNums, tonumber(v.Name)) + end + + api.start(function(i) + return { + Position = UDim2.fromScale(0.5, ((table.find(sortedButtonNums, i) or 1) - 1) * 0.16 + 0.16), + Size = UDim2.fromScale(1, 0.13), + } + end) + end + end, + }, { + UICorner = e("UICorner"), + UIGradient = e("UIGradient", { + Color = buttonProp.gradient, + }), + UIStroke = e("UIStroke", { + ApplyStrokeMode = Enum.ApplyStrokeMode.Border, + Color = Color3.fromRGB(95, 95, 95), + Thickness = 2, + Transparency = 0, + }, { + UIGradient = e("UIGradient", { + Rotation = -90, + Transparency = NumberSequence.new({ + NumberSequenceKeypoint.new(0, 0.85), + NumberSequenceKeypoint.new(1, 1), + }), + }), + }), + Label = e("TextLabel", { + AnchorPoint = Vector2.new(0.5, 0.5), + Position = UDim2.fromScale(0.5, 0.5), + Size = UDim2.fromScale(0.7, 0.7), + BackgroundTransparency = 1, + TextColor3 = Color3.fromRGB(255, 255, 255), + Text = buttonProp.text, + TextSize = 22, + TextXAlignment = Enum.TextXAlignment.Left, + ZIndex = springs[index].ZIndex, + }), + }) + end return e("Frame", { - AnchorPoint = Vector2.new(0.5, 0.5), - Position = UDim2.fromScale(0.5, 0.5), + AnchorPoint = Vector2.new(0.5, 0.5), + Position = UDim2.fromScale(0.5, 0.5), Size = UDim2.fromScale(0.3, 0.7), BackgroundTransparency = 1, }, contents) @@ -185,9 +201,9 @@ end return function(target) local root = ReactRoblox.createRoot(Instance.new("Folder")) - root:render(ReactRoblox.createPortal({ - App = e(Button) - }, target)) + root:render(ReactRoblox.createPortal({ + App = e(Button), + }, target)) return function() root:unmount() diff --git a/stories/hooks/useTrailFollow.story.lua b/stories/hooks/useTrailFollow.story.lua index a83123c..cd81cda 100644 --- a/stories/hooks/useTrailFollow.story.lua +++ b/stories/hooks/useTrailFollow.story.lua @@ -4,9 +4,9 @@ must be viewed in the Roblox Studio window to work properly. ]] +local GuiService = game:GetService("GuiService") local ReplicatedStorage = game:GetService("ReplicatedStorage") local UserInputService = game:GetService("UserInputService") -local GuiService = game:GetService("GuiService") local React = require(ReplicatedStorage.Packages.React) local ReactRoblox = require(ReplicatedStorage.Packages.ReactRoblox) @@ -15,60 +15,63 @@ local RoactSpring = require(ReplicatedStorage.Packages.RoactSpring) local e = React.createElement local buttonColors = { - Color3.fromRGB(167, 229, 255), - Color3.fromRGB(165, 255, 180), - Color3.fromRGB(255, 203, 179), - Color3.fromRGB(232, 221, 255), + Color3.fromRGB(167, 229, 255), + Color3.fromRGB(165, 255, 180), + Color3.fromRGB(255, 203, 179), + Color3.fromRGB(232, 221, 255), } local function Button(_) - local styles, api = RoactSpring.useTrail(#buttonColors, function(i) - return { - position = UDim2.fromScale(0.5, 0.5), - config = { damping = 1, frequency = 0.3 + i * 0.03 }, - zindex = -i, - } - end) - - React.useEffect(function() - local conn = UserInputService.InputChanged:Connect(function(input) - if input.UserInputType == Enum.UserInputType.MouseMovement or input.UserInputType == Enum.UserInputType.Touch then - local mousePos = UserInputService:GetMouseLocation() - Vector2.new(0, GuiService:GetGuiInset().Y) - api.start(function() - return { position = UDim2.fromOffset(mousePos.X, mousePos.Y) } - end) - end - end) + local styles, api = RoactSpring.useTrail(#buttonColors, function(i) + return { + position = UDim2.fromScale(0.5, 0.5), + config = { damping = 1, frequency = 0.3 + i * 0.03 }, + zindex = -i, + } + end) - return function() - conn:Disconnect() - end - end) + React.useEffect(function() + local conn = UserInputService.InputChanged:Connect(function(input) + if + input.UserInputType == Enum.UserInputType.MouseMovement + or input.UserInputType == Enum.UserInputType.Touch + then + local mousePos = UserInputService:GetMouseLocation() - Vector2.new(0, GuiService:GetGuiInset().Y) + api.start(function() + return { position = UDim2.fromOffset(mousePos.X, mousePos.Y) } + end) + end + end) - local contents = {} + return function() + conn:Disconnect() + end + end) - for index, buttonColor in ipairs(buttonColors) do - contents[index] = e("Frame", { - AnchorPoint = Vector2.new(0.5, 0.5), - Position = styles[index].position, - Size = UDim2.fromOffset(70, 70), - BackgroundColor3 = buttonColor, - ZIndex = styles[index].zindex, - }, { - UICorner = e("UICorner", { - CornerRadius = UDim.new(1, 0), - }), - }) - end + local contents = {} + + for index, buttonColor in ipairs(buttonColors) do + contents[index] = e("Frame", { + AnchorPoint = Vector2.new(0.5, 0.5), + Position = styles[index].position, + Size = UDim2.fromOffset(70, 70), + BackgroundColor3 = buttonColor, + ZIndex = styles[index].zindex, + }, { + UICorner = e("UICorner", { + CornerRadius = UDim.new(1, 0), + }), + }) + end return e(React.Fragment, nil, contents) end return function(target) local root = ReactRoblox.createRoot(Instance.new("Folder")) - root:render(ReactRoblox.createPortal({ - App = e(Button) - }, target)) + root:render(ReactRoblox.createPortal({ + App = e(Button), + }, target)) return function() root:unmount() diff --git a/stories/hooks/useTrailList.story.lua b/stories/hooks/useTrailList.story.lua index b800124..bfc6ea9 100644 --- a/stories/hooks/useTrailList.story.lua +++ b/stories/hooks/useTrailList.story.lua @@ -9,107 +9,113 @@ local RoactSpring = require(ReplicatedStorage.Packages.RoactSpring) local e = React.createElement local buttonProps = { - { - text = "LOREM", - gradient = ColorSequence.new({ - ColorSequenceKeypoint.new(0, Color3.fromRGB(240, 215, 72)), - ColorSequenceKeypoint.new(1, Color3.fromRGB(236, 147, 57)), - }), - }, { - text = "IPSUM", - gradient = ColorSequence.new({ - ColorSequenceKeypoint.new(0, Color3.fromRGB(241, 108, 230)), - ColorSequenceKeypoint.new(1, Color3.fromRGB(238, 71, 130)), - }), - }, { - text = "DOLOR", - gradient = ColorSequence.new({ - ColorSequenceKeypoint.new(0, Color3.fromRGB(138, 223, 240)), - ColorSequenceKeypoint.new(1, Color3.fromRGB(172, 119, 224)), - }), - }, { - text = "SIT", - gradient = ColorSequence.new({ - ColorSequenceKeypoint.new(0, Color3.fromRGB(177, 223, 233)), - ColorSequenceKeypoint.new(1, Color3.fromRGB(151, 182, 224)), - }), - } + { + text = "LOREM", + gradient = ColorSequence.new({ + ColorSequenceKeypoint.new(0, Color3.fromRGB(240, 215, 72)), + ColorSequenceKeypoint.new(1, Color3.fromRGB(236, 147, 57)), + }), + }, + { + text = "IPSUM", + gradient = ColorSequence.new({ + ColorSequenceKeypoint.new(0, Color3.fromRGB(241, 108, 230)), + ColorSequenceKeypoint.new(1, Color3.fromRGB(238, 71, 130)), + }), + }, + { + text = "DOLOR", + gradient = ColorSequence.new({ + ColorSequenceKeypoint.new(0, Color3.fromRGB(138, 223, 240)), + ColorSequenceKeypoint.new(1, Color3.fromRGB(172, 119, 224)), + }), + }, + { + text = "SIT", + gradient = ColorSequence.new({ + ColorSequenceKeypoint.new(0, Color3.fromRGB(177, 223, 233)), + ColorSequenceKeypoint.new(1, Color3.fromRGB(151, 182, 224)), + }), + }, } local function Button(_) - local toggle, setToggle = React.useState(false) + local toggle, setToggle = React.useState(false) - local springProps = {} - for i in ipairs(buttonProps) do - table.insert(springProps, { - position = UDim2.fromScale(if toggle then 0.45 else 0.35, 0.05 + i * 0.15), - transparency = if toggle then 0 else 1, - config = { damping = 1, frequency = 0.3 }, - }) - end - local springs = RoactSpring.useTrail(#buttonProps, springProps) + local springProps = {} + for i in ipairs(buttonProps) do + table.insert(springProps, { + position = UDim2.fromScale(if toggle then 0.45 else 0.35, 0.05 + i * 0.15), + transparency = if toggle then 0 else 1, + config = { damping = 1, frequency = 0.3 }, + }) + end + local springs = RoactSpring.useTrail(#buttonProps, springProps) - React.useEffect(function() - local conn = UserInputService.InputEnded:Connect(function(input) - if input.UserInputType == Enum.UserInputType.MouseButton1 or input.UserInputType == Enum.UserInputType.Touch then - setToggle(function(prevState) - return not prevState - end) - end - end) + React.useEffect(function() + local conn = UserInputService.InputEnded:Connect(function(input) + if + input.UserInputType == Enum.UserInputType.MouseButton1 + or input.UserInputType == Enum.UserInputType.Touch + then + setToggle(function(prevState) + return not prevState + end) + end + end) - return function() - conn:Disconnect() - end - end, {}) + return function() + conn:Disconnect() + end + end, {}) - local buttons = {} + local buttons = {} - for index, buttonProp in ipairs(buttonProps) do - buttons[index] = e("ImageButton", { - AnchorPoint = Vector2.new(0.5, 0.5), - Position = springs[index].position, - Transparency = springs[index].transparency, - Size = UDim2.fromScale(1, 0.13), - BackgroundColor3 = Color3.fromRGB(255, 255, 255), - AutoButtonColor = false, - }, { - UICorner = e("UICorner"), - UIGradient = e("UIGradient", { - Color = buttonProp.gradient, - }), - UIStroke = e("UIStroke", { - ApplyStrokeMode = Enum.ApplyStrokeMode.Border, - Color = Color3.fromRGB(95, 95, 95), - Thickness = 2, - Transparency = springs[index].transparency, - }, { - UIGradient = e("UIGradient", { - Rotation = -90, - Transparency = NumberSequence.new({ - NumberSequenceKeypoint.new(0, 0.85), - NumberSequenceKeypoint.new(1, 1), - }), - }), - }), - Label = e("TextLabel", { - AnchorPoint = Vector2.new(0.5, 0.5), - Position = UDim2.fromScale(0.5, 0.5), - Size = UDim2.fromScale(0.7, 0.7), - BackgroundTransparency = 1, - TextColor3 = Color3.fromRGB(255, 255, 255), - Text = buttonProp.text, - TextSize = 22, - TextXAlignment = Enum.TextXAlignment.Left, - ZIndex = springs[index].ZIndex, - TextTransparency = springs[index].transparency, - }), - }) - end + for index, buttonProp in ipairs(buttonProps) do + buttons[index] = e("ImageButton", { + AnchorPoint = Vector2.new(0.5, 0.5), + Position = springs[index].position, + Transparency = springs[index].transparency, + Size = UDim2.fromScale(1, 0.13), + BackgroundColor3 = Color3.fromRGB(255, 255, 255), + AutoButtonColor = false, + }, { + UICorner = e("UICorner"), + UIGradient = e("UIGradient", { + Color = buttonProp.gradient, + }), + UIStroke = e("UIStroke", { + ApplyStrokeMode = Enum.ApplyStrokeMode.Border, + Color = Color3.fromRGB(95, 95, 95), + Thickness = 2, + Transparency = springs[index].transparency, + }, { + UIGradient = e("UIGradient", { + Rotation = -90, + Transparency = NumberSequence.new({ + NumberSequenceKeypoint.new(0, 0.85), + NumberSequenceKeypoint.new(1, 1), + }), + }), + }), + Label = e("TextLabel", { + AnchorPoint = Vector2.new(0.5, 0.5), + Position = UDim2.fromScale(0.5, 0.5), + Size = UDim2.fromScale(0.7, 0.7), + BackgroundTransparency = 1, + TextColor3 = Color3.fromRGB(255, 255, 255), + Text = buttonProp.text, + TextSize = 22, + TextXAlignment = Enum.TextXAlignment.Left, + ZIndex = springs[index].ZIndex, + TextTransparency = springs[index].transparency, + }), + }) + end return e("Frame", { - AnchorPoint = Vector2.new(0.5, 0.5), - Position = UDim2.fromScale(0.5, 0.5), + AnchorPoint = Vector2.new(0.5, 0.5), + Position = UDim2.fromScale(0.5, 0.5), Size = UDim2.fromScale(0.3, 0.7), BackgroundTransparency = 1, }, buttons) @@ -117,9 +123,9 @@ end return function(target) local root = ReactRoblox.createRoot(Instance.new("Folder")) - root:render(ReactRoblox.createPortal({ - App = e(Button) - }, target)) + root:render(ReactRoblox.createPortal({ + App = e(Button), + }, target)) return function() root:unmount() diff --git a/stories/hooks/useTrailText.story.lua b/stories/hooks/useTrailText.story.lua index cd58252..8427795 100644 --- a/stories/hooks/useTrailText.story.lua +++ b/stories/hooks/useTrailText.story.lua @@ -10,81 +10,80 @@ local e = React.createElement local textList = { "Lorem", "Ipsum", "Dolor", "Sit" } local function Button(_) - local toggle, setToggle = React.useState(true) + local toggle, setToggle = React.useState(true) - local springProps = {} - for _ in ipairs(textList) do - table.insert(springProps, { - size = UDim2.fromScale(1, if toggle then 0.1 else 1), - position = UDim2.fromOffset(if toggle then 0 else 20, 0), - transparency = if toggle then 0 else 1, - config = { damping = 1, frequency = 0.3 }, - }) - end - local springs = RoactSpring.useTrail(#textList, springProps) + local springProps = {} + for _ in ipairs(textList) do + table.insert(springProps, { + size = UDim2.fromScale(1, if toggle then 0.1 else 1), + position = UDim2.fromOffset(if toggle then 0 else 20, 0), + transparency = if toggle then 0 else 1, + config = { damping = 1, frequency = 0.3 }, + }) + end + local springs = RoactSpring.useTrail(#textList, springProps) - local contents = {} + local contents = {} - for index, text in ipairs(textList) do - contents[text] = e("Frame", { - BackgroundTransparency = 1, - Size = UDim2.new(1, 0, 0, 77), - LayoutOrder = index, - }, { - Text = e("TextLabel", { - BackgroundTransparency = 1, - Position = springs[index].position, - Size = UDim2.fromScale(1, 1), - Font = Enum.Font.GothamBlack, - TextColor3 = Color3.fromRGB(0, 0, 0), - TextTransparency = springs[index].transparency, - TextSize = 100, - TextXAlignment = Enum.TextXAlignment.Left, - Text = text, - }, { - Cover = e("Frame", { - AnchorPoint = Vector2.new(0, 1), - Position = UDim2.new(0, 0, 1, 7), - Size = springs[index].size, - BackgroundColor3 = Color3.fromRGB(240, 240, 240), - BorderSizePixel = 0, - }), - }) - - }) - end + for index, text in ipairs(textList) do + contents[text] = e("Frame", { + BackgroundTransparency = 1, + Size = UDim2.new(1, 0, 0, 77), + LayoutOrder = index, + }, { + Text = e("TextLabel", { + BackgroundTransparency = 1, + Position = springs[index].position, + Size = UDim2.fromScale(1, 1), + Font = Enum.Font.GothamBlack, + TextColor3 = Color3.fromRGB(0, 0, 0), + TextTransparency = springs[index].transparency, + TextSize = 100, + TextXAlignment = Enum.TextXAlignment.Left, + Text = text, + }, { + Cover = e("Frame", { + AnchorPoint = Vector2.new(0, 1), + Position = UDim2.new(0, 0, 1, 7), + Size = springs[index].size, + BackgroundColor3 = Color3.fromRGB(240, 240, 240), + BorderSizePixel = 0, + }), + }), + }) + end - return e("TextButton", { - BackgroundColor3 = Color3.fromRGB(240, 240, 240), - Size = UDim2.fromScale(1, 1), - AutoButtonColor = false, - Text = "", + return e("TextButton", { + BackgroundColor3 = Color3.fromRGB(240, 240, 240), + Size = UDim2.fromScale(1, 1), + AutoButtonColor = false, + Text = "", - [React.Event.Activated] = function() - setToggle(function(prevState) - return not prevState - end) - end, - }, { - Frame = e("Frame", { - AnchorPoint = Vector2.new(0.5, 0.5), - Position = UDim2.fromScale(0.5, 0.5), - Size = UDim2.fromOffset(300, 320), - BackgroundTransparency = 1, - }, { - UIListLayout = e("UIListLayout", { - SortOrder = Enum.SortOrder.LayoutOrder, - }), - Text = e(React.Fragment, nil, contents), - }) - }) + [React.Event.Activated] = function() + setToggle(function(prevState) + return not prevState + end) + end, + }, { + Frame = e("Frame", { + AnchorPoint = Vector2.new(0.5, 0.5), + Position = UDim2.fromScale(0.5, 0.5), + Size = UDim2.fromOffset(300, 320), + BackgroundTransparency = 1, + }, { + UIListLayout = e("UIListLayout", { + SortOrder = Enum.SortOrder.LayoutOrder, + }), + Text = e(React.Fragment, nil, contents), + }), + }) end return function(target) local root = ReactRoblox.createRoot(Instance.new("Folder")) - root:render(ReactRoblox.createPortal({ - App = e(Button) - }, target)) + root:render(ReactRoblox.createPortal({ + App = e(Button), + }, target)) return function() root:unmount() diff --git a/stories/others/Spring.story.lua b/stories/others/Spring.story.lua index c9dd2e2..b9c2d22 100644 --- a/stories/others/Spring.story.lua +++ b/stories/others/Spring.story.lua @@ -1,40 +1,40 @@ --!strict local ReplicatedStorage = game:GetService("ReplicatedStorage") +local CircleButton = require(script.Parent.Parent.components.CircleButton) local React = require(ReplicatedStorage.Packages.React) local ReactRoblox = require(ReplicatedStorage.Packages.ReactRoblox) local RoactSpring = require(ReplicatedStorage.Packages.RoactSpring) -local CircleButton = require(script.Parent.Parent.components.CircleButton) local e = React.createElement local Example = React.Component:extend("Example") function Example:init() - self.styles, self.api = RoactSpring.Controller.new({ - position = UDim2.fromScale(0.5, 0.5), - }) + self.styles, self.api = RoactSpring.Controller.new({ + position = UDim2.fromScale(0.5, 0.5), + }) end function Example:render() - return e(CircleButton, { - Position = self.styles.position, - - [React.Event.Activated] = function() - self.api:start({ - position = UDim2.fromScale(0.5, 0.8), - }) - end, + return e(CircleButton, { + Position = self.styles.position, + + [React.Event.Activated] = function() + self.api:start({ + position = UDim2.fromScale(0.5, 0.8), + }) + end, }) end return function(target) local root = ReactRoblox.createRoot(Instance.new("Folder")) - root:render(ReactRoblox.createPortal({ - App = e(Example) - }, target)) + root:render(ReactRoblox.createPortal({ + App = e(Example), + }, target)) return function() root:unmount() end -end \ No newline at end of file +end diff --git a/stories/others/SpringDrag.story.lua b/stories/others/SpringDrag.story.lua index 3e20b68..1f220bd 100644 --- a/stories/others/SpringDrag.story.lua +++ b/stories/others/SpringDrag.story.lua @@ -4,67 +4,74 @@ must be viewed in the Roblox Studio window to work properly. ]] +local GuiService = game:GetService("GuiService") local ReplicatedStorage = game:GetService("ReplicatedStorage") local RunService = game:GetService("RunService") local UserInputService = game:GetService("UserInputService") -local GuiService = game:GetService("GuiService") +local CircleButton = require(script.Parent.Parent.components.CircleButton) local React = require(ReplicatedStorage.Packages.React) local ReactRoblox = require(ReplicatedStorage.Packages.ReactRoblox) local RoactSpring = require(ReplicatedStorage.Packages.RoactSpring) -local CircleButton = require(script.Parent.Parent.components.CircleButton) local e = React.createElement local Example = React.Component:extend("Example") function Example:init() - self.styles, self.api = RoactSpring.Controller.new({ - size = UDim2.fromOffset(150, 150), - position = UDim2.fromScale(0.5, 0.5), - }) + self.styles, self.api = RoactSpring.Controller.new({ + size = UDim2.fromOffset(150, 150), + position = UDim2.fromScale(0.5, 0.5), + }) end function Example:render() return e(CircleButton, { - Position = self.styles.position, + Position = self.styles.position, Size = self.styles.size, - [React.Event.InputBegan] = function(button, input) - if input.UserInputType == Enum.UserInputType.MouseButton1 or input.UserInputType == Enum.UserInputType.Touch then - if not self.connection then - self.connection = RunService.Heartbeat:Connect(function() - local mousePos = UserInputService:GetMouseLocation() - Vector2.new(0, GuiService:GetGuiInset().Y) + [React.Event.InputBegan] = function(button, input) + if + input.UserInputType == Enum.UserInputType.MouseButton1 + or input.UserInputType == Enum.UserInputType.Touch + then + if not self.connection then + self.connection = RunService.Heartbeat:Connect(function() + local mousePos = UserInputService:GetMouseLocation() + - Vector2.new(0, GuiService:GetGuiInset().Y) - self.api:start({ - position = UDim2.fromOffset(mousePos.X, mousePos.Y), - size = UDim2.fromOffset(180, 180), - config = { tension = 100, friction = 10 }, - }) - end) - end - end - end, - [React.Event.InputEnded] = function(_,input) - if input.UserInputType == Enum.UserInputType.MouseButton1 or input.UserInputType == Enum.UserInputType.Touch then - if self.connection then - self.api:start({ - size = UDim2.fromOffset(150, 150), - config = { tension = 100, friction = 10 }, - }) - self.connection:Disconnect() - self.connection = nil - end - end - end + self.api:start({ + position = UDim2.fromOffset(mousePos.X, mousePos.Y), + size = UDim2.fromOffset(180, 180), + config = { tension = 100, friction = 10 }, + }) + end) + end + end + end, + [React.Event.InputEnded] = function(_, input) + if + input.UserInputType == Enum.UserInputType.MouseButton1 + or input.UserInputType == Enum.UserInputType.Touch + then + if self.connection then + self.api:start({ + size = UDim2.fromOffset(150, 150), + config = { tension = 100, friction = 10 }, + }) + self.connection:Disconnect() + self.connection = nil + end + end + end, }) end return function(target) local root = ReactRoblox.createRoot(Instance.new("Folder")) - root:render(ReactRoblox.createPortal({ - App = e(Example) - }, target)) + root:render(ReactRoblox.createPortal({ + App = e(Example), + }, target)) return function() root:unmount() diff --git a/stylua.toml b/stylua.toml new file mode 100644 index 0000000..ed2de71 --- /dev/null +++ b/stylua.toml @@ -0,0 +1,2 @@ +[sort_requires] +enabled = true