@arbor-education/design-system.components 0.15.0 → 0.16.1
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 +23 -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 +3 -0
- package/dist/components/table/Table.stories.d.ts.map +1 -1
- package/dist/components/table/Table.stories.js +384 -5
- package/dist/components/table/Table.stories.js.map +1 -1
- package/dist/components/table/Table.test.js +30 -0
- package/dist/components/table/Table.test.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/HideColumnsDropdown.d.ts.map +1 -1
- package/dist/components/table/tableControls/HideColumnsDropdown.js +9 -3
- package/dist/components/table/tableControls/HideColumnsDropdown.js.map +1 -1
- 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 +460 -5
- package/src/components/table/Table.test.tsx +53 -0
- 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/HideColumnsDropdown.tsx +11 -2
- 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,57 @@
|
|
|
1
|
+
import type { StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { BooleanFilter } from './BooleanFilter/BooleanFilter';
|
|
3
|
+
declare function BooleanFilterDocsPage(): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare const meta: {
|
|
5
|
+
title: string;
|
|
6
|
+
component: (props: {
|
|
7
|
+
model: {
|
|
8
|
+
allowTrue: boolean;
|
|
9
|
+
allowFalse: boolean;
|
|
10
|
+
} | null;
|
|
11
|
+
onModelChange: (model: {
|
|
12
|
+
allowTrue: boolean;
|
|
13
|
+
allowFalse: boolean;
|
|
14
|
+
}) => void;
|
|
15
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
tags: string[];
|
|
17
|
+
parameters: {
|
|
18
|
+
layout: string;
|
|
19
|
+
docs: {
|
|
20
|
+
page: typeof BooleanFilterDocsPage;
|
|
21
|
+
};
|
|
22
|
+
};
|
|
23
|
+
argTypes: {
|
|
24
|
+
model: {
|
|
25
|
+
description: string;
|
|
26
|
+
control: false;
|
|
27
|
+
table: {
|
|
28
|
+
type: {
|
|
29
|
+
summary: string;
|
|
30
|
+
};
|
|
31
|
+
defaultValue: {
|
|
32
|
+
summary: string;
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
};
|
|
36
|
+
onModelChange: {
|
|
37
|
+
description: string;
|
|
38
|
+
control: false;
|
|
39
|
+
table: {
|
|
40
|
+
type: {
|
|
41
|
+
summary: string;
|
|
42
|
+
};
|
|
43
|
+
};
|
|
44
|
+
};
|
|
45
|
+
};
|
|
46
|
+
args: {
|
|
47
|
+
onModelChange: import("@vitest/spy").Mock<(...args: any[]) => any>;
|
|
48
|
+
};
|
|
49
|
+
};
|
|
50
|
+
export default meta;
|
|
51
|
+
type Story = StoryObj<typeof BooleanFilter>;
|
|
52
|
+
export declare const Default: Story;
|
|
53
|
+
export declare const YesSelected: Story;
|
|
54
|
+
export declare const NoSelected: Story;
|
|
55
|
+
export declare const Controlled: Story;
|
|
56
|
+
export declare const InATable: Story;
|
|
57
|
+
//# sourceMappingURL=BooleanFilter.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BooleanFilter.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/table/columnFilters/BooleanFilter.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAW5D,OAAO,EAAE,aAAa,EAAyB,MAAM,+BAA+B,CAAC;AAgErF,iBAAS,qBAAqB,4CAiB7B;AAMD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuB4B,CAAC;AAEvC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,CAAC;AAc5C,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KASzB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KASxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAgBxB,CAAC;AAUF,eAAO,MAAM,QAAQ,EAAE,KAsEtB,CAAC"}
|
|
@@ -0,0 +1,198 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { Controls, Heading as DocHeading, Markdown, Primary as DocPrimary, Stories, Subtitle, Title, } from '@storybook/addon-docs/blocks';
|
|
4
|
+
import { fn } from 'storybook/test';
|
|
5
|
+
import { BooleanFilter, doesBooleanFilterPass } from './BooleanFilter/BooleanFilter';
|
|
6
|
+
import { Table } from '../../table/Table';
|
|
7
|
+
// ---------------------------------------------------------------------------
|
|
8
|
+
// Docs page content
|
|
9
|
+
// ---------------------------------------------------------------------------
|
|
10
|
+
const DESCRIPTION_INTRO = [
|
|
11
|
+
'`BooleanFilter` is an AG Grid column filter component for boolean columns.',
|
|
12
|
+
'It renders a radio group with three options — **Yes**, **No**, and **Not set** —',
|
|
13
|
+
'and calls `onModelChange` with a `{ allowTrue, allowFalse }` model whenever the selection changes.',
|
|
14
|
+
'',
|
|
15
|
+
'Register it via the AG Grid `filter` column definition property alongside `doesBooleanFilterPass`.',
|
|
16
|
+
].join('\n');
|
|
17
|
+
const USAGE_GUIDANCE = [
|
|
18
|
+
'### When to use',
|
|
19
|
+
'',
|
|
20
|
+
'- On boolean columns (active/inactive, yes/no flags) that need a user-friendly filter UI',
|
|
21
|
+
'- When you want a three-state filter: show all `true`, show all `false`, or show everything',
|
|
22
|
+
'',
|
|
23
|
+
'---',
|
|
24
|
+
'',
|
|
25
|
+
'### Registration',
|
|
26
|
+
'',
|
|
27
|
+
'```tsx',
|
|
28
|
+
"import { BooleanFilter, doesBooleanFilterPass } from '@arbor-education/design-system.components';",
|
|
29
|
+
'',
|
|
30
|
+
'const colDefs = [',
|
|
31
|
+
' {',
|
|
32
|
+
" field: 'isActive',",
|
|
33
|
+
' filter: { component: BooleanFilter, doesFilterPass: doesBooleanFilterPass },',
|
|
34
|
+
' },',
|
|
35
|
+
'];',
|
|
36
|
+
'```',
|
|
37
|
+
'',
|
|
38
|
+
'---',
|
|
39
|
+
'',
|
|
40
|
+
'### Filter model',
|
|
41
|
+
'',
|
|
42
|
+
'```ts',
|
|
43
|
+
'type BooleanFilterModel = {',
|
|
44
|
+
' allowTrue: boolean;',
|
|
45
|
+
' allowFalse: boolean;',
|
|
46
|
+
'};',
|
|
47
|
+
'',
|
|
48
|
+
'// Yes selected: { allowTrue: true, allowFalse: false }',
|
|
49
|
+
'// No selected: { allowTrue: false, allowFalse: true }',
|
|
50
|
+
'// Not set / All: { allowTrue: true, allowFalse: true }',
|
|
51
|
+
'```',
|
|
52
|
+
].join('\n');
|
|
53
|
+
const RELATED_COMPONENTS = [
|
|
54
|
+
'## Related components',
|
|
55
|
+
'',
|
|
56
|
+
'[Table](?path=/docs/components-table--docs) · [TimeFilter](?path=/docs/components-table-columnfilters-timefilter--docs)',
|
|
57
|
+
].join('\n');
|
|
58
|
+
const PROPS_INTRO = 'The preview below is interactive — click the radio buttons to see the filter model update in the **Actions** panel.';
|
|
59
|
+
// ---------------------------------------------------------------------------
|
|
60
|
+
// Custom DocsPage
|
|
61
|
+
// ---------------------------------------------------------------------------
|
|
62
|
+
function BooleanFilterDocsPage() {
|
|
63
|
+
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: "Examples" }), _jsx(Stories, { title: "" }), _jsx(Markdown, { children: RELATED_COMPONENTS })] }));
|
|
64
|
+
}
|
|
65
|
+
// ---------------------------------------------------------------------------
|
|
66
|
+
// Meta
|
|
67
|
+
// ---------------------------------------------------------------------------
|
|
68
|
+
const meta = {
|
|
69
|
+
title: 'Components/Table/ColumnFilters/BooleanFilter',
|
|
70
|
+
component: BooleanFilter,
|
|
71
|
+
tags: ['autodocs'],
|
|
72
|
+
parameters: {
|
|
73
|
+
layout: 'padded',
|
|
74
|
+
docs: { page: BooleanFilterDocsPage },
|
|
75
|
+
},
|
|
76
|
+
argTypes: {
|
|
77
|
+
model: {
|
|
78
|
+
description: 'The current filter model. `null` means no filter is active (same as Not set). Pass `{ allowTrue, allowFalse }` to set a specific state.',
|
|
79
|
+
control: false,
|
|
80
|
+
table: { type: { summary: '{ allowTrue: boolean; allowFalse: boolean } | null' }, defaultValue: { summary: 'null' } },
|
|
81
|
+
},
|
|
82
|
+
onModelChange: {
|
|
83
|
+
description: 'Called whenever the user changes the filter selection. Receives the new `{ allowTrue, allowFalse }` model.',
|
|
84
|
+
control: false,
|
|
85
|
+
table: { type: { summary: '(model: BooleanFilterModel) => void' } },
|
|
86
|
+
},
|
|
87
|
+
},
|
|
88
|
+
args: {
|
|
89
|
+
onModelChange: fn(),
|
|
90
|
+
},
|
|
91
|
+
};
|
|
92
|
+
export default meta;
|
|
93
|
+
const withDescription = (story, description) => ({
|
|
94
|
+
...story,
|
|
95
|
+
parameters: {
|
|
96
|
+
...story.parameters,
|
|
97
|
+
docs: { ...story.parameters?.docs, description: { story: description } },
|
|
98
|
+
},
|
|
99
|
+
});
|
|
100
|
+
// ---------------------------------------------------------------------------
|
|
101
|
+
// Stories
|
|
102
|
+
// ---------------------------------------------------------------------------
|
|
103
|
+
export const Default = withDescription({
|
|
104
|
+
args: {
|
|
105
|
+
model: null,
|
|
106
|
+
onModelChange: fn(),
|
|
107
|
+
},
|
|
108
|
+
}, 'No active filter (`model: null`) — all three options visible, **Not set** selected by default.');
|
|
109
|
+
export const YesSelected = withDescription({
|
|
110
|
+
parameters: { controls: { disable: true } },
|
|
111
|
+
args: {
|
|
112
|
+
model: { allowTrue: true, allowFalse: false },
|
|
113
|
+
onModelChange: fn(),
|
|
114
|
+
},
|
|
115
|
+
}, '**Yes** selected — filter model is `{ allowTrue: true, allowFalse: false }`. Only rows with `true` in this column pass the filter.');
|
|
116
|
+
export const NoSelected = withDescription({
|
|
117
|
+
parameters: { controls: { disable: true } },
|
|
118
|
+
args: {
|
|
119
|
+
model: { allowTrue: false, allowFalse: true },
|
|
120
|
+
onModelChange: fn(),
|
|
121
|
+
},
|
|
122
|
+
}, '**No** selected — filter model is `{ allowTrue: false, allowFalse: true }`. Only rows with `false` in this column pass the filter.');
|
|
123
|
+
export const Controlled = withDescription({
|
|
124
|
+
parameters: { controls: { disable: true } },
|
|
125
|
+
render: () => {
|
|
126
|
+
const [model, setModel] = React.useState(null);
|
|
127
|
+
return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '12px' }, children: [_jsx(BooleanFilter, { model: model, onModelChange: setModel }), _jsx("pre", { style: { fontSize: '12px', background: 'var(--color-neutral-50)', padding: '8px', borderRadius: '4px' }, children: JSON.stringify(model, null, 2) ?? 'null' })] }));
|
|
128
|
+
},
|
|
129
|
+
}, 'Fully controlled — the current model is rendered below the filter as JSON. Click the radio buttons to see the model update.');
|
|
130
|
+
const BOOLEAN_FILTER_IN_TABLE_DATA = [
|
|
131
|
+
{ name: 'Alice Johnson', active: true },
|
|
132
|
+
{ name: 'Bob Smith', active: false },
|
|
133
|
+
{ name: 'Charlie Brown', active: true },
|
|
134
|
+
{ name: 'Diana Prince', active: false },
|
|
135
|
+
{ name: 'Ethan Hunt', active: true },
|
|
136
|
+
];
|
|
137
|
+
export const InATable = withDescription({
|
|
138
|
+
parameters: {
|
|
139
|
+
controls: { disable: true },
|
|
140
|
+
docs: {
|
|
141
|
+
source: {
|
|
142
|
+
language: 'tsx',
|
|
143
|
+
code: `
|
|
144
|
+
import {
|
|
145
|
+
Table,
|
|
146
|
+
BooleanFilter,
|
|
147
|
+
doesBooleanFilterPass,
|
|
148
|
+
} from '@arbor-education/design-system.components';
|
|
149
|
+
|
|
150
|
+
const rowData = [
|
|
151
|
+
{ name: 'Alice Johnson', active: true },
|
|
152
|
+
{ name: 'Bob Smith', active: false },
|
|
153
|
+
{ name: 'Charlie Brown', active: true },
|
|
154
|
+
{ name: 'Diana Prince', active: false },
|
|
155
|
+
{ name: 'Ethan Hunt', active: true },
|
|
156
|
+
];
|
|
157
|
+
|
|
158
|
+
function BooleanFilterExample() {
|
|
159
|
+
return (
|
|
160
|
+
<Table
|
|
161
|
+
rowData={rowData}
|
|
162
|
+
columnDefs={[
|
|
163
|
+
{ field: 'name', headerName: 'Name', flex: 2 },
|
|
164
|
+
{
|
|
165
|
+
field: 'active',
|
|
166
|
+
headerName: 'Active',
|
|
167
|
+
flex: 1,
|
|
168
|
+
editable: false,
|
|
169
|
+
cellRenderer: 'dsBooleanCellRenderer',
|
|
170
|
+
filter: { component: BooleanFilter, doesFilterPass: doesBooleanFilterPass },
|
|
171
|
+
suppressHeaderFilterButton: false,
|
|
172
|
+
},
|
|
173
|
+
]}
|
|
174
|
+
defaultColDef={{ flex: 1, minWidth: 120, suppressHeaderFilterButton: true }}
|
|
175
|
+
domLayout="autoHeight"
|
|
176
|
+
/>
|
|
177
|
+
);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
export default BooleanFilterExample;
|
|
181
|
+
`.trim(),
|
|
182
|
+
},
|
|
183
|
+
},
|
|
184
|
+
},
|
|
185
|
+
render: () => (_jsx(Table, { rowData: BOOLEAN_FILTER_IN_TABLE_DATA, columnDefs: [
|
|
186
|
+
{ field: 'name', headerName: 'Name', flex: 2 },
|
|
187
|
+
{
|
|
188
|
+
field: 'active',
|
|
189
|
+
headerName: 'Active',
|
|
190
|
+
flex: 1,
|
|
191
|
+
editable: false,
|
|
192
|
+
cellRenderer: 'dsBooleanCellRenderer',
|
|
193
|
+
filter: { component: BooleanFilter, doesFilterPass: doesBooleanFilterPass },
|
|
194
|
+
suppressHeaderFilterButton: false,
|
|
195
|
+
},
|
|
196
|
+
], defaultColDef: { flex: 1, minWidth: 120, suppressHeaderFilterButton: true }, domLayout: "autoHeight" })),
|
|
197
|
+
}, '`BooleanFilter` wired up inside a full `Table`. Click the funnel icon in the **Active** column header to open the filter panel — select **Yes**, **No**, or **Not set** to filter the rows. The Active column also uses `dsBooleanCellRenderer` to show check/✕ icons.');
|
|
198
|
+
//# sourceMappingURL=BooleanFilter.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BooleanFilter.stories.js","sourceRoot":"","sources":["../../../../src/components/table/columnFilters/BooleanFilter.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import type { StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { TimeFilter } from './TimeFilter/TimeFilter';
|
|
3
|
+
declare function TimeFilterDocsPage(): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare const meta: {
|
|
5
|
+
title: string;
|
|
6
|
+
component: (props: {
|
|
7
|
+
model: {
|
|
8
|
+
filterType: import("./TimeFilter/utils/compareTimeByFilterType").FilterType;
|
|
9
|
+
pivot: string;
|
|
10
|
+
} | null;
|
|
11
|
+
onModelChange: (model: {
|
|
12
|
+
filterType: import("./TimeFilter/utils/compareTimeByFilterType").FilterType;
|
|
13
|
+
pivot: string;
|
|
14
|
+
}) => void;
|
|
15
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
tags: string[];
|
|
17
|
+
parameters: {
|
|
18
|
+
layout: string;
|
|
19
|
+
docs: {
|
|
20
|
+
page: typeof TimeFilterDocsPage;
|
|
21
|
+
};
|
|
22
|
+
};
|
|
23
|
+
argTypes: {
|
|
24
|
+
model: {
|
|
25
|
+
description: string;
|
|
26
|
+
control: false;
|
|
27
|
+
table: {
|
|
28
|
+
type: {
|
|
29
|
+
summary: string;
|
|
30
|
+
};
|
|
31
|
+
defaultValue: {
|
|
32
|
+
summary: string;
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
};
|
|
36
|
+
onModelChange: {
|
|
37
|
+
description: string;
|
|
38
|
+
control: false;
|
|
39
|
+
table: {
|
|
40
|
+
type: {
|
|
41
|
+
summary: string;
|
|
42
|
+
};
|
|
43
|
+
};
|
|
44
|
+
};
|
|
45
|
+
};
|
|
46
|
+
args: {
|
|
47
|
+
onModelChange: import("@vitest/spy").Mock<(...args: any[]) => any>;
|
|
48
|
+
};
|
|
49
|
+
};
|
|
50
|
+
export default meta;
|
|
51
|
+
type Story = StoryObj<typeof TimeFilter>;
|
|
52
|
+
export declare const Default: Story;
|
|
53
|
+
export declare const BeforeNoon: Story;
|
|
54
|
+
export declare const AfterNine: Story;
|
|
55
|
+
export declare const ExactTime: Story;
|
|
56
|
+
export declare const Controlled: Story;
|
|
57
|
+
export declare const InATable: Story;
|
|
58
|
+
//# sourceMappingURL=TimeFilter.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TimeFilter.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/table/columnFilters/TimeFilter.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAW5D,OAAO,EAAE,UAAU,EAAsB,MAAM,yBAAyB,CAAC;AAoEzE,iBAAS,kBAAkB,4CAiB1B;AAMD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuByB,CAAC;AAEpC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAczC,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KASxB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KASvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KASvB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAgBxB,CAAC;AAUF,eAAO,MAAM,QAAQ,EAAE,KAoEtB,CAAC"}
|
|
@@ -0,0 +1,207 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { Controls, Heading as DocHeading, Markdown, Primary as DocPrimary, Stories, Subtitle, Title, } from '@storybook/addon-docs/blocks';
|
|
4
|
+
import { fn } from 'storybook/test';
|
|
5
|
+
import { TimeFilter, doesTimeFilterPass } from './TimeFilter/TimeFilter';
|
|
6
|
+
import { Table } from '../../table/Table';
|
|
7
|
+
// ---------------------------------------------------------------------------
|
|
8
|
+
// Docs page content
|
|
9
|
+
// ---------------------------------------------------------------------------
|
|
10
|
+
const DESCRIPTION_INTRO = [
|
|
11
|
+
'`TimeFilter` is an AG Grid column filter component for time-string columns.',
|
|
12
|
+
'It renders a filter-type selector (**Before**, **After**, **At**) and a time input,',
|
|
13
|
+
'then calls `onModelChange` with a `{ filterType, pivot }` model when either changes.',
|
|
14
|
+
'',
|
|
15
|
+
'Register it via the AG Grid `filter` column definition property alongside `doesTimeFilterPass`.',
|
|
16
|
+
].join('\n');
|
|
17
|
+
const USAGE_GUIDANCE = [
|
|
18
|
+
'### When to use',
|
|
19
|
+
'',
|
|
20
|
+
'- On columns containing time strings (e.g. `"09:30"`, `"14:45"`) that need a time-based filter',
|
|
21
|
+
'- When users need to find rows before, after, or at a specific time',
|
|
22
|
+
'',
|
|
23
|
+
'---',
|
|
24
|
+
'',
|
|
25
|
+
'### Registration',
|
|
26
|
+
'',
|
|
27
|
+
'```tsx',
|
|
28
|
+
"import { TimeFilter, doesTimeFilterPass } from '@arbor-education/design-system.components';",
|
|
29
|
+
'',
|
|
30
|
+
'const colDefs = [',
|
|
31
|
+
' {',
|
|
32
|
+
" field: 'startTime',",
|
|
33
|
+
' filter: { component: TimeFilter, doesFilterPass: doesTimeFilterPass },',
|
|
34
|
+
' },',
|
|
35
|
+
'];',
|
|
36
|
+
'```',
|
|
37
|
+
'',
|
|
38
|
+
'---',
|
|
39
|
+
'',
|
|
40
|
+
'### Filter model',
|
|
41
|
+
'',
|
|
42
|
+
'```ts',
|
|
43
|
+
'type TimeFilterModel = {',
|
|
44
|
+
" filterType: 'before' | 'after' | 'equal';",
|
|
45
|
+
' pivot: string; // HH:mm format, e.g. "09:30"',
|
|
46
|
+
'};',
|
|
47
|
+
'```',
|
|
48
|
+
'',
|
|
49
|
+
'---',
|
|
50
|
+
'',
|
|
51
|
+
'### `doesTimeFilterPass`',
|
|
52
|
+
'',
|
|
53
|
+
'`doesTimeFilterPass` is the companion filter function. Import it alongside `TimeFilter` and pass',
|
|
54
|
+
'it to `doesFilterPass` in your column definition. It compares the cell value (time string or `Date`)',
|
|
55
|
+
'against the `pivot` using the selected `filterType`.',
|
|
56
|
+
].join('\n');
|
|
57
|
+
const RELATED_COMPONENTS = [
|
|
58
|
+
'## Related components',
|
|
59
|
+
'',
|
|
60
|
+
'[Table](?path=/docs/components-table--docs) · [BooleanFilter](?path=/docs/components-table-columnfilters-booleanfilter--docs)',
|
|
61
|
+
].join('\n');
|
|
62
|
+
const PROPS_INTRO = 'The preview below is interactive — change the filter type or time value to see the model update in the **Actions** panel.';
|
|
63
|
+
// ---------------------------------------------------------------------------
|
|
64
|
+
// Custom DocsPage
|
|
65
|
+
// ---------------------------------------------------------------------------
|
|
66
|
+
function TimeFilterDocsPage() {
|
|
67
|
+
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: "Examples" }), _jsx(Stories, { title: "" }), _jsx(Markdown, { children: RELATED_COMPONENTS })] }));
|
|
68
|
+
}
|
|
69
|
+
// ---------------------------------------------------------------------------
|
|
70
|
+
// Meta
|
|
71
|
+
// ---------------------------------------------------------------------------
|
|
72
|
+
const meta = {
|
|
73
|
+
title: 'Components/Table/ColumnFilters/TimeFilter',
|
|
74
|
+
component: TimeFilter,
|
|
75
|
+
tags: ['autodocs'],
|
|
76
|
+
parameters: {
|
|
77
|
+
layout: 'padded',
|
|
78
|
+
docs: { page: TimeFilterDocsPage },
|
|
79
|
+
},
|
|
80
|
+
argTypes: {
|
|
81
|
+
model: {
|
|
82
|
+
description: 'The current filter model. `null` means no filter is active. Provide `{ filterType, pivot }` to pre-set the filter.',
|
|
83
|
+
control: false,
|
|
84
|
+
table: { type: { summary: '{ filterType: "before" | "after" | "equal"; pivot: string } | null' }, defaultValue: { summary: 'null' } },
|
|
85
|
+
},
|
|
86
|
+
onModelChange: {
|
|
87
|
+
description: 'Called whenever the user changes the filter type or time value. Receives the new `{ filterType, pivot }` model.',
|
|
88
|
+
control: false,
|
|
89
|
+
table: { type: { summary: '(model: TimeFilterModel) => void' } },
|
|
90
|
+
},
|
|
91
|
+
},
|
|
92
|
+
args: {
|
|
93
|
+
onModelChange: fn(),
|
|
94
|
+
},
|
|
95
|
+
};
|
|
96
|
+
export default meta;
|
|
97
|
+
const withDescription = (story, description) => ({
|
|
98
|
+
...story,
|
|
99
|
+
parameters: {
|
|
100
|
+
...story.parameters,
|
|
101
|
+
docs: { ...story.parameters?.docs, description: { story: description } },
|
|
102
|
+
},
|
|
103
|
+
});
|
|
104
|
+
// ---------------------------------------------------------------------------
|
|
105
|
+
// Stories
|
|
106
|
+
// ---------------------------------------------------------------------------
|
|
107
|
+
export const Default = withDescription({
|
|
108
|
+
args: {
|
|
109
|
+
model: null,
|
|
110
|
+
onModelChange: fn(),
|
|
111
|
+
},
|
|
112
|
+
}, 'No active filter (`model: null`) — filter type defaults to **Before**, time input is empty.');
|
|
113
|
+
export const BeforeNoon = withDescription({
|
|
114
|
+
parameters: { controls: { disable: true } },
|
|
115
|
+
args: {
|
|
116
|
+
model: { filterType: 'before', pivot: '12:00' },
|
|
117
|
+
onModelChange: fn(),
|
|
118
|
+
},
|
|
119
|
+
}, '**Before 12:00** — shows rows where the cell value is a time before noon.');
|
|
120
|
+
export const AfterNine = withDescription({
|
|
121
|
+
parameters: { controls: { disable: true } },
|
|
122
|
+
args: {
|
|
123
|
+
model: { filterType: 'after', pivot: '09:00' },
|
|
124
|
+
onModelChange: fn(),
|
|
125
|
+
},
|
|
126
|
+
}, '**After 09:00** — shows rows where the cell value is a time after 9am.');
|
|
127
|
+
export const ExactTime = withDescription({
|
|
128
|
+
parameters: { controls: { disable: true } },
|
|
129
|
+
args: {
|
|
130
|
+
model: { filterType: 'equal', pivot: '14:30' },
|
|
131
|
+
onModelChange: fn(),
|
|
132
|
+
},
|
|
133
|
+
}, '**At 14:30** — shows rows where the cell value exactly matches the pivot time.');
|
|
134
|
+
export const Controlled = withDescription({
|
|
135
|
+
parameters: { controls: { disable: true } },
|
|
136
|
+
render: () => {
|
|
137
|
+
const [model, setModel] = React.useState(null);
|
|
138
|
+
return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '12px' }, children: [_jsx(TimeFilter, { model: model, onModelChange: setModel }), _jsx("pre", { style: { fontSize: '12px', background: 'var(--color-neutral-50)', padding: '8px', borderRadius: '4px' }, children: model ? JSON.stringify(model, null, 2) : 'null' })] }));
|
|
139
|
+
},
|
|
140
|
+
}, 'Fully controlled — the current model is rendered below the filter as JSON. Interact with the filter to see the model update in real time.');
|
|
141
|
+
const TIME_FILTER_IN_TABLE_DATA = [
|
|
142
|
+
{ pupil: 'Alice Johnson', registrationTime: '08:45' },
|
|
143
|
+
{ pupil: 'Bob Smith', registrationTime: '09:15' },
|
|
144
|
+
{ pupil: 'Charlie Brown', registrationTime: '09:00' },
|
|
145
|
+
{ pupil: 'Diana Prince', registrationTime: '10:30' },
|
|
146
|
+
{ pupil: 'Ethan Hunt', registrationTime: '08:30' },
|
|
147
|
+
];
|
|
148
|
+
export const InATable = withDescription({
|
|
149
|
+
parameters: {
|
|
150
|
+
controls: { disable: true },
|
|
151
|
+
docs: {
|
|
152
|
+
source: {
|
|
153
|
+
language: 'tsx',
|
|
154
|
+
code: `
|
|
155
|
+
import {
|
|
156
|
+
Table,
|
|
157
|
+
TimeFilter,
|
|
158
|
+
doesTimeFilterPass,
|
|
159
|
+
} from '@arbor-education/design-system.components';
|
|
160
|
+
|
|
161
|
+
const rowData = [
|
|
162
|
+
{ pupil: 'Alice Johnson', registrationTime: '08:45' },
|
|
163
|
+
{ pupil: 'Bob Smith', registrationTime: '09:15' },
|
|
164
|
+
{ pupil: 'Charlie Brown', registrationTime: '09:00' },
|
|
165
|
+
{ pupil: 'Diana Prince', registrationTime: '10:30' },
|
|
166
|
+
{ pupil: 'Ethan Hunt', registrationTime: '08:30' },
|
|
167
|
+
];
|
|
168
|
+
|
|
169
|
+
function TimeFilterExample() {
|
|
170
|
+
return (
|
|
171
|
+
<Table
|
|
172
|
+
rowData={rowData}
|
|
173
|
+
columnDefs={[
|
|
174
|
+
{ field: 'pupil', headerName: 'Pupil', flex: 2 },
|
|
175
|
+
{
|
|
176
|
+
field: 'registrationTime',
|
|
177
|
+
headerName: 'Registration time',
|
|
178
|
+
flex: 1,
|
|
179
|
+
editable: false,
|
|
180
|
+
filter: { component: TimeFilter, doesFilterPass: doesTimeFilterPass },
|
|
181
|
+
suppressHeaderFilterButton: false,
|
|
182
|
+
},
|
|
183
|
+
]}
|
|
184
|
+
defaultColDef={{ flex: 1, minWidth: 120, suppressHeaderFilterButton: true }}
|
|
185
|
+
domLayout="autoHeight"
|
|
186
|
+
/>
|
|
187
|
+
);
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
export default TimeFilterExample;
|
|
191
|
+
`.trim(),
|
|
192
|
+
},
|
|
193
|
+
},
|
|
194
|
+
},
|
|
195
|
+
render: () => (_jsx(Table, { rowData: TIME_FILTER_IN_TABLE_DATA, columnDefs: [
|
|
196
|
+
{ field: 'pupil', headerName: 'Pupil', flex: 2 },
|
|
197
|
+
{
|
|
198
|
+
field: 'registrationTime',
|
|
199
|
+
headerName: 'Registration time',
|
|
200
|
+
flex: 1,
|
|
201
|
+
editable: false,
|
|
202
|
+
filter: { component: TimeFilter, doesFilterPass: doesTimeFilterPass },
|
|
203
|
+
suppressHeaderFilterButton: false,
|
|
204
|
+
},
|
|
205
|
+
], defaultColDef: { flex: 1, minWidth: 120, suppressHeaderFilterButton: true }, domLayout: "autoHeight" })),
|
|
206
|
+
}, '`TimeFilter` wired up inside a full `Table`. Click the funnel icon in the **Registration time** column header to open the filter panel — choose **Before**, **After**, or **At** and enter a time (e.g. `09:00`) to filter the rows.');
|
|
207
|
+
//# sourceMappingURL=TimeFilter.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TimeFilter.stories.js","sourceRoot":"","sources":["../../../../src/components/table/columnFilters/TimeFilter.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACL,QAAQ,EACR,OAAO,IAAI,UAAU,EACrB,QAAQ,EACR,OAAO,IAAI,UAAU,EACrB,OAAO,EACP,QAAQ,EACR,KAAK,GACN,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAE/C,8EAA8E;AAC9E,oBAAoB;AACpB,8EAA8E;AAE9E,MAAM,iBAAiB,GAAG;IACxB,6EAA6E;IAC7E,qFAAqF;IACrF,sFAAsF;IACtF,EAAE;IACF,iGAAiG;CAClG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,cAAc,GAAG;IACrB,iBAAiB;IACjB,EAAE;IACF,gGAAgG;IAChG,qEAAqE;IACrE,EAAE;IACF,KAAK;IACL,EAAE;IACF,kBAAkB;IAClB,EAAE;IACF,QAAQ;IACR,6FAA6F;IAC7F,EAAE;IACF,mBAAmB;IACnB,KAAK;IACL,yBAAyB;IACzB,4EAA4E;IAC5E,MAAM;IACN,IAAI;IACJ,KAAK;IACL,EAAE;IACF,KAAK;IACL,EAAE;IACF,kBAAkB;IAClB,EAAE;IACF,OAAO;IACP,0BAA0B;IAC1B,6CAA6C;IAC7C,gDAAgD;IAChD,IAAI;IACJ,KAAK;IACL,EAAE;IACF,KAAK;IACL,EAAE;IACF,0BAA0B;IAC1B,EAAE;IACF,kGAAkG;IAClG,sGAAsG;IACtG,sDAAsD;CACvD,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,kBAAkB,GAAG;IACzB,uBAAuB;IACvB,EAAE;IACF,+HAA+H;CAChI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,WAAW,GAAG,2HAA2H,CAAC;AAEhJ,8EAA8E;AAC9E,kBAAkB;AAClB,8EAA8E;AAE9E,SAAS,kBAAkB;IACzB,OAAO,CACL,8BACE,KAAC,KAAK,KAAG,EACT,KAAC,QAAQ,KAAG,EACZ,KAAC,QAAQ,cAAE,iBAAiB,GAAY,EACxC,KAAC,UAAU,sCAAiC,EAC5C,KAAC,QAAQ,cAAE,WAAW,GAAY,EAClC,KAAC,UAAU,KAAG,EACd,KAAC,QAAQ,KAAG,EACZ,KAAC,UAAU,iCAA4B,EACvC,KAAC,QAAQ,cAAE,cAAc,GAAY,EACrC,KAAC,UAAU,2BAAsB,EACjC,KAAC,OAAO,IAAC,KAAK,EAAC,EAAE,GAAG,EACpB,KAAC,QAAQ,cAAE,kBAAkB,GAAY,IACxC,CACJ,CAAC;AACJ,CAAC;AAED,8EAA8E;AAC9E,OAAO;AACP,8EAA8E;AAE9E,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,2CAA2C;IAClD,SAAS,EAAE,UAAU;IACrB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,QAAQ;QAChB,IAAI,EAAE,EAAE,IAAI,EAAE,kBAAkB,EAAE;KACnC;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,WAAW,EAAE,oHAAoH;YACjI,OAAO,EAAE,KAAK;YACd,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,oEAAoE,EAAE,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE;SACtI;QACD,aAAa,EAAE;YACb,WAAW,EAAE,iHAAiH;YAC9H,OAAO,EAAE,KAAK;YACd,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,kCAAkC,EAAE,EAAE;SACjE;KACF;IACD,IAAI,EAAE;QACJ,aAAa,EAAE,EAAE,EAAE;KACpB;CACgC,CAAC;AAEpC,eAAe,IAAI,CAAC;AAGpB,MAAM,eAAe,GAAG,CAAC,KAAY,EAAE,WAAmB,EAAS,EAAE,CAAC,CAAC;IACrE,GAAG,KAAK;IACR,UAAU,EAAE;QACV,GAAG,KAAK,CAAC,UAAU;QACnB,IAAI,EAAE,EAAE,GAAG,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE;KACzE;CACF,CAAC,CAAC;AAEH,8EAA8E;AAC9E,UAAU;AACV,8EAA8E;AAE9E,MAAM,CAAC,MAAM,OAAO,GAAU,eAAe,CAC3C;IACE,IAAI,EAAE;QACJ,KAAK,EAAE,IAAI;QACX,aAAa,EAAE,EAAE,EAAE;KACpB;CACF,EACD,6FAA6F,CAC9F,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAU,eAAe,CAC9C;IACE,UAAU,EAAE,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IAC3C,IAAI,EAAE;QACJ,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE;QAC/C,aAAa,EAAE,EAAE,EAAE;KACpB;CACF,EACD,2EAA2E,CAC5E,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU,eAAe,CAC7C;IACE,UAAU,EAAE,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IAC3C,IAAI,EAAE;QACJ,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;QAC9C,aAAa,EAAE,EAAE,EAAE;KACpB;CACF,EACD,wEAAwE,CACzE,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU,eAAe,CAC7C;IACE,UAAU,EAAE,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IAC3C,IAAI,EAAE;QACJ,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;QAC9C,aAAa,EAAE,EAAE,EAAE;KACpB;CACF,EACD,gFAAgF,CACjF,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAU,eAAe,CAC9C;IACE,UAAU,EAAE,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IAC3C,MAAM,EAAE,GAAG,EAAE;QACX,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAqE,IAAI,CAAC,CAAC;QACnH,OAAO,CACL,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,aACnE,KAAC,UAAU,IAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,GAAI,EACrD,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,yBAAyB,EAAE,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,YACzG,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,GAC5C,IACF,CACP,CAAC;IACJ,CAAC;CACF,EACD,2IAA2I,CAC5I,CAAC;AAEF,MAAM,yBAAyB,GAAG;IAChC,EAAE,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,OAAO,EAAE;IACrD,EAAE,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,OAAO,EAAE;IACjD,EAAE,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,OAAO,EAAE;IACrD,EAAE,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,OAAO,EAAE;IACpD,EAAE,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,OAAO,EAAE;CACnD,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU,eAAe,CAC5C;IACE,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3B,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCf,CAAC,IAAI,EAAE;aACC;SACF;KACF;IACD,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,KAAC,KAAK,IACJ,OAAO,EAAE,yBAAyB,EAClC,UAAU,EAAE;YACV,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE;YAChD;gBACE,KAAK,EAAE,kBAAkB;gBACzB,UAAU,EAAE,mBAAmB;gBAC/B,IAAI,EAAE,CAAC;gBACP,QAAQ,EAAE,KAAK;gBACf,MAAM,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE,cAAc,EAAE,kBAAkB,EAAE;gBACrE,0BAA0B,EAAE,KAAK;aAClC;SACF,EACD,aAAa,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,0BAA0B,EAAE,IAAI,EAAE,EAC3E,SAAS,EAAC,YAAY,GACtB,CACH;CACF,EACD,sOAAsO,CACvO,CAAC"}
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
import type { StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { PaginationPanel } from './PaginationPanel';
|
|
3
|
+
declare function PaginationPanelDocsPage(): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare const meta: {
|
|
5
|
+
title: string;
|
|
6
|
+
component: (props: {
|
|
7
|
+
className?: string;
|
|
8
|
+
} & import("./RowCountInfo").RowCountInfoProps & import("./PaginationControls").PaginationControlsProps & import("./PageSizeSelector").PageSizeSelectorProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
tags: string[];
|
|
10
|
+
parameters: {
|
|
11
|
+
layout: string;
|
|
12
|
+
docs: {
|
|
13
|
+
page: typeof PaginationPanelDocsPage;
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
argTypes: {
|
|
17
|
+
totalRows: {
|
|
18
|
+
description: string;
|
|
19
|
+
control: "number";
|
|
20
|
+
table: {
|
|
21
|
+
type: {
|
|
22
|
+
summary: string;
|
|
23
|
+
};
|
|
24
|
+
defaultValue: {
|
|
25
|
+
summary: string;
|
|
26
|
+
};
|
|
27
|
+
};
|
|
28
|
+
};
|
|
29
|
+
totalPages: {
|
|
30
|
+
description: string;
|
|
31
|
+
control: "number";
|
|
32
|
+
table: {
|
|
33
|
+
type: {
|
|
34
|
+
summary: string;
|
|
35
|
+
};
|
|
36
|
+
defaultValue: {
|
|
37
|
+
summary: string;
|
|
38
|
+
};
|
|
39
|
+
};
|
|
40
|
+
};
|
|
41
|
+
onPageChange: {
|
|
42
|
+
description: string;
|
|
43
|
+
control: false;
|
|
44
|
+
table: {
|
|
45
|
+
type: {
|
|
46
|
+
summary: string;
|
|
47
|
+
};
|
|
48
|
+
defaultValue: {
|
|
49
|
+
summary: string;
|
|
50
|
+
};
|
|
51
|
+
};
|
|
52
|
+
};
|
|
53
|
+
availableSizes: {
|
|
54
|
+
description: string;
|
|
55
|
+
control: false;
|
|
56
|
+
table: {
|
|
57
|
+
type: {
|
|
58
|
+
summary: string;
|
|
59
|
+
};
|
|
60
|
+
defaultValue: {
|
|
61
|
+
summary: string;
|
|
62
|
+
};
|
|
63
|
+
};
|
|
64
|
+
};
|
|
65
|
+
initialPageSize: {
|
|
66
|
+
description: string;
|
|
67
|
+
control: "number";
|
|
68
|
+
table: {
|
|
69
|
+
type: {
|
|
70
|
+
summary: string;
|
|
71
|
+
};
|
|
72
|
+
defaultValue: {
|
|
73
|
+
summary: string;
|
|
74
|
+
};
|
|
75
|
+
};
|
|
76
|
+
};
|
|
77
|
+
onPageSizeChange: {
|
|
78
|
+
description: string;
|
|
79
|
+
control: false;
|
|
80
|
+
table: {
|
|
81
|
+
type: {
|
|
82
|
+
summary: string;
|
|
83
|
+
};
|
|
84
|
+
defaultValue: {
|
|
85
|
+
summary: string;
|
|
86
|
+
};
|
|
87
|
+
};
|
|
88
|
+
};
|
|
89
|
+
className: {
|
|
90
|
+
description: string;
|
|
91
|
+
control: "text";
|
|
92
|
+
table: {
|
|
93
|
+
type: {
|
|
94
|
+
summary: string;
|
|
95
|
+
};
|
|
96
|
+
defaultValue: {
|
|
97
|
+
summary: string;
|
|
98
|
+
};
|
|
99
|
+
};
|
|
100
|
+
};
|
|
101
|
+
};
|
|
102
|
+
args: {
|
|
103
|
+
onPageChange: import("@vitest/spy").Mock<(...args: any[]) => any>;
|
|
104
|
+
onPageSizeChange: import("@vitest/spy").Mock<(...args: any[]) => any>;
|
|
105
|
+
};
|
|
106
|
+
};
|
|
107
|
+
export default meta;
|
|
108
|
+
type Story = StoryObj<typeof PaginationPanel>;
|
|
109
|
+
export declare const Default: Story;
|
|
110
|
+
export declare const PageNavigationOnly: Story;
|
|
111
|
+
export declare const PageSizeSelectorOnly: Story;
|
|
112
|
+
export declare const ServerSidePagination: Story;
|
|
113
|
+
//# sourceMappingURL=PaginationPanel.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PaginationPanel.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/table/pagination/PaginationPanel.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAW5D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AA+HpD,iBAAS,uBAAuB,4CAmB/B;AAMD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiD8B,CAAC;AAEzC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,eAAe,CAAC,CAAC;AAkB9C,eAAO,MAAM,OAAO,EAAE,KAarB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAWhC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAYlC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAmDlC,CAAC"}
|