@rbxts/uiblox 0.2.0-alpha.36 → 0.2.0-alpha.38

package/out/ui/packages/codeEditor/components/CodeEditor.luau

@@ -0,0 +1,262 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useEffect = _react.useEffect
+local useState = _react.useState
+local TextService = TS.import(script, TS.getModule(script, "@rbxts", "services")).TextService
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local controlMetrics = _theme.controlMetrics
+local useTheme = _theme.useTheme
+local Icons = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Icons
+local Menu = TS.import(script, script.Parent.Parent.Parent, "menu").Menu
+local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
+local _highlightCode = TS.import(script, script.Parent.Parent, "highlightCode")
+local colorHex = _highlightCode.colorHex
+local highlightCode = _highlightCode.highlightCode
+local useCodeEditorStyles = TS.import(script, script.Parent, "CodeEditor.styles").default
+local LANGUAGES = { "luau", "ts", "json", "text" }
+local function CodeEditor(props)
+	local _binding = props
+	local value = _binding.value
+	local onChange = _binding.onChange
+	local language = _binding.language
+	local onLanguageChange = _binding.onLanguageChange
+	local readOnly = _binding.readOnly
+	if readOnly == nil then
+		readOnly = false
+	end
+	local placeholder = _binding.placeholder
+	if placeholder == nil then
+		placeholder = ""
+	end
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local _binding_1 = useTheme()
+	local theme = _binding_1.theme
+	local _condition = value
+	if _condition == nil then
+		_condition = ""
+	end
+	local draft, setDraft = useState(_condition)
+	local picked, setPicked = useState(language or "text")
+	local focused, setFocused = useState(false)
+	local open, setOpen = useState(false)
+	local anchor, setAnchor = useState()
+	local boxHeight, setBoxHeight = useState(0)
+	local inkHeight, setInkHeight = useState(0)
+	local shown = language or picked
+	local editable = readOnly ~= true
+	-- TextBox has TextTransparency and no separate caret property, so a transparent field hides the caret.
+	local colored = not editable or not focused
+	local contentHeight = if colored then math.max(boxHeight, inkHeight) else boxHeight
+	local minHeight = if editable then theme.spacing.calc(8) else 0
+	local fieldHeight = math.max(minHeight, contentHeight)
+	local metrics = controlMetrics(theme.density, "small")
+	local _condition_1 = theme.typography.fontSizes.caption
+	if _condition_1 == nil then
+		_condition_1 = metrics.font
+	end
+	local mark = _condition_1
+	local pad = theme.padding.calc(1)
+	local font = theme.typography.fontFamilies.default or Enum.Font.SourceSans
+	local textWidth = TextService:GetTextSize(shown, metrics.font, font, Vector2.new(10000, 100)).X
+	local triggerWidth = pad + textWidth + pad + mark + pad
+	local styles = useCodeEditorStyles({
+		focused = focused and editable,
+		fieldHeight = fieldHeight,
+		triggerWidth = triggerWidth,
+	})
+	local colors = {
+		keyword = colorHex(theme.palette.code.keyword),
+		string = colorHex(theme.palette.code.string),
+		number = colorHex(theme.palette.code.number),
+		comment = colorHex(theme.palette.code.comment),
+		func = colorHex(theme.palette.code.func),
+	}
+	local highlighted = highlightCode(draft, shown, colors)
+	local empty = #draft == 0
+	useEffect(function()
+		local _condition_2 = value
+		if _condition_2 == nil then
+			_condition_2 = ""
+		end
+		return setDraft(_condition_2)
+	end, { value })
+	local pick = function(choice)
+		setOpen(false)
+		if language == nil then
+			setPicked(choice)
+		end
+		if onLanguageChange then
+			onLanguageChange(choice)
+		end
+	end
+	local _attributes = {
+		tag = "frame",
+	}
+	local _condition_2 = id
+	if not (_condition_2 ~= 0 and _condition_2 == _condition_2 and _condition_2 ~= "" and _condition_2) then
+		_condition_2 = "CodeEditor"
+	end
+	_attributes.key = _condition_2
+	_attributes.hostRef = ref
+	_attributes.base = styles.root
+	_attributes.className = className
+	_attributes.sx = sx
+	_attributes.state = {
+		focused = focused,
+	}
+	local _attributes_1 = table.clone(styles.stroke)
+	setmetatable(_attributes_1, nil)
+	local _exp = React.createElement("uistroke", _attributes_1)
+	local _attributes_2 = table.clone(styles.corner)
+	setmetatable(_attributes_2, nil)
+	local _exp_1 = React.createElement("uicorner", _attributes_2)
+	local _attributes_3 = table.clone(styles.padding)
+	setmetatable(_attributes_3, nil)
+	local _exp_2 = React.createElement("uipadding", _attributes_3)
+	local _attributes_4 = table.clone(styles.stack)
+	setmetatable(_attributes_4, nil)
+	local _exp_3 = React.createElement("uilistlayout", _attributes_4)
+	local _condition_3 = editable
+	if _condition_3 then
+		local _attributes_5 = {
+			key = "Bar",
+		}
+		for _k, _v in styles.bar do
+			_attributes_5[_k] = _v
+		end
+		local _attributes_6 = table.clone(styles.barRow)
+		setmetatable(_attributes_6, nil)
+		local _exp_4 = React.createElement("uilistlayout", _attributes_6)
+		local _attributes_7 = {
+			key = "Language",
+			ref = setAnchor,
+		}
+		for _k, _v in styles.trigger do
+			_attributes_7[_k] = _v
+		end
+		_attributes_7.Text = shown
+		_attributes_7.Event = {
+			Activated = function()
+				return setOpen(function(current)
+					return not current
+				end)
+			end,
+		}
+		local _exp_5 = React.createElement("uipadding", {
+			PaddingLeft = UDim.new(0, pad),
+			PaddingRight = UDim.new(0, pad + mark + pad),
+		})
+		local _attributes_8 = table.clone(styles.corner)
+		setmetatable(_attributes_8, nil)
+		local _exp_6 = React.createElement("uicorner", _attributes_8)
+		local _attributes_9 = table.clone(styles.triggerStroke)
+		setmetatable(_attributes_9, nil)
+		local _exp_7 = React.createElement("textbutton", _attributes_7, _exp_5, _exp_6, React.createElement("uistroke", _attributes_9), React.createElement("imagelabel", {
+			key = "Caret",
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			AnchorPoint = Vector2.new(1, 0.5),
+			Position = UDim2.new(1, mark + pad, 0.5, 0),
+			Size = UDim2.fromOffset(mark, mark),
+			Image = Icons.Collapsed,
+			Rotation = 90,
+			ImageColor3 = theme.palette.text.secondary,
+			ScaleType = Enum.ScaleType.Fit,
+		}))
+		local _attributes_10 = {
+			anchor = anchor,
+			open = open,
+			dense = true,
+			selected = shown,
+		}
+		-- ▼ ReadonlyArray.map ▼
+		local _newValue = table.create(#LANGUAGES)
+		local _callback = function(choice)
+			return {
+				id = choice,
+				text = choice,
+			}
+		end
+		for _k, _v in LANGUAGES do
+			_newValue[_k] = _callback(_v, _k - 1, LANGUAGES)
+		end
+		-- ▲ ReadonlyArray.map ▲
+		_attributes_10.items = _newValue
+		_attributes_10.onSelect = function(choice)
+			return pick(choice)
+		end
+		_attributes_10.onClose = function()
+			return setOpen(false)
+		end
+		_condition_3 = (React.createElement("frame", _attributes_5, _exp_4, _exp_7, React.createElement(Menu, _attributes_10)))
+	end
+	local _attributes_5 = {
+		key = "Field",
+	}
+	for _k, _v in styles.fieldHost do
+		_attributes_5[_k] = _v
+	end
+	local _attributes_6 = {
+		key = "Ink",
+	}
+	for _k, _v in styles.highlight do
+		_attributes_6[_k] = _v
+	end
+	_attributes_6.Visible = colored
+	_attributes_6.Active = false
+	_attributes_6.Selectable = false
+	_attributes_6.RichText = not empty
+	_attributes_6.Text = if empty then placeholder else highlighted
+	_attributes_6.TextColor3 = if empty then theme.palette.text.secondary else theme.palette.text.primary
+	_attributes_6.Change = {
+		TextBounds = function(rbx)
+			return setInkHeight(rbx.TextBounds.Y)
+		end,
+	}
+	local _exp_4 = React.createElement("textlabel", _attributes_6)
+	local _attributes_7 = {
+		key = "Input",
+	}
+	for _k, _v in styles.field do
+		_attributes_7[_k] = _v
+	end
+	_attributes_7.Text = draft
+	_attributes_7.PlaceholderText = if colored then "" else placeholder
+	_attributes_7.TextTransparency = if colored then 1 else 0
+	_attributes_7.MultiLine = true
+	_attributes_7.TextEditable = editable
+	_attributes_7.Change = {
+		Text = function(rbx)
+			if not editable then
+				return nil
+			end
+			setDraft(rbx.Text)
+			if onChange then
+				onChange(rbx.Text)
+			end
+		end,
+		TextBounds = function(rbx)
+			return setBoxHeight(rbx.TextBounds.Y)
+		end,
+	}
+	_attributes_7.Event = {
+		Focused = function()
+			if editable then
+				setFocused(true)
+			end
+		end,
+		FocusLost = function()
+			return setFocused(false)
+		end,
+	}
+	return React.createElement(SxHost, _attributes, _exp, _exp_1, _exp_2, _exp_3, _condition_3, React.createElement("frame", _attributes_5, _exp_4, React.createElement("textbox", _attributes_7)))
+end
+local default = CodeEditor
+return {
+	default = default,
+}

package/out/ui/packages/codeEditor/components/CodeEditor.styles.d.ts

@@ -0,0 +1,6 @@
+declare const useCodeEditorStyles: (props: {
+    focused?: boolean;
+    fieldHeight: number;
+    triggerWidth: number;
+}) => import("../../../../theme/index").ClassNameMap<string>;
+export default useCodeEditorStyles;

package/out/ui/packages/codeEditor/components/CodeEditor.styles.luau

@@ -0,0 +1,124 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local componentStyles = _theme.componentStyles
+local controlMetrics = _theme.controlMetrics
+local createStyles = _theme.createStyles
+local focusRing = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme", "styles", "utilities", "focusRing").focusRing
+local useCodeEditorStyles = componentStyles("CodeEditor", function(theme, _param)
+	local focused = _param.focused
+	if focused == nil then
+		focused = false
+	end
+	local fieldHeight = _param.fieldHeight
+	local triggerWidth = _param.triggerWidth
+	local pad = theme.padding.calc(2)
+	local _condition = theme.typography.fontSizes.caption
+	if _condition == nil then
+		_condition = theme.typography.fontSizes.body
+	end
+	local textSize = _condition
+	local metrics = controlMetrics(theme.density, "small")
+	local ink = {
+		Font = Enum.Font.RobotoMono,
+		TextSize = textSize,
+		TextColor3 = theme.palette.text.primary,
+		TextXAlignment = Enum.TextXAlignment.Left,
+		TextYAlignment = Enum.TextYAlignment.Top,
+		TextWrapped = true,
+		LineHeight = 1,
+	}
+	local _object = {
+		root = {
+			AutomaticSize = Enum.AutomaticSize.Y,
+			Size = UDim2.new(1, 0, 0, 0),
+			BackgroundColor3 = theme.palette.surface.paper,
+			BorderSizePixel = 0,
+		},
+	}
+	local _left = "stroke"
+	local _object_1 = {
+		Color = theme.palette.divider,
+		ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
+		Thickness = 1,
+		Transparency = 0,
+	}
+	for _k, _v in (if focused then focusRing(theme.palette.focus) else {}) do
+		_object_1[_k] = _v
+	end
+	_object[_left] = _object_1
+	_object.corner = {
+		CornerRadius = UDim.new(0, theme.shape.borderRadius),
+	}
+	_object.padding = {
+		PaddingTop = UDim.new(0, pad),
+		PaddingBottom = UDim.new(0, pad),
+		PaddingLeft = UDim.new(0, pad),
+		PaddingRight = UDim.new(0, pad),
+	}
+	_object.stack = {
+		FillDirection = Enum.FillDirection.Vertical,
+		HorizontalAlignment = Enum.HorizontalAlignment.Left,
+		SortOrder = Enum.SortOrder.LayoutOrder,
+		Padding = UDim.new(0, theme.padding.calc(1)),
+	}
+	_object.bar = {
+		AutomaticSize = Enum.AutomaticSize.Y,
+		Size = UDim2.new(1, 0, 0, 0),
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		LayoutOrder = 0,
+	}
+	_object.barRow = {
+		FillDirection = Enum.FillDirection.Horizontal,
+		HorizontalAlignment = Enum.HorizontalAlignment.Right,
+		VerticalAlignment = Enum.VerticalAlignment.Center,
+		SortOrder = Enum.SortOrder.LayoutOrder,
+	}
+	_object.trigger = {
+		Size = UDim2.fromOffset(triggerWidth, metrics.height),
+		BackgroundColor3 = theme.palette.surface.input,
+		BorderSizePixel = 0,
+		AutoButtonColor = false,
+		Font = theme.typography.fontFamilies.default,
+		TextSize = metrics.font,
+		TextColor3 = theme.palette.text.primary,
+		TextXAlignment = Enum.TextXAlignment.Left,
+	}
+	_object.triggerStroke = {
+		Color = theme.palette.border,
+		ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
+		Thickness = 1,
+		Transparency = 0,
+	}
+	_object.fieldHost = {
+		Size = UDim2.new(1, 0, 0, fieldHeight),
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		LayoutOrder = 1,
+	}
+	local _left_1 = "highlight"
+	local _object_2 = table.clone(ink)
+	setmetatable(_object_2, nil)
+	_object_2.Size = UDim2.fromScale(1, 1)
+	_object_2.BackgroundTransparency = 1
+	_object_2.BorderSizePixel = 0
+	_object_2.RichText = true
+	_object_2.ZIndex = 1
+	_object[_left_1] = _object_2
+	local _left_2 = "field"
+	local _object_3 = table.clone(ink)
+	setmetatable(_object_3, nil)
+	_object_3.Size = UDim2.fromScale(1, 1)
+	_object_3.BackgroundTransparency = 1
+	_object_3.BorderSizePixel = 0
+	_object_3.PlaceholderColor3 = theme.palette.text.secondary
+	_object_3.ClearTextOnFocus = false
+	_object_3.ZIndex = 2
+	_object[_left_2] = _object_3
+	return createStyles(_object)
+end)
+local default = useCodeEditorStyles
+return {
+	default = default,
+}

package/out/ui/packages/codeEditor/highlightCode.d.ts

@@ -0,0 +1,11 @@
+import type { CodeLanguage } from "../markdown/parseMarkdown";
+export interface CodeColors {
+    keyword: string;
+    string: string;
+    number: string;
+    comment: string;
+    func: string;
+}
+export declare function escapeRich(text: string): string;
+export declare function highlightCode(source: string, language: CodeLanguage, colors: CodeColors): string;
+export declare function colorHex(color: Color3): string;