Remove defunct form components (#41902)

* remove defunct form components

* fix lil type errros

frontend/src/metabase/components/form/FormikFormField/FormFieldDescription.tsx

-interface FormFieldDescriptionProps {
-  className: string;
-  description: string;
-}
-
-export const FormFieldDescription = ({
-  className,
-  description,
-}: FormFieldDescriptionProps) => {
-  if (typeof description === "string") {
-    return (
-      <div
-        className={className}
-        dangerouslySetInnerHTML={{
-          __html: description,
-        }}
-      />
-    );
-  }
-  return <div className={className}>{description}</div>;
-};

frontend/src/metabase/components/form/FormikFormField/FormFieldView.tsx

-import cx from "classnames";
-import type * as React from "react";
-
-import PopoverS from "metabase/components/Popover/Popover.module.css";
-import Tooltip from "metabase/core/components/Tooltip";
-import FormS from "metabase/css/components/form.module.css";
-import CS from "metabase/css/core/index.css";
-import type { BaseFieldDefinition } from "metabase-types/forms";
-
-import {
-  FieldRow,
-  Label,
-  InfoIcon,
-  InputContainer,
-  FieldContainer,
-  InfoLabel,
-} from "./FormField.styled";
-import { FormFieldDescription } from "./FormFieldDescription";
-
-interface FormFieldViewProps extends BaseFieldDefinition {
-  fieldId: string;
-  error?: string;
-  className?: string;
-  standAloneLabel?: boolean;
-  children: React.ReactNode;
-}
-
-function FormFieldView({
-  fieldId,
-  className,
-  name,
-  error,
-  title,
-  description,
-  descriptionPosition,
-  info,
-  infoLabel,
-  infoLabelTooltip,
-  align,
-  horizontal,
-  standAloneLabel,
-  children,
-}: FormFieldViewProps) {
-  return (
-    <div
-      id={fieldId}
-      data-testid="form-field"
-      className={cx(FormS.FormField, PopoverS.FormField, className, {
-        [FormS.FormFieldError]: !!error,
-        [CS.flex]: horizontal,
-      })}
-    >
-      {align === "left" && <InputContainer>{children}</InputContainer>}
-      {(title || description) && (
-        <FieldContainer horizontal={horizontal} align={align}>
-          <FieldRow>
-            {title && (
-              <Label
-                id={`${name}-label`}
-                htmlFor={name}
-                horizontal={horizontal}
-                standAlone={standAloneLabel}
-              >
-                {title}
-                {error && <span className={CS.textError}>: {error}</span>}
-              </Label>
-            )}
-            {info && (
-              <Tooltip tooltip={info}>
-                <InfoIcon name="info" size={12} />
-              </Tooltip>
-            )}
-            {infoLabel && (
-              <Tooltip tooltip={infoLabelTooltip} maxWidth="100%">
-                <InfoLabel>{infoLabel}</InfoLabel>
-              </Tooltip>
-            )}
-          </FieldRow>
-          {description && descriptionPosition === "top" && (
-            <FormFieldDescription
-              className={CS.mb1}
-              description={description}
-            />
-          )}
-        </FieldContainer>
-      )}
-      {align !== "left" && <InputContainer>{children}</InputContainer>}
-      {description && descriptionPosition === "bottom" && (
-        <FormFieldDescription className={CS.mt1} description={description} />
-      )}
-    </div>
-  );
-}
-
-// eslint-disable-next-line import/no-default-export -- deprecated usage
-export default FormFieldView;

frontend/src/metabase/components/form/FormikFormField/index.ts

-// eslint-disable-next-line import/no-default-export -- deprecated usage
-export { default } from "./FormField";

frontend/src/metabase/components/form/FormikStandardForm.tsx

-import { t } from "ttag";
-
-import type { BaseFieldValues } from "metabase-types/forms";
-
-import CustomForm from "./FormikCustomForm";
-import type { CustomFormFooterProps } from "./FormikCustomForm/CustomFormFooter";
-import type { BaseFormProps } from "./FormikCustomForm/types";
-
-interface Props<Values extends BaseFieldValues>
-  extends BaseFormProps<Values>,
-    CustomFormFooterProps {
-  submitFullWidth?: boolean;
-  onClose?: () => void;
-}
-
-/**
- * @deprecated
- */
-function StandardForm<Values extends BaseFieldValues>({
-  submitTitle,
-  submitFullWidth,
-  onClose,
-  ...props
-}: Props<Values>) {
-  return (
-    <CustomForm {...props}>
-      {({ values, formFields, Form, FormField, FormFooter }) => (
-        <Form>
-          {formFields.map(formField => (
-            <FormField key={formField.name} name={formField.name} />
-          ))}
-          <FormFooter
-            isModal={props.isModal}
-            footerExtraButtons={props.footerExtraButtons}
-            onCancel={onClose}
-            submitTitle={
-              submitTitle || (values.id != null ? t`Update` : t`Create`)
-            }
-            fullWidth={submitFullWidth}
-          />
-        </Form>
-      )}
-    </CustomForm>
-  );
-}
-
-// eslint-disable-next-line import/no-default-export -- deprecated usage
-export default StandardForm;

frontend/src/metabase/components/form/widgets/FormBooleanWidget.jsx

-/* eslint-disable react/prop-types */
-import Toggle from "metabase/core/components/Toggle";
-
-const FormBooleanWidget = ({ field }) => (
-  <Toggle
-    aria-labelledby={`${field.name}-label`}
-    aria-checked={field.value}
-    role="switch"
-    {...field}
-  />
-);
-
-export default FormBooleanWidget;

frontend/src/metabase/components/form/widgets/FormCheckBoxWidget.jsx

-/* eslint-disable react/prop-types */
-import CheckBox from "metabase/core/components/CheckBox";
-import { formDomOnlyProps } from "metabase/lib/redux";
-
-const FormCheckBoxWidget = ({ field }) => (
-  <CheckBox
-    {...formDomOnlyProps(field)}
-    checked={field.value}
-    onChange={e => field.onChange(e.target.checked)}
-  />
-);
-
-export default FormCheckBoxWidget;

frontend/src/metabase/components/form/widgets/FormCollectionWidget.jsx

-/* eslint-disable react/prop-types */
-import CollectionSelect from "metabase/containers/CollectionSelect";
-
-const FormCollectionWidget = ({ field }) => <CollectionSelect {...field} />;
-
-export default FormCollectionWidget;

frontend/src/metabase/components/form/widgets/FormColorWidget.jsx

-/* eslint-disable react/prop-types */
-import ColorSelector from "metabase/core/components/ColorSelector";
-import { getAccentColors } from "metabase/lib/colors/groups";
-
-const FormColorWidget = ({ field, initial }) => (
-  <div>
-    <ColorSelector
-      {...field}
-      value={field.value || initial()}
-      colors={getAccentColors()}
-    />
-  </div>
-);
-
-export default FormColorWidget;

frontend/src/metabase/components/form/widgets/FormEmailWidget.jsx

-import FormInputWidget from "./FormInputWidget";
-
-const FormEmailWidget = props => <FormInputWidget {...props} type="email" />;
-
-export default FormEmailWidget;

frontend/src/metabase/components/form/widgets/FormHiddenWidget.jsx

-/* eslint-disable react/prop-types */
-import { formDomOnlyProps } from "metabase/lib/redux";
-
-const FormHiddenWidget = ({ type = "hidden", field }) => (
-  <input type={type} {...formDomOnlyProps(field)} />
-);
-
-export default FormHiddenWidget;

frontend/src/metabase/components/form/widgets/FormInfoWidget.jsx

-import PropTypes from "prop-types";
-
-import Banner from "metabase/components/Banner";
-
-const propTypes = {
-  placeholder: PropTypes.string,
-};
-
-const FormInfoWidget = ({ placeholder }) => <Banner>{placeholder}</Banner>;
-
-FormInfoWidget.propTypes = propTypes;
-
-export default FormInfoWidget;

frontend/src/metabase/components/form/widgets/FormInputWidget.jsx

-import PropTypes from "prop-types";
-import { forwardRef } from "react";
-
-import Input from "metabase/core/components/Input";
-import { formDomOnlyProps } from "metabase/lib/redux";
-
-// Important: do NOT use this as an input of type="file"
-// For file inputs, See component FormTextFileWidget.tsx
-
-const propTypes = {
-  type: PropTypes.string,
-  placeholder: PropTypes.string,
-  field: PropTypes.object,
-  readOnly: PropTypes.bool,
-  autoFocus: PropTypes.bool,
-  helperText: PropTypes.node,
-  tabIndex: PropTypes.string,
-  subtitle: PropTypes.string,
-};
-
-const FormInputWidget = forwardRef(function FormInputWidget(
-  {
-    type = "text",
-    placeholder,
-    field,
-    readOnly,
-    autoFocus,
-    helperText,
-    tabIndex,
-    subtitle,
-  },
-  ref,
-) {
-  return (
-    <Input
-      {...formDomOnlyProps(field)}
-      type={type}
-      placeholder={placeholder}
-      aria-labelledby={`${field.name}-label`}
-      readOnly={readOnly}
-      autoFocus={autoFocus}
-      error={field.visited && !field.active && field.error != null}
-      rightIcon={helperText && "info"}
-      rightIconTooltip={helperText}
-      tabIndex={tabIndex}
-      fullWidth
-      subtitle={subtitle}
-      ref={ref}
-    />
-  );
-});
-
-FormInputWidget.propTypes = propTypes;
-
-export default FormInputWidget;

frontend/src/metabase/components/form/widgets/FormNumericInputWidget.jsx

-/* eslint-disable react/prop-types */
-import cx from "classnames";
-
-import NumericInput from "metabase/components/NumericInput";
-import FormS from "metabase/css/components/form.module.css";
-import CS from "metabase/css/core/index.css";
-import { formDomOnlyProps } from "metabase/lib/redux";
-
-const FormInputWidget = ({ placeholder, field }) => (
-  <NumericInput
-    className={cx(FormS.FormInput, CS.full)}
-    placeholder={placeholder}
-    aria-labelledby={`${field.name}-label`}
-    {...formDomOnlyProps(field)}
-  />
-);
-
-export default FormInputWidget;

frontend/src/metabase/components/form/widgets/FormPasswordWidget.jsx

-import FormInputWidget from "./FormInputWidget";
-
-const FormPasswordWidget = props => (
-  <FormInputWidget {...props} type="password" />
-);
-
-export default FormPasswordWidget;

frontend/src/metabase/components/form/widgets/FormRadioWidget.jsx

-import styled from "@emotion/styled";
-import PropTypes from "prop-types";
-
-import Radio from "metabase/core/components/Radio";
-
-const StyledRadio = styled(Radio)`
-  font-weight: bold;
-`;
-
-const propTypes = {
-  field: PropTypes.object.isRequired,
-  options: PropTypes.array.isRequired,
-};
-
-function FormRadioWidget({ field, options }) {
-  return <StyledRadio showButtons vertical {...field} options={options} />;
-}
-
-FormRadioWidget.propTypes = propTypes;
-
-export default FormRadioWidget;

frontend/src/metabase/components/form/widgets/FormSectionWidget/FormSectionWidget.styled.tsx

-import styled from "@emotion/styled";
-
-import Button from "metabase/core/components/Button";
-import { color } from "metabase/lib/colors";
-
-export const WidgetButton = styled(Button)`
-  color: ${color("brand")};
-  padding: 0;
-  border: none;
-  border-radius: 0;
-
-  &:hover {
-    background-color: transparent;
-  }
-`;

frontend/src/metabase/components/form/widgets/FormSectionWidget/FormSectionWidget.tsx

-import { useCallback } from "react";
-import { t } from "ttag";
-
-import { WidgetButton } from "./FormSectionWidget.styled";
-import type { FormField } from "./types";
-
-export interface FormSectionWidgetProps {
-  field: FormField;
-}
-
-const FormSectionWidget = ({ field }: FormSectionWidgetProps): JSX.Element => {
-  const { value, onChange } = field;
-
-  const handleClick = useCallback(() => {
-    onChange(!value);
-  }, [value, onChange]);
-
-  return (
-    <WidgetButton
-      type="button"
-      iconRight={value ? "chevronup" : "chevrondown"}
-      onClick={handleClick}
-    >
-      {value ? t`Hide advanced options` : t`Show advanced options`}
-    </WidgetButton>
-  );
-};
-
-// eslint-disable-next-line import/no-default-export -- deprecated usage
-export default FormSectionWidget;

frontend/src/metabase/components/form/widgets/FormSectionWidget/index.ts

-// eslint-disable-next-line import/no-default-export -- deprecated usage
-export { default } from "./FormSectionWidget";

frontend/src/metabase/components/form/widgets/FormSectionWidget/types.ts

-export interface FormField {
-  value: boolean;
-  onChange: (value: boolean) => void;
-}

frontend/src/metabase/components/form/widgets/FormSelectWidget.jsx

-/* eslint-disable react/prop-types */
-import Select, { Option } from "metabase/core/components/Select";
-
-const FormSelectWidget = ({ placeholder, options = [], field, disabled }) => (
-  <Select
-    placeholder={placeholder}
-    {...field}
-    // react-redux expects to be raw value
-    onChange={e => field.onChange(e.target.value)}
-    disabled={disabled}
-    buttonProps={{ style: { minWidth: 200 } }}
-  >
-    {options.map(({ name, value, icon }) => (
-      <Option key={value} value={value} icon={icon}>
-        {name}
-      </Option>
-    ))}
-  </Select>
-);
-
-export default FormSelectWidget;