@archbase/components 3.0.0

package/src/jsonschema/JsonSchemaEditor/schema-array/index.tsx

@@ -0,0 +1,164 @@
+import { getPathDepthLevel } from '@archbase/core';
+import { ActionIcon, Button, Checkbox, Flex, FlexProps, Input, Modal, Select, Tooltip } from '@mantine/core';
+import { IconCirclePlus, IconSettings } from '@tabler/icons-react';
+import { useArchbaseTranslation } from '@archbase/core';
+import React, { useContext, useRef, useState } from 'react';
+import { JSONSchema7, JSONSchema7TypeName } from '../../ArchbaseJsonSchemaEditor.types';
+import { ArchbaseJsonSchemaEditorContext } from '../ArchbaseJsonSchemaEditor.context';
+import { AdvancedSettings } from '../schema-advanced';
+import { SchemaObject } from '../schema-object';
+import { DataType, getDefaultSchema, handleTypeChange, random, SchemaTypes } from '../utils';
+
+export interface SchemaArrayProps extends FlexProps {
+	path: string;
+	jsonSchema: JSONSchema7;
+	isReadOnly: boolean;
+}
+const itemTypes = SchemaTypes.map((item) => ({ value: item, label: item }));
+export const SchemaArray = ({
+	path,
+	jsonSchema,
+	isReadOnly,
+}: SchemaArrayProps) => {
+	const { handleChange } = useContext(ArchbaseJsonSchemaEditorContext);
+	const { t } = useArchbaseTranslation();
+	const [open, setOpen] = useState(false);
+
+	const items = jsonSchema.items as JSONSchema7;
+	const length = getPathDepthLevel(path) - (path.match(/(properties)/g) ? path.match(/(properties)/g).length : 0);
+
+	const tagPaddingLeftStyle = {
+		paddingLeft: `${20 * (length + 1)}px`,
+	};
+
+	const onCloseAdvanced = (): void => {
+		setOpen(false);
+	};
+
+	const showadvanced = (): void => {
+		setOpen(true);
+	};
+
+	const focusRef = useRef(null);
+	return (
+		<>
+			<Flex
+				direction="row"
+				align="center"
+				wrap="nowrap"
+				className="array-item"
+				mt={2}
+				mr={5}
+				style={tagPaddingLeftStyle}
+			>
+				<Input
+					key="Items"
+					style={{ flexShrink: 1 }}
+					disabled
+					value={`${t('archbase:Items')}`}
+					size="sm"
+					m={2}
+					variant="outline"
+				/>
+				<Checkbox disabled m={2} color="blue" />
+				<Select
+					readOnly={isReadOnly}
+					value={items.type as JSONSchema7TypeName}
+					size="sm"
+					m={2}
+					placeholder={`${t('archbase:Choose data type')}`}
+					onChange={(value: string) => {
+						const newSchema = handleTypeChange(value as JSONSchema7TypeName, false);
+						handleChange(`${path}.items`, newSchema, 'ASSIGN_VALUE');
+					}}
+					data={itemTypes}
+				/>
+				<Input
+					value={items.title}
+					readOnly={isReadOnly}
+					size="sm"
+					m={2}
+					placeholder={`${t('archbase:Add Title')}`}
+					onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+						handleChange(`${path}.items.title`, event.target.value, 'ASSIGN_VALUE');
+					}}
+				/>
+				<Input
+					value={items.description}
+					readOnly={isReadOnly}
+					size="sm"
+					m={2}
+					placeholder={`${t('archbase:Add Description')}`}
+					onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+						handleChange(`${path}.items.description`, event.target.value, 'ASSIGN_VALUE');
+					}}
+				/>
+				<Tooltip
+					aria-label={`${t('archbase:Advanced Settings')}`}
+					label={`${t('archbase:Advanced Settings')}`}
+					position="top"
+				>
+					<ActionIcon
+						disabled={isReadOnly}
+						size="sm"
+						mt={2}
+						mb={2}
+						ml={1}
+						color="blue"
+						aria-label={`${t('archbase:Advanced Settings')}`}
+						onClick={() => {
+							showadvanced();
+						}}
+					>
+						<IconSettings />
+					</ActionIcon>
+				</Tooltip>
+
+				{items.type === 'object' && (
+					<Tooltip
+						aria-label={`${t('archbase:Add Child Node')}`}
+						label={`${t('archbase:Add Child Node')}`}
+						position="top"
+					>
+						<ActionIcon
+							disabled={isReadOnly}
+							size="sm"
+							mt={2}
+							mb={2}
+							mr={2}
+							color="green"
+							aria-label={`${t('archbase:Add Child Node')}`}
+							onClick={() => {
+								const fieldName = `field_${random()}`;
+								handleChange(
+									`${path}.items.properties.${fieldName}`,
+									getDefaultSchema(DataType.string),
+									'ASSIGN_VALUE',
+								);
+							}}
+						>
+							<IconCirclePlus />
+						</ActionIcon>
+					</Tooltip>
+				)}
+			</Flex>
+			{items.type === 'object' && <SchemaObject path={`${path}.items`} jsonSchema={items} isReadOnly={isReadOnly} />}
+			{items.type === 'array' && <SchemaArray path={`${path}.items`} jsonSchema={items} isReadOnly={isReadOnly} />}
+			<div ref={focusRef}>
+				<Modal
+					opened={open}
+					size="lg"
+					onClose={onCloseAdvanced}
+					title={`${t('archbase:Advanced Schema Settings')}`}
+				>
+					<AdvancedSettings path={`${path}.items`} item={items} />
+					<Flex justify="flex-end">
+						<Button mr={3} onClick={onCloseAdvanced}>
+							{`${t('archbase:Close')}`}
+						</Button>
+					</Flex>
+				</Modal>
+			</div>
+		</>
+	);
+};

package/src/jsonschema/JsonSchemaEditor/schema-item/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AACA,OAAO,EAA8B,SAAS,EAA0B,MAAM,eAAe,CAAC;AAK9F,OAAO,EAAE,WAAW,EAAuB,MAAM,sCAAsC,CAAC;AAQxF,MAAM,WAAW,eAAgB,SAAQ,SAAS;IACjD,UAAU,EAAE,WAAW,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,UAAU,EAAE,OAAO,CAAC;CACpB;AAGD,eAAO,MAAM,UAAU,0EAOpB,eAAe,4CAoLjB,CAAC"}

package/src/jsonschema/JsonSchemaEditor/schema-item/index.tsx

@@ -0,0 +1,213 @@
+import { getPathDepthLevel } from '@archbase/core';
+import { ActionIcon, Checkbox, Flex, FlexProps, Input, Select, Tooltip } from '@mantine/core';
+import { IconCirclePlus, IconSettings, IconTrash } from '@tabler/icons-react';
+import { useArchbaseTranslation } from '@archbase/core';
+import React, { useContext, useState } from 'react';
+import { useDebouncedCallback } from 'use-debounce';
+import { JSONSchema7, JSONSchema7TypeName } from '../../ArchbaseJsonSchemaEditor.types';
+import { ArchbaseJsonSchemaEditorContext } from '../ArchbaseJsonSchemaEditor.context';
+import { DropPlus } from '../drop-plus';
+import { SchemaArray } from '../schema-array';
+import { SchemaObject } from '../schema-object';
+import { DataType, getDefaultSchema, handleTypeChange, random, SchemaTypes } from '../utils';
+import { deleteKey, renameKeys } from '../utils';
+
+export interface SchemaItemProps extends FlexProps {
+	jsonSchema: JSONSchema7;
+	name: string;
+	itemPath: string;
+	parentPath: string;
+	showadvanced: (item: string) => void;
+	isReadOnly: boolean;
+}
+
+const itemTypes = SchemaTypes.map((item) => ({ value: item, label: item }));
+export const SchemaItem = ({
+	name,
+	showadvanced,
+	jsonSchema,
+	itemPath,
+	parentPath,
+	isReadOnly,
+}: SchemaItemProps) => {
+	const { handleChange } = useContext(ArchbaseJsonSchemaEditorContext);
+	const { t } = useArchbaseTranslation();
+	const [error, setError] = useState<string | undefined>();
+	const required = jsonSchema.required as string[];
+	const item: JSONSchema7 = jsonSchema.properties[name] as JSONSchema7;
+
+	const length =
+		getPathDepthLevel(parentPath) - (parentPath.match(/(properties)/g) ? parentPath.match(/(properties)/g).length : 0);
+	const tagPaddingLeftStyle = {
+		paddingLeft: `${20 * (length + 1)}px`,
+	};
+
+	const debounced = useDebouncedCallback(
+		(newValue: string) => {
+			if (jsonSchema.properties && jsonSchema.properties[newValue]) {
+				setError(`${t('archbase:Duplicate Properties, the property already exists')}`);
+			} else {
+				const oldName = name;
+				const proptoupdate = newValue;
+
+				const newobj = renameKeys({ [oldName]: proptoupdate }, jsonSchema.properties);
+				handleChange(`${parentPath}.properties`, JSON.parse(JSON.stringify(newobj)), 'ASSIGN_VALUE');
+				setError('');
+			}
+		},
+		// delay in ms
+		1000,
+	);
+	if (!item) {
+		return <></>;
+	}
+	return (
+		<div>
+			<Flex align="center" direction="row" wrap="nowrap" className="schema-item" style={tagPaddingLeftStyle}>
+				<Input.Wrapper error={error}>
+					<Input
+						readOnly={isReadOnly}
+						defaultValue={name}
+						size="sm"
+						m={2}
+						placeholder={`${t('archbase:Enter property name')}`}
+						onChange={(evt: React.ChangeEvent<HTMLInputElement>) => {
+							debounced(evt.target.value);
+						}}
+					/>
+				</Input.Wrapper>
+
+				<Checkbox
+					disabled={isReadOnly}
+					checked={required ? required.length > 0 && required.includes(name) : false}
+					m={2}
+					color="blue"
+					onChange={(evt: React.ChangeEvent<HTMLInputElement>) => {
+						if (!evt.target.checked) {
+							handleChange(`${parentPath}.required`, name, 'REMOVE_ITEM_FROM_ARRAY');
+						} else {
+							handleChange(`${parentPath}.required`, name, 'PUSH_ITEM_TO_ARRAY');
+						}
+					}}
+				/>
+				<Select
+					readOnly={isReadOnly}
+					value={item.type.toString()}
+					size="sm"
+					m={2}
+					placeholder={`${t('archbase:Choose data type')}`}
+					onChange={(value: string) => {
+						const newSchema = handleTypeChange(value as JSONSchema7TypeName, false);
+						handleChange(`${itemPath}`, newSchema, 'ASSIGN_VALUE');
+					}}
+					data={itemTypes}
+				/>
+				<Input
+					readOnly={isReadOnly}
+					value={item.title || ''}
+					size="sm"
+					m={2}
+					placeholder={`${t('archbase:Add Title')}`}
+					onChange={(evt: React.ChangeEvent<HTMLInputElement>) => {
+						handleChange(`${itemPath}.title`, evt.target.value, 'ASSIGN_VALUE');
+					}}
+				/>
+				<Input
+					readOnly={isReadOnly}
+					value={item.description || ''}
+					size="sm"
+					m={2}
+					placeholder={`${t('archbase:Add Description')}`}
+					onChange={(evt: React.ChangeEvent<HTMLInputElement>) => {
+						handleChange(`${itemPath}.description`, evt.target.value, 'ASSIGN_VALUE');
+					}}
+				/>
+
+				{item.type !== 'object' && item.type !== 'array' && (
+					<Tooltip
+						aria-label={`${t('archbase:Advanced Settings')}`}
+						label={`${t('archbase:Advanced Settings')}`}
+						position="top"
+					>
+						<ActionIcon
+							disabled={isReadOnly}
+							size="sm"
+							mt={2}
+							mb={2}
+							ml={1}
+							aria-label={`${t('archbase:Advanced Settings')}`}
+							onClick={() => {
+								showadvanced(name);
+							}}
+						>
+							<IconSettings />
+						</ActionIcon>
+					</Tooltip>
+				)}
+
+				<Tooltip
+					aria-label={`${t('archbase:Remove Node')}`}
+					label={`${t('archbase:Remove Node')}`}
+					position="top"
+				>
+					<ActionIcon
+						disabled={isReadOnly}
+						size="sm"
+						mt={2}
+						mb={2}
+						ml={1}
+						color="red"
+						aria-label={`${t('archbase:Remove Node')}`}
+						onClick={() => {
+							const updatedState = deleteKey(name, JSON.parse(JSON.stringify(jsonSchema.properties)));
+							handleChange(`${parentPath}.properties`, updatedState, 'ASSIGN_VALUE');
+						}}
+					>
+						<IconTrash />
+					</ActionIcon>
+				</Tooltip>
+
+				{item.type === 'object' ? (
+					<DropPlus
+						parentPath={parentPath}
+						itemPath={itemPath}
+						item={item}
+						parent={jsonSchema}
+						isReadOnly={isReadOnly}
+					/>
+				) : (
+					<Tooltip
+						aria-label={`${t('archbase:Add Sibling Node')}`}
+						label={`${t('archbase:Add Sibling Node')}`}
+						position="top"
+					>
+						<ActionIcon
+							disabled={isReadOnly}
+							size="sm"
+							mt={2}
+							mb={2}
+							mr={2}
+							variant="subtle"
+							color="green"
+							aria-label={`${t('archbase:Add Sibling Node')}`}
+							onClick={() => {
+								if (jsonSchema.properties) {
+									const fieldName = `field_${random()}`;
+									handleChange(
+										`${parentPath}.properties.${fieldName}`,
+										getDefaultSchema(DataType.string),
+										'ASSIGN_VALUE',
+									);
+								}
+							}}
+						>
+							<IconCirclePlus />
+						</ActionIcon>
+					</Tooltip>
+				)}
+			</Flex>
+			{item.type === 'object' && <SchemaObject path={itemPath} jsonSchema={item} isReadOnly={isReadOnly} />}
+			{item.type === 'array' && <SchemaArray path={itemPath} jsonSchema={item} isReadOnly={isReadOnly} />}
+		</div>
+	);
+};

package/src/jsonschema/JsonSchemaEditor/schema-object/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAI1D,MAAM,WAAW,iBAAiB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,WAAW,CAAC;IACxB,UAAU,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,sCAItB,iBAAiB,4CAiDnB,CAAC"}

package/src/jsonschema/JsonSchemaEditor/schema-object/index.tsx

@@ -0,0 +1,68 @@
+import { Button, Flex, Modal } from '@mantine/core';
+import { useArchbaseTranslation } from '@archbase/core';
+import React, { useRef, useState } from 'react';
+import { JSONSchema7 } from '../ArchbaseJsonSchemaEditor';
+import { AdvancedSettings } from '../schema-advanced';
+import { SchemaItem } from '../schema-item';
+
+export interface SchemaObjectProps {
+	path: string;
+	jsonSchema: JSONSchema7;
+	isReadOnly: boolean;
+}
+
+export const SchemaObject = ({
+	path,
+	jsonSchema,
+	isReadOnly,
+}: SchemaObjectProps) => {
+	const { t } = useArchbaseTranslation();
+	const [open, setOpen] = useState(false);
+	const [item, setItem] = useState('');
+
+	const onCloseAdvanced = (): void => {
+		setOpen(false);
+	};
+
+	const showadvanced = (item: string): void => {
+		setOpen(true);
+		setItem(item);
+	};
+	const focusRef = useRef(null);
+	if (!jsonSchema.properties) {
+		return <></>;
+	} else {
+		return (
+			<div className="object-style">
+				{Object.keys(jsonSchema.properties).map((name) => {
+					return (
+						<SchemaItem
+							key={String(name)}
+							parentPath={path}
+							itemPath={`${path}.properties.${name}`}
+							name={name as string}
+							showadvanced={showadvanced}
+							jsonSchema={jsonSchema}
+							isReadOnly={isReadOnly}
+						/>
+					);
+				})}
+				<div ref={focusRef}>
+					<Modal
+						opened={open}
+						size="lg"
+						onClose={onCloseAdvanced}
+						title={`${t('archbase:Advanced Schema Settings')}`}
+					>
+						<AdvancedSettings path={`${path}.properties.${item}`} item={jsonSchema.properties[item] as JSONSchema7} />
+						<Flex justify="flex-end">
+							<Button mr={3} onClick={onCloseAdvanced}>
+								{`${t('archbase:Close')}`}
+							</Button>
+						</Flex>
+					</Modal>
+				</div>
+			</div>
+		);
+	}
+};

package/src/jsonschema/JsonSchemaEditor/schema-root/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8B,SAAS,EAAqC,MAAM,eAAe,CAAC;AAIzG,OAAO,EAAE,WAAW,EAAuB,MAAM,sCAAsC,CAAC;AAKxF,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IAClD,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,WAAW,CAAC;IACxB,UAAU,EAAE,OAAO,CAAC;CACpB;AACD,eAAO,MAAM,UAAU,sCAIpB,gBAAgB,4CAmFlB,CAAC"}

package/src/jsonschema/JsonSchemaEditor/schema-root/index.tsx

@@ -0,0 +1,103 @@
+import { ActionIcon, Checkbox, Flex, FlexProps, Input, Select, TextInput, Tooltip } from '@mantine/core';
+import { IconCirclePlus } from '@tabler/icons-react';
+import { useArchbaseTranslation } from '@archbase/core';
+import React, { useContext } from 'react';
+import { JSONSchema7, JSONSchema7TypeName } from '../../ArchbaseJsonSchemaEditor.types';
+import { ArchbaseJsonSchemaEditorContext } from '../ArchbaseJsonSchemaEditor.context';
+import { DataType, getDefaultSchema, handleTypeChange, random } from '../utils';
+
+
+export interface SchemaArrayProps extends FlexProps {
+	path: string;
+	jsonSchema: JSONSchema7;
+	isReadOnly: boolean;
+}
+export const SchemaRoot = ({
+	path,
+	jsonSchema,
+	isReadOnly,
+}: SchemaArrayProps) => {
+	const { handleChange } = useContext(ArchbaseJsonSchemaEditorContext);
+	const { t } = useArchbaseTranslation();
+	return (
+		<>
+			<Flex data-testid="jsonschema-editor" direction="row" align="center" wrap="nowrap" mt={2} mr={5}>
+				<Input disabled placeholder={`${t('archbase:root')}`} m={2} />
+				<Tooltip
+					aria-label={`${t('archbase:All Required')}`}
+					label={`${t('archbase:All Required')}`}
+					position="top"
+				>
+					<Checkbox
+						disabled={isReadOnly}
+						m={2}
+						width={20}
+						color="blue"
+					/>
+				</Tooltip>
+
+				<Select
+					readOnly={isReadOnly}
+					value={jsonSchema.type.toString()}
+					size="sm"
+					m={2}
+					placeholder={`${t('archbase:Choose root data type')}`}
+					onChange={(value: string) => {
+						const newSchema = handleTypeChange(value as JSONSchema7TypeName, false);
+						handleChange(`${path}`, newSchema, 'ASSIGN_VALUE');
+					}}
+					data={[
+						{ value: 'object', label: 'object' },
+						{ value: 'array', label: 'array' },
+					]}
+				/>
+				<TextInput
+					value={jsonSchema.title ?? ''}
+					readOnly={isReadOnly}
+					size="sm"
+					m={2}
+					placeholder={`${t('archbase:Add Title')}`}
+					onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+						handleChange(`${path}.title`, event.currentTarget.value, 'ASSIGN_VALUE');
+					}}
+				/>
+				<TextInput
+					value={jsonSchema.description ?? ''}
+					readOnly={isReadOnly}
+					size="sm"
+					m={2}
+					placeholder={`${t('archbase:Add Description')}`}
+					onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+						handleChange(`${path}.description`, event.currentTarget.value, 'ASSIGN_VALUE');
+					}}
+				/>
+
+				{jsonSchema.type === 'object' && (
+					<>
+						<Tooltip
+							aria-label={`${t('archbase:Add Child Node')}`}
+							label={`${t('archbase:Add Child Node')}`}
+							position="top"
+						>
+							<ActionIcon
+								disabled={isReadOnly}
+								size="sm"
+								mt={2}
+								mb={2}
+								mr={2}
+								color="green"
+								aria-label={`${t('archbase:Add Child Node')}`}
+								onClick={() => {
+									const fieldName = `field_${random()}`;
+									handleChange(`${path}.properties.${fieldName}`, getDefaultSchema(DataType.string), 'ASSIGN_VALUE');
+								}}
+							>
+								<IconCirclePlus />
+							</ActionIcon>
+						</Tooltip>
+					</>
+				)}
+			</Flex>
+		</>
+	);
+};

package/src/jsonschema/JsonSchemaEditor/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AAIrF,eAAO,MAAM,kBAAkB,MAAM,CAAC;AAItC,eAAO,MAAM,sBAAsB,WAAY,WAAW,KAAG,OAQ5D,CAAC;AAEF,oBAAY,YAAY;IACvB,OAAO,IAAA;IACP,KAAK,IAAA;CACL;AAED,eAAO,MAAM,YAAY;;GAUxB,CAAC;AAEF,eAAO,MAAM,WAAW,UAAgE,CAAC;AAEzF,oBAAY,QAAQ;IACnB,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,KAAK,WAAW;IAChB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,OAAO,YAAY;CACnB;AAED,eAAO,MAAM,gBAAgB,aAAc,QAAQ,kBAAkB,OAAO,KAAG,WAwG9E,CAAC;AAEF,eAAO,MAAM,MAAM,cAElB,CAAC;AAEF,eAAO,MAAM,gBAAgB,aAAc,mBAAmB,cAAc,OAAO,KAAG,WASrF,CAAC;AAEF,eAAO,MAAM,UAAU,KAUtB,CAAC;AAEF,eAAO,MAAM,SAAS,QAAS,MAAM,UAAU,GAAG,QAGjD,CAAC;AAEF,eAAO,MAAM,WAAW,yBAQvB,CAAC"}