MySelect moved into common

Author: citizen-dror

src/components/atoms/Icon.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import MySelect from './MySelect';
+import '@testing-library/jest-dom';
+
+describe('MySelect', () => {
+  const options = [
+    { id: '1', name: 'Apple' },
+    { id: '2', name: 'Banana' },
+  ];
+
+  it('renders options and label', () => {
+    render(
+      <MySelect
+        data={options}
+        valProp="id"
+        contentProp="name"
+        label="Select Fruit"
+        id="fruit-select"
+        onChange={() => {}}
+      />
+    );
+
+    // label is rendered
+    expect(screen.getByLabelText('Select Fruit')).toBeInTheDocument();
+
+    // options are rendered
+    expect(screen.getByText('Apple')).toBeInTheDocument();
+    expect(screen.getByText('Banana')).toBeInTheDocument();
+  });
+
+  it('calls onChange when selection changes', () => {
+    const handleChange = vi.fn();
+
+    render(
+      <MySelect
+        data={options}
+        valProp="id"
+        contentProp="name"
+        label="Fruit"
+        onChange={handleChange}
+        value="1"
+      />
+    );
+
+    const select = screen.getByLabelText('Fruit');
+    fireEvent.change(select, { target: { value: '2' } });
+
+    expect(handleChange).toHaveBeenCalled();
+  });
+});

src/components/common/MySelect/MySelect.test.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import "../../styles/my-select.css";
+import { Form } from "react-bootstrap";
+import "./my-select.css";
 
 interface Props<T> {
   data: T[];
@@ -26,31 +27,31 @@ const MySelect = <T,>({
   cssClass = "",
 }: Props<T>) => {
   const { t } = useTranslation();
-  const cssname = "form-select form-select-sm " + cssClass;
-  const labelText = label && t(label);
-  const labelId = id || (label ? `${label}-id` : undefined);
-
-  const mappedData = data.map((item) => {
-    const val = valProp ? String(item[valProp]) : String(item);
-    const content = contentProp ? String(item[contentProp]) : String(item);
-    return (
-      <option key={val} value={val}>
-        {t(content)}
-      </option>
-    );
-  });
+  const controlId = id || (label ? `${label}-id` : undefined);
 
   return (
-    <div className="select-wrapper" style={style}>
+    <Form.Group controlId={controlId} style={style} className={`mb-2 ${cssClass}`}>
       {label && (
-        <label htmlFor={labelId} style={{ whiteSpace: "nowrap" }}>
-          {labelText}
-        </label>
+        <Form.Label className="mb-1" style={{ whiteSpace: "nowrap" }}>
+          {t(label)}
+        </Form.Label>
       )}
-      <select id={labelId} className={cssname} onChange={onChange} value={value}>
-        {mappedData}
-      </select>
-    </div>
+      <Form.Select
+        size="sm"
+        value={value}
+        onChange={onChange}
+      >
+        {data.map((item) => {
+          const val = valProp ? String(item[valProp]) : String(item);
+          const content = contentProp ? String(item[contentProp]) : String(item);
+          return (
+            <option key={val} value={val}>
+              {t(content)}
+            </option>
+          );
+        })}
+      </Form.Select>
+    </Form.Group>
   );
 };
 

src/components/common/MySelect/MySelect.tsx

@@ -0,0 +1 @@
+export {default as MySelect} from './MySelect';

src/components/common/MySelect/index.ts

@@ -3,5 +3,6 @@ export {ButtonToggle} from './ButtonToggle';
 export {Checkbox} from './CheckBox';
 export {ErrorBoundary}  from './ErrorBoundary';
 export {Loader} from './Loader';
+export {MySelect} from './MySelect';
 export {Select} from './Select';
 export {SmallCard} from './SmallCard';

src/components/common/index.ts

@@ -4,7 +4,7 @@ import { observer } from 'mobx-react';
 import { Accordion, Card } from 'react-bootstrap';
 import GroupCheckbox from './GroupCheckBox';
 import { useStore } from '../../stores/storeConfig';
-import MySelect from '../atoms/MySelect';
+import { MySelect } from '../common';
 import CustomToggle from './CustomToggle';
 import '../../styles/accordion.css'
 

src/components/filter/CardFilterWhen.tsx

@@ -4,7 +4,7 @@ import { observer } from 'mobx-react';
 import { Accordion, Card } from 'react-bootstrap';
 import GroupCheckbox from './GroupCheckBox';
 import { useStore } from '../../stores/storeConfig';
-import MySelect from '../atoms/MySelect';
+import { MySelect } from '../common';
 import CustomToggle from './CustomToggle';
 import CitySelector from './CitySelector';
 import StreetSelector from './StreetSelector';

src/components/filter/CardFilterWhere.tsx

@@ -3,7 +3,7 @@ import { observer } from 'mobx-react';
 import { toJS, reaction } from 'mobx';
 import { useStore } from '../../stores/storeConfig';
 import GroupBy from '../../stores/filter/GroupBy';
-import MySelect from '../atoms/MySelect';
+import { MySelect } from '../common';
 
 interface IProps {
   id: string;

src/components/groupby/SelectGroupBy.tsx

@@ -4,7 +4,7 @@ import { observer } from 'mobx-react';
 
 import { useStore } from '../../stores/storeConfig';
 import GroupBy2 from '../../stores/filter/GroupBy2';
-import MySelect from '../atoms/MySelect';
+import { MySelect } from '../common';
 
 interface IProps { id: string }
 

src/components/groupby/SelectGroupBy2.tsx

@@ -1,7 +1,7 @@
 import React, { ChangeEvent, useCallback } from 'react';
 import { observer } from 'mobx-react-lite'; 
 import { useStore } from '../../stores/storeConfig';
-import MySelect from '../atoms/MySelect';
+import { MySelect } from '../common';
 import GroupBy from '../../stores/filter/GroupBy';
 
 interface IProps {