@shohojdhara/atomix 0.6.1 → 0.6.3

package/CHANGELOG.md

@@ -1,165 +0,0 @@
-# Changelog
-
-## [0.3.15] - 2026-02-20
-
-### Added
-
-- Standardize component import paths, update build tool plugin import examples, and include themes in package distribution (fda94bac)
-- Add TypeScript declaration files to package for build-tools (fc288744)
-- Update type definitions and improve export documentation for build-tools (13a6dd2c)
-
-### Changed
-
-- Centralize build tool utilities for theme handling, component filtering, and logging (6acdcbfe)
-
-### Fixed
-
-- Add `.js` extension to type import path in build tools definition (e0479944)
-- Resolve duplicate identifiers in `AtomixGlass` (51d82d99)
-
-## [2.0.0] - 2026-01-20
-
-### Added
-
-- **Spinner**: Added `aria-label` (default "Loading") and `role` (default "status") props for improved accessibility.
-- **Badge**: Added `onRemove` callback and `aria-label` support. Providing `onRemove` automatically renders a close button.
-- **Input/Textarea**: Added `defaultValue` prop for uncontrolled component support.
-- **JSDoc**: Added `@default` tags to many component props for better developer experience and documentation.
-
-### Changed (Breaking)
-
-- **Standardized ARIA Props**: All ARIA-related props have been renamed from camelCase to kebab-case (e.g., `ariaLabel` -> `aria-label`) to align with native React/HTML standards.
-- **Toggle Component**: Refactored API to follow standard React form patterns. Removed `initialOn`, `onToggleOn`, and `onToggleOff`. Added `checked`, `defaultChecked`, and `onChange`.
-- **Rating Component**: Renamed `color` prop to `variant` for consistency with other components.
-- **Accordion Component**: Consolidated `onOpen` and `onClose` into a single `onOpenChange` handler.
-- **Callout Component**: Renamed `oneLine` to `compact` and `toast` to `isToast`.
-
-### Fixed
-
-- Fixed several accessibility issues across navigation components.
-- Improved focus management in `Modal` component.
-
-## 0.3.11
-
-### Patch Changes
-
-- 7dbaeb5: patchFix fs/promises module resolution error by removing server-side only functions (saveTheme, saveCSSFile, loadThemeFromConfig) from the browser bundle. This makes the library fully compatible with Next.js App Router and other browser environments. Breaking Change: Removed Node.js specific file-system utilities from main exports.
-
-## [0.3.10] - 2026-01-06
-
-### Fixed
-
-- Fixed `Module not found: Can't resolve './lib/config/loader'` by bundling `loadAtomixConfig` instead of treating it as external.
-
-## [0.3.9] - 2026-01-06
-
-### Fixed
-
-- Fixed `Module not found` error by replacing dynamic `require` with static import in `ThemeProvider`. This resolves build issues in external projects (e.g. Next.js).
-  All notable changes to this project will be documented in this file.
-
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
-and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
-
-## [Unreleased]
-
-## [0.3.0] - 2025-12-03
-
-### Added
-
-#### Theme Manager System
-
-- **Theme Manager Class**: Core theme management for vanilla JavaScript applications
-
-  - Dynamic theme loading with CSS file management
-  - Theme persistence using localStorage
-  - Event system for theme changes (`themeChange`, `themeLoad`, `themeError`)
-  - Theme preloading for faster switching
-  - SSR-safe implementation
-  - Comprehensive error handling
-
-- **React Integration**:
-
-  - `ThemeProvider` component for React applications
-  - `useTheme` hook for accessing theme state
-  - `ThemeContext` for context-based state management
-  - Loading and error states
-  - Automatic cleanup on unmount
-
-- **TypeScript Support**:
-
-  - Complete type definitions for all theme utilities
-  - `ThemeMetadata`, `ThemeManagerConfig`, `ThemeChangeEvent` interfaces
-  - Type-safe event system
-  - Full IntelliSense support
-
-- **Package Exports**:
-
-  - `@shohojdhara/atomix/theme` - Theme manager utilities
-
-- **Documentation**:
-
-  - Comprehensive theme manager guide (`docs/THEME_MANAGER.md`)
-  - React usage examples
-  - Vanilla JavaScript examples
-  - API reference
-  - Migration guide
-  - Troubleshooting section
-
-- **Runtime Configuration**:
-  - Added runtime section to `themes.config.js`
-  - Support for CDN paths
-  - Theme preloading configuration
-  - Theme dependencies mapping
-
-### Changed
-
-- Updated `README.md` with theme manager usage examples
-- Enhanced `themes.config.js` with runtime configuration options
-- Updated `src/lib/index.ts` to export theme utilities
-
-### Features
-
-- 🎨 Dynamic theme switching without page reload
-- 💾 Automatic theme persistence across sessions
-- ⚡ Theme preloading for instant switching
-- 🔒 Full TypeScript support
-- ♿ SSR compatible (Next.js, Remix, etc.)
-- 🎯 Works with React and vanilla JavaScript
-- 📦 Zero breaking changes to existing API
-
-## [0.2.9] - 2025-01-29
-
-## [0.2.8] - 2025-01-28
-
-## [0.2.7] - 2025-01-27
-
-## [0.1.25] - 2025-07-02
-
-### Fixed
-
-- Fixed module parse error with undefined exports in ESM build
-- Fixed Tooltip component export issue (previously exported as `Tooltip_Tooltip as Tooltip`)
-- Added post-build script to ensure all components are properly exported
-
-### Added
-
-- Added support for direct component imports via `@shohojdhara/atomix/components/*`
-- Added troubleshooting guide for common issues
-
-## [0.1.18] - 2025-07-03
-
-## [0.1.16] - 2025-07-02
-
-### Added
-
-- Initial release of Atomix Design System
-- Core components library with React and vanilla JavaScript support
-- Multiple module formats: ESM, CJS, and UMD
-- Comprehensive styling with CSS variables and theming support
-
-## [0.1.0] - 2023-06-09
-
-### Added
-
-- Initial public release

package/src/lib/theme/devtools/DesignTokensCustomizer.stories.tsx

@@ -1,215 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { DesignTokensCustomizer } from './DesignTokensCustomizer';
-import { useState } from 'react';
-
-// Enhanced preview components
-const PreviewContainer = ({
-  title,
-  description,
-  children,
-}: {
-  title?: string;
-  description?: string;
-  children: React.ReactNode;
-}) => (
-  <div className="story-preview-container">
-    {title && <h3 className="story-preview-title">{title}</h3>}
-    {description && <p className="story-preview-description">{description}</p>}
-    <div className="story-preview-content">{children}</div>
-  </div>
-);
-
-const meta: Meta<typeof DesignTokensCustomizer> = {
-  title: 'DevTools/DesignTokensCustomizer',
-  component: DesignTokensCustomizer,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component: 'Interactive design tokens customization tool for real-time theme adjustments.',
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof DesignTokensCustomizer>;
-
-// Basic Usage
-export const Default: Story = {
-  render: () => (
-    <PreviewContainer
-      title="Design Tokens Customizer"
-      description="Interactive tool for customizing design tokens in real-time"
-    >
-      <DesignTokensCustomizer />
-    </PreviewContainer>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: 'The default design tokens customizer with all standard controls and features.',
-      },
-    },
-  },
-};
-
-// With Custom Configuration
-export const WithCustomConfig: Story = {
-  render: () => {
-    const customConfig = {
-      colors: {
-        primary: '#667eea',
-        secondary: '#764ba2',
-        accent: '#f093fb',
-      },
-      spacing: {
-        small: '8px',
-        medium: '16px',
-        large: '24px',
-      },
-      typography: {
-        fontFamily: 'Inter, sans-serif',
-        fontSize: '16px',
-        fontWeight: '400',
-      },
-    };
-
-    return (
-      <PreviewContainer
-        title="Custom Configuration"
-        description="Design tokens customizer with predefined custom configuration"
-      >
-        <DesignTokensCustomizer initialConfig={customConfig} />
-      </PreviewContainer>
-    );
-  },
-};
-
-// Theme Preview Mode
-export const ThemePreview: Story = {
-  render: () => (
-    <PreviewContainer
-      title="Theme Preview Mode"
-      description="Customizer with live theme preview components"
-    >
-      <div className="theme-preview-layout">
-        <div className="customizer-panel">
-          <DesignTokensCustomizer />
-        </div>
-        <div className="preview-panel">
-          <div className="preview-components">
-            <button className="preview-button">Primary Button</button>
-            <button className="preview-button secondary">Secondary Button</button>
-            <div className="preview-card">
-              <h3>Preview Card</h3>
-              <p>This card updates in real-time with your token changes.</p>
-              <input className="preview-input" placeholder="Type to see styling" />
-            </div>
-            <div className="preview-colors">
-              <div className="color-swatch primary"></div>
-              <div className="color-swatch secondary"></div>
-              <div className="color-swatch accent"></div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </PreviewContainer>
-  ),
-  parameters: {
-    viewport: {
-      viewports: {
-        desktop: {
-          name: 'Desktop',
-          styles: { width: '1200px', height: '800px' },
-        },
-      },
-      defaultViewport: 'desktop',
-    },
-  },
-};
-
-// Compact Mode
-export const Compact: Story = {
-  render: () => (
-    <PreviewContainer
-      title="Compact Mode"
-      description="Space-efficient customizer for smaller screens"
-    >
-      <DesignTokensCustomizer compact={true} />
-    </PreviewContainer>
-  ),
-  parameters: {
-    viewport: {
-      viewports: {
-        mobile: {
-          name: 'Mobile',
-          styles: { width: '375px', height: '667px' },
-        },
-      },
-      defaultViewport: 'mobile',
-    },
-  },
-};
-
-// With Export Options
-export const WithExport: Story = {
-  render: () => {
-    const [exportData, setExportData] = useState('');
-
-    const handleExport = (tokens: any) => {
-      setExportData(JSON.stringify(tokens, null, 2));
-    };
-
-    return (
-      <PreviewContainer
-        title="With Export Options"
-        description="Customizer with export functionality for sharing themes"
-      >
-        <div className="export-workflow">
-          <DesignTokensCustomizer onExport={handleExport} />
-          {exportData && (
-            <div className="export-output">
-              <h4>Exported Theme Data:</h4>
-              <pre>{exportData}</pre>
-              <button
-                onClick={() => navigator.clipboard.writeText(exportData)}
-                className="copy-button"
-              >
-                Copy to Clipboard
-              </button>
-            </div>
-          )}
-        </div>
-      </PreviewContainer>
-    );
-  },
-};
-
-// Interactive Tutorial
-export const InteractiveTutorial: Story = {
-  render: () => (
-    <PreviewContainer
-      title="Interactive Tutorial"
-      description="Guided tour of the design tokens customizer features"
-    >
-      <div className="tutorial-container">
-        <div className="tutorial-steps">
-          <div className="tutorial-step active">
-            <h4>Step 1: Explore Color Tokens</h4>
-            <p>Click on the Colors section to customize your primary and secondary colors.</p>
-          </div>
-          <div className="tutorial-step">
-            <h4>Step 2: Adjust Typography</h4>
-            <p>Modify font sizes, weights, and line heights for better readability.</p>
-          </div>
-          <div className="tutorial-step">
-            <h4>Step 3: Configure Spacing</h4>
-            <p>Set consistent spacing values for margins and padding.</p>
-          </div>
-        </div>
-        <DesignTokensCustomizer />
-      </div>
-    </PreviewContainer>
-  ),
-};