@pushwoosh/kit-icons 2.1.7 → 2.1.8

package/ai-documentation.mdx

@@ -0,0 +1,241 @@
+# @pushwoosh/kit-icons - AI Agent Documentation
+
+## Overview
+
+This is a React-based icon library that is part of the Pushwoosh Design System. The library contains 131 auto-generated SVG icons that can be used across Pushwoosh products.
+
+## Package Information
+
+- **Name**: `@pushwoosh/kit-icons`
+- **Version**: 2.0.0
+- **Type**: React component library
+- **Peer Dependencies**: 
+  - React >= 16.14.0
+  - styled-components >= 5.3.3
+
+## Installation
+
+```bash
+npm install @pushwoosh/kit-icons
+```
+
+## Usage
+
+### Basic Import
+
+```tsx
+import { ArrowIcon, CheckIcon, CloseIcon } from '@pushwoosh/kit-icons';
+```
+
+### Component Usage
+
+```tsx
+// Example with ArrowIcon
+<ArrowIcon 
+  direction="down" 
+  size="medium" 
+/>
+
+// Example with custom props
+<CheckIcon 
+  size="small"
+  style={{ color: '#4CAF50' }}
+  onClick={handleClick}
+/>
+```
+
+## Icon Properties
+
+All icons share these common properties:
+
+### Base Props (CommonProps)
+- `boxRef?: Ref<HTMLDivElement>` - Reference to the wrapper div element
+- `as?: string` - Polymorphic component prop for changing the wrapper element
+- All standard HTML div attributes are supported (className, style, onClick, etc.)
+
+### Icon-Specific Props
+Each icon has specific required props:
+- `size`: Usually `"small"` | `"medium"`
+- Additional props vary by icon (e.g., `direction`, `type`, `view`, etc.)
+
+## Available Icons (131 total)
+
+### Navigation & Arrows
+- `ArrowIcon` - Directional arrows (up, down, left, right, diagonal)
+- `ArrowRoundIcon` - Rounded arrow variations
+- `ChevronIcon` - Chevron arrows for navigation
+- `NavigationIcon` - Navigation-specific icons
+
+### UI Controls
+- `CheckIcon` - Checkmark icon
+- `CheckRoundIcon` - Rounded checkmark
+- `CloseIcon` - Close/X icon
+- `CloseRoundIcon` - Rounded close icon
+- `MenuIcon` - Menu/hamburger icon
+- `MoreIcon` - More options (dots)
+
+### Communication
+- `CallIcon` - Phone/call icon
+- `ChatIcon` - Chat bubble icon
+- `EmailIcon` - Email envelope icon
+- `NotificationIcon` - Notification bell icon
+
+### Data & Documents
+- `AttachmentIcon` - File attachment icon
+- `DocumentIcon` - Document icon
+- `FolderIcon` - Folder icon
+- `FileIcon` - Generic file icon
+- `DownloadIcon` - Download arrow icon
+- `UploadIcon` - Upload arrow icon
+
+### Platform & Device
+- `DeviceIcon` - Device-specific icons
+- `BrowserIcon` - Web browser icon
+- `MobileIcon` - Mobile device icon
+- `DesktopIcon` - Desktop computer icon
+
+### Media & Content
+- `ImageIcon` - Image/photo icon
+- `VideoIcon` - Video/play icon
+- `MusicIcon` - Music/audio icon
+- `PlayIcon` - Play button icon
+- `PauseIcon` - Pause button icon
+
+### Status & Indicators
+- `InfoIcon` - Information icon
+- `WarningIcon` - Warning triangle icon
+- `ErrorIcon` - Error/danger icon
+- `SuccessIcon` - Success checkmark icon
+- `LoadingIcon` - Loading spinner icon
+
+### Actions
+- `EditIcon` - Edit/pencil icon
+- `DeleteIcon` - Delete/trash icon
+- `CopyIcon` - Copy/duplicate icon
+- `ShareIcon` - Share icon
+- `SaveIcon` - Save/floppy disk icon
+- `SearchIcon` - Search/magnifying glass icon
+- `FilterIcon` - Filter/funnel icon
+- `SettingsIcon` - Settings/gear icon
+
+### E-commerce & Finance
+- `CartIcon` - Shopping cart icon
+- `BillingIcon` - Billing/invoice icon
+- `CreditCardIcon` - Credit card icon
+- `WalletIcon` - Wallet icon
+
+### Social & User
+- `UserIcon` - User/person icon
+- `GroupIcon` - Group/team icon
+- `HeartIcon` - Heart/favorite icon
+- `StarIcon` - Star/rating icon
+- `BookmarkIcon` - Bookmark icon
+
+### Other Categories
+- `CalendarIcon` - Calendar icon
+- `ClockIcon` - Clock/time icon
+- `LocationIcon` - Location/map pin icon
+- `LockIcon` - Lock/security icon
+- `KeyIcon` - Key/authentication icon
+- `CloudIcon` - Cloud storage icon
+- `DatabaseIcon` - Database icon
+- `CodeIcon` - Code/development icon
+- `BugIcon` - Bug/issue icon
+- `QuestionIcon` - Question mark icon
+- `ExclamationIcon` - Exclamation mark icon
+- `PlusIcon` - Plus/add icon
+- `MinusIcon` - Minus/remove icon
+
+## Architecture Notes
+
+### Icon Generation Process
+1. Source SVG files are stored in `source-icons/` directory
+2. Filename format: `name=icon-name, size=medium, [other-props].svg`
+3. Run `npm run generate-icons` to process SVGs
+4. Icons are optimized with SVGO and converted to React components
+5. Components are generated in `src/icons/[icon-name]/`
+
+### Component Structure
+Each icon is created using the `createIconComponent` factory function which:
+- Dynamically loads the correct SVG based on props
+- Wraps the SVG in a styled `IconBox` component
+- Provides TypeScript type safety
+- Handles prop-based variations (size, direction, etc.)
+
+### File Organization
+```
+src/icons/[icon-name]/
+├── index.tsx                    # Main export
+├── [icon-name].component.tsx    # Component definition
+├── [icon-name].types.tsx        # TypeScript types
+└── assets/                      # SVG components for each variation
+    ├── name_[icon]_size_small_[...].tsx
+    └── name_[icon]_size_medium_[...].tsx
+```
+
+## Development Commands
+
+```bash
+# Generate new icons from source SVGs
+npm run generate-icons
+
+# Build the library
+npm run build
+
+# Run development playground
+npm start
+
+# Run linting and type checks
+npm run check
+
+# Fix linting issues
+npm run lint-fix
+```
+
+## Important Considerations
+
+1. **Icon Sizing**: Icons are designed in two sizes (small, medium) that correspond to specific pixel dimensions defined in the design system
+2. **Color Inheritance**: Icons use `currentColor` for fill, inheriting color from parent elements
+3. **Styled Components**: The library uses styled-components for styling, ensure it's available in your project
+4. **TypeScript**: Full TypeScript support with strict typing for all icon props
+5. **Tree Shaking**: Icons are exported individually for optimal bundle size
+
+## Common Issues & Solutions
+
+### Icon Not Found Error
+If you see `[IconName]: Icon not found!` in console:
+- Check that you're passing valid prop combinations
+- Verify the icon variant exists for your prop values
+- Some icons may not have all size/direction combinations
+
+### Styling Icons
+```tsx
+// Use style prop for inline styles
+<ArrowIcon style={{ color: 'red', width: '24px' }} />
+
+// Use className for CSS classes
+<CheckIcon className="custom-icon" />
+
+// Use styled-components
+const StyledIcon = styled(CloseIcon)`
+  color: ${props => props.theme.colors.primary};
+`;
+```
+
+### TypeScript Usage
+```tsx
+import { ArrowIconProps } from '@pushwoosh/kit-icons';
+
+const MyComponent: FC<{ iconProps: ArrowIconProps }> = ({ iconProps }) => (
+  <ArrowIcon {...iconProps} />
+);
+```
+
+## Notes for AI Agents
+
+- This is a read-only generated library - do not modify files in `src/icons/*/assets/`
+- To add new icons, place SVGs in `source-icons/` and run generation script
+- The library follows Pushwoosh Design System specifications from Figma
+- All icons are optimized for performance and accessibility
+- Components are memoized internally for performance
+- The library supports server-side rendering (SSR)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/kit-icons",
-  "version": "2.1.7",
+  "version": "2.1.8",
   "description": "React component for build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",
@@ -8,7 +8,7 @@
   "sideEffects": false,
   "scripts": {
     "start": "npm run playground",
-    "build": "pushwoosh-engine lib:build && node ./scripts/bundleSVG.js",
+    "build": "pushwoosh-engine lib:build && node ./scripts/bundleSVG.js && cp ./ai-documentation.mdx ./dist/ai-documentation.mdx",
     "playground": "`pushwoosh-engine lib:command:playground`",
     "check": "npm run check:lint && npm run check:types",
     "check:lint": "echo \"Run check:lint\" && eslint ./src",