@texturehq/edges 0.0.15 → 0.0.19

package/scripts/setup-cursor-rules.sh

@@ -0,0 +1,95 @@
+// scripts/setup-cursor-rules.js
+import fs from 'fs';
+import path from 'path';
+
+const setupCursorRules = () => {
+  const cwd = process.cwd();
+  
+  // Don't run in the package itself
+  if (cwd.includes('mono/packages/edges')) {
+    return;
+  }
+  
+  const templatesDir = path.join(__dirname, '../templates/cursor-rules');
+  const cursorDir = path.join(cwd, '.cursor');
+  const rulesDir = path.join(cursorDir, 'rules');
+  
+  // Create directories if they don't exist
+  if (!fs.existsSync(cursorDir)) {
+    fs.mkdirSync(cursorDir);
+  }
+  if (!fs.existsSync(rulesDir)) {
+    fs.mkdirSync(rulesDir);
+  }
+  
+  // Check if templates directory exists
+  if (!fs.existsSync(templatesDir)) {
+    console.log('⚠️  No cursor rules templates found');
+    return;
+  }
+  
+  // Copy all .mdc files from templates to the project's cursor rules
+  const templateFiles = fs.readdirSync(templatesDir).filter(file => file.endsWith('.mdc'));
+  
+  if (templateFiles.length === 0) {
+    console.log('⚠️  No .mdc files found in templates directory');
+    return;
+  }
+  
+  let copiedCount = 0;
+  
+  templateFiles.forEach(file => {
+    const templatePath = path.join(templatesDir, file);
+    const targetPath = path.join(rulesDir, file);
+    
+    // Only copy if the target doesn't already exist
+    if (!fs.existsSync(targetPath)) {
+      fs.copyFileSync(templatePath, targetPath);
+      copiedCount++;
+      console.log(`✅ Added .cursor/rules/${file}`);
+    } else {
+      console.log(`⏭️  Skipped .cursor/rules/${file} (already exists)`);
+    }
+  });
+  
+  if (copiedCount > 0) {
+    console.log(`🎨 Added ${copiedCount} cursor rule(s) for @texturehq/edges design system`);
+  } else {
+    console.log('ℹ️  All cursor rules already exist');
+  }
+
+  // Also render edges-components.mdc from manifest when present
+  const manifestPath = [
+    path.join(cwd, 'node_modules/@texturehq/edges/dist/components.manifest.json')
+  ].find(p => fs.existsSync(p));
+
+  if (manifestPath) {
+    try {
+      const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));
+      const lines = [
+        '---',
+        'alwaysApply: true',
+        '---',
+        '',
+        `## @texturehq/edges Components (v${manifest.version || 'unknown'})`,
+        ''
+      ];
+      for (const c of manifest.components || []) {
+        lines.push(`- ${c.name}`);
+        if (c.importRoot) lines.push(`  - Import: \`import { ${c.name} } from "${c.importRoot}"\``);
+        if (c.importPath) lines.push(`  - Subpath: \`import { ${c.name} } from "${c.importPath}"\``);
+        if (c.props && c.props.length) {
+          const propNames = c.props.slice(0, 8).map(p => p.name).join(', ');
+          lines.push(`  - Props: ${propNames}${c.props.length > 8 ? ', …' : ''}`);
+        }
+      }
+      const outPath = path.join(rulesDir, 'edges-components.mdc');
+      fs.writeFileSync(outPath, lines.join('\n'));
+      console.log(`✅ Wrote .cursor/rules/edges-components.mdc from manifest (${manifest.components?.length || 0} components)`);
+    } catch (err) {
+      console.log('⚠️  Failed to read components.manifest.json:', err.message);
+    }
+  }
+};
+
+setupCursorRules();

package/templates/cursor-rules/edges-usage.mdc

@@ -0,0 +1,65 @@
+---
+alwaysApply: true
+---
+
+ Usage Context for @texturehq/edges
+
+## Setup
+This project uses @texturehq/edges design system with Tailwind 4. The theme CSS file contains all design system variables that automatically become available as Tailwind classes.
+
+## Theme Import
+The theme is imported via CSS:
+```css
+@import "@texturehq/edges/theme.css";
+```
+
+## How It Works
+- CSS variables in the theme file automatically become Tailwind classes
+- `--color-brand-primary` becomes available as `bg-brand-primary`, `text-brand-primary`, `border-brand-primary`, etc.
+- `--spacing-md` becomes available as `p-md`, `m-md`, `gap-md`, etc.
+- `--text-lg` becomes available as `text-lg`
+- `--radius-lg` becomes available as `rounded-lg`
+
+## Usage Guidelines
+- **Use semantic classes over arbitrary values**
+- Prefer: `bg-brand-primary`, `text-text-body`, `p-md`, `rounded-lg`
+- Avoid: `bg-[#444ae1]`, `text-[#333333]`, `p-[1rem]`, `rounded-[0.5rem]`
+
+## Naming Conventions
+- Brand colors: `brand-primary`, `brand-light`, `brand-dark`
+- Text colors: `text-body`, `text-heading`, `text-muted`, `text-caption`
+- Background colors: `background-body`, `background-surface`, `background-muted`
+- Border colors: `border-default`, `border-focus`, `border-muted`
+- Action colors: `action-primary`, `action-secondary`, `action-destructive`
+- Feedback colors: `feedback-success`, `feedback-error`, `feedback-warning`, `feedback-info`
+- Spacing: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`
+- Typography: `xs`, `sm`, `base`, `lg`, `xl`, `2xl`, `3xl`, `4xl`
+- Border radius: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`
+
+## Examples
+```html
+<!-- ✅ Good - Uses semantic classes -->
+<div class="bg-brand-primary text-text-on-primary p-md rounded-lg shadow-md">
+  <h2 class="text-text-heading text-lg font-medium">Title</h2>
+  <p class="text-text-body text-base">Content</p>
+</div>
+
+<!-- ❌ Avoid - Uses arbitrary values -->
+<div class="bg-[#444ae1] text-[#ffffff] p-[1rem] rounded-[0.5rem]">
+  <h2 class="text-[#111827] text-[1.125rem] font-[500]">Title</h2>
+  <p class="text-[#333333] text-[1rem]">Content</p>
+</div>
+```
+
+## Dark Mode
+All colors automatically adapt to dark mode when `.dark` class is present.
+
+## Available Variables
+All CSS variables from the theme file are automatically available. The theme includes:
+- Complete color system (brand, text, background, border, action, feedback, device states, data visualization)
+- Spacing scale
+- Typography scale  
+- Border radius scale
+- Shadow system
+- Animation definitions
+- Form control specifications