Merge pull request #2 from StyleShit/ci/AR-48467-dependabot-changeset

Ci/ar 48467 dependabot changeset

Author: StyleShit

.changeset/add-arc-progress.md

@@ -0,0 +1,5 @@
+---
+'@drivenets/design-system': minor
+---
+
+Add DsArcProgress component

.changeset/better-teeth-scream.md

@@ -0,0 +1,5 @@
+---
+'@drivenets/design-system': minor
+---
+
+Add `DSCommentBubble`, `DSCommentCard`, `DSCommentIndicator`, `DSCommentDrawer` components

.changeset/smart-areas-dance.md

@@ -0,0 +1,5 @@
+---
+'@drivenets/design-system': minor
+---
+
+- Add `ProgressLinear` component

.cursor/notepads/add-play-tests.md

@@ -0,0 +1,27 @@
+## Add Play Tests to Stories
+
+Look at the current file (or the file I specify). Find all exported stories that are missing a `play` function.
+
+For each story without `play`, generate an interaction test following these rules:
+
+1. Import `{ expect, fn, userEvent, within }` from `'storybook/test'`
+2. Use `fn()` for all callback args in the story's `args`
+3. Use a11y queries only: `getByRole`, `getByLabelText`, `getByText` -- never `getByTestId`
+4. Use semantic assertions: `toBeChecked()`, `toBeDisabled()`, `toBeVisible()`, `toBeInTheDocument()`
+5. Await all interactions: `await userEvent.click(...)`, `await expect(...)`
+6. Don't test implementation details (no data attributes, no CSS selectors), unless it's a required part of the story
+7. Test user-visible behavior: render check, click interactions, callback assertions
+
+For stories with callback args, verify the callback was called:
+
+```tsx
+await userEvent.click(button);
+await expect(args.onClick).toHaveBeenCalledOnce();
+```
+
+For stories showing disabled state, verify interactions are blocked:
+
+```tsx
+await userEvent.click(element, { pointerEventsCheck: 0 });
+await expect(args.onClick).not.toHaveBeenCalled();
+```

.cursor/notepads/check-ark-ui.md

@@ -0,0 +1,19 @@
+## Check Ark UI for Component
+
+I'm about to build a component. Before writing custom code, check if Ark UI already provides a primitive for it.
+
+Steps:
+
+1. Call the Ark UI MCP `list_components` tool with `framework: "react"` to get all available components.
+2. If a matching component exists:
+   - Call `get_component_props` with `framework: "react"` and the component name to show me the full API.
+   - Call `get_example` with `framework: "react"`, the component name, and `exampleId: "basic"` to show a usage example.
+   - Call `styling_guide` with the component name to show data attributes I can use in SCSS.
+3. If no match exists, tell me, so I know to build custom.
+
+When showing the Ark UI API, highlight:
+
+- Which props I should expose in my own props layer (don't expose all Ark props)
+- Which state Ark manages internally (so I don't duplicate with `useState`)
+- Which callbacks I should wrap to forward to my own props
+- Which data attributes I can use in SCSS for styling states

.cursor/rules/checkers.mdc

@@ -0,0 +1,66 @@
+---
+description: How to run tests, linting, and type checking during development
+alwaysApply: true
+---
+
+# Code Quality Checkers
+
+Run checkers **only on changed files/directories** to keep feedback fast. Run from **workspace root**.
+
+## File/Directory-Specific Commands
+
+### Linting (eslint)
+
+```bash
+# Single file
+pnpm eslint packages/design-system/src/components/ds-button/ds-button.tsx
+
+# Directory
+pnpm eslint packages/eslint-plugin/src/
+
+# With auto-fix
+pnpm eslint --fix packages/design-system/src/components/ds-button/
+```
+
+### Type Checking (tsc)
+
+TypeScript checks the whole project config, so scope by package:
+
+```bash
+# design-system package
+pnpm --filter @drivenets/design-system typecheck
+
+# eslint-plugin package
+pnpm --filter @drivenets/eslint-plugin-design-system typecheck
+
+# vite-plugin package
+pnpm --filter @drivenets/vite-plugin-design-system typecheck
+```
+
+### Tests (vitest)
+
+```bash
+# Single test file
+pnpm --filter @drivenets/design-system test packages/design-system/tests/exports.test.ts --run
+
+# Directory of tests
+pnpm --filter @drivenets/eslint-plugin-design-system test src/__tests__/ --run
+
+# Pattern match
+pnpm --filter @drivenets/vite-plugin-design-system test --run -t "snapshot"
+```
+
+## When to Run What
+
+| Changed                    | Run                                     |
+| -------------------------- | --------------------------------------- |
+| `*.test.ts` file           | `pnpm --filter <pkg> test <path> --run` |
+| Source file with tests     | Lint the file + run related tests       |
+| Source file, no tests      | Lint the file + typecheck the package   |
+| SCSS file in design-system | Lint the file                           |
+
+## Notes
+
+- **`--run` flag** prevents vitest watch mode
+- **design-system typecheck** auto-generates SCSS type defs
+- Prefer file-level lint, package-level typecheck, file-level test

.cursor/rules/code-review.mdc

@@ -0,0 +1,41 @@
+---
+description: Apply when reviewing code changes, running git diff, or preparing a PR
+alwaysApply: false
+---
+
+# Code Review Rules
+
+It is a local code review process done before submitting a PR.
+
+## Process
+
+1. Get diff: `git diff origin/main`
+2. Review every changed file against project cursor rules
+3. Flag only clear, high-severity issues (max 10 inline comments)
+
+## Inline comment format
+
+```typescript
+/**
+ * REVIEW-[SEVERITY]: [ISSUE DESCRIPTION]
+ */
+```
+
+- One issue per comment; place on the exact changed line
+- Natural tone, specific and actionable; do not mention automated or high-confidence
+- Severity emojis: 🚨 Critical 🔒 Security ⚡ Performance ⚠️ Logic ✨ Improvement
+
+## Priorities to check
+
+- No `!important` in SCSS
+- No hardcoded colors or spacing (use `--color-*`, `--spacing-*` tokens)
+- No `:global` in CSS modules
+- No unnecessary `useMemo`/`useCallback`
+- No `forwardRef` (deprecated)
+- No cross-component internal imports
+- No `useLayoutEffect` without DOM reads
+- Stories have `play` functions with `fn()` and a11y queries
+- No inline styles in stories
+- Props layer doesn't expose library internals
+- Logic errors, security issues, race conditions, missing edge cases
+

.cursor/rules/design-system.mdc

@@ -0,0 +1,77 @@
+---
+description: Component scaffolding templates for creating new design system components
+globs: packages/design-system/src/components/**/*
+---
+
+# Component Scaffolding
+
+## File Structure
+
+New component at `packages/design-system/src/components/ds-{name}/`:
+
+```
+ds-{name}/
+├── index.ts              # Barrel export
+├── ds-{name}.tsx         # Implementation
+├── ds-{name}.types.ts    # Props interface
+├── ds-{name}.module.scss # Styles
+└── ds-{name}.stories.tsx # Stories
+```
+
+## Implementation Template
+
+```tsx
+import classNames from 'classnames';
+import styles from './ds-{name}.module.scss';
+import type { Ds{Name}Props } from './ds-{name}.types';
+
+/**
+ * Design system {Name} component
+ */
+const Ds{Name} = ({
+  className,
+  children,
+  ...props
+}: Ds{Name}Props) => {
+  return (
+    <div className={classNames(styles.container, className)} {...props}>
+      {children}
+    </div>
+  );
+};
+
+export default Ds{Name};
+```
+
+## Types Template
+
+```typescript
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+
+export interface Ds{Name}Props extends ComponentPropsWithoutRef<'div'> {
+  /**
+   * JSDoc description
+   */
+  label?: ReactNode;
+}
+```
+
+## Index Barrel
+
+```typescript
+export { default as Ds{Name} } from './ds-{name}';
+export type { Ds{Name}Props } from './ds-{name}.types';
+```
+
+## Primitive Libraries
+
+1. **Ark UI** (`@ark-ui/react`) - Primary choice for new components
+2. **Radix UI** (`@radix-ui/react-*`) - Deprecated, modify existing only
+3. **TanStack** - Data-heavy components (table, virtual)
+4. **Custom** - Only when no primitive exists
+
+## Skills
+
+- To scaffold a new component, use the **component-scaffold** skill.
+- To create a component from a Figma URL, use the **figma-to-component** skill.
+- To check if Ark UI has a primitive, use the **check-ark-ui** notepad.

.cursor/rules/monorepo.mdc

@@ -0,0 +1,51 @@
+---
+description: Package boundaries and workspace structure
+globs: packages/**/*
+---
+
+# Package Boundaries
+
+## Structure
+
+```
+packages/
+├── design-system/       # @drivenets/design-system
+├── eslint-plugin/       # @drivenets/eslint-plugin-design-system
+├── vite-plugin/         # @drivenets/vite-plugin-design-system
+└── commitlint-plugin/   # @drivenets/commitlint-plugin-design-system
+```
+
+## Import Rules
+
+| Package | Can Import | Cannot Import |
+|---------|-----------|---------------|
+| design-system | React, Ark UI, Radix, TanStack, classnames | Other workspace packages |
+| eslint-plugin | ESLint APIs, TypeScript | React, design-system |
+| vite-plugin | Vite APIs | React, design-system |
+
+## Workspace Dependencies
+
+```json
+{
+  "devDependencies": {
+    "@drivenets/vite-plugin-design-system": "workspace:*"
+  }
+}
+```
+
+## Adding New Packages
+
+1. Create `packages/{name}/`
+2. `package.json` with name `@drivenets/{name}`
+3. `tsconfig.json` extends `../../tsconfig.base.json`
+4. `eslint.config.ts` imports from `../../eslint.config.base.ts`
+
+## Cross-Package Imports
+
+```typescript
+// Good - use package name
+import { util } from '@drivenets/design-system';
+
+// Bad - relative path across packages
+import { util } from '../../design-system/src/utils';
+```