diff --git a/apps/docs/code-notate.config.js b/apps/docs/code-notate.config.js index 00457b2d1..6f5e0fd8a 100644 --- a/apps/docs/code-notate.config.js +++ b/apps/docs/code-notate.config.js @@ -1,6 +1,6 @@ /** @type {import('@kunai-consulting/code-notate').CodeNotateConfig} */ export default { - aiModel: "claude-3-7-sonnet-20250219", + aiModel: "claude-sonnet-4-20250514", aiProvider: "anthropic", documentationFolder: "./src/routes/base", formatCommand: "pnpm format", diff --git a/apps/docs/package.json b/apps/docs/package.json index 3f84bf97c..e353745f1 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -21,7 +21,7 @@ "serve": "wrangler pages dev ./dist --compatibility-flags=nodejs_als", "start": "vite --open --mode ssr", "qwik": "qwik", - "cn": "cn" + "code-notate": "code-notate" }, "devDependencies": { "@builder.io/qwik": "^1.14.1", diff --git a/apps/docs/src/docs-widgets/example-container/example-container.tsx b/apps/docs/src/docs-widgets/example-container/example-container.tsx new file mode 100644 index 000000000..bb1e3c575 --- /dev/null +++ b/apps/docs/src/docs-widgets/example-container/example-container.tsx @@ -0,0 +1,14 @@ +import { Slot, component$ } from "@builder.io/qwik"; + +export const ExampleContainer = component$(() => { + return ( +
+
+ +
+
+ +
+
+ ); +}); diff --git a/apps/docs/src/docs-widgets/switch/switch.css b/apps/docs/src/docs-widgets/switch/switch.css new file mode 100644 index 000000000..e69de29bb diff --git a/apps/docs/src/docs-widgets/switch/switch.tsx b/apps/docs/src/docs-widgets/switch/switch.tsx new file mode 100644 index 000000000..2a02c2aff --- /dev/null +++ b/apps/docs/src/docs-widgets/switch/switch.tsx @@ -0,0 +1,20 @@ +import { type Signal, component$, useStyles$ } from "@builder.io/qwik"; +import { Switch } from "@kunai-consulting/qwik"; +import styles from "../../routes/base/switch/examples/switch-custom.css?inline"; +//import styles from "./switch.css?inline"; +type Props = { + value: Signal; + label: string; +}; +export const DocsSwitch = component$((props: Props) => { + useStyles$(styles); + + return ( + + + + + {props.label} + + ); +}); diff --git a/apps/docs/src/docs-widgets/toggle-group/toggle-group.tsx b/apps/docs/src/docs-widgets/toggle-group/toggle-group.tsx new file mode 100644 index 000000000..a02247326 --- /dev/null +++ b/apps/docs/src/docs-widgets/toggle-group/toggle-group.tsx @@ -0,0 +1,65 @@ +import { type Signal, component$ } from "@builder.io/qwik"; + +export type ToggleItem = { + value: string; + label?: string; +}; + +export type DocsToggleGroupProps = { + // Current selected value + value: Signal; + // Items to render in the toggle group + items: ToggleItem[]; + // Optional accessible label for the group + ariaLabel?: string; + // Optional extra classes for the container + class?: string; +}; + +export const DocsToggleGroup = component$((props) => { + const { value, items, ariaLabel = "Toggle group", class: className } = props; + + return ( +
+ {items.map((item, idx) => { + const selected = value.value === item.value; + return ( + + ); + })} +
+ ); +}); diff --git a/apps/docs/src/routes/base/calendar/examples/interactive.tsx b/apps/docs/src/routes/base/calendar/examples/interactive.tsx new file mode 100644 index 000000000..96dc17e7e --- /dev/null +++ b/apps/docs/src/routes/base/calendar/examples/interactive.tsx @@ -0,0 +1,86 @@ +import { component$, useSignal, useStyles$ } from "@builder.io/qwik"; +import { Calendar } from "@kunai-consulting/qwik"; + +import { ExampleContainer } from "../../../../docs-widgets/example-container/example-container"; +import { DocsSwitch } from "../../../../docs-widgets/switch/switch"; +import { DocsToggleGroup } from "../../../../docs-widgets/toggle-group/toggle-group"; +import { CalendarIcon } from "../shared/calendar-icon"; +import { NextIcon } from "../shared/next-icon"; +import { PreviousIcon } from "../shared/previous-icon"; +import styles from "./calendar.css?inline"; + +export default component$(() => { + useStyles$(styles); + + // Primary data + const selectedDate = useSignal(null); + + // Props + const mode = useSignal<"inline" | "popover">("inline"); + const disabled = useSignal(false); + const fullWeeks = useSignal(false); + const showDaysOfWeek = useSignal(false); + const showWeekNumbers = useSignal(false); + const open = useSignal(false); + + return ( + +
+ + {mode.value === "popover" && ( +
+ + + + + + + + +
+ )} + + + + + + + + + + + + + + + + +
+

Selected date: {selectedDate.value}

+
+
+ +
+ + {mode.value === "popover" && } + + + + +
+ + ); +}); diff --git a/apps/docs/src/routes/base/calendar/examples/reactive.tsx b/apps/docs/src/routes/base/calendar/examples/reactive.tsx index 787b3ce8f..d9b4ef9bf 100644 --- a/apps/docs/src/routes/base/calendar/examples/reactive.tsx +++ b/apps/docs/src/routes/base/calendar/examples/reactive.tsx @@ -11,7 +11,7 @@ export default component$(() => { return (
- + / diff --git a/apps/docs/src/routes/base/calendar/index.mdx b/apps/docs/src/routes/base/calendar/index.mdx index 4b5a3aeb7..4c36b3b96 100644 --- a/apps/docs/src/routes/base/calendar/index.mdx +++ b/apps/docs/src/routes/base/calendar/index.mdx @@ -1,165 +1,16 @@ import api from "./code-notate/api.json"; # Calendar -A customizable date picker that helps users select dates through an intuitive grid interface. - -## Features - -## Anatomy - -## Examples -### Basic Usage -The calendar component provides a simple way to implement date selection functionality. The example below shows the basic setup with core components and date change handling. - -This example demonstrates: -- Using `Calendar.Root` as the main container with `locale` set to "en" by default -- `Calendar.Header` containing navigation buttons and month/year display -- `Calendar.Grid` for the calendar layout with `Calendar.GridDay` for individual date cells -- Date selection handling through `onDateChange$` prop -- Visual feedback for selected dates using `data-selected` and current date with `data-current` -Key props used: -- `onDateChange$`: Callback fired when a date is selected -- `data-selected`: Indicates the currently selected date -- `data-current`: Highlights the current date -- `class`: Custom styling applied to various components -The calendar supports full keyboard navigation and follows WAI-ARIA calendar design patterns for accessibility. - -### Date picker -The Calendar component can be used to create a -[date picker](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/) by including -the `Calendar.Field` component and setting the `mode` prop to "popover". -The `Calendar.Field` component is a wrapper around the `DateInput` component providing a text input that works in -conjunction with the calendar. - - -### Date picker with readonly date field -You can prevent users from manually entering a date by setting the `Calendar.Field` component's `openCalendarOnClick` prop. -In this mode, the date field is read-only and the calendar is opened when the user clicks on the field. - +A date picker that shows a monthly grid view for selecting dates -### Showing leading zeros -You can control the display of leading zeros in the calendar grid by setting the `showLeadingZeros` prop on the `Calendar.GridDay` component. - + -### Week numbers -You can control the display of week numbers in the calendar grid by setting the `showWeekNumber` prop on the `Calendar.Root` component. - - -### Full weeks -You can control the display of full weeks in the calendar grid by setting the `fullWeeks` prop on the `Calendar.Root` component. - - -## Component State -### Using Component State -The Calendar component's state can be controlled through several props on the `Calendar.Root` component: -1. **Selected Date** -Track the currently selected date using the `date` prop: -```tsx - - {/* Calendar content */} - -``` -2. **Display Options** -Control what information is shown in the calendar: -```tsx - - {/* Calendar content */} - -``` -### State Interactions -The Calendar provides ways to respond to date selection through event handlers: -1. **Date Selection** -Listen for date changes using the `onDateChange$` prop on either the `Calendar.Root` or `Calendar.GridDay` components: -```tsx - { - console.log('Selected date:', date); - }} -> - {/* Calendar content */} - -``` -As shown in the hero example, you can track the selected date in your application state: -```tsx -const selectedDate = useSignal(); - { - selectedDate.value = date; - })} -/> -``` -2. **Popover State** -Control the calendar popover's open state using the `bind:open` prop: -```tsx -const isOpen = useSignal(false); - - {/* Calendar content */} - -``` -The calendar component maintains its own internal state for: -- Current month/year being displayed -- Date currently in focus -- Navigation between months -- Keyboard navigation within the calendar grid -These aspects are handled automatically by the component and don't require manual management. +## Features -## Core Configuration -### Locale and Date Format -The Calendar component supports localization through the `locale` prop on `Calendar.Root`. Currently, it supports: -- Default locale: `"en"` -- Date format: `YYYY-MM-DD` -As shown in the hero example above, the calendar uses the default English locale for month names, weekday labels, and date formatting. -### Initial Date Selection -The calendar can be configured with: -- `defaultDate`: Sets the initial focused date (defaults to current date) -- `date`: Controls the currently selected date -- `showDaysOfWeek`: Controls visibility of weekday headers (defaults to `true`) -- `showWeekNumber`: Enables week number display (defaults to `false`) -### Week Display -The calendar provides two week display modes controlled by the `fullWeeks` prop: -```typescript -type WeekDisplayProps = { - // When true, shows complete weeks including days from adjacent months - fullWeeks?: boolean; // default: false -} -``` -## Advanced Configuration -### Date Change Handling -The calendar supports date selection handling through: -```typescript -type DateChangeProps = { - onDateChange$?: (date: LocalDate) => void; -} -``` -Where `LocalDate` is typed as: -```typescript -type LocalDate = `${number}-${number}-${number}`; -``` -### Grid Customization -The calendar grid can be customized through: -- `buttonProps`: Props to be spread onto each date button -- Custom day cell rendering through `Calendar.GridDay` -### Technical Constraints -1. Date Format Validation - - Dates must follow the `YYYY-MM-DD` format - - Invalid formats will throw an error during initialization -2. Month Navigation - - Month navigation is handled internally - - Year boundaries are automatically managed when navigating between December and January -3. Focus Management - - Focus is automatically managed within the calendar grid - - Only one date cell is focusable at a time (tabIndex management) - - Focus is preserved during month navigation -The calendar maintains internal state for: -- Current month/year being displayed -- Selected date -- Focused date -- Week number calculations (when enabled) + +## Anatomy + \ No newline at end of file diff --git a/apps/docs/src/routes/base/checkbox/code-notate/api.json b/apps/docs/src/routes/base/checkbox/code-notate/api.json index a801d80ec..a0c0f2bc4 100644 --- a/apps/docs/src/routes/base/checkbox/code-notate/api.json +++ b/apps/docs/src/routes/base/checkbox/code-notate/api.json @@ -208,5 +208,7 @@ "Focus management with ref tracking", "Disabled state handling", "Enter key prevention for form submissions" - ] + ], + "name": "Checkbox", + "summary": "A clickable box that can be checked or unchecked to select options." } diff --git a/apps/docs/src/routes/base/checklist/code-notate/api.json b/apps/docs/src/routes/base/checklist/code-notate/api.json index 941407d83..ed21ab1b2 100644 --- a/apps/docs/src/routes/base/checklist/code-notate/api.json +++ b/apps/docs/src/routes/base/checklist/code-notate/api.json @@ -98,5 +98,7 @@ "Independent item state management", "Automated item indexing", "Context-based state propagation" - ] + ], + "name": "Checklist", + "summary": "A group of checkboxes with a select all option for choosing multiple items." } diff --git a/apps/docs/src/routes/base/checklist/index.mdx b/apps/docs/src/routes/base/checklist/index.mdx index decafcde0..2fefb9366 100644 --- a/apps/docs/src/routes/base/checklist/index.mdx +++ b/apps/docs/src/routes/base/checklist/index.mdx @@ -1,115 +1,16 @@ import api from "./code-notate/api.json"; # Checklist -A group of selectable items that can be toggled individually or all at once. - -## Features - -## Anatomy - -## Examples -### Basic Usage -The basic checklist setup allows users to select multiple items independently. - -This example demonstrates: -- `Checklist.Root` as the container for all checklist items -- `Checklist.Item` for individual selectable items -- `Checklist.ItemTrigger` and `Checklist.ItemIndicator` for the checkbox interaction -- `Checklist.ItemLabel` for item text -- `Checklist.SelectAll` for the parent checkbox that controls all items -- `Checklist.SelectAllIndicator` showing the mixed state with both check and minus icons -- `Checklist.Label` for the select all text -The select-all functionality automatically manages three states: -- Unchecked when no items are selected -- Mixed state when some items are selected -- Checked when all items are selected -Each item maintains its own state while staying synchronized with the select-all checkbox. -Note: The example uses Lucide icons (`LuCheck` and `LuMinus`) to display the checkbox states, but you can customize these with your own icons or indicators. - -### Form Integration -Integrate with native HTML forms by adding the `Checklist.HiddenInput` component under each item. -The selected items are then automatically submitted with the form. The `name` input is required and should be unique -within the form. - +A group of checkboxes with a select all option for choosing multiple items. -## Component State -### Using Component State -The Checklist component provides a powerful way to manage multiple checkbox selections with a "select all" capability. Let's look at how to implement and control the checklist state. -The basic checklist state is demonstrated in the hero example: - -For more advanced state management, including a "select all" feature: - -This example demonstrates: -- Individual item selection state -- Select all functionality -- Mixed state when only some items are selected -### State Interactions -The checklist maintains three main states: -- Unchecked: No items selected -- Mixed: Some items selected -- Checked: All items selected -The select-all checkbox automatically updates based on the state of individual items: -- Shows unchecked when no items are selected -- Shows a mixed state when some items are selected -- Shows checked when all items are selected -To respond to state changes, the checklist items and select-all checkbox are automatically synchronized: -1. When clicking the select-all checkbox: - - If unchecked or mixed: All items become checked - - If checked: All items become unchecked -2. When clicking individual items: - - Updates the select-all checkbox state based on overall selection - - Maintains the mixed state when appropriate -The state management is handled automatically by the component, requiring no additional configuration from the user. Simply structure your checklist with the appropriate components and the state synchronization works out of the box. + -Based on the provided implementation and examples, I'll document the configuration options for the Checklist component. -## Core Configuration -### Select All Behavior -The Checklist component supports a "select all" functionality that manages the state of all child checkboxes. As shown in the `select-all` example above, this requires configuring both the select all trigger and individual items. -The select all state automatically manages three possible values: -- `false` - No items checked -- `true` - All items checked -- `"mixed"` - Some items checked -### Item Management -Items must be direct children of `Checklist.Root` to be properly tracked. The component internally manages indices for state synchronization. -> Each `Checklist.Item` requires a unique key when mapping over items to maintain proper state tracking. -### Group Configuration -The Checklist is configured as a checkbox group by default with the following characteristics: -```typescript -type ChecklistContext = { - isAllCheckedSig: Signal; - checkedStatesSig: Signal<(boolean | "mixed")[]>; -}; -``` -The context manages: -- Overall checked state (`isAllCheckedSig`) -- Individual item states (`checkedStatesSig`) -### Form Integration -The Checklist can be integrated with forms through the `HiddenInput` component. As shown in the `hero` example above, this manages the form submission state for all checkboxes in the group. -## Advanced Configuration -### State Synchronization -The Checklist implements a bi-directional state synchronization: -1. Select All → Items: -- When select all is toggled, all items update to match -- Mixed state is preserved when partially selected -2. Items → Select All: -- Select all updates based on collective item state -- Automatically switches to mixed state when appropriate -### Custom Layouts -While the component handles state management, the layout is fully customizable. As shown in the `select-all` example above, items can be nested and grouped with custom spacing and hierarchies. -> Note: The internal state tracking works regardless of DOM structure, but items must remain direct children of `Checklist.Root` in the component tree. +## Features -Based on the provided implementation and examples, I'll document the form-specific features of the Checklist component. -## Forms -The Checklist component provides form integration through the `` component, which manages multiple checkbox form inputs. -The component follows a group pattern where the select-all functionality can control multiple checkbox states simultaneously. - -In this example, the select-all checkbox controls the state of all child checkboxes, maintaining form state synchronization. When some items are selected, the select-all checkbox displays a mixed state, indicated by the minus icon. -The form state is managed through the `ChecklistContext`, which tracks: -- The overall checked state (`isAllCheckedSig`) -- Individual item states (`checkedStatesSig`) -The `` component acts as a form group container with the appropriate `role="group"` attribute, ensuring proper form semantics and accessibility. -Note: The current implementation doesn't show explicit form validation examples, but the component structure includes `` for handling validation states when needed. + +## Anatomy + \ No newline at end of file diff --git a/libs/components/src/calendar/calendar-content.tsx b/libs/components/src/calendar/calendar-content.tsx index 06bc36313..f1e6b11fa 100644 --- a/libs/components/src/calendar/calendar-content.tsx +++ b/libs/components/src/calendar/calendar-content.tsx @@ -9,9 +9,8 @@ import { calendarContextId } from "./calendar-context"; export const CalendarContentBase = component$(() => { useStyles$(styles); const context = useContext(calendarContextId); - const mode = context.mode; - if (mode === "popover") { + if (context.mode.value === "popover") { return ( diff --git a/libs/components/src/calendar/calendar-context.tsx b/libs/components/src/calendar/calendar-context.tsx index 9d77570a1..3ba220dab 100644 --- a/libs/components/src/calendar/calendar-context.tsx +++ b/libs/components/src/calendar/calendar-context.tsx @@ -7,8 +7,8 @@ export type CalendarContext = { locale: Locale; dateSig: Signal; dateToFocus: Signal; - showWeekNumber: boolean; - showDaysOfWeek: boolean; + showWeekNumber: Signal; + showDaysOfWeek: Signal; daysOfWeek: [ "Sunday", "Monday", @@ -24,6 +24,6 @@ export type CalendarContext = { currentDate: ISODate; localId: string; isPopoverOpenSig: Signal; - mode: "inline" | "popover"; + mode: Signal<"inline" | "popover">; disabledSig: Signal; }; diff --git a/libs/components/src/calendar/calendar-grid-day.tsx b/libs/components/src/calendar/calendar-grid-day.tsx index aad9b7f61..d69b694a5 100644 --- a/libs/components/src/calendar/calendar-grid-day.tsx +++ b/libs/components/src/calendar/calendar-grid-day.tsx @@ -33,7 +33,7 @@ export const CalendarGridDay = component$( data-qds-calendar-grid-body-row role="row" > - {context.showWeekNumber && ( + {context.showWeekNumber.value && ( // Displays the week number in the calendar grid
diff --git a/libs/components/src/calendar/calendar-grid.tsx b/libs/components/src/calendar/calendar-grid.tsx index 4ac43a4e8..c0e80ef0b 100644 --- a/libs/components/src/calendar/calendar-grid.tsx +++ b/libs/components/src/calendar/calendar-grid.tsx @@ -167,13 +167,13 @@ export const CalendarGrid = component$((props) => { data-qds-calendar-grid role="grid" {...divProps} - data-show-week-numbers={context.showWeekNumber ? "true" : "false"} + data-show-week-numbers={context.showWeekNumber.value ? "true" : "false"} > - {context.showDaysOfWeek && ( + {context.showDaysOfWeek.value && ( // The header section of the calendar grid // biome-ignore lint/a11y/useFocusableInteractive: The header section contains no elements that a user needs to interact with or focus on.
- {context.showWeekNumber && ( + {context.showWeekNumber.value && (
Wk
diff --git a/libs/components/src/calendar/calendar-root.tsx b/libs/components/src/calendar/calendar-root.tsx index e32436710..6d9b34579 100644 --- a/libs/components/src/calendar/calendar-root.tsx +++ b/libs/components/src/calendar/calendar-root.tsx @@ -23,16 +23,8 @@ import { daysArrGenerator } from "./utils"; export type PublicCalendarRootProps = Omit & { /** The locale used for formatting dates and text */ locale?: Locale; - /** Whether to show week numbers in the calendar */ - showWeekNumber?: boolean; - /** Whether to show complete weeks by including days from adjacent months */ - fullWeeks?: boolean; - /** Whether to show the days of the week header */ - showDaysOfWeek?: boolean; /** Event handler called when a date is selected */ onChange$?: QRL<(date: ISODate | null) => void>; - /** The display mode of the calendar */ - mode?: "inline" | "popover"; } & BindableProps; export type CalendarRootBoundProps = { @@ -40,8 +32,16 @@ export type CalendarRootBoundProps = { date: ISODate | null; /** When enabled prevents the user from interacting with the controls */ disabled: boolean; + /** The display mode of the calendar */ + mode: "inline" | "popover"; /** The open state of the calendar popover */ open: boolean; + /** Whether to show week numbers in the calendar */ + showWeekNumber: boolean; + /** Whether to show complete weeks by including days from adjacent months */ + fullWeeks: boolean; + /** Whether to show the days of the week header */ + showDaysOfWeek: boolean; }; // Regular expression for validating ISO date format (yyyy-mm-dd) @@ -50,19 +50,23 @@ const isoDateRegex = /^\d{1,4}-(0[1-9]|1[0-2])-\d{2}$/; /** The root calendar component that manages state and provides context */ export const CalendarRootBase = component$((props) => { useStyles$(styles); + const { locale = "en", onChange$, ...otherProps } = props; const { - fullWeeks = false, - locale = "en", - showWeekNumber = false, - showDaysOfWeek = true, - onChange$, - mode = "inline", - ...otherProps - } = props; - const { dateSig, disabledSig, openSig } = useBindings(props, { + dateSig, + disabledSig, + openSig, + fullWeeksSig, + showWeekNumberSig, + showDaysOfWeekSig, + modeSig + } = useBindings(props, { date: props.date ?? null, disabled: false, - open: false + open: false, + fullWeeks: false, + showWeekNumber: false, + showDaysOfWeek: true, + mode: "inline" }); const labelStr = props["aria-label"] ?? ARIA_LABELS[locale].root; const daysOfWeek = WEEKDAYS[locale]; @@ -79,14 +83,14 @@ export const CalendarRootBase = component$((props) => { const dates = daysArrGenerator({ month: monthToRender.value, year: yearToRender.value.toString(), - fullWeeks + fullWeeks: fullWeeksSig.value }); return dates; }); const context: CalendarContext = { - showWeekNumber, - showDaysOfWeek, + showWeekNumber: showWeekNumberSig, + showDaysOfWeek: showDaysOfWeekSig, daysOfWeek, datesArray, locale, @@ -97,7 +101,7 @@ export const CalendarRootBase = component$((props) => { currentDate, localId, isPopoverOpenSig: openSig, - mode, + mode: modeSig, disabledSig }; diff --git a/libs/components/src/calendar/icons.tsx b/libs/components/src/calendar/icons.tsx deleted file mode 100644 index 761222170..000000000 --- a/libs/components/src/calendar/icons.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { type PropsOf, component$ } from "@builder.io/qwik"; - -export const Calendar = component$((props: PropsOf<"svg">) => ( - - - -)); diff --git a/libs/components/src/checklist/checklist-error.tsx b/libs/components/src/checklist/checklist-error.tsx index 0a18d0316..6f4644033 100644 --- a/libs/components/src/checklist/checklist-error.tsx +++ b/libs/components/src/checklist/checklist-error.tsx @@ -1,6 +1,7 @@ import { type PropsOf, Slot, component$ } from "@builder.io/qwik"; import { CheckboxErrorBase } from "../checkbox/checkbox-error"; +/** Error message component for the checklist */ export const ChecklistError = component$((props: PropsOf) => { return ( diff --git a/libs/components/src/checklist/checklist-hidden-input.tsx b/libs/components/src/checklist/checklist-hidden-input.tsx index 0b15652ad..bc54b45b1 100644 --- a/libs/components/src/checklist/checklist-hidden-input.tsx +++ b/libs/components/src/checklist/checklist-hidden-input.tsx @@ -2,8 +2,11 @@ import { component$ } from "@builder.io/qwik"; import { CheckboxHiddenInput } from "../checkbox/checkbox-hidden-input"; type PublicCheckboxHiddenInputProps = { + /** The name attribute for the hidden input element used in form submission */ name: string; + /** The value attribute for the hidden input element when checked */ value?: string; + /** Whether the checklist input is required for form validation */ required?: boolean; }; diff --git a/libs/components/src/checklist/checklist-item-description.tsx b/libs/components/src/checklist/checklist-item-description.tsx index ffb81081f..9b65d2bb6 100644 --- a/libs/components/src/checklist/checklist-item-description.tsx +++ b/libs/components/src/checklist/checklist-item-description.tsx @@ -1,6 +1,7 @@ import { type PropsOf, Slot, component$ } from "@builder.io/qwik"; import { CheckboxDescriptionBase } from "../checkbox/checkbox-description"; +/** Description component for individual checklist items */ export const ChecklistItemDescription = component$( (props: PropsOf) => { return ( diff --git a/libs/components/src/checklist/checklist-item-indicator.tsx b/libs/components/src/checklist/checklist-item-indicator.tsx index 3be7e8858..ce33ac1f2 100644 --- a/libs/components/src/checklist/checklist-item-indicator.tsx +++ b/libs/components/src/checklist/checklist-item-indicator.tsx @@ -1,6 +1,7 @@ import { type PropsOf, Slot, component$ } from "@builder.io/qwik"; import { CheckboxIndicatorBase } from "../checkbox/checkbox-indicator"; +/** Visual indicator component for individual checklist items */ export const ChecklistItemIndicator = component$( (props: PropsOf) => { return ( diff --git a/libs/components/src/checklist/checklist-item-label.tsx b/libs/components/src/checklist/checklist-item-label.tsx index d0febfb71..d0bf3945f 100644 --- a/libs/components/src/checklist/checklist-item-label.tsx +++ b/libs/components/src/checklist/checklist-item-label.tsx @@ -1,6 +1,7 @@ import { type PropsOf, Slot, component$ } from "@builder.io/qwik"; import { CheckboxLabelBase } from "../checkbox/checkbox-label"; +/** Label component for individual checklist items */ export const ChecklistItemLabel = component$( (props: PropsOf) => { return ( diff --git a/libs/components/src/checklist/checklist-item-trigger.tsx b/libs/components/src/checklist/checklist-item-trigger.tsx index af8ec9c58..06eb2f26b 100644 --- a/libs/components/src/checklist/checklist-item-trigger.tsx +++ b/libs/components/src/checklist/checklist-item-trigger.tsx @@ -1,6 +1,7 @@ import { type PropsOf, Slot, component$ } from "@builder.io/qwik"; import { CheckboxTriggerBase } from "../checkbox/checkbox-trigger"; +/** Clickable trigger component for individual checklist items */ export const ChecklistItemTrigger = component$( (props: PropsOf) => { return ( diff --git a/libs/components/src/checklist/checklist-item.tsx b/libs/components/src/checklist/checklist-item.tsx index 5cee5f3a5..1aa71cf8c 100644 --- a/libs/components/src/checklist/checklist-item.tsx +++ b/libs/components/src/checklist/checklist-item.tsx @@ -58,6 +58,7 @@ export const ChecklistItemBase = component$((props: PublicChecklistItemProps) => ); }); +/** Individual item component within a checklist with asChild functionality */ export const ChecklistItem = withAsChild(ChecklistItemBase, (props) => { props._index = getNextIndex("qds-checklist"); diff --git a/libs/components/src/checklist/checklist-label.tsx b/libs/components/src/checklist/checklist-label.tsx index a23a3fe87..bbd9377ff 100644 --- a/libs/components/src/checklist/checklist-label.tsx +++ b/libs/components/src/checklist/checklist-label.tsx @@ -3,6 +3,7 @@ import { CheckboxLabelBase } from "../checkbox/checkbox-label"; // no-as-child TODO: remove this comment +/** Label component for the checklist */ export const ChecklistLabel = component$((props: PropsOf) => { return ( // Identifies the label element for the select all checkbox in the checklist diff --git a/libs/components/src/checklist/checklist-root.tsx b/libs/components/src/checklist/checklist-root.tsx index d001f6e5c..fd76fafe9 100644 --- a/libs/components/src/checklist/checklist-root.tsx +++ b/libs/components/src/checklist/checklist-root.tsx @@ -12,6 +12,7 @@ import { type ChecklistContext, checklistContextId } from "./checklist-context"; type PublicChecklistRootProps = Omit, "onChange$">; +/** Root container component for the checklist */ export const ChecklistRootBase = component$((props: PublicChecklistRootProps) => { const isAllCheckedSig = useSignal(false); const checkedStatesSig = useSignal<(boolean | "mixed")[]>([]); diff --git a/libs/components/src/checklist/checklist-select-all-indicator.tsx b/libs/components/src/checklist/checklist-select-all-indicator.tsx index 59acc30c7..4a2527b9e 100644 --- a/libs/components/src/checklist/checklist-select-all-indicator.tsx +++ b/libs/components/src/checklist/checklist-select-all-indicator.tsx @@ -1,6 +1,7 @@ import { type PropsOf, Slot, component$ } from "@builder.io/qwik"; import { CheckboxIndicatorBase } from "../checkbox/checkbox-indicator"; +/** Visual indicator component for the select all checkbox */ export const ChecklistSelectAllIndicator = component$( (props: PropsOf) => { return ( diff --git a/libs/components/src/checklist/checklist-select-all.tsx b/libs/components/src/checklist/checklist-select-all.tsx index 9f97f2484..3f8c44324 100644 --- a/libs/components/src/checklist/checklist-select-all.tsx +++ b/libs/components/src/checklist/checklist-select-all.tsx @@ -1,6 +1,7 @@ import { type PropsOf, Slot, component$ } from "@builder.io/qwik"; import { CheckboxTriggerBase } from "../checkbox/checkbox-trigger"; +/** Select all trigger component for the checklist */ export const ChecklistSelectAll = component$( (props: PropsOf) => { return ( diff --git a/libs/components/src/checklist/metadata.json b/libs/components/src/checklist/metadata.json index 382a859c6..ed3c8bbe5 100644 --- a/libs/components/src/checklist/metadata.json +++ b/libs/components/src/checklist/metadata.json @@ -1,4 +1,16 @@ { + "features": [ + "Select all/unselect all functionality", + "Mixed state handling for partial selections", + "Individual item selection tracking", + "WAI-ARIA checkbox list pattern", + "Form input integration", + "Dynamic item state synchronization", + "Nested accessibility descriptions per item", + "Independent item state management", + "Automated item indexing", + "Context-based state propagation" + ], "keyboard": [ { "key": "Space", @@ -16,17 +28,5 @@ "key": "Shift+Tab", "comment": "Moves focus to the previous checkbox trigger" } - ], - "features": [ - "Select all/unselect all functionality", - "Mixed state handling for partial selections", - "Individual item selection tracking", - "WAI-ARIA checkbox list pattern", - "Form input integration", - "Dynamic item state synchronization", - "Nested accessibility descriptions per item", - "Independent item state management", - "Automated item indexing", - "Context-based state propagation" ] }