@examplary/cli 1.7.0 → 1.9.0

package/src/lib/read-meta.js

@@ -1,40 +0,0 @@
-import { readFile } from "fs/promises";
-import { join } from "path";
-import { cwd } from "process";
-
-import yaml from "yaml";
-
-/**
- * Reads and parses the question-type definition file.
- * Prefers question-type.json over question-type.yml.
- */
-export const readMetaFile = async () => {
-  const dir = cwd();
-  const jsonPath = join(dir, "question-type.json");
-  const ymlPath = join(dir, "question-type.yml");
-
-  // Try JSON first, then YAML
-  for (const { path, parse, format } of [
-    { path: jsonPath, parse: JSON.parse, format: "JSON" },
-    { path: ymlPath, parse: yaml.parse, format: "YAML" },
-  ]) {
-    let contents;
-    try {
-      contents = await readFile(path, "utf-8");
-    } catch {
-      continue;
-    }
-
-    try {
-      const definition = parse(contents);
-      if (definition.$schema) delete definition.$schema;
-      return { definition, path };
-    } catch (error) {
-      throw new Error(`Invalid ${format} in ${path}: ${error.message}`);
-    }
-  }
-
-  throw new Error(
-    "No question-type.json or question-type.yml found in the current directory",
-  );
-};

package/src/lib/styles.js

@@ -1,32 +0,0 @@
-import { createRequire } from "module";
-import path from "path";
-
-import tailwindcss from "@tailwindcss/postcss";
-import postcss from "postcss";
-
-const require = createRequire(import.meta.url);
-const tailwindDir = path.dirname(require.resolve("tailwindcss/package.json"));
-
-export const buildStyles = async () => {
-  const absolutePath = path.resolve(tailwindDir);
-
-  const inputCSS = `
-    @import "${absolutePath}/theme.css" layer(theme);
-    @import "${absolutePath}/utilities.css" layer(utilities);
-  `;
-
-  const result = await postcss([
-    tailwindcss({
-      optimize: { minify: true },
-    }),
-  ]).process(inputCSS, { from: "module-css.css" });
-
-  const utilitiesStyles = result.css.split("@layer utilities")[1].trim();
-  if (utilitiesStyles.length < 5) {
-    return null;
-  }
-
-  const css = result.css.replace(/@layer /g, "@layer modules_");
-
-  return css;
-};

package/src/preview-ui/App.tsx

@@ -1,148 +0,0 @@
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-
-import type { QuestionType } from "@examplary/schemas";
-import {
-  formatQuestionType,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@examplary/ui";
-import useLocalStorage from "use-local-storage";
-
-import { JsonEditor } from "./components/json-editor";
-import { PreviewAssessment } from "./components/preview-assessment";
-import { PreviewPrint } from "./components/preview-print";
-import { PreviewResults } from "./components/preview-results";
-import { PreviewSettingsArea } from "./components/preview-settings-area";
-
-function App() {
-  const { i18n } = useTranslation();
-
-  const rawQuestionType = globalThis._questionType as unknown as QuestionType;
-  const questionType = formatQuestionType(rawQuestionType, i18n);
-
-  const [componentName, setComponentName] = useLocalStorage(
-    `component-name-${questionType.id}`,
-    Object.keys(questionType.components || {})[0] || "assessment",
-  );
-
-  const availableComponents = Object.keys(questionType.components || {});
-
-  const [answer, setAnswer] = useState(undefined);
-
-  const defaultSettings = (questionType.settings || []).reduce(
-    (acc, setting) => {
-      if ("default" in setting) {
-        acc[setting.id] = setting.default;
-      }
-      return acc;
-    },
-    {},
-  );
-
-  const [question, setQuestion] = useLocalStorage(
-    `payload-question-${questionType.id}`,
-    {
-      id: "q_qQjXQasmUfpWRV5KO5mzkxoy",
-      title: "Napoleon's role in the French Revolution",
-      type: questionType.id,
-      description:
-        "When Napoleon Bonaparte rose to power, he was seen as a hero of the French Revolution. However, his actions and policies during his rule have been debated by historians. What was Napoleon's role in the French Revolution?",
-      settings: {
-        ...defaultSettings,
-        options: [
-          "To establish a centralized legal system and promote the principles of the Revolution.",
-          "To overthrow the revolutionary government and establish a dictatorship.",
-          "To maintain the status quo and prevent further revolutionary changes.",
-          "To support the monarchy and restore the old regime.",
-        ],
-        correctAnswer:
-          "To establish a centralized legal system and promote the principles of the Revolution.",
-      },
-    },
-  );
-
-  return (
-    <div className="min-h-screen flex">
-      <aside className="bg-nav w-[360px] text-black border-r-2 border-border p-6 overflow-auto">
-        <h1 className="text-xl font-semibold">{questionType.name}</h1>
-        <h2 className="text-sm opacity-50">Question type preview</h2>
-
-        <h3 className="text-sm font-medium mb-1.5 mt-8">Preview options</h3>
-        <div className="grid grid-cols-3 items-center gap-3 border border-border-accent rounded-md bg-white p-4">
-          <p className="text-gray-800 text-sm">Component</p>
-          <Select value={componentName} onValueChange={setComponentName}>
-            <SelectTrigger className="text-sm col-span-2">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {availableComponents.map((component) => (
-                <SelectItem key={component} value={component}>
-                  {component}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-          <p className="text-gray-800 text-sm">Locale</p>
-          <Select
-            value={i18n.language}
-            onValueChange={(value) => i18n.changeLanguage(value)}
-          >
-            <SelectTrigger className="text-sm col-span-2">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="en">en</SelectItem>
-              <SelectItem value="nl">nl</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-
-        <h3 className="text-sm font-medium mb-1.5 mt-8">Question</h3>
-        <div className="border border-border-accent rounded-md bg-white overflow-hidden">
-          <JsonEditor value={question} setValue={setQuestion} />
-        </div>
-
-        <h3 className="text-sm font-medium mb-1.5 mt-8">Answer</h3>
-        <div className="border border-border-accent rounded-md bg-white overflow-hidden">
-          <JsonEditor value={answer} setValue={setAnswer} />
-        </div>
-      </aside>
-
-      <div className="flex-1 flex items-center justify-center">
-        <div className="max-w-3xl mx-auto py-10" key={i18n.language}>
-          {componentName === "assessment" && (
-            <PreviewAssessment
-              questionType={questionType}
-              question={question}
-              answer={answer}
-              saveAnswer={setAnswer}
-            />
-          )}
-          {componentName === "results" && (
-            <PreviewResults
-              questionType={questionType}
-              question={question}
-              answer={answer}
-            />
-          )}
-          {componentName === "settings-area" && (
-            <PreviewSettingsArea
-              questionType={questionType}
-              question={question}
-              setQuestion={setQuestion}
-            />
-          )}
-          {componentName === "print" && (
-            <PreviewPrint questionType={questionType} question={question} />
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default App;

package/src/preview-ui/components/json-editor.tsx

@@ -1,27 +0,0 @@
-import { useEffect, useState } from "react";
-
-export const JsonEditor = ({ value, setValue }) => {
-  const [stringValue, setStringValue] = useState(() =>
-    JSON.stringify(value, null, 2),
-  );
-  useEffect(() => {
-    setStringValue(JSON.stringify(value, null, 2));
-  }, [value]);
-
-  return (
-    <textarea
-      className="h-[160px] font-mono text-xs p-3 w-full"
-      value={stringValue}
-      onChange={(e) => {
-        const newStringValue = e.target.value;
-        setStringValue(newStringValue || "");
-        try {
-          const parsedValue = JSON.parse(newStringValue || "");
-          setValue(parsedValue);
-        } catch (error) {
-          console.error("Invalid JSON:", error);
-        }
-      }}
-    />
-  );
-};

package/src/preview-ui/components/preview-assessment.tsx

@@ -1,43 +0,0 @@
-import { RichTextDisplay } from "@examplary/ui";
-
-import { QuestionComponent } from "./question-component";
-import { api } from "../lib/demo-api";
-
-export const PreviewAssessment = ({
-  questionType,
-  question,
-  answer,
-  saveAnswer,
-}) => {
-  return (
-    <div className="relative flex flex-col min-h-[calc(100vh-17.5rem)]">
-      <div className="rounded-xl border border-border bg-main text-black flex-1 bg-white py-7 px-10 relative z-10">
-        <div className="flex justify-between gap-2 mb-3">
-          <div className="size-6 bg-bright border text-sm font-bold rounded-full flex items-center justify-center shrink-0">
-            1
-          </div>
-          <div className="flex-1">
-            <h3 className="font-semibold text-lg mb-1">
-              <RichTextDisplay as="span">{question.title}</RichTextDisplay>
-            </h3>
-            <RichTextDisplay as="p" className="text-zinc-900 mb-6">
-              {question.description}
-            </RichTextDisplay>
-
-            <QuestionComponent
-              type={questionType}
-              componentName="assessment"
-              props={{
-                environment: "exam",
-                api,
-                question,
-                answer,
-                saveAnswer,
-              }}
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/preview-ui/components/preview-print.tsx

@@ -1,38 +0,0 @@
-import { RichTextDisplay } from "@examplary/ui";
-
-import { QuestionComponent } from "./question-component";
-
-export const PreviewPrint = ({ questionType, question }) => {
-  return (
-    <div className="relative">
-      <div className="border-2 border-border border-t-0 border-b-0 bg-main text-black flex-1 bg-white">
-        <div className="flex justify-between gap-2 mb-3 py-16 px-12">
-          <div className="size-6 border-2 text-sm font-bold rounded-full flex items-center justify-center shrink-0">
-            1
-          </div>
-          <div className="flex-1">
-            <h3 className="font-semibold text-lg mb-1">
-              <RichTextDisplay as="span">{question.title}</RichTextDisplay>
-            </h3>
-            <RichTextDisplay as="p" className="text-zinc-900 mb-6">
-              {question.description}
-            </RichTextDisplay>
-
-            <QuestionComponent
-              type={questionType}
-              componentName="print"
-              props={{
-                environment: "exam",
-                question,
-                answerBoxes: true,
-              }}
-            />
-          </div>
-        </div>
-      </div>
-
-      <div className="absolute inset-0 bottom-auto h-10 bg-gradient-to-b from-bg to-transparent z-10" />
-      <div className="absolute inset-0 top-auto h-10 bg-gradient-to-b to-bg from-transparent z-10" />
-    </div>
-  );
-};

package/src/preview-ui/components/preview-results.tsx

@@ -1,38 +0,0 @@
-import { RichTextDisplay } from "@examplary/ui";
-
-import { QuestionComponent } from "./question-component";
-import { api } from "../lib/demo-api";
-
-export const PreviewResults = ({ questionType, question, answer }) => {
-  return (
-    <div className="rounded-base border-2 border-border bg-main text-black flex-1 bg-white py-7 px-10 md:mr-5 relative z-10">
-      <div className="flex justify-between gap-2 mb-3">
-        <div className="size-6 bg-bright border-2 text-sm font-bold rounded-full flex items-center justify-center shrink-0">
-          1
-        </div>
-        <div className="flex-1">
-          <h3 className="font-semibold text-lg mb-2.5">
-            <RichTextDisplay as="span">{question.title}</RichTextDisplay>
-          </h3>
-
-          {answer ? (
-            <QuestionComponent
-              type={questionType}
-              componentName="results"
-              props={{
-                environment: "exam",
-                api,
-                question,
-                answer,
-              }}
-            />
-          ) : (
-            <span className="text-zinc-500 bg-zinc-100 rounded p-1 px-2 font-medium text-sm">
-              Empty answer
-            </span>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/preview-ui/components/preview-settings-area.tsx

@@ -1,97 +0,0 @@
-import { cn, MinimalRichTextField } from "@examplary/ui";
-import { FileQuestionIcon } from "lucide-react";
-
-import { QuestionComponent } from "./question-component";
-import { api } from "../lib/demo-api";
-
-export const PreviewSettingsArea = ({
-  questionType,
-  question,
-  setQuestion,
-}) => {
-  return (
-    <div
-      data-type="question"
-      data-question-id={question.id}
-      className={cn(
-        "rounded-xl border border-border bg-main text-black",
-        "mb-3 relative bg-white transition-[border,shadow,opacity] p-6 px-7",
-      )}
-    >
-      <div className="flex gap-3">
-        <div
-          className={cn(
-            "size-6 rounded-full border-2 items-center justify-center flex transition bg-bright",
-          )}
-        >
-          {questionType?.icon ? (
-            <img
-              src={`/api/icon?path=${questionType.icon}&questionType=${questionType.id}`}
-              alt={questionType.name}
-              className="size-3.5 object-contain"
-            />
-          ) : (
-            <FileQuestionIcon className="size-3.5" strokeWidth={2.6} />
-          )}
-        </div>
-        <div className="flex flex-1">
-          <div className="flex-1 flex flex-col">
-            <MinimalRichTextField
-              singleLine
-              readOnly
-              className={cn(
-                "w-full font-medium",
-                "cursor-not-allowed pointer-events-none",
-              )}
-              value={question.title}
-              placeholder={questionType?.titlePlaceholder}
-            />
-            <MinimalRichTextField
-              data-type="description"
-              className={cn(
-                "w-full text-sm mt-1",
-                "cursor-not-allowed pointer-events-none",
-              )}
-              value={question.description}
-              readOnly
-              showFormattingMenu
-              placeholder={questionType?.descriptionPlaceholder}
-            />
-          </div>
-        </div>
-      </div>
-      <div className="border-t border-border pt-5 mt-5 ml-9 mb-4">
-        <div>
-          <QuestionComponent
-            type={questionType}
-            componentName="settings-area"
-            props={{
-              api,
-              question,
-              settings: question.settings,
-              environment: "exam",
-              setMultipleSettings: (newSettings) => {
-                setQuestion({
-                  ...question,
-                  settings: {
-                    ...question.settings,
-                    ...newSettings,
-                  },
-                });
-              },
-              setSetting: (settingId, value) => {
-                setQuestion({
-                  ...question,
-                  settings: {
-                    ...question.settings,
-                    [settingId]: value,
-                  },
-                });
-              },
-            }}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/preview-ui/components/question-component.tsx

@@ -1,75 +0,0 @@
-import { ComponentType } from "react";
-import { ErrorBoundary, FallbackProps } from "react-error-boundary";
-import { useTranslation } from "react-i18next";
-
-import {
-  fetchComponent,
-  FormattedQuestionType,
-  FrontendBaseComponentProps,
-} from "@examplary/ui";
-import { Loader2Icon } from "lucide-react";
-import useSWR from "swr";
-
-type QuestionComponentProps = {
-  type: FormattedQuestionType;
-  componentName: "assessment" | "print" | "results" | "settings-area";
-  props: Omit<FrontendBaseComponentProps, "api" | "t" | "i18n"> &
-    Record<string, any>;
-};
-
-export const QuestionComponentContent = ({
-  type,
-  componentName,
-  props,
-}: QuestionComponentProps) => {
-  const componentUrl = type?.components?.[componentName];
-
-  const { t, i18n } = useTranslation(type?.translationNs);
-  const { data: Component, error } = useSWR<ComponentType<any>>(
-    componentUrl,
-    fetchComponent,
-    {
-      revalidateOnFocus: false,
-      revalidateOnReconnect: false,
-    },
-  );
-
-  if (!componentUrl) {
-    return null;
-  }
-
-  if (error) {
-    return <FallbackComponent error={error} />;
-  }
-
-  if (!Component) {
-    return <Loader2Icon className="animate-spin size-5" />;
-  }
-
-  const finalProps = {
-    t,
-    i18n,
-    ...props,
-  };
-
-  return <Component {...finalProps} />;
-};
-
-const FallbackComponent = ({ error }: Partial<FallbackProps>) => {
-  return (
-    <div className="rounded-md bg-gray-100 p-5">
-      <p className="text-red-500 text-sm font-semibold">
-        Failed loading question component
-      </p>
-      <pre className="text-sm font-mono">{error?.message}</pre>
-    </div>
-  );
-};
-
-export const QuestionComponent = (props: QuestionComponentProps) => {
-  return (
-    <ErrorBoundary FallbackComponent={FallbackComponent}>
-      <QuestionComponentContent {...props} />
-    </ErrorBoundary>
-  );
-};

package/src/preview-ui/index.css

@@ -1,11 +0,0 @@
-@layer modules_theme, theme, modules_base, base, modules_components, components, modules_utilities, utilities;
-
-@import "tailwindcss";
-@import "@examplary/ui/src/global.css";
-
-@layer base {
-  :root {
-    --radius: 0.5rem;
-    --font-sans: "DM Sans", "Inter", "sans-serif";
-  }
-}

package/src/preview-ui/lib/demo-api.ts

@@ -1,29 +0,0 @@
-export const api = {
-  get: async (path: string, options: any) => {
-    console.warn("API calls are not supported in the preview UI");
-    return {};
-  },
-  post: async (path: string, body: any, options: any) => {
-    console.warn("API calls are not supported in the preview UI");
-    return {};
-  },
-  put: async (path: string, body: any, options: any) => {
-    console.warn("API calls are not supported in the preview UI");
-    return {};
-  },
-  delete: async (path: string, options: any) => {
-    console.warn("API calls are not supported in the preview UI");
-    return {};
-  },
-  patch: async (path: string, body: any, options: any) => {
-    console.warn("API calls are not supported in the preview UI");
-    return {};
-  },
-  uploadFile: async (accept: "*/*") => {
-    console.warn("File uploads are not supported in the preview UI");
-    return {
-      url: `https://placehold.co/600x400?${Math.random()}`,
-      name: "image.jpg",
-    };
-  },
-};

package/src/preview-ui/lib/i18n.ts

@@ -1,15 +0,0 @@
-import { initReactI18next } from "react-i18next";
-
-import I18n from "i18next";
-import LanguageDetector from "i18next-browser-languagedetector";
-
-// eslint-disable-next-line react-hooks/rules-of-hooks
-export const i18n = I18n.use(initReactI18next)
-  .use(LanguageDetector)
-  .init({
-    interpolation: {
-      escapeValue: false,
-    },
-    supportedLngs: ["en", "nl"],
-    fallbackLng: "en",
-  });

package/src/preview-ui/main.tsx

@@ -1,8 +0,0 @@
-import { createRoot } from "react-dom/client";
-
-import App from "./App.tsx";
-import "./lib/i18n.ts";
-
-import "./index.css";
-
-createRoot(document.getElementById("root")!).render(<App />);