@dxtmisha/scripts 0.7.10 → 0.7.12

package/CHANGELOG.md

@@ -0,0 +1,15 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+## [0.7.11] - 2026-05-05
+
+### Added
+- **Figma API**: Implemented a robust Figma API client (`FigmaApi`, `DesignFigma`) supporting file retrieval, node filtering, image generation, and style metadata extraction.
+- **Storybook Integration**: Configured Storybook to monitor the `demo-test` directory, enabling better testing and visualization of experimental components.
+- **Browser Automation**: Introduced a dedicated `BrowserItem` class to encapsulate Puppeteer logic, supporting advanced features like custom wait states and extended viewport heights.
+
+### Changed / Improved
+- **Automated Screenshots**: Overhauled the `DesignScreenshot` class to handle server lifecycle and capture triggers more reliably. Standardized screenshot constants (timeouts, quality, and browser arguments).
+- **Library Exports**: Streamlined library exports by centralizing design and browser-related utilities.
+- **Type Generation**: Updated `DesignTypes` to force `ServerStorage` error status during generation. Fixed a type generation issue in `DesignReplace` to ensure flexible string types in component property templates.

package/README.md

@@ -1,30 +1,40 @@
 # @dxtmisha/scripts
 
-🛠️ **Development scripts and CLI tools** for DXT UI projects - automated component generation, library building and project management tools.
-
 [![npm version](https://badge.fury.io/js/@dxtmisha%2Fscripts.svg)](https://www.npmjs.com/package/@dxtmisha/scripts)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![Node.js Version](https://img.shields.io/badge/node-%3E%3D18.0.0-brightgreen)](https://nodejs.org/)
+[![Node.js Version](https://img.shields.io/badge/node-%3E%3D20.0.0-brightgreen)](https://nodejs.org/)
+
+`@dxtmisha/scripts` is a powerful suite of development scripts and CLI tools designed specifically for automating workflows in modern UI libraries.
+
+## Why this library?
+
+Maintaining a UI library inevitably involves a lot of repetitive boilerplate: creating component files, writing basic props interfaces, setting up Storybook configuration, keeping index barrel files updated, and maintaining documentation. Typically each project solves these by copying and pasting folders or writing ad-hoc shell scripts that break over time.
+
+`scripts` brings all these solutions together in one place — thoughtful, tested, and ready to use. It automates the mundane work, providing a cohesive toolset to scaffold components, generate documentation (including AI-assisted text), and automatically manage library exports, ensuring your UI project remains structured and easy to scale.
+
+## What does it do?
+
+For **component scaffolding** — automatic generation of full Vue component templates. A single command sets up `.vue` files, `props.ts`, `styleToken.scss`, and barrel exports, complete with TypeScript definitions.
 
-## 🚀 Installation
+For **design system orchestration** — a robust suite of classes to parse TypeScript props, manage constructor configurations, and synchronize design tokens.
+
+For **documentation & Storybook** — tools to generate `.stories.ts` and `.mdx` files automatically. It can even utilize Google's AI (Gemini) or Anthropic's Claude to generate component descriptions and technical docs.
+
+For **Figma integration** — a complete Figma API client capable of fetching styles, analyzing design nodes, and translating them into usable code structures.
+
+For **visual testing** — browser automation using Puppeteer to capture and process component screenshots across different states and themes.
+
+For **library management** — automated maintenance of `index.ts` files (barrel exports) across packages, ensuring all components and utilities are correctly exposed.
+
+## Installation
 
 ```bash
 npm install -D @dxtmisha/scripts
 ```
 
-> **Note:** TypeScript sources are shipped directly. Requires a TypeScript runner like `vite-node`, `tsx` or manual transpilation.
-
-## ✨ Features
-
-- 🏗️ **Component scaffolding** - automatic Vue component generation with TypeScript
-- 🎯 **AI integration** - Google AI (Gemini) powered code generation
-- 🔧 **CLI commands** - ready-to-use command line tools
-- 📝 **Documentation generation** - automatic Storybook and MDX creation  
-- ⚡ **Library management** - export barrel file maintenance
-- 🎨 **Design system tools** - constructor and properties management
-- 📦 **TypeScript source** - no build step required
+> **Note:** TypeScript sources are shipped directly. Requires a TypeScript runner like `vite-node`, `tsx`, or manual transpilation.
 
-## 📖 Quick Start
+## Quick Start
 
 ### CLI Commands
 
@@ -32,7 +42,7 @@ npm install -D @dxtmisha/scripts
 # Generate component scaffolds in empty directories
 npx dxt-component
 
-# Generate wiki documentation for specific component
+# Generate wiki documentation for a specific component
 npx dxt-component-wiki MyButton
 
 # Build component constructors
@@ -48,180 +58,39 @@ npx dxt-ui
 ### Programmatic Usage
 
 ```typescript
-import { 
-  ComponentCreator, 
-  DesignComponent, 
-  AiGoogle,
-  LibraryExport 
-} from '@dxtmisha/scripts'
+import { ComponentCreator, AiGoogle, LibraryExport } from '@dxtmisha/scripts'
 
 // Generate component scaffolds
 const creator = new ComponentCreator()
-creator.make() // Scans and creates templates for empty component dirs
+creator.make()
 
 // AI-powered generation
 const ai = new AiGoogle()
-ai.addPrompt('You are a Vue component expert')
 ai.setModel('gemini-1.5-flash')
 const result = await ai.generate('Create props interface for Button component')
 
 // Library export management
 const library = new LibraryExport()
-library.make() // Rebuilds barrel export files
-```
-
-## 📚 Available utilities
-
-### 🏗️ Core Classes
-
-#### Component Generation
-```typescript
-import { ComponentCreator, ComponentItem, ComponentWiki } from '@dxtmisha/scripts'
-
-// Bulk component scaffolding
-const creator = new ComponentCreator()
-creator.make() // Creates templates in all empty component directories
-
-// Single component generation
-const item = new ComponentItem('/path/to/component')
-item.make() // Creates complete component file set
-
-// Documentation generation
-const wiki = new ComponentWiki('Button')
-wiki.make() // Generates Storybook files
-```
-
-#### AI Integration
-```typescript
-import { AiAbstract, AiGoogle } from '@dxtmisha/scripts'
-
-const ai = new AiGoogle()
-
-// Prompt management
-ai.addPrompt('Context line 1')
-ai.addPrompt('Context line 2')
-ai.resetPrompt() // Clear all prompts
-
-// Configuration
-ai.setKey('your-api-key')
-ai.setModel('gemini-1.5-flash')
-
-// Generation
-const response = await ai.generate('Generate TypeScript interface')
-```
-
-#### Design System Tools
-```typescript
-import { 
-  DesignComponent, 
-  DesignConstructor, 
-  DesignTypescript,
-  DesignStructure 
-} from '@dxtmisha/scripts'
-
-// Component orchestration
-const component = new DesignComponent('Button', { variant: 'primary' })
-component.make() // Creates: props.ts, styleToken.scss, Component.vue, etc.
-
-// TypeScript analysis
-const ts = new DesignTypescript('/path/to/props.ts')
-const props = ts.getType('ButtonProps')?.props // Extract prop definitions
-```
-
-### 🎯 Vue Composables
-
-```typescript
-import { useAi } from '@dxtmisha/scripts'
-
-// Reactive AI integration
-const { ai, generate, loading, error } = useAi()
-
-// Usage in Vue component
-const result = await generate('Create component documentation')
-```
-
-### 🔧 Utility Functions
-
-```typescript
-import { 
-  getComponentPaths, 
-  getConstructorProperties,
-  getNameDirByPaths 
-} from '@dxtmisha/scripts'
-
-// Path utilities
-const paths = getComponentPaths('/components/Button')
-const properties = getConstructorProperties()
-const dirName = getNameDirByPaths(['src', 'components', 'Button'])
-```
-
-## 🎯 CLI Commands Reference
-
-| Command | Purpose | Arguments | Output |
-|---------|---------|-----------|---------|
-| `dxt-component` | Component scaffolding | None (scans all) | Creates templates in empty dirs |
-| `dxt-component-wiki` | Wiki generation | `<ComponentName>` | Generates .stories.ts and .mdx |
-| `dxt-constructor` | Constructor build | None | Updates constructor files |
-| `dxt-library` | Library exports | None | Rebuilds barrel exports |
-| `dxt-ui` | Full UI build | None | Complete project generation |
-
-## 🏗️ Generated File Structure
-
-When using `DesignComponent`, the following files are created:
-
-```
-MyComponent/
-├── properties.json         # Design tokens binding
-├── props.ts                # TypeScript props + defaults
-├── styleToken.scss         # SCSS tokens and imports
-├── MyComponent.vue         # Vue SFC template
-├── index.ts                # Component export
-├── wiki.ts                 # Storybook controls
-├── MyComponent.stories.ts  # Storybook configuration
-└── MyComponent.mdx         # MDX documentation
-```
-
-## 🎯 Use cases
-
-### AI-Assisted Development
-```typescript
-import { AiGoogle } from '@dxtmisha/scripts'
-
-async function generateComponentDocs(componentName: string) {
-  const ai = new AiGoogle()
-  ai.addPrompt('You are a technical writer for Vue components')
-  ai.addPrompt('Write clear, concise documentation')
-  
-  const docs = await ai.generate(`
-    Create documentation for ${componentName} component.
-    Include usage examples and prop descriptions.
-  `)
-  
-  return docs
-}
+library.make()
 ```
 
-## 📦 Requirements
+## Principles
 
-**Core Dependencies:**
-- Node.js ≥18.0.0
-- TypeScript ≥5.0.0
+- **Developer Experience First** — commands are simple, outputs are predictable. You shouldn't have to write boilerplate.
+- **TypeScript-first** — strict typing and autocomplete out of the box. Ships source directly, making it easy to integrate into modern tooling environments.
+- **AI-Enhanced** — embraces LLMs to speed up tedious documentation and scaffolding tasks.
+- **Clean API** — predictable behavior and clear naming for programmatically managing UI systems.
 
-**Peer Dependencies (install separately):**
-- `@dxtmisha/functional` ≥1.0.3 - utility functions
-- `@dxtmisha/configuration` ≥0.3.9 - build configurations
-- `@dxtmisha/wiki` ≥0.23.5 - storybook utilities
-- `@dxtmisha/styles` ≥1.0.2 - styling system
-- `vue` ≥3.0.0 - Vue framework (when needed)
+## Documentation
 
-## 📄 License
+Full API reference, examples, and guides:
 
-MIT © [dxtmisha](https://github.com/dxtmisha)
+**[📖 https://dxtmisha.github.io/dxt-ui/](https://dxtmisha.github.io/dxt-ui/)**
 
-## 🐛 Report an issue
+## Difference from other tools
 
-[GitHub Issues](https://github.com/dxtmisha/dxt-ui/issues)
+- **`@dxtmisha/scripts`** — specifically tailored for the internal architecture of DXT UI, integrating deeply with our property management and Storybook setup. Not a generic scaffolding tool like Yeoman or Plop.
 
----
+## License
 
-⭐ **Give us a star** if these scripts helped accelerate your development!
+[MIT](LICENSE)

package/bin/design-figma.ts

@@ -0,0 +1,10 @@
+#!/usr/bin/env vite-node
+
+import { DesignFigma } from '../src/classes/Design/DesignFigma'
+
+const fileKey: string = process.argv?.[2] ?? 'fileKey'
+const nodeId: string = process.argv?.[3] ?? 'nodeId'
+
+new DesignFigma(fileKey, nodeId)
+  .make()
+  .then()

package/bin/design-screenshot.ts

@@ -0,0 +1,7 @@
+#!/usr/bin/env vite-node
+
+import { DesignScreenshot } from '../src/classes/Design/DesignScreenshot'
+
+new DesignScreenshot()
+  .make()
+  .then()

package/bin/design-types.ts

@@ -4,4 +4,6 @@ import { DesignTypes } from '../src/classes/Design/DesignTypes'
 
 const dir: string = process.argv?.[2] ?? 'dist'
 
-new DesignTypes(dir).make()
+new DesignTypes(dir)
+  .make()
+  .then()

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dxtmisha/scripts",
   "private": false,
-  "version": "0.7.10",
+  "version": "0.7.12",
   "type": "module",
   "description": "Development scripts and CLI tools for DXT UI projects - automated component generation, library building and project management tools",
   "keywords": [
@@ -34,9 +34,10 @@
   "files": [
     "bin/",
     "src/",
+    "CHANGELOG.md",
+    "LICENSE",
     "README.md",
-    "package.json",
-    "LICENSE"
+    "package.json"
   ],
   "main": "./src/library.ts",
   "module": "./src/library.ts",
@@ -46,9 +47,11 @@
     "dxt-component": "bin/design-component.ts",
     "dxt-component-wiki": "bin/design-component-wiki.ts",
     "dxt-constructor": "bin/design-constructor.ts",
+    "dxt-figma-layout": "bin/design-figma.ts",
     "dxt-flags": "bin/design-flags.ts",
     "dxt-library": "bin/design-library.ts",
     "dxt-package": "bin/design-package.ts",
+    "dxt-screenshot": "bin/design-screenshot.ts",
     "dxt-types": "bin/design-types.ts",
     "dxt-ui": "bin/design-ui.ts",
     "dxt-wiki-storm": "bin/design-wiki-storm.ts"
@@ -64,15 +67,16 @@
     "node": ">=20.0.0"
   },
   "dependencies": {
-    "@anthropic-ai/sdk": "^0.89.0",
+    "@anthropic-ai/sdk": "*",
     "@dxtmisha/configuration": "*",
     "@dxtmisha/functional": "*",
     "@dxtmisha/functional-basic": "*",
     "@dxtmisha/media": "*",
+    "@dxtmisha/styles": "*",
     "@dxtmisha/wiki": "*",
-    "@google/genai": "^1.50.1",
-    "puppeteer": "^24.41.0",
-    "typescript": "^6.0.2",
-    "vue": "^3.5.32"
+    "@google/genai": "*",
+    "puppeteer": "*",
+    "typescript": "*",
+    "vue": "*"
   }
 }