@jigowatts/jigowatts-ui 1.2.2 → 2.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/dist/components/Button/index.cjs.js.map +1 -1
- package/dist/components/Button/index.es.js.map +1 -1
- package/dist/components/Button/index.test.cjs.js +1 -1
- package/dist/components/Button/index.test.cjs.js.map +1 -1
- package/dist/components/Button/index.test.es.js +1 -1
- package/dist/components/Button/index.test.es.js.map +1 -1
- package/dist/components/Card/index.cjs.js.map +1 -1
- package/dist/components/Card/index.es.js.map +1 -1
- package/dist/components/Card/index.test.cjs.js +1 -1
- package/dist/components/Card/index.test.cjs.js.map +1 -1
- package/dist/components/Card/index.test.es.js +1 -1
- package/dist/components/Card/index.test.es.js.map +1 -1
- package/dist/components/CardWithTitle/index.cjs.js.map +1 -1
- package/dist/components/CardWithTitle/index.es.js.map +1 -1
- package/dist/components/CardWithTitle/index.test.cjs.js +1 -1
- package/dist/components/CardWithTitle/index.test.cjs.js.map +1 -1
- package/dist/components/CardWithTitle/index.test.es.js +2 -2
- package/dist/components/CardWithTitle/index.test.es.js.map +1 -1
- package/dist/components/CustomLink/index.cjs.js.map +1 -1
- package/dist/components/CustomLink/index.es.js.map +1 -1
- package/dist/components/CustomLink/index.test.cjs.js +1 -1
- package/dist/components/CustomLink/index.test.cjs.js.map +1 -1
- package/dist/components/CustomLink/index.test.es.js +2 -2
- package/dist/components/CustomLink/index.test.es.js.map +1 -1
- package/dist/components/DataTable/index.cjs.js.map +1 -1
- package/dist/components/DataTable/index.es.js.map +1 -1
- package/dist/components/DataTable/index.test.cjs.js +1 -1
- package/dist/components/DataTable/index.test.cjs.js.map +1 -1
- package/dist/components/DataTable/index.test.es.js +3 -3
- package/dist/components/DataTable/index.test.es.js.map +1 -1
- package/dist/components/DatePickerController/index.cjs.js.map +1 -1
- package/dist/components/DatePickerController/index.d.ts +1 -0
- package/dist/components/DatePickerController/index.es.js.map +1 -1
- package/dist/components/DatePickerController/index.test.cjs.js +1 -1
- package/dist/components/DatePickerController/index.test.cjs.js.map +1 -1
- package/dist/components/DatePickerController/index.test.es.js +1 -1
- package/dist/components/DatePickerController/index.test.es.js.map +1 -1
- package/dist/components/ErrorMessage/index.cjs.js.map +1 -1
- package/dist/components/ErrorMessage/index.es.js.map +1 -1
- package/dist/components/ErrorMessage/index.test.cjs.js +1 -1
- package/dist/components/ErrorMessage/index.test.cjs.js.map +1 -1
- package/dist/components/ErrorMessage/index.test.es.js +2 -2
- package/dist/components/ErrorMessage/index.test.es.js.map +1 -1
- package/dist/components/EvseStateLabel/index.cjs.js.map +1 -1
- package/dist/components/EvseStateLabel/index.es.js.map +1 -1
- package/dist/components/FlexButtons/index.cjs.js.map +1 -1
- package/dist/components/FlexButtons/index.es.js.map +1 -1
- package/dist/components/FlexButtons/index.test.cjs.js +1 -1
- package/dist/components/FlexButtons/index.test.cjs.js.map +1 -1
- package/dist/components/FlexButtons/index.test.es.js +2 -2
- package/dist/components/FlexButtons/index.test.es.js.map +1 -1
- package/dist/components/Form/index.cjs.js.map +1 -1
- package/dist/components/Form/index.es.js.map +1 -1
- package/dist/components/Form/index.test.cjs.js +1 -1
- package/dist/components/Form/index.test.cjs.js.map +1 -1
- package/dist/components/Form/index.test.es.js +2 -2
- package/dist/components/Form/index.test.es.js.map +1 -1
- package/dist/components/FormItem/index.cjs.js.map +1 -1
- package/dist/components/FormItem/index.es.js.map +1 -1
- package/dist/components/FormItem/index.test.cjs.js +1 -1
- package/dist/components/FormItem/index.test.cjs.js.map +1 -1
- package/dist/components/FormItem/index.test.es.js +2 -2
- package/dist/components/FormItem/index.test.es.js.map +1 -1
- package/dist/components/FormTitle/index.cjs.js.map +1 -1
- package/dist/components/FormTitle/index.es.js.map +1 -1
- package/dist/components/FormTitle/index.test.cjs.js +1 -1
- package/dist/components/FormTitle/index.test.cjs.js.map +1 -1
- package/dist/components/FormTitle/index.test.es.js +2 -2
- package/dist/components/FormTitle/index.test.es.js.map +1 -1
- package/dist/components/HStack/index.cjs.js.map +1 -1
- package/dist/components/HStack/index.es.js.map +1 -1
- package/dist/components/HStack/index.test.cjs.js +1 -1
- package/dist/components/HStack/index.test.cjs.js.map +1 -1
- package/dist/components/HStack/index.test.es.js +2 -2
- package/dist/components/HStack/index.test.es.js.map +1 -1
- package/dist/components/HtmlRenderer/index.cjs.js +1 -1
- package/dist/components/HtmlRenderer/index.es.js +1 -1
- package/dist/components/HtmlRenderer/index.test.cjs.js +1 -1
- package/dist/components/HtmlRenderer/index.test.cjs.js.map +1 -1
- package/dist/components/HtmlRenderer/index.test.es.js +2 -2
- package/dist/components/HtmlRenderer/index.test.es.js.map +1 -1
- package/dist/components/Input/index.cjs.js.map +1 -1
- package/dist/components/Input/index.es.js.map +1 -1
- package/dist/components/Input/index.test.cjs.js +1 -1
- package/dist/components/Input/index.test.cjs.js.map +1 -1
- package/dist/components/Input/index.test.es.js +1 -1
- package/dist/components/Input/index.test.es.js.map +1 -1
- package/dist/components/InputController/index.cjs.js.map +1 -1
- package/dist/components/InputController/index.es.js.map +1 -1
- package/dist/components/InputController/index.test.cjs.js +1 -1
- package/dist/components/InputController/index.test.cjs.js.map +1 -1
- package/dist/components/InputController/index.test.es.js +1 -1
- package/dist/components/InputController/index.test.es.js.map +1 -1
- package/dist/components/InputGroup/index.cjs.js.map +1 -1
- package/dist/components/InputGroup/index.es.js.map +1 -1
- package/dist/components/InputGroup/index.test.cjs.js +1 -1
- package/dist/components/InputGroup/index.test.cjs.js.map +1 -1
- package/dist/components/InputGroup/index.test.es.js +2 -2
- package/dist/components/InputGroup/index.test.es.js.map +1 -1
- package/dist/components/Label/index.cjs.js.map +1 -1
- package/dist/components/Label/index.es.js.map +1 -1
- package/dist/components/Label/index.test.cjs.js +1 -1
- package/dist/components/Label/index.test.cjs.js.map +1 -1
- package/dist/components/Label/index.test.es.js +2 -2
- package/dist/components/Label/index.test.es.js.map +1 -1
- package/dist/components/LabeledContent/index.cjs.js.map +1 -1
- package/dist/components/LabeledContent/index.es.js.map +1 -1
- package/dist/components/LabeledContent/index.test.cjs.js +1 -1
- package/dist/components/LabeledContent/index.test.cjs.js.map +1 -1
- package/dist/components/LabeledContent/index.test.es.js +1 -1
- package/dist/components/LabeledContent/index.test.es.js.map +1 -1
- package/dist/components/LoadingOverlay/index.cjs.js.map +1 -1
- package/dist/components/LoadingOverlay/index.es.js.map +1 -1
- package/dist/components/LoadingOverlay/index.test.cjs.js +1 -1
- package/dist/components/LoadingOverlay/index.test.cjs.js.map +1 -1
- package/dist/components/LoadingOverlay/index.test.es.js +2 -2
- package/dist/components/LoadingOverlay/index.test.es.js.map +1 -1
- package/dist/components/Map/index.cjs.js +2 -2
- package/dist/components/Map/index.cjs.js.map +1 -1
- package/dist/components/Map/index.es.js +709 -716
- package/dist/components/Map/index.es.js.map +1 -1
- package/dist/components/MaxWidthContainer/index.cjs.js.map +1 -1
- package/dist/components/MaxWidthContainer/index.es.js.map +1 -1
- package/dist/components/MaxWidthContainer/index.test.cjs.js +1 -1
- package/dist/components/MaxWidthContainer/index.test.cjs.js.map +1 -1
- package/dist/components/MaxWidthContainer/index.test.es.js +2 -2
- package/dist/components/MaxWidthContainer/index.test.es.js.map +1 -1
- package/dist/components/NumericFieldController/index.cjs.js.map +1 -1
- package/dist/components/NumericFieldController/index.d.ts +1 -0
- package/dist/components/NumericFieldController/index.es.js.map +1 -1
- package/dist/components/NumericFieldController/index.test.cjs.js +1 -1
- package/dist/components/NumericFieldController/index.test.cjs.js.map +1 -1
- package/dist/components/NumericFieldController/index.test.es.js +1 -1
- package/dist/components/NumericFieldController/index.test.es.js.map +1 -1
- package/dist/components/OfflineLabel/index.cjs.js.map +1 -1
- package/dist/components/OfflineLabel/index.es.js.map +1 -1
- package/dist/components/PageSizeSelector/index.cjs.js.map +1 -1
- package/dist/components/PageSizeSelector/index.es.js.map +1 -1
- package/dist/components/Pagination/index.cjs.js +2 -2
- package/dist/components/Pagination/index.cjs.js.map +1 -1
- package/dist/components/Pagination/index.es.js +17 -17
- package/dist/components/Pagination/index.es.js.map +1 -1
- package/dist/components/Pagination/index.test.cjs.js +1 -1
- package/dist/components/Pagination/index.test.cjs.js.map +1 -1
- package/dist/components/Pagination/index.test.es.js +1 -1
- package/dist/components/Pagination/index.test.es.js.map +1 -1
- package/dist/components/PasswordInputController/index.cjs.js.map +1 -1
- package/dist/components/PasswordInputController/index.es.js.map +1 -1
- package/dist/components/PasswordInputController/index.test.cjs.js +1 -1
- package/dist/components/PasswordInputController/index.test.cjs.js.map +1 -1
- package/dist/components/PasswordInputController/index.test.es.js +1 -1
- package/dist/components/PasswordInputController/index.test.es.js.map +1 -1
- package/dist/components/RadioButton/index.test.cjs.js +1 -1
- package/dist/components/RadioButton/index.test.cjs.js.map +1 -1
- package/dist/components/RadioButton/index.test.es.js +2 -2
- package/dist/components/RadioButton/index.test.es.js.map +1 -1
- package/dist/components/RadioGroupController/index.cjs.js.map +1 -1
- package/dist/components/RadioGroupController/index.es.js.map +1 -1
- package/dist/components/RadioGroupController/index.test.cjs.js +1 -1
- package/dist/components/RadioGroupController/index.test.cjs.js.map +1 -1
- package/dist/components/RadioGroupController/index.test.es.js +1 -1
- package/dist/components/RadioGroupController/index.test.es.js.map +1 -1
- package/dist/components/RangeDatePicker/index.cjs.js.map +1 -1
- package/dist/components/RangeDatePicker/index.es.js.map +1 -1
- package/dist/components/RangeDatePickerController/index.cjs.js.map +1 -1
- package/dist/components/RangeDatePickerController/index.es.js.map +1 -1
- package/dist/components/RangeDatePickerController/index.test.cjs.js +1 -1
- package/dist/components/RangeDatePickerController/index.test.cjs.js.map +1 -1
- package/dist/components/RangeDatePickerController/index.test.es.js +1 -1
- package/dist/components/RangeDatePickerController/index.test.es.js.map +1 -1
- package/dist/components/ReportCard/index.cjs.js.map +1 -1
- package/dist/components/ReportCard/index.es.js.map +1 -1
- package/dist/components/ReportCard/index.test.cjs.js +1 -1
- package/dist/components/ReportCard/index.test.cjs.js.map +1 -1
- package/dist/components/ReportCard/index.test.es.js +1 -1
- package/dist/components/ReportCard/index.test.es.js.map +1 -1
- package/dist/components/ReportChart/index.cjs.js.map +1 -1
- package/dist/components/ReportChart/index.es.js.map +1 -1
- package/dist/components/ReportChartMulti/index.cjs.js.map +1 -1
- package/dist/components/ReportChartMulti/index.es.js.map +1 -1
- package/dist/components/ReportChartMulti/index.test.cjs.js +1 -1
- package/dist/components/ReportChartMulti/index.test.cjs.js.map +1 -1
- package/dist/components/ReportChartMulti/index.test.es.js +1 -1
- package/dist/components/ReportChartMulti/index.test.es.js.map +1 -1
- package/dist/components/ScrollableDialog/index.cjs.js.map +1 -1
- package/dist/components/ScrollableDialog/index.es.js.map +1 -1
- package/dist/components/ScrollableDialog/index.test.cjs.js +1 -1
- package/dist/components/ScrollableDialog/index.test.cjs.js.map +1 -1
- package/dist/components/ScrollableDialog/index.test.es.js +1 -1
- package/dist/components/ScrollableDialog/index.test.es.js.map +1 -1
- package/dist/components/SearchForm/index.cjs.js.map +1 -1
- package/dist/components/SearchForm/index.es.js.map +1 -1
- package/dist/components/SelectBox/index.test.cjs.js +1 -1
- package/dist/components/SelectBox/index.test.cjs.js.map +1 -1
- package/dist/components/SelectBox/index.test.es.js +1 -1
- package/dist/components/SelectBox/index.test.es.js.map +1 -1
- package/dist/components/SelectBoxController/index.cjs.js.map +1 -1
- package/dist/components/SelectBoxController/index.es.js.map +1 -1
- package/dist/components/SelectBoxController/index.test.cjs.js +1 -1
- package/dist/components/SelectBoxController/index.test.cjs.js.map +1 -1
- package/dist/components/SelectBoxController/index.test.es.js +1 -1
- package/dist/components/SelectBoxController/index.test.es.js.map +1 -1
- package/dist/components/SideMenu/index.cjs.js.map +1 -1
- package/dist/components/SideMenu/index.es.js.map +1 -1
- package/dist/components/SideMenu/index.test.cjs.js +1 -1
- package/dist/components/SideMenu/index.test.cjs.js.map +1 -1
- package/dist/components/SideMenu/index.test.es.js +3 -3
- package/dist/components/SideMenu/index.test.es.js.map +1 -1
- package/dist/components/SpinnerButton/index.cjs.js.map +1 -1
- package/dist/components/SpinnerButton/index.es.js.map +1 -1
- package/dist/components/SpinnerButton/index.test.cjs.js +1 -1
- package/dist/components/SpinnerButton/index.test.cjs.js.map +1 -1
- package/dist/components/SpinnerButton/index.test.es.js +2 -2
- package/dist/components/SpinnerButton/index.test.es.js.map +1 -1
- package/dist/components/SubMenu/index.cjs.js.map +1 -1
- package/dist/components/SubMenu/index.es.js.map +1 -1
- package/dist/components/SubMenu/index.test.cjs.js +1 -1
- package/dist/components/SubMenu/index.test.cjs.js.map +1 -1
- package/dist/components/SubMenu/index.test.es.js +1 -1
- package/dist/components/SubMenu/index.test.es.js.map +1 -1
- package/dist/components/Tabs/index.cjs.js.map +1 -1
- package/dist/components/Tabs/index.d.ts +1 -1
- package/dist/components/Tabs/index.es.js.map +1 -1
- package/dist/components/Tabs/index.test.cjs.js +1 -1
- package/dist/components/Tabs/index.test.cjs.js.map +1 -1
- package/dist/components/Tabs/index.test.es.js +2 -2
- package/dist/components/Tabs/index.test.es.js.map +1 -1
- package/dist/components/Textarea/index.cjs.js.map +1 -1
- package/dist/components/Textarea/index.es.js.map +1 -1
- package/dist/components/Textarea/index.test.cjs.js +1 -1
- package/dist/components/Textarea/index.test.cjs.js.map +1 -1
- package/dist/components/Textarea/index.test.es.js +2 -2
- package/dist/components/Textarea/index.test.es.js.map +1 -1
- package/dist/components/Title/index.cjs.js.map +1 -1
- package/dist/components/Title/index.es.js.map +1 -1
- package/dist/components/Title/index.test.cjs.js +1 -1
- package/dist/components/Title/index.test.cjs.js.map +1 -1
- package/dist/components/Title/index.test.es.js +2 -2
- package/dist/components/Title/index.test.es.js.map +1 -1
- package/dist/components/ToggleButton/index.cjs.js.map +1 -1
- package/dist/components/ToggleButton/index.es.js.map +1 -1
- package/dist/components/ToggleButton/index.test.cjs.js +1 -1
- package/dist/components/ToggleButton/index.test.cjs.js.map +1 -1
- package/dist/components/ToggleButton/index.test.es.js +1 -1
- package/dist/components/ToggleButton/index.test.es.js.map +1 -1
- package/dist/components/VStack/index.cjs.js.map +1 -1
- package/dist/components/VStack/index.es.js.map +1 -1
- package/dist/components/VStack/index.test.cjs.js +1 -1
- package/dist/components/VStack/index.test.cjs.js.map +1 -1
- package/dist/components/VStack/index.test.es.js +2 -2
- package/dist/components/VStack/index.test.es.js.map +1 -1
- package/dist/{index-D5b3AasF.js → index--uHewOkd.js} +2 -2
- package/dist/{index-D5b3AasF.js.map → index--uHewOkd.js.map} +1 -1
- package/dist/index-9p9q0wxE.cjs +39 -0
- package/dist/index-9p9q0wxE.cjs.map +1 -0
- package/dist/index-B663CLQ0.cjs.map +1 -1
- package/dist/{index-C50NsnJO.cjs → index-Bbj4TMfJ.cjs} +2 -2
- package/dist/{index-C50NsnJO.cjs.map → index-Bbj4TMfJ.cjs.map} +1 -1
- package/dist/{index-ZP4xL6Dt.js → index-Bt_ypxrX.js} +7373 -6726
- package/dist/index-Bt_ypxrX.js.map +1 -0
- package/dist/index-C9Dbd7MM.cjs +4 -0
- package/dist/index-C9Dbd7MM.cjs.map +1 -0
- package/dist/index-CCbJ_2yU.cjs.map +1 -1
- package/dist/index-CSiE_l9r.js.map +1 -1
- package/dist/index-CaEC29Xt.cjs +96 -0
- package/dist/index-CaEC29Xt.cjs.map +1 -0
- package/dist/{index-DCSLk6pp.js → index-Cj9ZvtM1.js} +1890 -2721
- package/dist/index-Cj9ZvtM1.js.map +1 -0
- package/dist/index-pr0ncuNy.js.map +1 -1
- package/dist/{index-BqN32Ptm.js → index-zix1zlkq.js} +628 -602
- package/dist/index-zix1zlkq.js.map +1 -0
- package/dist/index.cjs.js +1 -1
- package/dist/index.es.js +1 -1
- package/dist/{react.esm-CiMn0Rnx.cjs → react.esm-BcRJ42eI.cjs} +31 -31
- package/dist/react.esm-BcRJ42eI.cjs.map +1 -0
- package/dist/{react.esm-2FJSSo-S.js → react.esm-DVhZgPrH.js} +629 -608
- package/dist/react.esm-DVhZgPrH.js.map +1 -0
- package/package.json +21 -18
- package/dist/browser-BCVsA9bD.cjs +0 -2
- package/dist/browser-BCVsA9bD.cjs.map +0 -1
- package/dist/browser-BYxLWVDg.js +0 -654
- package/dist/browser-BYxLWVDg.js.map +0 -1
- package/dist/index-BHsZ5xlA.cjs +0 -96
- package/dist/index-BHsZ5xlA.cjs.map +0 -1
- package/dist/index-BoNIpBs7.cjs +0 -4
- package/dist/index-BoNIpBs7.cjs.map +0 -1
- package/dist/index-BpMSrIOq.cjs +0 -43
- package/dist/index-BpMSrIOq.cjs.map +0 -1
- package/dist/index-BqN32Ptm.js.map +0 -1
- package/dist/index-DCSLk6pp.js.map +0 -1
- package/dist/index-ZP4xL6Dt.js.map +0 -1
- package/dist/react.esm-2FJSSo-S.js.map +0 -1
- package/dist/react.esm-CiMn0Rnx.cjs.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../src/components/Button/index.tsx"],"sourcesContent":["import {\n createTheme,\n Button as MuiButton,\n ButtonProps as MuiButtonProps,\n PaletteColorOptions,\n ThemeProvider,\n} from \"@mui/material\";\n\ndeclare module \"@mui/material/styles\" {\n interface CustomPalette {\n thirdly: PaletteColorOptions;\n normal: PaletteColorOptions;\n negative: PaletteColorOptions;\n }\n interface Palette extends CustomPalette {}\n interface PaletteOptions extends CustomPalette {}\n}\n\ndeclare module \"@mui/material/Button\" {\n interface ButtonPropsColorOverrides {\n thirdly: true;\n normal: true;\n negative: true;\n }\n}\n\nconst { palette } = createTheme();\nconst { augmentColor } = palette;\nconst createColor = (mainColor: string, contrastText: string = \"#fff\") =>\n augmentColor({ color: { main: mainColor, contrastText: contrastText } });\nconst theme = createTheme({\n palette: {\n primary: createColor(\"#6672E8\"),\n secondary: createColor(\"#00AD79\"),\n thirdly: createColor(\"#1E2D50\"),\n normal: createColor(\"#808181\"),\n negative: createColor(\"#CA0000\"),\n },\n});\n\ntype ButtonProps = MuiButtonProps & {\n color?:\n | \"primary\"\n | \"secondary\"\n | \"thirdly\"\n | \"normal\"\n | \"negative\"\n | \"error\"\n | \"warning\";\n};\n\n/** MuiButtonを継承したプロジェクトのテーマカラーを適用したボタンです。\n * primary, secondary, thirdly , normal, negative\n */\nexport const Button = (props: ButtonProps) => {\n const { children, color = \"primary\", ...buttonProps } = props;\n\n return (\n <ThemeProvider theme={theme}>\n <MuiButton {...buttonProps} color={color}>\n {children}\n </MuiButton>\n </ThemeProvider>\n );\n};\n\nexport default Button;\n"],"names":["palette","createTheme","augmentColor","createColor","mainColor","contrastText","theme","Button","props","children","color","buttonProps","jsx","ThemeProvider","MuiButton"],"mappings":"4KA0BM,CAAE,QAAAA,
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../src/components/Button/index.tsx"],"sourcesContent":["import {\n createTheme,\n Button as MuiButton,\n ButtonProps as MuiButtonProps,\n PaletteColorOptions,\n ThemeProvider,\n} from \"@mui/material\";\n\ndeclare module \"@mui/material/styles\" {\n interface CustomPalette {\n thirdly: PaletteColorOptions;\n normal: PaletteColorOptions;\n negative: PaletteColorOptions;\n }\n interface Palette extends CustomPalette {}\n interface PaletteOptions extends CustomPalette {}\n}\n\ndeclare module \"@mui/material/Button\" {\n interface ButtonPropsColorOverrides {\n thirdly: true;\n normal: true;\n negative: true;\n }\n}\n\nconst { palette } = createTheme();\nconst { augmentColor } = palette;\nconst createColor = (mainColor: string, contrastText: string = \"#fff\") =>\n augmentColor({ color: { main: mainColor, contrastText: contrastText } });\nconst theme = createTheme({\n palette: {\n primary: createColor(\"#6672E8\"),\n secondary: createColor(\"#00AD79\"),\n thirdly: createColor(\"#1E2D50\"),\n normal: createColor(\"#808181\"),\n negative: createColor(\"#CA0000\"),\n },\n});\n\ntype ButtonProps = MuiButtonProps & {\n color?:\n | \"primary\"\n | \"secondary\"\n | \"thirdly\"\n | \"normal\"\n | \"negative\"\n | \"error\"\n | \"warning\";\n};\n\n/** MuiButtonを継承したプロジェクトのテーマカラーを適用したボタンです。\n * primary, secondary, thirdly , normal, negative\n */\nexport const Button = (props: ButtonProps) => {\n const { children, color = \"primary\", ...buttonProps } = props;\n\n return (\n <ThemeProvider theme={theme}>\n <MuiButton {...buttonProps} color={color}>\n {children}\n </MuiButton>\n </ThemeProvider>\n );\n};\n\nexport default Button;\n"],"names":["palette","createTheme","augmentColor","createColor","mainColor","contrastText","theme","Button","props","children","color","buttonProps","jsx","ThemeProvider","MuiButton"],"mappings":"4KA0BM,CAAE,QAAAA,CAAA,EAAYC,cAAA,EACd,CAAE,aAAAC,GAAiBF,EACnBG,EAAc,CAACC,EAAmBC,EAAuB,SAC7DH,EAAa,CAAE,MAAO,CAAE,KAAME,EAAW,aAAAC,CAAA,EAA8B,EACnEC,EAAQL,EAAAA,YAAY,CACxB,QAAS,CACP,QAASE,EAAY,SAAS,EAC9B,UAAWA,EAAY,SAAS,EAChC,QAASA,EAAY,SAAS,EAC9B,OAAQA,EAAY,SAAS,EAC7B,SAAUA,EAAY,SAAS,CAAA,CAEnC,CAAC,EAgBYI,EAAUC,GAAuB,CAC5C,KAAM,CAAE,SAAAC,EAAU,MAAAC,EAAQ,UAAW,GAAGC,GAAgBH,EAExD,OACEI,EAAAA,IAACC,EAAAA,eAAc,MAAAP,EACb,SAAAM,EAAAA,IAACE,UAAW,GAAGH,EAAa,MAAAD,EACzB,SAAAD,CAAA,CACH,CAAA,CACF,CAEJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../../../src/components/Button/index.tsx"],"sourcesContent":["import {\n createTheme,\n Button as MuiButton,\n ButtonProps as MuiButtonProps,\n PaletteColorOptions,\n ThemeProvider,\n} from \"@mui/material\";\n\ndeclare module \"@mui/material/styles\" {\n interface CustomPalette {\n thirdly: PaletteColorOptions;\n normal: PaletteColorOptions;\n negative: PaletteColorOptions;\n }\n interface Palette extends CustomPalette {}\n interface PaletteOptions extends CustomPalette {}\n}\n\ndeclare module \"@mui/material/Button\" {\n interface ButtonPropsColorOverrides {\n thirdly: true;\n normal: true;\n negative: true;\n }\n}\n\nconst { palette } = createTheme();\nconst { augmentColor } = palette;\nconst createColor = (mainColor: string, contrastText: string = \"#fff\") =>\n augmentColor({ color: { main: mainColor, contrastText: contrastText } });\nconst theme = createTheme({\n palette: {\n primary: createColor(\"#6672E8\"),\n secondary: createColor(\"#00AD79\"),\n thirdly: createColor(\"#1E2D50\"),\n normal: createColor(\"#808181\"),\n negative: createColor(\"#CA0000\"),\n },\n});\n\ntype ButtonProps = MuiButtonProps & {\n color?:\n | \"primary\"\n | \"secondary\"\n | \"thirdly\"\n | \"normal\"\n | \"negative\"\n | \"error\"\n | \"warning\";\n};\n\n/** MuiButtonを継承したプロジェクトのテーマカラーを適用したボタンです。\n * primary, secondary, thirdly , normal, negative\n */\nexport const Button = (props: ButtonProps) => {\n const { children, color = \"primary\", ...buttonProps } = props;\n\n return (\n <ThemeProvider theme={theme}>\n <MuiButton {...buttonProps} color={color}>\n {children}\n </MuiButton>\n </ThemeProvider>\n );\n};\n\nexport default Button;\n"],"names":["palette","createTheme","augmentColor","createColor","mainColor","contrastText","theme","Button","props","children","color","buttonProps","jsx","ThemeProvider","MuiButton"],"mappings":";;AA0BA,MAAM,EAAE,SAAAA,
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../../../src/components/Button/index.tsx"],"sourcesContent":["import {\n createTheme,\n Button as MuiButton,\n ButtonProps as MuiButtonProps,\n PaletteColorOptions,\n ThemeProvider,\n} from \"@mui/material\";\n\ndeclare module \"@mui/material/styles\" {\n interface CustomPalette {\n thirdly: PaletteColorOptions;\n normal: PaletteColorOptions;\n negative: PaletteColorOptions;\n }\n interface Palette extends CustomPalette {}\n interface PaletteOptions extends CustomPalette {}\n}\n\ndeclare module \"@mui/material/Button\" {\n interface ButtonPropsColorOverrides {\n thirdly: true;\n normal: true;\n negative: true;\n }\n}\n\nconst { palette } = createTheme();\nconst { augmentColor } = palette;\nconst createColor = (mainColor: string, contrastText: string = \"#fff\") =>\n augmentColor({ color: { main: mainColor, contrastText: contrastText } });\nconst theme = createTheme({\n palette: {\n primary: createColor(\"#6672E8\"),\n secondary: createColor(\"#00AD79\"),\n thirdly: createColor(\"#1E2D50\"),\n normal: createColor(\"#808181\"),\n negative: createColor(\"#CA0000\"),\n },\n});\n\ntype ButtonProps = MuiButtonProps & {\n color?:\n | \"primary\"\n | \"secondary\"\n | \"thirdly\"\n | \"normal\"\n | \"negative\"\n | \"error\"\n | \"warning\";\n};\n\n/** MuiButtonを継承したプロジェクトのテーマカラーを適用したボタンです。\n * primary, secondary, thirdly , normal, negative\n */\nexport const Button = (props: ButtonProps) => {\n const { children, color = \"primary\", ...buttonProps } = props;\n\n return (\n <ThemeProvider theme={theme}>\n <MuiButton {...buttonProps} color={color}>\n {children}\n </MuiButton>\n </ThemeProvider>\n );\n};\n\nexport default Button;\n"],"names":["palette","createTheme","augmentColor","createColor","mainColor","contrastText","theme","Button","props","children","color","buttonProps","jsx","ThemeProvider","MuiButton"],"mappings":";;AA0BA,MAAM,EAAE,SAAAA,EAAA,IAAYC,EAAA,GACd,EAAE,cAAAC,MAAiBF,GACnBG,IAAc,CAACC,GAAmBC,IAAuB,WAC7DH,EAAa,EAAE,OAAO,EAAE,MAAME,GAAW,cAAAC,EAAA,GAA8B,GACnEC,IAAQL,EAAY;AAAA,EACxB,SAAS;AAAA,IACP,SAASE,EAAY,SAAS;AAAA,IAC9B,WAAWA,EAAY,SAAS;AAAA,IAChC,SAASA,EAAY,SAAS;AAAA,IAC9B,QAAQA,EAAY,SAAS;AAAA,IAC7B,UAAUA,EAAY,SAAS;AAAA,EAAA;AAEnC,CAAC,GAgBYI,IAAS,CAACC,MAAuB;AAC5C,QAAM,EAAE,UAAAC,GAAU,OAAAC,IAAQ,WAAW,GAAGC,MAAgBH;AAExD,SACE,gBAAAI,EAACC,KAAc,OAAAP,GACb,UAAA,gBAAAM,EAACE,KAAW,GAAGH,GAAa,OAAAD,GACzB,UAAAD,EAAA,CACH,EAAA,CACF;AAEJ;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const n=require("react/jsx-runtime"),e=require("../../react.esm-
|
|
1
|
+
"use strict";const n=require("react/jsx-runtime"),e=require("../../react.esm-BcRJ42eI.cjs"),o=require("./index.cjs.js");describe("Button",()=>{it("renders correctly",()=>{e.render(n.jsx(o.Button,{children:"Test Button"})),expect(e.screen.getByRole("button",{name:"Test Button"})).toBeInTheDocument()}),it("triggers event on click",()=>{const t=jest.fn();e.render(n.jsx(o.Button,{onClick:t,children:"Clickable"})),e.fireEvent.click(e.screen.getByText("Clickable")),expect(t).toHaveBeenCalledTimes(1)}),it("renders with the thirdly theme color",()=>{e.render(n.jsx(o.Button,{color:"thirdly",variant:"contained",children:"Test Button"}));const t=e.screen.getByRole("button",{name:/test button/i});expect(t).toBeInTheDocument(),expect(t).toHaveClass("MuiButton-containedThirdly")}),it("is disabled when the disabled prop is true",()=>{e.render(n.jsx(o.Button,{disabled:!0,children:"Disabled Button"}));const t=e.screen.getByRole("button",{name:/disabled button/i});expect(t).toBeDisabled()})});
|
|
2
2
|
//# sourceMappingURL=index.test.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.test.cjs.js","sources":["../../../src/components/Button/index.test.tsx"],"sourcesContent":["import { fireEvent, render, screen } from \"@testing-library/react\";\n\nimport { Button } from \".\";\n\ndescribe(\"Button\", () => {\n it(\"renders correctly\", () => {\n render(<Button>Test Button</Button>);\n expect(\n screen.getByRole(\"button\", { name: \"Test Button\" }),\n ).toBeInTheDocument();\n });\n\n it(\"triggers event on click\", () => {\n const handleClick = jest.fn();\n render(<Button onClick={handleClick}>Clickable</Button>);\n fireEvent.click(screen.getByText(\"Clickable\"));\n expect(handleClick).toHaveBeenCalledTimes(1);\n });\n it(\"renders with the thirdly theme color\", () => {\n render(\n <Button color=\"thirdly\" variant=\"contained\">\n Test Button\n </Button>,\n );\n const button = screen.getByRole(\"button\", { name: /test button/i });\n\n expect(button).toBeInTheDocument();\n\n expect(button).toHaveClass(\"MuiButton-containedThirdly\");\n });\n\n it(\"is disabled when the disabled prop is true\", () => {\n render(<Button disabled>Disabled Button</Button>);\n const button = screen.getByRole(\"button\", { name: /disabled button/i });\n expect(button).toBeDisabled();\n });\n});\n"],"names":["render","jsx","Button","screen","handleClick","fireEvent","button"],"mappings":"wHAIA,SAAS,SAAU,IAAM,CACvB,GAAG,oBAAqB,IAAM,
|
|
1
|
+
{"version":3,"file":"index.test.cjs.js","sources":["../../../src/components/Button/index.test.tsx"],"sourcesContent":["import { fireEvent, render, screen } from \"@testing-library/react\";\n\nimport { Button } from \".\";\n\ndescribe(\"Button\", () => {\n it(\"renders correctly\", () => {\n render(<Button>Test Button</Button>);\n expect(\n screen.getByRole(\"button\", { name: \"Test Button\" }),\n ).toBeInTheDocument();\n });\n\n it(\"triggers event on click\", () => {\n const handleClick = jest.fn();\n render(<Button onClick={handleClick}>Clickable</Button>);\n fireEvent.click(screen.getByText(\"Clickable\"));\n expect(handleClick).toHaveBeenCalledTimes(1);\n });\n it(\"renders with the thirdly theme color\", () => {\n render(\n <Button color=\"thirdly\" variant=\"contained\">\n Test Button\n </Button>,\n );\n const button = screen.getByRole(\"button\", { name: /test button/i });\n\n expect(button).toBeInTheDocument();\n\n expect(button).toHaveClass(\"MuiButton-containedThirdly\");\n });\n\n it(\"is disabled when the disabled prop is true\", () => {\n render(<Button disabled>Disabled Button</Button>);\n const button = screen.getByRole(\"button\", { name: /disabled button/i });\n expect(button).toBeDisabled();\n });\n});\n"],"names":["render","jsx","Button","screen","handleClick","fireEvent","button"],"mappings":"wHAIA,SAAS,SAAU,IAAM,CACvB,GAAG,oBAAqB,IAAM,CAC5BA,EAAAA,OAAOC,EAAAA,IAACC,EAAAA,OAAA,CAAO,SAAA,aAAA,CAAW,CAAS,EACnC,OACEC,EAAAA,OAAO,UAAU,SAAU,CAAE,KAAM,cAAe,CAAA,EAClD,kBAAA,CACJ,CAAC,EAED,GAAG,0BAA2B,IAAM,CAClC,MAAMC,EAAc,KAAK,GAAA,EACzBJ,SAAOC,EAAAA,IAACC,EAAAA,OAAA,CAAO,QAASE,EAAa,qBAAS,CAAS,EACvDC,EAAAA,UAAU,MAAMF,EAAAA,OAAO,UAAU,WAAW,CAAC,EAC7C,OAAOC,CAAW,EAAE,sBAAsB,CAAC,CAC7C,CAAC,EACD,GAAG,uCAAwC,IAAM,CAC/CJ,EAAAA,aACGE,EAAAA,OAAA,CAAO,MAAM,UAAU,QAAQ,YAAY,SAAA,aAAA,CAE5C,CAAA,EAEF,MAAMI,EAASH,EAAAA,OAAO,UAAU,SAAU,CAAE,KAAM,eAAgB,EAElE,OAAOG,CAAM,EAAE,kBAAA,EAEf,OAAOA,CAAM,EAAE,YAAY,4BAA4B,CACzD,CAAC,EAED,GAAG,6CAA8C,IAAM,CACrDN,SAAOC,EAAAA,IAACC,EAAAA,OAAA,CAAO,SAAQ,GAAC,2BAAe,CAAS,EAChD,MAAMI,EAASH,EAAAA,OAAO,UAAU,SAAU,CAAE,KAAM,mBAAoB,EACtE,OAAOG,CAAM,EAAE,aAAA,CACjB,CAAC,CACH,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as t } from "react/jsx-runtime";
|
|
2
|
-
import { r as n, s as o, f as r } from "../../react.esm-
|
|
2
|
+
import { r as n, s as o, f as r } from "../../react.esm-DVhZgPrH.js";
|
|
3
3
|
import { Button as i } from "./index.es.js";
|
|
4
4
|
describe("Button", () => {
|
|
5
5
|
it("renders correctly", () => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.test.es.js","sources":["../../../src/components/Button/index.test.tsx"],"sourcesContent":["import { fireEvent, render, screen } from \"@testing-library/react\";\n\nimport { Button } from \".\";\n\ndescribe(\"Button\", () => {\n it(\"renders correctly\", () => {\n render(<Button>Test Button</Button>);\n expect(\n screen.getByRole(\"button\", { name: \"Test Button\" }),\n ).toBeInTheDocument();\n });\n\n it(\"triggers event on click\", () => {\n const handleClick = jest.fn();\n render(<Button onClick={handleClick}>Clickable</Button>);\n fireEvent.click(screen.getByText(\"Clickable\"));\n expect(handleClick).toHaveBeenCalledTimes(1);\n });\n it(\"renders with the thirdly theme color\", () => {\n render(\n <Button color=\"thirdly\" variant=\"contained\">\n Test Button\n </Button>,\n );\n const button = screen.getByRole(\"button\", { name: /test button/i });\n\n expect(button).toBeInTheDocument();\n\n expect(button).toHaveClass(\"MuiButton-containedThirdly\");\n });\n\n it(\"is disabled when the disabled prop is true\", () => {\n render(<Button disabled>Disabled Button</Button>);\n const button = screen.getByRole(\"button\", { name: /disabled button/i });\n expect(button).toBeDisabled();\n });\n});\n"],"names":["render","jsx","Button","screen","handleClick","fireEvent","button"],"mappings":";;;AAIA,SAAS,UAAU,MAAM;AACvB,KAAG,qBAAqB,MAAM;
|
|
1
|
+
{"version":3,"file":"index.test.es.js","sources":["../../../src/components/Button/index.test.tsx"],"sourcesContent":["import { fireEvent, render, screen } from \"@testing-library/react\";\n\nimport { Button } from \".\";\n\ndescribe(\"Button\", () => {\n it(\"renders correctly\", () => {\n render(<Button>Test Button</Button>);\n expect(\n screen.getByRole(\"button\", { name: \"Test Button\" }),\n ).toBeInTheDocument();\n });\n\n it(\"triggers event on click\", () => {\n const handleClick = jest.fn();\n render(<Button onClick={handleClick}>Clickable</Button>);\n fireEvent.click(screen.getByText(\"Clickable\"));\n expect(handleClick).toHaveBeenCalledTimes(1);\n });\n it(\"renders with the thirdly theme color\", () => {\n render(\n <Button color=\"thirdly\" variant=\"contained\">\n Test Button\n </Button>,\n );\n const button = screen.getByRole(\"button\", { name: /test button/i });\n\n expect(button).toBeInTheDocument();\n\n expect(button).toHaveClass(\"MuiButton-containedThirdly\");\n });\n\n it(\"is disabled when the disabled prop is true\", () => {\n render(<Button disabled>Disabled Button</Button>);\n const button = screen.getByRole(\"button\", { name: /disabled button/i });\n expect(button).toBeDisabled();\n });\n});\n"],"names":["render","jsx","Button","screen","handleClick","fireEvent","button"],"mappings":";;;AAIA,SAAS,UAAU,MAAM;AACvB,KAAG,qBAAqB,MAAM;AAC5B,IAAAA,EAAO,gBAAAC,EAACC,GAAA,EAAO,UAAA,cAAA,CAAW,CAAS,GACnC;AAAA,MACEC,EAAO,UAAU,UAAU,EAAE,MAAM,eAAe;AAAA,IAAA,EAClD,kBAAA;AAAA,EACJ,CAAC,GAED,GAAG,2BAA2B,MAAM;AAClC,UAAMC,IAAc,KAAK,GAAA;AACzB,IAAAJ,EAAO,gBAAAC,EAACC,GAAA,EAAO,SAASE,GAAa,uBAAS,CAAS,GACvDC,EAAU,MAAMF,EAAO,UAAU,WAAW,CAAC,GAC7C,OAAOC,CAAW,EAAE,sBAAsB,CAAC;AAAA,EAC7C,CAAC,GACD,GAAG,wCAAwC,MAAM;AAC/C,IAAAJ;AAAA,wBACGE,GAAA,EAAO,OAAM,WAAU,SAAQ,aAAY,UAAA,cAAA,CAE5C;AAAA,IAAA;AAEF,UAAMI,IAASH,EAAO,UAAU,UAAU,EAAE,MAAM,gBAAgB;AAElE,WAAOG,CAAM,EAAE,kBAAA,GAEf,OAAOA,CAAM,EAAE,YAAY,4BAA4B;AAAA,EACzD,CAAC,GAED,GAAG,8CAA8C,MAAM;AACrD,IAAAN,EAAO,gBAAAC,EAACC,GAAA,EAAO,UAAQ,IAAC,6BAAe,CAAS;AAChD,UAAMI,IAASH,EAAO,UAAU,UAAU,EAAE,MAAM,oBAAoB;AACtE,WAAOG,CAAM,EAAE,aAAA;AAAA,EACjB,CAAC;AACH,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../src/components/Card/index.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { ExpandMore } from \"@mui/icons-material\";\nimport { Accordion, AccordionDetails, AccordionSummary } from \"@mui/material\";\nimport classNames from \"classnames\";\n\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n /**カードのタイトル */\n headerTitle: string;\n /**カードの中身 */\n children: ReactNode;\n /**gridの列数 */\n gridColumns: number;\n /**カスタムスタイルクラス */\n className?: string;\n};\n\n/**カードコンポーネント\n * 内容の折りたたみができます。\n * 表示する内容のgrid列数を指定します。\n */\nexport const Card = (props: Props) => {\n const { headerTitle, children, gridColumns, className } = props;\n\n return (\n <div>\n <Accordion defaultExpanded className={styles.container}>\n <AccordionSummary\n className={styles.header}\n aria-controls=\"panel-content\"\n expandIcon={<ExpandMore />}\n >\n {headerTitle}\n </AccordionSummary>\n <AccordionDetails className={styles.mainContent}>\n <div\n data-testid=\"card-items\"\n data-grid-columns={gridColumns}\n className={classNames(styles.items, className)}\n style={{\n gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,\n }}\n >\n {children}\n </div>\n </AccordionDetails>\n </Accordion>\n </div>\n );\n};\n\nexport default Card;\n\nexport const gridOnlyOneStyle = styles.gridOnlyOne;\n"],"names":["Card","props","headerTitle","children","gridColumns","className","jsx","jsxs","Accordion","styles","AccordionSummary","ExpandMore","AccordionDetails","classNames","gridOnlyOneStyle"],"mappings":"qZAsBaA,EAAQC,GAAiB,CACpC,KAAM,CAAE,YAAAC,EAAa,SAAAC,EAAU,YAAAC,EAAa,UAAAC,
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../src/components/Card/index.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { ExpandMore } from \"@mui/icons-material\";\nimport { Accordion, AccordionDetails, AccordionSummary } from \"@mui/material\";\nimport classNames from \"classnames\";\n\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n /**カードのタイトル */\n headerTitle: string;\n /**カードの中身 */\n children: ReactNode;\n /**gridの列数 */\n gridColumns: number;\n /**カスタムスタイルクラス */\n className?: string;\n};\n\n/**カードコンポーネント\n * 内容の折りたたみができます。\n * 表示する内容のgrid列数を指定します。\n */\nexport const Card = (props: Props) => {\n const { headerTitle, children, gridColumns, className } = props;\n\n return (\n <div>\n <Accordion defaultExpanded className={styles.container}>\n <AccordionSummary\n className={styles.header}\n aria-controls=\"panel-content\"\n expandIcon={<ExpandMore />}\n >\n {headerTitle}\n </AccordionSummary>\n <AccordionDetails className={styles.mainContent}>\n <div\n data-testid=\"card-items\"\n data-grid-columns={gridColumns}\n className={classNames(styles.items, className)}\n style={{\n gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,\n }}\n >\n {children}\n </div>\n </AccordionDetails>\n </Accordion>\n </div>\n );\n};\n\nexport default Card;\n\nexport const gridOnlyOneStyle = styles.gridOnlyOne;\n"],"names":["Card","props","headerTitle","children","gridColumns","className","jsx","jsxs","Accordion","styles","AccordionSummary","ExpandMore","AccordionDetails","classNames","gridOnlyOneStyle"],"mappings":"qZAsBaA,EAAQC,GAAiB,CACpC,KAAM,CAAE,YAAAC,EAAa,SAAAC,EAAU,YAAAC,EAAa,UAAAC,GAAcJ,EAE1D,OACEK,EAAAA,IAAC,OACC,SAAAC,EAAAA,KAACC,EAAAA,UAAA,CAAU,gBAAe,GAAC,UAAWC,EAAO,UAC3C,SAAA,CAAAH,EAAAA,IAACI,EAAAA,iBAAA,CACC,UAAWD,EAAO,OAClB,gBAAc,gBACd,iBAAaE,EAAAA,WAAA,EAAW,EAEvB,SAAAT,CAAA,CAAA,EAEHI,EAAAA,IAACM,EAAAA,iBAAA,CAAiB,UAAWH,EAAO,YAClC,SAAAH,EAAAA,IAAC,MAAA,CACC,cAAY,aACZ,oBAAmBF,EACnB,UAAWS,EAAWJ,EAAO,MAAOJ,CAAS,EAC7C,MAAO,CACL,oBAAqB,UAAUD,CAAW,QAAA,EAG3C,SAAAD,CAAA,CAAA,CACH,CACF,CAAA,CAAA,CACF,CAAA,CACF,CAEJ,EAIaW,EAAmBL,EAAO"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../../../src/components/Card/index.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { ExpandMore } from \"@mui/icons-material\";\nimport { Accordion, AccordionDetails, AccordionSummary } from \"@mui/material\";\nimport classNames from \"classnames\";\n\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n /**カードのタイトル */\n headerTitle: string;\n /**カードの中身 */\n children: ReactNode;\n /**gridの列数 */\n gridColumns: number;\n /**カスタムスタイルクラス */\n className?: string;\n};\n\n/**カードコンポーネント\n * 内容の折りたたみができます。\n * 表示する内容のgrid列数を指定します。\n */\nexport const Card = (props: Props) => {\n const { headerTitle, children, gridColumns, className } = props;\n\n return (\n <div>\n <Accordion defaultExpanded className={styles.container}>\n <AccordionSummary\n className={styles.header}\n aria-controls=\"panel-content\"\n expandIcon={<ExpandMore />}\n >\n {headerTitle}\n </AccordionSummary>\n <AccordionDetails className={styles.mainContent}>\n <div\n data-testid=\"card-items\"\n data-grid-columns={gridColumns}\n className={classNames(styles.items, className)}\n style={{\n gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,\n }}\n >\n {children}\n </div>\n </AccordionDetails>\n </Accordion>\n </div>\n );\n};\n\nexport default Card;\n\nexport const gridOnlyOneStyle = styles.gridOnlyOne;\n"],"names":["Card","props","headerTitle","children","gridColumns","className","jsx","jsxs","Accordion","styles","AccordionSummary","ExpandMore","AccordionDetails","classNames","gridOnlyOneStyle"],"mappings":";;;;;;;;;;GAsBaA,IAAO,CAACC,MAAiB;AACpC,QAAM,EAAE,aAAAC,GAAa,UAAAC,GAAU,aAAAC,GAAa,WAAAC,
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../../../src/components/Card/index.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { ExpandMore } from \"@mui/icons-material\";\nimport { Accordion, AccordionDetails, AccordionSummary } from \"@mui/material\";\nimport classNames from \"classnames\";\n\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n /**カードのタイトル */\n headerTitle: string;\n /**カードの中身 */\n children: ReactNode;\n /**gridの列数 */\n gridColumns: number;\n /**カスタムスタイルクラス */\n className?: string;\n};\n\n/**カードコンポーネント\n * 内容の折りたたみができます。\n * 表示する内容のgrid列数を指定します。\n */\nexport const Card = (props: Props) => {\n const { headerTitle, children, gridColumns, className } = props;\n\n return (\n <div>\n <Accordion defaultExpanded className={styles.container}>\n <AccordionSummary\n className={styles.header}\n aria-controls=\"panel-content\"\n expandIcon={<ExpandMore />}\n >\n {headerTitle}\n </AccordionSummary>\n <AccordionDetails className={styles.mainContent}>\n <div\n data-testid=\"card-items\"\n data-grid-columns={gridColumns}\n className={classNames(styles.items, className)}\n style={{\n gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,\n }}\n >\n {children}\n </div>\n </AccordionDetails>\n </Accordion>\n </div>\n );\n};\n\nexport default Card;\n\nexport const gridOnlyOneStyle = styles.gridOnlyOne;\n"],"names":["Card","props","headerTitle","children","gridColumns","className","jsx","jsxs","Accordion","styles","AccordionSummary","ExpandMore","AccordionDetails","classNames","gridOnlyOneStyle"],"mappings":";;;;;;;;;;GAsBaA,IAAO,CAACC,MAAiB;AACpC,QAAM,EAAE,aAAAC,GAAa,UAAAC,GAAU,aAAAC,GAAa,WAAAC,MAAcJ;AAE1D,SACE,gBAAAK,EAAC,SACC,UAAA,gBAAAC,EAACC,GAAA,EAAU,iBAAe,IAAC,WAAWC,EAAO,WAC3C,UAAA;AAAA,IAAA,gBAAAH;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,WAAWD,EAAO;AAAA,QAClB,iBAAc;AAAA,QACd,8BAAaE,GAAA,EAAW;AAAA,QAEvB,UAAAT;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH,gBAAAI,EAACM,GAAA,EAAiB,WAAWH,EAAO,aAClC,UAAA,gBAAAH;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACZ,qBAAmBF;AAAA,QACnB,WAAWS,EAAWJ,EAAO,OAAOJ,CAAS;AAAA,QAC7C,OAAO;AAAA,UACL,qBAAqB,UAAUD,CAAW;AAAA,QAAA;AAAA,QAG3C,UAAAD;AAAA,MAAA;AAAA,IAAA,EACH,CACF;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ,GAIaW,IAAmBL,EAAO;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const e=require("react/jsx-runtime"),n=require("../../react.esm-
|
|
1
|
+
"use strict";const e=require("react/jsx-runtime"),n=require("../../react.esm-BcRJ42eI.cjs"),t=require("./index.cjs.js");describe("Card component",()=>{it("renders header title correctly",()=>{n.render(e.jsx(t.Card,{headerTitle:"Sample Card",gridColumns:2,children:e.jsx("div",{children:"Content 1"})})),expect(n.screen.getByText("Sample Card")).toBeInTheDocument()}),it("renders children correctly",()=>{n.render(e.jsxs(t.Card,{headerTitle:"Sample Card",gridColumns:2,children:[e.jsx("div",{children:"Content 1"}),e.jsx("div",{children:"Content 11"})]})),expect(n.screen.getByText("Content 1")).toBeInTheDocument(),expect(n.screen.getByText("Content 11")).toBeInTheDocument()}),it("renders with specified grid columns",()=>{n.render(e.jsxs(t.Card,{headerTitle:"Sample Card",gridColumns:3,children:[e.jsx("div",{children:"Content 1"}),e.jsx("div",{children:"Content 2"}),e.jsx("div",{children:"Content 3"}),e.jsx("div",{children:"Content 4"}),e.jsx("div",{children:"Content 5"}),e.jsx("div",{children:"Content 6"}),e.jsx("div",{children:"Content 7"}),e.jsx("div",{children:"Content 8"}),e.jsx("div",{children:"Content 9"}),e.jsx("div",{children:"Content 10"}),e.jsx("div",{children:"Content 11"})]}));const r=n.screen.getByTestId("card-items");expect(r.getAttribute("style")).toContain("grid-template-columns: repeat(3, 1fr)")})});
|
|
2
2
|
//# sourceMappingURL=index.test.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.test.cjs.js","sources":["../../../src/components/Card/index.test.tsx"],"sourcesContent":["import { render, screen } from \"@testing-library/react\";\n\nimport Card from \".\";\n\ndescribe(\"Card component\", () => {\n it(\"renders header title correctly\", () => {\n render(\n <Card headerTitle=\"Sample Card\" gridColumns={2}>\n <div>Content 1</div>\n </Card>,\n );\n\n expect(screen.getByText(\"Sample Card\")).toBeInTheDocument();\n });\n\n it(\"renders children correctly\", () => {\n render(\n <Card headerTitle=\"Sample Card\" gridColumns={2}>\n <div>Content 1</div>\n <div>Content 11</div>\n </Card>,\n );\n\n expect(screen.getByText(\"Content 1\")).toBeInTheDocument();\n expect(screen.getByText(\"Content 11\")).toBeInTheDocument();\n });\n\n it(\"renders with specified grid columns\", () => {\n render(\n <Card headerTitle=\"Sample Card\" gridColumns={3}>\n <div>Content 1</div>\n <div>Content 2</div>\n <div>Content 3</div>\n <div>Content 4</div>\n <div>Content 5</div>\n <div>Content 6</div>\n <div>Content 7</div>\n <div>Content 8</div>\n <div>Content 9</div>\n <div>Content 10</div>\n <div>Content 11</div>\n </Card>,\n );\n\n const items = screen.getByTestId(\"card-items\");\n\n expect(items.getAttribute(\"style\")).toContain(\n \"grid-template-columns: repeat(3, 1fr)\",\n );\n });\n});\n"],"names":["render","jsx","Card","screen","jsxs","items"],"mappings":"wHAIA,SAAS,iBAAkB,IAAM,CAC/B,GAAG,iCAAkC,IAAM,CACzCA,
|
|
1
|
+
{"version":3,"file":"index.test.cjs.js","sources":["../../../src/components/Card/index.test.tsx"],"sourcesContent":["import { render, screen } from \"@testing-library/react\";\n\nimport Card from \".\";\n\ndescribe(\"Card component\", () => {\n it(\"renders header title correctly\", () => {\n render(\n <Card headerTitle=\"Sample Card\" gridColumns={2}>\n <div>Content 1</div>\n </Card>,\n );\n\n expect(screen.getByText(\"Sample Card\")).toBeInTheDocument();\n });\n\n it(\"renders children correctly\", () => {\n render(\n <Card headerTitle=\"Sample Card\" gridColumns={2}>\n <div>Content 1</div>\n <div>Content 11</div>\n </Card>,\n );\n\n expect(screen.getByText(\"Content 1\")).toBeInTheDocument();\n expect(screen.getByText(\"Content 11\")).toBeInTheDocument();\n });\n\n it(\"renders with specified grid columns\", () => {\n render(\n <Card headerTitle=\"Sample Card\" gridColumns={3}>\n <div>Content 1</div>\n <div>Content 2</div>\n <div>Content 3</div>\n <div>Content 4</div>\n <div>Content 5</div>\n <div>Content 6</div>\n <div>Content 7</div>\n <div>Content 8</div>\n <div>Content 9</div>\n <div>Content 10</div>\n <div>Content 11</div>\n </Card>,\n );\n\n const items = screen.getByTestId(\"card-items\");\n\n expect(items.getAttribute(\"style\")).toContain(\n \"grid-template-columns: repeat(3, 1fr)\",\n );\n });\n});\n"],"names":["render","jsx","Card","screen","jsxs","items"],"mappings":"wHAIA,SAAS,iBAAkB,IAAM,CAC/B,GAAG,iCAAkC,IAAM,CACzCA,EAAAA,OACEC,EAAAA,IAACC,EAAAA,MAAK,YAAY,cAAc,YAAa,EAC3C,SAAAD,EAAAA,IAAC,MAAA,CAAI,SAAA,WAAA,CAAS,CAAA,CAChB,CAAA,EAGF,OAAOE,EAAAA,OAAO,UAAU,aAAa,CAAC,EAAE,kBAAA,CAC1C,CAAC,EAED,GAAG,6BAA8B,IAAM,CACrCH,EAAAA,OACEI,EAAAA,KAACF,EAAAA,KAAA,CAAK,YAAY,cAAc,YAAa,EAC3C,SAAA,CAAAD,EAAAA,IAAC,OAAI,SAAA,WAAA,CAAS,EACdA,EAAAA,IAAC,OAAI,SAAA,YAAA,CAAU,CAAA,CAAA,CACjB,CAAA,EAGF,OAAOE,EAAAA,OAAO,UAAU,WAAW,CAAC,EAAE,kBAAA,EACtC,OAAOA,EAAAA,OAAO,UAAU,YAAY,CAAC,EAAE,kBAAA,CACzC,CAAC,EAED,GAAG,sCAAuC,IAAM,CAC9CH,EAAAA,OACEI,EAAAA,KAACF,EAAAA,KAAA,CAAK,YAAY,cAAc,YAAa,EAC3C,SAAA,CAAAD,EAAAA,IAAC,OAAI,SAAA,WAAA,CAAS,EACdA,EAAAA,IAAC,OAAI,SAAA,WAAA,CAAS,EACdA,EAAAA,IAAC,OAAI,SAAA,WAAA,CAAS,EACdA,EAAAA,IAAC,OAAI,SAAA,WAAA,CAAS,EACdA,EAAAA,IAAC,OAAI,SAAA,WAAA,CAAS,EACdA,EAAAA,IAAC,OAAI,SAAA,WAAA,CAAS,EACdA,EAAAA,IAAC,OAAI,SAAA,WAAA,CAAS,EACdA,EAAAA,IAAC,OAAI,SAAA,WAAA,CAAS,EACdA,EAAAA,IAAC,OAAI,SAAA,WAAA,CAAS,EACdA,EAAAA,IAAC,OAAI,SAAA,YAAA,CAAU,EACfA,EAAAA,IAAC,OAAI,SAAA,YAAA,CAAU,CAAA,CAAA,CACjB,CAAA,EAGF,MAAMI,EAAQF,EAAAA,OAAO,YAAY,YAAY,EAE7C,OAAOE,EAAM,aAAa,OAAO,CAAC,EAAE,UAClC,uCAAA,CAEJ,CAAC,CACH,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as e, jsxs as d } from "react/jsx-runtime";
|
|
2
|
-
import { r as n, s as t } from "../../react.esm-
|
|
2
|
+
import { r as n, s as t } from "../../react.esm-DVhZgPrH.js";
|
|
3
3
|
import { Card as r } from "./index.es.js";
|
|
4
4
|
describe("Card component", () => {
|
|
5
5
|
it("renders header title correctly", () => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.test.es.js","sources":["../../../src/components/Card/index.test.tsx"],"sourcesContent":["import { render, screen } from \"@testing-library/react\";\n\nimport Card from \".\";\n\ndescribe(\"Card component\", () => {\n it(\"renders header title correctly\", () => {\n render(\n <Card headerTitle=\"Sample Card\" gridColumns={2}>\n <div>Content 1</div>\n </Card>,\n );\n\n expect(screen.getByText(\"Sample Card\")).toBeInTheDocument();\n });\n\n it(\"renders children correctly\", () => {\n render(\n <Card headerTitle=\"Sample Card\" gridColumns={2}>\n <div>Content 1</div>\n <div>Content 11</div>\n </Card>,\n );\n\n expect(screen.getByText(\"Content 1\")).toBeInTheDocument();\n expect(screen.getByText(\"Content 11\")).toBeInTheDocument();\n });\n\n it(\"renders with specified grid columns\", () => {\n render(\n <Card headerTitle=\"Sample Card\" gridColumns={3}>\n <div>Content 1</div>\n <div>Content 2</div>\n <div>Content 3</div>\n <div>Content 4</div>\n <div>Content 5</div>\n <div>Content 6</div>\n <div>Content 7</div>\n <div>Content 8</div>\n <div>Content 9</div>\n <div>Content 10</div>\n <div>Content 11</div>\n </Card>,\n );\n\n const items = screen.getByTestId(\"card-items\");\n\n expect(items.getAttribute(\"style\")).toContain(\n \"grid-template-columns: repeat(3, 1fr)\",\n );\n });\n});\n"],"names":["render","jsx","Card","screen","jsxs","items"],"mappings":";;;AAIA,SAAS,kBAAkB,MAAM;AAC/B,KAAG,kCAAkC,MAAM;AACzC,IAAAA;AAAA,MACE,gBAAAC,EAACC,KAAK,aAAY,eAAc,aAAa,GAC3C,UAAA,gBAAAD,EAAC,
|
|
1
|
+
{"version":3,"file":"index.test.es.js","sources":["../../../src/components/Card/index.test.tsx"],"sourcesContent":["import { render, screen } from \"@testing-library/react\";\n\nimport Card from \".\";\n\ndescribe(\"Card component\", () => {\n it(\"renders header title correctly\", () => {\n render(\n <Card headerTitle=\"Sample Card\" gridColumns={2}>\n <div>Content 1</div>\n </Card>,\n );\n\n expect(screen.getByText(\"Sample Card\")).toBeInTheDocument();\n });\n\n it(\"renders children correctly\", () => {\n render(\n <Card headerTitle=\"Sample Card\" gridColumns={2}>\n <div>Content 1</div>\n <div>Content 11</div>\n </Card>,\n );\n\n expect(screen.getByText(\"Content 1\")).toBeInTheDocument();\n expect(screen.getByText(\"Content 11\")).toBeInTheDocument();\n });\n\n it(\"renders with specified grid columns\", () => {\n render(\n <Card headerTitle=\"Sample Card\" gridColumns={3}>\n <div>Content 1</div>\n <div>Content 2</div>\n <div>Content 3</div>\n <div>Content 4</div>\n <div>Content 5</div>\n <div>Content 6</div>\n <div>Content 7</div>\n <div>Content 8</div>\n <div>Content 9</div>\n <div>Content 10</div>\n <div>Content 11</div>\n </Card>,\n );\n\n const items = screen.getByTestId(\"card-items\");\n\n expect(items.getAttribute(\"style\")).toContain(\n \"grid-template-columns: repeat(3, 1fr)\",\n );\n });\n});\n"],"names":["render","jsx","Card","screen","jsxs","items"],"mappings":";;;AAIA,SAAS,kBAAkB,MAAM;AAC/B,KAAG,kCAAkC,MAAM;AACzC,IAAAA;AAAA,MACE,gBAAAC,EAACC,KAAK,aAAY,eAAc,aAAa,GAC3C,UAAA,gBAAAD,EAAC,OAAA,EAAI,UAAA,YAAA,CAAS,EAAA,CAChB;AAAA,IAAA,GAGF,OAAOE,EAAO,UAAU,aAAa,CAAC,EAAE,kBAAA;AAAA,EAC1C,CAAC,GAED,GAAG,8BAA8B,MAAM;AACrC,IAAAH;AAAA,MACE,gBAAAI,EAACF,GAAA,EAAK,aAAY,eAAc,aAAa,GAC3C,UAAA;AAAA,QAAA,gBAAAD,EAAC,SAAI,UAAA,YAAA,CAAS;AAAA,QACd,gBAAAA,EAAC,SAAI,UAAA,aAAA,CAAU;AAAA,MAAA,EAAA,CACjB;AAAA,IAAA,GAGF,OAAOE,EAAO,UAAU,WAAW,CAAC,EAAE,kBAAA,GACtC,OAAOA,EAAO,UAAU,YAAY,CAAC,EAAE,kBAAA;AAAA,EACzC,CAAC,GAED,GAAG,uCAAuC,MAAM;AAC9C,IAAAH;AAAA,MACE,gBAAAI,EAACF,GAAA,EAAK,aAAY,eAAc,aAAa,GAC3C,UAAA;AAAA,QAAA,gBAAAD,EAAC,SAAI,UAAA,YAAA,CAAS;AAAA,QACd,gBAAAA,EAAC,SAAI,UAAA,YAAA,CAAS;AAAA,QACd,gBAAAA,EAAC,SAAI,UAAA,YAAA,CAAS;AAAA,QACd,gBAAAA,EAAC,SAAI,UAAA,YAAA,CAAS;AAAA,QACd,gBAAAA,EAAC,SAAI,UAAA,YAAA,CAAS;AAAA,QACd,gBAAAA,EAAC,SAAI,UAAA,YAAA,CAAS;AAAA,QACd,gBAAAA,EAAC,SAAI,UAAA,YAAA,CAAS;AAAA,QACd,gBAAAA,EAAC,SAAI,UAAA,YAAA,CAAS;AAAA,QACd,gBAAAA,EAAC,SAAI,UAAA,YAAA,CAAS;AAAA,QACd,gBAAAA,EAAC,SAAI,UAAA,aAAA,CAAU;AAAA,QACf,gBAAAA,EAAC,SAAI,UAAA,aAAA,CAAU;AAAA,MAAA,EAAA,CACjB;AAAA,IAAA;AAGF,UAAMI,IAAQF,EAAO,YAAY,YAAY;AAE7C,WAAOE,EAAM,aAAa,OAAO,CAAC,EAAE;AAAA,MAClC;AAAA,IAAA;AAAA,EAEJ,CAAC;AACH,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../src/components/CardWithTitle/index.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { Card, CardContent } from \"@mui/material\";\n\nimport { Title } from \"../Title\";\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n /** カードのタイトル */\n title?: string;\n /** カードの中身 */\n children: ReactNode;\n /** タイトルからのスペース */\n spacingFromTitle?: number;\n /** カードのクラス名 */\n cardClassName?: string;\n /** タイトルのクラス名 */\n titleClassName?: string;\n /**チルドレンラッパーのクラス名 */\n childrenWrapperClassName?: string;\n};\n\n/**\n * タイトル付きカードコンポーネント\n * タイトルとコンテンツを表示するシンプルなカードです\n */\nexport const CardWithTitle = (props: Props) => {\n const {\n title,\n children,\n spacingFromTitle = 32,\n cardClassName,\n titleClassName,\n childrenWrapperClassName,\n } = props;\n return (\n <Card className={`${styles.card} ${cardClassName ?? \"\"}`}>\n <CardContent>\n {title && <Title title={title} className={titleClassName ?? \"\"} />}\n <div\n className={`${styles.content} ${childrenWrapperClassName ?? \"\"}`}\n style={{ paddingTop: `${spacingFromTitle}px` }}\n >\n {children}\n </div>\n </CardContent>\n </Card>\n );\n};\n\nexport default CardWithTitle;\n"],"names":["CardWithTitle","props","title","children","spacingFromTitle","cardClassName","titleClassName","childrenWrapperClassName","jsx","Card","styles","jsxs","CardContent","Title"],"mappings":"2QAyBaA,EAAiBC,GAAiB,
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../src/components/CardWithTitle/index.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { Card, CardContent } from \"@mui/material\";\n\nimport { Title } from \"../Title\";\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n /** カードのタイトル */\n title?: string;\n /** カードの中身 */\n children: ReactNode;\n /** タイトルからのスペース */\n spacingFromTitle?: number;\n /** カードのクラス名 */\n cardClassName?: string;\n /** タイトルのクラス名 */\n titleClassName?: string;\n /**チルドレンラッパーのクラス名 */\n childrenWrapperClassName?: string;\n};\n\n/**\n * タイトル付きカードコンポーネント\n * タイトルとコンテンツを表示するシンプルなカードです\n */\nexport const CardWithTitle = (props: Props) => {\n const {\n title,\n children,\n spacingFromTitle = 32,\n cardClassName,\n titleClassName,\n childrenWrapperClassName,\n } = props;\n return (\n <Card className={`${styles.card} ${cardClassName ?? \"\"}`}>\n <CardContent>\n {title && <Title title={title} className={titleClassName ?? \"\"} />}\n <div\n className={`${styles.content} ${childrenWrapperClassName ?? \"\"}`}\n style={{ paddingTop: `${spacingFromTitle}px` }}\n >\n {children}\n </div>\n </CardContent>\n </Card>\n );\n};\n\nexport default CardWithTitle;\n"],"names":["CardWithTitle","props","title","children","spacingFromTitle","cardClassName","titleClassName","childrenWrapperClassName","jsx","Card","styles","jsxs","CardContent","Title"],"mappings":"2QAyBaA,EAAiBC,GAAiB,CAC7C,KAAM,CACJ,MAAAC,EACA,SAAAC,EACA,iBAAAC,EAAmB,GACnB,cAAAC,EACA,eAAAC,EACA,yBAAAC,CAAA,EACEN,EACJ,OACEO,EAAAA,IAACC,EAAAA,KAAA,CAAK,UAAW,GAAGC,EAAO,IAAI,IAAIL,GAAiB,EAAE,GACpD,SAAAM,EAAAA,KAACC,EAAAA,YAAA,CACE,SAAA,CAAAV,GAASM,EAAAA,IAACK,QAAA,CAAM,MAAAX,EAAc,UAAWI,GAAkB,GAAI,EAChEE,EAAAA,IAAC,MAAA,CACC,UAAW,GAAGE,EAAO,OAAO,IAAIH,GAA4B,EAAE,GAC9D,MAAO,CAAE,WAAY,GAAGH,CAAgB,IAAA,EAEvC,SAAAD,CAAA,CAAA,CACH,CAAA,CACF,CAAA,CACF,CAEJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../../../src/components/CardWithTitle/index.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { Card, CardContent } from \"@mui/material\";\n\nimport { Title } from \"../Title\";\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n /** カードのタイトル */\n title?: string;\n /** カードの中身 */\n children: ReactNode;\n /** タイトルからのスペース */\n spacingFromTitle?: number;\n /** カードのクラス名 */\n cardClassName?: string;\n /** タイトルのクラス名 */\n titleClassName?: string;\n /**チルドレンラッパーのクラス名 */\n childrenWrapperClassName?: string;\n};\n\n/**\n * タイトル付きカードコンポーネント\n * タイトルとコンテンツを表示するシンプルなカードです\n */\nexport const CardWithTitle = (props: Props) => {\n const {\n title,\n children,\n spacingFromTitle = 32,\n cardClassName,\n titleClassName,\n childrenWrapperClassName,\n } = props;\n return (\n <Card className={`${styles.card} ${cardClassName ?? \"\"}`}>\n <CardContent>\n {title && <Title title={title} className={titleClassName ?? \"\"} />}\n <div\n className={`${styles.content} ${childrenWrapperClassName ?? \"\"}`}\n style={{ paddingTop: `${spacingFromTitle}px` }}\n >\n {children}\n </div>\n </CardContent>\n </Card>\n );\n};\n\nexport default CardWithTitle;\n"],"names":["CardWithTitle","props","title","children","spacingFromTitle","cardClassName","titleClassName","childrenWrapperClassName","jsx","Card","styles","jsxs","CardContent","Title"],"mappings":";;;;;;GAyBaA,IAAgB,CAACC,MAAiB;
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../../../src/components/CardWithTitle/index.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { Card, CardContent } from \"@mui/material\";\n\nimport { Title } from \"../Title\";\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n /** カードのタイトル */\n title?: string;\n /** カードの中身 */\n children: ReactNode;\n /** タイトルからのスペース */\n spacingFromTitle?: number;\n /** カードのクラス名 */\n cardClassName?: string;\n /** タイトルのクラス名 */\n titleClassName?: string;\n /**チルドレンラッパーのクラス名 */\n childrenWrapperClassName?: string;\n};\n\n/**\n * タイトル付きカードコンポーネント\n * タイトルとコンテンツを表示するシンプルなカードです\n */\nexport const CardWithTitle = (props: Props) => {\n const {\n title,\n children,\n spacingFromTitle = 32,\n cardClassName,\n titleClassName,\n childrenWrapperClassName,\n } = props;\n return (\n <Card className={`${styles.card} ${cardClassName ?? \"\"}`}>\n <CardContent>\n {title && <Title title={title} className={titleClassName ?? \"\"} />}\n <div\n className={`${styles.content} ${childrenWrapperClassName ?? \"\"}`}\n style={{ paddingTop: `${spacingFromTitle}px` }}\n >\n {children}\n </div>\n </CardContent>\n </Card>\n );\n};\n\nexport default CardWithTitle;\n"],"names":["CardWithTitle","props","title","children","spacingFromTitle","cardClassName","titleClassName","childrenWrapperClassName","jsx","Card","styles","jsxs","CardContent","Title"],"mappings":";;;;;;GAyBaA,IAAgB,CAACC,MAAiB;AAC7C,QAAM;AAAA,IACJ,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,kBAAAC,IAAmB;AAAA,IACnB,eAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,0BAAAC;AAAA,EAAA,IACEN;AACJ,SACE,gBAAAO,EAACC,GAAA,EAAK,WAAW,GAAGC,EAAO,IAAI,IAAIL,KAAiB,EAAE,IACpD,UAAA,gBAAAM,EAACC,GAAA,EACE,UAAA;AAAA,IAAAV,KAAS,gBAAAM,EAACK,GAAA,EAAM,OAAAX,GAAc,WAAWI,KAAkB,IAAI;AAAA,IAChE,gBAAAE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAGE,EAAO,OAAO,IAAIH,KAA4B,EAAE;AAAA,QAC9D,OAAO,EAAE,YAAY,GAAGH,CAAgB,KAAA;AAAA,QAEvC,UAAAD;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,EAAA,CACF,EAAA,CACF;AAEJ;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const t=require("react/jsx-runtime"),i=require("../../react.esm-
|
|
1
|
+
"use strict";const t=require("react/jsx-runtime"),i=require("../../react.esm-BcRJ42eI.cjs");require("../../index-9p9q0wxE.cjs");const c=require("./index.cjs.js");describe("CardWithTitle Component",()=>{it("renders without title",()=>{const{getByText:e}=i.render(t.jsx(c.CardWithTitle,{children:t.jsx("div",{children:"Test Content"})}));expect(e("Test Content")).toBeInTheDocument()}),it("renders with title",()=>{const e="Test Title",{getByText:n}=i.render(t.jsx(c.CardWithTitle,{title:e,children:t.jsx("div",{children:"Test Content"})}));expect(n(e)).toBeInTheDocument(),expect(n("Test Content")).toBeInTheDocument()}),it("applies default spacing from title",()=>{const{container:e}=i.render(t.jsx(c.CardWithTitle,{title:"Test Title",children:t.jsx("div",{children:"Test Content"})})),n=e.querySelector(".content");expect(n).toHaveStyle("padding-top: 32px")}),it("applies custom spacing from title",()=>{const{container:n}=i.render(t.jsx(c.CardWithTitle,{title:"Test Title",spacingFromTitle:16,children:t.jsx("div",{children:"Test Content"})})),o=n.querySelector(".content");expect(o).toHaveStyle("padding-top: 16px")})});
|
|
2
2
|
//# sourceMappingURL=index.test.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.test.cjs.js","sources":["../../../src/components/CardWithTitle/index.test.tsx"],"sourcesContent":["import { render } from \"@testing-library/react\";\n\nimport \"@testing-library/jest-dom\";\n\nimport { CardWithTitle } from \".\";\n\ndescribe(\"CardWithTitle Component\", () => {\n it(\"renders without title\", () => {\n const { getByText } = render(\n <CardWithTitle>\n <div>Test Content</div>\n </CardWithTitle>,\n );\n\n expect(getByText(\"Test Content\")).toBeInTheDocument();\n });\n\n it(\"renders with title\", () => {\n const titleText = \"Test Title\";\n const { getByText } = render(\n <CardWithTitle title={titleText}>\n <div>Test Content</div>\n </CardWithTitle>,\n );\n\n expect(getByText(titleText)).toBeInTheDocument();\n expect(getByText(\"Test Content\")).toBeInTheDocument();\n });\n\n it(\"applies default spacing from title\", () => {\n const { container } = render(\n <CardWithTitle title=\"Test Title\">\n <div>Test Content</div>\n </CardWithTitle>,\n );\n\n const contentDiv = container.querySelector(\".content\");\n expect(contentDiv).toHaveStyle(\"padding-top: 32px\");\n });\n\n it(\"applies custom spacing from title\", () => {\n const customSpacing = 16;\n const { container } = render(\n <CardWithTitle title=\"Test Title\" spacingFromTitle={customSpacing}>\n <div>Test Content</div>\n </CardWithTitle>,\n );\n\n const contentDiv = container.querySelector(\".content\");\n expect(contentDiv).toHaveStyle(`padding-top: ${customSpacing}px`);\n });\n});\n"],"names":["getByText","render","jsx","CardWithTitle","titleText","container","contentDiv"],"mappings":"kKAMA,SAAS,0BAA2B,IAAM,CACxC,GAAG,wBAAyB,IAAM,
|
|
1
|
+
{"version":3,"file":"index.test.cjs.js","sources":["../../../src/components/CardWithTitle/index.test.tsx"],"sourcesContent":["import { render } from \"@testing-library/react\";\n\nimport \"@testing-library/jest-dom\";\n\nimport { CardWithTitle } from \".\";\n\ndescribe(\"CardWithTitle Component\", () => {\n it(\"renders without title\", () => {\n const { getByText } = render(\n <CardWithTitle>\n <div>Test Content</div>\n </CardWithTitle>,\n );\n\n expect(getByText(\"Test Content\")).toBeInTheDocument();\n });\n\n it(\"renders with title\", () => {\n const titleText = \"Test Title\";\n const { getByText } = render(\n <CardWithTitle title={titleText}>\n <div>Test Content</div>\n </CardWithTitle>,\n );\n\n expect(getByText(titleText)).toBeInTheDocument();\n expect(getByText(\"Test Content\")).toBeInTheDocument();\n });\n\n it(\"applies default spacing from title\", () => {\n const { container } = render(\n <CardWithTitle title=\"Test Title\">\n <div>Test Content</div>\n </CardWithTitle>,\n );\n\n const contentDiv = container.querySelector(\".content\");\n expect(contentDiv).toHaveStyle(\"padding-top: 32px\");\n });\n\n it(\"applies custom spacing from title\", () => {\n const customSpacing = 16;\n const { container } = render(\n <CardWithTitle title=\"Test Title\" spacingFromTitle={customSpacing}>\n <div>Test Content</div>\n </CardWithTitle>,\n );\n\n const contentDiv = container.querySelector(\".content\");\n expect(contentDiv).toHaveStyle(`padding-top: ${customSpacing}px`);\n });\n});\n"],"names":["getByText","render","jsx","CardWithTitle","titleText","container","contentDiv"],"mappings":"kKAMA,SAAS,0BAA2B,IAAM,CACxC,GAAG,wBAAyB,IAAM,CAChC,KAAM,CAAE,UAAAA,GAAcC,EAAAA,OACpBC,MAACC,EAAAA,cAAA,CACC,SAAAD,EAAAA,IAAC,MAAA,CAAI,wBAAY,CAAA,CACnB,CAAA,EAGF,OAAOF,EAAU,cAAc,CAAC,EAAE,kBAAA,CACpC,CAAC,EAED,GAAG,qBAAsB,IAAM,CAC7B,MAAMI,EAAY,aACZ,CAAE,UAAAJ,GAAcC,EAAAA,aACnBE,EAAAA,cAAA,CAAc,MAAOC,EACpB,SAAAF,EAAAA,IAAC,MAAA,CAAI,wBAAY,CAAA,CACnB,CAAA,EAGF,OAAOF,EAAUI,CAAS,CAAC,EAAE,kBAAA,EAC7B,OAAOJ,EAAU,cAAc,CAAC,EAAE,kBAAA,CACpC,CAAC,EAED,GAAG,qCAAsC,IAAM,CAC7C,KAAM,CAAE,UAAAK,GAAcJ,EAAAA,aACnBE,EAAAA,cAAA,CAAc,MAAM,aACnB,SAAAD,EAAAA,IAAC,MAAA,CAAI,wBAAY,CAAA,CACnB,CAAA,EAGII,EAAaD,EAAU,cAAc,UAAU,EACrD,OAAOC,CAAU,EAAE,YAAY,mBAAmB,CACpD,CAAC,EAED,GAAG,oCAAqC,IAAM,CAE5C,KAAM,CAAE,UAAAD,GAAcJ,EAAAA,OACpBC,EAAAA,IAACC,EAAAA,eAAc,MAAM,aAAa,iBAAkB,GAClD,SAAAD,EAAAA,IAAC,MAAA,CAAI,SAAA,cAAA,CAAY,CAAA,CACnB,CAAA,EAGII,EAAaD,EAAU,cAAc,UAAU,EACrD,OAAOC,CAAU,EAAE,YAAY,mBAAiC,CAClE,CAAC,CACH,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as t } from "react/jsx-runtime";
|
|
2
|
-
import { r as i } from "../../react.esm-
|
|
3
|
-
import "../../index-
|
|
2
|
+
import { r as i } from "../../react.esm-DVhZgPrH.js";
|
|
3
|
+
import "../../index-Cj9ZvtM1.js";
|
|
4
4
|
import { CardWithTitle as o } from "./index.es.js";
|
|
5
5
|
describe("CardWithTitle Component", () => {
|
|
6
6
|
it("renders without title", () => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.test.es.js","sources":["../../../src/components/CardWithTitle/index.test.tsx"],"sourcesContent":["import { render } from \"@testing-library/react\";\n\nimport \"@testing-library/jest-dom\";\n\nimport { CardWithTitle } from \".\";\n\ndescribe(\"CardWithTitle Component\", () => {\n it(\"renders without title\", () => {\n const { getByText } = render(\n <CardWithTitle>\n <div>Test Content</div>\n </CardWithTitle>,\n );\n\n expect(getByText(\"Test Content\")).toBeInTheDocument();\n });\n\n it(\"renders with title\", () => {\n const titleText = \"Test Title\";\n const { getByText } = render(\n <CardWithTitle title={titleText}>\n <div>Test Content</div>\n </CardWithTitle>,\n );\n\n expect(getByText(titleText)).toBeInTheDocument();\n expect(getByText(\"Test Content\")).toBeInTheDocument();\n });\n\n it(\"applies default spacing from title\", () => {\n const { container } = render(\n <CardWithTitle title=\"Test Title\">\n <div>Test Content</div>\n </CardWithTitle>,\n );\n\n const contentDiv = container.querySelector(\".content\");\n expect(contentDiv).toHaveStyle(\"padding-top: 32px\");\n });\n\n it(\"applies custom spacing from title\", () => {\n const customSpacing = 16;\n const { container } = render(\n <CardWithTitle title=\"Test Title\" spacingFromTitle={customSpacing}>\n <div>Test Content</div>\n </CardWithTitle>,\n );\n\n const contentDiv = container.querySelector(\".content\");\n expect(contentDiv).toHaveStyle(`padding-top: ${customSpacing}px`);\n });\n});\n"],"names":["getByText","render","jsx","CardWithTitle","titleText","container","contentDiv"],"mappings":";;;;AAMA,SAAS,2BAA2B,MAAM;AACxC,KAAG,yBAAyB,MAAM;
|
|
1
|
+
{"version":3,"file":"index.test.es.js","sources":["../../../src/components/CardWithTitle/index.test.tsx"],"sourcesContent":["import { render } from \"@testing-library/react\";\n\nimport \"@testing-library/jest-dom\";\n\nimport { CardWithTitle } from \".\";\n\ndescribe(\"CardWithTitle Component\", () => {\n it(\"renders without title\", () => {\n const { getByText } = render(\n <CardWithTitle>\n <div>Test Content</div>\n </CardWithTitle>,\n );\n\n expect(getByText(\"Test Content\")).toBeInTheDocument();\n });\n\n it(\"renders with title\", () => {\n const titleText = \"Test Title\";\n const { getByText } = render(\n <CardWithTitle title={titleText}>\n <div>Test Content</div>\n </CardWithTitle>,\n );\n\n expect(getByText(titleText)).toBeInTheDocument();\n expect(getByText(\"Test Content\")).toBeInTheDocument();\n });\n\n it(\"applies default spacing from title\", () => {\n const { container } = render(\n <CardWithTitle title=\"Test Title\">\n <div>Test Content</div>\n </CardWithTitle>,\n );\n\n const contentDiv = container.querySelector(\".content\");\n expect(contentDiv).toHaveStyle(\"padding-top: 32px\");\n });\n\n it(\"applies custom spacing from title\", () => {\n const customSpacing = 16;\n const { container } = render(\n <CardWithTitle title=\"Test Title\" spacingFromTitle={customSpacing}>\n <div>Test Content</div>\n </CardWithTitle>,\n );\n\n const contentDiv = container.querySelector(\".content\");\n expect(contentDiv).toHaveStyle(`padding-top: ${customSpacing}px`);\n });\n});\n"],"names":["getByText","render","jsx","CardWithTitle","titleText","container","contentDiv"],"mappings":";;;;AAMA,SAAS,2BAA2B,MAAM;AACxC,KAAG,yBAAyB,MAAM;AAChC,UAAM,EAAE,WAAAA,MAAcC;AAAA,MACpB,gBAAAC,EAACC,GAAA,EACC,UAAA,gBAAAD,EAAC,OAAA,EAAI,0BAAY,EAAA,CACnB;AAAA,IAAA;AAGF,WAAOF,EAAU,cAAc,CAAC,EAAE,kBAAA;AAAA,EACpC,CAAC,GAED,GAAG,sBAAsB,MAAM;AAC7B,UAAMI,IAAY,cACZ,EAAE,WAAAJ,MAAcC;AAAA,wBACnBE,GAAA,EAAc,OAAOC,GACpB,UAAA,gBAAAF,EAAC,OAAA,EAAI,0BAAY,EAAA,CACnB;AAAA,IAAA;AAGF,WAAOF,EAAUI,CAAS,CAAC,EAAE,kBAAA,GAC7B,OAAOJ,EAAU,cAAc,CAAC,EAAE,kBAAA;AAAA,EACpC,CAAC,GAED,GAAG,sCAAsC,MAAM;AAC7C,UAAM,EAAE,WAAAK,MAAcJ;AAAA,wBACnBE,GAAA,EAAc,OAAM,cACnB,UAAA,gBAAAD,EAAC,OAAA,EAAI,0BAAY,EAAA,CACnB;AAAA,IAAA,GAGII,IAAaD,EAAU,cAAc,UAAU;AACrD,WAAOC,CAAU,EAAE,YAAY,mBAAmB;AAAA,EACpD,CAAC,GAED,GAAG,qCAAqC,MAAM;AAE5C,UAAM,EAAE,WAAAD,MAAcJ;AAAA,MACpB,gBAAAC,EAACC,KAAc,OAAM,cAAa,kBAAkB,IAClD,UAAA,gBAAAD,EAAC,OAAA,EAAI,UAAA,eAAA,CAAY,EAAA,CACnB;AAAA,IAAA,GAGII,IAAaD,EAAU,cAAc,UAAU;AACrD,WAAOC,CAAU,EAAE,YAAY,mBAAiC;AAAA,EAClE,CAAC;AACH,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../src/components/CustomLink/index.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport Link from \"next/link\";\nimport classnames from \"classnames\";\n\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n children: ReactNode;\n href: string;\n isStyled?: boolean;\n target?: React.HTMLAttributeAnchorTarget;\n rel?: string;\n};\n\nexport const CustomLink = (props: Props) => {\n const { children, href, isStyled = false, target, rel } = props;\n return (\n <Link\n href={href}\n className={classnames({ [styles.link]: isStyled })}\n target={target}\n rel={rel}\n onClick={(e) => {\n e.stopPropagation();\n }}\n >\n {children}\n </Link>\n );\n};\n\nexport default CustomLink;\n"],"names":["CustomLink","props","children","href","isStyled","target","rel","jsx","Link","classnames","styles","e"],"mappings":"6NAcaA,EAAcC,GAAiB,CAC1C,KAAM,CAAE,SAAAC,EAAU,KAAAC,EAAM,SAAAC,EAAW,GAAO,OAAAC,EAAQ,IAAAC,GAAQL,
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../src/components/CustomLink/index.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport Link from \"next/link\";\nimport classnames from \"classnames\";\n\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n children: ReactNode;\n href: string;\n isStyled?: boolean;\n target?: React.HTMLAttributeAnchorTarget;\n rel?: string;\n};\n\nexport const CustomLink = (props: Props) => {\n const { children, href, isStyled = false, target, rel } = props;\n return (\n <Link\n href={href}\n className={classnames({ [styles.link]: isStyled })}\n target={target}\n rel={rel}\n onClick={(e) => {\n e.stopPropagation();\n }}\n >\n {children}\n </Link>\n );\n};\n\nexport default CustomLink;\n"],"names":["CustomLink","props","children","href","isStyled","target","rel","jsx","Link","classnames","styles","e"],"mappings":"6NAcaA,EAAcC,GAAiB,CAC1C,KAAM,CAAE,SAAAC,EAAU,KAAAC,EAAM,SAAAC,EAAW,GAAO,OAAAC,EAAQ,IAAAC,GAAQL,EAC1D,OACEM,EAAAA,IAACC,EAAA,CACC,KAAAL,EACA,UAAWM,EAAW,CAAE,CAACC,EAAO,IAAI,EAAGN,EAAU,EACjD,OAAAC,EACA,IAAAC,EACA,QAAUK,GAAM,CACdA,EAAE,gBAAA,CACJ,EAEC,SAAAT,CAAA,CAAA,CAGP"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../../../src/components/CustomLink/index.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport Link from \"next/link\";\nimport classnames from \"classnames\";\n\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n children: ReactNode;\n href: string;\n isStyled?: boolean;\n target?: React.HTMLAttributeAnchorTarget;\n rel?: string;\n};\n\nexport const CustomLink = (props: Props) => {\n const { children, href, isStyled = false, target, rel } = props;\n return (\n <Link\n href={href}\n className={classnames({ [styles.link]: isStyled })}\n target={target}\n rel={rel}\n onClick={(e) => {\n e.stopPropagation();\n }}\n >\n {children}\n </Link>\n );\n};\n\nexport default CustomLink;\n"],"names":["CustomLink","props","children","href","isStyled","target","rel","jsx","Link","classnames","styles","e"],"mappings":";;;;;GAcaA,IAAa,CAACC,MAAiB;AAC1C,QAAM,EAAE,UAAAC,GAAU,MAAAC,GAAM,UAAAC,IAAW,IAAO,QAAAC,GAAQ,KAAAC,MAAQL;
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../../../src/components/CustomLink/index.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport Link from \"next/link\";\nimport classnames from \"classnames\";\n\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n children: ReactNode;\n href: string;\n isStyled?: boolean;\n target?: React.HTMLAttributeAnchorTarget;\n rel?: string;\n};\n\nexport const CustomLink = (props: Props) => {\n const { children, href, isStyled = false, target, rel } = props;\n return (\n <Link\n href={href}\n className={classnames({ [styles.link]: isStyled })}\n target={target}\n rel={rel}\n onClick={(e) => {\n e.stopPropagation();\n }}\n >\n {children}\n </Link>\n );\n};\n\nexport default CustomLink;\n"],"names":["CustomLink","props","children","href","isStyled","target","rel","jsx","Link","classnames","styles","e"],"mappings":";;;;;GAcaA,IAAa,CAACC,MAAiB;AAC1C,QAAM,EAAE,UAAAC,GAAU,MAAAC,GAAM,UAAAC,IAAW,IAAO,QAAAC,GAAQ,KAAAC,MAAQL;AAC1D,SACE,gBAAAM;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAL;AAAA,MACA,WAAWM,EAAW,EAAE,CAACC,EAAO,IAAI,GAAGN,GAAU;AAAA,MACjD,QAAAC;AAAA,MACA,KAAAC;AAAA,MACA,SAAS,CAACK,MAAM;AACd,QAAAA,EAAE,gBAAA;AAAA,MACJ;AAAA,MAEC,UAAAT;AAAA,IAAA;AAAA,EAAA;AAGP;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const r=require("react/jsx-runtime"),e=require("../../react.esm-
|
|
1
|
+
"use strict";const r=require("react/jsx-runtime"),e=require("../../react.esm-BcRJ42eI.cjs"),a=require("../../index-CaEC29Xt.cjs"),i=require("./index.cjs.js");describe("CustomLink component",()=>{const n="/test",s="Test Link";it("renders the link with correct href and children",async()=>{await e.act(()=>{e.render(r.jsx(i.CustomLink,{href:n,children:s}))}),await e.waitForWrapper(()=>{const t=e.screen.getByText(s);expect(t).toBeInTheDocument(),expect(t.closest("a")).toHaveAttribute("href",n)})}),it("applies the custom styles if isStyled is true",()=>{e.render(r.jsx(i.CustomLink,{href:n,isStyled:!0,children:s}));const t=e.screen.getByText(s);expect(t).toHaveClass("link")}),it("does not apply the custom styles if isStyled is false",()=>{e.render(r.jsx(i.CustomLink,{href:n,children:s}));const t=e.screen.getByText(s);expect(t).not.toHaveClass("link")}),it("renders the link with target and rel attributes if provided",()=>{const t="_blank",o="noopener noreferrer";e.render(r.jsx(i.CustomLink,{href:n,target:t,rel:o,children:s}));const c=e.screen.getByText(s);expect(c.closest("a")).toHaveAttribute("target",t),expect(c.closest("a")).toHaveAttribute("rel",o)}),it("should be accessible",async()=>{const{container:t}=e.render(r.jsx(i.CustomLink,{href:n,children:s}));await e.waitForWrapper(async()=>{const o=await a.jestAxe.axe(t);expect.extend(a.jestAxe.toHaveNoViolations),expect(o).toHaveNoViolations()})})});
|
|
2
2
|
//# sourceMappingURL=index.test.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.test.cjs.js","sources":["../../../src/components/CustomLink/index.test.tsx"],"sourcesContent":["import { act, render, screen, waitFor } from \"@testing-library/react\";\nimport { axe, toHaveNoViolations } from \"jest-axe\";\n\nimport { CustomLink } from \".\";\n\ndescribe(\"CustomLink component\", () => {\n const testHref = \"/test\";\n const testChildren = \"Test Link\";\n\n it(\"renders the link with correct href and children\", async () => {\n await act(() => {\n render(<CustomLink href={testHref}>{testChildren}</CustomLink>);\n });\n await waitFor(() => {\n const link = screen.getByText(testChildren);\n expect(link).toBeInTheDocument();\n expect(link.closest(\"a\")).toHaveAttribute(\"href\", testHref);\n });\n });\n\n it(\"applies the custom styles if isStyled is true\", () => {\n render(\n <CustomLink href={testHref} isStyled>\n {testChildren}\n </CustomLink>,\n );\n\n const link = screen.getByText(testChildren);\n expect(link).toHaveClass(\"link\");\n });\n\n it(\"does not apply the custom styles if isStyled is false\", () => {\n render(<CustomLink href={testHref}>{testChildren}</CustomLink>);\n\n const link = screen.getByText(testChildren);\n expect(link).not.toHaveClass(\"link\");\n });\n\n it(\"renders the link with target and rel attributes if provided\", () => {\n const target = \"_blank\";\n const rel = \"noopener noreferrer\";\n\n render(\n <CustomLink href={testHref} target={target} rel={rel}>\n {testChildren}\n </CustomLink>,\n );\n\n const link = screen.getByText(testChildren);\n expect(link.closest(\"a\")).toHaveAttribute(\"target\", target);\n expect(link.closest(\"a\")).toHaveAttribute(\"rel\", rel);\n });\n\n it(\"should be accessible\", async () => {\n const { container } = render(\n <CustomLink href={testHref}>{testChildren}</CustomLink>,\n );\n\n await waitFor(async () => {\n const results = await axe(container);\n\n expect.extend(toHaveNoViolations);\n expect(results).toHaveNoViolations();\n });\n });\n});\n"],"names":["testHref","testChildren","act","render","jsx","CustomLink","waitFor","link","screen","target","rel","container","results","axe","toHaveNoViolations"],"mappings":"8JAKA,SAAS,uBAAwB,IAAM,CACrC,MAAMA,EAAW,QACXC,EAAe,YAErB,GAAG,kDAAmD,SAAY,CAChE,MAAMC,
|
|
1
|
+
{"version":3,"file":"index.test.cjs.js","sources":["../../../src/components/CustomLink/index.test.tsx"],"sourcesContent":["import { act, render, screen, waitFor } from \"@testing-library/react\";\nimport { axe, toHaveNoViolations } from \"jest-axe\";\n\nimport { CustomLink } from \".\";\n\ndescribe(\"CustomLink component\", () => {\n const testHref = \"/test\";\n const testChildren = \"Test Link\";\n\n it(\"renders the link with correct href and children\", async () => {\n await act(() => {\n render(<CustomLink href={testHref}>{testChildren}</CustomLink>);\n });\n await waitFor(() => {\n const link = screen.getByText(testChildren);\n expect(link).toBeInTheDocument();\n expect(link.closest(\"a\")).toHaveAttribute(\"href\", testHref);\n });\n });\n\n it(\"applies the custom styles if isStyled is true\", () => {\n render(\n <CustomLink href={testHref} isStyled>\n {testChildren}\n </CustomLink>,\n );\n\n const link = screen.getByText(testChildren);\n expect(link).toHaveClass(\"link\");\n });\n\n it(\"does not apply the custom styles if isStyled is false\", () => {\n render(<CustomLink href={testHref}>{testChildren}</CustomLink>);\n\n const link = screen.getByText(testChildren);\n expect(link).not.toHaveClass(\"link\");\n });\n\n it(\"renders the link with target and rel attributes if provided\", () => {\n const target = \"_blank\";\n const rel = \"noopener noreferrer\";\n\n render(\n <CustomLink href={testHref} target={target} rel={rel}>\n {testChildren}\n </CustomLink>,\n );\n\n const link = screen.getByText(testChildren);\n expect(link.closest(\"a\")).toHaveAttribute(\"target\", target);\n expect(link.closest(\"a\")).toHaveAttribute(\"rel\", rel);\n });\n\n it(\"should be accessible\", async () => {\n const { container } = render(\n <CustomLink href={testHref}>{testChildren}</CustomLink>,\n );\n\n await waitFor(async () => {\n const results = await axe(container);\n\n expect.extend(toHaveNoViolations);\n expect(results).toHaveNoViolations();\n });\n });\n});\n"],"names":["testHref","testChildren","act","render","jsx","CustomLink","waitFor","link","screen","target","rel","container","results","axe","toHaveNoViolations"],"mappings":"8JAKA,SAAS,uBAAwB,IAAM,CACrC,MAAMA,EAAW,QACXC,EAAe,YAErB,GAAG,kDAAmD,SAAY,CAChE,MAAMC,EAAAA,IAAI,IAAM,CACdC,SAAOC,EAAAA,IAACC,EAAAA,WAAA,CAAW,KAAML,EAAW,WAAa,CAAa,CAChE,CAAC,EACD,MAAMM,EAAAA,eAAQ,IAAM,CAClB,MAAMC,EAAOC,EAAAA,OAAO,UAAUP,CAAY,EAC1C,OAAOM,CAAI,EAAE,kBAAA,EACb,OAAOA,EAAK,QAAQ,GAAG,CAAC,EAAE,gBAAgB,OAAQP,CAAQ,CAC5D,CAAC,CACH,CAAC,EAED,GAAG,gDAAiD,IAAM,CACxDG,EAAAA,aACGE,EAAAA,WAAA,CAAW,KAAML,EAAU,SAAQ,GACjC,SAAAC,CAAA,CACH,CAAA,EAGF,MAAMM,EAAOC,EAAAA,OAAO,UAAUP,CAAY,EAC1C,OAAOM,CAAI,EAAE,YAAY,MAAM,CACjC,CAAC,EAED,GAAG,wDAAyD,IAAM,CAChEJ,SAAOC,EAAAA,IAACC,EAAAA,WAAA,CAAW,KAAML,EAAW,WAAa,CAAa,EAE9D,MAAMO,EAAOC,EAAAA,OAAO,UAAUP,CAAY,EAC1C,OAAOM,CAAI,EAAE,IAAI,YAAY,MAAM,CACrC,CAAC,EAED,GAAG,8DAA+D,IAAM,CACtE,MAAME,EAAS,SACTC,EAAM,sBAEZP,EAAAA,aACGE,EAAAA,WAAA,CAAW,KAAML,EAAU,OAAAS,EAAgB,IAAAC,EACzC,SAAAT,CAAA,CACH,CAAA,EAGF,MAAMM,EAAOC,EAAAA,OAAO,UAAUP,CAAY,EAC1C,OAAOM,EAAK,QAAQ,GAAG,CAAC,EAAE,gBAAgB,SAAUE,CAAM,EAC1D,OAAOF,EAAK,QAAQ,GAAG,CAAC,EAAE,gBAAgB,MAAOG,CAAG,CACtD,CAAC,EAED,GAAG,uBAAwB,SAAY,CACrC,KAAM,CAAE,UAAAC,GAAcR,EAAAA,OACpBC,EAAAA,IAACC,EAAAA,WAAA,CAAW,KAAML,EAAW,SAAAC,CAAA,CAAa,CAAA,EAG5C,MAAMK,EAAAA,eAAQ,SAAY,CACxB,MAAMM,EAAU,MAAMC,EAAAA,QAAAA,IAAIF,CAAS,EAEnC,OAAO,OAAOG,4BAAkB,EAChC,OAAOF,CAAO,EAAE,mBAAA,CAClB,CAAC,CACH,CAAC,CACH,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as r } from "react/jsx-runtime";
|
|
2
|
-
import { b as d, r as i, w as l, s as a } from "../../react.esm-
|
|
3
|
-
import { j as h } from "../../index-
|
|
2
|
+
import { b as d, r as i, w as l, s as a } from "../../react.esm-DVhZgPrH.js";
|
|
3
|
+
import { j as h } from "../../index-Bt_ypxrX.js";
|
|
4
4
|
import { CustomLink as o } from "./index.es.js";
|
|
5
5
|
describe("CustomLink component", () => {
|
|
6
6
|
const s = "/test", t = "Test Link";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.test.es.js","sources":["../../../src/components/CustomLink/index.test.tsx"],"sourcesContent":["import { act, render, screen, waitFor } from \"@testing-library/react\";\nimport { axe, toHaveNoViolations } from \"jest-axe\";\n\nimport { CustomLink } from \".\";\n\ndescribe(\"CustomLink component\", () => {\n const testHref = \"/test\";\n const testChildren = \"Test Link\";\n\n it(\"renders the link with correct href and children\", async () => {\n await act(() => {\n render(<CustomLink href={testHref}>{testChildren}</CustomLink>);\n });\n await waitFor(() => {\n const link = screen.getByText(testChildren);\n expect(link).toBeInTheDocument();\n expect(link.closest(\"a\")).toHaveAttribute(\"href\", testHref);\n });\n });\n\n it(\"applies the custom styles if isStyled is true\", () => {\n render(\n <CustomLink href={testHref} isStyled>\n {testChildren}\n </CustomLink>,\n );\n\n const link = screen.getByText(testChildren);\n expect(link).toHaveClass(\"link\");\n });\n\n it(\"does not apply the custom styles if isStyled is false\", () => {\n render(<CustomLink href={testHref}>{testChildren}</CustomLink>);\n\n const link = screen.getByText(testChildren);\n expect(link).not.toHaveClass(\"link\");\n });\n\n it(\"renders the link with target and rel attributes if provided\", () => {\n const target = \"_blank\";\n const rel = \"noopener noreferrer\";\n\n render(\n <CustomLink href={testHref} target={target} rel={rel}>\n {testChildren}\n </CustomLink>,\n );\n\n const link = screen.getByText(testChildren);\n expect(link.closest(\"a\")).toHaveAttribute(\"target\", target);\n expect(link.closest(\"a\")).toHaveAttribute(\"rel\", rel);\n });\n\n it(\"should be accessible\", async () => {\n const { container } = render(\n <CustomLink href={testHref}>{testChildren}</CustomLink>,\n );\n\n await waitFor(async () => {\n const results = await axe(container);\n\n expect.extend(toHaveNoViolations);\n expect(results).toHaveNoViolations();\n });\n });\n});\n"],"names":["testHref","testChildren","act","render","jsx","CustomLink","waitFor","link","screen","target","rel","container","results","axe","toHaveNoViolations"],"mappings":";;;;AAKA,SAAS,wBAAwB,MAAM;AACrC,QAAMA,IAAW,SACXC,IAAe;AAErB,KAAG,mDAAmD,YAAY;AAChE,UAAMC,EAAI,MAAM;AACd,MAAAC,
|
|
1
|
+
{"version":3,"file":"index.test.es.js","sources":["../../../src/components/CustomLink/index.test.tsx"],"sourcesContent":["import { act, render, screen, waitFor } from \"@testing-library/react\";\nimport { axe, toHaveNoViolations } from \"jest-axe\";\n\nimport { CustomLink } from \".\";\n\ndescribe(\"CustomLink component\", () => {\n const testHref = \"/test\";\n const testChildren = \"Test Link\";\n\n it(\"renders the link with correct href and children\", async () => {\n await act(() => {\n render(<CustomLink href={testHref}>{testChildren}</CustomLink>);\n });\n await waitFor(() => {\n const link = screen.getByText(testChildren);\n expect(link).toBeInTheDocument();\n expect(link.closest(\"a\")).toHaveAttribute(\"href\", testHref);\n });\n });\n\n it(\"applies the custom styles if isStyled is true\", () => {\n render(\n <CustomLink href={testHref} isStyled>\n {testChildren}\n </CustomLink>,\n );\n\n const link = screen.getByText(testChildren);\n expect(link).toHaveClass(\"link\");\n });\n\n it(\"does not apply the custom styles if isStyled is false\", () => {\n render(<CustomLink href={testHref}>{testChildren}</CustomLink>);\n\n const link = screen.getByText(testChildren);\n expect(link).not.toHaveClass(\"link\");\n });\n\n it(\"renders the link with target and rel attributes if provided\", () => {\n const target = \"_blank\";\n const rel = \"noopener noreferrer\";\n\n render(\n <CustomLink href={testHref} target={target} rel={rel}>\n {testChildren}\n </CustomLink>,\n );\n\n const link = screen.getByText(testChildren);\n expect(link.closest(\"a\")).toHaveAttribute(\"target\", target);\n expect(link.closest(\"a\")).toHaveAttribute(\"rel\", rel);\n });\n\n it(\"should be accessible\", async () => {\n const { container } = render(\n <CustomLink href={testHref}>{testChildren}</CustomLink>,\n );\n\n await waitFor(async () => {\n const results = await axe(container);\n\n expect.extend(toHaveNoViolations);\n expect(results).toHaveNoViolations();\n });\n });\n});\n"],"names":["testHref","testChildren","act","render","jsx","CustomLink","waitFor","link","screen","target","rel","container","results","axe","toHaveNoViolations"],"mappings":";;;;AAKA,SAAS,wBAAwB,MAAM;AACrC,QAAMA,IAAW,SACXC,IAAe;AAErB,KAAG,mDAAmD,YAAY;AAChE,UAAMC,EAAI,MAAM;AACd,MAAAC,EAAO,gBAAAC,EAACC,GAAA,EAAW,MAAML,GAAW,aAAa,CAAa;AAAA,IAChE,CAAC,GACD,MAAMM,EAAQ,MAAM;AAClB,YAAMC,IAAOC,EAAO,UAAUP,CAAY;AAC1C,aAAOM,CAAI,EAAE,kBAAA,GACb,OAAOA,EAAK,QAAQ,GAAG,CAAC,EAAE,gBAAgB,QAAQP,CAAQ;AAAA,IAC5D,CAAC;AAAA,EACH,CAAC,GAED,GAAG,iDAAiD,MAAM;AACxD,IAAAG;AAAA,wBACGE,GAAA,EAAW,MAAML,GAAU,UAAQ,IACjC,UAAAC,EAAA,CACH;AAAA,IAAA;AAGF,UAAMM,IAAOC,EAAO,UAAUP,CAAY;AAC1C,WAAOM,CAAI,EAAE,YAAY,MAAM;AAAA,EACjC,CAAC,GAED,GAAG,yDAAyD,MAAM;AAChE,IAAAJ,EAAO,gBAAAC,EAACC,GAAA,EAAW,MAAML,GAAW,aAAa,CAAa;AAE9D,UAAMO,IAAOC,EAAO,UAAUP,CAAY;AAC1C,WAAOM,CAAI,EAAE,IAAI,YAAY,MAAM;AAAA,EACrC,CAAC,GAED,GAAG,+DAA+D,MAAM;AACtE,UAAME,IAAS,UACTC,IAAM;AAEZ,IAAAP;AAAA,wBACGE,GAAA,EAAW,MAAML,GAAU,QAAAS,GAAgB,KAAAC,GACzC,UAAAT,EAAA,CACH;AAAA,IAAA;AAGF,UAAMM,IAAOC,EAAO,UAAUP,CAAY;AAC1C,WAAOM,EAAK,QAAQ,GAAG,CAAC,EAAE,gBAAgB,UAAUE,CAAM,GAC1D,OAAOF,EAAK,QAAQ,GAAG,CAAC,EAAE,gBAAgB,OAAOG,CAAG;AAAA,EACtD,CAAC,GAED,GAAG,wBAAwB,YAAY;AACrC,UAAM,EAAE,WAAAC,MAAcR;AAAA,MACpB,gBAAAC,EAACC,GAAA,EAAW,MAAML,GAAW,UAAAC,EAAA,CAAa;AAAA,IAAA;AAG5C,UAAMK,EAAQ,YAAY;AACxB,YAAMM,IAAU,MAAMC,EAAAA,IAAIF,CAAS;AAEnC,aAAO,OAAOG,oBAAkB,GAChC,OAAOF,CAAO,EAAE,mBAAA;AAAA,IAClB,CAAC;AAAA,EACH,CAAC;AACH,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../src/components/DataTable/index.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableRow,\n} from \"@mui/material\";\nimport classNames from \"classnames\";\nimport { BiSolidDownArrow, BiSolidUpArrow } from \"react-icons/bi\";\n\nimport {\n PageSelectorValue,\n PageSizeSelector,\n} from \"@/components/PageSizeSelector\";\nimport { Pagination } from \"@/components/Pagination\";\nimport styles from \"./index.module.scss\";\n\nexport type SortDirection = \"asc\" | \"desc\";\n\nexport type ColumnAlign =\n | \"left\"\n | \"right\"\n | \"center\"\n | \"justify\"\n | \"inherit\"\n | undefined;\n\nexport type Column<T> = {\n key: string;\n title: string;\n sortColumn?: keyof T;\n render: (data: T) => ReactNode;\n align?: ColumnAlign;\n width?: number; //明示的に横幅を指定する場合\n};\n\n/**\n * テーブルコンポーネントのプロパティ\n * @template Key テーブルのキーとして使用される型\n * @template T テーブルデータの型\n */\ntype Props<Key extends keyof T, T> = {\n /** テーブルのカラム定義 */\n columns: Column<T>[];\n\n /** テーブルのデータリスト */\n dataList?: T[];\n\n /** 総データ数 */\n totalCount: number;\n\n /** 現在のページ番号 (1始まり) */\n currentPage: number;\n\n /** 1ページあたりのデータ数 */\n pageSize: number;\n\n /** ページサイズセレクタで選択可能な値 */\n pageSizeSelectorValues?: PageSelectorValue[];\n\n /** 各行のキーとなるカラム名 */\n keyColumn: Key;\n\n /** 現在のソート対象カラム名 */\n sortColumn?: keyof T;\n\n /** 現在のソート方向 */\n sortDirection?: SortDirection;\n\n /** データがロード中かどうか */\n isLoading: boolean;\n\n /**\n * 行がクリックされた際に呼び出されるコールバック\n * セットがない場合は行はクリックできません。\n * @param {T} data クリックされた行のデータ\n */\n onClickRow?: (data: T) => void;\n\n /**\n * ソート条件が変更された際に呼び出されるコールバック\n * セットがない場合ソートは効きません。\n * @param {keyof T} sortColumn ソート対象のカラム名\n * @param {SortDirection} sortDirection ソート方向\n */\n onChangeSort?: (sortColumn: keyof T, sortDirection: SortDirection) => void;\n\n /**\n * ページが変更された際に呼び出されるコールバック\n * セットがない場合ページ遷移の要素そのものが表示されません。\n * @param {number} page 選択されたページ番号\n */\n onChangePage?: (page: number) => void;\n\n /**\n * ページサイズが変更された際に呼び出されるコールバック\n * セットがない場合ページサイズセレクター要素そのものが表示されません。\n * @param {number} pageSize 選択されたページサイズ\n */\n onChangePageSize?: (pageSize: number) => void;\n\n /** テーブルのボーダーを表示するかどうか (undefinedとfalseは同義) */\n showBorder?: boolean;\n};\n\nexport const DataTable = <\n Key extends keyof T,\n T extends Record<Key, string | number>,\n>(\n props: Props<Key, T>,\n) => {\n const {\n columns,\n dataList,\n totalCount,\n currentPage,\n pageSize,\n pageSizeSelectorValues: pageSizeValues,\n keyColumn,\n sortColumn,\n sortDirection,\n isLoading,\n onClickRow,\n onChangeSort,\n onChangePage,\n onChangePageSize,\n showBorder,\n } = props;\n\n // TODO: この辺はあとで修正します。lintで引っかかるので一旦ダミー実装\n if (isLoading) {\n return <span>読み込み中</span>;\n }\n\n if (!dataList) {\n return <span>データの取得ができませんでした。</span>;\n }\n\n if (dataList?.length === 0) {\n return <span>データがありません。</span>;\n }\n\n const pageCount = Math.ceil(totalCount / pageSize);\n const activePage = currentPage - 1;\n const startRecordNum = activePage * pageSize + 1;\n const endRecordNum = startRecordNum - 1 + (dataList?.length ?? 0);\n\n return (\n <>\n <div className={styles.contentContainer}>\n {onChangePageSize && (\n <PageSizeSelector\n startRecordNum={startRecordNum}\n endRecordNum={endRecordNum}\n values={pageSizeValues}\n defaultValue={pageSize}\n totalCount={totalCount}\n onChangePageSize={onChangePageSize}\n />\n )}\n <div\n className={classNames(styles.scrollableTableContainer, {\n [styles.nonBorder]: showBorder === false,\n })}\n >\n <Table className={styles.table}>\n <TableHead>\n <TableRow className={styles.header}>\n {columns.map((column) => (\n <th\n className={classNames(styles.th, {\n [styles.clickable]: column.sortColumn && onChangeSort,\n })}\n key={column.key}\n >\n <div\n className={styles.headerCell}\n onClick={() => {\n if (column.sortColumn && onChangeSort) {\n if (column.sortColumn === sortColumn) {\n onChangeSort(\n column.sortColumn,\n sortDirection === \"asc\" ? \"desc\" : \"asc\",\n );\n } else {\n onChangeSort(column.sortColumn, \"asc\");\n }\n }\n }}\n >\n {column.title}\n {column.sortColumn && (\n <div className={styles.sortIcons}>\n <BiSolidUpArrow\n className={classNames(styles.sortIcon, {\n [styles.selected]:\n column.sortColumn === sortColumn &&\n sortDirection === \"asc\",\n })}\n />\n <BiSolidDownArrow\n className={classNames(styles.sortIcon, {\n [styles.selected]:\n column.sortColumn === sortColumn &&\n sortDirection === \"desc\",\n })}\n />\n </div>\n )}\n </div>\n </th>\n ))}\n </TableRow>\n </TableHead>\n <TableBody>\n {dataList.map((data) => {\n return (\n <TableRow\n className={classNames(styles.row, {\n [styles.clickable]: onClickRow,\n })}\n key={data[keyColumn]}\n onClick={() => {\n if (onClickRow) {\n onClickRow(data);\n }\n }}\n >\n {columns.map((column) => (\n <TableCell\n className={styles.td}\n key={column.key}\n //\n // FIXME: 子オブジェクトから値を抽出したり、変換処理が入るため、一概にdata[column.key]の型だけで表示に必要な型を判定させられないのでコメントアウト\n // align={\n // column.align ??\n // typeof data[column.key as Key] === \"number\"\n // ? \"right\"\n // : undefined\n // }\n //\n align={column.align}\n sx={{\n width: column.width ? `${column.width}px` : undefined, // widthが存在する場合のみ適用\n }}\n >\n {column.render(data)}\n </TableCell>\n ))}\n </TableRow>\n );\n })}\n </TableBody>\n </Table>\n </div>\n {onChangePage && (\n <Pagination\n pageCount={pageCount}\n activePage={activePage}\n onChangePage={onChangePage}\n />\n )}\n </div>\n </>\n );\n};\n\nexport default DataTable;\n"],"names":["DataTable","props","columns","dataList","totalCount","currentPage","pageSize","pageSizeValues","keyColumn","sortColumn","sortDirection","isLoading","onClickRow","onChangeSort","onChangePage","onChangePageSize","showBorder","jsx","pageCount","activePage","startRecordNum","endRecordNum","Fragment","jsxs","styles","PageSizeSelector","classNames","Table","TableHead","TableRow","column","BiSolidUpArrow","BiSolidDownArrow","TableBody","data","TableCell","Pagination"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../src/components/DataTable/index.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableRow,\n} from \"@mui/material\";\nimport classNames from \"classnames\";\nimport { BiSolidDownArrow, BiSolidUpArrow } from \"react-icons/bi\";\n\nimport {\n PageSelectorValue,\n PageSizeSelector,\n} from \"@/components/PageSizeSelector\";\nimport { Pagination } from \"@/components/Pagination\";\nimport styles from \"./index.module.scss\";\n\nexport type SortDirection = \"asc\" | \"desc\";\n\nexport type ColumnAlign =\n | \"left\"\n | \"right\"\n | \"center\"\n | \"justify\"\n | \"inherit\"\n | undefined;\n\nexport type Column<T> = {\n key: string;\n title: string;\n sortColumn?: keyof T;\n render: (data: T) => ReactNode;\n align?: ColumnAlign;\n width?: number; //明示的に横幅を指定する場合\n};\n\n/**\n * テーブルコンポーネントのプロパティ\n * @template Key テーブルのキーとして使用される型\n * @template T テーブルデータの型\n */\ntype Props<Key extends keyof T, T> = {\n /** テーブルのカラム定義 */\n columns: Column<T>[];\n\n /** テーブルのデータリスト */\n dataList?: T[];\n\n /** 総データ数 */\n totalCount: number;\n\n /** 現在のページ番号 (1始まり) */\n currentPage: number;\n\n /** 1ページあたりのデータ数 */\n pageSize: number;\n\n /** ページサイズセレクタで選択可能な値 */\n pageSizeSelectorValues?: PageSelectorValue[];\n\n /** 各行のキーとなるカラム名 */\n keyColumn: Key;\n\n /** 現在のソート対象カラム名 */\n sortColumn?: keyof T;\n\n /** 現在のソート方向 */\n sortDirection?: SortDirection;\n\n /** データがロード中かどうか */\n isLoading: boolean;\n\n /**\n * 行がクリックされた際に呼び出されるコールバック\n * セットがない場合は行はクリックできません。\n * @param {T} data クリックされた行のデータ\n */\n onClickRow?: (data: T) => void;\n\n /**\n * ソート条件が変更された際に呼び出されるコールバック\n * セットがない場合ソートは効きません。\n * @param {keyof T} sortColumn ソート対象のカラム名\n * @param {SortDirection} sortDirection ソート方向\n */\n onChangeSort?: (sortColumn: keyof T, sortDirection: SortDirection) => void;\n\n /**\n * ページが変更された際に呼び出されるコールバック\n * セットがない場合ページ遷移の要素そのものが表示されません。\n * @param {number} page 選択されたページ番号\n */\n onChangePage?: (page: number) => void;\n\n /**\n * ページサイズが変更された際に呼び出されるコールバック\n * セットがない場合ページサイズセレクター要素そのものが表示されません。\n * @param {number} pageSize 選択されたページサイズ\n */\n onChangePageSize?: (pageSize: number) => void;\n\n /** テーブルのボーダーを表示するかどうか (undefinedとfalseは同義) */\n showBorder?: boolean;\n};\n\nexport const DataTable = <\n Key extends keyof T,\n T extends Record<Key, string | number>,\n>(\n props: Props<Key, T>,\n) => {\n const {\n columns,\n dataList,\n totalCount,\n currentPage,\n pageSize,\n pageSizeSelectorValues: pageSizeValues,\n keyColumn,\n sortColumn,\n sortDirection,\n isLoading,\n onClickRow,\n onChangeSort,\n onChangePage,\n onChangePageSize,\n showBorder,\n } = props;\n\n // TODO: この辺はあとで修正します。lintで引っかかるので一旦ダミー実装\n if (isLoading) {\n return <span>読み込み中</span>;\n }\n\n if (!dataList) {\n return <span>データの取得ができませんでした。</span>;\n }\n\n if (dataList?.length === 0) {\n return <span>データがありません。</span>;\n }\n\n const pageCount = Math.ceil(totalCount / pageSize);\n const activePage = currentPage - 1;\n const startRecordNum = activePage * pageSize + 1;\n const endRecordNum = startRecordNum - 1 + (dataList?.length ?? 0);\n\n return (\n <>\n <div className={styles.contentContainer}>\n {onChangePageSize && (\n <PageSizeSelector\n startRecordNum={startRecordNum}\n endRecordNum={endRecordNum}\n values={pageSizeValues}\n defaultValue={pageSize}\n totalCount={totalCount}\n onChangePageSize={onChangePageSize}\n />\n )}\n <div\n className={classNames(styles.scrollableTableContainer, {\n [styles.nonBorder]: showBorder === false,\n })}\n >\n <Table className={styles.table}>\n <TableHead>\n <TableRow className={styles.header}>\n {columns.map((column) => (\n <th\n className={classNames(styles.th, {\n [styles.clickable]: column.sortColumn && onChangeSort,\n })}\n key={column.key}\n >\n <div\n className={styles.headerCell}\n onClick={() => {\n if (column.sortColumn && onChangeSort) {\n if (column.sortColumn === sortColumn) {\n onChangeSort(\n column.sortColumn,\n sortDirection === \"asc\" ? \"desc\" : \"asc\",\n );\n } else {\n onChangeSort(column.sortColumn, \"asc\");\n }\n }\n }}\n >\n {column.title}\n {column.sortColumn && (\n <div className={styles.sortIcons}>\n <BiSolidUpArrow\n className={classNames(styles.sortIcon, {\n [styles.selected]:\n column.sortColumn === sortColumn &&\n sortDirection === \"asc\",\n })}\n />\n <BiSolidDownArrow\n className={classNames(styles.sortIcon, {\n [styles.selected]:\n column.sortColumn === sortColumn &&\n sortDirection === \"desc\",\n })}\n />\n </div>\n )}\n </div>\n </th>\n ))}\n </TableRow>\n </TableHead>\n <TableBody>\n {dataList.map((data) => {\n return (\n <TableRow\n className={classNames(styles.row, {\n [styles.clickable]: onClickRow,\n })}\n key={data[keyColumn]}\n onClick={() => {\n if (onClickRow) {\n onClickRow(data);\n }\n }}\n >\n {columns.map((column) => (\n <TableCell\n className={styles.td}\n key={column.key}\n //\n // FIXME: 子オブジェクトから値を抽出したり、変換処理が入るため、一概にdata[column.key]の型だけで表示に必要な型を判定させられないのでコメントアウト\n // align={\n // column.align ??\n // typeof data[column.key as Key] === \"number\"\n // ? \"right\"\n // : undefined\n // }\n //\n align={column.align}\n sx={{\n width: column.width ? `${column.width}px` : undefined, // widthが存在する場合のみ適用\n }}\n >\n {column.render(data)}\n </TableCell>\n ))}\n </TableRow>\n );\n })}\n </TableBody>\n </Table>\n </div>\n {onChangePage && (\n <Pagination\n pageCount={pageCount}\n activePage={activePage}\n onChangePage={onChangePage}\n />\n )}\n </div>\n </>\n );\n};\n\nexport default DataTable;\n"],"names":["DataTable","props","columns","dataList","totalCount","currentPage","pageSize","pageSizeValues","keyColumn","sortColumn","sortDirection","isLoading","onClickRow","onChangeSort","onChangePage","onChangePageSize","showBorder","jsx","pageCount","activePage","startRecordNum","endRecordNum","Fragment","jsxs","styles","PageSizeSelector","classNames","Table","TableHead","TableRow","column","BiSolidUpArrow","BiSolidDownArrow","TableBody","data","TableCell","Pagination"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../../../src/components/DataTable/index.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableRow,\n} from \"@mui/material\";\nimport classNames from \"classnames\";\nimport { BiSolidDownArrow, BiSolidUpArrow } from \"react-icons/bi\";\n\nimport {\n PageSelectorValue,\n PageSizeSelector,\n} from \"@/components/PageSizeSelector\";\nimport { Pagination } from \"@/components/Pagination\";\nimport styles from \"./index.module.scss\";\n\nexport type SortDirection = \"asc\" | \"desc\";\n\nexport type ColumnAlign =\n | \"left\"\n | \"right\"\n | \"center\"\n | \"justify\"\n | \"inherit\"\n | undefined;\n\nexport type Column<T> = {\n key: string;\n title: string;\n sortColumn?: keyof T;\n render: (data: T) => ReactNode;\n align?: ColumnAlign;\n width?: number; //明示的に横幅を指定する場合\n};\n\n/**\n * テーブルコンポーネントのプロパティ\n * @template Key テーブルのキーとして使用される型\n * @template T テーブルデータの型\n */\ntype Props<Key extends keyof T, T> = {\n /** テーブルのカラム定義 */\n columns: Column<T>[];\n\n /** テーブルのデータリスト */\n dataList?: T[];\n\n /** 総データ数 */\n totalCount: number;\n\n /** 現在のページ番号 (1始まり) */\n currentPage: number;\n\n /** 1ページあたりのデータ数 */\n pageSize: number;\n\n /** ページサイズセレクタで選択可能な値 */\n pageSizeSelectorValues?: PageSelectorValue[];\n\n /** 各行のキーとなるカラム名 */\n keyColumn: Key;\n\n /** 現在のソート対象カラム名 */\n sortColumn?: keyof T;\n\n /** 現在のソート方向 */\n sortDirection?: SortDirection;\n\n /** データがロード中かどうか */\n isLoading: boolean;\n\n /**\n * 行がクリックされた際に呼び出されるコールバック\n * セットがない場合は行はクリックできません。\n * @param {T} data クリックされた行のデータ\n */\n onClickRow?: (data: T) => void;\n\n /**\n * ソート条件が変更された際に呼び出されるコールバック\n * セットがない場合ソートは効きません。\n * @param {keyof T} sortColumn ソート対象のカラム名\n * @param {SortDirection} sortDirection ソート方向\n */\n onChangeSort?: (sortColumn: keyof T, sortDirection: SortDirection) => void;\n\n /**\n * ページが変更された際に呼び出されるコールバック\n * セットがない場合ページ遷移の要素そのものが表示されません。\n * @param {number} page 選択されたページ番号\n */\n onChangePage?: (page: number) => void;\n\n /**\n * ページサイズが変更された際に呼び出されるコールバック\n * セットがない場合ページサイズセレクター要素そのものが表示されません。\n * @param {number} pageSize 選択されたページサイズ\n */\n onChangePageSize?: (pageSize: number) => void;\n\n /** テーブルのボーダーを表示するかどうか (undefinedとfalseは同義) */\n showBorder?: boolean;\n};\n\nexport const DataTable = <\n Key extends keyof T,\n T extends Record<Key, string | number>,\n>(\n props: Props<Key, T>,\n) => {\n const {\n columns,\n dataList,\n totalCount,\n currentPage,\n pageSize,\n pageSizeSelectorValues: pageSizeValues,\n keyColumn,\n sortColumn,\n sortDirection,\n isLoading,\n onClickRow,\n onChangeSort,\n onChangePage,\n onChangePageSize,\n showBorder,\n } = props;\n\n // TODO: この辺はあとで修正します。lintで引っかかるので一旦ダミー実装\n if (isLoading) {\n return <span>読み込み中</span>;\n }\n\n if (!dataList) {\n return <span>データの取得ができませんでした。</span>;\n }\n\n if (dataList?.length === 0) {\n return <span>データがありません。</span>;\n }\n\n const pageCount = Math.ceil(totalCount / pageSize);\n const activePage = currentPage - 1;\n const startRecordNum = activePage * pageSize + 1;\n const endRecordNum = startRecordNum - 1 + (dataList?.length ?? 0);\n\n return (\n <>\n <div className={styles.contentContainer}>\n {onChangePageSize && (\n <PageSizeSelector\n startRecordNum={startRecordNum}\n endRecordNum={endRecordNum}\n values={pageSizeValues}\n defaultValue={pageSize}\n totalCount={totalCount}\n onChangePageSize={onChangePageSize}\n />\n )}\n <div\n className={classNames(styles.scrollableTableContainer, {\n [styles.nonBorder]: showBorder === false,\n })}\n >\n <Table className={styles.table}>\n <TableHead>\n <TableRow className={styles.header}>\n {columns.map((column) => (\n <th\n className={classNames(styles.th, {\n [styles.clickable]: column.sortColumn && onChangeSort,\n })}\n key={column.key}\n >\n <div\n className={styles.headerCell}\n onClick={() => {\n if (column.sortColumn && onChangeSort) {\n if (column.sortColumn === sortColumn) {\n onChangeSort(\n column.sortColumn,\n sortDirection === \"asc\" ? \"desc\" : \"asc\",\n );\n } else {\n onChangeSort(column.sortColumn, \"asc\");\n }\n }\n }}\n >\n {column.title}\n {column.sortColumn && (\n <div className={styles.sortIcons}>\n <BiSolidUpArrow\n className={classNames(styles.sortIcon, {\n [styles.selected]:\n column.sortColumn === sortColumn &&\n sortDirection === \"asc\",\n })}\n />\n <BiSolidDownArrow\n className={classNames(styles.sortIcon, {\n [styles.selected]:\n column.sortColumn === sortColumn &&\n sortDirection === \"desc\",\n })}\n />\n </div>\n )}\n </div>\n </th>\n ))}\n </TableRow>\n </TableHead>\n <TableBody>\n {dataList.map((data) => {\n return (\n <TableRow\n className={classNames(styles.row, {\n [styles.clickable]: onClickRow,\n })}\n key={data[keyColumn]}\n onClick={() => {\n if (onClickRow) {\n onClickRow(data);\n }\n }}\n >\n {columns.map((column) => (\n <TableCell\n className={styles.td}\n key={column.key}\n //\n // FIXME: 子オブジェクトから値を抽出したり、変換処理が入るため、一概にdata[column.key]の型だけで表示に必要な型を判定させられないのでコメントアウト\n // align={\n // column.align ??\n // typeof data[column.key as Key] === \"number\"\n // ? \"right\"\n // : undefined\n // }\n //\n align={column.align}\n sx={{\n width: column.width ? `${column.width}px` : undefined, // widthが存在する場合のみ適用\n }}\n >\n {column.render(data)}\n </TableCell>\n ))}\n </TableRow>\n );\n })}\n </TableBody>\n </Table>\n </div>\n {onChangePage && (\n <Pagination\n pageCount={pageCount}\n activePage={activePage}\n onChangePage={onChangePage}\n />\n )}\n </div>\n </>\n );\n};\n\nexport default DataTable;\n"],"names":["DataTable","props","columns","dataList","totalCount","currentPage","pageSize","pageSizeValues","keyColumn","sortColumn","sortDirection","isLoading","onClickRow","onChangeSort","onChangePage","onChangePageSize","showBorder","jsx","pageCount","activePage","startRecordNum","endRecordNum","Fragment","jsxs","styles","PageSizeSelector","classNames","Table","TableHead","TableRow","column","BiSolidUpArrow","BiSolidDownArrow","TableBody","data","TableCell","Pagination"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../../../src/components/DataTable/index.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableRow,\n} from \"@mui/material\";\nimport classNames from \"classnames\";\nimport { BiSolidDownArrow, BiSolidUpArrow } from \"react-icons/bi\";\n\nimport {\n PageSelectorValue,\n PageSizeSelector,\n} from \"@/components/PageSizeSelector\";\nimport { Pagination } from \"@/components/Pagination\";\nimport styles from \"./index.module.scss\";\n\nexport type SortDirection = \"asc\" | \"desc\";\n\nexport type ColumnAlign =\n | \"left\"\n | \"right\"\n | \"center\"\n | \"justify\"\n | \"inherit\"\n | undefined;\n\nexport type Column<T> = {\n key: string;\n title: string;\n sortColumn?: keyof T;\n render: (data: T) => ReactNode;\n align?: ColumnAlign;\n width?: number; //明示的に横幅を指定する場合\n};\n\n/**\n * テーブルコンポーネントのプロパティ\n * @template Key テーブルのキーとして使用される型\n * @template T テーブルデータの型\n */\ntype Props<Key extends keyof T, T> = {\n /** テーブルのカラム定義 */\n columns: Column<T>[];\n\n /** テーブルのデータリスト */\n dataList?: T[];\n\n /** 総データ数 */\n totalCount: number;\n\n /** 現在のページ番号 (1始まり) */\n currentPage: number;\n\n /** 1ページあたりのデータ数 */\n pageSize: number;\n\n /** ページサイズセレクタで選択可能な値 */\n pageSizeSelectorValues?: PageSelectorValue[];\n\n /** 各行のキーとなるカラム名 */\n keyColumn: Key;\n\n /** 現在のソート対象カラム名 */\n sortColumn?: keyof T;\n\n /** 現在のソート方向 */\n sortDirection?: SortDirection;\n\n /** データがロード中かどうか */\n isLoading: boolean;\n\n /**\n * 行がクリックされた際に呼び出されるコールバック\n * セットがない場合は行はクリックできません。\n * @param {T} data クリックされた行のデータ\n */\n onClickRow?: (data: T) => void;\n\n /**\n * ソート条件が変更された際に呼び出されるコールバック\n * セットがない場合ソートは効きません。\n * @param {keyof T} sortColumn ソート対象のカラム名\n * @param {SortDirection} sortDirection ソート方向\n */\n onChangeSort?: (sortColumn: keyof T, sortDirection: SortDirection) => void;\n\n /**\n * ページが変更された際に呼び出されるコールバック\n * セットがない場合ページ遷移の要素そのものが表示されません。\n * @param {number} page 選択されたページ番号\n */\n onChangePage?: (page: number) => void;\n\n /**\n * ページサイズが変更された際に呼び出されるコールバック\n * セットがない場合ページサイズセレクター要素そのものが表示されません。\n * @param {number} pageSize 選択されたページサイズ\n */\n onChangePageSize?: (pageSize: number) => void;\n\n /** テーブルのボーダーを表示するかどうか (undefinedとfalseは同義) */\n showBorder?: boolean;\n};\n\nexport const DataTable = <\n Key extends keyof T,\n T extends Record<Key, string | number>,\n>(\n props: Props<Key, T>,\n) => {\n const {\n columns,\n dataList,\n totalCount,\n currentPage,\n pageSize,\n pageSizeSelectorValues: pageSizeValues,\n keyColumn,\n sortColumn,\n sortDirection,\n isLoading,\n onClickRow,\n onChangeSort,\n onChangePage,\n onChangePageSize,\n showBorder,\n } = props;\n\n // TODO: この辺はあとで修正します。lintで引っかかるので一旦ダミー実装\n if (isLoading) {\n return <span>読み込み中</span>;\n }\n\n if (!dataList) {\n return <span>データの取得ができませんでした。</span>;\n }\n\n if (dataList?.length === 0) {\n return <span>データがありません。</span>;\n }\n\n const pageCount = Math.ceil(totalCount / pageSize);\n const activePage = currentPage - 1;\n const startRecordNum = activePage * pageSize + 1;\n const endRecordNum = startRecordNum - 1 + (dataList?.length ?? 0);\n\n return (\n <>\n <div className={styles.contentContainer}>\n {onChangePageSize && (\n <PageSizeSelector\n startRecordNum={startRecordNum}\n endRecordNum={endRecordNum}\n values={pageSizeValues}\n defaultValue={pageSize}\n totalCount={totalCount}\n onChangePageSize={onChangePageSize}\n />\n )}\n <div\n className={classNames(styles.scrollableTableContainer, {\n [styles.nonBorder]: showBorder === false,\n })}\n >\n <Table className={styles.table}>\n <TableHead>\n <TableRow className={styles.header}>\n {columns.map((column) => (\n <th\n className={classNames(styles.th, {\n [styles.clickable]: column.sortColumn && onChangeSort,\n })}\n key={column.key}\n >\n <div\n className={styles.headerCell}\n onClick={() => {\n if (column.sortColumn && onChangeSort) {\n if (column.sortColumn === sortColumn) {\n onChangeSort(\n column.sortColumn,\n sortDirection === \"asc\" ? \"desc\" : \"asc\",\n );\n } else {\n onChangeSort(column.sortColumn, \"asc\");\n }\n }\n }}\n >\n {column.title}\n {column.sortColumn && (\n <div className={styles.sortIcons}>\n <BiSolidUpArrow\n className={classNames(styles.sortIcon, {\n [styles.selected]:\n column.sortColumn === sortColumn &&\n sortDirection === \"asc\",\n })}\n />\n <BiSolidDownArrow\n className={classNames(styles.sortIcon, {\n [styles.selected]:\n column.sortColumn === sortColumn &&\n sortDirection === \"desc\",\n })}\n />\n </div>\n )}\n </div>\n </th>\n ))}\n </TableRow>\n </TableHead>\n <TableBody>\n {dataList.map((data) => {\n return (\n <TableRow\n className={classNames(styles.row, {\n [styles.clickable]: onClickRow,\n })}\n key={data[keyColumn]}\n onClick={() => {\n if (onClickRow) {\n onClickRow(data);\n }\n }}\n >\n {columns.map((column) => (\n <TableCell\n className={styles.td}\n key={column.key}\n //\n // FIXME: 子オブジェクトから値を抽出したり、変換処理が入るため、一概にdata[column.key]の型だけで表示に必要な型を判定させられないのでコメントアウト\n // align={\n // column.align ??\n // typeof data[column.key as Key] === \"number\"\n // ? \"right\"\n // : undefined\n // }\n //\n align={column.align}\n sx={{\n width: column.width ? `${column.width}px` : undefined, // widthが存在する場合のみ適用\n }}\n >\n {column.render(data)}\n </TableCell>\n ))}\n </TableRow>\n );\n })}\n </TableBody>\n </Table>\n </div>\n {onChangePage && (\n <Pagination\n pageCount={pageCount}\n activePage={activePage}\n onChangePage={onChangePage}\n />\n )}\n </div>\n </>\n );\n};\n\nexport default DataTable;\n"],"names":["DataTable","props","columns","dataList","totalCount","currentPage","pageSize","pageSizeValues","keyColumn","sortColumn","sortDirection","isLoading","onClickRow","onChangeSort","onChangePage","onChangePageSize","showBorder","jsx","pageCount","activePage","startRecordNum","endRecordNum","Fragment","jsxs","styles","PageSizeSelector","classNames","Table","TableHead","TableRow","column","BiSolidUpArrow","BiSolidDownArrow","TableBody","data","TableCell","Pagination"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const r=require("react/jsx-runtime"),e=require("../../react.esm-
|
|
1
|
+
"use strict";const r=require("react/jsx-runtime"),e=require("../../react.esm-BcRJ42eI.cjs"),i=require("../../index-Bbj4TMfJ.cjs");require("../../index-9p9q0wxE.cjs");const s=require("./index.cjs.js"),h=[{id:"1",name:"Alice"},{id:"2",name:"Bob"}],x=[{key:"id",title:"ID",sortColumn:"id",render:t=>t.id,width:100},{key:"name",title:"Name",render:t=>t.name}],c={columns:x,dataList:h,totalCount:2,keyColumn:"id",currentPage:1,pageSize:10,sortColumn:"id",sortDirection:"asc",isLoading:!1,onChangePage:()=>{}};describe("Given DataTable",()=>{it("Then renders column headers",()=>{e.render(r.jsx(s.DataTable,{...c})),expect(e.screen.getByText("ID")).toBeInTheDocument(),expect(e.screen.getByText("Name")).toBeInTheDocument()}),it("Then renders data rows",()=>{e.render(r.jsx(s.DataTable,{...c})),expect(e.screen.getByText("1",{selector:"td"})).toBeInTheDocument(),expect(e.screen.getByText("Alice")).toBeInTheDocument(),expect(e.screen.getByText("2",{selector:"td"})).toBeInTheDocument(),expect(e.screen.getByText("Bob")).toBeInTheDocument()}),it("When row is clicked, Then triggers onClickRow",async()=>{const t=i.userEvent.setup(),n=jest.fn(),o={...c,onClickRow:n};e.render(r.jsx(s.DataTable,{...o})),await t.click(e.screen.getByText("Alice")),expect(n).toHaveBeenCalledWith(h[0])}),it("When header 'asc' is clicked, Then triggers onChangeSort with 'desc'",async()=>{const t=i.userEvent.setup(),n=jest.fn(),o={...c,onChangeSort:n};e.render(r.jsx(s.DataTable,{...o})),await t.click(e.screen.getByText("ID")),expect(n).toHaveBeenCalledWith("id","desc")}),it("When header 'desc' is clicked, Then triggers onChangeSort with 'asc'",async()=>{const t=i.userEvent.setup(),n=jest.fn(),o={...c,onChangeSort:n,sortDirection:"desc"};e.render(r.jsx(s.DataTable,{...o})),await t.click(e.screen.getByText("ID")),expect(n).toHaveBeenCalledWith("id","asc")}),it("When showBorder is true, Then table cells have borders",()=>{const t={...c,showBorder:!0},{container:n}=e.render(r.jsx(s.DataTable,{...t})),o=n.querySelectorAll("td");expect(o.length).toBeGreaterThan(0);const a=o[0],l=window.getComputedStyle(a);expect(l.border).not.toBe("none")}),it("When showBorder is false or undefined, Then table cells have no borders",()=>{const t={...c,showBorder:!1},{container:n}=e.render(r.jsx(s.DataTable,{...t})),o=n.querySelectorAll("td");expect(o.length).toBeGreaterThan(0);const a=o[0];expect(a).toHaveStyle({border:"none"});const{container:l}=e.render(r.jsx(s.DataTable,{...c})),d=l.querySelectorAll("td");expect(d.length).toBeGreaterThan(0);const u=d[0];expect(u).toHaveStyle({border:"none"})}),it("When column has width property, Then table cell has correct width style",()=>{const{container:t}=e.render(r.jsx(s.DataTable,{...c})),n=t.querySelector("td:first-child");expect(n).toBeInTheDocument(),expect(n).toHaveStyle({width:"100px"})})});
|
|
2
2
|
//# sourceMappingURL=index.test.cjs.js.map
|