@evenicanpm/portal-editor-ui 1.4.0 → 1.5.0

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

@@ -1,212 +0,0 @@
-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/editor-dms-card.tsx

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

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

@@ -1,62 +0,0 @@
-"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/tsconfig.json

@@ -1,28 +0,0 @@
-{
-	"compilerOptions": {
-		"target": "ES6",
-		"useDefineForClassFields": true,
-		"lib": ["ES2022", "DOM", "DOM.Iterable"],
-		"module": "ESNext",
-		"sourceMap": true,
-		"esModuleInterop": true,
-		"skipLibCheck": true,
-		"declaration": true,
-		"preserveSymlinks": true,
-		"moduleResolution": "Node",
-		"resolveJsonModule": true,
-		"isolatedModules": true,
-		"emitDeclarationOnly": true,
-		"jsx": "preserve",
-		"strict": true,
-		"noUnusedLocals": true,
-		"noUnusedParameters": true,
-		"noFallthroughCasesInSwitch": true,
-		"allowJs": true,
-		"forceConsistentCasingInFileNames": true,
-		"incremental": true,
-		"baseUrl": "./",
-		"outDir": "./dist"
-	},
-	"include": ["src"]
-}

package/typedoc.json

@@ -1,10 +0,0 @@
-{
-	"highlightLanguages": [
-		"bash",
-		"typescript",
-		"tsx",
-		"javascript",
-		"html",
-		"css"
-	]
-}