@ntbjs/react-components 0.0.1-beta.9 → 1.1.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ActionButton-90485300.js +43 -0
- package/AssetGallery-9bf4cd82.js +1403 -0
- package/AssetPreviewTopBar-a172fc5c.js +105 -0
- package/Badge-86593df4.js +146 -0
- package/Button-0d728b52.js +156 -0
- package/Checkbox-50f1f3c7.js +136 -0
- package/CompactTextInput-24126cf9.js +280 -0
- package/Popover-d3e2f6c0.js +97 -0
- package/README.md +1 -2
- package/Radio-0b46b2a8.js +83 -0
- package/SectionSeparator-12aff748.js +37 -0
- package/Switch-aa384260.js +104 -0
- package/TextArea-52cf4c0a.js +173 -0
- package/TextInput-a7c32f5f.js +250 -0
- package/Tooltip-f95a39f4.js +57 -0
- package/data/Badge/index.js +10 -0
- package/data/Popover/index.js +13 -5
- package/data/index.js +19 -6
- package/{defaultTheme-f1063879.js → defaultTheme-870f7df1.js} +15 -3
- package/icons/arrow-back.svg +4 -0
- package/icons/audio.svg +3 -0
- package/icons/check.svg +3 -0
- package/icons/close.svg +4 -0
- package/icons/edit-note.svg +4 -0
- package/icons/headset.svg +1 -0
- package/icons/library-add.svg +3 -0
- package/icons/link.svg +4 -0
- package/icons/search.svg +3 -0
- package/inputs/ActionButton/index.js +10 -4
- package/inputs/Button/index.js +10 -0
- package/inputs/Checkbox/index.js +12 -0
- package/inputs/CompactTextInput/index.js +17 -0
- package/inputs/Radio/index.js +12 -0
- package/inputs/Switch/index.js +12 -0
- package/inputs/TextArea/index.js +12 -0
- package/inputs/TextInput/index.js +12 -0
- package/inputs/index.js +33 -4
- package/layout/SectionSeparator/index.js +10 -0
- package/layout/index.js +12 -0
- package/package.json +13 -8
- package/ssr/index.js +14 -0
- package/widgets/AssetGallery/index.js +27 -10
- package/widgets/AssetPreview/AssetPreviewTopBar/index.js +10 -0
- package/widgets/index.js +31 -10
- package/ActionButton-dfa33fb3.js +0 -36
- package/AssetGallery-92320d63.js +0 -970
- package/Popover-01b3e392.js +0 -80
- package/Tooltip-830b629b.js +0 -49
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var Checkbox = require('../../Checkbox-50f1f3c7.js');
|
|
4
|
+
require('../../defaultTheme-870f7df1.js');
|
|
5
|
+
require('styled-components');
|
|
6
|
+
require('react');
|
|
7
|
+
require('nanoid');
|
|
8
|
+
require('lodash');
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
module.exports = Checkbox.Checkbox;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var CompactTextInput = require('../../CompactTextInput-24126cf9.js');
|
|
4
|
+
require('../../defaultTheme-870f7df1.js');
|
|
5
|
+
require('styled-components');
|
|
6
|
+
require('react');
|
|
7
|
+
require('nanoid');
|
|
8
|
+
require('lodash');
|
|
9
|
+
require('../../Popover-d3e2f6c0.js');
|
|
10
|
+
require('polished');
|
|
11
|
+
require('@tippyjs/react');
|
|
12
|
+
require('../../Tooltip-f95a39f4.js');
|
|
13
|
+
require('../../Badge-86593df4.js');
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
module.exports = CompactTextInput.CompactTextInput;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var TextArea = require('../../TextArea-52cf4c0a.js');
|
|
4
|
+
require('../../defaultTheme-870f7df1.js');
|
|
5
|
+
require('styled-components');
|
|
6
|
+
require('react');
|
|
7
|
+
require('nanoid');
|
|
8
|
+
require('lodash');
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
module.exports = TextArea.TextArea;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var TextInput = require('../../TextInput-a7c32f5f.js');
|
|
4
|
+
require('../../defaultTheme-870f7df1.js');
|
|
5
|
+
require('styled-components');
|
|
6
|
+
require('react');
|
|
7
|
+
require('nanoid');
|
|
8
|
+
require('lodash');
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
module.exports = TextInput.TextInput;
|
package/inputs/index.js
CHANGED
|
@@ -1,4 +1,33 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var ActionButton = require('../ActionButton-90485300.js');
|
|
6
|
+
var Button = require('../Button-0d728b52.js');
|
|
7
|
+
var Checkbox = require('../Checkbox-50f1f3c7.js');
|
|
8
|
+
var CompactTextInput = require('../CompactTextInput-24126cf9.js');
|
|
9
|
+
var Radio = require('../Radio-0b46b2a8.js');
|
|
10
|
+
var TextArea = require('../TextArea-52cf4c0a.js');
|
|
11
|
+
var TextInput = require('../TextInput-a7c32f5f.js');
|
|
12
|
+
var Switch = require('../Switch-aa384260.js');
|
|
13
|
+
require('../defaultTheme-870f7df1.js');
|
|
14
|
+
require('styled-components');
|
|
15
|
+
require('react');
|
|
16
|
+
require('nanoid');
|
|
17
|
+
require('lodash');
|
|
18
|
+
require('../Popover-d3e2f6c0.js');
|
|
19
|
+
require('polished');
|
|
20
|
+
require('@tippyjs/react');
|
|
21
|
+
require('../Tooltip-f95a39f4.js');
|
|
22
|
+
require('../Badge-86593df4.js');
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
exports.ActionButton = ActionButton.ActionButton;
|
|
27
|
+
exports.Button = Button.Button;
|
|
28
|
+
exports.Checkbox = Checkbox.Checkbox;
|
|
29
|
+
exports.CompactTextInput = CompactTextInput.CompactTextInput;
|
|
30
|
+
exports.Radio = Radio.Radio;
|
|
31
|
+
exports.TextArea = TextArea.TextArea;
|
|
32
|
+
exports.TextInput = TextInput.TextInput;
|
|
33
|
+
exports.Switch = Switch.Switch;
|
package/layout/index.js
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var SectionSeparator = require('../SectionSeparator-12aff748.js');
|
|
6
|
+
require('../defaultTheme-870f7df1.js');
|
|
7
|
+
require('styled-components');
|
|
8
|
+
require('react');
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
exports.SectionSeparator = SectionSeparator.SectionSeparator;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ntbjs/react-components",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "1.1.0-beta.1",
|
|
4
4
|
"description": "NTBs common front-end design utilities and React components.",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "cross-env NODE_ENV=production rollup -c",
|
|
@@ -35,11 +35,11 @@
|
|
|
35
35
|
"@rollup/plugin-babel": "^5.3.0",
|
|
36
36
|
"@rollup/plugin-commonjs": "^19.0.0",
|
|
37
37
|
"@rollup/plugin-node-resolve": "^13.0.0",
|
|
38
|
-
"@storybook/addon-actions": "^6.
|
|
39
|
-
"@storybook/addon-docs": "^6.
|
|
40
|
-
"@storybook/addon-essentials": "^6.
|
|
41
|
-
"@storybook/addon-links": "^6.
|
|
42
|
-
"@storybook/react": "^6.
|
|
38
|
+
"@storybook/addon-actions": "^6.5.14",
|
|
39
|
+
"@storybook/addon-docs": "^6.5.14",
|
|
40
|
+
"@storybook/addon-essentials": "^6.5.14",
|
|
41
|
+
"@storybook/addon-links": "^6.5.14",
|
|
42
|
+
"@storybook/react": "^6.5.14",
|
|
43
43
|
"@svgr/rollup": "^5.5.0",
|
|
44
44
|
"@svgr/webpack": "^5.5.0",
|
|
45
45
|
"@testing-library/jest-dom": "^5.12.0",
|
|
@@ -67,14 +67,19 @@
|
|
|
67
67
|
"rollup-plugin-url": "^3.0.1",
|
|
68
68
|
"sass": "^1.34.1",
|
|
69
69
|
"sass-loader": "^10.1.1",
|
|
70
|
-
"storybook-dark-mode": "^
|
|
70
|
+
"storybook-dark-mode": "^2.0.4",
|
|
71
71
|
"url-loader": "^4.1.1"
|
|
72
72
|
},
|
|
73
73
|
"dependencies": {
|
|
74
74
|
"@restart/hooks": "^0.3.26",
|
|
75
|
+
"@storybook/addons": "^6.5.14",
|
|
76
|
+
"@storybook/theming": "^6.5.14",
|
|
75
77
|
"@tippyjs/react": "^4.2.5",
|
|
76
78
|
"lodash": "^4.17.21",
|
|
79
|
+
"nanoid": "^3.1.25",
|
|
80
|
+
"polished": "^4.1.3",
|
|
77
81
|
"react-lazy-load-image-component": "^1.5.1",
|
|
78
|
-
"
|
|
82
|
+
"resize-observer-polyfill": "^1.5.1",
|
|
83
|
+
"styled-components": "^5.3.5"
|
|
79
84
|
}
|
|
80
85
|
}
|
package/ssr/index.js
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var styled = require('styled-components');
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
Object.defineProperty(exports, 'ServerStyleSheet', {
|
|
10
|
+
enumerable: true,
|
|
11
|
+
get: function () {
|
|
12
|
+
return styled.ServerStyleSheet;
|
|
13
|
+
}
|
|
14
|
+
});
|
|
@@ -1,10 +1,27 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var AssetGallery = require('../../AssetGallery-9bf4cd82.js');
|
|
4
|
+
require('../../defaultTheme-870f7df1.js');
|
|
5
|
+
require('styled-components');
|
|
6
|
+
require('react');
|
|
7
|
+
require('lodash');
|
|
8
|
+
require('../../TextInput-a7c32f5f.js');
|
|
9
|
+
require('nanoid');
|
|
10
|
+
require('resize-observer-polyfill');
|
|
11
|
+
require('react-lazy-load-image-component');
|
|
12
|
+
require('../../ActionButton-90485300.js');
|
|
13
|
+
require('../../Button-0d728b52.js');
|
|
14
|
+
require('../../Checkbox-50f1f3c7.js');
|
|
15
|
+
require('../../CompactTextInput-24126cf9.js');
|
|
16
|
+
require('../../Popover-d3e2f6c0.js');
|
|
17
|
+
require('polished');
|
|
18
|
+
require('@tippyjs/react');
|
|
19
|
+
require('../../Tooltip-f95a39f4.js');
|
|
20
|
+
require('../../Badge-86593df4.js');
|
|
21
|
+
require('../../Radio-0b46b2a8.js');
|
|
22
|
+
require('../../TextArea-52cf4c0a.js');
|
|
23
|
+
require('../../Switch-aa384260.js');
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
module.exports = AssetGallery.AssetGallery;
|
package/widgets/index.js
CHANGED
|
@@ -1,10 +1,31 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var AssetGallery = require('../AssetGallery-9bf4cd82.js');
|
|
6
|
+
var AssetPreviewTopBar = require('../AssetPreviewTopBar-a172fc5c.js');
|
|
7
|
+
require('../defaultTheme-870f7df1.js');
|
|
8
|
+
require('styled-components');
|
|
9
|
+
require('react');
|
|
10
|
+
require('lodash');
|
|
11
|
+
require('../TextInput-a7c32f5f.js');
|
|
12
|
+
require('nanoid');
|
|
13
|
+
require('resize-observer-polyfill');
|
|
14
|
+
require('react-lazy-load-image-component');
|
|
15
|
+
require('../ActionButton-90485300.js');
|
|
16
|
+
require('../Button-0d728b52.js');
|
|
17
|
+
require('../Checkbox-50f1f3c7.js');
|
|
18
|
+
require('../CompactTextInput-24126cf9.js');
|
|
19
|
+
require('../Popover-d3e2f6c0.js');
|
|
20
|
+
require('polished');
|
|
21
|
+
require('@tippyjs/react');
|
|
22
|
+
require('../Tooltip-f95a39f4.js');
|
|
23
|
+
require('../Badge-86593df4.js');
|
|
24
|
+
require('../Radio-0b46b2a8.js');
|
|
25
|
+
require('../TextArea-52cf4c0a.js');
|
|
26
|
+
require('../Switch-aa384260.js');
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
exports.AssetGallery = AssetGallery.AssetGallery;
|
|
31
|
+
exports.AssetPreviewTopBar = AssetPreviewTopBar.AssetPreviewTopBar;
|
package/ActionButton-dfa33fb3.js
DELETED
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import { a as applyDefaultTheme, _ as _taggedTemplateLiteral, b as _objectWithoutProperties, c as _extends, P as PropTypes } from './defaultTheme-f1063879.js';
|
|
2
|
-
import React__default from 'react';
|
|
3
|
-
import styled, { css } from 'styled-components';
|
|
4
|
-
|
|
5
|
-
var _templateObject, _templateObject2;
|
|
6
|
-
var ActionButton$1 = styled.button.attrs(applyDefaultTheme)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n height: 40px;\n width: 40px;\n border: 0;\n color: inherit;\n background-color: transparent;\n ", "\n background-position: center;\n background-repeat: no-repeat;\n background-size: 0 0;\n transition: background-size 250ms ease;\n cursor: pointer;\n\n ", "\n\n &:disabled {\n opacity: 0.5;\n color: inherit;\n cursor: not-allowed;\n }\n\n svg {\n width: 100%;\n max-height: 20px;\n max-width: 20px;\n pointer-events: none;\n transition: color 250ms;\n }\n"])), function (props) {
|
|
7
|
-
return props.theme.themeProp('background-image', "radial-gradient(circle at center, ".concat(props.theme.getColor('gray-600'), " 50%, transparent 50%)"), "radial-gradient(circle at center, ".concat(props.theme.getColor('gray-200'), " 50%, transparent 50%)"));
|
|
8
|
-
}, function (props) {
|
|
9
|
-
return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", ":not(:disabled) {\n background-size: 200% 200%;\n\n svg {\n ", ";\n }\n }\n "])), props.active ? '' : ':hover', function (props) {
|
|
10
|
-
return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'));
|
|
11
|
-
});
|
|
12
|
-
});
|
|
13
|
-
|
|
14
|
-
var ActionButton = React__default.forwardRef(function ActionButton(_ref, forwardedRef) {
|
|
15
|
-
var icon = _ref.icon,
|
|
16
|
-
disabled = _ref.disabled,
|
|
17
|
-
active = _ref.active,
|
|
18
|
-
onClick = _ref.onClick,
|
|
19
|
-
props = _objectWithoutProperties(_ref, ["icon", "disabled", "active", "onClick"]);
|
|
20
|
-
|
|
21
|
-
return React__default.createElement(ActionButton$1, _extends({
|
|
22
|
-
ref: forwardedRef,
|
|
23
|
-
disabled: disabled,
|
|
24
|
-
active: active,
|
|
25
|
-
onClick: onClick
|
|
26
|
-
}, props), icon);
|
|
27
|
-
});
|
|
28
|
-
ActionButton.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
29
|
-
icon: PropTypes.element.isRequired,
|
|
30
|
-
disabled: PropTypes.bool,
|
|
31
|
-
active: PropTypes.bool,
|
|
32
|
-
onClick: PropTypes.func
|
|
33
|
-
} : {};
|
|
34
|
-
ActionButton.defaultProps = {};
|
|
35
|
-
|
|
36
|
-
export { ActionButton as A };
|