@abstraks-dev/ui-library 1.0.5 → 1.1.5

package/README.md

@@ -15,14 +15,14 @@ import { Button, Card, TextInput } from 'ui-library';
 import 'ui-library/dist/styles/main.css';
 
 function App() {
-  return (
-    <div>
-      <Card>
-        <TextInput label="Name" placeholder="Enter your name" />
-        <Button variant="primary">Submit</Button>
-      </Card>
-    </div>
-  );
+	return (
+		<div>
+			<Card>
+				<TextInput label='Name' placeholder='Enter your name' />
+				<Button variant='primary'>Submit</Button>
+			</Card>
+		</div>
+	);
 }
 ```
 
@@ -59,9 +59,41 @@ npm run build-css:compressed
 
 ## Deployment
 
-This library is automatically deployed to npm using GitHub Actions.
+This library supports both manual and automated deployment to npm using GitHub Actions.
 
-### Automatic Deployment
+### Automated Version Bumping
+
+The library includes automated version bumping based on commit message conventions:
+
+#### Conventional Commits
+
+Use these commit message prefixes to automatically bump versions:
+
+- **`feat:`** or **`feature:`** → **Minor version bump** (1.0.0 → 1.1.0)
+- **`fix:`** or **`bugfix:`** → **Patch version bump** (1.0.0 → 1.0.1)
+- **`feat!:`** or **`BREAKING CHANGE`** → **Major version bump** (1.0.0 → 2.0.0)
+
+#### Examples:
+
+```bash
+git commit -m "feat: add new Button component variants"      # Minor bump
+git commit -m "fix: resolve focus issue in TextInput"        # Patch bump
+git commit -m "feat!: remove deprecated props from Card"     # Major bump
+```
+
+#### Using Auto Tool
+
+You can also use the configured `auto` tool:
+
+```bash
+# Automatic release based on PR labels
+npm run release
+
+# Or use auto directly
+npx auto shipit
+```
+
+### Manual Deployment
 
 - Push a version tag (e.g., `v1.0.0`) to trigger automatic deployment
 - The workflow will run tests, build the library, and publish to npm
@@ -85,7 +117,6 @@ git tag v1.0.0
 git push origin v1.0.0
 ```
 
-
 # UI Library Testing
 
 This document explains how to run and write tests for the UI Library components.
@@ -130,6 +161,7 @@ src/
 We have comprehensive unit tests for:
 
 ### Components
+
 - **Button** - 9 tests covering props, events, states, and rendering
 - **Heading** - 8 tests covering different heading levels and props
 - **Label** - 12 tests covering label text, required states, and children
@@ -137,6 +169,7 @@ We have comprehensive unit tests for:
 - **MenuHover** - 8 tests covering toggle behavior, CSS classes, and props
 
 ### Icons
+
 - **ChevronDown** - 8 tests covering SVG properties, styling, and props
 - **ArrowRight** - 10 tests covering multi-path SVG structure and props
 
@@ -145,17 +178,20 @@ We have comprehensive unit tests for:
 ## 🧪 Testing Framework
 
 ### Tech Stack
+
 - **Jest** - Test runner and assertion library
 - **React Testing Library** - Component testing utilities
 - **@testing-library/user-event** - User interaction simulation
 - **@testing-library/jest-dom** - Extended Jest matchers
 
 ### Configuration
+
 - **Jest Config**: `jest.config.json`
-- **Babel Config**: `babel.config.json` 
+- **Babel Config**: `babel.config.json`
 - **Setup File**: `src/setupTests.js`
 
 ### Key Features
+
 - **CSS Import Mocking** - CSS files are automatically mocked
 - **Custom Test ID Attribute** - Uses `data-test-id` instead of `data-testid`
 - **SVG Testing** - Proper handling of SVG components
@@ -172,85 +208,90 @@ import userEvent from '@testing-library/user-event';
 import { YourComponent } from '../YourComponent';
 
 describe('YourComponent', () => {
-  test('renders correctly', () => {
-    render(<YourComponent />);
-    
-    expect(screen.getByRole('button')).toBeInTheDocument();
-  });
-
-  test('handles user interaction', async () => {
-    const user = userEvent.setup();
-    const handleClick = jest.fn();
-    
-    render(<YourComponent onClick={handleClick} />);
-    
-    await user.click(screen.getByRole('button'));
-    expect(handleClick).toHaveBeenCalledTimes(1);
-  });
+	test('renders correctly', () => {
+		render(<YourComponent />);
+
+		expect(screen.getByRole('button')).toBeInTheDocument();
+	});
+
+	test('handles user interaction', async () => {
+		const user = userEvent.setup();
+		const handleClick = jest.fn();
+
+		render(<YourComponent onClick={handleClick} />);
+
+		await user.click(screen.getByRole('button'));
+		expect(handleClick).toHaveBeenCalledTimes(1);
+	});
 });
 ```
 
 ### Testing Patterns
 
 #### 1. **Component Rendering**
+
 ```jsx
 test('renders with default props', () => {
-  render(<Button>Click me</Button>);
-  
-  const button = screen.getByRole('button');
-  expect(button).toBeInTheDocument();
-  expect(button).toHaveTextContent('Click me');
+	render(<Button>Click me</Button>);
+
+	const button = screen.getByRole('button');
+	expect(button).toBeInTheDocument();
+	expect(button).toHaveTextContent('Click me');
 });
 ```
 
 #### 2. **Props Testing**
+
 ```jsx
 test('applies custom className', () => {
-  render(<Button additionalClassName="custom">Test</Button>);
-  
-  const button = screen.getByRole('button');
-  expect(button).toHaveClass('button', 'custom');
+	render(<Button additionalClassName='custom'>Test</Button>);
+
+	const button = screen.getByRole('button');
+	expect(button).toHaveClass('button', 'custom');
 });
 ```
 
 #### 3. **User Interactions**
+
 ```jsx
 test('handles click events', async () => {
-  const user = userEvent.setup();
-  const handleClick = jest.fn();
-  
-  render(<Button onClick={handleClick}>Click</Button>);
-  
-  await user.click(screen.getByRole('button'));
-  expect(handleClick).toHaveBeenCalledTimes(1);
+	const user = userEvent.setup();
+	const handleClick = jest.fn();
+
+	render(<Button onClick={handleClick}>Click</Button>);
+
+	await user.click(screen.getByRole('button'));
+	expect(handleClick).toHaveBeenCalledTimes(1);
 });
 ```
 
 #### 4. **State Testing**
+
 ```jsx
 test('toggles state when clicked', async () => {
-  const user = userEvent.setup();
-  render(<Checkbox labelText="Test" setName="test" />);
-  
-  const checkbox = screen.getByRole('checkbox');
-  
-  expect(checkbox).not.toBeChecked();
-  await user.click(checkbox);
-  expect(checkbox).toBeChecked();
+	const user = userEvent.setup();
+	render(<Checkbox labelText='Test' setName='test' />);
+
+	const checkbox = screen.getByRole('checkbox');
+
+	expect(checkbox).not.toBeChecked();
+	await user.click(checkbox);
+	expect(checkbox).toBeChecked();
 });
 ```
 
 #### 5. **SVG/Icon Testing**
+
 ```jsx
 test('renders SVG with correct attributes', () => {
-  render(<ChevronDown size={32} color="blue" />);
-  
-  const svg = document.querySelector('svg');
-  expect(svg).toHaveAttribute('width', '32');
-  expect(svg).toHaveAttribute('height', '32');
-  
-  const path = svg.querySelector('path');
-  expect(path).toHaveAttribute('stroke', 'blue');
+	render(<ChevronDown size={32} color='blue' />);
+
+	const svg = document.querySelector('svg');
+	expect(svg).toHaveAttribute('width', '32');
+	expect(svg).toHaveAttribute('height', '32');
+
+	const path = svg.querySelector('path');
+	expect(path).toHaveAttribute('stroke', 'blue');
 });
 ```
 
@@ -277,7 +318,7 @@ screen.getByTestId('custom-component')
 
 // Query variants
 getBy* // Throws error if not found
-queryBy* // Returns null if not found  
+queryBy* // Returns null if not found
 findBy* // Async, waits for element to appear
 ```
 
@@ -306,7 +347,7 @@ screen.logTestingPlaygroundURL();
 ## 📊 Coverage Goals
 
 - **Statements**: 80%+
-- **Branches**: 80%+  
+- **Branches**: 80%+
 - **Functions**: 80%+
 - **Lines**: 80%+
 
@@ -315,7 +356,7 @@ Current coverage is low because we only have tests for a few components. Add tes
 ## 🚀 Next Steps
 
 1. **Add tests for remaining components** - Cover all components in the library
-2. **Integration tests** - Test component interactions and workflows  
+2. **Integration tests** - Test component interactions and workflows
 3. **Visual regression tests** - Consider adding Chromatic or similar tools
 4. **Performance tests** - Test rendering performance for complex components
 5. **Accessibility tests** - Add automated a11y testing
@@ -324,7 +365,6 @@ Current coverage is low because we only have tests for a few components. Add tes
 
 Happy testing! 🧪✨
 
-
 # Accessibility Utilities Usage Guide
 
 ## Overview
@@ -334,8 +374,10 @@ The `utils/accessibility.js` module provides safe, SSR-compatible utilities for
 ## Available Utilities
 
 ### `announceToScreenReader(message, priority, timeout)`
+
 Safe screen reader announcements using ARIA live regions.
-- **Parameters**: 
+
+- **Parameters**:
   - `message` (string): Message to announce
   - `priority` ('polite'|'assertive'): Announcement priority (default: 'polite')
   - `timeout` (number): Cleanup timeout in ms (default: 1000)
@@ -343,14 +385,18 @@ Safe screen reader announcements using ARIA live regions.
 - **SSR Safe**: Yes (returns no-op function)
 
 ### `createLiveRegion(priority)`
+
 Creates a persistent live region for multiple announcements.
+
 - **Parameters**:
   - `priority` ('polite'|'assertive'): Announcement priority (default: 'polite')
 - **Returns**: Object with `announce(message)` and `destroy()` methods
 - **SSR Safe**: Yes (returns no-op methods)
 
 ### `safeFocus(element, options)`
+
 Safely focuses an element with fallback handling.
+
 - **Parameters**:
   - `element` (HTMLElement|string): Element or selector to focus
   - `options` (object): Focus options (optional)
@@ -362,10 +408,12 @@ Safely focuses an element with fallback handling.
 ### ✅ Components Using Accessibility Utilities
 
 1. **Error.jsx**
+
    - Uses built-in ARIA live regions (no manual utilities needed)
    - Serves as example of proper component-level accessibility
 
 2. **Form.jsx**
+
    - **Updated**: Uses `safeFocus` for error field focusing
    - **Updated**: Uses `announceToScreenReader` for form validation announcements
    - **Location**: Lines 1-4 (imports), Line 184 (focus call)
@@ -377,21 +425,25 @@ Safely focuses an element with fallback handling.
 ### ✅ Stories Using Accessibility Utilities
 
 1. **Avatar.stories.js**
+
    - **Updated**: Replaced manual DOM manipulation with `announceToScreenReader`
    - **Removed**: 13 lines of unsafe DOM manipulation code
    - **Benefits**: SSR safety, consistent behavior, proper cleanup
 
 2. **AnimationGroup.stories.js**
+
    - **Updated**: Replaced manual DOM manipulation with `announceToScreenReader`
    - **Removed**: 15 lines of unsafe DOM manipulation code
    - **Benefits**: Better positioning, consistent ARIA attributes
 
 3. **AnimationToggle.stories.js**
+
    - **Updated**: Uses `safeFocus` for focus management
    - **Updated**: Uses `announceToScreenReader` for state announcements
    - **Benefits**: Safer focus operations, proper error handling
 
 4. **Card.stories.js**
+
    - **Updated**: Replaced manual DOM manipulation with `announceToScreenReader`
    - **Updated**: Uses `safeFocus` for ellipses menu focus management
    - **Removed**: 14 lines of duplicate DOM manipulation code
@@ -405,15 +457,18 @@ Safely focuses an element with fallback handling.
 ### 🔄 Potential Future Updates
 
 1. **AnimationToggle.jsx** (Component level)
+
    - Could use `safeFocus` for internal focus management
    - Currently relies on native focus which works well
 
 2. **Crud.jsx**
+
    - Has built-in screen reader announcements (lines 538-542)
    - Could potentially use `createLiveRegion` for efficiency with many operations
    - Current implementation is already quite good
 
 3. **Button.jsx**
+
    - Has comprehensive ARIA support
    - Focus management handled by browser - no updates needed
 
@@ -425,10 +480,11 @@ Safely focuses an element with fallback handling.
 ### ❓ Stories with Existing Accessibility Patterns
 
 1. **Crud.stories.js**
+
    - Has comprehensive ARIA live regions built into component
    - No manual DOM manipulation found - well implemented
 
-2. **Button.stories.js** 
+2. **Button.stories.js**
    - Uses component's built-in ARIA features
    - No manual screen reader code found - good as is
 
@@ -437,11 +493,13 @@ Safely focuses an element with fallback handling.
 ### ✅ When to Use These Utilities
 
 1. **Use `announceToScreenReader`** when:
+
    - Making dynamic announcements in Storybook stories
    - Announcing user actions or state changes
    - Providing feedback for asynchronous operations
 
 2. **Use `createLiveRegion`** when:
+
    - Making multiple announcements in succession
    - Need more control over announcement timing
    - Building components with frequent status updates
@@ -454,6 +512,7 @@ Safely focuses an element with fallback handling.
 ### ❌ When NOT to Use These Utilities
 
 1. **Don't use for**:
+
    - Form elements with native focus handling
    - Components with built-in ARIA live regions
    - Simple static content that doesn't need announcements
@@ -483,16 +542,19 @@ Safely focuses an element with fallback handling.
 ## Testing Recommendations
 
 ### Screen Reader Testing
+
 - Test with NVDA, JAWS, VoiceOver to verify announcements
 - Verify announcements work in different browser environments
 - Test SSR scenarios to ensure no client-side errors
 
-### Focus Management Testing  
+### Focus Management Testing
+
 - Test keyboard navigation flows
 - Verify focus indicators are visible
 - Test with dynamic content scenarios
 
 ### Cross-browser Testing
+
 - Verify utilities work across different browsers
 - Test in high contrast mode
 - Verify reduced motion preferences are respected
@@ -508,8 +570,6 @@ Safely focuses an element with fallback handling.
 
 This comprehensive integration ensures the UI library follows accessibility best practices while maintaining clean, maintainable code.
 
-
-
 # Deployment Guide
 
 This guide explains how to deploy the UI library to npm using the automated GitHub Actions workflow.
@@ -544,13 +604,13 @@ Ensure your `package.json` has:
 
 ```json
 {
-  "name": "your-package-name",
-  "version": "1.0.0",
-  "main": "dist/index.js",
-  "files": ["dist"],
-  "scripts": {
-    "build": "npm run build-command"
-  }
+	"name": "your-package-name",
+	"version": "1.0.0",
+	"main": "dist/index.js",
+	"files": ["dist"],
+	"scripts": {
+		"build": "npm run build-command"
+	}
 }
 ```
 
@@ -572,6 +632,7 @@ git push origin v1.0.0
 ```
 
 The workflow will:
+
 1. ✅ Run all tests
 2. ✅ Build the library
 3. ✅ Publish to npm
@@ -595,6 +656,7 @@ Use this for immediate deployment or when you want to control the version bump:
 The deployment workflow performs these steps:
 
 ### 1. Testing Phase
+
 - ✅ Checkout code
 - ✅ Setup Node.js
 - ✅ Install dependencies
@@ -602,6 +664,7 @@ The deployment workflow performs these steps:
 - ✅ Generate coverage report
 
 ### 2. Build and Deploy Phase
+
 - ✅ Build the library
 - ✅ Version management
 - ✅ Verify build artifacts
@@ -611,17 +674,20 @@ The deployment workflow performs these steps:
 ## Monitoring Deployment
 
 ### Check GitHub Actions
+
 1. Go to Actions tab in your repository
 2. Click on the running/completed workflow
 3. Review logs for each step
 4. Verify success or investigate failures
 
 ### Verify NPM Publication
+
 1. Check [npmjs.com](https://www.npmjs.com/package/your-package-name)
 2. Verify the new version is available
 3. Test installation: `npm install your-package-name@latest`
 
 ### Test Installation
+
 ```bash
 # Create a test project
 mkdir test-installation && cd test-installation
@@ -639,24 +705,29 @@ node -e "console.log(require('your-package-name'))"
 ### Common Issues
 
 **❌ NPM_TOKEN not set**
+
 - Error: `npm ERR! need auth`
 - Solution: Verify the NPM_TOKEN secret is correctly configured
 
 **❌ Package name already exists**
+
 - Error: `npm ERR! 403 Forbidden`
 - Solution: Choose a unique package name or scope it (`@username/package-name`)
 
 **❌ Build failures**
+
 - Error: Various build errors
 - Solution: Run `npm run build` locally first to identify issues
 
 **❌ Test failures**
+
 - Error: Tests fail in CI
 - Solution: Ensure all tests pass locally with `npm test`
 
 ### Debug Steps
 
 1. **Local verification**:
+
    ```bash
    npm ci
    npm test
@@ -665,6 +736,7 @@ node -e "console.log(require('your-package-name'))"
    ```
 
 2. **Check workflow logs**:
+
    - Go to Actions → Failed workflow → Click on failed step
    - Review error messages and stack traces
 
@@ -676,17 +748,20 @@ node -e "console.log(require('your-package-name'))"
 ## Best Practices
 
 ### Version Management
+
 - Use semantic versioning (semver)
 - Document changes in CHANGELOG.md
 - Test thoroughly before releasing
 
 ### Quality Gates
+
 - All tests must pass
 - Code coverage maintained
 - Build artifacts verified
 - Documentation updated
 
 ### Release Notes
+
 - Use descriptive commit messages
 - Tag releases with clear version numbers
 - Maintain changelog for users
@@ -701,6 +776,7 @@ node -e "console.log(require('your-package-name'))"
 ## Support
 
 If you encounter issues:
+
 1. Check this guide first
 2. Review GitHub Actions logs
 3. Verify npm token permissions

package/dist/styles/_variables.scss

@@ -228,7 +228,7 @@ $css-vars: (
 	gray-700: $gray-700,
 	gray-800: $gray-800,
 	gray-900: $gray-900,
-	black: $black,
+	'black': $black,
 	color-muted-blue: $color-muted-blue,
 	heading-one: $heading-one,
 	heading-two: $heading-two,

package/dist/utils/index.js

@@ -3,17 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _ScrollHandler = require("./ScrollHandler");
-Object.keys(_ScrollHandler).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _ScrollHandler[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _ScrollHandler[key];
-    }
-  });
-});
 var _useWindowSize = require("./useWindowSize");
 Object.keys(_useWindowSize).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/dist/utils/utils/index.js

@@ -1,4 +1,3 @@
-export * from './ScrollHandler';
 export * from './useWindowSize';
 export * from './accessibility';
 export * from './validation';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abstraks-dev/ui-library",
-  "version": "1.0.5",
+  "version": "1.1.5",
   "description": "User Interface library",
   "main": "dist/index.js",
   "files": [

package/dist/utils/ScrollHandler.js

@@ -1,30 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactRouterDom = require("react-router-dom");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const ScrollHandler = ({
-  location
-}) => {
-  (0, _react.useEffect)(() => {
-    const element = document.getElementById(location.hash);
-    setTimeout(() => {
-      window.scrollTo({
-        behavior: element ? 'smooth' : 'auto',
-        top: element ? element.offsetTop : 0
-      });
-    }, 100);
-  }, [location]);
-  return null;
-};
-ScrollHandler.propTypes = {
-  location: _propTypes.default.shape({
-    hash: _propTypes.default.string
-  }).isRequired
-};
-var _default = exports.default = (0, _reactRouterDom.withRouter)(ScrollHandler);

package/dist/utils/utils/ScrollHandler.js

@@ -1,26 +0,0 @@
-import { useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { withRouter } from 'react-router-dom';
-
-const ScrollHandler = ({ location }) => {
-	useEffect(() => {
-		const element = document.getElementById(location.hash);
-
-		setTimeout(() => {
-			window.scrollTo({
-				behavior: element ? 'smooth' : 'auto',
-				top: element ? element.offsetTop : 0,
-			});
-		}, 100);
-	}, [location]);
-
-	return null;
-};
-
-ScrollHandler.propTypes = {
-	location: PropTypes.shape({
-		hash: PropTypes.string,
-	}).isRequired,
-};
-
-export default withRouter(ScrollHandler);