Merge pull request #120 from getkirby/fiber/steps/modules

More Panel Modules

panel/src/panel/language.js

@@ -0,0 +1,22 @@
+import Module from "./module.js";
+
+export const defaults = () => {
+	return {
+		code: null,
+		default: false,
+		direction: "ltr",
+		name: null,
+		rules: []
+	};
+};
+
+export default () => {
+	const parent = Module("$language", defaults());
+
+	return {
+		...parent,
+		get isDefault() {
+			return this.default;
+		}
+	};
+};

panel/src/panel/language.test.js

@@ -0,0 +1,35 @@
+/**
+ * @vitest-environment node
+ */
+
+import { describe, expect, it } from "vitest";
+import Language from "./language.js";
+
+describe.concurrent("panel.language", () => {
+	it("should have a default state", async () => {
+		const language = Language();
+
+		const state = {
+			code: null,
+			default: false,
+			direction: "ltr",
+			name: null,
+			rules: []
+		};
+
+		expect(language.key()).toStrictEqual("$language");
+		expect(language.state()).toStrictEqual(state);
+	});
+
+	it("should have isDefault getter", async () => {
+		const language = Language();
+
+		expect(language.isDefault).toStrictEqual(false);
+
+		language.set({
+			default: true
+		});
+
+		expect(language.isDefault).toStrictEqual(true);
+	});
+});

panel/src/panel/system.js

@@ -0,0 +1,16 @@
+import Module from "./module.js";
+
+export const defaults = () => {
+	return {
+		ascii: {},
+		csrf: null,
+		isLocal: null,
+		locales: {},
+		slugs: [],
+		title: null
+	};
+};
+
+export default () => {
+	return Module("$system", defaults());
+};

panel/src/panel/system.test.js

@@ -0,0 +1,45 @@
+/**
+ * @vitest-environment node
+ */
+
+import { describe, expect, it } from "vitest";
+import System from "./system";
+
+describe.concurrent("panel.system", () => {
+	it("should have a default state", async () => {
+		const system = System();
+
+		const state = {
+			ascii: {},
+			csrf: null,
+			isLocal: null,
+			locales: {},
+			slugs: [],
+			title: null
+		};
+
+		expect(system.key()).toStrictEqual("$system");
+		expect(system.state()).toStrictEqual(state);
+	});
+
+	it("should set and reset", async () => {
+		const system = System();
+
+		const state = {
+			...system.defaults(),
+			csrf: "dev",
+			title: "Kirby"
+		};
+
+		system.set({
+			csrf: "dev",
+			title: "Kirby"
+		});
+
+		expect(system.state()).toStrictEqual(state);
+
+		system.reset();
+
+		expect(system.state()).toStrictEqual(system.defaults());
+	});
+});

panel/src/panel/translation.js

@@ -0,0 +1,73 @@
+import { template } from "@/helpers/string.js";
+import Module from "./module.js";
+
+export const defaults = () => {
+	return {
+		code: null,
+		data: {},
+		direction: "ltr",
+		name: null
+	};
+};
+
+/**
+ * Represents the current interface
+ * translation
+ */
+export default () => {
+	const parent = Module("$translation", defaults());
+
+	return {
+		...parent,
+
+		/**
+		 * When the active state of a translation
+		 * changes, the document language and reading
+		 * direction will also be updated
+		 *
+		 * @param {Object} state
+		 * @returns {Object} The new state
+		 */
+		set(state) {
+			parent.set.call(this, state);
+
+			/**
+			 * Update the document language for better accessibility
+			 */
+			document.documentElement.lang = this.code;
+
+			/**
+			 * Some elements – i.e. drag ghosts -
+			 * are injected into the body and not the panel div.
+			 * They need the dir to be displayed correctly
+			 */
+			document.body.dir = this.direction;
+
+			return this.state();
+		},
+
+		/**
+		 * Fetches a translation string and
+		 * can optionally replace placeholders
+		 * with values from the data object
+		 *
+		 * @param {String} key
+		 * @param {Object} data
+		 * @param {String} fallback
+		 * @returns {String}
+		 */
+		translate(key, data, fallback = null) {
+			if (typeof key !== "string") {
+				return;
+			}
+
+			const string = this.data[key] || fallback;
+
+			if (typeof string !== "string") {
+				return string;
+			}
+
+			return template(string, data);
+		}
+	};
+};

panel/src/panel/translation.test.js

@@ -0,0 +1,68 @@
+import { describe, expect, it } from "vitest";
+import Translation from "./translation.js";
+
+describe.concurrent("panel.translation", () => {
+	it("should have a default state", async () => {
+		const translation = Translation();
+
+		const state = {
+			code: null,
+			data: {},
+			direction: "ltr",
+			name: null
+		};
+
+		expect(translation.key()).toStrictEqual("$translation");
+		expect(translation.state()).toStrictEqual(state);
+	});
+
+	it("should set lang & direction", async () => {
+		const translation = Translation();
+
+		translation.set({
+			code: "en",
+			direction: "ltr"
+		});
+
+		expect(document.documentElement.lang).toStrictEqual("en");
+		expect(document.body.dir).toStrictEqual("ltr");
+
+		translation.set({
+			code: "fr",
+			direction: "rtl"
+		});
+
+		expect(document.documentElement.lang).toStrictEqual("fr");
+		expect(document.body.dir).toStrictEqual("rtl");
+	});
+
+	it("should translate", async () => {
+		const translation = Translation();
+
+		translation.set({
+			data: {
+				simple: "Test",
+				template: "Hello {{ name }}",
+				object: { theme: "dark" }
+			}
+		});
+
+		// simple
+		expect(translation.translate("simple")).toStrictEqual("Test");
+
+		// with fallback
+		expect(translation.translate("does-not-exist", {}, "Test")).toStrictEqual(
+			"Test"
+		);
+
+		// with object as result
+		expect(translation.translate("object")).toStrictEqual({
+			theme: "dark"
+		});
+
+		// with data
+		expect(translation.translate("template", { name: "Peter" })).toStrictEqual(
+			"Hello Peter"
+		);
+	});
+});

panel/src/panel/user.js

@@ -0,0 +1,15 @@
+import Module from "./module.js";
+
+export const defaults = () => {
+	return {
+		email: null,
+		id: null,
+		language: null,
+		role: null,
+		username: null
+	};
+};
+
+export default () => {
+	return Module("$user", defaults());
+};

panel/src/panel/user.test.js

@@ -0,0 +1,44 @@
+/**
+ * @vitest-environment node
+ */
+
+import { describe, expect, it } from "vitest";
+import User from "./user.js";
+
+describe.concurrent("panel.user", () => {
+	it("should have a default state", async () => {
+		const user = User();
+
+		const state = {
+			email: null,
+			id: null,
+			language: null,
+			role: null,
+			username: null
+		};
+
+		expect(user.key()).toStrictEqual("$user");
+		expect(user.state()).toStrictEqual(state);
+	});
+
+	it("should set and reset", async () => {
+		const user = User();
+
+		const state = {
+			...user.defaults(),
+			id: "abc",
+			username: "Kirby"
+		};
+
+		user.set({
+			id: "abc",
+			username: "Kirby"
+		});
+
+		expect(user.state()).toStrictEqual(state);
+
+		user.reset();
+
+		expect(user.state()).toStrictEqual(user.defaults());
+	});
+});