Merge pull request #290 from Alt-Org/SProkopios/enhancement/236-creating-MultiSelectionDropdown

SProkopios/enhancement/236-creating-MultiSelectionDropdown

Author: leolabdev

frontend-next-migration/package-lock.json

@@ -58,6 +58,7 @@
     "react-lazy-load-image-component": "^1.6.0",
     "react-lite-youtube-embed": "^1.1.55",
     "react-modal": "^3.16.1",
+    "react-multi-select-component": "^4.3.4",
     "react-quill": "^2.0.0",
     "react-redux": "^8.1.3",
     "react-responsive-masonry": "^2.3.0",

frontend-next-migration/package.json

@@ -0,0 +1,39 @@
+export enum ClanLabel {
+    ELÄINRAKKAAT = 'eläinrakkaat',
+    MAAHANMUUTTOMYÖNTEISET = 'maahanmuuttomyönteiset',
+    LGBTQ = 'lgbtq+',
+    RAITTIIT = 'raittiit',
+    KOHTELIAAT = 'kohteliaat',
+    KIUSAAMISENVASTAISET = 'kiusaamisenvastaiset',
+    URHEILEVAT = 'urheilevat',
+    SYVÄLLISET = 'syvälliset',
+    OIKEUDENMUKAISET = 'oikeudenmukaiset',
+    KAIKKIEN_KAVERIT = 'kaikkien kaverit',
+    ITSENÄISET = 'itsenäiset',
+    RETKEILIJÄT = 'retkeilijät',
+    SUOMENRUOTSALAISET = 'suomenruotsalaiset',
+    HUUMORINTAJUISET = 'huumorintajuiset',
+    RIKKAAT = 'rikkaat',
+    IKITEINIT = 'ikiteinit',
+    JUORUILEVAT = 'juoruilevat',
+    RAKASTAVAT = 'rakastavat',
+    OLEILIJAT = 'oleilijat',
+    NÖRTIT = 'nörtit',
+    MUSADIGGARIT = 'musadiggarit',
+    TUNTEELLISET = 'tunteelliset',
+    GAMERIT = 'gamerit',
+    ANIMEFANIT = 'animefanit',
+    SINKUT = 'sinkut',
+    MONIKULTTUURISET = 'monikulttuuriset',
+    KAUNIIT = 'kauniit',
+    JÄRJESTELMÄLLISET = 'järjestelmälliset',
+    EPÄJÄRJESTELMÄLLISET = 'epäjärjestelmälliset',
+    TASA_ARVOISET = 'tasa-arvoiset',
+    SOMEPERSOONAT = 'somepersoonat',
+    KÄDENTAITAJAT = 'kädentaitajat',
+    MUUSIKOT = 'muusikot',
+    TAITEILIJAT = 'taiteilijat',
+    SPÄMMÄÄJÄT = 'spämmääjät',
+    KASVISSYÖJÄT = 'kasvissyöjät',
+    TASAPAINOISET = 'tasapainoiset',
+}

frontend-next-migration/src/entities/Clan/enum/clanLabel.enum.ts

@@ -0,0 +1,16 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { NewClanForm } from './NewClanForm';
+
+export default {
+    title: 'features/NewClanForm',
+    component: NewClanForm,
+    args: {
+        className: '',
+    },
+} as ComponentMeta<typeof NewClanForm>;
+
+const Template: ComponentStory<typeof NewClanForm> = (args) => {
+    return <NewClanForm {...args} />;
+};
+
+export const Default = Template.bind({});

frontend-next-migration/src/features/AddNewClan/ui/NewClanForm/NewClanForm.stories.tsx

@@ -1,5 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
 import MemoizedForm from './CustomForm';
+import { useState } from 'react';
+import { ClanLabel } from '@/entities/Clan/enum/clanLabel.enum';
+
 const meta = {
     title: 'shared/ui/CustomForm',
     component: MemoizedForm,
@@ -96,3 +99,20 @@ export const FormCheckbox: Story = {
         children: <MemoizedForm.Checkbox label="I agree to the terms" />,
     },
 };
+
+export const MultiSelectionDropdown: Story = {
+    render: () => {
+        const [selected, setSelected] = useState<{ label: any; value: any }[]>([]);
+
+        return (
+            <MemoizedForm.MultiSelectionDropdown
+                label="Labels"
+                options={ClanLabel}
+                defaultSelected={{ ITSENÄISET: ClanLabel.ITSENÄISET }}
+                maxSelections={5}
+                value={selected}
+                onSelectChange={(newSelection) => setSelected(newSelection)}
+            />
+        );
+    },
+};

frontend-next-migration/src/shared/ui/CustomForm/ui/CustomForm.stories.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React, {
     ReactNode,
     HTMLAttributes,
@@ -7,10 +8,13 @@ import React, {
     memo,
     DetailedHTMLProps,
     InputHTMLAttributes,
+    useState,
+    useEffect,
 } from 'react';
 import { Button as CustomButton, ButtonTheme } from '@/shared/ui/Button/Button';
 import { classNames } from '@/shared/lib/classNames/classNames';
 import cls from './CustomForm.module.scss';
+import { MultiSelect } from 'react-multi-select-component';
 
 /**
  * Header component for displaying a heading inside the form.
@@ -132,13 +136,107 @@ function Button({ children, className = '', ...props }: ButtonProps) {
     );
 }
 
+/**
+ * MultiSelectionDropdown component for rendering a multi-selection dropdown.
+ *
+ * 
+ * @param {MultiSelectionFieldProps} props - The properties for the MultiSelectionDropdown.
+ * options accepts Record<string, string> as a prop type and function convert it to { label: any; value: T }[] -form for MultiSelectionDropdown
+ * 
+ * @returns {JSX.Element} - The rendered multiselection component.
+ *
+ * @example
+ * const [selected, setSelected] = useState<{ label: any; value: any }[]>([]);
+ * 
+ *  <MemoizedForm.MultiSelectionDropdown
+        label='Clan labels'
+        options={ClanLabel}
+        defaultSelected={{ ITSENÄISET : ClanLabel.ITSENÄISET }}
+        maxSelections={5}
+        value={selected}
+        onSelectChange={(newSelection) => setSelected(newSelection)}
+    />
+ */
+
+type MultiSelectionFieldProps<T> = {
+    label: string;
+    className?: string;
+    inputProps?: DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+    options: Record<any, any>;
+    onSelectChange: (selected: { label: any; value: T }[]) => void;
+    error?: any;
+    maxSelections?: number;
+    defaultSelected?: Record<any, any>;
+    value: { label: any; value: T }[];
+};
+
+function MultiSelectionDropdown<T>({
+    label,
+    error,
+    maxSelections,
+    inputProps,
+    className = '',
+    value,
+    defaultSelected,
+    options,
+    onSelectChange,
+}: MultiSelectionFieldProps<T>) {
+    const inputId = inputProps?.id || `multiselect-${label}`;
+    const [selectionError, setSelectionError] = useState<string | null>(null);
+
+    const formattedOptions = Object.entries(options).map(([key, value]) => ({
+        label: value,
+        value: key,
+    }));
+
+    useEffect(() => {
+        if (defaultSelected && value.length === 0) {
+            const refactoredDefaults = Object.entries(defaultSelected).map(([key, value]) => ({
+                label: value,
+                value: key as T,
+            }));
+            onSelectChange(refactoredDefaults);
+        }
+    }, [defaultSelected, onSelectChange]);
+
+    const selectionLogic = (newSelection: { label: any; value: T }[]) => {
+        if (maxSelections && newSelection.length > maxSelections) {
+            setSelectionError(`Maximum of ${maxSelections} selections!`);
+        } else {
+            setSelectionError(null);
+            onSelectChange(newSelection);
+        }
+    };
+
+    return (
+        <div className={classNames(cls.field, {}, [className])}>
+            <label htmlFor={inputId}>{label}</label>
+            {(error || selectionError) && (
+                <p
+                    role="alert"
+                    className={cls.error}
+                >
+                    {error || selectionError}
+                </p>
+            )}
+            <MultiSelect
+                options={formattedOptions}
+                value={value}
+                onChange={selectionLogic}
+                labelledBy={label}
+            />
+        </div>
+    );
+}
+
 interface IFormProps extends HTMLAttributes<HTMLFormElement> {}
 
 interface MemoizedFormCompose {
     Button: typeof Button;
     Header: typeof Header;
     InputField: typeof InputField;
     Checkbox: typeof Checkbox;
+    MultiSelectionDropdown: typeof MultiSelectionDropdown;
 }
 
 /**
@@ -173,5 +271,6 @@ MemoizedForm.Button = Button;
 MemoizedForm.Header = Header;
 MemoizedForm.InputField = InputField;
 MemoizedForm.Checkbox = Checkbox;
+MemoizedForm.MultiSelectionDropdown = MultiSelectionDropdown;
 
 export default MemoizedForm;