@evenicanpm/portal-editor-ui 1.5.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@evenicanpm/portal-editor-ui",
-	"version": "1.5.0",
+	"version": "1.6.0",
 	"description": "",
 	"license": "ISC",
 	"author": "",
@@ -15,7 +15,8 @@
 		".": "./src/index.ts"
 	},
 	"files": [
-		"dist"
+		"dist",
+		"src"
 	],
 	"types": "./dist/index.d.ts",
 	"devDependencies": {
@@ -40,8 +41,8 @@
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.0",
 		"@dnd-kit/utilities": "^3.2.2",
-		"@evenicanpm/portal-types-schemas": "^1.5.0",
+		"@evenicanpm/portal-types-schemas": "^1.6.0",
 		"@tanstack/react-query": "^5.90.11"
 	},
-	"gitHead": "5c5e3fe19b92a17cbaf897b4cee20ee59331603f"
+	"gitHead": "9b18fe6294cc0e57332ec8703825a609ac7b73b2"
 }

package/src/editor.tsx

@@ -0,0 +1,34 @@
+import type { PropsWithChildren } from "react";
+import { Editor } from "./features/editor/components/editor";
+
+/**
+ * Main Entry point properties into portal package
+ *
+ *
+ */
+type PortalProps = {};
+
+/**
+ * The main **e4Portal** entry point.
+ * * This is a React Functional Component that provides the core context
+ * and layout for the application. It is required to wrap all components
+ * that use the library's hooks or sub-components.
+ *
+ *
+ * @param props - The properties passed to the Portal component.
+ * @returns A React Element rendering the main application structure.
+ */
+const Portal = ({ children }: PropsWithChildren<PortalProps>) => {
+	return <>{children}</>;
+};
+
+/**
+ *
+ * # Feature: Editor
+ * This is the editor feature component.
+ * @params props
+ *
+ */
+Portal.Editor = Editor;
+
+export { Portal, type PortalProps };

package/src/features/editor/components/column-list/column-card/column-card-options.tsx

@@ -0,0 +1,48 @@
+import { Checkbox, FormControlLabel, Stack } from "@mui/material";
+
+export type ColumnCardOptionsValue = {
+	isSortable: boolean;
+	isSearchable: boolean;
+};
+
+export type ColumnCardOptionsProps = {
+	value: ColumnCardOptionsValue;
+	onChange: (patch: Partial<ColumnCardOptionsValue>) => void;
+};
+
+export function ColumnCardOptions({
+	value,
+	onChange,
+}: Readonly<ColumnCardOptionsProps>) {
+	return (
+		<Stack
+			direction="row"
+			spacing={2}
+			alignItems="center"
+			justifyContent={{ xs: "center", lg: "flex-end" }}
+			sx={{ width: { xs: "100%", sm: "auto" } }}
+		>
+			<FormControlLabel
+				sx={{ m: 0 }}
+				control={
+					<Checkbox
+						checked={value.isSortable}
+						onChange={(e) => onChange({ isSortable: e.target.checked })}
+					/>
+				}
+				label="sortable"
+			/>
+
+			<FormControlLabel
+				sx={{ m: 0 }}
+				control={
+					<Checkbox
+						checked={value.isSearchable}
+						onChange={(e) => onChange({ isSearchable: e.target.checked })}
+					/>
+				}
+				label="searchable"
+			/>
+		</Stack>
+	);
+}

package/src/features/editor/components/column-list/column-card/column-card-title.tsx

@@ -0,0 +1,13 @@
+import { Typography } from "@mui/material";
+
+export type ColumnCardTitleProps = {
+	value: string;
+};
+
+export function ColumnCardTitle({ value }: Readonly<ColumnCardTitleProps>) {
+	return (
+		<Typography fontWeight={700} noWrap>
+			{value}
+		</Typography>
+	);
+}

package/src/features/editor/components/column-list/column-card/column-card.tsx

@@ -0,0 +1,134 @@
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import type { Column } from "@evenicanpm/portal-types-schemas";
+import CloseIcon from "@mui/icons-material/Close";
+import { Box, Card, CardContent, IconButton, Stack } from "@mui/material";
+import * as React from "react";
+import { ColumnCardOptions } from "./column-card-options";
+import { ColumnCardTitle } from "./column-card-title";
+import { DragHandle } from "./drag-handle";
+import { EditableLabel } from "./editable-label";
+
+export type ColumnCardProps = {
+	field: Column;
+	onChange: (id: string, patch: Partial<Column>) => void;
+	onRemove: (id: string) => void;
+};
+
+export function ColumnCard({
+	field,
+	onChange,
+	onRemove,
+}: Readonly<ColumnCardProps>) {
+	const [isEditingLabel, setIsEditingLabel] = React.useState(false);
+
+	const {
+		attributes,
+		listeners,
+		setNodeRef,
+		transform,
+		transition,
+		isDragging,
+	} = useSortable({ id: field.Data, disabled: isEditingLabel });
+
+	const style: React.CSSProperties = {
+		transform: CSS.Transform.toString(transform),
+		transition,
+	};
+
+	return (
+		<Card
+			ref={setNodeRef}
+			style={style}
+			variant="outlined"
+			sx={{
+				mb: 2,
+				height: { sm: 130, md: 100 },
+				borderRadius: 2,
+				bgcolor: isDragging ? "grey.100" : "background.paper",
+				boxShadow: isDragging ? 3 : 0,
+			}}
+		>
+			<CardContent sx={{ py: 2, "&:last-child": { pb: 2 } }}>
+				<Stack
+					direction={{ xs: "column", sm: "row" }}
+					spacing={{ xs: 1.25, sm: 1 }}
+					alignItems={{ xs: "stretch", sm: "center" }}
+				>
+					<Stack
+						direction="row"
+						spacing={1}
+						alignItems="center"
+						sx={{ width: "100%" }}
+					>
+						<DragHandle attributes={attributes} listeners={listeners} />
+
+						<Box sx={{ flex: 1, minWidth: 0 }}>
+							<Box
+								sx={{
+									display: "flex",
+									alignItems: "center",
+									gap: 1,
+								}}
+							>
+								<ColumnCardTitle value={field.Data} />
+
+								{/* Mobile close icon */}
+								<IconButton
+									onClick={() => onRemove(field.Data)}
+									aria-label={`Remove ${field.Data}`}
+									color="error"
+									size="small"
+									sx={{
+										ml: "auto",
+										display: { xs: "inline-flex", sm: "none" },
+									}}
+								>
+									<CloseIcon />
+								</IconButton>
+							</Box>
+
+							<Box
+								onFocusCapture={(e) => {
+									if (e.target instanceof HTMLInputElement)
+										setIsEditingLabel(true);
+								}}
+								onBlurCapture={() => setIsEditingLabel(false)}
+							>
+								<EditableLabel
+									value={field.Label ?? ""}
+									onCommit={(next) => onChange(field.Data, { Label: next })}
+								/>
+							</Box>
+						</Box>
+					</Stack>
+
+					<ColumnCardOptions
+						value={{
+							isSortable: !!field.IsSortable,
+							isSearchable: !!field.IsSearchable,
+						}}
+						onChange={(patch) => {
+							const next: Partial<Column> = {};
+							if (patch.isSortable !== undefined)
+								next.IsSortable = patch.isSortable;
+							if (patch.isSearchable !== undefined)
+								next.IsSearchable = patch.isSearchable;
+							onChange(field.Data, next);
+						}}
+					/>
+
+					{/* Desktop close icon */}
+					<IconButton
+						onClick={() => onRemove(field.Data)}
+						aria-label={`Remove ${field.Data}`}
+						color="error"
+						sx={{ display: { xs: "none", sm: "inline-flex" } }}
+					>
+						<CloseIcon />
+					</IconButton>
+				</Stack>
+			</CardContent>
+		</Card>
+	);
+}

package/src/features/editor/components/column-list/column-card/drag-handle.tsx

@@ -0,0 +1,32 @@
+import type {
+	DraggableAttributes,
+	DraggableSyntheticListeners,
+} from "@dnd-kit/core";
+import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
+import { Box, IconButton } from "@mui/material";
+
+export type DragHandleProps = {
+	attributes: DraggableAttributes;
+	listeners?: DraggableSyntheticListeners;
+};
+
+export function DragHandle({
+	attributes,
+	listeners,
+}: Readonly<DragHandleProps>) {
+	return (
+		<Box
+			sx={{
+				display: "flex",
+				alignItems: "center",
+				cursor: "grab",
+				touchAction: "none",
+				flexShrink: 0,
+			}}
+		>
+			<IconButton size="small" {...attributes} {...listeners}>
+				<DragIndicatorIcon />
+			</IconButton>
+		</Box>
+	);
+}

package/src/features/editor/components/column-list/column-card/editable-label.tsx

@@ -0,0 +1,132 @@
+import CheckIcon from "@mui/icons-material/Check";
+import CloseIcon from "@mui/icons-material/Close";
+import EditIcon from "@mui/icons-material/Edit";
+import {
+	Box,
+	IconButton,
+	Stack,
+	TextField,
+	Tooltip,
+	Typography,
+} from "@mui/material";
+import * as React from "react";
+
+export type EditableLabelProps = {
+	value: string;
+	onCommit: (next: string) => void;
+	labelPrefix?: string;
+	inputWidth?: { xs: string | number; sm: string | number };
+};
+
+export function EditableLabel({
+	value,
+	onCommit,
+	labelPrefix = "label:",
+	inputWidth = { xs: "100%", sm: 260 },
+}: Readonly<EditableLabelProps>) {
+	const [isEditing, setIsEditing] = React.useState(false);
+	const [draft, setDraft] = React.useState(value);
+	const inputRef = React.useRef<HTMLInputElement>(null);
+
+	React.useEffect(() => {
+		if (!isEditing) return;
+		setDraft(value);
+		queueMicrotask(() => inputRef.current?.focus());
+	}, [isEditing, value]);
+
+	const commit = () => {
+		const next = draft.trim();
+		setIsEditing(false);
+		if (next !== value) onCommit(next);
+	};
+
+	const cancel = () => {
+		setIsEditing(false);
+		setDraft(value);
+	};
+
+	return (
+		<Stack
+			direction={{ xs: "row" }}
+			spacing={{ xs: 1 }}
+			alignItems={{ xs: "center" }}
+			sx={{ mt: 0.25 }}
+		>
+			<Typography variant="body2" color="text.secondary" sx={{ flexShrink: 0 }}>
+				{labelPrefix}
+			</Typography>
+
+			<Box
+				sx={{
+					display: "flex",
+					alignItems: "center",
+					gap: 1,
+					minWidth: 0,
+					width: "100%",
+				}}
+			>
+				{isEditing ? (
+					<>
+						<TextField
+							inputRef={inputRef}
+							value={draft}
+							onChange={(e) => setDraft(e.target.value)}
+							size="small"
+							variant="outlined"
+							onKeyDown={(e) => {
+								if (e.key === "Enter") commit();
+								if (e.key === "Escape") cancel();
+							}}
+							onBlur={commit}
+							sx={{
+								width: inputWidth,
+								maxWidth: "100%",
+								"& .MuiOutlinedInput-root": { height: 32 },
+								"& .MuiOutlinedInput-input": {
+									padding: "6px 8px",
+									fontSize: "0.875rem",
+								},
+							}}
+						/>
+
+						<Tooltip title="Save">
+							<IconButton
+								size="small"
+								onMouseDown={(e) => e.preventDefault()}
+								onClick={commit}
+							>
+								<CheckIcon fontSize="small" />
+							</IconButton>
+						</Tooltip>
+
+						<Tooltip title="Cancel">
+							<IconButton
+								size="small"
+								onMouseDown={(e) => e.preventDefault()}
+								onClick={cancel}
+							>
+								<CloseIcon fontSize="small" />
+							</IconButton>
+						</Tooltip>
+					</>
+				) : (
+					<>
+						<Typography
+							variant="body2"
+							color="text.secondary"
+							sx={{ fontWeight: 600 }}
+						>
+							{value}
+						</Typography>
+
+						<Tooltip title="Edit label">
+							<IconButton size="small" onClick={() => setIsEditing(true)}>
+								<EditIcon fontSize="small" />
+							</IconButton>
+						</Tooltip>
+					</>
+				)}
+			</Box>
+		</Stack>
+	);
+}

package/src/features/editor/components/column-list/column-card/index.ts

@@ -0,0 +1 @@
+export { ColumnCard } from "./column-card";

package/src/features/editor/components/column-list/column-list-section.tsx

@@ -0,0 +1,49 @@
+"use client";
+import { Paper } from "@mui/material";
+import { useQuery } from "@tanstack/react-query";
+import type { EditorQueries } from "../editor";
+import { ColumnList } from "./column-list";
+import { ColumnListSkeleton } from "./column-list-skeleton";
+import { ColumnListTitle } from "./column-list-title";
+
+interface ColumnProps {
+	currentResourceKey: string;
+	editorQueries: EditorQueries;
+}
+
+/**
+ * The view config column list section that handles
+ * fetching the initial view config data thats stored in the db
+ * and handles loading state skeleton view while data is pending
+ */
+export function ColumnListSection({
+	currentResourceKey,
+	editorQueries,
+}: Readonly<ColumnProps>) {
+	const { data: config, isPending } = useQuery(
+		editorQueries.viewConfigQuery(currentResourceKey),
+	);
+
+	return (
+		<Paper
+			elevation={1}
+			sx={{
+				p: { xs: 2, sm: 3 },
+				mb: 3,
+				borderRadius: 2,
+			}}
+		>
+			<ColumnListTitle selectedResourceKey={currentResourceKey} />
+			{isPending || !config ? (
+				<ColumnListSkeleton />
+			) : (
+				<ColumnList
+					key={currentResourceKey}
+					resourceKey={currentResourceKey}
+					initialState={config}
+					editorQueries={editorQueries}
+				/>
+			)}
+		</Paper>
+	);
+}

package/src/features/editor/components/column-list/column-list-skeleton.tsx

@@ -0,0 +1,49 @@
+import { Box, Skeleton } from "@mui/material";
+
+const CARD_HEIGHT = {
+	sm: 130,
+	md: 100,
+};
+
+export function ColumnListSkeleton() {
+	const skeletonKeys = ["s1", "s2", "s3", "s4"];
+	return (
+		<>
+			<Box
+				sx={{
+					display: "flex",
+					justifyContent: "flex-end",
+					alignItems: "center",
+					position: "relative",
+					mb: 2,
+					height: 40,
+				}}
+			>
+				<Skeleton
+					variant="rounded"
+					animation="wave"
+					sx={{
+						minWidth: 150,
+						height: 36.5, // Standard MUI 'medium' button height
+						borderRadius: 1, // Match MUI default button border-radius (4px)
+						ml: "auto",
+					}}
+				/>
+			</Box>
+			{skeletonKeys.map((key) => (
+				<Skeleton
+					key={key}
+					variant="rounded"
+					animation="wave"
+					sx={{
+						width: "100%",
+						mb: 2,
+						height: { ...CARD_HEIGHT },
+						borderRadius: 2,
+						opacity: 0.4, // Softens the "block" look
+					}}
+				/>
+			))}
+		</>
+	);
+}

package/src/features/editor/components/column-list/column-list-state.ts

@@ -0,0 +1,92 @@
+import type { Column } from "@evenicanpm/portal-types-schemas";
+
+/**
+ * Reassigns sequential ColumnOrder values (1..n) to visible fields.
+ */
+export function normalizeVisibleOrders(list: Column[]): Column[] {
+	return list.map((f, idx) => ({ ...f, ColumnOrder: idx + 1 }));
+}
+
+/**
+ * Returns fields that are currently visible (ColumnOrder not null),
+ * sorted by ColumnOrder.
+ */
+export function getVisibleFields(fields: Column[]): Column[] {
+	return fields
+		.filter((f) => f.ColumnOrder != null)
+		.sort((a, b) => (a.ColumnOrder ?? 1) - (b.ColumnOrder ?? 0));
+}
+
+/**
+ * Returns fields that are currently removed (ColumnOrder null),
+ * sorted alphabetically by label or data key.
+ */
+export function getRemovedFields(fields: Column[]): Column[] {
+	return fields
+		.filter((f) => f.ColumnOrder == null)
+		.sort((a, b) => (a.Label ?? a.Data).localeCompare(b.Label ?? b.Data));
+}
+
+/**
+ * Applies a partial update to a single field by id.
+ */
+export function patchField(
+	fields: Column[],
+	id: string,
+	patch: Partial<Column>,
+): Column[] {
+	return fields.map((f) => (f.Data === id ? { ...f, ...patch } : f));
+}
+
+/**
+ * Removes a field from the visible list by setting ColumnOrder to null
+ * and re-normalizes remaining visible fields.
+ */
+export function removeField(fields: Column[], id: string): Column[] {
+	const next = fields.map((f) =>
+		f.Data === id ? { ...f, ColumnOrder: null } : f,
+	);
+
+	const stillVisible = getVisibleFields(next);
+	const renumbered = normalizeVisibleOrders(stillVisible);
+
+	return next.map((f) => renumbered.find((r) => r.Data === f.Data) ?? f);
+}
+
+/**
+ * Adds a previously removed field back to the end of the visible list
+ * and re-normalizes ordering.
+ */
+export function addFieldToEnd(fields: Column[], id: string): Column[] {
+	const next = fields.map((f) =>
+		f.Data === id ? { ...f, ColumnOrder: 999999 } : f,
+	);
+
+	const stillVisible = getVisibleFields(next);
+	const renumbered = normalizeVisibleOrders(stillVisible);
+
+	return next.map((f) => renumbered.find((r) => r.Data === f.Data) ?? f);
+}
+
+/**
+ * Reorders visible fields after a drag operation and updates ColumnOrder.
+ */
+export function reorderVisibleFields(
+	fields: Column[],
+	activeId: string,
+	overId: string,
+	arrayMoveFn: <T>(array: T[], from: number, to: number) => T[],
+): Column[] {
+	const visible = getVisibleFields(fields);
+
+	const oldIndex = visible.findIndex((f) => f.Data === activeId);
+	const newIndex = visible.findIndex((f) => f.Data === overId);
+
+	if (oldIndex < 0 || newIndex < 0) return fields;
+
+	const moved = normalizeVisibleOrders(
+		arrayMoveFn(visible, oldIndex, newIndex),
+	);
+
+	return fields.map((f) => moved.find((m) => m.Data === f.Data) ?? f);
+}

package/src/features/editor/components/column-list/column-list-title.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { Box, Typography } from "@mui/material";
+
+interface Props {
+	selectedResourceKey: string;
+}
+
+export function ColumnListTitle({ selectedResourceKey }: Readonly<Props>) {
+	return (
+		<Typography variant="h6" gutterBottom fontWeight={600}>
+			Configure Fields for:{" "}
+			<Box component="span" color="primary.main">
+				{selectedResourceKey}
+			</Box>
+		</Typography>
+	);
+}

package/src/features/editor/components/column-list/column-list.tsx

@@ -0,0 +1,212 @@
+import {
+	closestCenter,
+	DndContext,
+	type DragEndEvent,
+	PointerSensor,
+	TouchSensor,
+	useSensor,
+	useSensors,
+} from "@dnd-kit/core";
+import {
+	arrayMove,
+	SortableContext,
+	verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import type { Column, ViewConfig } from "@evenicanpm/portal-types-schemas";
+import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
+import {
+	Box,
+	Button,
+	Card,
+	CardContent,
+	Chip,
+	Menu,
+	MenuItem,
+	Typography,
+} from "@mui/material";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+import type { EditorQueries } from "../editor";
+import { ColumnCard } from "./column-card";
+import {
+	addFieldToEnd,
+	getRemovedFields,
+	getVisibleFields,
+	patchField,
+	removeField,
+	reorderVisibleFields,
+} from "./column-list-state";
+
+export type ColumnListProps = {
+	resourceKey: string;
+	initialState: ViewConfig;
+	editorQueries: EditorQueries;
+};
+
+export function ColumnList({
+	resourceKey,
+	initialState,
+	editorQueries,
+}: Readonly<ColumnListProps>) {
+	const columns = initialState.Columns;
+	const actions = initialState.Actions;
+	const [fields, setFields] = useState<Column[]>(columns ?? []);
+	const [addAnchor, setAddAnchor] = useState<null | HTMLElement>(null);
+	const addOpen = Boolean(addAnchor);
+
+	const sensors = useSensors(
+		useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
+		useSensor(TouchSensor, {
+			activationConstraint: { delay: 150, tolerance: 5 },
+		}),
+	);
+
+	const qc = useQueryClient();
+
+	const saveConfig = useMutation({
+		...editorQueries.saveViewConfigMutation(resourceKey),
+		onSuccess: () => {
+			qc.invalidateQueries({ queryKey: ["viewConfig", resourceKey] });
+		},
+	});
+
+	const visibleFields = getVisibleFields(fields);
+	const removedFields = getRemovedFields(fields);
+
+	const onDragEnd = (event: DragEndEvent) => {
+		const { active, over } = event;
+		if (!over) return;
+		if (active.id === over.id) return;
+
+		setFields((prev) =>
+			reorderVisibleFields(prev, String(active.id), String(over.id), arrayMove),
+		);
+	};
+
+	const onChangeField = (id: string, patch: Partial<Column>) => {
+		setFields((prev) => patchField(prev, id, patch));
+	};
+
+	const onRemoveField = (id: string) => {
+		setFields((prev) => removeField(prev, id));
+	};
+
+	const onAddField = (id: string) => {
+		setFields((prev) => addFieldToEnd(prev, id));
+	};
+
+	const isDirty =
+		JSON.stringify(initialState.Columns) !== JSON.stringify(fields);
+
+	const onSaveClick = () => {
+		if (!isDirty) return;
+
+		saveConfig.mutate({
+			key: resourceKey,
+			viewConfig: { Columns: fields, Actions: actions },
+		});
+	};
+
+	return (
+		<>
+			<Box
+				sx={{
+					display: "flex",
+					justifyContent: "flex-end",
+					alignItems: "center",
+					position: "relative",
+					mb: 2,
+					height: 40,
+				}}
+			>
+				{isDirty && (
+					<Chip
+						label="Unsaved Changes"
+						size="small"
+						color="warning"
+						variant="outlined"
+						sx={{
+							fontWeight: "bold",
+							height: 20,
+							position: "absolute",
+							left: 0,
+						}}
+					/>
+				)}
+				<Button
+					variant="contained"
+					onClick={onSaveClick}
+					disabled={!isDirty}
+					sx={{ minWidth: 150 }}
+				>
+					Save Changes
+				</Button>
+			</Box>
+
+			<DndContext
+				sensors={sensors}
+				collisionDetection={closestCenter}
+				onDragEnd={onDragEnd}
+			>
+				{fields.length === 0 ? (
+					<Card
+						variant="outlined"
+						sx={{
+							textAlign: "center",
+							color: "text.secondary",
+						}}
+					>
+						<CardContent>
+							<Typography variant="subtitle1">No fields found</Typography>
+						</CardContent>
+					</Card>
+				) : (
+					<SortableContext
+						items={visibleFields.map((f) => f.Data)}
+						strategy={verticalListSortingStrategy}
+					>
+						<Box>
+							{visibleFields.map((field) => (
+								<ColumnCard
+									key={field.Data}
+									field={field}
+									onChange={onChangeField}
+									onRemove={onRemoveField}
+								/>
+							))}
+
+							<Box sx={{ display: "flex", justifyContent: "center", mt: 1 }}>
+								<Button
+									variant="outlined"
+									startIcon={<AddCircleOutlineIcon />}
+									onClick={(e) => setAddAnchor(e.currentTarget)}
+									disabled={removedFields.length === 0}
+								>
+									Add column
+								</Button>
+							</Box>
+
+							<Menu
+								anchorEl={addAnchor}
+								open={addOpen}
+								onClose={() => setAddAnchor(null)}
+							>
+								{removedFields.map((f) => (
+									<MenuItem
+										key={f.Data}
+										onClick={() => {
+											onAddField(f.Data);
+											setAddAnchor(null);
+										}}
+									>
+										{f.Label || f.Data}
+									</MenuItem>
+								))}
+							</Menu>
+						</Box>
+					</SortableContext>
+				)}
+			</DndContext>
+		</>
+	);
+}

package/src/features/editor/components/column-list/index.ts

@@ -0,0 +1 @@
+export { ColumnListSection } from "./column-list-section";

package/src/features/editor/components/editor-dms-card.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { CheckCircle } from "@mui/icons-material";
+import { Avatar, Box, Paper, Stack, Typography } from "@mui/material";
+
+interface Props {
+	/** Currently selected resource */
+	selectedResourceKey: string;
+	/** A pojo with providers -> images */
+	providerImageMap: Record<string, string>;
+	/** A pojo with resources -> providers */
+	resourceProviderMap: Record<string, string>;
+}
+
+/**
+ * Editor view header contains provider details and other
+ * resource/view config data not related to the column list.
+ */
+export function EditorDMSCard({
+	selectedResourceKey,
+	providerImageMap,
+	resourceProviderMap,
+}: Readonly<Props>) {
+	const selectedResourceProvider = resourceProviderMap[selectedResourceKey];
+	const logoUrl = providerImageMap[selectedResourceProvider];
+	return (
+		<Paper
+			elevation={1}
+			sx={{
+				p: { xs: 2, sm: 3 },
+				mb: 3,
+				borderRadius: 2,
+			}}
+		>
+			<Stack
+				direction={{ xs: "column", sm: "row" }}
+				justifyContent="space-between"
+				alignItems={{ xs: "stretch", sm: "center" }}
+				spacing={2}
+			>
+				<Stack direction="row" spacing={2} alignItems="center">
+					<Avatar
+						src={logoUrl}
+						alt={`${selectedResourceKey}-${logoUrl}`}
+						sx={{
+							width: 56,
+							height: 56,
+						}}
+					/>
+					<Box>
+						<Typography variant="h5" fontWeight={700}>
+							Resource: {selectedResourceKey || "None"}
+						</Typography>
+						<Stack
+							direction="row"
+							spacing={1}
+							alignItems="center"
+							sx={{ mt: 0.5 }}
+						>
+							<Typography variant="body2" color="text.secondary">
+								provider: {selectedResourceProvider}
+							</Typography>
+
+							<Stack direction="row" spacing={0.5} alignItems="center">
+								<CheckCircle sx={{ fontSize: 16, color: "success.main" }} />
+								<Typography
+									variant="body2"
+									sx={{ color: "success.main", fontWeight: 600 }}
+								>
+									enabled
+								</Typography>
+							</Stack>
+						</Stack>
+					</Box>
+				</Stack>
+			</Stack>
+		</Paper>
+	);
+}

package/src/features/editor/components/editor-tabs.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { Box, Paper, Tab, Tabs, Typography } from "@mui/material";
+
+interface Props {
+	/** List of resource keys to select from */
+	resourceList: string[];
+	/** Currently selected key */
+	selectedResourceKey: string;
+	/** Action to take when resource changes. */
+	handleChangeResource: (id: string) => void;
+}
+
+/**
+ * Tab-based selection menu for resource keys on the editor page.
+ */
+function EditorResourceTabs({
+	resourceList,
+	selectedResourceKey,
+	handleChangeResource,
+}: Readonly<Props>) {
+	return (
+		<Box sx={{ my: 3 }}>
+			<Typography variant="subtitle1" fontWeight={600} gutterBottom>
+				Selected Resource
+			</Typography>
+			<Paper>
+				<Tabs
+					value={selectedResourceKey}
+					onChange={(_, v) => handleChangeResource(v)}
+					variant="fullWidth"
+				>
+					{resourceList.map((docType) => (
+						<Tab key={docType} label={docType} value={docType} />
+					))}
+				</Tabs>
+			</Paper>
+		</Box>
+	);
+}
+
+export { EditorResourceTabs };

package/src/features/editor/components/editor.tsx

@@ -0,0 +1,62 @@
+"use client";
+import type { ViewConfig } from "@evenicanpm/portal-types-schemas";
+import { Box } from "@mui/material";
+import type { QueryKey } from "@tanstack/react-query";
+import { useState } from "react";
+import { ColumnListSection } from "./column-list";
+import { EditorDMSCard } from "./editor-dms-card";
+import { EditorResourceTabs } from "./editor-tabs";
+
+export type SaveInput = { key: string; viewConfig: ViewConfig };
+
+export type ViewConfigQuery = (resourceKey: string) => {
+	queryKey: QueryKey;
+	queryFn: () => Promise<ViewConfig>;
+};
+
+export type SaveViewConfigMutation = (resourceKey: string) => {
+	mutationKey: QueryKey;
+	mutationFn: (input: SaveInput) => Promise<ViewConfig>;
+};
+
+export type EditorQueries = {
+	viewConfigQuery: ViewConfigQuery;
+	saveViewConfigMutation: SaveViewConfigMutation;
+};
+
+export interface EditorProps {
+	resourceList: string[];
+	providerMetaData: Record<string, string>;
+	resourceProviderMap: Record<string, string>;
+	editorQueries: EditorQueries;
+}
+/**
+ * Top-Level editor component.
+ */
+export function Editor({
+	resourceList,
+	providerMetaData,
+	resourceProviderMap,
+	editorQueries,
+}: Readonly<EditorProps>) {
+	const [currentResource, setCurrentResource] = useState(resourceList[0]);
+
+	return (
+		<Box sx={{ p: { sm: 3 }, maxWidth: 1200, mx: "auto" }}>
+			<EditorResourceTabs
+				resourceList={resourceList}
+				handleChangeResource={setCurrentResource}
+				selectedResourceKey={currentResource}
+			/>
+			<EditorDMSCard
+				selectedResourceKey={currentResource}
+				providerImageMap={providerMetaData}
+				resourceProviderMap={resourceProviderMap}
+			/>
+			<ColumnListSection
+				currentResourceKey={currentResource}
+				editorQueries={editorQueries}
+			/>
+		</Box>
+	);
+}

package/src/features/editor/index.ts

@@ -0,0 +1 @@
+export { Editor, type EditorProps } from "./components/editor";

package/src/index.ts

@@ -0,0 +1,3 @@
+export { Portal, type PortalProps } from "./editor";
+
+export { Editor } from "./features/editor";