[WIP] Drag and Drop Editing and Sample Editor

.github/CODEOWNERS

@@ -1,5 +1,13 @@
 # Fallback
-* @adierkens
+* @KetanReddy 
 
 # Language
 language/ @KetanReddy @adierkens
+cli/ @KetanReddy @adierkens
+
+# XLR
+xlr/ @KetanReddy
+drag-and-drop/ @KetanReddy @adierkens
+
+# DevTools
+devtools/ @sugarmanz

WORKSPACE

@@ -5,15 +5,13 @@ workspace(
     },
 )
 
-load("@bazel_tools//tools/build_defs/repo:http.bzl", "http_archive")
+load("@bazel_tools//tools/build_defs/repo:git.bzl", "git_repository")
 
-http_archive(
-  name = "rules_player",
-  strip_prefix = "rules_player-0.10.0",
-  urls = ["https://github.com/player-ui/rules_player/archive/refs/tags/v0.10.0.tar.gz"],
-  sha256 = "73597c76a5ceb6c1f84735e0e086792e4695759c62c22f45e13041862c6b0c33"
+git_repository(
+    name = "rules_player",
+    remote = "https://github.com/player-ui/rules_player.git",
+    branch = "esm-native-builds"
 )
-
 load("@rules_player//:workspace.bzl", "deps")
 
 deps()

cli/src/commands/xlr/convert.ts

@@ -1,10 +1,14 @@
 import { Flags } from '@oclif/core';
 import path from 'path';
 import fs from 'fs';
+import ts from 'typescript';
 import chalk from 'chalk';
 import type { ExportTypes } from '@player-tools/xlr-sdk';
 import { XLRSDK } from '@player-tools/xlr-sdk';
 import logSymbols from 'log-symbols';
+import type { NamedType } from '@player-tools/xlr';
+import type { TopLevelDeclaration } from '@player-tools/xlr-utils';
+import { TSWriter } from '@player-tools/xlr-converters';
 import { BaseCommand } from '../../utils/base-command';
 
 const PlayerImportMap = new Map([
@@ -39,6 +43,8 @@ export default class XLRConvert extends BaseCommand {
     }),
   };
 
+  private tsWriter = new TSWriter();
+
   private async getOptions() {
     const { flags } = await this.parse(XLRConvert);
 
@@ -51,7 +57,7 @@ export default class XLRConvert extends BaseCommand {
     const language = flags.lang as ExportTypes;
 
     if (!language) {
-      throw new Error(`Need to specifiy lanauge to export to`);
+      throw new Error(`Need to specify language to export to`);
     }
 
     return {
@@ -61,6 +67,71 @@ export default class XLRConvert extends BaseCommand {
     };
   }
 
+  private exportToTypeScript(
+    typesToExport: NamedType[],
+    importMap: Map<string, string[]>
+  ): string {
+    const referencedImports: Set<string> = new Set();
+    const exportedTypes: Map<string, TopLevelDeclaration> = new Map();
+    const printer = ts.createPrinter({ newLine: ts.NewLineKind.LineFeed });
+
+    let resultFile = ts.createSourceFile(
+      'output.d.ts',
+      '',
+      ts.ScriptTarget.ES2017,
+      false, // setParentNodes
+      ts.ScriptKind.TS
+    );
+
+    typesToExport.forEach((typeNode) => {
+      const { type, referencedTypes, additionalTypes } =
+        this.tsWriter.convertNamedType(typeNode);
+      exportedTypes.set(typeNode.name, type);
+      additionalTypes?.forEach((additionalType, name) =>
+        exportedTypes.set(name, additionalType)
+      );
+      referencedTypes?.forEach((referencedType) =>
+        referencedImports.add(referencedType)
+      );
+    });
+
+    const typesToPrint: Array<string> = [];
+
+    exportedTypes.forEach((type) =>
+      typesToPrint.push(
+        printer.printNode(ts.EmitHint.Unspecified, type, resultFile)
+      )
+    );
+
+    importMap.forEach((imports, packageName) => {
+      const applicableImports = imports.filter((i) => referencedImports.has(i));
+      resultFile = ts.factory.updateSourceFile(resultFile, [
+        ts.factory.createImportDeclaration(
+          /* modifiers */ undefined,
+          ts.factory.createImportClause(
+            false,
+            undefined,
+            ts.factory.createNamedImports(
+              applicableImports.map((i) =>
+                ts.factory.createImportSpecifier(
+                  false,
+                  undefined,
+                  ts.factory.createIdentifier(i)
+                )
+              )
+            )
+          ),
+          ts.factory.createStringLiteral(packageName)
+        ),
+        ...resultFile.statements,
+      ]);
+    });
+
+    const headerText = printer.printFile(resultFile);
+    const nodeText = typesToPrint.join('\n');
+    return `${headerText}\n${nodeText}`;
+  }
+
   async run(): Promise<{
     /** the status code */
     exitCode: number;
@@ -73,8 +144,16 @@ export default class XLRConvert extends BaseCommand {
 
       const sdk = new XLRSDK();
       sdk.loadDefinitionsFromDisk(inputPath);
-      const files = sdk.exportRegistry(language, PlayerImportMap);
-      files.forEach(([filename, fileContents]) => {
+      const types = sdk.exportRegistry();
+      let writtenFiles;
+      if (language === 'TypeScript') {
+        const outputString = this.exportToTypeScript(types, PlayerImportMap);
+        writtenFiles = [['out.d.ts', outputString]];
+      } else {
+        throw new Error(`Unknown export format ${language}`);
+      }
+
+      writtenFiles.forEach(([filename, fileContents]) => {
         fs.writeFileSync(path.join(outputDir, filename), fileContents, {});
       });
     } catch (e: any) {

drag-and-drop/README.md

@@ -0,0 +1,4 @@
+# Drag and Drop
+
+This is a collection of utility libraries and reference integrations for constructing a drag-and-drop editor for Player content.
+

drag-and-drop/app/BUILD

@@ -0,0 +1,52 @@
+load("@npm//next:index.bzl", "next")
+load("@rules_player//javascript/next:next_build.bzl", "next_export")
+
+package(default_visibility = ["//visibility:public"])
+
+srcs = glob([
+  "public/**/*",
+  "pages/**/*",
+  "styles/*",
+  "components/**/*",
+  "plugins/*",
+  "utils/*",
+  "config/*",
+]) + [
+  "next.config.mjs",
+  "next-env.d.ts",
+  "tsconfig.json"
+]
+
+data = [
+  "//drag-and-drop/library:@player-tools/dnd-lib",
+  "@npm//@player-ui/types",
+  "@npm//typescript",
+  "@npm//@chakra-ui/react",
+  "@npm//@player-ui/reference-assets-plugin-react",
+  "@npm//@types/react",
+  "@npm//@types/node",
+  "@npm//timm",
+  "@npm//react-syntax-highlighter",
+  "@npm//react-docgen-typescript",
+  "@npm//react-files"
+]
+
+next_export(
+  name = "site",
+  data = data,
+  srcs = srcs,
+  env = {
+    "NODE_ENV": "production",
+    # Need this b/c next will pull from env directly 
+    # This just maps to a value we can stamp w/ later on
+    "NEXT_PUBLIC_GA_MEASUREMENT_ID": "NEXT_PUBLIC_GA_MEASUREMENT_ID",
+  },
+)
+
+next(
+  name = "start",
+  args = [
+    "dev", './drag-and-drop/app'
+  ],
+  data = data + srcs,
+)