Merged pending changes since refactor, added NPX starter template

.npmrc

@@ -1,3 +1,4 @@
 strict-peer-dependencies=false
 auto-install-peers=true
-shamefully-hoist=true
+# shamefully-hoist=true
+# shared-workspace-lockfile=false

CONTRIBUTING.md

@@ -0,0 +1 @@
+# Deploying Prez UI

LICENSE

@@ -0,0 +1,29 @@
+BSD 3-Clause License
+
+Copyright (c) 2024, RDFLib Team
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

README.md

@@ -0,0 +1,10 @@
+# Prez UI
+
+The new structure is as follows:
+- docs: will contain install instructions, how to use, etc.
+- examples: will contain a few different use cases of using the various libraries
+- packages
+    - prez-lib: the JS library containing RDF processing logic
+    - prez-components: the Vue component library
+    - prez-ui: the base Nuxt application
+    - create-prez-app: a NPX starter template for initialising a Prez UI theme

docs/deployment.md

@@ -0,0 +1 @@
+# Deploying Prez UI

docs/usage.md

@@ -0,0 +1 @@
+# Using Prez UI

packages/create-prez-app/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+*.log

packages/create-prez-app/README.md

@@ -0,0 +1,5 @@
+# Prez UI starter template
+
+```bash
+npx create-prez-app my-app
+```

packages/create-prez-app/index.js

@@ -0,0 +1,48 @@
+#!/usr/bin/env node
+
+// const spawn = require('cross-spawn');
+const fs = require('fs');
+const path = require('path');
+
+// The first argument will be the project name.
+const projectName = process.argv[2];
+
+// Create a project directory with the project name.
+const currentDir = process.cwd();
+const projectDir = path.resolve(currentDir, projectName);
+fs.mkdirSync(projectDir, { recursive: true });
+
+// A common approach to building a starter template is to
+// create a `template` folder which will house the template
+// and the files we want to create.
+const templateDir = path.resolve(__dirname, 'template');
+fs.cpSync(templateDir, projectDir, { recursive: true });
+
+// It is good practice to have dotfiles stored in the
+// template without the dot (so they do not get picked
+// up by the starter template repository). We can rename
+// the dotfiles after we have copied them over to the
+// new project directory.
+fs.renameSync(
+  path.join(projectDir, 'gitignore'),
+  path.join(projectDir, '.gitignore')
+);
+
+const projectPackageJson = require(path.join(projectDir, 'package.json'));
+
+// Update the project's package.json with the new project name
+projectPackageJson.name = projectName;
+
+fs.writeFileSync(
+  path.join(projectDir, 'package.json'),
+  JSON.stringify(projectPackageJson, null, 2)
+);
+
+// Run `npm install` in the project directory to install
+// the dependencies. We are using a third-party library
+// called `cross-spawn` for cross-platform support.
+// (Node has issues spawning child processes in Windows).
+// spawn.sync('npm', ['install'], { stdio: 'inherit' });
+
+console.log('Success! Your new project is ready.');
+console.log(`Created ${projectName} at ${projectDir}`);

packages/create-prez-app/package.json

@@ -0,0 +1,20 @@
+{
+    "name": "create-prez-app",
+    "version": "1.0.0",
+    "description": "Starter template for Prez UI",
+    "bin": {
+        "create-prez-app": "./index.js"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/rdflib/prez-ui.git",
+        "directory": "packages/create-prez-app"
+    },
+    "keywords": [
+        "template"
+    ],
+    "bugs": {
+        "url": "https://github.com/rdflib/prez-ui/issues"
+    },
+    "homepage": "https://github.com/rdflib/prez-ui#readme"
+}

packages/create-prez-app/template/README.md

@@ -0,0 +1,15 @@
+# Prez UI V4
+
+This project was bootstrapped by `create-prez-app`
+
+In the project root directory, install with your NPM package manager of choice:
+
+```bash
+npm install
+```
+
+Then preview your theme by running:
+
+```bash
+npm run dev
+```

packages/prez-template/assets/css/tailwind.css → packages/create-prez-app/template/assets/css/tailwind.css

@@ -4,6 +4,6 @@
 
 @layer base {
     :root {
-        --primary: 40 100% 50%;
+        /* define your Tailwind CSS variables (in HSL values without the hsl()) here */
     }
-}
+}

packages/create-prez-app/template/assets/css/theme.css

@@ -0,0 +1 @@
+/* other CSS for your theme goes here */

packages/create-prez-app/template/components.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "default",
+  "typescript": true,
+  "tsConfigPath": ".nuxt/tsconfig.json",
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "assets/css/tailwind.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "framework": "nuxt",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

packages/create-prez-app/template/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

packages/prez-template/nuxt.config.ts → packages/create-prez-app/template/nuxt.config.ts

@@ -2,9 +2,8 @@
 export default defineNuxtConfig({
     compatibilityDate: "2024-04-03",
     devtools: { enabled: true },
-    modules: ["@nuxtjs/tailwindcss"],
+    modules: ["@nuxtjs/tailwindcss", "shadcn-nuxt"],
     extends: [
-        // "../prez-ui",
-        ["github:rdflib/prez-ui/prez-ui#jamie/next/shad-layer-fix", { install: true }]
+        "../../prez-ui",
     ],
-});
+});

packages/create-prez-app/template/package.json

@@ -0,0 +1,29 @@
+{
+    "name": "nuxt-app",
+    "private": true,
+    "type": "module",
+    "scripts": {
+        "build": "nuxt build",
+        "dev": "nuxt dev",
+        "generate": "nuxt generate",
+        "preview": "nuxt preview",
+        "postinstall": "nuxt prepare"
+    },
+    "dependencies": {
+        "@nuxtjs/tailwindcss": "^6.12.2",
+        "@vueuse/core": "^12.0.0",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "lucide-vue-next": "^0.461.0",
+        "nuxt": "^3.13.2",
+        "radix-vue": "^1.9.10",
+        "shadcn-nuxt": "0.11.3",
+        "tailwind-merge": "^2.5.5",
+        "tailwindcss-animate": "^1.0.7",
+        "vue": "latest",
+        "vue-router": "latest"
+    },
+    "devDependencies": {
+        "typescript": "^5.6.3"
+    }
+}

packages/create-prez-app/template/tailwind.config.js

@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    theme: {
+        extend: {
+            colors: {
+                // any Tailwind CSS variable overrides you've defined in tailwind.css go here
+            },
+        },
+    },
+}

packages/prez-components/.env.example

@@ -0,0 +1,3 @@
+# Set auto detection of markdown and html content in literals
+VITE_PREZ_AUTO_DETECT_HTML=false
+VITE_PREZ_AUTO_DETECT_MARKDOWN=false

packages/prez-components/.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env

packages/prez-components/package.json

@@ -3,38 +3,49 @@
     "private": true,
     "version": "0.0.1",
     "type": "module",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/rdflib/prez-ui.git",
+        "directory": "packages/prez-components"
+    },
     "files": [
         "dist"
     ],
     "main": "./dist/prez-components.umd.cjs",
     "module": "./dist/prez-components.js",
     "exports": {
         ".": {
+            "types": "./dist/index.d.ts",
             "import": "./dist/prez-components.js",
-            "require": "./dist/prez-components.umd.cjs",
-            "types": "./dist/index.d.ts"
+            "require": "./dist/prez-components.umd.cjs"
         },
-        "./style.css": "./dist/style.css"
+        "./style.css": {
+            "import": "./dist/style.css",
+            "require": "./dist/style.css"
+        }
     },
     "types": "./dist/index.d.ts",
     "scripts": {
         "dev": "vite",
-        "build": "vite build && vue-tsc -b --declaration --emitDeclarationOnly",
-        "build:watch": "concurrently \"vite build --watch\" \"vue-tsc -b --declaration --emitDeclarationOnly\"",
+        "build": "vue-tsc && vite build",
         "types": "vue-tsc",
         "preview": "vite preview",
         "preinstall": "npx only-allow pnpm"
     },
+    "peerDependencies": {
+        "vue": "^3.0.0"
+    },
     "dependencies": {
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "dompurify": "^3.2.3",
         "lucide-vue-next": "^0.461.0",
+        "marked": "^15.0.4",
+        "mermaid": "^11.4.1",
         "prez-lib": "workspace:*",
         "radix-vue": "^1.9.10",
         "tailwind-merge": "^2.5.5",
         "tailwindcss-animate": "^1.0.7",
-        "vite-plugin-libcss": "^1.1.1",
-        "vue": "^3.5.13",
         "vue-router": "^4.5.0"
     },
     "devDependencies": {
@@ -45,7 +56,7 @@
         "tailwindcss": "^3.4.15",
         "typescript": "5.6.2",
         "vite": "^5.4.10",
-        "vue-dompurify-html": "^5.2.0",
+        "vite-plugin-dts": "^4.3.0",
         "vue-tsc": "2.0.29"
     }
 }

packages/prez-components/src/components/DataProvider.vue

@@ -32,9 +32,9 @@ const fetchData = async () => {
     properties.value = [];
 
     // Function to simulate a minimum loading time
-    const minimumLoadingTime = () => {
-        return new Promise(resolve => setTimeout(resolve, 200));
-    };
+    // const minimumLoadingTime = () => {
+    //     return new Promise(resolve => setTimeout(resolve, 200));
+    // };
 
     if(!url.value) {
         error.value = new Error('No data URL provided')

packages/prez-components/src/components/ItemTable.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { type PrezFocusNode } from 'prez-lib';
-import { Table, TableBody, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Table, TableBody } from '@/components/ui/table';
 import { ItemTableProps } from "@/types";
 import ItemTableRow from "./ItemTableRow.vue";
 
@@ -32,7 +32,9 @@ const term = props.term as PrezFocusNode;
                 :index="index"
                 :term="term" 
                 :objects="fieldProp ? fieldProp.objects : []" 
-                :predicate="fieldProp!.predicate" 
+                :predicate="fieldProp!.predicate"
+                :renderHtml="props.renderHtml"
+                :renderMarkdown="props.renderMarkdown"
             />
         </TableBody>
     </Table>