groovinads-ui 1.9.96 → 1.9.98

package/README.md

@@ -46,6 +46,7 @@ The library includes the following components:
   - [ModalComponent](#modalcomponent): For displaying modals.
 
 - [Navigation](#navigation):
+  - [Accordion](#accordion): For collapsible content sections.
   - [Aside](#aside): For displaying aside panels.
   - [Navbar](#navbar): For top navigation bars.
   - [Pagination](#pagination): For pagination of tables.
@@ -127,7 +128,7 @@ This library requires several peer dependencies. Install them first:
 
 ```bash
 # For npm users
-npm install @awesome.me/kit-9889deefc5@^1.0.3 \
+npm install @awesome.me/kit-YOUR_CODE_HERE@^1.0.3 \
   @fortawesome/fontawesome-svg-core@^7.1.0 \
   @fortawesome/free-brands-svg-icons@^7.1.0 \
   @fortawesome/duotone-regular-svg-icons@^7.1.0 \
@@ -140,7 +141,7 @@ npm install @awesome.me/kit-9889deefc5@^1.0.3 \
   react-responsive@^10.0.0
 
 # For Yarn users
-yarn add @awesome.me/kit-9889deefc5@^1.0.3 \
+yarn add @awesome.me/kit-YOUR_CODE_HERE@^1.0.3 \
   @fortawesome/fontawesome-svg-core@^7.1.0 \
   @fortawesome/free-brands-svg-icons@^7.1.0 \
   @fortawesome/duotone-regular-svg-icons@^7.1.0 \
@@ -1306,6 +1307,38 @@ import { ModalComponent } from 'groovinads-ui';
 
 ## Navigation
 
+### Accordion
+```jsx
+import React from 'react';
+import { Accordion } from 'react-bootstrap';
+import { AccordionComponent } from 'groovinads-ui';
+
+<AccordionComponent defaultActiveKey="0">
+	<Accordion.Item eventKey="0">
+		<Accordion.Header>Accordion Item #1</Accordion.Header>
+		<Accordion.Body>
+			This is the first item's accordion body.
+		</Accordion.Body>
+	</Accordion.Item>
+	<Accordion.Item eventKey="1">
+		<Accordion.Header>Accordion Item #2</Accordion.Header>
+		<Accordion.Body>
+			This is the second item's accordion body.
+		</Accordion.Body>
+	</Accordion.Item>
+</AccordionComponent>
+```
+
+| Property          | Type              | Required | Options           | Default | Description                                                                                                |
+| ----------------- | ----------------- | -------- | ----------------- | ------- | ---------------------------------------------------------------------------------------------------------- |
+| `activeKey`       | String / String[] | No       | n/a               | n/a     | Currently active accordion item key(s). String for single, array for multiple when alwaysOpen is true.    |
+| `alwaysOpen`      | Boolean           | No       | `true` `false`    | `false` | Allow multiple accordion items to stay open at the same time.                                              |
+| `caretPosition`   | String            | No       | `start` `end`     | `start` | Position of the caret icon. `start` places it before the content, `end` places it after.                  |
+| `children`        | Node              | Yes      | n/a               | n/a     | Accordion.Item components from react-bootstrap.                                                            |
+| `className`       | String            | No       | n/a               | `''`    | Additional CSS classes.                                                                                    |
+| `defaultActiveKey`| String / String[] | No       | n/a               | n/a     | Default active key for uncontrolled mode. String for single, array for multiple when alwaysOpen is true.  |
+| `size`            | String            | No       | `sm` `md` `lg`    | `md`    | Size variant for the accordion.                                                                            |
+
 ### Aside
 ```jsx
 import React from 'react';
@@ -1865,6 +1898,83 @@ export default MyToastExamples;
 | `status`          | String   | No       | `in-progress` `error`                             | `in-progress`  | Define the current state of the task. If `in-progress`, shows the ongoing progress, reflected in the progress bar. If `error`, indicates that the upload or processing has failed.    |
 | `variant`         | String   | Yes      | `upload` `processing`                             | n/a            | Define the type of process being performed. If `upload`, displays a progress bar and a loading status indicator. If `upload`, displays a progress bar and a loading status indicator. |
 
+# Testing
+
+This library includes an automated testing system that validates all components using **Vitest** and **Playwright**.
+
+## Test System Overview
+
+The testing infrastructure is built on:
+- **Vitest**: Fast unit test framework powered by Vite
+- **Playwright**: Browser automation for real component testing
+- **Storybook Integration**: All Storybook stories are automatically converted to tests
+
+## Available Test Commands
+
+```bash
+# Run all tests once (for CI/CD)
+yarn test
+
+# Run tests in watch mode (for development)
+yarn test:watch
+
+# Open Vitest UI (visual test interface)
+yarn test:ui
+
+# Run tests with coverage report
+yarn test:coverage
+```
+
+## What Gets Tested
+
+The test system automatically validates:
+- ✅ **Component Rendering**: All 36+ components render without errors
+- ✅ **Props Validation**: Each component handles props correctly
+- ✅ **Variants**: All component variants (sizes, colors, states) work properly
+- ✅ **Interactive Elements**: Buttons, dropdowns, inputs respond to user actions
+- ✅ **Storybook Stories**: All 322+ stories are tested automatically
+
+## Test Results
+
+Current test coverage:
+- **36 test files** (one per component category)
+- **322 individual tests** (one per Storybook story)
+- **100% pass rate** on component rendering
+
+## Running Tests Locally
+
+### Prerequisites
+- Node.js v20 (use `nvm use 20`)
+- All dependencies installed (`yarn install`)
+- Playwright browsers installed (runs automatically on first test)
+
+### Example
+
+```bash
+# Activate Node 20
+nvm use 20
+
+# Run tests
+yarn test
+```
+
+### Test Output Example
+
+```
+Test Files  36 passed (36)
+Tests      322 passed (322)
+Duration   7.57s
+```
+
+## Continuous Integration
+
+Tests run automatically on:
+- Every commit
+- Pull requests
+- Before releases
+
+This ensures component library stability and prevents regressions.
+
 # Customization
 
 Currently, the components are not customizable.