@public-ui/sample-react 2.1.0 → 2.1.2

package/src/components/toolbar/disabled.tsx

@@ -0,0 +1,50 @@
+import type { FC } from 'react';
+import React, { useContext } from 'react';
+import { KolBadge, KolToolbar } from '@public-ui/react';
+import { HideMenusContext } from '../../shares/HideMenusContext';
+
+export const ToolbarDisabled: FC = () => {
+	const hideMenus = useContext(HideMenusContext);
+	return (
+		<>
+			{!hideMenus && <KolBadge className="block mb-3" _label="Component is a DRAFT - Don't use in production yet." _color="#db5461" />}
+			<KolToolbar
+				_label="Toolbar"
+				class="block w-fit"
+				_items={[
+					{
+						_label: 'Back',
+						_disabled: true,
+						_hideLabel: true,
+						_icons: {
+							left: {
+								icon: 'codicon codicon-arrow-left',
+							},
+						},
+					},
+					{
+						_label: 'Next',
+						_hideLabel: true,
+						_icons: {
+							right: {
+								icon: 'codicon codicon-arrow-right',
+							},
+						},
+					},
+					{
+						_href: '#',
+						_label: 'Simple Link 1',
+					},
+					{
+						_href: '#',
+						_disabled: true,
+						_label: 'Simple Link 3',
+					},
+					{
+						_label: 'Bold',
+					},
+				]}
+			/>
+		</>
+	);
+};

package/src/components/toolbar/routes.ts

@@ -0,0 +1,10 @@
+import { Routes } from '../../shares/types';
+import { ToolbarBasic } from './basic';
+import { ToolbarDisabled } from './disabled';
+
+export const TOOLBAR_ROUTES: Routes = {
+	toolbar: {
+		basic: ToolbarBasic,
+		disabled: ToolbarDisabled,
+	},
+};

package/src/react.main.tsx

@@ -5,7 +5,7 @@ import { setTagNameTransformer } from '@public-ui/react';
 
 import { bootstrap } from '@public-ui/components';
 import { defineCustomElements } from '@public-ui/components/dist/loader';
-import { BMF, BStW, DEFAULT, ECL_EC, ECL_EU, ITZBund } from '@public-ui/themes';
+import { BMF, DEFAULT, ECL_EC, ECL_EU, ITZBund } from '@public-ui/themes';
 
 import { App } from './App';
 
@@ -29,7 +29,7 @@ const getThemes = async () => {
 	}
 
 	/* List of regular sample app themes */
-	return [BMF, BStW, DEFAULT, ECL_EC, ECL_EU, ITZBund] as Theme[];
+	return [BMF, DEFAULT, ECL_EC, ECL_EU, ITZBund] as Theme[];
 };
 
 void (async () => {

package/src/scenarios/appointment-form/AppointmentForm.tsx

@@ -80,12 +80,11 @@ export function AppointmentForm() {
 	}, [activeFormSection]);
 
 	const handleSubmit = async (_values: FormValues, formik: FormikHelpers<FormValues>) => {
-		console.log(_values, formik);
 		const currentSectionIndex = formSectionSequence.indexOf(activeFormSection);
 		const nextSection = formSectionSequence[currentSectionIndex + 1];
 		if (nextSection !== undefined) {
 			await formik.setTouched({});
-			setTimeout(() => setActiveFormSection(nextSection), 1000);
+			setActiveFormSection(nextSection);
 		}
 	};
 

package/src/scenarios/appointment-form/AvailableAppointmentsForm.tsx

@@ -1,12 +1,12 @@
 import { Field, useFormikContext } from 'formik';
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef, useCallback } from 'react';
 
 import { KolButton, KolForm, KolHeading, KolInputDate, KolInputRadio, KolSpin } from '@public-ui/react';
 
 import { fetchAvailableTimes } from './appointmentService';
 
 import type { FormValues } from './AppointmentForm';
-import type { FieldProps } from 'formik';
+import type { FieldProps, FieldInputProps } from 'formik';
 import type { Option } from '@public-ui/components';
 import { createErrorList, focusErrorList } from './formUtils';
 
@@ -23,7 +23,7 @@ export function AvailableAppointmentsForm() {
 		let ignoreResponse = false;
 		setAvailableTimes(null);
 		if (schouldFocusErrorList && sectionSubmitted) {
-			focusErrorList(errorList, formikRef);
+			focusErrorList(formikRef);
 			setSchouldFocusErrorList(false);
 		}
 
@@ -44,6 +44,26 @@ export function AvailableAppointmentsForm() {
 		};
 	}, [form.values.date, sectionSubmitted]);
 
+	const renderField = useCallback(
+		(name: string, node: (field: FieldInputProps<FormValues['date' | 'time']>) => void) => (
+			<Field name={name}>{({ field }: FieldProps<FormValues['date' | 'time']>) => node(field)}</Field>
+		),
+		[],
+	);
+
+	const handleField = useCallback(
+		(name: string) => ({
+			onChange: (event: Event, value: unknown): void => {
+				if (event.target) {
+					void form.setFieldValue(name, value, true);
+				}
+			},
+			onBlur: () => {
+				void form.setFieldTouched(name, true);
+			},
+		}),
+		[form.setFieldValue, form.setFieldTouched],
+	);
 	return (
 		<div className="p-2">
 			<KolHeading _level={2} _label="Wählen Sie einen Termin aus"></KolHeading>
@@ -54,59 +74,45 @@ export function AvailableAppointmentsForm() {
 					onSubmit: () => {
 						setSectionSubmitted(true);
 						void form.submitForm();
-						focusErrorList(errorList, formikRef);
+						focusErrorList(formikRef);
 					},
 				}}
 			>
-				<Field name="date">
-					{({ field }: FieldProps<FormValues['date']>) => (
-						<KolInputDate
-							id="field-date"
-							_label="Datum"
-							_value={field.value}
-							_error={form.errors.date || ''}
-							_touched={form.touched.date}
-							_required
-							_on={{
-								onChange: (event: Event, value: unknown): void => {
-									if (event.target) {
-										void form.setFieldValue('date', value, true);
-									}
-								},
-								onBlur: () => {
-									void form.setFieldTouched('date', true);
-								},
-							}}
-						/>
-					)}
-				</Field>
+				{renderField('date', (field) => (
+					<KolInputDate
+						id="field-date"
+						_label="Datum"
+						_value={field.value}
+						_msg={{
+							_type: 'error',
+							_description: form.errors.date || '',
+						}}
+						_touched={form.touched.date}
+						_required
+						_on={handleField('date')}
+					/>
+				))}
 
 				{form.values.date && (
 					<div className="grid gap-4 mt-4">
 						{availableTimes ? (
 							<>
-								<Field name="time">
-									{({ field }: FieldProps<FormValues['time']>) => (
-										<KolInputRadio
-											id="field-time"
-											_label="Zeit"
-											_orientation="horizontal"
-											_options={availableTimes}
-											_value={field.value}
-											_error={form.errors.time || ''}
-											_touched={form.touched.time}
-											_required
-											_on={{
-												onChange: (event: Event, value: unknown): void => {
-													if (event.target) {
-														void form.setFieldTouched('time', true);
-														void form.setFieldValue('time', value, true);
-													}
-												},
-											}}
-										/>
-									)}
-								</Field>
+								{renderField('time', (field) => (
+									<KolInputRadio
+										id="field-time"
+										_label="Zeit"
+										_orientation="horizontal"
+										_options={availableTimes}
+										_value={field.value}
+										_msg={{
+											_type: 'error',
+											_description: form.errors.time || '',
+										}}
+										_touched={form.touched.time}
+										_required
+										_on={handleField('time')}
+									/>
+								))}
 								<p>
 									<em>Aus Testzwecken sind nur die Termine zu jeder halben Stunde verfügbar.</em>
 								</p>
@@ -117,7 +123,7 @@ export function AvailableAppointmentsForm() {
 					</div>
 				)}
 
-				<KolButton _label="Weiter" _type="submit" className="mt-2" _disabled={form.isValidating} />
+				<KolButton _label="Weiter" _type="submit" className="mt-2" />
 				{form.values.date && form.isValidating ? <KolSpin _show aria-label="Termin wird geprüft." /> : ''}
 			</KolForm>
 		</div>

package/src/scenarios/appointment-form/DistrictForm.tsx

@@ -1,5 +1,5 @@
 import { Field, useFormikContext } from 'formik';
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef } from 'react';
 
 import { KolButton, KolForm, KolHeading, KolSelect } from '@public-ui/react';
 
@@ -35,11 +35,6 @@ export function DistrictForm() {
 	const errorList = createErrorList(form.errors);
 	const [sectionSubmitted, setSectionSubmitted] = useState(false);
 	const formikRef = useRef<HTMLKolFormElement>(null);
-
-	useEffect(() => {
-		focusErrorList(errorList, formikRef);
-	}, [sectionSubmitted]);
-
 	return (
 		<div className="p-2">
 			<KolHeading _level={2} _label="Wählen Sie einen Stadtteil aus"></KolHeading>
@@ -48,9 +43,16 @@ export function DistrictForm() {
 				_errorList={sectionSubmitted ? errorList : []}
 				_on={{
 					onSubmit: () => {
-						void form.submitForm();
 						setSectionSubmitted(true);
-						focusErrorList(errorList, formikRef);
+						form
+							.validateForm()
+							.then((res) => {
+								if (res && Object.keys(res).length > 0) throw Error();
+								void form.submitForm();
+							})
+							.catch(() => {
+								focusErrorList(formikRef);
+							});
 					},
 				}}
 			>
@@ -61,7 +63,10 @@ export function DistrictForm() {
 							_label="Stadtteil"
 							_options={[{ label: 'Bitte wählen…', value: '' }, ...LOCATION_OPTIONS]}
 							_value={[field.value]}
-							_error={form.errors.district || ''}
+							_msg={{
+								_type: 'error',
+								_description: form.errors.district || '',
+							}}
 							_touched={form.touched.district}
 							_required
 							onBlur={() => {
@@ -69,6 +74,7 @@ export function DistrictForm() {
 							}}
 							_on={{
 								onChange: (event, values: unknown) => {
+									setSectionSubmitted(false);
 									// Select und Radio setzen den Wert immer initial.
 									if (event.target) {
 										const [value] = values as [FormValues['district']];

package/src/scenarios/appointment-form/PersonalInformationForm.tsx

@@ -33,7 +33,7 @@ export function PersonalInformationForm() {
 	const formikRef = useRef(null);
 
 	useEffect(() => {
-		focusErrorList(errorList, formikRef);
+		focusErrorList(formikRef);
 	}, [sectionSubmitted]);
 	return (
 		<div className="p-2">
@@ -45,7 +45,7 @@ export function PersonalInformationForm() {
 					onSubmit: () => {
 						void form.submitForm();
 						setSectionSubmitted(true);
-						focusErrorList(errorList, formikRef);
+						focusErrorList(formikRef);
 					},
 				}}
 			>
@@ -58,7 +58,10 @@ export function PersonalInformationForm() {
 							id="field-salutation"
 							_label="Anrede"
 							_value={[field.value]}
-							_error={form.errors.salutation || ''}
+							_msg={{
+								_type: 'error',
+								_description: form.errors.salutation || '',
+							}}
 							_touched={form.touched.salutation}
 							_options={[{ label: 'Bitte wählen…', value: '' }, ...SALUTATION_OPTIONS]}
 							_required
@@ -85,7 +88,10 @@ export function PersonalInformationForm() {
 									id="field-company"
 									_label="Firma"
 									_value={field.value}
-									_error={form.errors.company || ''}
+									_msg={{
+										_type: 'error',
+										_description: form.errors.company || '',
+									}}
 									_touched={form.touched.company}
 									_required
 									_on={{
@@ -111,7 +117,10 @@ export function PersonalInformationForm() {
 								id="field-name"
 								_label="Vor- und Zuname"
 								_value={field.value}
-								_error={form.errors.name || ''}
+								_msg={{
+									_type: 'error',
+									_description: form.errors.name || '',
+								}}
 								_touched={form.touched.name}
 								_required
 								_on={{
@@ -159,7 +168,10 @@ export function PersonalInformationForm() {
 								_type="tel"
 								_label="Telefonnumer"
 								_value={field.value}
-								_error={form.errors.phone || ''}
+								_msg={{
+									_type: 'error',
+									_description: form.errors.phone || '',
+								}}
 								_touched={form.touched.phone}
 								_on={{
 									onChange: (event, value: unknown) => {

package/src/scenarios/appointment-form/formUtils.ts

@@ -7,8 +7,6 @@ export function createErrorList(formikErrors: Record<string, string>): ErrorList
 	}));
 }
 
-export function focusErrorList(errorList: ErrorListPropType[], formikRef: React.RefObject<HTMLKolFormElement>) {
-	if (errorList.length > 0 && formikRef && formikRef.current) {
-		formikRef.current.focusErrorList().catch(console.warn);
-	}
+export function focusErrorList(formikRef: React.RefObject<HTMLKolFormElement>) {
+	formikRef.current?.focusErrorList().catch(console.warn);
 }

package/src/scenarios/inputs-get-value.tsx

@@ -4,6 +4,7 @@ import React, { createContext, useContext, useEffect, useMemo, useRef, useState
 import {
 	KolButton,
 	KolButtonLink,
+	KolCard,
 	KolInputCheckbox,
 	KolInputColor,
 	KolInputDate,
@@ -22,6 +23,7 @@ import { SampleDescription } from '../components/SampleDescription';
 
 import type { HTMLStencilElement } from '@stencil/core/internal';
 const EventTargetContext = createContext<EventTarget | undefined>(undefined);
+const EventLoggerActiveContext = createContext<boolean>(false);
 
 type Props = {
 	InputComponent: React.ComponentType<any>;
@@ -33,6 +35,7 @@ const Scenario = (props: Props) => {
 	const [value, setValue] = useState<unknown>(undefined);
 	const formatter = props.formatter || JSON.stringify;
 	const eventTarget = useContext(EventTargetContext);
+	const eventLoggerActive = useContext(EventLoggerActiveContext);
 
 	const handleButtonClick = async () => {
 		setValue(await ref.current?.getValue());
@@ -49,9 +52,20 @@ const Scenario = (props: Props) => {
 		};
 	}, [eventTarget]);
 
+	const eventListeners = Object.fromEntries(
+		['onInput', 'onChange', 'onBlur', 'onClick', 'onFocus', 'onMouseDown'].map((eventName) => [
+			eventName,
+			(event, value) => {
+				if (eventLoggerActive) {
+					console.log(props.inputProps._label, eventName, value, event);
+				}
+			},
+		]),
+	);
+
 	return (
 		<div className="grid grid-cols-3 items-end gap-4">
-			<props.InputComponent ref={ref} {...props.inputProps} />
+			<props.InputComponent ref={ref} _on={eventListeners} {...props.inputProps} />
 			<KolButton
 				_label="getValue()"
 				_on={{
@@ -67,96 +81,108 @@ const Scenario = (props: Props) => {
 
 export const InputsGetValue: FC = () => {
 	const eventTarget = useMemo(() => new EventTarget(), []);
+	const [eventLoggerActive, setEventLoggerActive] = useState<boolean>(true);
 
 	return (
 		<>
 			<EventTargetContext.Provider value={eventTarget}>
-				<SampleDescription>
-					<p>
-						This sample show how the input components <code>getValue()</code> method works. It&apos;s called when clicking the &quot;getValue()&quot; button and
-						prints the current value right next to itself.
-					</p>
-				</SampleDescription>
+				<EventLoggerActiveContext.Provider value={eventLoggerActive}>
+					<SampleDescription>
+						<p>
+							This sample show how the input components <code>getValue()</code> method works. It&apos;s called when clicking the &quot;getValue()&quot; button
+							and prints the current value right next to itself.
+						</p>
+					</SampleDescription>
 
-				<div className="grid gap-4">
-					<Scenario InputComponent={KolInputText} inputProps={{ _label: 'InputText' }} />
-					<Scenario InputComponent={KolInputCheckbox} inputProps={{ _label: 'KolInputCheckbox' }} />
-					<Scenario InputComponent={KolInputColor} inputProps={{ _label: 'KolInputColor' }} />
-					<Scenario InputComponent={KolInputDate} inputProps={{ _label: 'KolInputDate' }} />
-					<Scenario InputComponent={KolInputEmail} inputProps={{ _label: 'KolInputEmail' }} />
-					<Scenario
-						InputComponent={KolInputFile}
-						inputProps={{ _label: 'KolInputFile' }}
-						formatter={(value) =>
-							value instanceof FileList
-								? `FileList{${Array.from(value)
-										.map((file: File) => file.name)
-										.join(', ')}}`
-								: JSON.stringify(value)
-						}
-					/>
-					<Scenario InputComponent={KolInputNumber} inputProps={{ _label: 'KolInputNumber' }} />
-					<Scenario InputComponent={KolInputPassword} inputProps={{ _label: 'KolInputPassword' }} />
-					<Scenario InputComponent={KolInputRange} inputProps={{ _label: 'KolInputRange' }} />
-					<Scenario
-						InputComponent={KolInputRadio}
-						inputProps={{
-							_label: 'KolInputRadio',
-							_orientation: 'horizontal',
-							_options: [
-								{ label: 'New York', value: 'New York' },
-								{ label: 'Rio de Janeiro', value: 'Rio de Janeiro' },
-								{ label: 'Rosenheim', value: 'Rosenheim' },
-							],
-							_value: 'New York',
-						}}
-					/>
-					<Scenario
-						InputComponent={KolSelect}
-						inputProps={{
-							_label: 'KolSelect',
-							_options: [
-								{ label: 'New York', value: 'New York' },
-								{ label: 'Rio de Janeiro', value: 'Rio de Janeiro' },
-								{ label: 'Rosenheim', value: 'Rosenheim' },
-							],
-						}}
-					/>
-					<Scenario
-						InputComponent={KolTextarea}
-						inputProps={{
-							_label: 'KolTextarea',
-						}}
-					/>
-					<Scenario
-						InputComponent={KolButton}
-						inputProps={{
-							_label: 'KolButton',
-							_variant: 'ghost',
-							_value: 'KolButton value',
-						}}
-					/>
-					<Scenario
-						InputComponent={KolButtonLink}
-						inputProps={{
-							_label: 'KolButtonLink',
-							_value: 'KolButtonLink value',
-						}}
-					/>
+					<KolCard _label="Sample options" className="block ha mb-8">
+						<KolInputCheckbox
+							_label="Log events to console"
+							_value={true}
+							_checked={eventLoggerActive}
+							_on={{ onChange: (_, active) => setEventLoggerActive(active as boolean) }}
+						/>
+					</KolCard>
 
-					<div className="grid grid-cols-3 gap-4">
-						<div></div>
-						<KolButton
-							_label="Run all"
-							_variant="primary"
-							_on={{
-								onClick: () => {
-									eventTarget.dispatchEvent(new Event('runAll'));
-								},
+					<div className="grid gap-4">
+						<Scenario InputComponent={KolInputText} inputProps={{ _label: 'InputText' }} />
+						<Scenario InputComponent={KolInputCheckbox} inputProps={{ _label: 'KolInputCheckbox' }} />
+						<Scenario InputComponent={KolInputColor} inputProps={{ _label: 'KolInputColor' }} />
+						<Scenario InputComponent={KolInputDate} inputProps={{ _label: 'KolInputDate' }} />
+						<Scenario InputComponent={KolInputEmail} inputProps={{ _label: 'KolInputEmail' }} />
+						<Scenario
+							InputComponent={KolInputFile}
+							inputProps={{ _label: 'KolInputFile' }}
+							formatter={(value) =>
+								value instanceof FileList
+									? `FileList{${Array.from(value)
+											.map((file: File) => file.name)
+											.join(', ')}}`
+									: JSON.stringify(value)
+							}
+						/>
+						<Scenario InputComponent={KolInputNumber} inputProps={{ _label: 'KolInputNumber' }} />
+						<Scenario InputComponent={KolInputPassword} inputProps={{ _label: 'KolInputPassword' }} />
+						<Scenario InputComponent={KolInputRange} inputProps={{ _label: 'KolInputRange' }} />
+						<Scenario
+							InputComponent={KolInputRadio}
+							inputProps={{
+								_label: 'KolInputRadio',
+								_orientation: 'horizontal',
+								_options: [
+									{ label: 'New York', value: 'New York' },
+									{ label: 'Rio de Janeiro', value: 'Rio de Janeiro' },
+									{ label: 'Rosenheim', value: 'Rosenheim' },
+								],
+								_value: 'New York',
+							}}
+						/>
+						<Scenario
+							InputComponent={KolSelect}
+							inputProps={{
+								_label: 'KolSelect',
+								_options: [
+									{ label: 'New York', value: 'New York' },
+									{ label: 'Rio de Janeiro', value: 'Rio de Janeiro' },
+									{ label: 'Rosenheim', value: 'Rosenheim' },
+								],
+							}}
+						/>
+						<Scenario
+							InputComponent={KolTextarea}
+							inputProps={{
+								_label: 'KolTextarea',
 							}}
-						></KolButton>
+						/>
+						<Scenario
+							InputComponent={KolButton}
+							inputProps={{
+								_label: 'KolButton',
+								_variant: 'ghost',
+								_value: 'KolButton value',
+							}}
+						/>
+						<Scenario
+							InputComponent={KolButtonLink}
+							inputProps={{
+								_label: 'KolButtonLink',
+								_value: 'KolButtonLink value',
+							}}
+						/>
+
+						<div className="grid grid-cols-3 gap-4">
+							<div></div>
+							<KolButton
+								_label="Run all"
+								_variant="primary"
+								_on={{
+									onClick: () => {
+										eventTarget.dispatchEvent(new Event('runAll'));
+									},
+								}}
+							></KolButton>
+						</div>
 					</div>
-				</div>
+				</EventLoggerActiveContext.Provider>
 			</EventTargetContext.Provider>
 		</>
 	);

package/src/shares/country.ts

@@ -0,0 +1,18 @@
+import { SelectOption } from '@public-ui/components';
+import countries from 'world_countries_lists/data/countries/de/countries.json';
+
+type Country = {
+	id: number;
+	alpha2: string;
+	alpha3: string;
+	name: string;
+};
+
+export const COUNTRY_OPTIONS: SelectOption<string>[] = [
+	...(countries as Country[]).map((country) => ({
+		label: country.name,
+		value: country.alpha2,
+	})),
+];
+
+export const COUNTRY_SUGGESTIONS: string[] = [...(countries as Country[]).map((country) => country.name)];

package/src/shares/routes.ts

@@ -29,7 +29,6 @@ import { KOLIBRI_ROUTES } from '../components/kolibri/routes';
 import { LINK_BUTTON_ROUTES } from '../components/link-button/routes';
 import { LINK_GROUP_ROUTES } from '../components/link-group/routes';
 import { LINK_ROUTES } from '../components/link/routes';
-import { LOGO_ROUTES } from '../components/logo/routes';
 import { MODAL_ROUTES } from '../components/modal/routes';
 import { NAV_ROUTES } from '../components/nav/routes';
 import { PAGINATION_ROUTES } from '../components/pagination/routes';
@@ -43,10 +42,12 @@ import { TABLE_ROUTES } from '../components/table/routes';
 import { TABS_ROUTES } from '../components/tabs/routes';
 import { TEXTAREA_ROUTES } from '../components/textarea/routes';
 import { TOAST_ROUTES } from '../components/toast/routes';
+import { TOOLBAR_ROUTES } from '../components/toolbar/routes';
 import { VERSION_ROUTES } from '../components/version/routes';
 import { SCENARIO_ROUTES } from '../scenarios/routes';
 import { Routes } from './types';
 import { TREE_ROUTES } from '../components/tree/routes';
+import { COMBOBOX_ROUTES } from '../components/combobox/routes';
 
 export const ROUTES: Routes = {
 	...HANDOUT_ROUTES,
@@ -60,6 +61,7 @@ export const ROUTES: Routes = {
 	...BUTTON_LINK_ROUTES,
 	...BUTTON_ROUTES,
 	...CARD_ROUTES,
+	...COMBOBOX_ROUTES,
 	...DETAILS_ROUTES,
 	...FORM_ROUTES,
 	...HEADING_ROUTES,
@@ -80,7 +82,6 @@ export const ROUTES: Routes = {
 	...LINK_BUTTON_ROUTES,
 	...LINK_GROUP_ROUTES,
 	...LINK_ROUTES,
-	...LOGO_ROUTES,
 	...MODAL_ROUTES,
 	...NAV_ROUTES,
 	...PAGINATION_ROUTES,
@@ -95,6 +96,7 @@ export const ROUTES: Routes = {
 	...TABS_ROUTES,
 	...TEXTAREA_ROUTES,
 	...TOAST_ROUTES,
+	...TOOLBAR_ROUTES,
 	...TREE_ROUTES,
 	...VERSION_ROUTES,
 	...SCENARIO_ROUTES,