svgfusion 1.0.0-beta.2

package/CONTRIBUTING.md

@@ -0,0 +1,93 @@
+# Contributing to SVGFusion
+
+Thank you for your interest in contributing to SVGFusion! This guide will help you get started.
+
+## Getting Started
+
+1. Fork the repository
+2. Clone your fork:
+   ```bash
+   git clone https://github.com/YOUR_USERNAME/svgfusion.git
+   cd svgfusion
+   ```
+3. Install dependencies:
+   ```bash
+   npm install
+   ```
+4. Start development:
+   ```bash
+   npm run dev
+   ```
+
+## Development
+
+### Building
+
+```bash
+npm run build        # Build for production
+npm run dev          # Watch mode
+```
+
+### Testing
+
+```bash
+npm test             # Run tests
+npm run test:coverage # Run with coverage
+```
+
+### Code Quality
+
+```bash
+npm run lint         # Check code style
+npm run lint:fix     # Fix linting issues
+npm run format       # Format code
+```
+
+## Making Changes
+
+1. Create a feature branch:
+
+   ```bash
+   git checkout -b feature/my-feature
+   ```
+
+2. Make your changes
+3. Add tests for new functionality
+4. Run tests and ensure they pass
+5. Commit your changes:
+
+   ```bash
+   git commit -m "feat: describe your changes"
+   ```
+
+6. Push and create a pull request
+
+## Code Style
+
+- Use TypeScript for all code
+- Follow existing code patterns
+- Add JSDoc comments for public APIs
+- Write tests for new features
+- Keep commits focused and descriptive
+
+## Reporting Issues
+
+When reporting bugs, please include:
+
+- Clear description of the issue
+- Steps to reproduce
+- Expected vs actual behavior
+- SVG input that causes the issue
+- Environment details
+
+## Pull Request Process
+
+1. Update documentation if needed
+2. Add tests for new functionality
+3. Ensure all tests pass
+4. Update changelog if needed
+5. Submit pull request with clear description
+
+## License
+
+By contributing, you agree that your contributions will be licensed under the MIT License.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 SVGFusion Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,297 @@
+# SVGFusion
+
+**Transform SVG files into production-ready React and Vue 3 components with TypeScript support, automatic optimization, and intelligent naming.**
+
+[![npm version](https://badge.fury.io/js/svgfusion.svg)](https://badge.fury.io/js/svgfusion)
+[![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=flat&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
+[![React](https://img.shields.io/badge/React-20232A?style=flat&logo=react&logoColor=61DAFB)](https://reactjs.org/)
+[![Vue.js](https://img.shields.io/badge/Vue.js-35495E?style=flat&logo=vue.js&logoColor=4FC08D)](https://vuejs.org/)
+
+## Features
+
+- **Dual Framework Support**: Generate both React and Vue 3 components from the same SVG
+- **Optimized Output**: Built-in SVGO optimization with customizable settings
+- **Multi-Color Support**: Preserves gradients, patterns, and complex color schemes
+- **Class-Based Styling**: Supports CSS classes, Tailwind, and framework-specific styling
+- **TypeScript Ready**: Full TypeScript support with proper type definitions
+- **Flexible API**: Both CLI and programmatic usage
+- **Batch Processing**: Convert entire directories of SVG files
+- **Complex Filenames**: Handles design system metadata and special characters
+
+## Quick Start
+
+### Installation
+
+```bash
+npm install svgfusion
+# or
+yarn add svgfusion
+# or
+pnpm add svgfusion
+```
+
+### CLI Usage
+
+```bash
+# Convert to React components
+svgfusion react ./icons --out ./components/react
+
+# Convert to Vue 3 components
+svgfusion vue ./icons --out ./components/vue
+
+# Single file conversion
+svgfusion react ./star.svg --name StarIcon --out ./components
+
+# With optimization and prefix
+svgfusion react ./icons --out ./components --optimize --prefix Icon
+```
+
+### Programmatic Usage
+
+```typescript
+import { convertToReact, convertToVue } from 'svgfusion';
+
+// React conversion
+const reactResult = await convertToReact(svgContent, {
+  name: 'StarIcon',
+  typescript: true,
+  memo: true,
+  ref: true,
+});
+
+// Vue conversion
+const vueResult = await convertToVue(svgContent, {
+  name: 'StarIcon',
+  typescript: true,
+  scriptSetup: true,
+});
+
+console.log(reactResult.code); // Generated React component
+console.log(vueResult.code); // Generated Vue component
+```
+
+## API Reference
+
+### `convertToReact(svgContent, options)`
+
+Convert SVG to React component.
+
+**Options:**
+
+- `name?: string` - Component name (auto-generated from filename if not provided)
+- `prefix?: string` - Add prefix to component name
+- `suffix?: string` - Add suffix to component name
+- `typescript?: boolean` - Generate TypeScript component (default: `true`)
+- `memo?: boolean` - Wrap with React.memo (default: `true`)
+- `ref?: boolean` - Add forwardRef support (default: `true`)
+- `optimize?: boolean` - Apply SVGO optimization (default: `true`)
+
+### `convertToVue(svgContent, options)`
+
+Convert SVG to Vue 3 component.
+
+**Options:**
+
+- `name?: string` - Component name (auto-generated from filename if not provided)
+- `prefix?: string` - Add prefix to component name
+- `suffix?: string` - Add suffix to component name
+- `typescript?: boolean` - Generate TypeScript component (default: `true`)
+- `scriptSetup?: boolean` - Use script setup syntax (default: `true`)
+- `compositionApi?: boolean` - Use Composition API (default: `true`)
+- `optimize?: boolean` - Apply SVGO optimization (default: `true`)
+
+### `optimizeSvg(svgContent, config?)`
+
+Optimize SVG content using SVGO.
+
+### File Utilities
+
+- `readSvgFile(filePath)` - Read SVG file
+- `writeSvgFile(filePath, content)` - Write SVG file
+- `readSvgDirectory(dirPath, recursive?)` - Read SVG files from directory
+- `writeComponentFile(filePath, content)` - Write component file
+
+## Examples
+
+### Input SVG
+
+```svg
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
+        fill="currentColor" class="star-fill"/>
+</svg>
+```
+
+### Generated React Component
+
+```tsx
+import { SVGProps } from 'react';
+import { memo } from 'react';
+import { forwardRef } from 'react';
+
+const StarIcon = memo(
+  forwardRef<SVGSVGElement, SVGProps<SVGSVGElement> & { className?: string }>(
+    props => {
+      return (
+        <svg viewBox="0 0 24 24" {...props}>
+          <path
+            d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z"
+            fill="currentColor"
+            className="star-fill"
+          />
+        </svg>
+      );
+    }
+  )
+);
+
+StarIcon.displayName = 'StarIcon';
+
+export default StarIcon;
+export { StarIcon };
+```
+
+### Generated Vue Component
+
+```vue
+<script setup lang="ts">
+interface Props {
+  class?: string;
+  style?: string | Record<string, any>;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  class: '',
+  style: undefined,
+});
+
+// Component name for debugging
+const __name = 'StarIcon';
+</script>
+
+<template>
+  <svg v-bind="$attrs" viewBox="0 0 24 24">
+    <path
+      d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z"
+      fill="currentColor"
+      class="star-fill"
+    />
+  </svg>
+</template>
+
+<style scoped>
+/* Add component-specific styles here */
+</style>
+```
+
+## Advanced Configuration
+
+### Custom SVGO Configuration
+
+```typescript
+import { createSvgoConfig, optimizeSvg } from 'svgfusion';
+
+const customConfig = createSvgoConfig({
+  removeViewBox: false,
+  preserveColors: true,
+  preserveClasses: true,
+});
+
+const optimizedSvg = optimizeSvg(svgContent, customConfig);
+```
+
+### Batch Processing
+
+```typescript
+import {
+  readSvgDirectory,
+  convertToReact,
+  writeComponentFile,
+} from 'svgfusion';
+
+const svgFiles = await readSvgDirectory('./icons', true); // recursive
+
+for (const svgFile of svgFiles) {
+  const svgContent = await readSvgFile(svgFile);
+  const result = await convertToReact(svgContent, {
+    name: path.basename(svgFile, '.svg'),
+    prefix: 'Icon',
+  });
+
+  await writeComponentFile(`./components/${result.filename}`, result.code);
+}
+```
+
+## Complex Filename Support
+
+SVGFusion handles complex filenames from design systems:
+
+```bash
+# Design system metadata
+"Size=xl, Color=Brand, Type=Glass.svg" → GlassBrandXl
+"User Profile Avatar, Type=Solid.svg" → UserProfileAvatarTypeSolid
+
+# Standard patterns
+"icon-star.svg" → IconStar
+"user-profile-avatar.svg" → UserProfileAvatar
+```
+
+## Styling Support
+
+### CSS Classes
+
+```svg
+<path class="primary-color" />
+<circle class="bg-blue-500" /> <!-- Tailwind -->
+```
+
+### CSS Variables
+
+```svg
+<path fill="var(--primary-color)" />
+<circle fill="currentColor" />
+```
+
+### Gradients & Patterns
+
+```svg
+<defs>
+  <linearGradient id="gradient">
+    <stop offset="0%" style="stop-color:#ff6b6b" />
+    <stop offset="100%" style="stop-color:#4ecdc4" />
+  </linearGradient>
+</defs>
+<path fill="url(#gradient)" />
+```
+
+## Testing
+
+```bash
+npm test          # Run tests
+npm run test:coverage # Run with coverage
+```
+
+## Development
+
+```bash
+npm run dev       # Watch mode
+npm run build     # Build for production
+npm run lint      # Lint code
+npm run format    # Format code
+```
+
+## License
+
+MIT © SVGFusion Contributors
+
+## Contributing
+
+Contributions are welcome! Please read [CONTRIBUTING.md](./CONTRIBUTING.md) for details.
+
+## Changelog
+
+See [CHANGELOG.md](./CHANGELOG.md) for details.
+
+---
+
+**Made with care for the developer community**

package/dist/cli.d.mts

@@ -0,0 +1,2 @@
+
+export { }

package/dist/cli.d.ts

@@ -0,0 +1,2 @@
+
+export { }

package/dist/cli.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=cli.js.map

package/dist/cli.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/cli.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=cli.mjs.map

package/dist/cli.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,152 @@
+import { Config } from 'svgo';
+
+interface ConversionOptions {
+    name?: string;
+    prefix?: string;
+    suffix?: string;
+    optimize?: boolean;
+    typescript?: boolean;
+    format?: 'esm' | 'cjs';
+}
+interface ReactConversionOptions extends ConversionOptions {
+    memo?: boolean;
+    ref?: boolean;
+    titleProp?: boolean;
+    descProp?: boolean;
+}
+interface VueConversionOptions extends ConversionOptions {
+    compositionApi?: boolean;
+    scriptSetup?: boolean;
+}
+interface ConversionResult {
+    code: string;
+    filename: string;
+    componentName: string;
+}
+interface BatchConversionOptions extends ConversionOptions {
+    inputDir: string;
+    outputDir: string;
+    recursive?: boolean;
+    extensions?: string[];
+}
+interface BatchConversionResult {
+    results: ConversionResult[];
+    errors: ConversionError[];
+    summary: {
+        total: number;
+        successful: number;
+        failed: number;
+    };
+}
+interface ConversionError {
+    file: string;
+    error: string;
+    stack?: string;
+}
+type Framework = 'react' | 'vue';
+interface CliOptions {
+    framework: Framework;
+    input: string;
+    output?: string;
+    name?: string;
+    prefix?: string;
+    suffix?: string;
+    optimize?: boolean;
+    typescript?: boolean;
+    format?: 'esm' | 'cjs';
+    recursive?: boolean;
+    verbose?: boolean;
+}
+
+/**
+ * Convert SVG to React component
+ * @param svgContent - SVG content string
+ * @param options - Conversion options
+ * @returns Conversion result with React component code
+ */
+declare function convertToReact(svgContent: string, options?: ReactConversionOptions): Promise<ConversionResult>;
+
+/**
+ * Convert SVG to Vue 3 component
+ * @param svgContent - SVG content string
+ * @param options - Conversion options
+ * @returns Conversion result with Vue component code
+ */
+declare function convertToVue(svgContent: string, options?: VueConversionOptions): ConversionResult;
+
+/**
+ * Optimize SVG content using SVGO
+ * @param svgContent - SVG content to optimize
+ * @param config - Optional SVGO configuration
+ * @returns Optimized SVG content
+ */
+declare function optimizeSvg(svgContent: string, config?: Config): string;
+/**
+ * Create custom SVGO configuration
+ * @param options - Configuration options
+ * @returns SVGO configuration
+ */
+declare function createSvgoConfig(options: {
+    removeViewBox?: boolean;
+    removeDimensions?: boolean;
+    removeTitle?: boolean;
+    removeDesc?: boolean;
+    preserveAspectRatio?: boolean;
+    preserveColors?: boolean;
+    preserveClasses?: boolean;
+}): Config;
+
+/**
+ * Read SVG file content
+ * @param filePath - Path to the SVG file
+ * @returns SVG content as string
+ */
+declare function readSvgFile(filePath: string): Promise<string>;
+/**
+ * Write SVG file content
+ * @param filePath - Path to write the SVG file
+ * @param content - SVG content
+ */
+declare function writeSvgFile(filePath: string, content: string): Promise<void>;
+/**
+ * Write component file content
+ * @param filePath - Path to write the component file
+ * @param content - Component content
+ */
+declare function writeComponentFile(filePath: string, content: string): Promise<void>;
+/**
+ * Read all SVG files from a directory
+ * @param dirPath - Directory path
+ * @param recursive - Whether to read recursively
+ * @returns Array of SVG file paths
+ */
+declare function readSvgDirectory(dirPath: string, recursive?: boolean): Promise<string[]>;
+
+/**
+ * Convert SVG filename to a valid React component name
+ * @param filename - The SVG filename
+ * @returns PascalCase component name
+ */
+declare function svgToComponentName(filename: string): string;
+/**
+ * Sanitize component name to ensure it's valid
+ * @param name - The component name to sanitize
+ * @returns Sanitized component name
+ */
+declare function sanitizeComponentName(name: string): string;
+/**
+ * Convert a string to PascalCase
+ * @param str - The string to convert
+ * @returns PascalCase string
+ */
+declare function pascalCase(str: string): string;
+/**
+ * Add prefix/suffix to component name
+ * @param name - Base component name
+ * @param prefix - Optional prefix
+ * @param suffix - Optional suffix
+ * @returns Component name with prefix/suffix
+ */
+declare function formatComponentName(name: string, prefix?: string, suffix?: string): string;
+
+export { BatchConversionOptions, BatchConversionResult, CliOptions, ConversionError, ConversionOptions, ConversionResult, Framework, ReactConversionOptions, VueConversionOptions, convertToReact, convertToVue, createSvgoConfig, formatComponentName, optimizeSvg, pascalCase, readSvgDirectory, readSvgFile, sanitizeComponentName, svgToComponentName, writeComponentFile, writeSvgFile };