✨ feat: add Input

src/ActionIcon/index.tsx

@@ -80,7 +80,7 @@ const ActionIcon = memo<ActionIconProps>(
         borderRadius = 5;
         break;
       case 'small':
-        blockSize = 28;
+        blockSize = 24;
         borderRadius = 5;
         break;
       case 'site':
@@ -99,7 +99,7 @@ const ActionIcon = memo<ActionIconProps>(
         style={{ width: blockSize, height: blockSize, borderRadius, ...style }}
         {...props}
       >
-        <Icon size={size === 'site' ? 'small' : size} icon={icon} />
+        <Icon size={size === 'site' ? 'normal' : size} icon={icon} />
       </div>
     );
 

src/EditableMessage/demos/index.tsx

@@ -1,21 +1,30 @@
-import { EditableMessage } from '@lobehub/ui';
-import { Button, Divider } from 'antd';
+import { EditableMessage, StroyBook, useControls, useCreateStore } from '@lobehub/ui';
+import { button } from 'leva';
 import { useState } from 'react';
-import { Flexbox } from 'react-layout-kit';
 
 export default () => {
+  const [openModal, setOpenModal] = useState(false);
   const [editing, setEdit] = useState(false);
+  const store = useCreateStore();
+  useControls(
+    {
+      editing: button(() => {
+        setEdit(true);
+      }),
+      openModal: button(() => {
+        setOpenModal(true);
+      }),
+    },
+    { store },
+  );
   return (
-    <Flexbox width={400}>
-      <Button
-        onClick={() => {
-          setEdit(true);
-        }}
-      >
-        编辑
-      </Button>
-      <Divider />
-      <EditableMessage value={'editable text'} editing={editing} onEditingChange={setEdit} />
-    </Flexbox>
+    <StroyBook levaStore={store}>
+      <EditableMessage
+        value={'editable text'}
+        openModal={openModal}
+        editing={editing}
+        onEditingChange={setEdit}
+      />
+    </StroyBook>
   );
 };

src/EditableMessage/index.md

@@ -7,7 +7,7 @@ description: EditableMessage
 
 ## Default
 
-<code src="./demos/index.tsx" center></code>
+<code src="./demos/index.tsx" nopadding></code>
 
 ## APIs
 

src/EditableMessageList/index.tsx

@@ -1,15 +1,13 @@
+import IconAction from '@/ActionIcon';
+import { ChatMessage, messagesReducer } from '@/Chat';
+import { ControlInput } from '@/components/ControlInput';
 import { PlusOutlined } from '@ant-design/icons';
 import { Button, Select } from 'antd';
 import isEqual from 'fast-deep-equal';
+import { TrashIcon } from 'lucide-react';
 import { memo, useEffect, useReducer } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import IconAction from '@/ActionIcon';
-import { ChatMessage, messagesReducer } from '@/Chat';
-import { ControlInput } from '@/components/ControlInput';
-
-import { TrashIcon } from 'lucide-react';
-
 export interface EditableMessageListProps {
   dataSources: ChatMessage[];
   onChange?: (chatMessages: ChatMessage[]) => void;
@@ -60,8 +58,8 @@ export const EditableMessageList = memo<EditableMessageListProps>(
             />
             <IconAction
               icon={TrashIcon}
-              title={'删除'}
-              size={'small'}
+              placement="right"
+              title="Delete"
               onClick={() => {
                 dispatch({ type: 'deleteMessage', index });
               }}

src/EditableText/index.tsx

@@ -23,7 +23,7 @@ const EditableText = memo<EditableTextProps>(({ value, onChange }: ControlInputP
         title={'Edit'}
         placement="right"
         icon={Edit3}
-        size={{ fontSize: 14, blockSize: 24 }}
+        size="small"
         onClick={() => {
           setEdited(!edited);
         }}

src/Icon/index.tsx

@@ -1,3 +1,4 @@
+import { SvgProps } from '@/types';
 import { LucideIcon } from 'lucide-react';
 import { FC, memo } from 'react';
 
@@ -29,12 +30,15 @@ const Icon: FC<IconProps> = ({ icon, size = 'normal', ...props }) => {
   const SvgIcon = icon;
   switch (size) {
     case 'large':
-    case 'normal':
       fontSize = 24;
       strokeWidth = 2;
       break;
-    case 'small':
+    case 'normal':
       fontSize = 20;
+      strokeWidth = 2;
+      break;
+    case 'small':
+      fontSize = 14;
       strokeWidth = 1.5;
       break;
     default:

src/Input/demos/TextArea.tsx

@@ -0,0 +1,20 @@
+import { StroyBook, TextArea, TextAreaProps, useControls, useCreateStore } from '@lobehub/ui';
+
+export default () => {
+  const store = useCreateStore();
+  const controls: TextAreaProps | any = useControls(
+    {
+      placeholder: 'Type keywords...',
+      type: {
+        value: 'ghost',
+        options: ['ghost', 'block'],
+      },
+    },
+    { store },
+  );
+  return (
+    <StroyBook levaStore={store}>
+      <TextArea {...controls} />
+    </StroyBook>
+  );
+};

src/Input/demos/index.tsx

@@ -0,0 +1,20 @@
+import { Input, InputProps, StroyBook, useControls, useCreateStore } from '@lobehub/ui';
+
+export default () => {
+  const store = useCreateStore();
+  const controls: InputProps | any = useControls(
+    {
+      placeholder: 'Type keywords...',
+      type: {
+        value: 'ghost',
+        options: ['ghost', 'block'],
+      },
+    },
+    { store },
+  );
+  return (
+    <StroyBook levaStore={store}>
+      <Input {...controls} />
+    </StroyBook>
+  );
+};

src/Input/index.md

@@ -0,0 +1,20 @@
+---
+nav: Components
+group: Common
+title: Input
+description: A basic widget for getting the user input is a text field. Keyboard and mouse can be used for providing or changing data.
+---
+
+## Default
+
+The rest of the props of Input are exactly the same as the original [input](https://ant.design/components/input).
+
+<code src="./demos/index.tsx" nopadding></code>
+
+## TextArea
+
+<code src="./demos/TextArea.tsx" nopadding></code>
+
+## APIs
+
+<API></API>

src/Input/index.tsx

@@ -0,0 +1,23 @@
+import { Input as AntInput, InputProps as AntdInputProps } from 'antd';
+import { TextAreaProps as AntdTextAreaProps } from 'antd/es/input/TextArea';
+import { memo } from 'react';
+import { useStyles } from './style';
+export interface InputProps extends AntdInputProps {
+  ref?: any;
+  type?: 'ghost' | 'block';
+}
+
+export const Input = memo<InputProps>(({ className, type = 'ghost', ...props }) => {
+  const { styles, cx } = useStyles({ type });
+  return <AntInput className={cx(styles.input, className)} {...props} />;
+});
+
+export interface TextAreaProps extends AntdTextAreaProps {
+  ref?: any;
+  type?: 'ghost' | 'block';
+}
+
+export const TextArea = memo<TextAreaProps>(({ className, type = 'ghost', ...props }) => {
+  const { styles, cx } = useStyles({ type });
+  return <AntInput.TextArea className={cx(styles.textarea, className)} {...props} />;
+});

src/Input/style.ts

@@ -0,0 +1,44 @@
+import { createStyles } from 'antd-style';
+import { rgba } from 'polished';
+
+export const useStyles = createStyles(({ css, token }, { type }: { type: 'ghost' | 'block' }) => ({
+  input: css`
+    position: relative;
+
+    max-width: 100%;
+    height: 36px;
+    padding: 0 12px;
+
+    background-color: ${type === 'block' ? rgba(token.colorBgElevated, 0.6) : 'transparent'};
+    border: 1px solid ${type === 'block' ? 'transparent' : token.colorBorder};
+
+    transition: background-color 100ms ${token.motionEaseOut};
+
+    input {
+      background: transparent;
+    }
+
+    &:hover {
+      background-color: ${token.colorFillTertiary};
+    }
+  `,
+  textarea: css`
+    position: relative;
+
+    max-width: 100%;
+    padding: 8px 12px;
+
+    background-color: ${type === 'block' ? rgba(token.colorBgElevated, 0.6) : 'transparent'};
+    border: 1px solid ${type === 'block' ? 'transparent' : token.colorBorder};
+
+    transition: background-color 100ms ${token.motionEaseOut};
+
+    textarea {
+      background: transparent;
+    }
+
+    &:hover {
+      background-color: ${token.colorFillTertiary};
+    }
+  `,
+}));

src/Logo/Logo3D.tsx

@@ -1,3 +1,4 @@
+import { ImgProps } from '@/types';
 import { memo } from 'react';
 
 const Logo3D = memo<ImgProps | any>(({ ...props }) => (

src/Logo/LogoFlat.tsx

@@ -1,3 +1,4 @@
+import { SvgProps } from '@/types';
 import { memo } from 'react';
 
 const LogoFlat = memo<SvgProps | any>(({ ...props }) => (

src/Logo/LogoHighContrast.tsx

@@ -1,3 +1,4 @@
+import { SvgProps } from '@/types';
 import { memo } from 'react';
 
 const LogoHighContrast = memo<SvgProps | any>(({ ...props }) => (

src/Logo/LogoText.tsx

@@ -1,3 +1,4 @@
+import { SvgProps } from '@/types';
 import { memo } from 'react';
 
 const LogoText = memo<SvgProps | any>(({ ...props }) => (

src/MessageInput/index.tsx

@@ -1,4 +1,5 @@
-import { Button, ButtonProps, Input } from 'antd';
+import { TextArea, type TextAreaProps } from '@/index';
+import { Button, ButtonProps } from 'antd';
 import { cx } from 'antd-style';
 import { memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -33,17 +34,18 @@ export interface MessageInputProps {
   renderButtons?: (text: string) => ButtonProps[];
   height?: number;
   className?: string;
+  type?: TextAreaProps['type'];
 }
 
 const MessageInput = memo<MessageInputProps>(
-  ({ onCancel, defaultValue, onConfirm, renderButtons, height, className }) => {
+  ({ type, onCancel, defaultValue, onConfirm, renderButtons, height, className }) => {
     const [tempSystemRole, setRole] = useState<string>(defaultValue || '');
 
     return (
       <Flexbox gap={8}>
-        <Input.TextArea
+        <TextArea
+          type={type}
           value={tempSystemRole}
-          allowClear
           placeholder={'例如：你是一名擅长翻译的翻译官，请将用户所输入的英文都翻译为中文。'}
           style={{ height: height ?? 200 }}
           onChange={(e) => {
@@ -59,16 +61,16 @@ const MessageInput = memo<MessageInputProps>(
           ) : (
             <>
               <Button
-                type={'primary'}
+                type="primary"
                 onClick={() => {
                   onConfirm?.(tempSystemRole);
                 }}
               >
-                设定
+                Confirm
               </Button>
 
-              <Button type={'text'} onClick={onCancel}>
-                取消
+              <Button type="text" onClick={onCancel}>
+                Cancel
               </Button>
             </>
           )}

src/SearchBar/index.md

@@ -7,6 +7,8 @@ description: SearchBar that includes an input field with a search icon and clear
 
 ## Default
 
+The rest of the props of Input are exactly the same as the original [input](https://ant.design/components/input).
+
 <code src="./demos/index.tsx" nopadding></code>
 
 ## APIs