react-restyle-components 0.1.29 → 0.1.32
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/README.md +6 -1
- 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 +25 -9
- 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 +97 -37
- 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 +118 -76
- 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-dropdown/input-dropdown.component.js +132 -56
- 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 +20 -6
- 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 +119 -92
- 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.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.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-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-dropdown/input-dropdown.component.js +96 -37
- 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.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.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
|
@@ -1,18 +1,34 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __createBinding =
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
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 __exportStar =
|
|
26
|
+
(this && this.__exportStar) ||
|
|
27
|
+
function (m, exports) {
|
|
28
|
+
for (var p in m)
|
|
29
|
+
if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p))
|
|
30
|
+
__createBinding(exports, m, p);
|
|
31
|
+
};
|
|
16
32
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
33
|
__exportStar(require("./unit-test.utils"), exports);
|
|
18
|
-
//# sourceMappingURL=index.js.map
|
|
34
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -1,17 +1,19 @@
|
|
|
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.Providers = exports.render = void 0;
|
|
7
9
|
const react_1 = __importDefault(require("react"));
|
|
8
10
|
const react_2 = require("@testing-library/react");
|
|
9
11
|
const Providers = ({ children }) => {
|
|
10
|
-
|
|
12
|
+
return react_1.default.createElement("div", null, children);
|
|
11
13
|
};
|
|
12
14
|
exports.Providers = Providers;
|
|
13
15
|
const render = (Component) => {
|
|
14
|
-
|
|
16
|
+
return (0, react_2.render)(Component, { wrapper: Providers });
|
|
15
17
|
};
|
|
16
18
|
exports.render = render;
|
|
17
|
-
//# sourceMappingURL=unit-test.utils.js.map
|
|
19
|
+
//# sourceMappingURL=unit-test.utils.js.map
|
package/lib/cjs/index.js
CHANGED
|
@@ -1,18 +1,34 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __createBinding =
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
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 __exportStar =
|
|
26
|
+
(this && this.__exportStar) ||
|
|
27
|
+
function (m, exports) {
|
|
28
|
+
for (var p in m)
|
|
29
|
+
if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p))
|
|
30
|
+
__createBinding(exports, m, p);
|
|
31
|
+
};
|
|
16
32
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
33
|
__exportStar(require("./core-components"), exports);
|
|
18
|
-
//# sourceMappingURL=index.js.map
|
|
34
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -1,38 +1,61 @@
|
|
|
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
|
-
};
|
|
45
|
+
};
|
|
25
46
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
47
|
const reportWebVitals = (onPerfEntry) => {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
48
|
+
if (onPerfEntry && onPerfEntry instanceof Function) {
|
|
49
|
+
Promise.resolve()
|
|
50
|
+
.then(() => __importStar(require("web-vitals")))
|
|
51
|
+
.then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
|
52
|
+
getCLS(onPerfEntry);
|
|
53
|
+
getFID(onPerfEntry);
|
|
54
|
+
getFCP(onPerfEntry);
|
|
55
|
+
getLCP(onPerfEntry);
|
|
56
|
+
getTTFB(onPerfEntry);
|
|
57
|
+
});
|
|
58
|
+
}
|
|
36
59
|
};
|
|
37
60
|
exports.default = reportWebVitals;
|
|
38
|
-
//# sourceMappingURL=reportWebVitals.js.map
|
|
61
|
+
//# sourceMappingURL=reportWebVitals.js.map
|
package/lib/cjs/setupTests.js
CHANGED
|
@@ -5,4 +5,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
5
5
|
// expect(element).toHaveTextContent(/react/i)
|
|
6
6
|
// learn more: https://github.com/testing-library/jest-dom
|
|
7
7
|
require("@testing-library/jest-dom");
|
|
8
|
-
//# sourceMappingURL=setupTests.js.map
|
|
8
|
+
//# sourceMappingURL=setupTests.js.map
|
package/lib/esm/App.js
CHANGED
|
@@ -1,15 +1,37 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import logo from
|
|
3
|
-
import
|
|
1
|
+
import React from "react";
|
|
2
|
+
import logo from "./logo.svg";
|
|
3
|
+
import "./App.css";
|
|
4
4
|
function App() {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
5
|
+
return React.createElement(
|
|
6
|
+
"div",
|
|
7
|
+
{ className: "App" },
|
|
8
|
+
React.createElement(
|
|
9
|
+
"header",
|
|
10
|
+
{ className: "App-header" },
|
|
11
|
+
React.createElement("img", {
|
|
12
|
+
src: logo,
|
|
13
|
+
className: "App-logo",
|
|
14
|
+
alt: "logo",
|
|
15
|
+
}),
|
|
16
|
+
React.createElement(
|
|
17
|
+
"p",
|
|
18
|
+
null,
|
|
19
|
+
"Edit ",
|
|
20
|
+
React.createElement("code", null, "src/App.tsx"),
|
|
21
|
+
" and save to reload."
|
|
22
|
+
),
|
|
23
|
+
React.createElement(
|
|
24
|
+
"a",
|
|
25
|
+
{
|
|
26
|
+
className: "App-link",
|
|
27
|
+
href: "https://reactjs.org",
|
|
28
|
+
target: "_blank",
|
|
29
|
+
rel: "noopener noreferrer",
|
|
30
|
+
},
|
|
31
|
+
"Learn React"
|
|
32
|
+
)
|
|
33
|
+
)
|
|
34
|
+
);
|
|
13
35
|
}
|
|
14
36
|
export default App;
|
|
15
|
-
//# sourceMappingURL=App.js.map
|
|
37
|
+
//# sourceMappingURL=App.js.map
|
package/lib/esm/App.test.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { render, screen } from
|
|
3
|
-
import App from
|
|
4
|
-
test(
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { render, screen } from "@testing-library/react";
|
|
3
|
+
import App from "./App";
|
|
4
|
+
test("renders learn react link", () => {
|
|
5
|
+
render(React.createElement(App, null));
|
|
6
|
+
const linkElement = screen.getByText(/learn react/i);
|
|
7
|
+
expect(linkElement).toBeInTheDocument();
|
|
8
8
|
});
|
|
9
|
-
//# sourceMappingURL=App.test.js.map
|
|
9
|
+
//# sourceMappingURL=App.test.js.map
|
|
@@ -1,11 +1,21 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { Button } from
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Button } from "./buttons.component";
|
|
3
3
|
// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
|
|
4
4
|
export default {
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
title: "Atoms/Button",
|
|
6
|
+
component: Button,
|
|
7
7
|
};
|
|
8
8
|
// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
|
|
9
|
-
export const Disable = () =>
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
export const Disable = () =>
|
|
10
|
+
React.createElement(
|
|
11
|
+
Button,
|
|
12
|
+
{ className: "bg-gray-light w-40", onClick: () => {} },
|
|
13
|
+
"Next"
|
|
14
|
+
);
|
|
15
|
+
export const Primary = () =>
|
|
16
|
+
React.createElement(
|
|
17
|
+
Button,
|
|
18
|
+
{ className: "bg-orange mt-4", onClick: () => {} },
|
|
19
|
+
"Permanent Address"
|
|
20
|
+
);
|
|
21
|
+
//# sourceMappingURL=button.stories.js.map
|
|
@@ -1,5 +1,14 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
export const Button = ({ className, disable, onClick, children
|
|
3
|
-
|
|
1
|
+
import React from "react";
|
|
2
|
+
export const Button = ({ className, disable, onClick, children }) => {
|
|
3
|
+
return React.createElement(
|
|
4
|
+
"button",
|
|
5
|
+
{
|
|
6
|
+
"data-testid": "buttonElement",
|
|
7
|
+
disabled: disable,
|
|
8
|
+
className: `${className} rounded-100px px-3 py-1 text-text-base text-md pt-2 pb-2 font-nunitoSansRegular`,
|
|
9
|
+
onClick: () => onClick(),
|
|
10
|
+
},
|
|
11
|
+
children
|
|
12
|
+
);
|
|
4
13
|
};
|
|
5
|
-
//# sourceMappingURL=buttons.component.js.map
|
|
14
|
+
//# sourceMappingURL=buttons.component.js.map
|
|
@@ -1,9 +1,15 @@
|
|
|
1
1
|
/* eslint-disable testing-library/render-result-naming-convention */
|
|
2
|
-
import React from
|
|
3
|
-
import { render } from
|
|
4
|
-
import { Button } from
|
|
5
|
-
it(
|
|
6
|
-
|
|
7
|
-
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { render } from "@core-utils";
|
|
4
|
+
import { Button } from "./buttons.component";
|
|
5
|
+
it("render XB_Button correctly", () => {
|
|
6
|
+
const button = render(
|
|
7
|
+
React.createElement(
|
|
8
|
+
Button,
|
|
9
|
+
{ className: "bg-gray-light w-40", onClick: () => jest.fn() },
|
|
10
|
+
"Permanent Address"
|
|
11
|
+
)
|
|
12
|
+
);
|
|
13
|
+
expect(button).toMatchSnapshot();
|
|
8
14
|
});
|
|
9
|
-
//# sourceMappingURL=buttons.component.test.js.map
|
|
15
|
+
//# sourceMappingURL=buttons.component.test.js.map
|
|
@@ -1,11 +1,22 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { ReactComponent as UnCheckbox } from
|
|
3
|
-
import { ReactComponent as CheckedBox } from
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { ReactComponent as UnCheckbox } from "@assets/svg/unCheckbox.svg";
|
|
3
|
+
import { ReactComponent as CheckedBox } from "@assets/svg/checkedBox.svg";
|
|
4
4
|
export const CheckBox = ({ className, checked, onChange }) => {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
5
|
+
const width = 20;
|
|
6
|
+
const hanleClick = () => {
|
|
7
|
+
onChange();
|
|
8
|
+
};
|
|
9
|
+
return React.createElement(
|
|
10
|
+
"div",
|
|
11
|
+
{ className: `${className} flex flex-row mr-2`, onClick: hanleClick },
|
|
12
|
+
checked
|
|
13
|
+
? React.createElement(CheckedBox, {
|
|
14
|
+
width: width,
|
|
15
|
+
height: width,
|
|
16
|
+
fill: "#E7503D",
|
|
17
|
+
stroke: "E7503D",
|
|
18
|
+
})
|
|
19
|
+
: React.createElement(UnCheckbox, { width: width, height: width })
|
|
20
|
+
);
|
|
10
21
|
};
|
|
11
|
-
//# sourceMappingURL=checkBox.component.js.map
|
|
22
|
+
//# sourceMappingURL=checkBox.component.js.map
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
/* eslint-disable testing-library/render-result-naming-convention */
|
|
2
|
-
import React from
|
|
3
|
-
import { render } from
|
|
4
|
-
import { CheckBox } from
|
|
5
|
-
it(
|
|
6
|
-
|
|
7
|
-
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { render } from "@core-utils";
|
|
4
|
+
import { CheckBox } from "./checkBox.component";
|
|
5
|
+
it("render XB_CheckBox correctly", () => {
|
|
6
|
+
const checkbox = render(
|
|
7
|
+
React.createElement(CheckBox, { checked: true, onChange: () => jest.fn() })
|
|
8
|
+
);
|
|
9
|
+
expect(checkbox).toMatchSnapshot();
|
|
8
10
|
});
|
|
9
|
-
//# sourceMappingURL=checkBox.component.test.js.map
|
|
11
|
+
//# sourceMappingURL=checkBox.component.test.js.map
|
|
@@ -1,12 +1,20 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { CheckBox } from
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { CheckBox } from "./checkBox.component";
|
|
3
3
|
// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
|
|
4
4
|
export default {
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
title: "Atoms/CheckBox",
|
|
6
|
+
component: CheckBox,
|
|
7
7
|
};
|
|
8
8
|
// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
|
|
9
|
-
export const Primary = () =>
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
export const Primary = () =>
|
|
10
|
+
React.createElement(
|
|
11
|
+
"div",
|
|
12
|
+
{ className: "flex flex-row" },
|
|
13
|
+
React.createElement(CheckBox, { checked: true, onChange: () => {} }),
|
|
14
|
+
React.createElement(
|
|
15
|
+
"span",
|
|
16
|
+
null,
|
|
17
|
+
"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"
|
|
18
|
+
)
|
|
19
|
+
);
|
|
20
|
+
//# sourceMappingURL=checkBox.stories.js.map
|
|
@@ -1,21 +1,53 @@
|
|
|
1
|
-
import React, { useState, forwardRef } from
|
|
2
|
-
import DatePicker from
|
|
3
|
-
import
|
|
4
|
-
import { ReactComponent as DatePickerSvg } from
|
|
5
|
-
import dayjs from
|
|
6
|
-
export const DatePickerComp = ({
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
1
|
+
import React, { useState, forwardRef } from "react";
|
|
2
|
+
import DatePicker from "react-datepicker";
|
|
3
|
+
import "react-datepicker/dist/react-datepicker.css";
|
|
4
|
+
import { ReactComponent as DatePickerSvg } from "@assets/svg/datePicker.svg";
|
|
5
|
+
import dayjs from "dayjs";
|
|
6
|
+
export const DatePickerComp = ({
|
|
7
|
+
className,
|
|
8
|
+
disable,
|
|
9
|
+
value,
|
|
10
|
+
showFormat = "yyyy-MM-dd",
|
|
11
|
+
placeholder = "Select Date",
|
|
12
|
+
}) => {
|
|
13
|
+
const [pickedDate, setPickedDate] = useState(value && dayjs(value).toDate());
|
|
14
|
+
const CustomInput = forwardRef((props, ref) => {
|
|
15
|
+
return React.createElement(
|
|
16
|
+
"div",
|
|
17
|
+
{
|
|
18
|
+
onClick: !disable && props.onClick,
|
|
19
|
+
ref: ref,
|
|
20
|
+
className:
|
|
21
|
+
" border-gray-light place-items-center border rounded-md px-2 flex flex-wrap ",
|
|
22
|
+
},
|
|
23
|
+
React.createElement(
|
|
24
|
+
"label",
|
|
25
|
+
{
|
|
26
|
+
className: "mr-3 font-nunitoSansRegular text-primaryCharcoal text-lg",
|
|
27
|
+
},
|
|
28
|
+
props.value || props.placeholder
|
|
29
|
+
),
|
|
30
|
+
React.createElement(DatePickerSvg, { width: 15, height: 15 })
|
|
31
|
+
);
|
|
32
|
+
});
|
|
33
|
+
CustomInput.displayName = "CustomInput";
|
|
34
|
+
const handleChanges = (date) => {
|
|
35
|
+
setPickedDate(date);
|
|
36
|
+
};
|
|
37
|
+
return React.createElement(
|
|
38
|
+
"div",
|
|
39
|
+
{ className: `${className} items-center flex justify-start ` },
|
|
40
|
+
React.createElement(
|
|
41
|
+
"div",
|
|
42
|
+
{ className: "flex-wrap" },
|
|
43
|
+
React.createElement(DatePicker, {
|
|
44
|
+
selected: pickedDate || new Date(),
|
|
45
|
+
dateFormat: showFormat,
|
|
46
|
+
placeholder: placeholder,
|
|
47
|
+
onChange: handleChanges,
|
|
48
|
+
customInput: React.createElement(CustomInput, null),
|
|
49
|
+
})
|
|
50
|
+
)
|
|
51
|
+
);
|
|
20
52
|
};
|
|
21
|
-
//# sourceMappingURL=date-picker.component.js.map
|
|
53
|
+
//# sourceMappingURL=date-picker.component.js.map
|
|
@@ -1,10 +1,16 @@
|
|
|
1
1
|
/* eslint-disable testing-library/render-result-naming-convention */
|
|
2
|
-
import React from
|
|
3
|
-
import { render } from
|
|
4
|
-
import { DatePickerComp } from
|
|
5
|
-
import dayjs from
|
|
6
|
-
it(
|
|
7
|
-
|
|
8
|
-
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { render } from "@core-utils";
|
|
4
|
+
import { DatePickerComp } from "./date-picker.component";
|
|
5
|
+
import dayjs from "dayjs";
|
|
6
|
+
it("render XB_DatePicker correctly", () => {
|
|
7
|
+
const datepicker = render(
|
|
8
|
+
React.createElement(DatePickerComp, {
|
|
9
|
+
className: "mt-6",
|
|
10
|
+
value: dayjs().format("YYYY-MM-DD"),
|
|
11
|
+
showFormat: "dd-MM-yyyy",
|
|
12
|
+
})
|
|
13
|
+
);
|
|
14
|
+
expect(datepicker).toMatchSnapshot();
|
|
9
15
|
});
|
|
10
|
-
//# sourceMappingURL=date-picker.component.test.js.map
|
|
16
|
+
//# sourceMappingURL=date-picker.component.test.js.map
|
|
@@ -1,12 +1,20 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { DatePickerComp } from
|
|
3
|
-
import dayjs from
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { DatePickerComp } from "./date-picker.component";
|
|
3
|
+
import dayjs from "dayjs";
|
|
4
4
|
// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
|
|
5
5
|
export default {
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
title: "Atoms/DatePickerComp",
|
|
7
|
+
component: DatePickerComp,
|
|
8
8
|
};
|
|
9
9
|
// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
|
|
10
|
-
export const Primary = () =>
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
export const Primary = () =>
|
|
11
|
+
React.createElement(
|
|
12
|
+
"div",
|
|
13
|
+
{ className: "flex flex-row" },
|
|
14
|
+
React.createElement(DatePickerComp, {
|
|
15
|
+
className: "mt-6",
|
|
16
|
+
value: dayjs().format("YYYY-MM-DD"),
|
|
17
|
+
showFormat: "dd-MM-yyyy",
|
|
18
|
+
})
|
|
19
|
+
);
|
|
20
|
+
//# sourceMappingURL=date-picker.stories.js.map
|