@citolab/tspci 2.1.3 → 2.3.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citolab/tspci",
-  "version": "2.1.3",
+  "version": "2.3.0-alpha.0",
   "description": "an opiniated typescript ims-pci builder with tao integration",
   "author": "patrick <patrick.deklein@cito.nl>",
   "repository": "@citolab/tspci",
@@ -9,51 +9,30 @@
   },
   "type": "module",
   "types": "types/index.d.ts",
-  "devDependencies": {
-    "@rollup/plugin-alias": "^4.0.2",
-    "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-commonjs": "^23.0.4",
-    "@rollup/plugin-image": "^3.0.1",
-    "@rollup/plugin-json": "^5.0.2",
-    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-replace": "^5.0.1",
-    "@rollup/plugin-terser": "^0.2.0",
-    "@rollup/plugin-typescript": "^10.0.1",
-    "@testing-library/dom": "^8.19.0",
-    "@types/node": "^18.11.12",
-    "@typescript-eslint/eslint-plugin": "^5.46.0",
-    "@typescript-eslint/parser": "^5.46.0",
-    "live-server": "^1.2.2",
-    "postcss": "^8.4.19",
-    "postcss-import": "^15.1.0",
-    "rollup": "^3.7.0",
-    "rollup-plugin-copy": "^3.4.0",
-    "rollup-plugin-live-server": "^2.0.0",
-    "rollup-plugin-node-builtins": "^2.1.2",
-    "rollup-plugin-node-globals": "^1.4.0",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-string": "^3.0.0",
-    "rollup-plugin-watch-assets": "^1.0.1",
-    "tailwindcss": "^3.2.4"
-  },
   "dependencies": {
-    "@rollup/plugin-alias": "^4.0.2",
+    "@rollup/plugin-alias": "^5.0.0",
     "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-commonjs": "^23.0.4",
-    "@rollup/plugin-image": "^3.0.1",
-    "@rollup/plugin-json": "^5.0.2",
-    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-replace": "^5.0.1",
-    "@rollup/plugin-terser": "^0.2.0",
-    "@rollup/plugin-typescript": "^10.0.1",
-    "@testing-library/dom": "^8.19.0",
-    "@types/node": "^18.11.12",
-    "@typescript-eslint/eslint-plugin": "^5.46.0",
-    "@typescript-eslint/parser": "^5.46.0",
+    "@rollup/plugin-commonjs": "^24.1.0",
+    "@rollup/plugin-image": "^3.0.2",
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.2",
+    "@rollup/plugin-replace": "^5.0.2",
+    "@rollup/plugin-terser": "^0.4.1",
+    "@rollup/plugin-typescript": "^11.1.0",
+    "@tailwindcss/nesting": "0.0.0-insiders.565cd3e",
+    "@testing-library/dom": "^9.2.0",
+    "@types/node": "^18.16.3",
+    "@typescript-eslint/eslint-plugin": "^5.59.2",
+    "@typescript-eslint/parser": "^5.59.2",
+    "autoprefixer": "10.4.14",
+    "chalk": "5.2.0",
+    "clear": "0.1.0",
+    "figlet": "1.6.0",
+    "inquirer": "9.2.0",
     "live-server": "^1.2.2",
-    "postcss": "^8.4.19",
+    "postcss": "^8.4.23",
     "postcss-import": "^15.1.0",
-    "rollup": "^3.7.0",
+    "rollup": "^3.21.4",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-live-server": "^2.0.0",
     "rollup-plugin-node-builtins": "^2.1.2",
@@ -61,8 +40,11 @@
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-watch-assets": "^1.0.1",
-    "tailwindcss": "^3.2.4"
+    "tailwindcss": "^3.3.2"
+  },
+  "scripts": {
+    "help": "tspci --help",
+    "init": "tspci init --force --path=../../pcis"
   },
-  "scripts": {},
-  "gitHead": "7cdbb1e4a3b177e3d8fc103679ecee6e65fdf79d"
+  "gitHead": "872d3b8628f1e7e9b2568563b8aae5ffa1a818d6"
 }

package/preset/base/global.d.ts

@@ -0,0 +1,13 @@
+declare module "*.css" {
+  const content: string;
+  export = content;
+}
+
+declare module "*.png" {
+  const content: string;
+  export = content;
+}
+declare module "qtiCustomInteractionContext" {
+  const register: {register: (PortableInteraction) => void};
+  export = register;
+}

package/preset/base/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "my-pci",
+  "description": "Here your PCI description",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "types": "dist/types.d.ts",
+  "private": true,
+  "dependencies": {},
+  "devDependencies": {
+    "@citolab/tspci": "^2.2.0"
+  },
+  "scripts": {
+    "dev": "tspci --dev",
+    "prod": "tspci"
+  },
+  "config": {
+    "tspci": {
+      "typeIdentifier": "myPci"
+    }
+  },
+  "source": "src/index.ts"
+}

package/preset/base/src/config.json

@@ -0,0 +1,6 @@
+{
+  "title" : "Percentages",
+  "prompt" : "What percentage is colored green?",
+  "width": "200",
+  "height": "200"
+}

package/preset/base/src/index.ts

@@ -0,0 +1,60 @@
+import { Configuration, IMSpci, QtiVariableJSON } from "@citolab/tspci";
+import * as ctx from "qtiCustomInteractionContext";
+import configProps from "./config.json";
+import style from "./styles.css"; // import and bundle this style file ( you can use tailwind and nested css )
+import procenten from "./assets/procenten.png"; // image types are bundled inside the js
+// Configuration
+type PropTypes = typeof configProps;
+
+class Pci implements IMSpci<PropTypes> {
+  typeIdentifier = "###___PCI_NAME___###"; // typeIdentifier is mandatory for all PCI's
+  config: Configuration<PropTypes>; // reference to the interface of the config object which you get when getInstance is called by the player
+  state: string; // keep a reference to the state
+  shadowdom: ShadowRoot | Element; // Not mandatory, but its wise to create a shadowroot
+
+  constructor() {
+    ctx && ctx.register(this); // we assume the qtiCustomInteractionContext is avaible due to the import above
+  }
+
+  // First in the lifecycle of a PCI, this method is called with the domElement ( usually qti-interaction-markup ) where we can add our dom tree.
+  // config is the configuration object which has an onready
+  getInstance = (dom: HTMLElement, config: Configuration<any>, state: string) => {
+    config.properties = { ...configProps, ...config.properties }; // merge current props with incoming
+    this.config = config;
+    this.state = state ? state : "";
+
+    this.shadowdom = dom.attachShadow({ mode: "closed" });
+    this.render();
+
+    config.onready(this);
+  };
+
+  private render = () => {
+    this.shadowdom.addEventListener("change", (e: Event) => {
+      const value = (e.target as HTMLInputElement).value;
+      this.state = value;
+    });
+    this.shadowdom.innerHTML = `<div class="pci-container">
+      <h1>${this.config.properties.title}</h1>
+      <div class="body">
+        <img width="${+this.config.properties.width}" height="${+this.config.properties.height}" src="${procenten}" />
+      </div>
+      <div class="interaction">
+        <label for="tentacles">${this.config.properties.prompt}</label>
+        <input type="number" value="${this.state}" min="0" max="100">%
+      </div>
+    </div>`;
+    const css = document.createElement("style");
+    css.innerHTML = style;
+    this.shadowdom.appendChild(css);
+  };
+
+  getResponse = () => {
+    const response = (this.state === null || this.state === undefined) ? undefined : { base: { integer: this.state }} as QtiVariableJSON;
+    return response;
+  };
+
+  getState = () => this.state.toString();
+}
+
+export default new Pci();

package/preset/base/src/styles.css

@@ -0,0 +1,3 @@
+h1 {
+    color: red;
+}

package/preset/base/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "lib": ["es6", "dom", "dom.iterable"],
+    "module": "es6",
+    "moduleResolution": "node",
+    "removeComments": true,
+    "sourceMap": true,
+    "strict": false,
+    "target": "es6",
+    "outDir": "./dist",
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+  },
+  "include": ["**/*"],
+}

package/preset/preact/src/index.tsx

@@ -0,0 +1,66 @@
+import "preact/debug";
+import { render } from "preact";
+import { initStore, Store } from "@citolab/preact-store";
+
+import * as ctx from "qtiCustomInteractionContext";
+import Interaction from "./interaction";
+import style from "./styles.css";
+import { Configuration, IMSpci, QtiVariableJSON } from "@citolab/tspci";
+import configProps from "./config.json";
+import { actions, StateModel } from "./store";
+
+type PropTypes = typeof configProps;
+
+class App implements IMSpci<PropTypes> {
+  typeIdentifier = "myPci"; // typeIdentifier is mandatory for all PCI's
+  config: Configuration<PropTypes>; // reference to the interface of the config object which you get when getInstance is called by the player
+  state: string; // keep a reference to the state
+  shadowdom: ShadowRoot; // Not mandatory, but its wise to create a shadowroot
+  store: Store<StateModel>;
+
+  private logActions: { type: string; payload: unknown }[] = []; // optional logActions
+
+  constructor() {
+    ctx && ctx.register(this);
+  }
+
+  getInstance = (dom: HTMLElement, config: Configuration<PropTypes>, stateString: string) => {
+    config.properties = { ...configProps, ...config.properties }; // merge current props with incoming
+    this.config = config;
+
+    const initState: StateModel = stateString ? JSON.parse(stateString).state : { input: 0 };
+    this.logActions = stateString ? JSON.parse(stateString).log : [];
+    this.store = initStore<StateModel>(actions as any[], initState, (action) => this.logActions.push(action));
+
+    this.shadowdom = dom.attachShadow({ mode: "closed" });
+    this.render();
+
+    this.config.onready && this.config.onready(this);
+  };
+
+  render = () => {
+    render(null, this.shadowdom);
+    const css = document.createElement("style");
+    css.innerHTML = style;
+    this.shadowdom.appendChild(css);
+    render(<Interaction config={this.config.properties} dom={this.shadowdom} />, this.shadowdom);
+  };
+
+  getState = () =>
+    JSON.stringify({
+      state: this.store.getState(),
+      log: this.logActions,
+    });
+
+  getResponse = () => {
+    const state = this.store?.getState()?.input || undefined;
+    if (state === undefined) return undefined;
+    return {
+      base: {
+        integer: this.store.getState().input,
+      },
+    } as QtiVariableJSON;
+  }
+}
+
+export default new App();

package/preset/preact/src/interaction.tsx

@@ -0,0 +1,36 @@
+import { useStore } from "@citolab/preact-store";
+import { ActionType, StateModel } from "./store";
+import configProps from "./config.json";
+import procenten from "./assets/procenten.png"; // image types are bundled inside the js
+
+type PropTypes = typeof configProps;
+
+const Interaction = ({ config, dom }: { config: PropTypes; dom: Document | ShadowRoot }) => {
+  const [state, dispatch] = useStore<StateModel, ActionType>(
+    (type, payload) => {
+      console.log(`type: ${type}, payload: ${JSON.stringify(payload)}`);
+    }
+  );
+  return <div className="pci-container">
+    <h1>{config.title}</h1>
+    <div className="body">
+      <img width={config.width} height={+config.height} src={procenten} />
+    </div>
+    <div className="interaction">
+      <label htmlFor="tentacles">{config.prompt}</label>
+      <input type="number"
+        onKeyUp={(e) => {
+          const input = e.target as HTMLInputElement;
+          dispatch<{ input: number }>("SET_INPUT", { input: +input.value });
+        }
+      }
+      onChange={(e) => {
+          const input = e.target as HTMLInputElement;
+          dispatch<{ input: number }>("SET_INPUT", { input: +input.value });
+        }} min="0" max="100" />%
+    </div>
+  </div>;
+};
+
+
+export default Interaction;

package/preset/preact/src/store.ts

@@ -0,0 +1,12 @@
+export type ActionType = "SET_INPUT";
+
+export type StateModel = { input: number };
+
+export const actions = [
+  {
+    type: "SET_INPUT" as ActionType,
+    action: (state: StateModel, { input }: { input: number }) => {
+      return {...state, input };
+    },
+  },
+];

package/preset/tailwind/postcss.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('@tailwindcss/nesting'),
+    require('tailwindcss'),
+    require('autoprefixer'),
+  ]
+}

package/preset/tailwind/src/styles.css

@@ -0,0 +1,7 @@
+@tailwind components;
+@tailwind utilities;
+@tailwind base;
+
+.pci-container  { @apply container flex flex-col justify-center items-center;  }
+h1 { @apply text-2xl text-red-500 m-4; }
+input { @apply border border-gray-400 rounded p-2 m-1;  }

package/preset/tailwind/tailwind.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  content: ["./src/**/*.{html,js,ts,jsx,tsx}", "./*.xml"], // html/javascript and typescript, and everything in pci markup
+  theme: {
+    extend: {},
+  },
+  plugins: [
+  ] 
+}

package/public/index.html

@@ -19,6 +19,7 @@
       #pciContainer {
         width: 100%;
         /* min-width: 800px; */
+
         max-width: 1024px;
         height: 600px;
         min-height: 600px;
@@ -47,7 +48,6 @@
         user has not yet interacted yet, getResponse should return undefined.
       </div>
 
-      
       <div id="pciContainer" class="shadow-sm">
         <div id="loading" class="text-muted mx-auto p-4">Loading...</div>
       </div>
@@ -124,6 +124,11 @@
           location.reload();
         }
 
+        function playState() {
+          const state = item.getState();
+          item.store.replay(state.log); // state.log
+        }
+
         function changeConfig(key, value) {
           item.config.properties[key] = value;
           item.trigger(`change${key}`, value);
@@ -210,20 +215,44 @@
                   <button class="btn btn-outline-secondary" onClick="${() => saveResponse()}">store</button>
                   <button class="btn btn-outline-secondary" onClick="${() => compareResponse()}">compare</button>
                   <button class="btn btn-outline-secondary" onClick="${() => setResponse()}">set</button>
-                  <button class="btn btn-outline-secondary"  disabled="${!item.resetResponse}" onClick="${() => resetResponse()}">reset</button>
+                  <button
+                    class="btn btn-outline-secondary"
+                    disabled="${!item.resetResponse}"
+                    onClick="${() => resetResponse()}"
+                  >
+                    reset
+                  </button>
                 </div>
               </div>
 
               <div>
                 <small class="text-muted">ㅤ</small>
                 <div class="d-flex">
-                <button class="btn bg-light shadow-sm btn-outline-danger me-2"  disabled="${!(item.destroy || item.oncompleted)}" onClick="${() => unload()}">
-                  unload
-                </button>
-                <button class="btn bg-light shadow-sm btn-outline-danger" onClick="${() => reset()}">reset</button>
+                  <button
+                    class="btn bg-light shadow-sm btn-outline-danger me-2"
+                    disabled="${!(item.destroy || item.oncompleted)}"
+                    onClick="${() => unload()}"
+                  >
+                    unload
+                  </button>
+                  <button class="btn bg-light shadow-sm btn-outline-danger" onClick="${() => reset()}">reset</button>
                 </div>
               </div>
             </div>
+
+            <div class="mt-2 d-flex gap-2">
+              <button class="btn btn-outline-secondary" onClick="${() => playState()}">play</button>
+              <input
+                class="form-control-range flex-grow-1"
+                type="range"
+                min="0"
+                max="${JSON.parse(item.getState()).log.length}"
+                value=${range}
+                onChange=${(e) => setRange(e.target.value)}
+                step="1"
+              />
+            </div>
+            
           </div>
         `;
       }
@@ -267,8 +296,8 @@
       window.onload = () => loadItem();
     </script>
 
-    <h3 style="margin-top: 12rem;">checklist</h3>
-    <ul style="margin-bottom:10rem;">
+    <h3 style="margin-top: 12rem">checklist</h3>
+    <ul style="margin-bottom: 10rem">
       <li>Is the css scoped to the item?</li>
       <li>Is the css/item somewhat responsive on smaller screens</li>
       <li>Can you reset the item to its initial state</li>

package/src/cli.js

@@ -1,13 +1,18 @@
 #!/usr/bin/env node
 import { loadConfigFile } from "rollup/dist/loadConfigFile.js";
+import { spawn } from "child_process";
 import { rollup, watch } from "rollup";
+import readline from "readline";
+import chalk from "chalk";
 import path from "path";
 import fs from "fs";
+import os from "os";
+import clear from "clear";
+import figlet from "figlet";
+import inquirer from "inquirer";
 
 const args = process.argv.slice(2);
 
-
-
 // PK: retreive dirname, most of the time automaticly inserted in es modules
 import { fileURLToPath } from "url";
 const __filename = fileURLToPath(import.meta.url);
@@ -18,12 +23,12 @@ const PACKAGE_DIST_PATH = path.join(PACKAGE_ROOT_PATH, "dist");
 const NODE_MODULES = path.join(process.cwd(), "node_modules");
 
 // https://rollupjs.org/guide/en/#programmatically-loading-a-config-file
-const watchBuild = (devServer = false, target = 'IMS') => {
+const watchBuild = (devServer = false, target = "IMS") => {
   const rollupFile = devServer ? "rollup.config.dev.js" : "rollup.config.js";
 
   // PK: this ensures tailwind watches changes
   // PK: See link here: https://github.com/tailwindlabs/tailwindcss/issues/7063
-  process.env.ROLLUP_WATCH = "true"
+  process.env.ROLLUP_WATCH = "true";
 
   fs.rmSync(PACKAGE_DIST_PATH, { recursive: true, force: true });
   !fs.existsSync(PACKAGE_DIST_PATH) && fs.mkdirSync(PACKAGE_DIST_PATH);
@@ -41,8 +46,8 @@ const watchBuild = (devServer = false, target = 'IMS') => {
         );
       } else {
         let fileToCopy;
-        if (target == 'IMS') {
-          fileToCopy = path.join(__dirname, `../public/index.html`)
+        if (target == "IMS") {
+          fileToCopy = path.join(__dirname, `../public/index.html`);
         } else {
           fileToCopy = path.join(NODE_MODULES, `@citolab/tspci-${target}/public/index.html`);
         }
@@ -100,17 +105,309 @@ const prodBuild = async () => {
   });
 };
 
+function promptYesNo(prompt) {
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  });
+  return new Promise((resolve) => {
+    rl.question(`${prompt} (y/n): `, (answer) => {
+      const normalizedAnswer = answer.trim().toLowerCase();
+      if (normalizedAnswer === "y" || normalizedAnswer === "yes") {
+        console.log(chalk.green("Yes"));
+        resolve(true);
+      } else if (normalizedAnswer === "n" || normalizedAnswer === "no") {
+        console.log(chalk.red("No"));
+        resolve(false);
+      } else {
+        console.log("Invalid input. Please enter 'y' or 'n'.");
+        resolve(promptYesNo(prompt));
+      }
+    });
+  }).finally(() => {
+    rl.close();
+  });
+}
+
+function selectOptions(prompt, options) {
+  return inquirer.prompt([
+    {
+      type: "checkbox",
+      message: prompt,
+      name: "values",
+      choices: options.map((o) => ({ name: o, checked: true })),
+    },
+  ]);
+}
+
+function askOption(prompt) {
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  });
+  return new Promise((resolve) => {
+    rl.question(prompt, (option) => {
+      rl.close();
+      resolve(option);
+    });
+  });
+}
+
+function createDirectoryIfNotExists(file) {
+  const dir = path.dirname(file);
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir, { recursive: true });
+  }
+}
+
+function copyDir(presetFolder, destinationFolder) {
+  for (const fileOfDir of fs.readdirSync(presetFolder)) {
+    // check if object is a file or a folder
+    if (fs.statSync(path.join(presetFolder, fileOfDir)).isDirectory()) {
+      copyDir(path.join(presetFolder, fileOfDir), path.join(destinationFolder, fileOfDir));
+    } else {
+      const filename = fileOfDir;
+      const file = path.join(presetFolder, filename);
+      const newFileLocation = path.join(destinationFolder, filename);
+      createDirectoryIfNotExists(newFileLocation);
+      fs.copyFileSync(file, newFileLocation);
+    }
+  }
+}
+
+function copyDirAndReplaceInFiles(presetFolder, destinationFolder, pciName) {
+  for (const fileOfDir of fs.readdirSync(presetFolder)) {
+    // check if object is a file or a folder
+    if (fs.statSync(path.join(presetFolder, fileOfDir)).isDirectory()) {
+      copyDirAndReplaceInFiles(path.join(presetFolder, fileOfDir), path.join(destinationFolder, fileOfDir), pciName);
+    } else {
+      const fileExtensionsToCheck = [".js", ".ts", ".tsx"];
+      const filename = fileOfDir;
+      const file = path.join(presetFolder, filename);
+      const fileExtension = path.extname(file);
+      const newFileLocation = path.join(destinationFolder, filename);
+      createDirectoryIfNotExists(newFileLocation);
+      if (fileExtensionsToCheck.includes(fileExtension)) {
+        // remove ###___name___### in the file content to the name
+        let content = fs.readFileSync(file, "utf8");
+        content = content.replace(/###___PCI_NAME___###/g, pciName);
+        // write newContent to newFileLocation
+        fs.writeFileSync(newFileLocation, content, "utf8");
+      } else {
+        fs.copyFileSync(file, path.join(destinationFolder, filename));
+      }
+    }
+  }
+}
+
 const run = async () => {
   const help = args.indexOf("--help") >= 0 || args.indexOf("-h") >= 0;
   const watch = args.indexOf("--watch") >= 0 || args.indexOf("-w") >= 0;
   const dev = args.indexOf("--dev") >= 0 || args.indexOf("-d") >= 0;
   const target = args.indexOf("--target") >= 0 || args.indexOf("-t") >= 0;
+  const init = args.indexOf("init") >= 0;
 
   if (help) {
-    console.log("--help -h list these commands");
-    console.log("--build a one of build of your item");
-    console.log("--watch watch the files");
-    console.log("--target build a prod item and bundle for platform");
+    console.log(`•\t${chalk.blue("--help -h")} list these commands`);
+    console.log(`•\t${chalk.blue("--build")} build the project`);
+    console.log(`•\t${chalk.blue("--watch")} watch the files`);
+    console.log(`•\t${chalk.blue("--target")} build a prod item and bundle for platform`);
+    console.log("\n");
+    console.log(
+      `${chalk.blueBright("tspci init")} creates a new project \n•\t${chalk.blue(
+        "--force"
+      )} deletes the directory if it already exists \n•\t${chalk.blue(
+        "--no-install"
+      )} don't install dependencies \n•\t${chalk.blue("--path")} path to create the project in`
+    );
+    console.log(
+      `${chalk.blueBright("tspci add --target")} adds a new target to the project. E.g. tspci add --target=tao`
+    );
+    console.log("\n\n");
+    return;
+  }
+
+  if (init) {
+    clear();
+    console.log(chalk.green(figlet.textSync("@citolab/tspci", { horizontalLayout: "full" })));
+
+    // prompt for name
+    const pciName = (await askOption("What your pci identifier (typeIdentifier) (default: myPci)  ")) || "myPci";
+    let destinationFolder = path.join(process.cwd(), pciName);
+    if (args.find((arg) => arg.startsWith("--path"))) {
+      const pathIndex = args.findIndex((arg) => arg.startsWith("--path"));
+      destinationFolder = path.join(process.cwd(), path.join(args[pathIndex].split("=")[1], pciName));
+    }
+    // if args contains --force then delete the directory if already exists
+    if (args.indexOf("--force") >= 0 || args.indexOf("-f") >= 0) {
+      if (fs.existsSync(destinationFolder)) {
+        console.log(chalk.yellow("Force deleting directory"));
+        fs.rmSync(destinationFolder, { recursive: true, force: true });
+      }
+    }
+    // check if directory exists
+    while (pciName && fs.existsSync(destinationFolder)) {
+      console.log(
+        chalk.red(
+          "The directory already exists, please choose another name. Running tscpi init --force will delete the directory"
+        )
+      );
+      return;
+    }
+    // check if contains other characters than letters and numbers
+    if (!/^[a-zA-Z0-9]+$/.test(pciName)) {
+      console.log(
+        chalk.yellow("The identifier of your pci can only contain letters and numbers, stripping special characters")
+      );
+      pciName = pciName.replace(/[^a-zA-Z0-9]/g, "");
+    }
+    console.log(chalk.green(`pci: ${pciName}`));
+    const description = await askOption("What is the description of your pci? (default: pci created with tspci)") || "pci created with tspci"; 
+
+    const options = await selectOptions("Would you like to add other features?", ["tailwind css", "preact"]);
+    console.log(chalk.green(`Options: ${options.values.length === 0 ? "none" : options.values}`));
+    // get relative path to executable
+    const cliPath = __dirname;
+
+    // create the project folder
+    fs.mkdirSync(destinationFolder);
+
+    // copy the content of preset folder to the current folder
+    const presetFolder = path.resolve(cliPath, "./../preset/base");
+    if (!fs.existsSync(presetFolder)) {
+      console.log(chalk.red("Preset folder not found"));
+    }
+
+    console.log(chalk.green("Copying files to PCI project folder"));
+    copyDirAndReplaceInFiles(presetFolder, destinationFolder, pciName);
+    const packageJson = path.join(destinationFolder, "package.json");
+    const packageJsonContent = fs.readFileSync(packageJson, "utf8");
+    const packageJsonContentJson = JSON.parse(packageJsonContent);
+
+    const kebabCasedProjectName = pciName.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+    packageJsonContentJson.name = kebabCasedProjectName;
+    packageJsonContentJson.description = description;
+    packageJsonContentJson.author = os?.userInfo()?.username;
+    if (!packageJsonContentJson.config) {
+      packageJsonContentJson.config = {};
+    }
+    if (!packageJsonContentJson.config.tspci) {
+      packageJsonContentJson.config.tspci = {};
+    }
+    packageJsonContentJson.config.tspci.typeIdentifier = pciName;
+
+    if (options.values.includes("tailwind css")) {
+      console.log(chalk.green("Adding tailwind css"));
+
+      // read postcss.config.js
+      const postcssConfig = path.resolve(cliPath, "./../preset/tailwind/postcss.config.js");
+      const postcssConfigContent = fs.readFileSync(postcssConfig, "utf8");
+      // get all plugin names
+      const pluginNames = postcssConfigContent
+        .match(/require\('(.*)'\)/g)
+        .map((plugin) => plugin.replace(/require\('(.*)'\)/, "$1"));
+      const packageJsonCli = path.resolve(cliPath, "./../package.json");
+      const packageJsonCliContent = fs.readFileSync(packageJsonCli, "utf8");
+      const packageJsonCliContentJson = JSON.parse(packageJsonCliContent);
+      // add all plugins to package.json and map the version to the version in tspci package.json
+      for (const pluginName of pluginNames) {
+        const pluginVersion = packageJsonCliContentJson.dependencies[pluginName];
+        packageJsonContentJson.devDependencies = {
+          ...packageJsonContentJson.devDependencies,
+          [pluginName]: pluginVersion,
+        };
+      }
+      const newPackageJsonContent = JSON.stringify(packageJsonContentJson, null, 2);
+      fs.writeFileSync(packageJson, newPackageJsonContent);
+      // copy tailwind config file
+      copyDir(path.resolve(cliPath, "./../preset/tailwind"), destinationFolder);
+    }
+
+    if (options.values.includes("preact")) {
+      console.log(chalk.green("Adding preact"));
+      const packageJson = path.join(destinationFolder, "package.json");
+      const packageJsonContent = fs.readFileSync(packageJson, "utf8");
+      let packageJsonContentJson = JSON.parse(packageJsonContent);
+      // delete index.ts
+      fs.rmSync(path.join(destinationFolder, "src/index.ts"), { force: true });
+      const preactPresetFolder = path.resolve(cliPath, "./../preset/preact");
+      copyDirAndReplaceInFiles(preactPresetFolder, destinationFolder, pciName);
+      // add preact and @citolab/preact-store to the package json
+      packageJsonContentJson.dependencies = {
+        ...packageJsonContentJson.dependencies,
+        preact: "^10.13.2",
+        "@citolab/preact-store": "^2.0.9",
+      };
+      packageJsonContentJson = { ...packageJsonContentJson, source: "src/index.tsx" };
+      const newPackageJsonContent = JSON.stringify(packageJsonContentJson, null, 2);
+      fs.writeFileSync(packageJson, newPackageJsonContent);
+    }
+
+    // run npm instaal in destination folder
+    if (args.indexOf("--no-install") === -1) {
+      console.log(chalk.green("Installing dependencies"));
+      const npm = spawn("npm", ["install"], { cwd: destinationFolder });
+      npm.stdout.on("data", (data) => {
+        console.log(chalk.green(data.toString()));
+        console.log(chalk.green("Done! You can now start the dev server with npm run dev"));
+      
+        // console.log(chalk.blue("Starting dev server..."));
+        // // run npm run dev in destination folder
+        // const npm = spawn("npm", ["run", "dev"], { cwd: destinationFolder });
+        // npm.stdout.on("data", (data) => {
+        //   console.log(chalk.blue(data.toString()));
+        // });
+      });
+      return;
+    } else {
+      console.log(chalk.yellow("Skipping npm install, run npm install in the project folder to install dependencies"));
+    }
+  }
+
+  if (args.indexOf("add") !== -1) {
+    const targetIndex = args.indexOf("--target");
+    if (args.length <= targetIndex + 1) {
+      console.error("Missing target name. Use tspci add --target target");
+      return;
+    }
+    const targetname = args[targetIndex + 1];
+    const packageFileContent = fs.readFileSync(path.join(PACKAGE_ROOT_PATH, "package.json"), "utf8");
+    const packageJson = JSON.parse(packageFileContent);
+
+    const modifyPci = () => {
+      const scriptFile = path.join(path.join(path.join(path.join(NODE_MODULES, `@citolab`), `tspci-${targetname}`), 'src'), `init.mjs`);
+      let init = false;
+      if (fs.existsSync(scriptFile)) {
+        // run init() script
+        import(`file:///${scriptFile}`).then((script) => {
+          if (script.init) {
+            init = true;
+            console.log(chalk.green(`Running init script for @citolab/tspci-${targetname}`));
+            script.init();
+          }
+        });
+      }
+      if (!init) {
+        console.log(chalk.green(`No init script found for @citolab/tspci-${targetname}`));
+      }
+    }
+
+    // check if `@citolab/tspci-${targetname}]}` is already in devDependencies
+    if (!packageJson.devDependencies || !packageJson.devDependencies[`@citolab/tspci-${targetname}`]) {
+      console.log(chalk.white(`Adding @citolab/tspci-${targetname}`));
+      // install @citolab/tspci-${targetname} to devDepencies
+      const npm = spawn("npm", ["install", `@citolab/tspci-${targetname}`, "--save-dev"], { cwd: process.cwd() });
+      // wait till npm install is done
+      npm.stdout.on("data", (data) => {
+        console.log(chalk.green(`successfull installed @citolab/tspci-${targetname}`));
+        // run init script if available
+        modifyPci();
+      });
+    } else {
+      modifyPci();
+    }
+
+
     return;
   }
 
@@ -138,7 +435,7 @@ const run = async () => {
         console.error("Missing target name. Use tspci --target target");
       }
       const targetname = args[targetIndex + 1];
-      const scriptFile = path.join(NODE_MODULES, `@citolab\\tspci-${targetname}\\src\\createPackage.mjs`);
+      const scriptFile = path.join(path.join(path.join(path.join(NODE_MODULES, `@citolab`), `tspci-${targetname}`), 'src'), `createPackage.mjs`);
       import(`file:///${scriptFile}`).then((script) => {
         script.bundle();
       });