Merge pull request #5 from PepeElToro41/dev

UI Labs v1.1.0

Author: PepeElToro41

package.json

@@ -27,6 +27,7 @@
       "@rbxts/colour-utils": "^1.4.1",
       "@rbxts/flipper": "^2.0.1",
       "@rbxts/immut": "^0.4.4-ts.0",
+      "@rbxts/janitor": "^1.15.7-ts.0",
       "@rbxts/pretty-react-hooks": "^0.4.2",
       "@rbxts/react": "^0.3.3",
       "@rbxts/react-reflex": "^0.3.4",
@@ -35,6 +36,6 @@
       "@rbxts/services": "^1.5.1",
       "@rbxts/sift": "^0.0.6",
       "@rbxts/signal": "^1.1.1",
-      "@rbxts/ui-labs": "^2.0.0"
+      "@rbxts/ui-labs": "2.1.0-test1"
    }
 }

src/Context/DescriptionContext.tsx

@@ -3,14 +3,14 @@ import React, { PropsWithChildren, useCallback, useContext, useEffect, useMemo,
 import { Array } from "@rbxts/sift";
 
 interface DescriptionInfo {
-	Name: string;
+	Identifier: unknown;
 	Description: string;
 }
 
 interface DescriptionContext {
 	ActiveDescription: string | undefined;
-	SetDescription: (name: string, description: string) => void;
-	RemoveDescription: (name: string) => void;
+	SetDescription: (identifier: unknown, description: string) => void;
+	RemoveDescription: (identifier: unknown) => void;
 }
 
 const DescriptionContext = React.createContext({} as DescriptionContext);
@@ -22,33 +22,33 @@ export function DescriptionProvider(props: DescriptionProviderProps) {
 	const [currentDescription, setCurrentDescription] = useState<DescriptionInfo>();
 	const [descriptionVisible, setDescriptionVisible] = useState(false);
 
-	const descriptionName = currentDescription && currentDescription.Name;
+	const descriptionName = currentDescription && currentDescription.Identifier;
 
-	const SetDescription = useCallback((name: string, description: string) => {
+	const SetDescription = useCallback((identifier: unknown, description: string) => {
 		setDescriptionArray((oldArray) => {
-			const found = oldArray.find((entry) => entry.Name === name) !== undefined;
+			const found = oldArray.find((entry) => entry.Identifier === identifier) !== undefined;
 			if (found) {
 				//editing existing entry
 				return Array.map(oldArray, (entry) => {
-					if (entry.Name === name) {
-						return { Name: name, Description: description };
+					if (entry.Identifier === identifier) {
+						return { Identifier: identifier, Description: description };
 					} else {
 						return entry;
 					}
 				});
 			} else {
 				//adding new entry
-				return Array.insert(oldArray, 1, { Name: name, Description: description });
+				return Array.insert(oldArray, 1, { Identifier: identifier, Description: description });
 			}
 		});
 	}, []);
-	const RemoveDescription = useCallback((name: string) => {
+	const RemoveDescription = useCallback((identifier: unknown) => {
 		setDescriptionArray((oldArray) => {
-			const found = oldArray.find((entry) => entry.Name === name) !== undefined;
+			const found = oldArray.find((entry) => entry.Identifier === identifier) !== undefined;
 			if (!found) return oldArray;
 
 			return Array.filter(oldArray, (entry) => {
-				return entry.Name !== name;
+				return entry.Identifier !== identifier;
 			});
 		});
 	}, []);
@@ -68,7 +68,7 @@ export function DescriptionProvider(props: DescriptionProviderProps) {
 			setDescriptionVisible(true);
 		},
 		[descriptionName],
-		{ wait: 0.5 },
+		{ wait: 0.7 },
 	);
 
 	const contextValue = useMemo(() => {
@@ -101,17 +101,17 @@ export function useDescriptionControl() {
 	return controls;
 }
 
-export function useDescriptionDisplay(uid: string) {
+export function useDescriptionDisplay(identifier: unknown) {
 	const context = useContext(DescriptionContext);
 
-	const DisplayDescription = useCallback((description: string) => context.SetDescription(uid, description), [uid]);
-	const RemoveDescription = useCallback(() => context.RemoveDescription(uid), [uid]);
+	const DisplayDescription = useCallback((description: string) => context.SetDescription(identifier, description), [identifier]);
+	const RemoveDescription = useCallback(() => context.RemoveDescription(identifier), [identifier]);
 
 	const values = useMemo(() => {
 		return { DisplayDescription, RemoveDescription };
 	}, []);
 
-	useUnmountEffect(() => context.RemoveDescription(uid));
+	useUnmountEffect(() => context.RemoveDescription(identifier));
 
 	return values;
 }

src/Hooks/Reflex/Control/ModuleRequire/StorybookLoader.ts

@@ -17,11 +17,13 @@ export class StorybookLoader {
 		return this.StorybookResult;
 	}
 	Init() {
-		const reloaderResult = HotReloader.require(this.Module);
-		this.HotReloader = reloaderResult.Reloader;
+		const reloader = new HotReloader(this.Module);
+		this.HotReloader = reloader;
 
-		this.OnReloadPromise(reloaderResult.Result);
-		this.HotReloaderConnection = reloaderResult.Reloader.OnReloadStarted.Connect((result) => {
+		this.OnReloadPromise(reloader.Reload());
+		reloader.BindToReload((enviroment) => {});
+
+		this.HotReloaderConnection = reloader.OnReloadStarted.Connect((result) => {
 			this.OnReloadPromise(result);
 		});
 	}

src/Hooks/Utils/AppHolder.ts

@@ -2,9 +2,11 @@ import { useSelector } from "@rbxts/react-reflex";
 import { useCallback } from "@rbxts/react";
 import { selectHolder } from "Reflex/Interface";
 
-//this hook gives you a function that converts AbsolutePosition to relative position
-//based on the main frame that holds the entire plugin UI
-//this is needed because in the story plugin where I visualize UI-labs the UI is usually not in the at the root frame
+/*
+   this hook gives you a function that converts AbsolutePosition to relative position
+   based on the main frame that holds the entire plugin UI
+   this is needed because when I visualize the plugin in a story the main frame is not at [0, 0]
+*/
 export function usePosition() {
 	const holder = useSelector(selectHolder);
 

src/Hooks/Utils/Toggler.ts

@@ -1,4 +1,5 @@
 import { useState, useCallback, useMemo } from "@rbxts/react";
+import { CreateTuple } from "Utils/MiscUtils";
 
 export function useToggler(initial: boolean) {
 	const [enabled, setEnabled] = useState(initial);
@@ -21,5 +22,5 @@ export function useToggler(initial: boolean) {
 			set: setEnabled,
 		};
 	}, []);
-	return $tuple(enabled, api);
+	return CreateTuple(enabled, api);
 }

src/Plugin/Configs.ts

@@ -13,11 +13,12 @@ const Configs = {
 		"StarterGui",
 		"StarterPlayer",
 	]),
+	GlobalInjectionKey: "__hotreload_env_global_injection__", //the longer the better
 
 	Version: {
 		Mayor: 1,
-		Minor: 0,
-		Fix: 1,
+		Minor: 1,
+		Fix: 0,
 	},
 
 	Extensions: {

src/Reflex/Overlay.ts

@@ -4,6 +4,7 @@ import React from "@rbxts/react";
 interface OverlayEntry {
 	Key: string;
 	Element: React.Element;
+	Identifier?: unknown;
 }
 interface HintEntry {
 	Id: string;
@@ -23,15 +24,26 @@ const initialState: OverlayState = {
 export const selectOverlay = (state: RootState) => state.overlay.overlay;
 
 export const OverlayProducer = createProducer(initialState, {
-	setOverlay: (state, key: string, element: React.Element) => {
+	setOverlay: (state, key: string, element: React.Element, identifier?: unknown) => {
 		return {
 			...state,
 			overlay: {
 				Key: key,
 				Element: element,
+				Identifier: identifier,
 			},
 		};
 	},
+	resetIdentifiedOverlay: (state, identifier: unknown) => {
+		if (!state.overlay) return state;
+		if (state.overlay.Identifier !== identifier) {
+			return state;
+		}
+		return {
+			...state,
+			overlay: undefined,
+		};
+	},
 	resetOverlay: (state) => {
 		return {
 			...state,

src/Reflex/StoryPreview/StoryMount.ts

@@ -15,6 +15,7 @@ declare global {
 		OnWidget: boolean;
 		OnViewport: boolean;
 		Visible: boolean;
+		AutoReload: boolean;
 
 		Zoom: number;
 		Offset: Vector2;
@@ -30,6 +31,7 @@ const DefaultEntry = {
 	Visible: true,
 	OnWidget: false,
 	OnViewport: false,
+	AutoReload: true,
 } satisfies Partial<PreviewEntry>;
 
 interface StoryMountState {
@@ -64,7 +66,7 @@ export const selectMountAmount = (module: ModuleScript) => (state: RootState) =>
 };
 
 function CreateNewEntry(module: ModuleScript, order: number) {
-	const uid = HttpService.GenerateGUID();
+	const uid = HttpService.GenerateGUID(false);
 	const newEntry: PreviewEntry = {
 		...DefaultEntry,
 		UID: uid,
@@ -149,6 +151,12 @@ export const StoryMountProducer = createProducer(initialState, {
 			mountPreviews: FilterEntryMap(state.mountPreviews, (entry) => entry.Key !== key),
 		};
 	},
+	unmountByUID: (state, uid: string) => {
+		return {
+			...state,
+			mountPreviews: FilterEntryMap(state.mountPreviews, (entry) => entry.UID !== uid),
+		};
+	},
 	unmountByModule: (state, module: ModuleScript) => {
 		return {
 			...state,

src/Stories/ControlsTest.story.tsx

@@ -1,13 +1,16 @@
 import React from "@rbxts/react";
 import ReactRoblox from "@rbxts/react-roblox";
 import { CreateReactStory } from "@rbxts/ui-labs";
+import { Enviroment } from "@rbxts/ui-labs";
 
 const controls = {
 	Color: Color3.fromRGB(25555, 0, 0),
 	Number: 10,
 };
 
+const RANDOMNUMB = BrickColor.random();
+
 const story = CreateReactStory({ controls: controls, react: React, reactRoblox: ReactRoblox }, (props) => {
-	return <frame BackgroundColor3={props.controls.Color}></frame>;
+	return <frame BackgroundColor3={RANDOMNUMB.Color} Size={UDim2.fromOffset(200, 200)}></frame>;
 });
 export = story;

src/Stories/EnviromentTest.story.tsx

@@ -0,0 +1,31 @@
+import React from "@rbxts/react";
+import ReactRoblox from "@rbxts/react-roblox";
+import { CreateReactStory, Enviroment } from "@rbxts/ui-labs";
+import Corner from "UI/Styles/Corner";
+
+const controls = {};
+
+const returnStory = CreateReactStory(
+	{
+		summary: "",
+		react: React,
+		reactRoblox: ReactRoblox,
+		controls: controls,
+	},
+	(props) => {
+		return (
+			<frame Size={UDim2.fromOffset(150, 50)}>
+				<Corner />
+				<textlabel
+					Text={"TextSet"}
+					Size={UDim2.fromScale(1, 1)}
+					BackgroundTransparency={1}
+					TextSize={18}
+					FontFace={Font.fromEnum(Enum.Font.GothamBold)}
+				/>
+			</frame>
+		);
+	},
+);
+
+export = returnStory;

src/Stories/UILabsTheme.story.tsx

@@ -0,0 +1,58 @@
+import React, { useEffect } from "@rbxts/react";
+import { ReflexProvider, useProducer } from "@rbxts/react-reflex";
+import ReactRoblox from "@rbxts/react-roblox";
+import { ControlGroup, CreateReactStory, InferControls } from "@rbxts/ui-labs";
+import { ReturnControls } from "@rbxts/ui-labs/src/ControlTypings/Typing";
+import { useTheme } from "Hooks/Reflex/Use/Theme";
+import { RootProducer } from "Reflex";
+import Themes from "Themes";
+import App from "UI/App";
+
+const controls = {};
+
+function Cast<T>(val: unknown): T {
+	return val as T;
+}
+
+function GenerateControls(baseTheme: Theme) {
+	const generated: ReturnControls = {};
+
+	for (const [index, val] of pairs(baseTheme)) {
+		if (typeIs(val, "table")) {
+			const indexControls = GenerateControls(Cast<Theme>(val));
+			generated[index] = ControlGroup(indexControls as any);
+			continue;
+		}
+		generated[index] = Cast<Color3 | number>(val);
+	}
+
+	return generated;
+}
+
+function StoryCreate(props: { Controls: InferControls<typeof controls> }) {
+	const { setTheme } = useProducer<RootProducer>();
+
+	useEffect(() => {
+		setTheme(Cast<Theme>({ ...props.Controls }));
+	}, [props.Controls]);
+
+	return <App></App>;
+}
+
+const returnStory = CreateReactStory(
+	{
+		summary: "",
+		react: React,
+		reactRoblox: ReactRoblox,
+		controls: GenerateControls(Themes.Dark),
+	},
+	(props) => {
+		return (
+			<ReflexProvider producer={RootProducer}>
+				<StoryCreate Controls={props.controls} />
+			</ReflexProvider>
+		);
+	},
+);
+
+export = returnStory;