From b80cefd4a3302fc8eddf003b2e90eafe599eeaca Mon Sep 17 00:00:00 2001 From: "oliver.vaga" Date: Mon, 18 May 2026 09:51:33 +0300 Subject: [PATCH 1/4] docs(skills): Refresh Tedi-React Integration Skill #630 Bring the consumer-facing `tedi-react` skill back in sync with the current library exports and tighten the parts that consumers trip on most often. - Add missing TEDI-Ready entries: Toggle, InputGroup, Tabs, Pagination, StatusIndicator, EmptyState, plus a Utility Components sub-section covering Affix, Ellipsis, Print, ScrollFade, ScrollVisibility, StretchContent, HashTrigger and the form primitives. - Mark Community Toggle, Tabs, ChoiceGroup as deprecated and flag the legacy Tabs API divergence from TEDI-Ready Tabs. - Fix the ChoiceGroup example in forms.md: `variant` accepts `'default' | 'card'`, not `'segmented'`; only `layout="segmented"` is valid. - Rewrite SKILL.md description with concrete trigger phrases and an explicit guard against confusion with the contributor skill. - Wire AccessibilityProvider into the setup snippet to match the prose, and note PrintingProvider as an inner wrapper. - Add a "Common Pitfalls" section covering the wrong-import-path, TEDI-Ready vs Community, missing `id`, hardcoded colors, var() fallbacks, dual-mode form controls, and the useBreakpointProps test mock. --- skills/tedi-react/SKILL.md | 37 +++++- skills/tedi-react/references/components.md | 140 +++++++++++++++++++-- skills/tedi-react/references/forms.md | 15 ++- 3 files changed, 174 insertions(+), 18 deletions(-) diff --git a/skills/tedi-react/SKILL.md b/skills/tedi-react/SKILL.md index e6ca75ed7..b9bb6faea 100644 --- a/skills/tedi-react/SKILL.md +++ b/skills/tedi-react/SKILL.md @@ -1,9 +1,15 @@ --- name: tedi-react description: > - Build UIs with @tedi-design-system/react — 50+ accessible React components with design token - theming. Use when creating interfaces, integrating form controls, customizing themes, or working - with TEDI components in a React application. + Build UIs with @tedi-design-system/react — the official Estonian government React component + library (`@tedi-design-system/react`). Use whenever the user is integrating, importing, or + composing TEDI components in a downstream React app: `Button`, `Alert`, `TextField`, `Select`, + `Card`, `Tooltip`, `Dropdown`, `Tabs`, `Toggle`, `Pagination`, `EmptyState`, `Table`, `Modal`, + etc. Triggers on theming with TEDI design tokens, switching dark/light theme via + `ThemeProvider`, wiring `LabelProvider` / `StyleProvider` / `AccessibilityProvider`, form + validation with the `helper` prop, responsive `xs` / `md` / `lg` breakpoint props, and + polymorphic `as`-prop usage. Do NOT use when contributing to the TEDI library repo itself — + use `tedi-react-contributing` for that. --- # TEDI Design System — React @@ -29,14 +35,21 @@ dayjs: ^1.11.10 ### 1. Wrap your app with providers ```tsx -import { ThemeProvider, LabelProvider, StyleProvider } from '@tedi-design-system/react/tedi'; +import { + ThemeProvider, + LabelProvider, + StyleProvider, + AccessibilityProvider, +} from '@tedi-design-system/react/tedi'; function App() { return ( - + + + @@ -44,6 +57,8 @@ function App() { } ``` +`AccessibilityProvider` exposes `useDeclareLoader` and other a11y hooks; omit it only if you have no loaders/announcements. `PrintingProvider` is also available — wrap it inside `AccessibilityProvider` when you need the `usePrint` context. + ### 2. Import core styles ```tsx @@ -186,6 +201,18 @@ import { Alert, sendNotification, ToastContainer } from '@tedi-design-system/rea sendNotification({ type: 'success', title: 'Done', children: 'Task completed' }); ``` +## Common Pitfalls + +A handful of mistakes account for most TEDI integration issues. Avoid them up front: + +- **Import from `/tedi` or `/community`, never the package root.** `@tedi-design-system/react` is not a valid import path — the package has explicit entry points (`@tedi-design-system/react/tedi`, `@tedi-design-system/react/community`, `@tedi-design-system/react/index.css`). Importing from the root will fail or silently miss types. +- **Prefer TEDI-Ready over Community whenever possible.** Several Community components (`Button`, `Anchor`, `Check`, `Radio`, `Tabs`, `Toggle`, `Tooltip`, `Dropdown`, `Tag`) are deprecated in favor of TEDI-Ready equivalents. Reach into Community only when no TEDI-Ready alternative exists (e.g. `Modal`, `Stepper`, `Table`, `DateTimePicker`). +- **Always pass `id` to form controls.** `TextField`, `Select`, `Checkbox`, `Radio`, etc. require it — it's how the label/helper/aria wiring works. There is no auto-generated fallback. +- **Use design tokens, not hardcoded colors.** Reach for `var(--tedi-color-*)`, `var(--tedi-spacing-*)`, etc. from `@tedi-design-system/core` instead of hex codes. This is what makes theme switching and brand overrides work. +- **Do not add CSS `var()` fallbacks.** Write `var(--tedi-spacing-4)`, not `var(--tedi-spacing-4, 16px)` — fallbacks defeat token-driven theming. +- **Support both controlled and uncontrolled.** When wrapping a TEDI form control with your own, accept `value`/`defaultValue` and forward both — don't force consumers into one mode. +- **Mock `useBreakpointProps` in tests** for any component you wrote that uses breakpoint support; jsdom won't respond to media queries. + ## Additional References Load based on your task — **do not load all at once**: diff --git a/skills/tedi-react/references/components.md b/skills/tedi-react/references/components.md index 7cbe6c3e4..82e58d2ff 100644 --- a/skills/tedi-react/references/components.md +++ b/skills/tedi-react/references/components.md @@ -265,6 +265,40 @@ Same as Checkbox (without indeterminate) - `label: string` (required) - `accept?: string`, `multiple?: boolean`, `maxSize?: number` +### Toggle +**Props:** `ToggleProps` | fRef, form +- `id: string` (required) +- `label: ReactNode` (required), `hideLabel?: boolean`, `labelPosition?: 'left' | 'right' = 'right'` +- `checked?: boolean`, `defaultChecked?: boolean` +- `onChange?: (value: boolean) => void` +- `size?: 'default' | 'large'` +- `color?: 'primary' | 'colored'` +- `helper?: FeedbackTextProps` +- `disabled?: boolean`, `isLoading?: boolean` + +```tsx + +``` + +### InputGroup +Compose a labeled input with prefix/suffix slots (e.g. currency symbol, unit, button addon). + +**Props:** `InputGroupProps` extends `FormLabelProps` +- `children: ReactNode` (required) — use `InputGroup.Input` plus optional `InputGroup.Prefix` / `InputGroup.Suffix` +- `addons?: boolean = true` — merge borders/radius into a single visual control +- `helper?: FeedbackTextProps | FeedbackTextProps[]` +- `disabled?: boolean`, plus all `FormLabel` props (`label`, `id`, `required`, etc.) + +Sub-components: `InputGroup.Input`, `InputGroup.Prefix`, `InputGroup.Suffix` + +```tsx + + € + + / month + +``` + ## Layout ### Row / Col (Grid) @@ -327,6 +361,53 @@ Sub-component: `Skeleton.Block` Profile ``` +### Tabs +**Props:** `TabsProps` +- `children: ReactNode` (required) — use `Tabs.List` + `Tabs.Trigger` and `Tabs.Content` +- `value?: string` (controlled), `defaultValue?: string` +- `onChange?: (tabId: string) => void` + +Sub-components: `Tabs.List`, `Tabs.Trigger` (props: `id` required, `icon?`, `disabled?`), `Tabs.Content` (props: `id` to scope content to a tab) + +```tsx + + + Overview + Settings + + Overview panel + Settings panel + +``` + +### Pagination +**Props:** `PaginationProps` +- `pageCount: number` (required) +- `page?: number` (controlled, 1-based), `defaultPage?: number = 1` +- `onPageChange?: (page: number) => void` +- `totalItems?: number` — renders a "{count} results" label when set +- `pageSize?: number`, `pageSizeOptions?: number[]`, `onPageSizeChange?: (size: number) => void` +- `labels?: Partial` — override default English labels (`ariaLabel`, `previous`, `next`, `pageAriaLabel`, `currentPageAriaLabel`, `results`, `pageSize`) + +```tsx + +``` + +### HashTrigger +Triggers a callback when the URL hash matches a specific value — handy for opening modals or scrolling to sections from external links. + +**Props:** `HashTriggerProps` +- `hash: string` (required) — without `#` +- `onMatch: () => void` + ## Notifications ### Alert @@ -413,6 +494,20 @@ Sub-components: `Popover.Trigger`, `Popover.Content` Active ``` +### StatusIndicator +Small colored dot for status — pair with a label or position over another element. + +**Props:** `StatusIndicatorProps` +- `type?: 'success' | 'danger' | 'warning' | 'inactive' = 'success'` +- `size?: 'sm' | 'lg' = 'sm'` +- `hasBorder?: boolean` — white ring (use over avatars/icons) +- `position?: 'default' | 'top-right'` — absolute-positioned at parent's corner + +```tsx + + +``` + ## Misc ### Separator @@ -423,6 +518,36 @@ Sub-components: `Popover.Trigger`, `Popover.Content` - `thickness?: 1 | 2` - `spacing?: SeparatorSpacing` +### EmptyState +"Nothing here yet" placeholder with icon, copy, and a CTA slot. + +**Props:** `EmptyStateProps` +- `type?: 'separate' | 'attached' | 'inside' = 'separate'` — `attached` removes top border (sits under a card/table); `inside` removes border + radius (lives inside another container) +- `size?: 'default' | 'small' = 'default'` +- `icon?: string | IconWithoutBackgroundProps | null = 'spa'` +- `heading?: ReactNode` +- `children?: ReactNode` — body text +- `actions?: ReactNode` — CTA slot, usually a `}> + Try a different search term. + +``` + +### Utility Components + +Niche helpers exported from `@tedi-design-system/react/tedi` — load on demand: + +- **Affix** — sticky-position wrapper (top/bottom offset) +- **Ellipsis** — single-line truncation with tooltip on overflow +- **Print** — show/hide subtree based on `usePrint()` context (paired with `PrintingProvider`) +- **ScrollFade** — fade edges of a scrollable container as content runs off +- **ScrollVisibility** — show/hide an element based on scroll position +- **StretchContent** — fill available space inside flex/grid parents +- **HashTrigger** — react to URL hash changes (see Navigation) +- **FeedbackText**, **FormLabel**, **Field** — primitives for composing custom form controls + --- # Community Components @@ -448,19 +573,13 @@ Import from `@tedi-design-system/react/community`. These are community-contribut ### Check (Checkbox) — **DEPRECATED** (use TEDI-Ready Checkbox) ### Radio — **DEPRECATED** (use TEDI-Ready Radio via ChoiceGroup) +### Toggle — **DEPRECATED** (use TEDI-Ready Toggle) +### ChoiceGroup — **DEPRECATED** (use TEDI-Ready ChoiceGroup) ### Select - `id: string`, `options`, `value?`, `defaultValue?`, `onChange?` - `multiple?: boolean`, `async?: boolean`, `isSearchable?: boolean`, `isClearable?: boolean` -### Toggle -- `ariaLabel: string`, `label?`, `checked?`, `defaultChecked?`, `onChange?` -- `size?: 'medium' | 'large'`, `color?: 'default' | 'alternative'`, `icon?`, `disabled?` - -### ChoiceGroup -- `id: string`, `items: ChoiceGroupItemProps[]`, `inputType?: 'radio' | 'checkbox'` -- `type?: 'light' | 'selector' | 'filter' | 'default'`, `value?`, `onChange?` - ### FileUpload - `id: string`, `name: string`, `accept?`, `multiple?`, `maxSize?` - `files?`, `defaultFiles?`, `onChange?`, `onDelete?` @@ -483,9 +602,8 @@ Import from `@tedi-design-system/react/community`. These are community-contribut - `activeStep?`, `defaultActiveStep?: number`, `onActiveStepChange?` - `allowStepLabelClick?: boolean`, `ariaLabel: string`, `card?: CardProps | boolean` -### Tabs -- `currentTab?: string`, `defaultCurrentTab?`, `onTabChange?` -- Sub-components: Tabs.Nav, Tabs.NavItem, Tabs.Item +### Tabs — **DEPRECATED** (use TEDI-Ready Tabs) +Legacy variant with `Tabs.Nav`, `Tabs.NavItem`, `Tabs.Item`. New code should use the TEDI-Ready `Tabs` component (different API: `Tabs.List` / `Tabs.Trigger` / `Tabs.Content`). ### TableOfContents - `items: TableOfContentsItemProps[]`, `heading?`, `open?`, `defaultOpen?` diff --git a/skills/tedi-react/references/forms.md b/skills/tedi-react/references/forms.md index cedd7c869..1272785cb 100644 --- a/skills/tedi-react/references/forms.md +++ b/skills/tedi-react/references/forms.md @@ -140,17 +140,28 @@ import { Checkbox, Radio, ChoiceGroup } from '@tedi-design-system/react/tedi'; onChange={setSize} /> -// Segmented choice group +// Segmented choice group (single visually-merged control) + +// Card-style choices (each item rendered as a selectable card) + ``` ## Validation & Helper Text From 81a1dbeeae3488bca20f4aa1f423df9fab35d0c2 Mon Sep 17 00:00:00 2001 From: "oliver.vaga" Date: Mon, 18 May 2026 10:10:28 +0300 Subject: [PATCH 2/4] docs(skills): Add Authoritative Sources Section #630 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Point consumers of the `tedi-react` skill at the public canonical references so they can verify props and discover components that post-date the bundled snapshot. - Link the GitHub repo, the live Storybook (with prop tables), the cross-framework wiki, npm packages (`react`, `core`, `angular`), CHANGELOG and Issues. - Include the file-path hint for fetching a component's TSX directly — its JSDoc'd `interface ...Props` is the canonical spec when the bundled `references/*.md` drift. --- skills/tedi-react/SKILL.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/skills/tedi-react/SKILL.md b/skills/tedi-react/SKILL.md index b9bb6faea..b6e2ab798 100644 --- a/skills/tedi-react/SKILL.md +++ b/skills/tedi-react/SKILL.md @@ -16,6 +16,19 @@ description: > React component library with 50+ accessible components. Built on React 18/19 with TypeScript, CSS Modules, and design tokens from `@tedi-design-system/core`. +## Authoritative Sources + +This skill bundles a snapshot of the API and patterns, but the library is public and ships fast. When a prop, default, or component listed below feels stale or absent, treat these as the source of truth and fetch from them: + +- **Source code & releases**: [github.com/TEDI-Design-System/react](https://github.com/TEDI-Design-System/react) — TEDI-Ready components live under [`src/tedi/components/`](https://github.com/TEDI-Design-System/react/tree/main/src/tedi/components), community under [`src/community/components/`](https://github.com/TEDI-Design-System/react/tree/main/src/community/components). The barrel export [`src/tedi/index.ts`](https://github.com/TEDI-Design-System/react/blob/main/src/tedi/index.ts) is the canonical list of TEDI-Ready exports. +- **Live Storybook (interactive docs + prop tables)**: [storybook.tedi.ee/react/main](https://storybook.tedi.ee/react/main/?path=/docs/documentation-get-started--get-started) — has every component's args table, default values, and runnable examples. Prefer this over the bundled `references/*.md` when verifying a specific prop. +- **Design system wiki** (cross-framework guidelines): [github.com/TEDI-Design-System/general/wiki](https://github.com/TEDI-Design-System/general/wiki) +- **Issues / changelog**: [github.com/TEDI-Design-System/react/issues](https://github.com/TEDI-Design-System/react/issues), [CHANGELOG.md](https://github.com/TEDI-Design-System/react/blob/main/CHANGELOG.md) +- **npm**: [@tedi-design-system/react](https://www.npmjs.com/package/@tedi-design-system/react) +- **Sibling packages**: [@tedi-design-system/core](https://www.npmjs.com/package/@tedi-design-system/core) (tokens, SCSS, icons), [@tedi-design-system/angular](https://www.npmjs.com/package/@tedi-design-system/angular) (Angular counterpart — useful for behavioral parity questions) + +**Verification tip**: if the user asks about a recently added component or a prop you're unsure of, fetch the relevant `.tsx` file from the repo (e.g. `src/tedi/components///.tsx`) — the JSDoc on `interface ...Props` is the canonical spec. + ## Installation ```bash From 0f7965b5e977e224c4d4859327e3c965004d49b2 Mon Sep 17 00:00:00 2001 From: "oliver.vaga" Date: Mon, 18 May 2026 14:32:15 +0300 Subject: [PATCH 3/4] docs(readme): Document Tedi-React Integration Skill #630 Add an "AI Agent Skills" section pointing consumers at the bundled `skills/tedi-react/` integration skill. The skill conforms to the skill.sh standard so it works with any modern AI coding agent, not just Claude Code. - Summarize what the skill teaches an agent (import paths, providers, component APIs, theming, common pitfalls, authoritative sources). - Include a tool-agnostic install snippet using `degit` with placeholder paths so consumers substitute their own agent's skills directory. - Note that contributor-facing skills live in the separate TEDI-Design-System/ai-skills repository. --- README.md | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/README.md b/README.md index 0fe707921..5d28d054b 100644 --- a/README.md +++ b/README.md @@ -25,6 +25,33 @@ The Storybook documentation covers: --- +## AI Agent Skills + +This repository ships an **integration skill** for AI coding agents that consume `@tedi-design-system/react` in a downstream application. The skill lives at [`skills/tedi-react/`](./skills/tedi-react) and conforms to the [skill.sh](https://skill.sh) standard, so it works with any modern AI tool that supports skills. + +It teaches an agent: + +- The canonical import paths (`/tedi` vs `/community`), required providers, and setup snippet +- Component APIs, props, polymorphic and breakpoint patterns +- Form control conventions (controlled/uncontrolled, helpers, validation) +- Theming with design tokens from `@tedi-design-system/core` +- Common pitfalls to avoid (deprecated Community components, hardcoded colors, `var()` fallbacks, etc.) +- Pointers back to this repo and the [live Storybook](https://storybook.tedi.ee/react/main/?path=/docs/documentation-get-started--get-started) as authoritative sources + +### Install + +Drop the skill into your agent's skill directory (the exact location depends on the tool — for example `./skills/` in the project root, or a user-level equivalent). [`degit`](https://github.com/Rich-Harris/degit) is the simplest way to fetch a single folder: + +```bash +npx degit TEDI-Design-System/react/skills/tedi-react /tedi-react +``` + +Once installed, the agent will trigger the skill whenever you work with TEDI React components. + +> Skills for **contributing to** the TEDI Design System (contributor skills, standards validation, etc.) live in a separate repo: [TEDI-Design-System/ai-skills](https://github.com/TEDI-Design-System/ai-skills). + +--- + ## Repository Development Guide (Contributors) The following instructions apply only if you are working on this repository itself From cc8309392156d01090510f5318c20a06120a7757 Mon Sep 17 00:00:00 2001 From: "oliver.vaga" Date: Tue, 19 May 2026 10:38:59 +0300 Subject: [PATCH 4/4] docs(skills): Use Skills.sh Cli And Pin Source Urls #630 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Address three accuracy issues found in review of the tedi-react integration skill and its README pointer. - README: replace the placeholder `degit` install snippet with the canonical `npx skills add TEDI-Design-System/react`. The skills.sh runtime auto-discovers `SKILL.md` files, so no extra flag is needed for our single-skill repo. - SKILL.md (Authoritative Sources): restructure to instruct the agent to resolve the consumer's installed `@tedi-design-system/react` version from `package.json` and browse the matching `react-` git tag rather than `main`. Includes a worked example URL set for `17.0.0-rc.8` and a fallback rule for missing tags. Notes that the public Storybook tracks `main` and the installed tag wins on conflict. - HashTrigger reference: prop entry was wrong — fixed `hash` → `id`, added the required `children` and the `scrollOnMatch?: boolean` prop, and corrected `onMatch` to receive the matched id. Added a usage snippet matching the wrapper pattern. --- README.md | 6 +++--- skills/tedi-react/SKILL.md | 25 +++++++++++++++++----- skills/tedi-react/references/components.md | 14 +++++++++--- 3 files changed, 34 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 5d28d054b..885eaca02 100644 --- a/README.md +++ b/README.md @@ -40,13 +40,13 @@ It teaches an agent: ### Install -Drop the skill into your agent's skill directory (the exact location depends on the tool — for example `./skills/` in the project root, or a user-level equivalent). [`degit`](https://github.com/Rich-Harris/degit) is the simplest way to fetch a single folder: +Use the [skills.sh](https://skills.sh) CLI from your project root: ```bash -npx degit TEDI-Design-System/react/skills/tedi-react /tedi-react +npx skills add TEDI-Design-System/react ``` -Once installed, the agent will trigger the skill whenever you work with TEDI React components. +The CLI auto-discovers the `tedi-react` skill under [`skills/`](./skills) and registers it for any compatible agent. Once installed, the agent will trigger the skill whenever you work with TEDI React components. > Skills for **contributing to** the TEDI Design System (contributor skills, standards validation, etc.) live in a separate repo: [TEDI-Design-System/ai-skills](https://github.com/TEDI-Design-System/ai-skills). diff --git a/skills/tedi-react/SKILL.md b/skills/tedi-react/SKILL.md index b6e2ab798..b54d29d17 100644 --- a/skills/tedi-react/SKILL.md +++ b/skills/tedi-react/SKILL.md @@ -18,16 +18,31 @@ React component library with 50+ accessible components. Built on React 18/19 wit ## Authoritative Sources -This skill bundles a snapshot of the API and patterns, but the library is public and ships fast. When a prop, default, or component listed below feels stale or absent, treat these as the source of truth and fetch from them: +This skill bundles a snapshot of the API and patterns, but the library is public and ships fast. When a prop, default, or component listed below feels stale or absent, treat these as the source of truth and fetch from them. -- **Source code & releases**: [github.com/TEDI-Design-System/react](https://github.com/TEDI-Design-System/react) — TEDI-Ready components live under [`src/tedi/components/`](https://github.com/TEDI-Design-System/react/tree/main/src/tedi/components), community under [`src/community/components/`](https://github.com/TEDI-Design-System/react/tree/main/src/community/components). The barrel export [`src/tedi/index.ts`](https://github.com/TEDI-Design-System/react/blob/main/src/tedi/index.ts) is the canonical list of TEDI-Ready exports. -- **Live Storybook (interactive docs + prop tables)**: [storybook.tedi.ee/react/main](https://storybook.tedi.ee/react/main/?path=/docs/documentation-get-started--get-started) — has every component's args table, default values, and runnable examples. Prefer this over the bundled `references/*.md` when verifying a specific prop. +### Pin to the consumer's installed version + +Before fetching source, **determine which version of `@tedi-design-system/react` the project actually has installed** and browse the matching git tag — not `main`. The repo's release tags follow the pattern `react-` (e.g. `react-17.0.0-rc.8`, `react-17.1.0-rc.4`). + +1. Read the resolved version from the project — `package.json`'s `dependencies."@tedi-design-system/react"`, or `npm ls @tedi-design-system/react`, or the lockfile entry. Strip any range prefix (`^`, `~`). +2. Construct the tag URL: `https://github.com/TEDI-Design-System/react/tree/react-/...` +3. If the resolved version is a pre-release or the tag doesn't exist (rare), fall back to `main` and note the version mismatch when answering. + +**Example** for a project on `17.0.0-rc.8`: +- TEDI-Ready components: `https://github.com/TEDI-Design-System/react/tree/react-17.0.0-rc.8/src/tedi/components` +- Barrel export: `https://github.com/TEDI-Design-System/react/blob/react-17.0.0-rc.8/src/tedi/index.ts` +- Specific component: `https://github.com/TEDI-Design-System/react/blob/react-17.0.0-rc.8/src/tedi/components/buttons/button/button.tsx` + +### Canonical references + +- **Source code & releases**: [github.com/TEDI-Design-System/react](https://github.com/TEDI-Design-System/react) — TEDI-Ready components live under `src/tedi/components/`, community under `src/community/components/`. The barrel export `src/tedi/index.ts` is the canonical list of TEDI-Ready exports. Always prefer the version-pinned tag URLs (see above) over `main` when consulting source. +- **Live Storybook (interactive docs + prop tables)**: [storybook.tedi.ee/react/main](https://storybook.tedi.ee/react/main/?path=/docs/documentation-get-started--get-started) — has every component's args table, default values, and runnable examples. Note that the public Storybook tracks `main`; if it disagrees with the consumer's installed tag, the tag wins. - **Design system wiki** (cross-framework guidelines): [github.com/TEDI-Design-System/general/wiki](https://github.com/TEDI-Design-System/general/wiki) -- **Issues / changelog**: [github.com/TEDI-Design-System/react/issues](https://github.com/TEDI-Design-System/react/issues), [CHANGELOG.md](https://github.com/TEDI-Design-System/react/blob/main/CHANGELOG.md) +- **Releases & changelog**: [github.com/TEDI-Design-System/react/releases](https://github.com/TEDI-Design-System/react/releases), [CHANGELOG.md](https://github.com/TEDI-Design-System/react/blob/main/CHANGELOG.md), [Issues](https://github.com/TEDI-Design-System/react/issues) - **npm**: [@tedi-design-system/react](https://www.npmjs.com/package/@tedi-design-system/react) - **Sibling packages**: [@tedi-design-system/core](https://www.npmjs.com/package/@tedi-design-system/core) (tokens, SCSS, icons), [@tedi-design-system/angular](https://www.npmjs.com/package/@tedi-design-system/angular) (Angular counterpart — useful for behavioral parity questions) -**Verification tip**: if the user asks about a recently added component or a prop you're unsure of, fetch the relevant `.tsx` file from the repo (e.g. `src/tedi/components///.tsx`) — the JSDoc on `interface ...Props` is the canonical spec. +**Verification tip**: if the user asks about a recently added component or a prop you're unsure of, fetch the relevant `.tsx` file from the version-pinned tag (e.g. `src/tedi/components///.tsx`) — the JSDoc on `interface ...Props` is the canonical spec. ## Installation diff --git a/skills/tedi-react/references/components.md b/skills/tedi-react/references/components.md index 82e58d2ff..b4ad6416e 100644 --- a/skills/tedi-react/references/components.md +++ b/skills/tedi-react/references/components.md @@ -402,11 +402,19 @@ Sub-components: `Tabs.List`, `Tabs.Trigger` (props: `id` required, `icon?`, `dis ``` ### HashTrigger -Triggers a callback when the URL hash matches a specific value — handy for opening modals or scrolling to sections from external links. +Wraps an element and fires a callback (and optionally scrolls to it) when the URL hash matches. The `id` is injected onto the first child element so the browser can resolve it. Handy for opening modals or scrolling to sections from external deep links. **Props:** `HashTriggerProps` -- `hash: string` (required) — without `#` -- `onMatch: () => void` +- `children: ReactNode` (required) — receives `id` injected onto the first child element; if `children` isn't a valid element, `HashTrigger` wraps them in a `
` +- `id: string` (required) — hash value to match (without the leading `#`) +- `onMatch?: (id: string) => void` — fired when the hash matches; receives the matched id +- `scrollOnMatch?: boolean = true` — scrolls the element into view if it's off-screen (instant on initial load, smooth otherwise) + +```tsx + console.log('matched', id)}> +
Section 2 content
+ +``` ## Notifications