react-restyle-components 0.1.83 → 0.1.84

package/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-restyle-components",
-  "version": "0.1.82",
+  "version": "0.1.83",
   "private": false,
   "description": "Easy use restyle components",
   "main": "./lib/index.js",

package/lib/src/core-components/index.d.ts

@@ -17,6 +17,7 @@ export * from './atoms/tabs/tabs.component';
 export * from './molecules/css-multiline-input/css-multiline-input.component';
 export * from './molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component';
 export * from './molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component';
-export * from './molecules/mutiple-select/multi-select.component';
+export * from './molecules/multi-select/multi-select.component';
+export * from './molecules/multi-select-with-field/multi-select-with-field.component';
 export * from './molecules/modal-confirm/modal-confirm.component';
 export { Form };

package/lib/src/core-components/index.js

@@ -17,6 +17,7 @@ export * from './atoms/tabs/tabs.component';
 export * from './molecules/css-multiline-input/css-multiline-input.component';
 export * from './molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component';
 export * from './molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component';
-export * from './molecules/mutiple-select/multi-select.component';
+export * from './molecules/multi-select/multi-select.component';
+export * from './molecules/multi-select-with-field/multi-select-with-field.component';
 export * from './molecules/modal-confirm/modal-confirm.component';
 export { Form };

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

@@ -0,0 +1,9 @@
+import React from 'react';
+interface MultiSelectProps {
+    options: Array<string>;
+    selectedItems?: Array<string>;
+    hasError?: boolean;
+    onSelect: (item: any) => any;
+}
+export declare const MultiSelect: ({ options, selectedItems, hasError, onSelect, }: MultiSelectProps) => React.JSX.Element;
+export {};

package/lib/src/core-components/molecules/{mutiple-select → multi-select}/multi-select.component.js

@@ -1,6 +1,6 @@
 /* eslint-disable  */
 import React, { useState, useEffect, useRef } from 'react';
-export const MultipleSelect = ({ options = [], selectedItems = [], hasError = false, onSelect, }) => {
+export const MultiSelect = ({ options = [], selectedItems = [], hasError = false, onSelect, }) => {
     const [selectedOptions, setSelectedOptions] = useState([]);
     const [isListOpen, setIsListOpen] = useState(false);
     const useOutsideAlerter = (ref) => {

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

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MultiSelect } from './multi-select.component';
+declare const meta: Meta<typeof MultiSelect>;
+export default meta;
+type Story = StoryObj<typeof MultiSelect>;
+export declare const Primary: Story;

package/lib/src/core-components/molecules/{mutiple-select → multi-select}/multi-select.stories.js

@@ -1,10 +1,10 @@
-import { MultipleSelect } from './multi-select.component';
+import { MultiSelect } from './multi-select.component';
 const meta = {
-    title: 'Design System/Molecules/MultipleSelect',
-    component: MultipleSelect,
+    title: 'Design System/Molecules/MultiSelect',
+    component: MultiSelect,
     tags: ['autodocs'],
     parameters: {
-        componentSubtitle: `import { MultipleSelect } from 'react-restyle-components'`,
+        componentSubtitle: `import { MultiSelect } from 'react-restyle-components'`,
     },
 };
 export default meta;

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

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

package/lib/src/core-components/molecules/{mutiple-select → multi-select}/multi-select.test.js

@@ -3,8 +3,8 @@
 /* eslint-disable testing-library/render-result-naming-convention */
 import React from 'react';
 import { render } from '@core-utils';
-import { MultipleSelect } from './multi-select.component';
-it('render MultipleSelect correctly', () => {
-    const result = render(React.createElement(MultipleSelect, { options: ['UPI', 'CASH'], selectedItems: ['CASH'], onSelect: () => { } }));
+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.component.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface MultiSelectWithFieldProps {
+    displayField: string;
+    options: Array<any>;
+    selectedItems?: Array<any>;
+    hasError?: boolean;
+    onSelect: (item: any) => any;
+}
+export declare const MultiSelectWithField: ({ displayField, options, selectedItems, hasError, onSelect, }: MultiSelectWithFieldProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,58 @@
+/* eslint-disable  */
+import React, { useState, useEffect, useRef } from 'react';
+import _ from 'lodash';
+export const MultiSelectWithField = ({ displayField = '', options = [], selectedItems = [], hasError = false, onSelect, }) => {
+    const [selectedOptions, setSelectedOptions] = useState([]);
+    const [isListOpen, setIsListOpen] = useState(false);
+    const useOutsideAlerter = ref => {
+        useEffect(() => {
+            function handleClickOutside(event) {
+                if (ref.current && !ref.current.contains(event.target) && isListOpen) {
+                    setIsListOpen(false);
+                }
+            }
+            document.addEventListener('mousedown', handleClickOutside);
+            return () => {
+                document.removeEventListener('mousedown', handleClickOutside);
+            };
+        }, [ref, isListOpen]);
+    };
+    useEffect(() => {
+        setSelectedOptions(selectedItems);
+    }, [selectedItems]);
+    const wrapperRef = useRef(null);
+    useOutsideAlerter(wrapperRef);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: `flex dark:bg-boxdark dark:text-white flex-col w-full rounded-md border-2 ${hasError ? 'border-red  ' : 'border-gray-300'}`, ref: wrapperRef },
+            React.createElement("span", { className: 'p-2 mt-1 shadow-sm', onClick: () => {
+                    setIsListOpen(!isListOpen);
+                } }, selectedOptions?.length > 0
+                ? `${selectedOptions?.length} Items`
+                : 'Select'),
+            React.createElement("div", { className: `flex mx-2 ${isListOpen ? `show` : `hidden`}` }, options
+                ? options?.length > 0 && (React.createElement("ul", { className: 'flex flex-col gap-1 p-2' }, options?.map((item, index) => (React.createElement("li", { key: index, className: 'flex items-center' },
+                    React.createElement("input", { className: 'flex bg-black', type: 'checkbox', checked: !_.isEmpty(selectedOptions?.find(e => e[displayField]?.toUpperCase() ==
+                            item[displayField]?.toUpperCase()))
+                            ? true
+                            : false, onChange: () => {
+                            if (!_.isEmpty(selectedOptions?.find(e => e[displayField]?.toUpperCase() ==
+                                item[displayField]?.toUpperCase()))) {
+                                setSelectedOptions(selectedOptions?.filter(e => e[displayField]?.toUpperCase() !=
+                                    item[displayField]?.toUpperCase()));
+                            }
+                            else {
+                                if (selectedOptions?.length > 0) {
+                                    setSelectedOptions(selectedOptions?.concat([item]));
+                                }
+                                else {
+                                    setSelectedOptions([item]);
+                                }
+                            }
+                        }, onBlur: () => {
+                            if (!isListOpen)
+                                onSelect(selectedOptions);
+                        } }),
+                    ' ',
+                    React.createElement("span", { className: 'flex ml-2  dark:text-white text-center' }, item[displayField]))))))
+                : null))));
+};

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

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MultiSelectWithField } from './multi-select-with-field.component';
+declare const meta: Meta<typeof MultiSelectWithField>;
+export default meta;
+type Story = StoryObj<typeof MultiSelectWithField>;
+export declare const Primary: Story;

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

@@ -0,0 +1,20 @@
+import { MultiSelectWithField } from './multi-select-with-field.component';
+const meta = {
+    title: 'Design System/Molecules/MultiSelectWithField',
+    component: MultiSelectWithField,
+    tags: ['autodocs'],
+    parameters: {
+        componentSubtitle: `import { MultiSelectWithField } from 'react-restyle-components'`,
+    },
+};
+export default meta;
+export const Primary = {
+    args: {
+        displayField: 'code',
+        options: [{ code: 'UPI' }, { code: 'CARD' }, { code: 'CASH' }],
+        selectedItems: [{ code: 'CASH' }],
+        onSelect: (item) => {
+            console.log({ item });
+        },
+    },
+};

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

@@ -0,0 +1,12 @@
+/* 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();
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-restyle-components",
-  "version": "0.1.83",
+  "version": "0.1.84",
   "private": false,
   "description": "Easy use restyle components",
   "main": "./lib/index.js",

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

@@ -1,9 +0,0 @@
-import React from 'react';
-interface MultipleSelectProps {
-    options: Array<string>;
-    selectedItems?: Array<string>;
-    hasError?: boolean;
-    onSelect: (item: any) => any;
-}
-export declare const MultipleSelect: ({ options, selectedItems, hasError, onSelect, }: MultipleSelectProps) => React.JSX.Element;
-export {};

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

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { MultipleSelect } from './multi-select.component';
-declare const meta: Meta<typeof MultipleSelect>;
-export default meta;
-type Story = StoryObj<typeof MultipleSelect>;
-export declare const Primary: Story;