@oferitz/graphiq 0.1.0

package/package.json

@@ -0,0 +1,100 @@
+
+{
+  "name": "@oferitz/graphiq",
+  "version": "0.1.0",
+  "description": "A modern, lightweight GraphQL IDE component for React",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": ["*.css"],
+  "main": "./dist/graphiq.cjs",
+  "module": "./dist/graphiq.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/graphiq.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/graphiq.cjs"
+      }
+    },
+    "./style.css": "./dist/style.css",
+    "./styles": "./src/styles/base.css"
+  },
+  "files": [
+    "dist",
+    "src/styles",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "dev": "vite --config vite.playground.config.ts",
+    "build": "vite build && tsc --project tsconfig.build.json --emitDeclarationOnly --outDir dist",
+    "preview": "vite preview --config vite.playground.config.ts",
+    "lint": "oxlint src/",
+    "format": "oxlint --fix src/",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "e2e": "playwright test",
+    "prepublishOnly": "bun run build",
+    "changeset": "changeset",
+    "release": "changeset publish"
+  },
+  "peerDependencies": {
+    "graphql": "^15.5.0 || ^16.0.0 || ^17.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/state": "^6.6.0",
+    "@codemirror/view": "^6.40.0",
+    "@phosphor-icons/react": "^2.1.10",
+    "clsx": "^2.1.1",
+    "cm6-graphql": "^0.2.1",
+    "codemirror": "^6.0.2",
+    "tailwind-merge": "^3.5.0",
+    "tailwind-variants": "^3.2.2",
+    "zustand": "^5.0.12"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.30.0",
+    "@playwright/test": "^1.58.2",
+    "@tailwindcss/vite": "^4.2.2",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "graphql": "^16.13.2",
+    "graphql-http": "^1.22.4",
+    "jsdom": "^29.0.1",
+    "oxlint": "^1.57.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "tailwindcss": "^4.2.2",
+    "typescript": "^5.9.3",
+    "vite": "^8.0.3",
+    "vitest": "^4.1.2"
+  },
+  "keywords": [
+    "graphql",
+    "graphiql",
+    "ide",
+    "react",
+    "codemirror",
+    "developer-tools"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/oferitz/graphiq.git"
+  },
+  "homepage": "https://github.com/oferitz/graphiq",
+  "bugs": {
+    "url": "https://github.com/oferitz/graphiq/issues"
+  }
+}

package/src/styles/animations.css

@@ -0,0 +1,35 @@
+@keyframes gq-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.7;
+  }
+}
+
+@keyframes gq-shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes gq-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes gq-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/styles/base.css

@@ -0,0 +1,193 @@
+@import "tailwindcss";
+
+/* Ensure Tailwind scans all component files for classes */
+@source "../";
+
+/*
+ * GraphiQ Design Tokens — "Surgical Precision"
+ * Ultra-compact, near-monochrome, one teal accent.
+ * Every pixel earns its place.
+ */
+
+:root {
+  /* === Background Layers (zinc-black scale) === */
+  --gq-bg: #09090b;
+  --gq-bg-secondary: #0f0f12;
+  --gq-bg-tertiary: #18181b;
+  --gq-bg-elevated: #1e1e23;
+
+  /* === Text Hierarchy === */
+  --gq-text: #fafafa;
+  --gq-text-secondary: #a1a1aa;
+  --gq-text-tertiary: #52525b;
+
+  /* === Accent — muted teal, not neon === */
+  --gq-accent: #2dd4bf;
+  --gq-accent-hover: #5eead4;
+  --gq-accent-muted: #134e4a;
+  --gq-accent-subtle: #0d3330;
+
+  /* === Semantic States === */
+  --gq-success: #34d399;
+  --gq-error: #f87171;
+  --gq-warning: #fbbf24;
+  --gq-info: #60a5fa;
+
+  /* === Borders (barely visible) === */
+  --gq-border: #1e1e23;
+  --gq-border-active: #3f3f46;
+  --gq-separator: #18181b;
+
+  /* === Typography === */
+  --gq-font-display: "DM Sans", system-ui, sans-serif;
+  --gq-font-sans: "DM Sans", system-ui, sans-serif;
+  --gq-font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
+
+  /* === Spacing & Sizing (compact) === */
+  --gq-panel-gap: 1px;
+  --gq-radius: 4px;
+  --gq-toolbar-height: 36px;
+  --gq-sidebar-width: 40px;
+  --gq-editor-font-size: 13px;
+  --gq-editor-line-height: 1.6;
+
+  /* === Syntax Highlighting (muted, cohesive) === */
+  --gq-syn-keyword: #2dd4bf;
+  --gq-syn-type: #60a5fa;
+  --gq-syn-field: #d4d4d8;
+  --gq-syn-string: #a3e635;
+  --gq-syn-number: #fbbf24;
+  --gq-syn-comment: #3f3f46;
+  --gq-syn-directive: #f472b6;
+  --gq-syn-variable: #c084fc;
+  --gq-syn-punctuation: #52525b;
+
+  /* === Animation === */
+  --gq-ease: cubic-bezier(0.16, 1, 0.3, 1);
+  --gq-duration-fast: 100ms;
+  --gq-duration-normal: 150ms;
+  --gq-duration-slow: 250ms;
+}
+
+/* Base reset for graphiq root */
+.gq-root {
+  color-scheme: dark;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* CodeMirror theme — surgical dark */
+.gq-root .cm-editor {
+  height: 100%;
+  background: var(--gq-bg-secondary);
+  color: var(--gq-text);
+  font-size: var(--gq-editor-font-size);
+}
+
+.gq-root .cm-editor .cm-scroller {
+  font-family: var(--gq-font-mono);
+  line-height: var(--gq-editor-line-height);
+}
+
+.gq-root .cm-editor .cm-gutters {
+  background: var(--gq-bg-secondary);
+  border-right: 1px solid var(--gq-border);
+  color: var(--gq-text-tertiary);
+  font-size: 11px;
+  min-width: 36px;
+}
+
+.gq-root .cm-editor .cm-activeLineGutter {
+  background: transparent;
+  color: var(--gq-text-secondary);
+}
+
+.gq-root .cm-editor .cm-activeLine {
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.gq-root .cm-editor .cm-cursor {
+  border-left: 1.5px solid var(--gq-accent);
+}
+
+.gq-root .cm-editor .cm-selectionBackground {
+  background: var(--gq-accent-subtle) !important;
+}
+
+.gq-root .cm-editor.cm-focused .cm-selectionBackground {
+  background: var(--gq-accent-muted) !important;
+}
+
+.gq-root .cm-editor .cm-tooltip {
+  background: var(--gq-bg-elevated);
+  border: 1px solid var(--gq-border-active);
+  border-radius: var(--gq-radius);
+  color: var(--gq-text);
+  font-size: 12px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+}
+
+.gq-root .cm-editor .cm-tooltip-autocomplete ul li[aria-selected] {
+  background: var(--gq-accent-subtle);
+  color: var(--gq-accent);
+}
+
+.gq-root .cm-editor .cm-content {
+  caret-color: var(--gq-accent);
+  padding: 8px 0;
+}
+
+.gq-root .cm-editor .cm-line {
+  padding: 0 8px;
+}
+
+/* Scrollbar styling */
+.gq-root ::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.gq-root ::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.gq-root ::-webkit-scrollbar-thumb {
+  background: var(--gq-border-active);
+  border-radius: 3px;
+}
+
+.gq-root ::-webkit-scrollbar-thumb:hover {
+  background: var(--gq-text-tertiary);
+}
+
+/* Register tokens with Tailwind v4 */
+@theme inline {
+  --color-gq-bg: var(--gq-bg);
+  --color-gq-bg-secondary: var(--gq-bg-secondary);
+  --color-gq-bg-tertiary: var(--gq-bg-tertiary);
+  --color-gq-bg-elevated: var(--gq-bg-elevated);
+
+  --color-gq-text: var(--gq-text);
+  --color-gq-text-secondary: var(--gq-text-secondary);
+  --color-gq-text-tertiary: var(--gq-text-tertiary);
+
+  --color-gq-accent: var(--gq-accent);
+  --color-gq-accent-hover: var(--gq-accent-hover);
+  --color-gq-accent-muted: var(--gq-accent-muted);
+  --color-gq-accent-subtle: var(--gq-accent-subtle);
+
+  --color-gq-success: var(--gq-success);
+  --color-gq-error: var(--gq-error);
+  --color-gq-warning: var(--gq-warning);
+  --color-gq-info: var(--gq-info);
+
+  --color-gq-border: var(--gq-border);
+  --color-gq-border-active: var(--gq-border-active);
+  --color-gq-separator: var(--gq-separator);
+
+  --font-gq-display: var(--gq-font-display);
+  --font-gq-sans: var(--gq-font-sans);
+  --font-gq-mono: var(--gq-font-mono);
+
+  --radius-gq: var(--gq-radius);
+}

package/src/styles/codemirror-theme.ts

@@ -0,0 +1,46 @@
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import { tags } from "@lezer/highlight";
+
+/**
+ * GraphiQ syntax highlighting theme for CodeMirror 6.
+ * Uses CSS variables so consumers can customize colors.
+ */
+export const graphiqHighlightStyle = HighlightStyle.define([
+  // Keywords: query, mutation, subscription, fragment, on
+  { tag: tags.keyword, color: "var(--gq-syn-keyword)" },
+  { tag: tags.definitionKeyword, color: "var(--gq-syn-keyword)", fontWeight: "500" },
+
+  // Field names
+  { tag: tags.propertyName, color: "var(--gq-syn-field)" },
+
+  // Types / atoms
+  { tag: tags.atom, color: "var(--gq-syn-type)" },
+  { tag: [tags.special(tags.name)], color: "var(--gq-syn-type)" },
+
+  // Strings
+  { tag: tags.string, color: "var(--gq-syn-string)" },
+
+  // Numbers
+  { tag: [tags.integer, tags.float], color: "var(--gq-syn-number)" },
+
+  // Booleans / null
+  { tag: tags.bool, color: "var(--gq-syn-number)" },
+  { tag: tags.null, color: "var(--gq-text-tertiary)" },
+
+  // Comments
+  { tag: tags.lineComment, color: "var(--gq-syn-comment)", fontStyle: "italic" },
+
+  // Variables ($name)
+  { tag: tags.variableName, color: "var(--gq-syn-variable)" },
+
+  // Directives (@skip, @include)
+  { tag: tags.modifier, color: "var(--gq-syn-directive)" },
+
+  // Arguments
+  { tag: tags.attributeName, color: "var(--gq-syn-variable)" },
+
+  // Punctuation
+  { tag: [tags.paren, tags.brace, tags.separator, tags.punctuation], color: "var(--gq-syn-punctuation)" },
+]);
+
+export const graphiqSyntaxHighlighting = syntaxHighlighting(graphiqHighlightStyle);

package/src/styles/variants.ts

@@ -0,0 +1,25 @@
+import { tv } from "tailwind-variants";
+
+export const graphiqVariants = tv({
+  slots: {
+    root: "gq-root flex h-full w-full bg-gq-bg text-gq-text font-gq-sans text-[13px] overflow-hidden",
+    sidebar:
+      "gq-sidebar flex flex-col items-center gap-0.5 py-1.5 bg-gq-bg border-r border-gq-border",
+    sidebarPanel:
+      "gq-sidebar-panel bg-gq-bg border-r border-gq-border overflow-y-auto",
+    editor: "gq-editor flex flex-col flex-1 min-w-0 bg-gq-bg-secondary",
+    toolbar:
+      "gq-toolbar flex items-center gap-1.5 px-2 bg-gq-bg border-b border-gq-border",
+    response:
+      "gq-response flex flex-col flex-1 min-w-0 bg-gq-bg-secondary",
+    executeButton:
+      "gq-execute inline-flex items-center justify-center gap-1 px-2.5 py-1 rounded-gq bg-gq-accent text-gq-bg font-gq-sans text-xs font-medium transition-all hover:bg-gq-accent-hover active:scale-[0.97]",
+    tabs: "gq-tabs flex items-center gap-0 border-b border-gq-border bg-gq-bg",
+    variablesEditor:
+      "gq-variables flex flex-col bg-gq-bg-secondary",
+    headersEditor:
+      "gq-headers flex flex-col bg-gq-bg-secondary",
+  },
+});
+
+export type GraphiQVariantSlots = keyof ReturnType<typeof graphiqVariants>;