create-harper 0.0.1 → 0.0.2

package/template-react-ts/src/style.css

@@ -0,0 +1,96 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vanilla:hover {
+  filter: drop-shadow(0 0 2em #3178c6aa);
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/template-react-ts/src/vite-env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+	readonly VITE_EXAMPLE_ENV_VAR: string;
+}
+
+interface ImportMeta {
+	readonly env: ImportMetaEnv;
+}

package/template-react-ts/tsconfig.json

@@ -0,0 +1,34 @@
+{
+	"compilerOptions": {
+		"target": "ES2022",
+		"useDefineForClassFields": true,
+		"module": "ESNext",
+		"lib": ["ES2022", "DOM", "DOM.Iterable"],
+		"types": ["vite/client"],
+		"skipLibCheck": true,
+		"forceConsistentCasingInFileNames": true,
+		"jsx": "react-jsx",
+		"baseUrl": ".",
+		"paths": {
+			"@/*": [
+				"./src/*"
+			]
+		},
+
+		/* Bundler mode */
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"verbatimModuleSyntax": true,
+		"moduleDetection": "force",
+		"noEmit": true,
+
+		/* Linting */
+		"strict": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"erasableSyntaxOnly": true,
+		"noFallthroughCasesInSwitch": true,
+		"noUncheckedSideEffectImports": true
+	},
+	"include": ["src"]
+}

package/template-react-ts/vite.config.ts

@@ -0,0 +1,22 @@
+import react from '@vitejs/plugin-react';
+import path from 'node:path';
+import { defineConfig } from 'vite';
+
+// https://vite.dev/config/
+export default defineConfig({
+	plugins: [
+		react(),
+	],
+	resolve: {
+		alias: {
+			'@': path.resolve(__dirname, './src'),
+		},
+	},
+	build: {
+		outDir: 'web',
+		emptyOutDir: true,
+		rolldownOptions: {
+			external: ['**/*.test.*', '**/*.spec.*'],
+		},
+	},
+});

package/template-shared/_aiignore

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

package/template-shared/_env.example

@@ -0,0 +1,3 @@
+CLI_TARGET_USERNAME='YOUR_CLUSTER_USERNAME'
+CLI_TARGET_PASSWORD='YOUR_CLUSER_PASSWORD'
+CLI_TARGET='YOUR_FABRIC.HARPER.FAST_CLUSER_URL_HERE'

package/template-shared/_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-shared/graphql.config.yml

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

package/template-studio/README.md

@@ -0,0 +1,34 @@
+# <<projectName>>
+
+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.js](./resources.js) 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/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/package.json

@@ -0,0 +1,14 @@
+{
+	"name": "<<packageName>>",
+	"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>Harper Application Template</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <h1>Harper Application Template</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 @@
+# <<projectName>>
+
+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/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/package.json

@@ -0,0 +1,14 @@
+{
+	"name": "<<packageName>>",
+	"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"
+		]
+	}
+}