@omniumretail/component-library 0.1.1 → 0.1.3
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/cjs/App.d.ts +4 -0
- package/dist/cjs/App.js +14 -0
- package/dist/cjs/App.js.map +1 -0
- package/dist/cjs/App.test.d.ts +1 -0
- package/dist/cjs/App.test.js +15 -0
- package/dist/cjs/App.test.js.map +1 -0
- package/dist/cjs/components/Label/Label.d.ts +6 -0
- package/dist/cjs/components/Label/Label.js +14 -0
- package/dist/cjs/components/Label/Label.js.map +1 -0
- package/dist/cjs/components/Separator/Separator.d.ts +12 -0
- package/dist/cjs/components/Separator/Separator.js +27 -0
- package/dist/cjs/components/Separator/Separator.js.map +1 -0
- package/dist/cjs/components/Tag/Tag.d.ts +6 -0
- package/dist/cjs/components/Tag/Tag.js +63 -0
- package/dist/cjs/components/Tag/Tag.js.map +1 -0
- package/dist/cjs/components/index.d.ts +3 -0
- package/dist/cjs/components/index.js +20 -0
- package/dist/cjs/components/index.js.map +1 -0
- package/dist/cjs/index.d.ts +1 -0
- package/dist/cjs/index.js +18 -0
- package/dist/cjs/index.js.map +1 -0
- package/{src/assets/scss/combinations.scss → dist/cjs/reportWebVitals.d.ts} +0 -0
- package/dist/cjs/reportWebVitals.js +15 -0
- package/dist/cjs/reportWebVitals.js.map +1 -0
- package/dist/cjs/setupTests.d.ts +1 -0
- package/dist/cjs/setupTests.js +8 -0
- package/dist/cjs/setupTests.js.map +1 -0
- package/dist/esm/App.d.ts +4 -0
- package/dist/esm/App.js +9 -0
- package/dist/esm/App.js.map +1 -0
- package/dist/esm/App.test.d.ts +1 -0
- package/dist/esm/App.test.js +10 -0
- package/dist/esm/App.test.js.map +1 -0
- package/dist/esm/components/Label/Label.d.ts +6 -0
- package/dist/esm/components/Label/Label.js +7 -0
- package/dist/esm/components/Label/Label.js.map +1 -0
- package/dist/esm/components/Label/Label.stories.d.ts +6 -0
- package/{src/components/Label/Label.stories.tsx → dist/esm/components/Label/Label.stories.js} +4 -8
- package/dist/esm/components/Label/Label.stories.js.map +1 -0
- package/dist/esm/components/Separator/Separator.d.ts +12 -0
- package/{src/components/Separator/Separator.tsx → dist/esm/components/Separator/Separator.js} +10 -17
- package/dist/esm/components/Separator/Separator.js.map +1 -0
- package/dist/esm/components/Separator/Separator.stories.d.ts +6 -0
- package/{src/components/Separator/Separator.stories.tsx → dist/esm/components/Separator/Separator.stories.js} +4 -8
- package/dist/esm/components/Separator/Separator.stories.js.map +1 -0
- package/dist/esm/components/Tag/Tag.d.ts +6 -0
- package/dist/esm/components/Tag/Tag.js +56 -0
- package/dist/esm/components/Tag/Tag.js.map +1 -0
- package/dist/esm/components/Tag/Tag.stories.d.ts +5 -0
- package/dist/esm/components/Tag/Tag.stories.js +9 -0
- package/dist/esm/components/Tag/Tag.stories.js.map +1 -0
- package/dist/esm/components/index.d.ts +3 -0
- package/dist/esm/components/index.js +4 -0
- package/dist/esm/components/index.js.map +1 -0
- package/dist/esm/index.d.ts +1 -0
- package/dist/esm/index.js +2 -0
- package/dist/esm/index.js.map +1 -0
- package/dist/esm/reportWebVitals.d.ts +0 -0
- package/dist/esm/reportWebVitals.js +15 -0
- package/dist/esm/reportWebVitals.js.map +1 -0
- package/dist/esm/setupTests.d.ts +1 -0
- package/{src/setupTests.ts → dist/esm/setupTests.js} +1 -0
- package/dist/esm/setupTests.js.map +1 -0
- package/package.json +14 -4
- package/.storybook/main.js +0 -16
- package/.storybook/preview.js +0 -11
- package/public/favicon.ico +0 -0
- package/public/index.html +0 -43
- package/public/logo192.png +0 -0
- package/public/logo512.png +0 -0
- package/public/manifest.json +0 -25
- package/public/robots.txt +0 -3
- package/src/App.css +0 -38
- package/src/App.test.tsx +0 -9
- package/src/App.tsx +0 -26
- package/src/assets/code-brackets.svg +0 -1
- package/src/assets/colors.svg +0 -1
- package/src/assets/comments.svg +0 -1
- package/src/assets/direction.svg +0 -1
- package/src/assets/flow.svg +0 -1
- package/src/assets/plugin.svg +0 -1
- package/src/assets/repo.svg +0 -1
- package/src/assets/scss/global.scss +0 -87
- package/src/assets/stackalt.svg +0 -1
- package/src/components/Label/Label.tsx +0 -11
- package/src/components/Label/styles.module.scss +0 -17
- package/src/components/Separator/styles.module.scss +0 -25
- package/src/components/Tag/Tag.stories.tsx +0 -14
- package/src/components/Tag/Tag.tsx +0 -109
- package/src/components/Tag/styles.module.scss +0 -42
- package/src/index.css +0 -13
- package/src/index.js +0 -7
- package/src/index.tsx +0 -19
- package/src/logo.svg +0 -1
- package/src/react-app-env.d.ts +0 -1
- package/src/reportWebVitals.ts +0 -15
- package/tsconfig.json +0 -26
package/dist/cjs/App.js
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
7
|
+
// import React from 'react';
|
|
8
|
+
const logo_svg_1 = __importDefault(require("./logo.svg"));
|
|
9
|
+
require("./App.css");
|
|
10
|
+
function App() {
|
|
11
|
+
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "App" }, { children: (0, jsx_runtime_1.jsxs)("header", Object.assign({ className: "App-header" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: logo_svg_1.default, className: "App-logo", alt: "logo" }), (0, jsx_runtime_1.jsxs)("p", { children: ["Edit ", (0, jsx_runtime_1.jsx)("code", { children: "src/App.tsx" }), " and save to reload."] }), (0, jsx_runtime_1.jsx)("a", Object.assign({ className: "App-link", href: "https://reactjs.org", target: "_blank", rel: "noopener noreferrer" }, { children: "Learn React" }))] })) })));
|
|
12
|
+
}
|
|
13
|
+
exports.default = App;
|
|
14
|
+
//# sourceMappingURL=App.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"App.js","sourceRoot":"","sources":["../../src/App.tsx"],"names":[],"mappings":";;;;;;AAAA,6BAA6B;AAC7B,0DAA8B;AAC9B,qBAAmB;AAEnB,SAAS,GAAG;IACV,OAAO,CACL,8CAAK,SAAS,EAAC,KAAK,gBAClB,kDAAQ,SAAS,EAAC,YAAY,iBAC5B,gCAAK,GAAG,EAAE,kBAAI,EAAE,SAAS,EAAC,UAAU,EAAC,GAAG,EAAC,MAAM,GAAG,EAClD,mDACO,2DAAwB,4BAC3B,EACJ,4CACE,SAAS,EAAC,UAAU,EACpB,IAAI,EAAC,qBAAqB,EAC1B,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,iCAGvB,KACG,IACL,CACP,CAAC;AACJ,CAAC;AAED,kBAAe,GAAG,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
7
|
+
// import React from 'react';
|
|
8
|
+
const react_1 = require("@testing-library/react");
|
|
9
|
+
const App_1 = __importDefault(require("./App"));
|
|
10
|
+
test('renders learn react link', () => {
|
|
11
|
+
(0, react_1.render)((0, jsx_runtime_1.jsx)(App_1.default, {}));
|
|
12
|
+
const linkElement = react_1.screen.getByText(/learn react/i);
|
|
13
|
+
expect(linkElement).toBeInTheDocument();
|
|
14
|
+
});
|
|
15
|
+
//# sourceMappingURL=App.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"App.test.js","sourceRoot":"","sources":["../../src/App.test.tsx"],"names":[],"mappings":";;;;;;AAAA,6BAA6B;AAC7B,kDAAwD;AACxD,gDAAwB;AAExB,IAAI,CAAC,0BAA0B,EAAE,GAAG,EAAE;IACpC,IAAA,cAAM,EAAC,uBAAC,aAAG,KAAG,CAAC,CAAC;IAChB,MAAM,WAAW,GAAG,cAAM,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACrD,MAAM,CAAC,WAAW,CAAC,CAAC,iBAAiB,EAAE,CAAC;AAC1C,CAAC,CAAC,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.Label = void 0;
|
|
7
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
+
const styles_module_scss_1 = __importDefault(require("./styles.module.scss"));
|
|
9
|
+
const Label = (props) => {
|
|
10
|
+
const { forAttribute, children } = props;
|
|
11
|
+
return (0, jsx_runtime_1.jsx)("label", Object.assign({ className: styles_module_scss_1.default.label, htmlFor: forAttribute }, { children: children }));
|
|
12
|
+
};
|
|
13
|
+
exports.Label = Label;
|
|
14
|
+
//# sourceMappingURL=Label.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../../src/components/Label/Label.tsx"],"names":[],"mappings":";;;;;;;AAAA,8EAA0C;AAMnC,MAAM,KAAK,GAAG,CAAC,KAAiB,EAAE,EAAE;IACvC,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAEzC,OAAO,gDAAO,SAAS,EAAG,4BAAM,CAAC,KAAK,EAAG,OAAO,EAAG,YAAY,gBAAK,QAAQ,IAAU,CAAA;AAC1F,CAAC,CAAC;AAJW,QAAA,KAAK,SAIhB"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare enum Spaces {
|
|
3
|
+
s = "s",
|
|
4
|
+
m = "m",
|
|
5
|
+
l = "l"
|
|
6
|
+
}
|
|
7
|
+
export interface SeparatorProps {
|
|
8
|
+
hasOpacity?: boolean;
|
|
9
|
+
colorIsBlue?: boolean;
|
|
10
|
+
space: Spaces;
|
|
11
|
+
}
|
|
12
|
+
export declare const Separator: (props: SeparatorProps) => JSX.Element;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.Separator = exports.Spaces = void 0;
|
|
7
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
+
const styles_module_scss_1 = __importDefault(require("./styles.module.scss"));
|
|
9
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
10
|
+
var Spaces;
|
|
11
|
+
(function (Spaces) {
|
|
12
|
+
Spaces["s"] = "s";
|
|
13
|
+
Spaces["m"] = "m";
|
|
14
|
+
Spaces["l"] = "l";
|
|
15
|
+
})(Spaces = exports.Spaces || (exports.Spaces = {}));
|
|
16
|
+
const Separator = (props) => {
|
|
17
|
+
const { hasOpacity, colorIsBlue, space } = props;
|
|
18
|
+
const separatorClasses = (0, classnames_1.default)({
|
|
19
|
+
[styles_module_scss_1.default.separator]: true,
|
|
20
|
+
[styles_module_scss_1.default['separator--opacity-50']]: hasOpacity,
|
|
21
|
+
[styles_module_scss_1.default['separator--blue-background']]: colorIsBlue,
|
|
22
|
+
[styles_module_scss_1.default[`separator--space-${space}` || '']]: space && Spaces[space],
|
|
23
|
+
});
|
|
24
|
+
return (0, jsx_runtime_1.jsx)("hr", { className: separatorClasses });
|
|
25
|
+
};
|
|
26
|
+
exports.Separator = Separator;
|
|
27
|
+
//# sourceMappingURL=Separator.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Separator.js","sourceRoot":"","sources":["../../../../src/components/Separator/Separator.tsx"],"names":[],"mappings":";;;;;;;AAAA,8EAA0C;AAC1C,4DAAoC;AAEpC,IAAY,MAIX;AAJD,WAAY,MAAM;IACd,iBAAO,CAAA;IACP,iBAAO,CAAA;IACP,iBAAO,CAAA;AACX,CAAC,EAJW,MAAM,GAAN,cAAM,KAAN,cAAM,QAIjB;AAQM,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IAC/C,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAEjD,MAAM,gBAAgB,GAAG,IAAA,oBAAU,EAAC;QAChC,CAAC,4BAAM,CAAC,SAAS,CAAC,EAAE,IAAI;QACxB,CAAC,4BAAM,CAAC,uBAAuB,CAAC,CAAC,EAAE,UAAU;QAC7C,CAAC,4BAAM,CAAC,4BAA4B,CAAC,CAAC,EAAE,WAAW;QACnD,CAAC,4BAAM,CAAC,oBAAoB,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,EAAE,KAAK,IAAI,MAAM,CAAC,KAAK,CAAC;KACtE,CAAC,CAAC;IAEH,OAAO,+BAAI,SAAS,EAAE,gBAAgB,GAAI,CAAA;AAC9C,CAAC,CAAC;AAXW,QAAA,SAAS,aAWpB"}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.TagField = void 0;
|
|
7
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
+
const react_1 = require("react");
|
|
9
|
+
const icons_1 = require("@ant-design/icons");
|
|
10
|
+
const antd_1 = require("antd");
|
|
11
|
+
const rc_tween_one_1 = require("rc-tween-one");
|
|
12
|
+
const styles_module_scss_1 = __importDefault(require("./styles.module.scss"));
|
|
13
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
14
|
+
const TagField = (props) => {
|
|
15
|
+
const { customTags = [] } = props;
|
|
16
|
+
const [tags, setTags] = (0, react_1.useState)(customTags);
|
|
17
|
+
const [inputVisible, setInputVisible] = (0, react_1.useState)(false);
|
|
18
|
+
const [inputValue, setInputValue] = (0, react_1.useState)('');
|
|
19
|
+
const inputRef = (0, react_1.useRef)(null);
|
|
20
|
+
(0, react_1.useEffect)(() => {
|
|
21
|
+
var _a;
|
|
22
|
+
if (inputVisible) {
|
|
23
|
+
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
24
|
+
}
|
|
25
|
+
}, [inputVisible]);
|
|
26
|
+
const handleClose = (removedTag) => {
|
|
27
|
+
const newTags = tags.filter((tag) => tag !== removedTag);
|
|
28
|
+
setTags(newTags);
|
|
29
|
+
};
|
|
30
|
+
const showInput = () => {
|
|
31
|
+
setInputVisible(true);
|
|
32
|
+
};
|
|
33
|
+
const handleInputChange = (e) => {
|
|
34
|
+
setInputValue(e.target.value);
|
|
35
|
+
};
|
|
36
|
+
const handleInputConfirm = () => {
|
|
37
|
+
if (inputValue && tags.indexOf(inputValue) === -1) {
|
|
38
|
+
setTags([...tags, inputValue]);
|
|
39
|
+
}
|
|
40
|
+
setInputVisible(false);
|
|
41
|
+
setInputValue('');
|
|
42
|
+
};
|
|
43
|
+
const forMap = (tag) => {
|
|
44
|
+
const tagElem = ((0, jsx_runtime_1.jsx)(antd_1.Tag, Object.assign({ closable: true, onClose: (e) => {
|
|
45
|
+
e.preventDefault();
|
|
46
|
+
handleClose(tag);
|
|
47
|
+
} }, { children: tag })));
|
|
48
|
+
return ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: styles_module_scss_1.default['tagfield__new'], style: { display: 'inline-block' } }, { children: tagElem }), tag));
|
|
49
|
+
};
|
|
50
|
+
const tagChild = tags.map(forMap);
|
|
51
|
+
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: styles_module_scss_1.default.tagfield }, { children: [inputVisible && ((0, jsx_runtime_1.jsx)(antd_1.Input, { ref: inputRef, type: "text", size: "small", value: inputValue, onChange: handleInputChange, onBlur: handleInputConfirm, onPressEnter: handleInputConfirm, className: styles_module_scss_1.default['tagfield__input'] })), !inputVisible && ((0, jsx_runtime_1.jsxs)(antd_1.Tag, Object.assign({ onClick: showInput, className: (0, classnames_1.default)(styles_module_scss_1.default['tagfield__creator'], 'site-tag-plus') }, { children: [(0, jsx_runtime_1.jsx)(icons_1.SearchOutlined, {}), " Procurar"] }))), (0, jsx_runtime_1.jsx)("div", Object.assign({ style: { marginTop: 16 } }, { children: (0, jsx_runtime_1.jsx)(rc_tween_one_1.TweenOneGroup, Object.assign({ enter: {
|
|
52
|
+
scale: 0.8,
|
|
53
|
+
opacity: 0,
|
|
54
|
+
type: 'from',
|
|
55
|
+
duration: 100,
|
|
56
|
+
}, onEnd: (e) => {
|
|
57
|
+
if (e.type === 'appear' || e.type === 'enter') {
|
|
58
|
+
e.target.style = 'display: inline-block';
|
|
59
|
+
}
|
|
60
|
+
}, leave: { opacity: 0, width: 0, scale: 0, duration: 200 }, appear: false }, { children: tagChild })) }))] })));
|
|
61
|
+
};
|
|
62
|
+
exports.TagField = TagField;
|
|
63
|
+
//# sourceMappingURL=Tag.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("./Label/Label"), exports);
|
|
18
|
+
__exportStar(require("./Separator/Separator"), exports);
|
|
19
|
+
__exportStar(require("./Tag/Tag"), exports);
|
|
20
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,gDAA8B;AAC9B,wDAAsC;AACtC,4CAA0B"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './components';
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("./components"), exports);
|
|
18
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,+CAA6B"}
|
|
File without changes
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
// import { ReportHandler } from 'web-vitals';
|
|
3
|
+
// const reportWebVitals = (onPerfEntry?: ReportHandler) => {
|
|
4
|
+
// if (onPerfEntry && onPerfEntry instanceof Function) {
|
|
5
|
+
// import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
|
6
|
+
// getCLS(onPerfEntry);
|
|
7
|
+
// getFID(onPerfEntry);
|
|
8
|
+
// getFCP(onPerfEntry);
|
|
9
|
+
// getLCP(onPerfEntry);
|
|
10
|
+
// getTTFB(onPerfEntry);
|
|
11
|
+
// });
|
|
12
|
+
// }
|
|
13
|
+
// };
|
|
14
|
+
// export default reportWebVitals;
|
|
15
|
+
//# sourceMappingURL=reportWebVitals.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"reportWebVitals.js","sourceRoot":"","sources":["../../src/reportWebVitals.ts"],"names":[],"mappings":";AAAA,8CAA8C;AAE9C,6DAA6D;AAC7D,0DAA0D;AAC1D,mFAAmF;AACnF,6BAA6B;AAC7B,6BAA6B;AAC7B,6BAA6B;AAC7B,6BAA6B;AAC7B,8BAA8B;AAC9B,UAAU;AACV,MAAM;AACN,KAAK;AAEL,kCAAkC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import '@testing-library/jest-dom';
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
// jest-dom adds custom jest matchers for asserting on DOM nodes.
|
|
4
|
+
// allows you to do things like:
|
|
5
|
+
// expect(element).toHaveTextContent(/react/i)
|
|
6
|
+
// learn more: https://github.com/testing-library/jest-dom
|
|
7
|
+
require("@testing-library/jest-dom");
|
|
8
|
+
//# sourceMappingURL=setupTests.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"setupTests.js","sourceRoot":"","sources":["../../src/setupTests.ts"],"names":[],"mappings":";;AAAA,iEAAiE;AACjE,gCAAgC;AAChC,8CAA8C;AAC9C,0DAA0D;AAC1D,qCAAmC"}
|
package/dist/esm/App.js
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
// import React from 'react';
|
|
3
|
+
import logo from './logo.svg';
|
|
4
|
+
import './App.css';
|
|
5
|
+
function App() {
|
|
6
|
+
return (_jsx("div", Object.assign({ className: "App" }, { children: _jsxs("header", Object.assign({ className: "App-header" }, { children: [_jsx("img", { src: logo, className: "App-logo", alt: "logo" }), _jsxs("p", { children: ["Edit ", _jsx("code", { children: "src/App.tsx" }), " and save to reload."] }), _jsx("a", Object.assign({ className: "App-link", href: "https://reactjs.org", target: "_blank", rel: "noopener noreferrer" }, { children: "Learn React" }))] })) })));
|
|
7
|
+
}
|
|
8
|
+
export default App;
|
|
9
|
+
//# sourceMappingURL=App.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"App.js","sourceRoot":"","sources":["../../src/App.tsx"],"names":[],"mappings":";AAAA,6BAA6B;AAC7B,OAAO,IAAI,MAAM,YAAY,CAAC;AAC9B,OAAO,WAAW,CAAC;AAEnB,SAAS,GAAG;IACV,OAAO,CACL,4BAAK,SAAS,EAAC,KAAK,gBAClB,gCAAQ,SAAS,EAAC,YAAY,iBAC5B,cAAK,GAAG,EAAE,IAAI,EAAE,SAAS,EAAC,UAAU,EAAC,GAAG,EAAC,MAAM,GAAG,EAClD,iCACO,yCAAwB,4BAC3B,EACJ,0BACE,SAAS,EAAC,UAAU,EACpB,IAAI,EAAC,qBAAqB,EAC1B,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,iCAGvB,KACG,IACL,CACP,CAAC;AACJ,CAAC;AAED,eAAe,GAAG,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
// import React from 'react';
|
|
3
|
+
import { render, screen } from '@testing-library/react';
|
|
4
|
+
import App from './App';
|
|
5
|
+
test('renders learn react link', () => {
|
|
6
|
+
render(_jsx(App, {}));
|
|
7
|
+
const linkElement = screen.getByText(/learn react/i);
|
|
8
|
+
expect(linkElement).toBeInTheDocument();
|
|
9
|
+
});
|
|
10
|
+
//# sourceMappingURL=App.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"App.test.js","sourceRoot":"","sources":["../../src/App.test.tsx"],"names":[],"mappings":";AAAA,6BAA6B;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,GAAG,MAAM,OAAO,CAAC;AAExB,IAAI,CAAC,0BAA0B,EAAE,GAAG,EAAE;IACpC,MAAM,CAAC,KAAC,GAAG,KAAG,CAAC,CAAC;IAChB,MAAM,WAAW,GAAG,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACrD,MAAM,CAAC,WAAW,CAAC,CAAC,iBAAiB,EAAE,CAAC;AAC1C,CAAC,CAAC,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import styles from './styles.module.scss';
|
|
3
|
+
export const Label = (props) => {
|
|
4
|
+
const { forAttribute, children } = props;
|
|
5
|
+
return _jsx("label", Object.assign({ className: styles.label, htmlFor: forAttribute }, { children: children }));
|
|
6
|
+
};
|
|
7
|
+
//# sourceMappingURL=Label.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../../src/components/Label/Label.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAM1C,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAiB,EAAE,EAAE;IACvC,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAEzC,OAAO,8BAAO,SAAS,EAAG,MAAM,CAAC,KAAK,EAAG,OAAO,EAAG,YAAY,gBAAK,QAAQ,IAAU,CAAA;AAC1F,CAAC,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { Meta, Story } from "@storybook/react";
|
|
2
|
+
import { LabelProps } from './Label';
|
|
3
|
+
declare const _default: Meta<import("@storybook/react").Args>;
|
|
4
|
+
export default _default;
|
|
5
|
+
export declare const Primary: Story<LabelProps>;
|
|
6
|
+
export declare const Secondary: Story<LabelProps>;
|
package/{src/components/Label/Label.stories.tsx → dist/esm/components/Label/Label.stories.js}
RENAMED
|
@@ -1,21 +1,17 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { Label, LabelProps } from './Label';
|
|
3
|
-
|
|
1
|
+
import { Label } from './Label';
|
|
4
2
|
export default {
|
|
5
3
|
title: 'Label',
|
|
6
4
|
component: Label,
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
const Template: Story<LabelProps> = (args) => <Label {...args}></Label>;
|
|
10
|
-
|
|
5
|
+
};
|
|
6
|
+
const Template = (args) => React.createElement(Label, Object.assign({}, args));
|
|
11
7
|
export const Primary = Template.bind({});
|
|
12
8
|
Primary.args = {
|
|
13
9
|
forAttribute: 'Label',
|
|
14
10
|
children: 'Label',
|
|
15
11
|
};
|
|
16
|
-
|
|
17
12
|
export const Secondary = Template.bind({});
|
|
18
13
|
Secondary.args = {
|
|
19
14
|
forAttribute: 'someinputname',
|
|
20
15
|
children: 'Label',
|
|
21
16
|
};
|
|
17
|
+
//# sourceMappingURL=Label.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Label.stories.js","sourceRoot":"","sources":["../../../../src/components/Label/Label.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAc,MAAM,SAAS,CAAC;AAE5C,eAAe;IACX,KAAK,EAAE,OAAO;IACd,SAAS,EAAE,KAAK;CACX,CAAC;AAEV,MAAM,QAAQ,GAAsB,CAAC,IAAI,EAAE,EAAE,CAAC,oBAAC,KAAK,oBAAK,IAAI,EAAU,CAAC;AAExE,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACX,YAAY,EAAE,OAAO;IACrB,QAAQ,EAAE,OAAO;CACpB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;IACb,YAAY,EAAE,eAAe;IAC7B,QAAQ,EAAE,OAAO;CACpB,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare enum Spaces {
|
|
3
|
+
s = "s",
|
|
4
|
+
m = "m",
|
|
5
|
+
l = "l"
|
|
6
|
+
}
|
|
7
|
+
export interface SeparatorProps {
|
|
8
|
+
hasOpacity?: boolean;
|
|
9
|
+
colorIsBlue?: boolean;
|
|
10
|
+
space: Spaces;
|
|
11
|
+
}
|
|
12
|
+
export declare const Separator: (props: SeparatorProps) => JSX.Element;
|
package/{src/components/Separator/Separator.tsx → dist/esm/components/Separator/Separator.js}
RENAMED
|
@@ -1,27 +1,20 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
2
|
import styles from './styles.module.scss';
|
|
2
3
|
import classNames from 'classnames';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
s =
|
|
6
|
-
m =
|
|
7
|
-
l =
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
export interface SeparatorProps {
|
|
11
|
-
hasOpacity?: boolean;
|
|
12
|
-
colorIsBlue?: boolean;
|
|
13
|
-
space: Spaces;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
export const Separator = (props: SeparatorProps) => {
|
|
4
|
+
export var Spaces;
|
|
5
|
+
(function (Spaces) {
|
|
6
|
+
Spaces["s"] = "s";
|
|
7
|
+
Spaces["m"] = "m";
|
|
8
|
+
Spaces["l"] = "l";
|
|
9
|
+
})(Spaces || (Spaces = {}));
|
|
10
|
+
export const Separator = (props) => {
|
|
17
11
|
const { hasOpacity, colorIsBlue, space } = props;
|
|
18
|
-
|
|
19
12
|
const separatorClasses = classNames({
|
|
20
13
|
[styles.separator]: true,
|
|
21
14
|
[styles['separator--opacity-50']]: hasOpacity,
|
|
22
15
|
[styles['separator--blue-background']]: colorIsBlue,
|
|
23
16
|
[styles[`separator--space-${space}` || '']]: space && Spaces[space],
|
|
24
17
|
});
|
|
25
|
-
|
|
26
|
-
return <hr className={separatorClasses} />
|
|
18
|
+
return _jsx("hr", { className: separatorClasses });
|
|
27
19
|
};
|
|
20
|
+
//# sourceMappingURL=Separator.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Separator.js","sourceRoot":"","sources":["../../../../src/components/Separator/Separator.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,MAAM,CAAN,IAAY,MAIX;AAJD,WAAY,MAAM;IACd,iBAAO,CAAA;IACP,iBAAO,CAAA;IACP,iBAAO,CAAA;AACX,CAAC,EAJW,MAAM,KAAN,MAAM,QAIjB;AAQD,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IAC/C,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAEjD,MAAM,gBAAgB,GAAG,UAAU,CAAC;QAChC,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,IAAI;QACxB,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,EAAE,UAAU;QAC7C,CAAC,MAAM,CAAC,4BAA4B,CAAC,CAAC,EAAE,WAAW;QACnD,CAAC,MAAM,CAAC,oBAAoB,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,EAAE,KAAK,IAAI,MAAM,CAAC,KAAK,CAAC;KACtE,CAAC,CAAC;IAEH,OAAO,aAAI,SAAS,EAAE,gBAAgB,GAAI,CAAA;AAC9C,CAAC,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { Meta, Story } from "@storybook/react";
|
|
2
|
+
import { SeparatorProps } from './Separator';
|
|
3
|
+
declare const _default: Meta<import("@storybook/react").Args>;
|
|
4
|
+
export default _default;
|
|
5
|
+
export declare const Primary: Story<SeparatorProps>;
|
|
6
|
+
export declare const Secondary: Story<SeparatorProps>;
|
|
@@ -1,22 +1,18 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { Separator, SeparatorProps, Spaces } from './Separator';
|
|
3
|
-
|
|
1
|
+
import { Separator, Spaces } from './Separator';
|
|
4
2
|
export default {
|
|
5
3
|
title: 'Separator',
|
|
6
4
|
component: Separator,
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
const Template: Story<SeparatorProps> = (args) => <Separator {...args}></Separator>;
|
|
10
|
-
|
|
5
|
+
};
|
|
6
|
+
const Template = (args) => React.createElement(Separator, Object.assign({}, args));
|
|
11
7
|
export const Primary = Template.bind({});
|
|
12
8
|
Primary.args = {
|
|
13
9
|
hasOpacity: false,
|
|
14
10
|
colorIsBlue: false,
|
|
15
11
|
};
|
|
16
|
-
|
|
17
12
|
export const Secondary = Template.bind({});
|
|
18
13
|
Secondary.args = {
|
|
19
14
|
hasOpacity: true,
|
|
20
15
|
colorIsBlue: true,
|
|
21
16
|
space: Spaces.l,
|
|
22
17
|
};
|
|
18
|
+
//# sourceMappingURL=Separator.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Separator.stories.js","sourceRoot":"","sources":["../../../../src/components/Separator/Separator.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAkB,MAAM,EAAE,MAAM,aAAa,CAAC;AAEhE,eAAe;IACX,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,SAAS;CACf,CAAC;AAEV,MAAM,QAAQ,GAA0B,CAAC,IAAI,EAAE,EAAE,CAAC,oBAAC,SAAS,oBAAK,IAAI,EAAc,CAAC;AAEpF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACX,UAAU,EAAE,KAAK;IACjB,WAAW,EAAE,KAAK;CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;IACb,UAAU,EAAE,IAAI;IAChB,WAAW,EAAE,IAAI;IACjB,KAAK,EAAE,MAAM,CAAC,CAAC;CAClB,CAAC"}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useRef, useState } from 'react';
|
|
3
|
+
import { SearchOutlined } from '@ant-design/icons';
|
|
4
|
+
import { Input, Tag } from 'antd';
|
|
5
|
+
import { TweenOneGroup } from 'rc-tween-one';
|
|
6
|
+
import styles from './styles.module.scss';
|
|
7
|
+
import classNames from 'classnames';
|
|
8
|
+
export const TagField = (props) => {
|
|
9
|
+
const { customTags = [] } = props;
|
|
10
|
+
const [tags, setTags] = useState(customTags);
|
|
11
|
+
const [inputVisible, setInputVisible] = useState(false);
|
|
12
|
+
const [inputValue, setInputValue] = useState('');
|
|
13
|
+
const inputRef = useRef(null);
|
|
14
|
+
useEffect(() => {
|
|
15
|
+
var _a;
|
|
16
|
+
if (inputVisible) {
|
|
17
|
+
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
18
|
+
}
|
|
19
|
+
}, [inputVisible]);
|
|
20
|
+
const handleClose = (removedTag) => {
|
|
21
|
+
const newTags = tags.filter((tag) => tag !== removedTag);
|
|
22
|
+
setTags(newTags);
|
|
23
|
+
};
|
|
24
|
+
const showInput = () => {
|
|
25
|
+
setInputVisible(true);
|
|
26
|
+
};
|
|
27
|
+
const handleInputChange = (e) => {
|
|
28
|
+
setInputValue(e.target.value);
|
|
29
|
+
};
|
|
30
|
+
const handleInputConfirm = () => {
|
|
31
|
+
if (inputValue && tags.indexOf(inputValue) === -1) {
|
|
32
|
+
setTags([...tags, inputValue]);
|
|
33
|
+
}
|
|
34
|
+
setInputVisible(false);
|
|
35
|
+
setInputValue('');
|
|
36
|
+
};
|
|
37
|
+
const forMap = (tag) => {
|
|
38
|
+
const tagElem = (_jsx(Tag, Object.assign({ closable: true, onClose: (e) => {
|
|
39
|
+
e.preventDefault();
|
|
40
|
+
handleClose(tag);
|
|
41
|
+
} }, { children: tag })));
|
|
42
|
+
return (_jsx("span", Object.assign({ className: styles['tagfield__new'], style: { display: 'inline-block' } }, { children: tagElem }), tag));
|
|
43
|
+
};
|
|
44
|
+
const tagChild = tags.map(forMap);
|
|
45
|
+
return (_jsxs("div", Object.assign({ className: styles.tagfield }, { children: [inputVisible && (_jsx(Input, { ref: inputRef, type: "text", size: "small", value: inputValue, onChange: handleInputChange, onBlur: handleInputConfirm, onPressEnter: handleInputConfirm, className: styles['tagfield__input'] })), !inputVisible && (_jsxs(Tag, Object.assign({ onClick: showInput, className: classNames(styles['tagfield__creator'], 'site-tag-plus') }, { children: [_jsx(SearchOutlined, {}), " Procurar"] }))), _jsx("div", Object.assign({ style: { marginTop: 16 } }, { children: _jsx(TweenOneGroup, Object.assign({ enter: {
|
|
46
|
+
scale: 0.8,
|
|
47
|
+
opacity: 0,
|
|
48
|
+
type: 'from',
|
|
49
|
+
duration: 100,
|
|
50
|
+
}, onEnd: (e) => {
|
|
51
|
+
if (e.type === 'appear' || e.type === 'enter') {
|
|
52
|
+
e.target.style = 'display: inline-block';
|
|
53
|
+
}
|
|
54
|
+
}, leave: { opacity: 0, width: 0, scale: 0, duration: 200 }, appear: false }, { children: tagChild })) }))] })));
|
|
55
|
+
};
|
|
56
|
+
//# sourceMappingURL=Tag.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { TagField } from './Tag';
|
|
2
|
+
export default {
|
|
3
|
+
title: 'TagField',
|
|
4
|
+
component: TagField,
|
|
5
|
+
};
|
|
6
|
+
const Template = (args) => React.createElement(TagField, Object.assign({}, args));
|
|
7
|
+
export const Primary = Template.bind({});
|
|
8
|
+
Primary.args = {};
|
|
9
|
+
//# sourceMappingURL=Tag.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tag.stories.js","sourceRoot":"","sources":["../../../../src/components/Tag/Tag.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,eAAe;IACX,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,QAAQ;CACd,CAAC;AAEV,MAAM,QAAQ,GAAoB,CAAC,IAAI,EAAE,EAAE,CAAC,oBAAC,QAAQ,oBAAK,IAAI,EAAa,CAAC;AAE5E,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG,EACd,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './components';
|