pl-fe: remove unused code

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/pl-fe/src/features/forms/index.tsx

@@ -1,8 +1,7 @@
-import clsx from 'clsx';
-import React, { useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Multiselect } from 'pl-fe/components/ui/multiselect';
+import { Multiselect as Ms } from 'pl-fe/components/ui/multiselect';
 import Select from 'pl-fe/components/ui/select';
 
 const messages = defineMessages({
@@ -10,95 +9,6 @@ const messages = defineMessages({
   selectNoOptions: { id: 'select.no_options', defaultMessage: 'No options available' },
 });
 
-interface IInputContainer {
-  label?: React.ReactNode;
-  hint?: React.ReactNode;
-  required?: boolean;
-  type?: string;
-  extraClass?: string;
-  error?: boolean;
-  children: React.ReactNode;
-}
-
-const InputContainer: React.FC<IInputContainer> = (props) => {
-  const containerClass = clsx('input', {
-    'with_label': props.label,
-    'required': props.required,
-    'boolean': props.type === 'checkbox',
-    'field_with_errors': props.error,
-  }, props.extraClass);
-
-  return (
-    <div className={containerClass}>
-      {props.children}
-      {props.hint && <span className='hint'>{props.hint}</span>}
-    </div>
-  );
-};
-
-interface ILabelInputContainer {
-  label?: React.ReactNode;
-  hint?: React.ReactNode;
-  children: React.ReactNode;
-}
-
-const LabelInputContainer: React.FC<ILabelInputContainer> = ({ label, hint, children }) => {
-  const [id] = useState(crypto.randomUUID());
-  const childrenWithProps = React.Children.map(children, child => (
-    // @ts-ignore: not sure how to get the right type here
-    React.cloneElement(child, { id, key: id })
-  ));
-
-  return (
-    <div className='label_input'>
-      <label htmlFor={id}>{label}</label>
-      <div className='label_input__wrapper'>
-        {childrenWithProps}
-      </div>
-      {hint && <span className='hint'>{hint}</span>}
-    </div>
-  );
-};
-
-interface ILabelInput {
-  label?: React.ReactNode;
-}
-
-const LabelInput: React.FC<ILabelInput> = ({ label, ...props }) => (
-  <LabelInputContainer label={label}>
-    <input {...props} />
-  </LabelInputContainer>
-);
-
-interface ISimpleInput {
-  type: string;
-  label?: React.ReactNode;
-  hint?: React.ReactNode;
-  error?: boolean;
-  onChange?: React.ChangeEventHandler;
-  min?: number;
-  max?: number;
-  pattern?: string;
-  name?: string;
-  placeholder?: string;
-  value?: string | number;
-  autoComplete?: string;
-  autoCorrect?: string;
-  autoCapitalize?: string;
-  required?: boolean;
-}
-
-const SimpleInput: React.FC<ISimpleInput> = (props) => {
-  const { hint, error, ...rest } = props;
-  const Input = props.label ? LabelInput : 'input';
-
-  return (
-    <InputContainer {...props}>
-      <Input {...rest} />
-    </InputContainer>
-  );
-};
-
 interface ISelectDropdown {
   className?: string;
   label?: React.ReactNode;
@@ -115,12 +25,7 @@ const SelectDropdown: React.FC<ISelectDropdown> = (props) => {
     <option key={item} value={item}>{items[item]}</option>
   ));
 
-  // @ts-ignore
-  const selectElem = <Select {...rest}>{optionElems}</Select>;
-
-  return label ? (
-    <LabelInputContainer label={label} hint={hint}>{selectElem}</LabelInputContainer>
-  ) : selectElem;
+  return <Select {...rest}>{optionElems}</Select>;
 };
 
 interface IMultiselect {
@@ -133,9 +38,9 @@ interface IMultiselect {
   disabled?: boolean;
 }
 
-const Mutliselect: React.FC<IMultiselect> = (props) => {
+const Multiselect: React.FC<IMultiselect> = (props) => {
   const intl = useIntl();
-  const { label, hint, items, value, onChange, disabled } = props;
+  const { items, value, onChange, disabled } = props;
 
   const options = useMemo(() => Object.entries(items).map(([key, value]) => ({ key, value })), [items]);
   const selectedValues = value?.map(key => options.find(option => option.key === key)).filter(value => value);
@@ -144,8 +49,8 @@ const Mutliselect: React.FC<IMultiselect> = (props) => {
     onChange?.(values.map(({ key }) => key));
   };
 
-  const selectElem = (
-    <Multiselect
+  return (
+    <Ms
       className='plfe-multiselect'
       options={options}
       selectedValues={selectedValues}
@@ -157,37 +62,9 @@ const Mutliselect: React.FC<IMultiselect> = (props) => {
       emptyRecordMsg={intl.formatMessage(messages.selectNoOptions)}
     />
   );
-
-  return label ? (
-    <LabelInputContainer label={label} hint={hint}>{selectElem}</LabelInputContainer>
-  ) : selectElem;
-};
-
-const FileChooser : React.FC = (props) => (
-  <SimpleInput type='file' {...props} />
-);
-
-FileChooser.defaultProps = {
-  accept: ['image/jpeg', 'image/png', 'image/gif', 'image/webp'],
-};
-
-interface IFileChooserLogo {
-  label?: React.ReactNode;
-  hint?: React.ReactNode;
-  name?: string;
-  accept?: string[];
-  onChange: React.ChangeEventHandler<HTMLInputElement>;
-}
-
-const FileChooserLogo: React.FC<IFileChooserLogo> = props => (
-  <SimpleInput type='file' {...props} />
-);
-
-FileChooserLogo.defaultProps = {
-  accept: ['image/svg', 'image/png'],
 };
 
 export {
+  Multiselect,
   SelectDropdown,
-  Mutliselect,
 };

packages/pl-fe/src/features/preferences/index.tsx

@@ -8,7 +8,7 @@ import Button from 'pl-fe/components/ui/button';
 import Form from 'pl-fe/components/ui/form';
 import HStack from 'pl-fe/components/ui/hstack';
 import StepSlider from 'pl-fe/components/ui/step-slider';
-import { Mutliselect, SelectDropdown } from 'pl-fe/features/forms';
+import { Multiselect, SelectDropdown } from 'pl-fe/features/forms';
 import SettingToggle from 'pl-fe/features/settings/components/setting-toggle';
 import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
 import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
@@ -420,7 +420,7 @@ const Preferences = () => {
           </ListItem>
 
           <ListItem className='!overflow-visible' label={<FormattedMessage id='preferences.fields.known_languages_label' defaultMessage='Languages you know' />}>
-            <Mutliselect
+            <Multiselect
               className='max-w-[200px]'
               items={languages}
               value={settings.knownLanguages as string[] | undefined}

packages/pl-fe/src/locales/en.json

@@ -1632,8 +1632,6 @@
   "security.update_password.fail": "Update password failed.",
   "security.update_password.password_confirmation_no_match": "Passwords do not match.",
   "security.update_password.success": "Password successfully updated.",
-  "select.no_options": "No options available",
-  "select.placeholder": "Select",
   "select_bookmark_folder_modal.header_title": "Select folder",
   "settings.configure_mfa": "Configure MFA",
   "settings.edit_profile": "Edit profile",