Ajoute la prise en charge React + Bridge Vue lié (#325)

* Logo component refactoring * Supprime TypeScript pour les components Vue 😢 * Supprime les définitions globales pour les types Vue * Little refactoring * Suite de la suppression du TypeScript dans les fichiers Js liés à Vue * Ajoute la prise en charge de React * Corrige le code suite à la mise à jour de la config. de Linting * Convertit le component Logo vers un component React
Robert-2 · Jan 29, 2022 · 7aadcd7 · 7aadcd7
1 parent 53946c5
commit 7aadcd7
Show file tree

Hide file tree

Showing 51 changed files with 837 additions and 907 deletions.
diff --git a/client/.eslintrc.js b/client/.eslintrc.js
@@ -22,4 +22,12 @@ module.exports = {
             },
         },
     },
+
+    // - Overrides
+    overrides: [
+        {
+            files: ['**/*.tsx'],
+            extends: '@pulsanova/react',
+        },
+    ],
 };
diff --git a/client/babel.config.js b/client/babel.config.js
@@ -1,7 +1,17 @@
 module.exports = {
     presets: [
         'vca-jsx',
-        '@vue/cli-plugin-babel/preset',
+        '@vue/babel-preset-app',
         '@babel/preset-typescript',
     ],
+    overrides: [
+        {
+            include: './**/*.tsx',
+            presets: [
+                ['@vue/babel-preset-app', { jsx: false }],
+                ['@babel/preset-react', { runtime: 'automatic' }],
+                '@babel/preset-typescript',
+            ],
+        },
+    ],
 };
diff --git a/client/package.json b/client/package.json
@@ -21,6 +21,8 @@
         "lodash.pick": "4.4.0",
         "lodash.times": "4.3.2",
         "moment": "2.29.1",
+        "react": "17.0.2",
+        "react-dom": "17.0.2",
         "sweetalert2": "11.0.20",
         "v-tooltip": "2.1.3",
         "vue": "2.6.14",
@@ -41,12 +43,18 @@
     },
     "devDependencies": {
         "@babel/core": "7.14.8",
+        "@babel/preset-react": "7.16.7",
         "@babel/preset-typescript": "7.15.0",
-        "@pulsanova/eslint-config-vue": "2.0.4",
+        "@pulsanova/eslint-config-vue": "2.1.2",
+        "@pulsanova/eslint-config-react": "2.1.2",
         "@pulsanova/stylelint-config-scss": "2.0.1",
-        "@types/debounce": "1.2.1",
-        "@types/lodash.clonedeep": "4.5.6",
-        "@types/lodash.times": "4.3.6",
+        "@types/debounce": "1.2",
+        "@types/invariant": "2.2",
+        "@types/lodash.clonedeep": "4.5",
+        "@types/lodash.times": "4.3",
+        "@types/react": "17.0",
+        "@types/react-dom": "17.0",
+        "@vue/babel-preset-app": "4.5.15",
         "@vue/cli-plugin-babel": "4.5.13",
         "@vue/cli-plugin-typescript": "4.5.13",
         "@vue/cli-plugin-unit-jest": "4.5.13",

diff --git a/client/src/components/App/index.js b/client/src/components/App/index.js
@@ -1,8 +1,8 @@
 import './index.scss';
+import { useQueryProvider } from 'vue-query';
 import { ref, computed, watch } from '@vue/composition-api';
 import queryClient from '@/globals/queryClient';
-import useRouter from '@/hooks/useRouter';
-import { useQueryProvider } from 'vue-query';
+import useRouter from '@/hooks/vue/useRouter';
 import Header from '@/components/MainHeader';
 import Sidebar from '@/components/Sidebar';
 

diff --git a/client/src/components/Button/index.js b/client/src/components/Button/index.js
@@ -0,0 +1,75 @@
+import './index.scss';
+import { toRefs, computed } from '@vue/composition-api';
+import Icon from '@/components/Icon';
+
+// type Props = {
+//     /**
+//      * Le type de bouton pour l'attribut `type` de la balise `<button>`?
+//      *
+//      * Options disponibles: `submit`, `button` ou `reset`.
+//      */
+//     htmlType?: 'submit' | 'button' | 'reset',
+
+//     /**
+//      * Le code de l'éventuelle icône qui sera ajoutée au bouton.
+//      *
+//      * Pour utiliser une variante de l'icône, vous pouvez suffixer le nom de l'icône avec `:[variante]`.
+//      * Par exemple: `plus:solid` ou `birthday-cake:regular`.
+//      *
+//      * Voir le component <Icon> concernant la liste des codes et les variantes possibles.
+//      */
+//     icon?: string | undefined,
+
+//     /** Le bouton est-il désactivé ? */
+//     disabled?: boolean,
+
+//     /** Des éventuelles classes supplémentaires qui seront ajoutées au component. */
+//     class?: string,
+// };
+
+// @vue/component
+const Button = (props, { slots }) => {
+    const { htmlType, icon, disabled } = toRefs(props);
+    const _icon = computed(() => {
+        if (!icon.value) {
+            return null;
+        }
+
+        if (!icon.value.includes(':')) {
+            return { name: icon.value };
+        }
+
+        const [iconType, variant] = icon.value.split(':');
+        return { name: iconType, variant };
+    });
+
+    const _className = ['Button', {
+        'Button--with-icon': !!_icon,
+    }];
+
+    return () => {
+        const children = slots.default?.();
+
+        return (
+            // eslint-disable-next-line react/button-has-type
+            <button type={htmlType.value} class={_className} disabled={disabled.value}>
+                {_icon.value && <Icon {...{ props: _icon.value }} class="Button__icon" />}
+                {children && <span class="Button__content">{children}</span>}
+            </button>
+        );
+    };
+};
+
+Button.props = {
+    htmlType: {
+        default: 'button',
+        validator: (value) => (
+            typeof value === 'string' &&
+            ['button', 'submit', 'reset'].includes(value)
+        ),
+    },
+    icon: { type: String, default: undefined },
+    disabled: { type: Boolean, default: false },
+};
+
+export default Button;
diff --git a/client/src/components/Button/index.tsx b/client/src/components/Button/index.tsx
diff --git a/client/src/components/CompanyForm/index.tsx → client/src/components/CompanyForm/index.js b/client/src/components/CompanyForm/index.tsx → client/src/components/CompanyForm/index.js
@@ -2,33 +2,26 @@ import './index.scss';
 import { computed, toRefs } from '@vue/composition-api';
 import { useQuery } from 'vue-query';
 import getFormDataAsJson from '@/utils/getFormDataAsJson';
-import useI18n from '@/hooks/useI18n';
-import useRouter from '@/hooks/useRouter';
+import useI18n from '@/hooks/vue/useI18n';
+import useRouter from '@/hooks/vue/useRouter';
 import formatOptions from '@/utils/formatOptions';
 import apiCountries from '@/stores/api/countries';
 import FormField from '@/components/FormField';
 
-import type { Component, SetupContext } from '@vue/composition-api';
-
-type Props = {
-    company: Record<string, any>,
-    errors: Record<string, any>,
-};
-
 // @vue/component
-const CompanyForm: Component<Props> = (props: Props, { emit }: SetupContext) => {
+const CompanyForm = (props, { emit }) => {
     const { company, errors } = toRefs(props);
     const { data: countries } = useQuery('countries', apiCountries.all);
     const countriesOptions = computed(() => formatOptions(countries.value ?? []));
     const { router } = useRouter();
     const __ = useI18n();
 
-    const handleSubmit = (e: SubmitEvent): void => {
+    const handleSubmit = (e) => {
         e.preventDefault();
         emit('submit', getFormDataAsJson(e.target));
     };
 
-    const handleCancel = (): void => {
+    const handleCancel = () => {
         router.back();
     };
 

diff --git a/client/src/components/ErrorMessage/index.js b/client/src/components/ErrorMessage/index.js
@@ -1,7 +1,7 @@
 import './index.scss';
-import Details from './Details';
 import { defineComponent } from '@vue/composition-api';
 import { getErrorMessage } from '@/utils/errors';
+import Details from './Details';
 
 // @vue/component
 export default defineComponent({

diff --git a/...nts/EventDetails/Header/Actions/index.tsx → ...ents/EventDetails/Header/Actions/index.js b/...nts/EventDetails/Header/Actions/index.tsx → ...ents/EventDetails/Header/Actions/index.js
@@ -2,25 +2,18 @@ import './index.scss';
 import { toRefs, computed, ref } from '@vue/composition-api';
 import Config from '@/globals/config';
 import { confirm } from '@/utils/alert';
-import useI18n from '@/hooks/useI18n';
+import useI18n from '@/hooks/vue/useI18n';
 import apiEvents from '@/stores/api/events';
 import Dropdown, { getItemClassnames } from '@/components/Dropdown';
 import DuplicateEvent from '@/components/DuplicateEvent';
 
-import type { Component, SetupContext } from '@vue/composition-api';
-import type { FormatedEvent } from '@/stores/api/events';
-
-type Props = {
-    event: FormatedEvent,
-};
-
 // @vue/component
-const EventDetailsHeaderActions: Component<Props> = (props: Props, { root, emit }: SetupContext) => {
+const EventDetailsHeaderActions = (props, { root, emit }) => {
     const __ = useI18n();
     const { event } = toRefs(props);
-    const isConfirming = ref<boolean>(false);
-    const isArchiving = ref<boolean>(false);
-    const isDeleting = ref<boolean>(false);
+    const isConfirming = ref(false);
+    const isArchiving = ref(false);
+    const isDeleting = ref(false);
     const hasMaterials = computed(() => event.value.materials.length > 0);
     const isConfirmable = computed(() => event.value.materials?.length === 0);
     const hasStarted = computed(() => event.value.startDate.isSameOrBefore(new Date(), 'day'));
@@ -52,7 +45,7 @@ const EventDetailsHeaderActions: Component<Props> = (props: Props, { root, emit
         return `${baseUrl}/events/${id}/pdf`;
     });
 
-    const handleToggleConfirm = async (): Promise<void> => {
+    const handleToggleConfirm = async () => {
         if (isConfirming.value) {
             return;
         }
@@ -70,7 +63,7 @@ const EventDetailsHeaderActions: Component<Props> = (props: Props, { root, emit
         }
     };
 
-    const handleToggleArchived = async (): Promise<void> => {
+    const handleToggleArchived = async () => {
         if (isArchiving.value) {
             return;
         }
@@ -88,7 +81,7 @@ const EventDetailsHeaderActions: Component<Props> = (props: Props, { root, emit
         }
     };
 
-    const handleDelete = async (): Promise<void> => {
+    const handleDelete = async () => {
         if (isVisitor.value || !isRemovable.value || isDeleting.value) {
             return;
         }
@@ -116,11 +109,11 @@ const EventDetailsHeaderActions: Component<Props> = (props: Props, { root, emit
         }
     };
 
-    const handleDuplicated = (newEvent: Event): void => {
+    const handleDuplicated = (newEvent) => {
         emit('duplicated', newEvent);
     };
 
-    const askDuplicate = (): void => {
+    const askDuplicate = () => {
         root.$modal.show(DuplicateEvent, { event: event.value, onDuplicated: handleDuplicated }, {
             width: 600,
             draggable: true,

diff --git a/client/src/components/FormField/index.js b/client/src/components/FormField/index.js
@@ -1,8 +1,8 @@
 import './index.scss';
 import moment from 'moment';
+import { defineComponent } from '@vue/composition-api';
 import Datepicker from '@/components/Datepicker';
 import SwitchToggle from '@/components/SwitchToggle';
-import { defineComponent } from '@vue/composition-api';
 
 const ALLOWED_TYPES = [
     'text',

diff --git a/client/src/components/Help/index.js b/client/src/components/Help/index.js
@@ -1,6 +1,6 @@
 import './index.scss';
-import ErrorMessage from '@/components/ErrorMessage';
 import { defineComponent } from '@vue/composition-api';
+import ErrorMessage from '@/components/ErrorMessage';
 
 // @vue/component
 export default defineComponent({