@emporix/cockpit-component-library 0.0.5 → 1.0.1

package/README.md

@@ -64,6 +64,37 @@ If the above methods don't work, copy the CSS file from `node_modules/@emporix/c
 
 ## Components
 
+Current exported components:
+
+- `PrimaryButton`
+- `SecondaryButton`
+- `TertiaryButton`
+- `ContrastButton`
+- `Tabs`
+- `RichTextEditor`
+- `Spinner`
+- `Breadcrumb`
+- `Dropdown`
+- `MultiSelect`
+- `InputText`
+- `SelectButton`
+- `Card`
+- `IconCard`
+- `FileUploadDropzone`
+- `Chip`
+- `AlertBox`
+- `SideMenu`
+- `TopNav`
+- `Toast` (plus `ToastProvider` and `useToast`)
+- `Modal`
+- `ConfirmDialog`
+- `ProductTable`
+- `ProductTableIconAddButton`
+- `OrderTable`
+- `OrderStatusTag`
+- `Wizard`
+- `Timeline`
+
 ### PrimaryButton
 
 A simple, focused button component for primary actions.
@@ -102,10 +133,11 @@ import { PrimaryButton } from '@emporix/cockpit-component-library'
 
 ### Card
 
-A simple surface container for grouping content. Renders `children` inside a bordered, padded panel. Styling uses existing theme variables (`--color-bg-primary`, `--color-border-light`, `--border-radius-lg`, `--spacing-lg`).
+White panel styled with design tokens (defaults from `src/styles/index.scss`). The root uses a **1px** border (`var(--color-card-border)`), corner radius **`var(--card-radius)`** (default **8px**), padding **`var(--card-padding)`** (default **16px**), and vertical spacing between direct children **`var(--card-section-gap)`** (default **12px**). **`Card.Body`** stacks title, meta, etc. with **`var(--card-body-gap)`** (default **16px**). **`Card.Header`**, **`Card.Meta`**, and **`Card.MetaRow`** share **`var(--card-meta-gap)`** (default **6px**); the header’s leading side (`tag` + children) also uses a fixed **8px** gap between flex items. **`Card.MetaRow`** uses a **20×20px** icon frame with **18×18px** SVGs—pass icons intended for that footprint (or larger icons will scale visually via CSS). Compound parts: **`Card.Body`**, **`Card.Header`** (optional `tag` + `actions`), **`Card.Title`**, **`Card.Meta`** / **`Card.MetaRow`**, **`Card.Footer`**, **`Card.IconButton`**. Use **`Chip`** in the header `tag` slot for status pills (e.g. `<Chip variant="error">Blocker</Chip>`). Override the `--card-*` variables to tune spacing without forking the component (see [Card layout tokens](#card-layout-tokens) under _Theming_).
 
 ```tsx
-import { Card } from '@emporix/cockpit-component-library'
+import { Card, Chip, TertiaryButton } from '@emporix/cockpit-component-library'
+import { FiEdit2, FiTrash2 } from 'react-icons/fi'
 
 // Basic usage
 <Card>
@@ -113,6 +145,32 @@ import { Card } from '@emporix/cockpit-component-library'
   <p>Description or nested components go here.</p>
 </Card>
 
+// Structured card (see Storybook “IssueCard”)
+<Card>
+  <Card.Body>
+    <Card.Header
+      tag={<Chip variant="error">Blocker</Chip>}
+      actions={
+        <>
+          <Card.IconButton type="button" aria-label="Edit">
+            <FiEdit2 />
+          </Card.IconButton>
+          <Card.IconButton type="button" aria-label="Delete">
+            <FiTrash2 />
+          </Card.IconButton>
+        </>
+      }
+    />
+    <Card.Title>Issue headline</Card.Title>
+    <Card.Meta>
+      <Card.MetaRow icon={<span />}>Supporting detail line</Card.MetaRow>
+    </Card.Meta>
+  </Card.Body>
+  <Card.Footer>
+    <TertiaryButton label="Edit" icon={<FiEdit2 />} iconPos="left" />
+  </Card.Footer>
+</Card>
+
 // With custom class and test id
 <Card className="my-card" data-testid="details-card">
   <p>Content</p>
@@ -127,11 +185,11 @@ import { Card } from '@emporix/cockpit-component-library'
 | className   | string    | -       | Additional CSS class on the root element     |
 | data-testid | string    | -       | Test ID for the root element                 |
 
-All standard HTML `div` attributes (e.g. `id`, `role`, `aria-*`, `onClick`) are forwarded to the root element via `CardProps`.
+All standard HTML `div` attributes (e.g. `id`, `role`, `aria-*`, `onClick`) are forwarded to the root element via `CardProps`. Subcomponents accept the usual attributes for their underlying elements (`Card.Title` → `h2`, `Card.IconButton` → `button`, etc.).
 
 ### Chip
 
-A compact, pill-shaped label for statuses (e.g. draft, submitted). Four variants use a light tinted background with darker text: **success** (green), **warning** (orange), **info** (blue), **error** (red). Colors are driven by CSS variables (see [Theming with CSS Variables](#theming-with-css-variables)).
+A compact, pill-shaped label for statuses (e.g. draft, submitted). Four variants use a light tinted background with darker text: **success** (green), **warning** (orange), **info** (blue), **error** (rose / burgundy — same look as Figma card header labels such as “Blocker”). Use **`Chip`** for those header pills instead of a separate card-only primitive. Colors are driven by CSS variables (see [Theming with CSS Variables](#theming-with-css-variables)).
 
 ```tsx
 import { Chip } from '@emporix/cockpit-component-library'
@@ -298,6 +356,224 @@ const tabs: TabItem[] = [
 | label   | string    | Display label for the tab      |
 | content | ReactNode | Content to display when active |
 
+### SecondaryButton
+
+Secondary action button variant with API similar to `PrimaryButton`.
+
+```tsx
+import { SecondaryButton } from '@emporix/cockpit-component-library'
+
+<SecondaryButton label="Cancel" />
+```
+
+### TertiaryButton
+
+Low-emphasis button for tertiary actions.
+
+```tsx
+import { TertiaryButton } from '@emporix/cockpit-component-library'
+
+<TertiaryButton label="Learn more" />
+```
+
+### ContrastButton
+
+Button variant designed for high-contrast contexts.
+
+```tsx
+import { ContrastButton } from '@emporix/cockpit-component-library'
+
+<ContrastButton label="Open" />
+```
+
+### Dropdown
+
+Single-select dropdown component with optional filtering, editable mode, and templating.
+
+```tsx
+import { Dropdown } from '@emporix/cockpit-component-library'
+
+<Dropdown options={options} value={value} onChange={(e) => setValue(e.value)} />
+```
+
+### MultiSelect
+
+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)} />
+```
+
+### RichTextEditor
+
+Rich text input component for formatted content editing.
+
+```tsx
+import { RichTextEditor } from '@emporix/cockpit-component-library'
+
+<RichTextEditor value={value} onChange={setValue} />
+```
+
+### Spinner
+
+Loading indicator component with configurable size.
+
+```tsx
+import { Spinner } from '@emporix/cockpit-component-library'
+
+<Spinner size="md" />
+```
+
+### Breadcrumb
+
+Navigation breadcrumb for representing hierarchical page location.
+
+```tsx
+import { Breadcrumb } from '@emporix/cockpit-component-library'
+
+<Breadcrumb items={items} />
+```
+
+### IconCard
+
+Card-like container with a prominent icon/content layout.
+
+```tsx
+import { IconCard } from '@emporix/cockpit-component-library'
+
+<IconCard title="Title" description="Description" icon={<span />} />
+```
+
+### FileUploadDropzone
+
+Dropzone component for drag-and-drop file uploads with type constraints.
+
+```tsx
+import { FileUploadDropzone } from '@emporix/cockpit-component-library'
+
+<FileUploadDropzone acceptedTypes={['image']} onFilesSelected={handleFiles} />
+```
+
+### AlertBox
+
+Inline alert component for success, info, warning, and error messages.
+
+```tsx
+import { AlertBox } from '@emporix/cockpit-component-library'
+
+<AlertBox variant="info" title="Heads up" />
+```
+
+### SideMenu
+
+Composable side navigation menu with brand, nav items, and footer slots.
+
+```tsx
+import { SideMenu } from '@emporix/cockpit-component-library'
+
+<SideMenu>{/* ... */}</SideMenu>
+```
+
+### TopNav
+
+Top navigation/header component for page-level actions and context.
+
+```tsx
+import { TopNav } from '@emporix/cockpit-component-library'
+
+<TopNav title="Dashboard" />
+```
+
+### Toast
+
+Toast notification primitives: `Toast`, `ToastProvider`, and `useToast`.
+
+```tsx
+import { ToastProvider, useToast } from '@emporix/cockpit-component-library'
+```
+
+### Modal
+
+Dialog modal component for focused workflows and confirmations.
+
+```tsx
+import { Modal } from '@emporix/cockpit-component-library'
+
+<Modal isOpen={open} onClose={onClose} title="Edit item" />
+```
+
+### ConfirmDialog
+
+Preset confirmation dialog for destructive or high-impact actions.
+
+```tsx
+import { ConfirmDialog } from '@emporix/cockpit-component-library'
+
+<ConfirmDialog open={open} onConfirm={onConfirm} onCancel={onCancel} />
+```
+
+### ProductTable
+
+Data table component focused on product records and common actions.
+
+```tsx
+import { ProductTable } from '@emporix/cockpit-component-library'
+
+<ProductTable items={items} columns={columns} />
+```
+
+### ProductTableIconAddButton
+
+Compact icon button variant used with `ProductTable` add flows.
+
+```tsx
+import { ProductTableIconAddButton } from '@emporix/cockpit-component-library'
+
+<ProductTableIconAddButton onClick={onAdd} />
+```
+
+### OrderTable
+
+Data table for order rows and order-oriented workflows.
+
+```tsx
+import { OrderTable } from '@emporix/cockpit-component-library'
+
+<OrderTable rows={rows} />
+```
+
+### OrderStatusTag
+
+Status badge component for order state presentation.
+
+```tsx
+import { OrderStatusTag } from '@emporix/cockpit-component-library'
+
+<OrderStatusTag status="submitted" />
+```
+
+### Wizard
+
+Step-based workflow component for multi-stage forms and processes.
+
+```tsx
+import { Wizard } from '@emporix/cockpit-component-library'
+
+<Wizard steps={steps} />
+```
+
+### Timeline
+
+Chronological event list component for activity/history views.
+
+```tsx
+import { Timeline } from '@emporix/cockpit-component-library'
+
+<Timeline events={events} />
+```
+
 ## Theming with CSS Variables
 
 The component library uses CSS variables for easy theming. You can customize the appearance by overriding these variables:
@@ -357,16 +633,37 @@ Reusable focus outline for inputs, dropdowns, SelectButton, etc. Override to cha
 Background and text colors per variant for the `Chip` component.
 
 ```css
---color-chip-success-bg: #e6f4ea;
---color-chip-success-text: #1e4620;
---color-chip-warning-bg: #fff8e6;
---color-chip-warning-text: #b45309;
---color-chip-info-bg: #e8f4fc;
---color-chip-info-text: #0b5c8a;
---color-chip-error-bg: #fdecea;
---color-chip-error-text: #b42318;
+--color-chip-success-bg: #ecfdf5;
+--color-chip-success-text: #059669;
+--color-chip-success-border: #a7f3d0;
+--color-chip-warning-bg: #fffbeb;
+--color-chip-warning-text: #d97706;
+--color-chip-warning-border: #fde68a;
+--color-chip-info-bg: #eff6ff;
+--color-chip-info-text: #2563eb;
+--color-chip-info-border: #bfdbfe;
+--color-chip-error-bg: #fef2f2;
+--color-chip-error-text: #dc2626;
+--color-chip-error-border: #fecaca;
+```
+
+#### Card layout tokens
+
+Used by **`Card`** (`Card.module.scss`). Defaults match `src/styles/index.scss`; override on `:root` or a wrapper to change card rhythm app-wide.
+
+```css
+--color-card-border: #e5e7eb;
+--color-card-heading: #1f2937;
+--color-card-meta-icon: #4b5563;
+--card-radius: 8px;
+--card-padding: 16px;
+--card-section-gap: 12px; /* root: space between top-level sections (e.g. body vs footer) */
+--card-body-gap: 16px; /* Card.Body: space between title, meta, etc. */
+--card-meta-gap: 6px; /* header / meta / meta-row gaps */
 ```
 
+**Note:** **`IconCard`** uses **`24px`** padding and **`var(--card-body-gap)`** for its content column—slightly different from **`Card`**’s shell; see `IconCard.module.scss` if you theme both.
+
 #### Spacing
 
 ```css

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emporix/cockpit-component-library",
-  "version": "0.0.5",
+  "version": "1.0.1",
   "description": "A React component library for cockipt projects",
   "type": "module",
   "main": "./dist/index.umd.js",
@@ -55,6 +55,10 @@
   ],
   "author": "Emporix",
   "license": "MIT",
+  "engines": {
+    "node": ">=18.18.0",
+    "npm": ">=9"
+  },
   "peerDependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
@@ -80,7 +84,7 @@
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^7.0.1",
     "husky": "^9.1.7",
-    "jsdom": "^29.0.0",
+    "jsdom": "^24.1.3",
     "prettier": "^3.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -96,6 +100,7 @@
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.5.2",
     "primereact": "^10.9.7",
+    "quill": "^2.0.3",
     "react-icons": "^5.6.0"
   }
 }