react-restyle-components 0.1.85 → 0.1.87

package/package.json

@@ -1,13 +1,8 @@
 {
   "name": "react-restyle-components",
-  "version": "0.1.85",
+  "version": "0.1.87",
   "private": false,
   "description": "Easy use restyle components",
-  "main": "./lib/index.js",
-  "types": "./lib/index.d.ts",
-  "files": [
-    "/lib"
-  ],
   "author": {
     "email": "onlyappasaheb4@gmail.com",
     "name": "Lakade Appasaheb",
@@ -16,11 +11,10 @@
   "license": "MIT",
   "scripts": {
     "start": "serve -s ./build",
-    "dev": "chmod +x setup.sh && sh ./setup.sh && craco start",
+    "dev": "craco start",
     "serve-webapp": "craco build && craco start",
-    "build": "rm -rf ./lib && tsc && chmod +x npm-publish.sh && sh ./npm-publish.sh",
-    "build:css": "tailwindcss -o dist/tc.css --minify",
-    "test": "react-scripts test",
+    "build": "rm -rf lib && chmod +x npm-publish.sh && sh ./npm-publish.sh && tsc -p tsconfig.json  & tsc -p tsconfig-cjs.json",
+    "test": "jest",
     "eject": "react-scripts eject",
     "precommit": "lint-staged --allow-empty",
     "storybook": "storybook dev -p 6006",
@@ -32,18 +26,23 @@
   "dependencies": {
     "@loadable/component": "^5.16.4",
     "@mui/material": "^5.15.19",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.1.1",
+    "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.4.1",
-    "@types/react": "^18.0.5",
-    "@types/react-dom": "^18.0.1",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.113",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.0",
     "dayjs": "^1.11.1",
+    "jest-environment-jsdom": "^29.7.0",
+    "react": "^18.3.1",
     "react-datepicker": "^4.7.0",
+    "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
+    "react-scripts": "5.0.1",
     "reactstrap": "^9.0.2",
     "tailwindcss": "^3.0.24",
-    "typescript": "^4.6.3"
+    "typescript": "^4.9.5",
+    "web-vitals": "^2.1.4"
   },
   "peerDependencies": {
     "@testing-library/jest-dom": "*",
@@ -62,38 +61,6 @@
     "typescript": "*",
     "web-vitals": "*"
   },
-  "sideEffects": [
-    "**/*.css"
-  ],
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest",
-      "plugin:storybook/recommended"
-    ],
-    "overrides": [
-      {
-        "files": [
-          "**/*.stories.*"
-        ],
-        "rules": {
-          "import/no-anonymous-default-export": "off"
-        }
-      }
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.3.1",
     "@craco/craco": "^6.4.3",
@@ -109,6 +76,7 @@
     "@storybook/react-webpack5": "^8.0.6",
     "@storybook/test": "^8.0.6",
     "@svgr/webpack": "^8.1.0",
+    "@testing-library/react": "^16.0.1",
     "autoprefixer": "^10.4.19",
     "copyfiles": "^2.4.1",
     "craco-alias": "^3.0.1",
@@ -116,35 +84,43 @@
     "eslint-plugin-storybook": "^0.8.0",
     "gh-pages": "^3.2.3",
     "husky": "^7.0.4",
+    "jest": "^29.7.0",
     "lint-staged": "^12.4.0",
     "postcss-loader": "^8.1.1",
     "sass": "^1.77.5",
     "sass-loader": "^14.2.1",
     "storybook": "^8.0.6",
     "style-loader": "^4.0.0",
+    "ts-jest": "^29.2.5",
     "webpack": "^5.72.0"
   },
+  "files": [
+    "*.md",
+    "dist",
+    "lib"
+  ],
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
   "keywords": [
     "react",
     "components",
     "restyle-components",
     "tech-abl"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/appasaheb4/react-restyle-components.git"
-  },
-  "bugs": {
-    "url": "https://github.com/appasaheb4/react-restyle-components/issues"
-  },
-  "homepage": "https://appasaheb4.github.io/react-restyle-components",
-  "lint-staged": {
-    "*.{js,jsx,json,css,scss,md}": [
-      "prettier --write",
-      "git add"
-    ]
-  },
-  "resolutions": {
-    "jackspeak": "2.1.1"
-  }
+  ]
 }

package/lib/src/App.test.js

@@ -1,8 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
-test('renders learn react link', () => {
-    render(React.createElement(App, null));
-    const linkElement = screen.getByText(/learn react/i);
-    expect(linkElement).toBeInTheDocument();
-});

package/lib/src/core-components/atoms/buttons/buttons.test.js

@@ -1,8 +0,0 @@
-/* eslint-disable testing-library/render-result-naming-convention */
-import React from 'react';
-import { render } from '@core-utils';
-import { Button } from './buttons.component';
-it('render Button correctly', () => {
-    const button = render(React.createElement(Button, { className: "bg-gray-light w-40", onClick: () => jest.fn() }, "Permanent Address"));
-    expect(button).toMatchSnapshot();
-});

package/lib/src/core-components/atoms/check-box/checkBox.test.js

@@ -1,8 +0,0 @@
-/* eslint-disable testing-library/render-result-naming-convention */
-import React from 'react';
-import { render } from '@core-utils';
-import { CheckBox } from './checkBox.component';
-it('render CheckBox correctly', () => {
-    const checkbox = render(React.createElement(CheckBox, { title: "Title", data: [], onChange: () => jest.fn() }));
-    expect(checkbox).toMatchSnapshot();
-});

package/lib/src/core-components/atoms/date-picker/date-picker.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/src/core-components/atoms/date-picker/date-picker.test.js

@@ -1,9 +0,0 @@
-/* eslint-disable testing-library/render-result-naming-convention */
-import React from 'react';
-import { render } from '@core-utils';
-import { DatePickerComp } from './date-picker.component';
-import dayjs from 'dayjs';
-it('render DatePicker correctly', () => {
-    const datepicker = render(React.createElement(DatePickerComp, { title: "Date", className: "mt-6", value: dayjs().format('YYYY-MM-DD'), showFormat: 'dd-MM-yyyy' }));
-    expect(datepicker).toMatchSnapshot();
-});

package/lib/src/core-components/atoms/form/form.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/src/core-components/atoms/form/form.test.js

@@ -1,94 +0,0 @@
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { CheckBox, Input, Toggle, MultilineInput, Label, InputDate, InputFile, InputRadio, InputWrapper, } from './form.component';
-describe('Checkbox component', () => {
-    it('render checkbox correctly', () => {
-        const checkbox = render(React.createElement(CheckBox, null));
-        expect(checkbox).toMatchSnapshot();
-    });
-});
-describe('Input component', () => {
-    it('render input correctly', () => {
-        const inputComp = render(React.createElement(Input, { type: "text", value: "test", onChange: (val) => jest.fn(), onBlur: (value) => jest.fn(), onKeyDown: (val) => jest.fn() }));
-        const input = inputComp.getByTestId('INPT');
-        fireEvent.change(input, { target: { value: 'check' } });
-        userEvent.type(input, 'value');
-        fireEvent.blur(input);
-        fireEvent.keyDown(input, {
-            key: 'Escape',
-            code: 'Escape',
-            keyCode: 27,
-            charCode: 27,
-        });
-        fireEvent.keyPress(input, { key: 'Enter', keyCode: 13 });
-        expect(input).toMatchSnapshot();
-    });
-});
-describe('Toggle component', () => {
-    it('render toggle correctly', () => {
-        const toggle = render(React.createElement(Toggle, null));
-        expect(toggle).toMatchSnapshot();
-    });
-});
-// describe('SelectOption component', () => {
-//   it('render selectOption correctly', () => {
-//     const select = render(
-//       <SelectOption key='test' onChange={value => jest.fn()} value='test' />,
-//     );
-//     const selectOption = select.getByTestId('SELECT');
-//     fireEvent.change(selectOption, {target: {value: 'check'}});
-//     userEvent.type(selectOption, 'value');
-//     expect(select).toMatchSnapshot();
-//   });
-// });
-describe('MultilineInput component', () => {
-    it('render multilineInput correctly', () => {
-        const multi = render(React.createElement(MultilineInput, null));
-        expect(multi).toMatchSnapshot();
-    });
-});
-// describe('Clock component', () => {
-//   it('render clock correctly', () => {
-//     const clock = render(
-//       <Clock value='2022-02-20' onChange={value => jest.fn()} />,
-//     );
-//     expect(clock).toMatchSnapshot();
-//   });
-// });
-describe('Label component', () => {
-    it('render label correctly', () => {
-        const label = render(React.createElement(Label, { htmlFor: "vsdvrf" }));
-        expect(label).toMatchSnapshot();
-    });
-});
-describe('InputDate component', () => {
-    it('render inputDate correctly', () => {
-        const inputDate = render(React.createElement(InputDate, null));
-        expect(inputDate).toMatchSnapshot();
-    });
-});
-// describe('InputDateTime component', () => {
-//   it('render inputDateTime correctly', () => {
-//     const inputDateTime = render(<InputDateTime />);
-//     expect(inputDateTime).toMatchSnapshot();
-//   });
-// });
-describe('InputFile component', () => {
-    it('render inputFile correctly', () => {
-        const inputFile = render(React.createElement(InputFile, null));
-        expect(inputFile).toMatchSnapshot();
-    });
-});
-describe('InputRadio component', () => {
-    it('render inputRadio correctly', () => {
-        const inputRadio = render(React.createElement(InputRadio, null));
-        expect(inputRadio).toMatchSnapshot();
-    });
-});
-describe('InputWrapper component', () => {
-    it('render inputWrapper correctly', () => {
-        const inputWrapper = render(React.createElement(InputWrapper, null));
-        expect(inputWrapper).toMatchSnapshot();
-    });
-});

package/lib/src/core-components/atoms/icons/icons.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/src/core-components/atoms/icons/icons.test.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import { render } from '@core-utils';
-import { Icon } from './icons.component';
-it('render Icon correctly', () => {
-    const icon = render(React.createElement(Icon, { nameIcon: "FaHistory", propsIcon: {
-            color: '#000000',
-            size: 24,
-        } }));
-    expect(icon).toMatchSnapshot();
-});

package/lib/src/core-components/atoms/input/input-pin.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/src/core-components/atoms/input/input-pin.test.js

@@ -1,12 +0,0 @@
-/* eslint-disable testing-library/render-result-naming-convention */
-import React from 'react';
-import { render } from '@core-utils';
-import { InputPin } from './input-pin.component';
-it('render InputOtp correctly without error', () => {
-    const pinInput = render(React.createElement(InputPin, { title: "Enter your Aadhaar Number", hasError: false, errorMsg: "Uh oh! You\u2019ve entered an invalid aadhaar number", onPinChanged: () => jest.fn(), defaultPin: [] }));
-    expect(pinInput).toMatchSnapshot();
-});
-it('render InputOtp correctly with error', () => {
-    const pinInput = render(React.createElement(InputPin, { title: "Enter your Aadhaar Number", hasError: true, errorMsg: "Uh oh! You\u2019ve entered an invalid aadhaar number", onPinChanged: () => jest.fn(), defaultPin: [] }));
-    expect(pinInput).toMatchSnapshot();
-});

package/lib/src/core-components/atoms/input/input.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/src/core-components/atoms/input/input.test.js

@@ -1,12 +0,0 @@
-/* eslint-disable testing-library/render-result-naming-convention */
-import React from 'react';
-import { render } from '@core-utils';
-import { Input } from './input.component';
-it('render Input correctly without error', () => {
-    const input = render(React.createElement(Input, { className: "h-1 relative top-1 border-red-600 border-b-0 dummy", title: 'input', hasError: false, defaultValue: '', inputStyle: " border-b-0 invisible ", onChange: () => jest.fn() }));
-    expect(input).toMatchSnapshot();
-});
-it('render Input correctly with error', () => {
-    const input = render(React.createElement(Input, { className: "h-1 relative top-1 border-red-600 border-b-0 dummy", title: 'input', hasError: true, defaultValue: '', inputStyle: " border-b-0 invisible ", onChange: () => jest.fn() }));
-    expect(input).toMatchSnapshot();
-});

package/lib/src/core-components/atoms/input-dropdown/input-dropdown.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/src/core-components/atoms/input-dropdown/input-dropdown.test.js

@@ -1,8 +0,0 @@
-/* eslint-disable testing-library/render-result-naming-convention */
-import React from 'react';
-import { render } from '@core-utils';
-import { InputDropdown } from './input-dropdown.component';
-it('render InputDropdown correctly', () => {
-    const inputDropDown = render(React.createElement(InputDropdown, { title: "Source of funds", items: ['Bank account', 'UPI', 'Credit Card'], hasError: true, onChange: () => jest.fn() }));
-    expect(inputDropDown).toMatchSnapshot();
-});

package/lib/src/core-components/atoms/loader/loader.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/src/core-components/atoms/loader/loader.test.js

@@ -1,8 +0,0 @@
-/* eslint-disable testing-library/render-result-naming-convention */
-import React from 'react';
-import { render } from '@core-utils';
-import { Loader } from './loader.component';
-it('render Loader correctly', () => {
-    const loader = render(React.createElement(Loader, null));
-    expect(loader).toMatchSnapshot();
-});

package/lib/src/core-components/atoms/radio/radio.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/src/core-components/atoms/radio/radio.test.js

@@ -1,8 +0,0 @@
-/* eslint-disable testing-library/render-result-naming-convention */
-import React from 'react';
-import { render } from '@core-utils';
-import { Radio } from './radio.component';
-it('render Radio correctly', () => {
-    const radio = render(React.createElement(Radio, { title: "Title", data: [], onChange: () => jest.fn() }));
-    expect(radio).toMatchSnapshot();
-});

package/lib/src/core-components/atoms/stepper/stepper.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/src/core-components/atoms/stepper/stepper.test.js

@@ -1,7 +0,0 @@
-import React from 'react';
-import { render } from '@core-utils';
-import { Stepper } from './stepper.component';
-it('render Stepper correctly', () => {
-    const stepper = render(React.createElement(Stepper, { steps: ['1', '2', '3', '4'], currentStep: 3, onStepClick: () => jest.fn(), className: "mt-4" }));
-    expect(stepper).toMatchSnapshot();
-});

package/lib/src/core-components/atoms/tabs/tabs.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/src/core-components/atoms/tabs/tabs.test.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import { render } from '@core-utils';
-import { Tabs } from './tabs.component';
-it('render Tabs correctly', () => {
-    const tabs = render(React.createElement(Tabs, { options: [
-            { title: 'Work History', icon: 'FaHistory' },
-            { title: 'Book Order', icon: 'FaBook' },
-            { title: 'Make Frame', icon: 'MdFilterFrames' },
-        ], onSelect: (item) => {
-            console.log({ item });
-        } }));
-    expect(tabs).toMatchSnapshot();
-});

package/lib/src/core-components/atoms/timer/timer.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/src/core-components/atoms/timer/timer.test.js

@@ -1,14 +0,0 @@
-/* eslint-disable testing-library/await-async-query */
-/* eslint-disable testing-library/prefer-screen-queries */
-/* eslint-disable testing-library/render-result-naming-convention */
-import React from 'react';
-import { render } from '@core-utils';
-import { Timer as TimerComp } from './timer.component';
-it('render Timer correctly', () => {
-    const time = render(React.createElement(TimerComp, { onClear: () => { } }));
-    expect(time).toMatchSnapshot();
-});
-it('render Timer with minute correctly', () => {
-    const time = render(React.createElement(TimerComp, { onClear: () => { } }));
-    expect(time.findByText('minute')).toBeTruthy();
-});

package/lib/src/core-components/atoms/tooltip/tooltip.component.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/src/core-components/atoms/tooltip/tooltip.component.test.js

@@ -1,9 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { Tooltip } from './tooltip.component';
-describe('Tooltip component', () => {
-    it('render tooltip correctly', () => {
-        const tooltip = render(React.createElement(Tooltip, null));
-        expect(tooltip).toMatchSnapshot();
-    });
-});

package/lib/src/core-components/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/src/core-components/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.test.js

@@ -1,9 +0,0 @@
-import React from 'react';
-import { render } from '@core-utils';
-import { AutoCompleteFilterMultipleSelectMultipleFieldsDisplay } from './auto-complete-filter-multiple-select-multiple-fields-display.component';
-it('render AutoCompleteFilterMultipleSelectMultipleFieldsDisplay correctly', () => {
-    const autoCompleteFilterMultipleSelectMultipleFieldsDisplay = render(React.createElement(AutoCompleteFilterMultipleSelectMultipleFieldsDisplay, { data: [], onUpdate: (item) => {
-            console.log({ item });
-        }, onSelect: (item) => { } }));
-    expect(autoCompleteFilterMultipleSelectMultipleFieldsDisplay).toMatchSnapshot();
-});

package/lib/src/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/src/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.test.js

@@ -1,16 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { AutoCompleteFilterSingleSelectMultiFieldsDisplay } from './auto-complete-filter-single-select-multiple-fields-display.component';
-describe('AutoCompleteFilterSingleSelectMultiFieldsDisplay component', () => {
-    it('render autoCompleteFilterSingleSelectMultiFieldsDisplay correctly', () => {
-        const autoCompleteFilterSingleSelectMultiFieldsDisplay = render(React.createElement(AutoCompleteFilterSingleSelectMultiFieldsDisplay, { data: {
-                list: [
-                    { code: 'Lims', name: 'plus' },
-                    { code: 'Lims', name: 'plus' },
-                    { code: 'Lims', name: 'plus' },
-                ],
-                displayKey: ['name'],
-            }, onSelect: () => jest.fn(), onFilter: () => jest.fn() }));
-        expect(autoCompleteFilterSingleSelectMultiFieldsDisplay).toMatchSnapshot();
-    });
-});

package/lib/src/core-components/molecules/css-multiline-input/css-multiline-input.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/src/core-components/molecules/css-multiline-input/css-multiline-input.test.js

@@ -1,10 +0,0 @@
-/* eslint-disable testing-library/await-async-query */
-/* eslint-disable testing-library/prefer-screen-queries */
-/* eslint-disable testing-library/render-result-naming-convention */
-import React from 'react';
-import { render } from '@core-utils';
-import { CSSMultiline } from './css-multiline-input.component';
-it('render CSSMultiline correctly', () => {
-    const result = render(React.createElement(CSSMultiline, { onChange: () => { } }));
-    expect(result).toMatchSnapshot();
-});

package/lib/src/core-components/molecules/modal-confirm/modal-confirm.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/src/core-components/molecules/modal-confirm/modal-confirm.test.js

@@ -1,10 +0,0 @@
-/* eslint-disable testing-library/render-result-naming-convention */
-import React from 'react';
-import { render } from '@core-utils';
-import { ModalConfirm } from './modal-confirm.component';
-it('render ModalConfirm correctly', () => {
-    const modalConfirm = render(React.createElement(ModalConfirm, { visible: true, title: "Confirm", message: "Are you sure delete?", onClick: () => jest.fn(), onClose: () => {
-            jest.fn();
-        } }));
-    expect(modalConfirm).toMatchSnapshot();
-});

package/lib/src/core-components/molecules/multi-select/multi-select.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/src/core-components/molecules/multi-select/multi-select.test.js

@@ -1,10 +0,0 @@
-/* eslint-disable testing-library/await-async-query */
-/* eslint-disable testing-library/prefer-screen-queries */
-/* eslint-disable testing-library/render-result-naming-convention */
-import React from 'react';
-import { render } from '@core-utils';
-import { MultiSelect } from './multi-select.component';
-it('render MultiSelect correctly', () => {
-    const result = render(React.createElement(MultiSelect, { options: ['UPI', 'CASH'], selectedItems: ['CASH'], onSelect: () => { } }));
-    expect(result).toMatchSnapshot();
-});

package/lib/src/core-components/molecules/multi-select-with-field/multi-select-with-field.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/src/core-components/molecules/multi-select-with-field/multi-select-with-field.test.js

@@ -1,12 +0,0 @@
-/* eslint-disable testing-library/await-async-query */
-/* eslint-disable testing-library/prefer-screen-queries */
-/* eslint-disable testing-library/render-result-naming-convention */
-import React from 'react';
-import { render } from '@core-utils';
-import { MultiSelectWithField } from './multi-select-with-field.component';
-it('render MultiSelectWithField correctly', () => {
-    const result = render(React.createElement(MultiSelectWithField, { displayField: 'code', options: [{ code: 'UPI' }, { code: 'CARD' }, { code: 'CASH' }], selectedItems: [{ code: 'CASH' }], onSelect: (item) => {
-            console.log({ item });
-        } }));
-    expect(result).toMatchSnapshot();
-});