@baton8/general-components 1.0.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/.babelrc.json +16 -0
- package/.eslintrc.json +11 -0
- package/.github/workflows/chromatic.yml +43 -0
- package/.github/workflows/doc.yml +53 -0
- package/.github/workflows/review.yml +18 -0
- package/README.md +11 -0
- package/dist/components/atoms/asyncSelect/asyncSelect.d.ts +67 -0
- package/dist/components/atoms/asyncSelect/asyncSelect.stories.d.ts +6 -0
- package/dist/components/atoms/asyncSelect/asyncSelectOption.d.ts +26 -0
- package/dist/components/atoms/asyncSelect/index.d.ts +2 -0
- package/dist/components/atoms/avatar/avatar.d.ts +27 -0
- package/dist/components/atoms/avatar/avatar.stories.d.ts +7 -0
- package/dist/components/atoms/avatar/avatarFallbackIcon.d.ts +15 -0
- package/dist/components/atoms/avatar/avatarFallbackLetter.d.ts +20 -0
- package/dist/components/atoms/avatar/index.d.ts +3 -0
- package/dist/components/atoms/badge/badge.d.ts +34 -0
- package/dist/components/atoms/badge/badge.stories.d.ts +11 -0
- package/dist/components/atoms/badge/badgeIconContainer.d.ts +16 -0
- package/dist/components/atoms/badge/index.d.ts +2 -0
- package/dist/components/atoms/barMeter/barMeter.d.ts +45 -0
- package/dist/components/atoms/barMeter/barMeter.stories.d.ts +10 -0
- package/dist/components/atoms/barMeter/barMeterValue.d.ts +32 -0
- package/dist/components/atoms/barMeter/barMeterValue.stories.d.ts +7 -0
- package/dist/components/atoms/barMeter/barMeterValueIconContainer.d.ts +17 -0
- package/dist/components/atoms/barMeter/context.d.ts +8 -0
- package/dist/components/atoms/barMeter/index.d.ts +3 -0
- package/dist/components/atoms/barProgress/barProgress.d.ts +38 -0
- package/dist/components/atoms/barProgress/barProgress.stories.d.ts +8 -0
- package/dist/components/atoms/barProgress/index.d.ts +1 -0
- package/dist/components/atoms/button/button.d.ts +79 -0
- package/dist/components/atoms/button/button.stories.d.ts +13 -0
- package/dist/components/atoms/button/buttonIconContainer.d.ts +16 -0
- package/dist/components/atoms/button/hotkeyView.d.ts +6 -0
- package/dist/components/atoms/button/index.d.ts +2 -0
- package/dist/components/atoms/buttonLink/buttonLink.d.ts +83 -0
- package/dist/components/atoms/buttonLink/buttonLink.stories.d.ts +13 -0
- package/dist/components/atoms/buttonLink/buttonLinkIconContainer.d.ts +16 -0
- package/dist/components/atoms/buttonLink/index.d.ts +2 -0
- package/dist/components/atoms/checkableContainer/checkableContainer.d.ts +37 -0
- package/dist/components/atoms/checkableContainer/checkableContainer.stories.d.ts +9 -0
- package/dist/components/atoms/checkableContainer/checkableLabel.d.ts +29 -0
- package/dist/components/atoms/checkableContainer/checkableLabel.stories.d.ts +7 -0
- package/dist/components/atoms/checkableContainer/index.d.ts +2 -0
- package/dist/components/atoms/checkbox/checkbox.d.ts +56 -0
- package/dist/components/atoms/checkbox/checkbox.stories.d.ts +15 -0
- package/dist/components/atoms/checkbox/index.d.ts +1 -0
- package/dist/components/atoms/controlContainer/controlContainer.d.ts +56 -0
- package/dist/components/atoms/controlContainer/controlContainer.stories.d.ts +13 -0
- package/dist/components/atoms/controlContainer/controlErrorMessage.d.ts +20 -0
- package/dist/components/atoms/controlContainer/controlErrorMessage.stories.d.ts +7 -0
- package/dist/components/atoms/controlContainer/controlHelper.d.ts +20 -0
- package/dist/components/atoms/controlContainer/controlHelper.stories.d.ts +7 -0
- package/dist/components/atoms/controlContainer/controlLabel.d.ts +20 -0
- package/dist/components/atoms/controlContainer/controlLabel.stories.d.ts +7 -0
- package/dist/components/atoms/controlContainer/index.d.ts +4 -0
- package/dist/components/atoms/divider/divider.d.ts +15 -0
- package/dist/components/atoms/divider/divider.stories.d.ts +8 -0
- package/dist/components/atoms/divider/index.d.ts +1 -0
- package/dist/components/atoms/fileInput/fileInput.d.ts +57 -0
- package/dist/components/atoms/fileInput/fileInput.stories.d.ts +10 -0
- package/dist/components/atoms/fileInput/index.d.ts +1 -0
- package/dist/components/atoms/generalIcon/generalIcon.d.ts +58 -0
- package/dist/components/atoms/generalIcon/generalIcon.stories.d.ts +7 -0
- package/dist/components/atoms/generalIcon/index.d.ts +1 -0
- package/dist/components/atoms/heading/heading.d.ts +21 -0
- package/dist/components/atoms/heading/heading.stories.d.ts +7 -0
- package/dist/components/atoms/heading/index.d.ts +1 -0
- package/dist/components/atoms/icon/icon.d.ts +28 -0
- package/dist/components/atoms/icon/icon.stories.d.ts +7 -0
- package/dist/components/atoms/icon/iconData.d.ts +33 -0
- package/dist/components/atoms/icon/iconDefinitions.d.ts +8 -0
- package/dist/components/atoms/icon/index.d.ts +1 -0
- package/dist/components/atoms/iconButton/iconButton.d.ts +71 -0
- package/dist/components/atoms/iconButton/iconButton.stories.d.ts +11 -0
- package/dist/components/atoms/iconButton/index.d.ts +1 -0
- package/dist/components/atoms/input/index.d.ts +3 -0
- package/dist/components/atoms/input/input.d.ts +80 -0
- package/dist/components/atoms/input/input.stories.d.ts +20 -0
- package/dist/components/atoms/input/inputLeftAddon.d.ts +16 -0
- package/dist/components/atoms/input/inputRightAddon.d.ts +16 -0
- package/dist/components/atoms/link/index.d.ts +2 -0
- package/dist/components/atoms/link/link.d.ts +79 -0
- package/dist/components/atoms/link/link.stories.d.ts +8 -0
- package/dist/components/atoms/link/linkIconContainer.d.ts +16 -0
- package/dist/components/atoms/loadingIcon/index.d.ts +1 -0
- package/dist/components/atoms/loadingIcon/loadingIcon.d.ts +20 -0
- package/dist/components/atoms/loadingIcon/loadingIcon.stories.d.ts +7 -0
- package/dist/components/atoms/modal/index.d.ts +1 -0
- package/dist/components/atoms/modal/modal.d.ts +27 -0
- package/dist/components/atoms/modal/modal.stories.d.ts +7 -0
- package/dist/components/atoms/multiLineText/index.d.ts +1 -0
- package/dist/components/atoms/multiLineText/multiLineText.d.ts +49 -0
- package/dist/components/atoms/multiLineText/multiLineText.stories.d.ts +9 -0
- package/dist/components/atoms/numberInput/index.d.ts +2 -0
- package/dist/components/atoms/numberInput/numberInput.d.ts +58 -0
- package/dist/components/atoms/numberInput/numberInput.stories.d.ts +10 -0
- package/dist/components/atoms/numberInput/numberInputLeftAddon.d.ts +15 -0
- package/dist/components/atoms/passwordInput/index.d.ts +3 -0
- package/dist/components/atoms/passwordInput/passwordInput.d.ts +60 -0
- package/dist/components/atoms/passwordInput/passwordInput.stories.d.ts +13 -0
- package/dist/components/atoms/passwordInput/passwordInputLeftAddon.d.ts +16 -0
- package/dist/components/atoms/passwordInput/passwordInputRightAddon.d.ts +16 -0
- package/dist/components/atoms/radio/index.d.ts +1 -0
- package/dist/components/atoms/radio/radio.d.ts +53 -0
- package/dist/components/atoms/radio/radio.stories.d.ts +13 -0
- package/dist/components/atoms/radioGroup/alignedRadioGroup.d.ts +15 -0
- package/dist/components/atoms/radioGroup/index.d.ts +2 -0
- package/dist/components/atoms/radioGroup/radioGroup.d.ts +15 -0
- package/dist/components/atoms/radioGroup/radioGroup.stories.d.ts +8 -0
- package/dist/components/atoms/root/index.d.ts +1 -0
- package/dist/components/atoms/root/root.d.ts +76 -0
- package/dist/components/atoms/root/root.stories.d.ts +7 -0
- package/dist/components/atoms/root/scrollGlobalStyle.d.ts +1 -0
- package/dist/components/atoms/root/svgDefinition.d.ts +8 -0
- package/dist/components/atoms/scroll/index.d.ts +1 -0
- package/dist/components/atoms/scroll/scroll.d.ts +31 -0
- package/dist/components/atoms/scroll/scroll.stories.d.ts +8 -0
- package/dist/components/atoms/secondaryHeading/index.d.ts +1 -0
- package/dist/components/atoms/secondaryHeading/secondaryHeading.d.ts +20 -0
- package/dist/components/atoms/secondaryHeading/secondaryHeading.stories.d.ts +7 -0
- package/dist/components/atoms/select/context.d.ts +10 -0
- package/dist/components/atoms/select/index.d.ts +7 -0
- package/dist/components/atoms/select/pageSizeSelect.d.ts +35 -0
- package/dist/components/atoms/select/pageSizeSelect.stories.d.ts +7 -0
- package/dist/components/atoms/select/pageSizeSelectAuto.d.ts +11 -0
- package/dist/components/atoms/select/select.d.ts +109 -0
- package/dist/components/atoms/select/select.stories.d.ts +13 -0
- package/dist/components/atoms/select/selectComponentClearIndicator.d.ts +13 -0
- package/dist/components/atoms/select/selectComponentControl.d.ts +13 -0
- package/dist/components/atoms/select/selectComponentDropdownIndicator.d.ts +13 -0
- package/dist/components/atoms/select/selectComponentIndicatorsContainer.d.ts +13 -0
- package/dist/components/atoms/select/selectComponentInput.d.ts +13 -0
- package/dist/components/atoms/select/selectComponentLoadingMessage.d.ts +13 -0
- package/dist/components/atoms/select/selectComponentMenu.d.ts +13 -0
- package/dist/components/atoms/select/selectComponentMenuList.d.ts +13 -0
- package/dist/components/atoms/select/selectComponentMenuPortal.d.ts +8 -0
- package/dist/components/atoms/select/selectComponentNoOptionMessage.d.ts +13 -0
- package/dist/components/atoms/select/selectComponentOption.d.ts +13 -0
- package/dist/components/atoms/select/selectComponentPlacement.d.ts +13 -0
- package/dist/components/atoms/select/selectHook.d.ts +8 -0
- package/dist/components/atoms/select/selectOption.d.ts +36 -0
- package/dist/components/atoms/select/selectOption.stories.d.ts +7 -0
- package/dist/components/atoms/select/selectOptionIconContainer.d.ts +16 -0
- package/dist/components/atoms/select/sortOrderSelect.d.ts +34 -0
- package/dist/components/atoms/select/sortOrderSelect.stories.d.ts +8 -0
- package/dist/components/atoms/singleLineText/index.d.ts +1 -0
- package/dist/components/atoms/singleLineText/singleLineText.d.ts +27 -0
- package/dist/components/atoms/singleLineText/singleLineText.stories.d.ts +8 -0
- package/dist/components/atoms/switch/index.d.ts +1 -0
- package/dist/components/atoms/switch/switch.d.ts +53 -0
- package/dist/components/atoms/switch/switch.stories.d.ts +13 -0
- package/dist/components/atoms/tag/index.d.ts +2 -0
- package/dist/components/atoms/tag/tag.d.ts +24 -0
- package/dist/components/atoms/tag/tag.stories.d.ts +8 -0
- package/dist/components/atoms/tag/tagIconContainer.d.ts +15 -0
- package/dist/components/atoms/tagList/index.d.ts +1 -0
- package/dist/components/atoms/tagList/tagList.d.ts +19 -0
- package/dist/components/atoms/tagList/tagList.stories.d.ts +8 -0
- package/dist/components/atoms/textButton/index.d.ts +2 -0
- package/dist/components/atoms/textButton/textButton.d.ts +43 -0
- package/dist/components/atoms/textButton/textButton.stories.d.ts +8 -0
- package/dist/components/atoms/textButton/textButtonIconContainer.d.ts +16 -0
- package/dist/components/atoms/textarea/index.d.ts +1 -0
- package/dist/components/atoms/textarea/textarea.d.ts +57 -0
- package/dist/components/atoms/textarea/textarea.stories.d.ts +11 -0
- package/dist/components/atoms/visuallyHidden/index.d.ts +1 -0
- package/dist/components/atoms/visuallyHidden/visuallyHidden.d.ts +20 -0
- package/dist/components/atoms/visuallyHidden/visuallyHidden.stories.d.ts +7 -0
- package/dist/components/functions/shorthands.d.ts +43 -0
- package/dist/components/functions/utilities.d.ts +94 -0
- package/dist/components/index.d.ts +52 -0
- package/dist/components/modules/bulkOperationContainer/bulkOperationButton.d.ts +17 -0
- package/dist/components/modules/bulkOperationContainer/bulkOperationButton.stories.d.ts +8 -0
- package/dist/components/modules/bulkOperationContainer/bulkOperationContainer.d.ts +16 -0
- package/dist/components/modules/bulkOperationContainer/index.d.ts +2 -0
- package/dist/components/modules/card/card.d.ts +59 -0
- package/dist/components/modules/card/card.stories.d.ts +17 -0
- package/dist/components/modules/card/cardBody.d.ts +15 -0
- package/dist/components/modules/card/cardBody.stories.d.ts +7 -0
- package/dist/components/modules/card/cardButton.d.ts +55 -0
- package/dist/components/modules/card/cardButton.stories.d.ts +7 -0
- package/dist/components/modules/card/cardButtonList.d.ts +15 -0
- package/dist/components/modules/card/cardButtonList.stories.d.ts +7 -0
- package/dist/components/modules/card/cardControlContainer.d.ts +15 -0
- package/dist/components/modules/card/cardControlContainer.stories.d.ts +7 -0
- package/dist/components/modules/card/cardHeadnote.d.ts +15 -0
- package/dist/components/modules/card/cardHeadnote.stories.d.ts +7 -0
- package/dist/components/modules/card/cardTitle.d.ts +25 -0
- package/dist/components/modules/card/cardTitle.stories.d.ts +7 -0
- package/dist/components/modules/card/context.d.ts +11 -0
- package/dist/components/modules/card/index.d.ts +7 -0
- package/dist/components/modules/cardList/cardList.d.ts +73 -0
- package/dist/components/modules/cardList/cardList.stories.d.ts +7 -0
- package/dist/components/modules/cardList/cardListAuto.d.ts +163 -0
- package/dist/components/modules/cardList/cardListAuto.stories.d.ts +5 -0
- package/dist/components/modules/cardList/cardListAutoHook.d.ts +13 -0
- package/dist/components/modules/cardList/cardListBody.d.ts +21 -0
- package/dist/components/modules/cardList/cardListBody.stories.d.ts +7 -0
- package/dist/components/modules/cardList/cardListBodyAuto.d.ts +24 -0
- package/dist/components/modules/cardList/cardListEmpty.d.ts +18 -0
- package/dist/components/modules/cardList/cardListEmpty.stories.d.ts +7 -0
- package/dist/components/modules/cardList/cardListFooter.d.ts +13 -0
- package/dist/components/modules/cardList/cardListFooter.stories.d.ts +7 -0
- package/dist/components/modules/cardList/cardListFooterAuto.d.ts +13 -0
- package/dist/components/modules/cardList/cardListHeader.d.ts +15 -0
- package/dist/components/modules/cardList/cardListHeader.stories.d.ts +7 -0
- package/dist/components/modules/cardList/cardListHeaderLeft.d.ts +15 -0
- package/dist/components/modules/cardList/cardListHeaderLeft.stories.d.ts +7 -0
- package/dist/components/modules/cardList/cardListHeaderRight.d.ts +15 -0
- package/dist/components/modules/cardList/cardListHeaderRight.stories.d.ts +7 -0
- package/dist/components/modules/cardList/cardListLoading.d.ts +18 -0
- package/dist/components/modules/cardList/cardListLoading.stories.d.ts +7 -0
- package/dist/components/modules/cardList/index.d.ts +11 -0
- package/dist/components/modules/contentHeader/contentHeader.d.ts +16 -0
- package/dist/components/modules/contentHeader/contentHeader.stories.d.ts +8 -0
- package/dist/components/modules/contentHeader/contentTitle.d.ts +15 -0
- package/dist/components/modules/contentHeader/index.d.ts +2 -0
- package/dist/components/modules/countIndicator/countIndicator.d.ts +32 -0
- package/dist/components/modules/countIndicator/countIndicator.stories.d.ts +14 -0
- package/dist/components/modules/countIndicator/index.d.ts +1 -0
- package/dist/components/modules/dialog/context.d.ts +9 -0
- package/dist/components/modules/dialog/dialog.d.ts +77 -0
- package/dist/components/modules/dialog/dialog.stories.d.ts +16 -0
- package/dist/components/modules/dialog/dialogBody.d.ts +18 -0
- package/dist/components/modules/dialog/dialogBody.stories.d.ts +7 -0
- package/dist/components/modules/dialog/dialogButton.d.ts +40 -0
- package/dist/components/modules/dialog/dialogButton.stories.d.ts +8 -0
- package/dist/components/modules/dialog/dialogCloseButton.d.ts +13 -0
- package/dist/components/modules/dialog/dialogCloseButton.stories.d.ts +7 -0
- package/dist/components/modules/dialog/dialogFooter.d.ts +15 -0
- package/dist/components/modules/dialog/dialogFooter.stories.d.ts +7 -0
- package/dist/components/modules/dialog/dialogHeader.d.ts +15 -0
- package/dist/components/modules/dialog/dialogHeader.stories.d.ts +7 -0
- package/dist/components/modules/dialog/dialogTitle.d.ts +20 -0
- package/dist/components/modules/dialog/dialogTitle.stories.d.ts +7 -0
- package/dist/components/modules/dialog/index.d.ts +7 -0
- package/dist/components/modules/drawer/context.d.ts +9 -0
- package/dist/components/modules/drawer/drawer.d.ts +32 -0
- package/dist/components/modules/drawer/drawer.stories.d.ts +13 -0
- package/dist/components/modules/drawer/drawerBody.d.ts +15 -0
- package/dist/components/modules/drawer/drawerBody.stories.d.ts +7 -0
- package/dist/components/modules/drawer/drawerButton.d.ts +42 -0
- package/dist/components/modules/drawer/drawerButton.stories.d.ts +7 -0
- package/dist/components/modules/drawer/drawerCaption.d.ts +15 -0
- package/dist/components/modules/drawer/drawerCaption.stories.d.ts +7 -0
- package/dist/components/modules/drawer/drawerFooter.d.ts +15 -0
- package/dist/components/modules/drawer/drawerFooter.stories.d.ts +7 -0
- package/dist/components/modules/drawer/drawerHeader.d.ts +15 -0
- package/dist/components/modules/drawer/drawerHeader.stories.d.ts +7 -0
- package/dist/components/modules/drawer/drawerTitle.d.ts +20 -0
- package/dist/components/modules/drawer/drawerTitle.stories.d.ts +7 -0
- package/dist/components/modules/drawer/index.d.ts +7 -0
- package/dist/components/modules/footnote/footnote.d.ts +26 -0
- package/dist/components/modules/footnote/footnote.stories.d.ts +9 -0
- package/dist/components/modules/footnote/footnoteIconContainer.d.ts +15 -0
- package/dist/components/modules/footnote/index.d.ts +2 -0
- package/dist/components/modules/footnoteList/footnoteList.d.ts +38 -0
- package/dist/components/modules/footnoteList/footnoteList.stories.d.ts +9 -0
- package/dist/components/modules/footnoteList/footnoteListRow.d.ts +19 -0
- package/dist/components/modules/footnoteList/footnoteListRow.stories.d.ts +7 -0
- package/dist/components/modules/footnoteList/index.d.ts +2 -0
- package/dist/components/modules/fractionView/context.d.ts +7 -0
- package/dist/components/modules/fractionView/fractionView.d.ts +28 -0
- package/dist/components/modules/fractionView/fractionView.stories.d.ts +8 -0
- package/dist/components/modules/fractionView/fractionViewDenominator.d.ts +15 -0
- package/dist/components/modules/fractionView/fractionViewNumerator.d.ts +15 -0
- package/dist/components/modules/fractionView/index.d.ts +3 -0
- package/dist/components/modules/header/header.d.ts +15 -0
- package/dist/components/modules/header/header.stories.d.ts +7 -0
- package/dist/components/modules/header/headerLeft.d.ts +15 -0
- package/dist/components/modules/header/headerMenu.d.ts +16 -0
- package/dist/components/modules/header/headerMenuItem.d.ts +21 -0
- package/dist/components/modules/header/headerMenuItemIconContainer.d.ts +16 -0
- package/dist/components/modules/header/index.d.ts +5 -0
- package/dist/components/modules/menu/context.d.ts +10 -0
- package/dist/components/modules/menu/index.d.ts +4 -0
- package/dist/components/modules/menu/menu.d.ts +42 -0
- package/dist/components/modules/menu/menu.stories.d.ts +9 -0
- package/dist/components/modules/menu/menuDivider.d.ts +23 -0
- package/dist/components/modules/menu/menuItem.d.ts +23 -0
- package/dist/components/modules/menu/menuItem.stories.d.ts +7 -0
- package/dist/components/modules/menu/menuItemIconContainer.d.ts +15 -0
- package/dist/components/modules/menu/menuList.d.ts +22 -0
- package/dist/components/modules/pagination/index.d.ts +2 -0
- package/dist/components/modules/pagination/pagination.d.ts +25 -0
- package/dist/components/modules/pagination/pagination.stories.d.ts +7 -0
- package/dist/components/modules/pagination/paginationAuto.d.ts +13 -0
- package/dist/components/modules/rankView/index.d.ts +1 -0
- package/dist/components/modules/rankView/rankView.d.ts +29 -0
- package/dist/components/modules/rankView/rankView.stories.d.ts +13 -0
- package/dist/components/modules/stepper/context.d.ts +13 -0
- package/dist/components/modules/stepper/index.d.ts +5 -0
- package/dist/components/modules/stepper/stepper.d.ts +22 -0
- package/dist/components/modules/stepper/stepper.stories.d.ts +8 -0
- package/dist/components/modules/stepper/stepperBody.d.ts +15 -0
- package/dist/components/modules/stepper/stepperItem.d.ts +17 -0
- package/dist/components/modules/stepper/stepperNumber.d.ts +15 -0
- package/dist/components/modules/stepper/stepperTitle.d.ts +20 -0
- package/dist/components/modules/tabList/index.d.ts +3 -0
- package/dist/components/modules/tabList/tab.d.ts +21 -0
- package/dist/components/modules/tabList/tabIconContainer.d.ts +15 -0
- package/dist/components/modules/tabList/tabList.d.ts +15 -0
- package/dist/components/modules/tabList/tabList.stories.d.ts +7 -0
- package/dist/components/modules/toast/index.d.ts +5 -0
- package/dist/components/modules/toast/simpleToast.d.ts +36 -0
- package/dist/components/modules/toast/simpleToast.stories.d.ts +9 -0
- package/dist/components/modules/toast/toast.d.ts +74 -0
- package/dist/components/modules/toast/toast.stories.d.ts +10 -0
- package/dist/components/modules/toast/toastBody.d.ts +16 -0
- package/dist/components/modules/toast/toastMessage.d.ts +15 -0
- package/dist/components/modules/toast/toastSupplement.d.ts +15 -0
- package/dist/components/modules/toast/toastViewport.d.ts +8 -0
- package/dist/components/tests/samples/dialog.stories.d.ts +7 -0
- package/dist/components/tests/samples/forms.stories.d.ts +6 -0
- package/dist/components/tests/samples/playableDeckList.stories.d.ts +6 -0
- package/dist/components/tests/samples/quizList.stories.d.ts +6 -0
- package/dist/components/utils/modalBase/index.d.ts +1 -0
- package/dist/components/utils/modalBase/modalBase.d.ts +14 -0
- package/dist/components/utils/storyContainer/index.d.ts +1 -0
- package/dist/components/utils/storyContainer/storyContainer.d.ts +12 -0
- package/dist/contexts/dialog/context.d.ts +13 -0
- package/dist/contexts/dialog/hook.d.ts +3 -0
- package/dist/contexts/footenoteList/context.d.ts +7 -0
- package/dist/contexts/index.d.ts +3 -0
- package/dist/contexts/pageProps/context.d.ts +9 -0
- package/dist/contexts/radioGroup/context.d.ts +9 -0
- package/dist/contexts/radioGroup/hook.d.ts +4 -0
- package/dist/contexts/root/context.d.ts +9 -0
- package/dist/contexts/toast/context.d.ts +12 -0
- package/dist/contexts/toast/hook.d.ts +3 -0
- package/dist/index.d.ts +8 -0
- package/dist/index.js +2566 -0
- package/dist/index.js.map +1 -0
- package/dist/messages/index.d.ts +4 -0
- package/dist/modules/color.d.ts +19 -0
- package/dist/modules/data.d.ts +12 -0
- package/dist/modules/genre.d.ts +3 -0
- package/dist/modules/message.d.ts +7 -0
- package/dist/modules/responsive.d.ts +17 -0
- package/dist/modules/subject.d.ts +21 -0
- package/dist/modules/translation.d.ts +53 -0
- package/dist/stories/atoms/asyncSelect/asyncSelect.stories.d.ts +6 -0
- package/dist/stories/atoms/avatar/avatar.stories.d.ts +7 -0
- package/dist/stories/atoms/badge/badge.stories.d.ts +11 -0
- package/dist/stories/atoms/barMeter/barMeter.stories.d.ts +10 -0
- package/dist/stories/atoms/barMeter/barMeterValue.stories.d.ts +7 -0
- package/dist/stories/atoms/barProgress/barProgress.stories.d.ts +8 -0
- package/dist/stories/atoms/button/button.stories.d.ts +17 -0
- package/dist/stories/atoms/buttonLink/buttonLink.stories.d.ts +13 -0
- package/dist/stories/atoms/checkableContainer/checkableContainer.stories.d.ts +9 -0
- package/dist/stories/atoms/checkableContainer/checkableLabel.stories.d.ts +7 -0
- package/dist/stories/atoms/checkbox/checkbox.stories.d.ts +15 -0
- package/dist/stories/atoms/controlContainer/controlContainer.stories.d.ts +13 -0
- package/dist/stories/atoms/controlContainer/controlErrorMessage.stories.d.ts +7 -0
- package/dist/stories/atoms/controlContainer/controlHelper.stories.d.ts +7 -0
- package/dist/stories/atoms/controlContainer/controlLabel.stories.d.ts +7 -0
- package/dist/stories/atoms/divider/divider.stories.d.ts +8 -0
- package/dist/stories/atoms/fileInput/fileInput.stories.d.ts +10 -0
- package/dist/stories/atoms/generalIcon/generalIcon.stories.d.ts +7 -0
- package/dist/stories/atoms/heading/heading.stories.d.ts +7 -0
- package/dist/stories/atoms/iconButton/iconButton.stories.d.ts +11 -0
- package/dist/stories/atoms/input/input.stories.d.ts +21 -0
- package/dist/stories/atoms/link/link.stories.d.ts +9 -0
- package/dist/stories/atoms/loadingIcon/loadingIcon.stories.d.ts +7 -0
- package/dist/stories/atoms/modal/modal.stories.d.ts +7 -0
- package/dist/stories/atoms/multiLineText/multiLineText.stories.d.ts +9 -0
- package/dist/stories/atoms/numberInput/numberInput.stories.d.ts +10 -0
- package/dist/stories/atoms/passwordInput/passwordInput.stories.d.ts +13 -0
- package/dist/stories/atoms/radio/radio.stories.d.ts +13 -0
- package/dist/stories/atoms/radioGroup/radioGroup.stories.d.ts +8 -0
- package/dist/stories/atoms/root/root.stories.d.ts +7 -0
- package/dist/stories/atoms/scroll/scroll.stories.d.ts +8 -0
- package/dist/stories/atoms/secondaryHeading/secondaryHeading.stories.d.ts +7 -0
- package/dist/stories/atoms/select/pageSizeSelect.stories.d.ts +7 -0
- package/dist/stories/atoms/select/select.stories.d.ts +13 -0
- package/dist/stories/atoms/select/selectOption.stories.d.ts +7 -0
- package/dist/stories/atoms/select/sortOrderSelect.stories.d.ts +8 -0
- package/dist/stories/atoms/singleLineText/singleLineText.stories.d.ts +8 -0
- package/dist/stories/atoms/switch/switch.stories.d.ts +13 -0
- package/dist/stories/atoms/tag/tag.stories.d.ts +8 -0
- package/dist/stories/atoms/tagList/tagList.stories.d.ts +8 -0
- package/dist/stories/atoms/textButton/textButton.stories.d.ts +8 -0
- package/dist/stories/atoms/textarea/textarea.stories.d.ts +11 -0
- package/dist/stories/atoms/visuallyHidden/visuallyHidden.stories.d.ts +7 -0
- package/dist/stories/modules/bulkOperationContainer/bulkOperationButton.stories.d.ts +8 -0
- package/dist/stories/modules/card/card.stories.d.ts +17 -0
- package/dist/stories/modules/card/cardBody.stories.d.ts +7 -0
- package/dist/stories/modules/card/cardButton.stories.d.ts +7 -0
- package/dist/stories/modules/card/cardButtonList.stories.d.ts +7 -0
- package/dist/stories/modules/card/cardControlContainer.stories.d.ts +7 -0
- package/dist/stories/modules/card/cardHeadnote.stories.d.ts +7 -0
- package/dist/stories/modules/card/cardTitle.stories.d.ts +7 -0
- package/dist/stories/modules/cardList/cardList.stories.d.ts +7 -0
- package/dist/stories/modules/cardList/cardListBody.stories.d.ts +7 -0
- package/dist/stories/modules/cardList/cardListEmpty.stories.d.ts +7 -0
- package/dist/stories/modules/cardList/cardListFooter.stories.d.ts +7 -0
- package/dist/stories/modules/cardList/cardListHeader.stories.d.ts +7 -0
- package/dist/stories/modules/cardList/cardListHeaderLeft.stories.d.ts +7 -0
- package/dist/stories/modules/cardList/cardListHeaderRight.stories.d.ts +7 -0
- package/dist/stories/modules/cardList/cardListLoading.stories.d.ts +7 -0
- package/dist/stories/modules/contentHeader/contentHeader.stories.d.ts +8 -0
- package/dist/stories/modules/countIndicator/countIndicator.stories.d.ts +14 -0
- package/dist/stories/modules/dialog/dialog.stories.d.ts +16 -0
- package/dist/stories/modules/dialog/dialogBody.stories.d.ts +7 -0
- package/dist/stories/modules/dialog/dialogButton.stories.d.ts +8 -0
- package/dist/stories/modules/dialog/dialogCloseButton.stories.d.ts +7 -0
- package/dist/stories/modules/dialog/dialogFooter.stories.d.ts +7 -0
- package/dist/stories/modules/dialog/dialogHeader.stories.d.ts +7 -0
- package/dist/stories/modules/dialog/dialogTitle.stories.d.ts +7 -0
- package/dist/stories/modules/drawer/drawer.stories.d.ts +13 -0
- package/dist/stories/modules/drawer/drawerBody.stories.d.ts +7 -0
- package/dist/stories/modules/drawer/drawerButton.stories.d.ts +7 -0
- package/dist/stories/modules/drawer/drawerCaption.stories.d.ts +7 -0
- package/dist/stories/modules/drawer/drawerFooter.stories.d.ts +7 -0
- package/dist/stories/modules/drawer/drawerHeader.stories.d.ts +7 -0
- package/dist/stories/modules/drawer/drawerTitle.stories.d.ts +7 -0
- package/dist/stories/modules/footnote/footnote.stories.d.ts +9 -0
- package/dist/stories/modules/footnoteList/footnoteList.stories.d.ts +9 -0
- package/dist/stories/modules/footnoteList/footnoteListRow.stories.d.ts +7 -0
- package/dist/stories/modules/fractionView/fractionView.stories.d.ts +8 -0
- package/dist/stories/modules/header/header.stories.d.ts +7 -0
- package/dist/stories/modules/menu/menu.stories.d.ts +9 -0
- package/dist/stories/modules/menu/menuItem.stories.d.ts +7 -0
- package/dist/stories/modules/pagination/pagination.stories.d.ts +7 -0
- package/dist/stories/modules/rankView/rankView.stories.d.ts +13 -0
- package/dist/stories/modules/stepper/stepper.stories.d.ts +8 -0
- package/dist/stories/modules/tabList/tabList.stories.d.ts +7 -0
- package/dist/stories/modules/toast/simpleToast.stories.d.ts +9 -0
- package/dist/stories/modules/toast/toast.stories.d.ts +11 -0
- package/dist/stories/tests/samples/dialog.stories.d.ts +7 -0
- package/dist/stories/tests/samples/forms.stories.d.ts +6 -0
- package/dist/utils/children.d.ts +2 -0
- package/dist/utils/color.d.ts +5 -0
- package/dist/utils/debug.d.ts +1 -0
- package/dist/utils/event.d.ts +2 -0
- package/dist/utils/node.d.ts +4 -0
- package/dist/utils/translation.d.ts +2 -0
- package/dist/utils/types.d.ts +9 -0
- package/package.json +123 -0
- package/tsconfig.json +33 -0
- package/typedoc.json +26 -0
- package/webpack.config.ts +55 -0
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* @group React コンポーネント
|
|
4
|
+
* @category React コンポーネント
|
|
5
|
+
*/
|
|
6
|
+
export declare const CardControlContainer: import("react").ForwardRefExoticComponent<import("../../../modules/data").DataProps<string> & {
|
|
7
|
+
className?: string | undefined;
|
|
8
|
+
id?: string | undefined;
|
|
9
|
+
style?: import("react").CSSProperties | undefined;
|
|
10
|
+
} & {
|
|
11
|
+
/** */
|
|
12
|
+
className?: string | undefined;
|
|
13
|
+
/** */
|
|
14
|
+
children?: ReactNode;
|
|
15
|
+
} & import("react").RefAttributes<HTMLLabelElement>>;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Meta as RawMeta, StoryObj as RawStory } from "@storybook/react";
|
|
2
|
+
import { CardControlContainer } from "../../../components";
|
|
3
|
+
type Meta = RawMeta<typeof CardControlContainer>;
|
|
4
|
+
type Story = RawStory<typeof CardControlContainer>;
|
|
5
|
+
declare const meta: Meta;
|
|
6
|
+
export declare const Basic: Story;
|
|
7
|
+
export default meta;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* @group React コンポーネント
|
|
4
|
+
* @category React コンポーネント
|
|
5
|
+
*/
|
|
6
|
+
export declare const CardHeadnote: import("react").ForwardRefExoticComponent<import("../../../modules/data").DataProps<string> & {
|
|
7
|
+
className?: string | undefined; /** */
|
|
8
|
+
id?: string | undefined;
|
|
9
|
+
style?: import("react").CSSProperties | undefined;
|
|
10
|
+
} & {
|
|
11
|
+
/** */
|
|
12
|
+
className?: string | undefined;
|
|
13
|
+
/** */
|
|
14
|
+
children?: ReactNode;
|
|
15
|
+
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Meta as RawMeta, StoryObj as RawStory } from "@storybook/react";
|
|
2
|
+
import { CardHeadnote } from "../../../components";
|
|
3
|
+
type Meta = RawMeta<typeof CardHeadnote>;
|
|
4
|
+
type Story = RawStory<typeof CardHeadnote>;
|
|
5
|
+
declare const meta: Meta;
|
|
6
|
+
export declare const Basic: Story;
|
|
7
|
+
export default meta;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* @group React コンポーネント
|
|
4
|
+
* @category React コンポーネント
|
|
5
|
+
*/
|
|
6
|
+
export declare const CardTitle: import("react").ForwardRefExoticComponent<import("../../../modules/data").DataProps<string> & {
|
|
7
|
+
className?: string | undefined;
|
|
8
|
+
id?: string | undefined;
|
|
9
|
+
style?: import("react").CSSProperties | undefined;
|
|
10
|
+
} & {
|
|
11
|
+
/**
|
|
12
|
+
* 使用する HTML タグの名前。
|
|
13
|
+
* @defaultValue `"h3"`
|
|
14
|
+
*/
|
|
15
|
+
as?: keyof JSX.IntrinsicElements | undefined;
|
|
16
|
+
/**
|
|
17
|
+
* 最大行数。
|
|
18
|
+
* @defaultValue `4`
|
|
19
|
+
*/
|
|
20
|
+
maxLineHeight?: number | undefined;
|
|
21
|
+
/** */
|
|
22
|
+
className?: string | undefined;
|
|
23
|
+
/** */
|
|
24
|
+
children?: ReactNode;
|
|
25
|
+
} & import("react").RefAttributes<HTMLElement>>;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Meta as RawMeta, StoryObj as RawStory } from "@storybook/react";
|
|
2
|
+
import { CardTitle } from "../../../components";
|
|
3
|
+
type Meta = RawMeta<typeof CardTitle>;
|
|
4
|
+
type Story = RawStory<typeof CardTitle>;
|
|
5
|
+
declare const meta: Meta;
|
|
6
|
+
export declare const Basic: Story;
|
|
7
|
+
export default meta;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { MouseEvent } from "react";
|
|
2
|
+
type ContextValue = {
|
|
3
|
+
isLabel: boolean;
|
|
4
|
+
href?: string;
|
|
5
|
+
onClick?: (event: MouseEvent<HTMLElement>) => unknown;
|
|
6
|
+
setHovered: (isHovered: boolean) => unknown;
|
|
7
|
+
setFocusVisible: (isFocusVisible: boolean) => unknown;
|
|
8
|
+
};
|
|
9
|
+
export declare const context: import("react").Context<ContextValue>;
|
|
10
|
+
export declare const Provider: import("react").Provider<ContextValue>;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* ### カードリスト
|
|
4
|
+
*
|
|
5
|
+
* #### `CardListAuto` について
|
|
6
|
+
* 多くの場合で、[`CardListAuto`](/docs/modules-CardList-CardListAuto--ドキュメント) 専用コンポーネントを利用する方が便利です。
|
|
7
|
+
* ローディング非表示やページ管理などを自動で行ってくれます。
|
|
8
|
+
* 詳細は [`CardListAuto`](/docs/modules-CardList-CardListAuto--ドキュメント) のドキュメントを参照してください。
|
|
9
|
+
*
|
|
10
|
+
* #### 構成
|
|
11
|
+
* 以下のようなコンポーネント構成で利用してください。
|
|
12
|
+
* - **`CardList`**
|
|
13
|
+
* - [`CardListHeader`](/docs/modules-CardList-CardListHeader--ドキュメント) (任意)
|
|
14
|
+
* - [`CardListHeaderLeft`](/docs/modules-CardList-CardListHeaderLeft--ドキュメント) (任意)
|
|
15
|
+
* - [`CardListHeaderRight`](/docs/modules-CardList-CardListHeaderRight--ドキュメント) (任意)
|
|
16
|
+
* - [`CardListBody`](/docs/modules-CardList-CardListBody--ドキュメント)
|
|
17
|
+
* - [`Card`](/docs/modules-Card-Card--ドキュメント) (複数個)
|
|
18
|
+
* - [`CardListLoading`](/docs/modules-CardList-CardListLoading--ドキュメント) (任意)
|
|
19
|
+
* - [`CardListEmpty`](/docs/modules-CardList-CardListEmpty--ドキュメント) (任意)
|
|
20
|
+
* - [`CardListFooter`](/docs/modules-CardList-CardListFooter--ドキュメント) (任意)
|
|
21
|
+
* - `Pagination` などの要素 (任意)
|
|
22
|
+
*
|
|
23
|
+
* #### 例
|
|
24
|
+
* 以下は全ての要素を配置した場合の例です。
|
|
25
|
+
* 実際には全てを配置する場面は少ないため、場面に応じて不要なものは省略してください。
|
|
26
|
+
*
|
|
27
|
+
* ```tsx
|
|
28
|
+
* <CardList>
|
|
29
|
+
* <CardListHeader>
|
|
30
|
+
* <CardListHeaderLeft>
|
|
31
|
+
* (リストの上の左側に表示する要素)
|
|
32
|
+
* </CardListHeaderLeft>
|
|
33
|
+
* <CardListHeaderRight>
|
|
34
|
+
* (リストの上の右側に表示する要素)
|
|
35
|
+
* </CardListHeaderRight>
|
|
36
|
+
* </CardListHeader>
|
|
37
|
+
* <CardListBody>
|
|
38
|
+
* <Card/>
|
|
39
|
+
* </CardListBody>
|
|
40
|
+
* <CardListFooter>
|
|
41
|
+
* <Pagination page={1} pageCount={1}/>
|
|
42
|
+
* </CardListFooter>
|
|
43
|
+
* </CardList>
|
|
44
|
+
* ```
|
|
45
|
+
*
|
|
46
|
+
* `CardListBody` コンポーネントの子要素には、通常は `Card` コンポーネントを複数個置きますが、代わりに `CardListLoading` や `CardListEmpty` を置くこともできます。
|
|
47
|
+
* これにより、ローディング中の表示や該当項目がない場合の表示を行うことができます。
|
|
48
|
+
*
|
|
49
|
+
* ```tsx
|
|
50
|
+
* <CardList>
|
|
51
|
+
* ⋮
|
|
52
|
+
* <CardListBody>
|
|
53
|
+
* <CardListLoading/>
|
|
54
|
+
* </CardListBody>
|
|
55
|
+
* ⋮
|
|
56
|
+
* </CardList>
|
|
57
|
+
* ```
|
|
58
|
+
*
|
|
59
|
+
* #### 専用コンポーネント
|
|
60
|
+
* - [`CardListAuto`](/docs/modules-CardList-CardListAuto--ドキュメント) — ローディング非表示やページ管理などを自動で行う便利なバージョン
|
|
61
|
+
* @group React コンポーネント
|
|
62
|
+
* @category React コンポーネント
|
|
63
|
+
*/
|
|
64
|
+
export declare const CardList: import("react").ForwardRefExoticComponent<import("../../../modules/data").DataProps<string> & {
|
|
65
|
+
className?: string | undefined;
|
|
66
|
+
id?: string | undefined;
|
|
67
|
+
style?: import("react").CSSProperties | undefined;
|
|
68
|
+
} & {
|
|
69
|
+
/** */
|
|
70
|
+
className?: string | undefined;
|
|
71
|
+
/** */
|
|
72
|
+
children?: ReactNode;
|
|
73
|
+
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Meta as RawMeta, StoryObj as RawStory } from "@storybook/react";
|
|
2
|
+
import { CardList } from "../../../components";
|
|
3
|
+
type Meta = RawMeta<typeof CardList>;
|
|
4
|
+
type Story = RawStory<typeof CardList>;
|
|
5
|
+
declare const meta: Meta;
|
|
6
|
+
export declare const Basic: Story;
|
|
7
|
+
export default meta;
|
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
import { Dispatch, ReactNode, RefAttributes, SetStateAction } from "react";
|
|
2
|
+
import { GenericFunctionComponent } from "../../../utils/types";
|
|
3
|
+
type CardListAutoProps<T> = {
|
|
4
|
+
/** */
|
|
5
|
+
items: Array<T> | undefined;
|
|
6
|
+
/** */
|
|
7
|
+
pageProps: PageProps;
|
|
8
|
+
/** */
|
|
9
|
+
className?: string;
|
|
10
|
+
/** */
|
|
11
|
+
children?: ReactNode;
|
|
12
|
+
};
|
|
13
|
+
export type PageProps = {
|
|
14
|
+
/**
|
|
15
|
+
* 現在表示しているページ番号 (0 始まり)。
|
|
16
|
+
*/
|
|
17
|
+
page?: number;
|
|
18
|
+
/**
|
|
19
|
+
* ページの総数。
|
|
20
|
+
*/
|
|
21
|
+
pageCount?: number;
|
|
22
|
+
/**
|
|
23
|
+
* 1 ページに表示する項目の数。
|
|
24
|
+
*/
|
|
25
|
+
pageSize?: number;
|
|
26
|
+
/**
|
|
27
|
+
* ページの項目数として選択できる選択肢の配列。
|
|
28
|
+
*/
|
|
29
|
+
optionPageSizes: Array<number>;
|
|
30
|
+
/** */
|
|
31
|
+
setPage?: Dispatch<SetStateAction<number>>;
|
|
32
|
+
/** */
|
|
33
|
+
setPageSize?: Dispatch<SetStateAction<number>>;
|
|
34
|
+
};
|
|
35
|
+
type CardListAutoComponent = GenericFunctionComponent<(<T>(props: CardListAutoProps<T>) => ReactNode)> & RefAttributes<HTMLDivElement>;
|
|
36
|
+
/**
|
|
37
|
+
* ### カードリスト (自動)
|
|
38
|
+
*
|
|
39
|
+
* #### 構成
|
|
40
|
+
* 以下のようなコンポーネント構成で利用してください。
|
|
41
|
+
* - **`CardListAuto`**
|
|
42
|
+
* - [`CardListHeader`](/docs/modules-CardList-CardListHeader--ドキュメント) (任意)
|
|
43
|
+
* - [`CardListHeaderLeft`](/docs/modules-CardList-CardListHeaderLeft--ドキュメント) (任意)
|
|
44
|
+
* - [`CardListHeaderRight`](/docs/modules-CardList-CardListHeaderRight--ドキュメント) (任意)
|
|
45
|
+
* - [`Select.PageSizeAuto`](/docs/atoms-Select-Select-PageSizeAuto--ドキュメント) (任意)
|
|
46
|
+
* - [`CardListBodyAuto`](/docs/modules-CardList-CardListBody-Auto--ドキュメント)
|
|
47
|
+
* - `Card` を描画するレンダー関数
|
|
48
|
+
* - [`CardListLoading`](/docs/modules-CardList-CardListLoading--ドキュメント) (任意)
|
|
49
|
+
* - [`CardListEmpty`](/docs/modules-CardList-CardListEmpty--ドキュメント) (任意)
|
|
50
|
+
* - [`CardListFooterAuto`](/docs/modules-CardList-CardListFooter-Auto--ドキュメント) (任意)
|
|
51
|
+
* - [`PaginationAuto`](/docs/modules-Pagination-PaginationFooter-Auto--ドキュメント) (任意)
|
|
52
|
+
*
|
|
53
|
+
* #### ページングの非制御/制御
|
|
54
|
+
* ページングの方法には、非制御と制御の 2 種類あります。
|
|
55
|
+
*
|
|
56
|
+
* 非制御用法では、ページングに関する処理を全て `CardListAuto` に任せます。
|
|
57
|
+
* 1 ページの項目数や現在のページ番号を管理したり、ページ番号に応じて全体のデータから表示する部分だけを抜き出したりなどは、全て `CardListAuto` が内部で行ってくれます。
|
|
58
|
+
* 以下の手順を行うコードを書いてください。
|
|
59
|
+
*
|
|
60
|
+
* 1. API を叩くなどして全体の項目データを取得する
|
|
61
|
+
* 2. 1 ページに表示する項目数の選択肢 (`optionPageSizes`) を決める
|
|
62
|
+
* 3. 以上のデータを props に渡す
|
|
63
|
+
* - `items` — 全体の項目データ
|
|
64
|
+
* - `pageProps` — `optionPageSizes` のみ
|
|
65
|
+
*
|
|
66
|
+
* 以下の例では、非制御用法でクイズのカードリストを表示します。
|
|
67
|
+
*
|
|
68
|
+
* ```tsx
|
|
69
|
+
* const [quizzes] = useApi(getQuizzes, [quizIds]); // 全体を API から取得
|
|
70
|
+
*
|
|
71
|
+
* const optionPageSizes = [50, 100, 200]; // 1 ページの項目数の選択肢
|
|
72
|
+
* const pageProps = {
|
|
73
|
+
* optionPageSizes
|
|
74
|
+
* };
|
|
75
|
+
*
|
|
76
|
+
* return (
|
|
77
|
+
* <CardListAuto items={quizzes} pageProps={pageProps}>
|
|
78
|
+
* <CardListHeader>
|
|
79
|
+
* <CardListHeaderLeft/>
|
|
80
|
+
* <CardListHeaderRight>
|
|
81
|
+
* <PageSizeSelectAuto/>
|
|
82
|
+
* </CardListHeaderRight>
|
|
83
|
+
* </CardListHeader>
|
|
84
|
+
* <CardListBodyAuto>
|
|
85
|
+
* {(quiz) => (
|
|
86
|
+
* <Card key={quiz.id}>
|
|
87
|
+
* …
|
|
88
|
+
* </Card>
|
|
89
|
+
* )}
|
|
90
|
+
* <CardListLoading/>
|
|
91
|
+
* <CardListEmpty/>
|
|
92
|
+
* </CardListBodyAuto>
|
|
93
|
+
* <CardListFooterAuto>
|
|
94
|
+
* <PaginationAuto/>
|
|
95
|
+
* </CardListFooterAuto>
|
|
96
|
+
* </CardListAuto>
|
|
97
|
+
* );
|
|
98
|
+
* ```
|
|
99
|
+
*
|
|
100
|
+
* 制御用法では、ページングに関するデータを `CardListAuto` の外側で管理します。
|
|
101
|
+
* 1 ページの項目数や現在のページ番号を自前で管理するため、全体の一部分のみを取得するよう API にリクエストを送ることができるようになり、不必要なデータを受信する必要がなくなります。
|
|
102
|
+
* 以下の手順を行うコードを書いてください。
|
|
103
|
+
*
|
|
104
|
+
* 1. 次の 2 つのステートを用意する
|
|
105
|
+
* - 1 ページの項目数を保持するステート (`pageSize`, `setPageSize`)
|
|
106
|
+
* - 現在のページ番号を保持するステート (`page`, `setPage`)
|
|
107
|
+
* 2. API を叩くなどして次の情報を取得する
|
|
108
|
+
* - 現在のページに表示する項目データ
|
|
109
|
+
* - 全体の総項目数
|
|
110
|
+
* 3. ページの総数 (`pageCount`) を計算する
|
|
111
|
+
* 4. 1 ページに表示する項目数の選択肢 (`optionPageSizes`) を決める
|
|
112
|
+
* 5. 以上のデータを props に渡す
|
|
113
|
+
* - `items` — 現在のページに表示する項目データ
|
|
114
|
+
* - `pageProps` — `pageSize`, `setPageSize`, `page`, `setPage`, `pageCount`, `optionPageSizes`
|
|
115
|
+
*
|
|
116
|
+
* 以下の例では、制御用法でクイズのカードリストを表示します。
|
|
117
|
+
*
|
|
118
|
+
* ```tsx
|
|
119
|
+
* const [pageSize, setPageSize] = useState(50); // 1 ページの項目数
|
|
120
|
+
* const [page, setPage] = useState(0); // ページ番号
|
|
121
|
+
* const skip = page * pageSize;
|
|
122
|
+
* const limit = pageSize;
|
|
123
|
+
* const [[hitQuizzes, hitCount] = []] = useApi(listQuizzes, [{skip, limit}], {keepPreviousData: true}); // 一部のみを API から取得
|
|
124
|
+
*
|
|
125
|
+
* const pageCount = hitCount != null ? Math.floor((hitCount - 1) / pageSize) + 1 : 0;
|
|
126
|
+
* const optionPageSizes = [50, 100, 200]; // 1 ページの項目数の選択肢
|
|
127
|
+
* const pageProps = {
|
|
128
|
+
* page,
|
|
129
|
+
* pageCount,
|
|
130
|
+
* pageSize,
|
|
131
|
+
* optionPageSizes,
|
|
132
|
+
* setPage,
|
|
133
|
+
* setPageSize
|
|
134
|
+
* };
|
|
135
|
+
*
|
|
136
|
+
* return (
|
|
137
|
+
* <CardListAuto items={hitQuizzes} pageProps={pageProps}>
|
|
138
|
+
* <CardListHeader>
|
|
139
|
+
* <CardListHeaderLeft/>
|
|
140
|
+
* <CardListHeaderRight>
|
|
141
|
+
* <PageSizeSelectAuto/>
|
|
142
|
+
* </CardListHeaderRight>
|
|
143
|
+
* </CardListHeader>
|
|
144
|
+
* <CardListBodyAuto>
|
|
145
|
+
* {(quiz) => (
|
|
146
|
+
* <Card key={quiz.id}>
|
|
147
|
+
* …
|
|
148
|
+
* </Card>
|
|
149
|
+
* )}
|
|
150
|
+
* <CardListLoading/>
|
|
151
|
+
* <CardListEmpty/>
|
|
152
|
+
* </CardListBodyAuto>
|
|
153
|
+
* <CardListFooterAuto>
|
|
154
|
+
* <PaginationAuto/>
|
|
155
|
+
* </CardListFooterAuto>
|
|
156
|
+
* </CardListAuto>
|
|
157
|
+
* );
|
|
158
|
+
* ```
|
|
159
|
+
* @group React コンポーネント
|
|
160
|
+
* @category React コンポーネント
|
|
161
|
+
*/
|
|
162
|
+
export declare const CardListAuto: CardListAutoComponent;
|
|
163
|
+
export {};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { Dispatch, SetStateAction } from "react";
|
|
2
|
+
import type { PageProps } from "./cardListAuto";
|
|
3
|
+
export type ResolvedPageProps = {
|
|
4
|
+
isLoading: boolean;
|
|
5
|
+
isEmpty: boolean;
|
|
6
|
+
page: number;
|
|
7
|
+
pageCount: number;
|
|
8
|
+
pageSize: number;
|
|
9
|
+
optionPageSizes: Array<number>;
|
|
10
|
+
setPage: Dispatch<SetStateAction<number>>;
|
|
11
|
+
setPageSize: Dispatch<SetStateAction<number>>;
|
|
12
|
+
};
|
|
13
|
+
export declare const usePage: <T extends unknown>(rawItems: readonly T[] | undefined, { page, pageCount, pageSize, optionPageSizes, setPage, setPageSize }: PageProps) => [readonly T[], ResolvedPageProps];
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
import { ResponsiveValue } from "../../../modules/responsive";
|
|
3
|
+
/**
|
|
4
|
+
* @group React コンポーネント
|
|
5
|
+
* @category React コンポーネント
|
|
6
|
+
*/
|
|
7
|
+
export declare const CardListBody: import("react").ForwardRefExoticComponent<import("../../../modules/data").DataProps<string> & {
|
|
8
|
+
className?: string | undefined;
|
|
9
|
+
id?: string | undefined;
|
|
10
|
+
style?: import("react").CSSProperties | undefined;
|
|
11
|
+
} & {
|
|
12
|
+
/**
|
|
13
|
+
* 1 行に表示するカードの枚数。
|
|
14
|
+
* @defaultValue `1`
|
|
15
|
+
*/
|
|
16
|
+
columnCount?: number | ResponsiveValue<number> | undefined;
|
|
17
|
+
/** */
|
|
18
|
+
className?: string | undefined;
|
|
19
|
+
/** */
|
|
20
|
+
children?: ReactNode;
|
|
21
|
+
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Meta as RawMeta, StoryObj as RawStory } from "@storybook/react";
|
|
2
|
+
import { CardListBody } from "../../../components";
|
|
3
|
+
type Meta = RawMeta<typeof CardListBody>;
|
|
4
|
+
type Story = RawStory<typeof CardListBody>;
|
|
5
|
+
declare const meta: Meta;
|
|
6
|
+
export declare const Basic: Story;
|
|
7
|
+
export default meta;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { ReactElement, ReactNode } from "react";
|
|
2
|
+
import { ResponsiveValue } from "../../../modules/responsive";
|
|
3
|
+
import { GenericFunctionComponent } from "../../../utils/types";
|
|
4
|
+
type CardListBodyAutoProps<T> = {
|
|
5
|
+
/**
|
|
6
|
+
* 1 行に表示するカードの枚数。
|
|
7
|
+
* @defaultValue `1`
|
|
8
|
+
*/
|
|
9
|
+
columnCount?: number | ResponsiveValue<number>;
|
|
10
|
+
/** */
|
|
11
|
+
className?: string;
|
|
12
|
+
/**
|
|
13
|
+
* カードのレンダー関数, `CardListEmpty`, `CardListLoading` を 1 つずつ指定してください。
|
|
14
|
+
* `CardListEmpty` と `CardListLoading` は省略可能です。
|
|
15
|
+
*/
|
|
16
|
+
children: ((item: any, index: number) => ReactNode) | [(item: any, index: number) => ReactNode, ...Array<ReactElement>];
|
|
17
|
+
};
|
|
18
|
+
type CardListBodyAutoComponent = GenericFunctionComponent<(<T>(props: CardListBodyAutoProps<T>) => ReactElement)>;
|
|
19
|
+
/**
|
|
20
|
+
* @group React コンポーネント
|
|
21
|
+
* @category React コンポーネント
|
|
22
|
+
*/
|
|
23
|
+
export declare const CardListBodyAuto: CardListBodyAutoComponent;
|
|
24
|
+
export {};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* @group React コンポーネント
|
|
4
|
+
* @category React コンポーネント
|
|
5
|
+
*/
|
|
6
|
+
export declare const CardListEmpty: import("react").ForwardRefExoticComponent<import("../../../modules/data").DataProps<string> & {
|
|
7
|
+
className?: string | undefined;
|
|
8
|
+
id?: string | undefined;
|
|
9
|
+
style?: import("react").CSSProperties | undefined;
|
|
10
|
+
} & {
|
|
11
|
+
/** */
|
|
12
|
+
className?: string | undefined;
|
|
13
|
+
/**
|
|
14
|
+
* アイコンの下に表示するテキスト。
|
|
15
|
+
* @defaultValue 「該当するデータがありません」を設定言語にローカライズした文字列
|
|
16
|
+
*/
|
|
17
|
+
children?: ReactNode;
|
|
18
|
+
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Meta as RawMeta, StoryObj as RawStory } from "@storybook/react";
|
|
2
|
+
import { CardListEmpty } from "../../../components";
|
|
3
|
+
type Meta = RawMeta<typeof CardListEmpty>;
|
|
4
|
+
type Story = RawStory<typeof CardListEmpty>;
|
|
5
|
+
declare const meta: Meta;
|
|
6
|
+
export declare const Basic: Story;
|
|
7
|
+
export default meta;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
type CardListFooterProps = {
|
|
3
|
+
/** */
|
|
4
|
+
className?: string;
|
|
5
|
+
/** */
|
|
6
|
+
children?: ReactNode;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* @group React コンポーネント
|
|
10
|
+
* @category React コンポーネント
|
|
11
|
+
*/
|
|
12
|
+
export declare const CardListFooter: import("react").ForwardRefExoticComponent<CardListFooterProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
13
|
+
export {};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Meta as RawMeta, StoryObj as RawStory } from "@storybook/react";
|
|
2
|
+
import { CardListFooter } from "../../../components";
|
|
3
|
+
type Meta = RawMeta<typeof CardListFooter>;
|
|
4
|
+
type Story = RawStory<typeof CardListFooter>;
|
|
5
|
+
declare const meta: Meta;
|
|
6
|
+
export declare const Basic: Story;
|
|
7
|
+
export default meta;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
type CardListFooterAutoProps = {
|
|
3
|
+
/** */
|
|
4
|
+
className?: string;
|
|
5
|
+
/** */
|
|
6
|
+
children?: ReactNode;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* @group React コンポーネント
|
|
10
|
+
* @category React コンポーネント
|
|
11
|
+
*/
|
|
12
|
+
export declare const CardListFooterAuto: import("react").ForwardRefExoticComponent<CardListFooterAutoProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
13
|
+
export {};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* @group React コンポーネント
|
|
4
|
+
* @category React コンポーネント
|
|
5
|
+
*/
|
|
6
|
+
export declare const CardListHeader: import("react").ForwardRefExoticComponent<import("../../../modules/data").DataProps<string> & {
|
|
7
|
+
className?: string | undefined;
|
|
8
|
+
id?: string | undefined;
|
|
9
|
+
style?: import("react").CSSProperties | undefined;
|
|
10
|
+
} & {
|
|
11
|
+
/** */
|
|
12
|
+
className?: string | undefined;
|
|
13
|
+
/** */
|
|
14
|
+
children?: ReactNode;
|
|
15
|
+
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Meta as RawMeta, StoryObj as RawStory } from "@storybook/react";
|
|
2
|
+
import { CardListHeader } from "../../../components";
|
|
3
|
+
type Meta = RawMeta<typeof CardListHeader>;
|
|
4
|
+
type Story = RawStory<typeof CardListHeader>;
|
|
5
|
+
declare const meta: Meta;
|
|
6
|
+
export declare const Basic: Story;
|
|
7
|
+
export default meta;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* @group React コンポーネント
|
|
4
|
+
* @category React コンポーネント
|
|
5
|
+
*/
|
|
6
|
+
export declare const CardListHeaderLeft: import("react").ForwardRefExoticComponent<import("../../../modules/data").DataProps<string> & {
|
|
7
|
+
className?: string | undefined;
|
|
8
|
+
id?: string | undefined;
|
|
9
|
+
style?: import("react").CSSProperties | undefined;
|
|
10
|
+
} & {
|
|
11
|
+
/** */
|
|
12
|
+
className?: string | undefined;
|
|
13
|
+
/** */
|
|
14
|
+
children?: ReactNode;
|
|
15
|
+
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Meta as RawMeta, StoryObj as RawStory } from "@storybook/react";
|
|
2
|
+
import { CardListHeaderLeft } from "../../../components";
|
|
3
|
+
type Meta = RawMeta<typeof CardListHeaderLeft>;
|
|
4
|
+
type Story = RawStory<typeof CardListHeaderLeft>;
|
|
5
|
+
declare const meta: Meta;
|
|
6
|
+
export declare const Basic: Story;
|
|
7
|
+
export default meta;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* @group React コンポーネント
|
|
4
|
+
* @category React コンポーネント
|
|
5
|
+
*/
|
|
6
|
+
export declare const CardListHeaderRight: import("react").ForwardRefExoticComponent<import("../../../modules/data").DataProps<string> & {
|
|
7
|
+
className?: string | undefined;
|
|
8
|
+
id?: string | undefined;
|
|
9
|
+
style?: import("react").CSSProperties | undefined;
|
|
10
|
+
} & {
|
|
11
|
+
/** */
|
|
12
|
+
className?: string | undefined;
|
|
13
|
+
/** */
|
|
14
|
+
children?: ReactNode;
|
|
15
|
+
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Meta as RawMeta, StoryObj as RawStory } from "@storybook/react";
|
|
2
|
+
import { CardListHeaderRight } from "../../../components";
|
|
3
|
+
type Meta = RawMeta<typeof CardListHeaderRight>;
|
|
4
|
+
type Story = RawStory<typeof CardListHeaderRight>;
|
|
5
|
+
declare const meta: Meta;
|
|
6
|
+
export declare const Basic: Story;
|
|
7
|
+
export default meta;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* @group React コンポーネント
|
|
4
|
+
* @category React コンポーネント
|
|
5
|
+
*/
|
|
6
|
+
export declare const CardListLoading: import("react").ForwardRefExoticComponent<import("../../../modules/data").DataProps<string> & {
|
|
7
|
+
className?: string | undefined;
|
|
8
|
+
id?: string | undefined;
|
|
9
|
+
style?: import("react").CSSProperties | undefined;
|
|
10
|
+
} & {
|
|
11
|
+
/** */
|
|
12
|
+
className?: string | undefined;
|
|
13
|
+
/**
|
|
14
|
+
* アイコンの下に表示するテキスト。
|
|
15
|
+
* @defaultValue 「読み込み中」を設定言語にローカライズした文字列
|
|
16
|
+
*/
|
|
17
|
+
children?: ReactNode;
|
|
18
|
+
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Meta as RawMeta, StoryObj as RawStory } from "@storybook/react";
|
|
2
|
+
import { CardListLoading } from "../../../components";
|
|
3
|
+
type Meta = RawMeta<typeof CardListLoading>;
|
|
4
|
+
type Story = RawStory<typeof CardListLoading>;
|
|
5
|
+
declare const meta: Meta;
|
|
6
|
+
export declare const Basic: Story;
|
|
7
|
+
export default meta;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export * from "./cardList";
|
|
2
|
+
export * from "./cardListBody";
|
|
3
|
+
export * from "./cardListEmpty";
|
|
4
|
+
export * from "./cardListFooter";
|
|
5
|
+
export * from "./cardListHeader";
|
|
6
|
+
export * from "./cardListHeaderLeft";
|
|
7
|
+
export * from "./cardListHeaderRight";
|
|
8
|
+
export * from "./cardListLoading";
|
|
9
|
+
export * from "./cardListAuto";
|
|
10
|
+
export * from "./cardListBodyAuto";
|
|
11
|
+
export * from "./cardListFooterAuto";
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* @group React コンポーネント
|
|
4
|
+
* @category React コンポーネント
|
|
5
|
+
*/
|
|
6
|
+
export declare const ContentHeader: import("react").ForwardRefExoticComponent<import("../../../modules/data").DataProps<string> & {
|
|
7
|
+
className?: string | undefined;
|
|
8
|
+
/** */
|
|
9
|
+
id?: string | undefined;
|
|
10
|
+
style?: import("react").CSSProperties | undefined;
|
|
11
|
+
} & {
|
|
12
|
+
/** */
|
|
13
|
+
children?: ReactNode;
|
|
14
|
+
/** */
|
|
15
|
+
className?: string | undefined;
|
|
16
|
+
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Meta as RawMeta, StoryObj as RawStory } from "@storybook/react";
|
|
2
|
+
import { ContentHeader } from "../../../components";
|
|
3
|
+
type Meta = RawMeta<typeof ContentHeader>;
|
|
4
|
+
type Story = RawStory<typeof ContentHeader>;
|
|
5
|
+
declare const meta: Meta;
|
|
6
|
+
export declare const Basic: Story;
|
|
7
|
+
export declare const WithHeader: Story;
|
|
8
|
+
export default meta;
|