diff --git a/.moonwave/static/climbOfChaos.png b/.moonwave/static/climbOfChaos.png new file mode 100644 index 0000000..b2946d3 Binary files /dev/null and b/.moonwave/static/climbOfChaos.png differ diff --git a/.moonwave/static/lonekaMenu.png b/.moonwave/static/lonekaMenu.png new file mode 100644 index 0000000..386b369 Binary files /dev/null and b/.moonwave/static/lonekaMenu.png differ diff --git a/.moonwave/static/scribel.png b/.moonwave/static/scribel.png new file mode 100644 index 0000000..1da7ebc Binary files /dev/null and b/.moonwave/static/scribel.png differ diff --git a/docs/in-production.md b/docs/in-production.md index e23f5cf..0f432c7 100644 --- a/docs/in-production.md +++ b/docs/in-production.md @@ -2,14 +2,21 @@ sidebar_position: 6 --- -# Use In Production +import scribel from '/scribel.png'; +import climbOfChaos from '/climbOfChaos.png'; +import lonekaMenu from '/lonekaMenu.png'; + +# Production Usage These projects use OnyxUI to power their user experience: -- [Scribel](https://www.roblox.com/games/18609236852) -- [Climb of Chaos](https://www.roblox.com/games/16882394262) -- [Kitty Dash](https://www.roblox.com/games/14958801951) +* ## [Loneka](https://www.roblox.com/groups/15494708) + * * +* ## [Scribel](https://www.roblox.com/games/18609236852) + * +* ## [Climb of Chaos](https://www.roblox.com/games/16882394262) + * :::tip List your project -If you'd like your game or resource featured here, open an issue or pull request! +If you'd like your game or resource featured here, open an issue or pull request! If it's pretty, I want it listed! ::: \ No newline at end of file diff --git a/docs/intro.md b/docs/intro.md index d6be5e3..a596f48 100644 --- a/docs/intro.md +++ b/docs/intro.md @@ -19,7 +19,7 @@ sidebar_position: 1 ## Project structure -OnyxUI is structured as a collection of modules, separated by folders. This is unconventional, but necessary for exposing types so you can properly build off of OnyxUI. Here's a basic usage sample below: +OnyxUI is structured as a collection of modules. This is unconventional, but necessary for exposing types so you can properly build off of OnyxUI. Here's a basic usage sample below: ```lua local OnyxUI = require(path.to.OnyxUI) diff --git a/docs/styling-props.md b/docs/styling-props.md index 3c35e6a..39fc35e 100644 --- a/docs/styling-props.md +++ b/docs/styling-props.md @@ -10,4 +10,4 @@ For a full list of supported styling props, see the [`Base`](/api/Base) componen ## Use in custom components -To support styling props in your own components, make use of the [`CombineProps`](/api/CombineProps) utility to pass props through automatically. \ No newline at end of file +To support styling props in your own components, make use of the [`CombineProps`](/api/Util#CombineProps) utility to pass props through automatically. \ No newline at end of file diff --git a/docs/utils.md b/docs/util.md similarity index 79% rename from docs/utils.md rename to docs/util.md index ae58bab..21b2f2b 100644 --- a/docs/utils.md +++ b/docs/util.md @@ -11,8 +11,11 @@ Important utilities for UI development. These are also used by OnyxUI itself! Want to ensure your component props are Fusion `Value`s? This makes it a one-line operation. ```lua +local Util = require(OnyxUI.Util) + return function(Props) local MyProp = Util.EnsureValue(Props.MyProp, "string", "Default") +end ``` ## [CombineProps](/api/Util#CombineProps) @@ -20,6 +23,8 @@ return function(Props) Let's say you have a "CustomButton" component, and you want it to support `Size`, `Position`, and other arbitrary properties. Manually implementing all that boilerplate in the component itself is tedious. So let's have `CombineProps` do the passthrough for us: ```lua +local Util = require(OnyxUI.Util) + return function(Props) return BaseButton(Util.CombineProps(Props, { BackgroundTransparency = 0, @@ -34,4 +39,14 @@ end ## [Colors](/api/Util#Colors) -Color shorthands imported from [TailwindCSS's color palette](https://tailwindcss.com/docs/customizing-colors#default-color-palette). So you don't have to worry about color picking anymore. \ No newline at end of file +Color shorthands imported from [TailwindCSS's color palette](https://tailwindcss.com/docs/customizing-colors#default-color-palette). So you don't have to worry about color picking anymore. + +```lua +local Util = require(OnyxUI.Util) + +return function(Props) + return Button { + Color = Util.Colors.Red["500"], -- Shade "500" of Colors.Red + } +end +``` \ No newline at end of file