@emporix/cockpit-component-library 1.0.2 → 1.0.4

package/README.md

@@ -9,7 +9,7 @@ A modern React component library built with TypeScript, Vite, and SCSS modules.
 - 📚 **Storybook**: Interactive component documentation
 - 🧪 **Testing**: Comprehensive test suite with Vitest and React Testing Library
 - 📦 **Library Build**: Optimized for npm package distribution
-- 🔄 **CI/CD**: Automated testing and publishing pipeline
+- 🔄 **CI/CD**: Automated testing on push/PR; npm publish on version tags
 - 🎨 **CSS Variables**: Global theming system with CSS custom properties
 
 ## Quick Start
@@ -362,8 +362,7 @@ Secondary action button variant with API similar to `PrimaryButton`.
 
 ```tsx
 import { SecondaryButton } from '@emporix/cockpit-component-library'
-
-<SecondaryButton label="Cancel" />
+;<SecondaryButton label='Cancel' />
 ```
 
 ### TertiaryButton
@@ -372,8 +371,7 @@ Low-emphasis button for tertiary actions.
 
 ```tsx
 import { TertiaryButton } from '@emporix/cockpit-component-library'
-
-<TertiaryButton label="Learn more" />
+;<TertiaryButton label='Learn more' />
 ```
 
 ### ContrastButton
@@ -382,8 +380,7 @@ Button variant designed for high-contrast contexts.
 
 ```tsx
 import { ContrastButton } from '@emporix/cockpit-component-library'
-
-<ContrastButton label="Open" />
+;<ContrastButton label='Open' />
 ```
 
 ### Dropdown
@@ -392,8 +389,7 @@ Single-select dropdown component with optional filtering, editable mode, and tem
 
 ```tsx
 import { Dropdown } from '@emporix/cockpit-component-library'
-
-<Dropdown options={options} value={value} onChange={(e) => setValue(e.value)} />
+;<Dropdown options={options} value={value} onChange={e => setValue(e.value)} />
 ```
 
 ### MultiSelect
@@ -402,8 +398,11 @@ Multi-value selection component for choosing multiple options from a list.
 
 ```tsx
 import { MultiSelect } from '@emporix/cockpit-component-library'
-
-<MultiSelect options={options} value={value} onChange={(e) => setValue(e.value)} />
+;<MultiSelect
+  options={options}
+  value={value}
+  onChange={e => setValue(e.value)}
+/>
 ```
 
 ### RichTextEditor
@@ -412,8 +411,7 @@ Rich text input component for formatted content editing.
 
 ```tsx
 import { RichTextEditor } from '@emporix/cockpit-component-library'
-
-<RichTextEditor value={value} onChange={setValue} />
+;<RichTextEditor value={value} onChange={setValue} />
 ```
 
 ### Spinner
@@ -422,8 +420,7 @@ Loading indicator component with configurable size.
 
 ```tsx
 import { Spinner } from '@emporix/cockpit-component-library'
-
-<Spinner size="md" />
+;<Spinner size='md' />
 ```
 
 ### Breadcrumb
@@ -432,8 +429,7 @@ Navigation breadcrumb for representing hierarchical page location.
 
 ```tsx
 import { Breadcrumb } from '@emporix/cockpit-component-library'
-
-<Breadcrumb items={items} />
+;<Breadcrumb items={items} />
 ```
 
 ### IconCard
@@ -442,8 +438,7 @@ Card-like container with a prominent icon/content layout.
 
 ```tsx
 import { IconCard } from '@emporix/cockpit-component-library'
-
-<IconCard title="Title" description="Description" icon={<span />} />
+;<IconCard title='Title' description='Description' icon={<span />} />
 ```
 
 ### FileUploadDropzone
@@ -452,8 +447,7 @@ Dropzone component for drag-and-drop file uploads with type constraints.
 
 ```tsx
 import { FileUploadDropzone } from '@emporix/cockpit-component-library'
-
-<FileUploadDropzone acceptedTypes={['image']} onFilesSelected={handleFiles} />
+;<FileUploadDropzone acceptedTypes={['image']} onFilesSelected={handleFiles} />
 ```
 
 ### AlertBox
@@ -462,8 +456,7 @@ Inline alert component for success, info, warning, and error messages.
 
 ```tsx
 import { AlertBox } from '@emporix/cockpit-component-library'
-
-<AlertBox variant="info" title="Heads up" />
+;<AlertBox variant='info' title='Heads up' />
 ```
 
 ### SideMenu
@@ -472,8 +465,7 @@ Composable side navigation menu with brand, nav items, and footer slots.
 
 ```tsx
 import { SideMenu } from '@emporix/cockpit-component-library'
-
-<SideMenu>{/* ... */}</SideMenu>
+;<SideMenu>{/* ... */}</SideMenu>
 ```
 
 ### TopNav
@@ -482,8 +474,7 @@ Top navigation/header component for page-level actions and context.
 
 ```tsx
 import { TopNav } from '@emporix/cockpit-component-library'
-
-<TopNav title="Dashboard" />
+;<TopNav title='Dashboard' />
 ```
 
 ### Toast
@@ -500,8 +491,7 @@ Dialog modal component for focused workflows and confirmations.
 
 ```tsx
 import { Modal } from '@emporix/cockpit-component-library'
-
-<Modal isOpen={open} onClose={onClose} title="Edit item" />
+;<Modal isOpen={open} onClose={onClose} title='Edit item' />
 ```
 
 ### ConfirmDialog
@@ -510,8 +500,7 @@ Preset confirmation dialog for destructive or high-impact actions.
 
 ```tsx
 import { ConfirmDialog } from '@emporix/cockpit-component-library'
-
-<ConfirmDialog open={open} onConfirm={onConfirm} onCancel={onCancel} />
+;<ConfirmDialog open={open} onConfirm={onConfirm} onCancel={onCancel} />
 ```
 
 ### ProductTable
@@ -520,8 +509,7 @@ Data table component focused on product records and common actions.
 
 ```tsx
 import { ProductTable } from '@emporix/cockpit-component-library'
-
-<ProductTable items={items} columns={columns} />
+;<ProductTable items={items} columns={columns} />
 ```
 
 ### ProductTableIconAddButton
@@ -530,8 +518,7 @@ Compact icon button variant used with `ProductTable` add flows.
 
 ```tsx
 import { ProductTableIconAddButton } from '@emporix/cockpit-component-library'
-
-<ProductTableIconAddButton onClick={onAdd} />
+;<ProductTableIconAddButton onClick={onAdd} />
 ```
 
 ### OrderTable
@@ -540,8 +527,7 @@ Data table for order rows and order-oriented workflows.
 
 ```tsx
 import { OrderTable } from '@emporix/cockpit-component-library'
-
-<OrderTable rows={rows} />
+;<OrderTable rows={rows} />
 ```
 
 ### OrderStatusTag
@@ -550,8 +536,7 @@ Status badge component for order state presentation.
 
 ```tsx
 import { OrderStatusTag } from '@emporix/cockpit-component-library'
-
-<OrderStatusTag status="submitted" />
+;<OrderStatusTag status='submitted' />
 ```
 
 ### Wizard
@@ -560,8 +545,7 @@ Step-based workflow component for multi-stage forms and processes.
 
 ```tsx
 import { Wizard } from '@emporix/cockpit-component-library'
-
-<Wizard steps={steps} />
+;<Wizard steps={steps} />
 ```
 
 ### Timeline
@@ -570,8 +554,7 @@ Chronological event list component for activity/history views.
 
 ```tsx
 import { Timeline } from '@emporix/cockpit-component-library'
-
-<Timeline events={events} />
+;<Timeline events={events} />
 ```
 
 ## Theming with CSS Variables
@@ -815,21 +798,66 @@ npm run build-storybook
 The library is built using Vite with optimized settings for npm distribution.
 
 ```bash
-# Build the library
+# Build the library locally
 npm run build:lib
 ```
 
 The build output includes:
 
-- ES modules (`index.es.js`)
-- UMD bundle (`index.umd.js`)
-- TypeScript declarations (`index.d.ts`)
-- CSS styles (`styles.css`)
+- ES modules (`dist/index.es.js`)
+- UMD bundle (`dist/index.umd.js`)
+- TypeScript declarations (`dist/index.d.ts`)
+- CSS styles (`dist/style.css`)
+
+The publish workflow runs `npm run build:lib` before `npm publish`.
+
+## Publishing a new version
+
+Releases are published to npm automatically when a **version tag** is pushed to GitHub. The workflow is defined in [`.github/workflows/publish.yml`](.github/workflows/publish.yml).
+
+### Prerequisites (one-time setup)
+
+1. **npm package** — `@emporix/cockpit-component-library` must exist on [npm](https://www.npmjs.com/package/@emporix/cockpit-component-library) with publish access configured for this repository.
+2. **npm Trusted Publishing** — On [npmjs.com](https://www.npmjs.com/), configure a trusted publisher for this package with:
+   - GitHub organization/repository: `emporix/cockpit-component-library`
+   - Workflow filename: `publish.yml`
+   - Environment: (optional)
+
+   The workflow uses OIDC (`id-token: write`); no `NPM_TOKEN` secret is required when Trusted Publishing is enabled.
+
+### Release steps
+
+1. Merge your changes to the default branch (`main`).
+2. Bump the version in `package.json` (semver, **without** the `v` prefix), for example `1.0.4` or `2.1.1`.
+3. Commit the version bump and push to `main`.
+4. Create and push a Git tag that matches the version with a `v` prefix:
+
+   ```bash
+   git tag v1.0.4
+   git push origin v1.0.4
+   ```
+
+5. Open **Actions** in GitHub and confirm the **Publish to npm** workflow succeeded.
+6. Verify the new version on npm:
+
+   ```bash
+   npm view @emporix/cockpit-component-library version
+   ```
+
+The tag must match `package.json` `version` (e.g. tag `v2.1.1` requires `"version": "2.1.1"`) and follow the format `v{major}.{minor}.{patch}`.
+
+### Example: publish `2.1.1`
+
+```bash
+# After updating package.json to "2.1.1" and pushing main:
+git tag v2.1.1
+git push origin v2.1.1
+```
 
-To publish a new version, run:
+To remove a tag locally before pushing:
 
 ```bash
-npm run publish
+git tag -d v2.1.1
 ```
 
 ## Code Formatting