Integrated tailwind css

AGENTS.md

@@ -0,0 +1,62 @@
+# OpenCode Agent Instructions for TaylorDB Blank Template
+
+This document provides instructions for AI agents on how to use this blank template to build custom UIs for TaylorDB.
+
+## Understanding the TaylorDB Blank Template
+
+This is a blank template designed for building custom user interfaces on top of a TaylorDB database. TaylorDB is a no-code application that allows users to build applications using a table-based data visualization.
+
+The purpose of this template is to overcome the limitations of table-only views by enabling the creation of custom components, forms, and other UI elements. The goal is to have an AI agent (like you) build and integrate a custom UI with a user's TaylorDB database automatically.
+
+## AI Development Workflow
+
+Your primary task is to build a custom UI that interacts with the user's TaylorDB data. Follow these steps carefully:
+
+### 1. Understand the Database Schema
+
+Upon initialization, this template includes a `/src/lib` directory containing two critical files:
+
+-   `taylordb.client.ts`: This file contains the pre-configured TaylorDB client query builder instance. You will use this client to interact with the database.
+-   `taylordb.types.ts`: This file contains the TypeScript types generated from the user's TaylorDB database schema.
+
+**Your first action must be to read both of these files.** This will give you a complete understanding of the database structure, tables, and data types you will be working with.
+
+### 2. Integrate Directly with TaylorDB
+
+You must use the provided TaylorDB client for all data operations. **Do not use mock data under any circumstances.** The UI you build should be fully functional and connected to the live database from the start.
+
+### 3. Type Checking and Validation
+
+The TaylorDB query builder is strongly typed. While writing code, you may encounter TypeScript errors related to your queries. To ensure your queries and data manipulations are type-safe and correct, you must run the build command:
+
+```bash
+pnpm build
+```
+
+This command will compile the TypeScript code and report any type errors. You should use this to validate your work.
+
+### 4. Development Server
+
+The development server is already running. You do not need to start it. Focus on building the UI components and integrating them with the database.
+
+---
+
+## Build, Lint, and Test Commands
+- **Start development**: `pnpm dev` or `npm run dev`
+- **Build for production**: `pnpm build`
+- **Lint all files**: `pnpm lint`
+- **Tests**: _No test framework/config found; add [Vitest](https://vitest.dev) or [Jest](https://jestjs.io) before writing tests._
+- **Run a single test**: _Not configured until you add a test runner._
+
+## Code Style Guidelines
+- Strictly type everything in TypeScript. **Never use `any`.**
+- Use [ESLint](https://eslint.org/) with recommended JS, TypeScript, and React Hooks rules. Fix all lint errors.
+- Use ES modules for imports (`import ... from ...`). Group external first, then internal.
+- Naming: camelCase for variables/functions, PascalCase for components/types, UPPER_CASE for constants.
+- Components: use function components, arrow function style preferred.
+- Handle errors explicitly. **Never ignore TypeScript or lint errors.**
+- Formatting: 2-space indent, single quotes, semicolons required.
+- Remove unused code/comments. Comments must be concise and relevant.
+- Use TaylorDB query builder with generated types from `src/lib/taylordb.types.ts`; **never modify generated schema files.**
+
+_No Cursor or Copilot rules found. If added, include their guidelines here._

QUERY_BUILDER.md

@@ -1,20 +1,3 @@
-You are a useful agent, who helps non-develop users to build their app of choice. You are a helper agent for system like TaylorDb.
-
-Requirements on writing code:
-1. Always create correct types for data
-2. Don't use `any` in your code, make everything typesafe
-
-TaylorDb is a no code database builder which helps to build the database for any businesses just like Airtable.
-With TaylorDb the only problem is that it can only visualize data by showing tables, but sometimes users want more then that.
-
-You are a helper agent who can know about the structure of the database and can use the query builder which TaylorDb offers to interact with the database.
-You are not allowed to update thise database schema files, because they are generated by the system.
-Here are basic examples on how to use the query builder.
-
-<div align="center">
-  <img src="docs/media/logo.png" width="200" alt="TaylorDB Logo" />
-</div>
-
 # TaylorDB Query Builder
 
 The official TypeScript query builder for TaylorDB. It provides a type-safe, fluent, and intuitive API for building and executing queries against your TaylorDB database.

opencode.json

@@ -0,0 +1,25 @@
+{
+    "$schema": "https://opencode.ai/config.json",
+    "tools": {
+        "read": true,
+        "bash": true,
+        "edit": true,
+        "write": true,
+        "grep": true,
+        "glob": true,
+        "list": true,
+        "patch": true,
+        "todowrite": true,
+        "todoread": true,
+        "webfetch": true
+    },
+    "permissions": {
+        "bash": "ask",
+        "doom_loop": "ask"
+    },
+    "instructions": [
+        "src/lib/taylordb.types.ts",
+        "src/lib/taylordb-client.ts",
+        "QUERY_BUILDER.md"
+    ]
+}

package.json

@@ -20,10 +20,14 @@
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
     "@vitejs/plugin-react": "^5.1.0",
+    "autoprefixer": "^10.4.22",
     "eslint": "^9.39.1",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "recharts": "^3.5.0",
+    "tailwindcss": "3",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.3",
     "vite": "^7.2.2"

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/main.tsx

@@ -1,6 +1,7 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App.tsx";
+import "./index.css";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>

tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}