create-harper 0.0.1 → 0.0.3

package/template-studio/_gitignore

@@ -0,0 +1,147 @@
+.DS_Store
+
+#
+# https://raw.githubusercontent.com/github/gitignore/refs/heads/main/Node.gitignore
+#
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.*
+!.env.example
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+.output
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Sveltekit cache directory
+.svelte-kit/
+
+# vitepress build output
+**/.vitepress/dist
+
+# vitepress cache directory
+**/.vitepress/cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# Firebase cache directory
+.firebase/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v3
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+# Vite files
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+.vite/

package/template-studio/config.yaml

@@ -0,0 +1,24 @@
+# yaml-language-server: $schema=./node_modules/harperdb/config-app.schema.json
+
+# This is the configuration file for the application.
+# It specifies built-in Harper components that will load the specified feature and files.
+# For more information, see https://docs.harperdb.io/docs/reference/components/built-in-extensions
+
+# Load Environment Variables from the specified file
+# loadEnv:
+#   files: '.env'
+
+# This provides the HTTP REST interface for all exported resources
+rest: true
+
+# These reads GraphQL schemas to define the schema of database/tables/attributes.
+graphqlSchema:
+  files: 'schema.graphql'
+
+# Loads JavaScript modules such that their exports are exported as resources
+jsResource:
+  files: 'resources.js'
+
+# Serve the static files from the web directory as a web application
+static:
+  files: 'web/*'

package/template-studio/graphql.config.yml

@@ -0,0 +1,3 @@
+schema: schema.graphql
+include: node_modules/harperdb/schema.graphql
+documents: '**/*.graphql'

package/template-studio/package.json

@@ -0,0 +1,14 @@
+{
+	"name": "your-package-name-here",
+	"version": "1.0.0",
+	"description": "Your new Harper app",
+	"type": "module",
+	"scripts": {
+		"start": "harperdb run .",
+		"dev": "harperdb dev .",
+		"deploy": "npx -y dotenv-cli -- harperdb deploy . restart=rolling replicated=true"
+	},
+	"devDependencies": {
+		"harperdb": "^4.7.15"
+	}
+}

package/template-studio/resources.js

@@ -0,0 +1,27 @@
+import { Resource } from 'harperdb';
+
+/** Here we can define any JavaScript-based resources and extensions to tables
+import {tables} from 'harperdb';
+
+export class MyCustomResource extends tables.TableName {
+	// we can define our own custom POST handler
+	post(content) {
+		// do something with the incoming content;
+		return super.post(content);
+	}
+	// or custom GET handler
+	get() {
+		// we can modify this resource before returning
+		return super.get();
+	}
+}
+ */
+// we can also define a custom resource without a specific table
+export class Greeting extends Resource {
+	// a "Hello, world!" handler
+	static loadAsInstance = false; // use the updated/newer Resource API
+
+	get() {
+		return { greeting: 'Hello, world!' };
+	}
+}

package/template-studio/schema.graphql

@@ -0,0 +1,7 @@
+## Here we can define any tables in our database. This example shows how we define a type as a table using
+## the type name as the table name and specifying it is an "export" available in the REST and other external protocols.
+type TableName @table @export {
+	id: ID @primaryKey # Here we define primary key (must be one)
+	name: String # we can define any other attributes here
+	tag: String @indexed # we can specify any attributes that should be indexed
+}

package/template-studio/web/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>your-project-name-here</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <h1>your-project-name-here</h1>
+      <p>
+        This is an example of serving static assets using the built-in
+        <a
+          href="https://docs.harperdb.io/docs/reference/components/built-in-extensions#static"
+        >static component</a>. <br />
+        You can use this component to serve web applications!
+      </p>
+      <div>
+        <p class="count" id="count">0</p>
+        <button class="decrement" id="decrement">-</button>
+        <button class="increment" id="increment">+</button>
+      </div>
+    </main>
+
+    <script src="index.js"></script>
+  </body>
+</html>

package/template-studio/web/index.js

@@ -0,0 +1,18 @@
+let count = 0;
+const counterDisplay = document.getElementById('count');
+const decrementButton = document.getElementById('decrement');
+const incrementButton = document.getElementById('increment');
+
+function updateDisplay() {
+	counterDisplay.textContent = count;
+}
+
+decrementButton.addEventListener('click', () => {
+	count--;
+	updateDisplay();
+});
+
+incrementButton.addEventListener('click', () => {
+	count++;
+	updateDisplay();
+});

package/template-studio/web/styles.css

@@ -0,0 +1,57 @@
+body {
+  font-family: Arial, sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+  background-color: #f5f5f5;
+}
+
+main {
+  text-align: center;
+  background-color: white;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.count {
+  font-size: 4rem;
+  margin: 1rem 0;
+  color: #333;
+}
+
+.counter-controls {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+}
+
+button {
+  font-size: 1.5rem;
+  width: 3rem;
+  height: 3rem;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.decrement {
+  background-color: #ff6b6b;
+  color: white;
+}
+
+.decrement:hover {
+  background-color: #ff5252;
+}
+
+.increment {
+  background-color: #4ecdc4;
+  color: white;
+}
+
+.increment:hover {
+  background-color: #39b2a9;
+}

package/template-studio-ts/README.md

@@ -0,0 +1,34 @@
+# your-project-name-here
+
+Your new app is now deployed and running on Harper Fabric!
+
+Here's what you should do next:
+
+### 1. Define Your Schema
+
+Open your [schema.graphql](./schema.graphql) and tap [+ New Table](./schema.graphql?ShowNewTableModal=true). This is
+your table schema definition, and is the heart of a great Harper app. This is the main starting point for defining your
+[database schema](./databases), specifying which tables you want and what attributes/fields they should have. REST
+endpoints will get stood up for any table that you `@export`.
+
+### 2. Add Custom Endpoints
+
+The [resources.ts](./resources.ts) provides a template for defining JavaScript resource classes for customized
+application logic in your endpoints.
+
+### 3. View Your Website
+
+Pop open [http://localhost:9926](http://localhost:9926) to view [web/index.html](./web/index.html) in your browser.
+
+### 4. Use Your API
+
+Head to the [APIs](./apis) tab to explore your endpoints and exercise them. You can click the "Authenticate" button to
+see what different users will be able to access through your API.
+
+## Keep Going!
+
+For more information about getting started with Harper and building applications, see
+our [getting started guide](https://docs.harperdb.io/docs).
+
+For more information on Harper Components, see
+the [Components documentation](https://docs.harperdb.io/docs/reference/components).

package/template-studio-ts/_aiignore

@@ -0,0 +1 @@
+.env

package/template-studio-ts/_gitignore

@@ -0,0 +1,147 @@
+.DS_Store
+
+#
+# https://raw.githubusercontent.com/github/gitignore/refs/heads/main/Node.gitignore
+#
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.*
+!.env.example
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+.output
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Sveltekit cache directory
+.svelte-kit/
+
+# vitepress build output
+**/.vitepress/dist
+
+# vitepress cache directory
+**/.vitepress/cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# Firebase cache directory
+.firebase/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v3
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+# Vite files
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+.vite/

package/template-studio-ts/config.yaml

@@ -0,0 +1,24 @@
+# yaml-language-server: $schema=./node_modules/harperdb/config-app.schema.json
+
+# This is the configuration file for the application.
+# It specifies built-in Harper components that will load the specified feature and files.
+# For more information, see https://docs.harperdb.io/docs/reference/components/built-in-extensions
+
+# Load Environment Variables from the specified file
+# loadEnv:
+#   files: '.env'
+
+# This provides the HTTP REST interface for all exported resources
+rest: true
+
+# These reads GraphQL schemas to define the schema of database/tables/attributes.
+graphqlSchema:
+  files: 'schema.graphql'
+
+# Loads JavaScript modules such that their exports are exported as resources
+jsResource:
+  files: 'resources.ts'
+
+# Serve the static files from the web directory as a web application
+static:
+  files: 'web/*'

package/template-studio-ts/graphql.config.yml

@@ -0,0 +1,3 @@
+schema: schema.graphql
+include: node_modules/harperdb/schema.graphql
+documents: '**/*.graphql'

package/template-studio-ts/package.json

@@ -0,0 +1,14 @@
+{
+	"name": "your-package-name-here",
+	"version": "1.0.0",
+	"description": "Your new Harper app",
+	"type": "module",
+	"scripts": {
+		"start": "harperdb run .",
+		"dev": "harperdb dev .",
+		"deploy": "npx -y dotenv-cli -- harperdb deploy . restart=rolling replicated=true"
+	},
+	"devDependencies": {
+		"harperdb": "^4.7.15"
+	}
+}

package/template-studio-ts/resources.ts

@@ -0,0 +1,52 @@
+import { type RecordObject, type RequestTargetOrId, Resource } from 'harperdb';
+
+/** Here we can define any JavaScript-based resources and extensions to tables
+import { tables, type RequestTarget } from 'harperdb';
+
+interface TableNameRecord {
+	id: string;
+	name: string;
+	tag: string;
+}
+
+export class TableName extends tables.TableName<TableNameRecord> {
+	// we can define our own custom POST handler
+	async post(target: RequestTargetOrId, newRecord: Omit<TableNameRecord, 'id'>) {
+		// do something with the incoming content;
+		return super.post(target, newRecord);
+	}
+	// or custom GET handler
+	async get(target: RequestTarget): Promise<TableNameRecord> {
+		// we can modify this resource before returning
+		return super.get(target);
+	}
+}
+*/
+
+interface GreetingRecord {
+	greeting: string;
+}
+
+export class Greeting extends Resource<GreetingRecord> {
+	static loadAsInstance = false;
+
+	async post(target: RequestTargetOrId, newRecord: Partial<GreetingRecord & RecordObject>): Promise<GreetingRecord> {
+		return { greeting: 'Greetings, post!' };
+	}
+
+	async get(target?: RequestTargetOrId): Promise<GreetingRecord> {
+		return { greeting: 'Greetings, get!' };
+	}
+
+	async put(target: RequestTargetOrId, record: GreetingRecord & RecordObject): Promise<GreetingRecord> {
+		return { greeting: 'Greetings, put!' };
+	}
+
+	async patch(target: RequestTargetOrId, record: Partial<GreetingRecord & RecordObject>): Promise<GreetingRecord> {
+		return { greeting: 'Greetings, patch!' };
+	}
+
+	async delete(target: RequestTargetOrId): Promise<boolean> {
+		return true;
+	}
+}

package/template-studio-ts/schema.graphql

@@ -0,0 +1,7 @@
+## Here we can define any tables in our database. This example shows how we define a type as a table using
+## the type name as the table name and specifying it is an "export" available in the REST and other external protocols.
+type TableName @table @export {
+	id: ID @primaryKey # Here we define primary key (must be one)
+	name: String # we can define any other attributes here
+	tag: String @indexed # we can specify any attributes that should be indexed
+}

package/template-studio-ts/tsconfig.json

@@ -0,0 +1,10 @@
+{
+	"compilerOptions": {
+		"allowImportingTsExtensions": true,
+		"lib": [
+			"es2015",
+			"dom",
+			"es2018.asynciterable"
+		]
+	}
+}

package/template-studio-ts/web/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>your-project-name-here</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <h1>your-project-name-here</h1>
+      <p>
+        This is an example of serving static assets using the built-in
+        <a
+          href="https://docs.harperdb.io/docs/reference/components/built-in-extensions#static"
+        >static component</a>. <br />
+        You can use this component to serve web applications!
+      </p>
+      <div>
+        <p class="count" id="count">0</p>
+        <button class="decrement" id="decrement">-</button>
+        <button class="increment" id="increment">+</button>
+      </div>
+    </main>
+
+    <script src="index.js"></script>
+  </body>
+</html>

package/template-studio-ts/web/index.js

@@ -0,0 +1,18 @@
+let count = 0;
+const counterDisplay = document.getElementById('count');
+const decrementButton = document.getElementById('decrement');
+const incrementButton = document.getElementById('increment');
+
+function updateDisplay() {
+	counterDisplay.textContent = count;
+}
+
+decrementButton.addEventListener('click', () => {
+	count--;
+	updateDisplay();
+});
+
+incrementButton.addEventListener('click', () => {
+	count++;
+	updateDisplay();
+});