@rbxts/uiblox 0.2.0-alpha.29 → 0.2.0-alpha.3

package/out/ui/packages/markdown/components/Markdown.styles.luau

@@ -1,101 +0,0 @@
--- 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 createStyles = _theme.createStyles
-local useMarkdownStyles = componentStyles("Markdown", function(theme)
-	local gap = if theme.density == "compact" then theme.padding.calc(1) else theme.spacing.calc(1)
-	local _object = {
-		root = {
-			AutomaticSize = Enum.AutomaticSize.Y,
-			Size = UDim2.new(1, 0, 0, 0),
-			BackgroundTransparency = 1,
-			BorderSizePixel = 0,
-		},
-		layout = {
-			FillDirection = Enum.FillDirection.Vertical,
-			HorizontalAlignment = Enum.HorizontalAlignment.Left,
-			VerticalAlignment = Enum.VerticalAlignment.Top,
-			SortOrder = Enum.SortOrder.LayoutOrder,
-			Padding = UDim.new(0, gap),
-		},
-		block = {
-			AutomaticSize = Enum.AutomaticSize.Y,
-			Size = UDim2.new(1, 0, 0, 0),
-			BackgroundTransparency = 1,
-			BorderSizePixel = 0,
-		},
-		text = {
-			AutomaticSize = Enum.AutomaticSize.Y,
-			Size = UDim2.new(1, 0, 0, 0),
-			BackgroundTransparency = 1,
-			BorderSizePixel = 0,
-			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.body,
-			TextColor3 = theme.palette.text.primary,
-			TextXAlignment = Enum.TextXAlignment.Left,
-			TextYAlignment = Enum.TextYAlignment.Top,
-			TextWrapped = true,
-			RichText = true,
-		},
-		code = {
-			AutomaticSize = Enum.AutomaticSize.Y,
-			Size = UDim2.new(1, 0, 0, 0),
-			BackgroundColor3 = theme.palette.surface.paper,
-			BorderSizePixel = 0,
-		},
-		codePad = {
-			PaddingTop = UDim.new(0, theme.padding.calc(1)),
-			PaddingBottom = UDim.new(0, theme.padding.calc(1)),
-			PaddingLeft = UDim.new(0, theme.padding.calc(1.5)),
-			PaddingRight = UDim.new(0, theme.padding.calc(1.5)),
-		},
-	}
-	local _left = "codeText"
-	local _object_1 = {
-		AutomaticSize = Enum.AutomaticSize.Y,
-		Size = UDim2.new(1, 0, 0, 0),
-		BackgroundTransparency = 1,
-		BorderSizePixel = 0,
-		Font = Enum.Font.RobotoMono,
-	}
-	local _left_1 = "TextSize"
-	local _condition = theme.typography.fontSizes.caption
-	if _condition == nil then
-		_condition = theme.typography.fontSizes.body
-	end
-	_object_1[_left_1] = _condition
-	_object_1.TextColor3 = theme.palette.text.primary
-	_object_1.TextXAlignment = Enum.TextXAlignment.Left
-	_object_1.TextYAlignment = Enum.TextYAlignment.Top
-	_object_1.TextWrapped = true
-	_object[_left] = _object_1
-	_object.quote = {
-		AutomaticSize = Enum.AutomaticSize.Y,
-		Size = UDim2.new(1, 0, 0, 0),
-		BackgroundColor3 = theme.palette.surface.paper,
-		BorderSizePixel = 0,
-	}
-	_object.quoteBar = {
-		Size = UDim2.new(0, 3, 1, 0),
-		BackgroundColor3 = theme.palette.primary.main,
-		BorderSizePixel = 0,
-	}
-	_object.quotePad = {
-		PaddingTop = UDim.new(0, theme.padding.calc(1)),
-		PaddingBottom = UDim.new(0, theme.padding.calc(1)),
-		PaddingLeft = UDim.new(0, theme.padding.calc(2)),
-		PaddingRight = UDim.new(0, theme.padding.calc(1)),
-	}
-	_object.listItem = {
-		AutomaticSize = Enum.AutomaticSize.Y,
-		Size = UDim2.new(1, 0, 0, 0),
-		BackgroundTransparency = 1,
-		BorderSizePixel = 0,
-	}
-	return createStyles(_object)
-end)
-local default = useMarkdownStyles
-return {
-	default = default,
-}

package/out/ui/packages/markdown/components/MarkdownEditor.d.ts

@@ -1,16 +0,0 @@
-import React from "@rbxts/react";
-import { CustomizedProps } from "../../../../theme/index";
-import { MarkdownEditorMode } from "./MarkdownEditor.styles";
-export interface MarkdownEditorProps {
-    value: string;
-    onChange: (value: string) => void;
-    mode?: MarkdownEditorMode;
-    onModeChange?: (mode: MarkdownEditorMode) => void;
-    fullscreen?: boolean;
-    onFullscreenChange?: (fullscreen: boolean) => void;
-    preview?: (value: string) => React.Element;
-    placeholder?: string;
-}
-declare function MarkdownEditor(props: CustomizedProps<Frame, MarkdownEditorProps>): JSX.Element;
-export default MarkdownEditor;
-export type { MarkdownEditorMode };

package/out/ui/packages/markdown/components/MarkdownEditor.luau

@@ -1,315 +0,0 @@
--- 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 useRef = _react.useRef
-local useState = _react.useState
-local useTheme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").useTheme
-local Button = TS.import(script, script.Parent.Parent.Parent, "button").Button
-local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
-local IconButton = TS.import(script, script.Parent.Parent.Parent, "iconButton").IconButton
-local Icons = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Icons
-local ToggleButtonGroup = TS.import(script, script.Parent.Parent.Parent, "toggleButton").ToggleButtonGroup
-local htmlToMarkdown = TS.import(script, script.Parent.Parent, "htmlToMarkdown").htmlToMarkdown
-local Markdown = TS.import(script, script.Parent, "Markdown").default
-local useMarkdownEditorStyles = TS.import(script, script.Parent, "MarkdownEditor.styles").default
-local MODE_OPTIONS = { {
-	label = "Split",
-	value = "split",
-}, {
-	label = "Edit",
-	value = "edit",
-}, {
-	label = "Preview",
-	value = "preview",
-} }
-local function looksLikeHtml(text)
-	local lower = string.lower(text)
-	return (string.find(lower, "<p", 1, true)) ~= nil or (string.find(lower, "<h1", 1, true)) ~= nil or (string.find(lower, "<h2", 1, true)) ~= nil or (string.find(lower, "<div", 1, true)) ~= nil or (string.find(lower, "<ul", 1, true)) ~= nil or (string.find(lower, "<ol", 1, true)) ~= nil or (string.find(lower, "<pre", 1, true)) ~= nil or (string.find(lower, "<blockquote", 1, true)) ~= nil or (string.find(lower, "<strong", 1, true)) ~= nil
-end
-local function MarkdownEditor(props)
-	local _binding = props
-	local value = _binding.value
-	local onChange = _binding.onChange
-	local modeProp = _binding.mode
-	local onModeChange = _binding.onModeChange
-	local fullscreenProp = _binding.fullscreen
-	local onFullscreenChange = _binding.onFullscreenChange
-	local preview = _binding.preview
-	local placeholder = _binding.placeholder
-	if placeholder == nil then
-		placeholder = "Write markdown…"
-	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 modeState, setModeState = useState("split")
-	local fullscreenState, setFullscreenState = useState(false)
-	local draft, setDraft = useState(value)
-	local htmlDraft, setHtmlDraft = useState(nil)
-	local focused = useRef(false)
-	local mode = modeProp or modeState
-	local _condition = fullscreenProp
-	if _condition == nil then
-		_condition = fullscreenState
-	end
-	local fullscreen = _condition
-	local compact = theme.density == "compact"
-	local styles = useMarkdownEditorStyles({
-		fullscreen = fullscreen,
-		compact = compact,
-	})
-	useEffect(function()
-		if not focused.current then
-			setDraft(value)
-		end
-	end, { value })
-	local setMode = function(modeNext)
-		if modeProp == nil then
-			setModeState(modeNext)
-		end
-		local _result = onModeChange
-		if _result ~= nil then
-			_result(modeNext)
-		end
-	end
-	local setFullscreen = function(fullNext)
-		if fullscreenProp == nil then
-			setFullscreenState(fullNext)
-		end
-		local _result = onFullscreenChange
-		if _result ~= nil then
-			_result(fullNext)
-		end
-	end
-	local showEdit = mode == "split" or mode == "edit"
-	local showPreview = mode == "split" or mode == "preview"
-	local previewNode = if preview ~= nil then preview(value) else React.createElement(Markdown, {
-		value = value,
-	})
-	local _attributes = {
-		tag = "frame",
-	}
-	local _condition_1 = id
-	if not (_condition_1 ~= 0 and _condition_1 == _condition_1 and _condition_1 ~= "" and _condition_1) then
-		_condition_1 = "MarkdownEditor"
-	end
-	_attributes.key = _condition_1
-	_attributes.hostRef = ref
-	_attributes.base = styles.root
-	_attributes.className = className
-	_attributes.sx = sx
-	local _attributes_1 = table.clone(styles.corner)
-	setmetatable(_attributes_1, nil)
-	local _exp = React.createElement("uicorner", _attributes_1)
-	local _attributes_2 = table.clone(styles.stroke)
-	setmetatable(_attributes_2, nil)
-	local _exp_1 = React.createElement("uistroke", _attributes_2)
-	local _attributes_3 = table.clone(styles.layout)
-	setmetatable(_attributes_3, nil)
-	local _exp_2 = React.createElement("uilistlayout", _attributes_3)
-	local _attributes_4 = {
-		key = "Toolbar",
-	}
-	for _k, _v in styles.toolbar do
-		_attributes_4[_k] = _v
-	end
-	local _attributes_5 = table.clone(styles.toolbarPad)
-	setmetatable(_attributes_5, nil)
-	local _exp_3 = React.createElement("uipadding", _attributes_5)
-	local _attributes_6 = table.clone(styles.toolbarRow)
-	setmetatable(_attributes_6, nil)
-	local _exp_4 = React.createElement("frame", _attributes_4, _exp_3, React.createElement("uilistlayout", _attributes_6), React.createElement(ToggleButtonGroup, {
-		value = mode,
-		options = MODE_OPTIONS,
-		size = if compact then "small" else "medium",
-		onChange = setMode,
-		className = {
-			LayoutOrder = 1,
-			AutomaticSize = Enum.AutomaticSize.XY,
-			Size = UDim2.fromScale(0, 0),
-		},
-	}), React.createElement(Button, {
-		text = "Paste HTML",
-		variant = "text",
-		size = if compact then "small" else "medium",
-		className = {
-			LayoutOrder = 2,
-			AutomaticSize = Enum.AutomaticSize.XY,
-			Size = UDim2.fromScale(0, 0),
-		},
-		onLeftClick = function()
-			if looksLikeHtml(value) then
-				onChange(htmlToMarkdown(value))
-			else
-				setHtmlDraft("")
-			end
-		end,
-	}), React.createElement(IconButton, {
-		icon = Icons.Expanded,
-		size = "sm",
-		tint = theme.palette.text.secondary,
-		selected = fullscreen,
-		onClick = function()
-			return setFullscreen(not fullscreen)
-		end,
-		className = {
-			LayoutOrder = 99,
-		},
-	}))
-	local _exp_5 = htmlDraft ~= nil and (React.createElement("frame", {
-		key = "HtmlPaste",
-		Size = UDim2.new(1, 0, 0, 96),
-		BackgroundColor3 = theme.palette.surface.elevated,
-		BorderSizePixel = 0,
-		LayoutOrder = 1,
-	}, React.createElement("uipadding", {
-		PaddingTop = UDim.new(0, theme.padding.calc(1)),
-		PaddingBottom = UDim.new(0, theme.padding.calc(1)),
-		PaddingLeft = UDim.new(0, theme.padding.calc(1)),
-		PaddingRight = UDim.new(0, theme.padding.calc(1)),
-	}), React.createElement("uilistlayout", {
-		FillDirection = Enum.FillDirection.Vertical,
-		SortOrder = Enum.SortOrder.LayoutOrder,
-		Padding = UDim.new(0, theme.padding.calc(1)),
-	}), React.createElement("textbox", {
-		key = "HtmlField",
-		Size = UDim2.new(1, 0, 0, 48),
-		BackgroundColor3 = theme.palette.surface.input,
-		BorderSizePixel = 0,
-		ClearTextOnFocus = false,
-		MultiLine = true,
-		Text = htmlDraft,
-		PlaceholderText = "Paste HTML here",
-		TextXAlignment = Enum.TextXAlignment.Left,
-		TextYAlignment = Enum.TextYAlignment.Top,
-		TextSize = theme.typography.fontSizes.caption,
-		TextColor3 = theme.palette.text.primary,
-		Font = Enum.Font.RobotoMono,
-		Change = {
-			Text = function(rbx)
-				return setHtmlDraft(rbx.Text)
-			end,
-		},
-		LayoutOrder = 1,
-	}), React.createElement("frame", {
-		key = "HtmlActions",
-		Size = UDim2.new(1, 0, 0, 28),
-		BackgroundTransparency = 1,
-		LayoutOrder = 2,
-	}, React.createElement("uilistlayout", {
-		FillDirection = Enum.FillDirection.Horizontal,
-		Padding = UDim.new(0, theme.padding.calc(1)),
-		SortOrder = Enum.SortOrder.LayoutOrder,
-	}), React.createElement(Button, {
-		text = "Convert",
-		size = "small",
-		className = {
-			LayoutOrder = 1,
-			AutomaticSize = Enum.AutomaticSize.XY,
-			Size = UDim2.fromScale(0, 0),
-		},
-		onLeftClick = function()
-			onChange(htmlToMarkdown(htmlDraft))
-			setHtmlDraft(nil)
-			setMode("preview")
-		end,
-	}), React.createElement(Button, {
-		text = "Cancel",
-		variant = "text",
-		size = "small",
-		className = {
-			LayoutOrder = 2,
-			AutomaticSize = Enum.AutomaticSize.XY,
-			Size = UDim2.fromScale(0, 0),
-		},
-		onLeftClick = function()
-			return setHtmlDraft(nil)
-		end,
-	}))))
-	local _attributes_7 = {
-		key = "Body",
-	}
-	for _k, _v in styles.body do
-		_attributes_7[_k] = _v
-	end
-	_attributes_7.LayoutOrder = 3
-	local _condition_2 = mode == "split"
-	if _condition_2 then
-		local _attributes_8 = table.clone(styles.split)
-		setmetatable(_attributes_8, nil)
-		_condition_2 = React.createElement("uilistlayout", _attributes_8)
-	end
-	local _condition_3 = showEdit
-	if _condition_3 then
-		local _attributes_8 = {
-			key = "EditPane",
-		}
-		for _k, _v in (if mode == "split" then styles.pane else styles.paneFull) do
-			_attributes_8[_k] = _v
-		end
-		_attributes_8.LayoutOrder = 1
-		local _attributes_9 = {
-			key = "Editor",
-		}
-		for _k, _v in styles.editor do
-			_attributes_9[_k] = _v
-		end
-		_attributes_9.Text = draft
-		_attributes_9.PlaceholderText = placeholder
-		_attributes_9.Change = {
-			Text = function(rbx)
-				setDraft(rbx.Text)
-				if focused.current and rbx.Text ~= value then
-					onChange(rbx.Text)
-				end
-			end,
-		}
-		_attributes_9.Event = {
-			Focused = function()
-				focused.current = true
-			end,
-			FocusLost = function(rbx)
-				focused.current = false
-				setDraft(rbx.Text)
-				onChange(rbx.Text)
-			end,
-		}
-		local _attributes_10 = table.clone(styles.editorPad)
-		setmetatable(_attributes_10, nil)
-		_condition_3 = (React.createElement("frame", _attributes_8, React.createElement("textbox", _attributes_9, React.createElement("uipadding", _attributes_10))))
-	end
-	local _condition_4 = mode == "split"
-	if _condition_4 then
-		local _attributes_8 = {
-			key = "SplitRule",
-		}
-		for _k, _v in styles.divider do
-			_attributes_8[_k] = _v
-		end
-		_condition_4 = React.createElement("frame", _attributes_8)
-	end
-	local _condition_5 = showPreview
-	if _condition_5 then
-		local _attributes_8 = {
-			key = "PreviewPane",
-		}
-		for _k, _v in styles.previewScroll do
-			_attributes_8[_k] = _v
-		end
-		_attributes_8.Size = if mode == "split" then UDim2.fromScale(0.5, 1) else UDim2.fromScale(1, 1)
-		_attributes_8.LayoutOrder = 3
-		local _attributes_9 = table.clone(styles.previewPad)
-		setmetatable(_attributes_9, nil)
-		_condition_5 = (React.createElement("scrollingframe", _attributes_8, React.createElement("uipadding", _attributes_9), previewNode))
-	end
-	return React.createElement(SxHost, _attributes, _exp, _exp_1, _exp_2, _exp_4, _exp_5, React.createElement("frame", _attributes_7, _condition_2, _condition_3, _condition_4, _condition_5))
-end
-local default = MarkdownEditor
-return {
-	default = default,
-}

package/out/ui/packages/markdown/components/MarkdownEditor.styles.d.ts

@@ -1,6 +0,0 @@
-export type MarkdownEditorMode = "split" | "edit" | "preview";
-declare const useMarkdownEditorStyles: (props: {
-    fullscreen?: boolean;
-    compact?: boolean;
-}) => import("../../../../theme/index").ClassNameMap<string>;
-export default useMarkdownEditorStyles;

package/out/ui/packages/markdown/components/MarkdownEditor.styles.luau

@@ -1,132 +0,0 @@
--- 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 createStyles = _theme.createStyles
-local useMarkdownEditorStyles = componentStyles("MarkdownEditor", function(theme, _param)
-	local fullscreen = _param.fullscreen
-	local compact = _param.compact
-	local pad = if compact == true or theme.density == "compact" then theme.padding.calc(1) else theme.padding.calc(1.5)
-	local _object = {
-		root = {
-			Size = if fullscreen == true then UDim2.fromScale(1, 1) else UDim2.new(1, 0, 1, 0),
-			BackgroundColor3 = theme.palette.surface.paper,
-			BorderSizePixel = 0,
-		},
-		corner = {
-			CornerRadius = UDim.new(0, theme.shape.borderRadius),
-		},
-		stroke = {
-			Color = theme.palette.divider,
-			Thickness = 1,
-			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
-		},
-		layout = {
-			FillDirection = Enum.FillDirection.Vertical,
-			HorizontalAlignment = Enum.HorizontalAlignment.Left,
-			VerticalAlignment = Enum.VerticalAlignment.Top,
-			SortOrder = Enum.SortOrder.LayoutOrder,
-			Padding = UDim.new(0, 0),
-		},
-		toolbar = {
-			Size = UDim2.new(1, 0, 0, if compact == true or theme.density == "compact" then 32 else 36),
-			BackgroundColor3 = theme.palette.surface.elevated,
-			BorderSizePixel = 0,
-			LayoutOrder = 1,
-		},
-		toolbarPad = {
-			PaddingLeft = UDim.new(0, pad),
-			PaddingRight = UDim.new(0, pad),
-			PaddingTop = UDim.new(0, theme.padding.calc(0.5)),
-			PaddingBottom = UDim.new(0, theme.padding.calc(0.5)),
-		},
-		toolbarRow = {
-			FillDirection = Enum.FillDirection.Horizontal,
-			HorizontalAlignment = Enum.HorizontalAlignment.Left,
-			VerticalAlignment = Enum.VerticalAlignment.Center,
-			SortOrder = Enum.SortOrder.LayoutOrder,
-			Padding = UDim.new(0, theme.padding.calc(1)),
-		},
-		spacer = {
-			Size = UDim2.new(1, 0, 1, 0),
-			BackgroundTransparency = 1,
-			BorderSizePixel = 0,
-			LayoutOrder = 50,
-		},
-		body = {
-			Size = UDim2.new(1, 0, 1, -(if compact == true or theme.density == "compact" then 32 else 36)),
-			BackgroundTransparency = 1,
-			BorderSizePixel = 0,
-			LayoutOrder = 2,
-		},
-		pane = {
-			Size = UDim2.fromScale(0.5, 1),
-			BackgroundTransparency = 1,
-			BorderSizePixel = 0,
-		},
-		paneFull = {
-			Size = UDim2.fromScale(1, 1),
-			BackgroundTransparency = 1,
-			BorderSizePixel = 0,
-		},
-	}
-	local _left = "editor"
-	local _object_1 = {
-		Size = UDim2.fromScale(1, 1),
-		BackgroundColor3 = theme.palette.surface.input,
-		BorderSizePixel = 0,
-		ClearTextOnFocus = false,
-		MultiLine = true,
-		TextXAlignment = Enum.TextXAlignment.Left,
-		TextYAlignment = Enum.TextYAlignment.Top,
-		TextWrapped = true,
-		Font = Enum.Font.RobotoMono,
-	}
-	local _left_1 = "TextSize"
-	local _condition = theme.typography.fontSizes.caption
-	if _condition == nil then
-		_condition = theme.typography.fontSizes.body
-	end
-	_object_1[_left_1] = _condition
-	_object_1.TextColor3 = theme.palette.text.primary
-	_object_1.PlaceholderColor3 = theme.palette.text.secondary
-	_object[_left] = _object_1
-	_object.editorPad = {
-		PaddingTop = UDim.new(0, pad),
-		PaddingBottom = UDim.new(0, pad),
-		PaddingLeft = UDim.new(0, pad),
-		PaddingRight = UDim.new(0, pad),
-	}
-	_object.previewScroll = {
-		Size = UDim2.fromScale(1, 1),
-		BackgroundTransparency = 1,
-		BorderSizePixel = 0,
-		ScrollBarThickness = 4,
-		CanvasSize = UDim2.new(0, 0, 0, 0),
-		AutomaticCanvasSize = Enum.AutomaticSize.Y,
-	}
-	_object.previewPad = {
-		PaddingTop = UDim.new(0, pad),
-		PaddingBottom = UDim.new(0, pad),
-		PaddingLeft = UDim.new(0, pad),
-		PaddingRight = UDim.new(0, pad),
-	}
-	_object.split = {
-		FillDirection = Enum.FillDirection.Horizontal,
-		HorizontalAlignment = Enum.HorizontalAlignment.Left,
-		VerticalAlignment = Enum.VerticalAlignment.Top,
-		SortOrder = Enum.SortOrder.LayoutOrder,
-		Padding = UDim.new(0, 0),
-	}
-	_object.divider = {
-		Size = UDim2.new(0, 1, 1, 0),
-		BackgroundColor3 = theme.palette.divider,
-		BorderSizePixel = 0,
-		LayoutOrder = 2,
-	}
-	return createStyles(_object)
-end)
-local default = useMarkdownEditorStyles
-return {
-	default = default,
-}

package/out/ui/packages/markdown/htmlToMarkdown.d.ts

@@ -1,2 +0,0 @@
-/** Map a small HTML subset to the markdown preview subset. Unknown tags unwrap to text. */
-export declare function htmlToMarkdown(html: string): string;