@texturehq/edges 0.1.8 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@texturehq/edges",
-  "version": "0.1.8",
+  "version": "1.0.1",
   "author": "Nicholas Brown <nick@texturehq.com>",
   "description": "A shared component library for Texture",
   "type": "module",
@@ -16,9 +16,15 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
+      "react-server": "./dist/server.js",
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
+    "./server": {
+      "types": "./dist/server.d.ts",
+      "import": "./dist/server.js",
+      "default": "./dist/server.js"
+    },
     "./styles.css": "./dist/styles.css",
     "./dist/styles.css": "./dist/styles.css",
     "./theme.css": "./dist/theme.css",
@@ -27,14 +33,22 @@
   "scripts": {
     "dev": "yarn watch",
     "watch": "tsup --watch",
-    "build": "tsup",
+    "build": "yarn tokens:build && tsup && yarn build:post",
+    "build:post": "postcss src/styles.css -o dist/styles.css && node scripts/copy-assets.js && node scripts/generate-components-manifest.js",
+    "tokens:build": "node style-dictionary.config.mjs",
+    "tokens:build:tailwind": "node style-dictionary.config.mjs",
+    "tokens:watch": "nodemon --watch tokens --ext json --exec 'yarn tokens:build'",
+    "tokens:watch:tailwind": "nodemon --watch tokens --ext json --exec 'yarn tokens:build:tailwind'",
+    "tokens:validate": "node scripts/validate-tokens.js",
     "build:yalc": "yarn build && npx yalc publish && npx yalc push",
     "dev:yalc": "yarn build && npx yalc publish && npx yalc push && echo 'Package updated! Run in target project: yarn install && yarn dev'",
     "dev:yalc:force": "yarn build && npx yalc publish && npx yalc push && echo 'Package updated! Run in target project: rm -rf .vite && yarn cache clean && yarn dev --force'",
     "clean": "rm -rf dist",
-    "lint": "eslint --ext .ts,.tsx src/",
-    "lint:quiet": "eslint --ext .ts,.tsx src/ --quiet",
-    "lint:fix": "eslint --fix --ext .ts,.tsx src/",
+    "lint": "biome check src/",
+    "lint:quiet": "biome check --reporter=github src/",
+    "lint:fix": "biome check --write src/",
+    "format": "biome format --write src/",
+    "format:check": "biome format src/",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
@@ -44,50 +58,73 @@
     "postinstall": "node scripts/setup-cursor-rules.js || echo \"! setup-cursor-rules: non-fatal error\""
   },
   "peerDependencies": {
+    "next": "*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "dependencies": {
     "@phosphor-icons/react": "^2.1.7",
+    "@tiptap/core": "^3.4.5",
+    "@tiptap/extension-link": "^3.4.5",
+    "@tiptap/pm": "^3.4.5",
+    "@tiptap/react": "^3.4.5",
+    "@tiptap/starter-kit": "^3.4.5",
+    "@types/react-map-gl": "6.1.6",
+    "@visx/axis": "^3.10.1",
+    "@visx/curve": "^3.3.0",
+    "@visx/event": "^3.3.0",
+    "@visx/responsive": "^3.10.2",
+    "@visx/scale": "^3.5.0",
+    "@visx/shape": "^3.5.0",
+    "@visx/tooltip": "^3.3.0",
+    "ace-builds": "^1.43.3",
+    "d3-array": "^3.2.4",
+    "file-saver": "^2.0.5",
     "filestack-react": "^6.0.0",
-    "lucide-react": "^0.487.0",
+    "framer-motion": "^12.23.18",
+    "lucide-react": "^0.544.0",
     "luxon": "^3.4.4",
+    "mapbox-gl": "3.7.0",
     "next-intl": "^4.0.2",
+    "papaparse": "^5.5.3",
     "react-ace": "^14.0.1",
     "react-aria-components": "^1.7.1",
+    "react-map-gl": "7.1.7",
     "react-stately": "^3.35.0",
     "tailwind-merge": "^3.2.0"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^8.6.12",
-    "@storybook/addon-interactions": "^8.6.12",
+    "@biomejs/biome": "^2.2.4",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-interactions": "^8.6.14",
     "@storybook/addon-styling-webpack": "^1.0.1",
-    "@storybook/blocks": "^8.6.12",
-    "@storybook/react": "^8.6.12",
-    "@storybook/react-vite": "^8.6.12",
-    "@storybook/test": "^8.6.12",
+    "@storybook/addon-themes": "^8.6.14",
+    "@storybook/blocks": "^8.6.14",
+    "@storybook/react": "^8.6.14",
+    "@storybook/react-vite": "^8.6.14",
+    "@storybook/test": "^8.6.14",
     "@tailwindcss/postcss": "^4.1.4",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/file-saver": "^2.0.7",
+    "@types/luxon": "^3.7.1",
     "@types/node": "^20.11.30",
-    "@types/papaparse": "^5.3.15",
+    "@types/papaparse": "^5.3.16",
     "@types/react": "^18.2.67",
     "@types/react-dom": "^18.2.22",
     "@vitejs/plugin-react": "^4.2.1",
     "@vitest/coverage-v8": "^3.1.1",
     "@vitest/ui": "^3.1.1",
     "autoprefixer": "^10.4.19",
-    "eslint": "^8.57.0",
-    "eslint-plugin-storybook": "^0.12.0",
     "jsdom": "^24.0.0",
     "postcss": "^8.4.35",
     "postcss-cli": "^11.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^8.6.12",
+    "storybook": "^8.6.14",
+    "style-dictionary": "^5.0.4",
     "tailwindcss": "^4.1.3",
     "tsup": "^8.0.2",
     "typescript": "~5.9.2",

package/scripts/copy-assets.js

@@ -0,0 +1,48 @@
+#!/usr/bin/env node
+
+import fs from "fs";
+
+console.log("📁 Copying assets to dist...");
+
+try {
+  // Copy theme.css to dist
+  fs.copyFileSync("src/theme.css", "dist/theme.css");
+  console.log("✅ Theme CSS copied to dist");
+
+  // Copy style layer files to dist
+  const styleFiles = ["src/styles/animations.css", "src/styles/computed.css", "src/styles/utilities.css"];
+
+  // Create styles directory in dist
+  if (!fs.existsSync("dist/styles")) {
+    fs.mkdirSync("dist/styles", { recursive: true });
+  }
+
+  styleFiles.forEach((file) => {
+    if (fs.existsSync(file)) {
+      const filename = file.split("/").pop();
+      fs.copyFileSync(file, `dist/styles/${filename}`);
+      console.log(`✅ Style file ${filename} copied to dist/styles`);
+    }
+  });
+
+  // Copy generated token CSS to dist (if they exist)
+  const tokenFiles = ["src/generated/tailwind-tokens-light.css", "src/generated/tailwind-tokens-dark.css"];
+
+  // Create generated directory in dist
+  if (!fs.existsSync("dist/generated")) {
+    fs.mkdirSync("dist/generated", { recursive: true });
+  }
+
+  tokenFiles.forEach((file) => {
+    if (fs.existsSync(file)) {
+      const filename = file.split("/").pop();
+      fs.copyFileSync(file, `dist/generated/${filename}`);
+      console.log(`✅ Token CSS ${filename} copied to dist/generated`);
+    }
+  });
+
+  console.log("🎉 All assets copied successfully!");
+} catch (error) {
+  console.error("❌ Failed to copy assets:", error.message);
+  process.exitCode = 1;
+}

package/scripts/validate-tokens.js

@@ -0,0 +1,178 @@
+#!/usr/bin/env node
+
+/**
+ * Validates design tokens against DTCG (Design Tokens Community Group) spec
+ * https://tr.designtokens.org/format/
+ */
+
+import { readFileSync, readdirSync, statSync } from 'fs';
+import { join, extname } from 'path';
+
+const TOKENS_DIR = './tokens';
+const REQUIRED_SCHEMA = 'https://tr.designtokens.org/format/0.1/';
+
+// DTCG spec required properties for different token types
+const TOKEN_TYPE_REQUIREMENTS = {
+  color: ['$value'],
+  dimension: ['$value'],
+  fontFamily: ['$value'],
+  fontWeight: ['$value'],
+  duration: ['$value'],
+  number: ['$value'],
+  // Add more as needed
+};
+
+// Valid top-level properties
+const VALID_TOP_LEVEL = ['$schema', '$name', '$description', '$type', '$value', '$extensions'];
+
+// Validation results
+const errors = [];
+const warnings = [];
+const successes = [];
+
+/**
+ * Get all JSON files recursively
+ */
+function getTokenFiles(dir) {
+  const files = [];
+  const items = readdirSync(dir);
+  
+  for (const item of items) {
+    const path = join(dir, item);
+    const stat = statSync(path);
+    
+    if (stat.isDirectory()) {
+      files.push(...getTokenFiles(path));
+    } else if (extname(path) === '.json') {
+      files.push(path);
+    }
+  }
+  
+  return files;
+}
+
+/**
+ * Validate a single token
+ */
+function validateToken(token, path, parentType = null) {
+  const type = token.$type || parentType;
+  
+  // Check for $value
+  if (!token.$value && !hasNestedTokens(token)) {
+    errors.push(`${path}: Token missing $value property`);
+    return;
+  }
+  
+  // If has $value, validate based on type
+  if (token.$value && type) {
+    const requirements = TOKEN_TYPE_REQUIREMENTS[type];
+    if (requirements) {
+      for (const req of requirements) {
+        if (!(req in token)) {
+          errors.push(`${path}: Token of type "${type}" missing required property "${req}"`);
+        }
+      }
+    }
+  }
+  
+  // Check for $description (recommended but not required)
+  if (!token.$description && token.$value) {
+    warnings.push(`${path}: Token missing $description (recommended)`);
+  }
+  
+  // Validate nested tokens
+  for (const key in token) {
+    if (!key.startsWith('$') && typeof token[key] === 'object') {
+      validateToken(token[key], `${path}.${key}`, type);
+    }
+  }
+}
+
+/**
+ * Check if object has nested tokens
+ */
+function hasNestedTokens(obj) {
+  for (const key in obj) {
+    if (!key.startsWith('$') && typeof obj[key] === 'object') {
+      return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * Validate a token file
+ */
+function validateFile(filepath) {
+  console.log(`\nValidating: ${filepath}`);
+  
+  try {
+    const content = readFileSync(filepath, 'utf8');
+    const tokens = JSON.parse(content);
+    
+    // Check for $schema
+    if (!tokens.$schema) {
+      warnings.push(`${filepath}: Missing $schema declaration`);
+    } else if (!tokens.$schema.includes('designtokens.org')) {
+      warnings.push(`${filepath}: Non-standard schema: ${tokens.$schema}`);
+    }
+    
+    // Check for $name
+    if (!tokens.$name) {
+      warnings.push(`${filepath}: Missing $name property (recommended)`);
+    }
+    
+    // Validate all tokens
+    for (const key in tokens) {
+      if (!key.startsWith('$') && typeof tokens[key] === 'object') {
+        validateToken(tokens[key], `${filepath}:${key}`, tokens.$type);
+      }
+    }
+    
+    successes.push(`${filepath}: Valid DTCG token file`);
+    
+  } catch (error) {
+    errors.push(`${filepath}: ${error.message}`);
+  }
+}
+
+/**
+ * Main validation
+ */
+function main() {
+  console.log('🔍 DTCG Token Validation\n');
+  console.log('==========================');
+  
+  const files = getTokenFiles(TOKENS_DIR);
+  console.log(`Found ${files.length} token files\n`);
+  
+  for (const file of files) {
+    validateFile(file);
+  }
+  
+  // Report results
+  console.log('\n==========================');
+  console.log('📊 Validation Results\n');
+  
+  if (successes.length > 0) {
+    console.log('✅ Valid Files:');
+    successes.forEach(s => console.log(`   ${s}`));
+  }
+  
+  if (warnings.length > 0) {
+    console.log('\n⚠️  Warnings:');
+    warnings.forEach(w => console.log(`   ${w}`));
+  }
+  
+  if (errors.length > 0) {
+    console.log('\n❌ Errors:');
+    errors.forEach(e => console.log(`   ${e}`));
+    process.exit(1);
+  } else {
+    console.log('\n✨ All tokens are DTCG compliant!');
+  }
+}
+
+// Run validation
+main();
+

package/templates/claude-rules/claude.md

@@ -53,7 +53,7 @@ The theme is imported via CSS:
 
 ## Dark Mode
 
-All colors automatically adapt to dark mode when `.dark` class is present.
+All colors automatically adapt to dark mode when `.theme-dark` class is present.
 
 ## Available Variables
 

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

@@ -52,7 +52,7 @@ The theme is imported via CSS:
 ```
 
 ## Dark Mode
-All colors automatically adapt to dark mode when `.dark` class is present.
+All colors automatically adapt to dark mode when `.theme-dark` class is present.
 
 ## Available Variables
 All CSS variables from the theme file are automatically available. The theme includes: