@weavix/tracker-components 0.1.0 → 0.1.1

package/build/esm/components/TrackerDisclosure/README.md

@@ -0,0 +1,205 @@
+# TrackerDisclosure
+
+<!-- description:start -->
+A collapsible section component with Tracker-specific styling. Extends Gravity UI [`Disclosure`](https://gravity-ui.com/components/disclosure) with a configurable chevron arrow (position and size), an optional toolbar slot rendered alongside the summary, and BEM class name hooks for fine-grained styling.
+<!-- description:end -->
+
+## Usage
+
+```tsx
+import {TrackerDisclosure} from '@weavix/tracker-components';
+
+<TrackerDisclosure summary="Section title" defaultExpanded>
+    Content goes here
+</TrackerDisclosure>
+```
+
+## Component props
+
+<!-- props:start -->
+```ts
+{
+    /**
+     * Content shown in the clickable summary / header row.
+     * Accepts a string or any ReactNode.
+     */
+    summary?: ReactNode;
+
+    /**
+     * Content rendered inside the collapsible body.
+     */
+    children?: ReactNode;
+
+    /**
+     * Whether the section is expanded on first render (uncontrolled).
+     * @default false
+     */
+    defaultExpanded?: boolean;
+
+    /**
+     * Controlled expanded state. When provided, you must also handle onUpdate.
+     */
+    expanded?: boolean;
+
+    /**
+     * Callback fired when the expanded state changes.
+     */
+    onUpdate?: (expanded: boolean) => void;
+
+    /**
+     * Whether the disclosure is disabled (non-interactive).
+     * @default false
+     */
+    disabled?: boolean;
+
+    /**
+     * Position of the chevron arrow relative to the summary text.
+     * @default 'end'
+     */
+    arrowPosition?: 'start' | 'end';
+
+    /**
+     * Size of the chevron arrow icon in pixels.
+     * @default 20
+     */
+    arrowSize?: number;
+
+    /**
+     * Optional ReactNode rendered to the right of the toggle button inside the
+     * summary row. Useful for action buttons (edit, delete, add, …).
+     */
+    toolbar?: ReactNode;
+
+    /**
+     * Additional CSS class applied to the root element.
+     */
+    className?: string;
+
+    /**
+     * Additional CSS class applied to the summary row wrapper.
+     */
+    summaryClassName?: string;
+
+    /**
+     * Additional CSS class applied to the toggle `<button>` element.
+     */
+    toggleClassName?: string;
+
+    /**
+     * Additional CSS class applied to the chevron arrow icon.
+     */
+    arrowClassName?: string;
+}
+```
+<!-- props:end -->
+
+> **Note:** `TrackerDisclosure` accepts all props from Gravity UI [`DisclosureProps`](https://gravity-ui.com/components/disclosure) in addition to the Tracker-specific ones listed above.
+
+---
+
+## Examples
+
+### Basic (uncontrolled)
+
+```tsx
+import {TrackerDisclosure} from '@weavix/tracker-components';
+
+<TrackerDisclosure summary="Sprint details" defaultExpanded>
+    <p>Sprint 42 — 14 issues, 3 in progress.</p>
+</TrackerDisclosure>
+```
+
+---
+
+### Controlled
+
+```tsx
+import React, {useState} from 'react';
+import {TrackerDisclosure} from '@weavix/tracker-components';
+
+export const ControlledExample = () => {
+    const [expanded, setExpanded] = useState(false);
+
+    return (
+        <TrackerDisclosure
+            summary="Filters"
+            expanded={expanded}
+            onUpdate={setExpanded}
+        >
+            <p>Filter content here.</p>
+        </TrackerDisclosure>
+    );
+};
+```
+
+---
+
+### Arrow at start
+
+```tsx
+<TrackerDisclosure summary="Description" arrowPosition="start">
+    <p>Content with the chevron on the left.</p>
+</TrackerDisclosure>
+```
+
+---
+
+### With toolbar
+
+The `toolbar` prop renders additional content (e.g. action buttons) to the right of the toggle button, inside the summary row but outside the toggle click area.
+
+```tsx
+import {Button} from '@gravity-ui/uikit';
+import {TrackerDisclosure} from '@weavix/tracker-components';
+
+<TrackerDisclosure
+    summary="Attachments"
+    toolbar={
+        <Button size="s" view="flat" onClick={() => openUploadDialog()}>
+            Add file
+        </Button>
+    }
+>
+    <AttachmentList />
+</TrackerDisclosure>
+```
+
+---
+
+### Disabled
+
+```tsx
+<TrackerDisclosure summary="Locked section" disabled defaultExpanded>
+    <p>This section cannot be collapsed by the user.</p>
+</TrackerDisclosure>
+```
+
+---
+
+### Multiple sections (accordion-like)
+
+```tsx
+import React, {useState} from 'react';
+import {TrackerDisclosure} from '@weavix/tracker-components';
+
+const SECTIONS = ['Details', 'Attachments', 'Comments'];
+
+export const AccordionExample = () => {
+    const [openIndex, setOpenIndex] = useState<number | null>(0);
+
+    return (
+        <>
+            {SECTIONS.map((title, i) => (
+                <TrackerDisclosure
+                    key={title}
+                    summary={title}
+                    expanded={openIndex === i}
+                    onUpdate={(open) => setOpenIndex(open ? i : null)}
+                >
+                    <p>Content for {title}</p>
+                </TrackerDisclosure>
+            ))}
+        </>
+    );
+};
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weavix/tracker-components",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Shared UI components for Yandex Tracker plugins",
   "main": "build/cjs/index.js",
   "module": "build/esm/index.js",