@arbor-education/design-system.components 0.15.0 → 0.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.gather/skills/write-stories/SKILL.md +207 -271
- package/.storybook/preview.ts +5 -0
- package/CHANGELOG.md +17 -0
- package/README.md +8 -0
- package/component-library.md +144 -13
- package/dist/components/articleCard/ArticleCard.stories.d.ts +137 -11
- package/dist/components/articleCard/ArticleCard.stories.d.ts.map +1 -1
- package/dist/components/articleCard/ArticleCard.stories.js +358 -91
- package/dist/components/articleCard/ArticleCard.stories.js.map +1 -1
- package/dist/components/avatar/Avatar.stories.d.ts +6 -6
- package/dist/components/avatar/Avatar.stories.d.ts.map +1 -1
- package/dist/components/avatar/Avatar.stories.js +393 -49
- package/dist/components/avatar/Avatar.stories.js.map +1 -1
- package/dist/components/avatarGroup/AvatarGroup.stories.d.ts +9 -7
- package/dist/components/avatarGroup/AvatarGroup.stories.d.ts.map +1 -1
- package/dist/components/avatarGroup/AvatarGroup.stories.js +688 -65
- package/dist/components/avatarGroup/AvatarGroup.stories.js.map +1 -1
- package/dist/components/banner/Banner.stories.d.ts.map +1 -1
- package/dist/components/banner/Banner.stories.js +7 -3
- package/dist/components/banner/Banner.stories.js.map +1 -1
- package/dist/components/card/Card.stories.d.ts +105 -4
- package/dist/components/card/Card.stories.d.ts.map +1 -1
- package/dist/components/card/Card.stories.js +336 -18
- package/dist/components/card/Card.stories.js.map +1 -1
- package/dist/components/combobox/Combobox.stories.d.ts +134 -21
- package/dist/components/combobox/Combobox.stories.d.ts.map +1 -1
- package/dist/components/combobox/Combobox.stories.js +676 -175
- package/dist/components/combobox/Combobox.stories.js.map +1 -1
- package/dist/components/datePicker/DatePicker.stories.d.ts +119 -27
- package/dist/components/datePicker/DatePicker.stories.d.ts.map +1 -1
- package/dist/components/datePicker/DatePicker.stories.js +575 -47
- package/dist/components/datePicker/DatePicker.stories.js.map +1 -1
- package/dist/components/dateTimePicker/DateTimePicker.stories.d.ts +155 -39
- package/dist/components/dateTimePicker/DateTimePicker.stories.d.ts.map +1 -1
- package/dist/components/dateTimePicker/DateTimePicker.stories.js +674 -103
- package/dist/components/dateTimePicker/DateTimePicker.stories.js.map +1 -1
- package/dist/components/editableText/EditableText.stories.d.ts +53 -12
- package/dist/components/editableText/EditableText.stories.d.ts.map +1 -1
- package/dist/components/editableText/EditableText.stories.js +401 -64
- package/dist/components/editableText/EditableText.stories.js.map +1 -1
- package/dist/components/formField/FormField.d.ts +4 -0
- package/dist/components/formField/FormField.d.ts.map +1 -1
- package/dist/components/formField/FormField.js +2 -1
- package/dist/components/formField/FormField.js.map +1 -1
- package/dist/components/formField/FormField.test.js +5 -0
- package/dist/components/formField/FormField.test.js.map +1 -1
- package/dist/components/formField/fieldset/Fieldset.stories.d.ts +56 -4
- package/dist/components/formField/fieldset/Fieldset.stories.d.ts.map +1 -1
- package/dist/components/formField/fieldset/Fieldset.stories.js +534 -28
- package/dist/components/formField/fieldset/Fieldset.stories.js.map +1 -1
- package/dist/components/formField/inputs/checkbox/CheckboxGroup.d.ts +3 -1
- package/dist/components/formField/inputs/checkbox/CheckboxGroup.d.ts.map +1 -1
- package/dist/components/formField/inputs/checkbox/CheckboxInput.js +1 -1
- package/dist/components/formField/inputs/checkbox/CheckboxInput.js.map +1 -1
- package/dist/components/formField/inputs/colourPickerDropdown/ColourPickerDropdown.stories.d.ts +95 -1
- package/dist/components/formField/inputs/colourPickerDropdown/ColourPickerDropdown.stories.d.ts.map +1 -1
- package/dist/components/formField/inputs/colourPickerDropdown/ColourPickerDropdown.stories.js +386 -9
- package/dist/components/formField/inputs/colourPickerDropdown/ColourPickerDropdown.stories.js.map +1 -1
- package/dist/components/formField/inputs/radio/RadioButtonGroup.d.ts +6 -2
- package/dist/components/formField/inputs/radio/RadioButtonGroup.d.ts.map +1 -1
- package/dist/components/formField/inputs/radio/RadioButtonGroup.js.map +1 -1
- package/dist/components/formField/inputs/radio/RadioButtonInput.stories.d.ts.map +1 -1
- package/dist/components/formField/inputs/radio/RadioButtonInput.stories.js +61 -49
- package/dist/components/formField/inputs/radio/RadioButtonInput.stories.js.map +1 -1
- package/dist/components/formField/inputs/selectDropdown/SelectDropdown.stories.d.ts +188 -166
- package/dist/components/formField/inputs/selectDropdown/SelectDropdown.stories.d.ts.map +1 -1
- package/dist/components/formField/inputs/selectDropdown/SelectDropdown.stories.js +821 -160
- package/dist/components/formField/inputs/selectDropdown/SelectDropdown.stories.js.map +1 -1
- package/dist/components/formField/inputs/time/TimeInput.stories.d.ts +176 -22
- package/dist/components/formField/inputs/time/TimeInput.stories.d.ts.map +1 -1
- package/dist/components/formField/inputs/time/TimeInput.stories.js +851 -92
- package/dist/components/formField/inputs/time/TimeInput.stories.js.map +1 -1
- package/dist/components/formField/label/Label.stories.d.ts +54 -5
- package/dist/components/formField/label/Label.stories.d.ts.map +1 -1
- package/dist/components/formField/label/Label.stories.js +238 -4
- package/dist/components/formField/label/Label.stories.js.map +1 -1
- package/dist/components/icoText/IcoText.stories.d.ts +32 -6
- package/dist/components/icoText/IcoText.stories.d.ts.map +1 -1
- package/dist/components/icoText/IcoText.stories.js +309 -14
- package/dist/components/icoText/IcoText.stories.js.map +1 -1
- package/dist/components/kpiCard/KPICard.stories.d.ts +100 -2
- package/dist/components/kpiCard/KPICard.stories.d.ts.map +1 -1
- package/dist/components/kpiCard/KPICard.stories.js +354 -10
- package/dist/components/kpiCard/KPICard.stories.js.map +1 -1
- package/dist/components/kvpList/KVPList.stories.d.ts +57 -4
- package/dist/components/kvpList/KVPList.stories.d.ts.map +1 -1
- package/dist/components/kvpList/KVPList.stories.js +403 -10
- package/dist/components/kvpList/KVPList.stories.js.map +1 -1
- package/dist/components/modal/Modal.stories.d.ts +113 -9
- package/dist/components/modal/Modal.stories.d.ts.map +1 -1
- package/dist/components/modal/Modal.stories.js +633 -13
- package/dist/components/modal/Modal.stories.js.map +1 -1
- package/dist/components/modal/modalManager/ModalManager.stories.d.ts +34 -10
- package/dist/components/modal/modalManager/ModalManager.stories.d.ts.map +1 -1
- package/dist/components/modal/modalManager/ModalManager.stories.js +463 -85
- package/dist/components/modal/modalManager/ModalManager.stories.js.map +1 -1
- package/dist/components/pill/Pill.d.ts.map +1 -1
- package/dist/components/pill/Pill.js +1 -1
- package/dist/components/pill/Pill.js.map +1 -1
- package/dist/components/pill/Pill.stories.d.ts.map +1 -1
- package/dist/components/pill/Pill.stories.js +11 -13
- package/dist/components/pill/Pill.stories.js.map +1 -1
- package/dist/components/row/Row.stories.d.ts +1 -2
- package/dist/components/row/Row.stories.d.ts.map +1 -1
- package/dist/components/row/Row.stories.js +360 -50
- package/dist/components/row/Row.stories.js.map +1 -1
- package/dist/components/searchBar/SearchBar.stories.d.ts +52 -4
- package/dist/components/searchBar/SearchBar.stories.d.ts.map +1 -1
- package/dist/components/searchBar/SearchBar.stories.js +428 -36
- package/dist/components/searchBar/SearchBar.stories.js.map +1 -1
- package/dist/components/section/Section.stories.d.ts +11 -41
- package/dist/components/section/Section.stories.d.ts.map +1 -1
- package/dist/components/section/Section.stories.js +494 -56
- package/dist/components/section/Section.stories.js.map +1 -1
- package/dist/components/singleUser/SingleUser.stories.d.ts +5 -4
- package/dist/components/singleUser/SingleUser.stories.d.ts.map +1 -1
- package/dist/components/singleUser/SingleUser.stories.js +303 -31
- package/dist/components/singleUser/SingleUser.stories.js.map +1 -1
- package/dist/components/slideoverManager/SlideoverManager.stories.d.ts +32 -11
- package/dist/components/slideoverManager/SlideoverManager.stories.d.ts.map +1 -1
- package/dist/components/slideoverManager/SlideoverManager.stories.js +380 -84
- package/dist/components/slideoverManager/SlideoverManager.stories.js.map +1 -1
- package/dist/components/table/DSDefaultColDef.d.ts.map +1 -1
- package/dist/components/table/DSDefaultColDef.js +4 -3
- package/dist/components/table/DSDefaultColDef.js.map +1 -1
- package/dist/components/table/Table.d.ts +6 -1
- package/dist/components/table/Table.d.ts.map +1 -1
- package/dist/components/table/Table.js +8 -3
- package/dist/components/table/Table.js.map +1 -1
- package/dist/components/table/Table.stories.d.ts +2 -0
- package/dist/components/table/Table.stories.d.ts.map +1 -1
- package/dist/components/table/Table.stories.js +357 -3
- package/dist/components/table/Table.stories.js.map +1 -1
- package/dist/components/table/TableFooter.stories.d.ts +49 -0
- package/dist/components/table/TableFooter.stories.d.ts.map +1 -0
- package/dist/components/table/TableFooter.stories.js +137 -0
- package/dist/components/table/TableFooter.stories.js.map +1 -0
- package/dist/components/table/TableHeader.stories.d.ts +93 -0
- package/dist/components/table/TableHeader.stories.d.ts.map +1 -0
- package/dist/components/table/TableHeader.stories.js +176 -0
- package/dist/components/table/TableHeader.stories.js.map +1 -0
- package/dist/components/table/cellEditors/DateCellEditor.stories.d.ts +44 -0
- package/dist/components/table/cellEditors/DateCellEditor.stories.d.ts.map +1 -0
- package/dist/components/table/cellEditors/DateCellEditor.stories.js +186 -0
- package/dist/components/table/cellEditors/DateCellEditor.stories.js.map +1 -0
- package/dist/components/table/cellRenderers/BooleanCellRenderer.stories.d.ts +40 -0
- package/dist/components/table/cellRenderers/BooleanCellRenderer.stories.d.ts.map +1 -0
- package/dist/components/table/cellRenderers/BooleanCellRenderer.stories.js +209 -0
- package/dist/components/table/cellRenderers/BooleanCellRenderer.stories.js.map +1 -0
- package/dist/components/table/cellRenderers/ButtonCellRenderer.stories.d.ts +48 -0
- package/dist/components/table/cellRenderers/ButtonCellRenderer.stories.d.ts.map +1 -0
- package/dist/components/table/cellRenderers/ButtonCellRenderer.stories.js +244 -0
- package/dist/components/table/cellRenderers/ButtonCellRenderer.stories.js.map +1 -0
- package/dist/components/table/cellRenderers/CheckboxCellRenderer.d.ts.map +1 -1
- package/dist/components/table/cellRenderers/CheckboxCellRenderer.js +3 -1
- package/dist/components/table/cellRenderers/CheckboxCellRenderer.js.map +1 -1
- package/dist/components/table/cellRenderers/CheckboxCellRenderer.stories.d.ts +64 -0
- package/dist/components/table/cellRenderers/CheckboxCellRenderer.stories.d.ts.map +1 -0
- package/dist/components/table/cellRenderers/CheckboxCellRenderer.stories.js +241 -0
- package/dist/components/table/cellRenderers/CheckboxCellRenderer.stories.js.map +1 -0
- package/dist/components/table/cellRenderers/DefaultCellRenderer.stories.d.ts +55 -0
- package/dist/components/table/cellRenderers/DefaultCellRenderer.stories.d.ts.map +1 -0
- package/dist/components/table/cellRenderers/DefaultCellRenderer.stories.js +245 -0
- package/dist/components/table/cellRenderers/DefaultCellRenderer.stories.js.map +1 -0
- package/dist/components/table/cellRenderers/InlineTextCellRenderer.stories.d.ts +67 -0
- package/dist/components/table/cellRenderers/InlineTextCellRenderer.stories.d.ts.map +1 -0
- package/dist/components/table/cellRenderers/InlineTextCellRenderer.stories.js +221 -0
- package/dist/components/table/cellRenderers/InlineTextCellRenderer.stories.js.map +1 -0
- package/dist/components/table/cellRenderers/SelectDropdownCellRenderer.stories.d.ts +75 -0
- package/dist/components/table/cellRenderers/SelectDropdownCellRenderer.stories.d.ts.map +1 -0
- package/dist/components/table/cellRenderers/SelectDropdownCellRenderer.stories.js +270 -0
- package/dist/components/table/cellRenderers/SelectDropdownCellRenderer.stories.js.map +1 -0
- package/dist/components/table/columnFilters/BooleanFilter.stories.d.ts +57 -0
- package/dist/components/table/columnFilters/BooleanFilter.stories.d.ts.map +1 -0
- package/dist/components/table/columnFilters/BooleanFilter.stories.js +198 -0
- package/dist/components/table/columnFilters/BooleanFilter.stories.js.map +1 -0
- package/dist/components/table/columnFilters/TimeFilter.stories.d.ts +58 -0
- package/dist/components/table/columnFilters/TimeFilter.stories.d.ts.map +1 -0
- package/dist/components/table/columnFilters/TimeFilter.stories.js +207 -0
- package/dist/components/table/columnFilters/TimeFilter.stories.js.map +1 -0
- package/dist/components/table/pagination/PaginationPanel.stories.d.ts +113 -0
- package/dist/components/table/pagination/PaginationPanel.stories.d.ts.map +1 -0
- package/dist/components/table/pagination/PaginationPanel.stories.js +272 -0
- package/dist/components/table/pagination/PaginationPanel.stories.js.map +1 -0
- package/dist/components/table/tableControls/TableControls.stories.d.ts +151 -0
- package/dist/components/table/tableControls/TableControls.stories.d.ts.map +1 -0
- package/dist/components/table/tableControls/TableControls.stories.js +356 -0
- package/dist/components/table/tableControls/TableControls.stories.js.map +1 -0
- package/dist/components/table/tableControls/TableSettingsDropdown.d.ts +27 -1
- package/dist/components/table/tableControls/TableSettingsDropdown.d.ts.map +1 -1
- package/dist/components/table/tableControls/TableSettingsDropdown.js +53 -26
- package/dist/components/table/tableControls/TableSettingsDropdown.js.map +1 -1
- package/dist/components/table/tableControls/TableSettingsDropdown.test.d.ts +2 -0
- package/dist/components/table/tableControls/TableSettingsDropdown.test.d.ts.map +1 -0
- package/dist/components/table/tableControls/TableSettingsDropdown.test.js +178 -0
- package/dist/components/table/tableControls/TableSettingsDropdown.test.js.map +1 -0
- package/dist/components/tabs/Tabs.stories.d.ts +22 -4
- package/dist/components/tabs/Tabs.stories.d.ts.map +1 -1
- package/dist/components/tabs/Tabs.stories.js +398 -22
- package/dist/components/tabs/Tabs.stories.js.map +1 -1
- package/dist/components/tabs/TabsItem.stories.d.ts +54 -1
- package/dist/components/tabs/TabsItem.stories.d.ts.map +1 -1
- package/dist/components/tabs/TabsItem.stories.js +61 -9
- package/dist/components/tabs/TabsItem.stories.js.map +1 -1
- package/dist/components/toast/Toast.stories.d.ts +103 -10
- package/dist/components/toast/Toast.stories.d.ts.map +1 -1
- package/dist/components/toast/Toast.stories.js +409 -47
- package/dist/components/toast/Toast.stories.js.map +1 -1
- package/dist/components/toggle/Toggle.stories.d.ts +61 -46
- package/dist/components/toggle/Toggle.stories.d.ts.map +1 -1
- package/dist/components/toggle/Toggle.stories.js +311 -122
- package/dist/components/toggle/Toggle.stories.js.map +1 -1
- package/dist/components/tooltip/Tooltip.stories.d.ts +78 -6
- package/dist/components/tooltip/Tooltip.stories.d.ts.map +1 -1
- package/dist/components/tooltip/Tooltip.stories.js +413 -7
- package/dist/components/tooltip/Tooltip.stories.js.map +1 -1
- package/dist/components/tooltip/TooltipWrapper.stories.d.ts +71 -7
- package/dist/components/tooltip/TooltipWrapper.stories.d.ts.map +1 -1
- package/dist/components/tooltip/TooltipWrapper.stories.js +238 -10
- package/dist/components/tooltip/TooltipWrapper.stories.js.map +1 -1
- package/dist/index.css +8 -0
- package/dist/index.css.map +1 -1
- package/dist/utils/PopupParentContext.stories.d.ts +17 -0
- package/dist/utils/PopupParentContext.stories.d.ts.map +1 -0
- package/dist/utils/PopupParentContext.stories.js +266 -0
- package/dist/utils/PopupParentContext.stories.js.map +1 -0
- package/dist/utils/getDefaultPopupParent.d.ts.map +1 -1
- package/dist/utils/getDefaultPopupParent.js +6 -0
- package/dist/utils/getDefaultPopupParent.js.map +1 -1
- package/package.json +1 -1
- package/src/components/articleCard/ArticleCard.stories.tsx +524 -111
- package/src/components/avatar/Avatar.stories.tsx +504 -59
- package/src/components/avatarGroup/AvatarGroup.stories.tsx +977 -175
- package/src/components/banner/Banner.stories.tsx +7 -3
- package/src/components/card/Card.stories.tsx +466 -36
- package/src/components/combobox/Combobox.stories.tsx +867 -260
- package/src/components/datePicker/DatePicker.stories.tsx +777 -60
- package/src/components/dateTimePicker/DateTimePicker.stories.tsx +910 -132
- package/src/components/editableText/EditableText.stories.tsx +567 -91
- package/src/components/formField/FormField.test.tsx +6 -0
- package/src/components/formField/FormField.tsx +5 -0
- package/src/components/formField/fieldset/Fieldset.stories.tsx +761 -51
- package/src/components/formField/inputs/checkbox/CheckboxGroup.tsx +1 -1
- package/src/components/formField/inputs/checkbox/CheckboxInput.tsx +1 -1
- package/src/components/formField/inputs/colourPickerDropdown/ColourPickerDropdown.stories.tsx +504 -11
- package/src/components/formField/inputs/radio/RadioButtonGroup.tsx +17 -4
- package/src/components/formField/inputs/radio/RadioButtonInput.stories.tsx +71 -59
- package/src/components/formField/inputs/selectDropdown/SelectDropdown.stories.tsx +1079 -168
- package/src/components/formField/inputs/time/TimeInput.stories.tsx +1140 -104
- package/src/components/formField/label/Label.stories.tsx +317 -8
- package/src/components/icoText/IcoText.stories.tsx +442 -31
- package/src/components/kpiCard/KPICard.stories.tsx +475 -30
- package/src/components/kvpList/KVPList.stories.tsx +593 -26
- package/src/components/modal/Modal.stories.tsx +963 -26
- package/src/components/modal/modalManager/ModalManager.stories.tsx +612 -454
- package/src/components/pill/Pill.stories.tsx +11 -13
- package/src/components/pill/Pill.tsx +1 -0
- package/src/components/row/Row.stories.tsx +474 -58
- package/src/components/searchBar/SearchBar.stories.tsx +570 -38
- package/src/components/section/Section.stories.tsx +723 -70
- package/src/components/singleUser/SingleUser.stories.tsx +393 -34
- package/src/components/slideoverManager/SlideoverManager.stories.tsx +572 -342
- package/src/components/table/DSDefaultColDef.ts +25 -5
- package/src/components/table/Table.stories.tsx +411 -3
- package/src/components/table/Table.tsx +9 -2
- package/src/components/table/TableFooter.stories.tsx +196 -0
- package/src/components/table/TableHeader.stories.tsx +251 -0
- package/src/components/table/cellEditors/DateCellEditor.stories.tsx +245 -0
- package/src/components/table/cellRenderers/BooleanCellRenderer.stories.tsx +278 -0
- package/src/components/table/cellRenderers/ButtonCellRenderer.stories.tsx +333 -0
- package/src/components/table/cellRenderers/CheckboxCellRenderer.stories.tsx +337 -0
- package/src/components/table/cellRenderers/CheckboxCellRenderer.tsx +5 -1
- package/src/components/table/cellRenderers/DefaultCellRenderer.stories.tsx +342 -0
- package/src/components/table/cellRenderers/InlineTextCellRenderer.stories.tsx +292 -0
- package/src/components/table/cellRenderers/SelectDropdownCellRenderer.stories.tsx +369 -0
- package/src/components/table/columnFilters/BooleanFilter.stories.tsx +268 -0
- package/src/components/table/columnFilters/TimeFilter.stories.tsx +281 -0
- package/src/components/table/pagination/PaginationPanel.stories.tsx +327 -0
- package/src/components/table/tableControls/TableControls.stories.tsx +415 -0
- package/src/components/table/tableControls/TableSettingsDropdown.test.tsx +207 -0
- package/src/components/table/tableControls/TableSettingsDropdown.tsx +103 -39
- package/src/components/tabs/Tabs.stories.tsx +540 -60
- package/src/components/tabs/TabsItem.stories.tsx +82 -8
- package/src/components/toast/Toast.stories.tsx +539 -77
- package/src/components/toggle/Toggle.stories.tsx +371 -135
- package/src/components/tooltip/Tooltip.stories.tsx +606 -15
- package/src/components/tooltip/TooltipWrapper.stories.tsx +348 -12
- package/src/docs/Contributing.mdx +241 -0
- package/src/docs/UsingComponents.mdx +93 -0
- package/src/docs/Welcome.mdx +68 -0
- package/src/global.scss +7 -0
- package/src/utils/PopupParentContext.stories.tsx +367 -0
- package/src/utils/getDefaultPopupParent.ts +6 -0
- package/.ralph/storybook-upgrade/knowledge.md +0 -308
- package/.ralph/storybook-upgrade/prd.json +0 -777
- package/.ralph/storybook-upgrade/progress.md +0 -342
- package/src/components/table/TableWIP.mdx +0 -3
|
@@ -0,0 +1,244 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Controls, Heading as DocHeading, Markdown, Primary as DocPrimary, Stories, Subtitle, Title, } from '@storybook/addon-docs/blocks';
|
|
3
|
+
import { ButtonCellRenderer } from './ButtonCellRenderer';
|
|
4
|
+
import { Table } from '../../table/Table';
|
|
5
|
+
// ---------------------------------------------------------------------------
|
|
6
|
+
// Docs page content
|
|
7
|
+
// ---------------------------------------------------------------------------
|
|
8
|
+
const DESCRIPTION_INTRO = [
|
|
9
|
+
'`ButtonCellRenderer` is an AG Grid cell renderer that renders an Arbor `Button` inside a table cell.',
|
|
10
|
+
'The cell `value` (or `valueFormatted`) must be a `ButtonProps` object — the renderer spreads it',
|
|
11
|
+
'directly onto `Button`, so all button variants, sizes, and handlers are supported.',
|
|
12
|
+
'',
|
|
13
|
+
'Register it via the string key `dsButtonCellRenderer` (pre-registered by Arbor\'s `Table`) or by importing the component directly.',
|
|
14
|
+
].join('\n');
|
|
15
|
+
const USAGE_GUIDANCE = [
|
|
16
|
+
'### When to use',
|
|
17
|
+
'',
|
|
18
|
+
'- On action columns where each row needs a button (e.g. "View", "Edit", "Delete")',
|
|
19
|
+
'- When the action is contextual to the row — the `onClick` handler receives the event and can close over row data',
|
|
20
|
+
'',
|
|
21
|
+
'---',
|
|
22
|
+
'',
|
|
23
|
+
'### When NOT to use',
|
|
24
|
+
'',
|
|
25
|
+
'| Situation | Use instead |',
|
|
26
|
+
'|---|---|',
|
|
27
|
+
'| The action navigates to another page | A link (`<a>`) cell renderer or AG Grid\'s built-in link support |',
|
|
28
|
+
'| Every row shares the exact same static label with no per-row variation | A column header action button outside the grid |',
|
|
29
|
+
].join('\n');
|
|
30
|
+
const DEVELOPER_NOTES = [
|
|
31
|
+
'### Critical usage patterns',
|
|
32
|
+
'',
|
|
33
|
+
'**`value` must be a `ButtonProps` object with a `children` key.**',
|
|
34
|
+
'The renderer reads `value.children` as the button label. If `children` is absent it falls back to `value.value`.',
|
|
35
|
+
'All other `ButtonProps` (`variant`, `size`, `onClick`, `disabled`) are spread onto `Button`.',
|
|
36
|
+
'',
|
|
37
|
+
'**Provide the ButtonProps via `valueGetter` — the cell field value must BE the ButtonProps object.**',
|
|
38
|
+
'',
|
|
39
|
+
'```tsx',
|
|
40
|
+
"import { Table } from '@arbor-education/design-system.components';",
|
|
41
|
+
'',
|
|
42
|
+
'const colDefs = [',
|
|
43
|
+
' {',
|
|
44
|
+
" colId: 'viewAction',",
|
|
45
|
+
" headerName: '',",
|
|
46
|
+
" cellRenderer: 'dsButtonCellRenderer',",
|
|
47
|
+
' valueGetter: (params) => ({',
|
|
48
|
+
" children: 'View',",
|
|
49
|
+
" variant: 'secondary',",
|
|
50
|
+
" size: 'S',",
|
|
51
|
+
' onClick: () => handleView(params.data),',
|
|
52
|
+
' }),',
|
|
53
|
+
' },',
|
|
54
|
+
'];',
|
|
55
|
+
'```',
|
|
56
|
+
'',
|
|
57
|
+
'---',
|
|
58
|
+
'',
|
|
59
|
+
'### Accessibility',
|
|
60
|
+
'',
|
|
61
|
+
'Each cell\'s button inherits its accessible name from `children`. If `children` is an icon with no',
|
|
62
|
+
'visible text, add `aria-label` to the ButtonProps object.',
|
|
63
|
+
'',
|
|
64
|
+
'---',
|
|
65
|
+
'',
|
|
66
|
+
'### TypeScript types',
|
|
67
|
+
'',
|
|
68
|
+
'```ts',
|
|
69
|
+
"import { ButtonCellRenderer } from '@arbor-education/design-system.components';",
|
|
70
|
+
"import type { ButtonProps } from '@arbor-education/design-system.components';",
|
|
71
|
+
'',
|
|
72
|
+
'// In your valueGetter:',
|
|
73
|
+
'// (params): ButtonProps => ({ children: "View", variant: "secondary", onClick: ... })',
|
|
74
|
+
'```',
|
|
75
|
+
].join('\n');
|
|
76
|
+
const RELATED_COMPONENTS = [
|
|
77
|
+
'## Related components',
|
|
78
|
+
'',
|
|
79
|
+
'[Table](?path=/docs/components-table--docs) · [Button](?path=/docs/components-button--docs)',
|
|
80
|
+
].join('\n');
|
|
81
|
+
const PROPS_INTRO = 'The preview below shows `ButtonCellRenderer` with representative button configurations. The `value` prop is a `ButtonProps` object — most individual props are not separately controllable via the Controls panel.';
|
|
82
|
+
// ---------------------------------------------------------------------------
|
|
83
|
+
// Custom DocsPage
|
|
84
|
+
// ---------------------------------------------------------------------------
|
|
85
|
+
function ButtonCellRendererDocsPage() {
|
|
86
|
+
return (_jsxs(_Fragment, { children: [_jsx(Title, {}), _jsx(Subtitle, {}), _jsx(Markdown, { children: DESCRIPTION_INTRO }), _jsx(DocHeading, { children: "Interactive example" }), _jsx(Markdown, { children: PROPS_INTRO }), _jsx(DocPrimary, {}), _jsx(Controls, {}), _jsx(DocHeading, { children: "Usage guidance" }), _jsx(Markdown, { children: USAGE_GUIDANCE }), _jsx(DocHeading, { children: "Developer notes" }), _jsx(Markdown, { children: DEVELOPER_NOTES }), _jsx(DocHeading, { children: "Examples" }), _jsx(Stories, { title: "" }), _jsx(Markdown, { children: RELATED_COMPONENTS })] }));
|
|
87
|
+
}
|
|
88
|
+
// ---------------------------------------------------------------------------
|
|
89
|
+
// Meta
|
|
90
|
+
// ---------------------------------------------------------------------------
|
|
91
|
+
const MOCK_CELL_PROPS = {};
|
|
92
|
+
const meta = {
|
|
93
|
+
title: 'Components/Table/CellRenderers/ButtonCellRenderer',
|
|
94
|
+
component: ButtonCellRenderer,
|
|
95
|
+
tags: ['autodocs'],
|
|
96
|
+
parameters: {
|
|
97
|
+
layout: 'padded',
|
|
98
|
+
docs: { page: ButtonCellRendererDocsPage },
|
|
99
|
+
},
|
|
100
|
+
argTypes: {
|
|
101
|
+
value: {
|
|
102
|
+
control: false,
|
|
103
|
+
description: 'A `ButtonProps` object. The `children` key becomes the button label; all other `ButtonProps` (`variant`, `size`, `onClick`, `disabled`) are spread onto the `Button` component.',
|
|
104
|
+
table: {
|
|
105
|
+
type: { summary: 'ButtonProps' },
|
|
106
|
+
},
|
|
107
|
+
},
|
|
108
|
+
valueFormatted: {
|
|
109
|
+
control: false,
|
|
110
|
+
description: 'If provided, overrides `value` as the source for button props. Set by AG Grid\'s `valueFormatter`.',
|
|
111
|
+
table: {
|
|
112
|
+
type: { summary: 'ButtonProps | undefined' },
|
|
113
|
+
defaultValue: { summary: 'undefined' },
|
|
114
|
+
},
|
|
115
|
+
},
|
|
116
|
+
},
|
|
117
|
+
};
|
|
118
|
+
export default meta;
|
|
119
|
+
// ---------------------------------------------------------------------------
|
|
120
|
+
// Helper: attach a per-story description to docs
|
|
121
|
+
// ---------------------------------------------------------------------------
|
|
122
|
+
const withDescription = (story, description) => ({
|
|
123
|
+
...story,
|
|
124
|
+
parameters: {
|
|
125
|
+
...story.parameters,
|
|
126
|
+
docs: { ...story.parameters?.docs, description: { story: description } },
|
|
127
|
+
},
|
|
128
|
+
});
|
|
129
|
+
// ---------------------------------------------------------------------------
|
|
130
|
+
// Stories
|
|
131
|
+
// ---------------------------------------------------------------------------
|
|
132
|
+
export const Default = withDescription({
|
|
133
|
+
parameters: { controls: { disable: true } },
|
|
134
|
+
render: () => (_jsx(ButtonCellRenderer, { ...MOCK_CELL_PROPS, value: { children: 'View details', variant: 'secondary', size: 'S' } })),
|
|
135
|
+
}, 'A secondary `Button` rendered inside a cell. `variant: "secondary"` and `size: "S"` are typical for action columns.');
|
|
136
|
+
export const PrimaryVariant = withDescription({
|
|
137
|
+
parameters: {
|
|
138
|
+
controls: { disable: true },
|
|
139
|
+
docs: {
|
|
140
|
+
source: {
|
|
141
|
+
language: 'tsx',
|
|
142
|
+
code: `
|
|
143
|
+
import { Table } from '@arbor-education/design-system.components';
|
|
144
|
+
|
|
145
|
+
const colDefs = [
|
|
146
|
+
{
|
|
147
|
+
colId: 'action',
|
|
148
|
+
headerName: '',
|
|
149
|
+
cellRenderer: 'dsButtonCellRenderer',
|
|
150
|
+
valueGetter: (params) => ({
|
|
151
|
+
children: 'Enrol',
|
|
152
|
+
variant: 'primary',
|
|
153
|
+
size: 'S',
|
|
154
|
+
onClick: () => handleEnrol(params.data),
|
|
155
|
+
}),
|
|
156
|
+
},
|
|
157
|
+
];
|
|
158
|
+
`.trim(),
|
|
159
|
+
},
|
|
160
|
+
},
|
|
161
|
+
},
|
|
162
|
+
render: () => (_jsx(ButtonCellRenderer, { ...MOCK_CELL_PROPS, value: { children: 'Enrol', variant: 'primary', size: 'S' } })),
|
|
163
|
+
}, '`variant: "primary"` — use sparingly and only when the action is the primary call-to-action for the row.');
|
|
164
|
+
export const DestructiveVariant = withDescription({
|
|
165
|
+
parameters: { controls: { disable: true } },
|
|
166
|
+
render: () => (_jsx(ButtonCellRenderer, { ...MOCK_CELL_PROPS, value: { children: 'Remove', variant: 'primary-destructive', size: 'S' } })),
|
|
167
|
+
}, '`variant: "primary-destructive"` — for destructive actions like delete or remove.');
|
|
168
|
+
export const Disabled = withDescription({
|
|
169
|
+
parameters: { controls: { disable: true } },
|
|
170
|
+
render: () => (_jsx(ButtonCellRenderer, { ...MOCK_CELL_PROPS, value: { children: 'View details', variant: 'secondary', size: 'S', disabled: true } })),
|
|
171
|
+
}, 'Pass `disabled: true` in the `ButtonProps` value to conditionally disable the button for specific rows.');
|
|
172
|
+
const BUTTON_IN_TABLE_DATA = [
|
|
173
|
+
{ id: 1, name: 'Alice Johnson', role: 'Developer' },
|
|
174
|
+
{ id: 2, name: 'Bob Smith', role: 'Designer' },
|
|
175
|
+
{ id: 3, name: 'Charlie Brown', role: 'Manager' },
|
|
176
|
+
];
|
|
177
|
+
export const InATable = withDescription({
|
|
178
|
+
parameters: {
|
|
179
|
+
controls: { disable: true },
|
|
180
|
+
docs: {
|
|
181
|
+
source: {
|
|
182
|
+
language: 'tsx',
|
|
183
|
+
code: `
|
|
184
|
+
import { Table } from '@arbor-education/design-system.components';
|
|
185
|
+
|
|
186
|
+
const rowData = [
|
|
187
|
+
{ id: 1, name: 'Alice Johnson', role: 'Developer' },
|
|
188
|
+
{ id: 2, name: 'Bob Smith', role: 'Designer' },
|
|
189
|
+
{ id: 3, name: 'Charlie Brown', role: 'Manager' },
|
|
190
|
+
];
|
|
191
|
+
|
|
192
|
+
function ButtonCellRendererExample() {
|
|
193
|
+
return (
|
|
194
|
+
<Table
|
|
195
|
+
rowData={rowData}
|
|
196
|
+
columnDefs={[
|
|
197
|
+
{ field: 'name', headerName: 'Name', flex: 2 },
|
|
198
|
+
{ field: 'role', headerName: 'Role', flex: 1 },
|
|
199
|
+
{
|
|
200
|
+
colId: 'viewAction',
|
|
201
|
+
headerName: '',
|
|
202
|
+
flex: 1,
|
|
203
|
+
maxWidth: 180,
|
|
204
|
+
editable: false,
|
|
205
|
+
cellRenderer: 'dsButtonCellRenderer',
|
|
206
|
+
valueGetter: (params) => ({
|
|
207
|
+
children: 'View details',
|
|
208
|
+
variant: 'secondary',
|
|
209
|
+
size: 'S',
|
|
210
|
+
onClick: () => console.log('View', params.data.name),
|
|
211
|
+
}),
|
|
212
|
+
},
|
|
213
|
+
]}
|
|
214
|
+
defaultColDef={{ flex: 1, minWidth: 120 }}
|
|
215
|
+
domLayout="autoHeight"
|
|
216
|
+
/>
|
|
217
|
+
);
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
export default ButtonCellRendererExample;
|
|
221
|
+
`.trim(),
|
|
222
|
+
},
|
|
223
|
+
},
|
|
224
|
+
},
|
|
225
|
+
render: () => (_jsx(Table, { rowData: BUTTON_IN_TABLE_DATA, columnDefs: [
|
|
226
|
+
{ field: 'name', headerName: 'Name', flex: 2 },
|
|
227
|
+
{ field: 'role', headerName: 'Role', flex: 1 },
|
|
228
|
+
{
|
|
229
|
+
colId: 'viewAction',
|
|
230
|
+
headerName: '',
|
|
231
|
+
flex: 1,
|
|
232
|
+
maxWidth: 180,
|
|
233
|
+
editable: false,
|
|
234
|
+
cellRenderer: 'dsButtonCellRenderer',
|
|
235
|
+
valueGetter: params => ({
|
|
236
|
+
children: 'View details',
|
|
237
|
+
variant: 'secondary',
|
|
238
|
+
size: 'S',
|
|
239
|
+
onClick: () => console.log('View', params.data.name),
|
|
240
|
+
}),
|
|
241
|
+
},
|
|
242
|
+
], defaultColDef: { flex: 1, minWidth: 120 }, domLayout: "autoHeight" })),
|
|
243
|
+
}, '`dsButtonCellRenderer` wired up inside a full `Table`. The action column uses `valueGetter` to return a `ButtonProps` object per row — `onClick` closes over `params.data` so each button knows its row. Click a button and check the browser console.');
|
|
244
|
+
//# sourceMappingURL=ButtonCellRenderer.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ButtonCellRenderer.stories.js","sourceRoot":"","sources":["../../../../src/components/table/cellRenderers/ButtonCellRenderer.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxCellRenderer.d.ts","sourceRoot":"","sources":["../../../../src/components/table/cellRenderers/CheckboxCellRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAG7D,eAAO,MAAM,oBAAoB,GAAI,OAAO,uBAAuB,
|
|
1
|
+
{"version":3,"file":"CheckboxCellRenderer.d.ts","sourceRoot":"","sources":["../../../../src/components/table/cellRenderers/CheckboxCellRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAG7D,eAAO,MAAM,oBAAoB,GAAI,OAAO,uBAAuB,4CA4BlE,CAAC"}
|
|
@@ -3,10 +3,12 @@ import { CheckboxInput } from '../../formField/inputs/checkbox/CheckboxInput';
|
|
|
3
3
|
export const CheckboxCellRenderer = (props) => {
|
|
4
4
|
const { value, node, column, colDef = {}, } = props;
|
|
5
5
|
const { cellRendererParams, headerName } = colDef;
|
|
6
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
7
|
+
const { suppressCellFocusAndFocusFirstElement, suppressMouseEventHandling, ...checkboxParams } = (cellRendererParams ?? {});
|
|
6
8
|
return (_jsx("div", { className: "ds-checkbox-cell-renderer", children: _jsx(CheckboxInput, { checked: value, "aria-label": headerName && `Checkbox: ${headerName}`, onChange: () => {
|
|
7
9
|
if (column) {
|
|
8
10
|
node.setDataValue(column, !value);
|
|
9
11
|
}
|
|
10
|
-
}, ...
|
|
12
|
+
}, ...checkboxParams }) }));
|
|
11
13
|
};
|
|
12
14
|
//# sourceMappingURL=CheckboxCellRenderer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxCellRenderer.js","sourceRoot":"","sources":["../../../../src/components/table/cellRenderers/CheckboxCellRenderer.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,oDAAoD,CAAC;AAEnF,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAA8B,EAAE,EAAE;IACrE,MAAM,EACJ,KAAK,EACL,IAAI,EACJ,MAAM,EACN,MAAM,GAAG,EAAE,GACZ,GAAG,KAAK,CAAC;IAEV,MAAM,EAAE,kBAAkB,EAAE,UAAU,EAAE,GAAG,MAAM,CAAC;IAElD,OAAO,CACL,cAAK,SAAS,EAAC,2BAA2B,YACxC,KAAC,aAAa,IACZ,OAAO,EAAE,KAAK,gBACF,UAAU,IAAI,aAAa,UAAU,EAAE,EACnD,QAAQ,EAAE,GAAG,EAAE;gBACb,IAAI,MAAM,EAAE,CAAC;oBACX,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,CAAC,KAAK,CAAC,CAAC;gBACpC,CAAC;YACH,CAAC,KACG,
|
|
1
|
+
{"version":3,"file":"CheckboxCellRenderer.js","sourceRoot":"","sources":["../../../../src/components/table/cellRenderers/CheckboxCellRenderer.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,oDAAoD,CAAC;AAEnF,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAA8B,EAAE,EAAE;IACrE,MAAM,EACJ,KAAK,EACL,IAAI,EACJ,MAAM,EACN,MAAM,GAAG,EAAE,GACZ,GAAG,KAAK,CAAC;IAEV,MAAM,EAAE,kBAAkB,EAAE,UAAU,EAAE,GAAG,MAAM,CAAC;IAElD,6DAA6D;IAC7D,MAAM,EAAE,qCAAqC,EAAE,0BAA0B,EAAE,GAAG,cAAc,EAAE,GAC1F,CAAC,kBAAkB,IAAI,EAAE,CAA4B,CAAC;IAE1D,OAAO,CACL,cAAK,SAAS,EAAC,2BAA2B,YACxC,KAAC,aAAa,IACZ,OAAO,EAAE,KAAK,gBACF,UAAU,IAAI,aAAa,UAAU,EAAE,EACnD,QAAQ,EAAE,GAAG,EAAE;gBACb,IAAI,MAAM,EAAE,CAAC;oBACX,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,CAAC,KAAK,CAAC,CAAC;gBACpC,CAAC;YACH,CAAC,KACG,cAAc,GAClB,GACE,CACP,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import type { StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import type { CustomCellRendererProps } from 'ag-grid-react';
|
|
3
|
+
import { CheckboxCellRenderer } from './CheckboxCellRenderer';
|
|
4
|
+
declare function CheckboxCellRendererDocsPage(): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare const meta: {
|
|
6
|
+
title: string;
|
|
7
|
+
component: (props: CustomCellRendererProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
tags: string[];
|
|
9
|
+
parameters: {
|
|
10
|
+
layout: string;
|
|
11
|
+
docs: {
|
|
12
|
+
page: typeof CheckboxCellRendererDocsPage;
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
argTypes: {
|
|
16
|
+
value: {
|
|
17
|
+
control: false;
|
|
18
|
+
description: string;
|
|
19
|
+
table: {
|
|
20
|
+
type: {
|
|
21
|
+
summary: string;
|
|
22
|
+
};
|
|
23
|
+
defaultValue: {
|
|
24
|
+
summary: string;
|
|
25
|
+
};
|
|
26
|
+
};
|
|
27
|
+
};
|
|
28
|
+
node: {
|
|
29
|
+
control: false;
|
|
30
|
+
description: string;
|
|
31
|
+
table: {
|
|
32
|
+
type: {
|
|
33
|
+
summary: string;
|
|
34
|
+
};
|
|
35
|
+
};
|
|
36
|
+
};
|
|
37
|
+
column: {
|
|
38
|
+
control: false;
|
|
39
|
+
description: string;
|
|
40
|
+
table: {
|
|
41
|
+
type: {
|
|
42
|
+
summary: string;
|
|
43
|
+
};
|
|
44
|
+
};
|
|
45
|
+
};
|
|
46
|
+
colDef: {
|
|
47
|
+
control: false;
|
|
48
|
+
description: string;
|
|
49
|
+
table: {
|
|
50
|
+
type: {
|
|
51
|
+
summary: string;
|
|
52
|
+
};
|
|
53
|
+
};
|
|
54
|
+
};
|
|
55
|
+
};
|
|
56
|
+
};
|
|
57
|
+
export default meta;
|
|
58
|
+
type Story = StoryObj<typeof CheckboxCellRenderer>;
|
|
59
|
+
export declare const Default: Story;
|
|
60
|
+
export declare const Checked: Story;
|
|
61
|
+
export declare const Unchecked: Story;
|
|
62
|
+
export declare const DisabledChecked: Story;
|
|
63
|
+
export declare const InATable: Story;
|
|
64
|
+
//# sourceMappingURL=CheckboxCellRenderer.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CheckboxCellRenderer.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/table/cellRenderers/CheckboxCellRenderer.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAU5D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAyF9D,iBAAS,4BAA4B,4CAmBpC;AAMD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCmC,CAAC;AAE9C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAgDnD,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAwBrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAc7B,CAAC;AASF,eAAO,MAAM,QAAQ,EAAE,KA6DtB,CAAC"}
|
|
@@ -0,0 +1,241 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from 'react';
|
|
3
|
+
import { Controls, Heading as DocHeading, Markdown, Primary as DocPrimary, Stories, Subtitle, Title, } from '@storybook/addon-docs/blocks';
|
|
4
|
+
import { CheckboxCellRenderer } from './CheckboxCellRenderer';
|
|
5
|
+
import { Table } from '../../table/Table';
|
|
6
|
+
// ---------------------------------------------------------------------------
|
|
7
|
+
// Docs page content
|
|
8
|
+
// ---------------------------------------------------------------------------
|
|
9
|
+
const DESCRIPTION_INTRO = [
|
|
10
|
+
'`CheckboxCellRenderer` is an AG Grid cell renderer that renders an editable Arbor `CheckboxInput`',
|
|
11
|
+
'inside a table cell. On toggle, it calls `node.setDataValue` to update the row data in-place.',
|
|
12
|
+
'',
|
|
13
|
+
'Register it via the string key `dsCheckboxCellRenderer` (pre-registered by Arbor\'s `Table`) or by importing the component directly.',
|
|
14
|
+
].join('\n');
|
|
15
|
+
const USAGE_GUIDANCE = [
|
|
16
|
+
'### When to use',
|
|
17
|
+
'',
|
|
18
|
+
'- On boolean columns that the user needs to toggle directly in the table without opening a form',
|
|
19
|
+
'- "Active", "Enrolled", "Consent given" columns where inline editing is expected',
|
|
20
|
+
'',
|
|
21
|
+
'---',
|
|
22
|
+
'',
|
|
23
|
+
'### When NOT to use',
|
|
24
|
+
'',
|
|
25
|
+
'| Situation | Use instead |',
|
|
26
|
+
'|---|---|',
|
|
27
|
+
'| Display-only boolean (no editing) | `BooleanCellRenderer` (`dsBooleanCellRenderer`) |',
|
|
28
|
+
'| Toggling the value requires confirmation or a side effect | Handle in a modal; do not edit inline |',
|
|
29
|
+
].join('\n');
|
|
30
|
+
const DEVELOPER_NOTES = [
|
|
31
|
+
'### Critical usage patterns',
|
|
32
|
+
'',
|
|
33
|
+
'**`column` must be provided for changes to persist.**',
|
|
34
|
+
'On toggle, the renderer calls `node.setDataValue(column, !value)`. If `column` is not available in',
|
|
35
|
+
'props (which should not happen inside a real AG Grid), the change is silently ignored.',
|
|
36
|
+
'',
|
|
37
|
+
'**`aria-label` is derived from `colDef.headerName`.**',
|
|
38
|
+
'Always set `headerName` on the column definition — without it, the checkbox has no accessible label.',
|
|
39
|
+
'Override with `cellRendererParams: { "aria-label": "..." }` if needed.',
|
|
40
|
+
'',
|
|
41
|
+
'**Pass extra `CheckboxInput` props via `cellRendererParams`.**',
|
|
42
|
+
'The renderer spreads `cellRendererParams` onto `CheckboxInput`, so you can pass `disabled`, `className`, etc.',
|
|
43
|
+
'',
|
|
44
|
+
'```tsx',
|
|
45
|
+
"import { Table } from '@arbor-education/design-system.components';",
|
|
46
|
+
'',
|
|
47
|
+
'const colDefs = [',
|
|
48
|
+
' {',
|
|
49
|
+
" field: 'isEnrolled',",
|
|
50
|
+
" headerName: 'Enrolled',",
|
|
51
|
+
" cellRenderer: 'dsCheckboxCellRenderer',",
|
|
52
|
+
' // optional extra CheckboxInput props:',
|
|
53
|
+
' cellRendererParams: { disabled: isReadOnly },',
|
|
54
|
+
' },',
|
|
55
|
+
'];',
|
|
56
|
+
'```',
|
|
57
|
+
'',
|
|
58
|
+
'---',
|
|
59
|
+
'',
|
|
60
|
+
'### Accessibility',
|
|
61
|
+
'',
|
|
62
|
+
'The `aria-label` is set to `"Checkbox: {headerName}"` when `headerName` is defined. Without it,',
|
|
63
|
+
'the checkbox has no accessible label — WCAG 2.1 failure (1.3.1 Info and Relationships).',
|
|
64
|
+
'',
|
|
65
|
+
'---',
|
|
66
|
+
'',
|
|
67
|
+
'### TypeScript types',
|
|
68
|
+
'',
|
|
69
|
+
'```ts',
|
|
70
|
+
"import { CheckboxCellRenderer } from '@arbor-education/design-system.components';",
|
|
71
|
+
'```',
|
|
72
|
+
'',
|
|
73
|
+
'`CheckboxCellRenderer` accepts `CustomCellRendererProps` from AG Grid.',
|
|
74
|
+
'`value` should be a `boolean`. Additional `CheckboxInput` props can be passed via `colDef.cellRendererParams`.',
|
|
75
|
+
].join('\n');
|
|
76
|
+
const RELATED_COMPONENTS = [
|
|
77
|
+
'## Related components',
|
|
78
|
+
'',
|
|
79
|
+
'[Table](?path=/docs/components-table--docs) · [BooleanCellRenderer](?path=/docs/components-table-cellrenderers-booleancellrenderer--docs) · [CheckboxInput](?path=/docs/components-checkboxinput--docs)',
|
|
80
|
+
].join('\n');
|
|
81
|
+
const PROPS_INTRO = 'The preview below uses a mock AG Grid row node — click the checkbox to see it toggle. `node.setDataValue` is wired to local state in this preview; in a real table it updates the row data directly.';
|
|
82
|
+
// ---------------------------------------------------------------------------
|
|
83
|
+
// Custom DocsPage
|
|
84
|
+
// ---------------------------------------------------------------------------
|
|
85
|
+
function CheckboxCellRendererDocsPage() {
|
|
86
|
+
return (_jsxs(_Fragment, { children: [_jsx(Title, {}), _jsx(Subtitle, {}), _jsx(Markdown, { children: DESCRIPTION_INTRO }), _jsx(DocHeading, { children: "Interactive example" }), _jsx(Markdown, { children: PROPS_INTRO }), _jsx(DocPrimary, {}), _jsx(Controls, {}), _jsx(DocHeading, { children: "Usage guidance" }), _jsx(Markdown, { children: USAGE_GUIDANCE }), _jsx(DocHeading, { children: "Developer notes" }), _jsx(Markdown, { children: DEVELOPER_NOTES }), _jsx(DocHeading, { children: "Examples" }), _jsx(Stories, { title: "" }), _jsx(Markdown, { children: RELATED_COMPONENTS })] }));
|
|
87
|
+
}
|
|
88
|
+
// ---------------------------------------------------------------------------
|
|
89
|
+
// Meta
|
|
90
|
+
// ---------------------------------------------------------------------------
|
|
91
|
+
const meta = {
|
|
92
|
+
title: 'Components/Table/CellRenderers/CheckboxCellRenderer',
|
|
93
|
+
component: CheckboxCellRenderer,
|
|
94
|
+
tags: ['autodocs'],
|
|
95
|
+
parameters: {
|
|
96
|
+
layout: 'padded',
|
|
97
|
+
docs: { page: CheckboxCellRendererDocsPage },
|
|
98
|
+
},
|
|
99
|
+
argTypes: {
|
|
100
|
+
value: {
|
|
101
|
+
control: false,
|
|
102
|
+
description: 'The current boolean state of the checkbox. On toggle, the renderer calls `node.setDataValue(column, !value)`.',
|
|
103
|
+
table: {
|
|
104
|
+
type: { summary: 'boolean' },
|
|
105
|
+
defaultValue: { summary: 'false' },
|
|
106
|
+
},
|
|
107
|
+
},
|
|
108
|
+
node: {
|
|
109
|
+
control: false,
|
|
110
|
+
description: 'AG Grid row node. The renderer calls `node.setDataValue` on toggle.',
|
|
111
|
+
table: { type: { summary: 'IRowNode' } },
|
|
112
|
+
},
|
|
113
|
+
column: {
|
|
114
|
+
control: false,
|
|
115
|
+
description: 'AG Grid column instance. Passed as the first argument to `node.setDataValue`.',
|
|
116
|
+
table: { type: { summary: 'Column | null' } },
|
|
117
|
+
},
|
|
118
|
+
colDef: {
|
|
119
|
+
control: false,
|
|
120
|
+
description: '`headerName` is used as the basis of the checkbox `aria-label`. Extra `CheckboxInput` props can be passed via `cellRendererParams`.',
|
|
121
|
+
table: { type: { summary: 'ColDef' } },
|
|
122
|
+
},
|
|
123
|
+
},
|
|
124
|
+
};
|
|
125
|
+
export default meta;
|
|
126
|
+
// ---------------------------------------------------------------------------
|
|
127
|
+
// Helper: attach a per-story description to docs
|
|
128
|
+
// ---------------------------------------------------------------------------
|
|
129
|
+
const withDescription = (story, description) => ({
|
|
130
|
+
...story,
|
|
131
|
+
parameters: {
|
|
132
|
+
...story.parameters,
|
|
133
|
+
docs: { ...story.parameters?.docs, description: { story: description } },
|
|
134
|
+
},
|
|
135
|
+
});
|
|
136
|
+
// ---------------------------------------------------------------------------
|
|
137
|
+
// Template components
|
|
138
|
+
// ---------------------------------------------------------------------------
|
|
139
|
+
const InteractiveTemplate = () => {
|
|
140
|
+
const [checked, setChecked] = useState(false);
|
|
141
|
+
const mockNode = { setDataValue: (_, val) => setChecked(val) };
|
|
142
|
+
const mockColumn = {};
|
|
143
|
+
return (_jsx(CheckboxCellRenderer, { ...{}, value: checked, node: mockNode, column: mockColumn, colDef: { headerName: 'Enrolled' } }));
|
|
144
|
+
};
|
|
145
|
+
const DisabledTemplate = ({ checked }) => (_jsx(CheckboxCellRenderer, { ...{}, value: checked, node: { setDataValue: () => { } }, column: {}, colDef: { headerName: 'Enrolled', cellRendererParams: { disabled: true } } }));
|
|
146
|
+
// ---------------------------------------------------------------------------
|
|
147
|
+
// Stories
|
|
148
|
+
// ---------------------------------------------------------------------------
|
|
149
|
+
export const Default = withDescription({
|
|
150
|
+
parameters: { controls: { disable: true } },
|
|
151
|
+
render: InteractiveTemplate,
|
|
152
|
+
}, 'An interactive `CheckboxInput` backed by a mock row node. Click to toggle — `node.setDataValue` updates local state in this preview; in a real table it updates the AG Grid row data in-place.');
|
|
153
|
+
export const Checked = withDescription({
|
|
154
|
+
parameters: {
|
|
155
|
+
controls: { disable: true },
|
|
156
|
+
docs: {
|
|
157
|
+
source: {
|
|
158
|
+
language: 'tsx',
|
|
159
|
+
code: `
|
|
160
|
+
import { Table } from '@arbor-education/design-system.components';
|
|
161
|
+
|
|
162
|
+
const colDefs = [
|
|
163
|
+
{
|
|
164
|
+
field: 'isEnrolled',
|
|
165
|
+
headerName: 'Enrolled',
|
|
166
|
+
cellRenderer: 'dsCheckboxCellRenderer',
|
|
167
|
+
},
|
|
168
|
+
];
|
|
169
|
+
`.trim(),
|
|
170
|
+
},
|
|
171
|
+
},
|
|
172
|
+
},
|
|
173
|
+
render: () => _jsx(DisabledTemplate, { checked: true }),
|
|
174
|
+
}, 'Checked state — `value={true}`. The `aria-label` is derived from `colDef.headerName` ("Checkbox: Enrolled").');
|
|
175
|
+
export const Unchecked = withDescription({
|
|
176
|
+
parameters: { controls: { disable: true } },
|
|
177
|
+
render: () => _jsx(DisabledTemplate, { checked: false }),
|
|
178
|
+
}, 'Unchecked state — `value={false}`.');
|
|
179
|
+
export const DisabledChecked = withDescription({
|
|
180
|
+
parameters: { controls: { disable: true } },
|
|
181
|
+
render: () => (_jsx(CheckboxCellRenderer, { ...{}, value: true, node: { setDataValue: () => { } }, column: {}, colDef: { headerName: 'Enrolled', cellRendererParams: { disabled: true } } })),
|
|
182
|
+
}, 'Disabled state — pass `disabled: true` via `cellRendererParams` to prevent the user from toggling the value. Useful for read-only rows or conditional editing logic.');
|
|
183
|
+
const CHECKBOX_IN_TABLE_DATA = [
|
|
184
|
+
{ name: 'Alice Johnson', enrolled: true },
|
|
185
|
+
{ name: 'Bob Smith', enrolled: false },
|
|
186
|
+
{ name: 'Charlie Brown', enrolled: true },
|
|
187
|
+
{ name: 'Diana Prince', enrolled: false },
|
|
188
|
+
];
|
|
189
|
+
export const InATable = withDescription({
|
|
190
|
+
parameters: {
|
|
191
|
+
controls: { disable: true },
|
|
192
|
+
docs: {
|
|
193
|
+
source: {
|
|
194
|
+
language: 'tsx',
|
|
195
|
+
code: `
|
|
196
|
+
import { Table } from '@arbor-education/design-system.components';
|
|
197
|
+
|
|
198
|
+
const rowData = [
|
|
199
|
+
{ name: 'Alice Johnson', enrolled: true },
|
|
200
|
+
{ name: 'Bob Smith', enrolled: false },
|
|
201
|
+
{ name: 'Charlie Brown', enrolled: true },
|
|
202
|
+
{ name: 'Diana Prince', enrolled: false },
|
|
203
|
+
];
|
|
204
|
+
|
|
205
|
+
function CheckboxCellRendererExample() {
|
|
206
|
+
return (
|
|
207
|
+
<Table
|
|
208
|
+
rowData={rowData}
|
|
209
|
+
columnDefs={[
|
|
210
|
+
{ field: 'name', headerName: 'Name', flex: 2 },
|
|
211
|
+
{
|
|
212
|
+
field: 'enrolled',
|
|
213
|
+
headerName: 'Enrolled',
|
|
214
|
+
flex: 1,
|
|
215
|
+
editable: false,
|
|
216
|
+
cellRenderer: 'dsCheckboxCellRenderer',
|
|
217
|
+
},
|
|
218
|
+
]}
|
|
219
|
+
defaultColDef={{ flex: 1, minWidth: 120 }}
|
|
220
|
+
domLayout="autoHeight"
|
|
221
|
+
/>
|
|
222
|
+
);
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
export default CheckboxCellRendererExample;
|
|
226
|
+
`.trim(),
|
|
227
|
+
},
|
|
228
|
+
},
|
|
229
|
+
},
|
|
230
|
+
render: () => (_jsx(Table, { rowData: CHECKBOX_IN_TABLE_DATA, columnDefs: [
|
|
231
|
+
{ field: 'name', headerName: 'Name', flex: 2 },
|
|
232
|
+
{
|
|
233
|
+
field: 'enrolled',
|
|
234
|
+
headerName: 'Enrolled',
|
|
235
|
+
flex: 1,
|
|
236
|
+
editable: false,
|
|
237
|
+
cellRenderer: 'dsCheckboxCellRenderer',
|
|
238
|
+
},
|
|
239
|
+
], defaultColDef: { flex: 1, minWidth: 120 }, domLayout: "autoHeight" })),
|
|
240
|
+
}, '`dsCheckboxCellRenderer` wired up inside a full `Table`. Click a checkbox to toggle the value — AG Grid calls `node.setDataValue` which updates the row data in-place. The `headerName` ("Enrolled") becomes the checkbox `aria-label`.');
|
|
241
|
+
//# sourceMappingURL=CheckboxCellRenderer.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CheckboxCellRenderer.stories.js","sourceRoot":"","sources":["../../../../src/components/table/cellRenderers/CheckboxCellRenderer.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import type { StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import type { CustomCellRendererProps } from 'ag-grid-react';
|
|
3
|
+
import { DefaultCellRenderer } from './DefaultCellRenderer';
|
|
4
|
+
declare function DefaultCellRendererDocsPage(): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare const meta: {
|
|
6
|
+
title: string;
|
|
7
|
+
component: (props: CustomCellRendererProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
tags: string[];
|
|
9
|
+
parameters: {
|
|
10
|
+
layout: string;
|
|
11
|
+
docs: {
|
|
12
|
+
page: typeof DefaultCellRendererDocsPage;
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
argTypes: {
|
|
16
|
+
valueFormatted: {
|
|
17
|
+
control: false;
|
|
18
|
+
description: string;
|
|
19
|
+
table: {
|
|
20
|
+
type: {
|
|
21
|
+
summary: string;
|
|
22
|
+
};
|
|
23
|
+
defaultValue: {
|
|
24
|
+
summary: string;
|
|
25
|
+
};
|
|
26
|
+
};
|
|
27
|
+
};
|
|
28
|
+
value: {
|
|
29
|
+
control: false;
|
|
30
|
+
description: string;
|
|
31
|
+
table: {
|
|
32
|
+
type: {
|
|
33
|
+
summary: string;
|
|
34
|
+
};
|
|
35
|
+
};
|
|
36
|
+
};
|
|
37
|
+
colDef: {
|
|
38
|
+
control: false;
|
|
39
|
+
description: string;
|
|
40
|
+
table: {
|
|
41
|
+
type: {
|
|
42
|
+
summary: string;
|
|
43
|
+
};
|
|
44
|
+
};
|
|
45
|
+
};
|
|
46
|
+
};
|
|
47
|
+
};
|
|
48
|
+
export default meta;
|
|
49
|
+
type Story = StoryObj<typeof DefaultCellRenderer>;
|
|
50
|
+
export declare const Default: Story;
|
|
51
|
+
export declare const RawValueFallback: Story;
|
|
52
|
+
export declare const Empty: Story;
|
|
53
|
+
export declare const WithDataTestId: Story;
|
|
54
|
+
export declare const InATable: Story;
|
|
55
|
+
//# sourceMappingURL=DefaultCellRenderer.stories.d.ts.map
|