Merge pull request #878 from InseeFr/fix/rewrite-new

feat: migrate 2 components

src/js/applications/administration/dashboard/concepts/collections/creations-modifications/index.js

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Table, NumberResult } from '@inseefr/wilco';
-import DatePickerRmes from '../../../../../../applications/shared/date-picker-rmes';
+import { DatePicker } from '../../../../../../new-architecture/components';
 import D from '../../../../../../i18n';
 import { rowParams } from './data';
 import dayjs from 'dayjs';
@@ -36,7 +36,7 @@ const CollectionsCreationsModifications = ({ collectionsData, type }) => {
 			<div className="row" style={{ marginTop: '2%' }}>
 				<div className="form-group col-md-4 col-md-offset-4 text-center">
 					<label>{D.dashboardConceptsListPickerTitle(typeByLang)}</label>
-					<DatePickerRmes
+					<DatePicker
 						value={dateFilter}
 						onChange={setDateFilter}
 						placement="top"

src/js/applications/administration/dashboard/concepts/concepts/creations-modifications/index.js

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Table, NumberResult } from '@inseefr/wilco';
-import DatePickerRmes from '../../../../../../applications/shared/date-picker-rmes';
+import { DatePicker } from '../../../../../../new-architecture/components';
 import D from '../../../../../../i18n';
 import { rowParams } from './data';
 import dayjs from 'dayjs';
@@ -37,7 +37,7 @@ const ConceptsCreationsModifications = ({ conceptsData, type }) => {
 			<div className="row" style={{ marginTop: '2%' }}>
 				<div className="form-group col-md-4 col-md-offset-4 text-center">
 					<label>{D.dashboardConceptsListPickerTitle(typeByLang)}</label>
-					<DatePickerRmes
+					<DatePicker
 						value={dateFilter}
 						onChange={setDateFilter}
 						placement="top"

src/js/applications/administration/dashboard/concepts/home.js

@@ -1,6 +1,5 @@
-import { PageTitle } from '../../../../new-architecture/components';
+import { PageTitle, Tabs } from '../../../../new-architecture/components';
 import Controls from './controls';
-import TabsRmes from '../../../../applications/shared/tabs-rmes/tabs-rmes';
 import ConceptsSummary from './concepts/summary';
 import ConceptsCreationsModifications from './concepts/creations-modifications';
 import CollectionsSummary from './collections/summary';
@@ -59,14 +58,14 @@ function ConceptsDashboard({ conceptsData, collectionsData }) {
 		},
 	];
 	const tabs = [
-		{ title: D.conceptsTitle, content: <TabsRmes tabs={tabsConcepts} /> },
-		{ title: D.collectionsTitle, content: <TabsRmes tabs={tabsCollections} /> },
+		{ title: D.conceptsTitle, content: <Tabs tabs={tabsConcepts} /> },
+		{ title: D.collectionsTitle, content: <Tabs tabs={tabsCollections} /> },
 	];
 	return (
 		<div className="container">
 			<PageTitle title={D.dashboardConceptsTitle} />
 			<Controls />
-			<TabsRmes tabs={tabs} />
+			<Tabs tabs={tabs} />
 		</div>
 	);
 }

src/js/applications/concepts/advanced-search/home.js

@@ -1,10 +1,13 @@
 import { Link, useHistory } from 'react-router-dom';
 import { NumberResult } from '@inseefr/wilco';
-import { PageTitle, TextInput } from '../../../new-architecture/components';
+import {
+	PageTitle,
+	TextInput,
+	DatePicker,
+} from '../../../new-architecture/components';
 
 import Select from 'react-select';
 import Controls from './controls';
-import DatePickerRmes from '../../../applications/shared/date-picker-rmes';
 import D from '../../../i18n';
 import { filterKeyDate } from '../../../new-architecture/utils/array-utils';
 import {
@@ -176,7 +179,7 @@ const ConceptSearchList = ({
 						<label>{D.conceptsCreationDateMessage}</label>
 					</div>
 					<div className="col-md-4">
-						<DatePickerRmes
+						<DatePicker
 							value={dateCreatedStart}
 							onChange={(value) => handleChange('dateCreatedStart', value)}
 							placement="bottom"
@@ -186,7 +189,7 @@ const ConceptSearchList = ({
 						<label>{D.conceptsTransitionDateMessage}</label>
 					</div>
 					<div className="col-md-4">
-						<DatePickerRmes
+						<DatePicker
 							value={dateCreatedEnd}
 							onChange={(value) => handleChange('dateCreatedEnd', value)}
 							placement="bottom"
@@ -198,7 +201,7 @@ const ConceptSearchList = ({
 						<label>{D.conceptsUpdateDateMessage}</label>
 					</div>
 					<div className="col-md-4">
-						<DatePickerRmes
+						<DatePicker
 							value={dateModifiedStart}
 							onChange={(value) => handleChange('dateModifiedStart', value)}
 							placement="bottom"
@@ -208,7 +211,7 @@ const ConceptSearchList = ({
 						<label>{D.conceptsTransitionDateMessage}</label>
 					</div>
 					<div className="col-md-4">
-						<DatePickerRmes
+						<DatePicker
 							value={dateModifiedEnd}
 							onChange={(value) => handleChange('dateModifiedEnd', value)}
 							placement="bottom"

src/js/applications/concepts/edition-creation/general.js

@@ -1,5 +1,4 @@
 import D, { D1, D2 } from '../../../i18n';
-import DatePickerRmes from '../../../applications/shared/date-picker-rmes';
 import InputRmes from '../../../applications/shared/input-rmes';
 import InputMultiRmes from '../../../applications/shared/input-multi-rmes';
 import { fields as generalFields } from '../../../utils/concepts/general';
@@ -9,6 +8,7 @@ import {
 	DisseminationStatusInput,
 	ClientSideError,
 	RequiredIcon,
+	DatePicker,
 } from '../../../new-architecture/components';
 import Select from './../../../utils/components/select-rmes';
 
@@ -125,11 +125,7 @@ function ConceptGeneralEdition({
 			</div>
 			<div className="form-group">
 				<label>{D1.validDateTitle}</label>
-				<DatePickerRmes
-					value={valid}
-					onChange={handlers.valid}
-					placement="top"
-				/>
+				<DatePicker value={valid} onChange={handlers.valid} placement="top" />
 			</div>
 		</div>
 	);

src/js/applications/operations/document/edition/edition.js

@@ -12,7 +12,6 @@ import {
 	ActionToolbar,
 	LabelRequired,
 } from '@inseefr/wilco';
-import DatePickerRmes from '../../../../applications/shared/date-picker-rmes';
 import api from '../../../../remote-api/api';
 import Modal from 'react-modal';
 import {
@@ -22,6 +21,7 @@ import {
 	ErrorBloc,
 	GlobalClientSideErrorBloc,
 	ClientSideError,
+	DatePicker,
 } from '../../../../new-architecture/components';
 import Select from '../../../../utils/components/select-rmes';
 
@@ -338,7 +338,7 @@ const OperationsDocumentationEdition = (props) => {
 					<Row>
 						<div className="col-md-12 form-group">
 							<LabelRequired>{D1.titleUpdatedDate}</LabelRequired>
-							<DatePickerRmes
+							<DatePicker
 								value={updatedDate}
 								onChange={(date) => {
 									const value = date && date.split('T')[0];

src/js/applications/operations/msd/pages/sims-creation/sims-field.js

@@ -1,7 +1,7 @@
 import { PureComponent } from 'react';
 import D from '../../../../../i18n';
 import { rangeType } from '../../../../../utils/msd/';
-import DatePickerRmes from '../../../../../applications/shared/date-picker-rmes';
+import { DatePicker } from '../../../../../new-architecture/components';
 import InputRmes from '../../../../../applications/shared/input-rmes';
 import {
 	EditorMarkdownToolbar,
@@ -162,7 +162,7 @@ class SimsField extends PureComponent {
 								/>
 							)}
 							{msd.rangeType === DATE && (
-								<DatePickerRmes
+								<DatePicker
 									aria-label={D.simsValue}
 									id={msd.idMas}
 									colMd={12}

src/js/applications/shared/date-picker-rmes/date-picker-rmes.spec.js → src/js/new-architecture/components/date-picker/date-picker.spec.js

@@ -1,8 +1,8 @@
 import { render } from '@testing-library/react';
-import DatePickerRmes from './';
+import { DatePicker } from './';
 
 describe('date-picker', () => {
 	it('renders without crashing', () => {
-		render(<DatePickerRmes />);
+		render(<DatePicker />);
 	});
 });

src/js/new-architecture/components/date-picker/index.tsx

@@ -0,0 +1,30 @@
+// @ts-ignore
+import BootstrapDatePicker from 'react-16-bootstrap-date-picker';
+import { D1, D2 } from '../../../i18n';
+
+type DatePickerTypes = {
+	value: string;
+	onChange: (value: string) => void;
+	placement: string;
+	secondLang?: boolean;
+};
+export const DatePicker = ({
+	value,
+	onChange,
+	placement,
+	secondLang = false,
+}: DatePickerTypes) => {
+	const days = secondLang ? D2.calendarDays : D1.calendarDays;
+	const months = secondLang ? D2.calendarMonths : D1.calendarMonths;
+
+	return (
+		<BootstrapDatePicker
+			value={value}
+			calendarPlacement={placement}
+			onChange={onChange}
+			weekStartsOn={1}
+			dayLabels={days}
+			monthLabels={months}
+		/>
+	);
+};

src/js/new-architecture/components/index.ts

@@ -1,6 +1,7 @@
 export * from './data/conditional-display';
 export * from './data/creators';
 export * from './contributors/contributors';
+export * from './date-picker';
 export * from './dissemination-status/disseminationStatus';
 export * from './errors-bloc/index';
 export * from './creators-input';
@@ -10,5 +11,6 @@ export * from './loading/loading';
 export * from './new-button';
 export * from './required-icon';
 export * from './status';
+export * from './tabs/tabs';
 export * from './page-title';
 export * from './validationButton';

src/js/applications/shared/tabs-rmes/tabs-rmes.spec.js → src/js/new-architecture/components/tabs/tabs-rmes.spec.js

@@ -1,6 +1,6 @@
 import { render, fireEvent, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import TabsRmes from './tabs-rmes';
+import { Tabs } from './tabs';
 
 describe('TabsRmes Component', () => {
 	const tabsMock = [
@@ -10,19 +10,19 @@ describe('TabsRmes Component', () => {
 	];
 
 	it('should render correctly with initial active tab', () => {
-		render(<TabsRmes tabs={tabsMock} />);
+		render(<Tabs tabs={tabsMock} />);
 		expect(screen.getByText('Content 1')).toBeVisible();
 	});
 
 	it('should switch tabs on click', () => {
-		render(<TabsRmes tabs={tabsMock} />);
+		render(<Tabs tabs={tabsMock} />);
 		const secondTab = screen.getByRole('tab', { name: 'Tab 2' });
 		fireEvent.click(secondTab);
 		expect(screen.getByText('Content 2')).toBeVisible();
 	});
 
 	it('should not switch to disabled tab', () => {
-		render(<TabsRmes tabs={tabsMock} />);
+		render(<Tabs tabs={tabsMock} />);
 		const disabledTab = screen.getByRole('tab', { name: 'Tab 3' });
 		fireEvent.click(disabledTab);
 		expect(screen.getByText('Content 1')).toBeVisible();

src/js/applications/shared/tabs-rmes/tabs-rmes.js → src/js/new-architecture/components/tabs/tabs.tsx

@@ -1,30 +1,32 @@
 import { useId, useState } from 'react';
-import { Tabs, Tab } from 'react-bootstrap';
+import { Tabs as BootstrapTabs, Tab as BootstrapTab } from 'react-bootstrap';
 
-const TabsRmes = ({ tabs }) => {
+export const Tabs = ({
+	tabs,
+}: {
+	tabs: { title: string; disabled: boolean; content: unknown }[];
+}) => {
 	const [activeTab, setActiveTab] = useState(0);
 	const id = useId();
 	return (
 		<ul className="nav nav-tabs nav-justified">
-			<Tabs
+			<BootstrapTabs
 				id={id}
 				defaultActiveKey={0}
-				onSelect={(index) => setActiveTab(index)}
+				onSelect={(index: number) => setActiveTab(index)}
 				justified
 			>
 				{tabs.map((t, i) => (
-					<Tab
+					<BootstrapTab
 						key={`tab${i}`}
 						eventKey={i}
 						title={t.title}
 						disabled={t.disabled}
 					>
 						{activeTab === i && t.content}
-					</Tab>
+					</BootstrapTab>
 				))}
-			</Tabs>
+			</BootstrapTabs>
 		</ul>
 	);
 };
-
-export default TabsRmes;

src/react-app-env.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="react-scripts" />
 
+declare module 'react-16-bootstrap-date-picker';
+declare module 'react-bootstrap';
+
 declare module '@inseefr/wilco';