refactor: refactor text input component (#677)

Co-authored-by: nina992 <nouralali992@gmail.com>

web/src/beta/components/fields/PropertyFields/index.tsx

@@ -4,7 +4,7 @@ import NumberField from "@reearth/beta/components/fields/NumberField";
 import SelectField from "@reearth/beta/components/fields/SelectField";
 import SliderField from "@reearth/beta/components/fields/SliderField";
 import SpacingInput, { SpacingValues } from "@reearth/beta/components/fields/SpacingInput";
-import TextInput from "@reearth/beta/components/fields/TextInput";
+import TextInput from "@reearth/beta/components/fields/TextField";
 import ToggleField from "@reearth/beta/components/fields/ToggleField";
 import { type LatLng } from "@reearth/beta/utils/value";
 import { type Item } from "@reearth/services/api/propertyApi/utils";

web/src/beta/components/fields/TextField/index.stories.tsx

@@ -0,0 +1,26 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import TextField, { Props } from "./index";
+
+const meta: Meta<Props> = {
+  component: TextField,
+};
+
+export default meta;
+type Story = StoryObj<typeof TextField>;
+
+export const Default: Story = {
+  args: {
+    name: "Text input field",
+    value: "Text field",
+    description: "The text input description",
+  },
+};
+
+export const WithPlaceholder: Story = {
+  args: {
+    placeholder: "Text Input",
+    name: "Text input field",
+    description: "The text input description",
+  },
+};

web/src/beta/components/fields/TextField/index.tsx

@@ -0,0 +1,29 @@
+import TextInput from "@reearth/beta/components/fields/common/TextInput";
+
+import Property from "..";
+
+export type Props = {
+  name?: string;
+  description?: string;
+  value?: string;
+  placeholder?: string;
+  timeout?: number;
+  onChange?: (text: string) => void;
+};
+
+const TextField: React.FC<Props> = ({
+  name,
+  description,
+  value,
+  placeholder,
+  timeout,
+  onChange,
+}) => {
+  return (
+    <Property name={name} description={description}>
+      <TextInput value={value} placeholder={placeholder} onChange={onChange} timeout={timeout} />
+    </Property>
+  );
+};
+
+export default TextField;

web/src/beta/components/fields/common/TextInput/index.stories.tsx

@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import TextInput, { Props } from "./index";
+
+const meta: Meta<Props> = {
+  component: TextInput,
+};
+
+export default meta;
+type Story = StoryObj<typeof TextInput>;
+
+export const Default: Story = {
+  args: {
+    value: "Text Input",
+  },
+};
+
+export const WithPlaceholder: Story = {
+  args: {
+    placeholder: "Text Input",
+  },
+};

web/src/beta/components/fields/TextInput/index.tsx → web/src/beta/components/fields/common/TextInput/index.tsx

@@ -2,17 +2,14 @@ import { useCallback, useEffect, useRef, useState } from "react";
 
 import { styled } from "@reearth/services/theme";
 
-import Property from "..";
-
-type Props = {
-  name?: string;
-  description?: string;
+export type Props = {
   value?: string;
+  placeholder?: string;
   timeout?: number;
   onChange?: (text: string) => void;
 };
 
-const TextInput: React.FC<Props> = ({ name, description, value, timeout = 1000, onChange }) => {
+const TextInput: React.FC<Props> = ({ value, placeholder, timeout = 1000, onChange }) => {
   const [currentValue, setCurrentValue] = useState(value ?? "");
   const timeoutRef = useRef<NodeJS.Timeout>();
 
@@ -50,14 +47,13 @@ const TextInput: React.FC<Props> = ({ name, description, value, timeout = 1000,
   );
 
   return (
-    <Property name={name} description={description}>
-      <StyledInput
-        value={currentValue ?? ""}
-        onChange={handleChange}
-        onBlur={handleBlur}
-        onKeyDown={handleKeyDown}
-      />
-    </Property>
+    <StyledInput
+      value={currentValue ?? ""}
+      placeholder={placeholder}
+      onChange={handleChange}
+      onBlur={handleBlur}
+      onKeyDown={handleKeyDown}
+    />
   );
 };
 

web/src/beta/features/Editor/tabs/widgets/RightPanel/ContainerSettings/index.tsx

@@ -1,4 +1,4 @@
-import TextInput from "@reearth/beta/components/fields/TextInput";
+import TextInput from "@reearth/beta/components/fields/TextField";
 import SidePanelSectionField from "@reearth/beta/components/SidePanelSectionField";
 import { WidgetAreaPadding, WidgetAreaState } from "@reearth/services/state";
 

web/src/beta/features/ProjectSettings/innerPages/GeneralSettings/index.tsx

@@ -2,7 +2,7 @@ import { useCallback, useState, useMemo } from "react";
 
 import Button from "@reearth/beta/components/Button";
 import Collapse from "@reearth/beta/components/Collapse";
-import TextInput from "@reearth/beta/components/fields/TextInput";
+import TextInput from "@reearth/beta/components/fields/TextField";
 import Modal from "@reearth/beta/components/Modal";
 import Text from "@reearth/beta/components/Text";
 import { useT } from "@reearth/services/i18n";

web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PublicRepo/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import Button from "@reearth/beta/components/Button";
-import TextInput from "@reearth/beta/components/fields/TextInput";
+import TextInput from "@reearth/beta/components/fields/TextField";
 import { Icons } from "@reearth/beta/components/Icon";
 import Loading from "@reearth/beta/components/Loading";
 import Modal from "@reearth/beta/components/Modal";

web/src/beta/features/ProjectSettings/innerPages/PublicSettings/PublicSettingsDetail.tsx

@@ -2,7 +2,7 @@ import { useCallback, useState } from "react";
 
 import Button from "@reearth/beta/components/Button";
 import Collapse from "@reearth/beta/components/Collapse";
-import TextInput from "@reearth/beta/components/fields/TextInput";
+import TextInput from "@reearth/beta/components/fields/TextField";
 import { useT } from "@reearth/services/i18n";
 
 import { SettingsFields, ButtonWrapper } from "../common";