uilint-react 0.1.18 → 0.1.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/README.md +49 -92
  2. package/dist/InspectionPanel-3ML64TAP.js +9 -0
  3. package/dist/LocatorOverlay-GTTWBRKH.js +11 -0
  4. package/dist/UILintToolbar-GAOYF7GY.js +9 -0
  5. package/dist/chunk-DAFFOBEU.js +521 -0
  6. package/dist/chunk-NOISZ3XP.js +1052 -0
  7. package/dist/chunk-PBC3J267.js +276 -0
  8. package/dist/chunk-VYCIUDU7.js +283 -0
  9. package/dist/index.d.ts +259 -20
  10. package/dist/index.js +82 -1085
  11. package/dist/node.js +1 -4
  12. package/package.json +2 -2
package/README.md CHANGED
@@ -4,7 +4,7 @@ React component for AI-powered UI consistency checking in running applications.
4
4
 
5
5
  ## Overview
6
6
 
7
- `uilint-react` provides React components and utilities for analyzing UI consistency at runtime and in tests. It includes a visual overlay for development and a JSDOM adapter for testing.
7
+ `uilint-react` provides the `UILintProvider` component that enables element inspection and LLM-powered code analysis in your React/Next.js application.
8
8
 
9
9
  ## Installation
10
10
 
@@ -12,127 +12,70 @@ React component for AI-powered UI consistency checking in running applications.
12
12
  npm install uilint-react uilint-core
13
13
  ```
14
14
 
15
+ Or use the CLI to install everything automatically:
16
+
17
+ ```bash
18
+ npx uilint-cli install
19
+ ```
20
+
15
21
  ## Usage in a Running App
16
22
 
17
- Wrap your app with the `<UILint>` component to get a visual overlay:
23
+ Wrap your app with the `UILintProvider` component:
18
24
 
19
25
  ### Next.js Setup
20
26
 
21
27
  ```tsx
22
28
  // app/layout.tsx
23
- import { UILint } from "uilint-react";
29
+ import { UILintProvider } from "uilint-react";
24
30
 
25
31
  export default function RootLayout({ children }) {
26
32
  return (
27
33
  <html>
28
34
  <body>
29
- <UILint
30
- enabled={process.env.NODE_ENV !== "production"}
31
- position="bottom-left"
32
- autoScan={false}
33
- >
35
+ <UILintProvider enabled={process.env.NODE_ENV !== "production"}>
34
36
  {children}
35
- </UILint>
37
+ </UILintProvider>
36
38
  </body>
37
39
  </html>
38
40
  );
39
41
  }
40
42
  ```
41
43
 
44
+ ### Features
45
+
46
+ - **Alt+Click** on any element to open the inspector sidebar
47
+ - View component source location and file path
48
+ - Navigate through the component stack (scroll while holding Alt)
49
+ - **Open in Cursor** - jump directly to the source file
50
+ - **Scan with LLM** - analyze the component for style issues
51
+ - **Copy fix prompt** - paste into Cursor agent for automatic fixes
52
+
42
53
  ### Props
43
54
 
44
- | Prop | Type | Default | Description |
45
- | ------------- | -------------------------------------------------------------- | ----------------------- | ------------------------------- |
46
- | `enabled` | `boolean` | `true` | Enable/disable UILint |
47
- | `position` | `'bottom-left' \| 'bottom-right' \| 'top-left' \| 'top-right'` | `'bottom-left'` | Overlay position |
48
- | `autoScan` | `boolean` | `false` | Automatically scan on page load |
49
- | `apiEndpoint` | `string` | `'/api/uilint/analyze'` | Custom API endpoint |
55
+ | Prop | Type | Default | Description |
56
+ | --------- | --------- | ------- | --------------------- |
57
+ | `enabled` | `boolean` | `true` | Enable/disable UILint |
50
58
 
51
59
  ### API Routes
52
60
 
53
- You'll need to add API routes for the React component:
61
+ The CLI installs these routes automatically, or you can add them manually:
54
62
 
55
63
  ```ts
56
64
  // app/api/uilint/analyze/route.ts
57
- import { NextRequest, NextResponse } from "next/server";
58
- import { OllamaClient, UILINT_DEFAULT_OLLAMA_MODEL } from "uilint-core";
59
-
60
- export async function POST(request: NextRequest) {
61
- const { styleSummary, styleGuide, generateGuide, model } =
62
- await request.json();
63
- const client = new OllamaClient({
64
- model: model || UILINT_DEFAULT_OLLAMA_MODEL,
65
- });
66
-
67
- if (generateGuide) {
68
- const styleGuideContent = await client.generateStyleGuide(styleSummary);
69
- return NextResponse.json({ styleGuide: styleGuideContent });
70
- } else {
71
- const result = await client.analyzeStyles(styleSummary, styleGuide);
72
- return NextResponse.json({ issues: result.issues });
73
- }
74
- }
75
- ```
76
-
77
- ```ts
78
- // app/api/uilint/styleguide/route.ts
79
- import { NextRequest, NextResponse } from "next/server";
80
- import {
81
- readStyleGuideFromProject,
82
- writeStyleGuide,
83
- styleGuideExists,
84
- getDefaultStyleGuidePath,
85
- } from "uilint-core/node";
86
-
87
- export async function GET() {
88
- const projectPath = process.cwd();
89
- if (!styleGuideExists(projectPath)) {
90
- return NextResponse.json({ exists: false, content: null });
91
- }
92
- const content = await readStyleGuideFromProject(projectPath);
93
- return NextResponse.json({ exists: true, content });
94
- }
65
+ // Handles LLM analysis of source code
95
66
 
96
- export async function POST(request: NextRequest) {
97
- const { content } = await request.json();
98
- const projectPath = process.cwd();
99
- const stylePath = getDefaultStyleGuidePath(projectPath);
100
- await writeStyleGuide(stylePath, content);
101
- return NextResponse.json({ success: true });
102
- }
67
+ // app/api/dev/source/route.ts
68
+ // Dev-only route for fetching source files
103
69
  ```
104
70
 
105
71
  ## Usage in Tests
106
72
 
107
73
  UILint can run in Vitest/Jest tests with JSDOM:
108
74
 
109
- ### Basic Test
110
-
111
- ```tsx
112
- import { render, screen } from "@testing-library/react";
113
- import { UILint } from "uilint-react";
114
- import { MyComponent } from "./MyComponent";
115
-
116
- test("MyComponent has consistent styles", async () => {
117
- render(
118
- <UILint enabled={true}>
119
- <MyComponent />
120
- </UILint>
121
- );
122
-
123
- expect(screen.getByRole("button")).toBeInTheDocument();
124
-
125
- // UILint automatically outputs warnings to console:
126
- // ⚠️ [UILint] Button uses #3B82F6 but style guide specifies #2563EB
127
- });
128
- ```
129
-
130
75
  ### Direct JSDOM Adapter
131
76
 
132
- For more control, use the `JSDOMAdapter`:
133
-
134
77
  ```tsx
135
- import { JSDOMAdapter, runUILintInTest } from "uilint-react";
78
+ import { JSDOMAdapter, runUILintInTest } from "uilint-react/node";
136
79
  import { render } from "@testing-library/react";
137
80
 
138
81
  test("detect style inconsistencies", async () => {
@@ -160,23 +103,37 @@ test("custom adapter usage", async () => {
160
103
 
161
104
  ## API
162
105
 
163
- ### UILint Component
106
+ ### UILintProvider
164
107
 
165
108
  ```tsx
166
- interface UILintProps {
109
+ interface UILintProviderProps {
167
110
  enabled?: boolean;
168
- position?: "bottom-left" | "bottom-right" | "top-left" | "top-right";
169
- autoScan?: boolean;
170
- apiEndpoint?: string;
171
111
  children: React.ReactNode;
172
112
  }
173
113
 
174
- function UILint(props: UILintProps): JSX.Element;
114
+ function UILintProvider(props: UILintProviderProps): JSX.Element;
115
+ ```
116
+
117
+ ### useUILintContext
118
+
119
+ ```tsx
120
+ function useUILintContext(): UILintContextValue;
121
+
122
+ interface UILintContextValue {
123
+ settings: UILintSettings;
124
+ updateSettings: (settings: Partial<UILintSettings>) => void;
125
+ altKeyHeld: boolean;
126
+ locatorTarget: LocatorTarget | null;
127
+ inspectedElement: InspectedElement | null;
128
+ setInspectedElement: (element: InspectedElement | null) => void;
129
+ // ... additional context values
130
+ }
175
131
  ```
176
132
 
177
- ### JSDOM Adapter
133
+ ### JSDOM Adapter (Node.js)
178
134
 
179
135
  ```typescript
136
+ // Import from "uilint-react/node" for test environments
180
137
  class JSDOMAdapter {
181
138
  constructor(styleGuidePath?: string);
182
139
 
package/dist/InspectionPanel-3ML64TAP.js ADDED
@@ -0,0 +1,9 @@
1
+ "use client";
2
+ "use client";
3
+ import {
4
+ InspectionPanel
5
+ } from "./chunk-NOISZ3XP.js";
6
+ import "./chunk-DAFFOBEU.js";
7
+ export {
8
+ InspectionPanel
9
+ };
package/dist/LocatorOverlay-GTTWBRKH.js ADDED
@@ -0,0 +1,11 @@
1
+ "use client";
2
+ "use client";
3
+ import {
4
+ InspectedElementHighlight,
5
+ LocatorOverlay
6
+ } from "./chunk-VYCIUDU7.js";
7
+ import "./chunk-DAFFOBEU.js";
8
+ export {
9
+ InspectedElementHighlight,
10
+ LocatorOverlay
11
+ };
package/dist/UILintToolbar-GAOYF7GY.js ADDED
@@ -0,0 +1,9 @@
1
+ "use client";
2
+ "use client";
3
+ import {
4
+ UILintToolbar
5
+ } from "./chunk-PBC3J267.js";
6
+ import "./chunk-DAFFOBEU.js";
7
+ export {
8
+ UILintToolbar
9
+ };