react-restyle-components 0.1.90 → 0.1.91

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.
Files changed (114) hide show
  1. package/lib/package.json +7 -8
  2. package/package.json +7 -8
  3. package/lib/cjs/index.d.ts +0 -2
  4. package/lib/cjs/index.js +0 -18
  5. package/lib/cjs/src/App.d.ts +0 -4
  6. package/lib/cjs/src/App.js +0 -24
  7. package/lib/cjs/src/__mocks__/styleMock.d.ts +0 -1
  8. package/lib/cjs/src/__mocks__/styleMock.js +0 -2
  9. package/lib/cjs/src/core-components/atoms/buttons/button.stories.d.ts +0 -6
  10. package/lib/cjs/src/core-components/atoms/buttons/button.stories.js +0 -42
  11. package/lib/cjs/src/core-components/atoms/buttons/buttons.component.d.ts +0 -11
  12. package/lib/cjs/src/core-components/atoms/buttons/buttons.component.js +0 -15
  13. package/lib/cjs/src/core-components/atoms/check-box/checkBox.component.d.ts +0 -11
  14. package/lib/cjs/src/core-components/atoms/check-box/checkBox.component.js +0 -47
  15. package/lib/cjs/src/core-components/atoms/check-box/checkBox.stories.d.ts +0 -6
  16. package/lib/cjs/src/core-components/atoms/check-box/checkBox.stories.js +0 -26
  17. package/lib/cjs/src/core-components/atoms/date-picker/date-picker.component.d.ts +0 -13
  18. package/lib/cjs/src/core-components/atoms/date-picker/date-picker.component.js +0 -52
  19. package/lib/cjs/src/core-components/atoms/date-picker/date-picker.stories.d.ts +0 -6
  20. package/lib/cjs/src/core-components/atoms/date-picker/date-picker.stories.js +0 -24
  21. package/lib/cjs/src/core-components/atoms/form/form.component.d.ts +0 -102
  22. package/lib/cjs/src/core-components/atoms/form/form.component.js +0 -192
  23. package/lib/cjs/src/core-components/atoms/icons/icons.component.d.ts +0 -11
  24. package/lib/cjs/src/core-components/atoms/icons/icons.component.js +0 -66
  25. package/lib/cjs/src/core-components/atoms/icons/icons.stories.d.ts +0 -6
  26. package/lib/cjs/src/core-components/atoms/icons/icons.stories.js +0 -22
  27. package/lib/cjs/src/core-components/atoms/input/input-otp.component.d.ts +0 -15
  28. package/lib/cjs/src/core-components/atoms/input/input-otp.component.js +0 -88
  29. package/lib/cjs/src/core-components/atoms/input/input-pin.component.d.ts +0 -16
  30. package/lib/cjs/src/core-components/atoms/input/input-pin.component.js +0 -107
  31. package/lib/cjs/src/core-components/atoms/input/input-pin.stories.d.ts +0 -6
  32. package/lib/cjs/src/core-components/atoms/input/input-pin.stories.js +0 -23
  33. package/lib/cjs/src/core-components/atoms/input/input.component.d.ts +0 -19
  34. package/lib/cjs/src/core-components/atoms/input/input.component.js +0 -45
  35. package/lib/cjs/src/core-components/atoms/input/input.stories.d.ts +0 -6
  36. package/lib/cjs/src/core-components/atoms/input/input.stories.js +0 -24
  37. package/lib/cjs/src/core-components/atoms/input-dropdown/input-dropdown.component.d.ts +0 -11
  38. package/lib/cjs/src/core-components/atoms/input-dropdown/input-dropdown.component.js +0 -64
  39. package/lib/cjs/src/core-components/atoms/input-dropdown/input-dropdown.stories.d.ts +0 -6
  40. package/lib/cjs/src/core-components/atoms/input-dropdown/input-dropdown.stories.js +0 -20
  41. package/lib/cjs/src/core-components/atoms/loader/loader.component.d.ts +0 -4
  42. package/lib/cjs/src/core-components/atoms/loader/loader.component.js +0 -61
  43. package/lib/cjs/src/core-components/atoms/loader/loader.stories.d.ts +0 -6
  44. package/lib/cjs/src/core-components/atoms/loader/loader.stories.js +0 -16
  45. package/lib/cjs/src/core-components/atoms/radio/radio.component.d.ts +0 -10
  46. package/lib/cjs/src/core-components/atoms/radio/radio.component.js +0 -49
  47. package/lib/cjs/src/core-components/atoms/radio/radio.stories.d.ts +0 -6
  48. package/lib/cjs/src/core-components/atoms/radio/radio.stories.js +0 -25
  49. package/lib/cjs/src/core-components/atoms/stepper/stepper.component.d.ts +0 -10
  50. package/lib/cjs/src/core-components/atoms/stepper/stepper.component.js +0 -42
  51. package/lib/cjs/src/core-components/atoms/stepper/stepper.stories.d.ts +0 -6
  52. package/lib/cjs/src/core-components/atoms/stepper/stepper.stories.js +0 -21
  53. package/lib/cjs/src/core-components/atoms/tabs/tabs.component.d.ts +0 -11
  54. package/lib/cjs/src/core-components/atoms/tabs/tabs.component.js +0 -46
  55. package/lib/cjs/src/core-components/atoms/tabs/tabs.stories.d.ts +0 -6
  56. package/lib/cjs/src/core-components/atoms/tabs/tabs.stories.js +0 -25
  57. package/lib/cjs/src/core-components/atoms/timer/timer.component.d.ts +0 -7
  58. package/lib/cjs/src/core-components/atoms/timer/timer.component.js +0 -106
  59. package/lib/cjs/src/core-components/atoms/tooltip/tooltip.component.d.ts +0 -10
  60. package/lib/cjs/src/core-components/atoms/tooltip/tooltip.component.js +0 -56
  61. package/lib/cjs/src/core-components/atoms/tooltip/tooltip.stories.d.ts +0 -6
  62. package/lib/cjs/src/core-components/atoms/tooltip/tooltip.stories.js +0 -16
  63. package/lib/cjs/src/core-components/index.d.ts +0 -25
  64. package/lib/cjs/src/core-components/index.js +0 -54
  65. package/lib/cjs/src/core-components/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.d.ts +0 -18
  66. package/lib/cjs/src/core-components/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.js +0 -119
  67. package/lib/cjs/src/core-components/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.stories.d.ts +0 -6
  68. package/lib/cjs/src/core-components/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.stories.js +0 -48
  69. package/lib/cjs/src/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.d.ts +0 -17
  70. package/lib/cjs/src/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.js +0 -120
  71. package/lib/cjs/src/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.stories.d.ts +0 -6
  72. package/lib/cjs/src/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.stories.js +0 -31
  73. package/lib/cjs/src/core-components/molecules/auto-complete-group-by/auto-complete-group-by.component.d.ts +0 -10
  74. package/lib/cjs/src/core-components/molecules/auto-complete-group-by/auto-complete-group-by.component.js +0 -166
  75. package/lib/cjs/src/core-components/molecules/auto-complete-group-by/auto-complete-group-by.component.test.d.ts +0 -1
  76. package/lib/cjs/src/core-components/molecules/auto-complete-group-by/auto-complete-group-by.component.test.js +0 -14
  77. package/lib/cjs/src/core-components/molecules/auto-complete-group-by/auto-complete-group-by.stories.d.ts +0 -6
  78. package/lib/cjs/src/core-components/molecules/auto-complete-group-by/auto-complete-group-by.stories.js +0 -41
  79. package/lib/cjs/src/core-components/molecules/autocomplete/autocomplete.d.ts +0 -9
  80. package/lib/cjs/src/core-components/molecules/autocomplete/autocomplete.js +0 -146
  81. package/lib/cjs/src/core-components/molecules/autocomplete/autocomplete.spec.d.ts +0 -1
  82. package/lib/cjs/src/core-components/molecules/autocomplete/autocomplete.spec.js +0 -72
  83. package/lib/cjs/src/core-components/molecules/autocomplete/autocomplete.stories.d.ts +0 -6
  84. package/lib/cjs/src/core-components/molecules/autocomplete/autocomplete.stories.js +0 -20
  85. package/lib/cjs/src/core-components/molecules/css-multiline-input/css-multiline-input.component.d.ts +0 -12
  86. package/lib/cjs/src/core-components/molecules/css-multiline-input/css-multiline-input.component.js +0 -124
  87. package/lib/cjs/src/core-components/molecules/css-multiline-input/css-multiline-input.stories.d.ts +0 -6
  88. package/lib/cjs/src/core-components/molecules/css-multiline-input/css-multiline-input.stories.js +0 -16
  89. package/lib/cjs/src/core-components/molecules/css-multiline-input/css-properties.d.ts +0 -8931
  90. package/lib/cjs/src/core-components/molecules/css-multiline-input/css-properties.js +0 -164
  91. package/lib/cjs/src/core-components/molecules/modal-confirm/modal-confirm.component.d.ts +0 -12
  92. package/lib/cjs/src/core-components/molecules/modal-confirm/modal-confirm.component.js +0 -60
  93. package/lib/cjs/src/core-components/molecules/modal-confirm/modal-confirm.stories.d.ts +0 -6
  94. package/lib/cjs/src/core-components/molecules/modal-confirm/modal-confirm.stories.js +0 -23
  95. package/lib/cjs/src/core-components/molecules/multi-select/multi-select.component.d.ts +0 -9
  96. package/lib/cjs/src/core-components/molecules/multi-select/multi-select.component.js +0 -78
  97. package/lib/cjs/src/core-components/molecules/multi-select/multi-select.stories.d.ts +0 -6
  98. package/lib/cjs/src/core-components/molecules/multi-select/multi-select.stories.js +0 -22
  99. package/lib/cjs/src/core-components/molecules/multi-select-with-field/multi-select-with-field.component.d.ts +0 -10
  100. package/lib/cjs/src/core-components/molecules/multi-select-with-field/multi-select-with-field.component.js +0 -88
  101. package/lib/cjs/src/core-components/molecules/multi-select-with-field/multi-select-with-field.stories.d.ts +0 -6
  102. package/lib/cjs/src/core-components/molecules/multi-select-with-field/multi-select-with-field.stories.js +0 -23
  103. package/lib/cjs/src/core-utils/index.d.ts +0 -1
  104. package/lib/cjs/src/core-utils/index.js +0 -17
  105. package/lib/cjs/src/core-utils/unit-test.utils.d.ts +0 -4
  106. package/lib/cjs/src/core-utils/unit-test.utils.js +0 -16
  107. package/lib/cjs/src/index.d.ts +0 -1
  108. package/lib/cjs/src/index.js +0 -17
  109. package/lib/cjs/src/library/assets/svg/index.d.ts +0 -9
  110. package/lib/cjs/src/library/assets/svg/index.js +0 -40
  111. package/lib/cjs/src/reportWebVitals.d.ts +0 -3
  112. package/lib/cjs/src/reportWebVitals.js +0 -37
  113. package/lib/cjs/src/setupTests.d.ts +0 -1
  114. package/lib/cjs/src/setupTests.js +0 -7
@@ -1,24 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Primary = void 0;
4
- const input_component_1 = require("./input.component");
5
- const meta = {
6
- title: 'Design System/Atoms/Input',
7
- component: input_component_1.Input,
8
- tags: ['autodocs'],
9
- };
10
- exports.default = meta;
11
- exports.Primary = {
12
- args: {
13
- className: 'mt-4',
14
- title: 'Enter your Pan Number',
15
- hasError: true,
16
- defaultValue: '',
17
- onChange: (item) => {
18
- console.log({ item });
19
- },
20
- onBlur: (item) => {
21
- console.log({ item });
22
- },
23
- },
24
- };
@@ -1,11 +0,0 @@
1
- import React from 'react';
2
- import '../../../tc.css';
3
- interface InputDropdownProps {
4
- title: string;
5
- items: Array<string>;
6
- hasError?: boolean;
7
- className?: string;
8
- onChange?: (item: string) => void;
9
- }
10
- export declare const InputDropdown: ({ items, className, hasError, title, onChange, }: InputDropdownProps) => React.JSX.Element;
11
- export {};
@@ -1,64 +0,0 @@
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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
- Object.defineProperty(exports, "__esModule", { value: true });
26
- exports.InputDropdown = void 0;
27
- const react_1 = __importStar(require("react"));
28
- const svg_1 = require("../../../library/assets/svg");
29
- require("../../../tc.css");
30
- const InputDropdown = ({ items, className, hasError, title, onChange, }) => {
31
- const [isOpen, setIsOpen] = (0, react_1.useState)(false);
32
- const [value, setValue] = (0, react_1.useState)('');
33
- const useOutsideAlerter = (ref) => {
34
- (0, react_1.useEffect)(() => {
35
- function handleClickOutside(event) {
36
- if (ref.current &&
37
- !ref.current.contains(event.target) &&
38
- isOpen &&
39
- isOpen)
40
- setIsOpen(!isOpen);
41
- }
42
- document.addEventListener('mousedown', handleClickOutside);
43
- return () => {
44
- document.removeEventListener('mousedown', handleClickOutside);
45
- };
46
- }, [ref]);
47
- };
48
- const wrapperRef = (0, react_1.useRef)(null);
49
- useOutsideAlerter(wrapperRef);
50
- return (react_1.default.createElement("div", { className: `${className} relative` },
51
- react_1.default.createElement("div", { className: "flex flex-row items-center " },
52
- react_1.default.createElement("input", { type: "text", name: "name", placeholder: title, value: value, className: " pt-3 pb-2 w-full px-0 mt-0 bg-transparent border-gray-secondary border-0 border-b appearance-none focus:outline-none focus:ring-0 font-nunitoSansRegular text-md", onClick: () => {
53
- setIsOpen(!isOpen);
54
- }, onChange: (event) => onChange && onChange(event.target.value) }),
55
- !isOpen && (react_1.default.createElement("img", { src: svg_1.UpArrow, className: "absolute h-4 w-4 right-0" })),
56
- isOpen && (react_1.default.createElement("img", { src: svg_1.DownArrow, className: "absolute h-4 w-4 right-0" }))),
57
- isOpen && (react_1.default.createElement("div", { className: "z-10 w-full absolute text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700", ref: wrapperRef },
58
- react_1.default.createElement("ul", { className: "py-1" }, items.map((item, index) => (react_1.default.createElement("li", { key: index, className: "block py-2 px-4 text-md hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 font-nunitoSansRegular", onClick: () => {
59
- setValue(item);
60
- setIsOpen(!isOpen);
61
- } }, item)))))),
62
- hasError && (react_1.default.createElement("span", { className: "text-primaryCharcoal text-4xs", id: "error" }, `${title} is required`))));
63
- };
64
- exports.InputDropdown = InputDropdown;
@@ -1,6 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react';
2
- import { InputDropdown } from './input-dropdown.component';
3
- declare const meta: Meta<typeof InputDropdown>;
4
- export default meta;
5
- type Story = StoryObj<typeof InputDropdown>;
6
- export declare const Primary: Story;
@@ -1,20 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Primary = void 0;
4
- const input_dropdown_component_1 = require("./input-dropdown.component");
5
- const meta = {
6
- title: 'Design System/Atoms/InputDropdown',
7
- component: input_dropdown_component_1.InputDropdown,
8
- tags: ['autodocs'],
9
- parameters: {
10
- componentSubtitle: `import { InputDropdown } from 'react-restyle-components'`,
11
- },
12
- };
13
- exports.default = meta;
14
- exports.Primary = {
15
- args: {
16
- title: 'Source of funds',
17
- items: ['Bank account', 'UPI', 'Credit Card'],
18
- hasError: true,
19
- },
20
- };
@@ -1,4 +0,0 @@
1
- import React from 'react';
2
- import '../../../tc.css';
3
- export declare const Loader: () => React.JSX.Element;
4
- export declare const ModalLoader: () => React.JSX.Element;
@@ -1,61 +0,0 @@
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.ModalLoader = exports.Loader = void 0;
7
- const react_1 = __importDefault(require("react"));
8
- const reactstrap_1 = require("reactstrap");
9
- require("../../../tc.css");
10
- const Loader = () => (react_1.default.createElement(reactstrap_1.Container, { fluid: true, className: "vh-50 d-flex" },
11
- react_1.default.createElement(reactstrap_1.Row, { className: "justify-content-center align-self-center w-100 text-center" },
12
- react_1.default.createElement(reactstrap_1.Spinner, { color: "primary" }))));
13
- exports.Loader = Loader;
14
- const ModalLoader = () => {
15
- return (react_1.default.createElement(react_1.default.Fragment, null,
16
- react_1.default.createElement(react_1.default.Fragment, null,
17
- react_1.default.createElement("div", { className: "justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none" },
18
- react_1.default.createElement("div", { className: "relative mx-auto " },
19
- react_1.default.createElement("div", { className: "border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none" },
20
- react_1.default.createElement("div", { className: "relative p-2 flex-auto flex flex-col items-center" },
21
- react_1.default.createElement("style", null, `
22
- .spinner .background {
23
- fill: #555;
24
- }
25
- .spinner .line {
26
- animation: PacMan 5s infinite;
27
- fill: none;
28
- stroke: #d26188;
29
- stroke-width: 25;
30
- }
31
- .spinner .spinner {
32
- animation: Spin 2s infinite linear;
33
- }
34
- @keyframes PacMan {
35
- 0% {
36
- stroke-dasharray: 79px 79;
37
- }
38
- 50% {
39
- stroke-dasharray: 1px 79;
40
- }
41
- 100% {
42
- stroke-dasharray: 79px 79;
43
- }
44
- }
45
- @keyframes Spin {
46
- 0% {
47
- transform: rotate(0deg);
48
- }
49
- 100% {
50
- transform: rotate(360deg);
51
- }
52
- }
53
- `),
54
- react_1.default.createElement("svg", { className: "spinner", width: "100", height: "100", viewBox: "0 0 100 100" },
55
- react_1.default.createElement("circle", { className: "background", cx: "0", cy: "0" }),
56
- react_1.default.createElement("path", { className: "line", d: "M 37.5,50 C 37.5,43.096441 43.096441,37.5 50,37.5 C 56.903559,37.5 62.5,43.096441 62.5,50 C 62.5,56.903559 56.903559,62.5 50,62.5 C 43.096441,62.5 37.5,56.903559 37.5,50" })),
57
- ' ',
58
- react_1.default.createElement("span", { style: { marginTop: -15 } }, "loading ..."))))),
59
- react_1.default.createElement("div", { className: "opacity-25 fixed inset-0 z-40 bg-black" }))));
60
- };
61
- exports.ModalLoader = ModalLoader;
@@ -1,6 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react';
2
- import { Loader } from './loader.component';
3
- declare const meta: Meta<typeof Loader>;
4
- export default meta;
5
- type Story = StoryObj<typeof Loader>;
6
- export declare const Primary: Story;
@@ -1,16 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Primary = void 0;
4
- const loader_component_1 = require("./loader.component");
5
- const meta = {
6
- title: 'Design System/Atoms/Loader',
7
- component: loader_component_1.Loader,
8
- tags: ['autodocs'],
9
- parameters: {
10
- componentSubtitle: `import { Loader } from 'react-restyle-components'`,
11
- },
12
- };
13
- exports.default = meta;
14
- exports.Primary = {
15
- args: {},
16
- };
@@ -1,10 +0,0 @@
1
- import React from 'react';
2
- import '../../../tc.css';
3
- interface RadioProps {
4
- title: string;
5
- data: Array<any>;
6
- className?: string;
7
- onChange: (item: any) => void;
8
- }
9
- export declare const Radio: ({ title, data, className, onChange, }: RadioProps) => React.JSX.Element;
10
- export {};
@@ -1,49 +0,0 @@
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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
- Object.defineProperty(exports, "__esModule", { value: true });
26
- exports.Radio = void 0;
27
- const react_1 = __importStar(require("react"));
28
- const svg_1 = require("../../../library/assets/svg");
29
- const form_component_1 = require("../form/form.component");
30
- require("../../../tc.css");
31
- const Radio = ({ title = 'Source', data = [], className, onChange, }) => {
32
- const [list, setList] = (0, react_1.useState)(data);
33
- const width = 20;
34
- return (react_1.default.createElement(react_1.default.Fragment, null,
35
- react_1.default.createElement(form_component_1.InputWrapper, { label: title }, list?.map((item, index) => (react_1.default.createElement("div", { className: `${className} flex items-center mb-1`, onClick: () => {
36
- const result = list?.map((e, i) => {
37
- if (i == index)
38
- return { ...e, checked: true };
39
- else
40
- return { ...e, checked: false };
41
- });
42
- setList(result);
43
- onChange(result?.find((item) => item.checked));
44
- }, key: index },
45
- react_1.default.createElement("div", { className: "flex flex-row gap-1 items-center" },
46
- item.checked ? (react_1.default.createElement(svg_1.CheckedRadio, { width: width, height: width })) : (react_1.default.createElement(svg_1.UncheckRadio, { width: width, height: width })),
47
- react_1.default.createElement("span", { className: "text-4xs" }, item?.title))))))));
48
- };
49
- exports.Radio = Radio;
@@ -1,6 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react';
2
- import { Radio } from './radio.component';
3
- declare const meta: Meta<typeof Radio>;
4
- export default meta;
5
- type Story = StoryObj<typeof Radio>;
6
- export declare const Primary: Story;
@@ -1,25 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Primary = void 0;
4
- const radio_component_1 = require("./radio.component");
5
- const meta = {
6
- title: 'Design System/Atoms/Radio',
7
- component: radio_component_1.Radio,
8
- tags: ['autodocs'],
9
- parameters: {
10
- componentSubtitle: `import { Radio } from 'react-restyle-components'`,
11
- },
12
- };
13
- exports.default = meta;
14
- exports.Primary = {
15
- args: {
16
- title: 'Source',
17
- data: [
18
- { title: 'Salary', checked: false },
19
- { title: 'Business', checked: false },
20
- ],
21
- onChange: (item) => {
22
- console.log({ item });
23
- },
24
- },
25
- };
@@ -1,10 +0,0 @@
1
- import React from 'react';
2
- import '../../../tc.css';
3
- interface StepperProps {
4
- className?: string;
5
- steps: Array<string>;
6
- currentStep: number;
7
- onStepClick: (currentStep: any, index: any) => void;
8
- }
9
- export declare const Stepper: ({ className, steps, currentStep, onStepClick, }: StepperProps) => React.JSX.Element;
10
- export {};
@@ -1,42 +0,0 @@
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.Stepper = void 0;
7
- const react_1 = __importDefault(require("react"));
8
- require("../../../tc.css");
9
- const Stepper = ({ className = '', steps, currentStep = 1, onStepClick, }) => {
10
- const finalClass = `${className} w-full px-4 sm:px-8`;
11
- const progressClass = 'absolute my-4 top-1/2 left-0 h-0.5 transform -translate-y-1/2 bg-orange transition-width ease-in-out duration-500';
12
- const Steps = steps?.map((step, index) => {
13
- let stepClass = 'inline-block transform -translate-x-1/2 pt-1 w-8 h-8 rounded-full text-center';
14
- if (index < currentStep)
15
- stepClass +=
16
- ' font-medium border border-orange bg-background-secondary text-gray';
17
- else if (index > currentStep)
18
- stepClass +=
19
- ' font-medium border border-gray-dark-secondary text-gray bg-background-secondary';
20
- else if (currentStep === index)
21
- stepClass += ' font-medium bg-orange text-white';
22
- if (typeof onStepClick === 'function')
23
- stepClass += ' cursor-pointer';
24
- return (react_1.default.createElement("div", { key: step, style: { left: `${(index / (steps.length - 1)) * 100}%` }, className: "absolute" },
25
- react_1.default.createElement("span", { className: `${stepClass} font-nunitoSansRegular text-4xs text-center`, onClick: () => {
26
- if (typeof onStepClick === 'function')
27
- onStepClick(index + 1, step);
28
- } }, step)));
29
- });
30
- return (react_1.default.createElement("div", { className: finalClass },
31
- react_1.default.createElement("div", { className: "w-full relative" },
32
- react_1.default.createElement("div", { className: progressClass, style: {
33
- width: `${(currentStep / (steps.length - 1)) * 100}%`,
34
- } },
35
- react_1.default.createElement("div", { className: "w-3 h-3 bg-orange rounded-full absolute right-0 top-1/2 transform translate-x-1/2 -translate-y-1/2" })),
36
- react_1.default.createElement("div", { className: 'absolute h-0.5 my-4 top-1/2 left-0 transform -translate-y-1/2 bg-gray-dark-secondary transition-width ease-in-out duration-500', style: {
37
- marginLeft: `${(currentStep / (steps.length - 1)) * 100}%`,
38
- width: `${100 - (currentStep / (steps.length - 1)) * 100}%`,
39
- } })),
40
- react_1.default.createElement("div", { className: "relative sm:block" }, Steps)));
41
- };
42
- exports.Stepper = Stepper;
@@ -1,6 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react';
2
- import { Stepper } from './stepper.component';
3
- declare const meta: Meta<typeof Stepper>;
4
- export default meta;
5
- type Story = StoryObj<typeof Stepper>;
6
- export declare const Primary: Story;
@@ -1,21 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Primary = void 0;
4
- const stepper_component_1 = require("./stepper.component");
5
- const meta = {
6
- title: 'Design System/Atoms/Stepper',
7
- component: stepper_component_1.Stepper,
8
- tags: ['autodocs'],
9
- parameters: {
10
- componentSubtitle: `import { Stepper } from 'react-restyle-components'`,
11
- },
12
- };
13
- exports.default = meta;
14
- exports.Primary = {
15
- args: {
16
- steps: ['1', '2', '3', '4'],
17
- currentStep: 2,
18
- onStepClick: (currentStep, step) => { },
19
- className: 'mt-4',
20
- },
21
- };
@@ -1,11 +0,0 @@
1
- import React from 'react';
2
- import '../../../tc.css';
3
- interface TabsProps {
4
- options: Array<{
5
- title: string;
6
- icon: string;
7
- }>;
8
- onSelect: (item: string) => void;
9
- }
10
- export declare const Tabs: ({ options, onSelect }: TabsProps) => React.JSX.Element;
11
- export {};
@@ -1,46 +0,0 @@
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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
- Object.defineProperty(exports, "__esModule", { value: true });
26
- exports.Tabs = void 0;
27
- const react_1 = __importStar(require("react"));
28
- const __1 = require("../..");
29
- require("../../../tc.css");
30
- const Tabs = ({ options, onSelect }) => {
31
- const [selected, setSelected] = (0, react_1.useState)(options[0].title);
32
- return (react_1.default.createElement("div", { className: "flex justify-center" },
33
- react_1.default.createElement("ul", { className: "flex flex-wrap items-center justify-center -mb-px text-sm font-medium text-center text-black cursor-pointer gap-2" }, options?.map((item, index) => (react_1.default.createElement("li", { key: index, className: "bg-orange1 rounded-md" },
34
- react_1.default.createElement("div", { className: `inline-flex items-center justify-center p-3 border-b-2 gap-1 ${item.title == selected
35
- ? 'text-white font-bold md:text-md border-primary active'
36
- : ' text-gray-200 md:text-md border-transparent'}`, onClick: () => {
37
- setSelected(item.title);
38
- onSelect(item.title);
39
- } },
40
- react_1.default.createElement(__1.Icon, { nameIcon: item.icon, propsIcon: {
41
- color: item.title == selected ? '#ffffff' : '#000000',
42
- size: 24,
43
- } }),
44
- react_1.default.createElement("span", { className: "text-3md" }, item.title))))))));
45
- };
46
- exports.Tabs = Tabs;
@@ -1,6 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react';
2
- import { Tabs } from './tabs.component';
3
- declare const meta: Meta<typeof Tabs>;
4
- export default meta;
5
- type Story = StoryObj<typeof Tabs>;
6
- export declare const Primary: Story;
@@ -1,25 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Primary = void 0;
4
- const tabs_component_1 = require("./tabs.component");
5
- const meta = {
6
- title: 'Design System/Atoms/Tabs',
7
- component: tabs_component_1.Tabs,
8
- tags: ['autodocs'],
9
- parameters: {
10
- componentSubtitle: `import { Tabs } from 'react-restyle-components'`,
11
- },
12
- };
13
- exports.default = meta;
14
- exports.Primary = {
15
- args: {
16
- options: [
17
- { title: 'Work History', icon: 'FaHistory' },
18
- { title: 'Book Order', icon: 'FaBook' },
19
- { title: 'Make Frame', icon: 'MdFilterFrames' },
20
- ],
21
- onSelect: (item) => {
22
- console.log({ item });
23
- },
24
- },
25
- };
@@ -1,7 +0,0 @@
1
- import React from 'react';
2
- import '../../../tc.css';
3
- interface TimerProps {
4
- onClear: () => void;
5
- }
6
- export declare const Timer: React.ForwardRefExoticComponent<TimerProps & React.RefAttributes<any>>;
7
- export {};
@@ -1,106 +0,0 @@
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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
- Object.defineProperty(exports, "__esModule", { value: true });
26
- exports.Timer = void 0;
27
- /* eslint-disable react/prop-types */
28
- /* eslint-disable @typescript-eslint/no-unused-expressions */
29
- const react_1 = __importStar(require("react"));
30
- const svg_1 = require("../../../library/assets/svg");
31
- require("../../../tc.css");
32
- // eslint-disable-next-line react/display-name
33
- exports.Timer = react_1.default.forwardRef(({ onClear }, ref) => {
34
- const width = 15;
35
- const [minute, setMinute] = (0, react_1.useState)('00');
36
- const [second, setSecond] = (0, react_1.useState)('10');
37
- (0, react_1.useEffect)(() => {
38
- const sec = parseInt(second);
39
- const min = parseInt(minute);
40
- const countDown = setInterval(() => {
41
- if (min === 0 && sec === 0) {
42
- setMinute('00');
43
- setSecond('00');
44
- clearInterval(countDown);
45
- onClear && onClear();
46
- }
47
- else {
48
- let secondstTmp = (sec - 1).toString();
49
- if (secondstTmp.length === 1) {
50
- secondstTmp = '0'.concat(secondstTmp);
51
- }
52
- setSecond(secondstTmp);
53
- if (sec === 0) {
54
- setSecond('59');
55
- const m = (min - 1).toString();
56
- setMinute('0' + m);
57
- }
58
- }
59
- }, 1000);
60
- return () => {
61
- clearInterval(countDown);
62
- };
63
- });
64
- (0, react_1.useImperativeHandle)(ref, () => ({
65
- updateState() {
66
- setMinute('02');
67
- setSecond('00');
68
- },
69
- resetTimer() {
70
- // eslint-disable-next-line no-console
71
- const sec = parseInt(second);
72
- const min = parseInt(minute === '00' ? '02' : minute);
73
- const countDown = setInterval(() => {
74
- // eslint-disable-next-line no-console
75
- if (min === 0 && sec === 0) {
76
- setMinute('00');
77
- setSecond('00');
78
- clearInterval(countDown);
79
- onClear && onClear();
80
- }
81
- else {
82
- let secondstTmp = (sec - 1).toString();
83
- if (secondstTmp.length === 1) {
84
- secondstTmp = '0'.concat(secondstTmp);
85
- }
86
- setSecond(secondstTmp);
87
- if (sec === 0) {
88
- setSecond('59');
89
- const m = (min - 1).toString();
90
- setMinute('0' + m);
91
- }
92
- }
93
- }, 1000);
94
- return () => {
95
- clearInterval(countDown);
96
- };
97
- },
98
- }));
99
- return (react_1.default.createElement("div", { className: "flex flex-row items-center" },
100
- react_1.default.createElement(svg_1.TimerSVG, { width: width, height: width, fill: "#E7503D" }),
101
- react_1.default.createElement("div", { className: "ml-2 flex flex-row" },
102
- react_1.default.createElement("span", null,
103
- minute,
104
- ":"),
105
- react_1.default.createElement("span", null, second))));
106
- });
@@ -1,10 +0,0 @@
1
- import React from 'react';
2
- import '../../../tc.css';
3
- interface TooltipProps {
4
- tooltipText?: any;
5
- position?: 'bottom' | 'left' | 'top';
6
- className?: string;
7
- children?: any;
8
- }
9
- export declare const Tooltip: React.FunctionComponent<TooltipProps>;
10
- export {};