autoui-react 0.1.0 → 0.1.1-alpha

package/README.md

@@ -1,4 +1,4 @@
-# @autoui/react
+# autoui-react
 
 A React + TypeScript runtime that **generates goal-oriented UIs in real-time** using an LLM + your data schema.
 
@@ -27,13 +27,13 @@ This library implements this approach, using LLMs to interpret a goal and schema
 ## Installation
 
 ```bash
-npm install @autoui/react
+npm install autoui-react
 ```
 
 ## Quick Start
 
 ```jsx
-import { AutoUI } from '@autoui/react';
+import { AutoUI } from 'autoui-react';
 import { emailsTable, usersTable } from './schema';
 
 function App() {
@@ -124,7 +124,7 @@ AutoUI supports different ways to provide your data schema:
 #### 2. Using Drizzle Adapter
 
 ```jsx
-import { AutoUI } from '@autoui/react';
+import { AutoUI } from 'autoui-react';
 import { db } from './db';  // Your Drizzle instance
 import { users, posts } from './schema';  // Drizzle schema
 
@@ -177,7 +177,7 @@ function MyApp() {
 AutoUI provides hooks into its internal planning and rendering process through system events. You can subscribe to these events to monitor or extend the functionality.
 
 ```jsx
-import { AutoUI, SystemEventType } from '@autoui/react';
+import { AutoUI, SystemEventType } from 'autoui-react';
 
 function MyApp() {
   return (
@@ -241,4 +241,50 @@ MIT
 
 ## Contributing
 
-Contributions are welcome! Please feel free to submit a Pull Request.
+Contributions are welcome! Please feel free to submit a Pull Request.
+## Component Adapters
+
+### shadcn/ui (Default)
+
+This library uses [shadcn/ui](https://ui.shadcn.com/) components by default. To set up these components in your project:
+
+```bash
+# Run the setup script to install required shadcn components
+npm run setup-shadcn
+```
+
+This will:
+1. Install Tailwind CSS if not already installed
+2. Set up the necessary shadcn/ui components
+3. Configure your project to use them
+
+After setup, make sure to import the CSS in your application:
+
+```jsx
+// In your main entry file (e.g., main.tsx, index.tsx)
+import "./src/tailwind.css";
+```
+
+### Custom Component Adapters
+
+You can create custom adapters for other component libraries by implementing an adapter module:
+
+```jsx
+// Create a custom adapter (e.g., for Material UI)
+import { Button, Table, Card } from '@mui/material';
+
+const materialAdapter = {
+  Button: (props) => <Button {...props} />,
+  Table: (props) => <Table {...props} />,
+  // ...
+};
+
+// Use your custom adapter
+<AutoUI 
+  schema={mySchema}
+  goal="Create a user dashboard"
+  componentAdapter="material" // Not yet supported in v0.1
+/>
+```
+
+Support for custom component adapters is planned for future releases.

package/dist/index.css

@@ -53,4 +53,14 @@
 .autoui-error-message {
   font-size: 0.875rem;
 }
+.autoui-mock-container {
+  color: inherit;
+  width: 100%;
+  color: #1f2937;
+}
+@media (prefers-color-scheme: dark) {
+  .autoui-mock-container {
+    color: #f3f4f6;
+  }
+}
 /*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/styles/autoui.css"],"sourcesContent":["/* AutoUI Component Styles */\n\n.autoui-root {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n}\n\n/* Loading states */\n.autoui-loading {\n  width: 100%;\n  height: 100%;\n}\n\n.autoui-shimmer-container {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  padding: 1rem;\n}\n\n.autoui-shimmer-header {\n  height: 2.5rem;\n  background-color: #e5e7eb;\n  border-radius: 0.25rem;\n  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n.autoui-shimmer-content {\n  height: 16rem;\n  background-color: #e5e7eb;\n  border-radius: 0.25rem;\n  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n@keyframes pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n\n/* Content */\n.autoui-content {\n  flex: 1;\n  width: 100%;\n}\n\n/* Error states */\n.autoui-error {\n  padding: 1rem;\n  border: 1px solid #fca5a5;\n  background-color: #fee2e2;\n  color: #b91c1c;\n  border-radius: 0.25rem;\n  margin-top: 1rem;\n}\n\n.autoui-error-title {\n  font-weight: 600;\n}\n\n.autoui-error-message {\n  font-size: 0.875rem;\n} "],"mappings":";AAEA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,UAAQ;AACR,SAAO;AACT;AAGA,CAAC;AACC,SAAO;AACP,UAAQ;AACV;AAEA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,OAAK;AACL,WAAS;AACX;AAEA,CAAC;AACC,UAAQ;AACR,oBAAkB;AAClB,iBAAe;AACf,aAAW,MAAM,GAAG,aAAa,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG;AACnD;AAEA,CAAC;AACC,UAAQ;AACR,oBAAkB;AAClB,iBAAe;AACf,aAAW,MAAM,GAAG,aAAa,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG;AACnD;AAEA,WAVa;AAWX;AACE,aAAS;AACX;AACA;AACE,aAAS;AACX;AACF;AAGA,CAAC;AACC,QAAM;AACN,SAAO;AACT;AAGA,CAAC;AACC,WAAS;AACT,UAAQ,IAAI,MAAM;AAClB,oBAAkB;AAClB,SAAO;AACP,iBAAe;AACf,cAAY;AACd;AAEA,CAAC;AACC,eAAa;AACf;AAEA,CAAC;AACC,aAAW;AACb;","names":[]}
+{"version":3,"sources":["../src/styles/autoui.css"],"sourcesContent":["/* AutoUI Component Styles */\n\n.autoui-root {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n}\n\n/* Loading states */\n.autoui-loading {\n  width: 100%;\n  height: 100%;\n}\n\n.autoui-shimmer-container {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  padding: 1rem;\n}\n\n.autoui-shimmer-header {\n  height: 2.5rem;\n  background-color: #e5e7eb;\n  border-radius: 0.25rem;\n  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n.autoui-shimmer-content {\n  height: 16rem;\n  background-color: #e5e7eb;\n  border-radius: 0.25rem;\n  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n@keyframes pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n\n/* Content */\n.autoui-content {\n  flex: 1;\n  width: 100%;\n}\n\n/* Error states */\n.autoui-error {\n  padding: 1rem;\n  border: 1px solid #fca5a5;\n  background-color: #fee2e2;\n  color: #b91c1c;\n  border-radius: 0.25rem;\n  margin-top: 1rem;\n}\n\n.autoui-error-title {\n  font-weight: 600;\n}\n\n.autoui-error-message {\n  font-size: 0.875rem;\n}\n\n/* Style for the mock Container component in shadcn.tsx */\n.autoui-mock-container {\n  color: inherit;\n  width: 100%;\n  /* text-gray-800 */\n  color: #1f2937; \n}\n\n/* Dark mode styling for the mock Container */\n@media (prefers-color-scheme: dark) {\n  .autoui-mock-container {\n    /* dark:text-gray-100 */\n    color: #f3f4f6;\n  }\n} "],"mappings":";AAEA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,UAAQ;AACR,SAAO;AACT;AAGA,CAAC;AACC,SAAO;AACP,UAAQ;AACV;AAEA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,OAAK;AACL,WAAS;AACX;AAEA,CAAC;AACC,UAAQ;AACR,oBAAkB;AAClB,iBAAe;AACf,aAAW,MAAM,GAAG,aAAa,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG;AACnD;AAEA,CAAC;AACC,UAAQ;AACR,oBAAkB;AAClB,iBAAe;AACf,aAAW,MAAM,GAAG,aAAa,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG;AACnD;AAEA,WAVa;AAWX;AACE,aAAS;AACX;AACA;AACE,aAAS;AACX;AACF;AAGA,CAAC;AACC,QAAM;AACN,SAAO;AACT;AAGA,CAAC;AACC,WAAS;AACT,UAAQ,IAAI,MAAM;AAClB,oBAAkB;AAClB,SAAO;AACP,iBAAe;AACf,cAAY;AACd;AAEA,CAAC;AACC,eAAa;AACf;AAEA,CAAC;AACC,aAAW;AACb;AAGA,CAAC;AACC,SAAO;AACP,SAAO;AAEP,SAAO;AACT;AAGA,OAAO,CAAC,oBAAoB,EAAE;AAC5B,GATD;AAWG,WAAO;AACT;AACF;","names":[]}