@archbase/components 3.0.0

package/src/jsonschema/JsonSchemaEditor/ArchbaseJsonSchemaEditor.tsx

@@ -0,0 +1,99 @@
+/**
+ * ArchbaseJsonSchemaEditor — editor visual de JSON Schema (objetos/arrays/avançado).
+ * @status experimental
+ */
+import { setNestedObjectValue, SetNestedObjectValueOperation } from '@archbase/core';
+import { Flex } from '@mantine/core';
+import { useUncontrolled } from '@mantine/hooks';
+import { produce } from 'immer';
+import React from 'react';
+import { JSONSchema7, Schema2 } from '../ArchbaseJsonSchemaEditor.types';
+import { ArchbaseJsonSchemaEditorProvider } from './ArchbaseJsonSchemaEditor.context';
+import { SchemaArray } from './schema-array';
+import { SchemaObject } from './schema-object';
+import { SchemaRoot } from './schema-root';
+import { isValidSchemaValidator } from './utils';
+import { useArchbaseTranslation } from '@archbase/core';
+
+export * from '../ArchbaseJsonSchemaEditor.types';
+
+export interface ArchbaseJsonSchemaEditorProps {
+	rootSchema?: JSONSchema7 | undefined;
+	defaultRootSchema?: JSONSchema7 | undefined;
+	onRootSchemaChange?: (schema: JSONSchema7, isValid: boolean) => void;
+	readOnly?: boolean;
+}
+
+const initialSchema: JSONSchema7 = {
+	$schema: 'http://json-schema.org/draft-07/schema#',
+	type: 'object',
+	title: 'title',
+	description: '',
+	properties: {},
+	required: [],
+};
+
+export const ArchbaseJsonSchemaEditor = ({
+	rootSchema,
+	defaultRootSchema,
+	onRootSchemaChange,
+	readOnly = false,
+}: ArchbaseJsonSchemaEditorProps) => {
+	const [internalRootSchema, setInternalRootSchema] = useUncontrolled({
+		value: {
+			jsonSchema: rootSchema ?? initialSchema,
+			isReadOnly: readOnly,
+			fieldId: 0,
+		},
+		defaultValue: {
+			jsonSchema: defaultRootSchema ?? initialSchema,
+			isReadOnly: readOnly,
+			fieldId: 0,
+		},
+		finalValue: initialSchema as Schema2,
+		onChange: (value) => onRootSchemaChange(value.jsonSchema, isValidSchemaValidator(value.jsonSchema)),
+	});
+	const { ready } = useArchbaseTranslation();
+
+	const handleChange = (path: string, value: string, operation: SetNestedObjectValueOperation) => {
+		const newState = produce(internalRootSchema, (draft: any) => {
+			setNestedObjectValue(draft, path, value, operation);
+		});
+		if (rootSchema === undefined) {
+			setInternalRootSchema(newState);
+		}
+
+		if (onRootSchemaChange) {
+			onRootSchemaChange(newState.jsonSchema, isValidSchemaValidator(internalRootSchema.jsonSchema));
+		}
+	};
+	if (ready) {
+	return (
+		<ArchbaseJsonSchemaEditorProvider value={{ handleChange }}>
+			<Flex m={2} direction="column">
+				<SchemaRoot
+					path="jsonSchema"
+					jsonSchema={internalRootSchema.jsonSchema}
+					isReadOnly={internalRootSchema.isReadOnly}
+				/>
+
+				{internalRootSchema?.jsonSchema?.type === 'object' && (
+					<SchemaObject
+						path="jsonSchema"
+						jsonSchema={internalRootSchema.jsonSchema}
+						isReadOnly={internalRootSchema.isReadOnly}
+					/>
+				)}
+
+				{internalRootSchema?.jsonSchema?.type === 'array' && (
+					<SchemaArray
+						path="jsonSchema"
+						jsonSchema={internalRootSchema.jsonSchema}
+						isReadOnly={internalRootSchema.isReadOnly}
+					/>
+				)}
+			</Flex>
+		</ArchbaseJsonSchemaEditorProvider>
+	);}
+	return undefined;
+};

package/src/jsonschema/JsonSchemaEditor/JsonSchemaEditor.scss

@@ -0,0 +1,19 @@
+@import "../variables.scss";
+@import "../typography.scss";
+
+.test-component {
+  background-color: $harvey-white;
+  border: 1px solid $harvey-black;
+  padding: 16px;
+  width: 360px;
+  text-align: center;
+
+  .heading {
+    @include heading;
+  }
+
+  &.test-component-secondary {
+    background-color: $harvey-black;
+    color: $harvey-white;
+  }
+}

package/src/jsonschema/JsonSchemaEditor/advanced-boolean/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAG9E,eAAO,MAAM,eAAe,oBAGzB,sBAAsB,4CAsBxB,CAAC"}

package/src/jsonschema/JsonSchemaEditor/advanced-boolean/index.tsx

@@ -0,0 +1,33 @@
+import { Flex, Select, Stack } from '@mantine/core';
+import { useArchbaseTranslation } from '@archbase/core';
+import React, { useContext } from 'react';
+import { AdvancedItemStateProps } from '../../ArchbaseJsonSchemaEditor.types';
+import { ArchbaseJsonSchemaEditorContext } from '../ArchbaseJsonSchemaEditor.context';
+
+export const AdvancedBoolean = ({
+	path,
+	item,
+}: AdvancedItemStateProps) => {
+	const { handleChange } = useContext(ArchbaseJsonSchemaEditorContext);
+	const { t } = useArchbaseTranslation();
+	return (
+		<Flex direction="column" w="100%" wrap="nowrap">
+			<Stack align="stretch" justify="center" m={1}>
+				<Select
+					label={`${t('archbase:Default value')}`}
+					value={(item.default as string) ?? ''}
+					size="sm"
+					m={2}
+					placeholder={`${t('archbase:Choose data type')}`}
+					onChange={(value: string) => {
+						handleChange(`${path}.default`, value, 'ASSIGN_VALUE');
+					}}
+					data={[
+						{ value: 'true', label: `${t('archbase:true')}` },
+						{ value: 'false', label: `${t('archbase:false')}` },
+					]}
+				/>
+			</Stack>
+		</Flex>
+	);
+};

package/src/jsonschema/JsonSchemaEditor/advanced-number/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAI9E,eAAO,MAAM,cAAc,oBAGxB,sBAAsB,4CA2GxB,CAAC"}

package/src/jsonschema/JsonSchemaEditor/advanced-number/index.tsx

@@ -0,0 +1,119 @@
+import { Checkbox, Flex, Input, NumberInput, Stack, Text, Textarea } from '@mantine/core';
+import { useArchbaseTranslation } from '@archbase/core';
+import React, { useContext, useState } from 'react';
+import { AdvancedItemStateProps } from '../../ArchbaseJsonSchemaEditor.types';
+import { ArchbaseJsonSchemaEditorContext } from '../ArchbaseJsonSchemaEditor.context';
+import { isValidEnum } from '../utils';
+
+export const AdvancedNumber = ({
+	path,
+	item,
+}: AdvancedItemStateProps) => {
+	const { handleChange } = useContext(ArchbaseJsonSchemaEditorContext);
+	const { t } = useArchbaseTranslation();
+	const [error, setError] = useState<string | undefined>();
+
+	const changeEnumOtherValue = (value: string): string[] | null => {
+		const array = value.split('\n');
+		if (array.length === 0 || (array.length === 1 && !array[0])) {
+			return null;
+		}
+
+		return array;
+	};
+
+	const isEnumChecked = item.enum !== undefined;
+	const enumData = item.enum ? (item.enum as string[]) : [];
+	const enumValue = enumData?.join('\n');
+
+	return (
+		<Flex direction="column" w="100%" wrap="nowrap">
+			<Stack align="stretch" justify="center" m={1}>
+				<NumberInput
+					label={`${t('archbase:Default value')}`}
+					size="sm"
+					defaultValue={item.default !== undefined ? Number(item.default) : ''}
+					value={item.default !== undefined ? Number(item.default) : ''}
+					placeholder={`${t('archbase:Default value')}`}
+					onChange={(value: number | string) => {
+						if (value !== '') {
+							handleChange(`${path}.default`, Number(value), 'ASSIGN_VALUE');
+						} else {
+							handleChange(`${path}.default`, null, 'REMOVE');
+						}
+					}}
+				/>
+			</Stack>
+
+			<Stack align="stretch" justify="center" m={1}>
+				<Flex justify="space-between">
+					<NumberInput
+						label={`${t('archbase:Min Value')}`}
+						size="sm"
+						defaultValue={item.minimum !== undefined ? Number(item.minimum) : ''}
+						value={item.minimum !== undefined ? Number(item.minimum) : ''}
+						onChange={(value: number | string) => {
+							if (value !== '') {
+								handleChange(`${path}.minimum`, Number(value), 'ASSIGN_VALUE');
+							} else {
+								handleChange(`${path}.minimum`, null, 'REMOVE');
+							}
+						}}
+					/>
+					<NumberInput
+						label={`${t('archbase:Max Value')}`}
+						size="sm"
+						defaultValue={item.maximum !== undefined ? Number(item.maximum) : ''}
+						value={item.maximum !== undefined ? Number(item.maximum) : ''}
+						onChange={(value: number | string) => {
+							if (value !== '') {
+								handleChange(`${path}.maximum`, Number(value), 'ASSIGN_VALUE');
+							} else {
+								handleChange(`${path}.maximum`, null, 'REMOVE');
+							}
+						}}
+					/>
+				</Flex>
+			</Stack>
+			<Stack align="stretch" justify="center" mt={8}>
+				<Flex align="center" justify="space-between">
+					<Text>{`${t('archbase:Enum')}`}</Text>
+					<Checkbox
+						mx={16}
+						checked={isEnumChecked}
+						onChange={(evt: React.ChangeEvent<HTMLInputElement>) => {
+							if (!evt.target.checked) {
+								handleChange(`${path}.enum`, null, 'REMOVE');
+							} else {
+								handleChange(`${path}.enum`, [''], 'ASSIGN_VALUE');
+							}
+						}}
+					/>
+					<Input.Wrapper w="100%" error={error}>
+						<Textarea
+							value={enumValue}
+							disabled={!isEnumChecked}
+							placeholder={`${t('archbase:ENUM Values - One Entry Per Line')}`}
+							datatype="number"
+							onChange={(evt: React.ChangeEvent<HTMLTextAreaElement>) => {
+								const re = /^[0-9\n]+$/;
+								if (evt.target.value === '' || re.test(evt.target.value)) {
+									const update = changeEnumOtherValue(evt.target.value);
+									if (isValidEnum(update)) {
+										if (update === null) {
+											handleChange(`${path}.enum`, null, 'REMOVE');
+										} else {
+											handleChange(`${path}.enum`, update as string[], 'ASSIGN_VALUE');
+										}
+									} else {
+										setError(`${t('archbase:Enum must not have duplicate values')}`);
+									}
+								}
+							}}
+						/>
+					</Input.Wrapper>
+				</Flex>
+			</Stack>
+		</Flex>
+	);
+};

package/src/jsonschema/JsonSchemaEditor/advanced-string/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAI9E,eAAO,MAAM,cAAc,oBAGxB,sBAAsB,4CAsIxB,CAAC"}

package/src/jsonschema/JsonSchemaEditor/advanced-string/index.tsx

@@ -0,0 +1,146 @@
+import { Checkbox, Flex, Input, NumberInput, Select, Stack, Text, Textarea, TextInput } from '@mantine/core';
+import { useArchbaseTranslation } from '@archbase/core';
+import React, { useContext, useState } from 'react';
+import { AdvancedItemStateProps } from '../../ArchbaseJsonSchemaEditor.types';
+import { ArchbaseJsonSchemaEditorContext } from '../ArchbaseJsonSchemaEditor.context';
+import { isValidEnum, StringFormat } from '../utils';
+
+export const AdvancedString = ({
+	path,
+	item,
+}: AdvancedItemStateProps) => {
+	const { handleChange } = useContext(ArchbaseJsonSchemaEditorContext);
+	const [error, setError] = useState<string | undefined>();
+	const { t } = useArchbaseTranslation();
+
+	const changeEnumOtherValue = (value: string): string[] | null => {
+		if (!value) {
+			return null;
+		}
+		value = value.trim();
+		const array = value.split('\n');
+		if (array.length === 0 || (array.length === 1 && !array[0])) {
+			return null;
+		}
+
+		return array;
+	};
+
+	const isEnumChecked = item.enum !== undefined;
+	const enumData = item.enum ? (item.enum as string[]) : [];
+	let enumValue = enumData?.join('\n');
+	if (enumValue.length > 0) {
+		enumValue = enumValue.concat('\n');
+	}
+	return (
+		<Flex direction="column" w="100%" wrap="nowrap">
+			<Stack align="stretch" justify="center" m={1}>
+				<TextInput
+					id="default"
+					label={`${t('archbase:Default value')}`}
+					placeholder={`${t('archbase:Default value')}`}
+					value={(item.default as string) ?? ''}
+					onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+						handleChange(`${path}.default`, event.target.value, 'ASSIGN_VALUE');
+					}}
+				/>
+			</Stack>
+
+			<Stack align="stretch" justify="center" m={1}>
+				<Flex justify="space-between">
+					<NumberInput
+						label={`${t('archbase:Min Length')}`}
+						size="sm"
+						defaultValue={item.minLength !== undefined ? Number(item.minLength) : ''}
+						value={item.minLength !== undefined ? Number(item.minLength) : ''}
+						onChange={(value: number | string) => {
+							if (value !== '') {
+								handleChange(`${path}.minLength`, Number(value), 'ASSIGN_VALUE');
+							} else {
+								handleChange(`${path}.minLength`, null, 'REMOVE');
+							}
+						}}
+					/>
+					<NumberInput
+						label={`${t('archbase:Max Length')}`}
+						size="sm"
+						defaultValue={item.maxLength !== undefined ? Number(item.maxLength) : ''}
+						value={item.maxLength !== undefined ? Number(item.maxLength) : ''}
+						onChange={(value: number | string) => {
+							if (value !== '') {
+								handleChange(`${path}.maxLength`, Number(value), 'ASSIGN_VALUE');
+							} else {
+								handleChange(`${path}.maxLength`, null, 'REMOVE');
+							}
+						}}
+					/>
+				</Flex>
+			</Stack>
+			<Stack align="stretch" justify="center" m={1}>
+				<TextInput
+					id="pattern"
+					label={`${t('archbase:Pattern')}`}
+					placeholder={`${t('archbase:Must be a valid regular expression')}`}
+					value={item.pattern ?? ''}
+					onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+						handleChange(`${path}.pattern`, event.target.value, 'ASSIGN_VALUE');
+					}}
+				/>
+			</Stack>
+
+			<Stack align="stretch" justify="center" mt={8}>
+				<Flex align="center" justify="space-between">
+					<Text>{`${t('archbase:Enum')}`}</Text>
+					<Checkbox
+						mx={16}
+						checked={isEnumChecked}
+						onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+							if (!event.target.checked) {
+								handleChange(`${path}.enum`, null, 'REMOVE');
+							} else {
+								handleChange(`${path}.enum`, [''], 'ASSIGN_VALUE');
+							}
+						}}
+					/>
+					<Input.Wrapper w="100%" error={error}>
+						<Textarea
+							value={enumValue || ''}
+							disabled={!isEnumChecked}
+							placeholder={`${t('archbase:ENUM Values - One Entry Per Line')}`}
+							onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) => {
+								const update = changeEnumOtherValue(event.target.value);
+								if (isValidEnum(update)) {
+									setError('');
+									if (update === null) {
+										handleChange(`${path}.enum`, null, 'REMOVE');
+									} else {
+										handleChange(`${path}.enum`, update as string[], 'ASSIGN_VALUE');
+									}
+								} else {
+									setError(`${t('archbase:Enum must not have duplicate values')}`);
+								}
+							}}
+						/>
+					</Input.Wrapper>
+				</Flex>
+			</Stack>
+			<Stack align="stretch" justify="center" m={1}>
+				<Select
+					label={`${t('archbase:Format1')}`}
+					value={item.format ?? ''}
+					size="sm"
+					m={2}
+					placeholder={`${t('archbase:Choose data type')}`}
+					onChange={(value: string) => {
+						if (value === '') {
+							handleChange(`${path}.format`, null, 'REMOVE');
+						} else {
+							handleChange(`${path}.format`, value, 'ASSIGN_VALUE');
+						}
+					}}
+					data={StringFormat.map((item) => ({ label: item.name, value: item.name }))}
+				/>
+			</Stack>
+		</Flex>
+	);
+};

package/src/jsonschema/JsonSchemaEditor/drop-plus/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,SAAS,EAAkB,MAAM,eAAe,CAAC;AAI9E,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAKnE,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC/C,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,WAAW,CAAC;IACpB,IAAI,EAAE,WAAW,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;CACpB;AACD,eAAO,MAAM,QAAQ,wDAMnB,aAAa,4CAwDd,CAAC"}

package/src/jsonschema/JsonSchemaEditor/drop-plus/index.tsx

@@ -0,0 +1,80 @@
+import { ActionIcon, Button, FlexProps, Popover, Stack } from '@mantine/core';
+import { IconCirclePlus } from '@tabler/icons-react';
+import { useArchbaseTranslation } from '@archbase/core';
+import React, { useContext } from 'react';
+import { JSONSchema7 } from '../../ArchbaseJsonSchemaEditor.types';
+import { ArchbaseJsonSchemaEditorContext } from '../ArchbaseJsonSchemaEditor.context';
+import { DataType, getDefaultSchema } from '../utils';
+import { random } from '../utils';
+
+export interface DropPlusProps extends FlexProps {
+	itemPath: string;
+	parentPath: string;
+	parent: JSONSchema7;
+	item: JSONSchema7;
+	isReadOnly: boolean;
+}
+export const DropPlus = ({
+	itemPath,
+	parentPath,
+	parent,
+	item,
+	isReadOnly,
+}:DropPlusProps) => {
+	const { handleChange } = useContext(ArchbaseJsonSchemaEditorContext);
+	const { t } = useArchbaseTranslation();
+	if (isReadOnly) {
+		return <div />;
+	}
+
+	if (!parent) {
+		return <></>;
+	}
+
+	return (
+		<Popover position="bottom" withArrow shadow="md" withinPortal={true}>
+			<Popover.Target>
+				<ActionIcon
+					size="sm"
+					mt={2}
+					mb={2}
+					mr={2}
+					variant="subtle"
+					color="green"
+					aria-label={`${t('archbase:Add Child Node')}`}
+				>
+					<IconCirclePlus />
+				</ActionIcon>
+			</Popover.Target>
+
+			<Popover.Dropdown w="120px" color="white">
+				<Stack>
+					<Button
+						color="blue"
+						variant="outline"
+						size="xs"
+						onClick={() => {
+							const fieldName = `field_${random()}`;
+							handleChange(`${parentPath}.properties.${fieldName}`, getDefaultSchema(DataType.string), 'ASSIGN_VALUE');
+						}}
+					>
+						{`${t('archbase:Sibling Node')}`}
+					</Button>
+					<Button
+						size="xs"
+						color="orange"
+						variant="outline"
+						onClick={() => {
+							if (item.properties) {
+								const fieldName = `field_${random()}`;
+								handleChange(`${itemPath}.properties.${fieldName}`, getDefaultSchema(DataType.string), 'ASSIGN_VALUE');
+							}
+						}}
+					>
+						{`${t('archbase:Child Node')}`}
+					</Button>
+				</Stack>
+			</Popover.Dropdown>
+		</Popover>
+	);
+};

package/src/jsonschema/JsonSchemaEditor/index.ts

@@ -0,0 +1,2 @@
+export { ArchbaseJsonSchemaEditor } from './ArchbaseJsonSchemaEditor';
+export type { ArchbaseJsonSchemaEditorProps } from './ArchbaseJsonSchemaEditor';

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAKnE,MAAM,WAAW,qBAAqB;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,WAAW,CAAC;CAClB;AAED,eAAO,MAAM,gBAAgB,oBAG1B,qBAAqB,4CAgBvB,CAAC"}

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

@@ -0,0 +1,32 @@
+import { Flex } from '@mantine/core';
+import * as React from 'react';
+import { JSONSchema7 } from '../../ArchbaseJsonSchemaEditor.types';
+import { AdvancedBoolean } from '../advanced-boolean';
+import { AdvancedNumber } from '../advanced-number';
+import { AdvancedString } from '../advanced-string';
+
+export interface AdvancedSettingsProps {
+	path: string;
+	item: JSONSchema7;
+}
+
+export const AdvancedSettings = ({
+	path,
+	item,
+}: AdvancedSettingsProps) => {
+	const getAdvancedView = (path: string): React.JSX.Element | undefined => {
+		switch (item.type) {
+			case 'string':
+				return <AdvancedString path={path} item={item} />;
+			case 'number':
+			case 'integer':
+				return <AdvancedNumber path={path} item={item} />;
+			case 'boolean':
+				return <AdvancedBoolean path={path} item={item} />;
+			default:
+				return undefined;
+		}
+	};
+
+	return <Flex>{getAdvancedView(path)}</Flex>;
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAsC,SAAS,EAAiC,MAAM,eAAe,CAAC;AAI7G,OAAO,EAAE,WAAW,EAAuB,MAAM,sCAAsC,CAAC;AAMxF,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IAClD,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,WAAW,CAAC;IACxB,UAAU,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,sCAIrB,gBAAgB,4CA6IlB,CAAC"}