Conversion

.gitpod.Dockerfile

@@ -0,0 +1,12 @@
+FROM gitpod/workspace-postgres
+RUN sudo apt-get -y update
+RUN sudo apt-get -y upgrade
+RUN sudo apt-get install -y sqlite3 libsqlite3-dev
+RUN npm i -g vercel
+
+
+# Install custom tools, runtimes, etc.
+# For example "bastet", a command-line tetris clone:
+# RUN brew install bastet
+#
+# More information: https://www.gitpod.io/docs/config-docker/

.gitpod.yml

@@ -0,0 +1,12 @@
+image:
+  file: .gitpod.Dockerfile
+
+tasks:
+  - init: npm install && npm run build
+    command: npm run dev
+
+vscode:
+  extensions:
+    - pflannery.vscode-versionlens@1.0.8:oKj6qejw3b092PPtUeOAJA==
+    - Prisma.prisma-insider@4.0.5:ecSqNOLRWUSRX3CurxbKcw==
+    - esbenp.prettier-vscode@5.1.3:t532ajsImUSrA9N8Bd7jQw==

.theia/launch.json

@@ -0,0 +1,18 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  "version": "0.2.0",
+  "configurations": [
+      {
+          "type": "node",
+          "request": "launch",
+          "name": "Launch via NPM",
+          "runtimeExecutable": "npm",
+          "runtimeArgs": [
+              "run",
+              "dev"
+          ],
+          "port": 9229
+      }
+  ]
+}

.theia/settings.json

@@ -0,0 +1,3 @@
+{
+    "editor.autoSave": "off"
+}

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "files.watcherExclude": {
+    "**/.git/objects/**": true,
+    "**/.git/subtree-cache/**": true,
+    "**/.hg/store/**": true
+  }
+}

README.md

@@ -1,3 +1,5 @@
+[![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/williamluke4/Naph)
+
 # Naph
 
 ## Experimental - _Use at your own peril!_

app/bin.ts

@@ -0,0 +1,62 @@
+#!/usr/bin/env node
+
+// warnings: no tanks
+// hides ExperimentalWarning: The fs.promises API is experimental
+process.env.NODE_NO_WARNINGS = '1'
+
+/**
+ * Dependencies
+ */
+
+import { CLI } from './cli'
+import { Version } from './cli/version'
+import chalk from 'chalk'
+import { HelpError } from './cli/help'
+import { isError } from './cli/helpers/utils'
+// import { capture } from './capture'
+
+
+/**
+ * Main function
+ */
+async function main(): Promise<number> {
+  // react shut up
+  process.env.NODE_ENV = 'production'
+
+  // create a new CLI with our subcommands
+  const cli = CLI.new({
+    version: Version.new(),
+  })
+  // parse the arguments
+  const result = await cli.parse(process.argv.slice(2))
+  if (result instanceof HelpError) {
+    console.error(result.message)
+    return 1
+  } else if (isError(result)) {
+    console.error(result)
+    return 1
+  }
+  console.log(result)
+
+  return 0
+}
+
+process.on('SIGINT', () => {
+  process.exit(0) // now the "exit" event will fire
+})
+
+/**
+ * Run our program
+ */
+if (require.main === module) {
+  main()
+    .then(code => {
+      if (code !== 0) {
+        process.exit(code)
+      }
+    })
+    .catch(err => {
+      console.error(chalk.redBright.bold('Error: ') + err.stack)
+      process.exit(1)
+    })
+}

app/cli/help.ts

@@ -0,0 +1,23 @@
+
+import chalk from 'chalk'
+
+/**
+ * Unknown command
+ */
+export function unknownCommand(helpTemplate: string, cmd: string): HelpError {
+  return new HelpError(
+    `\n${chalk.bold.red(`!`)} Unknown command "${cmd}"\n${helpTemplate}`,
+  )
+}
+
+/**
+ * Custom help error used to display help
+ * errors without printing a stack trace
+ */
+export class HelpError extends Error {
+  constructor(msg: string) {
+    super(msg)
+    // setPrototypeOf is needed for custom errors to work
+    Object.setPrototypeOf(this, HelpError.prototype)
+  }
+}

app/cli/helpers/types.ts

@@ -0,0 +1,17 @@
+
+/**
+ * Command interface
+ */
+export interface Command {
+  parse(argv: string[]): Promise<string | Error>
+}
+
+/**
+ * Commands
+ */
+export type Commands = { [command: string]: Command }
+
+export type Dictionary<T> = {
+  [key: string]: T
+}
+

app/cli/helpers/utils.ts

@@ -0,0 +1,27 @@
+import dedent from 'strip-indent'
+import Arg from 'arg'
+
+/**
+ * format
+ */
+export function format(input: string = ''): string {
+  return dedent(input).trimRight() + '\n'
+}
+
+/**
+ * Wrap arg to return an error instead of throwing
+ */
+export function arg<T extends Arg.Spec>(argv: string[], spec: T): Arg.Result<T> | Error {
+  try {
+    return Arg(spec, { argv, stopAtPositional: true })
+  } catch (err) {
+    return err
+  }
+}
+
+/**
+ * Check if result is an error
+ */
+export function isError(result: any): result is Error {
+  return result instanceof Error
+}

app/cli/index.ts

@@ -0,0 +1,71 @@
+import chalk from 'chalk'
+// import { Command, Commands, arg, isError, format, HelpError, unknownCommand } from '@prisma/cli'
+import { Version } from './version'
+import { Command, Commands } from './helpers/types'
+import { isError, format } from 'util'
+import { unknownCommand, HelpError } from './help'
+import { arg } from './helpers/utils'
+import { Run } from './run'
+
+/**
+ * CLI command
+ */
+export class CLI implements Command {
+  static new(cmds: Commands): CLI {
+    return new CLI(cmds)
+  }
+  private constructor(private readonly cmds: Commands) {}
+
+  async parse(argv: string[]): Promise<string | Error> {
+    // parse the args according to the following spec
+    const args = arg(argv, {
+      '--help': Boolean,
+      '-h': '--help',
+      '--version': Boolean,
+      '-v': '--version',
+    })
+    if (isError(args)) {
+      return this.help(args.message)
+    }
+    if (args['--version']) {
+      return Version.new().parse(argv)
+    }
+    if (args['--help']) {
+      return this.help()
+    }
+    if (args._.length === 0 || args._.length === 1){
+      return Run.new().parse(args._)
+    } 
+
+
+    // check if we have that subcommand
+    const cmd = this.cmds[args._[0]]
+    if (cmd) {
+      return cmd.parse(args._.slice(1))
+    }
+    // unknown command
+    return unknownCommand(CLI.help, args._[0])
+  }
+
+  // help function
+  private help(error?: string): string | HelpError {
+    if (error) {
+      return new HelpError(`\n${chalk.bold.red(`!`)} ${error}\n${CLI.help}`)
+    }
+    return CLI.help
+  }
+
+  // static help template
+  private static help = format(`
+    ${chalk.bold.green('Prisma Viewer   ಠ_ಠ')}
+
+    ${chalk.bold('Usage')}
+      ${chalk.dim(`$`)} pv [path]
+
+    ${chalk.bold('Options')}
+      -h, --help       Displays this help message
+    ${chalk.bold('Examples')}
+      ${chalk.dim(`$`)} pv 
+      ${chalk.dim(`$`)} pv ./schema.prisma
+  `)
+}

app/cli/run.ts

@@ -0,0 +1,17 @@
+import { Command } from "./helpers/types";
+import { startServer } from '../server';
+import open from 'open';
+
+
+export class Run implements Command {
+  static new(): Run {
+    return new Run();
+  }
+  private constructor() {}
+  async parse(args: string[]) {
+    startServer(args && args[0])
+    open('http://localhost:8080');
+
+    return ""
+  }
+}

app/cli/version.ts

@@ -0,0 +1,13 @@
+import { Command } from './helpers/types'
+
+const packageJson = require('../../package.json')
+
+export class Version implements Command {
+  static new(): Version {
+    return new Version()
+  }
+  private constructor() {}
+  async parse(argv: string[]) {
+    return `${packageJson.name}@${packageJson.version}`
+  }
+}

app/logger.ts

@@ -0,0 +1,26 @@
+import chalk from 'chalk'
+
+
+function log(value: string) {
+  console.log(value)
+}
+function error(value: string) {
+  console.error(chalk.red(` ❌  ${value}`))
+}
+function success(value: string) {
+  console.log(chalk.green(` ✔️  ${value}`))
+}
+function warn(value: string) {
+  console.log(chalk.yellow(` ❗  ${value}`))
+}
+function info(value: string) {
+  console.log(chalk.blue(` 💁  ${value}`))
+}
+
+export const logger = {
+  log,
+  error,
+  success,
+  warn,
+  info
+}

app/renderer/App.tsx

@@ -0,0 +1,62 @@
+import * as React from "react";
+import useSWR from "swr";
+import NaphGraph, {
+  Connection,
+  Data,
+  NaphProvider,
+  Position,
+} from "./naph";
+const fetcher = (url: string) => fetch(url).then((res) => res.json());
+import ClimbingBoxLoader from "react-spinners/ClipLoader";
+
+
+export default () => {
+  function onNewConnector(_connector: Connection) {
+    // console.log("New Connector Added");
+  }
+
+  function onRemoveConnector(_connector: Connection) {
+    // console.log("Connector Removed");
+  }
+
+  function onNodeMove(_nid: number, _pos: Position) {
+    // console.log('end move : ' + nid, pos)
+  }
+
+  function onNodeStartMove(_nid: number) {
+    // console.log('start move : ' + nid)
+  }
+
+  function handleNodeSelect(_nid: number) {
+    // console.log('node selected : ' + nid)
+  }
+
+  function handleNodeDeselect(_nid: number) {
+    // console.log('node deselected : ' + nid)
+  }
+  const { data, error } = useSWR("http://localhost:3000/datamodel", fetcher);
+  const datamodel = data
+  React.useEffect(() => {
+    console.log(datamodel);
+  }, [datamodel]);
+  if(datamodel){
+    return (
+      <NaphProvider datamodel={datamodel}>
+        <NaphGraph
+          onNodeMove={(nid, pos) => onNodeMove(nid, pos)}
+          onNodeStartMove={(nid) => onNodeStartMove(nid)}
+          onNewConnector={(connector) => onNewConnector(connector)}
+          onRemoveConnector={(connector) => onRemoveConnector(connector)}
+          onNodeSelect={(nid) => {
+            handleNodeSelect(nid);
+          }}
+          onNodeDeselect={(nid) => {
+            handleNodeDeselect(nid);
+          }}
+        />
+      </NaphProvider>
+    );
+  } else {
+    return <ClimbingBoxLoader/>
+  }
+};