tharaday 0.7.0 → 0.7.1

package/.storybook/main.ts

@@ -2,7 +2,7 @@ import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: ['@storybook/addon-a11y'],
+  addons: ['@storybook/addon-docs', '@storybook/addon-a11y'],
   framework: '@storybook/react-vite',
 };
 export default config;

package/.storybook/preview.ts

@@ -1,6 +1,8 @@
 import type { Preview } from '@storybook/react-vite';
 
 // Design system styles (foundation -> theme refs -> semantics)
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
 import '../src/styles/ds.css';
 
 const preview: Preview = {

package/dist/src/components/Modal/Modal.stories.d.ts

@@ -5,6 +5,11 @@ declare const meta: {
     tags: string[];
     parameters: {
         layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
     };
     argTypes: {
         size: {

package/dist/src/components/Tabs/Tabs.stories.d.ts

@@ -5,6 +5,11 @@ declare const meta: {
     tags: string[];
     parameters: {
         layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
     };
 };
 export default meta;

package/dist/src/components/Tree/Tree.stories.d.ts

@@ -6,6 +6,13 @@ declare const meta: {
         Item: ({ data, label, defaultExpanded, expandIcon, collapseIcon, isRoot, }: import('./TreeItem.types').TreeItemProps) => import("react/jsx-runtime").JSX.Element;
     };
     tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;

package/eslint.config.js

@@ -1,10 +1,7 @@
-// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
 import js from '@eslint/js';
 import { defineConfig, globalIgnores } from 'eslint/config';
-import react from 'eslint-plugin-react';
 import reactHooks from 'eslint-plugin-react-hooks';
 import reactRefresh from 'eslint-plugin-react-refresh';
-import storybook from 'eslint-plugin-storybook';
 import globals from 'globals';
 import tseslint from 'typescript-eslint';
 import prettierConfig from 'eslint-config-prettier';
@@ -20,10 +17,6 @@ export default defineConfig([
       reactHooks.configs.flat.recommended,
       reactRefresh.configs.vite,
     ],
-    plugins: {
-      react,
-      storybook,
-    },
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tharaday",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "author": "Ania Wyroba",
   "publishConfig": {
     "access": "public",
@@ -78,6 +78,7 @@
     "@eslint/js": "^10.0.1",
     "@release-it/conventional-changelog": "^10.0.6",
     "@storybook/addon-a11y": "^10.3.3",
+    "@storybook/addon-docs": "^10.3.3",
     "@storybook/react-vite": "^10.3.3",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
@@ -88,11 +89,8 @@
     "@types/react-dom": "^19.2.3",
     "eslint": "^10.1.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.5.2",
-    "eslint-plugin-storybook": "^10.3.3",
     "globals": "^17.4.0",
     "husky": "^9.1.7",
     "jsdom": "^29.0.1",
@@ -106,12 +104,6 @@
     "vitest": "^4.1.2"
   },
   "overrides": {
-    "eslint-plugin-import": {
-      "eslint": "$eslint"
-    },
-    "eslint-plugin-react": {
-      "eslint": "$eslint"
-    },
     "eslint-plugin-react-hooks": {
       "eslint": "$eslint"
     },

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -6,6 +6,30 @@ const meta: Meta<typeof Dropdown> = {
   title: 'Components/Dropdown',
   component: Dropdown,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+A custom select built on a \`button\` + \`listbox\` pattern. Supports both controlled (\`value\` + \`onChange\`) and uncontrolled (\`defaultValue\`) usage. Options can carry an optional description and can be individually disabled.
+
+**When to use**
+Use Dropdown when you need richer option rendering (descriptions, icons) or tighter visual control over the trigger. For simple native selects, use the \`Select\` component instead.
+
+**Keyboard interaction**
+
+| Key | Behaviour |
+|-----|-----------|
+| \`Enter\` / \`Space\` | Toggle open; select focused option when open |
+| \`ArrowDown\` | Open list or move focus to next option |
+| \`ArrowUp\` | Open list or move focus to previous option |
+| \`Home\` | Move focus to first option |
+| \`End\` | Move focus to last option |
+| \`Escape\` | Close list and return focus to trigger |
+| \`Tab\` | Close list and move focus to next element |
+        `,
+      },
+    },
+  },
   argTypes: {
     onChange: { action: 'changed' },
   },

package/src/components/Modal/Modal.stories.tsx

@@ -15,6 +15,28 @@ const meta = {
   tags: ['autodocs'],
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component: `
+A dialog overlay that traps focus while open and restores it to the trigger element on close. Renders into the normal DOM tree (no portal) and is controlled via \`isOpen\` + \`onClose\`.
+
+**Usage**
+Always provide a \`title\` — it is wired to \`aria-labelledby\` on the dialog element. Pass action buttons via the \`footer\` prop to keep them visually anchored to the bottom.
+
+**Keyboard interaction**
+
+| Key | Behaviour |
+|-----|-----------|
+| \`Tab\` | Cycle focus through all focusable elements inside the modal |
+| \`Shift + Tab\` | Cycle focus backwards |
+| \`Escape\` | Close the modal |
+
+**Sizes**
+
+\`sm\` · \`md\` (default) · \`lg\` · \`xl\` · \`full\`
+        `,
+      },
+    },
   },
   argTypes: {
     size: {

package/src/components/Tabs/Tabs.stories.tsx

@@ -8,6 +8,25 @@ const meta = {
   tags: ['autodocs'],
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component: `
+A tab widget implementing the [ARIA Tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/). Supports controlled (\`activeId\` + \`onChange\`) and uncontrolled (\`defaultActiveId\`) modes. Individual tabs can be disabled. Two visual variants are available: \`line\` (default) and \`pill\`.
+
+**Keyboard interaction**
+
+Focus moves into the tab list on \`Tab\`. Arrow keys then navigate between tabs and automatically activate them (automatic activation pattern).
+
+| Key | Behaviour |
+|-----|-----------|
+| \`ArrowRight\` / \`ArrowDown\` | Move to and activate next enabled tab (wraps) |
+| \`ArrowLeft\` / \`ArrowUp\` | Move to and activate previous enabled tab (wraps) |
+| \`Home\` | Move to and activate first enabled tab |
+| \`End\` | Move to and activate last enabled tab |
+| \`Tab\` | Move focus from tab list into the active tab panel |
+        `,
+      },
+    },
   },
 } satisfies Meta<typeof Tabs>;
 

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -7,6 +7,30 @@ const meta: Meta<typeof Tooltip> = {
   title: 'Components/Tooltip',
   component: Tooltip,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+Wraps any focusable trigger element and shows supplementary content on hover or focus. The tooltip element always stays in the DOM (CSS opacity toggle) so that \`aria-describedby\` references remain valid at all times.
+
+**Usage**
+Pass a single focusable element as \`children\`. The component clones it to inject \`aria-describedby\`, so the trigger does not need to be modified manually. Use short, non-essential text — tooltips are not a substitute for visible labels.
+
+**Keyboard interaction**
+
+| Key | Behaviour |
+|-----|-----------|
+| Focus trigger | Show tooltip after \`delay\` ms |
+| Blur trigger | Hide tooltip immediately |
+| \`Escape\` | Hide tooltip while trigger is focused |
+
+**Positions:** \`top\` (default) · \`bottom\` · \`left\` · \`right\`
+
+**Variants:** \`dark\` (default) · \`light\`
+        `,
+      },
+    },
+  },
   decorators: [
     (Story) => (
       <div

package/src/components/Tree/Tree.stories.tsx

@@ -5,6 +5,21 @@ const meta = {
   title: 'Components/Tree',
   component: Tree,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+Renders any JavaScript value — object, array, or primitive — as an expandable tree. Useful for debugging, JSON inspection, or displaying structured data. Nested objects and arrays are collapsible; primitives and \`null\` are displayed inline.
+
+**Usage**
+Pass any serialisable value to \`data\`. Control the initial expand state with \`defaultExpanded\` (default: \`true\`). Custom expand/collapse icons can be provided via \`expandIcon\` and \`collapseIcon\`.
+
+**Limitations**
+This component is a data visualiser, not a navigation tree. It does not implement the [ARIA Tree pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/) — there is no keyboard navigation between nodes. For navigable trees (e.g. file explorers, side nav), a fully accessible tree widget should be used instead.
+        `,
+      },
+    },
+  },
 } satisfies Meta<typeof Tree>;
 
 export default meta;