@spothero/ui 21.4.0 → 21.6.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/CreatableSelect/CreatableSelect.js +125 -0
- package/dist/components/CreatableSelect/CreatableSelect.stories.js +55 -0
- package/dist/components/CreatableSelect/index.js +13 -0
- package/dist/components/Menu/Menu.js +16 -0
- package/dist/components/Menu/Menu.stories.js +159 -0
- package/dist/components/Menu/Menu.styles.js +173 -0
- package/dist/components/Menu/index.js +56 -0
- package/dist/components/Table/index.js +6 -0
- package/dist/components/index.js +87 -1
- package/dist/components/styles.js +8 -1
- package/package.json +6 -6
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = exports.CreatableSelectNode = void 0;
|
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
9
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
+
var _creatable = _interopRequireDefault(require("react-select/creatable"));
|
|
11
|
+
var _reactSelect = require("react-select");
|
|
12
|
+
var _chevronDown = _interopRequireDefault(require("@spothero/icons/chevron-down"));
|
|
13
|
+
var _react2 = require("@chakra-ui/react");
|
|
14
|
+
var _FormControl = _interopRequireDefault(require("../FormControl/FormControl"));
|
|
15
|
+
var _Icon = _interopRequireDefault(require("../Icon/Icon"));
|
|
16
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
17
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
18
|
+
const DropdownIndicator = props => {
|
|
19
|
+
const {
|
|
20
|
+
sizes
|
|
21
|
+
} = (0, _react2.useTheme)();
|
|
22
|
+
return /*#__PURE__*/_react.default.createElement(_reactSelect.components.DropdownIndicator, props, /*#__PURE__*/_react.default.createElement(_Icon.default, {
|
|
23
|
+
className: "CreatableSelect-dropdown-icon",
|
|
24
|
+
as: _chevronDown.default,
|
|
25
|
+
boxSize: sizes['2.5']
|
|
26
|
+
}));
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
// Exporting without forwardRef for storybook to work
|
|
30
|
+
const CreatableSelectNode = _ref => {
|
|
31
|
+
let {
|
|
32
|
+
id,
|
|
33
|
+
label,
|
|
34
|
+
isInvalid = false,
|
|
35
|
+
isLoading = false,
|
|
36
|
+
isRequired,
|
|
37
|
+
options = [],
|
|
38
|
+
placeholder = '',
|
|
39
|
+
errorMessage,
|
|
40
|
+
helperText,
|
|
41
|
+
innerRef,
|
|
42
|
+
...props
|
|
43
|
+
} = _ref;
|
|
44
|
+
const {
|
|
45
|
+
colors,
|
|
46
|
+
fontSizes
|
|
47
|
+
} = (0, _react2.useTheme)();
|
|
48
|
+
if (innerRef) {
|
|
49
|
+
props.ref = innerRef;
|
|
50
|
+
}
|
|
51
|
+
const customStyles = {
|
|
52
|
+
control: (provided, state) => ({
|
|
53
|
+
...provided,
|
|
54
|
+
borderColor: isInvalid ? colors.error : state.isFocused ? colors.primary.default : colors.gray['200'],
|
|
55
|
+
borderWidth: '1px',
|
|
56
|
+
boxShadow: 'none',
|
|
57
|
+
'&:hover': {
|
|
58
|
+
borderColor: isInvalid ? colors.error : state.isFocused ? colors.primary.default : colors.gray['200']
|
|
59
|
+
}
|
|
60
|
+
}),
|
|
61
|
+
placeholder: provided => ({
|
|
62
|
+
...provided,
|
|
63
|
+
fontSize: fontSizes.sm,
|
|
64
|
+
color: colors.gray['200']
|
|
65
|
+
}),
|
|
66
|
+
dropdownIndicator: provided => ({
|
|
67
|
+
...provided,
|
|
68
|
+
color: colors.brandBlue,
|
|
69
|
+
'&:hover': {
|
|
70
|
+
color: colors.brandBlue
|
|
71
|
+
}
|
|
72
|
+
}),
|
|
73
|
+
indicatorSeparator: provided => ({
|
|
74
|
+
...provided,
|
|
75
|
+
display: 'none'
|
|
76
|
+
})
|
|
77
|
+
};
|
|
78
|
+
return /*#__PURE__*/_react.default.createElement(_FormControl.default, {
|
|
79
|
+
errorMessage: errorMessage,
|
|
80
|
+
isRequired: isRequired,
|
|
81
|
+
isInvalid: isInvalid,
|
|
82
|
+
helperText: helperText,
|
|
83
|
+
label: label,
|
|
84
|
+
inputId: id
|
|
85
|
+
}, /*#__PURE__*/_react.default.createElement(_creatable.default, (0, _extends2.default)({
|
|
86
|
+
id: id,
|
|
87
|
+
components: {
|
|
88
|
+
DropdownIndicator
|
|
89
|
+
},
|
|
90
|
+
styles: customStyles,
|
|
91
|
+
options: options,
|
|
92
|
+
placeholder: placeholder,
|
|
93
|
+
isLoading: isLoading
|
|
94
|
+
}, props)));
|
|
95
|
+
};
|
|
96
|
+
exports.CreatableSelectNode = CreatableSelectNode;
|
|
97
|
+
const CreatableSelect = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
|
|
98
|
+
const {
|
|
99
|
+
id,
|
|
100
|
+
label,
|
|
101
|
+
isInvalid = false,
|
|
102
|
+
isLoading = false,
|
|
103
|
+
isRequired,
|
|
104
|
+
options = [],
|
|
105
|
+
placeholder = '',
|
|
106
|
+
errorMessage,
|
|
107
|
+
helperText,
|
|
108
|
+
...additionalProps
|
|
109
|
+
} = props;
|
|
110
|
+
return /*#__PURE__*/_react.default.createElement(CreatableSelectNode, (0, _extends2.default)({
|
|
111
|
+
id: id,
|
|
112
|
+
innerRef: ref,
|
|
113
|
+
label: label,
|
|
114
|
+
options: options,
|
|
115
|
+
placeholder: placeholder,
|
|
116
|
+
helperText: helperText,
|
|
117
|
+
errorMessage: errorMessage,
|
|
118
|
+
isLoading: isLoading,
|
|
119
|
+
isInvalid: isInvalid,
|
|
120
|
+
isRequired: isRequired
|
|
121
|
+
}, additionalProps));
|
|
122
|
+
});
|
|
123
|
+
var _default = exports.default = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/_react.default.createElement(CreatableSelectNode, (0, _extends2.default)({
|
|
124
|
+
ref: ref
|
|
125
|
+
}, props)));
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = exports.CreatableSelect = void 0;
|
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
9
|
+
var _react = _interopRequireDefault(require("react"));
|
|
10
|
+
var _createControl = require("storybook/utils/create-control");
|
|
11
|
+
var _CreatableSelect = require("./CreatableSelect");
|
|
12
|
+
var _default = exports.default = {
|
|
13
|
+
title: 'v2/CreatableSelect',
|
|
14
|
+
component: _CreatableSelect.CreatableSelectNode,
|
|
15
|
+
parameters: {
|
|
16
|
+
removeBaseHtmlClass: true
|
|
17
|
+
},
|
|
18
|
+
argTypes: {
|
|
19
|
+
...(0, _createControl.createSelectControl)('createOptionPosition', ['first', 'last'])
|
|
20
|
+
},
|
|
21
|
+
args: {
|
|
22
|
+
label: 'Say Something',
|
|
23
|
+
isClearable: true,
|
|
24
|
+
placeholder: 'Please Say Anything or Select Something to Say...',
|
|
25
|
+
createOptionPosition: 'first',
|
|
26
|
+
isLoading: false,
|
|
27
|
+
isInvalid: false,
|
|
28
|
+
isRequired: false,
|
|
29
|
+
helperText: '',
|
|
30
|
+
errorMessage: 'Oh no'
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
const CreatableSelectTemplate = props => /*#__PURE__*/_react.default.createElement(_CreatableSelect.CreatableSelectNode, (0, _extends2.default)({
|
|
34
|
+
id: "say-something-select",
|
|
35
|
+
allowCreateWhileLoading: true,
|
|
36
|
+
createOptionPosition: "first",
|
|
37
|
+
options: [{
|
|
38
|
+
value: "",
|
|
39
|
+
label: "Say Nothing"
|
|
40
|
+
}, {
|
|
41
|
+
value: "hello",
|
|
42
|
+
label: "Hello"
|
|
43
|
+
}, {
|
|
44
|
+
value: "goodbye",
|
|
45
|
+
label: "Goodbye"
|
|
46
|
+
}, {
|
|
47
|
+
value: "cool",
|
|
48
|
+
label: "Cool"
|
|
49
|
+
}, {
|
|
50
|
+
value: "raisins",
|
|
51
|
+
label: "What is your opinion on raisins?"
|
|
52
|
+
}],
|
|
53
|
+
formatCreateLabel: other => `Say "${other}"`
|
|
54
|
+
}, props));
|
|
55
|
+
const CreatableSelect = exports.CreatableSelect = CreatableSelectTemplate.bind({});
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
Object.defineProperty(exports, "CreatableSelect", {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: function () {
|
|
10
|
+
return _CreatableSelect.default;
|
|
11
|
+
}
|
|
12
|
+
});
|
|
13
|
+
var _CreatableSelect = _interopRequireDefault(require("./CreatableSelect"));
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = void 0;
|
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
9
|
+
var _react = _interopRequireDefault(require("react"));
|
|
10
|
+
var _react2 = require("@chakra-ui/react");
|
|
11
|
+
const Menu = (0, _react2.forwardRef)((props, ref) => {
|
|
12
|
+
return /*#__PURE__*/_react.default.createElement(_react2.Menu, (0, _extends2.default)({}, props, {
|
|
13
|
+
ref: ref
|
|
14
|
+
}));
|
|
15
|
+
});
|
|
16
|
+
var _default = exports.default = Menu;
|
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = exports.Complex = exports.Basic = void 0;
|
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
9
|
+
var _react = _interopRequireDefault(require("react"));
|
|
10
|
+
var _Menu = _interopRequireDefault(require("./Menu"));
|
|
11
|
+
var _index = require("./index");
|
|
12
|
+
var _disableArgs = _interopRequireDefault(require("storybook/utils/disable-args"));
|
|
13
|
+
var _react2 = require("@chakra-ui/react");
|
|
14
|
+
var _default = exports.default = {
|
|
15
|
+
title: 'v2/Menu',
|
|
16
|
+
component: {
|
|
17
|
+
Menu: _Menu.default
|
|
18
|
+
},
|
|
19
|
+
parameters: {
|
|
20
|
+
importedBy: 'Menu',
|
|
21
|
+
removeBaseHtmlClass: true,
|
|
22
|
+
chakraLink: 'https://v1.chakra-ui.com/docs/components/overlay/menu'
|
|
23
|
+
},
|
|
24
|
+
argTypes: {
|
|
25
|
+
variant: {
|
|
26
|
+
control: {
|
|
27
|
+
type: 'select',
|
|
28
|
+
options: ['basic', 'full']
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
const BasicMenuTemplate = props => {
|
|
34
|
+
return /*#__PURE__*/_react.default.createElement(_Menu.default, props, /*#__PURE__*/_react.default.createElement(_index.MenuButton, null, "MenuItem"), /*#__PURE__*/_react.default.createElement(_index.MenuList, null, /*#__PURE__*/_react.default.createElement(_index.MenuOptionGroup, {
|
|
35
|
+
title: "Order",
|
|
36
|
+
type: "radio"
|
|
37
|
+
}, /*#__PURE__*/_react.default.createElement(_index.MenuItemOption, {
|
|
38
|
+
value: "asc"
|
|
39
|
+
}, "Ascending"), /*#__PURE__*/_react.default.createElement(_index.MenuItemOption, {
|
|
40
|
+
value: "desc"
|
|
41
|
+
}, "Descending")), /*#__PURE__*/_react.default.createElement(_index.MenuDivider, null), /*#__PURE__*/_react.default.createElement(_index.MenuOptionGroup, {
|
|
42
|
+
title: "Country",
|
|
43
|
+
type: "checkbox"
|
|
44
|
+
}, /*#__PURE__*/_react.default.createElement(_index.MenuItemOption, {
|
|
45
|
+
value: "email"
|
|
46
|
+
}, "Email"), /*#__PURE__*/_react.default.createElement(_index.MenuItemOption, {
|
|
47
|
+
value: "phone"
|
|
48
|
+
}, "Phone"), /*#__PURE__*/_react.default.createElement(_index.MenuItemOption, {
|
|
49
|
+
value: "country"
|
|
50
|
+
}, "Country")), /*#__PURE__*/_react.default.createElement(_index.MenuGroup, {
|
|
51
|
+
title: "Profile"
|
|
52
|
+
}, /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, "My Account"), /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, "Payments "))));
|
|
53
|
+
};
|
|
54
|
+
const ComplexMenuTemplate = props => {
|
|
55
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.Text, {
|
|
56
|
+
variant: "body2",
|
|
57
|
+
marginBottom: 8
|
|
58
|
+
}, "NOTE: This is a fairly contrived example. Chakra's", ' ', /*#__PURE__*/_react.default.createElement(_react2.Text, {
|
|
59
|
+
as: "code"
|
|
60
|
+
}, '<Menu />'), " (and child components) allow for the building of a complex menu using other components like", ' ', /*#__PURE__*/_react.default.createElement(_react2.Text, {
|
|
61
|
+
as: "code"
|
|
62
|
+
}, '<Flex />'), ",", ' ', /*#__PURE__*/_react.default.createElement(_react2.Text, {
|
|
63
|
+
as: "code"
|
|
64
|
+
}, '<Box />'), ",", ' ', /*#__PURE__*/_react.default.createElement(_react2.Text, {
|
|
65
|
+
as: "code"
|
|
66
|
+
}, '<Text />'), ", etc. The example below is leveraging the ", /*#__PURE__*/_react.default.createElement(_react2.Text, {
|
|
67
|
+
as: "code"
|
|
68
|
+
}, 'full'), " variant to allow for a more complex layout."), /*#__PURE__*/_react.default.createElement(_Menu.default, (0, _extends2.default)({}, props, {
|
|
69
|
+
placement: "bottom"
|
|
70
|
+
}), /*#__PURE__*/_react.default.createElement(_index.MenuButton, null, "Menu Button"), /*#__PURE__*/_react.default.createElement(_index.MenuList, null, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.Flex, {
|
|
71
|
+
gap: 4
|
|
72
|
+
}, /*#__PURE__*/_react.default.createElement(_react2.Text, {
|
|
73
|
+
fontSize: "sm",
|
|
74
|
+
fontWeight: "semibold"
|
|
75
|
+
}, "102 S Ada St. Chicago, IL"), /*#__PURE__*/_react.default.createElement(_react2.Text, {
|
|
76
|
+
fontSize: "sm"
|
|
77
|
+
}, "102 S Ada St. - Self Park Garage")), /*#__PURE__*/_react.default.createElement(_react2.Divider, {
|
|
78
|
+
marginY: 4
|
|
79
|
+
})), /*#__PURE__*/_react.default.createElement(_react2.Flex, {
|
|
80
|
+
alignItems: "flex-start",
|
|
81
|
+
gap: 2.5
|
|
82
|
+
}, /*#__PURE__*/_react.default.createElement(_index.MenuGroup, {
|
|
83
|
+
title: "Facility Management",
|
|
84
|
+
paddingX: 3.5
|
|
85
|
+
}, /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, /*#__PURE__*/_react.default.createElement(_react2.Text, {
|
|
86
|
+
fontSize: "sm"
|
|
87
|
+
}, "Location Information"), /*#__PURE__*/_react.default.createElement(_react2.Text, {
|
|
88
|
+
fontSize: "xs",
|
|
89
|
+
fontWeight: "light"
|
|
90
|
+
}, "Manage the details provided to drivers about a facility")), /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, /*#__PURE__*/_react.default.createElement(_react2.Text, {
|
|
91
|
+
fontSize: "sm"
|
|
92
|
+
}, "Changelog"), /*#__PURE__*/_react.default.createElement(_react2.Text, {
|
|
93
|
+
fontSize: "xs",
|
|
94
|
+
fontWeight: "light"
|
|
95
|
+
}, "Track changes made to your facilities")), /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, /*#__PURE__*/_react.default.createElement(_react2.Text, {
|
|
96
|
+
fontSize: "sm"
|
|
97
|
+
}, "Email Recipients"), /*#__PURE__*/_react.default.createElement(_react2.Text, {
|
|
98
|
+
fontSize: "xs",
|
|
99
|
+
fontWeight: "light"
|
|
100
|
+
}, "View recipients of recurring operational emails"))), /*#__PURE__*/_react.default.createElement(_react2.Box, {
|
|
101
|
+
height: 80
|
|
102
|
+
}, /*#__PURE__*/_react.default.createElement(_react2.Divider, {
|
|
103
|
+
orientation: "vertical"
|
|
104
|
+
})), /*#__PURE__*/_react.default.createElement(_index.MenuGroup, {
|
|
105
|
+
title: "Events",
|
|
106
|
+
paddingX: 3.5
|
|
107
|
+
}, /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, /*#__PURE__*/_react.default.createElement(_react2.Text, {
|
|
108
|
+
fontSize: "sm"
|
|
109
|
+
}, "Event Schedule"), /*#__PURE__*/_react.default.createElement(_react2.Text, {
|
|
110
|
+
fontSize: "xs",
|
|
111
|
+
fontWeight: "light"
|
|
112
|
+
}, "Manage upcoming event rates and track sales")), /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, /*#__PURE__*/_react.default.createElement(_react2.Text, {
|
|
113
|
+
fontSize: "sm"
|
|
114
|
+
}, "Event Pricing Defaults"), /*#__PURE__*/_react.default.createElement(_react2.Text, {
|
|
115
|
+
fontSize: "xs",
|
|
116
|
+
fontWeight: "light"
|
|
117
|
+
}, "Set rate and inventory rules for various types of events"))), /*#__PURE__*/_react.default.createElement(_react2.Box, {
|
|
118
|
+
height: 80
|
|
119
|
+
}, /*#__PURE__*/_react.default.createElement(_react2.Divider, {
|
|
120
|
+
orientation: "vertical"
|
|
121
|
+
})), /*#__PURE__*/_react.default.createElement(_react2.Box, null, /*#__PURE__*/_react.default.createElement(_index.MenuGroup, {
|
|
122
|
+
title: "Monthly",
|
|
123
|
+
paddingX: 3.5
|
|
124
|
+
}, /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, /*#__PURE__*/_react.default.createElement(_react2.Text, {
|
|
125
|
+
fontSize: "sm"
|
|
126
|
+
}, "Monthly Rates"), /*#__PURE__*/_react.default.createElement(_react2.Text, {
|
|
127
|
+
fontSize: "xs",
|
|
128
|
+
fontWeight: "light"
|
|
129
|
+
}, "Manage upcoming event rates and track sales")), /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, /*#__PURE__*/_react.default.createElement(_react2.Text, {
|
|
130
|
+
fontSize: "sm"
|
|
131
|
+
}, "Monthly Inventory"), /*#__PURE__*/_react.default.createElement(_react2.Text, {
|
|
132
|
+
fontSize: "xs",
|
|
133
|
+
fontWeight: "light"
|
|
134
|
+
}, "Manage total monthly inventory and track utilization"))), /*#__PURE__*/_react.default.createElement(_index.MenuGroup, {
|
|
135
|
+
title: "Airport",
|
|
136
|
+
paddingX: 3.5
|
|
137
|
+
}, /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, /*#__PURE__*/_react.default.createElement(_react2.Text, {
|
|
138
|
+
fontSize: "sm"
|
|
139
|
+
}, "Airport Rates"), /*#__PURE__*/_react.default.createElement(_react2.Text, {
|
|
140
|
+
fontSize: "xs",
|
|
141
|
+
fontWeight: "light"
|
|
142
|
+
}, "Manage airport rates")), /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, /*#__PURE__*/_react.default.createElement(_react2.Text, {
|
|
143
|
+
fontSize: "sm"
|
|
144
|
+
}, "Airport Inventory"), /*#__PURE__*/_react.default.createElement(_react2.Text, {
|
|
145
|
+
fontSize: "xs",
|
|
146
|
+
fontWeight: "light"
|
|
147
|
+
}, "Manage total airport inventory and exceptions"))))))));
|
|
148
|
+
};
|
|
149
|
+
const Basic = exports.Basic = BasicMenuTemplate.bind({});
|
|
150
|
+
Basic.args = {
|
|
151
|
+
variant: 'basic'
|
|
152
|
+
};
|
|
153
|
+
const Complex = exports.Complex = ComplexMenuTemplate.bind({});
|
|
154
|
+
Complex.argTypes = {
|
|
155
|
+
...(0, _disableArgs.default)(['variant'])
|
|
156
|
+
};
|
|
157
|
+
Complex.args = {
|
|
158
|
+
variant: 'full'
|
|
159
|
+
};
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = void 0;
|
|
8
|
+
var _merge = _interopRequireDefault(require("lodash/merge"));
|
|
9
|
+
var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
|
|
10
|
+
const baseStyle = {
|
|
11
|
+
button: {
|
|
12
|
+
px: 8,
|
|
13
|
+
py: 3,
|
|
14
|
+
fontSize: 'base',
|
|
15
|
+
fontFamily: 'body',
|
|
16
|
+
lineHeight: 0.875,
|
|
17
|
+
fontWeight: 'semibold',
|
|
18
|
+
borderWidth: '1px',
|
|
19
|
+
borderStyle: 'solid',
|
|
20
|
+
borderRadius: 'base',
|
|
21
|
+
textTransform: 'capitalize',
|
|
22
|
+
transition: 'all normal ease',
|
|
23
|
+
_hover: {
|
|
24
|
+
bg: 'gray.50',
|
|
25
|
+
borderColor: 'gray.200'
|
|
26
|
+
},
|
|
27
|
+
_disabled: {
|
|
28
|
+
cursor: 'not-allowed',
|
|
29
|
+
opacity: 1,
|
|
30
|
+
bg: 'gray.200',
|
|
31
|
+
borderColor: 'gray.200',
|
|
32
|
+
color: 'gray.600'
|
|
33
|
+
},
|
|
34
|
+
_focus: {
|
|
35
|
+
zIndex: 1,
|
|
36
|
+
boxShadow: 'outline'
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
list: {
|
|
40
|
+
bg: 'white',
|
|
41
|
+
boxShadow: 'base',
|
|
42
|
+
padding: 6,
|
|
43
|
+
zIndex: 'layer1',
|
|
44
|
+
width: 64
|
|
45
|
+
},
|
|
46
|
+
item: {
|
|
47
|
+
paddingX: 2,
|
|
48
|
+
paddingY: 1.5,
|
|
49
|
+
_focus: {
|
|
50
|
+
zIndex: 1,
|
|
51
|
+
boxShadow: 'outline'
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
groupTitle: {
|
|
55
|
+
fontWeight: 'semibold',
|
|
56
|
+
color: 'gray.600',
|
|
57
|
+
padding: 2
|
|
58
|
+
},
|
|
59
|
+
command: {
|
|
60
|
+
// this will style the text defined by the command
|
|
61
|
+
// prop in the MenuItem and MenuItemOption components
|
|
62
|
+
opacity: '0.8',
|
|
63
|
+
fontFamily: 'mono',
|
|
64
|
+
fontSize: 'sm',
|
|
65
|
+
letterSpacing: 'tighter',
|
|
66
|
+
paddingL: 4
|
|
67
|
+
},
|
|
68
|
+
divider: {
|
|
69
|
+
marginY: 2,
|
|
70
|
+
borderColor: 'gray.200'
|
|
71
|
+
}
|
|
72
|
+
};
|
|
73
|
+
const variants = {
|
|
74
|
+
basic: {
|
|
75
|
+
button: {
|
|
76
|
+
bg: 'primary.default',
|
|
77
|
+
borderColor: 'primary.default',
|
|
78
|
+
color: 'white',
|
|
79
|
+
_hover: {
|
|
80
|
+
bg: 'primary.600',
|
|
81
|
+
borderColor: 'primary.600',
|
|
82
|
+
color: 'white',
|
|
83
|
+
_disabled: {
|
|
84
|
+
bg: 'gray.200',
|
|
85
|
+
borderColor: 'gray.200',
|
|
86
|
+
color: 'gray.600'
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
list: {
|
|
91
|
+
bg: 'white',
|
|
92
|
+
boxShadow: 'base',
|
|
93
|
+
zIndex: 'layer1',
|
|
94
|
+
borderColor: 'gray.100',
|
|
95
|
+
borderWidth: '1px',
|
|
96
|
+
borderStyle: 'solid',
|
|
97
|
+
borderRadius: 'base',
|
|
98
|
+
padding: 4,
|
|
99
|
+
width: 64
|
|
100
|
+
},
|
|
101
|
+
groupTitle: {
|
|
102
|
+
fontWeight: 'semibold',
|
|
103
|
+
fontSize: 'md',
|
|
104
|
+
color: 'gray.600',
|
|
105
|
+
padding: 2
|
|
106
|
+
},
|
|
107
|
+
item: {
|
|
108
|
+
fontWeight: 'semibold',
|
|
109
|
+
_hover: {
|
|
110
|
+
color: 'gray.600'
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
},
|
|
114
|
+
full: {
|
|
115
|
+
button: {
|
|
116
|
+
height: 8,
|
|
117
|
+
fontSize: 'sm',
|
|
118
|
+
fontWeight: 'semibold',
|
|
119
|
+
color: 'black',
|
|
120
|
+
borderColor: 'white',
|
|
121
|
+
backgroundColor: 'white',
|
|
122
|
+
borderRadius: 'base',
|
|
123
|
+
paddingX: 3,
|
|
124
|
+
paddingY: 'auto',
|
|
125
|
+
_hover: {
|
|
126
|
+
color: 'black',
|
|
127
|
+
backgroundColor: 'gray.50',
|
|
128
|
+
borderColor: 'gray.50'
|
|
129
|
+
},
|
|
130
|
+
_active: {
|
|
131
|
+
color: 'primary.default',
|
|
132
|
+
backgroundColor: 'gray.50',
|
|
133
|
+
borderColor: 'gray.50',
|
|
134
|
+
_hover: {
|
|
135
|
+
color: 'primary.600',
|
|
136
|
+
backgroundColor: 'gray.50',
|
|
137
|
+
borderColor: 'gray.50'
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
},
|
|
141
|
+
list: {
|
|
142
|
+
height: '30rem',
|
|
143
|
+
width: '100vw',
|
|
144
|
+
padding: 8,
|
|
145
|
+
backgroundColor: 'white'
|
|
146
|
+
},
|
|
147
|
+
groupTitle: {
|
|
148
|
+
fontSize: 'sm',
|
|
149
|
+
weight: 'normal',
|
|
150
|
+
color: 'gray.600'
|
|
151
|
+
},
|
|
152
|
+
item: {
|
|
153
|
+
display: 'block',
|
|
154
|
+
paddingX: 3.5,
|
|
155
|
+
paddingY: 2.5,
|
|
156
|
+
marginBottom: 2,
|
|
157
|
+
_last: {
|
|
158
|
+
marginBottom: 0
|
|
159
|
+
},
|
|
160
|
+
_hover: {
|
|
161
|
+
backgroundColor: 'gray.50'
|
|
162
|
+
},
|
|
163
|
+
_focus: {
|
|
164
|
+
boxShadow: 'none',
|
|
165
|
+
backgroundColor: 'gray.50'
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
};
|
|
170
|
+
var _default = exports.default = (0, _merge.default)(_theme.default.components.Menu, {
|
|
171
|
+
baseStyle,
|
|
172
|
+
variants
|
|
173
|
+
});
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
Object.defineProperty(exports, "MenuButton", {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: function () {
|
|
10
|
+
return _react.MenuButton;
|
|
11
|
+
}
|
|
12
|
+
});
|
|
13
|
+
Object.defineProperty(exports, "MenuDivider", {
|
|
14
|
+
enumerable: true,
|
|
15
|
+
get: function () {
|
|
16
|
+
return _react.MenuDivider;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
Object.defineProperty(exports, "MenuGroup", {
|
|
20
|
+
enumerable: true,
|
|
21
|
+
get: function () {
|
|
22
|
+
return _react.MenuGroup;
|
|
23
|
+
}
|
|
24
|
+
});
|
|
25
|
+
Object.defineProperty(exports, "MenuItem", {
|
|
26
|
+
enumerable: true,
|
|
27
|
+
get: function () {
|
|
28
|
+
return _react.MenuItem;
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
Object.defineProperty(exports, "MenuItemOption", {
|
|
32
|
+
enumerable: true,
|
|
33
|
+
get: function () {
|
|
34
|
+
return _react.MenuItemOption;
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
Object.defineProperty(exports, "MenuList", {
|
|
38
|
+
enumerable: true,
|
|
39
|
+
get: function () {
|
|
40
|
+
return _react.MenuList;
|
|
41
|
+
}
|
|
42
|
+
});
|
|
43
|
+
Object.defineProperty(exports, "MenuOptionGroup", {
|
|
44
|
+
enumerable: true,
|
|
45
|
+
get: function () {
|
|
46
|
+
return _react.MenuOptionGroup;
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
Object.defineProperty(exports, "default", {
|
|
50
|
+
enumerable: true,
|
|
51
|
+
get: function () {
|
|
52
|
+
return _Menu.default;
|
|
53
|
+
}
|
|
54
|
+
});
|
|
55
|
+
var _Menu = _interopRequireDefault(require("./Menu"));
|
|
56
|
+
var _react = require("@chakra-ui/react");
|
|
@@ -16,6 +16,12 @@ Object.defineProperty(exports, "TableCaption", {
|
|
|
16
16
|
return _react.TableCaption;
|
|
17
17
|
}
|
|
18
18
|
});
|
|
19
|
+
Object.defineProperty(exports, "TableContainer", {
|
|
20
|
+
enumerable: true,
|
|
21
|
+
get: function () {
|
|
22
|
+
return _react.TableContainer;
|
|
23
|
+
}
|
|
24
|
+
});
|
|
19
25
|
Object.defineProperty(exports, "Tbody", {
|
|
20
26
|
enumerable: true,
|
|
21
27
|
get: function () {
|
package/dist/components/index.js
CHANGED
|
@@ -41,6 +41,15 @@ var _exportNames = {
|
|
|
41
41
|
AutoSuggestSelect: true,
|
|
42
42
|
Badge: true,
|
|
43
43
|
ToggleButtonGroup: true,
|
|
44
|
+
CreatableSelect: true,
|
|
45
|
+
Menu: true,
|
|
46
|
+
MenuButton: true,
|
|
47
|
+
MenuList: true,
|
|
48
|
+
MenuItem: true,
|
|
49
|
+
MenuItemOption: true,
|
|
50
|
+
MenuGroup: true,
|
|
51
|
+
MenuOptionGroup: true,
|
|
52
|
+
MenuDivider: true,
|
|
44
53
|
Box: true,
|
|
45
54
|
Kbd: true,
|
|
46
55
|
Code: true,
|
|
@@ -69,6 +78,8 @@ var _exportNames = {
|
|
|
69
78
|
useClipboard: true,
|
|
70
79
|
useDisclosure: true,
|
|
71
80
|
useMediaQuery: true,
|
|
81
|
+
CheckboxGroup: true,
|
|
82
|
+
useStyleConfig: true,
|
|
72
83
|
BreadcrumbItem: true,
|
|
73
84
|
BreadcrumbLink: true,
|
|
74
85
|
InputLeftAddon: true,
|
|
@@ -81,7 +92,8 @@ var _exportNames = {
|
|
|
81
92
|
useControllableState: true,
|
|
82
93
|
usePrefersReducedMotion: true,
|
|
83
94
|
keyframes: true,
|
|
84
|
-
BoxProps: true
|
|
95
|
+
BoxProps: true,
|
|
96
|
+
Textarea: true
|
|
85
97
|
};
|
|
86
98
|
Object.defineProperty(exports, "Alert", {
|
|
87
99
|
enumerable: true,
|
|
@@ -161,6 +173,12 @@ Object.defineProperty(exports, "Checkbox", {
|
|
|
161
173
|
return _Checkbox.default;
|
|
162
174
|
}
|
|
163
175
|
});
|
|
176
|
+
Object.defineProperty(exports, "CheckboxGroup", {
|
|
177
|
+
enumerable: true,
|
|
178
|
+
get: function () {
|
|
179
|
+
return _react.CheckboxGroup;
|
|
180
|
+
}
|
|
181
|
+
});
|
|
164
182
|
Object.defineProperty(exports, "Circle", {
|
|
165
183
|
enumerable: true,
|
|
166
184
|
get: function () {
|
|
@@ -185,6 +203,12 @@ Object.defineProperty(exports, "Container", {
|
|
|
185
203
|
return _Container.default;
|
|
186
204
|
}
|
|
187
205
|
});
|
|
206
|
+
Object.defineProperty(exports, "CreatableSelect", {
|
|
207
|
+
enumerable: true,
|
|
208
|
+
get: function () {
|
|
209
|
+
return _CreatableSelect.CreatableSelect;
|
|
210
|
+
}
|
|
211
|
+
});
|
|
188
212
|
Object.defineProperty(exports, "Divider", {
|
|
189
213
|
enumerable: true,
|
|
190
214
|
get: function () {
|
|
@@ -317,6 +341,54 @@ Object.defineProperty(exports, "Loader", {
|
|
|
317
341
|
return _Loader.default;
|
|
318
342
|
}
|
|
319
343
|
});
|
|
344
|
+
Object.defineProperty(exports, "Menu", {
|
|
345
|
+
enumerable: true,
|
|
346
|
+
get: function () {
|
|
347
|
+
return _Menu.default;
|
|
348
|
+
}
|
|
349
|
+
});
|
|
350
|
+
Object.defineProperty(exports, "MenuButton", {
|
|
351
|
+
enumerable: true,
|
|
352
|
+
get: function () {
|
|
353
|
+
return _Menu.MenuButton;
|
|
354
|
+
}
|
|
355
|
+
});
|
|
356
|
+
Object.defineProperty(exports, "MenuDivider", {
|
|
357
|
+
enumerable: true,
|
|
358
|
+
get: function () {
|
|
359
|
+
return _Menu.MenuDivider;
|
|
360
|
+
}
|
|
361
|
+
});
|
|
362
|
+
Object.defineProperty(exports, "MenuGroup", {
|
|
363
|
+
enumerable: true,
|
|
364
|
+
get: function () {
|
|
365
|
+
return _Menu.MenuGroup;
|
|
366
|
+
}
|
|
367
|
+
});
|
|
368
|
+
Object.defineProperty(exports, "MenuItem", {
|
|
369
|
+
enumerable: true,
|
|
370
|
+
get: function () {
|
|
371
|
+
return _Menu.MenuItem;
|
|
372
|
+
}
|
|
373
|
+
});
|
|
374
|
+
Object.defineProperty(exports, "MenuItemOption", {
|
|
375
|
+
enumerable: true,
|
|
376
|
+
get: function () {
|
|
377
|
+
return _Menu.MenuItemOption;
|
|
378
|
+
}
|
|
379
|
+
});
|
|
380
|
+
Object.defineProperty(exports, "MenuList", {
|
|
381
|
+
enumerable: true,
|
|
382
|
+
get: function () {
|
|
383
|
+
return _Menu.MenuList;
|
|
384
|
+
}
|
|
385
|
+
});
|
|
386
|
+
Object.defineProperty(exports, "MenuOptionGroup", {
|
|
387
|
+
enumerable: true,
|
|
388
|
+
get: function () {
|
|
389
|
+
return _Menu.MenuOptionGroup;
|
|
390
|
+
}
|
|
391
|
+
});
|
|
320
392
|
Object.defineProperty(exports, "Popover", {
|
|
321
393
|
enumerable: true,
|
|
322
394
|
get: function () {
|
|
@@ -455,6 +527,12 @@ Object.defineProperty(exports, "Text", {
|
|
|
455
527
|
return _Text.default;
|
|
456
528
|
}
|
|
457
529
|
});
|
|
530
|
+
Object.defineProperty(exports, "Textarea", {
|
|
531
|
+
enumerable: true,
|
|
532
|
+
get: function () {
|
|
533
|
+
return _react.Textarea;
|
|
534
|
+
}
|
|
535
|
+
});
|
|
458
536
|
Object.defineProperty(exports, "ThemeProvider", {
|
|
459
537
|
enumerable: true,
|
|
460
538
|
get: function () {
|
|
@@ -527,6 +605,12 @@ Object.defineProperty(exports, "usePrefersReducedMotion", {
|
|
|
527
605
|
return _react.usePrefersReducedMotion;
|
|
528
606
|
}
|
|
529
607
|
});
|
|
608
|
+
Object.defineProperty(exports, "useStyleConfig", {
|
|
609
|
+
enumerable: true,
|
|
610
|
+
get: function () {
|
|
611
|
+
return _react.useStyleConfig;
|
|
612
|
+
}
|
|
613
|
+
});
|
|
530
614
|
Object.defineProperty(exports, "useTheme", {
|
|
531
615
|
enumerable: true,
|
|
532
616
|
get: function () {
|
|
@@ -643,6 +727,8 @@ var _Radio = require("./Radio");
|
|
|
643
727
|
var _AutoSuggestSelect = require("./AutoSuggestSelect");
|
|
644
728
|
var _Badge = _interopRequireDefault(require("./Badge/Badge"));
|
|
645
729
|
var _ToggleButtonGroup = _interopRequireDefault(require("./ToggleButtonGroup/ToggleButtonGroup"));
|
|
730
|
+
var _CreatableSelect = require("./CreatableSelect");
|
|
731
|
+
var _Menu = _interopRequireWildcard(require("./Menu"));
|
|
646
732
|
var _react = require("@chakra-ui/react");
|
|
647
733
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
648
734
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
@@ -70,6 +70,12 @@ Object.defineProperty(exports, "List", {
|
|
|
70
70
|
return _styles.default;
|
|
71
71
|
}
|
|
72
72
|
});
|
|
73
|
+
Object.defineProperty(exports, "Menu", {
|
|
74
|
+
enumerable: true,
|
|
75
|
+
get: function () {
|
|
76
|
+
return _Menu.default;
|
|
77
|
+
}
|
|
78
|
+
});
|
|
73
79
|
Object.defineProperty(exports, "Modal", {
|
|
74
80
|
enumerable: true,
|
|
75
81
|
get: function () {
|
|
@@ -157,4 +163,5 @@ var _styles10 = _interopRequireDefault(require("./Radio/styles"));
|
|
|
157
163
|
var _Skeleton = _interopRequireDefault(require("./Skeleton/Skeleton.styles"));
|
|
158
164
|
var _styles11 = _interopRequireDefault(require("./Badge/styles"));
|
|
159
165
|
var _styles12 = _interopRequireDefault(require("./Drawer/styles"));
|
|
160
|
-
var _Progress = _interopRequireDefault(require("./Progress/Progress.styles"));
|
|
166
|
+
var _Progress = _interopRequireDefault(require("./Progress/Progress.styles"));
|
|
167
|
+
var _Menu = _interopRequireDefault(require("./Menu/Menu.styles"));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spothero/ui",
|
|
3
|
-
"version": "21.
|
|
3
|
+
"version": "21.6.0",
|
|
4
4
|
"description": "SpotHero's React component UI library.",
|
|
5
5
|
"main": "./dist/components/index.js",
|
|
6
6
|
"exports": "./dist/components/index.js",
|
|
@@ -94,14 +94,14 @@
|
|
|
94
94
|
"webpack-merge": "5.1.4",
|
|
95
95
|
"css-loader": "5.1.3",
|
|
96
96
|
"sass-loader": "10.2.1",
|
|
97
|
-
"@spothero/babel-preset-spothero": "5.1.0",
|
|
98
97
|
"@spothero/browserslist-config": "4.0.0",
|
|
99
|
-
"@spothero/
|
|
98
|
+
"@spothero/babel-preset-spothero": "5.1.0",
|
|
100
99
|
"@spothero/eslint-config": "6.1.0",
|
|
100
|
+
"@spothero/core": "7.0.0",
|
|
101
101
|
"@spothero/icons": "8.1.0",
|
|
102
102
|
"@spothero/npm-publisher": "7.0.0",
|
|
103
|
-
"@spothero/
|
|
104
|
-
"@spothero/
|
|
103
|
+
"@spothero/stylelint-config": "6.0.0",
|
|
104
|
+
"@spothero/prettier-config": "4.0.0"
|
|
105
105
|
},
|
|
106
106
|
"dependencies": {
|
|
107
107
|
"@chakra-ui/react": "1.8.8",
|
|
@@ -117,7 +117,7 @@
|
|
|
117
117
|
"regenerator-runtime": "0.13.7",
|
|
118
118
|
"ssr-window": "1.0.1",
|
|
119
119
|
"transitionEnd": "1.0.2",
|
|
120
|
-
"@spothero/utils": "14.1.
|
|
120
|
+
"@spothero/utils": "14.1.2"
|
|
121
121
|
},
|
|
122
122
|
"peerDependencies": {
|
|
123
123
|
"classnames": "^2.2.6",
|