@aganzefelicite/responsekit-react 0.1.0

package/dist/styles.css

@@ -0,0 +1,108 @@
+/**
+ * Optional default styles for @responsekit/react. Import once in your app:
+ *   import "@responsekit/react/styles.css";
+ * All selectors are namespaced under `.rk-*` and use CSS variables you can override.
+ */
+.rk-response {
+  --rk-fg: #1a1a1a;
+  --rk-muted: #6b7280;
+  --rk-border: #e5e7eb;
+  --rk-bg: #ffffff;
+  --rk-accent: #2563eb;
+  --rk-radius: 10px;
+  --rk-info: #2563eb;
+  --rk-success: #16a34a;
+  --rk-warning: #d97706;
+  --rk-critical: #dc2626;
+  color: var(--rk-fg);
+  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+  line-height: 1.5;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.rk-response-title { font-size: 1.25rem; font-weight: 650; margin: 0; }
+.rk-blocks { display: flex; flex-direction: column; gap: 16px; }
+.rk-block-title { font-size: 1rem; font-weight: 600; margin: 0 0 8px; }
+
+.rk-block {
+  border: 1px solid var(--rk-border);
+  border-radius: var(--rk-radius);
+  padding: 16px;
+  background: var(--rk-bg);
+}
+
+/* KPI */
+.rk-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
+.rk-kpi-item { border: 1px solid var(--rk-border); border-radius: 8px; padding: 12px; }
+.rk-kpi-label { color: var(--rk-muted); font-size: 0.8rem; }
+.rk-kpi-value { font-size: 1.5rem; font-weight: 700; }
+.rk-kpi-trend { font-size: 0.8rem; display: flex; gap: 4px; align-items: center; }
+.rk-kpi-trend-up { color: var(--rk-success); }
+.rk-kpi-trend-down { color: var(--rk-critical); }
+.rk-kpi-trend-stable { color: var(--rk-muted); }
+
+/* Table */
+.rk-block-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
+.rk-table-scroll { overflow-x: auto; }
+.rk-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
+.rk-table th, .rk-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rk-border); }
+.rk-table th { color: var(--rk-muted); font-weight: 600; }
+
+/* Insight */
+.rk-block-insight { display: flex; gap: 12px; border-left-width: 4px; }
+.rk-severity-info { border-left-color: var(--rk-info); }
+.rk-severity-success { border-left-color: var(--rk-success); }
+.rk-severity-warning { border-left-color: var(--rk-warning); }
+.rk-severity-critical { border-left-color: var(--rk-critical); }
+.rk-insight-icon { font-weight: 700; }
+.rk-insight-title { font-weight: 600; }
+.rk-insight-desc { color: var(--rk-muted); }
+
+/* Recommendation */
+.rk-recommendation-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
+.rk-recommendation-title { font-weight: 600; }
+.rk-recommendation-desc { color: var(--rk-muted); }
+
+/* Filter */
+.rk-filter-row { display: flex; flex-wrap: wrap; gap: 12px; }
+.rk-filter { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; }
+.rk-filter-label { color: var(--rk-muted); }
+.rk-filter-range { display: flex; gap: 6px; }
+
+/* Chart */
+.rk-chart { width: 100%; }
+.rk-chart-placeholder, .rk-chart-fallback { border: 1px dashed var(--rk-border); border-radius: 8px; padding: 12px; }
+.rk-chart-badge { font-size: 0.8rem; color: var(--rk-muted); margin-bottom: 8px; }
+.rk-chart-note { opacity: 0.7; }
+.rk-chart-more { color: var(--rk-muted); font-size: 0.8rem; margin: 6px 0 0; }
+
+/* Fallback / error */
+.rk-block-fallback { border-style: dashed; color: var(--rk-muted); }
+.rk-fallback-raw pre { overflow: auto; font-size: 0.8rem; }
+.rk-error { display: flex; gap: 8px; align-items: center; color: var(--rk-critical); border-color: var(--rk-critical); }
+
+/* Actions */
+.rk-action {
+  border: 1px solid var(--rk-border);
+  background: var(--rk-bg);
+  border-radius: 6px;
+  padding: 4px 10px;
+  font-size: 0.8rem;
+  cursor: pointer;
+}
+.rk-action:hover { border-color: var(--rk-accent); color: var(--rk-accent); }
+
+/* Meta footer */
+.rk-meta { display: flex; gap: 12px; align-items: center; color: var(--rk-muted); font-size: 0.8rem; }
+
+/* Loading */
+.rk-loading { display: flex; gap: 8px; align-items: center; color: var(--rk-muted); padding: 8px 0; }
+.rk-spinner {
+  width: 14px; height: 14px; border-radius: 50%;
+  border: 2px solid var(--rk-border); border-top-color: var(--rk-accent);
+  animation: rk-spin 0.8s linear infinite;
+}
+@keyframes rk-spin { to { transform: rotate(360deg); } }
+.rk-empty { color: var(--rk-muted); font-size: 0.85rem; }

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@aganzefelicite/responsekit-react",
+  "version": "0.1.0",
+  "description": "Render your AI backend's responses as interactive React UI: AiRenderer, AiStream, useChat.",
+  "license": "MIT",
+  "author": "aganzefelicite",
+  "keywords": ["react", "ai", "sse", "streaming", "renderer", "analytics", "charts"],
+  "type": "module",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": ["dist"],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "react-markdown": "^9.0.1",
+    "recharts": "^2.12.7",
+    "remark-gfm": "^4.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@responsekit/schema": "workspace:*",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "jsdom": "^25.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsup": "^8.2.4",
+    "typescript": "^5.5.4",
+    "vitest": "^2.0.5"
+  }
+}