@cqa-lib/cqa-ui 1.0.84 → 1.0.87

package/.github/workflows/README.md

@@ -0,0 +1,152 @@
+# CI/CD Pipeline Setup
+
+This repository uses GitHub Actions for continuous integration and deployment.
+
+## Workflows
+
+### 1. CI Workflow (`ci.yml`)
+- Runs on pull requests and pushes to main/master
+- Builds the package to ensure it compiles correctly
+- Does not publish to npm
+
+### 2. Publish Workflow (`publish.yml`)
+- Runs on pushes to main/master branch
+- Runs on version tags (e.g., `v1.0.0`)
+- Can be manually triggered from GitHub Actions UI
+- Builds and publishes the package to npm
+
+## Setup Instructions
+
+### 1. Verify npm Organization/Scope Access
+
+**Important**: For scoped packages like `@cqa-lib/cqa-ui`, you need to ensure:
+
+1. **If `@cqa-lib` is an npm organization:**
+   - You must be a member of the `@cqa-lib` organization
+   - You must have publish permissions for the organization
+   - Go to [npmjs.com/org/cqa-lib](https://www.npmjs.com/org/cqa-lib) to verify membership
+
+2. **If `@cqa-lib` is your personal scope:**
+   - Make sure you're logged into the correct npm account
+   - The package name matches your npm username/scope
+
+3. **First-time publish:**
+   - If the package doesn't exist yet, npm will create it
+   - Make sure you have permission to create packages in the scope
+
+### 2. Create NPM Granular Token
+
+1. Go to [npmjs.com/settings/~/tokens](https://www.npmjs.com/settings/~/tokens)
+2. Click "Generate New Token" → "Granular Access Token"
+3. Configure the token:
+   - **Token name**: `cqa-ui-lib-ci` (or any descriptive name)
+   - **Expiration**: 90 days (maximum for write tokens)
+   - **Type**: Automation
+   - **Packages**: 
+     - If `@cqa-lib` is an org: Select `@cqa-lib/cqa-ui` specifically
+     - If personal scope: Select "All packages" or your scope
+   - **Permissions**: Read and write
+   - **Bypass 2FA**: Enable this for non-interactive CI/CD workflows
+
+4. Copy the token (you won't be able to see it again!)
+
+### 2. Add Secret to GitHub Repository
+
+1. Go to your GitHub repository
+2. Navigate to **Settings** → **Secrets and variables** → **Actions**
+3. Click **New repository secret**
+4. **Name: `NODE_AUTH_TOKEN`** (Important: Must be exactly `NODE_AUTH_TOKEN` for `setup-node` action)
+5. Value: Paste your granular token
+6. Click **Add secret**
+
+**Note**: The secret must be named `NODE_AUTH_TOKEN` (not `NPM_TOKEN`) because the `actions/setup-node` action automatically uses this secret name when `registry-url` is provided.
+
+### 3. Publishing Options
+
+#### Option A: Auto-publish on commits to main/master
+- Every push to main/master will trigger a publish
+- Make sure to bump the version in `package.json` before committing
+
+#### Option B: Publish on version tags (Recommended)
+1. Update version in `package.json`
+2. Commit and push:
+   ```bash
+   git add package.json
+   git commit -m "chore: bump version to 1.0.85"
+   git push
+   ```
+3. Create and push a version tag:
+   ```bash
+   git tag v1.0.85
+   git push origin v1.0.85
+   ```
+4. The workflow will automatically publish and create a GitHub release
+
+#### Option C: Manual publish
+- Go to **Actions** tab in GitHub
+- Select **Publish to npm** workflow
+- Click **Run workflow**
+- Select branch and click **Run workflow**
+
+## Important Notes
+
+- **Token Expiration**: Granular tokens expire after 90 days. You'll need to regenerate and update the secret.
+- **2FA**: If you have 2FA enabled on your npm account, make sure to enable "Bypass 2FA" when creating the token for CI/CD.
+- **Version Management**: Always update the version in `package.json` before publishing.
+- **OIDC Alternative**: For more secure publishing, consider setting up [OIDC trusted publishing](https://docs.npmjs.com/about-oidc-trusted-publishing) which eliminates the need for tokens.
+
+## Troubleshooting
+
+### "401 Unauthorized" or "Authentication failed"
+- **Check secret name**: The secret must be named `NODE_AUTH_TOKEN` (not `NPM_TOKEN`)
+- Verify the secret exists in GitHub: **Settings** → **Secrets and variables** → **Actions**
+- Your NODE_AUTH_TOKEN secret may have expired (90-day limit)
+- Regenerate the token and update the secret
+- Verify the token hasn't been revoked in npm settings
+
+### "404 Not Found" when publishing
+This error typically means one of the following:
+
+1. **Package doesn't exist yet (first publish):**
+   - This is normal for the first publish
+   - Make sure you have permission to create packages in the `@cqa-lib` scope
+   - Verify you're a member of the `@cqa-lib` organization (if it's an org)
+
+2. **No access to the scope:**
+   - Check if `@cqa-lib` is an organization you're a member of
+   - Verify your npm account has publish permissions
+   - Try running `npm whoami` locally to verify your npm identity
+
+3. **Token permissions:**
+   - Ensure the granular token has "Read and write" permissions
+   - Make sure the token is scoped to `@cqa-lib/cqa-ui` or "All packages"
+   - Verify "Bypass 2FA" is enabled for automation tokens
+
+4. **Package name mismatch:**
+   - Ensure the package name in `package.json` matches exactly: `@cqa-lib/cqa-ui`
+   - Check that `publishConfig.access` is set to `public` in `package.json`
+
+### "You do not have permission to publish"
+- Verify you're a member of the `@cqa-lib` organization
+- Check organization settings for publish permissions
+- Ensure your npm account has the correct role (admin/maintainer)
+
+### Test locally first
+Before relying on CI/CD, test publishing locally:
+```bash
+# Set your token
+export NPM_TOKEN="your-token-here"
+echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > ~/.npmrc
+
+# Build and publish
+npm run build:cqa-ui
+cd dist/cqa-ui
+npm publish --access public --dry-run  # Test without publishing
+npm publish --access public            # Actual publish
+```
+
+### Build fails
+- Check Node.js version matches (16.20.2)
+- Verify all dependencies are installed correctly
+- Review build logs in GitHub Actions
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cqa-lib/cqa-ui",
-  "version": "1.0.84",
+  "version": "1.0.87",
   "description": "UI Kit library for Angular 13.4",
   "keywords": [
     "angular",

package/storybook-static/assets/images/README.md

@@ -1,66 +0,0 @@
-# Image Assets
-
-This folder contains all image assets used by the UI library components.
-
-## Structure
-
-- Place all image files (PNG, SVG, JPG, etc.) in this directory
-- Use descriptive file names (e.g., `test-case-icon.svg`, `empty-state-default.png`)
-- For component-specific images, consider creating subdirectories if needed
-
-## Available Images
-
-The following images are configured for use in empty state components:
-
-- `TestCaseIcon.png` - Test case/document with gear icon
-- `SearchIcon.png` - Magnifying glass with question mark
-- `FilesIcon.png` - Folder/upload icon
-- `DashboardIcon.png` - Dashboard overview cards
-- `StepsIcon.png` - Checklist / tasks icon
-- `document-gear-icon.svg` - Document with gear overlay
-- `ReportsIcon.png` - Analytics/Reports chart icon
-- `SearchIcon.png` - Default fallback icon
-
-## Usage
-
-### Using Image Constants
-
-Import the image constants for type-safe access:
-
-```typescript
-import { EMPTY_STATE_IMAGES } from '../assets/images/image-assets.constants';
-
-// In component
-imageUrl: EMPTY_STATE_IMAGES.TEST_CASE
-```
-
-### Direct Path Reference
-
-You can also reference images directly:
-
-```typescript
-// Example in component
-imageUrl: 'assets/images/test-case-icon.svg'
-```
-
-### In Storybook
-
-Images are automatically available in Storybook stories:
-
-```typescript
-import { EMPTY_STATE_IMAGES } from '../assets/images/image-assets.constants';
-
-export const MyStory = Template.bind({});
-MyStory.args = {
-  imageUrl: EMPTY_STATE_IMAGES.TEST_CASE,
-  // ...
-};
-```
-
-## Notes
-
-- Keep image file sizes optimized for web
-- Use SVG format when possible for scalability
-- Ensure all images are properly licensed for use in the library
-- Images will be included in the built library and available to consuming applications
-