react-restyle-components 0.1.28 → 0.1.31
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/lib/cjs/App.js +36 -12
- package/lib/cjs/App.test.js +10 -8
- package/lib/cjs/core-components/atoms/buttons/button.stories.js +20 -8
- package/lib/cjs/core-components/atoms/buttons/buttons.component.js +17 -6
- package/lib/cjs/core-components/atoms/buttons/buttons.component.test.js +15 -7
- package/lib/cjs/core-components/atoms/check-box/checkBox.component.js +27 -11
- package/lib/cjs/core-components/atoms/check-box/checkBox.component.js.map +1 -1
- package/lib/cjs/core-components/atoms/check-box/checkBox.component.test.js +14 -7
- package/lib/cjs/core-components/atoms/check-box/checkBox.stories.js +22 -9
- package/lib/cjs/core-components/atoms/date-picker/date-picker.component.js +98 -38
- package/lib/cjs/core-components/atoms/date-picker/date-picker.component.js.map +1 -1
- package/lib/cjs/core-components/atoms/date-picker/date-picker.component.test.js +15 -7
- package/lib/cjs/core-components/atoms/date-picker/date-picker.stories.js +18 -8
- package/lib/cjs/core-components/atoms/input/input-otp.component.js +119 -77
- package/lib/cjs/core-components/atoms/input/input-otp.component.js.map +1 -1
- package/lib/cjs/core-components/atoms/input/input-otp.styles.css +35 -0
- package/lib/cjs/core-components/atoms/input/input-pin.component.js +174 -94
- package/lib/cjs/core-components/atoms/input/input-pin.component.test.js +28 -10
- package/lib/cjs/core-components/atoms/input/input-pin.stories.js +17 -9
- package/lib/cjs/core-components/atoms/input/input.component.js +65 -13
- package/lib/cjs/core-components/atoms/input/input.component.test.js +30 -10
- package/lib/cjs/core-components/atoms/input/input.stories.js +16 -7
- package/lib/cjs/core-components/atoms/input/input.styles.css +35 -0
- package/lib/cjs/core-components/atoms/input-dropdown/input-dropdown.component.js +134 -58
- package/lib/cjs/core-components/atoms/input-dropdown/input-dropdown.component.js.map +1 -1
- package/lib/cjs/core-components/atoms/input-dropdown/input-dropdown.component.test.js +16 -7
- package/lib/cjs/core-components/atoms/input-dropdown/input-dropdown.stories.js +14 -7
- package/lib/cjs/core-components/atoms/loader/loader.component.js +83 -21
- package/lib/cjs/core-components/atoms/loader/loader.component.test.js +11 -7
- package/lib/cjs/core-components/atoms/loader/loader.stories.js +14 -8
- package/lib/cjs/core-components/atoms/radio/radio.component.js +22 -8
- package/lib/cjs/core-components/atoms/radio/radio.component.js.map +1 -1
- package/lib/cjs/core-components/atoms/radio/radio.component.test.js +14 -7
- package/lib/cjs/core-components/atoms/radio/radio.stories.js +22 -10
- package/lib/cjs/core-components/atoms/stepper/stepper.component.js +77 -34
- package/lib/cjs/core-components/atoms/stepper/stepper.component.test.js +16 -7
- package/lib/cjs/core-components/atoms/stepper/stepper.stories.js +15 -7
- package/lib/cjs/core-components/atoms/timer/timer.component.js +120 -93
- package/lib/cjs/core-components/atoms/timer/timer.component.js.map +1 -1
- package/lib/cjs/core-components/atoms/timer/timer.component.test.js +20 -10
- package/lib/cjs/core-components/index.js +35 -16
- package/lib/cjs/core-utils/index.js +31 -15
- package/lib/cjs/core-utils/unit-test.utils.js +8 -6
- package/lib/cjs/index.js +31 -15
- package/lib/cjs/reportWebVitals.js +52 -29
- package/lib/cjs/setupTests.js +1 -1
- package/lib/esm/App.js +34 -12
- package/lib/esm/App.test.js +8 -8
- package/lib/esm/core-components/atoms/buttons/button.stories.js +17 -7
- package/lib/esm/core-components/atoms/buttons/buttons.component.js +13 -4
- package/lib/esm/core-components/atoms/buttons/buttons.component.test.js +13 -7
- package/lib/esm/core-components/atoms/check-box/checkBox.component.js +20 -9
- package/lib/esm/core-components/atoms/check-box/checkBox.component.js.map +1 -1
- package/lib/esm/core-components/atoms/check-box/checkBox.component.test.js +9 -7
- package/lib/esm/core-components/atoms/check-box/checkBox.stories.js +16 -8
- package/lib/esm/core-components/atoms/date-picker/date-picker.component.js +52 -20
- package/lib/esm/core-components/atoms/date-picker/date-picker.component.js.map +1 -1
- package/lib/esm/core-components/atoms/date-picker/date-picker.component.test.js +14 -8
- package/lib/esm/core-components/atoms/date-picker/date-picker.stories.js +16 -8
- package/lib/esm/core-components/atoms/input/input-otp.component.js +80 -59
- package/lib/esm/core-components/atoms/input/input-otp.component.js.map +1 -1
- package/lib/esm/core-components/atoms/input/input-otp.styles.css +35 -0
- package/lib/esm/core-components/atoms/input/input-pin.component.js +136 -77
- package/lib/esm/core-components/atoms/input/input-pin.component.test.js +26 -10
- package/lib/esm/core-components/atoms/input/input-pin.stories.js +14 -8
- package/lib/esm/core-components/atoms/input/input.component.js +62 -12
- package/lib/esm/core-components/atoms/input/input.component.test.js +28 -10
- package/lib/esm/core-components/atoms/input/input.stories.js +13 -6
- package/lib/esm/core-components/atoms/input/input.styles.css +35 -0
- package/lib/esm/core-components/atoms/input-dropdown/input-dropdown.component.js +96 -37
- package/lib/esm/core-components/atoms/input-dropdown/input-dropdown.component.js.map +1 -1
- package/lib/esm/core-components/atoms/input-dropdown/input-dropdown.component.test.js +14 -7
- package/lib/esm/core-components/atoms/input-dropdown/input-dropdown.stories.js +11 -6
- package/lib/esm/core-components/atoms/loader/loader.component.js +80 -20
- package/lib/esm/core-components/atoms/loader/loader.component.test.js +7 -7
- package/lib/esm/core-components/atoms/loader/loader.stories.js +11 -7
- package/lib/esm/core-components/atoms/radio/radio.component.js +12 -6
- package/lib/esm/core-components/atoms/radio/radio.component.js.map +1 -1
- package/lib/esm/core-components/atoms/radio/radio.component.test.js +9 -7
- package/lib/esm/core-components/atoms/radio/radio.stories.js +16 -9
- package/lib/esm/core-components/atoms/stepper/stepper.component.js +74 -32
- package/lib/esm/core-components/atoms/stepper/stepper.component.test.js +14 -7
- package/lib/esm/core-components/atoms/stepper/stepper.stories.js +12 -6
- package/lib/esm/core-components/atoms/timer/timer.component.js +81 -75
- package/lib/esm/core-components/atoms/timer/timer.component.js.map +1 -1
- package/lib/esm/core-components/atoms/timer/timer.component.test.js +10 -10
- package/lib/esm/core-components/index.js +12 -12
- package/lib/esm/core-utils/index.js +2 -2
- package/lib/esm/core-utils/unit-test.utils.js +5 -5
- package/lib/esm/index.js +2 -2
- package/lib/esm/reportWebVitals.js +10 -10
- package/lib/esm/setupTests.js +2 -2
- package/package.json +20 -4
package/lib/cjs/App.js
CHANGED
|
@@ -1,20 +1,44 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __importDefault =
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
var __importDefault =
|
|
3
|
+
(this && this.__importDefault) ||
|
|
4
|
+
function (mod) {
|
|
5
|
+
return mod && mod.__esModule ? mod : { default: mod };
|
|
6
|
+
};
|
|
5
7
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
8
|
const react_1 = __importDefault(require("react"));
|
|
7
9
|
const logo_svg_1 = __importDefault(require("./logo.svg"));
|
|
8
10
|
require("./App.css");
|
|
9
11
|
function App() {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
12
|
+
return react_1.default.createElement(
|
|
13
|
+
"div",
|
|
14
|
+
{ className: "App" },
|
|
15
|
+
react_1.default.createElement(
|
|
16
|
+
"header",
|
|
17
|
+
{ className: "App-header" },
|
|
18
|
+
react_1.default.createElement("img", {
|
|
19
|
+
src: logo_svg_1.default,
|
|
20
|
+
className: "App-logo",
|
|
21
|
+
alt: "logo",
|
|
22
|
+
}),
|
|
23
|
+
react_1.default.createElement(
|
|
24
|
+
"p",
|
|
25
|
+
null,
|
|
26
|
+
"Edit ",
|
|
27
|
+
react_1.default.createElement("code", null, "src/App.tsx"),
|
|
28
|
+
" and save to reload."
|
|
29
|
+
),
|
|
30
|
+
react_1.default.createElement(
|
|
31
|
+
"a",
|
|
32
|
+
{
|
|
33
|
+
className: "App-link",
|
|
34
|
+
href: "https://reactjs.org",
|
|
35
|
+
target: "_blank",
|
|
36
|
+
rel: "noopener noreferrer",
|
|
37
|
+
},
|
|
38
|
+
"Learn React"
|
|
39
|
+
)
|
|
40
|
+
)
|
|
41
|
+
);
|
|
18
42
|
}
|
|
19
43
|
exports.default = App;
|
|
20
|
-
//# sourceMappingURL=App.js.map
|
|
44
|
+
//# sourceMappingURL=App.js.map
|
package/lib/cjs/App.test.js
CHANGED
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __importDefault =
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
var __importDefault =
|
|
3
|
+
(this && this.__importDefault) ||
|
|
4
|
+
function (mod) {
|
|
5
|
+
return mod && mod.__esModule ? mod : { default: mod };
|
|
6
|
+
};
|
|
5
7
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
8
|
const react_1 = __importDefault(require("react"));
|
|
7
9
|
const react_2 = require("@testing-library/react");
|
|
8
10
|
const App_1 = __importDefault(require("./App"));
|
|
9
|
-
test(
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
test("renders learn react link", () => {
|
|
12
|
+
(0, react_2.render)(react_1.default.createElement(App_1.default, null));
|
|
13
|
+
const linkElement = react_2.screen.getByText(/learn react/i);
|
|
14
|
+
expect(linkElement).toBeInTheDocument();
|
|
13
15
|
});
|
|
14
|
-
//# sourceMappingURL=App.test.js.map
|
|
16
|
+
//# sourceMappingURL=App.test.js.map
|
|
@@ -1,19 +1,31 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __importDefault =
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
var __importDefault =
|
|
3
|
+
(this && this.__importDefault) ||
|
|
4
|
+
function (mod) {
|
|
5
|
+
return mod && mod.__esModule ? mod : { default: mod };
|
|
6
|
+
};
|
|
5
7
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
8
|
exports.Primary = exports.Disable = void 0;
|
|
7
9
|
const react_1 = __importDefault(require("react"));
|
|
8
10
|
const buttons_component_1 = require("./buttons.component");
|
|
9
11
|
// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
|
|
10
12
|
exports.default = {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
+
title: "Atoms/Button",
|
|
14
|
+
component: buttons_component_1.Button,
|
|
13
15
|
};
|
|
14
16
|
// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
|
|
15
|
-
const Disable = () =>
|
|
17
|
+
const Disable = () =>
|
|
18
|
+
react_1.default.createElement(
|
|
19
|
+
buttons_component_1.Button,
|
|
20
|
+
{ className: "bg-gray-light w-40", onClick: () => {} },
|
|
21
|
+
"Next"
|
|
22
|
+
);
|
|
16
23
|
exports.Disable = Disable;
|
|
17
|
-
const Primary = () =>
|
|
24
|
+
const Primary = () =>
|
|
25
|
+
react_1.default.createElement(
|
|
26
|
+
buttons_component_1.Button,
|
|
27
|
+
{ className: "bg-orange mt-4", onClick: () => {} },
|
|
28
|
+
"Permanent Address"
|
|
29
|
+
);
|
|
18
30
|
exports.Primary = Primary;
|
|
19
|
-
//# sourceMappingURL=button.stories.js.map
|
|
31
|
+
//# sourceMappingURL=button.stories.js.map
|
|
@@ -1,12 +1,23 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __importDefault =
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
var __importDefault =
|
|
3
|
+
(this && this.__importDefault) ||
|
|
4
|
+
function (mod) {
|
|
5
|
+
return mod && mod.__esModule ? mod : { default: mod };
|
|
6
|
+
};
|
|
5
7
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
8
|
exports.Button = void 0;
|
|
7
9
|
const react_1 = __importDefault(require("react"));
|
|
8
|
-
const Button = ({ className, disable, onClick, children
|
|
9
|
-
|
|
10
|
+
const Button = ({ className, disable, onClick, children }) => {
|
|
11
|
+
return react_1.default.createElement(
|
|
12
|
+
"button",
|
|
13
|
+
{
|
|
14
|
+
"data-testid": "buttonElement",
|
|
15
|
+
disabled: disable,
|
|
16
|
+
className: `${className} rounded-100px px-3 py-1 text-text-base text-md pt-2 pb-2 font-nunitoSansRegular`,
|
|
17
|
+
onClick: () => onClick(),
|
|
18
|
+
},
|
|
19
|
+
children
|
|
20
|
+
);
|
|
10
21
|
};
|
|
11
22
|
exports.Button = Button;
|
|
12
|
-
//# sourceMappingURL=buttons.component.js.map
|
|
23
|
+
//# sourceMappingURL=buttons.component.js.map
|
|
@@ -1,14 +1,22 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __importDefault =
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
var __importDefault =
|
|
3
|
+
(this && this.__importDefault) ||
|
|
4
|
+
function (mod) {
|
|
5
|
+
return mod && mod.__esModule ? mod : { default: mod };
|
|
6
|
+
};
|
|
5
7
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
8
|
/* eslint-disable testing-library/render-result-naming-convention */
|
|
7
9
|
const react_1 = __importDefault(require("react"));
|
|
8
10
|
const _core_utils_1 = require("@core-utils");
|
|
9
11
|
const buttons_component_1 = require("./buttons.component");
|
|
10
|
-
it(
|
|
11
|
-
|
|
12
|
-
|
|
12
|
+
it("render XB_Button correctly", () => {
|
|
13
|
+
const button = (0, _core_utils_1.render)(
|
|
14
|
+
react_1.default.createElement(
|
|
15
|
+
buttons_component_1.Button,
|
|
16
|
+
{ className: "bg-gray-light w-40", onClick: () => jest.fn() },
|
|
17
|
+
"Permanent Address"
|
|
18
|
+
)
|
|
19
|
+
);
|
|
20
|
+
expect(button).toMatchSnapshot();
|
|
13
21
|
});
|
|
14
|
-
//# sourceMappingURL=buttons.component.test.js.map
|
|
22
|
+
//# sourceMappingURL=buttons.component.test.js.map
|
|
@@ -1,18 +1,34 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __importDefault =
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
var __importDefault =
|
|
3
|
+
(this && this.__importDefault) ||
|
|
4
|
+
function (mod) {
|
|
5
|
+
return mod && mod.__esModule ? mod : { default: mod };
|
|
6
|
+
};
|
|
5
7
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
8
|
exports.CheckBox = void 0;
|
|
7
9
|
const react_1 = __importDefault(require("react"));
|
|
8
|
-
const unCheckbox_svg_1 = require("
|
|
9
|
-
const checkedBox_svg_1 = require("
|
|
10
|
+
const unCheckbox_svg_1 = require("@assets/svg/unCheckbox.svg");
|
|
11
|
+
const checkedBox_svg_1 = require("@assets/svg/checkedBox.svg");
|
|
10
12
|
const CheckBox = ({ className, checked, onChange }) => {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
const width = 20;
|
|
14
|
+
const hanleClick = () => {
|
|
15
|
+
onChange();
|
|
16
|
+
};
|
|
17
|
+
return react_1.default.createElement(
|
|
18
|
+
"div",
|
|
19
|
+
{ className: `${className} flex flex-row mr-2`, onClick: hanleClick },
|
|
20
|
+
checked
|
|
21
|
+
? react_1.default.createElement(checkedBox_svg_1.ReactComponent, {
|
|
22
|
+
width: width,
|
|
23
|
+
height: width,
|
|
24
|
+
fill: "#E7503D",
|
|
25
|
+
stroke: "E7503D",
|
|
26
|
+
})
|
|
27
|
+
: react_1.default.createElement(unCheckbox_svg_1.ReactComponent, {
|
|
28
|
+
width: width,
|
|
29
|
+
height: width,
|
|
30
|
+
})
|
|
31
|
+
);
|
|
16
32
|
};
|
|
17
33
|
exports.CheckBox = CheckBox;
|
|
18
|
-
//# sourceMappingURL=checkBox.component.js.map
|
|
34
|
+
//# sourceMappingURL=checkBox.component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkBox.component.js","sourceRoot":"","sources":["../../../../../src/core-components/atoms/check-box/checkBox.component.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,+
|
|
1
|
+
{"version":3,"file":"checkBox.component.js","sourceRoot":"","sources":["../../../../../src/core-components/atoms/check-box/checkBox.component.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,+DAAwE;AACxE,+DAAwE;AAQjE,MAAM,QAAQ,GAAG,CAAC,EAAC,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAgB,EAAE,EAAE;IACxE,MAAM,KAAK,GAAG,EAAE,CAAC;IACjB,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,QAAQ,EAAE,CAAC;IACb,CAAC,CAAC;IACF,OAAO,CACL,uCAAK,SAAS,EAAE,GAAG,SAAS,sBAAsB,EAAE,OAAO,EAAE,UAAU,IACpE,OAAO,CAAC,CAAC,CAAC,CACT,8BAAC,+BAAU,IACT,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,KAAK,EACb,IAAI,EAAC,SAAS,EACd,MAAM,EAAC,QAAQ,GACf,CACH,CAAC,CAAC,CAAC,CACF,8BAAC,+BAAU,IAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,GAAI,CAC5C,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AAnBW,QAAA,QAAQ,YAmBnB"}
|
|
@@ -1,14 +1,21 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __importDefault =
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
var __importDefault =
|
|
3
|
+
(this && this.__importDefault) ||
|
|
4
|
+
function (mod) {
|
|
5
|
+
return mod && mod.__esModule ? mod : { default: mod };
|
|
6
|
+
};
|
|
5
7
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
8
|
/* eslint-disable testing-library/render-result-naming-convention */
|
|
7
9
|
const react_1 = __importDefault(require("react"));
|
|
8
10
|
const _core_utils_1 = require("@core-utils");
|
|
9
11
|
const checkBox_component_1 = require("./checkBox.component");
|
|
10
|
-
it(
|
|
11
|
-
|
|
12
|
-
|
|
12
|
+
it("render XB_CheckBox correctly", () => {
|
|
13
|
+
const checkbox = (0, _core_utils_1.render)(
|
|
14
|
+
react_1.default.createElement(checkBox_component_1.CheckBox, {
|
|
15
|
+
checked: true,
|
|
16
|
+
onChange: () => jest.fn(),
|
|
17
|
+
})
|
|
18
|
+
);
|
|
19
|
+
expect(checkbox).toMatchSnapshot();
|
|
13
20
|
});
|
|
14
|
-
//# sourceMappingURL=checkBox.component.test.js.map
|
|
21
|
+
//# sourceMappingURL=checkBox.component.test.js.map
|
|
@@ -1,19 +1,32 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __importDefault =
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
var __importDefault =
|
|
3
|
+
(this && this.__importDefault) ||
|
|
4
|
+
function (mod) {
|
|
5
|
+
return mod && mod.__esModule ? mod : { default: mod };
|
|
6
|
+
};
|
|
5
7
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
8
|
exports.Primary = void 0;
|
|
7
9
|
const react_1 = __importDefault(require("react"));
|
|
8
10
|
const checkBox_component_1 = require("./checkBox.component");
|
|
9
11
|
// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
|
|
10
12
|
exports.default = {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
+
title: "Atoms/CheckBox",
|
|
14
|
+
component: checkBox_component_1.CheckBox,
|
|
13
15
|
};
|
|
14
16
|
// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
|
|
15
|
-
const Primary = () =>
|
|
16
|
-
|
|
17
|
-
|
|
17
|
+
const Primary = () =>
|
|
18
|
+
react_1.default.createElement(
|
|
19
|
+
"div",
|
|
20
|
+
{ className: "flex flex-row" },
|
|
21
|
+
react_1.default.createElement(checkBox_component_1.CheckBox, {
|
|
22
|
+
checked: true,
|
|
23
|
+
onChange: () => {},
|
|
24
|
+
}),
|
|
25
|
+
react_1.default.createElement(
|
|
26
|
+
"span",
|
|
27
|
+
null,
|
|
28
|
+
"I agree and authorize MiMo to fetch my personal details from UIDAI. I confirm that I have not used the OTP-based Aadhar verification to open any other bank account. I have read and accepted all Terms & Conditions"
|
|
29
|
+
)
|
|
30
|
+
);
|
|
18
31
|
exports.Primary = Primary;
|
|
19
|
-
//# sourceMappingURL=checkBox.stories.js.map
|
|
32
|
+
//# sourceMappingURL=checkBox.stories.js.map
|
|
@@ -1,51 +1,111 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __createBinding =
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
}
|
|
18
|
-
|
|
2
|
+
var __createBinding =
|
|
3
|
+
(this && this.__createBinding) ||
|
|
4
|
+
(Object.create
|
|
5
|
+
? function (o, m, k, k2) {
|
|
6
|
+
if (k2 === undefined) k2 = k;
|
|
7
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
8
|
+
if (
|
|
9
|
+
!desc ||
|
|
10
|
+
("get" in desc ? !m.__esModule : desc.writable || desc.configurable)
|
|
11
|
+
) {
|
|
12
|
+
desc = {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function () {
|
|
15
|
+
return m[k];
|
|
16
|
+
},
|
|
17
|
+
};
|
|
18
|
+
}
|
|
19
|
+
Object.defineProperty(o, k2, desc);
|
|
20
|
+
}
|
|
21
|
+
: function (o, m, k, k2) {
|
|
22
|
+
if (k2 === undefined) k2 = k;
|
|
23
|
+
o[k2] = m[k];
|
|
24
|
+
});
|
|
25
|
+
var __setModuleDefault =
|
|
26
|
+
(this && this.__setModuleDefault) ||
|
|
27
|
+
(Object.create
|
|
28
|
+
? function (o, v) {
|
|
29
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
30
|
+
}
|
|
31
|
+
: function (o, v) {
|
|
32
|
+
o["default"] = v;
|
|
33
|
+
});
|
|
34
|
+
var __importStar =
|
|
35
|
+
(this && this.__importStar) ||
|
|
36
|
+
function (mod) {
|
|
19
37
|
if (mod && mod.__esModule) return mod;
|
|
20
38
|
var result = {};
|
|
21
|
-
if (mod != null)
|
|
39
|
+
if (mod != null)
|
|
40
|
+
for (var k in mod)
|
|
41
|
+
if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
|
|
42
|
+
__createBinding(result, mod, k);
|
|
22
43
|
__setModuleDefault(result, mod);
|
|
23
44
|
return result;
|
|
24
|
-
};
|
|
25
|
-
var __importDefault =
|
|
26
|
-
|
|
27
|
-
|
|
45
|
+
};
|
|
46
|
+
var __importDefault =
|
|
47
|
+
(this && this.__importDefault) ||
|
|
48
|
+
function (mod) {
|
|
49
|
+
return mod && mod.__esModule ? mod : { default: mod };
|
|
50
|
+
};
|
|
28
51
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
52
|
exports.DatePickerComp = void 0;
|
|
30
53
|
const react_1 = __importStar(require("react"));
|
|
31
54
|
const react_datepicker_1 = __importDefault(require("react-datepicker"));
|
|
32
55
|
require("react-datepicker/dist/react-datepicker.css");
|
|
33
|
-
const datePicker_svg_1 = require("
|
|
56
|
+
const datePicker_svg_1 = require("@assets/svg/datePicker.svg");
|
|
34
57
|
const dayjs_1 = __importDefault(require("dayjs"));
|
|
35
|
-
const DatePickerComp = ({
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
return
|
|
47
|
-
|
|
48
|
-
|
|
58
|
+
const DatePickerComp = ({
|
|
59
|
+
className,
|
|
60
|
+
disable,
|
|
61
|
+
value,
|
|
62
|
+
showFormat = "yyyy-MM-dd",
|
|
63
|
+
placeholder = "Select Date",
|
|
64
|
+
}) => {
|
|
65
|
+
const [pickedDate, setPickedDate] = (0, react_1.useState)(
|
|
66
|
+
value && (0, dayjs_1.default)(value).toDate()
|
|
67
|
+
);
|
|
68
|
+
const CustomInput = (0, react_1.forwardRef)((props, ref) => {
|
|
69
|
+
return react_1.default.createElement(
|
|
70
|
+
"div",
|
|
71
|
+
{
|
|
72
|
+
onClick: !disable && props.onClick,
|
|
73
|
+
ref: ref,
|
|
74
|
+
className:
|
|
75
|
+
" border-gray-light place-items-center border rounded-md px-2 flex flex-wrap ",
|
|
76
|
+
},
|
|
77
|
+
react_1.default.createElement(
|
|
78
|
+
"label",
|
|
79
|
+
{
|
|
80
|
+
className: "mr-3 font-nunitoSansRegular text-primaryCharcoal text-lg",
|
|
81
|
+
},
|
|
82
|
+
props.value || props.placeholder
|
|
83
|
+
),
|
|
84
|
+
react_1.default.createElement(datePicker_svg_1.ReactComponent, {
|
|
85
|
+
width: 15,
|
|
86
|
+
height: 15,
|
|
87
|
+
})
|
|
88
|
+
);
|
|
89
|
+
});
|
|
90
|
+
CustomInput.displayName = "CustomInput";
|
|
91
|
+
const handleChanges = (date) => {
|
|
92
|
+
setPickedDate(date);
|
|
93
|
+
};
|
|
94
|
+
return react_1.default.createElement(
|
|
95
|
+
"div",
|
|
96
|
+
{ className: `${className} items-center flex justify-start ` },
|
|
97
|
+
react_1.default.createElement(
|
|
98
|
+
"div",
|
|
99
|
+
{ className: "flex-wrap" },
|
|
100
|
+
react_1.default.createElement(react_datepicker_1.default, {
|
|
101
|
+
selected: pickedDate || new Date(),
|
|
102
|
+
dateFormat: showFormat,
|
|
103
|
+
placeholder: placeholder,
|
|
104
|
+
onChange: handleChanges,
|
|
105
|
+
customInput: react_1.default.createElement(CustomInput, null),
|
|
106
|
+
})
|
|
107
|
+
)
|
|
108
|
+
);
|
|
49
109
|
};
|
|
50
110
|
exports.DatePickerComp = DatePickerComp;
|
|
51
|
-
//# sourceMappingURL=date-picker.component.js.map
|
|
111
|
+
//# sourceMappingURL=date-picker.component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date-picker.component.js","sourceRoot":"","sources":["../../../../../src/core-components/atoms/date-picker/date-picker.component.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAkD;AAClD,wEAA0C;AAC1C,sDAAoD;AACpD,+
|
|
1
|
+
{"version":3,"file":"date-picker.component.js","sourceRoot":"","sources":["../../../../../src/core-components/atoms/date-picker/date-picker.component.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAkD;AAClD,wEAA0C;AAC1C,sDAAoD;AACpD,+DAA2E;AAC3E,kDAA0B;AAUnB,MAAM,cAAc,GAAG,CAAC,EAC7B,SAAS,EACT,OAAO,EACP,KAAK,EACL,UAAU,GAAG,YAAY,EACzB,WAAW,GAAG,aAAa,GACX,EAAE,EAAE;IACpB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,IAAI,IAAA,eAAK,EAAC,KAAK,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC;IAE7E,MAAM,WAAW,GAAG,IAAA,kBAAU,EAAC,CAAC,KAAU,EAAE,GAAQ,EAAE,EAAE;QACtD,OAAO,CACL,uCACE,OAAO,EAAE,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,EAClC,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,+EAA+E;YAEzF,yCAAO,SAAS,EAAC,0DAA0D,IACxE,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,WAAW,CAC3B;YACR,8BAAC,+BAAa,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,CACpC,CACP,CAAC;IACJ,CAAC,CAAC,CAAC;IACH,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC;IAExC,MAAM,aAAa,GAAG,CAAC,IAAI,EAAE,EAAE;QAC7B,aAAa,CAAC,IAAI,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,OAAO,CACL,uCAAK,SAAS,EAAE,GAAG,SAAS,qCAAqC;QAC/D,uCAAK,SAAS,EAAC,WAAW;YACxB,8BAAC,0BAAU,IACT,QAAQ,EAAE,UAAU,IAAI,IAAI,IAAI,EAAE,EAClC,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,aAAa,EACvB,WAAW,EAAE,8BAAC,WAAW,OAAG,GAC5B,CACE,CAEF,CACP,CAAC;AACJ,CAAC,CAAC;AA3CW,QAAA,cAAc,kBA2CzB"}
|
|
@@ -1,15 +1,23 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __importDefault =
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
var __importDefault =
|
|
3
|
+
(this && this.__importDefault) ||
|
|
4
|
+
function (mod) {
|
|
5
|
+
return mod && mod.__esModule ? mod : { default: mod };
|
|
6
|
+
};
|
|
5
7
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
8
|
/* eslint-disable testing-library/render-result-naming-convention */
|
|
7
9
|
const react_1 = __importDefault(require("react"));
|
|
8
10
|
const _core_utils_1 = require("@core-utils");
|
|
9
11
|
const date_picker_component_1 = require("./date-picker.component");
|
|
10
12
|
const dayjs_1 = __importDefault(require("dayjs"));
|
|
11
|
-
it(
|
|
12
|
-
|
|
13
|
-
|
|
13
|
+
it("render XB_DatePicker correctly", () => {
|
|
14
|
+
const datepicker = (0, _core_utils_1.render)(
|
|
15
|
+
react_1.default.createElement(date_picker_component_1.DatePickerComp, {
|
|
16
|
+
className: "mt-6",
|
|
17
|
+
value: (0, dayjs_1.default)().format("YYYY-MM-DD"),
|
|
18
|
+
showFormat: "dd-MM-yyyy",
|
|
19
|
+
})
|
|
20
|
+
);
|
|
21
|
+
expect(datepicker).toMatchSnapshot();
|
|
14
22
|
});
|
|
15
|
-
//# sourceMappingURL=date-picker.component.test.js.map
|
|
23
|
+
//# sourceMappingURL=date-picker.component.test.js.map
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __importDefault =
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
var __importDefault =
|
|
3
|
+
(this && this.__importDefault) ||
|
|
4
|
+
function (mod) {
|
|
5
|
+
return mod && mod.__esModule ? mod : { default: mod };
|
|
6
|
+
};
|
|
5
7
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
8
|
exports.Primary = void 0;
|
|
7
9
|
const react_1 = __importDefault(require("react"));
|
|
@@ -9,11 +11,19 @@ const date_picker_component_1 = require("./date-picker.component");
|
|
|
9
11
|
const dayjs_1 = __importDefault(require("dayjs"));
|
|
10
12
|
// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
|
|
11
13
|
exports.default = {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
+
title: "Atoms/DatePickerComp",
|
|
15
|
+
component: date_picker_component_1.DatePickerComp,
|
|
14
16
|
};
|
|
15
17
|
// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
|
|
16
|
-
const Primary = () =>
|
|
17
|
-
|
|
18
|
+
const Primary = () =>
|
|
19
|
+
react_1.default.createElement(
|
|
20
|
+
"div",
|
|
21
|
+
{ className: "flex flex-row" },
|
|
22
|
+
react_1.default.createElement(date_picker_component_1.DatePickerComp, {
|
|
23
|
+
className: "mt-6",
|
|
24
|
+
value: (0, dayjs_1.default)().format("YYYY-MM-DD"),
|
|
25
|
+
showFormat: "dd-MM-yyyy",
|
|
26
|
+
})
|
|
27
|
+
);
|
|
18
28
|
exports.Primary = Primary;
|
|
19
|
-
//# sourceMappingURL=date-picker.stories.js.map
|
|
29
|
+
//# sourceMappingURL=date-picker.stories.js.map
|