@evenicanpm/portal-editor-ui 1.4.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@evenicanpm/portal-editor-ui",
-	"version": "1.4.0",
+	"version": "1.5.0",
 	"description": "",
 	"license": "ISC",
 	"author": "",
@@ -14,6 +14,9 @@
 	"exports": {
 		".": "./src/index.ts"
 	},
+	"files": [
+		"dist"
+	],
 	"types": "./dist/index.d.ts",
 	"devDependencies": {
 		"@emotion/react": "^11.11.3",
@@ -37,8 +40,8 @@
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.0",
 		"@dnd-kit/utilities": "^3.2.2",
-		"@evenicanpm/storefront-portal-types-schemas": "*",
+		"@evenicanpm/portal-types-schemas": "^1.5.0",
 		"@tanstack/react-query": "^5.90.11"
 	},
-	"gitHead": "0614726ec6b7ce9564706514a6b756b390a13e96"
+	"gitHead": "5c5e3fe19b92a17cbaf897b4cee20ee59331603f"
 }

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

@@ -1,48 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,134 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,132 +0,0 @@
-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-list-section.tsx

@@ -1,49 +0,0 @@
-"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

@@ -1,49 +0,0 @@
-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

@@ -1,92 +0,0 @@
-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

@@ -1,18 +0,0 @@
-"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>
-	);
-}