refactor: Move <FormInput/> to @chainlit/components

Chainlit · Sep 6, 2023 · 940ff2b · 940ff2b
1 parent bcccbc8
commit 940ff2b
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 27 deletions.
diff --git a/frontend/src/components/organisms/chat/settings.tsx b/frontend/src/components/organisms/chat/settings.tsx
@@ -10,6 +10,8 @@ import {
   DialogTitle
 } from '@mui/material';
 
+import { FormInput, TFormInputValue } from '@chainlit/components';
+
 import AccentButton from 'components/atoms/buttons/accentButton';
 import RegularButton from 'components/atoms/buttons/button';
 
@@ -20,8 +22,6 @@ import {
   sessionState
 } from 'state/chat';
 
-import FormInput, { TFormInputValue } from '../FormInput';
-
 export default function ChatSettingsModal() {
   const session = useRecoilValue(sessionState);
   const [chatSettings, setChatSettings] = useRecoilState(chatSettingsState);

diff --git a/frontend/src/components/organisms/playground/modelSettings.tsx b/frontend/src/components/organisms/playground/modelSettings.tsx
@@ -16,14 +16,18 @@ import {
   Typography
 } from '@mui/material';
 
-import { SelectInput } from '@chainlit/components';
+import {
+  FormInput,
+  SelectInput,
+  TFormInput,
+  TFormInputValue
+} from '@chainlit/components';
 
 import { playgroundState } from 'state/playground';
 
 import { ILLMSettings } from 'types/chat';
 import { ILLMProvider } from 'types/playground';
 
-import FormInput, { TFormInput, TFormInputValue } from '../FormInput';
 import { getProviders } from './helpers';
 
 type Schema = {

diff --git a/frontend/src/pages/Design.tsx b/frontend/src/pages/Design.tsx
@@ -5,12 +5,11 @@ import { useRecoilState } from 'recoil';
 import { Typography } from '@mui/material';
 import Box from '@mui/material/Box';
 
-import { InputLabel } from '@chainlit/components';
+import { FormInput, InputLabel } from '@chainlit/components';
 import { useIsDarkMode } from '@chainlit/components/hooks';
 import { green, grey, primary } from '@chainlit/components/theme';
 
 import Toggle from 'components/atoms/toggle';
-import FormInput from 'components/organisms/FormInput';
 
 import { settingsState } from 'state/settings';
 

diff --git a/...nd/src/components/organisms/FormInput.tsx → libs/components/src/inputs/FormInput.tsx b/...nd/src/components/organisms/FormInput.tsx → libs/components/src/inputs/FormInput.tsx
@@ -1,38 +1,31 @@
-import omit from 'lodash/omit';
+import { IInput } from '../types/Input';
 
-import {
-  IInput,
-  SelectInput,
-  SelectInputProps,
-  SliderInput,
-  SliderInputProps,
-  TagsInput,
-  TagsInputProps,
-  TextInput,
-  TextInputProps
-} from '@chainlit/components';
+import omit from '../../utils/omit';
+import { SliderInput, SliderInputProps } from './SliderInput';
+import { SwitchInput, SwitchInputProps } from './SwitchInput';
+import { TagsInput, TagsInputProps } from './TagsInput';
+import { TextInput, TextInputProps } from './TextInput';
+import { SelectInput, SelectInputProps } from './selects/SelectInput';
 
-import Switch, { SwitchProps } from 'components/atoms/switch';
+type TFormInputValue = string | number | boolean | string[] | undefined;
 
-export type TFormInputValue = string | number | boolean | string[] | undefined;
-
-export interface IFormInput<T, V extends TFormInputValue> extends IInput {
+interface IFormInput<T, V extends TFormInputValue> extends IInput {
   type: T;
   value?: V;
   initial?: V;
   setField?(field: string, value: V, shouldValidate?: boolean): void;
 }
 
-export type TFormInput =
-  | (Omit<SwitchProps, 'checked'> & IFormInput<'switch', boolean>)
+type TFormInput =
+  | (Omit<SwitchInputProps, 'checked'> & IFormInput<'switch', boolean>)
   | (Omit<SliderInputProps, 'value'> & IFormInput<'slider', number>)
   | (Omit<SelectInputProps, 'value'> & IFormInput<'select', string>)
   | (Omit<TextInputProps, 'value'> & IFormInput<'textinput', string>)
   | (Omit<TextInputProps, 'value'> & IFormInput<'numberinput', number>)
   | (Omit<TagsInputProps, 'value'> & IFormInput<'tags', string[]>);
 
 const FormInput = ({ element }: { element: TFormInput }): JSX.Element => {
-  switch (element.type) {
+  switch (element?.type) {
     case 'select':
       // We omit the 'setField' prop to avoid React warnings and ensure it's available for <Tags/>.
       return (
@@ -47,7 +40,7 @@ const FormInput = ({ element }: { element: TFormInput }): JSX.Element => {
       return <TagsInput {...element} value={element.value ?? []} />;
     case 'switch':
       return (
-        <Switch
+        <SwitchInput
           {...omit(element, 'setField')}
           checked={!!element.value}
           inputProps={{
@@ -76,4 +69,5 @@ const FormInput = ({ element }: { element: TFormInput }): JSX.Element => {
   }
 };
 
-export default FormInput;
+export { FormInput };
+export type { IFormInput, TFormInput, TFormInputValue };
diff --git a/libs/components/src/inputs/index.tsx b/libs/components/src/inputs/index.tsx
@@ -1,3 +1,4 @@
+export { FormInput } from './FormInput';
 export { InputLabel } from './InputLabel';
 export { InputStateHandler } from './InputStateHandler';
 export { SelectCategoryInput } from './selects/SelectCategoryInput';
@@ -7,6 +8,7 @@ export { SwitchInput } from './SwitchInput';
 export { TagsInput } from './TagsInput';
 export { TextInput } from './TextInput';
 
+export type { IFormInput, TFormInput, TFormInputValue } from './FormInput';
 export type { SelectInputProps, SelectItem } from './selects/SelectInput';
 export type { SliderInputProps } from './SliderInput';
 export type { SwitchInputProps } from './SwitchInput';