@comet/admin 9.0.0-beta.5 → 9.0.0-beta.6

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.
Files changed (118) hide show
  1. package/lib/common/ClearInputAdornment.d.ts.map +1 -1
  2. package/lib/common/ClearInputAdornment.js +6 -2
  3. package/lib/dataGrid/excelExport/generateExcelFile.d.ts.map +1 -1
  4. package/lib/dataGrid/excelExport/generateExcelFile.js +23 -1
  5. package/lib/dateTime/timePicker/TimePicker.d.ts.map +1 -1
  6. package/lib/dateTime/timePicker/TimePicker.js +2 -17
  7. package/lib/dateTime/timeRangePicker/TimeRangePicker.d.ts +71 -0
  8. package/lib/dateTime/timeRangePicker/TimeRangePicker.d.ts.map +1 -0
  9. package/lib/dateTime/timeRangePicker/TimeRangePicker.js +191 -0
  10. package/lib/dateTime/timeRangePickerField/TimeRangePickerField.d.ts +13 -0
  11. package/lib/dateTime/timeRangePickerField/TimeRangePickerField.d.ts.map +1 -0
  12. package/lib/dateTime/timeRangePickerField/TimeRangePickerField.js +31 -0
  13. package/lib/dateTime/utils.d.ts +6 -0
  14. package/lib/dateTime/utils.d.ts.map +1 -1
  15. package/lib/dateTime/utils.js +19 -1
  16. package/lib/{EditDialog.d.ts → editDialog/EditDialog.d.ts} +1 -1
  17. package/lib/editDialog/EditDialog.d.ts.map +1 -0
  18. package/lib/{EditDialog.js → editDialog/EditDialog.js} +5 -5
  19. package/lib/editDialog/EditDialogApiContext.d.ts.map +1 -0
  20. package/lib/form/FinalFormNumberInput.d.ts.map +1 -1
  21. package/lib/form/FinalFormNumberInput.js +2 -3
  22. package/lib/index.d.ts +4 -2
  23. package/lib/index.d.ts.map +1 -1
  24. package/lib/index.js +4 -2
  25. package/package.json +19 -12
  26. package/lib/EditDialog.d.ts.map +0 -1
  27. package/lib/EditDialogApiContext.d.ts.map +0 -1
  28. package/lib/alert/__stories__/Alert.stories.js +0 -152
  29. package/lib/common/__stories__/Tooltip.stories.js +0 -404
  30. package/lib/common/buttons/__stories__/Button.stories.js +0 -445
  31. package/lib/common/buttons/delete/__stories__/DeleteButton.stories.js +0 -8
  32. package/lib/common/toolbar/__stories__/DataGridToolbar.stories.js +0 -76
  33. package/lib/common/toolbar/__stories__/Toolbar.stories.js +0 -82
  34. package/lib/dataGrid/__stories__/ClickableRows.stories.js +0 -109
  35. package/lib/dataGrid/__stories__/CrudMoreActionsMenu.stories.js +0 -50
  36. package/lib/dataGrid/__stories__/DataGrid.stories.js +0 -94
  37. package/lib/dataGrid/__stories__/DataGridSingleSelectFilter.stories.js +0 -492
  38. package/lib/dateTime/datePicker/__stories__/DatePicker.stories.js +0 -214
  39. package/lib/dateTime/datePickerField/__stories__/DatePickerField.stories.js +0 -220
  40. package/lib/dateTime/dateRangePicker/__stories__/DateRangePicker.stories.js +0 -238
  41. package/lib/dateTime/dateRangePickerField/__stories__/DateRangePickerField.stories.js +0 -224
  42. package/lib/dateTime/dateTimePicker/__stories__/DateTimePicker.stories.js +0 -214
  43. package/lib/dateTime/dateTimePickerField/__stories__/DateTimePickerField.stories.js +0 -220
  44. package/lib/dateTime/dateTimeRangePicker/__stories__/DateTimeRangePicker.stories.js +0 -238
  45. package/lib/dateTime/dateTimeRangePickerField/__stories__/DateTimeRangePickerField.stories.js +0 -223
  46. package/lib/dateTime/timePicker/__stories__/TimePicker.stories.js +0 -219
  47. package/lib/dateTime/timePickerField/__stories__/TimePickerField.stories.js +0 -229
  48. package/lib/form/__stories__/AsyncAutocompleteField.stories.js +0 -660
  49. package/lib/form/__stories__/AsyncSelectField.stories.js +0 -513
  50. package/lib/form/__stories__/Autocomplete.stories.js +0 -188
  51. package/lib/form/__stories__/AutocompleteField.stories.js +0 -48
  52. package/lib/form/__stories__/Checkbox.stories.js +0 -70
  53. package/lib/form/__stories__/CheckboxField.stories.js +0 -87
  54. package/lib/form/__stories__/CheckboxListField.stories.js +0 -172
  55. package/lib/form/__stories__/CustomButtons.stories.js +0 -78
  56. package/lib/form/__stories__/DependentAsyncSelects.stories.js +0 -91
  57. package/lib/form/__stories__/DisableAutoNavigation.stories.js +0 -132
  58. package/lib/form/__stories__/DisabledSubmitIfNotDirty.stories.js +0 -54
  59. package/lib/form/__stories__/FieldContainer.stories.js +0 -87
  60. package/lib/form/__stories__/FinalFormFileSelect.stories.js +0 -155
  61. package/lib/form/__stories__/FormInStack.stories.js +0 -133
  62. package/lib/form/__stories__/FormLayouts.stories.js +0 -174
  63. package/lib/form/__stories__/FormValidation.stories.js +0 -82
  64. package/lib/form/__stories__/Input.stories.js +0 -37
  65. package/lib/form/__stories__/NumberField.stories.js +0 -38
  66. package/lib/form/__stories__/Radio.stories.js +0 -101
  67. package/lib/form/__stories__/RadioGroupField.stories.js +0 -172
  68. package/lib/form/__stories__/RangeInput.stories.js +0 -239
  69. package/lib/form/__stories__/RouterTabs.stories.js +0 -96
  70. package/lib/form/__stories__/RouterTabsInForm.stories.js +0 -73
  71. package/lib/form/__stories__/RouterTabsInFormWithSubroutes.stories.js +0 -96
  72. package/lib/form/__stories__/ScrollToErrorField.stories.js +0 -82
  73. package/lib/form/__stories__/SearchField.stories.js +0 -38
  74. package/lib/form/__stories__/Select.stories.js +0 -187
  75. package/lib/form/__stories__/SelectField.stories.js +0 -100
  76. package/lib/form/__stories__/ShowErrorStrategies.stories.js +0 -107
  77. package/lib/form/__stories__/SingleTextField.stories.js +0 -108
  78. package/lib/form/__stories__/StackInForm.stories.js +0 -53
  79. package/lib/form/__stories__/SubmitErrors.stories.js +0 -90
  80. package/lib/form/__stories__/Switch.stories.js +0 -49
  81. package/lib/form/__stories__/SwitchField.stories.js +0 -87
  82. package/lib/form/__stories__/Tabs.stories.js +0 -78
  83. package/lib/form/__stories__/TextAreaField.stories.js +0 -38
  84. package/lib/form/__stories__/TextField.stories.js +0 -67
  85. package/lib/form/__stories__/ToggleButtonGroupField.stories.js +0 -312
  86. package/lib/form/__stories__/TwoLevelValidation.stories.js +0 -168
  87. package/lib/form/__stories__/Typography.stories.js +0 -71
  88. package/lib/form/file/__stories__/FileDropzone.stories.js +0 -81
  89. package/lib/form/file/__stories__/FileSelect.stories.js +0 -139
  90. package/lib/form/file/__stories__/FileSelectListItem.stories.js +0 -108
  91. package/lib/form/file/__stories__/FileSelectMultipleExamples.stories.js +0 -187
  92. package/lib/section/__stories__/SectionHeadline.stories.js +0 -71
  93. package/lib/stack/__stories__/RouterTabsNestedStack.stories.js +0 -51
  94. package/lib/stack/__stories__/Stack.stories.js +0 -14
  95. package/lib/stack/__stories__/StackBackButton.stories.js +0 -50
  96. package/lib/stack/__stories__/StackBreadcrumbs.stories.js +0 -139
  97. package/lib/stack/__stories__/StackBreadcrumbsTabs.stories.js +0 -47
  98. package/lib/stack/__stories__/StackCustomSeparator.stories.js +0 -47
  99. package/lib/stack/__stories__/StackLink.stories.js +0 -41
  100. package/lib/stack/__stories__/StackNested.stories.js +0 -58
  101. package/lib/stack/__stories__/StackNestedOnInitialPage.stories.js +0 -78
  102. package/lib/stack/__stories__/StackNestedOneStack.stories.js +0 -90
  103. package/lib/stack/__stories__/StackPageTitle.stories.js +0 -121
  104. package/lib/stack/__stories__/StackReactNodeTitle.stories.js +0 -54
  105. package/lib/stack/__stories__/StackRefApi.stories.js +0 -56
  106. package/lib/stack/__stories__/StackTableFormQueryAtStack.stories.js +0 -155
  107. package/lib/stack/__stories__/StackTableFormQueryInTable.stories.js +0 -160
  108. package/lib/stack/__stories__/StackUrl.stories.js +0 -66
  109. package/lib/tabs/__stories__/DynamicTabs.stories.js +0 -84
  110. package/lib/tabs/__stories__/NestedStackSwitchWithRouterTabs.stories.js +0 -84
  111. package/lib/tabs/__stories__/OverflowIssues.stories.js +0 -224
  112. package/lib/tabs/__stories__/RouterTabs.stories.js +0 -31
  113. package/lib/tabs/__stories__/RouterTabsInStack.stories.js +0 -74
  114. package/lib/tabs/__stories__/RouterTabsInSubroute.stories.js +0 -68
  115. package/lib/tabs/__stories__/Tabs.stories.js +0 -219
  116. package/lib/translator/__stories__/ContentTranslation.stories.js +0 -104
  117. /package/lib/{EditDialogApiContext.d.ts → editDialog/EditDialogApiContext.d.ts} +0 -0
  118. /package/lib/{EditDialogApiContext.js → editDialog/EditDialogApiContext.js} +0 -0
@@ -1,160 +0,0 @@
1
- function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
2
- var _templateObject, _templateObject2;
3
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
4
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
5
- function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
6
- function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
7
- function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
8
- function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
9
- import { gql, useQuery } from "@apollo/client";
10
- import { Field, FinalForm, FinalFormInput, Loading, MainContent, Stack, StackPage, StackSwitch, StackSwitchApiContext, Table, TableFilterFinalForm, TableQuery, Toolbar, ToolbarBackButton, ToolbarItem, usePersistedStateId, useTableQuery, useTableQueryFilter } from "@comet/admin";
11
- import { Edit } from "@comet/admin-icons";
12
- import { Card, CardContent, Grid, IconButton, Typography } from "@mui/material";
13
- import { useContext } from "react";
14
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
15
- var query = gql(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n query users($query: String) {\n users(query: $query) {\n id\n name\n username\n email\n }\n }\n"])));
16
- function ExampleTable(props) {
17
- var filterApi = useTableQueryFilter({
18
- query: ""
19
- }, {
20
- persistedStateId: props.persistedStateId
21
- });
22
- var _useTableQuery = useTableQuery()(query, {
23
- variables: _objectSpread({}, filterApi.current),
24
- resolveTableData: function resolveTableData(data) {
25
- return {
26
- data: data.users,
27
- totalCount: data.users.length
28
- };
29
- }
30
- }),
31
- tableData = _useTableQuery.tableData,
32
- api = _useTableQuery.api,
33
- loading = _useTableQuery.loading,
34
- error = _useTableQuery.error;
35
- var stackApi = useContext(StackSwitchApiContext);
36
- return /*#__PURE__*/_jsxs(TableQuery, {
37
- api: api,
38
- loading: loading,
39
- error: error,
40
- children: [/*#__PURE__*/_jsxs(Toolbar, {
41
- children: [/*#__PURE__*/_jsx(ToolbarItem, {
42
- children: /*#__PURE__*/_jsx(Typography, {
43
- variant: "h3",
44
- children: "Stack Table Form Query In Table"
45
- })
46
- }), /*#__PURE__*/_jsx(ToolbarItem, {
47
- children: /*#__PURE__*/_jsx(TableFilterFinalForm, {
48
- filterApi: filterApi,
49
- children: /*#__PURE__*/_jsx(Field, {
50
- name: "query",
51
- type: "text",
52
- component: FinalFormInput,
53
- fullWidth: true
54
- })
55
- })
56
- })]
57
- }), tableData && /*#__PURE__*/_jsx(MainContent, {
58
- children: /*#__PURE__*/_jsx(Table, _objectSpread(_objectSpread({}, tableData), {}, {
59
- columns: [{
60
- name: "name",
61
- header: "Name"
62
- }, {
63
- name: "edit",
64
- header: "",
65
- cellProps: {
66
- padding: "none"
67
- },
68
- render: function render(row) {
69
- return /*#__PURE__*/_jsx(Grid, {
70
- children: /*#__PURE__*/_jsx(IconButton, {
71
- onClick: function onClick() {
72
- stackApi.activatePage("form", String(row.id));
73
- },
74
- size: "large",
75
- children: /*#__PURE__*/_jsx(Edit, {})
76
- })
77
- });
78
- }
79
- }]
80
- }))
81
- })]
82
- });
83
- }
84
- function ExampleForm(props) {
85
- var detailQuery = gql(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n query user($id: Int) {\n user(id: $id) {\n id\n name\n }\n }\n "])));
86
- var _useQuery = useQuery(detailQuery, {
87
- variables: {
88
- id: props.id
89
- }
90
- }),
91
- loading = _useQuery.loading,
92
- data = _useQuery.data,
93
- error = _useQuery.error;
94
- if (error) {
95
- return /*#__PURE__*/_jsxs("p", {
96
- children: ["Error :( ", error.toString()]
97
- });
98
- }
99
- return /*#__PURE__*/_jsxs(_Fragment, {
100
- children: [/*#__PURE__*/_jsxs(Toolbar, {
101
- children: [/*#__PURE__*/_jsx(ToolbarBackButton, {}), /*#__PURE__*/_jsx(ToolbarItem, {
102
- children: /*#__PURE__*/_jsx(Typography, {
103
- variant: "h3",
104
- children: "Stack Table Form Query In Table - Detail"
105
- })
106
- })]
107
- }), /*#__PURE__*/_jsx(MainContent, {
108
- fullHeight: true,
109
- children: loading || !data ? /*#__PURE__*/_jsx(Loading, {
110
- behavior: "fillParent"
111
- }) : /*#__PURE__*/_jsx(Card, {
112
- variant: "outlined",
113
- children: /*#__PURE__*/_jsx(CardContent, {
114
- children: /*#__PURE__*/_jsx(FinalForm, {
115
- mode: "edit",
116
- onSubmit: function onSubmit(values) {
117
- // submit here
118
- },
119
- initialValues: data.user,
120
- children: /*#__PURE__*/_jsx(Field, {
121
- label: "Name",
122
- name: "name",
123
- defaultOptions: true,
124
- required: true,
125
- component: FinalFormInput
126
- })
127
- })
128
- })
129
- })
130
- })]
131
- });
132
- }
133
- export default {
134
- title: "components/stack/StackTableFormQueryInTable"
135
- };
136
- export var StackTableFormQueryInTable = {
137
- render: function render() {
138
- var persistedStateId = usePersistedStateId();
139
- return /*#__PURE__*/_jsx(Stack, {
140
- topLevelTitle: "Stack",
141
- children: /*#__PURE__*/_jsxs(StackSwitch, {
142
- children: [/*#__PURE__*/_jsx(StackPage, {
143
- name: "table",
144
- children: /*#__PURE__*/_jsx(ExampleTable, {
145
- persistedStateId: persistedStateId
146
- })
147
- }), /*#__PURE__*/_jsx(StackPage, {
148
- name: "form",
149
- title: "bearbeiten",
150
- children: function children(selectedId) {
151
- return /*#__PURE__*/_jsx(ExampleForm, {
152
- id: +selectedId
153
- });
154
- }
155
- })]
156
- })
157
- });
158
- },
159
- name: "Stack Table Form Query in Table"
160
- };
@@ -1,66 +0,0 @@
1
- import { Stack, StackBreadcrumbs, StackLink, StackPage, StackSwitch } from "@comet/admin";
2
- import { useLocation } from "react-router";
3
- import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
4
- export default {
5
- title: "components/stack/StackUrl"
6
- };
7
- export var StackUrl = {
8
- render: function render() {
9
- var location = useLocation();
10
- return /*#__PURE__*/_jsxs(_Fragment, {
11
- children: [/*#__PURE__*/_jsxs("p", {
12
- children: ["Pathname: ", location.pathname]
13
- }), /*#__PURE__*/_jsxs(Stack, {
14
- topLevelTitle: "Stack Url",
15
- children: [/*#__PURE__*/_jsx(StackBreadcrumbs, {}), /*#__PURE__*/_jsxs(StackSwitch, {
16
- children: [/*#__PURE__*/_jsxs(StackPage, {
17
- name: "page1",
18
- children: [/*#__PURE__*/_jsx("h3", {
19
- children: "Page 1"
20
- }), /*#__PURE__*/_jsx(StackLink, {
21
- pageName: "page2",
22
- payload: "test",
23
- children: "go to page 2"
24
- })]
25
- }), /*#__PURE__*/_jsxs(StackPage, {
26
- name: "page2",
27
- children: [/*#__PURE__*/_jsx("h3", {
28
- children: "Page 2"
29
- }), /*#__PURE__*/_jsx("p", {
30
- children: /*#__PURE__*/_jsx(StackLink, {
31
- pageName: "page1",
32
- payload: "test",
33
- children: "go to page 1"
34
- })
35
- }), /*#__PURE__*/_jsxs(StackSwitch, {
36
- children: [/*#__PURE__*/_jsxs(StackPage, {
37
- name: "page2-1",
38
- children: [/*#__PURE__*/_jsx("h3", {
39
- children: "Page 2-1"
40
- }), /*#__PURE__*/_jsx("p", {
41
- children: /*#__PURE__*/_jsx(StackLink, {
42
- pageName: "page2-2",
43
- payload: "test",
44
- children: "go to page 2-2"
45
- })
46
- })]
47
- }), /*#__PURE__*/_jsxs(StackPage, {
48
- name: "page2-2",
49
- children: [/*#__PURE__*/_jsx("h3", {
50
- children: "Page 2-2"
51
- }), /*#__PURE__*/_jsx("p", {
52
- children: /*#__PURE__*/_jsx(StackLink, {
53
- pageName: "page2-1",
54
- payload: "test",
55
- children: "go to page 2-1"
56
- })
57
- })]
58
- })]
59
- })]
60
- })]
61
- })]
62
- })]
63
- });
64
- },
65
- name: "StackUrl"
66
- };
@@ -1,84 +0,0 @@
1
- function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
2
- function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
3
- function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
4
- function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
5
- function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
6
- function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
7
- import { Button, RouterTab, RouterTabs, Tab, Tabs } from "@comet/admin";
8
- import { Typography } from "@mui/material";
9
- import { useState } from "react";
10
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
11
- export var DynamicRouterTabs = function DynamicRouterTabs(_ref) {
12
- var showFourthTab = _ref.showFourthTab;
13
- var content = ["Two", "Three"];
14
- return /*#__PURE__*/_jsxs(RouterTabs, {
15
- children: [/*#__PURE__*/_jsx(RouterTab, {
16
- label: "One",
17
- path: "",
18
- children: "One"
19
- }), content.map(function (value) {
20
- return /*#__PURE__*/_jsx(RouterTab, {
21
- label: value,
22
- path: "/".concat(value),
23
- children: value
24
- }, value);
25
- }), showFourthTab && /*#__PURE__*/_jsx(RouterTab, {
26
- label: "Four",
27
- path: "/four",
28
- children: "Four"
29
- })]
30
- });
31
- };
32
- export var DynamicTabs = function DynamicTabs(_ref2) {
33
- var showFourthTab = _ref2.showFourthTab;
34
- var content = ["Two", "Three"];
35
- return /*#__PURE__*/_jsxs(Tabs, {
36
- children: [/*#__PURE__*/_jsx(Tab, {
37
- label: "One",
38
- children: "One"
39
- }), content.map(function (value) {
40
- return /*#__PURE__*/_jsx(Tab, {
41
- label: value,
42
- children: value
43
- }, value);
44
- }), showFourthTab && /*#__PURE__*/_jsx(Tab, {
45
- label: "Four",
46
- children: "Four"
47
- })]
48
- });
49
- };
50
- export default {
51
- title: "components/tabs/Dynamic Tabs",
52
- excludeStories: ["DynamicRouterTabs", "DynamicTabs"]
53
- };
54
- export var DynamicTabsAndRouterTabs = {
55
- render: function render() {
56
- var _useState = useState(false),
57
- _useState2 = _slicedToArray(_useState, 2),
58
- showFourthTab = _useState2[0],
59
- setShowFourthTab = _useState2[1];
60
- return /*#__PURE__*/_jsxs(_Fragment, {
61
- children: [/*#__PURE__*/_jsxs(Button, {
62
- onClick: function onClick() {
63
- return setShowFourthTab(function (show) {
64
- return !show;
65
- });
66
- },
67
- children: [showFourthTab ? "Hide" : "Show", " fourth tab"]
68
- }), /*#__PURE__*/_jsx(Typography, {
69
- py: 4,
70
- variant: "h2",
71
- children: "Tabs:"
72
- }), /*#__PURE__*/_jsx(DynamicTabs, {
73
- showFourthTab: showFourthTab
74
- }), /*#__PURE__*/_jsx(Typography, {
75
- py: 4,
76
- variant: "h2",
77
- children: "RouterTabs:"
78
- }), /*#__PURE__*/_jsx(DynamicRouterTabs, {
79
- showFourthTab: showFourthTab
80
- })]
81
- });
82
- },
83
- name: "Dynamic Tabs and RouterTabs"
84
- };
@@ -1,84 +0,0 @@
1
- import { RouterTab, RouterTabs, Stack, StackBreadcrumbs, StackPage, StackSwitch } from "@comet/admin";
2
- import { useLocation } from "react-router";
3
- import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
4
- export default {
5
- title: "components/tabs/Nested StackSwitch with RouterTabs"
6
- };
7
- export var NestedStackSwitchWithRouterTabs = {
8
- render: function render() {
9
- var location = useLocation();
10
- return /*#__PURE__*/_jsxs("div", {
11
- children: [/*#__PURE__*/_jsxs("p", {
12
- children: ["Location: ", location.pathname]
13
- }), /*#__PURE__*/_jsxs(Stack, {
14
- topLevelTitle: "Root Stack",
15
- children: [/*#__PURE__*/_jsx(StackBreadcrumbs, {}), /*#__PURE__*/_jsxs(RouterTabs, {
16
- children: [/*#__PURE__*/_jsx(RouterTab, {
17
- label: "Page 1",
18
- path: "",
19
- children: /*#__PURE__*/_jsxs(StackSwitch, {
20
- children: [/*#__PURE__*/_jsx(StackPage, {
21
- name: "table",
22
- children: /*#__PURE__*/_jsxs(RouterTabs, {
23
- children: [/*#__PURE__*/_jsx(RouterTab, {
24
- label: "Page 3",
25
- path: "",
26
- children: "Page 3"
27
- }), /*#__PURE__*/_jsxs(RouterTab, {
28
- label: "Page 4",
29
- path: "/page4",
30
- children: ["Now the first level of RouterTabs (Page 1 and 2) disappeared", /*#__PURE__*/_jsxs(StackSwitch, {
31
- children: [/*#__PURE__*/_jsx(StackPage, {
32
- name: "table",
33
- children: /*#__PURE__*/_jsxs(RouterTabs, {
34
- children: [/*#__PURE__*/_jsx(RouterTab, {
35
- label: "Page 5",
36
- path: "",
37
- children: "Page 5"
38
- }), /*#__PURE__*/_jsxs(RouterTab, {
39
- label: "Page 6",
40
- path: "/page6",
41
- children: ["Now the second level of RouterTabs (Page 3 and 4) also disappeared", /*#__PURE__*/_jsxs(StackSwitch, {
42
- children: [/*#__PURE__*/_jsx(StackPage, {
43
- name: "table",
44
- children: /*#__PURE__*/_jsxs(RouterTabs, {
45
- children: [/*#__PURE__*/_jsx(RouterTab, {
46
- label: "Page 7",
47
- path: "",
48
- children: "Page 7"
49
- }), /*#__PURE__*/_jsx(RouterTab, {
50
- label: "Page 8",
51
- path: "/page8",
52
- children: "Page 8"
53
- })]
54
- })
55
- }), /*#__PURE__*/_jsx(StackPage, {
56
- name: "stackpage-4",
57
- children: "StackPage 4"
58
- })]
59
- })]
60
- })]
61
- })
62
- }), /*#__PURE__*/_jsx(StackPage, {
63
- name: "stackpage-3",
64
- children: "StackPage 3"
65
- })]
66
- })]
67
- })]
68
- })
69
- }), /*#__PURE__*/_jsx(StackPage, {
70
- name: "stackpage-2",
71
- children: "StackPage 2"
72
- })]
73
- })
74
- }), /*#__PURE__*/_jsx(RouterTab, {
75
- label: "Page 2",
76
- path: "/page2",
77
- children: "Page 2"
78
- })]
79
- })]
80
- })]
81
- });
82
- },
83
- name: "Nested StackSwitch with RouterTabs"
84
- };
@@ -1,224 +0,0 @@
1
- function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
2
- function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
3
- function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
4
- function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
5
- function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
6
- function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
7
- import { MainContent, RouterTab, RouterTabs, Toolbar, ToolbarAutomaticTitleItem } from "@comet/admin";
8
- import { Box, Tab, Tabs, Typography } from "@mui/material";
9
- import { useState } from "react";
10
- import { MasterLayoutDecorator } from "../../../.storybook/decorators/MasterLayout.decorator";
11
-
12
- // Make sure the story is not too tall and can be scrolled - setting the story-height in the config only affects the min-height and does not make the content scrollable
13
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
14
- var MaxHeightDecorator = function MaxHeightDecorator(Story) {
15
- return /*#__PURE__*/_jsx(Box, {
16
- maxHeight: "400px",
17
- children: /*#__PURE__*/_jsx(Story, {})
18
- });
19
- };
20
- var storyConfig = {
21
- title: "components/tabs/Overflow Issues",
22
- decorators: [MaxHeightDecorator],
23
- parameters: {
24
- docs: {
25
- description: {
26
- component: "This story is for debugging an issue where using certain content inside MasterLayout causes the content to overflow the page."
27
- }
28
- }
29
- }
30
- };
31
- export default storyConfig;
32
- var numberOfTabs = 20;
33
- var ExampleContentBlock = function ExampleContentBlock() {
34
- return /*#__PURE__*/_jsx(Box, {
35
- sx: function sx(theme) {
36
- return {
37
- width: 200,
38
- height: "150vh",
39
- borderRadius: theme.shape.borderRadius,
40
- backgroundColor: theme.palette.grey[100]
41
- };
42
- }
43
- });
44
- };
45
- export var RouterTabsInMasterContent = {
46
- decorators: [MasterLayoutDecorator],
47
- parameters: {
48
- layout: "none",
49
- stack: {
50
- topLevelTitle: "Example Page"
51
- }
52
- },
53
- render: function render() {
54
- return /*#__PURE__*/_jsx(MainContent, {
55
- children: /*#__PURE__*/_jsx(RouterTabs, {
56
- children: Array.from({
57
- length: numberOfTabs
58
- }, function (_, index) {
59
- return /*#__PURE__*/_jsxs(RouterTab, {
60
- path: index === 0 ? "" : "/lorem-ipsum-".concat(index + 1),
61
- label: "Lorem ipsum ".concat(index + 1),
62
- children: [/*#__PURE__*/_jsxs(Typography, {
63
- variant: "h2",
64
- gutterBottom: true,
65
- children: ["Lorem ipsum ", index + 1]
66
- }), /*#__PURE__*/_jsx(ExampleContentBlock, {})]
67
- }, index);
68
- })
69
- })
70
- });
71
- }
72
- };
73
- export var RouterTabsInMasterContentWithToolbar = {
74
- decorators: [MasterLayoutDecorator],
75
- parameters: {
76
- layout: "none",
77
- stack: {
78
- topLevelTitle: "Example Page"
79
- }
80
- },
81
- render: function render() {
82
- return /*#__PURE__*/_jsxs(_Fragment, {
83
- children: [/*#__PURE__*/_jsx(Toolbar, {
84
- children: /*#__PURE__*/_jsx(ToolbarAutomaticTitleItem, {})
85
- }), /*#__PURE__*/_jsx(MainContent, {
86
- children: /*#__PURE__*/_jsx(RouterTabs, {
87
- children: Array.from({
88
- length: numberOfTabs
89
- }, function (_, index) {
90
- return /*#__PURE__*/_jsxs(RouterTab, {
91
- path: index === 0 ? "" : "/lorem-ipsum-".concat(index + 1),
92
- label: "Lorem ipsum ".concat(index + 1),
93
- children: [/*#__PURE__*/_jsxs(Typography, {
94
- variant: "h2",
95
- gutterBottom: true,
96
- children: ["Lorem ipsum ", index + 1]
97
- }), /*#__PURE__*/_jsx(ExampleContentBlock, {})]
98
- }, index);
99
- })
100
- })
101
- })]
102
- });
103
- }
104
- };
105
- export var MuiTabsInMasterContent = {
106
- decorators: [MasterLayoutDecorator],
107
- parameters: {
108
- layout: "none",
109
- stack: {
110
- topLevelTitle: "Example Page"
111
- }
112
- },
113
- render: function render() {
114
- var _useState = useState(0),
115
- _useState2 = _slicedToArray(_useState, 2),
116
- activeTabIndex = _useState2[0],
117
- setActiveTabIndex = _useState2[1];
118
- return /*#__PURE__*/_jsxs(MainContent, {
119
- children: [/*#__PURE__*/_jsx(Tabs, {
120
- variant: "scrollable",
121
- value: activeTabIndex,
122
- onChange: function onChange(_, index) {
123
- return setActiveTabIndex(index);
124
- },
125
- children: Array.from({
126
- length: numberOfTabs
127
- }, function (_, index) {
128
- return /*#__PURE__*/_jsx(Tab, {
129
- label: "Lorem ipsum ".concat(index + 1)
130
- }, index);
131
- })
132
- }), /*#__PURE__*/_jsx(ExampleContentBlock, {})]
133
- });
134
- }
135
- };
136
- export var MuiTabsInMasterContentWithToolbar = {
137
- decorators: [MasterLayoutDecorator],
138
- parameters: {
139
- layout: "none",
140
- stack: {
141
- topLevelTitle: "Example Page"
142
- }
143
- },
144
- render: function render() {
145
- var _useState3 = useState(0),
146
- _useState4 = _slicedToArray(_useState3, 2),
147
- activeTabIndex = _useState4[0],
148
- setActiveTabIndex = _useState4[1];
149
- return /*#__PURE__*/_jsxs(_Fragment, {
150
- children: [/*#__PURE__*/_jsx(Toolbar, {
151
- children: /*#__PURE__*/_jsx(ToolbarAutomaticTitleItem, {})
152
- }), /*#__PURE__*/_jsxs(MainContent, {
153
- children: [/*#__PURE__*/_jsx(Tabs, {
154
- variant: "scrollable",
155
- value: activeTabIndex,
156
- onChange: function onChange(_, index) {
157
- return setActiveTabIndex(index);
158
- },
159
- children: Array.from({
160
- length: numberOfTabs
161
- }, function (_, index) {
162
- return /*#__PURE__*/_jsx(Tab, {
163
- label: "Lorem ipsum ".concat(index + 1)
164
- }, index);
165
- })
166
- }), /*#__PURE__*/_jsx(ExampleContentBlock, {})]
167
- })]
168
- });
169
- }
170
- };
171
- export var RouterTabsInMainContent = {
172
- parameters: {
173
- layout: "none",
174
- stack: {
175
- topLevelTitle: "Example Page"
176
- }
177
- },
178
- render: function render() {
179
- return /*#__PURE__*/_jsx(MainContent, {
180
- children: /*#__PURE__*/_jsx(RouterTabs, {
181
- children: Array.from({
182
- length: numberOfTabs
183
- }, function (_, index) {
184
- return /*#__PURE__*/_jsxs(RouterTab, {
185
- path: index === 0 ? "" : "/lorem-ipsum-".concat(index + 1),
186
- label: "Lorem ipsum ".concat(index + 1),
187
- children: [/*#__PURE__*/_jsxs(Typography, {
188
- variant: "h2",
189
- gutterBottom: true,
190
- children: ["Lorem ipsum ", index + 1]
191
- }), /*#__PURE__*/_jsx(ExampleContentBlock, {})]
192
- }, index);
193
- })
194
- })
195
- });
196
- }
197
- };
198
- export var MuiTabsInMainContent = {
199
- parameters: {
200
- layout: "none"
201
- },
202
- render: function render() {
203
- var _useState5 = useState(0),
204
- _useState6 = _slicedToArray(_useState5, 2),
205
- activeTabIndex = _useState6[0],
206
- setActiveTabIndex = _useState6[1];
207
- return /*#__PURE__*/_jsxs(MainContent, {
208
- children: [/*#__PURE__*/_jsx(Tabs, {
209
- variant: "scrollable",
210
- value: activeTabIndex,
211
- onChange: function onChange(_, index) {
212
- return setActiveTabIndex(index);
213
- },
214
- children: Array.from({
215
- length: numberOfTabs
216
- }, function (_, index) {
217
- return /*#__PURE__*/_jsx(Tab, {
218
- label: "Lorem ipsum ".concat(index + 1)
219
- }, index);
220
- })
221
- }), /*#__PURE__*/_jsx(ExampleContentBlock, {})]
222
- });
223
- }
224
- };
@@ -1,31 +0,0 @@
1
- import { RouterTab, RouterTabs } from "@comet/admin";
2
- import { useLocation } from "react-router";
3
- import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
4
- export default {
5
- title: "components/tabs/RouterTabs"
6
- };
7
- export var Basic = {
8
- render: function render() {
9
- var location = useLocation();
10
- return /*#__PURE__*/_jsxs("div", {
11
- children: [/*#__PURE__*/_jsxs("p", {
12
- children: ["Location: ", location.pathname]
13
- }), /*#__PURE__*/_jsxs(RouterTabs, {
14
- children: [/*#__PURE__*/_jsx(RouterTab, {
15
- path: "",
16
- label: "Label One",
17
- children: "Content One"
18
- }), /*#__PURE__*/_jsx(RouterTab, {
19
- path: "/tab2",
20
- label: "Label Two",
21
- children: "Content Two"
22
- }), /*#__PURE__*/_jsx(RouterTab, {
23
- path: "/tab3",
24
- label: "Label Three",
25
- children: "Content Three"
26
- })]
27
- })]
28
- });
29
- },
30
- name: "RouterTabs"
31
- };